Blade-templates

Introductie

Blade is de eenvoudige maar krachtige template-engine die bij Laravel wordt geleverd. In tegenstelling tot sommige PHP-template-engines beperkt Blade het gebruik van gewone PHP-code in je templates niet. Alle Blade-templates worden gecompileerd naar PHP-code en gecachet, waardoor Blade vrijwel geen overhead aan je applicatie toevoegt. Blade-templatebestanden gebruiken de extensie .blade.php en worden meestal opgeslagen in de map resources/views.

De Blade-compilatieflow

Hieronder zie je hoe een .blade.php-bestand wordt omgezet in een HTML-response. Eenmaal gecompileerde bestanden worden gecachet, zodat bij een tweede en volgende request van dezelfde template de compilatie wordt overgeslagen.

Route::get('/', function () {
    return view('greeting', ['name' => 'Taro']);
});

Data weergeven

Om data weer te geven die aan een Blade-view is doorgegeven, plaats je de variabele tussen dubbele accolades.

Hallo, {{ $name }}.

Blades {{ }} haalt de waarde automatisch door PHP’s htmlspecialchars-functie om XSS-aanvallen te voorkomen.

Je kunt niet alleen variabelen weergeven, maar ook het resultaat van PHP-functies.

Huidige UNIX-timestamp: {{ time() }}

Niet-geëscapete data weergeven

Als je het escapen wilt overslaan, gebruik je de {!! !!}-syntax.

Hallo, {!! $name !!}.

Gebruik bij het weergeven van door gebruikers ingevoerde data altijd {{ }} om automatisch escapen in te schakelen. Het gebruik van {!! !!} met niet-vertrouwde invoer leidt tot XSS-kwetsbaarheden.

Samenwerken met JavaScript-frameworks

Als je JavaScript-framework ook accolades gebruikt, kun je met het @-symbool de Blade-rendering overslaan.

<h1>Laravel</h1>

Hallo, @{{ name }}.

In dit geval verwijdert Blade de @, maar wordt {{ name }} ongewijzigd naar de browser gestuurd en gerenderd door het JavaScript-framework.

Wil je vergelijken of je bij Blade blijft of uitbreidt naar Livewire of Inertia? Zie dan Frontend.

Blade-directives

Conditionele statements (if)

@if (count($records) === 1)
    Er is één record.
@elseif (count($records) > 1)
    Er zijn meerdere records.
@else
    Er zijn geen records.
@endif

Met @unless kun je ook een “tenzij”-conditie schrijven.

@unless (Auth::check())
    Je bent niet ingelogd.
@endunless

Om te controleren of een variabele gedefinieerd is en niet null, of juist “leeg” is, gebruik je @isset en @empty.

@isset($records)
    // Als $records gedefinieerd is en niet null
@endisset

@empty($records)
    // Als $records "leeg" is
@endempty

Authenticatie-directives

@auth
    // Content voor geauthenticeerde gebruikers
@endauth

@guest
    // Content voor niet-geauthenticeerde gebruikers
@endguest

Switch-statements

@switch($i)
    @case(1)
        Eerste geval...
        @break

    @case(2)
        Tweede geval...
        @break

    @default
        Standaardgeval...
@endswitch

Loops

Blade biedt handige directives voor het werken met loops.

@for ($i = 0; $i < 10; $i++)
    Huidige waarde: {{ $i }}
@endfor

