Hello, Flask

Aufgabe

So funktioniert eine Flask-App

1. Route: @app.route("/") verbindet einen URL-Pfad mit einer Python-Funktion. Fragt der Browser / an, ruft Flask diese Funktion auf.
2. Antwort: Was die Funktion zurückgibt, schickt Flask an den Browser – einen Text oder eine ganze HTML-Seite.
3. Templates: HTML-Dateien liegen im Ordner templates. render_template("index.html", color=color) füllt eine Vorlage aus und gibt das fertige HTML zurück; {{ color }} in der Vorlage wird durch den übergebenen Wert ersetzt.
4. Layout: Eine Vorlage kann mit {% extends "layout.html" %} eine andere erweitern: Sie übernimmt deren HTML und füllt nur die Blöcke ({% block body %}…{% endblock %}).
5. Formular: Beim Absenden schickt der Browser für jedes Feld ein Paar aus name und Wert an die Adresse aus action, mit der Methode aus method. In Flask liest request.form.get("color") den Wert des Feldes color.
6. Methoden: Eine Route nimmt zunächst nur GET-Anfragen an. POST muss man mit methods=["GET", "POST"] erlauben, sonst antwortet Flask mit 405 Method Not Allowed. Welche Methode gerade ankam, steht in request.method.

Beispiel – die fertige App aus Schritt 4:

Aufgabenmaterial

$

wget https://dev.inf.zone/download/exercises/13/helloflask.zip

unzip helloflask.zip

rm helloflask.zip

cd helloflask

helloflask/ $

Spezifikation

Arbeiten Sie die vier Schritte der Reihe nach ab und starten Sie die App nach jedem Schritt im Ordner helloflask mit

flask run

Flask gibt einen Link aus, den Sie anklicken können – ähnlich wie bei http-server. Nach jeder Änderung beenden Sie den Server mit Strg+C und starten ihn neu.

Schritt 1: Hello, World!

Legen Sie app.py mit diesem Inhalt an:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Hello, World!"

• app = Flask(__name__) erzeugt die App; __name__ ist der Name der aktuellen Python-Datei, damit Flask später Ordner wie templates findet.
• @app.route("/") ist ein Dekorator (Regel 1): Er meldet die Funktion darunter für den Pfad / an. Hieße die Funktion homepage statt index, würde Flask eben homepage aufrufen.
• index gibt den Text zurück, den der Browser anzeigt (Regel 2).

Geben Sie danach statt des Textes <h1>Hello, World!</h1> zurück. Was ändert sich im Browser?

Schritt 2: Templates

HTML gehört nicht in den Python-Code, sondern in eigene Dateien. Legen Sie mit mkdir templates den Ordner templates an; alle HTML-Dateien dieser Aufgabe kommen dort hinein.

templates/layout.html enthält das Gerüst, das alle Seiten gemeinsam haben, und einen Block body, den jede Seite selbst füllt (Regel 4). Ein Layout kann beliebig viele Blöcke mit verschiedenen Namen haben.

<!DOCTYPE html>

<html lang="de">
    <head>
        <title>Hallo, Flask</title>
    </head>
    <body>
        <h1>Hallo, Flask</h1>
        {% block body %}{% endblock %}
    </body>
</html>

templates/index.html erweitert das Layout:

{% extends "layout.html" %}

{% block body %}
    <p>Als Nächstes fügen wir hier ein Formular ein und erhalten eine POST-Aktion!</p>
{% endblock %}

Ändern Sie app.py so, dass index die Vorlage rendert, statt Text zurückzugeben. render_template setzt index.html und layout.html zu einer Seite zusammen; request brauchen Sie erst in Schritt 4.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

Schritt 3: Formular

Ersetzen Sie den Inhalt von templates/index.html durch ein Formular:

{% extends "layout.html" %}

