Hinweis: Installation in Thonny

• Menupunkt Tools > Manage Packages...
• Suche nach «Bottle»
• Install klicken

Was ist Bottle?

Bottle ist ein «Mikroframework» zum Erstellen einer Webseite oder einer Webapp. Bottle ist in Python geschrieben und bietet Routing, Templates und einen einfachen Webserver zum Testen an.

Erste Bottle-App

from bottle import route, run

@route('/')
def index():
    return 'Hello World!'

run(reloader=True, host='localhost', port=8080)

Zeile 1

wir importieren route und run aus Bottle

Zeile 3

der route-Decorator bestimmt bei welcher URL die Funktion aufgerufen wird

/ sagt, dass diese die Startseite ist

Zeile 4:

wird die index-Funktion aufgerufen liefert diese Text zurück

Zeile 7

Wir starten den Webserver lokal auf Port 8080

Dabei aktivieren wir den reloader, damit wir bei Änderungen nicht immer den Server neu starten müssen!

Jetzt können wir das Programm und somit den Webserver starten und auf unsere Webseite zugreifen:

http://localhost:8080/

Routing

Im Beispiel haben wir eine Route für die Startseite eingebaut. Natürlich könnte unsere App auch Unterseiten haben, z.B. eine Seite mit Infos zur App und deren Erzeuger oder Detail-Seiten zu den Filmen/Serien.

ohne Variablen

Unter http://localhost:8080/about soll eine allgemeine Informations-Seite angezeigt werden. Dazu hängen wir einfach folgenden Code ans Beispiel an:

@app.route("/about")
def about():
    page = "Wir haben diese App im EF-Informatik erstellt!"
    return page

http://localhost:8080/about

mit Variablen im Pfad

Da man nicht für jeden Film/Serie eine eigene Route erstellen kann, gibt es dynamische Routen. In der Datenbank hat jeder Eintrag eine eindeutige Nummer, der Primärschlüssel, in unserem Beispiel das Feld id. Wir können also auf einer Übersichtsseite Links zu Detail-Seiten generieren. Die Links sehen z.B. so aus: http://localhost:8080/film/597

597 ist die id von «Titanic». Wenn wir den Link aufrufen, sollten also Details zu «Titanic» erscheinen. Bottle muss also irgendwie zu dieser id kommen und kann dann damit in der Datenbank die entsprechenden Informationen holen. Wir erstellen eine Route wie folgt:

@app.route("/serie/<id>")
def film(id):
    return "Du hast Details zur Serie mit der id " + id + " verlangt"

http://localhost:8080/film/597

Mit /film/<id> legen wir eine Route fest, deren letzter Teil variabel ist. Mit <id> sagen wir Bottle, dass wir den letzten Teil der URL als Argument id in der Funktion verwenden möchten.

mit Variablen aus dem Querystring

Wenn Werte aus einem Formular abgeschickt werden, so sind diese im sogenannten Querystring zu finden. Dieser wir mit einem Fragezeichen an die URL angehängt.

Ein einfaches Suchformular in HTML könnte wie folgt aussehen:

<form action="/search">
   <input type="text" placeholder="seriennamen" name="q">
   <input type="submit" value="Suchen">
</form>

Das Attribut action des form-Elementes sagt, welche URL aufgerufen werden soll. Der Inhalt des Textfeldes wird im Querystring mitgeliefert, gekennzeichnet durch das name-Attribut. Geben wir im Textfeld «Titanic» ein und drücken den Suchen-Button, so wird die URL http://localhost:8080/search?q=Titanic aufgerufen.

Um den Querystring in Flask auszulesen, ergänzen wir zuerst den Import in der ersten Zeile:

from bottle import request, route, run

Anschliessend fügen wir eine neue Route hinzu. In der Funktion search decodieren wir den Query-String den wir im globalen request-Objekt auslesen können. Wir erhalten so ein Dictionary und können die einzelnen Variablen (wir brauchen nur q) daraus auslesen.

@route("/search")
def search():
    query = request.query.decode()
    return "Du willst nach " + query.q + " suchen?"

localhost:8080/search?q=Titanic

Statische Dateien liefern

Bilder, CSS-Dateien und andere «statische Dateien» (werden nicht dynamisch mit Inhalt aus der DB erzeugt) verstaut man am Besten in einem speziellen Unterordner, z.B. im Ordner static. Dann kann man mit einer Route und einer Funktion sämtliche Dateien daraus liefern.

from bottle import request, route, run, static_file
...
@route('/static/<filename>')
def static(filename):
    return static_file(filename, root="./static")

Zeile 1

wir importieren static_file

Zeile 3

wir definieren die Route mit dem Platzhalter für die Datei

Zeile 4

wir definieren die Funktion welche die statische Datei zurückliefert

Zeile 5

wir verwenden die bottle-Funktion static_file, um die gewünschte Datei zurückzuliefern

Verzeichnisstruktur

Eine Bottle-Webseite besteht aus dem Python-Skript im Projektordner. Die Vorlagen (Templates) werden zwingend im Unterverzeichnis views abgespeichert. Statische Daten, also z.B. Bilder und CSS-Dateien können wie oben beschrieben im Unterordner static abgelegt werden.

 projekt
 ├─ views
 │   ├─ index.html
 │   └─ about.html
 ├─ static
 │   ├─ style.css
 │   └─ logo.png
 └─ main.py

---

Offizielle Dokumentation

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