Teil 29: Flash-Meldungen für Nutzerfeedback

Sep. 16, 2025

—

von

🎯 Ziel dieses Teils

✅ Nutzer sehen eine Bestätigung nach jeder Aktion
✅ Login-Fehler oder Registrierung werden freundlich erklärt
✅ Leere Listen oder andere Hinweise erscheinen direkt im UI

Was ist eine „Flash-Meldung“?

Eine kurze Nachricht, die nach einer Weiterleitung angezeigt wird.
Wird automatisch beim nächsten Seitenaufruf nur einmal angezeigt.

Du brauchst:

flash("Nachricht") → Nachricht merken
get_flashed_messages() → Nachricht anzeigen

Schritt 1: Flask vorbereiten

In deiner app.py, ganz oben:

from flask import flash, get_flashed_messages

✅ Du brauchst kein Extra-Modul – das ist in Flask schon enthalten.

Schritt 2: Nachrichten erzeugen (Beispiele)

Nach erfolgreichem Login:

flash("Willkommen zurück, " + user["name"] + "!")

Bei fehlerhaftem Login:

flash("❌ Benutzername oder Passwort falsch.", "error")

Nach Aufgabe hinzugefügt:

flash("✅ Aufgabe hinzugefügt.")

Beim Löschen:

flash("🗑️ Aufgabe gelöscht.")

Schritt 3: Flash-Meldung im Template anzeigen

Füge diesen Block in deine index.html (direkt unter <body> oder Überschrift):

{% with nachrichten = get_flashed_messages(with_categories=true) %}
  {% if nachrichten %}
    <ul class="flash">
      {% for kategorie, text in nachrichten %}
        <li class="{{ kategorie }}">{{ text }}</li>
      {% endfor %}
    </ul>
  {% endif %}
{% endwith %}

Schritt 4: CSS für Flash-Meldungen

Erweitere deine style.css:

.flash {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.flash li {
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.flash li.error {
    background: #ffe5e5;
    color: #900;
}

.flash li {
    background: #e0ffe0;
    color: #060;
}

💡 Du kannst auch weitere Kategorien wie info, warning etc. verwenden.

Schritt 5: Beispiele im Code einsetzen

Login:

if user and check_password_hash(user["passwort"], pw):
    session["user_id"] = user["id"]
    session["name"] = user["name"]
    flash("Willkommen zurück, " + user["name"] + "!")
    return redirect(url_for("startseite"))
else:
    flash("❌ Benutzername oder Passwort falsch.", "error")

Registrierung:

try:
    db.execute(...)
    flash("✅ Registrierung erfolgreich! Jetzt einloggen.")
    return redirect(url_for("login"))
except sqlite3.IntegrityError:
    flash("❌ Benutzername bereits vergeben.", "error")

Aufgabe hinzugefügt:

flash("✅ Aufgabe hinzugefügt.")

Aufgabe gelöscht:

flash("🗑️ Aufgabe gelöscht.")

Optionale Idee: Wenn keine Aufgaben da sind

In index.html:

{% if aufgaben %}
  <ul>...</ul>
{% else %}
  <p>📝 Du hast noch keine Aufgaben. Starte gleich eine!</p>
{% endif %}

Was du jetzt kannst

Feature	Technik
Einmalige Rückmeldung	`flash()` + `get_flashed_messages()`
Unterschiedliche Arten	Kategorien wie `"error"`
Bessere UX ohne JavaScript	Nur HTML + CSS + Flask

Bonus-Ideen

⏱ Automatisch nach 3 Sekunden ausblenden (mit JavaScript)
🎨 Verschiedene Farben für Info, Warnung, Fehler
🔁 Zurück zur vorherigen Seite bei Fehlern