Laravel TodoApp – Todo ListItem als erledigt markieren

1. Laravel TodoApp – Projekt mit Git + Github erstellen
2. Laravel TodoApp – View (Blade Template) in Atom Editor bearbeiten:
3. Laravel TodoApp – MySQL Datenbank-Verbindung konfigurieren
4. Laravel TodoApp – Model + Migration erstellen
5. Laravel TodoApp – ListItem Form + Route + Controller erstellen
6. Laravel TodoApp – Formulardaten in Logdatei ausgeben
7. Laravel TodoApp – Formulardaten in Tabelle speichern
8. Laravel TodoApp – ListItems aus Tabelle ausgeben
9. Laravel TodoApp – Todo ListItem als erledigt markieren
10. Laravel TodoApp – Layout erstellen
11. Laravel TodoApp – Bootstrap hinzufügen
12. Laravel TodoApp – Welcome Blade Template umbenennen in Todos
13. Laravel TodoApp – Todo nur eintragen wenn User angemeldet
14. Laravel TodoApp – Nur eigene Todos anzeigen und bearbeiten

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