Tutorial

Simple Laravel Layouts Using Blade

Draft updated on Invalid Date

Laravel

Chris on Code

This tutorial is out of date and no longer maintained.

Introduction

A simple and easy way to use the Blade templating engine to get a fully ready layout system.

We will create a few site pages (home, about, projects, contact). Here is a table of the pages that we will use and the layouts that they will use.

Page	Layout
Home	Full Width
About	Sidebar
Projects	Sidebar
Contact	Full Width

Routing

To get our pages to work, we’re going to set up a simple route to get our home page.

    Route::get('/', function()
    {
        return View::make('pages.home');
    });
    Route::get('about', function()
    {
        return View::make('pages.about');
    });
    Route::get('projects', function()
    {
        return View::make('pages.projects');
    });
    Route::get('contact', function()
    {
        return View::make('pages.contact');
    });

Since we’re only touching on layouts in Blade, we won’t need to do anything but load a view. We don’t need to mess with controllers or any other fancy things.

Now that we have our routes set up, we will start our work with the home page. Open up app/views/pages/home.blade.php. Inside of that file, we will pull together a layout file, a page file, and includes. By using the same layout files for multiple pages, we don’t have to repeat ourselves when writing our pages in our sites.

Views

The File Structure

Let’s create the files necessary for creating a whole templating system. Here are the folders and files. Go ahead and create them.

    - app
    -- views
    --- layouts
    ------- default.blade.php
    ------- sidebar.blade.php
    --- pages
    ------- home.blade.php
    ------- about.blade.php
    ------- projects.blade.php
    ------- contact.blade.php
    --- includes
    ------- head.blade.php
    ------- header.blade.php
    ------- footer.blade.php
    ------- sidebar.blade.php

Includes

We will use the head, header, and footer includes so that we don’t have to rewrite that code. Let’s get those out of the way real quick.

head.blade.php

    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="Scotch">

    <title>Super Cool Layouts</title>

    <!-- load bootstrap from a cdn -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">

header.blade.php

    <div class="navbar">
        <div class="navbar-inner">
            <a id="logo" href="/">Single Malt</a>
            <ul class="nav">
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/projects">Projects</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </div>
    </div>

    <div id="copyright text-right">© Copyright 2013 Scotchy Scotch Scotch</div>

Default Layout and Pages (Home, Contact)

With our includes ready, let’s make our first layout.

We will be using @include to bring in slices and @yield to bring in content from the individual pages we will be using.

    <!doctype html>
    <html>
    <head>
        @include('includes.head')
    </head>
    <body>
    <div class="container">

        <header class="row">
            @include('includes.header')
        </header>

        <div id="main" class="row">

                @yield('content')

        </div>

        <footer class="row">
            @include('includes.footer')
        </footer>

    </div>
    </body>
    </html>

Home Page and Contact Page

We won’t dive too far into the actual content of each page. The home page and contact pages will use the same layouts/default.blade.php. We won’t have to reuse the code in the layout or the includes now!

Blade lets us use the layout that we just created by using @extends. By creating @section, we create a section that will be used in the layout. Here we use @section('content') and in our layout, all that we type here will be injected in @yield in the layout.

pages/home.blade.php

    @extends('layouts.default')
    @section('content')
        i am the home page
    @stop

pages/contact.blade.php

    @extends('layouts.default')
    @section('content')
        i am the contact page
    @stop

With our default layout and those pages out of the way, we can make our sidebar include, sidebar layout, and pages.

        <!-- sidebar nav -->
        <nav id="sidebar-nav">
            <ul class="nav nav-pills nav-stacked">
                <li><a href="#">Fly to the Moon</a></li>
                <li><a href="#">Dig to China</a></li>
                <li><a href="#">Swim Across the Sea</a></li>
            </ul>
        </nav>

The difference between this layout and the default layout is the sidebar. We add that to the main section with the help of Twitter Bootstrap classes. Now we have a sidebar on the left and our content on the right. We can adjust this however we want to create any size sidebar either on the left or the right.

    <!doctype html>
    <html>
    <head>
        @include('includes.head')
    </head>
    <body>
    <div class="container">

        <header class="row">
            @include('includes.header')
        </header>

        <div id="main" class="row">

            <!-- sidebar content -->
            <div id="sidebar" class="col-md-4">
                @include('includes.sidebar')
            </div>

            <!-- main content -->
            <div id="content" class="col-md-8">
                @yield('content')
            </div>

        </div>

        <footer class="row">
            @include('includes.footer')
        </footer>

    </div>
    </body>
    </html>

About and Projects Pages

Like the home and contact pages, we won’t dive into the content. Just a simple use of the layout and adding content.

pages/about.blade.php

    @extends('layouts.sidebar')
    @section('content')
        i am the about page
    @stop

pages/projects.blade.php

    @extends('layouts.sidebar')
    @section('content')
        i am the projects page
    @stop

Conclusion

Now we can create a simple foundation for the front-end views for our site. Layouts, slices, and pages all work together to create an easy templating system. There is much more than Laravel Blade Templating and I encourage you to take a look at what else we can do.

Check out our other Laravel tutorials in our Laravel series for more tutorials on our favorite PHP framework.

Thanks for reading and let us know if you have any questions or comments or what you’d like us to write about in the comments.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors