Wiederholungsaufgabe: Erneutes Ausführen der Escape-Room-Flask Anwendung

Diese Aufgabe dient dazu, Sie mit der bereits entwickelten Flask-Anwendung wieder vertraut zu machen. Folgen Sie den nachstehenden Schritten, um die Anwendung erneut auf Ihrem Server zu starten.

Schritt 1: Herstellen einer SSH-Verbindung

Verbinden Sie sich via SSH mit Ihrem Server, indem Sie entweder die URL edumake.de oder die IP-Adresse 89.58.62.146 verwenden. Bitte beachten Sie, dass eine Verbindung über das Eduroam-Netzwerk wegen der Portbeschränkungen (Port 22 gesperrt) nicht möglich ist. Nutzen Sie eine alternative Internetverbindung, wie einen privaten WLAN-Zugang oder einen mobilen Hotspot.

• Windows: Verwenden Sie PowerShell, indem Sie folgenden Befehl eingeben: ssh benutzername@edumake.de oder ssh benutzername@89.58.62.146. Mit Putty müssen Sie ebenfalls die URL oder IP-Adresse eingeben und den Private-Key unter Auth öffnen.
• macOS/Linux: Öffnen Sie das Terminal und verwenden Sie den Befehl: ssh benutzername@edumake.de oder ssh benutzername@89.58.62.146.

Schritt 1b: Orientierung im Benutzerverzeichnis

Nach dem erfolgreichen Verbindungsaufbau per SSH können Sie sich zunächst einen Überblick über Ihre Ordner verschaffen:

pwd          # Zeigt den aktuellen Pfad (z. B. /home/isa17)
ls -a        # Zeigt auch versteckte Dateien wie .ssh
tree -L 2 # Zeigt nur Ordner, maximal 2 Ebenen tief

Schritt 2: Überprüfung der Flask-Anwendung

Überprüfen Sie die Datei app.py, um sicherzustellen, dass die Rätsellogik korrekt implementiert ist. Sie können dies entweder über Nano direkt auf dem Server tun oder durch den webbasierten Filebrowser:

nano ~/flask_app/app.py

Schritt 3: Aktivieren der virtuellen Umgebung

Bevor Sie die Flask-Anwendung starten, aktivieren Sie zunächst die virtuelle Umgebung. Öffnen Sie dazu das Terminal und wechseln Sie in das entsprechende Verzeichnis Ihrer Flask-Anwendung:

cd ~/flask_app
source venv/bin/activate

✅ Nach der Aktivierung verändert sich Ihre Eingabeaufforderung – der Name der virtuellen Umgebung erscheint in Klammern, z. B.:

(venv) isa##@server:~/flask_app$

Schritt 4: Starten der Flask-Anwendung

Starten Sie die Flask-Anwendung mit dem folgenden Befehl:

python3 app.py

Ersetzen Sie # mit Ihrer spezifischen Tandem-Nummer, entsprechend dem Port, der Ihnen zugewiesen wurde. Dies sorgt dafür, dass Ihre Anwendung auf dem korrekten Port läuft und von außen erreichbar ist.

Nachdem Sie die Flask-Anwendung gestartet haben, können Sie diese über Ihren Webbrowser erreichen. Verwenden Sie dazu die Ihrer Gruppe zugeordnete Subdomain und den entsprechenden Port. Geben Sie die folgende URL in Ihren Browser ein:

http://isa#.edumake.de:80##

Ersetzen Sie beide # mit Ihrer spezifischen Tandem-Nummer. Zum Beispiel würde Gruppe 1 ihre Anwendung über http://isa1.edumake.de:8001 aufrufen.

Einführung in Datenbanken

Datenbanken sind essentiell für die Speicherung, Verwaltung und Abfrage großer Datenmengen in modernen Softwareanwendungen. Sie sind besonders wichtig in interaktiven Systemen wie Webanwendungen, wo Datensicherheit und Datenintegrität kritisch sind.

Datensicherheit und Datenintegrität in Datenbanken

Datensicherheit in Datenbanken bezieht sich auf Maßnahmen, um Daten vor unbefugtem Zugriff und Missbrauch zu schützen. Datenintegrität in Datenbanken sichert die Korrektheit, Konsistenz und Zuverlässigkeit der Daten während ihrer gesamten Lebensdauer.

