Setting Multiple Layout in laravel 5

By: Array99      Posted On: 24 Dec, 2017      Category: Laravel

In most of the projects, there are two sections, one front-end and second back-end which is called admin management. Generally, it needs two different layouts for both sections. In this article, you will learn, setting two different layouts in Laravel 5. After learning this, you can set up multiple layouts in Laravel 5.


Here, we will create two layout for front-end and admin management. Now, install Laravel 5 with project name layoutdemo.

Creating Front-end Layout:

Create a directory with name frontend under view directory. Path will be: /layoutdemo/resources/views/ front

We will create layout and pages related to frontend in front directory. Now, create two directories in front directory with names layouts and pages. 

Folder Structure will be as below:

layoutdemo
- resources
-- views
--- front
---- layout
------- default.blade.php
------- header.blade.php
------- footer.blade.php
---- pages
------- home.blade.php
------- about.blade.php
------- contact.blade.php

Creating Admin Management Layout:

Create a directory with name frontend under view directory. Path will be: /layoutdemo/resources/views/ admin
We will create layout and pages related to Admin Management in admin directory. Now, create two directories in admin directory with names layouts and pages.
Folder Structure will be as below:

layoutdemo
- resources
-- views
--- admin
---- layout
------- default.blade.php
------- header.blade.php
------- sidebar.blade.php
------- footer.blade.php
---- pages
------- dashboard.blade.php
------- login.blade.php
------- userlist.blade.php

The complete folder structure is as below:

- resources
-- views
--- front
---- layout
------- default.blade.php
------- header.blade.php
------- footer.blade.php
---- pages
------- home.blade.php
------- about.blade.php
------- contact.blade.php
--- admin
---- layout
------- default.blade.php
------- header.blade.php
------- sidebar.blade.php
------- footer.blade.php
---- pages
------- dashboard.blade.php
------- login.blade.php
------- userlist.blade.php

Now, put code respective file.

/layoutdemo /resources/views/front/layout/default.blade.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Array99">
<title>Front-end Layouts</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <header class="row">
        @include('front.layout.header')
    </header>
    <div id="main" class="row">
            @yield('content')
    </div>
    <footer class="row">
        @include('front.layout.footer')
    </footer>
</div>
</body>
</html>

Create three pages for front end: 
Home Page
About Page
Contact Page


/layoutdemo /resources/views/front/ pages/home.blade.php

@extends('front.layout.default')

@section('content')
<div class="container">
<p class="text-center">HOME PAGE</p>
</div>
@stop

/layoutdemo /resources/views/front/ pages/about.blade.php

@extends('front.layout.default')

@section('content')
<div class="container">
<p class="text-center">ABOUT PAGE</p>
</div>
@stop

/layoutdemo /resources/views/front/ pages/contact.blade.php

@extends('front.layout.default')

@section('content')
<div class="container">
<p class="text-center">CONTACT PAGE</p>
</div>
@stop

Now, create routing for front-end. Open web.php, path is: /layoutdemo/routes/web.php. Remove previous routes and updated with below routes.

Route::get('/', function () {
    return view('front.pages.home');
});
Route::get('/about', function () {
    return view('front.pages.about');
});
Route::get('/contact', function () {
    return view('front.pages.contact');
});

/layoutdemo /resources/views/admin/layout/default.blade.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Array99">
<title>Admin Layouts</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <header class="row">
        @include('admin.layout.header')
    </header>
    <div id="main" class="row">
        <div class="col-md-3">
			@include('admin.layout.sidebar')
		</div>
		<div class="col-md-9">
			@yield('content')
		</div>
    </div>
    <footer class="row">
        @include('admin.layout.footer')
    </footer>
</div>
</body>
</html>

Create three pages for admin management: 
Login Page
Dashboard Page
Userlist Page

/layoutdemo /resources/views/admin/pages/login.blade.php

@extends('admin.layout.default')

@section('content')
<div class="container">
	<p class="text-center">LOGIN PAGE</p>
</div>
@stop

/layoutdemo /resources/views/admin/pages/dashboard.blade.php

@extends('admin.layout.default')

@section('content')
<div class="container">
	<p class="text-center">DASHBOARD PAGE</p>
</div>
@stop

/layoutdemo /resources/views/admin/userlist.blade.php

@extends('admin.layout.default')

@section('content')
<div class="container">
	<p class="text-center">USER LIST PAGE</p>
</div>
@stop

Now, create routing for admin management. Open web.php, path is: /layoutdemo/routes/web.php. Updated with below routes.

Route::get('/admin', function () {
    return view('admin.pages.login');
});
Route::get('/admin/dashboard', function () {
    return view('admin.pages.dashboard');
});
Route::get('/admin/userlist', function () {
    return view('admin.pages.userlist');
});

Thus, you can set up multiple layouts in Laravel 5.

 

You may like: