Einführung in Flask

Was ist Flask?

Flask ist ein leichtgewichtiges Python-Framework für Webanwendungen mit grundlegender Unterstützung für URL-Routing und Seitenrendering. Es gehört zur Kategorie der sogenannten Mikro-Frameworks, da es bewusst auf integrierte Funktionen wie Validierung, Datenbankabstraktion oder Authentifizierung verzichtet. Stattdessen können solche Features bei Bedarf über Flask-Erweiterungen eingebunden werden – spezielle Python-Pakete, die gezielt einzelne Funktionalitäten ergänzen.

Obwohl Flask keine eigene Template-Engine mitbringt, ist bei der Installation standardmäßig die Jinja-Vorlagenengine enthalten. Diese ermöglicht es, HTML-Seiten dynamisch zu generieren und mit Python-Daten zu verknüpfen – ein zentraler Bestandteil moderner Webentwicklung.

Warum Flask?

Flask ist besonders beliebt in der Ausbildung und bei Projekten, die schnell und flexibel umgesetzt werden sollen. Es eignet sich hervorragend für:

• den Einstieg in Webentwicklung mit Python,
• das Erstellen von Prototypen,
• die Integration von Machine-Learning-Modellen in Weboberflächen,
• REST-APIs und datengetriebene Anwendungen.

Was kann Flask?

Mit Flask kannst du:

• HTTP-Routen definieren (z. B. /start, /kontakt, /api),
• HTML-Seiten anzeigen (z. B. mit Jinja2-Templates),
• Formulare verarbeiten und Daten empfangen,
• JSON-Daten senden und empfangen (z. B. für KI-Modelle),
• Sessions und Cookies verwalten,
• externe Bibliotheken wie Bootstrap oder JavaScript einbinden.

Grundprinzip

Flask basiert auf einem einfachen Prinzip: Du definierst Funktionen in Python und verknüpfst sie mit bestimmten URLs. Wenn ein Benutzer eine URL aufruft, wird die zugehörige Funktion ausgeführt und liefert eine Antwort – z. B. eine HTML-Seite oder ein Ergebnis aus einem Modell.

Beispiel:

@app.route('/')
def home():
    return 'Willkommen bei Flask!'

Technischer Hintergrund

• Flask wurde 2010 von Armin Ronacher entwickelt.
• Es basiert auf Werkzeug (für HTTP) und Jinja2 (für Templates).
• Es ist modular erweiterbar: Du kannst bei Bedarf Datenbanken, Authentifizierung oder Admin-Interfaces hinzufügen.

Begleitendes Video-Tutorial für diesen Block

Zur praktischen Vertiefung und als visuelle Anleitung werden wir in diesem Unterrichtsblock mehrfach auf das folgende Video zurückgreifen:

FLASK Python Tutorial für Anfänger – WebApps erstellen in 60 Minuten

Weiteres Flask Tutorial: https://code.visualstudio.com/docs/python/tutorial-flask

Installation von Flask in VS Code

Schritt-für-Schritt-Anleitung

1. Python-Interpreter prüfen

• Öffne die Eingabeaufforderung (CMD) oder PowerShell.
• Gib ein:bashpython --version
• Wenn der Befehl nicht funktioniert, muss der Speicherort des Python-Interpreters in der PATH-Umgebungsvariablen eingetragen werden.
  • Beispiel: C:\Users\<Name>\AppData\Local\Programs\Python\Python311\
  • Danach erneut testen.

2. Projektordner erstellen

• Lege einen neuen Ordner für dein Projekt an, z. B. flask_app.
• Öffne diesen Ordner in Visual Studio Code.

3. Virtuelle Umgebung erstellen (wichtig!) Im VS Code-Terminal:

python -m venv venv

• Dadurch wird ein Unterordner venv erstellt, der alle Projektabhängigkeiten isoliert.
• Vorteil: Flask wird nur für dieses Projekt installiert und nicht global.

4. Virtuelle Umgebung aktivieren

• Windows (PowerShell):bashvenv\Scripts\activate
• Nach der Aktivierung erscheint (venv) vor der Eingabezeile im Terminal.

