Access all tutorials in sprocket icon.
August 1, 2015 from author Bill Keck.
Working with Blade as a template engine for Laravel is pure pleasure. It’s simply the best and most intuitive templating engine out there.
So you probably already know that a blade file is named something.blade.php, so if for example, you are creating an index page, you would name it index.blade.php.
If you need a refresher on blade, just check out the docs in Laravel.
Ok, so we’re just going to focus on the master page. A master page is a page intended to hold parts of your HTML that will be common to all of your pages. So to avoid code duplication, we create a master page to hold it so you don’t have to keep typing the same code over and over.
Your views folder resides in your resources folder, so we will add a folder inside of views named layouts. The path is resources/views/layouts. Inside the layouts folder, create a file named master.blade.php. This will be our master page.
I’m going to create a simple master page using Twitter Bootstrap. We’ll start with the top block:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
@yield('title')
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
@yield('css')
</head>
<body>
You can see the typical HTML necessities and we are pulling in our bootstrap css through a CDN call, which means we pull it in from a content delivery network, which also means most browsers will already have a copy cached, so it will load incredibly fast.
After that, you see:
@yield('title')
This is the spot where each page’s title will be injected. Then we have:
@yield('css')
So let’s talk for a moment about how a master page interacts with a view page. If for example, you had an index.blade.php file that you wanted to use in conjunction with the master page, you call the master page from within the view page like so:
@extends('layouts.master')
@section('content')
// page content goes here.
@endsection
You put your content in between the @section tags. Then behind the scenes, blade will inject the content section into the appropriately designated section on the master page will be tagged like so:
@yield('content')
Similarly, if you have custom css that you want to include on the master page from a view page, you can create a section like we did in our master page:
@yield('css')
Blade does all the assembly behind the scenes and it compiles the page, so you don’t incur overhead for using it. So this makes code separation a snap. And just as a refresher, I’ll cover the other way to pull in content into either your master page or an individual page, and that is to use a simple include like so:
@include('alerts.alert')
What that will do is look for an alerts folder and an alert blade file within it. So that’s a way to pull in a view partial that might contain form fields for example. These are the basics of blade. You can also check out a free video on this on Laracasts.
Ok, so getting back to our basic implementation of Bootstrap in our master page. Let’s look at the next block:
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LaraTemp</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
@if (!Auth::check())
<li><a href="/auth/login">Login </a></li>
<li><a href="/auth/register">Register</a></li>
@else (Auth::check())
<li><img class="circ" src="{{ Gravatar::get(Auth::user()->email) }}"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/logout">Logout</a></li>
</ul>
</li>
</ul>
@endif
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
@include('alerts.alert')
Ok, so I’m not really going to cover Bootstrap in detail. You can get all you need from the Bootstrap site. Also, I’m using an alerts partial, but I haven’t covered that in a tutorial yet, so you should probably cut that line if you are not doing something similar.
You can see that for a couple of menu items, we are doing an if statement to check and see if the user is logged in:
@if (!Auth::check())
<li><a href="/auth/login">Login </a></li>
<li><a href="/auth/register">Register</a></li>
@else (Auth::check())
<li><img class="circ" src="{{ Gravatar::get(Auth::user()->email) }}"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/logout">Logout</a></li>
</ul>
</li>
</ul>
@endif
I’m also using a implementation of the Gravatar plugin, which I wrote a gravatar tutorial on, so you can check that if you want to use that.
Next we have the section where we are bringing in our content:
<div class="col-md-9">
@yield('content')
</div>
The next section we need is for our jquery and javascript:
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
@yield('scripts')
You can also see that I’ve created a place to add scripts from the view page:
@yield('scripts')
So for example if you had a view that used Bootstrap’s carousel and you needed to pull in additional javascript to set the delay between slides, then on the view you can use:
@section('scripts')
// your javascript
@endsection
You can see from this that it makes it easy to control the dependency order. You bring in bootstrap js first, then the related js that you need for that page.
Next we just have the closing HTML tags and our basic master page is complete.
</body>
</html>
So now, whenever you want a view page to pull in the master page, you simply start the page with:
@extends('layouts.master')
Try to keep your code clean. If you have HTML errors, then blade can act wacky, and it can cause things to break. If you are seeing a blank white screen, it may be a syntax error.
I hope you have enjoyed this tutorial and found it useful. Click on the sprocket icon at the top of the page to see all tutorials. Please comment, share, and like if you can, thanks.
I don’t have a donate button, but If you would like to support my work, you can do so by buying one of my 99¢ books, I really appreciate it.
Laravel Tips 
Very Nice explanation
LikeLike