Laravel

Larave 5.6 Blade Layout with Example

January 30, 2018

author:

Larave 5.6 Blade Layout with Example

Blade – a Laravel Template Engine is simple yet powerful language. It is Laravel’s lightweight, easy-to-use syntax language. As you would have noticed by now, it has a blade.php extension and is stored in resources/views. And the best part is it doesn’t restrict us from using plain PHP syntax in the views, unlike other templating engines.

Blade supports most of PHP’s elements of creating loops and conditions such as – @if, @elseif, @for, @while and @foreach. It helps to avoid vintage php opening and closing tags <?php - ?> from our view files.

# Using Blade and Layouts

Laravel blade is gaining popularity as they allow to create a master template. Such template can then be extended in individual pages and thus make coding simple, clean and pleasant experience.

# Create Blade Layout

Talking about master templates, let us create one! We can create a fresh directory to store all the templates. Create layout directory views/layout. Inside, create new blade file as – app.blade.php and paste following code:

# resources/views/layouts/app.blade.php

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

    <body>
        @section('header')
            Home | Dashboard | About | Contact
        @show

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

Let us try and get familiar with the syntax, we have injected blade syntax in between the HTML one.

@yield(‘title’) Display value of title
@section(‘header’) Define and display section named header
@show Display content of section
@yield(‘content’) Display value of content

# Utilize Blade Layouts in Views

It’s now time to use this template in pages. Let us use our about page from previous sections and extend the template there. Replace the earlier about page code with the following snippet:

# resources/views/about.blade.php

@extends('layouts.app')
@section('title', 'About Us')

@section('header')
    @parent
    <h3>About Us</h3>
    <p><?= $language ?> is awesome!</p>
@endsection

@section('content')
    <p>And it uses Blade Templating.</p>
@endsection

# Testing

To test,

localhost:8000/about
Blade Template Example

Let us quickly examine the about.blade.php:
@extends is used to inherit the blade templates. Here, we have inherited or extended the app.blade.php. Note that we do not need to specify the path as resources\views\layouts\app.blade.php but only from within views directory and use dot(.) operator for the same.

@section, as we discussed earlier, is used to display value. While using it, we need to specify the exact key as we used in the template file to prevent unexpected results. Here, we use this to display content in title, header and body with their respective keys.

@parent appends the content from parent template to the child page. And therefore in the output, we render header section data from both the files.

# Blade Comments

Many a times, developers want to keep the code floating in file but do not want it to be executed. In such instances comments are used. Laravel blade can be commented using {{-- --}} for both single line and multi line comments. Here’ how you can use comments in Laravel blade file:

Blade Comment Block:

{{-- --}}

Blade Single Line Comment Example:

{{-- This is a single line comment --}}

Blade Multi-Line Comment Example:

{{-- 
     This 
     is a 
     multi-line 
     comment 
--}}

PHP comments in Blade:

<?php /* 
This is PHP
Comment in Blade File
*/ ?>

Conclusion:

We just completed one of the best features of Laravel – the blade templating layout. This optimizes the development process and improves code readability. In this post we first created a blade layout and also used them later. That is how most of the HTML pages are created in Laravel.

Questions & Comments:

Thank you for stopping by. Hope you now have an overall idea of Laravel Blades and how to use Blade Layout. If you have got any questions/suggestions, drop them in the comment section below.

Leave a comment

Your email address will not be published. Required fields are marked *