<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use App\Models\Website;

class WebsitesController extends Controller
{
    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        // destroy method returns true or false
        $websiteSuccessfullyDestroyed = Website::destroy($id);

        if($websiteSuccessfullyDestroyed) {
                return redirect()->route('websites.index')->with('success', 'Website successfully deleted!');
        } else {
                return redirect()->route('websites.index')->with('error', 'Website could not be deleted!');
        }
    }
}

In diesem Schritt erweitern wir unseren Quelltext so, dass nur eigene Todo ListItems angezeigt und bearbeitet werden können.
Dazu erstellen wir zuerst eine Migration für die ListItem-Tabelle – hier erweitern wir die Spalte „user_id“.
In dieser Spalte wird unsere aktuelle UserId gesichert, wenn ein Todo ListItem angelegt wird.

php artisan make:migration add_list_items_user_id

Nach Anlegen der Migration lassen wir diesen Code laufen mit:

php artisan migrate

Nach Hinzufügen der neuen Tabellenspalte sieht die Tabelle „list_items“ wie folgt aus (user_id ist bereits bei einigen list_items von Hand geändert worden):

Damit nur die ListItems angezeigt werden, die dem aktuellen User gehören, müssen wir das User Model, das ListItem Model und den TodoListController anpassen:

Jetzt werden nur die Todo ListItems von dem aktuell angemeldeten User angezeigt. Wenn ein neues Todo ListItem erzeugt wird, wird automatisch die aktuelle UserId gesetzt.

Die Todos sollen nur erstellt und als erledigt markiert werden können, wenn der User angemeldet ist.
Dazu schalten wir die „$this->middleware(‚auth‘);“ im Konstruktor des TodoListControllers aktiv:

In der Todos View erscheint beim Zugriff auf die „todos“ der Login-Dialog, wenn der Benutzer nicht angemeldet ist:

Nach erfolgreichem Login kann der User die todos bearbeiten!

In diesem Schritt benennen wir das „Welcome“ Blade-Template um in „Todos“.
Dazu passen wir neben dem Namen des Blade Templates selbst auch den TodoController an und ersetzen dort „welcome“ durch „todos“:

In diesem Schritt fügen wir Twitter Bootstrap zu unserem Projekt hinzu. Das erleichtert das Layout der App wesentlich.
Außerdem lassen wir uns Registrierung + Login Masken automatisch erzeugen.
Beim letzten Mal haben wir auch ein Layout angelegt, bei der Installation von Bootstrap wird ein separates Layout angelegt.

Zuerst installieren wir Laravel-UI mithilfe von composer in der Kommandozeile:

composer require laravel/ui

Danach installieren wir Bootstrap:

php artisan ui bootstrap --auth

Nach Abschluss der Installation von Bootstrap lassen wir einmal die Installation von Node Package Manager laufen:

npm install && npm run dev

In unserer Todo-App sind eine Menge neuer Dateien erzeugt worden:

Folgende Änderungen befinden sich jetzt in unserer App:

• Neuer HomeController in App\Http\Controllers
• Neuer ConfirmPasswordController in App\Http\Controllers\Auth
• Neuer ForgotPasswordController in App\Http\Controllers\Auth
• Neuer LoginController in App\Http\Controllers\Auth
• Neuer RegisterController in App\Http\Controllers\Auth
• Neuer ResetPasswordController in App\Http\Controllers\Auth
• Neuer VerificationController in App\Http\Controllers\Auth
• Anpassung von bootstrap.js in resources/js
• Neues Verzeichnis sass in resources
• Neues Layout app.blade.php in resources/views/layouts
• Neue View confirm.blade.php in resources/views/auth/passwords
• Neue View email.blade.php in resources/views/auth/passwords
• Neue View reset.blade.php in resources/views/auth/passwords
• Neue View login.blade.php in resources/views/auth
• Neue View register.blade.php in resources/views/auth
• Neue View verify.blade.php in resources/views/auth
• Neue View home.blade.php in resources/views
• Anpassung von web.php in routes

Das sind die wichtigsten Neuerungen, eine Menge Neuerungen. Wir gehen diese Anpassungen einmal durch.

Zuerst haben wir die Route „/register“, unter der ein neues Registrierungsformular vorhanden ist.
Das Formular ist bereits mit Bootstrap gestylt und hat eine Navbar mit den Navigationsrouten „/“, „/register“ und „/login“.
Wir können einen Namen, eine E-Mail-Adresse und Passwort eingeben und werden nach erfolgreicher Registrierung zum Dashboard weitergeleitet.

Wir haben sogar bereits Fehlermeldungen, falls bestimmte Eingabefelder (wie z.B. das Passwortfeld) nicht ausgefüllt werden!

Bei erfolgreicher Registrierung leitet das Formular den Benutzer automatisch zur Dashboard-Route!

Der Logout leitet automatisch zu Startseite weiter.

