> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# Blade-templates

> Een uitleg van de basissyntax, conditionele statements, loops en layout-overerving van Blade, de template-engine van Laravel.

## 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.

```mermaid theme={null}
flowchart LR
    A[".blade.php-bestand"] --> B{"Cache aanwezig?"}
    B -->|"Ja"| C["Gecachete PHP gebruiken"]
    B -->|"Nee"| D["Blade-compiler"]
    D --> E["Omzetten naar PHP-code"]
    E --> F["Opslaan in storage/framework/views/"]
    F --> G["PHP uitvoeren"]
    C --> G
    G --> H["HTML-response"]
```

```php theme={null}
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.

```blade theme={null}
Hallo, {{ $name }}.
```

<Info>
  Blades `{{ }}` haalt de waarde automatisch door PHP's `htmlspecialchars`-functie om XSS-aanvallen te voorkomen.
</Info>

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

```blade theme={null}
Huidige UNIX-timestamp: {{ time() }}
```

### Niet-geëscapete data weergeven

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

```blade theme={null}
Hallo, {!! $name !!}.
```

<Warning>
  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.
</Warning>

### Samenwerken met JavaScript-frameworks

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

```blade theme={null}
<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.

<Info>
  Wil je vergelijken of je bij Blade blijft of uitbreidt naar Livewire of Inertia? Zie dan [Frontend](/nl/frontend).
</Info>

## Blade-directives

### Conditionele statements (if)

```blade theme={null}
@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.

```blade theme={null}
@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`.

```blade theme={null}
@isset($records)
    // Als $records gedefinieerd is en niet null
@endisset

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

### Authenticatie-directives

```blade theme={null}
@auth
    // Content voor geauthenticeerde gebruikers
@endauth

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

### Switch-statements

```blade theme={null}
@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.

```blade theme={null}
@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`.

```blade theme={null}
@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.

```blade theme={null}
@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.

```blade theme={null}
@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.

```blade theme={null}
{{-- 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.

```blade theme={null}
<!-- 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.

```blade theme={null}
<!-- 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`.

```mermaid theme={null}
flowchart TD
    A["Child view<br>@extends('layouts.app')"] --> B["Bovenliggende layout<br>layouts/app.blade.php"]
    A --> C["@section('title', 'Subpagina')"]
    A --> D["@section('content')<br>Content zelf<br>@endsection"]
    B --> E["@yield('title')<br>← title invoegen"]
    B --> F["@yield('content')<br>← content invoegen"]
    C --> E
    D --> F
    E --> G["Uiteindelijke HTML"]
    F --> G
```

**De bovenliggende layout definiëren:**

```blade theme={null}
<!-- 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:**

```blade theme={null}
<!-- 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
```

<Info>
  Met `@parent` kun je content toevoegen terwijl de inhoud van de `@section` uit de bovenliggende layout behouden blijft.
</Info>

## 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.

```blade theme={null}
<div>
    @include('shared.errors')

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

Je kunt ook extra variabelen doorgeven.

```blade theme={null}
@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.

```blade theme={null}
<form method="POST" action="/profile">
    @csrf

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

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

```blade theme={null}
<form method="POST" action="/post/1">
    @csrf
    @method('DELETE')

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

<Info>
  Voor CSRF-maatregelen in productie, inclusief Origin-verificatie en de headers `X-CSRF-TOKEN` / `X-XSRF-TOKEN`, zie [CSRF-beveiliging](/nl/csrf).
</Info>

## Samenvatting

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

<AccordionGroup>
  <Accordion title="Data weergeven">
    `{{ $variable }}` voor weergave met escaping, `{!! $variable !!}` voor weergave zonder escaping.
  </Accordion>

  <Accordion title="Conditionele statements">
    `@if`, `@elseif`, `@else`, `@endif`, `@unless`, `@isset`, `@empty`, `@auth`, `@guest`.
  </Accordion>

  <Accordion title="Loops">
    `@for`, `@foreach`, `@forelse`, `@while` en besturing via de `$loop`-variabele.
  </Accordion>

  <Accordion title="Layouts">
    Op componenten gebaseerd (`<x-layout>` en `{{ $slot }}`) of template-overerving (`@extends`, `@section`, `@yield`).
  </Accordion>

  <Accordion title="Subviews">
    Met `@include` sluit je views in als herbruikbare onderdelen.
  </Accordion>
</AccordionGroup>


## Related topics

- [E-mail versturen](/nl/mail.md)
- [Lokalisatie](/nl/localization.md)
- [Assets bundelen met Vite](/nl/vite.md)
- [Laravel Pennant](/nl/pennant.md)
- [Views](/nl/views.md)