5. Flask installieren Mit aktivierter virtueller Umgebung:

pip install flask

6. Installation überprüfen

python -m flask --version

Du solltest eine Ausgabe wie Flask 3.x.x sehen.

7. Erste Test-App erstellen Lege im Projektordner eine Datei app.py an:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello Flask!'

if __name__ == '__main__':
    app.run(debug=True)

8. App starten Im Terminal:

python app.py

9. Ergebnis prüfen Öffne im Browser:

http://127.0.0.1:5000/

Du solltest die Ausgabe „Hello Flask!“ sehen.

⚠️ Hinweis

• Die Verwendung einer virtuellen Umgebung ist entscheidend:
• Sie erleichtert die Wartung und vermeidet Versionskonflikte.
• Sie verhindert, dass Flask in der globalen Python-Umgebung installiert wird.
• Sie sorgt dafür, dass jede Anwendung ihre eigenen Bibliotheken hat.

JSON: Das Standard-Datenformat für Web-APIs

Flask wird in der modernen Webentwicklung primär dazu eingesetzt, Web-APIs (Schnittstellen) zu bauen. Diese APIs dienen dazu, strukturierte Daten mit anderen Programmen (wie JavaScript-Frontends, mobilen Apps oder anderen Servern) auszutauschen.

Die universelle Sprache für diesen Datenaustausch im Web ist JSON (JavaScript Object Notation).

Um von Anfang an funktionale Backend-Anwendungen erstellen zu können, führen wir daher zunächst den Abschnitt zur JSON-Analyse und -Erstellung ein. Dieses Wissen ist die Grundlage dafür, dass unsere Flask-Routen später nicht nur einfachen Text, sondern sinnvolle, strukturierte Daten verarbeiten und zurückgeben können.

1. Daten empfangen (Vom Client zum Flask-Server)

Wenn ein Webbrowser, eine mobile App oder ein anderes Programm Daten an Ihren Flask-Server sendet (z. B. wenn sich ein Benutzer registriert oder eine Bestellung aufgibt), werden diese Daten in der Regel als JSON-Payload gesendet.

• Flask bietet eine spezielle Methode, um diese eingehenden JSON-Daten direkt zu verarbeiten: request.get_json() (oder das Attribut request.json).
• Diese Methode übernimmt die Arbeit des Python-internen json-Moduls für Sie und konvertiert die JSON-Daten automatisch in ein Python-Dictionary (Wörterbuch), mit dem Sie dann in Ihrem Code einfach arbeiten können.
  • Ohne diese Konvertierung wären die Daten nur ein unverarbeiteter Text-String.

2. Daten senden (Vom Flask-Server zum Client)

Wenn Ihr Flask-Server eine Antwort an den Client schickt (z. B. eine Liste von Produkten), müssen Sie Ihre Python-Datenstrukturen (Dictionaries oder Listen) wieder in das JSON-Format umwandeln, damit der Client sie verstehen kann.

• In Flask können Sie oft einfach ein Python-Dictionary aus Ihrer View-Funktion zurückgeben, und Flask kümmert sich automatisch um die Serialisierung (Umwandlung) in JSON.

Zusammenfassend: JSON ist die Sprache der Web-APIs. Um mit Flask als API-Backend effektiv arbeiten zu können, müssen Sie wissen, wie diese JSON-Daten empfangen und in native Python-Datenstrukturen (wie z. B. Dictionaries und Listen) umgewandelt werden. Daher ist die JSON-Analyse ein unverzichtbarer Bestandteil des gesamten Themas „Flask und Webentwicklung“.

from flask import Flask, request, jsonify

app = Flask(__name__)

# Erlaubt GET (Standard) und POST (für JSON-Daten)
@app.route('/produkt', methods=['GET', 'POST'])
def produkt_api():
    # Dein Code hier
    # ...
    pass

if __name__ == '__main__':
    app.run(debug=True)

{
  "produktname": "Webcam Pro X5",
  "preis": 89.99
}

{
  "eingegangen": "Webcam Pro X5", 
  "status": "erfolg", 
  "verarbeitung": "Daten erfolgreich als Dictionary verarbeitet."
}

