Working with Blade Template Engine

Tutorial 5 of 5

Working with Blade Template Engine

1. Introduction

Goal of the Tutorial: This tutorial aims to introduce you to Blade, the simple yet powerful templating engine provided with Laravel. We will cover how to create Blade views, how to use Blade’s control structures and how to extend layouts.
Learning Outcomes: By the end of this tutorial, you will have a good understanding of Blade and how to use it to manage and display dynamic data in your Laravel applications.
Prerequisites: Basic understanding of Laravel and PHP is required. Familiarity with HTML and CSS will be helpful.

2. Step-by-Step Guide

Blade views are stored in the resources/views directory and use the .blade.php file extension. They allow you to use plain PHP code in your views, which makes it super easy to manage and display dynamic data.

Creating a Blade View

To create a Blade view, you simply create a new file in the resources/views directory. For example, to create a view called welcome, you would create a file named welcome.blade.php.

Displaying Data

To display data, you use curly braces {}. The data must be passed to the view by the route or controller.

Example:

// Route
Route::get('/', function () {
    return view('welcome', ['name' => 'Taylor']);
});

// View
Hello, {{ $name }}.

Control Structures

Blade offers several helpful control structures, like @if, @foreach, and @while.

Example:

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

3. Code Examples

Let's see some practical examples.

Extending A Layout

You can create a layout with a yield section and then extend that layout in child views.

Example:

<!-- 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>

<!-- 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

In the above example, the layout file app.blade.php is specified with @extends. The @section directive is used to specify sections of content, while @yield is used to display the contents of a given section.

4. Summary

In this tutorial, we covered Blade, the simple yet powerful templating engine provided with Laravel. We learned how to create Blade views and display data, how to use Blade’s control structures, and how to extend layouts. For further learning, consider exploring more complex Blade features like sub-views, components, and slots.

5. Practice Exercises

Create a Blade view that displays a list of items passed to it from a route. Use a @foreach loop to display each item.
Create a form in a Blade view that posts to a route. Display a confirmation message in the view after the form is submitted.
Create a master layout with a header, footer, and main content section. Extend this layout in a child view and add content to each section.

Hint: Use the @extends, @section, and @yield directives to create and extend layouts.