Laravel blade structure for scalable projects
Projects tend to grow in size and level of complexity resulting in more and more files. A good base structure may help creating developer-friendly, maintainable and scalable product. Blade is a simple and powerful templating engine included with Laravel. Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates. In fact, all Blade templates are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. Blade template files use the .blade.php file extension and are typically stored in the resources/views directory.
Prerequisites
We are going to use a fresh Laravel 9 installation for this guide, take a look on how to create your first Laravel project if you don't have one already. To run Laravel locally a PHP setup is also required.
Loading views with Laravel
There are different ways to load a view in Laravel. Keeping in mind the single responsibility principle we recommend to separate the logic for each step.
Start registering the route in routes/web.php:
Route::get('/welcome', App\\Http\\Controllers\\WelcomeController::class);Then, define a single action controller:
<?php
namespace App\\Http\\Controllers;
use Illuminate\\Http\\Response;
class WelcomeController extends Controller
{
public function __invoke(): Response
{
return response()->view('welcome');
}
}
Finally, create a simple view with the most basic HTML structure:
<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My title</title>
</head>
<body>
<p>My content</p>
</body>
</html>
Right now, visiting welcome route will process and output the content from that file.
Creating reusable layout
All HTML files have, or at least should, a common and repeating structure. Our goal is to create a reusable layout and avoid writing same tags over and over again. Blades offer a big variety of directives and functions to make our work easier. We are going to focus on two of them for our layout:
@section: as the name implies, defines a section of content.
@yield: display the contents of a given section.
In the welcome example, used in the previous section, the content is defined in only one line. Other nine are common tags. That common and repeating structure can be clearly used as layout for different views.
<!-- resources/views/layout.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My title</title>
</head>
<body>
@yield('body')
</body>
</html>
We should modify the welcome blade in order to extend from this layout.
<!-- resources/views/welcome.blade.php -->
@extends('layouts.web')
@section('body')
<p>Welcome page</p>
@endsection
As you can see, the resulting welcome blade is much more clear and does not require the typical mark-up. More child views can be created extending the same layout.
Dynamic page titles
Page title is defined in the layout file with a HTML tag. However, it's a dynamic content that should change depending on the view. To solve this problem, we apply the same directives used for the content.
<!-- resources/views/welcome.blade.php -->
@extends('layouts.web')
@section('title', 'Welcome page title')
@section('body')
<p>Welcome page</p>
@endsection
And updating the layout to take the title from child view.
<!-- resources/views/layout.blade.php -->
<!DOCTYPE html>
<html lang="{{app()->getLocale()}}">
<head>
<meta charset="UTF-8">
<title>{{config('app.name')}} - @yield('title', 'Some default title')</title>
</head>
<body>
@yield('body')
</body>
</html>
Note: we set the content language and prepend the application name to the title based on the configuration.
Conclusion
We've created a universal layout for Laravel applications. From our experience, it drastically reduce the complexity of any project and the time dedicated to structure changes. The layout can be adapted to the project you're working on with additional tags, sections or other needed element.
Credits
Official GitHub: https://github.com/hibit-dev/laravel9-blades
0 Comments