12 super handige Laravel Blade directives die je moet kennen!

Vraag de gratis webshop scan aan!

Kom erachter hoe jouw webshop presteert met onze webshop scan.

We controleren je webshop op:
  • Technisch: performance en hosting
  • Gebruiksvriendelijkheid: design en usability
  • Veiligheid: SSL certificaat, veiligheidslekken
  • SEO: Zoekmachine vriendelijkheid
  • En nog veel meer..

Laravel Blade is een van de krachtigste en meest geavanceerde templating-engines in vergelijking met andere template-engines zoals bijvoorbeeld Smarty en Twig. In tegenstelling tot andere PHP template-engines, beperkt Blade je niet met het gebruik van gewone PHP-code binnen je views. Sterker nog, onderwater worden de views gecompileerd naar gewone PHP-code en in de cache opgeslagen totdat ze worden gewijzigd. Dit betekent dat Blade geen overhead toevoegt aan je webapplicatie.

In dit artikel wil ik 12 super handige Laravel Blade directives met je delen die ik bijna elke dag gebruik. Sommige hiervan zal je misschien al kennen.

@include

De eerste Blade directive die ik waarschijnlijk het meest gebruikt is @include. Dit geeft je de mogelijkheid andere Blade templates te includen binnen je view. Alle variabelen gebruikt in je view zullen ook beschikbaar worden binnen de template die je include.

@include('partials.sidebar')

Wil je het aantal variabelen voor de include beperken, kan je deze handmatig aan de include toevoegen. Dit doe je als volgt:

@include('partials.sidebar', ['menu' => $menu])

@push & @stack

Laravel Blade maakt het mogelijk om een gehete stack aan te maken. Vanuit onderliggende child template's is het dan mogelijk om code toe te voegen in z'n stack. Dit kan erg handig zijn om bijvoorbeeld vereiste javascript libraries toe te voegen vanuit je view.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Laravel Applicatie</title>
        @stack('scripts')
    </head>
</html>

Vanuit je child template is het nu mogelijk om content toe te voegen aan de scripts stack.

@push('scripts')
    <script src="https://notfalse.nl/super-cool-js-library.js" />
@endpush

@php

Zoals eerder verteld maakt Laravel Blade het gebruiken van PHP-code in je views erg makkelijk. Hoewel ik dit zelf altijd afraadt om te gebruiken kan het op sommige momenten erg handig zijn.

Je kan @php en @endphp gebruiken om PHP-code binnen je view uit te voeren.

@php
  function toTitle(string $title) {
      return mb_convert_case($title, MB_CASE_TITLE, "UTF-8");
  }
  
  echo toLower('LARAVEL BLADE IS AWESOME!');
@endphp

Verder in dit artikel een voorbeeld van een custom Blade directive zonder het gebruik van PHP in je view.

@hasSection

Wanneer je werkt aan een grote webapplicatie met een complexe layout structuur, wil je misschien controleren of er bepaalde content is ingeladen. Dit is eenvoudig te controleren met de @hasSection directive.

@hasSection('navigation')
    <div class="pull-right">
        @yield('navigation')
    </div>
@endif

@each

De @each directive in Laravel Blade combineert een loop en include met elkaar in een regel code. Bijvoorbeeld:

@each('partials.blog.item', $blogs, 'blog')

Het eerste argument geeft aan welke view je wil includen voor elke items uit $blogs. Het tweede argument is de variabele met items die je wil doorlopen, in ons geval $blogs. Het laatste argument is de variabele naam die je wil gebruiken per item in de include. In bovenstaand voorbeeld zal de variabele $blog beschikbaar zijn in de view partials.blog.item.

Er is ook nog een vierde argument mogelijk. Deze bepaald de weergave op het moment dat de variable $blogs leeg is.

@each('partials.blog.item', $blogs, 'blog', 'partials.blog.not_found')

@includeWhen

De @includeWhen directive is een uitbreiding op de @include directive. Met deze directive kan je een include inladen op basis van een voorwaarde. Deze moet altijd true zijn.

