Learn the basics of the Blade syntax and tem­plat­ing 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 in­her­it­ance and complex con­di­tion­als. And because Blade syntax is compiled into PHP code and then cached, it offers better web server per­form­ance than using standard PHP alone.

Cheap domain names – buy yours now
  • Free website pro­tec­tion with SSL Wildcard included
  • Free private re­gis­tra­tion for greater privacy
  • Free Domain Connect for easy DNS setup

Re­quire­ments

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

To install Laravel, follow the in­struc­tions in our article "Install the Laravel PHP Framework on Ubuntu 16.04".

Free Cloud Server Trial
En­ter­prise-grade virtual private servers
  • KVM based dev servers for de­velopers
  • Scalable to en­ter­prise cloud level
  • Pay-as-you-go, per-minute billing

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 com­pon­ents and sub-dir­ect­or­ies.

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 dir­ect­or­ies to organise 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 dir­ect­or­ies 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 con­ven­tion [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 in­form­a­tion from the files in the includes directory.
  • @yield pulls in in­form­a­tion from the content section of the home page.

Header

Create the header.blade.php file:

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

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

<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.
  • @end­sec­tion closes that section. @section and @end­sec­tion are terms which must be used in pairs, much like other HTML tags (for example, <div> and </div>).
Your very own .uk domain name!
Short, sharp, .uk

Looking for an al­tern­at­ive to the tra­di­tion­al .co.uk extension, or want to grow your online presence? Give .uk a try today.

£1 for 1 year!

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 com­plic­ated (like a con­trol­ler).

Open the routes/web.php file for editing:

nano routes/web.php

Find the section which reads:

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

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).

Go to Main Menu