Tabellen und Bildergalerien

Flask läuft mit Python. Das ist insofern praktisch, als dass alles, was Python bietet, Teil von Flask werden kann. An einem einfachen und praxisnahen Beispiel soll dies gezeigt werden.

Tabellen aus einer zweidimensionalen Liste erstellen

Der Datentyp list ist ja schon aus dem vergangenen Semester bekannt. Mit ihm kann in einer Variablen eine Liste von Werten gespeichert werden.

blumen = ["Rosen","Tulpen", "Lilien"]

Die interaktive Kommandozeile von Python

Die Kommandozeile des Raspberrys ist ja schon bekannt, auf ihr können wir Befehle wie ls, mkdir und rm ausführen. Was passiert aber, wenn wir den Befehl python ausführen?

pi@raspberrypi:~ $ python3
Python 3.4.2 (default, Jun 22 2015, 17:58:13)
[GCC 4.8.2] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> _

Wir landen in der interaktiven Kommandozeile von Python! Die sollte man kennen, weil viele Beispiele im Netz in dieser Kommandozeile vorgeführt werden.

Der Befehl python3 hat uns in eine neue Umgebung katapultiert, in der nun die Befehle von Python gelten.

Schleifen in Python

Wir erinnern uns: Mit einer Schleife können die Werte einer Liste ausgegeben werden. Die folgenden Zeilen geben wir in der interaktiven Kommandozeile von Python ein:

>>> blumen = ["Rosen","Tulpen", "Lilien"]
>>> for b in blumen:
...     print(b)
...
Rosen
Tulpen
Lilien
>>>

Auch hier ist an die Einrückung zu denken! Die Eingabe der Schleife schließen wir mit der Eingabetaste ab, dann folgt die Ausgabe.

Verschachtelte Listen

Es sind auch verschachtelte Listen möglich. Dabei handelt es sich um eine wichtiges Konstrukt, da auf diese Weise Tabellenstrukturen abgebildet werden können.

>>> tabelle = [["Rosen", "rot", 1.99], ["Nelken", "gelb", 0.89],["Osterglocken", "braun-gelb", 0.45]]

Beachten Sie die äußeren Klammern, die die äußere Liste definieren. In dieser Liste sind die einzelnen Elemente wiederum Listen, in denen Strings und Floats stecken.

Ausgabe von verschachtelten Listen mit Schleifen

Um nun diese Liste mit Schleifen auszugeben, ist eine Verschachtelung notwendig.

>>> for zeile in tabelle:
...     for zelle in zeile:
...             print(zelle)
...
Rosen
rot
1.99
Nelken
gelb
0.89
Osterglocken
braun-gelb
0.45
>>>

Dieses Wissen werden wir nun auf den Secondhandblumenladen und Flask übertragen.

Datenverarbeitung für das Template in Flask

Das obige Beispiel ist insofern praxisnah, als dass Daten in Form verschachtelter Listen häufig das Ergebnis einer Datenbankabfrage sind. Und Daten aus Datenbanktabellen werden oftmals auch in HTML-Tabellen dargestellt. Wir werden keine Datenbank verwenden, sondern mit einem verschachtelten Listenkonstrukt so tun als ob.

Bevor wir fortfahren, werfen wir noch einen kurzen Blick in die Datei angebot.html, die eine statische HTML-Tabelle enthält.

<!-- angebot.html -->
<h2>Angebot</h2>
<table id="angebot">
    <tr class="even">
        <th class="first-column">Name</th>
        <th class="second-column">Farbe</th>
        <th class="third-column">Preis</th>
    </tr>
    <tr class="odd">
        <td>Rosen</td>
        <td>rot</td>
        <td>€1,99</td>
    </tr>
    <tr class="even">
        <td>Nelken</td>
        <td>gelb</td>
        <td>€ 0,89</td>
    </tr>
    <tr class="odd">
        <td>Osterglocken</td>
        <td>braun-gelb</td>
        <td>€ 0,45</td>
    </tr>
    <tr class="even">
        <td>Tannenbäume</td>
        <td>grün-braun</td>
        <td>€ 9,99</td>
    </tr>
</table>

Dieses Konstrukt werden wir nun verändern. Dazu gehen wir in die app.py.

# app.py

@app.route('/angebot')
def angebot():

    tabelle = [["Rosen", "rot", 1.99], ["Nelken", "gelb", 0.89],["Osterglocken", "braun-gelb", 0.45]]

    return render_template('angebot.html', title='Angebot', tabelle=tabelle)

Die verschachtelte Liste ist von oben übernommen. Sie wird als Variable an das View übergeben und steht dort für Jinja2, die Templatesprache von Flask, zur Verfügung.

<!-- angebot.html -->

{% extends "layout.html" %}
{% block content %}
    <h2>Angebot</h2>
    <table id="angebot">
        <tr class="even">
            <th class="first-column">Name</th>
            <th class="second-column">Farbe</th>
            <th class="third-column">Preis</th>
        </tr>
        {% for zeile in tabelle %}
        <tr>
            {% for zelle in zeile %}
            <td>{{ zelle }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
{% endblock %}

Es sollte deutlich werden, dass wir im Template mit Jinja2 das gleiche tun wie zuvor auf der interaktiven Kommandozeile.

Fazit

Diese Technik hat Potenzial, denn sie hat ein Grundprinzip:

Daten, die aus unterschiedlichsten Quellen stammen können, sollen auf einer Website ausgegeben werden.

Das können sein:

• Geopositionsdaten
• Bilder für eine Bildergalerie
• Messdaten
• Tischtennisturnierergebnisse
• Preise für EM-Finalkarten
• Ergebnisse einer Umfrage

Die Darstellung dieser Daten muss nicht zwingend mit einer HTML-Tabelle erfolgen. Der Vorgang der Iteration über das Datenkonstrukt ist aber in der Regel schleifenartig, wie oben gezeigt.

Die Daten werden in der app.py beschafft, ggf. mit Python aufbereitet und anschließend an das View bzw. das Template übergeben. Dort erfolgt dann die Konstruktion des notwendigen HTMLs.

Aufgabe

Überlegen Sie, wie Sie mit einer Anzahl von Bildern, die in einem Verzeichnis Ihrer Flask-Anwendung gegeben sind, eine Bildergalerie programmieren können! Besprechen Sie Ihre Überlegungen zunächst mit anderen und setzen Sie sie dann um!