Laravel Bootcamp: Schritt-für-Schritt-Anleitung zur Erstellung von Chirps mit Inertia.js (2023)

Die Erstellung einer Anwendung, die es Benutzern ermöglicht, kurze Nachrichten, sogenannte Chirps, zu veröffentlichen, ist ein faszinierendes Projekt. In diesem Artikel werden wir Ihnen eine umfassende Schritt-für-Schritt-Anleitung geben, wie Sie genau das mit Laravel und Inertia.js umsetzen können.

Einleitung

Die Umsetzung einer Anwendung beginnt mit der Erstellung von Modellen, Migrationen und Controllern. Diese drei Konzepte sind entscheidend, um eine effiziente und konsistente Datenbankstruktur zu gewährleisten und Anfragen zu verarbeiten.

Modelle

Modelle bieten eine leistungsstarke Schnittstelle, um mit den Tabellen in Ihrer Datenbank zu interagieren. Für unser Chirp-Projekt erstellen wir ein Modell namens "Chirp", das die Basis für die Verwaltung von Chirps bildet.

php artisan make:model -mrc Chirp

Dieser Befehl erstellt drei Dateien: app/Models/Chirp.php, die Eloquent-Modellklasse, database/migrations/<timestamp>_create_chirps_table.php, die Migrationsdatei für die Datenbanktabelle, und app/Http/Controllers/ChirpController.php, den HTTP-Controller für die Verarbeitung von Anfragen.

Migrationen

Migrationen ermöglichen es uns, Tabellen in der Datenbank einfach zu erstellen und zu ändern. Sie stellen sicher, dass die Datenbankstruktur überall vorhanden ist, wo Ihre Anwendung läuft.

// Ausschnitt aus der Migrationsdatei
public function up(): void
{
    Schema::create('chirps', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->cascadeOnDelete();
        $table->string('message');
        $table->timestamps();
    });
}

Hier legen wir fest, dass jeder Chirp eine Benutzer-ID haben wird, um die Beziehung zwischen Benutzern und ihren Chirps zu verwalten.

Controller

Controller sind dafür verantwortlich, Anfragen zu verarbeiten und Antworten zurückzugeben. Der Resource Controller, den wir mit dem Befehl php artisan make:model -mrc Chirp erstellt haben, enthält grundlegende Methoden wie "index" und "store", die wir für unsere Anwendung nutzen werden.

Routing

Um URLs für unseren Controller zu erstellen, definieren wir Routen in der Datei routes/web.php. Wir verwenden die Route::resource()-Anweisung, um alle Routen in einer konventionellen URL-Struktur zu definieren.

// Ausschnitt aus routes/web.php
Route::resource('chirps', ChirpController::class)
    ->only(['index', 'store'])
    ->middleware(['auth', 'verified']);

Dies erstellt Routen für die Anzeige des Formulars und die Listung von Chirps sowie für das Speichern neuer Chirps. Diese Routen sind durch die Middleware "auth" und "verified" geschützt, um sicherzustellen, dass nur angemeldete und verifizierte Benutzer darauf zugreifen können.

Inertia.js für das Frontend

Inertia.js ermöglicht die nahtlose Integration von Laravel und Frontend-Frameworks wie Vue.js oder React. Im Index-Methoden des ChirpControllers verwenden wir Inertia, um eine Frontend-Seite zu rendern.

// Ausschnitt aus ChirpController.php
public function index(): Response
{
    return Inertia::render('Chirps/Index', [
        // Daten für die Anzeige, hier können weitere Informationen eingefügt werden
    ]);
}

Die Frontend-Seite wird in Vue.js erstellt und ermöglicht es Benutzern, neue Chirps zu erstellen und anzuzeigen.

Navigation

Um die Benutzerfreundlichkeit zu verbessern, fügen wir einen Link zur Navigation hinzu. Dies erleichtert den Zugriff auf die Chirp-Funktionalität.

<!-- Ausschnitt aus AuthenticatedLayout.vue -->
<NavLink :href="route('chirps.index')" :active="route().current('chirps.index')">
    Chirps
</NavLink>

Dieser Link wird in der Navigation für Desktop- und Mobilansichten eingefügt, um die Navigation innerhalb der Anwendung zu erleichtern.

Chirp speichern

Die Form, die wir erstellt haben, sendet Nachrichten an die chirps.store-Route. Im ChirpController passen wir die Store-Methode an, um die eingegebenen Daten zu validieren und einen neuen Chirp zu erstellen.

// Ausschnitt aus ChirpController.php
public function store(Request $request): RedirectResponse
{
    $validated = $request->validate([
        'message' => 'required|string|max:255',
    ]);

    $request->user()->chirps()->create($validated);

    return redirect(route('chirps.index'));
}

Hier verwenden wir die Laravel-Validierung, um sicherzustellen, dass die Nachricht nicht leer ist und nicht mehr als 255 Zeichen enthält. Anschließend erstellen wir einen neuen Chirp für den angemeldeten Benutzer.

Fazit

Mit dieser umfassenden Anleitung haben Sie alle notwendigen Schritte durchgeführt, um eine Chirp-Anwendung mit Laravel und Inertia.js zu erstellen. Von der Datenbankmigration über die Routendefinition bis hin zur Speicherung von Chirps – jede Phase wurde detailliert erklärt. Dieses Projekt bietet nicht nur eine praktische Umsetzung, sondern vermittelt auch tiefergehendes Verständnis für die Verwendung von Laravel und Inertia.js in Kombination.

Wir hoffen, dass diese Anleitung Ihnen bei der Umsetzung Ihrer eigenen Chirp-Anwendung hilfreich ist. Bei weiteren Fragen oder Anregungen stehen wir Ihnen gerne zur Verfügung. Viel Erfolg beim Entwickeln Ihrer Anwendung!