Introduction to Laravel's Blade templates

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.

Cheap domain names – buy yours now
  • Free website protection with SSL Wildcard included
  • Free private registration for greater privacy
  • Free 2 GB email account

Requirements

  • A Cloud Server 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".

Free Cloud Server Trial
Try our cloud hosting free for 30 days

Thanks to free starting credit, you can test the IONOS cloud server for 1 month free of charge (or until the credit is used up) and experience the perfect combination of performance and security!

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 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 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:

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.
  • @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>).
Your very own .uk domain name!
Short, sharp, .uk

Looking for an alternative to the traditional .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 complicated (like a controller).

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

Was this article helpful?