Create One Blade Template (Layout) for All page in Laravel 4

Okay for long time, I will update the blog content and now I want to share how to create one base template or one layout for all page in my laravel framework. The structure might look like this:

And now the first we must change the head.blade.php like this (I using bootstrap):

<title>Simple Project</title>
<meta charset="utf-8">
<meta name="description" content="Simpel Project">
<meta name="Imron Rosdiana" content="Simple Project">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Jquery -->
<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

Explanations:

This file is used like this if we use html normal (This is a head template from above code):

<!DOCTYPE html>
<html>
<head>
	<title>Simple Project</title>
	<meta charset="utf-8">
	<meta name="description" content="Simpel Project">
	<meta name="Imron Rosdiana" content="Simple Project">

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<!-- Latest compiled and minified JavaScript -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

	<!-- Jquery -->
	<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

Then we must change header.blade.php. This file is used for example top menu. Why we must create template for the menu?

Because example top menu is a one based menu for all page. Maybe you know in one web have same menu for all page like menu Home, About, Help. So if we change only one file, the menu can update for all page. Imagine if you create a menu on each page, it would have trouble if change every menu on every page.

So change the header.blade.php like this:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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="{{ URL::to('/') }}">Simple Project</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">
                <li><a href="{{ URL::to('/') }}">Page 1</a></li>
                <li><a href="{{ URL::to('page2') }}">Page 2</a></li>
                <li><a href="{{ URL::to('page3') }}">Page 3</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Then for the footer we must change too. The footer usually used to include javascript code like this:

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- your custom js -->

And the end layout is base_layout.blade.php. In here we add/include page in include folder like head.blade.php, header.blade.php, and footer.blade.php. So we must change the base_layout.blade.php like this:

<!DOCTYPE html>
<html>
    <head>
        @include('includes.head')
    </head>
<body>
    <!-- menubar -->
    <header>
        @include('includes.header')
    </header><!-- /header -->

    <!-- content -->
    <article>
        @yield('content')
    </article>

    <!-- footer -->
    <footer>
        @include('includes.footer')
    </footer>
</body>
</html>

Explanations:

  1. Line 4. This is to include head.blade.php
  2. Line 9. This is to include header.blade.php
  3. Line 14. This is to include content page. Example from above structure, we have 3 page in folder pages like page1.blade.php, page2.blade.php and page3.blade.php. Then the include content is to include the file ini pages directory.
  4. Line 19. This is to include footer.blade.php

And now we must change the page file like this:

@extends('layout.base_layout')
@section('content')
	<div class="row">
        <div class="col-md-12">
            From page 1
        </div>
    </div>
@stop
@extends('layout.base_layout')
@section('content')
	<div class="row">
        <div class="col-md-12">
            From page 2
        </div>
    </div>
@stop
@extends('layout.base_layout')
@section('content')
	<div class="row">
        <div class="col-md-12">
            From page 3
        </div>
    </div>
@stop

Explanations:
Look from above code, now with base layout, we can create page file with less code. Why? Because for all same code, we separate them into separate files and we can reuse code (like OOP concepts right? :D).
From the code we use extends, the extends like include, but different in here laravel from default is call/load the base_layout.blade.php and include the content page, example if we route page1, so the base_layout will load/include page1 too.
And this is why from the base_layout.blade.php we use code @yield(‘content’), because from the page we use same name that is content from this code @section(‘content’).
For the end from this tutorial, so we must add the route. Change routes.php like this:

<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the Closure to execute when that URI is requested.
|
*/

Route::get('/', function() {
	return View::make('pages/page1');
});
Route::get('/page2', function() {
	return View::make('pages/page2');
});
Route::get('/page3', function() {
	return View::make('pages/page3');
});

Now run your laravel, and if right, the result show like this:

Source: http://scotch.io/tutorials/simple-laravel-layouts-using-blade

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s