Session 1: Das erste sichtbare Ergebnis

Was wir heute bauen

Am Ende dieser Session hast du:

Eine eigene Startseite mit Blog-Posts
Eine About-Seite
Ein wiederverwendbares Layout (Header, Footer, Navigation)
Ein Verständnis dafür, wie Laravel Anfragen verarbeitet

Das klingt nach viel, aber der Ablauf ist immer derselbe. Jede Anfrage in Laravel folgt einer Kette:

Route → Controller → View

Stell dir das vor wie ein Restaurant: Ein Gast betritt das Lokal (der Browser schickt eine Anfrage). Der Empfang (die Route) leitet ihn zum richtigen Tisch. Der Kellner (Controller) nimmt die Bestellung auf und bringt das Essen (die Daten). Der Teller, auf dem es serviert wird, ist die View.

In Session 2 kommt die Küche dazu — das Model, das die Daten zubereitet. Aber heute reicht uns der Kellner.

Drei Ordner, die du kennen musst

Laravel hat eine Menge Ordner. Lass dich davon nicht einschüchtern — wir brauchen heute genau drei:

text

laravel-schulung/
├── routes/
│   └── web.php              ← Hier sagst du Laravel, welche URLs es gibt
├── app/Http/Controllers/    ← Hier steckt die Logik
└── resources/views/         ← Hier liegt das HTML

Alles andere darfst du vorerst ignorieren.

01Schritt 1: Die erste Route verstehen

Öffne routes/web.php. Du siehst etwas wie:

routes/web.php

// routes/web.php

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

Das ist die Route für die Startseite. Übersetzt heißt das: "Wenn jemand / aufruft, zeige die View welcome."

Die View welcome ist die Datei resources/views/welcome.blade.php — genau die Seite, die du gerade im Browser siehst.

Warum Routen?

Ohne Routen wüsste Laravel nicht, was bei welcher URL passieren soll. Jede URL deiner Anwendung braucht eine Route. Das ist der Empfang des Hotels: Ohne ihn irrt der Gast durch die Gänge.

02Schritt 2: Einen Controller erstellen

Die Route oben funktioniert, hat aber ein Problem: Die Logik steckt direkt in der Route. Bei einer Seite ist das OK. Bei zehn wird es unübersichtlich. Deshalb lagern wir die Logik in einen Controller aus — unseren Kellner.

Öffne das Terminal auf deinem Server und führe aus:

Terminal

php artisan make:controller HomeController

php artisan ist Laravels Kommandozeilen-Werkzeug. make:controller erzeugt eine neue Controller-Datei. Schau nach — du findest sie unter app/Http/Controllers/HomeController.php:

app/Http/Controllers/HomeController.php

// app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

class HomeController extends Controller
{
    //
}

Noch leer. Füge eine Methode index hinzu:

app/Http/Controllers/HomeController.php

// app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

class HomeController extends Controller
{
    public function index()
    {
        return view('home');
    }
}

Die Methode index gibt die View home zurück. Das ist die Aufgabe des Kellners: Er bekommt die Bestellung (die Anfrage) und bringt das Ergebnis (die View).

Route auf den Controller umbiegen

Jetzt müssen wir die Route ändern, damit sie unseren Controller nutzt:

routes/web.php

// routes/web.php

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

Übersetzt: "Bei / rufe die Methode index im HomeController auf."

Probier es aus: Lade die Seite im Browser neu. Du siehst einen Fehler: View [home] not found. Das ist korrekt — die View existiert noch nicht. Genau das machen wir jetzt.

Falls du stattdessen Class 'App\Http\Controllers\HomeController' not found siehst: Prüfe die use-Anweisung oben in web.php. Der vollständige Klassenname muss importiert werden.

03Schritt 3: Die erste Blade-View

Erstelle die Datei resources/views/home.blade.php:

resources/views/home.blade.php

{{-- resources/views/home.blade.php --}}

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein Blog</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">Mein Blog</a>
        </div>
    </nav>

    <div class="container mt-4">
        <h1>Willkommen auf meinem Blog</h1>
        <p class="lead">Hier entstehen bald großartige Beiträge.</p>
    </div>
</body>
</html>

Blade ist Laravels Template-Engine. Im Moment nutzen wir nur normales HTML. Die Blade-Features kommen gleich.

