Welcome, it’s great to have you here.

In this tutorial, we learn about how to create a layout for blade files.

Create Pages Routes

  • Firstly, I will create the routes for point-to-pages. Open routes/web.php and create the following lines in it.
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;

Route::get('home',[HomeController::class,'homePage'])->name('homePage');
Route::get('about-us',[HomeController::class,'aboutUsPage'])->name('aboutUsPage');
Route::get('contect-us',[HomeController::class,'contectUsPage'])->name('contectUsPage');

Create Controller

  • Now create HomeController and create the below method on it.
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use View;

class HomeController extends Controller
{
    public function homePage(){
        return View::make('pages.home');
    }

    public function aboutUsPage(){
        return View::make('pages.about-us');
    }

    public function contectUsPage(){
        return View::make('pages.contect-us');
    }
}

Create Views Structure

Follow the below simple steps to create a Layout for the theme.

- resources

-- views

--- layouts

------- default.blade.php

--- pages

------- home.blade.php

------- about-us.blade.php

------- contact-us.blade.php

--- common

------- head.blade.php

------- header.blade.php

------- footer.blade.php

Create commons files

Create the following common, with the following code:

head.blade.php

<meta charset="utf-8">
<title>Victor Zilla - Create Layout By Using Laravel Blade Template Engine</title>

Header.blade.php

<div class="navbar">
    <div class="navbar-inner">
        <a id="logo" href="{{ route('homePage') }}">Home</a>
        <ul class="nav">
            <li><a href="{{ route('homePage') }}">Home</a></li>
            <li><a href="{{ route('aboutUsPage') }}">AboutUs</a></li>
            <li><a href="{{ route('contectUsPage') }}">ContactUs</a></li>
        </ul>
    </div>
</div>

footer.blade.php

<div >© Copyright {{ date('Y')}} <a href="https://victorzilla.com"> VictorZilla </a> </div>

Create the Layout

  • I will use @include to bring in tiny parts of the code that I have created in includes folders, and @yield to bring in content from the individual pages I will be using.

layouts/default.blade.php

<!doctype html>
<html>
<head>
   @include('common.head')
</head>
<body>
<div class="container">
   <header class="row">
       @include('common.header')
   </header>
   <div id="main" class="row">
           @yield('content')
   </div>
   <footer class="row">
       @include('common.footer')
   </footer>
</div>
</body>

pages/home.blade.php

@extends('layouts.default')
@section('content')
   <h4>You are on Home Page. </h4>
@stop

pages/about-us.blade.php

@extends('layouts.default')
@section('content')
  <h4>You are on About-Us Page. </h4>
@stop

pages/contect-us.blade.php

@extends('layouts.default')
@section('content')
   <h4>You are on Contect-Us Page. </h4>
@stop

Categorized in:

Laravel