In this tutorial you will learn about the Laravel Blade Template and its application with practical example.
Blade is the in built templating engine for Laravel framework.Blade is a very powerful and easy to use templating engine that makes writing syntax very easy and readable. Blade templating engine comes with its own control structure such as conditional statements and loops. It is very easy to create a Blade template, simply create your view file and save it with the .blade.php extension instead of .php, blade templates are typically stored in the resources/views directory. The main advantage of using blade template engine is that it allow use to create master template which can be extended by other individual pages.
Echoing data
If you want to display any variable inside blade view, you can do it be simply wrapping the variable in “curly” braces.
Syntax:-
1 |
{{ $variable }} |
Above syntax is equivalent to <?= $variable ?> in plain PHP
Ternary Operator
Blade provide a short-cut equivalent to ternary operator in PHP
Syntax:-
1 |
{{ $variable or 'Default Value' }} |
Above syntax is equivalent to <?= isset($variable) ? $variable: ‘Default Value’ ?>
Blade Template Control Statements
The Blade template engine comes with convenient short-cuts for using PHP control statements.
Blade If Statements
Blade template engine provides the @if, @elseif, @else and @endif directives to construct equivalent PHP if statement and its counterparts.
Example:-
1 2 3 4 5 6 7 |
@if (count($posts) === 1) Single post! @elseif (count($blogposts) > 1) Multiple posts! @else No post found! @endif |
Blade also provides an @unless directive as a conditional statement.
Example:-
1 2 3 |
@unless (Auth::check()) You are not signed in. @endunless |
Blade also provides an @hasSection directive to determine if a given section has any content or not.
Example:-
1 2 3 4 5 6 7 |
<title> @hasSection ('title') @yield('title') - Web App Name @else Web App Name @endif </title> |
Blade Loops
Blade template engine provides @for, @endfor, @foreach, @endforeach, @while and @endwhile directives to construct equivalent PHP loop statements .
1 2 3 4 5 6 7 8 9 10 11 |
@for ($i = 0; $i < 10; $i++) The current value of i is {{ $i }} @endfor @foreach ($posts as $post) <p>{{ $post->title }}</p> @endforeach @while (true) <p>I'll keep looping!</p> @endwhile |
Including other views
Blade template engine provides @include(‘viewname’) directive for including a view inside another view. The child view will have all the variables that are available to parent view.
Example:-
1 |
@include('view.name') |
Defining a Master layout
As we know most of the web applications follows the same layout across all the pages, so the better approach is to define a master template where we can place all the boilerplate.In Laravel, blade template engine allow us to define a master template which can be extended by other individual pages.
Example:-
Step 1:- Create a new folder “layout” in /resources/views/ directory.
Step 2:- Create a new file “master.blade.php” in /resources/views/layouts/ directory.
Step 3:- Copy the following code in the “master.blade.php” file we created.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
Here, in the above master template –
@yield(‘title’) is used to display the value of the title
@section(‘sidebar’) is used to define a section named sidebar
@show is used to display the contents of a section
@yield(‘content’) is used to display the contents of content
Extending Master Layout
We will now show you how to extend the master layout we just created.
Step 1:- Create a new view file page.blade.php in /resources/views/
Step 2:- Copy the following code in page.blade.php file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- path: resources/views/page.blade.php --> @extends('layouts.master') @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 |
Here, in the above page –
@extends(‘layouts.master’) extends the master layout
@section(‘title’, ‘Page Title’) sets the value of the title section.
@section(‘sidebar’) defines a sidebar section in the child page of master layout
@parent displays the content of the sidebar section, defined in the master layout.
<p>This is appended to the master sidebar.</p> adds paragraph content to the sidebar section
@endsection ends the sidebar section
@section(‘content’) defines the content section
@endsection ends the content section
Step 3:– Open app/Http/routes.php and configure the route as below –
1 2 3 |
Route::get('page', function(){ return view('page'); }); |
Step 4:- Now open the following URL in the browser to see the output.
http://localhost:8000/page