Web aplikacija za evidentiranje i nalaženje lokacija sportskih centara

Transcription

1 SVEUČILIŠTE U RIJECI TEHNIČKI FAKULTET Preddiplomski studij računarstva Završni rad Web aplikacija za evidentiranje i nalaženje lokacija sportskih centara Rijeka, Srpanj, Mate Štulina

2 SVEUČILIŠTE U RIJECI TEHNIČKI FAKULTET Preddiplomski studij računarstva Završni rad Web aplikacija za evidentiranje i nalaženje lokacija sportskih centara Mentor: doc.dr.sc. Miroslav Joler Rijeka, Srpanj, Mate Štulina

3 Umjesto ove stranice umetnuti opis završnoga ili diplomskoga rada

4 Umjesto ove stranice umetnuti potpisanu izjavu o samostalnoj izradbi rada

5 Sadržaj Popis slika viii Popis kratica x 1 Uvod 1 2 Programski jezici i alati Programski jezici PHP MySQL Javascript Alati NetBeans WampServer Mysql Workbench v

6 Sadržaj 3 Aplikacijsko programsko sučelje Google developers Google geocoding service Google static maps Google maps JavaScript v3 API Google directions service PHPMailer JQuery API Tennis Center Finder Baza podataka Funkcionalnost i dizajn Sports Center Finder Baza podataka za SCF Programska rješenja Pretraga Unos novog centra Upute do centra Upute za instalaciju Priprema podataka za postavljanje na poslužitelj vi

7 Sadržaj 6.2 Postavljanje baze podataka Postavke za spajanje sa bazom Postavke za slanje mail-a Početak korištenja aplikacije Primjer korištenja Primjer korisničkog sučelja Primjer administracije centara Zaključak 46 Bibliografija 47 vii

8 Popis slika 2.1 Razlika izmedu standardne web apliakcije i aplikacije koja koristi AJAX [15] Odabran i instaliran PHP modul Wampserver localhost sučelje Google API Console sučelje Mapa koja je rezultat zahtjeva adrese Vukovarska 58, Rijeka, Hrvatska SCF - unos novog centra sa osnovnim podacima o centru TCF - unos novog centra sa mogućnosti odabira podloge teniskog centra Relacije izmedu tablica sportski centar, korisnici, errorreport Odabir vrste podloge prilikom pretraživanja unesenih lokacija teniskih centara Prikaz relacijske strukture baze podatka Izgled tražilice za pretragu sportskih centara u bazi aplikacije viii

9 Popis slika 5.3 Dio funkcije initializeslider () koji obraduje XML dokument i postavlja statične slike lokacija centara unutar slider-a Najbitniji dio funkcije addinfo () koji omogućuje dodavanje opisa klikom na centar Prikaz načina rada pretrage Prikaz rada web aplikacije prilikom unosa novog centra Inicijalizacija Google Directions service-a Funkcija za izračun uputa Grafički prikaz pozivanja i rada funkcije calcroute () Izgled korisničkog sučelja prilikom prijave na račun Odabir lokacije centra Cosmo Gym Gumb kojim se mogu zatražiti upute do centra Upis adrese polaska Prikaz uputa od adrese polaska Korzo 1, Rijeka do lokacije centra Cosmo Gym Gumb za prijavu pogreški Popunjavanje obrazca za prijavu pogreške Pregled prijavljenih pogreški Administrator izmjenjuje prijavljene vrijednosti Administrator piše poruku korisniku koji je prijavio pogrešku. 45 ix

10 Kazalo AJAX API CSS FTP HTML HTTP HTTPS GPS JS JSON PHP SCF Asynchronous JavaScript and XML Application programming interface Cascading Style Sheets File Transfer Protocol Hypertext Markup Language HyperText Transfer Protocol Hypertext Transfer Protocol Secure Global Positioning System JavaScript JavaScript Object Notation Hypertext Preprocessor Sports Center Finder SCF2 Sports Center Finder 2 SCP Secure Copy Protocol x

11 Kazalo SSL TCF TCP TLS XML Secure Sockets Layer Tennis Center Finder Transmission Control Protocol Transport Layer Security EXtensible Markup Language xi

12 Poglavlje 1 Uvod Tema završnog rada je izraditi web aplikaciju koja bi omogućila pretraživanje sportskih centara prema njihovoj lokaciji. Korisnici trebaju unijeti sportski centar, odnosno lokaciju centra koja se zatim geokodira s obzirom na upisanu adresu čime se omogućuje daljnje prikazivanje položaja centra na generiranim kartama. Rezultat je realizacija aplikacije Sports center finder (SCF) odnosno njene konačne verzije Sports center finder 2 (SCF2). Početak razvoja je prva verzija za opći unos sportskih centara ( Sports center finder - SCF) koja je temelj razvoja. Nastavak razvoja je proširivanje pretrage i unosa doradom aplikacije za pretragu teniskih centara ( Tennis center finder - TCF), a posljednja verzija je obogaćena novim rješenjima, funkcionalnostima i dizajnom. Cijela aplikacija je zamišljena i organizirana u tri korisničke razine da bi se ograničilo mogućnosti korisnika i spriječilo neprimjerno korištenje aplikacije. Stoga su tri korisničke razine organizirane kao: gost u kojoj će svaki korisnik moći koristiti samo opciju pregledavanja centara, registrirani korisnik u kojoj će korisnik morati imati svoj račun te će moći 1

13 Poglavlje 1. Uvod koristiti uz već navedenu opciju pregleda i opciju unosa novih lokacija centara, administrator odnosno korisnik koji će održavati bazu podataka web aplikacije. Dodatne mogućnosti za registrirane korisnike su komentiranje i ocjenjivanje centara (kojima je ujedno uveden i sustav kvalitete unosa), upute do centra, pregled vlastitih unosa i mogućnost izmjene osobnih podataka. 2

14 Poglavlje 2 Programski jezici i alati Prilikom izrade aplikacije korišteni su sljedeći programski jezici: PHP 5.2/5.3 [1], MySQL [2], JavaScript [3], AJAX [4], Skriptni jezici kojima se generira sadržaj i osvaruje komunikacija poslužitelj-korisnik su: HTML 5 [5], CSS 3 [6], JSON [8], XML [7]. 3

