Laravel Blade Master Template Configuration

Laravel Blade Master Template Configuration

The Blade Master Template is going to be your best friend. In the last episode we started to work with rendering views in Laravel. Recall, this amounts to doing something like return view('file'), where file is the name of the view we want to render. In this episode we’ll take a look at the concept of using a master template to act as the blueprint for our views. It is a fantastic way to reuse code, and almost works in a similar way to the idea of having a class you can extend. The master template is the class, and the individual view files extend the master to allow for easy code reuse. Let’s take a look at how to do this now.

Create The Master Page

The Blade Master Template is where we can place all the boilerplate that all pages will typically make use of. Most times you can name this file something like master.blade.php. All view files that you would like to have make use of your master page can now use the @extends keyword to do so. Since our master page has the name of master.blade.php, in our view files we will use @extends('master'). You can name the master page something else if you want to, you’ll just need to make sure to extend the other name. For example if your master page is default.blade.php, you can use @extends(‘default‘) in your view files.

Laravel Blade Master Template
God Bless Auto Complete

Here is the master page we created for this demonstration.

\resources\views\master.blade.php source

Excellent. Let’s note a few things here. Thanks to PHP Storm, we are able to quickly format the source so that everything gets indented nicely and so on. The ctrl + alt + L key combination are what we need for this. Next, since there is no possible way I can remember all the classes available in bootstrap, (or method calls in Laravel for that matter), PHP Storm saves the day with simply superb auto complete functionality. Being able to start typing, and then seeing all of your available options is really fantastic. Working with the Blade Master Template really becomes a joy in this way.

Master Pages yield Content

Within the master page, we need a way to display the sub views so to speak. Think of this like a placeholder, or almost like an include() statement in native PHP. What the @yield keyword does, is to import a named section of content. Let’s see our updated view file which we have modified to extend our master template file.

\resources\views\helloworld.blade.php source

laravel master page screenshot

This is a good example of how named sections work. In our master page we yield a section called content. In our view file that extends the master page then, we need a way to name the content we are referring to. We do this with the @section and @endsection keywords. Note that the @section keyword must also have an associated name. In this case it is @section('content'). Basically, anything that comes between these two keywords, is the content that gets injected at @yield('content') in the master page. We can say then that @section / @endsection define the content, and @yield makes use of it.

Include Navigation And Footer With Master Template

We can also include subviews into the master layout. Maybe we would like to include a navigation area, in addition to a footer. Let’s see how to do that. First we’ll show the updated master template, then all of the associated sub views.

\resources\views\master.blade.php source

\resources\views\navigation.blade.php source

\resources\views\helloworld.blade.php source

\resources\views\footer.blade.php source

Note! Even though we are including sub views into the master layout, when we render the helloworld view from our controller, any data passed to that view are also available to the sub views of the master template. We will populate the controller with some variables to make use of in the navigation area as well as the footer area.

\App\Http\Controllers\HelloWorldController.php source

Note that we added a brand, navsearch, and footer key to the $data array. When we pass this to the view being rendered, we will now have the variables of $brand, $navsearch, and $footer to work with in the navigation and footer areas. Let’s try it out.

laravel master template

Looping Through Data With Blade

The final topic we’ll cover in this tutorial is looping over data with blade. Most times, we’ll have some type of collection of data that the controller received from a model or in some other way. When we have this collection, we want to be able to loop over it. Maybe you have a website about video games, and you need to output a list of the names of various games. Let’s see how to do this.

\App\Http\Controllers\HelloWorldController.php source

@foreach and @endforeach

Now we can add the updated code to the view in order to loop through our results.

Laravel foreach endforeach

Laravel Blade Master Template Configuration Conclusion

In this episode we took just a quick look at setting up a master template with the Laravel blade template engine. There is a bit of a learning curve, however it is really elegant, and quick to use once you get used to it. Add in a fantastic IDE like PHP Storm that supports autocomplete for all Laravel components, and you’ll be grinning from ear to ear.

Leave a Reply