Laravel Blade verstehen und nutzen

Die Templating-Engines von Laravel unterstützen React, Vue und andere Bibliotheken. Entwickler lieben jedoch die robuste Fähigkeit der Laravel Blade-Engine, schnell modulare und wiederverwendbare Ansichten zu erstellen. Mit Blade kannst du mühelos Layouts erweitern, Abschnitte definieren und Kontrollstrukturen verwenden, um datengesteuerte Inhalte zu erstellen.

In diesem praxisnahen Artikel erfährst du, was Blade ist, wie es funktioniert und wie es deine Laravel-Anwendungen verbessert.

Alles was du brauchst, um Laravel Blade zu benutzen

Laravel Blade ist die Standard-Templating-Engine für das Laravel-Framework. Mit ihr kannst du Variablen, Schleifen, bedingte Anweisungen und andere PHP-Funktionen direkt in deinem HTML-Code verwenden. Um Blade-Dateien zu erstellen, definierst du einfach Blade-Views, indem du Dateien mit der Erweiterung .blade.php im Verzeichnis resources/views deines Laravel-Projekts anlegst und dann deine gewünschten dynamischen Seiten in diesen Dateien strukturierst.

Warum solltest du Blade verwenden?

Ein Hauptvorteil von Blade ist seine modulare Codeorganisation. Mit Blade kannst du deinen Code in wiederverwendbare Module einteilen, die du leicht hinzufügen, entfernen oder aktualisieren kannst, ohne dass der Rest deiner Anwendung davon betroffen ist.

Ein weiterer Vorteil von Blade ist die Codekapselung. Blade hilft dabei, Funktionen zu kapseln, was das Testen, Debuggen und die Wartung des Codes vereinfacht. Dieser Ansatz kommt größeren Anwendungen zugute, denn unorganisierte Anwendungen können schnell schwer zu verwalten sein.

Die Templating-Engine von Blade ist sehr leistungsfähig und das schnellste PHP-Framework, das wir getestet haben. Die Engine kompiliert alle Blade-Ansichten in einfachen PHP-Code und speichert sie im Cache, bis du sie änderst. Dieser Ansatz sorgt für ein schnelleres Rendering und eine insgesamt bessere Leistung.

Wie man Laravel Blade verwendet

In diesem Lernprogramm erstellen wir eine Laravel-Anwendung, um Blade-Vorlagen in Aktion zu erleben. Du lernst, Blade-Layouts zu definieren und zu erweitern, Daten zwischen Blade-Ansichten zu übertragen, die verschiedenen verfügbaren Kontrollstrukturen zu nutzen und deine eigenen Blades zu erstellen.

Voraussetzungen

Um diesem Tutorial folgen zu können, musst du über folgende Voraussetzungen verfügen:

• Vorkenntnisse in PHP
• Composer ist installiert. Überprüfe, ob der Composer auf deinem System installiert ist, indem du composer -V

Schau dir den kompletten Code des Tutorials an, um dich bei der Arbeit zu unterstützen.

So erstellst du die Laravel-Anwendung

Um eine Laravel-Beispielanwendung zu erstellen, führe aus:

composer create-project laravel/laravel my-app

Befolge die Anweisungen auf deinem Terminal, um die Anwendung zu erstellen.

Als Nächstes gehst du in das Anwendungs-Verzeichnis und rufst sie mit diesem Befehl auf:

cd my-app
php artisan serve

Klicke auf den Link im Terminal, um die Laravel-Willkommensseite in deinem Browser zu öffnen.

Wie du das Layout definierst

Mit Layouts kannst du Abschnitte deiner Webanwendung so konfigurieren, dass sie sich über mehrere Seiten erstrecken. Wenn deine Anwendung zum Beispiel eine einheitliche Navigationsleiste und Fußzeile für alle Seiten hat, ist es effizienter, diese einmal zu erstellen, als sie für jede Seite neu zu erstellen.

Bevor du die Schritt-für-Schritt-Anleitung durcharbeitest, solltest du dir das folgende Beispiel ansehen.

Der Code für die Erstellung von Websites ohne Layouts ist unten abgebildet. Er zwingt dich, den Code für die Navigationsleiste und die Fußzeile für jede Seite neu zu schreiben.