Strukturierung des Frontends mit HTML, CSS und Bootstrap

In modernen Webanwendungen spielt das Frontend eine zentrale Rolle: Es ist die Schnittstelle zwischen Nutzer und Anwendung und entscheidet maßgeblich darüber, wie intuitiv und angenehm die Interaktion erlebt wird. Während das Backend die Logik und Datenverarbeitung übernimmt, sorgt das Frontend dafür, dass diese Funktionen visuell zugänglich und verständlich dargestellt werden.

In diesem Abschnitt lernst du, wie du mit den grundlegenden Bausteinen der Webentwicklung – HTML zur Strukturierung von Inhalten und CSS zur Gestaltung des Layouts – eine klare und funktionale Oberfläche aufbaust. Um die Entwicklung effizienter und professioneller zu gestalten, nutzen wir zusätzlich die Bootstrap-Bibliothek, die eine Vielzahl vorgefertigter Komponenten und Design-Elemente bereitstellt. Bootstrap erleichtert es, responsive und ansprechende Oberflächen zu erstellen, die auf unterschiedlichen Geräten und Bildschirmgrößen gleichermaßen gut funktionieren.

Beispiel: Chat UI

Als praktisches Beispiel wirst du eine Chat-Oberfläche entwickeln. Dabei geht es nicht nur um die reine Darstellung von Nachrichten, sondern auch um die sinnvolle Anordnung von Eingabefeldern, Buttons und Ausgaben. Du lernst, wie man mit HTML die Grundstruktur definiert, mit CSS gezielt das Erscheinungsbild anpasst und mit Bootstrap elegante, wiederverwendbare Elemente integriert.

Vertiefung der Konzepte: Wie das Frontend funktioniert

1. Die Flask-Templating-Architektur

Bevor du HTML-Code schreiben kannst, muss Python wissen, wo diese Dateien liegen und wie es sie anzeigt.

• Der templates-Ordner: In Flask muss du alle deine HTML-Dateien (Templates) in einem Unterordner mit dem exakten Namen templates ablegen. Dies ist eine feste Konvention des Flask-Frameworks. Legst du die Dateien woanders ab, findet Flask sie nicht.
• Die Funktion render_template: Wenn eine deiner Routen (z. B. @app.route('/')) eine HTML-Seite ausgeben soll, verwendest du nicht return '<h1>...</h1>', sondern:

return render_template('index.html')

Diese Funktion weist Flask an, die angeforderte Datei aus dem speziellen Ordner zu laden und an den Browser zu senden.

2. Layout-Steuerung mit Flexbox (Bootstrap)

Um die Chat-Nachrichten korrekt auszurichten (eigene Nachrichten rechts, fremde Nachrichten links), nutzt du die Leistungsfähigkeit des CSS-Konzepts Flexbox, welches von Bootstrap vereinfacht wird.

• d-flex (Display Flex): Du wendest diese Bootstrap-Klasse auf den Container an, der die Nachricht umgibt. Dadurch wird dieser Container zu einem Flex-Container, dessen Inhalt nun flexibel gesteuert werden kann.
• justify-content: Diese Eigenschaft steuert die horizontale Verteilung des Inhalts innerhalb des Flex-Containers.
  • justify-content-end: Platziert die Nachricht am rechten Ende des Containers (perfekt für die eigene Nachricht).
  • justify-content-start: Platziert die Nachricht am linken Ende des Containers (für alle fremden Nachrichten).
• Modularität: Durch die Nutzung von Bootstrap-Klassen wie card (für den Nachrichten-Hintergrund) und mt-3 (für den vertikalen Abstand) erstellst du eine saubere, mobile-freundliche Oberfläche, ohne Hunderte Zeilen eigenen CSS-Code schreiben zu müssen.

3. Das fixierte Formular: Positionierung mit reinem CSS

Die Eingabeleiste am unteren Bildschirmrand muss immer sichtbar bleiben, auch wenn du scrollst. Dies erfordert das Arbeiten mit klassischem CSS.

