Blade - Template Engine für Laravel Anwendungen
Blade ist die standardmäßig mit Laravel mitgelieferte Template Engine. Mit Blade lassen sich die Views in einer Anwendung implemetieren.
Warum macht der Einsatz von Blade Sinn?
Template Engines wie Blade ermöglichen die Wiederverwendbarkeit von Views und erhöhen damit die Produktivität bei der Entwicklung sowie die Wartbarkeit einer Anwendung.
View-Teile die sehr ähnlich oder identisch sind, können als einzelne Blöcke definiert und innerhalb anderer Views wiederverwendet werden.
Beim richtigen Einsazt von Blade entsteht gut strukturierter und damit gut lesbarer Code, der neuen Entwicklern den Einstieg in bestehende Projekte deutlich erleichtern kann.
Blade sorgt außerdem für das Caching der View-Komponenten, was bei dynamisch kreierten Seiteninhalten aus Performance-Gründen zu empfehlen ist.
Blade Basics
Eine neue View anlegen
Unter resources/views/ lassen sich neue Views anlegen.
Es macht Sinn, die Views hier schon zu sortieren, damit es später nicht unübersichtlich wird.
Deshalb legen wir unsere View in einem neuen Ordner an:
resources/views/hello/world.blade.php
Die View selbst können wir mit beliebigem Text füllen, zum Beispiel „Hello, Blade“. Obwohl die Datei auf „php“ endet müssen wir hier aber keine php Tags verwenden.
Alles, was jetzt noch fehlt ist eine entsprechende Route. Diese legen wir wie gehabt in web.php an:
Route::get('/hello', function () {
return view('hello.world');
});
Der Punkt zwischen "hello" und "world" gibt hier unsere Ordnerstruktur wieder.
Das reicht bereits. Über die Route /hello wird nun im Browserfenster der Inhalt von world.blade.php ausgegeben.
Wiederverwendbare Layouts definieren
Eine einzelne View anzulegen, macht natürlich noch nicht viel Sinn. Die wahren Stärken einer Template Engine wie Blade zeigen sich, wenn man Views so miteinander verknüpft, dass dabei wiederverwendbare Layouts entstehen. Als Beispiel werden wir das vorherige Template in ein Layout einbinden. Dazu erstellen wir einen neuen Ordner: resources/views/layouts/ und darin die Datei „layout_1.blade.php“. Unser Layout soll alle Standard-Teile einer HTML-Seite enthalten, damit wir diese nicht für alle anderen Views neu erstellen müssen.
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout-1</title>
</head>
<body>
@yield("body")
</body>
</html>
Im Grunde haben wir hier eine ganz gewöhnliche HTML-Seite erstellte. Das @yield ist eine Blade-Direktive und sagt aus,
dass an dieser Stelle der Inhalt der Sektion ‚body‘ ausgegeben werden soll.
Diese Sektion muss aber erst einmal im ersten Template definiert werden.
Das erste "world" Template wird so geändert:
@extends('layouts.layout_1')
@section('body')
Hello, Blade
@endsection
Ganz oben geben wir an, welches Layout diese View nutzen soll.
Zwischen @section und @endsection wird der Inhalt der "body"-Sektion definiert.
Wenn wir die Route nun wieder aufrufen, sehen wir, dass das HTML-Grundgerüst aus dem Layout-Template hinzugekommen ist.
Blade Variablen
In den meisten Fällen möchte man nicht nur mit statischen Texten arbeiten sondern Textinhalte dynamisch aus einer Datenbank laden und in die jeweilige View einbetten. Angenommen wir hätten bereits ein Eloquent-Model für Textinhalte definiert. Dann könnten wir die View auch in einem Controller aufrufen und die Texte mit übergeben. Dazu brauchen wir nur die Helper-Funktion „view“ und ein Array, das alle Texte aus der Datenbank enthält:
class HelloController extends Controller
{
public function index() {
$texts = Text::all()->pluck(‘text’);
return view('hello.world', [‘texts’ => $texts]);
}
}
In der View könnte man dann alle Texte als Array durchlaufen.
@extends('layouts.layout_1')
@section('body')
@foreach($texts as $text)
{{$text}}
@endforeach
@endsection
Die @foreach-Direktive führt dazu, dass an dieser Stelle eine Php-Foreach-Schleife durchlaufen wird.
Die doppelt geschweiften Klammern geben an, dass an dieser Stelle der Wert einer Blade-Variablen ausgegeben werden soll.
Alle gängigen Kontrollstrukturen von php, wie „if“, „else“ etc finden sich als entsprechende Blade-Direktive wieder.
Wer möchte kann innerhalb des Templates auch einfach php-Code verwenden: @php echo 'echo php!'; @endphp.
Generell sollte aber wenn immer möglich mit Blade-Direktiven gearbeitet werden,
da diese den Text durch Escapen bereits vor XSS-Attacken schützen.
Hier noch ein Beispiel, wie sich if und else-Direktiven in einem Template verwenden lassen:
resources/views/hello/world.blade.php
@foreach($texts as $text)
@if ($text === 'hello')
<span style="color: red">{{$text}}</span>
@else
<span style="color: black">{{$text}}</span>
@endif
@endforeach
Views in andere Views einbinden
Mit den @include-Direktive können wir Views in andere Views einbetten. So können wir zum Beispiel unsere Textliste mit der
@foreach-Schleife in eine separate View auslagern und somit wiederverwendbar machen.
resources/views/helper/textlist.blade.php
<ul>
@foreach($texts as $text)
<li><span style="color: @if ($text === 'hello') red @else black @endif">{{$text}}</span></li>
@endforeach
</ul>
Die komplette resources/views/hello/world.blade.php sähe dann so aus:
@extends('layouts.layout_1')
@section('body')
@include('helper.textlist');
@endsection
Durch die @include-Direktive erbt die eingebettete View bereits die Variablen aus der inkludierenden View, kann aber auch als Parameter weitere Variablen erhalten.
@include('helper.textlist', ['additional_data' => 'zusätzlicher Text']);
Was kann Blade sonst noch?
Neben den oben angesprochenen Basics kann Blade noch eine Menge mehr. Eines der wichtigsten Features ist sicherlich die Erweiterbarkeit.
Es is möglich den bereits großen Umfang an Blade-Direktiven noch durch das Schreiben eigener Direktiven zu erweitern (s. dazu Direktiven schreiben).
Auch ein Blick auf Blade X lohnt sich.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project