<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>

<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

Stattdessen kannst du deine Anwendung ganz einfach mit Layouts aufbauen, um dieselben Komponenten in einem einzigen Codeblock gemeinsam zu nutzen:

<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Sobald du dein Layout definiert hast, kannst du es auf jeder beliebigen Seite verwenden:

<main-layout>
  Content for page n
</main-layout>

In älteren Laravel-Versionen musstest du Layouts mithilfe von Vorlagenvererbung erstellen. Als das Unternehmen jedoch die Komponentenfunktion einführte, wurde es viel einfacher, robuste Layouts zu erstellen.

Um ein neues Layout mit Laravel Blade zu erstellen, führe zuerst diesen Befehl aus, um die Komponente des Layouts zu erstellen:

php artisan make:component Layout

Dieser Befehl erzeugt eine neue Datei layout.blade.php, die sich in einem neuen Ordner namens components im Verzeichnis resources/views/ befindet. Öffne diese Datei und füge diesen Code ein:

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

Dieser Code erstellt eine Layoutkomponente mit einer einfachen Navigationsleiste und einer Fußzeile. Die slot funktion legt fest, wohin der Hauptinhalt übergeben werden soll, wenn du deine Layoutkomponente erweiterst.

Wie du das Layout erweiterst

Du kannst eine Komponente ganz einfach mit dem Tag in eine Blade-Ansicht importieren. Diese Methode gilt auch für die Layoutkomponente, die du zuvor erstellt hast.

Um zu sehen, wie die Erweiterung des Layouts aussieht, öffne die Standarddatei resources/views/welcome.blade.php und ersetze den Inhalt der Datei durch diesen Code:

<x-layout>
  <div>
	<h1>Hello World!</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Auf diese Weise wird die Willkommensseite so aktualisiert, dass sie die Layoutkomponente verwendet und als Inhalt ein Überschriftenelement und einen Absatz mit einem Mustertext übergibt. Lade den Link, den du zuvor geöffnet hast, um die Änderungen zu sehen.

In deiner Layoutdefinition hast du bemerkt, dass der Code eine Überschrift gerendert hat, die standardmäßig „Beispiel-Website“ lautet, wenn der Code die Überschrift nicht übergibt. Du kannst diese Daten als benannte Slots in deinen Ansichten über den <x-slot name="slotName" /> Code übergeben – in diesem Fall <x-slot name="title" />. Aktualisiere die Datei welcome.blade.php mit dem unten stehenden Code und lade die Seite neu:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Als Nächstes fügst du ein paar Stilelemente hinzu, um das Erscheinungsbild deiner Anwendung zu verbessern. Erstelle eine neue app.css-Datei im Verzeichnis /public/css und füge dann den Code aus dieser Datei ein.

Mit all diesen Aktualisierungen solltest du die folgende Ausgabe sehen, wenn du die Vorschau deiner Anwendung unter http://127.0.0.1:8000/ aufrufst.

Wie man Backend-Daten einbindet

Im vorherigen Beispiel hast du Daten zwischen Komponenten und Views über Slots ausgetauscht. Es gibt jedoch bessere Methoden, um Daten aus einer Datenbank oder einer anderen entfernten Quelle zu laden.

In diesem Fall lädst und übergibst du die Daten direkt aus deiner Router-Definition und greifst auf sie zu, wie du im vorherigen Beispiel auf einen benannten Slot zugegriffen hast. Dazu öffnest du die Datei routes/web.php und ersetzst ihren Inhalt durch diesen Code:

<?php
use IlluminateSupportFacadesRoute;

Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

Im obigen Code hast du deine Webroute aktualisiert, um den Namen "John Doe" an die Willkommensansicht zu übergeben. Jetzt greifst du auf diesen Wert in deinen Blade-Ansichten wie folgt zu:

<div>
  Hello, {{ $name }}
  
</div>

Du kannst diese Methode verwenden, um Daten aus einer Datenbank zu laden. Angenommen, du hast eine To-Do-Tabelle mit einer To-Do-Liste. Verwende die DB-Fassade, um diese Aufgaben zu laden und sie an deine Ansicht zu übergeben:

