Creating A Master Page - Laravel 5.3 for Beginners

Before we close out the chapter, we’re going to set up what is known as a ‘Master’ page. What the master page does is hold the parts of the html that is repetitive, which then can be used by the individual pages. Let’s start setting that up.

In the views folder, let’s create a new folder named layouts. Within the layouts folder, let’s create master.blade.php. It should look like this:

If you are curious why index.blade.php is green, it’s because I have not committed it to git yet. Anyway, back to the master page.

So what we want to do inside master.blade.php is to create a template page that holds the header and footer and injection points for the content in the body. You will see what I mean as we put it together.

First we need to grab some html to work with. Since we’re building a reusable template, I’m actually going to be fairly thorough. We’re going to use Twitter Bootstrap 3.

Bootstrap is widely used and for good reason. It’s a powerful front-end framework that will allow us to stand up a mobile responsive page quickly. If you are not familiar with Bootstrap, you should really take the time to get to know it. You can find it here:

getBottstrap.com

On that site, we’re going to grab the source code to the following page:

Bootstrap Theme

So all I’m going to do is view source and copy, then paste the contents into master.blade.php.

It’s too many lines to include the whole thing here, so I’m going to chop out what we don’t need, make a few small tweaks to get us started, and show you what you want to put in master.blade.php.

Also, it’s time to start using Gists. Like I said before, Gists are hosted code snippets on Github, which are super easy to copy and paste. The code goes directly from my IDE to the Gist, so I know it’s working code.

Here is the first one:

Gist:

master.blade.php - first draft

Obviously, you can still read along with the code in the book. Just be mindful of the accommodations I had to make to avoid wordwrap.

<!-- The above 3 meta tags *must* come first in the head;

any other head content must come *after* these tags -->

<title>Theme Template for Bootstrap</title>

Chapter 4: Let’s Get Started With Laravel 55

<li><a href="#">Something else here</a></li>

Ok, with that out of the way, let’s talk about what I did differently from the source code on getbootstrap.com.

I want you to be able to repeat this process at will when you are looking to create sites and use different templates.

CDN

Many of you may be familiar with a CDN. I grabbed the code from the link I showed you, and part of that pulled in the necessary files via CDN. A CDN is a content delivery network and it’s an easy way to use the Bootstrap and jquery files that are often needed. There are many CDNs, just google for what you need.

This is how it works. A content provider provides a live feed for the files, which are then cached in your browser. Since they are so common, most users will have them cached in their browsers, so when the user hits your page, it loads instantly.

Chapter 4: Let’s Get Started With Laravel 57 Unfortunately, this is not a robust solution. Too many CDN calls bog down the browser and there are limits to how many calls you make. Luckily for us, Laravel 5.3 ships with Bootstrap and Jquery included, so I dropped the CDN calls, and instead make calls to our local files, which are located in the public directory:

Note that we don’t modify the css file or the js file directly, we do it via Elixir, which compiles our assets into these files. I’m going to cover Elixir later in the book, but we’re not ready for that just yet.

So let’s go back to master.blade.php and if you look at the code carefully, in the head section, you will see the following:

So that is the call to our css file.

And just before the closing body tag, you will see:

Obviously, that pulls in our javascript file.

You’ll note that I also added the following line in the body:

@yield('content')

This tells the master page to inject a section named content when the master page is extended by another page. We’re going to try this with our test.index view, which should demonstrate the concept fully.

In our test.index view, which, just to be clear, is the index.blade.php file in the test folder, we need to add to change it to the following:

Gist:

test.index revised From book:

@extends('layouts.master')

@section('content')

@if(count($Beatles) > 0)

@foreach($Beatles as $Beatle)

{{ $Beatle }} <br>

@endforeach

@else

Chapter 4: Let’s Get Started With Laravel 59

<h1> Sorry, nothing to show...</h1>

@endif

@endsection

You can see the first line now is:

@extends('layouts.master')

By extending the layouts.master page, we are going to inject the designated sections into it and render the composite of the individual view and the master page. Right now we only have one section named content.

The tag for that is:

@section('content')

At the end of the file, you can see we are closing the section with:

@endsection

Now if you have all that working properly, you should be able to view the page at my-sample-project.com/test, however, there will be a problem:

You can see that the nav, because we are using a top-pin, is spilling over onto the body. Because of that we need write some css to handle it. Let’s add a style tag within the header section of master.blade.php like so:

<style>

body{

padding-top: 65px;

}

</style>

I included the call to the css file for reference.

So now, if you go to my-sample-project.com/test, you should see:

Ok, so we got our master page up and running, but there are still a few more tweaks we can do to help us with organization.

Chapter 4: Let’s Get Started With Laravel 61

In document Laravel 5.3 for Beginners (Page 63-71)