Table of contents

Laravel Blade Layout

Many companies prefer using Laravel because it is a powerful framework that able us to build web applications of any complexity. And so many tools and packages that support by small groups of developers.

 

Laravel also offers a Blade templating engine that is fast in rendering views that are produced HTML based.

 

So if you're new to this framework and want to learn with Laravel 9 Blade Layout Templating then this might can help you.

 

To start with this tutorial we need a fresh installation of Laravel.

 

Step 1: Laravel Installation

To install the new Laravel project kindly run the following command:

composer create-project laravel/laravel blade-templating

cd blade-templating

 

Step 2: Create Controller

In this step, we need to create our controller first. To make the new controller run the following command below:

 

php artisan make:controller PagesController

 

For this tutorial, I name our controller PagesController once done let's create our routes in the next step.

 

NOTE: Before running the command above don't forget to point it in your Laravel project in this case we should point in blade-templating because that is our project name for this tutorial.

 

Step 3: Create Pages Routes

Now, let's create our page route so that we can access our pages. Open routes/web.php and add the following lines below:

 

Route::group(['namespace' => 'App\Http\Controllers'], function()
{  
    Route::get('/', 'PagesController@index')->name('pages.index');
    Route::get('/about', 'PagesController@about')->name('pages.about');
});

 

Step 4: Laravel Blade Templating Structure

In this step, I will show you what is our Views on structuring the following folders and files.

 

- resources

-- views

--- layouts

----- master.blade.php

--- home.blade.php

--- about.blade.php

--- partials

----- header.blade.php

----- styles.blade.php

----- scripts.blade.php

----- footer.blade.php

 

Step 5: Create Partials Folder and Files

In this step let's create our resources/views/partials folder and then create files with the following header.blade.php, styles.blade.php, scripts.blade.php, and footer.blade.php.

 

NOTE: We are using Bootstrap 5 in this tutorial.

 

header.blade.php

 

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('pages.index') }}">Brand Name</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{{ route('pages.index') }}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ route('pages.about') }}">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

 

styles.blade.php

 

<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 

footer.blade.php

 

<footer class="pt-5 my-5 text-muted">
  Created by <a href="https://codeanddeploy.com">Code And Deploy</a> &middot; &copy; {{ date('Y') }}
</footer>

 

scripts.blade.php

 

<!-- Bootstrap core Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- Your Javascript Below -->

 

Step 6: Create the Layout

In this step let's create resources/views/layouts folder then create master.blade.php file. As you can see below we @include our partials file to complete our layout then we use @yield to inject the content into the layout.

 

master.blade.php

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <title>How To Create a Laravel 9 Blade Layout Templating</title>

  @include('partials.styles')
</head>
<body>
    
@include('partials.header')

<main class="container mt-5">
    @yield('content')
</main>

@include('partials.footer')

@include('partials.scripts')
      
</body>
</html>

 

Step 7: Pages Views

In this step let's create the pages view home.blade.php and about.blade.php inside resources/views folder.

 

home.blade.php

 

@extends('layouts.master')

@section('content')
   This is home page
@endsection

 

about.blade.php

 

@extends('layouts.master')

@section('content')
   This is about page
@endsection

 

As you can see we have @extends above because it will able us to use the layout we created above. And the @section will help us to create a section using the layout we created and injected into the @yield to display the content of the section.

 

Step 8: Let's create methods in Controller

Now let's create our index(), and about() methods in our PagesController. See the following code below:

 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
    public function index() 
    {
        return view('home');
    }

    public function about() 
    {
        return view('about');
    }
}

 

Now, you have the basic Laravel 9 Blade Layout Templating. I hope it helps. Just run the php artisan serve below to view it.

Read next