• Transaktionsmanagement: Sorgt dafür, dass alle Datenoperationen als vollständige Einheit durchgeführt werden, die entweder komplett erfolgreich ist oder im Fehlerfall rückgängig gemacht wird.
• Datenvalidierungsregeln: Stellen sicher, dass nur gültige Daten in die Datenbank eingefügt werden.
• Datenverschlüsselung: Verschlüsselt Daten, um sie vor unbefugtem Zugriff zu schützen, sowohl bei der Übertragung als auch im Ruhezustand.

Überblick über gängige Datenbanksysteme

Verschiedene Datenbanksysteme bieten unterschiedliche Features, die sie für verschiedene Anwendungsfälle geeignet machen:

• MySQL: Beliebt für Webanwendungen, oft verwendet in LAMP/WAMP-Stacks.
• PostgreSQL: Bietet erweiterte Funktionen und strenge Einhaltung von SQL-Standards.
• Oracle DB: Häufig in Großunternehmen verwendet, bietet umfangreiche Funktionalitäten und Skalierbarkeit.
• SQLite: Einfach zu verwenden und gut geeignet für mobile Anwendungen und kleinere Webprojekte.

Warum MariaDB?

MariaDB ist eine beliebte Wahl unter den relationalen Datenbankmanagementsystemen, weil es eine Open-Source-Fortsetzung von MySQL ist und verbesserte Features, Performance und Sicherheit bietet:

Quelle: wikipedia.org

Grundlagen zu PHPMyAdmin

Quelle: wikipedia.org

PHPMyAdmin ist ein beliebtes Tool für die Verwaltung von MySQL- und MariaDB-Datenbanken über eine Web-Oberfläche. Es ermöglicht Benutzern, Datenbanken, Tabellen, Spalten und Beziehungen einfach über einen Browser zu verwalten. Sie können auf PHPMyAdmin über phpmyadmin.edumake.de zugreifen.

Verbindung zu einer Datenbank herstellen

Um eine Verbindung zu einer bestehenden Datenbank herzustellen, benötigen Sie die entsprechenden Zugangsdaten (Benutzername und Passwort) und die Adresse des Datenbankservers. Nach dem Einloggen bei PHPMyAdmin können Sie die Datenbank auswählen, mit der Sie arbeiten möchten, und alle relevanten Datenmanagementaufgaben durchführen.

Exkurs: Funktion und Abfragen von Datenbanken

Quelle: bsz-limbach.com

SQL (Structured Query Language) ist die Sprache, die verwendet wird, um mit Datenbanken zu kommunizieren. Sie ermöglicht Ihnen, Daten zu lesen, zu schreiben, zu aktualisieren und zu löschen. Hier ist ein Beispiel für eine einfache SQL-Abfrage:

SELECT * FROM users WHERE age > 18;

Dieses Beispiel zeigt, wie man alle Benutzer aus der Tabelle 'users' abruft, die älter als 18 Jahre sind.

Wer sich mit Datenbanken oder SQL überhaupt nicht auskennt sollte vielleicht mal hier reinschauen:

SQL-Grundlagen-Tutorial

Struktur der Rätseldatenbank

Für das Escape-Room-Projekt wird eine Datenbanktabelle verwendet, die folgendermaßen aufgebaut ist:

Typen erklärt: INT steht für einen ganzzahligen Wert. VARCHAR(255) bedeutet eine Zeichenkette variabler Länge, die maximal 255 Zeichen enthalten kann.

Integration der Datenbank in Flask-Anwendungen

1. Vorbereitung und Überprüfung der bestehenden Anwendung

Überprüfen Sie, ob Ihre Flask-Anwendung korrekt funktioniert, indem Sie sie starten und alle bestehenden Funktionen testen.

source venv/bin/activate
python3 app.py

Danach die Anwendung wieder beenden

2. Einführung in die Datenbankstruktur

Die Datenbanktabelle puzzles ist so strukturiert, dass sie die folgenden Felder umfasst:

