Create Layout in laravel using blade templating : Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Tuesday, August 25, 2015

Create Layout in laravel using blade templating

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.

Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Tuesday, August 25, 2015