How to create header, footer, sidebar in Laravel?

 

Creating header,footer or sidebar in dynamic website is a common thing. When you work on dynamic websites and there are multiple pages, you should separate your header, footer, sidebar file to avoid calling the same code on every templates file. The main important thing to separate these files is that, if you want to change something in your header/footer file then you just have to change at one place rather than changing in all files. Here is the step by step procedure to create header,footer template file in laravel 5.

Laravel provides a simple template engine for User Interface(UI) design. All your blade template files are stored in the resources/views directory with .blade.php extension.

Routes:
Add below code in your routes.php file

Route::get('index', 'IndexController@index');

Controllers:
Create your IndexController.php controller file under App/Http/Controllers folder and then add the below code.

<?php 
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;

class IndexController extends Controller {
	
	//For Index Page
	public function index(){
		return view('index');
	}
}
?>

View:
Now we will create all our blade templates file and store them on different location.

Demo Design Of HTML Page

Below are the sample HTML code for demo design.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>My First Page in Laravel</title>
</head>
<body>
<div class="main">
  <header>Your header Part Goes Here</header>
  <div class="main_content">
    <div class="left_content">Your Left Part Goes Here</div>
    <div class="middle_content">Your Content Part Goes Here</div>
  </div>
  <footer>Your Content Part Goes Here</footer>
</div>
</body>
</html>

You should store all your css,javascript files and images in a separate folder. Here I have stored the folder containing all css,javascript and image in the root of the project.

CSS Template
Create “css.blade.php” template file and add below code. The asset helper function of laravel generates a full URL of the given path.

<link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css" />

Header Template
Create header template file name as “header.blade.php” and paste below code.

<header>Your header Part Goes Here</header>

Sidebar Template
Create sidebar “sidebar.blade.php” template and paste below code.

<header>Your sidebar Part Goes Here</header>

Footer Template
Create footer “footer.blade.php” template and paste below code.

<footer>Your Footer Part Goes Here</footer>

Master Template Layout

Now the most important thing is that, we will create our “layout.blade.php” master blade template file and use it across various pages. The main motto to create the layout file is that, all header,footer and sidebar will be included in this file at once. When you create your other template file, just include the master layout file. Below is the master layout template code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@include('css') {{-- Include css file --}}	
<title>@yield('title')</title>
</head>
<body>
<div class="main">
  @include('header')  {{-- Include header file --}}	
  <div class="main_content">
    @include('sidebar')	{{-- Include sidebar file --}}	
    @yield("middle_content")
  </div>
  @include('footer') {{-- Include footer file --}}	
</div>
</body>
</html>

In the above code, @include function allows to include a blade view file within your existing view. You can also use all variables in your child view which are defined in your parent view.

Create Home Page Template

Next create your home page and include the layout template file in it. Create a template file name as “index.blade.php” file. Before you write any code in the index blade, you need to extend your layout which contains all css,header and footer file using blade’s @extends. The @section defines a section of content and @yield which is used to display the contents of a given section. Add below code in your index blade file.

@extends('layout')
@section('title', 'Page Title') {{-- For different pages you can change your title here --}}	
@section('middle_content') {{--Put your middle content--}}
    <div>Place your middle content here</div>
@endsection

COMMENTS ( 6 )

Excellent, what a webpage it is! This web site gives helpful facts to us, keep it up.

Reply

Fine method of telling, and good component of writing to get information concerning my
presentation topic, which i will present in institution of higher education.

Reply

TamiFKerst says:

Definitely believe that which you stated. Your preferred justification appeared to be on the
internet the easiest thing to understand. I only say to you personally, I definitely
get irked while people consider worries that they plainly do not find out
about. You was able to hit the nail upon the very best in addition to defined out the whole thing without having
side effect , people can go on a signal.
Will probably be back to get more. Thanks

Reply

Hi to all, it’s genuinely a pleasant for me to pay a visit this website, it includes
important Information.

Reply

NellyWElbe says:

This paragraph is actually a good one it helps new net people, who are wishing for blogging.

Reply

Excellent post. I am dealing with many of these issues at the same
time..

Reply

Leave a comment

SUBSCRIBE TO NEWSLETTER

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories