Eine Webseite mit Python 🐍🐍

Bisher liefen deine Programme auf deinem Rechner, und nur du hast etwas davon gesehen. Eine Webseite dreht das um: Das Programm läuft auf einem Server, und wer die Adresse aufruft, bekommt eine Antwort — auf jedem Gerät, ohne etwas zu installieren.

Das Bemerkenswerte daran ist, wie wenig dafür nötig ist.

Du baust hier eine einzige Seite, und zwar in drei Schritten: Erst zeigt sie ein Bild, dann kann man es liken, und zum Schluss behält sie die Likes auch über einen Neustart hinweg. Jeder Schritt ist für sich klein — zusammen sind sie alles, was eine Webanwendung ausmacht.

Vorher: die Aufteilung

Wenn Daten, Aussehen und Ablauf in einem Programm durcheinandergehen, wird jede Änderung zur Suche. Deshalb teilt man Webprogramme fast immer in drei Teile.

Model-View-Controller

Model — die Daten und alles, was mit ihnen erlaubt ist. Meist eine Datenbank.

View — die Darstellung. Bei einer Webseite eine HTML-Vorlage mit Platzhaltern.

Controller — die Steuerung. Nimmt eine Anfrage entgegen, holt beim Model die passenden Daten und übergibt sie an die View.

Die drei kennen voneinander nur, was sie voneinander brauchen. Deshalb kannst du das Aussehen ändern, ohne die Daten anzufassen — und umgekehrt.

Das Modell entwirfst du am besten zuerst auf Papier, als Entity-Relationship-Modell, bevor du eine Zeile schreibst. Wie das geht, steht im Kapitel Datenmanagement.

Schritt 1: Anzeigen

Als Webserver nimmst du Bottle — ein Modul, das aus einer einzigen Datei besteht und genau das kann, was du jetzt brauchst.

pip install bottle

python

from bottle import route, run, template, static_file

@route("/")
def index():
    return template("index")

@route("/static/<dateiname>")
def statisch(dateiname):
    return static_file(dateiname, root = "./static/")

run(host = "localhost", port = 8080)

Das ist der Controller, und er ist zehn Zeilen lang.

@route("/") darüber ist ein Decorator: Er verändert, wie eine Funktion benutzt wird. Hier sagt er „ruf diese Funktion auf, wenn jemand diese Adresse anfragt" — aufgerufen wird sie also nicht von dir, sondern von Bottle.

Die zweite Route hat einen Platzhalter: /static/<dateiname>. Fragt der Browser /static/welpe.webp an, landet „welpe.webp" im Parameter dateiname, und static_file schickt genau diese Datei aus dem Ordner static zurück.

Diese zweite Route ist keine Nebensache. Ein Bottle-Programm antwortet nur auf Adressen, für die es eine Route gibt — ohne sie bekommt der Browser für jedes Bild und jede CSS-Datei ein „404 Not Found", und die Seite bleibt leer. Der Ordner static ist die Ausnahme, die du ausdrücklich erlaubst.

Test

Starte das Programm und öffne http://localhost:8080 im Browser. Solange es keine Vorlage gibt, gibt es eine Fehlermeldung — die kommt im nächsten Schritt.

Beenden kannst du den Server im Editor mit Stopp.

Die Vorlage

Eine View ist eine HTML-Datei mit ein paar Python-Stellen darin. Bei Bottle liegt sie in views/index.tpl:

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welpe des Tages</title>
    <link rel="stylesheet" href="/static/pico.classless.min.css">
  </head>
  <body>
    <main>
      <h1>Welpe des Tages</h1>

      <img src="/static/welpe.webp" alt="Ein schlafender Welpe">
    </main>
  </body>
</html>

Beide Adressen im HTML — das Bild und die CSS-Datei — beginnen mit /static/. Sie laufen also über die zweite Route von eben.

Zwei Schreibweisen musst du gleich unterscheiden: Zeilen mit % davor sind Python — Entscheidungen und Schleifen. {{...}} setzt einen Wert an dieser Stelle ein. Noch kommt beides nicht vor, weil es nichts einzusetzen gibt. Das ändert sich im nächsten Schritt.