• position: fixed: Dies ist die entscheidende CSS-Eigenschaft. Sie bewirkt, dass das Element aus dem normalen Dokumentenfluss entfernt wird und seine Position relativ zum Browserfenster beibehält. Egal, wie weit der Benutzer scrollt, das Element bleibt fixiert.
• Die calc()-Funktion: Da das fixierte Element keine automatischen Container-Ränder erbt, musst du seine Breite manuell anpassen, um es von Rand zu Rand mit korrektem Abstand darzustellen:

width: calc(100% - 160px);

Die Funktion calc() erlaubt es dir, die volle verfügbare Breite (100%) zu nehmen und davon den benötigten Gesamt-Randabstand (z. B. 80px links + 80px rechts = 160px) abzuziehen.

Datenbank-Einrichtung und -Modellierung

Ein wesentliches Merkmal moderner Webanwendungen ist die Fähigkeit, Daten nicht nur kurzfristig zu verarbeiten, sondern sie auch dauerhaft zu speichern. Während einfache Flask-Apps zunächst nur auf flüchtige Informationen reagieren – etwa Eingaben, die direkt im Speicher verarbeitet und anschließend wieder verworfen werden – entsteht echter Mehrwert erst dann, wenn Inhalte wie Nachrichten, Benutzerinformationen oder Einstellungen auch nach einem Neustart der Anwendung verfügbar bleiben.

Dieser Block widmet sich genau dieser Frage: Wie kann deine Flask-Anwendung Nachrichten persistent speichern? Die Lösung liegt in der Anbindung einer Datenbank. Mithilfe einer Datenbank-Erweiterung für Flask, wie beispielsweise Flask-SQLAlchemy, lassen sich Daten strukturiert ablegen, verwalten und jederzeit wieder abrufen.

Warum Persistenz wichtig ist

• Nachhaltigkeit: Nachrichten oder andere Inhalte bleiben auch nach dem Schließen der Anwendung erhalten.
• Struktur: Daten werden in Tabellen organisiert und können effizient durchsucht und gefiltert werden.
• Skalierbarkeit: Mit einer Datenbank kann deine Anwendung wachsen und große Datenmengen verarbeiten.
• Praxisnähe: Persistenz ist ein Standard in professionellen Anwendungen – von Chat-Apps bis hin zu komplexen Plattformen.

1. Das Bedürfnis nach Persistenz

Bisher existiert der Chat nur so lange, wie die Flask-Anwendung läuft. Startest du den Server neu, wären alle Nachrichten verloren.

• Lösung: Um Daten dauerhaft zu speichern und abrufbar zu machen, benötigst du eine Datenbank.
• Datenbank-Typ: Im Video wird SQLite verwendet. Dies ist eine einfache, dateibasierte Datenbank (die gesamte Datenbank liegt in einer einzigen .db-Datei) und ist ideal für kleine Projekte und den Einstieg.

2. Flask-SQLAlchemy (Der Datenbank-Konnektor)

Flask selbst hat keine integrierte Datenbankunterstützung. Du bindest diese Funktionalität über eine spezielle Flask-Erweiterung ein:

• Name: Flask-SQLAlchemy.
• Funktion: Diese Erweiterung ist ein sogenannter Object-Relational Mapper (ORM). Ein ORM dient als Übersetzer: Er erlaubt dir, mit Python-Objekten (Klassen) zu arbeiten, anstatt komplizierte SQL-Befehle schreiben zu müssen. Das macht die Datenbank-Interaktion für Python-Entwickler einfacher und sicherer.
• Installation: Die Installation erfolgt über den Paketmanager (pip install flask-sqlalchemy).

3. Konfiguration der Datenbank-Verbindung

Bevor du die Datenbank nutzen kannst, musst du Flask mitteilen, wo die Datenbank-Datei liegt:

• App-Konfiguration: Dies geschieht über das app.config-Dictionary in deiner Python-Anwendung.
• Der Verbindungsparameter (SQLALCHEMY_DATABASE_URI):Pythonapp.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.db' Dieser String definiert den Pfad zur Datenbank. sqlite:/// teilt SQLAlchemy mit, dass es sich um eine SQLite-Datenbank handelt, und db.db gibt an, dass die Datei im Hauptordner des Projekts liegen soll.
• Initialisierung: Anschließend wird die Erweiterung mit der App-Instanz verknüpft: db = SQLAlchemy(app).

