Creating Reusable Layouts and Components

Tutorial 3 of 5

Creating Reusable Layouts and Components Using Laravel's Blade

1. Introduction

This tutorial aims to guide you through the process of creating reusable layouts and components using Laravel's Blade. By the end of this tutorial, you will have a solid understanding of Blade's template inheritance, sections, and components. You will be able to avoid repetition and save time by reusing common elements across your views.

Prerequisites

Basic understanding of Laravel
Familiarity with HTML and PHP

2. Step-by-Step Guide

Understanding Blade's Template Inheritance

Blade's template inheritance allows you to define a layout with placeholders for content. These placeholders are defined using @section and @yield.

Creating a Master Layout

A master layout serves as a template for other views. It contains elements such as the header, navigation bar, footer, etc., that remain constant across different views.

<!-- Stored in resources/views/layouts/app.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

In the above code, @yield('title') is a placeholder for the page title. @section('sidebar') defines a section that can be filled by child views. @yield('content') is where the main content of child views will be inserted.

Creating a Child View

A child view extends a master layout and fills in the @section placeholders.

<!-- Stored in resources/views/child.blade.php -->

@extends('layouts.app')

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

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

The @extends directive is used to specify the master layout. @section('title', 'Page Title') fills the 'title' placeholder.

@section('sidebar') not only fills the 'sidebar' placeholder but also appends content to the master sidebar using @parent.

Finally, @section('content') provides the main content.

3. Code Examples

Example 1: Basic Layout

Let's create a basic layout with a title placeholder and a content placeholder.

<!-- Stored in resources/views/layouts/basic.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Here you should expect that the @yield('title') will be replaced by the page title and @yield('content') will be replaced by the main content.

Example 2: Fill in the Basic Layout

Now we'll fill in the placeholders in our basic layout.

<!-- Stored in resources/views/welcome.blade.php -->

@extends('layouts.basic')

@section('title', 'Welcome')

@section('content')
    <h1>Welcome to our application!</h1>
@endsection

In this example, 'Welcome' will replace @yield('title') and the h1 heading will replace @yield('content').

4. Summary

In this tutorial, we learned how to create reusable layouts and components using Laravel's Blade. We learned about Blade's template inheritance, how to define a master layout and how to create child views that fill in the placeholders defined by the master layout.

For further learning, explore Blade's other features such as including sub-views, stack directives, and component tags.

5. Practice Exercises

Now it's your turn to practice!

Create a master layout with placeholders for a header, footer, and main content.
Create a child view that fills in these placeholders.
Create another child view that extends the same master layout but provides different content.

Remember, the key to mastering Laravel's Blade is practice and exploration. Happy coding!