15 Poglavlje 2. Programski jezici i alati U izradi koda i osmišljavanju baze su korišteni programski alati: WampServer [10], NetBeans [9], MySQL Workbench [11]. Za testiranje i otklanjanje poteškoća na aplikacijama su korišteni web preglednici: Google Chrome [12], Mozilla Firefox [13], Microsoft Internet Explorer [14]. 2.1 Programski jezici PHP PHP [1] (Hypertext Preprocessor) je objektno-orijentiran programski jezik namijenjen prvenstveno programiranju poslužiteljske strane (eng. server side) web aplikacije. PHP je jedan od najzastupljenijih programskih jezika za programiranje web aplikacija. Vrline su mu da je jako sličan C programskom jeziku i lak za pamćenje. Ukratko nakon službenog izdanja prvotna verzija PHP/FI 2.0 u studenom 97, je zamijenjena prvom alfa verzijom PHP-a 3 (PHP3). Postoje trenutno 3 službene verzije ovog programskog jezika: PHP3 PHP4 4

16 Poglavlje 2. Programski jezici i alati PHP5 Sintaksa prve verzije je bila slična perlu, ali jednostavnija. Ipak je imala varijable kao perl, automatsku interpretaciju varijabli web formi i u HTML-u ukorijenjenu sintaksu. PHP kod se stavlja izmedu HTML trag-ova: <?php echo i ;?>. Varijable u PHP-u su loosely typed i uvijek počinju sa znakom $ (dollar). Za pokretanje web aplikacija pisanih u PHP-u potrebno je imati instaliran PHP modul na serveru. PHP nije jedini specijalizirani programski jezik za izradu web aplikacija: JSP - Sun-ova inačica Jave za izradu web aplikacija, ASP - razvijen od strane Microsofta, CFM - ColdFusion tvrtke Adobe. Naravno, moguće je i jezicima opće namjene kreirati web aplikacije, bio to C, Perl ili čak Fortran. I u Hrvatskoj postoje portali orijentirani PHP-u: - Udruga PHP programera Hrvatske, - Neslužbena hrvatska PHP stranica MySQL MySQL [2] je besplatan open source sustav za upravljanje bazom podataka. MySQL baza je slobodna za većinu uporaba. Ranije u svom razvoju, MySQL baza podataka 5