• room_id: Eindeutige ID für jeden Raum (Integer, AUTO_INCREMENT)
• puzzle_question: Die Frage oder das Rätsel des Raums (VARCHAR(255))
• puzzle_answer: Die Lösung des Rätsels (VARCHAR(255))
• next_room_id: ID des nächsten Raums, der nach Lösung des Rätsels aufgerufen wird (Integer)

3. Benutzerdaten für die Datenbankverbindung

Ihr Benutzername für die Datenbank entspricht Ihrem Tandemnamen (z.B. isa1), und das Passwort wird Ihnen von Herrn Müller bereitgestellt.

4. Installieren des MySQL-Connectors

Der MySQL-Connector ermöglicht es Ihrer Flask-Anwendung, Operationen auf der MariaDB-Datenbank auszuführen. Installieren Sie diesen in Ihrer virtuellen Umgebung:

source venv/bin/activate
pip install mysql-connector-python

5. Erstellen und Testen der Verbindungsdatei (testdb.py)

Testen Sie die Verbindung zur Datenbank durch Erstellung einer Datei namens testdb.py, die versucht, sich zu verbinden und Daten abzurufen. Ersetzen Sie username und password durch Ihre tatsächlichen Zugangsdaten.

from flask import Flask, jsonify
import mysql.connector
from mysql.connector import Error

app = Flask(__name__)

@app.route('/test_db')
def test_db():
    try:
        connection = mysql.connector.connect(
            host='localhost',
            database='escaperoom',
            user='username',  # Ersetzen durch Ihren Benutzernamen
            password='password'  # Ersetzen durch Ihr Passwort
        )
        cursor = connection.cursor()
        cursor.execute("SELECT * FROM puzzles;")
        results = cursor.fetchall()
        return jsonify(results)
    except Error as e:
        return str(e)
    finally:
        if connection.is_connected():
            cursor.close()
            connection.close()

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8001, debug=True)

6. Starten der Flask-Anwendung

Um Ihre Flask-Anwendung zu starten, führen Sie die Datei testdb.py aus Ihrem Terminal heraus aus:

python3 testdb.py

Nachdem Sie das Skript gestartet haben, läuft Ihre Flask-Anwendung und hört auf Port 8001 (oder einem anderen Port, je nach Ihrer Konfiguration). Sie können nun Ihre Anwendung im Webbrowser testen.

7. Zugriff im Browser

Öffnen Sie einen Webbrowser und navigieren Sie zur folgenden URL:

http://edumake.de:8001/test_db

Wenn die Anwendung korrekt funktioniert, wird Ihnen eine JSON-Antwort mit den Daten aus Ihrer Datenbanktabelle puzzles angezeigt. Diese Antwort kann leer sein, wenn keine Daten in der Tabelle vorhanden sind, oder sie enthält die Datensätze, die Sie eingefügt haben.

8. Beenden der Anwendung

Um die Flask-Anwendung zu beenden, gehen Sie zurück zu Ihrem Terminal. Sie können die Ausführung jederzeit stoppen, indem Sie die folgende Tastenkombination verwenden:

CTRL + C

Dies sendet ein Signal an Ihr Terminal, um den laufenden Prozess zu unterbrechen und die Flask-Anwendung zu beenden.

Integration der Datenbank in Flask-Anwendungen

Einleitung

Bevor Sie mit der Datenbankintegration beginnen, sollten Sie überlegen, ob die bestehende Rätsellogik für die Migration geeignet ist. Komplexe Logiken wie Reihenfolgen oder abhängige Entscheidungen lassen sich möglicherweise nicht direkt in einer einfachen Tabellenstruktur darstellen. In solchen Fällen könnte es sinnvoller sein, einen neuen, einfacheren Escape Room zu erstellen, der speziell für das Testen der Datenbankintegration konzipiert ist. Dieser Ansatz hilft, die Konzepte klar zu vermitteln, ohne durch bestehende Komplexitäten abgelenkt zu werden.

Jedes Rätsel ist individuell, und die Anpassung der Flask-App erfordert sorgfältige Überlegungen zum Routing und zur Logik. Wir empfehlen auch, Ihren Code mit generativen KI-Systemen zu überprüfen, um die Qualität und Sicherheit zu gewährleisten.

Migration der Rätseldaten in die Datenbank

