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

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

```mermaid theme={null}
flowchart LR
    A[".blade.php-Datei"] --> B{"Cache vorhanden?"}
    B -->|"Ja"| C["Gecachten PHP-Code verwenden"]
    B -->|"Nein"| D["Blade-Compiler"]
    D --> E["In PHP-Code umwandeln"]
    E --> F["In storage/framework/views/ ablegen"]
    F --> G["PHP ausführen"]
    C --> G
    G --> H["HTML-Antwort"]
```

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

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

<Info>
  Bei `{{ }}` schleust Blade den Wert automatisch durch PHPs `htmlspecialchars` und verhindert so XSS-Angriffe.
</Info>

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

```blade theme={null}
Aktueller UNIX-Timestamp: {{ time() }}
```

### Nicht escapte Daten anzeigen

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

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

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

### Koexistenz mit JavaScript-Frameworks

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

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

<Info>
  Ob Sie Blade als Basis nutzen oder zu Livewire bzw. Inertia wechseln, vergleichen Sie am besten unter [Frontend](/de/frontend).
</Info>

## Blade-Direktiven

### Bedingungen (if)

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

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

```blade theme={null}
@isset($records)
    // $records existiert und ist nicht null
@endisset

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

### Auth-Direktiven

```blade theme={null}
@auth
    // Inhalte für angemeldete Benutzer
@endauth

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

### Switch

```blade theme={null}
@switch($i)
    @case(1)
        Erster Fall...
        @break

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

    @default
        Standardfall...
@endswitch
```

### Schleifen

Blade stellt praktische Direktiven für Schleifen bereit.

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

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

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

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

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

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

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

```mermaid theme={null}
flowchart TD
    A["Kind-View<br>@extends('layouts.app')"] --> B["Eltern-Layout<br>layouts/app.blade.php"]
    A --> C["@section('title', 'Kindseite')"]
    A --> D["@section('content')<br>Inhalt<br>@endsection"]
    B --> E["@yield('title')<br>← Titel eingefügt"]
    B --> F["@yield('content')<br>← Inhalt eingefügt"]
    C --> E
    D --> F
    E --> G["Finales HTML"]
    F --> G
```

**Eltern-Layout definieren:**

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

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

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

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

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

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

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

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

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

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

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

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

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

<Info>
  Praxisrelevante CSRF-Maßnahmen inklusive Origin-Prüfung sowie `X-CSRF-TOKEN` / `X-XSRF-TOKEN` finden Sie unter [CSRF-Schutz](/de/csrf).
</Info>

## Zusammenfassung

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

<AccordionGroup>
  <Accordion title="Daten anzeigen">
    `{{ $variable }}` mit Escaping, `{!! $variable !!}` ohne Escaping.
  </Accordion>

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

  <Accordion title="Schleifen">
    `@for`, `@foreach`, `@forelse`, `@while` und Steuerung über die `$loop`-Variable.
  </Accordion>

  <Accordion title="Layouts">
    Komponentenbasiert (`<x-layout>` und `{{ $slot }}`) oder Template-Vererbung (`@extends`, `@section`, `@yield`).
  </Accordion>

  <Accordion title="Sub-Views">
    `@include` bindet Views als wiederverwendbare Bausteine ein.
  </Accordion>
</AccordionGroup>


## Related topics

- [E-Mail-Versand](/de/mail.md)
- [Lokalisierung](/de/localization.md)
- [Asset-Bundling mit Vite](/de/vite.md)
- [Views](/de/views.md)
- [Was ist Laravel](/de/introduction.md)