Mehr braucht eine Vorlagensprache nicht. Und mehr sollte auch nicht drinstehen: Gerechnet wird im Controller, die View setzt nur ein.

Die Seite bauen

Leg die Ordner views und static an, kopier das Bild hinein und bring das Beispiel zum Laufen.
Lad dir Pico CSS herunter und leg pico.classless.min.css ebenfalls nach static.
Benenn das Bild um und schau dir an, was der Browser dann anzeigt.

Schritt 2: Verändern

Anschauen kann man die Seite jetzt. Interessant wird sie erst, wenn man etwas tun kann — also ein Knopf, der den Welpen liked, und eine Zahl, die dabei hochgeht.

Dafür muss sich der Server etwas merken. Drei Möglichkeiten gäbe es: eine Variable im Server, ein Wert in der Adresszeile, oder eine Session. Wir nehmen die Variable im Server, weil sie ohne jedes zusätzliche Modul auskommt und weil ein Like-Zähler ohnehin für alle Besucher:innen derselbe sein soll — in der Adresszeile oder in einer Session würde jede Person ihren eigenen Zähler bekommen.

python

from bottle import route, run, template, static_file, redirect

likes = 0

@route("/")
def index():
    return template("index", likes = likes)

@route("/like")
def like():
    global likes
    likes = likes + 1
    redirect("/")

@route("/static/<dateiname>")
def statisch(dateiname):
    return static_file(dateiname, root = "./static/")

run(host = "localhost", port = 8080)

Drei Stellen sind neu.

template("index", likes = likes). Alles, was du hier zusätzlich angibst, steht in der Vorlage als Variable bereit. So — und nur so — kommen Daten aus dem Controller in die View.

global likes. Ohne diese Zeile würde Python beim likes = likes + 1 eine neue Variable innerhalb der Funktion anlegen, und draußen bliebe der Zähler auf null. Denselben Grund gab es schon beim Spiel.

redirect("/"). Nach dem Zählen schickt der Server den Browser zurück auf die Startseite. Sonst bliebe /like in der Adresszeile stehen, und ein Neuladen würde noch einmal zählen.

In die Vorlage kommt unter das Bild:

html

<p>{{likes}} mal geliked</p>

<a href="/like" role="button">❤️ Gefällt mir</a>

Der Knopf ist in Wahrheit ein Link. Er führt auf /like, dort wird gezählt, und von dort geht es sofort zurück. role="button" sorgt dafür, dass Pico CSS ihn wie einen Knopf aussehen lässt.

Beim Neustart ist alles weg

Klick ein paar Likes zusammen, stopp den Server und starte ihn neu. Der Zähler steht wieder auf null.

Das ist kein Fehler, sondern die Natur einer Variablen: Sie lebt im Arbeitsspeicher, und der gehört zum laufenden Programm. Endet das Programm, endet die Variable. Genauso verschwindet der Zähler, wenn du am Code etwas änderst und der Server dabei neu startet.

Für alles, was länger halten soll als ein Programmlauf, brauchst du einen Ort außerhalb des Programms. Das ist der ganze Sinn einer Datenbank.

Schritt 3: Mit Datenbank

Bis hier hatte deine Seite kein Model. Jetzt bekommt sie eines — und der Zähler überlebt den Neustart.

SQLite ist dafür ideal, weil eine Datenbank aus einer einzigen Datei besteht und das Modul sqlite3 in Python schon eingebaut ist. Statt einer Zahl speicherst du jedes einzelne Like als eigene Zeile mit seinem Zeitpunkt. Zählen kann die Datenbank selbst — und du weißt hinterher außerdem, wann geliked wurde.

python

from bottle import route, run, template, static_file, redirect
import sqlite3
import datetime

db = sqlite3.connect("likes.db")
db.execute("CREATE TABLE IF NOT EXISTS likes (id INTEGER PRIMARY KEY, zeitpunkt TEXT)")
db.commit()

@route("/")
def index():
    anzahl = db.execute("SELECT COUNT(*) FROM likes").fetchone()[0]
    return template("index", likes = anzahl)

@route("/like")
def like():
    now = datetime.datetime.now().isoformat()
    db.execute("INSERT INTO likes (zeitpunkt) VALUES (?)", (now,))
    db.commit()
    redirect("/")

