DEV Community

Cover image for Get The Most From Blade: Laravel's Templating Engine
varzoeaa
varzoeaa

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

first

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

second

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

third

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>
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

four

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') }}">
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 !!}
Enter fullscreen mode Exit fullscreen mode

fifth

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
Enter fullscreen mode Exit fullscreen mode

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

<script>
    var data = @json($data);
</script>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)