Foto-Applikation Dokumentation Et Kod-i-Ferien projekt 1
Indholdsfortegnelse Systemets generelle opsætning... 3 Systemets elementer... 4 iphone applikation... 4 PHP-script... 4 Wordpress-plugin... 4 Website... 4 Brugervejledning... 5 iphone applikation (UM_photo_app)... 5 PHP-script (test-upload.php)... 5 Wordpress-plugin (Photoapprover)... 6 Website (UM_app)... 7 2
Systemets generelle opsætning Figur 1 - Oversigt over systemet. Systemet består af en iphone applikation, hvormed man kan tage et billede eller vælge et billede fra telefonens bibliotek. Herefter skal der tilføjes e-mail samt en valgfri beskrivelse af billedet. Telefonen uploader disse ting sammen med nuværende GPS-koordinater til et PHP-script. Dette script sørger for at elementerne bliver gemt i en mysql DB samt genererer en thumbnail af det originale billeder, der bliver gemt særskilt. Billedet vil derefter blive vist i vores Wordpress-plugin, hvor det skal godkendes for at kunne vises på websitet. Når billedet uploades fra telefonen oprettes der et field ved navn approved der som udgangspunkt har værdien 0. Når et billede godkendes i wordpress-plugin et sættes denne værdi til 1. Websitet laver et sql-kald på alle records, hvor approved= 1. Dataen parses til xml hvorefter den benyttes på websitet. GPS dataen benyttes til at vise lokationen, hvor billedet er taget via GoogleMaps API. 3
Systemets elementer iphone applikation iphone applikationen benytter SDK ets CoreLocation framework til at bestemme brugerens nuværende lokation. UIImagePickerController bliver benyttet til håndtering af kamera og fotobibliotek. Upload-funktionaliteten sker igennem HTTP POST til PHP-scriptet på serveren. PHP-script PHP-scriptet henter de værdier der bliver sendt fra iphone-applikationen og gemmer dem i et mysql table. Derudover gemmes det uploadede billede og scriptet komprimerer en thumbnail-version som gemmes separat på serveren. Wordpress-plugin Wordpress-plugin et laver et kald til databasen, hvor den trækker alle records ud med approved= 0 og lister dem. Man kan derefter markere i en checkbox, hvis billedet ønskes godkendt. Når der trykkes på submit (godkend) gemmes de ændrede værdier i databasen og kan dermed hentes frem af det kald der laves til websitet. Website Websitet er bygget som et theme i wordpress. For yderligere info omkring håndtering af themes i Wordpress: http://codex.wordpress.org/using_themes Websitet laver et kald til databasen, hvor den trækker alle records ud med approved= 1, altså records der er godkendt i wordpress-plugin et. På forsiden af websitet bliver de 3 nyeste billeder vist med tilhørende beskrivelse. Data fra databasen bliver parset til XML, og GPS informationerne bliver trukket ud til brug af GoogleMaps. På siden med kort kan man derfor se, hvor alle billederne er taget samt trykke på dem og se billedet samt eventuel beskrivelse. 4
Brugervejledning Da dette ikke skal fungere som en tutorial i brug af hverken objective-c, Xcode, Wordpress eller GoogleMaps API, vil dette kapitel udelukkende handle om hvilke dele af koden der skal modificeres for at opnå et fungerende setup på eget system. Generelt opfordres der til, at man læser koden igennem, da meget er kommenteret. Det skal lige siges, at noget af koden er kommenteret på dansk og noget er kommenteret på engelsk. Generelt er iphone-app og upload-php-script kommenteret på engelsk og det meste af Wordpress filerne kommenteret på dansk. iphone applikation (UM_photo_app) Man kan selvfølgelig lave et væld personlige ændringer i denne del af systemet når det kommer til design og yderligere funktionalitet. Der er dog umiddelbart kun én (meget vigtig) ting man er nødt til at ændre i koden for at denne del af systemet vil fungere med egen server. Nemlig den URL hvortil man sender variablerne. urlstring skal ændres urlstring skal tildeles URL en der peger på PHP-filen, der skal modtage variablerne. Dette skal være en absolut sti. PHP-script (test-upload.php) Først og fremmest skal der oprettes en mappe ved navn photo-entries i uploadsmappen i den Wordpress-installation der skal laves på serveren. For yderligere information om installation af Wordpress henvises der til følgende link: http://codex.wordpress.org/installing_wordpress Der skal derefter oprettes en subfolder ved navn thumbs under mappen photoentries. Således: http://your-wordpress-install-dir/wp-content/uploads/photo-entries/thumbs/ PHP-filen kan selvfølgelig modificeres i høj grad med diverse check af input og feks lave et kald til databsen om, hvorvidt mobilens unique identifier allerede eksisterer, som ville betyde, at personen allerede har deltaget. Der kan også tilføjes forskellige kontrol-strukture for at øge sikkerheden. Men følgende ting SKAL ændres: 5
Include skal referere til fn_mydb_connect.php, som er inkluderet i Wordpress-pluginet $uploaddir skal ændres til den dir, hvor Wordpress-installationen er. Den refererer til photo-entries, som skulle være blevet oprettet i afsnittet ovenfor. Denne dir skal angives relativt i forhold til PHP-filens placering. $pathtothumb skal ændres til den dir, hvor hvor Wordpressinstallationen er. Den refererer til thumbs, som skulle være blevet oprettet i afsnittet ovenfor. Denne dir skal angives relativt i forhold til PHP-filens placering. Der skal oprettes et table i en mysql database med følgende sql kald (dette kan feks gøres via phpmyadmin, hvis dette er installeret på serveren): CREATE TABLE entries_contest( uid INT(4) NOT NULL AUTO_INCREMENT PRIMARY KEY, uemail VARCHAR(80) NOT NULL UNIQUE, filename VARCHAR(50) NOT NULL UNIQUE, lat FLOAT( 10, 6 ) NOT NULL, lng FLOAT( 10, 6 ) NOT NULL, udesc VARCHAR(120) NOT NULL, approved BOOL )ENGINE=InnoDB; Variabler der skal ændres i PHP-filen Wordpress-plugin (Photoapprover) I Wordpress-plugin et skal databaseoplysningerne i fn_mydb_connect.php rettes, så de stemmer overens med den mysql database der benyttes. 6
Der refereres til Wordpress dokumentation mht at installere et Wordpress plugin: http://codex.wordpress.org/managing_plugins Website (UM_app) I Wordpress-theme et skal der ændres følgende: Der skal benyttes en Google Maps API Key for at benytte GoogleMaps API. Dette kan anskaffes på følgende link: http://code.google.com/apis/maps/signup.html Når denne key er oprettet skal den sættes ind i header.php: Indsæt Google Maps API key hvor det er indikeret I GoogleMap/phpsqlajax_dbinfo.php skal $username, $password og $database ændres til de respektive værdier for den databse der benyttes. God fornøjelse med applikationen. 7