@route("/static/<dateiname>")
def statisch(dateiname):
    return static_file(dateiname, root = "./static/")

run(host = "localhost", port = 8080)

Die Vorlage bleibt Zeile für Zeile dieselbe. Sie bekommt weiterhin eine Zahl namens likes und setzt sie ein — woher die kommt, geht sie nichts an. Genau dafür ist die Aufteilung in Model, View und Controller da.

IF NOT EXISTS heißt: Die Tabelle entsteht beim allerersten Start und wird danach in Ruhe gelassen. commit schreibt eine Änderung endgültig in die Datei; ohne diese Zeile passiert nichts Dauerhaftes. Und fetchone()[0] holt aus der Antwort die erste Zeile und daraus den ersten Wert — also die gezählte Anzahl.

Das Fragezeichen in der INSERT-Zeile ist kein Schönheitsfehler, sondern wichtig: Werte gehören nie per Textverkettung in eine Abfrage. Sonst kann jemand über ein Eingabefeld eigene SQL-Befehle einschleusen. Warum das so gefährlich ist, steht im Datenmanagement-Kapitel.

Die fertige Seite herunterladen

Hier ist der ganze Ordner, so wie er am Ende von Schritt 3 aussieht — mit Programm, Vorlage, Bild, Pico CSS und einer Kurzanleitung.

welpe-des-tages.zip

Läuft bei dir schon etwas anderes auf Port 8080 — XAMPP und phpMyAdmin tun das gern —, zeigt der Browser deren Seite statt deiner. Ändere dann in der letzten Zeile den Port, etwa auf 8081, und ruf http://localhost:8081 auf.

Den Zähler ausbauen

Like den Welpen ein paar Mal, stopp den Server und starte ihn neu. Diesmal bleibt die Zahl.
Zeig zusätzlich an, wann das letzte Like war — SELECT zeitpunkt FROM likes ORDER BY id DESC.
Bau einen zweiten Knopf, der das jüngste Like wieder zurücknimmt.
Zeig mehrere Bilder, jedes mit eigenem Zähler. Dafür braucht die Tabelle eine Spalte mehr.

Das Aussehen

Mit CSS kann man beliebig viel Zeit verlieren. Damit das nicht passiert, nimm ein fertiges Grundgerüst — hier in steigender Schwierigkeit:

	Was es tut
Pico CSS	Sieht sofort gut aus, ohne dass du eine einzige Klasse schreibst	🐍
Bootstrap	Fertige Bausteine für Spalten, Knöpfe, Formulare	🐍🐍
Tailwind	Volle Kontrolle, dafür steht das ganze Aussehen im HTML	🐍🐍🐍

Denk beim Entwerfen zuerst an das Smartphone: alle wichtigen Elemente untereinander, in sinnvoller Reihenfolge. Auf einem breiten Bildschirm daraus etwas zu machen ist leicht. Umgekehrt ist es Arbeit.

Deine eigene Seite

Der Welpe war ein Vorwand. Was du jetzt kannst — anzeigen, verändern, behalten — reicht für alles, was sich etwas merken soll: eine Umfrage, ein Ausleihbuch, die Buchempfehlungen der Klasse, eine Sammlung von Lieblingsorten.

Zeichne zuerst das ERM auf Papier. Erst danach fang an zu programmieren.

Weitere Ideen

Projekt
Umfrage mit Auswertung als Diagramm	🐍🐍
Ausleihliste für die Fachschaft	🐍🐍
Deine beste.schule-Noten als eigene Seite darstellen	🐍🐍🐍
Interaktive Seite ohne Neuladen, mit htmx	🐍🐍🐍

Die vollständige Anleitung zu Bottle:

https://bottlepy.org/docs/dev/

Eine Webseite mit Python 🐍🐍 ​

Vorher: die Aufteilung ​

Schritt 1: Anzeigen ​

Die Vorlage ​

Schritt 2: Verändern ​

Schritt 3: Mit Datenbank ​

Das Aussehen ​

Weitere Ideen ​

Eine Webseite mit Python 🐍🐍

Vorher: die Aufteilung

Schritt 1: Anzeigen

Die Vorlage

Schritt 2: Verändern

Schritt 3: Mit Datenbank

Das Aussehen

Weitere Ideen