Create Layout in laravel using blade templating

Rakesh Sharma      5 Comments  

How to create layout in laravel using blade templating (updated with laravel 5):-

We really need template in our any type of site like divide layout in footer, header, middle. called layout or templating. In laravel we are using blade template for making layout. We are using blade template to create a layout in laravel 5 except mess things controller, models etc. Using blade template we can save more html code writing and fast rendering of page it’s a another good feature of blade templating. so it’s easy to create layout in laravel using blade templating.

Blade Templating :-

blade is a simple and powerful templating engine which is inbuilt with laravel. blade templating didn’t use controller layouts, it’s driven by template inheritance and sections. we can create a blade template file using .blade.php extension.
For example :- for creating a “test” file using blade then file name will be “test.blade.php”

To create layout in laravel using blade templating we need to create some blade template files in views.

Views (laravel 4):-


File struture :-

- app
-- views
--- layout
------- default.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php

Views (laravel 5):-


File struture :-

- resources
-- views
--- layout
------- default.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php

Layout

laravel 4 :- create a new folder in app/views/layout
laravel 5 :- create a new folder in resources/views/layout

default.blade.php :- create a new file in
laravel 4 :- app/views/layout/default.blade.php
laravel 5 :- resources/views/layout/default.blade.php


<!doctype html>
<html>
<head>
<!-- my head section goes here -->
<!-- my css and js goes here -->
</head>
<body>
<div class="container">
  <header> @include('layout.header') </header>
  <div class="sidebar"> @include('layout.sidebar') </div>
  <div class="contents"> @yield('content') </div>
  <footer> @include('layout.footer') </footer>
</div>
</body>
</html>

header.blade.php :- create a new file in
laravel 4 :- app/views/layout/header.blade.php
laravel 5 :- resources/views/layout/header.blade.php


<ul>
  <li><a href="{{URL::to('/')}}">Home</a></li>
  <li><a href="{{URL::to('/about')}}">About</a></li>
</ul>

Note :- {{ $var }} has been deprecated in laravel 5 rather use {!! $var !!}

footer.blade.php :- create a new file in
laravel 4 :- app/views/layout/footer.blade.php
laravel 5 :- resources/views/layout/footer.blade.php


<div>My footer section here</div>

sidebar.blade.php :- create a new file in
laravel 4 :- app/views/layout/sidebar.blade.php
laravel 5 :- resources/views/layout/sidebar.blade.php


<div>My sidebar section here</div>

Pages

Pages :- create a new folder in
laravel 4 :- app/views/pages
laravel 5 :- resources/views/pages

home.blade.php :- create a new file in
laravel 4 :- app/views/pages/home.blade.php
laravel 5 :- resources/views/pages/home.blade.php


@extends('layout.default')
@section('content')
	this is my home page
@stop

about.blade.php :- create a new file in
laravel 4 :- app/views/pages/about.blade.php
laravel 5 :- resources/views/pages/about.blade.php


@extends('layout.default')
@section('content')
	this is my about page
@stop

Now we need to link these pages in laravel routing

Routing :-


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

some of code means we are using:-

@yield :- is defining an area in the layout template where sections in views will be placed.It is a placeholder for @section … @stop
@section :- defines the content in the area defined by @yield
@include :- to render a view into another view. The rendered view will automatically inherit all of the data from the current view.

Note:- if you want to exclude any of layout from specific page try in “default.blade.php” like


//match your request route like 'account/login' etc.
@if(!Request::is('login'))
   // sidebar not included on login page.
    @include('layout.sidebar')
@endif

Now we have a simple front-end views for our site. you can add more files for your sidebar etc. Now you have done with Create Layout in laravel using blade templating.
you can learn more from Laravel Blade Templating.

Create Layout in laravel using blade templating

  • Test Me

    there is something missing in the code between your screenshot. Your files has only header and footer and dont have side bars.

    would you mind to add some points like routing the first section to “Login page” without sidebar (whole wide page). and the second page after logging IN, it will have sidebars. Can you please add it into your tutorial? Please. I want to see your structure and extends.

    • rakesh sharma

      Check updated article, i think it make sense now, just create a side.blade.php and include it on default.blade.php and use condition to exclude from page like

      @if(!Request::is(‘login’))
      // sidebar not included on login page.
      @include(‘layout.sidebar’)
      @endif

      • Test Me

        thats cool thanks :) appreciate it so much!

  • Sonu

    I am using these steps in my package . But its not working for me :

    ErrorException in FileViewFinder.php line 137:
    View [includes.head] not found. (View: /var/www/html/laravelapp/packages/mypackage/folder/src/views/home.blade.php)

  • Surbhipatel