Um Ihre existierenden Rätseldaten in die Datenbanktabelle puzzles zu übertragen, verwenden Sie PHPMyAdmin, erreichbar unter phpmyadmin.edumake.de.

Automatische Generierung der room_id

In der Datenbanktabelle puzzles wird die room_id automatisch als Primärschlüssel mit der Eigenschaft AUTO_INCREMENT erstellt. Das bedeutet, dass Sie diese ID beim Einfügen neuer Rätsel nicht manuell angeben müssen; sie wird automatisch generiert und hochgezählt.

Anpassung der Flask-Anwendung zur Nutzung der Datenbank

Ändern Sie Ihren Flask-Code, um die Rätseldaten aus der Datenbank zu beziehen, anstatt sie direkt im Code zu speichern. Dies erhöht die Flexibilität und Skalierbarkeit Ihrer Anwendung.

from flask import Flask, request, jsonify, redirect, render_template
import mysql.connector

app = Flask(__name__)

def get_db_connection():
    return mysql.connector.connect(
        host='localhost',
        database='escaperoom',
        user='username',
        password='password'
    )

@app.route('/puzzle/')
def get_puzzle(room_id):
    conn = get_db_connection()
    cursor = conn.cursor()
    cursor.execute('SELECT question FROM puzzles WHERE room_id = %s', (room_id,))
    puzzle = cursor.fetchone()
    cursor.close()
    conn.close()

    if puzzle:
        return render_template('puzzle.html', question=puzzle[0], room_id=room_id)
    else:
        return 'Rätsel nicht gefunden', 404

@app.route('/submit_answer/', methods=['POST'])
def check_answer(room_id):
    user_answer = request.form.get('answer', '').strip()

    conn = get_db_connection()
    cursor = conn.cursor()
    cursor.execute('SELECT answer, next_room_id FROM puzzles WHERE room_id = %s', (room_id,))
    puzzle = cursor.fetchone()
    cursor.close()
    conn.close()

    if puzzle and user_answer.lower() == puzzle[0].lower():
        return redirect(f'/puzzle/{puzzle[1]}')  # Weiterleitung zum nächsten Raum
    else:
        error_message = 'Falsche Antwort, versuchen Sie es erneut!'
        return render_template('puzzle.html', error=error_message, room_id=room_id)

# App starten
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8001, debug=True)

Testen und Validieren der neuen Anwendungskonfiguration

Führen Sie Tests durch, um sicherzustellen, dass Ihre Flask-Anwendung korrekt mit der Datenbank interagiert und die Rätsel wie erwartet funktionieren. Testen Sie insbesondere die Benutzererfahrung bei richtigen und falschen Antworten und wie die Weiterleitung zwischen den Rätseln funktioniert.

Integration des Frontends

Die Flask-Anwendung nutzt HTML-Vorlagen (Templates), um Inhalte dynamisch an den Client zu senden. Für die Darstellung der Rätsel benötigen wir eine HTML-Datei, die als Vorlage dient. Diese Vorlage wird verwendet, um Fragen zu präsentieren und Antworten von den Benutzern zu sammeln.

Erstellen der HTML-Vorlage für Rätsel

Erstellen Sie eine HTML-Datei namens puzzle.html im Verzeichnis templates Ihrer Flask-Anwendung. Diese Datei enthält das Markup für die Darstellung der Rätsel und ein Formular für die Antwort-Eingabe.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Rätsel Raum</title>
</head>
<body>
    <h1>{{ question }}</h1>
    <form action="/submit_answer/{{ room_id }}" method="post">
        <input type="text" name="answer" required>
        <button type="submit">Antwort einreichen</button>
    </form>
    {% if error %}
        <p style="color:red;">{{ error }}</p>
    {% endif %}
</body>
</html>

Aufrufen des Rätsels im Browser

Nachdem Sie die Flask-Anwendung gestartet haben und die HTML-Vorlage erstellt wurde, ist sie über den Webbrowser erreichbar. Wenn Sie beispielsweise die Flask-Anwendung auf Port 8001 laufen lassen, können Sie das Rätsel durch Eingabe der folgenden URL aufrufen:

http://edumake.de:8001/puzzle/1

