Laravel 7 Tutorial – Blade templating

Laravel 7 Tutorial - Blade templating

Laravel 7 Tutorial – Blade templating



Laravel 7 Tutorial – Blade templating

Laravel Layout Files

In laravel we can create layout files. Maily what a layout file is, It is a file where we call our libraries such as script and css files. And by extending layout file view files can get the access of scripts and css files called in layout file. Layout file yields content so depending on the page user is layout file generate content dynamically from the view file. Confusion then watch the video tutorial. Or see below example. Here is a example layout file.





<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    //Including css
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   //yielding style from other view files

    @yield('style')
</head>
<body>
<div class="content">

   //having navigation so it can be rendered on all views    

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li  class="nav-item"><a href="/" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="/about" class="nav-link">About</a></li>
                <li  class="nav-item"><a href="/blog" class="nav-link">Blog</a></li>
                <li  class="nav-item"><a href="/contact" class="nav-link">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

//yielding content

@yield('content')

//yielding scripts from view file

@yield('scripts')

// including some view files.

<script
    src="https://code.jquery.com/jquery-3.5.1.js"
    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Now see a view file which extends this layout file then we discuss how all working.



@extends('application')
@section('style')
    <style>
        body{
            padding:0px;
            margin:0px;
        }
    </style>

@endsection

@section('content')
    <h1>About Page</h1>
@endsection


@section('scripts')
    <script>
        alert('Works from About Page');
    </script>
@endsection

Ok it looks complex but it is not. So we have a file named “application.blade.php”, Which is our layout file. now we are calling bootstrap.css, bootstrap.js and jquery in this file.





Watch carefully



 @yield('content')

This yield line will get content from view file dynamically. So when we create a view file we create a section with same name “content”. That means we are saying when user is on this view file take content from this view and include it in layout file where “content” is getting yield.





Benefits

Now using layouts we can remove the need of calling bootstrap on each page. Our view file will get bootstrap from layout file automatically.



For better understanding check video so you get to see how it works practically.