Eigene Webseite

Nutzung der Vorlage für eigene Zwecke ;-)

Git Crashkurs

Zusätzlich zum upstream updaten vom vorhergehenden “Kapitel” gibt es noch einige Ergänzungen zu git auf 21_git_nutzen.html. Diesen ist vor der Weiterarbeit sehr zu empfehlen, wenn man bei folgenden Aufforderungen auf dem Schlauch steht:

• committen und pushen
• Was git genau ist

Was ist das Ziel?

Mit Hilfe einer Vorlage sollst du deine Datenbank auf der Webseite einbinden können, so dass Änderungen angezeigt werden können.

Branch

Um die Vorlage zu erhalten, brauchst du den Branch 30-website.

Committe deine lokalen Änderungen, solltest du das noch nicht gemacht haben.

git switch '30-website'

# falls noch nicht upgedated
git fetch upstream
git merge upstream/30-website

1. Projekt starten

docker compose up --build

Es sollten keine Daten verloren gehen, wenn du die Vorlage schon einmal gestartet hast, da die Datenbank eine persistentes “Volume” hat (siehe auch 20-exkurse/23_docker.html für mehr Infos über Docker).

2. Überblick schaffen

Was ist wo?

Wir haben das pgadmin4 schon angetroffen, sowie das docker-compose.yml. Auch postgREST und die API-Übersicht (mit Swagger) ist schon vorgekommen.

Diese sind immer noch unter:

• pgadmin4 http://localhost:5000
• Swagger-UI http://localhost:8080
• postgREST http://localhost:3000
• Postgres-Datenbank auf Port 5432
• pyscript (unsere zu gestaltende Webseite) http://localhost:8000

Aufgabe 3.1: Fragen

• Was ist die Funktion vom Swagger Container?
• Wie hängen postgREST, Posgtes (DB auf Port 5432) und Swagger zusammen?
  • Kannst du ein Diagramm zeichnen, das diese Sachen beinhaltet? (muss nicht so strikt sein wie bei einem Domain Modell)

3. Datenbank Tabellen erzeugen

Falls du diese von der letzten Übung nicht mehr haben solltest, kannst du das gerne wiederholen. Oder du kopierst unser SQL.

Besser noch: Frage ChatGPT, so stellst du mindestens sicher, dass du die richtigen Fragen stellst (und kannst uns sagen, wenn die Fragestellung zu unklar war, um das in ChatGPT einzutragen).

Datenbank Tabellen Struktur in SQL

-- Erstelle den Enum für Act-Typen
CREATE TYPE acttyp AS ENUM ('Magier', 'Band', 'Komiker');

-- Areal-Tabelle
CREATE TABLE areal (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL UNIQUE
);

-- Bühne-Tabelle
CREATE TABLE bühne (
    id SERIAL PRIMARY KEY,
    areal_id INTEGER REFERENCES Areal(id),
    name VARCHAR(255) NOT NULL
);

-- Auftritt-Tabelle
CREATE TABLE auftritt (
    id SERIAL PRIMARY KEY,
    bühne_id INTEGER REFERENCES Bühne(id),
    startzeitpunkt TIMESTAMP NOT NULL,
    endzeitpunkt TIMESTAMP NOT NULL
);

-- Act-Tabelle
CREATE TABLE act (
    id SERIAL PRIMARY KEY,
    auftritt_id INTEGER REFERENCES Auftritt(id),
    name VARCHAR(255) NOT NULL,
    typ ActTyp NOT NULL
);

-- Stück-Tabelle
CREATE TABLE stück (
    id SERIAL PRIMARY KEY,
    auftritt_id INTEGER REFERENCES Auftritt(id),
    name VARCHAR(255) NOT NULL
);

Aufgabe 3.2

• Erstelle einen Testeintrag auf der Swagger-UI http://localhost:8080

Solltest du die Tabellen nicht sehen, versuche im SQL Terminal vom pgadmin4:

NOTIFY pgrst, 'reload config';

Wenn das nichts bringt, nutze Ctrl+c um docker compose abzustellen und docker compose up --build für einen neustart.

Es sollte ungefähr so aussehen:

Hilfsfragen:

• Welche Reihenfolege musst du einghalten, um erfolgreich zu sein?
• Wie wird das mit den Foreign-Keys gehandhabt?
• Warum wird mit POST ein neuer Eintrag erstellt?
• Was ist speziell an den GET Varianten?
• Was macht DELETE?
• Für was kann man Patch brauchen?

Aufgabe 3.3: Areal auf der Webseite anzeigen

Schaue dir folgende Code Teile an:

• src/index.html
• src/areal.py

Und öffne die developer Konsole vom Browser (oft auf F12 gelegt).¹

Fragen:

• Wie kommt das HTML mit dem Python in Verbindung und umgekehrt?
• Wie wird etwas gelöscht?
• Welches ist die URL der API?
• Woher kann man erahnen, was der korrekte Pfad ist?

¹ Diese sieht in etwa so aus:

Aufgabe 3.4 (Optional): Bühne und/oder Auftritte (readonly) hinzufügen

• Kannst du noch die Bühne auf die gleiche Weise hinzufügen?
• Inwiefern sind nur lese Operationen einfacher?

Da diese Art der Verwendung von Formularen mit Python und HTML sehr umständlich ist, wird das noch relativ selten so eingesetzt.

Falls du an dem weiter arbeiten möchtest, dann helfen wir dir gerne. Ein realitätsnahe Applikation wäre die Chat-Aufgabe, die vom Aufbau einfacher ist, aber halt JavaScript verwendet. Entscheide selber, ob du schon bereit für eine weitere Sprache bist.

Wichtig

In jedem Falls ist dies ein guter Moment, um deine Änderung zu speichern (git commit) und zu pushen (git push).