Get The Most From Blade: Laravel's Templating Engine

What is a Templating Engine?

A templating engine is like a tool that helps you keep your content and layout separate. This makes your code cleaner and easier to manage. Instead of mixing HTML with your data, you create templates that define how your content should look, and the engine takes care of filling in the details.

What is Blade?

Blade is Laravel’s own templating engine, and it’s designed to make your life easier. Blade templates are stored in the resources/views directory, and each one has a .blade.php extension. The syntax is simple and clean, allowing you to mix HTML with PHP effortlessly. For example:

<h1>Hello, {{ $name }}!</h1>

But Blade isn’t just for displaying data. You can also add logic, like loops and conditionals, right in your templates. Here’s an example:

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

See how easy it is to show different content based on whether a user is logged in? Next time you need to loop through a list of users, try using Blade’s @foreach directive. It’s straightforward and keeps your code tidy.

Template Inheritance

One of Blade’s best features is how it helps you reuse layouts. You can create a master template for your site and then just fill in the unique content for each page. Here’s a simple example:

<!-- layout.blade.php -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div class="header">My Website</div>
    <div class="content">
        @yield('content')
    </div>
    <div class="footer">Footer Information</div>
</body>
</html>

This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:

@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to the Home Page!</h1>
@endsection

By using @extends, you link to the layout, and @section allows you to fill in the placeholders with your specific content. This keeps your code DRY (Don’t Repeat Yourself) and super manageable. Blade simplifies your workflow, allowing you to focus more on what matters—building great web applications.

Blade Components

Blade components are like little building blocks for your UI. Imagine them as Lego pieces—you create a small, reusable part of your interface and can snap it into place wherever you need it. This makes your code cleaner and more maintainable.

You can define a component once and use it throughout your application. Need a button that looks the same across different pages? Create a Blade component for it! Even better, you can pass attributes to these components to make them flexible and adaptable.

Here’s a simple example of a button component:

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

You can make your components dynamic by using a component class. This lets you pass in attributes like type or class to customize the button’s behavior or style.

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}" class="{{ $class }}">{{ $slot }}</button>

Including Subviews

Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.

Blade Directives

Blade comes packed with handy directives that make common tasks a breeze. Here are a few:
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks
@method: specifies the HTTP method for forms
@auth: checks if a user is authenticated
@guest: checks if a user is a guest (not authenticated)

<form action="/submit" method="POST">
    @csrf
    @method('PUT')
    <button type="submit">Submit</button>
</form>

Need something more customized? You can create your own Blade directives for reusable logic.

For instance, let’s say you often need to format dates. You can define a custom directive like this:

// In a service provider
Blade::directive('datetime', function ($expression) {
    return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
});

// Usage in Blade
@datetime($dateVariable)

Other Features

Blade comes with some really handy features that make your life as a developer smoother. Let’s dive into a few of them.

Managing Asset URls

Need to link your CSS or JavaScript files? The asset() helper function has you covered. It generates the correct URL for your assets, so you don’t have to worry about paths:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Handling Empty Arrays or Collections

Blade’s @forelse directive is a lifesaver when dealing with empty arrays or collections. It lets you loop through items and also handles the case where there are no items elegantly:

@forelse ($items as $item)
    <p>{{ $item }}</p>
@empty
    <p>No items found.</p>
@endforelse

Conditional Content Display

Blade offers several directives to show content based on conditions:

@isset: checks if a variable is set
@empty: checks if a variable is empty
@unless: works like if, but in reverse
Here’s an example using @isset:

@isset($variable)
    <p>{{ $variable }}</p>
@endisset

Protecting Against XSS

Blade automatically escapes output to protect your app from XSS (Cross-Site Scripting) attacks. But sometimes, you might want to output raw HTML. In that case, use {!! !!}:

{!! $htmlContent !!}

Advanced use

Need to include raw HTML or JavaScript that contains Blade syntax? Use the @verbatim directive to stop Blade from trying to parse it:

@verbatim
    <script>
        var example = '{{ $variable }}'; // This will not be parsed by Blade
    </script>
@endverbatim

Working with APIs? Blade makes it easy to render JSON data directly in your templates:

<script>
    var data = @json($data);
</script>

If you’re using Livewire, Blade works seamlessly with it. You can use Blade components alongside Livewire components for a dynamic, interactive UI without writing much JavaScript.

The @once directive ensures a block of code runs only one time. Blade lets you create dynamic components that adapt based on the data you pass. This is great for flexible, reusable UI pieces:

<x-dynamic-component :component="$componentName" :data="$data" />

The @error directive helps you show error messages for specific fields easily:

<input type="text" name="username">
@error('username')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

If you’re using Laravel Mix for compiling assets, you can effortlessly integrate the compiled files into your Blade templates:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

When I first started using Blade, I was a little lost on how many options I have, but shortly after a whole world opened up for me. Now I can't imagine coding without it's versatile features. I hope this article helped you on finding your way into this amazing templating engine.

Blog