Basic Blade

  • Blade is the simple, yet powerful templating engine provided with Laravel
  • Blade is Laravels rendering engine to parse HTML and PHP to the view
  • Blade adds no overhead to your application: all Blade views are compiled into plain PHP code and cached until they are modified
  • Blade view files use the .blade.php file extension and are stored in the resources/views folder

Layout template

  • Two of the primary benefits of using Blade are template inheritance and sections
  • Since most web applications maintain the same layout across various pages, it's convenient to define this layout as a single Blade view
  • The template or "master page layout" consists of
    1. regular HTML code that is common to all pages
    2. one or more "gaps" which can be filled in separately for each page

1. Common code

  • Create a new file resources/views/layouts/template.blade.php
  • For the layout we choose Bootstrap: you can keep it simple for now and link the necessary CSS and JavaScript files via CDN





 








 
 
 



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <title>The Vinyl shop</title>
</head>
<body>
    {{--  Navigation  --}}
    <main class="container">
        <p>Page under construction...</p>
    </main>
    {{--  Footer  --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

REMARKS

  • You can add comments in Blade by putting them between {{-- and --}}
  • These Blade comments are not included in the rendered HTML
  • In PhpStorm you can use the shortcuts Ctrl+/ (single comment line) or Ctrl+Shift+/ (multiple comment lines)

2. Create some gaps

  • For now, create two gaps in the template using the @yield directive
    • One gap for the title (line 7)
    • One gap for the content of the page (line 12)
  • A gap has at least a name, e.g. @yield('title')
  • A gap can optionally contain a default value, e.g. @yield('title', 'The Vinyl Shop')






 




 








<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <title>@yield('title', 'The Vinyl Shop')</title>
</head>
<body>
    {{--  Navigation  --}}
    <main class="container">
        @yield('main', 'Page under construction ...')
    </main>
    {{--  Footer  --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • Open the file resources/views/home.blade.php
  • Use the @extends directive (in this case @extends('layouts.template')) to link the page to the template
 






@extends('layouts.template')

{{--  
<h1>The Vinyl Shop</h1>
<p>Welcome to the website of The Vinyl Shop, a large online store with lots of (classic) vinyl records.</p>
--}}
1
2
3
4
5
6
  • Comment out the HTML-code and visit http://vinyl_shop.test
    • Only the default title ('The Vinyl Shop') and default main element ('Page under construction ...') are shown

Default gaps

Fill the gaps

  • Refer to a gap with the @section('gapName') directive
  • Close the gap with @endsection (or with @stop)
  • If the gap contains only a small amount of content, you can write it on one line @section('gapName', 'small amount of content')
  • Update the home page


 

 


 

@extends('layouts.template')
    
@section('title', 'Welcome to The Vinyl Shop')
    
@section('main')
<h1>The Vinyl Shop</h1>
<p>Welcome to the website of The Vinyl Shop, a large online store with lots of (classic) vinyl records.</p>
@endsection
1
2
3
4
5
6
7
8

Fill the gaps

Including Sub-Views

  • In order not to overload the template, it is best practice to place larger blocks of code (e.g. navigation) in separate files
  • Blade's @include directive allows you to include a Blade view from within another view
  • All variables that are available to the parent view will be made available to the included view
  • Create a new file resources/views/shared/navigation.blade.php
  • This file contains a Bootstrap navigation bar with root-relative links to the different pages


 






 


 






 
 
 






<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="/">The Vinyl Shop</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact-us">Contact</a>
                </li>
            </ul>
            {{--  Admin navigation  --}}
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#!" data-toggle="dropdown">Admin</a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="/admin/records">Records</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  • Open the template resources/views/layouts/template.blade.php
    • Include the navigation bar with @include('shared.navigation')
    • Add some extra top margin to the container (in order to create some space between the navigation bar and the main container)

 
 





<body>
    @include('shared.navigation')
    <main class="container mt-3">
        @yield('main', 'Page under construction...')
    </main>
    {{--  Footer  --}}
</body>
1
2
3
4
5
6
7

Vinyl Shop Home Page with navigation bar Vinyl Shop Home Page with navigation bar

EXERCISE 1: Refactor all pages

  • Link the views contact.blade.php and admin/records/index.blade.php to the template
  • Create a shared footer shared/footer.blade.php and include it in the template (replacing the comment {{-- Footer --}})
    • Use the PHP date() function (within double curly braces!) to display the current year inside the footer
  • Test your pages (http://vinyl_shop.test/contact-us and http://vinyl_shop.test/admin/records) in a browser

Vinyl Shop Contact Page with navigation bar Vinyl Shop Records Page with navigation bar

EXERCISE 2: Favicon

  • Add a real favicon (https://realfavicongenerator.net/) to all the pages of your project
    • Search for a suitable (and original) favicon picture and place the generated files in (a subfolder assets/icons in) the public folder

Favicon example

Last Updated: 11/2/2019, 9:05:34 PM