Probier es aus: Lade die Seite neu. Du siehst deine eigene Startseite — mit Navbar und Willkommenstext. Das ist dein erster selbst gebauter Laravel-View.

04Schritt 4: Das bestehende Layout nutzen

Jetzt stell dir vor, du baust zehn Seiten. Jede braucht die gleiche Navbar und den gleichen Footer. Willst du das HTML zehn Mal kopieren? Nein. Dafür gibt es Layouts.

Die gute Nachricht: In deiner Installation existiert bereits ein Layout. Breeze hat es mitgebracht. Schau dir die Datei resources/views/layouts/app.blade.php an — dort findest du die komplette Seitenstruktur mit Navigation, @vite für CSS/JS, und einem wichtigen Platzhalter: {{ $slot }}.

{{ $slot }} ist die Stelle, an der dein Seiteninhalt eingefügt wird. Das Layout definiert alles drumherum (HTML-Kopf, Navigation, Footer), und du füllst nur den Inhalt.

Laravel 13 nutzt dafür Blade Components. Statt das Layout über @extends einzubinden, wrappst du deinen Inhalt einfach in ein Component-Tag:

Home-View mit Component-Layout

Ändere home.blade.php so ab:

resources/views/home.blade.php

{{-- resources/views/home.blade.php --}}

<x-app-layout>
    <div class="container py-4">
        <h1>Willkommen auf meinem Blog</h1>
        <p class="lead">Hier entstehen bald großartige Beiträge.</p>
    </div>
</x-app-layout>

Das war's. sagt Laravel: "Nutze das Layout aus resources/views/layouts/app.blade.php." Alles zwischen dem öffnenden und schließenden Tag wird automatisch in den {{ $slot }}-Platzhalter des Layouts eingefügt.

Du kannst auch einen eigenen Seitentitel setzen, indem du einen benannten Slot verwendest:

blade

<x-app-layout>
    <x-slot name="header">
        <h1 class="h4 mb-0 fw-semibold">Home</h1>
    </x-slot>

    <div class="container py-4">
        <h1>Willkommen auf meinem Blog</h1>
        <p class="lead">Hier entstehen bald großartige Beiträge.</p>
    </div>
</x-app-layout>

füllt den {{ $header }}-Platzhalter im Layout — das ist der Bereich oberhalb des Hauptinhalts.

Probier es aus: Lade die Seite neu. Du siehst deine Startseite mit der Breeze-Navigation (Login/Register-Links oben rechts). Die gesamte Seitenstruktur kommt aus dem Layout, du schreibst nur den Inhalt.

Warum Components statt @extends?

In älteren Laravel-Versionen hat man Layouts mit @extends('layouts.app') und @section('content') eingebunden. Das funktioniert immer noch, aber der Component-Ansatz mit und {{ $slot }} ist der Standard in Laravel 13. Er ist lesbarer, flexibler und passt besser zu dem, wie Breeze die Projekt-Templates aufbaut. Wir bleiben bei diesem modernen Ansatz.

05Schritt 5: Daten vom Controller an die View übergeben

Bisher steht der Inhalt fest im HTML. In einer echten Anwendung kommen die Daten woanders her — später aus der Datenbank, jetzt erstmal aus dem Controller.

Ändere den Controller:

app/Http/Controllers/HomeController.php

// app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

class HomeController extends Controller
{
    public function index()
    {
        $posts = [
            [
                'title' => 'Laravel verstehen',
                'content' => 'Laravel folgt dem MVC-Pattern und macht Webentwicklung strukturiert und übersichtlich.',
            ],
            [
                'title' => 'Blade Templates',
                'content' => 'Blade ist Laravels Template-Engine. Sie trennt Logik sauber von der Darstellung.',
            ],
            [
                'title' => 'Routing erklärt',
                'content' => 'Routen verbinden URLs mit der Logik deiner Anwendung.',
            ],
        ];

        return view('home', compact('posts'));
    }
}

compact('posts') ist eine PHP-Kurzform für ['posts' => $posts]. Es übergibt die Variable $posts an die View.

Jetzt passe die View an:

resources/views/home.blade.php

{{-- resources/views/home.blade.php --}}