4. Datenmodellierung mit Klassen (ORM)

Der wichtigste Schritt ist die Definition des Datenmodells. Du nutzt das in früheren Blöcken erlernte Wissen über Klassen und die Objektorientierte Programmierung (OOP), um eine Tabelle in der Datenbank abzubilden.

• Klasse = Tabelle: Jede Python-Klasse, die von db.Model erbt, wird zu einer Tabelle in der Datenbank.
  • Beispiel: Eine Klasse Message(db.Model) wird zur Datenbanktabelle message.
• Attribute = Spalten: Die Attribute (Eigenschaften), die du in der Klasse definierst, werden zu den Spalten der Tabelle.

Aufbau der Spalten (db.Column):

Jede Spalte benötigt einen Typ und bestimmte Parameter:

5. Erstellung der Datenbank-Datei (db.create_all())

Nachdem das Datenmodell (die Klasse) definiert wurde, erstellst du die Datenbank physisch:

• Befehl: Du führst den Befehl db.create_all() einmalig aus.
• Funktion: Dieser Befehl liest alle deine db.Model-Klassen und erstellt die entsprechenden Tabellen in der db.db-Datei.

Anschließend ist deine Anwendung bereit, um Daten mit diesem Modell zu speichern und abzurufen.

Datenfluss und Speicherung von Nachrichten in Datenbanken

Eine Webanwendung entfaltet ihren vollen Nutzen erst dann, wenn sie nicht nur Eingaben entgegennimmt, sondern diese auch strukturiert verarbeitet und dauerhaft speichert. In diesem Abschnitt lernst du den gesamten Ablauf kennen, den eine Nachricht in deiner Flask-Anwendung durchläuft – von der Eingabe im HTML-Formular über die Verarbeitung im Routing bis hin zur Speicherung im Datenbankmodell (db.db).

Warum ist dieser Weg wichtig?

• Ganzheitliches Verständnis: Du siehst, wie Frontend und Backend zusammenarbeiten.
• Praxisnähe: Jede moderne Anwendung – ob Chat, Blog oder Forum – benötigt diesen Ablauf.
• Verknüpfung von Wissen:

1. Dynamische Routen zur Benutzeridentifikation

Zunächst musst du den Benutzer identifizieren, der die Nachricht sendet. Im Video wird dies einfach über die URL gelöst.

• Syntax: Die Route wird angepasst, um einen dynamischen Teil zu akzeptieren (z. B. @app.route('/<name>')).
• Funktionale Übergabe: Der in der URL eingegebene Wert (z. B. „Yunus“) wird automatisch als Parameter an die zugehörige Python-Funktion übergeben:

@app.route('/<name>')
def index(name):  # Der 'name'-Parameter fängt den URL-Wert auf
    # ...

• Zweck: Dieser Wert wird später verwendet, um die Nachricht in der Datenbank eindeutig dem entsprechenden Benutzer zuzuordnen.

2. HTTP-Methoden: GET und POST

Wenn du das Formular in deinem Frontend absendest, nutzt der Browser die POST-Methode, da du neue Daten an den Server schickst. Deine Flask-Route muss diese Methode explizit erlauben.

• Die GET-Methode (Standard): Wird verwendet, um Daten abzurufen (z. B. wenn du eine Seite im Browser öffnest oder eine API abfragst).
• Die POST-Methode (Daten senden): Wird verwendet, um neue Daten an den Server zu senden (z. B. beim Absenden eines Formulars, Registrierung oder Speichern einer Nachricht).
• Aktivierung: Du erweiterst den Route-Decorator um das Argument methods:Python@app.route('/<name>', methods=['GET', 'POST'])
• Logik-Trennung: Innerhalb der View-Funktion prüfst du mit der Anweisung if request.method == 'POST':, ob eine Formular-Übermittlung stattgefunden hat. Die gesamte Logik zum Speichern der Daten wird nur in diesem if-Block ausgeführt.

