Home >>Laravel Tutorial >Laravel Master Blade Template

Laravel Master Blade Template

Blade Template Inheritance

Inheritance of templates in laravel is the concept of reusing the code over to other parts of the views.As a simple example creating a structure which can be used again and again which reduces lines of codes and make the project lightweight without repetition of same code again and again.

A master layout is made which can be later on extended to other templates and reused on other blade template files easily.

Master Page Layout:

master.blade.php file should be inside layout folder like so

resources/views/layout/master.blade.php

This master layout we will extended to other templates.

Below shown the code to be included in master.blade.php :

<html>
	<head>
		<title> Master Balde Template </title>  
	</head>  
	<body> 
		<div class="container">
		<h4>This is Master Layout</h4>
		<nav>
		  <a href="">HTML</a> |
		  <a href="">CSS</a> |
		  <a href="">PHP</a> |
		  <a href="">CodeIgniter</a> |
		  <a href="">Laravel</a>
		</nav> 
		</div> 
	</body>
</html>

@yield tag is used to map the content present in the other template at the position where this tag is placed in master template. In this above example @yield('content') shows the content which comes under the @section('content') which we will discuss further in example.

Extend master layout:

Extending layout means the layout or the master template will remain same to the page it is being extended and contents are yielded into the master template from section content.

You will understand better by the example shown below:

In this example we will be creating a template about.blade.php inside resources/views and extend the layout created above and yield content into it.

about.blade.php

@extends('layout.master')  
@section('content')  
<h3> ABOUT PHP T POINT </h3> 
@endsection

Above example @extends is used to extend the master layout i.e. inheriting the master layout into about.blade.php, also in ('layout.master') means layout[folder] and master[master.blade.php]

@section('content') has major role as the content present inside this section will be mapped onto the place of @yield('content') inside master template as discussed above.

Note:In above template @endsection can be replaced with @stop, both works the same. Just a fact @stop is used for laravel version4 and up.

Now, to check the working create the route for returning view in web.php

Route::get('/about', function () 
{  
    return view('about');  
});

Output:

Add-on information:

You can include any kind of content inside @section('content') - @endsection it may be data or a view, Even it could be a <script>.

Try adding this script given below into the above example and find out the interesting output.

@section('content')
<script>alert("phpTpoint is best")</script>
@endsection

Defining Master layout content with @parent

In the above example we showed the heading of master blade template but it is not useful in appending the content in the template. To do so @parent directive come in handy.

Below shown a simple example which will help in understanding the use of @parent : Create a master.blade.php in resources/views/layout with following code.

<html>
    <head>
        <title>Master Template having parent </title>
		<style>
		.sidenav {
		  height: 100%;
		  width: 160px;
		  position: fixed;
		  z-index: 1;
		  top: 0;
		  left: 0;
		  background-color: #111;
		  overflow-x: hidden;
		  padding-top: 20px;
		}
		
		.sidenav a {
		  padding: 6px 8px 6px 16px;
		  text-decoration: none;
		  font-size: 25px;
		  color: #818181;
		  display: block;
		}
		
		.container {
		  margin-left: 160px; 
		  font-size: 28px; 
		  padding: 0px 10px;
		}
		</style>
    </head>
    <body>
        @section('sidebar')
            <div class="sidenav">
			  <a href="#">Home</a>
			  <a href="#">Product</a>
			  <a href="#">Service</a>
			  <a href="#">About</a>
			  <a href="#">Contact</a>
			</div>
        @show

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

Now we create a sidebar.blade.php in resources/views with following code.

@extends('layout.master')
@section('sidebar')
    @parent
    <div class="container">This is appended to the master sidebar via parent.</div>
@endsection

@section('content')
    <p>This is Content here.</p>
@endsection

@parent directive append the section content which is present in the master layout when called. Here in above example inside master layout @section('sidebar') is created and ended with @show which is used for appending into other. you can use @append instead.

Set the route according to your choice in web.php and run the example.

Route::get('/parent', function () {  
    return view('sidebar');  
});

Output:

« Previous Next »

Laravel Tutorial Laravel Introduction Install Laravel on Windows Laravel Application Structure Laravel Configuration Laravel Routing Parameter Laravel Request Laravel Controllers Laravel Middleware Laravel Middleware Laravel Views Passing Data to Laravel Views Laravel Blade Templates Laravel Master Blade Template Laravel Forms Laravel Migrations Laravel database Laravel Eloquent Laravel Session

No Sidebar ads