Introduction to Laravel's Blade templates
IONOS editorial team5 mins
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.
- Simple registration
- Premium TLDs at great prices
- 24/7 personal consultant included
- Free privacy protection for eligible domains
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".
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/htmlCreate the new basic-site project:
laravel new basic-siteThis will create the basic-site project directory, and build all the standard Laravel components and sub-directories.
Move into the project directory:
cd basic-siteOne 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 storageBuild 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.phpThis 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/includesCreate 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.phpThis 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.phpThis 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.phpThis 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.phpThis will be our home page. Put the following content into this file:
@extends('layouts.default')
@section('content')
Hello, world! Welcome to the home page.
@endsectionSave 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>).
- Free Wildcard SSL for safer data transfers
- Free private registration for more privacy
- Free 2 GB email account
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.phpFind 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).