3. Empfangen von Formular-Daten (request.form)

Die Nachricht (der eigentliche Text) wird vom HTML-Formular gesendet und muss vom Backend entgegengenommen werden.

• Das request-Objekt: Dieses Objekt von Flask enthält alle Informationen zur eingehenden HTTP-Anfrage.
• request.form: Da die Daten von einem Standard-HTML-Formular gesendet werden (nicht als reines JSON), musst du das Dictionary request.form verwenden. Dieses speichert die übermittelten Schlüssel-Wert-Paare aus dem Formular.
• Schlüssel-Erkennung: Um auf den eingegebenen Nachrichtentext zuzugreifen, verwendest du den name-Wert des entsprechenden HTML-Input-Feldes (z. B. request.form['content']).

4. Daten speichern mit dem ORM

Nachdem du den Benutzernamen (aus der URL) und den Nachrichtentext (aus dem Formular) hast, verwendest du dein zuvor erstelltes Datenmodell (Message-Klasse), um die Daten zu speichern.

1. Instanziierung: Du erstellst ein neues Python-Objekt und übergibst die gesammelten Werte:

neue_nachricht = Message(user=name, content=inhalt)

2. Hinzufügen zur Session: Du teilst dem ORM mit, dass dieses neue Objekt zur Datenbank hinzugefügt werden soll:

db.session.add(neue_nachricht)

3. Festschreiben (Commit): Dies ist der entscheidende Schritt. Die commit()-Funktion schreibt die Änderungen dauerhaft in die db.db-Datei:

db.session.commit()

Nach diesem commit ist die Nachricht gespeichert und kann von nun an dauerhaft aus der Datenbank abgerufen werden.

from flask import Flask, render_template, request # 'request' hinzufügen
# ... weitere Imports ...

@app.route('/<name>', methods=['GET', 'POST'])
def index(name):
    # ...

if request.method == 'POST':
    # Hier kommt die Speicherlogik hin
    pass

Auslesen und Dynamisches Anzeigen

Nachdem du gelernt hast, wie Nachrichten in deiner Flask-Anwendung dauerhaft in der Datenbank gespeichert werden können, folgt nun der nächste entscheidende Schritt: die gespeicherten Daten wieder abrufen und im Browser darstellen. Denn eine Anwendung gewinnt erst dann an praktischer Bedeutung, wenn Nutzer ihre eingegebenen Inhalte auch visuell zurückerhalten und mit ihnen interagieren können.

Hier kommt die Jinja2-Template-Engine ins Spiel, die tief in Flask integriert ist. Jinja2 ermöglicht es dir, HTML-Seiten dynamisch zu gestalten, indem du Daten aus dem Backend direkt in die Oberfläche einbindest. So kannst du beispielsweise eine Liste aller gespeicherten Nachrichten aus der Datenbank abrufen und diese in einem übersichtlichen Layout im Browser anzeigen.

Warum Jinja2 wichtig ist

• Dynamische Inhalte: Daten aus der Datenbank werden automatisch in HTML-Seiten eingefügt.
• Trennung von Logik und Darstellung: Python-Code bleibt im Backend, während das Frontend über Templates gepflegt wird.
• Flexibilität: Mit Schleifen, Bedingungen und Platzhaltern lassen sich komplexe Layouts einfach umsetzen.
• Praxisnähe:

1. Daten aus der Datenbank abrufen

Bevor du die Daten an das HTML senden kannst, musst du sie mithilfe des ORM (Flask-SQLAlchemy) aus der db.db-Datei auslesen.

• Der Abruf: Du verwendest die query-Methode deiner Message-Klasse, um alle gespeicherten Nachrichten abzufragen.
  • Message.query: Startet die Abfrage für die message-Tabelle.
  • .order_by(Message.created_at): Sortiert die Ergebnisse nach dem Zeitstempel, um sicherzustellen, dass die ältesten Nachrichten zuerst angezeigt werden.
  • .all(): Führt die Abfrage aus und gibt eine Liste von Message-Objekten zurück (z. B. [<Message 1>, <Message 2>, ...]).