@includeWhen($isAdmin, 'users.admin_section', ['user' => $user])

In dit voorbeeld zal de directive de waarde van $isAdmin controleren. Zodra de waarde van deze variable true is, zal de view users.admin_section ingeladen worden en zal de variable $user beschikbaar zijn binnen de view.

@json

In sommige gevallen wil je een variable weergeven als JSON in je view. Bijvoorbeeld bij het gebruik van javascript. Hiervoor kan je de directive @json gebruiken.

<script>
var data = <?php echo json_encode($products); ?>
</script>

In plaats van een PHP script te gebruiken met daarin de json_encode() functie, kan je heel makkelijk @json gebruiken.

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

@forelse

Stel je voor dat je een lijst met blog posts wil weergeven. Dit zou je kunnen doen doormiddel van een foreach loop. Maar je wil ook controleren of de lijst met posts niet leeg is. Dit zou je bijvoorbeeld op de volgende manier kunnen doen:

@if($blogs->count() > 0)
    @foreach($blogs as $blog)
        {{ $blog->title }}
    @endforeach
@else
    Geen blogs gevonden!
@endif

Met de directive @forelse kan dit een stuk eenvoudiger. Dit ziet er als volgt uit:

@forelse($blogs as $blog)
    {{ $user->title }}
@empty
    Geen blogs gevonden!
@endforelse

@verbatim

Als je javascript variabelen wil weergeven in een view. Kan je hiervoor de @verbatim directive in Blade gebruiken. Een korte variant hierop is @ zonder het woord verbatim.

@{{ name }}

// vertaald zich in

@verbatim
    {{ name }}
@endverbatim

@isset & @empty

Binnen PHP heb je de functies isset() en empty() om te controleren of de waarde van een variabele leeg of niet gezet is. Laravel Blade heeft hier zijn eigen directives voor.

@isset($users)
    ...
@endisset

@empty($users)
    ...
@endempty

@csrf & @method

Wanneer je HTML formulieren gebruikt binnen Blade, moet je een verborgen veld toevoegen dat de CSRF token bevat als je gebruik maakt van de CSRF beveiliging. Hiervoor is @csrf in het leven geroepen. Deze voegt het verborgen veld voor je toe.

<form method="POST" action="/handle-form">
    @csrf
    ...
</form>

Omdat je geen gebruik mag maken van PUT, PATH en DELETE methodes binnen je HTML-formulieren. Is het vereist om een verborgen veld _method toe te voegen aan het formulier. Zo weet Laravel onderwater over wat voor type request het gaat. Je kan dit verborgen veld makkelijk toevoegen met de @methode directive.

<form method="POST" action="/handle-form">
    @method('PUT')
    ...
</form>

@inject

Als laatst hebben we nog de directive @inject. Deze wordt gebruikt om een service uit de Laravel service container te halen en weer te geven in de view.

Het eerste argument geeft aan onder welke variabele je de service wil gebruiken. Het tweede argument is de service die je wil gebruiken.

@inject('menu', 'App\Services\MenuService')


{!! $menu->render() !!}

Zelf Laravel Blade directive maken

Naast alle standaard directives die ingebakken zijn in Laravel Blade, is het ook mogelijk om zelf directive's toe te voegen. Dit doe je door ze toe te voegen aan de boot methode van de AppServiceProvider. Hieronder een voorbeeld.

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('toTitle', function ($expression) {
            return "<?php echo mb_convert_case($expression, MB_CASE_TITLE, "UTF-8"); ?>";
        });
    }
}

Vervolgens kan je de directive in je view gebruiken.

@toTitle('LARAVEL BLADE IS AWESOME!')

Kennismaken?

Begin met bouwen

Maak werk van jouw ambities in e-commerce. Plan vrijblijvend een afspraak
in voor eerlijk advies en zet je eerste stap naar groei.

Plan een afspraak 013 - 20 321 13