How to Use Laravel Blade Templating Engine

Laravel Blade is a powerful templating engine that comes with the Laravel PHP framework. It allows you to create unique and reusable views easily. By using Blade, you can write clean, readable templates by combining PHP code with plain HTML. This highly intuitive templating engine provides features such as template inheritance, control structures, and common template elements that help streamline the process of creating dynamic web pages. In this guide, we will explore the basics of using Laravel Blade to enhance the design and functionality of your web applications.

Table of Contents

What is Laravel Blade Templating Engine?

Laravel is a popular open-source PHP framework used for developing web applications. Laravel Blade is its template engine, providing a simple and expressive way to create views in Laravel applications.

Blade templates are lightweight, efficient, and easy to use. They allow you to separate your application’s logic from its presentation layer, making your code more organized and maintainable.

Getting Started with Laravel Blade

To start using Laravel Blade, you need to have Laravel already installed on your system. If you haven’t installed it yet, you can follow the official Laravel documentation for installation instructions.

Once you have Laravel installed, you can create a new Blade template by creating a new file with a .blade.php extension inside the resources/views directory of your Laravel application.

Here’s a basic example of a Blade template:


<html>
<head>
    <title>My Blade Template</title>
</head>
<body>
    <h1>Welcome to My Blade Template!</h1>
    <p>This is a simple example of a Blade template.</p>
</body>
</html>

Once you have your Blade template file ready, you can now use various Blade features to enhance your web development workflow.

Using Variables in Blade Templates

Blade allows you to easily display variables in your templates by wrapping them in double curly braces:


<h1>Hello, {{ $name }}!</h1>

In the above example, the value of the $name variable will be displayed in the rendered view. You can pass variables to the Blade template from your PHP code.

Blade also provides convenient ways to handle conditional statements and loops:


@if($condition)
    // Code to execute if the condition is true
@else
    // Code to execute if the condition is false
@endif

@for($i = 0; $i < 5; $i++)
    // Code to iterate multiple times
@endfor

@foreach($items as $item)
    // Code to repeat for each item in the $items array
@endforeach

@while($condition)
    // Code to execute while the condition is true
@endwhile

Using Blade Directives

Blade directives are pre-defined functions provided by Laravel to handle common tasks efficiently. They allow you to write more concise and readable code.

Here are some useful Blade directives:

@extends: Allows you to define a master layout that other views can inherit from.
@section: Defines a section of content that can be overridden by child views.
@yield: Displays the content of a defined section.
@include: Includes another Blade template within the current template.
@component: Defines reusable view components.


@extends('layouts.app')

@section('content')
    <h1>Welcome to My Website!</h1>
    <p>This is the home page.</p>
@endsection

In the above example, the content within the @section('content') directive will be injected into the @yield('content') directive in the layouts.app template.

Using Blade Layouts

Blade layouts provide a convenient way to define a master template that can be used as the base layout for multiple pages.

Here's an example of a Blade layout file named app.blade.php:


<html>
<head>
    <title>My Application</title>
</head>
<body>
    <header>
        <h1>My Application</h1>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>This is the footer of my application.</p>
    </footer>
</body>
</html>

To use this layout in your Blade templates, you can use the @extends directive:


@extends('layouts.app')

@section('content')
    <h1>Welcome to My Website!</h1>
    <p>This is the home page.</p>
@endsection

In this example, the content section defined in the child template will replace the @yield('content') section in the parent layout.

Blade Template Inheritance

Blade templates support template inheritance, allowing you to create a hierarchy of templates to organize your views more effectively.

You can define a parent template with a section that can be overridden by child templates. This allows you to reuse common sections across multiple views while customizing specific sections as needed.

Here's an example:



<html>
<head>
    <title>@yield('title') - My Application</title>
</head>
<body>
    <header>
        <h1>My Application</h1>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>This is the footer of my application.</p>
    </footer>
</body>
</html>

In this example, the @yield('title') and @yield('content') directives define sections that can be overridden by child templates.

Child templates can extend the parent template and define their own section content:


@extends('layouts.app')

@section('title', 'Home')

@section('content')
    <h1>Welcome to My Website!</h1>
    <p>This is the home page.</p>
@endsection

This way, you can maintain a consistent layout structure across your application while customizing specific sections for different views.

Laravel Blade Templating Engine is a powerful tool that simplifies the process of creating views in Laravel applications. It provides a clean separation between PHP code and HTML, making your code more organized and maintainable.

By leveraging Blade's features such as variables, conditionals, loops, directives, layouts, and template inheritance, you can build dynamic and responsive web applications with ease.

Start using Laravel Blade today and experience the productivity and efficiency it brings to your web development workflow.

Laravel Blade Templating Engine is a powerful tool that allows developers to efficiently create dynamic web applications by separating logic and presentation. By following the principles of Blade templating, developers can enhance code readability, reusability, and maintenance. Utilizing Blade's features such as template inheritance, control structures, and directives can significantly streamline the development process and improve the overall user experience.