{% block body %}
    <form action="/" method="post">
        Was ist Ihre Lieblingsfarbe?
        <select name="color">
            <option value="red">Harvard Crimson</option>
            <option value="blue">Yale Blue</option>
        </select>
        <button type="submit">Absenden</button>
    </form>
{% endblock %}

• Die Auswahlliste heißt color (Attribut name); unter diesem Namen liest app.py sie später aus.
• Gesendet wird der value der gewählten Option, also red oder blue – nicht der angezeigte Text „Harvard Crimson“.

Senden Sie das Formular ab. Flask antwortet mit „Method Not Allowed“ (Regel 6): Die Route / nimmt noch keine POST-Anfragen an.

Schritt 4: POST

Erlauben Sie POST und unterscheiden Sie in app.py die beiden Methoden:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("index.html")
    else:
        print("Formular wurde abgesendet!")
        color = request.form.get("color")
        return render_template("color.html", color=color)

• GET: wie bisher das Formular.
• POST: print schreibt „Formular wurde abgesendet!“ ins Terminal, in dem flask run läuft – eine Hilfe beim Debuggen, die Sie später wieder entfernen. Dann liest request.form.get("color") den gesendeten Wert und übergibt ihn unter demselben Namen an color.html.

Legen Sie templates/color.html an:

{% extends "layout.html" %}

{% block body %}
    <p style="color: {{ color }}">Ihre Lieblingsfarbe ist {{ color }}.</p>
{% endblock %}

{{ color }} darf überall im HTML stehen: hier einmal im Satz und einmal als Wert der CSS-Eigenschaft color.

Zum Schluss: Bisher verlässt sich app.py darauf, dass nur red oder blue ankommt. Aber jeder kann eine POST-Anfrage mit beliebigem Wert schicken, auch ohne Ihr Formular. Ergänzen Sie eine Prüfung, die nur gültige Farben durchlässt.

Hilfestellung

Klicken Sie auf die folgenden Tipps, um einige Ratschläge zu erhalten. Versuchen Sie aber zunächst, selbst so weit wie möglich zu kommen.

Testen

Prüfen Sie im Browser:

• Schritt 1: / zeigt „Hello, World!“.
• Schritt 2: / zeigt die Überschrift „Hallo, Flask“ und darunter den Absatz aus index.html.
• Schritt 3: / zeigt das Formular; Absenden führt zu „Method Not Allowed“.
• Schritt 4: Nach dem Absenden erscheint „Ihre Lieblingsfarbe ist red.“ in Rot bzw. „… blue.“ in Blau, und im Terminal steht „Formular wurde abgesendet!“.

Korrektheit

Führen Sie in Ihrem Terminal den folgenden Befehl aus, um die Korrektheit Ihrer Arbeit zu überprüfen:

check50 -l inf-zone/exercises/2026/helloflask

Abgeben

Geben Sie im Ordner helloflask ab:

inf upload helloflask

Danach sehen Sie, welche Tests Ihr Programm besteht und ob die Übung für die Bonuspunkte zählt. Wie Sie inf installieren und sich anmelden, steht unter Abgeben mit inf.

Zum Weiterlesen: Flask, Jinja und Dekoratoren

Für die Lösung der Aufgabe nicht nötig.

Flask ist ein Microframework: Es bringt nur das Nötigste mit (Routen, Anfragen, Antworten, Templates), alles Weitere ergänzt man bei Bedarf. Die Template-Sprache Jinja stammt vom selben Projekt.

Flask ist eine Klasse (siehe Short zum Objektorientierten Programmieren), gewissermaßen eine Vorlage für Web-Apps; app = Flask(__name__) erzeugt daraus eine konkrete App.

Ein Dekorator wie @app.route("/") nimmt die Funktion darunter und erweitert sie um eigene Funktionalität – hier: Flask merkt sich, bei welchem Pfad die Funktion aufgerufen werden soll. Mehr dazu in dieser Einführung in Dekoratoren und im Short zum Objektorientierten Programmieren (auch @property ist ein Dekorator).

Mehr über HTML-Formulare finden Sie bei W3Schools.