- Laravel TodoApp – Projekt mit Git + Github erstellen
- Laravel TodoApp – View (Blade Template) in Atom Editor bearbeiten:
- Laravel TodoApp – MySQL Datenbank-Verbindung konfigurieren
- Laravel TodoApp – Model + Migration erstellen
- Laravel TodoApp – ListItem Form + Route + Controller erstellen
- Laravel TodoApp – Formulardaten in Logdatei ausgeben
- Laravel TodoApp – Formulardaten in Tabelle speichern
- Laravel TodoApp – ListItems aus Tabelle ausgeben
- Laravel TodoApp – Todo ListItem als erledigt markieren
- Laravel TodoApp – Layout erstellen
- Laravel TodoApp – Bootstrap hinzufügen
- Laravel TodoApp – Welcome Blade Template umbenennen in Todos
- Laravel TodoApp – Todo nur eintragen wenn User angemeldet
- Laravel TodoApp – Nur eigene Todos anzeigen und bearbeiten
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:
