Erlernen Sie die Grund­la­gen der Blade-Syntax und des Tem­pla­ting-Systems. Laravels Blade Template-System ist eine der Mög­lich­kei­ten, wie das Laravel PHP-Framework das Leben eines Ent­wick­lers er­leich­tert.

Die Blade-Syntax ist sauber und einfach, kann aber leicht mit ver­schach­tel­ter Vor­la­gen­ver­er­bung und komplexen Be­din­gun­gen umgehen. Und da die Blade-Syntax in PHP-Code kom­pi­liert und dann zwi­schen­ge­spei­chert wird, bietet sie eine bessere Web­ser­ver­leis­tung als die Ver­wen­dung von Standard-PHP allein.

KI-Assistent kostenlos – Ihr smarter All­tags­hel­fer
  • DSGVO-konform & sicher gehostet in Deutsch­land
  • Pro­duk­ti­vi­tät steigern – weniger Aufwand, mehr Output
  • Direkt im Browser starten – ohne In­stal­la­ti­on

An­for­de­run­gen

  • Ein Cloud Server mit in­stal­lier­tem Laravel und PHP 7.0+.

Um Laravel zu in­stal­lie­ren, folgen Sie den An­wei­sun­gen in unserem Artikel "In­stal­lie­ren Sie das Laravel PHP Framework auf Ubuntu 16.04".

Free Cloud Server Trial
Virtual Private Server auf En­ter­pri­se-Level
  • KVM-basierte vServer für Ent­wick­ler
  • In­te­griert in die IONOS Compute Engine
  • Ska­lier­bar bis zur En­ter­pri­se-Cloud

Ein neues Projekt erstellen

Verbinde dich mit deinem Server mit SSH, dann su mit deinem Laravel-Benutzer. Gehen Sie zu Ihrem Web­ver­zeich­nis:

cd /var/www/html

Erstellen Sie das neue Ba­sis­pro­jekt:

laravel new basic-site

Dadurch wird das grund­le­gen­de Pro­jekt­ver­zeich­nis erstellt und alle Laravel-Stan­dard­kom­po­nen­ten und Un­ter­ver­zeich­nis­se erstellt.

Wechseln Sie in das Pro­jekt­ver­zeich­nis:

cd basic-site

Ein weiterer Schritt ist notwendig, bevor Sie das Projekt in einem Browser be­trach­ten können. Der Besitz des Basic-Site/Storage-Ver­zeich­nis­ses muss auf den Webuser des Servers um­ge­stellt werden:

sudo chown -R www-data:www-data storage

Aufbau einer grund­le­gen­den Da­tei­struk­tur

Blade-Vorlagen leben im Ordner resources/views. Wir werden einen Satz von Ver­zeich­nis­sen erstellen, um unsere neuen Blade-Vorlagen zu or­ga­ni­sie­ren. Die Da­tei­struk­tur ist:

- resources
-- views
--- includes
------- header.blade.php
------- footer.blade.php
--- layouts
------- default.blade.php
--- pages
------- home.blade.php

Dieses Projekt wird eine Master-Lay­out­da­tei haben, die zwei ein­ge­bun­de­ne Dateien aufruft: die Kopf- und Fußzeile. Die Homepage hat den gesamten Inhalt und verwendet die Master-Layout-Datei.

Erstellen Sie die not­wen­di­gen Ver­zeich­nis­se mit den Befehlen:

mkdir resources/views/layouts
mkdir resources/views/pages
mkdir resources/views/includes

Erstellen Sie die Dateien

Als nächstes werden wir die Bei­spiel­da­tei­en erstellen. Jede Blade-Datei muss der Na­mens­kon­ven­ti­on[Dateiname].blade.php folgen und sich im Ver­zeich­nis resources/views des Laravel-Projekts befinden.

Stan­dard­vor­la­ge

Erstellen Sie die Standard-Datei.blade.php:

nano resources/views/layouts/default.blade.php

Dies ist die Standard-Vor­la­gen­da­tei. Den folgenden Inhalt in diese Datei einfügen:

<html>
<head>
    @include('includes.header')
</head>
<body>
    @yield('content')
    @include('includes.footer')
</body>
</html>

Speichern und beenden Sie die Datei.

Zwei Elemente der Blade-Syntax zu beachten:

  • @include zieht In­for­ma­tio­nen aus den Dateien im Include-Ver­zeich­nis ein.
  • @yield ruft In­for­ma­tio­nen aus dem In­halts­be­reich der Homepage ab.

Kopfzeile

Erstellen Sie die Datei header.blade.php:

nano resources/views/includes/header.blade.php

Dies wird die ein­ge­bun­de­ne Header-Datei sein. Fügen Sie den folgenden Inhalt in diese Datei ein:

<title>My Laravel Example Site</title>
<meta name="description" content="An example site for learning Laravel.">

Speichern und beenden Sie die Datei.

Fußzeile

Erstellen Sie die Datei footer.blade.php:

nano resources/views/includes/footer.blade.php

Dies ist die ent­hal­te­ne Fußzeilen-Datei. Den folgenden Inhalt in diese Datei einfügen:

<p>This is the included footer.</p>

Speichern und beenden Sie die Datei.

Start­sei­te

Erstellen Sie die Datei home.blade.php:

nano resources/views/pages/home.blade.php

Dies wird unsere Homepage sein. Den folgenden Inhalt in diese Datei einfügen:

@extends('layouts.default')
@section('content')
    Hello, world! Welcome to the home page.
@endsection

Speichern und beenden Sie die Datei.

Ein paar Hinweise zur Blade-Syntax:

  • @extends teilt Laravel mit, dass der Inhalt dieser Datei eine andere Ansicht erweitert. Es definiert auch die Ansicht, die es als unsere Stan­dard­vor­la­ge erweitert: Res­sour­cen/Ansichten/Layouts/default.blade.php
  • @section definiert den Anfang eines Ab­schnitts, den wir Inhalt genannt haben. Alles, was in diesem Abschnitt enthalten ist, erscheint in dem @yield, das wir in der Vorlage definiert haben.
  • @end­sec­tion schließt diesen Abschnitt. @section und @end­sec­tion sind Begriffe, die paarweise verwendet werden müssen, ähnlich wie andere HTML-Tags (z.B. <div> und </div>).
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung

Erstellen der Route

Da wir nur einfache Blade Layouts verwenden werden, müssen wir lediglich eine einfache Route erstellen, die eine einzelne Ansicht lädt. Es ist nicht notwendig, etwas Kom­pli­zier­te­res (wie einen Con­trol­ler) zu erstellen.

Öffnen Sie die Datei routes/web.php zur Be­ar­bei­tung:

nano routes/web.php

Finde den Abschnitt, der lautet:

Route::get('/', function () {
    return view('welcome');
});

Ersetzen Ihn durch:

Route::get('/', function () {
    return view('pages/home');
});

Speichern und beenden Sie die Datei.

Diese Route nimmt Anfragen für das öf­fent­li­che Haupt­ver­zeich­nis (/) entgegen und leitet diese an die Datei home.blade.php im Sei­ten­ver­zeich­nis weiter.

Nachdem Sie die Er­stel­lung der Route ab­ge­schlos­sen haben, können Sie die Er­geb­nis­se in Ihrem Browser anzeigen, indem Sie /basic-site/public an das Ende Ihrer Domain anfügen (z.B. http://example.com/basic-site/public).

Zum Hauptmenü