Create Layout in Laravel using blade templates

Laravel


Any type of site need template to divide layout in sections like header, middle, sidebar and footer. This is called templating. We are using blade template to create layout in laravel. Using blade templates we can save more html code writing and fast rendering of page. It is a another good feature of blade template. Let’s check how to create layout in laravel using blade templates.

Blade Template

Blade is a simple and powerful templating engine which is inbuilt in laravel. Blade templating is driven by template inheritance and sections, so no use of controller layouts. we can create a blade template file using .blade.php extension. For example creating a “home” file using blade then file name will be “home.blade.php”.

Create Layout in Laravel using blade templates

Views (laravel 5):-

File struture :-

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

Layouts

create a new folder in resources/views/layouts

default.blade.php :- create a new file in resources/views/layouts/default.blade.php

<html>
    <head>
        <title>App Name - @yield('title')</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		
		<link rel="stylesheet" href="{{ URL::asset('css/app.css') }}">
        <script type="text/javascript" src="{{ URL::asset('js/app.js') }}"></script>

    </head>
    <body>
		
<header class="site-header"> @include('layouts.header') </header>


<div id="main">

<div class="container">

<div class="row">

<div id="content" class="col-md-9">

<div class="contents"> @yield('content') </div>

					</div>


<div id="sidebar-home-top" class="widget-area sidebar col-md-3">

<div class="sidebar"> @include('layouts.sidebar') </div>

					</div>

				</div>

			</div>

		</div>


<footer id="footer" class="site-footer"> @include('layouts.footer') </footer>

	</body>
</html>

header.blade.php :- create a new file in resources/views/layouts/header.blade.php


<nav id="secondary-nav" class="main-navigation" role="navigation">
	
<div class="container">

<div class="row">

<ul class="sf-menu">
			  
<li><a href="{{URL::to('/')}}">Home</a></li>


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

			</ul>


		</div>

	</div>

<!-- .container -->
</nav>

footer.blade.php :- create a new file in resources/views/layouts/footer.blade.php


<div class="container">

<div class="row">
		Footer section will be here
	</div>

</div>

sidebar.blade.php :- create a new file in resources/views/layouts/sidebar.blade.php


<div class="widget">
	Sidebar section will be here
</div>

Pages :- create a new folder in resources/views/pages

home.blade.php :- create a new file in resources/views/pages/home.blade.php

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

about.blade.php :- create a new file in resources/views/pages/about.blade.php

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

Now we need to link these pages in laravel routing

Routing :- in routes\web.php file

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

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

This is a simple front-end views for our site. It will help you to set basic layout. Now you have done with Create Layout in Laravel using blade templates.

Related Tutorials