<x-app-layout>
    <div class="container py-4">
        <h1>Willkommen auf meinem Blog</h1>
        <p class="lead">Aktuelle Beiträge:</p>

        <div class="row mt-4">
            @foreach($posts as $post)
                <div class="col-md-4 mb-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ $post['title'] }}</h5>
                            <p class="card-text">{{ $post['content'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</x-app-layout>

Neue Blade-Features:

@foreach($posts as $post) ... @endforeach — eine Schleife. Für jeden Post im Array wird der HTML-Block wiederholt.
{{ $post['title'] }} — gibt den Wert aus und escaped HTML automatisch. Das schützt vor XSS-Angriffen.

Probier es aus: Lade die Seite neu. Du siehst drei Post-Karten. Die Daten kommen jetzt aus dem Controller, nicht mehr aus dem HTML. Das ist der entscheidende Punkt: Logik und Darstellung sind getrennt.

In Session 2 ersetzen wir dieses Array durch echte Datenbankabfragen. Aber das Prinzip bleibt identisch.

06Schritt 6: Die About-Seite

Zeit, das Gelernte selbst anzuwenden. Baue eine About-Seite. Du brauchst drei Dinge:

1. Route

routes/web.php — unterhalb der bestehenden Route ergänzen

// routes/web.php — unterhalb der bestehenden Route ergänzen

Route::get('/about', [HomeController::class, 'about']);

2. Controller-Methode

app/Http/Controllers/HomeController.php — neue Methode in der Klasse

// app/Http/Controllers/HomeController.php — neue Methode in der Klasse

public function about()
{
    return view('about');
}

3. View

resources/views/about.blade.php

{{-- resources/views/about.blade.php --}}

<x-app-layout>
    <x-slot name="header">
        <h1 class="h4 mb-0 fw-semibold">About</h1>
    </x-slot>

    <div class="container py-4">
        <h1>Über diesen Blog</h1>
        <p>Dieses Projekt entsteht im Rahmen der Laravel-Schulung.</p>

        <div class="card mt-4">
            <div class="card-body">
                <h5>Was wir bisher gelernt haben</h5>
                <ul>
                    <li>Routen definieren</li>
                    <li>Controller erstellen</li>
                    <li>Blade Components und Slots nutzen</li>
                    <li>Daten an Views übergeben</li>
                </ul>
            </div>
        </div>
    </div>
</x-app-layout>

Probier es aus: Öffne /about im Browser. Die Seite nutzt automatisch das gleiche Layout — Navigation und Footer sind schon da, ohne dass du sie nochmal schreiben musstest.

Zusammenfassung

Konzept	Was es macht	Analogie
Route	Verbindet eine URL mit Code	Empfang im Hotel
Controller	Enthält die Logik, bereitet Daten vor	Kellner im Restaurant
View	Zeigt HTML an	Der Teller, auf dem serviert wird
Layout Component	Wiederverwendbare Seitenstruktur ()	Grundriss des Restaurants
Blade	Template-Engine mit Components, Slots, @foreach, {{ }}	Die Speisekarte, die sich dynamisch anpasst

Der Flow jeder Anfrage:

Code

Browser → Route → Controller → View → Browser

In Session 2 erweitern wir das um das Model — die Küche. Dann kommen die Post-Daten aus einer echten Datenbank statt aus einem PHP-Array.

Deine Aufgabe

Erstelle eine Kontakt-Seite unter /kontakt:

Lege eine Route an
Erstelle eine Methode im HomeController (oder einem neuen Controller)
Baue eine View mit einem Kontaktformular (das Formular muss noch nichts tun — wir lernen Formulare in Session 3)

Hinweis: Das Layout übernimmt Navbar und Footer automatisch. Du musst nur den Content-Bereich füllen.

Cheatsheet

Artisan

Terminal

php artisan make:controller NameController    # Controller erstellen
php artisan serve                              # Entwicklungsserver starten
php artisan route:list                         # Alle Routen anzeigen

Routing

Einfache Route

// Einfache Route
Route::get('/url', [Controller::class, 'methode']);

Blade

Direktive	Bedeutung
`...`	Layout-Component verwenden
`...`	Benannten Slot füllen
`{{ $slot }}`	Standard-Slot im Layout (für Seiteninhalt)
`@foreach($items as $item) ... @endforeach`	Schleife
`{{ $variable }}`	Variable ausgeben (HTML-escaped)