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.
$1 Domain Names
Register great TLDs for less than $1 for the first year.
Why wait? Grab your favorite domain name today!
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 from IONOS
Try out a Cloud Server for free now - test your IONOS Cloud Server for 30 days!
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:
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>).
Register a domain name
Build your brand on a great domain, including SSL and a personal consultant!
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).
Related articles
How to install Laravel on Ubuntu 22.04
The PHP framework Laravel simplifies the development of web applications by providing elegant solutions for common features such as email verification, task scheduling, and authentication. What are the requirements for this popular collection of libraries, tools and packages? And how can Laravel be installed on Ubuntu 22.04? Find out the answers to these questions here.
7 Best free Joomla templates
Does your website need a new design? It’s a breeze with Joopla – one of the most renowned content management systems. Numerous free Joopla templates are available online to all users. What they all have in common is an easy installation process and extensive design possibilites. Find out more about Joomla’s stylish templates and their main advantages.
How to design a personalized newsletter template
Nowadays, our e-mail inboxes are overflowing with newsletters. In order to make sure your business stands out from the wave of mail that floods in every day, you need more than just sound content and competitive offers. A professional, visually stimulating e-mail newsletter complete with a unique, personalized design optimized for smartphones, tablets, and computer screens can ensure your company…
How to install the Google PageSpeed module on Apache
Google PageSpeed modules are a free collection of Apache web server modules which are designed to optimize a website's performance. Learn how to install and enable Google PageSpeed modules on a Cloud Server with Linux.
Add an Apache Virtual Host on CentOS 7 and Ubuntu 16.04
Learn how to add a virtual host to an Apache web server. Virtual hosts allow you to host multiple separate websites on the same server, with a separate set of directories for each website.
Sinart CreativeShutterstock Symfony vs Laravel: What’s the difference?
Symfony and Laravel are the most popular PHP frameworks and are used to create sophisticated web applications. Laravel is known for being a simpler framework, while Symfony is considered a more powerful framework. In this article, we’ll compare Symfony and Laravel and highlight the strengths and weaknesses of both frameworks. We’ll also delve into the main differences between them.