nachrichten = Message.query.order_by(Message.created_at).all()

• Das Ergebnis: Deine Python-Variable nachrichten enthält nun alle Daten, die du im Chat anzeigen möchtest.

2. Datenübergabe von Python an HTML

HTML kann standardmäßig keine Python-Variablen oder Listen verarbeiten. Flask löst dieses Problem durch die Template-Engine Jinja2:

• Der Parameter: Die Funktion render_template() kann zusätzliche Schlüsselwortargumente entgegennehmen, die dann automatisch als Variablen im HTML-Template verfügbar sind.
• Im Template: Im index.html-Template ist die Variable all_messages nun direkt verfügbar und enthält die Liste der Nachricht-Objekte.

# Übergabe der Python-Liste 'nachrichten' an das Template unter dem Namen 'all_messages'
return render_template('index.html', user_name=name, all_messages=nachrichten)

3. Dynamische Darstellung mit Jinja2

Innerhalb deiner index.html-Datei verwendest du spezielle Jinja2-Syntax, um die übergebenen Daten zu verarbeiten und anzuzeigen.

A. Variable Substitution ({{ ... }})

Dieser Syntax dient dazu, den Wert einer Variable direkt in den HTML-Code einzufügen.

• Beispiel: Um den Namen des angemeldeten Benutzers in der Überschrift anzuzeigen:

<h1>Willkommen, {{ user_name }}</h1>

B. Kontrollstrukturen ({% ... %})

Dieser Syntax dient dazu, logische Anweisungen und Kontrollstrukturen wie Schleifen und Bedingungen auszuführen.

• Die for-Schleife: Du nutzt eine for-Schleife, um die gesamte Liste der Nachrichten zu durchlaufen und für jede Nachricht den HTML-Code (die div-Struktur für die Karte) einmal zu generieren. Innerhalb der Schleife greifst du auf die Attribute des aktuellen msg-Objekts zu, z. B. {{ msg.content }} oder {{ msg.user }}.

{% for msg in all_messages %}
    <!-- Hier wird die Nachricht-Karte eingefügt -->
{% endfor %}

4. Styling-Logik im Template (Dynamische Ausrichtung)

Die letzte Herausforderung besteht darin, die richtige CSS-Klasse (justify-content-end vs. justify-content-start) dynamisch zuzuweisen, damit die Nachrichten des aktuellen Benutzers rechts und alle anderen links angezeigt werden.

• Die if-Bedingung: Du verwendest eine Jinja2-Bedingung ({% if ... %}) innerhalb der Schleife.
• Der Vergleich: Du vergleichst den user-Wert der aktuellen Nachricht (msg.user) mit dem Namen des Benutzers, der gerade angemeldet ist (user_name, der aus der URL übergeben wurde).

{% if msg.user == user_name %}
    <!-- Eigene Nachricht: rechts ausrichten -->
    <div class="d-flex justify-content-end">...</div>
{% else %}
    <!-- Fremde Nachricht: links ausrichten -->
    <div class="d-flex justify-content-start">...</div>
{% endif %}

Durch diese Logik wird deine statische HTML-Struktur in eine voll funktionsfähige, dynamische Chat-Oberfläche verwandelt.

# Speichere das Ergebnis in einer Variablen namens 'all_messages'
all_messages = Message.query.order_by(Message.created_at).all()

return render_template('index.html', current_user=name, messages=all_messages)

{% for msg in messages %}
    <!-- Hier kommt die Nachricht-Karte für {{ msg.content }} hinein -->
{% endfor %}

{% if msg.user == current_user %}
    <div class="d-flex justify-content-end mt-3">
{% else %}
    <div class="d-flex justify-content-start mt-3">
{% endif %}

Mit dieser Aufgabe hast du den kompletten Zyklus einer Webanwendung – von der Datenbank über das Backend bis zum Frontend – abgeschlossen.

Weitere Übungen Objektorientierte Programmierung: https://informatik.bildung-rp.de/fileadmin/user_upload/informatik.bildung-rp.de/Fortbildung/pdf/PY-110831-Savoric-OOP.pdf