Dieser URL-Aufruf lädt die Seite für das Rätsel des ersten Raums. Der Parameter 1 in der URL entspricht der room_id des Rätsels, das Sie anzeigen möchten. Sie können die ID ändern, um andere Rätsel basierend auf ihrer ID in der Datenbank zu laden.

Das Frontend interagiert direkt mit Ihrer Flask-Anwendung, die die Logik enthält, um auf Benutzeraktionen zu reagieren, wie z.B. das Überprüfen einer eingegebenen Antwort und das Weiterleiten zu einem anderen Rätsel, basierend auf der Korrektheit der Antwort.

Erstellung eines Click-Adventure-Labyrinths

Einführung

Das Ziel ist die Entwicklung eines interaktiven Click-Adventures. Sie werden ein Labyrinth gestalten, in dem Nutzer Entscheidungen treffen, die zu verschiedenen Ausgängen führen. Bitte beachten Sie, dass die folgenden Beispiele als Ausgangspunkt dienen und für Ihr spezifisches Labyrinth individuell angepasst werden müssen.

Warum verwenden wir Datenbanken? Datenbanken ermöglichen die dynamische Speicherung und Abfrage von Entscheidungsdaten, was entscheidend für die Implementierung komplexer Logiken in Ihrem Labyrinth ist.

Aufgabe 1: Datenbanktabellen entwerfen

Entwerfen Sie eine Datenbanktabelle, die die Entscheidungspfade für Ihr Labyrinth speichert. Achten Sie darauf, dass der Tabellenname eindeutig ist und nicht mit anderen Namen in Ihrer Datenbank kollidiert.

Anleitung zum Erstellen einer Tabelle mit PHPMyAdmin

1. Zugriff auf PHPMyAdmin

Besuchen Sie die PHPMyAdmin-Oberfläche unter http://phpmyadmin.edumake.de.

2. Anmelden bei PHPMyAdmin

Melden Sie sich mit Ihrem Benutzernamen und dem von Herrn Müller erhaltenen Passwort an.

3. Auswahl der Datenbank

Wählen Sie links in der Navigation die gewünschte Datenbank aus, in der Sie die neue Tabelle erstellen möchten.

4. Erstellen einer neuen Tabelle

1. Klicken Sie auf die Schaltfläche "Neu", um eine neue Tabelle in der ausgewählten Datenbank zu erstellen.
2. Geben Sie einen Namen für die Tabelle ein, z.B. decisions.
3. Legen Sie die Anzahl der Spalten fest und klicken Sie auf "OK", um die Tabelle zu erstellen.

5. Definieren der Tabellenspalten

Geben Sie für jede Spalte den Namen ein und wählen Sie den entsprechenden Datentyp aus. Mögliche Spaltennamen wören:

• room_id: INT (integer, ganzzahliger Wert)
• current_decision: VARCHAR (variable Zeichenfolge)
• choice_1: VARCHAR
• choice_1_result: INT
• choice_2: VARCHAR
• choice_2_result: INT

6. Speichern der Tabelle

Klicken Sie auf "Speichern", um die Änderungen zu übernehmen und die Tabelle decisions in Ihrer Datenbank zu erstellen.

Aufgabe 2: Flask-Anwendung anpassen (ausführlicheres Beispiel auf der nächsten Seite!)

Passen Sie Ihre Flask-Anwendung an, um Entscheidungen aus der Datenbank abzurufen und darauf zu reagieren.

Erklärung des Routings: Das Routing in Flask steuert, wie Anfragen an Ihre Anwendung verarbeitet werden. Sie definieren Routen, die angeben, welche Funktion aufgerufen wird, wenn ein bestimmter URL-Pfad angefordert wird.

from flask import Flask, request, jsonify, render_template, redirect
import mysql.connector

app = Flask(__name__)

@app.route('/decision/')
def decision(room_id):
    conn = mysql.connector.connect(host='localhost', database='adventure', user='your_username', password='your_password')
    cursor = conn.cursor()
    cursor.execute('SELECT * FROM decisions WHERE room_id = %s', (room_id,))
    decision = cursor.fetchone()
    cursor.close()
    conn.close()
    if decision:
        return render_template('decision.html', decision=decision)
    else:
        return 'Keine Entscheidung gefunden', 404

