Introduction to Blade Templates

Leave your reply

Introduction

Learn the basics of the Blade syntax and templating system. Laravel's Blade template system is one of the ways in which the Laravel PHP framework makes the life of a developer easier.

The Blade syntax is clean and simple, but can easily handle nested template inheritance and complex conditionals. And because Blade syntax is compiled into PHP code and then cached, it offers better web server performance than using standard PHP alone.

Requirements

  • A Servidor Cloud with Laravel and PHP 7.0+ installed.

To install Laravel, follow the instructions in our article Install the Laravel PHP Framework on Ubuntu 16.04.

Create a New Project

Connect to your server with SSH, then su to your Laravel user. Go to your web directory:

cd /var/www/html

Create the new basic-site project:

laravel new basic-site

This will create the basic-site project directory, and build all the standard Laravel components and sub-directories.

Move into the project directory:

cd basic-site

One more step is necessary before you can view the project in a browser. The ownership of the basic-site/storage directory needs to be changed to the server's web user:

sudo chown -R www-data:www-data storage

Build a Basic File Structure

Blade templates live in the resources/views folder. We will create a set of directories to organize our new Blade templates. The file structure will be:

- resources
-- views
--- includes
------- header.blade.php
------- footer.blade.php
--- layouts
------- default.blade.php
--- pages
------- home.blade.php

This project will have one master layout file, which will call two included files: the header and footer. The home page will have all of the content, and will use the master layout file.

Create the necessary directories with the commands:

mkdir resources/views/layouts
mkdir resources/views/pages
mkdir resources/views/includes

Create the Files

Next, we will create the example files. Each Blade file must follow the naming convention [file name].blade.php, and must be located in the resources/views directory of the Laravel project.

Default Template

Create the default.blade.php file:

nano resources/views/layouts/default.blade.php

This will be the default template file. Put the following content into this file:

<html>
<head>
  @include('includes.header')
</head>
<body>

  @yield('content')

  @include('includes.footer')

</body>
</html>

Save and exit the file.

Two items of Blade syntax to note:

  • @include pulls in information from the files in the includes directory.
  • @yield pulls in information from the content section of the home page.

Header

Create the header.blade.php file:

This will be the included header file. Put the following content into this file:

nano resources/views/includes/header.blade.php
<title>My Laravel Example Site</title>
<meta name="description" content="An example site for learning Laravel.">

Save and exit the file.

Footer

Create the footer.blade.php file:

nano resources/views/includes/footer.blade.php

This will be the included footer file. Put the following content into this file:

<p>This is the included footer.</p>

Save and exit the file.

Home Page

Create the home.blade.php file:

nano resources/views/pages/home.blade.php

This will be our home page. Put the following content into this file:

@extends('layouts.default')
@section('content')
    Hello, world! Welcome to the home page.
@endsection

Save and exit the file.

A few notes on the Blade syntax:

  • @extends tells Laravel that the contents of this file extend another view. It also defines the view that it's extending as our default template: resources/views/layouts/default.blade.php.
  • @section defines the beginning of a section, which we have named content. Everything contained in this section will appear in the @yield which we defined in the template.
  • @endsection closes that section. @section and @endsection are terms which must be used in pairs, much like other HTML tags (for example, <div> and </div>).

Create the Route

Since we will only be using basic Blade layouts, all we will need to do is create a simple route which loads a single view. There is no need to create anything more complicated (like a controller).

Open the routes/web.php file for editing:

nano routes/web.php

Find the section which reads:

Replace this with:

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

Save and exit the file.

This route takes requests for the main public directory (/) and routes those requests to the home.blade.php file in the pages directory.

Now that you have finished creating the route, you can view the results in your browser by adding /basic-site/public to the end of your domain (e.g. http://example.com/basic-site/public).