Schulprojekt · M295 und M322
Antiquariat Kassius
Ein Online-Antiquariat für seltene und wertvolle Bücher, von der Gestaltung in Figma bis zur datenbankgestützten Web-Applikation.
Über das Projekt
In den Modulen M322 und M295 habe ich zusammen einen vollständigen Webshop für ein fiktives Antiquariat entwickelt: M322 die Benutzeroberfläche, M295 das Backend dahinter. Die Aufgabe war, eine dynamische Website mit Datenbankanbindung zu bauen, vom Konzept bis zur fertigen, lauffähigen Anwendung.
Bevor ich eine Zeile Code geschrieben habe, habe ich in Figma einen kompletten Style-Guide und das gesamte Interface gestaltet: Farben, Typografie, Komponenten und alle Seiten. So stand das Design fest, bevor die Umsetzung begann.
Danach habe ich die Website mit PHP umgesetzt. Die Verbindung zur MySQL-Datenbank läuft über PDO mit vorbereiteten Statements (Prepared Statements), die vor SQL-Injection schützen. Die gesamte Anwendung läuft in einer Docker-Umgebung.
Auf einen vollen MVC-Aufbau mit eigenem Router habe ich bewusst verzichtet. Stattdessen arbeite ich mit Page Controllern: Jede PHP-Datei steht für eine URL und kümmert sich selbst um ihre Logik und ihre Ausgabe, ohne Framework dazwischen. Für ein Projekt dieser Grösse liess sich damit für mich leichter nachvollziehen, was bei welchem Seitenaufruf passiert.
Funktionen
password_verify) und Session-Verwaltung.
Einblick in den Code
Aus M322 kommt der Style-Guide. Seine Farben stehen eins zu eins als CSS-Variablen im Stylesheet, jede Seite nimmt ihre Farben nur von dort:
:root {
--primary: #1a3a5c;
--accent: #8B1E3F;
--bg: #F5F1E8;
--text: #1a1a2e;
--text-muted: #6b6b6b;
--white: #ffffff;
--green: #16a34a;
}Aus M295 kommt das Backend. Die Sortierung der Bücherliste steht in der URL, Spaltennamen lassen sich aber nicht als Platzhalter an ein Prepared Statement übergeben. Deshalb wählt der Wert aus der URL nur einen Eintrag aus einer festen Liste, alles andere fällt auf den Titel zurück:
$orderMap = ['titel' => 'b.Title', 'autor' => 'b.autor', 'katalog' => 'b.katalog, b.nummer'];
$order = $orderMap[$sortBy] ?? 'b.Title';Mehr Code mit Erklärung steht auf den beiden Modulseiten: zur Oberfläche Navigation, Formulare, Tabellen und Barrierefreiheit, zum Backend Login mit Sessions, Passwort-Hashing, die Suche über vier Felder, Ausgabe-Escaping und die Prüfung auf dem Server.