<?php
use IlluminateSupportFacadesDB; // Import DB Facade
use IlluminateSupportFacadesRoute;

Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

Wenn du jedoch keine Datenbank hast, aktualisiere die Web-Eingangsroute, um ein Array mit statischen To-Dos zu übergeben. Öffne die Datei routes/web.php und aktualisiere die Standardroute (/) mit dem folgenden Code:

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

Ersetze den Inhalt der Datei welcome.blade.php durch den folgenden Code, um auf die to-dos als kodiertes JSON-Array zuzugreifen.

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
  
</x-layout>

Verwendung von Steuerkurzbefehlen

Die Blade-Templating-Engine unterstützt auch mehrere Direktiven, um verschiedene Datentypen bedingt darzustellen. Um z. B. das zurückgegebene to-dos-Array zu durchlaufen, das du an deine Willkommensansicht übergeben hast, füge den folgenden Code in die Datei welcome.blade.php ein und wende eine foreach -Schleife an:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

Diese Änderung sollte deine To-Dos in einer ungeordneten Liste darstellen, wie auf dem Screenshot unten.

Um einen Block mit bedingten Anweisungen zu erstellen, verwendest du die Direktiven @if, @elseif, @else und @endif. Zum Beispiel:

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

Ersetze den Inhalt der Datei welcome.blade.php durch den obigen Code. Die verschiedenen if–else Direktiven zählen die Aufgaben und zeigen eine benutzerdefinierte Nachricht für verschiedene Szenarien an. Wenn du mehr als eine Aufgabe in deinem To-Do-Array hast, solltest du die Ausgabe „Ich habe mehrere Aufgaben!“ im Browser sehen.

Weitere unterstützte Direktiven findest du in der Dokumentation von Laravel.

Wie man eine benutzerdefinierte Erweiterung erstellt

Du kannst auch eine benutzerdefinierte Direktive schreiben, ähnlich wie im vorherigen Beispiel. Um diese Technik auszuprobieren, erstelle eine benutzerdefinierte Direktive zum Kürzen von Text.

Erstelle zunächst einen neuen Dienstanbieter, indem du ihn ausführst:

php artisan make:provider TruncateTextServiceProvider

Dieser Befehl erzeugt eine neue Dienstanbieterdatei unter app/Providers/TruncateTextServiceProvider.php. Öffne diese Datei und ersetze ihren Inhalt durch:

<?php
namespace AppProviders;

use IlluminateSupportFacadesBlade;
use IlluminateSupportServiceProvider;

class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

Der Code importiert die Blade-Fassade und definiert eine neue benutzerdefinierte Direktive namens @truncate. Die Direktive nimmt zwei Argumente entgegen: $text und $length. Sie verwendet die Methode Str::limit(), um den Text auf die angegebene Länge zu kürzen.

Zum Schluss registrierst du den Dienstanbieter, indem du ihn in der Konfigurationsdatei config/app.php zum Array deiner Anbieter hinzufügst:

'providers' => [
  // Other service providers
  AppProvidersTruncateTextServiceProvider::class,
],

Verwende die benutzerdefinierte Direktive in deinen Blade-Vorlagen (welcome.blade.php), indem du sie mit der Syntax @truncate aufrufst.

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
  
</div>

Zusammenfassung

In diesem Artikel hast du erfahren, wie du mit Laravel Blade deinen Entwicklungsprozess rationalisieren und modulare und wiederverwendbare Ansichten für Webanwendungen erstellen kannst. Doch damit sollte deine Laravel-Entwicklungsreise noch nicht zu Ende sein.

Die Infrastruktur, in der deine Anwendung gehostet wird, ist für deinen Erfolg genauso wichtig wie dein lokaler Entwicklungsprozess. Um deine Laravel-Anwendung auf die nächste Stufe zu heben, brauchst du eine zuverlässige Hosting-Plattform, die den Anforderungen gewachsen ist.

Kinsta optimiert die Hosting-Lösungen hinsichtlich Leistung, Sicherheit und Skalierbarkeit, damit du deine Anwendung in der bestmöglichen Umgebung entwickeln kannst. Setze deine Laravel-Anwendung auf Kinsta ein, um es selbst zu erleben.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.

• LinkedIn