Layout Blade Directives | Setup Layout in Laravel 9 | @yield, @section, @include, @extends, @push, @endpush, and @stack Guide | How to Use Them Explained

on

Layout Blade Directives

First of all buid laravel project by executing - these commands 

Then open routes>web.php and create some functions

Route::get('/', function () {
    return view('home');
});

Route::get('/about', function () {
    return view('about');
});

Route::get('/courses', function () {
    return view('courses');
});

Route::get('/services', function () {
    return view('services');
});

Then create a directories like as follows


Following three files inside layouts directory

Inside main.blade.php
    
@include('layouts.header')                                                            

<div class="container">
    @yield('main-section')
</div>  

@include('layouts.footer')

Inside header.blade.php

<!--doctype html-->
<html lang="en">

<head>
  @stack('title')
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, 
    shrink-to-fit=no">

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
  crossorigin="anonymous">

</head>

<body>
  <header>
    <!-- place navbar here -->
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a class="navbar-brand" href="/">Navbar</a>
        <button class="navbar-toggler d-lg-none" type="button" 
        data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" 
        aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav me-auto mt-2 mt-lg-0">
                <li class="nav-item">
                    <a aria-current="page" class="nav-link active" href="/">Home 
                    <span class="visually-hidden">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">about</a>
                </li>
                <li class="nav-item dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdownId">Explore More</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownId">
                        <a class="dropdown-item" href="/courses">Courses</a>
                        <a class="dropdown-item" href="/services">Services</a>
                    </div>
                </li>
            </ul>
            <form class="d-flex my-2 my-lg-0">
                <input class="form-control me-sm-2" type="text" placeholder="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
                    Search
                </button>
            </form>
        </div>
    </nav>
  </header>

Inside footer.blade.php

<footer>
    <!-- place footer here -->
    <div class="container-fluid bg-dark my-4 py-5">
        <p class="text-center text-light">Copyright 2023 &copy; | 
         All rights reserved</p>
    </div>
  </footer>
  <!-- Bootstrap JavaScript Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.
    js"
    integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3
    " crossorigin="anonymous">
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
    integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz
    " crossorigin="anonymous">
  </script>
</body>

</html>

Following files inside views directory

Inside home.blade.php


@extends('layouts.main')
@push('title')
<title>Home Page</title>
@endpush
@section('main-section')
    <h1 class="text-center">
        Home Page
    </h1>
@endsection

Inside about.blade.php

@extends('layouts.main')
@push('title')
    <title>About Page</title>
@endpush
@section('main-section')
    <h1 class="text-center">
        About Page
    </h1>
@endsection

Inside courses.blade.php

@extends('layouts.main')
@push('title')
<title>Courses Page</title>
@endpush
@section('main-section')
    <h1 class="text-center">Courses Page</h1>
@endsection

Inside services.blade.php

@extends('layouts.main')
@push('title')
<title>Services Page</title>
@endpush
@section('main-section')
    <h1 class="text-center">Services Page</h1>
@endsection

Now run your project. Now you have little idea about how these all directives works. 

1. @yield directives is used to display the contents of a given section.
2. @section and @endesction directive, defines a section of content.
3. @extends blade directive to specify which layout the child view should "inherit".
4. @stack to render the complete stack contents, pass the name of the stack to the @stack directives.
5. @push and @endpush is used to push data into the stack.
Location: India

Comments

Post a Comment