SVEUCILISTE U RIJECI
TEHNICKI FAKULTET
Preddiplomski studij racunarstva
Zavrsni rad
Web aplikacija za evidentiranje inalazenje lokacija sportskih centara
Rijeka, Srpanj, 2012. Mate Stulina
0069045897
SVEUCILISTE U RIJECI
TEHNICKI FAKULTET
Preddiplomski studij racunarstva
Zavrsni rad
Web aplikacija za evidentiranje inalazenje lokacija sportskih centara
Mentor: doc.dr.sc. Miroslav Joler
Rijeka, Srpanj, 2012. Mate Stulina
0069045897
Sadrzaj
Popis slika viii
Popis kratica x
1 Uvod 1
2 Programski jezici i alati 3
2.1 Programski jezici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.1 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.2 MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.3 Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Alati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.1 NetBeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.2 WampServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.3 Mysql Workbench . . . . . . . . . . . . . . . . . . . . . . . . . 10
v
Sadrzaj
3 Aplikacijsko programsko sucelje 11
3.1 Google developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.1.1 Google geocoding service . . . . . . . . . . . . . . . . . . . . . 13
3.1.2 Google static maps . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.3 Google maps JavaScript v3 API . . . . . . . . . . . . . . . . . 15
3.1.4 Google directions service . . . . . . . . . . . . . . . . . . . . . 16
3.1.5 PHPMailer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2 JQuery API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4 Tennis Center Finder 19
4.1 Baza podataka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2 Funkcionalnost i dizajn . . . . . . . . . . . . . . . . . . . . . . . . . . 21
5 Sports Center Finder 23
5.1 Baza podataka za SCF2 . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.2 Programska rjesenja . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.1 Pretraga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.2 Unos novog centra . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2.3 Upute do centra . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6 Upute za instalaciju 35
6.1 Priprema podataka za postavljanje na posluzitelj . . . . . . . . . . . 35
vi
Sadrzaj
6.2 Postavljanje baze podataka . . . . . . . . . . . . . . . . . . . . . . . . 36
6.2.1 Postavke za spajanje sa bazom . . . . . . . . . . . . . . . . . 36
6.3 Postavke za slanje mail-a . . . . . . . . . . . . . . . . . . . . . . . . . 37
6.4 Pocetak koristenja aplikacije . . . . . . . . . . . . . . . . . . . . . . . 38
7 Primjer koristenja 39
7.1 Primjer korisnickog sucelja . . . . . . . . . . . . . . . . . . . . . . . . 39
7.2 Primjer administracije centara . . . . . . . . . . . . . . . . . . . . . . 44
8 Zakljucak 46
Bibliografija 47
vii
Popis slika
2.1 Razlika izmedu standardne web apliakcije i aplikacije koja koristi
AJAX [15]. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Odabran i instaliran PHP modul. . . . . . . . . . . . . . . . . . . . 9
2.3 Wampserver localhost sucelje. . . . . . . . . . . . . . . . . . . . . . 10
3.1 Google API Console sucelje. . . . . . . . . . . . . . . . . . . . . . . 13
3.2 Mapa koja je rezultat zahtjeva adrese ‘Vukovarska 58, Rijeka, Hrvatska‘. 15
4.1 SCF - unos novog centra sa osnovnim podacima o centru. . . . . . . 19
4.2 TCF - unos novog centra sa mogucnosti odabira podloge teniskog
centra. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.3 Relacije izmedu tablica sportski centar, korisnici, errorreport. . . . . 21
4.4 Odabir vrste podloge prilikom pretrazivanja unesenih lokacija teni-
skih centara. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.1 Prikaz relacijske strukture baze podatka. . . . . . . . . . . . . . . . 26
5.2 Izgled trazilice za pretragu sportskih centara u bazi aplikacije. . . . . 27
viii
Popis slika
5.3 Dio funkcije initializeSlider () koji obraduje XML dokument i pos-
tavlja staticne slike lokacija centara unutar slider-a. . . . . . . . . . 28
5.4 Najbitniji dio funkcije addInfo () koji omogucuje dodavanje opisa
klikom na centar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.5 Prikaz nacina rada pretrage. . . . . . . . . . . . . . . . . . . . . . . 30
5.6 Prikaz rada web aplikacije prilikom unosa novog centra. . . . . . . . 31
5.7 Inicijalizacija Google Directions service-a. . . . . . . . . . . . . . . . 32
5.8 Funkcija za izracun uputa. . . . . . . . . . . . . . . . . . . . . . . . 33
5.9 Graficki prikaz pozivanja i rada funkcije calcRoute (). . . . . . . . . 34
7.1 Izgled korisnickog sucelja prilikom prijave na racun. . . . . . . . . . 40
7.2 Odabir lokacije centra”Cosmo Gym”. . . . . . . . . . . . . . . . . . 40
7.3 Gumb kojim se mogu zatraziti upute do centra. . . . . . . . . . . . . 41
7.4 Upis adrese polaska. . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
7.5 Prikaz uputa od adrese polaska”Korzo 1, Rijeka” do lokacije centra
”Cosmo Gym”. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
7.6 Gumb za prijavu pogreski. . . . . . . . . . . . . . . . . . . . . . . . 42
7.7 Popunjavanje obrazca za prijavu pogreske. . . . . . . . . . . . . . . 43
7.8 Pregled prijavljenih pogreski. . . . . . . . . . . . . . . . . . . . . . . 44
7.9 Administrator izmjenjuje prijavljene vrijednosti. . . . . . . . . . . . 45
7.10 Administrator pise e-mail poruku korisniku koji je prijavio pogresku. 45
ix
Kazalo
AJAX Asynchronous JavaScript and XML
API Application programming interface
CSS Cascading Style Sheets
FTP File Transfer Protocol
HTML Hypertext Markup Language
HTTP HyperText Transfer Protocol
HTTPS Hypertext Transfer Protocol Secure
GPS Global Positioning System
JS JavaScript
JSON JavaScript Object Notation
PHP Hypertext Preprocessor
SCF Sports Center Finder
SCF2 Sports Center Finder 2
SCP Secure Copy Protocol
x
Kazalo
SSL Secure Sockets Layer
TCF Tennis Center Finder
TCP Transmission Control Protocol
TLS Transport Layer Security
XML EXtensible Markup Language
xi
Poglavlje 1
Uvod
Tema zavrsnog rada je izraditi web aplikaciju koja bi omogucila pretrazivanje sport-
skih centara prema njihovoj lokaciji. Korisnici trebaju unijeti sportski centar, od-
nosno lokaciju centra koja se zatim geokodira s obzirom na upisanu adresu cime se
omogucuje daljnje prikazivanje polozaja centra na generiranim kartama. Rezultat
je realizacija aplikacije”Sports center finder” (SCF) odnosno njene konacne verzije
”Sports center finder 2” (SCF2).
Pocetak razvoja je prva verzija za opci unos sportskih centara (”Sports center
finder” - SCF) koja je temelj razvoja. Nastavak razvoja je prosirivanje pretrage i
unosa doradom aplikacije za pretragu teniskih centara (”Tennis center finder” - TCF),
a posljednja verzija je obogacena novim rjesenjima, funkcionalnostima i dizajnom.
Cijela aplikacija je zamisljena i organizirana u tri korisnicke razine da bi se
ogranicilo mogucnosti korisnika i sprijecilo neprimjerno koristenje aplikacije. Stoga
su tri korisnicke razine organizirane kao:
• gost u kojoj ce svaki korisnik moci koristiti samo opciju pregledavanja centara,
• registrirani korisnik u kojoj ce korisnik morati imati svoj racun te ce moci
1
Poglavlje 1. Uvod
koristiti uz vec navedenu opciju pregleda i opciju unosa novih lokacija centara,
• administrator odnosno korisnik koji ce odrzavati bazu podataka web aplika-
cije.
Dodatne mogucnosti za registrirane korisnike su komentiranje i ocjenjivanje centara
(kojima je ujedno uveden i”sustav kvalitete” unosa), upute do centra, pregled vlas-
titih unosa i mogucnost izmjene osobnih podataka.
2
Poglavlje 2
Programski jezici i alati
Prilikom izrade aplikacije koristeni su sljedeci programski jezici:
• PHP 5.2/5.3 [1],
• MySQL 5.5.24 [2],
• JavaScript [3],
• AJAX [4],
Skriptni jezici kojima se generira sadrzaj i osvaruje komunikacija posluzitelj-korisnik
su:
• HTML 5 [5],
• CSS 3 [6],
• JSON [8],
• XML [7].
3
Poglavlje 2. Programski jezici i alati
U izradi koda i osmisljavanju baze su koristeni programski alati:
• WampServer [10],
• NetBeans 7.1.2 [9],
• MySQL Workbench 5.2.40 [11].
Za testiranje i otklanjanje poteskoca na aplikacijama su koristeni web preglednici:
• Google Chrome [12],
• Mozilla Firefox [13],
• Microsoft Internet Explorer [14].
2.1 Programski jezici
2.1.1 PHP
PHP [1] (Hypertext Preprocessor) je objektno-orijentiran programski jezik namije-
njen prvenstveno programiranju posluziteljske strane (eng. server side) web aplika-
cije. PHP je jedan od najzastupljenijih programskih jezika za programiranje web
aplikacija. Vrline su mu da je jako slican C programskom jeziku i lak za pamcenje.
Ukratko nakon sluzbenog izdanja prvotna verzija”PHP/FI 2.0“ u studenom ‘97,
je zamijenjena prvom alfa verzijom PHP-a 3 (PHP3). Postoje trenutno 3 sluzbene
verzije ovog programskog jezika:
• PHP3
• PHP4
4
Poglavlje 2. Programski jezici i alati
• PHP5
Sintaksa prve verzije je bila slicna 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 pocinju 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 inacica Jave za izradu web aplikacija,
• ASP - razvijen od strane Microsofta,
• CFM - ”ColdFusion” tvrtke Adobe.
Naravno, moguce je i jezicima opce namjene kreirati web aplikacije, bio to C, Perl
ili cak Fortran.
I u Hrvatskoj postoje portali orijentirani PHP-u:
• http://www.php.hr - Udruga PHP programera Hrvatske,
• http://www.PHP.com.hr - Nesluzbena hrvatska PHP stranica.
2.1.2 MySQL
MySQL [2] je besplatan open source sustav za upravljanje bazom podataka. MySQL
baza je slobodna za vecinu uporaba. Ranije u svom razvoju, MySQL baza podataka
5
Poglavlje 2. Programski jezici i alati
suocila 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 podrsku od brojnih programskih jezika:
PHP, Java , Perl, Python itd. MySQL baze su relacijskog tipa, koji se pokazao
kao najbolji nacin skladistenja i pretrazivanja velikih kolicina podataka i u sustini
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 trzista jer su open source. Relacijski sustavi za
pohranu podataka kao sto je MySQL sve podatke pohranjuju unutar tablica koje
se sastoje od kolona i redova. Kolone se nazivaju jos i poljima ili atributima, a
sluze za skladistenje pojedinih podataka o odredenom entitetu, redovi se nazivaju
jos zapisima ili slogovima (eng. record) i sadrze sve podatke jednog entiteta. Teorija
o bazama podataka je precizno definirana matematickim pravilima pocetkom 70-ih.
2.1.3 Javascript
JavaScript [3] je skriptni programski jezik, koji se izvrsava u web pregledniku na
strani korisnika. Napravljen je da bude slican Javi, zbog laksega koristenja, ali
nije objektno orijentiran kao Java, vec se temelji na prototipu i tu prestaje svaka
povezanost s programskim jezikom Java. Izvorno ga je razvila tvrtka Netscape
(www.netscape.com). JavaScript je primjena ECMAScript standarda. JavaScript
s AJAX (Asynchronous JavaScript and XML) tehnikom omogucuje web stranicama
komunikaciju sa serverskim programom, sto cini web aplikaciju interaktivnijom i
laksom za koristenje. Ostvarivanje web aplikacija brzinom slicnih desktop aplikaci-
jama, napokon je omoguceno uvodenjem i razvojem AJAX-a [4]. Kod uobicajenih
web aplikacija, korisnik ispunjava obrazac te salje posluzitelju na obradu odabirom
”submit” akcije. Nakon potvrde, cijeli HTML obrazac se salje posluzitelju, posluzitelj
predaje podatke na obradu odredenoj skripti (uglavnom PHP), te nakon obrade
6
Poglavlje 2. Programski jezici i alati
vraca pregledniku potpuno novu stranicu. Naravno, dok proces obrade podataka
traje, korisnici su prisiljeni cekati neko vrijeme. Tu se ocituje jedan od nedosta-
taka standardnih web aplikacija a to je relativno spor odgovor na zahtjev korisnika
(brzina ovisi o kolicini podataka koje je potrebno obraditi) te korisnici nisu informi-
rani o statusu poslanih podataka. Nisu u mogucnosti znati da li je cekanje rezultat
opterecenosti posluzitelja, spore veze ili je pak posrijedi nesto trece. Uglavnom,
nedostaje trenutna povratna informacija nakon slanja podataka na obradu. AJAX
postavlja JavaScript tehnologiju i XMLHttpRequest objekt”izmedu” web forme i
posluzitelja. Nakon sto korisnik zavrsi sa unosom podataka u obrazac, oni se salju
JavaScript skripti, a ne direktno na posluzitelj. Tada sama skripta salje podatke
posluzitelju na obradu, te korisnik uopce nije svjestan ikakvog toka obrade poda-
taka, ako se stranica u pregledniku ne osvjezava. Razlog tome je sto JavaScript salje
podatke asinkrono odnosno korisnik ne mora cekati na odgovor posluzitelja da bi mo-
gao nastaviti s radom. On i dalje moze popunjavati forme, koristiti stranicu a podaci
se salju odnosno primaju u pozadini. Ta razlika je u radu izmedu standardnog nacina
rada i AJAX-a je prikazana na Slici 2.1 . Nakon obrade, posluzitelj vraca podatke
JavaScript funkciji koja odlucuje sto s njima dalje napraviti. Ona moze upotpuniti
polja obrazca, dodati sadrzaj stranici ili nesto trece i to sve obavlja trenutno sto
rezultira povecanom brzinom (kako nije svaki put potrebno prenositi cijelu stranicu
do posluzitelja i natrag) te korisniku daje dojam trenutnog odaziva na koji je navikao
koristeci desktop aplikacije. JavaScript funkcija cak moze primiti podatke, provesti
njihove obrade, poslati novi zahtjev posluzitelju i to sve bez ikakve potrebe za inter-
vencijom korisnika. Rezultat je dinamicna i brza web stranica sa visokim stupnjem
interakcije poput standardne desktop aplikacije sa svim prednostima nad njom koje
pruza Internet.
7
Poglavlje 2. Programski jezici i alati
Slika 2.1 Razlika izmedu standardne web apliakcije i aplikacije koja koristi AJAX[15].
2.2 Alati
2.2.1 NetBeans
NetBeans [9] je open source razvojni alat baziran programiran i baziran na Java
programskom jeziku. Alat je dizajniran kao modularan software zbog cega korisnik
moze optimizirati sucelje 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 koristen je modul za PHP
razvojno okruzje. Na Slici 2.2 je prikazan odabir PHP modula.
8
Poglavlje 2. Programski jezici i alati
Slika 2.2 Odabran i instaliran PHP modul.
2.2.2 WampServer
WampServer [10] je lokalni web server za Windows operativne sustave koji podrzava
Apache2, PHP i MySQL. Trenutne verzije WampServer-a poboljsane su verzije i
nastavak razvoja WAMP inacice. WAMP-ove inacice za ostale operativne sustave
su MAMP ( Apple Mac Os ) i LAMP ( Linux bazirani sustavi ). WampServer
instalacijski paket posjeduje:
• phpMyAdmin – sucelje za manipulaciju sa MySQL bazom,
• MySQL Buddy – sucelje za odrzavanje i optimizaciju baza,
• Webgrind – alat za profiliranje web aplikacija.
Na Slici 2.3 je prikazano ‘localhost‘ sucelje.
9
Poglavlje 2. Programski jezici i alati
Slika 2.3 Wampserver localhost sucelje.
2.2.3 Mysql Workbench
MySQL Workbench [11] je opensource aplikacija za dizajniranje i optimiziranje MySQL
baza podataka. Velika je pomoc pri projektiranju baze podataka. Posjeduje jednos-
tavne i korisne alate kojima se vrlo lako moze postici rezultat. Moguce je i napraviti
relacijske diagrame automatski generirane prema relacijskoj strukturi baze podataka.
10
Poglavlje 3
Aplikacijsko programsko sucelje
Aplikacijsko programsko sucelje [16] (eng. API - Application Programming Interface)
ili sucelje za programiranje aplikacija je skup odredenih pravila i specifikacija koje
programeri slijede kako bi se mogli sluziti uslugama ili resursima operacijskog sustava
ili nekog drugog slozenog 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 sucelja dok specificni API-i
dolaze s programskim paketima posebne namjene kao sto su Google Maps, MySQL
i Facebook Platform. Koristenjem API-a omogucava se da programeri koriste rad
drugih programera stedeci vrijeme a u vecini slucajeva i novac koji je potreban da se
napise slozeni program. Napretkom u operacijskim sustavima, a osobito u grafickom
korisnickom sucelju, API je nezaobilazan u stvaranju novih aplikacija. Umjesto da
se novi programi pisu iz temelja, programeri nastavljaju na radu drugih te njihovim
kombinacijama u vrlo kratkom roku stvaraju nesto sto sami ne bi mogli ni zamisliti.
Prilikom izrade TCF i SCF aplikacije su koristeni sljedeci servisi i API-ji:
• Google Code / Google Developers:
– Google geocoding service,
11
Poglavlje 3. Aplikacijsko programsko sucelje
– 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
zele iskoristiti mogucnosti koje pruza Google prilikom razvoja vlastitih projekata.
Google developers odnosno google code nudi dvije osnovne razine koda, API za pri-
vatne korisnike i API za poslovne korisnike koji predvidaju da ce koristiti velike
resurse. Bitna razlika u ponudi opcija i mogucnosti ne postoji ali ukoliko ste pos-
lovni korisnik, Google ce vam posvetiti posebnu paznju i potporu. Privatni korisnik
odnosno fizicka osoba koja koristi google API u nekomercijalne svrhe ima limite, koje
ukoliko vas sputavaju mozete ukinuti na nacin da placate svako prekoracenje dozvo-
ljenog limita. U svrhu boljeg pracenja i odrzavanja koristenih Google API-ja, Google
je stvorio Google API Console prikazano na Slici 3.1. To je jedinstveno sucelje kojime
se moze pratiti sav promet preko koristenih API-ja, pregled koristenja, pregled na-
placenih zahtjeva i sl. Na Google developers sluzbenoj stranici [17] mogu se pronaci
svi sluzbeni API-ji koje nudi Google u svojoj ponudi. Google Maps API sadrzava
vecinu API-ja koristenog u realiziranju web aplikacija TCF i SCF2. Google Maps
je trenutno najveci svjetski web servis orijentiran na mapiranje zemljine povrsine.
Usporedno sa razvojem i sve vecom pokrivenosti zemljine povrsine sa mapiranim
podatcima, Google je razvio vlastite usluge, servise i API-je. Prilikom razvoja apli-
kacija u aplikacije se”ugraduje” Google Maps API, prilagodava potrebama aplikacije
i dizajna.
12
Poglavlje 3. Aplikacijsko programsko sucelje
Slika 3.1 Google API Console sucelje.
3.1.1 Google geocoding service
Geokodiranje [18] (eng. geocoding) je proces nalazenja odgovarajucih zemljopisnih
koordinata (izrazenih kao zemljopisna duzina i sirina) prema drugim zemljopisnim
podatcima kao sto su adrese ulica, postanski brojevi itd. Sa zemljopisnim koordina-
tama moguce je mapirati i generirati zemljovide i karte u Geografskim informacijskim
sustavima (Geographic Information Systems ) ili ih upotrijebiti za oznacavanje (eng.
geotagging) pozicija na kartama. Postoji i takozvana opcija reverznog geokodira-
nja (eng. reverse geocoding) gdje se iz zemljopisnih koordinata generiraju adrese.
Google geocoder API je web servis koji pomaze u procesu geokodiranja. Interpo-
lacija adresa je jednostavna metoda geokodiranja. Ova metoda koristi podatke iz
geografskih informacijskih sustava koji su vec mapirani u geografskom koordinatnom
prostoru. Svaka ulica je segment kojem je dodan atribut broj. Geocoding uzima tu
adresu, pronalazi odgovarajuci segment i zatim interpolira koordinate adrese unutar
13
Poglavlje 3. Aplikacijsko programsko sucelje
tog segmenta ovisno ukupnom rasponu adresa unutar tog segmenta. Jedan od ostalih
nacina geokodiranja je centroid ili postavljanje koordinata u centar parcele, ukoliko
su dostupni podaci u bazi podataka geografskog sustava. U ruralnim ili nekim dru-
gim podrucjima nedostatak visoko kvalitetnih podataka i adresiranja uglavnom nije
moguc pa se tu koristi GPS sustav za mapiranje karata. No ovaj nacin nije dobar
iz razloga sto se dogadaju slucajevi gdje je nepreciznost generiranja koordinata ve-
lika zbog velikih dimenzija parcela ili referentnih tocaka. Istrazivanja su uvela novi
pristup kontroli i unapredivanju baza podataka, koristenjem paradigme bazirane na
agentima. Kao dopuna geocoding-u, razvijene su dodatne tehnike i kontrolni algo-
ritmi. Taj pristup su geografski elementi koje pronalaze individualni agenti (ugl.
korisnici usluge) a omogucuju maksimalno priblizavanje istinitosti prikaza. Geoko-
dirane lokacije su korisne u mnogim analizama geografskih informacijskih sustava i
kartografskih zadataka. Takoder geokodiranje je sveprisutno i raznim web aplikaci-
jama i servisima.
3.1.2 Google static maps
Google Static Maps V2 su staticne mape koje generira Google API prilikom slanja
HTTP zahtjeva prema Google Maps serverima za zeljenu lokaciju. Mape koje su ge-
nerirane su u slikovnom formatu i kao takve se ne mogu mijenjati te Google zadrzava
pravo na svaku kopiju doticne slike/mape. Moguce je potrazivati mapu lokacije upi-
som tekst naziva lokacije ili pomocu zemljopisnih koordinata. Google Static Maps
podlijeze ogranicenom broju zahtjeva prema serveru na dan. Trenutni dnevni limt
je 5000/dan (pet tisuca dnevno), a ukoliko korisnik Google Static Maps API-ja zeli,
moze omoguciti naplatu ukoliko se prekoraci dnevno ogranicenje. U primjeru dolje
je primjer web adrese pomocu koje se generira slika prikazana na Slici 3.2 sa mapom:
http://maps.googleapis.com/maps/api/staticmap?
14
Poglavlje 3. Aplikacijsko programsko sucelje
center=Vukovarska%2058,%20Rijeka,Croatia&zoom=16&size=500x300
&maptype=roadmap
&markers=color:blue%7Clabel:Tehni%C4%8Dki%20faklutet%20rijeka
%7C45.336140,14.425191
&sensor=false
Slika 3.2 Mapa koja je rezultat zahtjeva adrese ‘Vukovarska 58, Rijeka, Hrvatska‘.
3.1.3 Google maps JavaScript v3 API
Google maps JavaScript API omogucuje postavljanje interaktivnih Google mapa
na web aplikacije korisnika i razvojnih web programera. Trenutna sluzbena API
verzija 3 (tri) je dizajnirana da bude brza, prilagodljiva mobilnim aplikacijama, a
istovremeno i tradicionalnim desktop aplikacijama. Google maps JavaScript API
osigurava nekoliko nacina manipulacije mapama (npr. na sluzbenoj stranici Google
Maps-a http://maps.google.com) kao i dodavanja sadrzaja pomocu razlicitih web
servisa kao sto 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
Poglavlje 3. Aplikacijsko programsko sucelje
Google zadrzava sva prava na kod, kao i na pravo oglasavanje na sadrzaju koji je
generiran putem Google maps API-ja.
3.1.4 Google directions service
Google directions service je web servis koji proracunava put izmedu dvije zadane
lokacije koristeci HTTP zahtjeve i prikazuje upute ukoliko je to moguce i programski
se nadograduje na Google Maps JavaScript V3 API. Korisnik moze pretrazivati upute
ovisno o nacinu putovanja (javnim prijevozom, autom, biciklom, pjeske). Directions
mogu prikazivati nazive i imena polazista, i destinacije kao tekst ili kao zemljopisne
koordinate. Takoder ukoliko programer zeli prikazati i taj dio, directions nudi i ispis
lokacija koje su na putu izmedu dvije zadane lokacije. Time se omogucuje i olaksava
planiranje putovanja. Buduci da je proracun puta izmedu dvije tocke vrlo zahtjevan
i spor proces, predlaze se da se upute zahtijevaju i proracunavaju unaprijed ukoliko
je to moguce ili da se korisnika upozna sa problemom da ne dolazi do nesporazuma.
3.1.5 PHPMailer
PHPMailer [19] je PHP e-mail transportna klasa koja sadrzi opcije poput slanja
poruka putem SMTP protokola, HTML poruka, moguceg dodavanja priloga e-mail
poruci itd. Moguce je slati e-mail poruke preko PHP mail() funkcije, Qmail-a ili
direktno preko SMTP klase. Kao dodatne mogucnosti transporta je moguce dodati
i slanje SMS poruka, dok je slanje MMS poruka u razvoju, ali se ocekuje ubrzo.
Implementacija PHPMailer-a je vrlo jednostavna PHP skripta u kojoj se na-
mjestaju osnovne postavke koje su potrebne za slanje poruke. Iako je PHPMa-
iler u osnovi samostalna aplikacija-server za slanje e-mail poruka potrebno je imati
korisnicki racun sa e-mail adresom i lozinkom na nekom od e-mail servisa (npr.
16
Poglavlje 3. Aplikacijsko programsko sucelje
”GMail”,
”Hotmail”,
”Yahoo” itd.).
3.2 JQuery API
JQuery [20] je open source JavaScript knjiznica dizajnirana kako bi se pojednostavilo
manipuliranje sa HTML sadrzajem. Funkcije u JQuery-u funkcioniraju na principu
event-a i element-a. Jednostavne funkcije omogucuju klijentu vise-manje standardizi-
ran upis i programiranje dinamicno-mijenjanog sadrzaja. JQuery omogucuje razvoj-
nim programerima razvoj vlastitih funkcija, plug-ina. Time se postize niza razina
korisnicke interakcije sa web aplikacijom pomocu animiranja sucelja, dok je moguca
i napredna razina koristenjem efekata, tematskih widget-a i sl. JQuery knjiznica
se dodaje u HTML dokument unutar <head> tag-a pomocu standardnog <script>
taga. Moguce je kao izbor navesti i web adresu na kojoj se nalazi zadnja stabilna
verzija skripte.
<script type="text/javascript" src="js/jquery-1.7.2.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
Poglavlje 3. Aplikacijsko programsko sucelje
Primjer prikazuje JavaScript JQuery koda cija funkcionalnost je ’skrivanje’ HTML
elementa kad kliknemo na istog.
18
Poglavlje 4
Tennis Center Finder
Aplikacija je nastala razvojem aplikacije”Sports center finder”, projekt
”Web sucelje
za vodenje lokacija sportskih centara”. SCF aplikacija omogucuje upis i pretragu lo-
kacija sportskih centara bez ikakvog detaljnijeg opisa lokacije osim adresom i nazvom
centra ( Slika 4.1 ). Korisnik prilikom unosa lokacije nije bio u mogucnosti 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 ogranicenost polja
19
Poglavlje 4. Tennis Center Finder
za upis zbog cega nastao TCF. Cilj TCF aplikacije je da korisnik ima mogucnost
unosa lokacije teniskog centra ali i mogucnost odabira podloge centra kojeg upisuje
( Slika 4.2 ). Osnovne funkcionalnosti aplikacije uglavnom su ostale nepromijenjene
Slika 4.2 TCF - unos novog centra sa mogucnosti odabira podloge teniskog centra.
u odnosu na originalnu aplikaciju, a sadrzavaju istu strukturu korisnickog sucelja i
ovlasti. Dok je prilikom obrade aplikacije, fokus bio na izmjeni baze i dodavanju
mogucnosti odabira vrste teniskih podloga, dorade profila, koristenih 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 mogucnostima. Baza podataka se sastoji od 3 osnovne
tablice:
• sportski centar - sadrzi podatke o upisanoj lokaciji centra,
• korisnici - sadrzi podatke o korisnicima,
20
Poglavlje 4. Tennis Center Finder
• errorreport - sadrzi upisane prijave o greskama 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 sluzi 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. Do-
rade funkcionalnosti u aplikaciji su napravljene s ciljem da se aplikacija specijali-
21
Poglavlje 4. Tennis Center Finder
zira samo za spremanje i pronalazenje lokacija teniskih centara za razliku od unosa
opcenitih lokacija kao kod SCF. Stoga su dodana mogucnost za odabir vrste podloga
teniskih centara koja je omogucuje korisniku da definira tip terena koji se nalaze
na lokaciji koju upisuje. Daljna dorada aplikacije je pokazala neke nelogicnosti koje
su morale biti ispravljene poput nedostatka mogucnosti brisanja profila i mijenjanja
e-mail adrese. Time zapocet 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 zadrzi jednostavnost i preglednost.
Novi dizajn i mogucnost aplikacije su prikazani na Slici 4.4 .
Slika 4.4 Odabir vrste podloge prilikom pretrazivanja unesenih lokacija teniskih cen-tara.
22
Poglavlje 5
Sports Center Finder
Aplikacija je zamisljena kroz tri razine korisnickih sucelja sa pripadajucim mogucnostima:
• gost - neregistrirani korisnik sa mogucnostima:
– pregleda unesenih lokacija centara,
– registracije novog korisnickog racuna,
• registrirani korisnici sa mogucnostima:
– pregleda unesenih lokacija centara,
– upute do odabrane lokacije centra,
– ocijenjivanje unesenih lokacija centara,
– komentiranja lokacije centra,
– pregleda i izmjena osobnih komentara,
– izmjene lozinke,
– izmjene e-mail adrese,
– pregeda vlastitih unosa,
23
Poglavlje 5. Sports Center Finder
– prijave pogreski administratoru,
• i uz sve korisnikove opcije, administrator ima ovlasti za:
– adimistraciju korisnika (pregled svih korisnika sa mogucnosti aktiviranja
i deaktiviranja te slanje e-mail-a),
– administraciju centara (uredivanje i brisanje unesenih lokacija sportskih
centara),
– dodavanje aktivnosti,
– brisanje i uredivanje komentara,
– pregled i obradu korisnickih prijava na unesene lokacije sportskih centara.
5.1 Baza podataka za SCF2
Aplikacija je povezana sa MySQL relacijskom bazom podataka sa sedam tablica
pomocu PHP programskog jezika, a podaci za pristup serveru na kojem se nalazi baza
podataka se nalaze u jedinstvenom PHP dokumentu. Struktura baze podataka je
vise puta mijenjana tijekom razvoja zbog unaprijedivanja i prilagodavanja zahtjevima
aplikacije. Sukladno tome su nastale dvije tablice sa pripradjucim podacima:
• users – jedanaest polja, od kojih se sedam odnosi na osobne podatke o korisniku
a ostali informativno ili zbog programskih zahtjeva,
• sports center – sadrzi podatke o spremljenim sportskim centrima i njihove ko-
ordinate pomocu kojih se generiraju lokacije centara na Google maps kartama.
Nakon toga se javila potreba za tablicom za spremanje prijava pogreski koje korisnici
uocavaju tijekom pregledavanja lokacija centara. Tablica sadrzi podatke poput pro-
24
Poglavlje 5. Sports Center Finder
blema i sugestije koji su kljucni za kvalitetno azuriranje lokacija. U bazi podataka
tablica je nazvana:
• error report – sadrzi korisnicke 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
pripadajucih aktivnosti. Druga tablica (”available activities”) je izradena prema
teoriji relacijskih baza podataka gdje se javlja veza izmedu tablica”vise prema vise”
(eng. many-to-many), uvodi se tablica (u ovom slucaju available activities) u koju se
unose eksterni kljucevi povezanih redova iz obje tablice ( u ovom slucaju sports center
i activities ).
• activities – sadrzi 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 sadrzi ocjene koje su
upisali korisnici i tablica u kojoj su spremljeni komentari. Ocjene koje se unose su
anonimne, dok komentari zbog mogucih uvrjedljivih sadrzaja su morali zadrzati upis
korisnickog imena vezanog na svaki komentar. Upisom i prikazom samo korisnickog
imena, postize se djelomicna anonimnost, cime samo aplikacija zadrzava pravo na
sankcije problematicnog korisnika.
• ratings – sadrzi ocjene koje su korisnici dodijelili centrima,
• comments – sadrzi komentare na centre koje su korisnici dodijelili.
Strukture baze i relacija medu tablicama je prikazana na slici 5.1.
25
Poglavlje 5. Sports Center Finder
Slika 5.1 Prikaz relacijske strukture baze podatka.
5.2 Programska rjesenja
5.2.1 Pretraga
Pretraga lokacija centara i njihova obrada su temeljni dijelovi aplikacije. Unos loka-
cija centara je alat koji ce se sa vremenom sve manje koristiti tijekom popunjenja
baze novim lokacijama centara cime ce pretraga i kvaliteta pretrazivanja dobiti puni
smisao. Kvaliteta filtriranja se postize sa jednostavnom i preglednom trazilicom sa
poljima za unos”poznatih” odnosno zeljenih vrijednosti (slika 5.2). Taj dio pretrage
26
Poglavlje 5. Sports Center Finder
programski je jednostavniji od ostatka aplikacije ali je najbitniji dio aplikacije zbog
svoje funkcionalnosti. Nacin na koji su poredana polja za unos olaksava korisniku
da uoci bitne segmente pomocu kojih ce se doci do zeljenog rezultata. Komunikacija
Slika 5.2 Izgled trazilice za pretragu sportskih centara u bazi aplikacije.
sa serverom se odvija putem AJAX-a cime se postize dinamika aplikacije. Povratne
informacije sa servera su u XML formatu cime je olaksana manipulacija podacima
pomocu JQuery funkcija. Ispis se u potpunosti generira dinamicki, generiranjem
HTML koda i stavljanjem u”praznu HTML ljusku“ koja je predefinirana u skripti
slider.php. Funkcija initializeSlider () je zasluzna za AJAX pozive prema serveru i
generiranje povratnih informacija u obliku staticnih slicica. Dio koda koji je zasluzan
za obradu odaziva sa servera je prikazan na slici 5.3. Funkcija addInfo () je zasluzna
za postavljanje markera na dinamicnu Google maps kartu, te prikaza osnovnih infor-
macija sa ponudenim funkcionalnostima poput uputa, komentiranja, i prijavljivanja
greski. Dio koda koji omogucuje ispis je prikazan na slici 5.4. Da bi se lakse ra-
zumjela struktura toka informacija i nacin rada pretrage, prikazan je diagram na
slici 5.5.
27
Poglavlje 5. Sports Center Finder
Slika 5.3 Dio funkcije initializeSlider () koji obraduje XML dokument i postavljastaticne slike lokacija centara unutar slider-a.
5.2.2 Unos novog centra
Unos novog centra je obogacen sa novim funkcionalnostima i opcijama poput:
• opisa (opcenito o lokaciji centra),
• dostupnih aktivnosti(aktivnosti koje je moguce obavljati prilikom posjete sport-
skom centru),
• provjere lokacije centra (korisnik klikom na gumb moze vidjeti da li adresa koju
28
Poglavlje 5. Sports Center Finder
Slika 5.4 Najbitniji dio funkcije addInfo () koji omogucuje dodavanje opisa klikomna centar.
je upisao odgovara adresi koju je pronasao google maps),
• provjere upisanih vrijednosti(ukoliko nisu upisane sve obavezne vrijednosti, ko-
risnik ne moze kliknuti na upis lokacije centra),
• unosa formatriranih zapisa u bazu (kao adresa lokacije centra se unosi adresa
koju generira google cime se smanjiva mogucnost upisa vise slicnih adresa za
istu lokaciju).
29
Poglavlje 5. Sports Center Finder
Slika 5.5 Prikaz nacina rada pretrage.
Novim podatcima pri upisu nove lokacije centra je postignuta sistematizacija baze i
tocnost podataka koji se upisuju u bazu. Razlog tomu je manja kolicina nepotreb-
nih gresaka koje treba ispravljati sto olaksava posao administratoru. Na primjer,
korisnik, da bi unio podatke i centar mora unijeti gotovo sve tocne podatke inace
ce upis centra biti neuspjesan, sto smanjuje broj unosa, broj zapisa i opterecenje
aplikacije sa pretragom. Kao rezultat toga je sistematizirana baza sa smanjenim
30
Poglavlje 5. Sports Center Finder
brojem ponavljajucih nepotrebnih unosa. Pretraga je programski ostvarena JQuery
metodama koristeci AJAX asinkrone pozive cime se postize dinamicnost aplikacije.
Sistematizacija rada je prikazana na dijagramu slika 5.6 .
Slika 5.6 Prikaz rada web aplikacije prilikom unosa novog centra.
31
Poglavlje 5. Sports Center Finder
5.2.3 Upute do centra
Upute su nova funkcionalnost koja treba omoguciti da aplikacija dobije puni smi-
sao kao korisnicka aplikacija. Funkcionalnost se postize uvodenjem Google maps
JavaScript API-a sa Google directions service-om. JavaScript funkcija initialize()
omogucuje 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 polazisnu
Slika 5.7 Inicijalizacija Google Directions service-a.
adresu, izracunava put i prikazuje upute. Objasnjenje pojedinih varijabli koje se
nalazi na Slici 5.8 su:
• var start - polazisna adresa,
• var end - odabrana lokacija centra,
• var request - definiranje postavki,
• directionsDisplay.setDirections(result) - postavljanje uputa sa rezuta-
tom na mapu,
• addInfo(markedCenter) - pozivanje funkcije koja dodaje marker na mapu u
slucaju da se prikazivanje uputa ne moze izvesti.
32
Poglavlje 5. Sports Center Finder
Slika 5.8 Funkcija za izracun uputa.
Graficki prikaz rada rada funkcije calcRoute () je prikazan na slici 5.9
33
Poglavlje 5. Sports Center Finder
Slika 5.9 Graficki prikaz pozivanja i rada funkcije calcRoute ().
34
Poglavlje 6
Upute za instalaciju
U nastavku su opisani bitni koraci prilikom postavljanja aplikacije na posluzitelj. Ove
upute su identicne za obje aplikacije (TCF i SCF2). Redoslijed obavljanja instalacije
je jako bitan stoga je preporucljivo da se drzi istog. Takoder sve izmjene koje se
obavljaju, potrebno je obaviti unutar direktorija aplikacije na Vasem posluzitelju.
6.1 Priprema podataka za postavljanje na posluzitelj
Podatke je, ukoliko su komprimirani u nekom obliku, otpakirati i kopirati u web
direktorij na vasem posluzitelju ne mijenjauci nazive direktorija ili nazive da-
toteka. Ukoliko niste sigurni koji je direktorij na Vasem posluzitelju web direktorij,
konzultirajte se sa administratorom odnosno sa odgovarajucom dokumentacijom.
Neki od najcesce koristenih naziva su:
• www - na bazi Windows posluzitelja,
• htdocs - na abzi linux posluzitelja.
35
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
vec imate bazu podataka unijeti treba tablice.sql.
6.2.1 Postavke za spajanje sa bazom
Unutar direktorija aplikacije se nalazi datoteka dbConnect.php koju je potrebno otvo-
riti u bilo kojem text editoru i popuniti sa podacima vaseg posluzitelja.
$username = "korisnicko_ime";
$password = "lozinka";
$hostname = "adresa_posluzitelja";
Ukoliko ste mijenjali naziv baze podataka, potrebno je i promijeniti naziv baze u
ime vase baze podataka (Mijenjanje naziva baze podataka nije preporucljivo jer su
moguci 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 nece ispravno raditi.
36
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 sljedece vrijednosti:
• protokol za autentifikaciju (npr. ssl),
• smtp.server.domena (npr. smtp.gmail.com),
• SMTP PORT (npr. 465),
• [email protected] - e-mail adresa,
• lozinka - odgovarajuca lozinka,
$mail->SMTPSecure = "protokol_za_autentifikaciju";
$mail->Host = "smtp.server.domena";
$mail->Port = SMTP_PORT;
$mail->Username = "[email protected]";
$mail->Password = "lozinka";
$mail->SMTPKeepAlive = true;
$mail->From = "[email protected]";
$mail->FromName = "Administrator";
Da bi se e-mail mogao poslati, potrebno je i omoguciti ekstenzije protokola za
autentifikaciju. Ukoliko se koristi ssl protokol, potrebno je omoguciti ekstenziju:
extension=php_openssl.dll
37
Poglavlje 6. Upute za instalaciju
6.4 Pocetak koristenja aplikacije
Kao administrator aplikacije, vase korisnicko ime je”admin” a lozinka
”admin1”. S
tim podacima se mozete logirati u korisnicko sucelje i obavljati sve administrativne
poslove. Preporuca se da odmah po prvoj prijavi u korisnicko sucelje izmjenite e-mail
adresu i lozinku te korisnicke podatke.
38
Poglavlje 7
Primjer koristenja
Primjer koristenja aplikacije ce prikazati tipicne situacije u kojima ce se naci ko-
risnik i admin. Korisnik koji se registrirao moze pristupiti korisnickom sucelju u
kojem ima pristup komentiranju, ocijenjivanju, uputama do centra i prijavi pogreski
administratoru. Prijavom korisnika i njegovim djelovanjem prilikom koristenja apli-
kacije administrator ima uvid sve njegove upise novih lokacija centara i komentare
sto administratoru omogucuje da ispravlja i uklanja pogreske, a ako je to potrebno,
deaktivira korisnika!
7.1 Primjer korisnickog sucelja
Korisnik prilikom prijave nailazi na sucelje kao na Slici 7.1. Ukoliko zeli pretrazivati
centre, korisnik mora upisati vrijednosti u trazilicu na lijevoj strani. Korisnik je
odlucio pretrazivati grad Rijeku u kojem odabire centar Cosmo Gym izmedu ponudenih
centara (Slika 7.2). Prikazani centar se nalazi nedaleko od centra Rijeke zbog cega
korisnik zeli vidjeti kojim putem moze doci do odabrane lokacije. Korisnik to moze
napraviti klikom na gumb”Kako do centra” (Slika 7.3) i upisom adrese polaska i
39
Poglavlje 7. Primjer koristenja
Slika 7.1 Izgled korisnickog sucelja prilikom prijave na racun.
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 odluci prijaviti pogresku. To ce uciniti kli-
kom na gumb”Prijava” (Slika 7.6 ) i odabirom polja koja mu se cine nepotpunima
40
Poglavlje 7. Primjer koristenja
Slika 7.3 Gumb kojim se mogu zatraziti upute do centra.
Slika 7.4 Upis adrese polaska.
upisivanjem kratkog prijedloga (Slika 7.7).
41
Poglavlje 7. Primjer koristenja
Slika 7.5 Prikaz uputa od adrese polaska”Korzo 1, Rijeka” do lokacije centra
”Cosmo
Gym”.
Slika 7.6 Gumb za prijavu pogreski.
42
Poglavlje 7. Primjer koristenja
7.2 Primjer administracije centara
Administrator prilikom prijavve na administratorsko sucelje pregledava prijavljene
pogreske (Slika 7.8) i primjecuje prijavljenu pogresku centra”Cosmo gym”. Admi-
Slika 7.8 Pregled prijavljenih pogreski.
nistrator ce odluciti da li je korisnik u pravu ili ne, odnosno u ovom slucaju admi-
nistrator daje pravo korisniku i odluci promijeniti opis centra (Slika 7.9). Nakon
izmjene, adminnistrator zahvaljuje korisniku putem e-mail mogucnosti (Slika 7.10).
44
Poglavlje 7. Primjer koristenja
Slika 7.9 Administrator izmjenjuje prijavljene vrijednosti.
Slika 7.10 Administrator pise e-mail poruku korisniku koji je prijavio pogresku.
45
Poglavlje 8
Zakljucak
Aplikacija za vodenje lokacija sportskih centar-a je hibridna aplikacija, ostvarena
na nacin da se oslanja na Google Maps API, koji upotpunjava vecinu njenih funk-
cionalnosti. Uz stalno napredovanje Google Maps-a, aplikacija se moze razvijati
i nadogradivati doslovno svakodnevno. U periodu od pocetka razvoja prve verzije
aplikacije do sad, Google je razvio novu verziju Google Maps API-a, pokrenuo Google
Developers [17] koji donosi sucelje Google Developers Console koje je vrlo korisno
pri pracenju i planiranju sljedeceg koraka razvoja. Aplikacija je razvijena u tolikoj
mjeri da zadovolji trziste i odreden broj korisnika. Za daljni razvoj svakako ima
mjesta. Ali da bi aplikacija radila u punom sjaju i da ne bi bilo nepotrebnih rusenja,
potreban je relativno brz posluzitelj na kojem ce biti postavljena. Razlog tomu je
intezivna komunikacija sa serverom, koja je uz koristenje XML-a i JSON-a ubrzana
maksimalno, ali ipak ne dovoljno da se bori sa slabijim internetskim vezama i sporim
posluziteljom.
46
Bibliografija
[1] W3Schools PHP Tutorial. Dostupno na: http://www.w3schools.com/php/
[2] W3Schools MySQL Tutorial. Dostupno na: http://www.w3schools.com/sql/
[3] W3Schools JavaScript Tutorial. Dostupno na: http://www.w3schools.com/js/
[4] W3Schools AJAX Tutorial. Dostupno na: http://www.w3schools.com/ajax/
[5] W3Schools HTML Tutorial. Dostupno na: http://www.w3schools.com/html/
[6] W3Schools CSS Tutorial. Dostupno na: http://www.w3schools.com/css/
[7] W3Schools XML Tutorial. Dostupno na: http://www.w3schools.com/xml/
[8] W3Schools JSON Tutorial. Dostupno na: http://www.w3schools.com/json/
[9] NetBeans sluzbena stranica. Dostupno na: http://netbeans.org/
[10] Wamp server sluzbena stranica. Dostupno na:http://www.wampserver.com/en/
[11] Mysql workbench sluzbena stranica. Dostupno na:http://www.mysql.com/products/workbench/
[12] Google Chrome sluzbena stranica. Dostupno na: ht-tps://www.google.com/chrome
[13] Mozilla Firefox sluzbena stranica. Dostupno na: http://www.mozilla.org/en-US/firefox/new/
[14] Microsoft internet explorer sluzbena stranica. Dostupno na:http://windows.microsoft.com/en-US/internet-explorer/products/ie/home
47
Bibliografija
[15] Miran Brajsa, Seminarski rad iz racunalne ergonomije”AJAX tehnologija”,
Sveuciliste u Zagrebu - Fakultet elektotehnike i racunarstva
[16] Wikipedia - Aplication programming interface. Dostupno na:http://en.wikipedia.org/wiki/Application programming interface
[17] Google developers sluzbene stranice. Dostupno na: ht-tps://developers.google.com/
[18] Wikipedia - Geocodeing. Dostupno na: http://en.wikipedia.org/wiki/Geocoding
[19] Google code - PhpMailer. Dostupno na: https://code.google.com/a/apache-extras.org/p/phpmailer/wiki/PHPMailer?tm=6
[20] JQuery sluzbena stranica. Dostupno na: http://jquery.com/
48