17 Poglavlje 2. Programski jezici i alati suočila se s raznim protivnicima MySQL sustava, organiziranja podataka jer su joj nedostajale neke osnovne funkcije definirane SQL standardom. Vrlo je stabilna i ima dobro dokumentirane module i ekstenzije te podršku od brojnih programskih jezika: PHP, Java, Perl, Python itd. MySQL baze su relacijskog tipa, koji se pokazao kao najbolji način skladištenja i pretraživanja velikih količina podataka i u suštini predstavljaju osnovu svakog informacijskog sustava, tj. temelj svakog poslovnog subjekta koji svoje poslovanje bazira na dostupnosti kvalitetnih i brzih informacija. MySQL i PHP su osvojili veliki dio tržišta jer su open source. Relacijski sustavi za pohranu podataka kao što je MySQL sve podatke pohranjuju unutar tablica koje se sastoje od kolona i redova. Kolone se nazivaju još i poljima ili atributima, a služe za skladištenje pojedinih podataka o odredenom entitetu, redovi se nazivaju još zapisima ili slogovima (eng. record) i sadrže sve podatke jednog entiteta. Teorija o bazama podataka je precizno definirana matematičkim pravilima početkom 70-ih Javascript JavaScript [3] je skriptni programski jezik, koji se izvršava u web pregledniku na strani korisnika. Napravljen je da bude sličan Javi, zbog lakšega korištenja, ali nije objektno orijentiran kao Java, već se temelji na prototipu i tu prestaje svaka povezanost s programskim jezikom Java. Izvorno ga je razvila tvrtka Netscape ( JavaScript je primjena ECMAScript standarda. JavaScript s AJAX (Asynchronous JavaScript and XML) tehnikom omogućuje web stranicama komunikaciju sa serverskim programom, što čini web aplikaciju interaktivnijom i lakšom za korištenje. Ostvarivanje web aplikacija brzinom sličnih desktop aplikacijama, napokon je omogućeno uvodenjem i razvojem AJAX-a [4]. Kod uobičajenih web aplikacija, korisnik ispunjava obrazac te šalje poslužitelju na obradu odabirom submit akcije. Nakon potvrde, cijeli HTML obrazac se šalje poslužitelju, poslužitelj predaje podatke na obradu odredenoj skripti (uglavnom PHP), te nakon obrade 6

18 Poglavlje 2. Programski jezici i alati vraća pregledniku potpuno novu stranicu. Naravno, dok proces obrade podataka traje, korisnici su prisiljeni čekati neko vrijeme. Tu se očituje jedan od nedostataka standardnih web aplikacija a to je relativno spor odgovor na zahtjev korisnika (brzina ovisi o količini podataka koje je potrebno obraditi) te korisnici nisu informirani o statusu poslanih podataka. Nisu u mogućnosti znati da li je čekanje rezultat opterećenosti poslužitelja, spore veze ili je pak posrijedi nešto treće. Uglavnom, nedostaje trenutna povratna informacija nakon slanja podataka na obradu. AJAX postavlja JavaScript tehnologiju i XMLHttpRequest objekt izmedu web forme i poslužitelja. Nakon što korisnik završi sa unosom podataka u obrazac, oni se šalju JavaScript skripti, a ne direktno na poslužitelj. Tada sama skripta šalje podatke poslužitelju na obradu, te korisnik uopće nije svjestan ikakvog toka obrade podataka, ako se stranica u pregledniku ne osvježava. Razlog tome je što JavaScript šalje podatke asinkrono odnosno korisnik ne mora čekati na odgovor poslužitelja da bi mogao nastaviti s radom. On i dalje može popunjavati forme, koristiti stranicu a podaci se šalju odnosno primaju u pozadini. Ta razlika je u radu izmedu standardnog načina rada i AJAX-a je prikazana na Slici 2.1. Nakon obrade, poslužitelj vraća podatke JavaScript funkciji koja odlučuje što s njima dalje napraviti. Ona može upotpuniti polja obrazca, dodati sadržaj stranici ili nešto treće i to sve obavlja trenutno što rezultira povećanom brzinom (kako nije svaki put potrebno prenositi cijelu stranicu do poslužitelja i natrag) te korisniku daje dojam trenutnog odaziva na koji je navikao koristeći desktop aplikacije. JavaScript funkcija čak može primiti podatke, provesti njihove obrade, poslati novi zahtjev poslužitelju i to sve bez ikakve potrebe za intervencijom korisnika. Rezultat je dinamična i brza web stranica sa visokim stupnjem interakcije poput standardne desktop aplikacije sa svim prednostima nad njom koje pruža Internet. 7

19 Poglavlje 2. Programski jezici i alati Slika 2.1 Razlika izmedu standardne web apliakcije i aplikacije koja koristi AJAX [15]. 2.2 Alati NetBeans NetBeans [9] je open source razvojni alat baziran programiran i baziran na Java programskom jeziku. Alat je dizajniran kao modularan software zbog čega korisnik može optimizirati sučelje i prilagoditi ga svojim potrebama. Kao takav ovaj razvojni alat je postao popularan medu web razvojnim programerima. Iako je NetBeans uglavnom okrenut prema Java programskim jezicima, posjeduje module za razvoj PHP, C/C++ i Groovy. Prilikom izrade ovog projekta korišten je modul za PHP razvojno okružje. Na Slici 2.2 je prikazan odabir PHP modula. 8

20 Poglavlje 2. Programski jezici i alati Slika 2.2 Odabran i instaliran PHP modul WampServer WampServer [10] je lokalni web server za Windows operativne sustave koji podržava Apache2, PHP i MySQL. Trenutne verzije WampServer-a poboljšane su verzije i nastavak razvoja WAMP inačice. WAMP-ove inačice za ostale operativne sustave su MAMP ( Apple Mac Os ) i LAMP ( Linux bazirani sustavi ). WampServer instalacijski paket posjeduje: phpmyadmin sučelje za manipulaciju sa MySQL bazom, MySQL Buddy sučelje za održavanje i optimizaciju baza, Webgrind alat za profiliranje web aplikacija. Na Slici 2.3 je prikazano localhost sučelje. 9

21 Poglavlje 2. Programski jezici i alati Slika 2.3 Wampserver localhost sučelje Mysql Workbench MySQL Workbench [11] je opensource aplikacija za dizajniranje i optimiziranje MySQL baza podataka. Velika je pomoć pri projektiranju baze podataka. Posjeduje jednostavne i korisne alate kojima se vrlo lako može postići rezultat. Moguće je i napraviti relacijske diagrame automatski generirane prema relacijskoj strukturi baze podataka. 10

22 Poglavlje 3 Aplikacijsko programsko sučelje Aplikacijsko programsko sučelje [16] (eng. API - Application Programming Interface) ili sučelje za programiranje aplikacija je skup odredenih pravila i specifikacija koje programeri slijede kako bi se mogli služiti uslugama ili resursima operacijskog sustava ili nekog drugog složenog programa (npr. funkcija, procedura, metoda, struktura podataka, objekata i protokola). Na primjer s programskim jezicima kao Java, C i Python dolazi skup osnovnih aplikacijskih programskih sučelja dok specifični API-i dolaze s programskim paketima posebne namjene kao što su Google Maps, MySQL i Facebook Platform. Korištenjem API-a omogućava se da programeri koriste rad drugih programera štedeći vrijeme a u većini slučajeva i novac koji je potreban da se napiše složeni program. Napretkom u operacijskim sustavima, a osobito u grafičkom korisničkom sučelju, API je nezaobilazan u stvaranju novih aplikacija. Umjesto da se novi programi pišu iz temelja, programeri nastavljaju na radu drugih te njihovim kombinacijama u vrlo kratkom roku stvaraju nešto što sami ne bi mogli ni zamisliti. Prilikom izrade TCF i SCF aplikacije su korišteni sljedeći servisi i API-ji: Google Code / Google Developers: Google geocoding service, 11

23 Poglavlje 3. Aplikacijsko programsko sučelje Google static maps API, Google maps JavaScript V3 API, Google directions service API, PHP Mailer, Jquery API. 3.1 Google developers Google developers [17] je web servis orijentiran prema razvojnim programerima koji žele iskoristiti mogućnosti koje pruža Google prilikom razvoja vlastitih projekata. Google developers odnosno google code nudi dvije osnovne razine koda, API za privatne korisnike i API za poslovne korisnike koji predvidaju da će koristiti velike resurse. Bitna razlika u ponudi opcija i mogućnosti ne postoji ali ukoliko ste poslovni korisnik, Google će vam posvetiti posebnu pažnju i potporu. Privatni korisnik odnosno fizička osoba koja koristi google API u nekomercijalne svrhe ima limite, koje ukoliko vas sputavaju možete ukinuti na način da plaćate svako prekoračenje dozvoljenog limita. U svrhu boljeg praćenja i održavanja korištenih Google API-ja, Google je stvorio Google API Console prikazano na Slici 3.1. To je jedinstveno sučelje kojime se može pratiti sav promet preko korištenih API-ja, pregled korištenja, pregled naplaćenih zahtjeva i sl. Na Google developers službenoj stranici [17] mogu se pronaći svi službeni API-ji koje nudi Google u svojoj ponudi. Google Maps API sadržava većinu API-ja korištenog u realiziranju web aplikacija TCF i SCF2. Google Maps je trenutno najveći svjetski web servis orijentiran na mapiranje zemljine površine. Usporedno sa razvojem i sve većom pokrivenosti zemljine površine sa mapiranim podatcima, Google je razvio vlastite usluge, servise i API-je. Prilikom razvoja aplikacija u aplikacije se ugraduje Google Maps API, prilagodava potrebama aplikacije i dizajna. 12

24 Poglavlje 3. Aplikacijsko programsko sučelje Slika 3.1 Google API Console sučelje Google geocoding service Geokodiranje [18] (eng. geocoding) je proces nalaženja odgovarajućih zemljopisnih koordinata (izraženih kao zemljopisna dužina i širina) prema drugim zemljopisnim podatcima kao što su adrese ulica, poštanski brojevi itd. Sa zemljopisnim koordinatama moguće je mapirati i generirati zemljovide i karte u Geografskim informacijskim sustavima (Geographic Information Systems ) ili ih upotrijebiti za označavanje (eng. geotagging) pozicija na kartama. Postoji i takozvana opcija reverznog geokodiranja (eng. reverse geocoding) gdje se iz zemljopisnih koordinata generiraju adrese. Google geocoder API je web servis koji pomaže u procesu geokodiranja. Interpolacija adresa je jednostavna metoda geokodiranja. Ova metoda koristi podatke iz geografskih informacijskih sustava koji su već mapirani u geografskom koordinatnom prostoru. Svaka ulica je segment kojem je dodan atribut broj. Geocoding uzima tu adresu, pronalazi odgovarajući segment i zatim interpolira koordinate adrese unutar 13

25 Poglavlje 3. Aplikacijsko programsko sučelje tog segmenta ovisno ukupnom rasponu adresa unutar tog segmenta. Jedan od ostalih načina geokodiranja je centroid ili postavljanje koordinata u centar parcele, ukoliko su dostupni podaci u bazi podataka geografskog sustava. U ruralnim ili nekim drugim područjima nedostatak visoko kvalitetnih podataka i adresiranja uglavnom nije moguć pa se tu koristi GPS sustav za mapiranje karata. No ovaj način nije dobar iz razloga što se dogadaju slučajevi gdje je nepreciznost generiranja koordinata velika zbog velikih dimenzija parcela ili referentnih točaka. Istraživanja su uvela novi pristup kontroli i unapredivanju baza podataka, korištenjem paradigme bazirane na agentima. Kao dopuna geocoding-u, razvijene su dodatne tehnike i kontrolni algoritmi. Taj pristup su geografski elementi koje pronalaze individualni agenti (ugl. korisnici usluge) a omogućuju maksimalno približavanje istinitosti prikaza. Geokodirane lokacije su korisne u mnogim analizama geografskih informacijskih sustava i kartografskih zadataka. Takoder geokodiranje je sveprisutno i raznim web aplikacijama i servisima Google static maps Google Static Maps V2 su statične mape koje generira Google API prilikom slanja HTTP zahtjeva prema Google Maps serverima za željenu lokaciju. Mape koje su generirane su u slikovnom formatu i kao takve se ne mogu mijenjati te Google zadržava pravo na svaku kopiju dotične slike/mape. Moguće je potraživati mapu lokacije upisom tekst naziva lokacije ili pomoću zemljopisnih koordinata. Google Static Maps podliježe ograničenom broju zahtjeva prema serveru na dan. Trenutni dnevni limt je 5000/dan (pet tisuća dnevno), a ukoliko korisnik Google Static Maps API-ja želi, može omogućiti naplatu ukoliko se prekorači dnevno ograničenje. U primjeru dolje je primjer web adrese pomoću koje se generira slika prikazana na Slici 3.2 sa mapom: 14

26 Poglavlje 3. Aplikacijsko programsko sučelje center=vukovarska%2058,%20rijeka,croatia&zoom=16&size=500x300 &maptype=roadmap &markers=color:blue%7clabel:tehni%c4%8dki%20faklutet%20rijeka %7C , &sensor=false Slika 3.2 Mapa koja je rezultat zahtjeva adrese Vukovarska 58, Rijeka, Hrvatska Google maps JavaScript v3 API Google maps JavaScript API omogućuje postavljanje interaktivnih Google mapa na web aplikacije korisnika i razvojnih web programera. Trenutna službena API verzija 3 (tri) je dizajnirana da bude brza, prilagodljiva mobilnim aplikacijama, a istovremeno i tradicionalnim desktop aplikacijama. Google maps JavaScript API osigurava nekoliko načina manipulacije mapama (npr. na službenoj stranici Google Maps-a kao i dodavanja sadržaja pomoću različitih web servisa kao što je Google directions. JavaScript Maps API V3 je besplatna usluga, web servis dostupan je za svaku web aplikaciju koja je besplatna za krajnje korisnike. 15

27 Poglavlje 3. Aplikacijsko programsko sučelje Google zadržava sva prava na kod, kao i na pravo oglašavanje na sadržaju koji je generiran putem Google maps API-ja Google directions service Google directions service je web servis koji proračunava put izmedu dvije zadane lokacije koristeći HTTP zahtjeve i prikazuje upute ukoliko je to moguće i programski se nadograduje na Google Maps JavaScript V3 API. Korisnik može pretraživati upute ovisno o načinu putovanja (javnim prijevozom, autom, biciklom, pješke). Directions mogu prikazivati nazive i imena polazišta, i destinacije kao tekst ili kao zemljopisne koordinate. Takoder ukoliko programer želi prikazati i taj dio, directions nudi i ispis lokacija koje su na putu izmedu dvije zadane lokacije. Time se omogućuje i olakšava planiranje putovanja. Budući da je proračun puta izmedu dvije točke vrlo zahtjevan i spor proces, predlaže se da se upute zahtijevaju i proračunavaju unaprijed ukoliko je to moguće ili da se korisnika upozna sa problemom da ne dolazi do nesporazuma PHPMailer PHPMailer [19] je PHP transportna klasa koja sadrži opcije poput slanja poruka putem SMTP protokola, HTML poruka, mogućeg dodavanja priloga poruci itd. Moguće je slati poruke preko PHP mail() funkcije, Qmail-a ili direktno preko SMTP klase. Kao dodatne mogućnosti transporta je moguće dodati i slanje SMS poruka, dok je slanje MMS poruka u razvoju, ali se očekuje ubrzo. Implementacija PHPMailer-a je vrlo jednostavna PHP skripta u kojoj se namještaju osnovne postavke koje su potrebne za slanje poruke. Iako je PHPMailer u osnovi samostalna aplikacija-server za slanje poruka potrebno je imati korisnički račun sa adresom i lozinkom na nekom od servisa (npr. 16

28 Poglavlje 3. Aplikacijsko programsko sučelje GMail, Hotmail, Yahoo itd.). 3.2 JQuery API JQuery [20] je open source JavaScript knjižnica dizajnirana kako bi se pojednostavilo manipuliranje sa HTML sadržajem. Funkcije u JQuery-u funkcioniraju na principu event-a i element-a. Jednostavne funkcije omogućuju klijentu više-manje standardiziran upis i programiranje dinamično-mijenjanog sadržaja. JQuery omogućuje razvojnim programerima razvoj vlastitih funkcija, plug-ina. Time se postiže niža razina korisničke interakcije sa web aplikacijom pomoću animiranja sučelja, dok je moguća i napredna razina korištenjem efekata, tematskih widget-a i sl. JQuery knjižnica se dodaje u HTML dokument unutar <head> tag-a pomoću standardnog <script> taga. Moguće je kao izbor navesti i web adresu na kojoj se nalazi zadnja stabilna verzija skripte. <script type="text/javascript" src="js/jquery js" charset="utf-8"> </script> Primjer prikazuje postavljanje JQuery skripe unutar HTML dokumenta. <script type="text/javascript"> $(document).ready(function(){ $( button ).click( function () { $(this).hide(); }); }); </script> 17

29 Poglavlje 3. Aplikacijsko programsko sučelje Primjer prikazuje JavaScript JQuery koda čija funkcionalnost je skrivanje HTML elementa kad kliknemo na istog. 18

30 Poglavlje 4 Tennis Center Finder Aplikacija je nastala razvojem aplikacije Sports center finder, projekt Web sučelje za vodenje lokacija sportskih centara. SCF aplikacija omogućuje upis i pretragu lokacija sportskih centara bez ikakvog detaljnijeg opisa lokacije osim adresom i nazvom centra ( Slika 4.1 ). Korisnik prilikom unosa lokacije nije bio u mogućnosti pojasniti Slika 4.1 SCF - unos novog centra sa osnovnim podacima o centru. o kakvom se centru radi osim u nazivu centra. Razlog tomu je ograničenost polja 19

31 Poglavlje 4. Tennis Center Finder za upis zbog čega nastao TCF. Cilj TCF aplikacije je da korisnik ima mogućnost unosa lokacije teniskog centra ali i mogućnost odabira podloge centra kojeg upisuje ( Slika 4.2 ). Osnovne funkcionalnosti aplikacije uglavnom su ostale nepromijenjene Slika 4.2 TCF - unos novog centra sa mogućnosti odabira podloge teniskog centra. u odnosu na originalnu aplikaciju, a sadržavaju istu strukturu korisničkog sučelja i ovlasti. Dok je prilikom obrade aplikacije, fokus bio na izmjeni baze i dodavanju mogućnosti odabira vrste teniskih podloga, dorade profila, korištenih termina na aplikaciji i dizajna. 4.1 Baza podataka Baza podataka aplikacije TCF je izmjenjena u odnosu na bazu podataka aplikacije SCF u skladu sa dodanim mogućnostima. Baza podataka se sastoji od 3 osnovne tablice: sportski centar - sadrži podatke o upisanoj lokaciji centra, korisnici - sadrži podatke o korisnicima, 20

32 Poglavlje 4. Tennis Center Finder errorreport - sadrži upisane prijave o greškama na sportskim centrima. Dodatna tablica problemi se koristi za upis problema u kodu i nema relacije na navedene osnovne tablice te stoga je maknuta iz opisa. Izmjene koje se odnose na bazu su u tablici sportski centar zbog dodavanja upisa tipa podloge. Time je u tablicu dodano polje typeofcoutr koje služi za zapis vrste podloge unesenog teniskog centra. Diagram baze podataka je prikazan na slici 4.3. Slika 4.3 Relacije izmedu tablica sportski centar, korisnici, errorreport. 4.2 Funkcionalnost i dizajn Funkcionalnost aplikacije TCF se bazira na funkcionalnostima aplikacije SCF. Dorade funkcionalnosti u aplikaciji su napravljene s ciljem da se aplikacija specijali- 21

33 Poglavlje 4. Tennis Center Finder zira samo za spremanje i pronalaženje lokacija teniskih centara za razliku od unosa općenitih lokacija kao kod SCF. Stoga su dodana mogućnost za odabir vrste podloga teniskih centara koja je omogućuje korisniku da definira tip terena koji se nalaze na lokaciji koju upisuje. Daljna dorada aplikacije je pokazala neke nelogičnosti koje su morale biti ispravljene poput nedostatka mogućnosti brisanja profila i mijenjanja adrese. Time započet napredak u razvoju aplikacije u odnosu na SCF. Nakon dorade aplikacije, napravljen je redizajn izgleda aplikacije. Ideja dizajna je da se istakne bitne komponente aplikacije a ujedno i zadrži jednostavnost i preglednost. Novi dizajn i mogućnost aplikacije su prikazani na Slici 4.4. Slika 4.4 Odabir vrste podloge prilikom pretraživanja unesenih lokacija teniskih centara. 22

34 Poglavlje 5 Sports Center Finder Aplikacija je zamišljena kroz tri razine korisničkih sučelja sa pripadajućim mogućnostima: gost - neregistrirani korisnik sa mogućnostima: pregleda unesenih lokacija centara, registracije novog korisničkog računa, registrirani korisnici sa mogućnostima: pregleda unesenih lokacija centara, upute do odabrane lokacije centra, ocijenjivanje unesenih lokacija centara, komentiranja lokacije centra, pregleda i izmjena osobnih komentara, izmjene lozinke, izmjene adrese, pregeda vlastitih unosa, 23

35 Poglavlje 5. Sports Center Finder prijave pogreški administratoru, i uz sve korisnikove opcije, administrator ima ovlasti za: adimistraciju korisnika (pregled svih korisnika sa mogućnosti aktiviranja i deaktiviranja te slanje -a), administraciju centara (uredivanje i brisanje unesenih lokacija sportskih centara), dodavanje aktivnosti, brisanje i uredivanje komentara, pregled i obradu korisničkih prijava na unesene lokacije sportskih centara. 5.1 Baza podataka za SCF2 Aplikacija je povezana sa MySQL relacijskom bazom podataka sa sedam tablica pomoću PHP programskog jezika, a podaci za pristup serveru na kojem se nalazi baza podataka se nalaze u jedinstvenom PHP dokumentu. Struktura baze podataka je više puta mijenjana tijekom razvoja zbog unaprijedivanja i prilagodavanja zahtjevima aplikacije. Sukladno tome su nastale dvije tablice sa pripradjućim podacima: users jedanaest polja, od kojih se sedam odnosi na osobne podatke o korisniku a ostali informativno ili zbog programskih zahtjeva, sports center sadrži podatke o spremljenim sportskim centrima i njihove koordinate pomoću kojih se generiraju lokacije centara na Google maps kartama. Nakon toga se javila potreba za tablicom za spremanje prijava pogreški koje korisnici uočavaju tijekom pregledavanja lokacija centara. Tablica sadrži podatke poput pro- 24

36 Poglavlje 5. Sports Center Finder blema i sugestije koji su ključni za kvalitetno ažuriranje lokacija. U bazi podataka tablica je nazvana: error report sadrži korisničke kritike na upisane centre, Uvodenjem unosa aktivnosti, bilo je potrebno izraditi tablicu ( activites ) u kojoj su unesene aktivnosti i tablicu u kojoj se nalazi veza izmedu sportskog centra i pripadajućih aktivnosti. Druga tablica ( available activities ) je izradena prema teoriji relacijskih baza podataka gdje se javlja veza izmedu tablica više prema više (eng. many-to-many), uvodi se tablica (u ovom slučaju available activities) u koju se unose eksterni ključevi povezanih redova iz obje tablice ( u ovom slučaju sports center i activities ). activities sadrži popis aktivnosti, available activities aktivnosti vezane na sportske centre, Uvodenjem novog sustava kvalitete i rangiranja centara, koju izravno postavljaju sami korisnici, kreirane su dvije nove tablice. Tablica koja sadrži ocjene koje su upisali korisnici i tablica u kojoj su spremljeni komentari. Ocjene koje se unose su anonimne, dok komentari zbog mogućih uvrjedljivih sadržaja su morali zadržati upis korisničkog imena vezanog na svaki komentar. Upisom i prikazom samo korisničkog imena, postiže se djelomična anonimnost, čime samo aplikacija zadržava pravo na sankcije problematičnog korisnika. ratings sadrži ocjene koje su korisnici dodijelili centrima, comments sadrži komentare na centre koje su korisnici dodijelili. Strukture baze i relacija medu tablicama je prikazana na slici

37 Poglavlje 5. Sports Center Finder Slika 5.1 Prikaz relacijske strukture baze podatka. 5.2 Programska rješenja Pretraga Pretraga lokacija centara i njihova obrada su temeljni dijelovi aplikacije. Unos lokacija centara je alat koji će se sa vremenom sve manje koristiti tijekom popunjenja baze novim lokacijama centara čime će pretraga i kvaliteta pretraživanja dobiti puni smisao. Kvaliteta filtriranja se postiže sa jednostavnom i preglednom tražilicom sa poljima za unos poznatih odnosno željenih vrijednosti (slika 5.2). Taj dio pretrage 26

38 Poglavlje 5. Sports Center Finder programski je jednostavniji od ostatka aplikacije ali je najbitniji dio aplikacije zbog svoje funkcionalnosti. Način na koji su poredana polja za unos olakšava korisniku da uoči bitne segmente pomoću kojih će se doći do željenog rezultata. Komunikacija Slika 5.2 Izgled tražilice za pretragu sportskih centara u bazi aplikacije. sa serverom se odvija putem AJAX-a čime se postiže dinamika aplikacije. Povratne informacije sa servera su u XML formatu čime je olakšana manipulacija podacima pomoću JQuery funkcija. Ispis se u potpunosti generira dinamički, generiranjem HTML koda i stavljanjem u praznu HTML ljusku koja je predefinirana u skripti slider.php. Funkcija initializeslider () je zaslužna za AJAX pozive prema serveru i generiranje povratnih informacija u obliku statičnih sličica. Dio koda koji je zaslužan za obradu odaziva sa servera je prikazan na slici 5.3. Funkcija addinfo () je zaslužna za postavljanje markera na dinamičnu Google maps kartu, te prikaza osnovnih informacija sa ponudenim funkcionalnostima poput uputa, komentiranja, i prijavljivanja greški. Dio koda koji omogućuje ispis je prikazan na slici 5.4. Da bi se lakše razumjela struktura toka informacija i način rada pretrage, prikazan je diagram na slici

39 Poglavlje 5. Sports Center Finder Slika 5.3 Dio funkcije initializeslider () koji obraduje XML dokument i postavlja statične slike lokacija centara unutar slider-a Unos novog centra Unos novog centra je obogaćen sa novim funkcionalnostima i opcijama poput: opisa (općenito o lokaciji centra), dostupnih aktivnosti(aktivnosti koje je moguće obavljati prilikom posjete sportskom centru), provjere lokacije centra (korisnik klikom na gumb može vidjeti da li adresa koju 28

40 Poglavlje 5. Sports Center Finder Slika 5.4 Najbitniji dio funkcije addinfo () koji omogućuje dodavanje opisa klikom na centar. je upisao odgovara adresi koju je pronašao google maps), provjere upisanih vrijednosti(ukoliko nisu upisane sve obavezne vrijednosti, korisnik ne može kliknuti na upis lokacije centra), unosa formatriranih zapisa u bazu (kao adresa lokacije centra se unosi adresa koju generira google čime se smanjiva mogućnost upisa više sličnih adresa za istu lokaciju). 29

41 Poglavlje 5. Sports Center Finder Slika 5.5 Prikaz načina rada pretrage. Novim podatcima pri upisu nove lokacije centra je postignuta sistematizacija baze i točnost podataka koji se upisuju u bazu. Razlog tomu je manja količina nepotrebnih grešaka koje treba ispravljati što olakšava posao administratoru. Na primjer, korisnik, da bi unio podatke i centar mora unijeti gotovo sve točne podatke inače će upis centra biti neuspješan, što smanjuje broj unosa, broj zapisa i opterećenje aplikacije sa pretragom. Kao rezultat toga je sistematizirana baza sa smanjenim 30

42 Poglavlje 5. Sports Center Finder brojem ponavljajućih nepotrebnih unosa. Pretraga je programski ostvarena JQuery metodama koristeći AJAX asinkrone pozive čime se postiže dinamičnost aplikacije. Sistematizacija rada je prikazana na dijagramu slika 5.6. Slika 5.6 Prikaz rada web aplikacije prilikom unosa novog centra. 31

43 Poglavlje 5. Sports Center Finder Upute do centra Upute su nova funkcionalnost koja treba omogućiti da aplikacija dobije puni smisao kao korisnička aplikacija. Funkcionalnost se postiže uvodenjem Google maps JavaScript API-a sa Google directions service-om. JavaScript funkcija initialize() omogućuje inicijalizaciju map objekta i prikaza mape. Prilikom iste inicijalizacije potrebno je dodati i postaviti parametre Google Directions service-a. Dio koda koji to obavlja je prikazan na slici 5.7, a doslovno je predstavljen na Google Directions service API-u. Funkcija calcroute () s obzirom na zadani centar i upisanu polazišnu Slika 5.7 Inicijalizacija Google Directions service-a. adresu, izračunava put i prikazuje upute. nalazi na Slici 5.8 su: Objašnjenje pojedinih varijabli koje se var start - polazišna adresa, var end - odabrana lokacija centra, var request - definiranje postavki, directionsdisplay.setdirections(result) - postavljanje uputa sa rezutatom na mapu, addinfo(markedcenter) - pozivanje funkcije koja dodaje marker na mapu u slučaju da se prikazivanje uputa ne može izvesti. 32

44 Poglavlje 5. Sports Center Finder Slika 5.8 Funkcija za izračun uputa. Grafički prikaz rada rada funkcije calcroute () je prikazan na slici

45 Poglavlje 5. Sports Center Finder Slika 5.9 Grafički prikaz pozivanja i rada funkcije calcroute (). 34

46 Poglavlje 6 Upute za instalaciju U nastavku su opisani bitni koraci prilikom postavljanja aplikacije na poslužitelj. Ove upute su identične za obje aplikacije (TCF i SCF2). Redoslijed obavljanja instalacije je jako bitan stoga je preporučljivo da se drži istog. Takoder sve izmjene koje se obavljaju, potrebno je obaviti unutar direktorija aplikacije na Vašem poslužitelju. 6.1 Priprema podataka za postavljanje na poslužitelj Podatke je, ukoliko su komprimirani u nekom obliku, otpakirati i kopirati u web direktorij na vašem poslužitelju ne mijenjaući nazive direktorija ili nazive datoteka. Ukoliko niste sigurni koji je direktorij na Vašem poslužitelju web direktorij, konzultirajte se sa administratorom odnosno sa odgovarajućom dokumentacijom. Neki od najčešće korištenih naziva su: www - na bazi Windows poslužitelja, htdocs - na abzi linux poslužitelja. 35

47 Poglavlje 6. Upute za instalaciju 6.2 Postavljanje baze podataka Baza podataka se nalazi unutar direktorija u kojem su podaci cijele aplikacije u direktoriju pod nazivom baza. Unutar direktorija se nalaze dvije datoteke: baza.sql, tablice.sql. Ukoliko trebate cijelu bazu podataka, unijeti treba datoteku baza.sql odnosno ako već imate bazu podataka unijeti treba tablice.sql Postavke za spajanje sa bazom Unutar direktorija aplikacije se nalazi datoteka dbconnect.php koju je potrebno otvoriti u bilo kojem text editoru i popuniti sa podacima vašeg poslužitelja. $username = "korisničko_ime"; $password = "lozinka"; $hostname = "adresa_poslužitelja"; Ukoliko ste mijenjali naziv baze podataka, potrebno je i promijeniti naziv baze u ime vaše baze podataka (Mijenjanje naziva baze podataka nije preporučljivo jer su mogući problemi sa prepoznavanjem tablica baze podatka.). $db_selected = mysql_select_db("naziv_baze_podataka",$connection) or die(mysql_error()); Napomena! Nazivi tablica kao i nazivi stupaca trebaju ostati nepromijenjeni. Sa promijenjenim nazivima tablica i stupaca, aplikacija neće ispravno raditi. 36

48 Poglavlje 6. Upute za instalaciju 6.3 Postavke za slanje mail-a Unutar direktoija aplikacije nalazi se datoteka mailsend.php. Istu je potrebno otvoriti sa text editorom i izmijeniti sljedeće vrijednosti: protokol za autentifikaciju (npr. ssl), smtp.server.domena (npr. smtp.gmail.com), SMTP PORT (npr. 465), primjer@server.domena - adresa, lozinka - odgovarajuća lozinka, $mail->smtpsecure = "protokol_za_autentifikaciju"; $mail->host = "smtp.server.domena"; $mail->port = SMTP_PORT; $mail->username = "primjer@server.domena"; $mail->password = "lozinka"; $mail->smtpkeepalive = true; $mail->from $mail->fromname = "primjer@server.domena"; = "Administrator"; Da bi se mogao poslati, potrebno je i omogućiti ekstenzije protokola za autentifikaciju. Ukoliko se koristi ssl protokol, potrebno je omogućiti ekstenziju: extension=php_openssl.dll 37

49 Poglavlje 6. Upute za instalaciju 6.4 Početak korištenja aplikacije Kao administrator aplikacije, vaše korisničko ime je admin a lozinka admin1. S tim podacima se možete logirati u korisničko sučelje i obavljati sve administrativne poslove. Preporuča se da odmah po prvoj prijavi u korisničko sučelje izmjenite adresu i lozinku te korisničke podatke. 38

50 Poglavlje 7 Primjer korištenja Primjer korištenja aplikacije će prikazati tipične situacije u kojima će se naći korisnik i admin. Korisnik koji se registrirao može pristupiti korisničkom sučelju u kojem ima pristup komentiranju, ocijenjivanju, uputama do centra i prijavi pogreški administratoru. Prijavom korisnika i njegovim djelovanjem prilikom korištenja aplikacije administrator ima uvid sve njegove upise novih lokacija centara i komentare što administratoru omogućuje da ispravlja i uklanja pogreške, a ako je to potrebno, deaktivira korisnika! 7.1 Primjer korisničkog sučelja Korisnik prilikom prijave nailazi na sučelje kao na Slici 7.1. Ukoliko želi pretraživati centre, korisnik mora upisati vrijednosti u tražilicu na lijevoj strani. Korisnik je odlučio pretraživati grad Rijeku u kojem odabire centar Cosmo Gym izmedu ponudenih centara (Slika 7.2). Prikazani centar se nalazi nedaleko od centra Rijeke zbog čega korisnik želi vidjeti kojim putem može doći do odabrane lokacije. Korisnik to može napraviti klikom na gumb Kako do centra (Slika 7.3) i upisom adrese polaska i 39

51 Poglavlje 7. Primjer korištenja Slika 7.1 Izgled korisničkog sučelja prilikom prijave na račun. Slika 7.2 Odabir lokacije centra Cosmo Gym. klikom na gumb Uputi me (Slika 7.4) mu se prikazuju upute (Slika 7.5). Korisnik smatra da je opis centra nepotpun i odluči prijaviti pogrešku. To će učiniti klikom na gumb Prijava (Slika 7.6 ) i odabirom polja koja mu se čine nepotpunima 40

52 Poglavlje 7. Primjer korištenja Slika 7.3 Gumb kojim se mogu zatražiti upute do centra. Slika 7.4 Upis adrese polaska. upisivanjem kratkog prijedloga (Slika 7.7). 41

53 Poglavlje 7. Primjer korištenja Slika 7.5 Prikaz uputa od adrese polaska Korzo 1, Rijeka do lokacije centra Cosmo Gym. Slika 7.6 Gumb za prijavu pogreški. 42

54 Poglavlje 7. Primjer korištenja Slika 7.7 Popunjavanje obrazca za prijavu pogreške. 43

55 Poglavlje 7. Primjer korištenja 7.2 Primjer administracije centara Administrator prilikom prijavve na administratorsko sučelje pregledava prijavljene pogreške (Slika 7.8) i primjećuje prijavljenu pogrešku centra Cosmo gym. Admi- Slika 7.8 Pregled prijavljenih pogreški. nistrator će odlučiti da li je korisnik u pravu ili ne, odnosno u ovom slučaju administrator daje pravo korisniku i odluči promijeniti opis centra (Slika 7.9). Nakon izmjene, adminnistrator zahvaljuje korisniku putem mogućnosti (Slika 7.10). 44

56 Poglavlje 7. Primjer korištenja Slika 7.9 Administrator izmjenjuje prijavljene vrijednosti. Slika 7.10 Administrator piše poruku korisniku koji je prijavio pogrešku. 45

57 Poglavlje 8 Zaključak Aplikacija za vodenje lokacija sportskih centar-a je hibridna aplikacija, ostvarena na način da se oslanja na Google Maps API, koji upotpunjava većinu njenih funkcionalnosti. Uz stalno napredovanje Google Maps-a, aplikacija se može razvijati i nadogradivati doslovno svakodnevno. U periodu od početka razvoja prve verzije aplikacije do sad, Google je razvio novu verziju Google Maps API-a, pokrenuo Google Developers [17] koji donosi sučelje Google Developers Console koje je vrlo korisno pri praćenju i planiranju sljedećeg koraka razvoja. Aplikacija je razvijena u tolikoj mjeri da zadovolji tržište i odreden broj korisnika. Za daljni razvoj svakako ima mjesta. Ali da bi aplikacija radila u punom sjaju i da ne bi bilo nepotrebnih rušenja, potreban je relativno brz poslužitelj na kojem će biti postavljena. Razlog tomu je intezivna komunikacija sa serverom, koja je uz korištenje XML-a i JSON-a ubrzana maksimalno, ali ipak ne dovoljno da se bori sa slabijim internetskim vezama i sporim poslužiteljom. 46

58 Bibliografija [1] W3Schools PHP Tutorial. Dostupno na: [2] W3Schools MySQL Tutorial. Dostupno na: [3] W3Schools JavaScript Tutorial. Dostupno na: [4] W3Schools AJAX Tutorial. Dostupno na: [5] W3Schools HTML Tutorial. Dostupno na: [6] W3Schools CSS Tutorial. Dostupno na: [7] W3Schools XML Tutorial. Dostupno na: [8] W3Schools JSON Tutorial. Dostupno na: [9] NetBeans službena stranica. Dostupno na: [10] Wamp server službena stranica. Dostupno na: [11] Mysql workbench službena stranica. Dostupno na: [12] Google Chrome službena stranica. Dostupno na: [13] Mozilla Firefox službena stranica. Dostupno na: US/firefox/new/ [14] Microsoft internet explorer službena stranica. Dostupno na: 47

59 Bibliografija [15] Miran Brajša, Seminarski rad iz računalne ergonomije AJAX tehnologija, Sveučilište u Zagrebu - Fakultet elektotehnike i računarstva [16] Wikipedia - Aplication programming interface. Dostupno na: programming interface [17] Google developers službene stranice. Dostupno na: [18] Wikipedia - Geocodeing. Dostupno na: [19] Google code - PhpMailer. Dostupno na: [20] JQuery službena stranica. Dostupno na: 48