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
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
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
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
: 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)
: 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 !!}
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.
SOCIAL SHARE CARD GENERATOR