Juni 2016 - Schulprojekt - Bilderdatenbank

Dieses Semester mussten wir in der Schule im Modul 151 - Datenbanken in Webauftritt einbinden - eine Bilderdatenbank entwickeln. Im vorangegangenen Semester (im Modul 133) mussten wir schon einmal ein ähnlich umfangreiches Projekt machen. Dabei handelte es sich um einen selbst entwickelten Blog. Mehr dazu habe ich in einem früheren Blogeintrag geschrieben.

Das Projekt

Der Auftrag bestand darin, eine Online-Bilderdatenbank zu entwickeln. Wir arbeiteten mit dem Programm XAMPP, das bereits eine MySQL-Datenbank und einen Webserver mit integrierter PHP-Funktionalität bereitstellt. 

Damit man sich das Projekt besser vorstellen kann, sind nachfolgend einige der wichtigsten Anforderungen beschrieben:

Der Besucher der Website soll sich auf der Startseite einloggen bzw. registrieren können. Wenn der Benutzer eingeloggt ist, kann er ein neues Album erstellen. In einem Album können beliebig viele Bilder gespeichert werden. Benutzer, die auf der Website angemeldet sind, können nur ihre eigenen Alben sehen. Bilder können mit sogenannten "Tags" versehen werden, um später über eine
Suchfunktion danach zu suchen/filtern.

Es gab noch optionale sowie einige weitere Pflichtvorgaben.

Auch hier wurde, wie schon beim letzten Projekt, vor allem die Funktionalität bewertet, wir mussten uns deshalb auch nicht grossartig mit dem Design der Website auseinandersetzen. Wir bekamen für dieses Projekt eine Vorlage, welche nach "MVC" strukturiert sein sollte.

MVC ist der Begriff für "Model View Controller", welcher ein Muster zur Strukturierung von Software-Entwicklung beschreibt. Ziel eines solchen Musters ist ein flexibler Programmentwurf, der eine spätere Änderung bzw. Erweiterung vereinfacht.

Im Folgenden werde ich das Resultat meiner Arbeit kurz beschreiben und einige Funktionen erklären.

Registration/Login

Besucht man die Seite zum ersten Mal, landet man automatisch auf der Startseite bzw. der Loginseite:

Hat man noch kein Benutzerkonto, muss dieses über den Punkt Registration erstellt werden. Dazu müssen alle Formularfelder ausgefüllt werden.

Als Benutzername wird hier die E-Mail-Adresse verwendet, was bedeutet, dass die E-Mail-Adresse nur an ein Benutzerkonto gebunden sein darf.

Die Benutzerdaten werden, wie in einer MySQL-Datenbank gespeichert. Bevor die Daten gespeichert werden können, werden sie erstmals vor dem Absenden des Formulars clientseitig per JavaScript und nach dem Absenden serverseitig mit PHP validiert. Für die serverseitige Validierung muss zuerst die Datenbank abgefragt werden, ob ein Eintrag mit der angegebenen E-Mail-Adresse bereits existiert. Ist dies nicht der Fall, können die Daten, nachdem das Passwort "gehashed" wurde, mittels einem Prepared-Statement eingefügt werden.

Prepared-Statements werden gebraucht, um die SQL-Queries als Vorlage auf dem Server zu speichern. Die SQL-Queries werden dann bei Bedarf mit den Formulareingaben als Parameter ausgeführt. Dadurch wird für das Ausführen einer SQL-Query Zeit gespart, da die Queries bereits vorbereitet sind. Weiterhin wird auch weniger Bandbreite benutzt, da nur Parameter statt dem ganzen Query zum Server gesendet werden muss. Prepared-Statements sind vor allem aber ein guter Schutz gegen SQL-Injection.

Wenn man bereits ein Benutzerkonto hat, kann man sich, unter dem Menüpunkt "Login",  mittels Eingabe von E-Mail-Adresse und Passwort einloggen.

Member-Bereich

Hat man sich eingeloggt, befindet man sich im sogenannten "Member-Bereich". Dieser unterscheidet sich vom Login-Bereich insofern, als es andere und auch mehr Navigationsbuttons gibt. Wenn man sich eingeloggt hat, ist man direkt auf der Album-Seite, auf welcher man alle eigenen Alben mit den Bildern als Thumbnail sieht:

Da man sich zum ersten Mal eingeloggt hat, sind noch keine Alben für den Benutzer verfügbar.
Um ein neues Album zu erstellen, muss man rechts in der Navigation auf "Neues Album erstellen" klicken.

Man gelangt zu folgender Seite:

Im Textfeld kann der Name für das neue Album eingegeben werden. Mit einem Klick auf "Album erstellen" wird der Eintrag in die Datenbank gespeichert. Für die Alben gibt es eine eigene Tabelle, in der auch die ID des Benutzers, welcher das Album erstellt hat, gespeichert wird, um es später wieder dem richtigen Benutzer zuordnen zu können.

Geht man nun zurück auf den Tab "Fotoalben", sieht man das eben erstellte Album, mit dem Hinweis, dass es noch keine Bilder beinhaltet.

Um nun ein Bild in das eben erstellte Album hochladen zu können, muss zuerst auf "Bilder hochladen" geklickt werden.
Auf der Seite kann nun mit Datei auswählen ein Bild geöffnet werden, das lokal gespeichert ist.
Im ersten Textfeld wird ein Bildname eingegeben, im nächsten dann der Albumname, in welches das Bild hochgeladen werden soll. In der grossen Textbox können dann die Tags für das Bild eingegeben werden, nach denen später gesucht werden kann.

Mit einem Klick auf hochladen wird das Bild hochgeladen und dem entsprechenden Album hinzugefügt.
Für das Hochladen muss zuerst überprüft werden, ob ein Bild mit gleichem Namen bereits auf dem Server existiert. Ist dies der Fall, wird dem Bild eine Zahl angehängt (z.B. "Koala.jpg_1"). Das Bild wurde nun auf dem Server gespeichert. Damit man später eine bessere Vorschau bei den Alben erhält, wird zusätzlich ein Thumbnail mit einer Höhe von 100 Pixeln erstellt und auch auf dem Server in einem separaten Ordner gespeichert. Hat alles bis hierher geklappt, muss noch ein Eintrag in die Bildtabelle eingefügt werden. Hier werden neben dem Namen und den Tags natürlich auch die Album-ID sowie der Pfad zum Thumbnail und dem Originalbild gespeichert.

Geht man nun wieder auf den Tab "Fotoalben", sieht man das Album mit dem eben hochgeladenen Bild. Hier wird noch das Thumbnail angezeigt, wenn man drauf klickt, öffnet sich das Originalbild.

Hat man mehrere Alben sowie auch mehrere Bilder erfasst, kann das dann folgendermassen aussehen:

Zum Filtern nach Bildern muss man zuoberst im Textfeld den gewünschten Tag bzw. einen Teil davon eingeben und auf Filtern klicken. Es werden dann alle Alben gleichzeitig nach diesem Tag durchsucht.

Ist man mit der Arbeit in seiner Bilderdatenbank fertig, sollte auf Logout geklickt werden, um die Session zu löschen.