In Teil 15 hast du gelernt, wie du eine HTML-Datei anzeigst.
Jetzt lernen wir, wie du Aufgaben aus Python an die HTML-Seite übergibst – damit sie im Browser sichtbar werden.
🎯 Ziel dieses Teils
✅ Aufgaben in Python speichern
✅ Aufgaben an HTML übergeben
✅ Aufgaben im HTML mit einer Schleife anzeigen ({% for ... %})
Vorbereitung: Aufgabenliste in app.py
In deiner app.py – füge eine kleine Liste mit Beispielaufgaben ein:
aufgaben = [
{"text": "Wäsche waschen", "erledigt": False},
{"text": "Müll rausbringen", "erledigt": True},
{"text": "Python lernen", "erledigt": False}
]app.py (komplett)
So sollte deine Datei nun aussehen:
from flask import Flask, render_template
app = Flask(__name__)
# Beispiel-Aufgaben
aufgaben = [
{"text": "Wäsche waschen", "erledigt": False},
{"text": "Müll rausbringen", "erledigt": True},
{"text": "Python lernen", "erledigt": False}
]
@app.route("/")
def startseite():
return render_template("index.html", aufgaben=aufgaben)
if __name__ == "__main__":
app.run(debug=True)📌 Wichtig:
- Du übergibst
aufgaben=aufgabenan die HTML-Datei - Der Name links (
aufgaben) ist der HTML-Name, rechts ist die Python-Variable
HTML-Datei anpassen: templates/index.html
Jetzt machen wir aus der statischen HTML-Seite eine dynamische Liste.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine To-Do-Liste</title>
</head>
<body>
<h1>📝 Meine Aufgaben</h1>
<ul>
{% for aufgabe in aufgaben %}
<li>
{% if aufgabe.erledigt %}
✅ <s>{{ aufgabe.text }}</s>
{% else %}
⬜ {{ aufgabe.text }}
{% endif %}
</li>
{% endfor %}
</ul>
</body>
</html>Was passiert hier?
| Code | Bedeutung |
|---|---|
{% for aufgabe in aufgaben %} | Starte eine Schleife (wie in Python) |
{{ aufgabe.text }} | Zeige den Text der Aufgabe |
{% if aufgabe.erledigt %} | Bedingung: Ist die Aufgabe erledigt? |
<s>...</s> | Durchgestrichener Text (HTML) |
✅, ⬜ | Nur Emojis – als visuelle Marker |
Server starten
python app.pyDann öffne im Browser:
Du solltest deine Aufgabenliste sehen – mit Häkchen ✅ für erledigt und Kästchen ⬜ für offen.
Was du gelernt hast
Du kannst jetzt:
| Können | Was du nutzt |
|---|---|
| Daten aus Python ins HTML bringen | render_template() |
| Listen anzeigen | {% for ... %} |
| Bedingungen im HTML | {% if ... %} |
| Text ausgeben | {{ ... }} |
Bonus-Idee
Du kannst oben anzeigen, wie viele Aufgaben noch offen sind:
<p>Du hast {{ aufgaben|length }} Aufgaben.</p>Oder später:
<p>Noch {{ offene_aufgaben }} offen, {{ erledigte_aufgaben }} erledigt.</p>
Schreibe einen Kommentar