Blade Template in Laravel 7

Laravel provides blade template. Blade files are similar to php files and cover all features of php files. In additionally, blade contains some more features which we will discuss here. Lets summarize:

Shortcuts
Including and Extending other file
Section and yield statement
@endsection vs @show vs @overwrite
conditional statement
Loops
Helpers (will be discussed in another tutorial)

Create a file in resources >> views named first.blade.php.

Also see Django vs Laravel vs Ruby on Rails

Shortcuts:

<?php echo $var; ?> is equivalent to {{ $var }}. {{ }} also skip html entities in the content.
{!! !!} is also equivalent to {{ }} but it does not skip html entities.
{{ isset($name) ? $name : 'Default value' }} is equivalent to {{ $name or 'Default value' }}.
By default the content written inside the double braces will be proceed by blade template. If you want to skip some content, then put @ before opening braces like @{{ content here }}.
Format of comments is {{-- This comment will not be in the rendered HTML --}}

NOTE: I am continuing my tutorials series. If you are visiting first time, then read Basics of Laravel and Views first.

{{-- code in first.blade.php --}}
<!DOCTYPE html>
<html>
  <head>
    <title>My first webpage</title>
  </head>
  <body>
    <h1>My Page</h1>
    <p>this is my page</p>
    <p>my id is {{ $id }}</p>
    <p> again my id is {!! $id !!}</p>
    <p>Line using double braces {{ $line }}</p>
    <p>Linke using single braces {!! $line !!}</p>
    @{{ This will not be processed by Blade }}
  </body>
</html>

Change YourController->index() as:

<php?
public function index($id)
{
  $string = "<h1>this is not a heading</h1>";
  return view('first')->with(['id'=>$id,'line'=>$string]);
}

Output of url http://localhost:8000/request/231

Including and Extending other file:

We can include outside template file by using @include('filepath.filename'). This file path is relative to views folder. It is same as iniclude() function in PHP. Just like in programming languages, we can extent templates using @extends('another_file'). It must be the first line of the file.

Now create a new file with name second.blade.php and paste this code in that file:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Blog demo</title>
</head>
<body>
 @section('sidebar')
 This is the master sidebar.
 @show
 </body>
</html>

Notice the code between line 7 and line 9. It is written inside a section with name sidebar. The section starts with command @section('section_name') and ends with @show or @endsection or @overwrite (discussed in next section). This code can be override in the sub-template (template which is extending this template). Change first.blade.php by this code and observe the change:

@extends('second')
<p>This is default code in first.blade.php</p>

Refresh the page and you will see the line inherited from second.blade.php.

NOTE: A template can not extend two templates. @extends should be strictly first line.

Also see Best book for learning web development.

Section and yield statements:

Now change the code of second.blade.php like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blog demo</title>
</head>
<body>
  @section('sidebar')
    <p>This is the master sidebar above the content.</p>
  @show
  @yield('content')
  @section('bottom')
    <p>This is bottom text</p>
  @show
  </body>
</html>

Now change first.blade.php with code:

@extends('second')
<p>This is default code in first.blade.php</p>
@section('sidebar')
  <p>sidebar section has been overrided</p>
@endsection
@section('content')
<p>This is content for yeild</p>
@endsection

Now on refreshing the page, you will get the output:

This is default code in first.blade.php
sidebar section has been overrided
This is content for yeild
This is bottom text

Note:

@yeild('content') may be consider as a hole where we can place our code after extending this file. When we will extend this file and write a section with name content then the code of that section will be fitted on the place of yield('content'). In above example, our yield statement is in between two sections. So, the code of content section is placed between the code of other two sections.
As we discussed in last section, we can override a section. In this example, we are overriding sidebar section.
Defining section for @yield in extended template is not required. You will not get any error if you delete the content section.
@yield is only for extended template. It will not work in same file. So, there is no use of writing both @yield and @section for same section in one file (if you are rendering that file).
A file can not have two sections with same name.

@endsection vs @show vs @overwrite

As I said later, a section can be end with @endsection or @show or @overwrite. But these two statements are not same. If we use @show, it means code of that section will be written there. But @endsection and @overwrite are used for inheritance. The section which ends with @endsection requires a @show or @yield statement for displaying its code. For example change, code of second.blade.php as:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blog demo</title>
</head>
<body>
  @section('sidebar')
    <p>This is the master sidebar above the content.</p>
  @show
  @yield('content')
  @section('bottom')
    <p>This is bottom text</p>
  @show
  @section('no-display')
    <p>This section will not be displayed because 
      it is using endsection but there is no show or yeild
      statement for this section    
    </p>
  @endsection
  </body>
</html>

Change first.blade.php with code:

@extends('second')
<p>This is default code in first.blade.php</p>
@section('sidebar')
  <p>sidebar section has been overrided</p>
@show
@section('content')
<p>This is content for yeild</p>
@show

The result will be:

This is default code in first.blade.php
sidebar section has been overrided
This is content for yeild
sidebar section has been overrided
This is content for yeild
This is bottom text

NOTE:

@show statements are displaying code twice in inheritance because one for override and one for that section. For avoiding this, use @endsection or @overwrite.
@overwrite is final section. This section will not be inherited. You may assume it as private function in progamming.

Conditional Statements:

Laravel provides @if, @elseif, @else, @endif, @unless and @endunless statements. Change index function in YourController class:

<?php
public function index($id=12)
{
  $id = (int)$id;
  return view('first')->with(['id'=>$id]);
}

Change first.blade.php as:

@extends('second')
@section('content')
@if ($id == 1)
 <p>your id is one</p>
@elseif ($id < 50)
 <p>below 50</p>
@elseif ($id > 50 && $id <= 100)
 <p>enjoy dude</p>
@else
 <p>Your id is Out of range</p>
@endif
@unless ($id == 1)
<p>you are not admin</p>
@endunless
@endsection

Now see results for different ids.

Also see Python vs PHP vs Ruby programming

Loops:

Laravel provides @for, @foreach, @forelse and @while loops. Change index function as:

<?php
public function index($id=12)
{
  $id = (int)$id;
  $numbers = [1,2,345,5,3,234,21];
  return view('first')->with(['id'=>$id,'numbers' => $numbers]);
}

Change first.blade.php as:

@extends('second')
@section('content')
@for ($i = 0; $i < 10; $i++)
  <p>The current value is {{ $i }}</p>
@endfor
@foreach ($numbers as $number)
<p>number is {{ $number }}</p>
@endforeach
<ul>
@forelse ($numbers as $number)
<li>{{ $number }}</li>
@empty
<p>No Number</p>
@endforelse
</ul>
@while ($id > 0 && $id--)
<p>Your id is {{ $id }}</p>
@endwhile
@endsection

See result :)

Blade Template in Laravel 7

Shortcuts:

Including and Extending other file:

Section and yield statements:

Note:

@endsection vs @show vs @overwrite

Conditional Statements:

Loops:

Furthuer Reading:

Click on banner below to Learn: PHP with Laravel for beginners - Become a Master in Laravel

About Harish Kumar

Related Articles

5 Elite and Imperative Hybrid App Frameworks

Cheap Django Hosting

Blade Template in Laravel 7

Full-Stack Web Development with React

Best Udemy Courses

Top Posts

Recent Posts

The Complete Web Developer Course - Build 25 Websites

Subscribe

Any Course on Udemy in $6 (INR 455)

Site Sections

Useful Links