🎯 Ziel dieses Teils
✅ Du baust ein HTML-Formular
✅ Flask empfängt die eingegebene Aufgabe
✅ Die Aufgabe wird zur Liste hinzugefügt
✅ Die Seite lädt sich neu mit der aktualisierten Liste
Was du brauchst
- HTML-Formular
- Zwei Routen in Flask:
/→ zeigt die Aufgaben/hinzufügen→ verarbeitet die Eingabe
1. Aufgabenliste bleibt wie bisher
In app.py:
aufgaben = [
{"text": "Wäsche waschen", "erledigt": False},
{"text": "Müll rausbringen", "erledigt": True},
{"text": "Python lernen", "erledigt": False}
]
2. Neue Route für das Formular (in app.py)
Importiere ganz oben noch:
from flask import request, redirect, url_for
Dann füge diese neue Route hinzu:
@app.route("/hinzufuegen", methods=["POST"])
def aufgabe_hinzufuegen():
text = request.form.get("text")
if text:
neue_aufgabe = {"text": text, "erledigt": False}
aufgaben.append(neue_aufgabe)
return redirect(url_for("startseite"))
📌 Was passiert hier:
| Code | Bedeutung |
|---|---|
methods=["POST"] | Die Route erlaubt Formulareingaben |
request.form.get("text") | Holt das Eingabefeld „text“ |
redirect(...) | Leitet zurück zur Startseite |
3. HTML-Formular einbauen (index.html)
Füge ganz oben im <body> nach der Überschrift ein kleines Formular ein:
<form action="/hinzufuegen" method="post">
<input type="text" name="text" placeholder="Neue Aufgabe..." required>
<button type="submit">➕ Hinzufügen</button>
</form>
Damit sieht index.html nun so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine To-Do-Liste</title>
</head>
<body>
<h1>📝 Meine Aufgaben</h1>
<form action="/hinzufuegen" method="post">
<input type="text" name="text" placeholder="Neue Aufgabe..." required>
<button type="submit">➕ Hinzufügen</button>
</form>
<ul>
{% for aufgabe in aufgaben %}
<li>
{% if aufgabe.erledigt %}
✅ <s>{{ aufgabe.text }}</s>
{% else %}
⬜ {{ aufgabe.text }}
{% endif %}
</li>
{% endfor %}
</ul>
</body>
</html>
4. Server starten & testen
python app.py
👉 Öffne im Browser http://127.0.0.1:5000
- Gib im Feld eine Aufgabe ein
- Klicke auf „➕ Hinzufügen“
- Die Aufgabe erscheint in der Liste 🎉
Du kannst jetzt:
| Aktion | Funktioniert durch |
|---|---|
| Formular anzeigen | HTML + Flask |
| Eingabe verarbeiten | request.form.get(...) |
| Neue Aufgabe speichern | .append(...) |
| Seite neu anzeigen | redirect(url_for(...)) |
Wichtig: Daten sind noch nicht gespeichert
Wenn du Flask stoppst, sind die Aufgaben weg – wir speichern sie aktuell nur im Arbeitsspeicher.
📦 In Teil 18 zeigen wir dir, wie du die Aufgaben in einer JSON-Datei speichern kannst.
Noch ein kleiner Tipp
Du kannst verhindern, dass leere Aufgaben gespeichert werden:
if text.strip():
...
Oder automatisch den Text kürzen, normalisieren, etc.
Schreibe einen Kommentar