Mastering Blade Templating in Laravel

Published in

NovAI- PHP Laravel 101

4 min readJul 2, 2024

Laravel Blade is a powerful templating engine that offers an elegant syntax for defining views and structuring HTML. This article covers the fundamentals of Blade templating, including layouts, sections, components, and passing data to views, along with practical examples.

Fundamentals of Blade Templating
Layouts, Sections, and Components
Passing Data to Views
Sample Project Setup

1. Fundamentals of Blade Templating

Blade is the simple, yet powerful templating engine provided with Laravel. It allows you to use plain PHP code in your views and comes with its own set of control structures such as conditional statements and loops.

Example: Blade Syntax Basics

Create a new Blade view file resources/views/welcome.blade.php:

<!-- File: resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Laravel</title>
</head>
<body>
    <h1>{{ $title }}</h1>
    <p>{{ $message }}</p>
    @if($user)
        <p>Welcome, {{ $user->name }}!</p>
    @else
        <p>Welcome, Guest!</p>
    @endif
    <ul>
        @foreach($items as $item)
            <li>{{ $item }}</li>
        @endforeach
    </ul>
</body>
</html>

2. Layouts, Sections, and Components

Blade allows you to define a master layout that can be extended by other views, making it easy to maintain a consistent layout across your application.

Example: Creating a Master Layout

Create a new layout file resources/views/layouts/app.blade.php:

<!-- File: resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'My Laravel App')</title>
</head>
<body>
    <header>
        <h1>My Laravel App</h1>
    </header>
    <main>
        @yield('content')
    </main>
    <footer>
        <p>&copy; 2024 My Laravel App</p>
    </footer>
</body>
</html>

Example: Extending a Layout

Create a new view file resources/views/home.blade.php that extends the master layout:

<!-- File: resources/views/home.blade.php -->
@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is the content of the home page.</p>
@endsection

Example: Creating a Component

Blade components allow you to create reusable pieces of UI. Create a new component file resources/views/components/alert.blade.php:

<!-- File: resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

Use the component in a view resources/views/home.blade.php:

<!-- File: resources/views/home.blade.php -->
@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is the content of the home page.</p>
    <x-alert type="success">
        This is a success alert.
    </x-alert>
    <x-alert type="danger">
        This is a danger alert.
    </x-alert>
@endsection

3. Passing Data to Views

Data can be passed to views from the controller, making it easy to render dynamic content.

Example: Passing Data from Controller

Create a new controller method in app/Http/Controllers/HomeController.php:

// File: app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
    public function index()
    {
        $data = [
            'title' => 'Welcome to Laravel',
            'message' => 'This is a dynamic message.',
            'user' => auth()->user(),
            'items' => ['Item 1', 'Item 2', 'Item 3']
        ];
        return view('home', $data);
    }
}

Define a route for the controller method in routes/web.php:

// File: routes/web.php
use App\Http\Controllers\HomeController;
Route::get('/home', [HomeController::class, 'index']);

4. Sample Project Setup

To test the examples, follow these steps:

Create a New Laravel Project: If you don’t already have a project, create one using Composer:

composer create-project --prefer-dist laravel/laravel blade-example

2. Setup Database and Environment: Update your .env file with your database credentials.

3. Create Migration and Model for User: Create a users table for the example:

php artisan make:migration create_users_table --create=users

4. Define the migration in database/migrations/xxxx_xx_xx_xxxxxx_create_users_table.php:

// File: database/migrations/xxxx_xx_xx_xxxxxx_create_users_table.php

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}

Run the migration:

php artisan migrate

Understanding the Migration Output

When you run php artisan migrate, Laravel processes all pending migrations and updates your database schema. Here's what happens:

Migration Files: Laravel looks for migration files in the database/migrations directory.
Database Update: It executes the migration scripts to create or modify database tables as specified.
Migration Table: Laravel updates the migrations table to keep track of which migrations have been run.

Example Output:

Migrating: 2024_07_02_000000_create_users_table
Migrated:  2024_07_02_000000_create_users_table (0.09 seconds)

This output confirms that the users table has been created successfully.

Explanation of Table Structure Generated

When running php artisan migrate, the following table structure is generated for the users table:

CREATE TABLE users (
    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    email_verified_at TIMESTAMP NULL,
    password VARCHAR(255) NOT NULL,
    remember_token VARCHAR(100) NULL,
    created_at TIMESTAMP NULL,
    updated_at TIMESTAMP NULL
);

Table Structure Details:

id: Primary key, auto-incremented.
name: User’s name, cannot be null.
email: User’s email, unique and cannot be null.
email_verified_at: Timestamp for email verification, can be null.
password: User’s password, cannot be null.
remember_token: Token for “remember me” functionality, can be null.
created_at: Timestamp when the record was created, can be null.
updated_at: Timestamp when the record was last updated, can be null.

These columns ensure that the users table captures essential information about each user, supporting authentication and email verification.

5. Create Controller and Views: Follow the steps outlined above to create the HomeController and the views.

6. Start the Server: Run the Laravel development server:

php artisan serve

7. Access in Browser: Navigate to http://localhost:8000/home to see the rendered Blade templates with dynamic content.

Blade templating in Laravel offers a powerful and flexible way to create and manage views. By mastering Blade layouts, sections, components, and passing data to views, you can create dynamic and maintainable applications. The examples provided in this article should give you a solid foundation to start building your own Laravel applications with Blade.

By following the steps and examples provided, you should be able to effectively utilize Blade templating in your Laravel projects, enhancing the overall structure and readability of your views.