Das automatisch erzeugte Bootstrap Layout passt farblich nicht zu unserem bisherigen Layout, die Farben sind hell.
Deshalb entfernen wir im nächsten Schritt unser Layout und verwenden das bereits erzeugte Bootstrap Layout.

Das sieht dann im Browser folgendermaßen aus:

Hier sind noch die neuen Auth-Routen sowie die Home-Route:

Der HTML Code der Homeseite sieht wie folgt aus:

Jetzt passen wir unsere Laravel TodoApp an, indem wir ein Layout erstellen, dass für mehrere Seiten die Basis ist.
Dazu verschieben wir einige Inhalte (gesamter html-head, html-body) aus der welcome.blade.php in eine neue app-layout.blade.php Datei. Diese Datei erstellen wir in dem neuen resources/layouts Verzeichnis:

Die Webseiten-Ansicht hat sich nicht geändert. Der Grund für die Erstellung einer globalen Layout-Seite ist das einfache Hinzufügen von neuen Seiten in den nächsten Schritten:

Nun können wir uns daran machen, unsere neu angelegten Todos als erledigt zu markieren.
Dazu brauchen wir pro ListItem einen Button, der das jeweilige als erledigt markiert:

Erledigte Todos haben vor dem Eintrag ein „✓“, unerledigte werden mit „o“ dargestellt.
Das ganze ist in dem Template der root-Route („Welcome.blade.php“) definiert:

Hier haben wir eine if/else Bedingung und ein Formular mit Submit-Button pro ListItem.
Dazu wird das Formular bei Klick auf den „Complete“-Button an eine neue Route (mit einem Parameter $id) geschickt.
Der Parameter ist notwendig, damit wir das richtige ListItem als erledigt markieren.
Nun folgt die Erstellung der Route in der Datei web.php:

In der Route gibt es eine Neuerung, es wird ein Parameter „$id“ verwendet – als gültiger Parameter ist eine Zahl definiert (id ist eine Zahl).
Außerdem haben wir die Route benannt, damit wir einfacher darauf zugreifen können.

Im TodoListController ergänzen wir die Methode „markItemAsComplete“, die diesen Anwendungsfall behandelt.

Als weitere Optimierung können wir den „Complete“-Button nur dann anzeigen, wenn der Todo Eintrag noch nicht abgeschlossen ist:

Zu guter Letzt können wir die Farben anpassen:

Unser Ergebnis kann sich sehen lassen:

Nun checken wir die Änderungen ein und aktualisieren unser Github Repository mit dem folgenden Befehl:

git push origin master

Nachdem wir das Speichern von ListItems in der Tabelle „list_items“ gelöst haben, machen wir uns nun daran, alle ListItems aus der Tabelle in der Default View „welcome.blade.php“ auszugeben. Dazu passen wir die Welcome Route an:

Außerdem brauchen wir eine „index()“ Methode in unserem TodoListController. In der Methode wird wie bisher die „Welcome“-View (das Blade Template) zurückgegeben. Vorher holen wir uns über „ListItem::all()“ alle ListItems über das Model aus der Tabelle „list_items“ und übergeben diese Liste mit an die View:

In der „Welcome“-View können wir diese Variable „$listItems“ jetzt verwenden – wir geben den Inhalt mithilfe einer Debug-Ausgabe in der View direkt aus:

Das ganze sieht dann im Browser folgendermaßen aus:

Jetzt tauschen wir die Debug Ausgabe durch eine for-Schleife aus, mit deren Hilfe wir alle Elemente in einer unsortierten Liste ausgeben:

Hier ist die Ausgabe der Welcome-View mit ListItems im Browser:

Jetzt können wir die eingegebenen Formulardaten, die per POST Request an unseren TodoListController übertragen werden, in der Tabelle „list_items“ speichern. Dazu erweitern wir unseren Quelltext wie folgt:

Wir prüfen vor dem Speichern der Todo-Items, ob überhaupt Formulardaten ausgefüllt wurden.
Nun geben wir im Formular ein neues Todo-Item ein:

Nach einem Klick auf Speichern schauen wir uns die Tabelle „list_items“ in TablePlus an und sehen unseren neuen Eintrag:

In diesem Schritt geben wir die Formulardaten aus, die beim Senden (Klick auf den „Save“-Button) übertragen werden.
Wir haben die neue Route zum Übertragen des POST-Requests bereits im letzten Schritt angelegt, die Methode „saveItem()“ im TodoListController passen wir jetzt an:

Wir haben den Parameter „$request“ ergänzt und geben die Request-Daten, die vom Formular übertragen werden, in einer Logdatei aus.
Wenn wir Daten in unser Eingabefeld eingeben und das Formular abschicken, sieht die Logdatei folgendermaßen aus:

Damit haben wir den Aufbau des Requests und können diese Daten im nächsten Schritt in unserer Tabelle „list_items“ speichern.