Blade is a very powerful template engine and provides plenty of directives to save your working time. In this article, I'm going to cover some of them.
Table of contents
- @forelse
- @include
- @auth and @guest
- @isset and @empty
- @production
- @csrf
- @method
- @class
- @extends, @yield and @section
- @can
1. @forelse
How many times have you encountered this situation you need to check if the variable is not empty like the code below.
@if(count($articles) > 0)
@foreach($articles as $article)
<h4>Article: {{$article->name}}</h4>
@endforeach
@else
<span>No articles found</span>
@endif
What if I told you can do the same with forelse directive
@forelse ($articles as $article)
<h4>Article: {{$article->name}}</h4>
@empty
<span>No articles found</span>
@endforelse
Pretty cool right. Less code Same result
2. @include
Very helpful directive when we work with layouts because we can divide our layout into different parts and include each subview in the main view. You can use this directive like this
<div>
@include('partials.header')
</div>
Also, you can pass variables if you wish.
<div>
@include('partials.header', ['title' => $title])
</div>
3. @auth and @guest
Imagine this scenario we want to display a button only when the user is authenticated, you can do something like this.
@if(auth()->user())
<button class="btn btn-success"> My books </button>
@endif
works fine but a pretty neat solution is to use @auth directive:
@auth
<button class="btn btn-success"> My books </button>
@endauth
Of course, @guest works when a user is not authenticated. For example.
@guest
<a href="{{route('login')}}" class="btn btn-primary"> Login </a>
@endguest
4. @isset and @empty
Of course, these directives are the same that isset() and empty() PHP functions but in form of blade directives, @isset checks if the variable is defined and is not null, and @empty checks if the variable is not empty.
@isset($companies)
//Put your code here
@endisset
@empty($companies)
//Put your code here
@endempty
5. @production
This directive is very useful when we need to check if our application is running in production and execute the code you require in that environment.
@production
//The code you need to execute in production
@endproduction
6. @csrf
When we work with HTML forms we should include a CRSF token in order to prevent this kind of attacks, in our form we can define an input hidden like this
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
But @csrf directive will generate the same hidden token with less code. For example.
<form method="POST" action="/products">
@csrf
</form>
Both methods are equivalent. You can decide which one wants to use.
7. @method
HTML form is not supporting PUT, PATCH, DELETE requests only GET and POST, so how we can resolve this problem, in this case, we need to put @method directive in ours forms. For example:
<form action="{{route('categories.update', $category->id)}}" method="POST">
@method('PUT')
</form>
8. @class
It's very useful if want to use a css class conditionally. For example, let's say if the $hasError variable is true, you want to put a red background in the input field and also a red border.
<input @class([
'p-4',
'bg-red' => $hasError,
'border-red-500' => $hasError,
])>
if this case, the output will be
<input class="p-4 border-red-500 bg-red" type="text">
Otherwise, if the variable $hasError = false
<input class="p-4" type="text">
9. @extends, @yield and @section
In this example, let's say we have our main layout in resources/layouts/app.blade.php inside that file we can define a @yield like this
<body>
<main class="app-content" id="app">
@yield('content')
</main>
</body>
Now, suppose we have a view in resources/layouts/products.blade.php inside that file we can use
@extends and @section:
@extends('layouts.app')
@section('content')
@endsection
@extends means we are extending the main layout in the child view and we can access everything from the app.blade.php like HEAD, BODY tags.
@section means everything we put here automatically goes to @yield in the app.blade.php
10. @can
The security in our application is very important and many projects require roles and permissions, the @can directive allows to check if the user has the permission or not to access certain data. Let's see this example: Only the role manager can create a new warehouse. Let's do this in code:
<div class="tile-title">Warehouses
<div class="float-right">
@can ('warehouse_create')
<a href="{{route('warehouse.create')}}" class="btn btn-primary">
New warehouse
</a>
@endcan
</div>
</div>
In this case, only the person to permission to warehouse_create could see the button.
If I forgot any directives let me know in the comment section.
Happy coding ☕. Thanks for reading 🙏.