Laravel - Blade Templates: Ein Anfängerleitfaden

Hallo da draußen, angehende Web-Entwickler! Heute tauchen wir in die wundervolle Welt von Laravel's Blade-Templating-Engine ein. Machen Sie sich keine Sorgen, wenn Sie noch nie zuvor kodiert haben – ich werde Ihr freundlicher Führer auf dieser Reise sein und wir gehen das Schritt für Schritt durch.

Laravel - Blade Templates

Was ist Blade?

Blade ist die leistungsstarke Templating-Engine von Laravel. Stellen Sie es sich als ein magisches Werkzeug vor, das uns dabei hilft, dynamische und wiederverwendbare HTML-Vorlagen zu erstellen. Es ist wie ein superkluger Assistent, der die Lücken auf Ihren Webseiten mit tatsächlichen Daten füllen kann.

Warum Blade verwenden?

Es ist einfach und leicht zu erlernen
Es macht Ihren Code sauberer und lesbarer
Es hilft Ihnen, Wiederholungen zu vermeiden (denken Sie daran, Entwickler sind faul – auf eine gute Weise!)

Jetzt rollen wir die Ärmel hoch und machen los!

Schritte zur Erstellung einer Blade-Vorlagenstruktur

1. Erstellen eines Hauptlayouts

Zuerst müssen wir ein Hauptlayout erstellen. Dies ist wie das Skelett Ihrer Website – es enthält die Teile, die auf jeder Seite gleich bleiben.

Erstellen Sie eine neue Datei namens layout.blade.php im Verzeichnis resources/views:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>Meine großartige Website</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 Meine großartige Website</p>
</footer>
</body>
</html>

Lassen Sie uns das aufschlüsseln:

@yield('title'): Diesweist Blade an, dass wir den Titel später für jede Seite einfüllen werden.
@yield('content'): Dies ist, wo der Hauptinhalt jeder Seite hingeht.

2. Erstellen von Kindervorlagen

Nun erstellen wir eine Kindervorlage, die unser Layout verwendet. Erstellen Sie eine neue Datei namens home.blade.php:

@extends('layout')

@section('title', 'Startseite')

@section('content')
<h2>Willkommen auf meiner großartigen Website!</h2>
<p>Dies ist der Inhalt der Startseite.</p>
@endsection

Hier ist, was passiert:

@extends('layout'): Diesweist Blade an, unser layout.blade.php-File als Basis zu verwenden.
@section('title', 'Startseite'): Dies füllt den Titel aus, den wir zuvor leer gelassen haben.
@section('content'): Dies ist, wo wir den einzigartigen Inhalt für diese Seite platzieren.

3. Anzeigen von Daten

Blade ist besonders gut darin, Daten anzuzeigen. Angenommen, wir möchten eine Liste von Früchten anzeigen. Wir aktualisieren unsere home.blade.php:

@extends('layout')

@section('title', 'Startseite')

@section('content')
<h2>Willkommen auf meiner großartigen Website!</h2>
<p>Dies ist der Inhalt der Startseite.</p>

<h3>Unsere Frucht-Auswahl:</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>Entschuldigung, wir haben keine Früchte mehr!</p>
@endif
@endsection

In diesem Beispiel:

@if und @else: Diese erlauben uns, Entscheidungen in unserer Vorlage zu treffen.
@foreach: Dies hilft uns, durch unsere Liste von Früchten zu iterieren.
{{ $fruit }}: Die doppelten geschweiften Klammern weisen Blade an, den Wert der Variable anzuzeigen.

4. Verwenden von Blade-Komponenten

Blade-Komponenten sind wie LEGO-Steine für Ihre Website. Sie sind wiederverwendbare Teile, die Sie auf verschiedenen Seiten verwenden können. Lassen Sie uns eine einfache Komponente für einen Button erstellen.

Erstellen Sie eine neue Datei resources/views/components/button.blade.php:

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

Nun können wir diesen Button in unserer home.blade.php verwenden:

@extends('layout')

@section('title', 'Startseite')

@section('content')
<h2>Willkommen auf meiner großartigen Website!</h2>
<p>Dies ist der Inhalt der Startseite.</p>

@component('components.button', ['type' => 'success'])
Klicke mich!
@endcomponent
@endsection

Dies erstellt einen Button mit dem Text "Klicke mich!" und einem Erfolg-Stil.

Blade-Direktiven-Kurzreferenz

Hier ist eine praktische Tabelle einiger gängiger Blade-Direktiven:

Direktive	Zweck
@if	Bedingte Anweisung
@else	Alternative für @if
@elseif	Alternative Bedingung
@foreach	Durchlaufen eines Arrays
@for	For-Schleife
@while	While-Schleife
@switch	Switch-Anweisung
@yield	Definition eines Abschnitts in einem Layout
@section	Definition des Inhalts für ein Layout
@extends	Festlegung des zu verwendenden Layouts
@include	Einbindung einer anderen Ansicht
@auth	Überprüfen, ob der Benutzer authentifiziert ist
@guest	Überprüfen, ob der Benutzer ein Gast ist

Erinnern Sie sich daran, Übung macht den Meister! Haben Sie keine Angst, mit diesen Direktiven zu experimentieren und eigene Vorlagen zu erstellen. Bevor Sie es wissen, werden Sie ein Blade-Ninja sein, der HTML wie ein heiße Messer durch Butter schneidet!

In meinen Jahren des Unterrichtens habe ich festgestellt, dass der beste Weg zum Lernen das Tun ist. Warum nicht versuchen, eine einfache Blog-Struktur mit dem, was wir gelernt haben, zu erstellen? Beginnen Sie mit einem Hauptlayout, erstellen Sie Seiten für die Startseite, das Impressum und die Blog-Beiträge und verwenden Sie die leistungsstarken Funktionen von Blade, um Ihren Code sauber und DRY (Don't Repeat Yourself) zu halten.

Frohes Coden und möge die Blade mit Ihnen sein! ?

Credits: Image by storyset

Vorheriges Tutorial:

Laravel - Ansichten

Nächstes Tutorial:

Laravel - Umleitungen