Aufgabe 3: Frontend entwickeln (ausführlicheres Beispiel auf der nächsten Seite!)

Entwickeln Sie eine interaktive HTML-Seite, die Entscheidungen anzeigt und Benutzereingaben entgegennimmt.

Beispiel für ein HTML-Frontend: Diese Seite sollte Formulare für die Nutzereingaben enthalten und auf Benutzeraktionen reagieren können.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Entscheide dein Schicksal</title>
</head>
<body>
    <h1>{{ decision.current_decision }}</h1>
    <form action="/submit_decision/{{ decision.room_id }}" method="post">
        <button name="choice" value="1">{{ decision.choice_1 }}</button>
        <button name="choice" value="2">{{ decision.choice_2 }}</button>
    </form>
</body>
</html>

Aufgabe 4: Integration und Tests

Integrieren Sie alle Komponenten und führen Sie umfassende Tests durch, um sicherzustellen, dass das Labyrinth wie erwartet funktioniert.

Ausführliches Beispiel

Dieses Beispiel zeigt, wie die Flask-Anwendung Entscheidungen basierend auf den in der Datenbank gespeicherten Informationen verarbeitet und Nutzer basierend auf ihren Entscheidungen durch das Labyrinth leitet.

Dies ist ein Beispiel und keine fertige Lösung!

Grundlegende Struktur der Datenbanktabelle 'decisions'

Die Tabelle decisions könnte folgende Spalten haben:

• room_id: Eindeutige ID für jeden Raum (automatisch generiert).
• current_decision: Beschreibung der Entscheidungssituation.
• choice_1: Text für die erste Wahl.
• choice_1_result: ID des Raumes, zu dem diese Wahl führt.
• choice_2: Text für die zweite Wahl.
• choice_2_result: ID des Raumes, zu dem diese Wahl führt.

Beispiel für Datenbankstruktur und Inhalte des Click-Adventure-Labyrinths

Datenbanktabelle: decisions

Diese Tabelle enthält die Daten für die Entscheidungspfade im Labyrinth. Jeder Eintrag repräsentiert eine Entscheidungsstelle im Spiel.

Diese Tabelle zeigt, wie jede Wahl zu einem neuen Raum führt, der weitere Entscheidungen erfordert, wodurch ein verzweigtes Labyrinth von Pfaden entsteht. Das Design des Labyrinths sollte darauf ausgerichtet sein, ein immersives und interaktives Erlebnis zu bieten.

Flask-Routing für das Click-Adventure-Labyrinth

from flask import Flask, render_template, request, redirect, url_for
import pymysql

app = Flask(__name__)

# Verbindung zur MySQL-Datenbank herstellen
connection = pymysql.connect(host='localhost',
                             user='user',	# Benutzername
                             password='password',  # Ihr Datenbankpasswort hier
                             database='your_database',  # Name Ihrer Datenbank hier
                             cursorclass=pymysql.cursors.DictCursor)

# Beispiel: Tabelle 'decisions' in der Datenbank
def fetch_decision(room_id):
    with connection.cursor() as cursor:
        cursor.execute('SELECT * FROM decisions WHERE room_id=%s', (room_id,))
        decision = cursor.fetchone()
        return decision

@app.route('/')
def index():
    # Erste Entscheidung laden
    first_decision = fetch_decision(1)  # Lade die erste Entscheidung mit room_id 1
    return render_template('index.html', decision=first_decision)

@app.route('/decision/', methods=['POST'])
def process_decision(room_id):
    choice = request.form['choice']
    next_room_id = None
    
    with connection.cursor() as cursor:
        cursor.execute('SELECT * FROM decisions WHERE room_id=%s', (room_id,))
        current_decision = cursor.fetchone()

        if choice == 'choice_1':
            next_room_id = current_decision['choice_1_result']
        elif choice == 'choice_2':
            next_room_id = current_decision['choice_2_result']
        else:
            return 'Ungültige Wahl'

        if next_room_id is None:
            return 'Spiel beendet'  # Beispiel: Wenn keine weiteren Entscheidungen existieren
        
        next_decision = fetch_decision(next_room_id)
        return render_template('index.html', decision=next_decision)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8000, debug=True)