@foreach ($users as $user)
    <p>Gebruiker: {{ $user->name }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>Geen gebruikers</p>
@endforelse

@while (true)
    <p>Oneindige lus.</p>
@endwhile

Binnen een loop kun je de loop besturen met @break en @continue.

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

    <li>{{ $user->name }}</li>

    @if ($user->number == 5)
        @break
    @endif
@endforeach

Je kunt de conditie ook rechtstreeks aan de directive doorgeven.

@foreach ($users as $user)
    @continue($user->type == 1)

    <li>{{ $user->name }}</li>

    @break($user->number == 5)
@endforeach

De loop-variabele

Binnen een @foreach-loop kun je met de $loop-variabele informatie over de loop opvragen.

@foreach ($users as $user)
    @if ($loop->first)
        Dit is de eerste iteratie.
    @endif

    @if ($loop->last)
        Dit is de laatste iteratie.
    @endif

    <p>Gebruiker: {{ $user->name }}</p>
@endforeach

Property	Beschrijving
`$loop->index`	De index van de huidige loop-iteratie (begint bij 0)
`$loop->iteration`	Het huidige iteratienummer (begint bij 1)
`$loop->remaining`	Het aantal resterende iteraties
`$loop->count`	Het aantal elementen in de array
`$loop->first`	Of dit de eerste iteratie is
`$loop->last`	Of dit de laatste iteratie is
`$loop->even`	Of dit een even iteratie is
`$loop->odd`	Of dit een oneven iteratie is
`$loop->depth`	De nesting-diepte van de huidige loop
`$loop->parent`	Bij geneste loops: de loop-variabele van de bovenliggende loop

Commentaar

Blade-commentaar wordt niet opgenomen in de gerenderde pagina.

{{-- Dit commentaar wordt niet opgenomen in de gerenderde HTML --}}

Layouts

Layouts met componenten

Voor het bouwen van layouts in Laravel wordt het gebruik van Blade-componenten aanbevolen. Maak eerst een layoutcomponent aan.

<!-- resources/views/components/layout.blade.php -->
<html>
    <head>
        <title>{{ $title ?? 'App-naam' }}</title>
    </head>
    <body>
        <header>
            <nav>
                <!-- Navigatie -->
            </nav>
        </header>

        <main>
            {{ $slot }}
        </main>
    </body>
</html>

Maak vervolgens een view die deze layout gebruikt.

<!-- resources/views/dashboard.blade.php -->
<x-layout>
    <x-slot:title>Dashboard</x-slot>

    <h1>Dashboard</h1>
    <p>Welkom!</p>
</x-layout>

Layouts met template-overerving

Als klassieke methode bestaat er template-overerving met @extends, @section en @yield. De bovenliggende layout definiëren:

<!-- resources/views/layouts/app.blade.php -->
<html>
    <head>
        <title>App-naam - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            Standaard sidebar
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

De layout overerven in een child view:

<!-- resources/views/child.blade.php -->
@extends('layouts.app')

@section('title', 'Subpagina')

@section('sidebar')
    @parent

    <p>Extra content voor de sidebar</p>
@endsection

@section('content')
    <p>Hoofdcontent</p>
@endsection

Met @parent kun je content toevoegen terwijl de inhoud van de @section uit de bovenliggende layout behouden blijft.

Subviews includen

Met de @include-directive kun je een Blade-view in een andere view insluiten. Alle variabelen die beschikbaar zijn in de bovenliggende view, zijn ook beschikbaar in de geïncludede view.

<div>
    @include('shared.errors')

    <form>
        <!-- Formuliercontent -->
    </form>
</div>

Je kunt ook extra variabelen doorgeven.

@include('view.name', ['status' => 'complete'])

CSRF-beveiliging voor formulieren

Neem in HTML-formulieren die POST-, PUT-, PATCH- of DELETE-requests versturen in het web-routebestand altijd de @csrf-directive op.

<form method="POST" action="/profile">
    @csrf

    <!-- Formuliervelden -->
</form>

Om PUT-, PATCH- of DELETE-requests vanuit een formulier te versturen, gebruik je de @method-directive.

<form method="POST" action="/post/1">
    @csrf
    @method('DELETE')

    <button type="submit">Verwijderen</button>
</form>

Voor CSRF-maatregelen in productie, inclusief Origin-verificatie en de headers X-CSRF-TOKEN / X-XSRF-TOKEN, zie CSRF-beveiliging.

Samenvatting

Een overzicht van de belangrijkste functies van de Blade-template-engine.

Data weergeven

{{ $variable }} voor weergave met escaping, {!! $variable !!} voor weergave zonder escaping.

Conditionele statements

@if, @elseif, @else, @endif, @unless, @isset, @empty, @auth, @guest.

Loops

@for, @foreach, @forelse, @while en besturing via de $loop-variabele.

Layouts

Op componenten gebaseerd (<x-layout> en {{ $slot }}) of template-overerving (@extends, @section, @yield).

Subviews

Met @include sluit je views in als herbruikbare onderdelen.

Aan de slag

Basis

Request-verwerking

Database

Authenticatie

Helpers en externe communicatie

Testen en deployment

AI-ontwikkelondersteuning

Introductie

De Blade-compilatieflow

Data weergeven

Niet-geëscapete data weergeven

Samenwerken met JavaScript-frameworks

Blade-directives

Conditionele statements (if)

Authenticatie-directives

Switch-statements

Loops

De loop-variabele

Commentaar

Layouts

Layouts met componenten

Layouts met template-overerving

Subviews includen

CSRF-beveiliging voor formulieren

Samenvatting

​Introductie

​De Blade-compilatieflow

​Data weergeven

​Niet-geëscapete data weergeven

​Samenwerken met JavaScript-frameworks

​Blade-directives

​Conditionele statements (if)

​Authenticatie-directives

​Switch-statements

​Loops

​De loop-variabele

​Commentaar

​Layouts

​Layouts met componenten

​Layouts met template-overerving

​Subviews includen

​CSRF-beveiliging voor formulieren

​Samenvatting

Introductie

De Blade-compilatieflow

Data weergeven

Niet-geëscapete data weergeven

Samenwerken met JavaScript-frameworks

Blade-directives

Conditionele statements (if)

Authenticatie-directives

Switch-statements

Loops

De loop-variabele

Commentaar

Layouts

Layouts met componenten

Layouts met template-overerving

Subviews includen

CSRF-beveiliging voor formulieren

Samenvatting