Lecture Notes Of Day 11 - Advanced Blade Features

 

Lecture Notes Of Day 11  

Advanced Blade Features

Objective

Understand and implement advanced Blade templating features to create modular and reusable views.

Expected Outcome

By the end of this session, students will:

1.  Learn how to use @extends and @section to create layouts and organize content effectively.

2.  Gain the ability to embed reusable components using @component and other relevant features of Blade.

Key Topics

1. Introduction to Advanced Blade Features

Blade is Laravel's templating engine, and it simplifies HTML creation in a PHP environment. Advanced Blade features like layouts and components enhance modularity and reusability, making your application more maintainable.

2. Using @extends and @section for Layouts

What is a Layout?

  • A layout is a reusable structure for web pages.
  • It allows us to define common parts of the application, like headers, footers, and sidebars, in a single file.
  • Individual pages extend this layout and fill in the dynamic content.

Steps to Create and Use Layouts

1.  Define the Layout File

o    Create a file named layout.blade.php in the resources/views folder.

o    Example:

php

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@yield('title')</title>

</head>

<body>

    <header>

        <h1>My Application</h1>

    </header>

 

    <div class="content">

        @yield('content')

    </div>

 

    <footer>

        <p>&copy; 2024 My Application</p>

    </footer>

</body>

</html>

o    Explanation:

§  @yield('title') acts as a placeholder for the page's title.

§  @yield('content') acts as a placeholder for the main page content.

2.  Extend the Layout in a Page

o    Create a new view file, e.g., home.blade.php:

php

Copy code

@extends('layout')

 

@section('title', 'Home Page')

 

@section('content')

    <h2>Welcome to the Home Page!</h2>

    <p>This is the main content of the home page.</p>

@endsection

o    Explanation:

§  @extends('layout') links this page to the layout.blade.php file.

§  @section('title', 'Home Page') defines the value for the @yield('title') placeholder.

§  The @section block with content fills in the @yield('content') placeholder.

3. Embedding Components with @component

What are Components?

  • Components are reusable, standalone pieces of a UI, such as buttons, forms, or cards.
  • Laravel provides Blade components to enhance modularity.

Steps to Use Blade Components

1.  Create a Component File

o    Run the following command to create a component:

bash

Copy code

php artisan make:component Alert

o    This generates two files:

§  A Blade view: resources/views/components/alert.blade.php

§  A PHP class: app/View/Components/Alert.php

2.  Define the Component View

o    Edit resources/views/components/alert.blade.php:

php

Copy code

<div class="alert alert-{{ $type }}">

    {{ $message }}

</div>

o    Explanation:

§  {{ $type }} and {{ $message }} are dynamic variables passed to the component.

3.  Use the Component in a View

o    Include the component in a Blade file:

php

Copy code

@component('components.alert', ['type' => 'success', 'message' => 'Operation Successful!'])

@endcomponent

o    Explanation:

§  @component('components.alert') references the alert.blade.php file.

§  Parameters like type and message are passed to the component.

4.  Use Inline Components

o    Alternatively, you can use a simpler syntax:

php

Copy code

<x-alert type="success" message="Operation Successful!" />

o    Explanation:

§  x-alert is the shorthand for the Alert component.

§  The type and message attributes are passed directly.

4. Additional Features of Blade

1.  @include for Including Partial Views

o    Use @include to embed smaller reusable sections.

o    Example:

php

Copy code

@include('partials.header')

2.  @if, @foreach, and Other Directives

o    Blade supports conditional rendering and looping:

php

Copy code

@if($user->isAdmin)

    <p>Welcome, Admin!</p>

@else

    <p>Welcome, User!</p>

@endif

php

Copy code

@foreach($items as $item)

    <p>{{ $item }}</p>

@endforeach

Class Activity

1.  Create a layout with a navigation bar, main content area, and footer.

2.  Extend this layout in two pages:

o    Home page with a welcome message.

o    About page with details about your application.

3.  Create a Blade component for an alert box and use it in both pages.

Recap and Conclusion

  • Using @extends and @section, we can create organized and reusable layouts.
  • Blade components (@component or <x-component>) enable the creation of modular UI elements.
  • Blade’s advanced features help maintain clean, modular, and scalable codebases.

Homework

1.  Create a Blade component for a button with customizable text and styles.

2.  Modify the layout to include a sidebar using the @include directive.



Comments

Post a Comment

Popular posts from this blog

MCQs Of Day CRUD 8 Operations with Eloquent

MCQs Of Day 8 CRUD  Operations with Eloquent   CRUD Operations with Eloquent - MCQs 1. What does CRUD stand for in database management? a) Create, Read, Update, Delete b) Connect, Retrieve, Update, Delete c) Create, Return, Update, Delete d) Collect, Read, Update, Delete Answer:  a) Create, Read, Update, Delete Explanation:  CRUD is a set of operations that stand for Create, Read, Update, and Delete, which are basic functions used in databases to manage records. 2. Which Laravel method is used to create a new record in a database? a) create() b) store() c) insert() d) add() Answer:  a) create() Explanation:  The create() method is used in Laravel's Eloquent ORM to create a new record in the database. 3. Which of the following is true about Eloquent ORM in Laravel? a) It allows only raw SQL queries. b) It does not support relationships between models. c) It provides an active record implementation for working with the database. d) It is used only for Read op...
Read more

Lecture Notes Of Day 24: Laravel Policies

  Lecture Notes Of Day 24: Laravel Policies Objective: To implement policies for authorization, ensuring that different users can perform only the actions they are authorized to do. This will help students understand how to manage user permissions effectively for different actions in Laravel applications. Outcome: By the end of this class, students will be able to create, register, and use policies to manage user permissions for various actions in a Laravel application. They will also learn how to secure resources and actions based on user roles or other attributes. What are Policies in Laravel? In Laravel, policies provide a convenient way to authorize user actions on certain resources. A policy is essentially a class that organizes authorization logic for a particular model. For example, if you have a Post model, you might have a PostPolicy class that defines who can view, update, or delete a post. Why use Policies? Policies centralize authorization ...
Read more

MCQs of Day 7 Eloquent ORM Basics

  MCQs of Day 7 Eloquent ORM Basics 1. Which command is used to create an Eloquent model in Laravel? A) php artisan create:model B) php artisan make:model C) php artisan model:create D) php artisan generate:model Answer: B) php artisan make:model Explanation: The php artisan make:model command is used to create a new Eloquent model in Laravel. 2. What is the purpose of the $fillable property in an Eloquent model? A) To define which fields can be mass-assigned B) To define the table name C) To store timestamps D) To define relationships between models Answer: A) To define which fields can be mass-assigned Explanation: The $fillable property in an Eloquent model defines which fields are allowed for mass-assignment to protect against mass-assignment vulnerabilities. 3. How do you retrieve a single record by its ID in Eloquent? A) Model::get(1) B) Model::find(1) C) Model::single(1) D) Model::first(1) Answer: B) Model::find(1) Explanation: The find() method retrieves a single record by ...
Read more