Laravel 5.x.x Template

Laravel 5.x.x Template

Blade is a powerful easy to use template that comes with Laravel. Blade templates can be mixed with plain php code.

Well, in this articles I will cover the following sections: Template inheritance, Master layout, Extending the master layout, Displaying variables, Blade conditional statements, Blade Loops and Executing PHP functions in blade template.

Template Inheritance
In a nutshell, template inheritance allows us to define a master layout with elements that are common to all web pages. The individual pages extend the master layout. This saves us time of repeating the same elements in the individual pages.

Master Layout
All blade templates must be saved with the .blade extension. In this section, we are going to create a master template that all pages will extend. The following is the syntax for defining a master layout.

Create a new file named master.blade.php in /resources/views/layouts folder with the following code below:

master.blade.php 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
  <head>
    <title>@yield('title')</title>
  </head>
  <body>
    @section('sidebar')
      Here is the master sidebar.
    @show

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

- @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 the Master Layout
Now we will create a page that extends the master layout. Create a new page named page.blade.php in /resources/views folder with the following code below:

page.blade.php 
1
2
3
4
5
6
7
8
9
10
11

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
  <p>Here is appended to the master sidebar.</p>
@endsection

@section('content')
  <p>Here is my body content.</p>
@endsection

- @extends('layouts.master') is used to extends the master layout.
- @section('title', 'Page Title') is used to sets the value of the title section.
- @section('sidebar') is used to defines a sidebar section in the child page of master layout.
- @endsection is used to ends the sidebar section.
- @section('content') is used to defines the content section.

And now we will add a route to tests our blade template. Open up /routes/web.php file and add the following route below:

web.php 
1
2
3

Route::get('blade', function () {
  return view('page');
});

Load the http:://localhost:8000/blade URL in your web browser and you will see the paragraph.

Displaying Variables in a Blade Template
Now we will define a variable and pass it to our blade template view. Open up /routes/web.php file and add the route below:

web.php 
1
2
3

Route::get('blade', function () {
  return view('page',array('name' => 'The Foodie'));
});

And then update pages.blade.php file to display the variable. Open up page.blade.php file and update the contents to the following:

page.blade.php 
1
2
3
4
5
6
7
8
9
10
11

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
  <p>Here is appended to the master sidebar.</p>
@endsection
@section('content')
  <h2></h2>
  <p>Here is my body content.</p>
@endsection

{{$name}} double opening curly braces and double closing curly braces are used to display the value of $name variable.

Blade Condition Statements
Blade also supports conditional statements. Conditional statements are used to determine what to display in the browser. We will pass a variable that will determine what to display in the browser.

Open up /routes/web.php file and modify route as follow:

web.php 
1
2
3

Route::get('blade', function () {
  return view('page', array('name' => 'The Foodie', 'day' => 'Sunday'));
});

We added another variable day with a value of Sunday.

And then open up /resources/views/page.blade.php file and modify the codes to the following:

page.blade.php 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
  <p>Here is appended to the master sidebar.</p>
@endsection

@section('content')
  <h2></h2>
  <p>Here is my body content.</p>
  <h2>If Statement</h2>
  @if ($day == 'Sunday')
    <p>Time to party</p>
  @else
    <p>Time to make money</p>
  @endif
@endsection

- @if ($day == 'Sunday') starts the if statement and evaluates the condition $day == ‘Sunday’.
- @else is the else part of the if statement.
- @endif ends the if statement.

Blade Loop
Blade template supports all of the loops that PHP supports. We will look at how we can use the foreach loop in blade to loop through an array of items.

Open up /routes/web.php file and modify the codes for the blade route to the following:

web.php 
1
2
3
4

Route::get('blade', function () {
  $drinks = array('Vodka', 'Gin', 'Brandy');
  return view('page', array('name' => 'The Foodie','day' => 'Sunday', 'drinks' => $drinks));
});

$drinks = array('Vodka', 'Gin', 'Brandy'); defines an array variable that we are passing to the blade template.

And then open up /resources/views/page.blade.php file and modify the contents to the following:

page.blade.php 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
  <p>Here is appended to the master sidebar.</p>
@endsection

@section('content')
  <h2></h2>
  <p>Here is my body content.</p>
  <h2>If Statement</h2>
  @if ($day == 'Sunday')
    <p>Time to party</p>
  @else
    <p>Time to make money</p>
  @endif
  <h2>Foreach Loop</h2>
  @foreach ($drinks as $drink)
    <p></p>
  @endforeach
@endsection

Executing php functions in Blade
We will call the php date function in the blade template. Open up /resources/views/page.blade.php file and modify the contents to the following:

page.blade.php 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
  <p>Here is appended to the master sidebar.</p>
@endsection

@section('content')
  <h2></h2>
  <p>Here is my body content.</p>
  <h2>If Statement</h2>
  @if ($day == 'Sunday')
    <p>Time to party</p>
  @else
    <p>Time to make money</p>
  @endif
  <h2>Foreach Loop</h2>
  @foreach ($drinks as $drink)
    <p></p>
  @endforeach

  <h2>Execute PHP Function</h2>
  <p>The date is </p>
@endsection

{{date(' D M, Y')}} double opening and closing curly braces are used to execute the php date function.