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: