Learn Laravel with Enan

Layout

Layouts are often the starting point of many web development projects. Laravel Blade template engine enables the developer to produce HTML based sleek designs and themes.
All views in Laravel are usually built in the blade template. Blade engine is fast in rendering views because it caches the view until they are modified. All the files in resources/views have the extension .blade.php.
Laravel blade template is pretty impressive in performance. This tutorial will serve as an introduction to this templating engine.

        
    - resources

    -- views

    --- layouts

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

    --- pages

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

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

    --- includes

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

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

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

Create Includes

Create the following includes, with the following code:

head.blade.php
        
    <meta charset="utf-8">

    <meta name="description" content="">

    <meta name="Saquib" content="Blade">

    <title>Checkout our layout</title>

    <!-- load bootstrap from a cdn -->

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">

Header.blade.php
        
    <div class="navbar">

        <div class="navbar-inner">

            <a id="logo" href="/">Single Malt</a>

            <ul class="nav">

                <li><a href="/">Home</a></li>

                <li><a href="/contact">Contact</a></li>

            </ul>

        </div>

    </div>

footer.blade.php
        
    <div id="copyright text-right">© Copyright 2017 Saquib Rizwan </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.

default.blade.php
        
    <!doctype html>

    <html>

        <head>

            @include('includes.head')

        </head>

        <body>

            <div class="container">

                <header class="row">

                    @include('includes.header')

                </header>

                <div id="main" class="row">

                    @yield('content')

                </div>

                <footer class="row">

                    @include('includes.footer')

                </footer>

            </div>

        </body>

    </html>

Blade allows the use of the layout that I just created by using @extends. By creating @section, I will create a section that will be used in the layout. Here I will use @section(‘content’) and in the layout, everything that I will type here will be injected in @yield in the layout.

Go to resources/views/pages and put the following code in these files.

pages/home.blade.php
        
    @extends('layouts.default')

    @section('content')

        i am the home page

    @endsection

pages/home.blade.php
        
    @extends('layouts.default')

    @section('content')

        i am the contact page

    @endsection

Layout

Create Includes

Create the Layout

Contents