Blade-Templates

Erläutert die Grundsyntax der Laravel-Template-Engine “Blade”, Bedingungen, Schleifen und Layout-Vererbung.

​

Einführung

Blade ist die einfache, aber leistungsstarke Template-Engine, die mit Laravel geliefert wird. Im Unterschied zu manchen anderen PHP-Template-Engines schränkt Blade die Verwendung von rohem PHP-Code in Templates nicht ein. Alle Blade-Templates werden zu PHP-Code kompiliert und zwischengespeichert, sodass Blade nur einen minimalen Overhead verursacht.

Blade-Templates verwenden die Endung .blade.php und liegen üblicherweise im Verzeichnis resources/views.

​

Blade-Kompilierungs-Ablauf

So wird eine .blade.php-Datei in eine HTML-Antwort umgewandelt. Einmal kompilierte Dateien werden zwischengespeichert, sodass Folgeaufrufe die Kompilierung überspringen.

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

​

Daten anzeigen

Um an eine Blade-View übergebene Daten anzuzeigen, umgeben Sie die Variable mit doppelten geschweiften Klammern.

Hallo, {{ $name }}.

Bei {{ }} schleust Blade den Wert automatisch durch PHPs htmlspecialchars und verhindert so XSS-Angriffe.

Nicht nur Variablen, sondern auch Rückgaben von PHP-Funktionen lassen sich ausgeben.

Aktueller UNIX-Timestamp: {{ time() }}

​

Nicht escapte Daten anzeigen

Um das Escaping zu umgehen, verwenden Sie {!! !!}.

Hallo, {!! $name !!}.

Bei benutzerdefinierten Eingaben verwenden Sie unbedingt {{ }} und lassen Sie das automatische Escaping aktiv. {!! !!} mit nicht vertrauenswürdigen Werten führt zu XSS-Schwachstellen.

​

Koexistenz mit JavaScript-Frameworks

Wenn Ihr JavaScript-Framework ebenfalls geschweifte Klammern verwendet, umgehen Sie Blade mit @.

<h1>Laravel</h1>

Hallo, @{{ name }}.

Blade entfernt in diesem Fall das @, {{ name }} bleibt aber unverändert im HTML, sodass das JavaScript-Framework es rendern kann.

Ob Sie Blade als Basis nutzen oder zu Livewire bzw. Inertia wechseln, vergleichen Sie am besten unter Frontend.

​

Blade-Direktiven

​

Bedingungen (if)

@if (count($records) === 1)
    Ein Datensatz vorhanden.
@elseif (count($records) > 1)
    Mehrere Datensätze vorhanden.
@else
    Keine Datensätze.
@endif

Mit @unless schreiben Sie „falls nicht”-Bedingungen.

@unless (Auth::check())
    Sie sind nicht angemeldet.
@endunless

Um zu prüfen, ob eine Variable gesetzt bzw. nicht leer ist, verwenden Sie @isset und @empty.

@isset($records)
    // $records existiert und ist nicht null
@endisset

@empty($records)
    // $records ist "leer"
@endempty

​

Auth-Direktiven

@auth
    // Inhalte für angemeldete Benutzer
@endauth

@guest
    // Inhalte für nicht angemeldete Benutzer
@endguest

​

Switch

@switch($i)
    @case(1)
        Erster Fall...
        @break

    @case(2)
        Zweiter Fall...
        @break

    @default
        Standardfall...
@endswitch

​

Schleifen

Blade stellt praktische Direktiven für Schleifen bereit.

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

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

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

@while (true)
    <p>Endlosschleife.</p>
@endwhile

Innerhalb von Schleifen steuern Sie den Ablauf mit @break und @continue.

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

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

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

Sie können die Bedingung auch direkt an die Direktive übergeben.

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

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

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

​

Loop-Variable

In @foreach-Schleifen erhalten Sie über die Variable $loop Informationen zur aktuellen Iteration.

@foreach ($users as $user)
    @if ($loop->first)
        Dies ist der erste Durchlauf.
    @endif

    @if ($loop->last)
        Dies ist der letzte Durchlauf.
    @endif

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

Eigenschaft	Beschreibung
$loop->index	Aktueller Loop-Index (beginnt bei 0)
$loop->iteration	Aktuelle Iteration (beginnt bei 1)
$loop->remaining	Verbleibende Iterationen
$loop->count	Anzahl der Elemente
$loop->first	Erste Iteration?
$loop->last	Letzte Iteration?
$loop->even	Gerade Iteration?
$loop->odd	Ungerade Iteration?
$loop->depth	Verschachtelungstiefe der Schleife
$loop->parent	Bei verschachtelten Schleifen die Variable der übergeordneten Schleife

​

Kommentare

Blade-Kommentare erscheinen nicht im gerenderten HTML.

{{-- Dieser Kommentar erscheint nicht im gerenderten HTML --}}

​

Layouts

​

Layouts mit Komponenten

Für Laravel-Layouts wird der Einsatz von Blade-Komponenten empfohlen.

Legen Sie zunächst eine Layout-Komponente an.

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

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

Dann erstellen Sie eine View, die dieses Layout nutzt.

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

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

​

Layouts mit Template-Vererbung

Als klassische Methode gibt es die Template-Vererbung mit @extends, @section und @yield.

Eltern-Layout definieren:

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

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

Vererbung in der Kind-View:

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

@section('title', 'Kindseite')

@section('sidebar')
    @parent

    <p>Zusätzlicher Inhalt für die Sidebar</p>
@endsection

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

Mit @parent fügen Sie Inhalte hinzu, ohne den Inhalt des @section aus dem Eltern-Layout zu ersetzen.

​

Sub-Views einbinden

Mit @include binden Sie eine Blade-View in eine andere ein. Alle in der Eltern-View verfügbaren Variablen stehen auch der eingebundenen View zur Verfügung.

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

    <form>
        <!-- Formularinhalte -->
    </form>
</div>

Sie können auch zusätzliche Variablen übergeben.

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

​

CSRF-Schutz in Formularen

Für HTML-Formulare in web-Routen, die POST, PUT, PATCH oder DELETE senden, müssen Sie die Direktive @csrf einbinden.

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

    <!-- Formularfelder -->
</form>

Für PUT, PATCH und DELETE per Formular verwenden Sie @method.

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

    <button type="submit">Löschen</button>
</form>

Praxisrelevante CSRF-Maßnahmen inklusive Origin-Prüfung sowie X-CSRF-TOKEN / X-XSRF-TOKEN finden Sie unter CSRF-Schutz.

​

Zusammenfassung

Die wichtigsten Funktionen der Blade-Template-Engine im Überblick.

Daten anzeigen

{{ $variable }} mit Escaping, {!! $variable !!} ohne Escaping.

Bedingungen

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

Schleifen

@for, @foreach, @forelse, @while und Steuerung über die $loop-Variable.

Layouts

Komponentenbasiert (<x-layout> und {{ $slot }}) oder Template-Vererbung (@extends, @section, @yield).

Sub-Views

@include bindet Views als wiederverwendbare Bausteine ein.