Studienarbeit Bildergalerie Karina Hoffmann, 924332 Jennifer Eyring, 924319 Studienfach: Datenmanagement I und Netzwerktechnologien I Dozenten: Prof. Dr. Nik Klever und Erich Seifert Interaktive Medien 3. Semester WS 2010/11 Abgabe am 21.03.2012
Inhaltsangabe 1. Allgemeine Beschreibung 2. Motivation 3. Hauptteil 4. Folien Präsentation zur Studienarbeit 5. Studienarbeit 6. Quellenangaben
1. Allgemeine Beschreibung Die Bildergalerie ist eine Anwendung die es dem Benutzer ermöglicht, Bilder nach Kategorien sortiert in eine Datenbank zu laden und diese zu betrachten. Die Bilder kann man durchblättern sowie über kleine Vorschaubilder aufzurufen. Um die Bilder hochzuladen muss man sich als Autor einloggen. Des Weiteren kann man Kommentare zu einer Bildergalerie verfassen. Die Umsetzung erfolgte in Web2py. Um uns mit Web2py vertraut zu machen, setzten wir uns mit dem Web2py Book auseinander. Besonders Kapitel 3 war sehr hilfreich. 2. Motivation Wir haben uns für das Thema Bildergalerie entschieden, da wir zum einen gleich eine Vorstellung hatten wie diese Studienarbeit einmal aussehen sollte und da wir eine eigene erstelle Bildergalerie wollten die wir später beliebig erweitern und auf unsere Homepage mit einbinden können. 3. Hauptteil Zuerst haben wir eine neue Application namens Galerie erstellt. In dieser haben wir die Datei db.py bearbeitet, indem wir 3 neue Datenbanken erstellt haben.
Nun ist es möglich Bilder in die Datenbank zu laden, jedoch werden diese noch nicht angezeigt. Dafür benötigt man noch folgende Schritte: Zuerst muss eine HTML-Datei erstellt werden, auf der die Links zu den Bildern angezeigt werden. Bei uns heißt diese Datei galerie.html. Des Weiteren muss eine zweite Seite show.html erstellt werden, auf der die Bilder angezeigt werden und Kommentare erstellt werden können. Würde man diese Dateien öffnen wollen, würden noch Fehlermeldungen erscheinen. Deshalb benötigt man noch Funktionen im Controller default.py. Wir benötigen für jede HTML-Datei eine eigene Funktion. def index( ): Diese Funktion zählt die Seitenaufrufe. Wenn die Seite noch nicht aufgerufen wurde, wird 0 zurückgegeben. Wurde die Seite zuvor schon einmal aufgerufen, wird der Counter um 1 erhöht. def galerie( ): In dieser Funktion werden alle Dateien in der Datenbank show ausgewählt. def show( ): Zeile 13-16:
Es wird hier versucht die Datenbank show aufzurufen. Zeile 18 und 26: In einer lokalen Variablen werden die Elemente aus der Datenbank gespeichert. Zeile 20: Die show-funktion wählt die Bilder anhand ihrer ID aus. Zeile 21: Die Bild.id wird der Bild_id aus der Datenbank Kommentare zugewiesen. Zeile 23-24: Wenn die Form akzeptiert wurde, erscheint die Meldung Ihr Kommentar wurde geschrieben. def download( ): Die Bilder werden heruntergeladen um anschließend angezeigt werden zu können. show.html Zeile 1: Show.html erbt von layout.html Javascript: Funktion show_bild(id,v) Variable id2 ist die aktuelle ID und der Titel vom Bild. Variable indexerstesbild wurde vorher schon initialisiert mit 0. Das v wird dem Index des ersten Bildes zugewiesen. In der nachfolgenden For-Schleife werden die ganzen Bilder durchlaufen und wenn das v gleich der Variablen i, welches für den Bilderdurchlauf zuständig ist, dann wird der Bildtitel und die Bilddatei aus der Datenbank Bilder aufgerufen. In der HTML-Datei gibt es den Container mit der id = Bild. In der ersten Zeile wird mit Python-Code der Titel des Bildes aufgerufen.
Und im Anschluss wird das dazugehörige Bild verlinkt. Wenn man auf das Bild klickt wird die Javascriptfunktion naechstesbild(id) aufgerufen. Funktion naechstesbild(id) In der Funktion wird der Index des ersten Bildes immer um 1 erhöht. Ist indexerstesbild gleich indexletztesbild wird der Index auf 0 gesetzt. Dann wird die Funktion show_bild von der id und dem indexerstesbild aufgerufen. Funktion vorherigesbild(id) Um die Bilder in beide Richtungen blättern zu können benötigen wir eine weitere Funktion. Diese Funktion ist ähnlich aufgebaut wie die Funktion naechstesbild(id). Um die Bilder betrachten zu können wollten wir kleine Vorschaubilder einfügen. Dieses gelang uns über folgenden HTML-Code: Nachfolgend haben wir eine For-Schleife eingefügt welche alle Bilder durchläuft und diese dann anzeigt. Anzeigen lassen des ersten und letzten Bildes mit Klick auf die jeweiligen Symbole. So dann haben wir noch den HTML-Container Kommentare eingefügt.
Zeile 215: Wenn es Kommentare gibt, dann sollen alle Kommentare aus der Datenbank durchlaufen werden und mit dem jeweiligen Autor und Inhalt ausgegeben werden. Gibt es keine Kommentare soll eine Meldung erscheinen, dass noch keine Kommentare vorhanden sind und der Benutzer hat dann die Möglichkeit einen Kommentar zu erstellen.
6. Quellenangaben https://github.com/mdipierro/web2py-appliances/tree/master/imagegallery web2py.com/books/default/chapter/29/3