🎯 Ziel dieses Teils
✅ Jede Aufgabe bekommt einen „Bearbeiten“-Button
✅ Klick öffnet eine kleine Eingabeseite
✅ Der neue Text wird gespeichert und angezeigt
✅ Alles funktioniert einfach, klar und ohne JavaScript
Grundidee
Wir bauen:
- Eine neue Route
/bearbeiten/<index>→ zeigt ein Bearbeitungsformular - Eine zweite Route, die das Formular verarbeitet → ändert den Text und speichert
- Einen „Bearbeiten“-Button im HTML
Schritt 1: Bearbeitungsseite anzeigen
In app.py, füge diese Funktion hinzu:
@app.route("/bearbeiten/<int:index>")
def aufgabe_bearbeiten(index):
if 0 <= index < len(aufgaben):
aufgabe = aufgaben[index]
return render_template("bearbeiten.html", index=index, aufgabe=aufgabe)
return redirect(url_for("startseite"))
Schritt 2: Formular verarbeiten
Füge danach eine zweite Route hinzu:
@app.route("/bearbeiten/<int:index>", methods=["POST"])
def aufgabe_speichern(index):
neuer_text = request.form.get("text")
if neuer_text and 0 <= index < len(aufgaben):
aufgaben[index]["text"] = neuer_text.strip()
aufgaben_speichern()
return redirect(url_for("startseite"))
Schritt 3: Neue HTML-Datei bearbeiten.html
Lege in templates/ die Datei bearbeiten.html an:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aufgabe bearbeiten</title>
</head>
<body>
<h1>✏️ Aufgabe bearbeiten</h1>
<form action="/bearbeiten/{{ index }}" method="post">
<input type="text" name="text" value="{{ aufgabe.text }}" required>
<button type="submit">💾 Speichern</button>
<a href="/">Abbrechen</a>
</form>
</body>
</html>
Schritt 4: Bearbeiten-Button ins index.html
Füge in der Aufgabenanzeige einen neuen Button hinzu:
<a href="/bearbeiten/{{ loop.index0 }}">
<button>✏️ Bearbeiten</button>
</a>
Zum Beispiel unter dem Text oder neben „Löschen“:
<a href="/loeschen/{{ loop.index0 }}">
<button>❌ Löschen</button>
</a>
<a href="/bearbeiten/{{ loop.index0 }}">
<button>✏️ Bearbeiten</button>
</a>
Schritt 5: App starten & testen
python app.py
- Öffne deine App im Browser
- Klicke bei einer Aufgabe auf „✏️ Bearbeiten“
- Ändere den Text → „💾 Speichern“
- Der Text ist aktualisiert – und bleibt gespeichert
Was du jetzt kannst
| Funktion | Wie umgesetzt? |
|---|---|
| Aufgabe anzeigen & editieren | Zwei Routen mit GET und POST |
| Formular mit aktuellem Text | value="{{ aufgabe.text }}" |
| Änderungen speichern | aufgaben[index]["text"] = ... |
| Benutzerführung | Klarer Weg zurück zur Startseite |
Was du gelernt hast
- Formulare mit bestehendem Inhalt anzeigen
- GET & POST auf derselben Route verarbeiten
- Einfache Datenbearbeitung in Flask
- Dynamische Template-Daten in Formularfeldern
Bonus-Ideen
- ⏳ Letzte Änderung speichern (Datum)
- 🔒 Aufgaben sperren oder freigeben
- 🖼️ Icons statt Buttons verwenden (z. B. mit Font Awesome)
Schreibe einen Kommentar