1 / 5 Doing Web Apps PHP Übungsaufgabe 3 Werkzeuge Text-Editor, beispielsweise Notepad++ Webserver mit aktiviertem PHP Modul + MySQL-Datenbank Unterlagen Ziele SelfHTML PHP API Handbuch Alle Dokumente des Seminars Umgang mit Formular-Daten Grundlegender Umgang mit dem MySQLi Klassen Erstellen einer kleinen datenbankbasierten Anwendung Hinweis: Lösen Sie Probleme stets bewusst selbst. Nur so bauen Sie ein Selbstverständnis für die Sprache, deren Eigenheiten und den damit interagierenden Medien auf. 2012 Rüdiger Marwein 1
1.Vorbereitung 2 / 5 1. Vorbereitung 1. Laden Sie die Übungsdateien (http://keinerweiss.de/php-seminar/ubungen) herunter und entpacken Sie sie in Ihr htdocs Verzeichnis. 2. Importieren Sie die Datenbank zum Übungsblatt (gallery.sql in ZIP) über phpmyadmin in eine neue Datenbank uebung3. Achten Sie auf die Kollation utf8_general_ci. 3. Übertragen Sie Ihre eigenen Datenbank-Verbindungsdaten in die Datei config.php Etwas HTML und PHP-Code ist schon vorgegeben. Wichtige Hinweise: config.php: classes/galleryhelper.php: index.php: upload.php: admin.php: Datenbank-Verbindungsdaten und Verbindungsaufbau. Klasse für eigene Funktionen Anzeige der Galerie Neues Bild hochladen Bilder freischalten oder löschen Datenbank-Variable: $GLOBALS['DB'] Beispiel-Nutzung: $GLOBALS['DB']->query( ); 2. Bildergalerie Datenbank: gallery id filename mimetype upload_date title description status (pending / accepted) 3. Upload-Formular Bearbeiten Sie die Datei upload.php Beachten Sie das Attribut enctype am <form> Tag. Das ist für Uploads zwingend notwendig. Bild, Titel und Beschreibung sind Pflichtfelder. Sind sie nicht ausgefüllt, muss eine Fehlermeldung ausgegeben werden und die vom Benutzer eingegebenen Werte müssen wieder in den Feldern zu sehen sein. Das Bild muss im Fehlerfall erneut zugewiesen 2012 Rüdiger Marwein 2
3.Upload-Formular 3 / 5 werden. 4. Bild speichern Bearbeiten Sie die Datei upload.php und classes/galleryhelper.php. Sind alle Daten vorhanden wird zunächst die Methode storeuploadedimage der Klasse GalleryHelper verwendet um das Bild abzuspeichern. Das Bild muss in den Ordner uploads gespeichert werden. Übergeben Sie den vollständigen Pfad. Hinweis: dirname( FILE ) liefert den Pfad zum Verzeichnis der aktuellen Datei. Hinweis: nutzen Sie die PHP-Funktion move_uploaded_file. Das Abspeichern darf nicht durchgeführt werden falls das Bildformat nicht angezeigt werden kann (bspw TIFF, BMP, XLSX, ) eine Upload-Fehler vorliegt keine Datei hochgeladen wurde die Dateigröße 0 Byte ist Geben Sie der Datei einen eindeutigen Namen (damit nicht evtl existierende Dateien überschrieben werden). Hinweis: nutzen Sie die PHP-Funktion tempnam. Beachten Sie den Rückgabewert. Falls die Datei nicht gespeichert wurde, muss eine leere Zeichenkette zurückgegeben werden, ansonsten der neue Dateiname (ohne Pfad). Hinweis: nutzen Sie die PHP-Funktion basename um an den reinen Dateinamen aus einem Pfad zu gelangen. Einsatz wie: $filename = $galleryhelper->storeuploadedimage( ); 5. Datensatz speichern Bearbeiten Sie die Datei upload.php und classes/galleryhelper.php. Hat der Upload geklappt, wird die Methode savenewentry der Klasse GalleryHelper verwendet, um einen neuen Datensatz in die Datenbanktabelle gallery zu speichern. Schreiben Sie in das Feld status den Wert pending. Schreiben Sie in das Feld mimetype den vom Browser in $_FILES['image'] gesendeten Mimetype. Bspw. image/jpeg. 2012 Rüdiger Marwein 3
5.Datensatz speichern 4 / 5 Schreiben Sie in das Feld upload_date den aktuellen Unix-Timestamp. Hinweis: verwenden Sie die Funktion time für den aktuellen Unix-Timestamp. War auch der Speicher-Vorgang erfolgreich, wird die Variable $success auf TRUE gesetzt und dem Nutzer somit eine Erfolgsmeldung ausgeben. Notiz: Speichern Sie den Dateinamen ohne den Pfad uploads/ o.ä. 6. Die Galerie anzeigen Bearbeiten Sie die Datei index.php und classes/galleryhelper.php. Es dürfen nur freigegebene Datensätze angezeigt werden. Dafür wird die Methode getacceptedentries der Klasse GalleryHelper verwendet. Rückgabe ist ein Array aller freigegebenen Bilder-Datensätze. Geben Sie das Upload-Datum in gut lesbarem Format aus (16.11.2012 17:00). Hinweis: Verwende Sie die Funktion date. Hinweis: Denken Sie bei der Ausgabe des Bild-Pfades daran, dass der Dateiname ohne Verzeichnispfad in der Datenbank steht. 7. Bilder freigeben Damit niemand Bilder von LOLcats oder schlimmeres hochlädt, müssen die hochgeladen Bilder erstmal geprüft werden. Bearbeiten Sie die Datei admin.php und classes/galleryhelper.php. Es wird eine Liste der Bilder angezeigt, die den Status pending haben. Dafür wird die Methode getpendingentries der Klasse GalleryHelper verwendet. Rückgabe ist ein Array aller freigegebenen Bilder-Datensätze. Jedes Bild ist in ein Formular eingeschlossen, so dass es ermöglicht ist, jedes Bild einzeln freizuschalten oder zu löschen. Wird der Button Freigeben gedrückt (action=accepted) wird das Bild mit der entsprechenden ID in der Datenbank-Tabelle gallery aktualisiert (UPDATE), so dass status des Bildes fortan accepted lautet. Wird der Button Ablehnen gedrückt (action=delete) wird das Bild mit der entsprechenden ID in der Datenbank-Tabelle gallery gelöscht (DELETE). Das Bild im Ordner uploads muss bei dieser Aktion ebenfalls gelöscht werden. 2012 Rüdiger Marwein 4
7.Bilder freigeben 5 / 5 Vervollständigen Sie die Methoden acceptentry und deleteentry der Klasse GalleryHelper. 8. Bilder sortieren Bearbeiten Sie die Datei index.php und classes/galleryhelper.php. Erweitern sie die Methode getacceptedentries der Klasse GalleryHelper um einen optionalen ersten Parameter $sorting (standardmäßig leere Zeichenkette). Ist der erste Parameter gesetzt (Zeichenkette länger als 0 Zeichen) wird er zur Sortierung in der SQL-Anweisung verwendet. SELECT FROM WHERE ORDER BY [sorting-feld] Die Liste der Bilder ist nach Titel und Datum sortierbar. 9. Frage Hat Ihre Anwendung noch Sicherheitslücken? 10. Wer es sich zutraut... Erzeugen Sie bereits beim Upload ein Miniatur-Bild (Thumbnail) des Orginals und speichern es separat ab. Dafür werden Sie u.a. folgende Funktionen benötigen imagecopyresampled imagecreatefromjpeg / gif / png imagecopyresampled Der Algorithmus zur Skalierung mit gleichbleibendem Seitenverhältnis ist: neue maxminale breite gegeben neue maximale höhe gegeben aspect ratio = orginal breite / orginal höhe wenn landscape-format: thumb breite = neue maxminale breite thumb höhe = neue maxminale breite / aspect ratio wenn portrait-format: thumb höhe = neue maximale höhe thumb breite = neue maximale höhe * aspect ratio Verwenden Sie das Miniatur-Bild für eine Übersicht aller Bilder. 2012 Rüdiger Marwein 5