# Verbindung zur Datenbank schließen
connection.close()

Erklärung

1. Verbindung zur Datenbank: Stellen Sie eine Verbindung zur MySQL-Datenbank her, die Ihre Entscheidungstabelle decisions enthält.
2. fetch_decision Funktion: Diese Funktion wird verwendet, um die Entscheidung basierend auf der übergebenen room_id aus der Datenbank abzurufen.
3. Indexroute (/): Lädt die erste Entscheidung mit room_id 1 und rendert die index.html Vorlage mit dieser Entscheidung.
4. Entscheidungsroute (/decision/<int:room_id>): Diese Route verarbeitet die Benutzerwahl über ein POST-Formular. Basierend auf der gewählten Option (choice_1 oder choice_2) wird die nächste room_id aus der Datenbank abgerufen. Wenn keine weiteren Entscheidungen existieren (d.h. next_room_id ist None), könnte hier eine Endanzeige oder eine spezifische Nachricht gerendert werden.
5. Flask Templates: Verwenden Sie Flask Templates (render_template) für die Darstellung der Entscheidungen in der HTML-Datei (index.html). Diese Vorlage könnte dynamisch die aktuelle Entscheidung anzeigen und ein Formular für die Benutzerwahl bereitstellen.

Dieses Beispiel demonstriert, wie Sie die Entscheidungen dynamisch verwalten können, basierend auf den Einträgen in Ihrer MySQL-Datenbanktabelle decisions. Stellen Sie sicher, dass Ihre Datenbankverbindung sicher und Ihre Abfragen gegen SQL-Injektionen geschützt sind, insbesondere wenn die Anwendung live verwendet wird.

HTML für das Frontend

Das HTML-Frontend, das die Entscheidungspfade des Labyrinths darstellt und die Benutzerinteraktion ermöglicht.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click-Adventure Labyrinth</title>
    <style>
        /* Stile für das Labyrinth hier anpassen */
    </style>
</head>
<body>
    <h1>Click-Adventure Labyrinth</h1>

    <div id="labyrinth">
        {% for decision in decisions %}
        <div id="room-{{ decision.room_id }}" class="room">
            <p>{{ decision.current_decision }}</p>
            <form action="/decision/{{ decision.room_id }}" method="post">
                <button type="submit" name="choice" value="choice_1">{{ decision.choice_1 }}</button>
                <button type="submit" name="choice" value="choice_2">{{ decision.choice_2 }}</button>
            </form>
        </div>
        {% endfor %}
    </div>

    <script>
        // JavaScript für zusätzliche Interaktivität hier hinzufügen
    </script>
</body>
</html>

Diese HTML-Vorlage zeigt, wie Entscheidungen im Labyrinth dargestellt und verarbeitet werden können. Die Entscheidungsinformationen werden dynamisch über die Flask-Anwendung eingefügt, wobei `decision['current_decision']`, `decision['choice_1']` und `decision['choice_2']` die jeweiligen Inhalte aus der Datenbank-Tabelle darstellen.

Erklärung

• Flask-App Setup: Die Flask-Anwendung definiert Routen für den Index (Startpunkt) und für Entscheidungen basierend auf der aktuellen Raum-ID.
• Datenmodell (decisions): Eine Liste von Entscheidungen, die normalerweise aus einer Datenbank geladen würden, enthält Informationen zu aktuellen Entscheidungen und den Ergebnissen der jeweiligen Optionen.
• Indexroute (/): Rendert die HTML-Vorlage mit der ersten Entscheidung.
• Entscheidungsroute (/decision/<room_id>): Verarbeitet die Benutzerwahl (über ein HTML-Formular) und leitet den Benutzer entsprechend zur nächsten Entscheidung weiter.
• HTML-Vorlage decision.html: Zeigt die aktuelle Entscheidung an und enthält ein Formular, das die Benutzerwahl an die Flask-Anwendung sendet.

Dieses Beispiel veranschaulicht, wie Flask für die Steuerung eines Click-Adventure-Labyrinths verwendet werden kann, indem es dynamische Entscheidungspfade und die Interaktion mit dem Benutzer über HTML-Formulare ermöglicht.