0

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA PREZENTACIJU I REZERVACIJE TURISTIČKIH

APARTMANA

Emrah Tahirović

Rijeka, rujan 2014. 0069051032

1

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA PREZENTACIJU I REZERVACIJE TURISTIČKIH

APARTMANA

mentor: prof. dr. sc. Miroslav Joler

Emrah Tahirović

Rijeka, rujan 2014. 0069051032

2

3

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

IZJAVA

U skladu sa prvim stavkom članka 13. Pravilnika o završnom radu, završnom

ispitu i završetku preddiplomskih sveučilišnih studija Tehničkog fakulteta u Rijeci,

izjavljujem da sam samostalno izradio završni rad prema zadatku br. 602-04/14-04/03

za rujan 2014. godine.

______________

Emrah Tahirović

Rijeka, rujan 2014. 0069051032

4

SADRŽAJ

1. UVOD ........................................................................................................................... 5

2. TEHNOLOGIJE IZRADE RADA ................................................................................ 6

3. ULOGA KORISNIKA U APLIKACIJI ....................................................................... 7

4. PREZENTACIJA APLIKACIJE – TABOVI ............................................................... 9

4.1. Početna stranica .................................................................................................... 10

4.2. Pregled svih apartmana ........................................................................................ 13

4.2.1. Pregled opisa apartmana ............................................................................ 15

4.3. Rezervacija ........................................................................................................... 16

4.3.1. Kalendar .................................................................................................... 17

4.3.2. Forma za slanje upita ................................................................................. 17

4.4. Kontakt ................................................................................................................. 18

4.5. Tab – „Više“ ......................................................................................................... 20

4.5.1. Prvi, drugi i treći tab .................................................................................. 21

4.5.2. Galerija ...................................................................................................... 21

4.5.3. Komentari .................................................................................................. 22

4.5.4. Login ......................................................................................................... 23

5. ADMINISTRATORSKI PANEL ............................................................................... 25

5.1. Početna – administratorski panel ......................................................................... 26

5.1.1. Podkategorija – Apartmani ....................................................................... 26

5.1.2. Podkategorija – Slike ................................................................................ 28

5.1.3. Podkategorija – Rezervacije ...................................................................... 29

5.1.4. Podkategorija – Newsletter ....................................................................... 30

5.1.5. Podkategorija – Dodatno ........................................................................... 30

5.2. Postavke ............................................................................................................... 31

6. ZAKLJUČAK ............................................................................................................. 33

7. LITERATURA ............................................................................................................ 34

5

1. UVOD

Tema ovog završnog rada je izrada web aplikacije, čija je uloga omogućiti vlasnicima

prezentaciju i rezervaciju apartmana.

U radu će biti opisana struktura web aplikacije, kao i riješenja poteškoća nastalih u

samoj izradi. Osim toga u radu će biti opisane sve mogućnosti koje sama aplikacija pruža.

Aplikacija je namjenjena vlasnicima apartmana, kako bi izbjegli ovisnost rezervacija o

agencijama, kao i postotak koji agencija uzima prilikom pronalaska gosta. Osim toga, vlasnici

apartmana ponekad nisu zadovoljni prezentacijom njihovih apartmana, te informacijama i

multimedijalnim sadržajima koji se nalazi na stranicama agencija tj. oglašavaćkih aplikacija.

Ova aplikacija nudi samostalno unošenje apartmana sa njihovim karakteristikama koje su

popraćene slikama. Pored unosa apartmana i slika, aplikacija vlasniku nudi i dodavanje

zauzetosti apartmana, koja je vidljiva samom korisniku pomoću kalendara dostupnosti.

U admin panelu koji će detaljno biti opisan u nastavku ovog rada, pored gore navedenih

funkcionalnosti postoji mogućnost izmjene imena apartmana, osobne lozinke, karakteristika

apartman, slanja e-mail-a korisnicima koji su ostavili svoju e-mail adresu i još puno

mogućnosti.

Web aplikacija korisnicima nudi dodavanje komentara uz pohvale ili kritike prilikom

boravka u apartmanima.

6

2. TEHNOLOGIJE IZRADE RADA

Za izradu strukture web aplikacije korišten je HTML5 [1], te tehnologija PHP

programskog jezika [2] za programiranje sa serverske strane aplikacije, zajedno sa jezicima

JavaScript [3] i njegovom knjižnicom jQuery [4], kao i AJAX-a [5] za programiranje

klijentske stranei dinamiĉkog osvježavanja prikazanog sadržaja, MySQL [6] jezikom koji se

koristio unutar PHP skripti za pristup bazi podataka, te konačno CSS stilskim jezikom [7] koji

je korišten za dizajn same stranice.

Navedene tehnologije u meĎusobnoj suradnji pokazale su se zadovoljavajućima za izradu

naprednih funkcionalnosti web aplikacije koja nudi online rezervaciju apartmana

Za pisanje HTML i PHP skripti korišten je Notepad ++ v6.5.2 [8], a baza je izraĎena u

MySQL-u. Na lokalnom radnom okruženju korišten je WAMP server [9], dok testiranje i

provjera svih funkcionalnosti se odvijala na besplatnom internet serveru na lokaciji

http://www.000webhost.com .

Trenutna aplikacija uz autorski kôd sadrži i velik broj korištenih datoteka otvorenog

kôda, koje prvenstveno pospješuju funkcionalnost i iskustvo korištenja sustava. Kako se ne bi

puno gubilo vremena na samom dizajnu, korišteni su odreĎeni dijelovi gotovog otvorenog

koda.[10] Dok su drugi dijelovi dizajna većinom nastali uz pomoć različitih stranica za

generiranje CSS stila. [11]

7

3. ULOGE KORISNIKA U APLIKACIJI

U aplikaciji imamo adminstratora tj. vlasnika koji može mjenjati, ažurirati i brisati

sadržaj. Aplikacija nije zahtjevala dodatne uloge pošto je namjenjena za osobnu uporebu tj. za

vlasnika apartmana koji će ujedno voditi brigu o svim informacijama te mogućim izmjenama

u apartmanima.

Uloge u aplikaciji možemo podjeliti na dva dijela:

ADMINISTRATOR

KORISNIK

Slika 1. Uloge korisnika u sustavu.

Administrator – upravlja sadržajem i informacijama koje se prikazuju, te unosi datume

zauzetosti u kalendar

Korisnik – pregledava sadržaj web aplikacije, te ima mogućnost slanja upita i rezervacija

direktno s web aplikacije, takoĎer ima mogućnost ostavljanja komentara i ocjena prilikom

boravka u njima

8

U bazi podataka kreirana je tablica pod nazivom 'admin' koja u sebi sadrži kategoriju

'username' i kategoriju 'password'. Pod 'username' se sprema korisničko ime administratora tj.

osobe koja će koristiti administratorski panel, dok pod kategoriju 'password' se sprema lozinka

u zaštićenom obliku pomoću md5 enkripcije [12].

Slika 2. U tablici 'admin' u bazi podataka, pod rubrikom 'username' spremljeno je

korisničko ime a pod rubrikom 'password' spremljena je lozinka.

9

4. PREZENTACIJA APLIKACIJE – TABOVI

Kako bi se izbjeglo ponovno učitavanje cijele stranice, sadržaj navigacijske trake i

podnožje nalazi se unutar skripte 'index.php' u kojoj se nalaze uključene funkcije i ostale

skripte potrebne za pravilan prikaz cijele web stranice. Unutar navigatora <body> nalazi se

PHP kod koji uz pomoć if-ova otvara tj. učitava potrebne skripte. Kada odaberemo neku

akciju tj. kliknemo na neki tab, uz pomoć GET metode, šalje se akcija koju unutar navedenog

dijela provjeravamo i otvaramo zatraženu skriptu.

Slika 3. Kostur web aplikacije

10

Slika 4. Provjera akcije i učitavanje adekvatne skripte

4.1.Tab -Početna stranica

Početna stranica kao i ostale stranice unutar aplikacije, sastoji se od navigacijske trake,

zaglavlja i podnožja te glavnog dijela koji se prostire izmeĎu zaglavlja i podnožja u kojem se

izmjenjuju napisane skripte.

Navigacijska traka se sastoji od četri osnovne kategorije te dvije kategorije koje daju

dodatne tabove. Prilikom odabira odreĎene kategorije, odabrani tab bit će označen crvenom

bojom kako bi korisnik znao na kojoj se stranici nalazi tj. što točno pretražuje. Osim toga

pomoću JavaScript-a i CSS-a, svaki put kada prijeĎemo preko tabova mišom, pozicija na

kojoj se miš nalazi postane crvena tj. privremeno je označena.

Slika 5. Navigacijska traka

11

U početnoj stranici u zaglavlju se nalazi kratki 'slider' koji je namjenjen prikazu svih

slika koje korisnik odabere i spremi u tablicu 'slider' unutar baze. Početni 'slider' automatski

mjenja tj. prikazuje slike, te ima mogućnost prebacivanja unaprijed ili unazad slike kako bi

korisnik što prije prelistao početne slike.Zaglavlje se mjenja u ovisnosti o klikanju po

tabovima. Svaki klik na drugi tab učitava novu stranicu sa specifičnim zaglavljem i glavnim

dijelom stranice, dok se podnožje nikad ne mijenja, kao što je i objašnjeno prije.

Slika 6. Prikaz 'slider'-a na početnoj stranici

U podnožju se nalazi nekoliko funkcionalnosti. U desnoj strani se nalaze ikone od

društvenih mreža. S obzirom da su danas jako popularne društvene mreže, podnožje nudi

vlasniku dodavanje svojih osobnih stranica sa društvenih mreža kako bi korisnici mogli lakše

stupiti u kontakt ili eventualno pogledati dodatne informacije o apartmanima, te samom

vlasniku.

Odmah ispod ikona društvenih mreža nalazi se polje koje zahtjeva unos e-mail adrese

korisnika, koji želi primati ponude i novosti o apartmanima i ponudama. Nakon unosa e-mail

adrese i odabirom gumba 'Newsletter', adresa se spremi u prateću bazu podataka. Ukoliko

e-mail adresa već postoji spremljena u bazi podataka, nakon ponovnog unosa korisnik će biti

izbrisan iz baze, te će na e-mail dobiti obavijest o prestanku primanja obavijesti.

Pored slanja e-maila za primanje periodičnih obavjesti o ponudi, ugraĎen je „Google“ alat za

prijevod stranice [13]. Alat koji nudi „Google“ je besplatan i otvorenog koda. Kako bi alat bio

funkcionalan potrebno je zatražiti od „Google“-a kod koji se jednostavno postavi na željeno

mjesto prikaza unutar web aplikacije.

12

Slika 7. Pregled podnožja, društvene mreže, newsletter i prijevod stranice

Slika 8. Otvoreni kod koji nudi „Google“ za prijevod web aplikacija

U glavnom dijelu stranice pokreće se skripta 'home.php' koja prikazuje značajke grada

tj. mjesta sa kratkim informacijama, te nudi korisniku za sve tri katoegorije gumb „Više“.

Ukoliko se klikne na gumb „Više“ neke od tri ponuĎene kategorije, učitava se nova skripta

unutar glavnog dijela stranice u ovisnosti o kliku koji je korisnik odabrao.

Korisnik ima mogućnost prelistavanja detaljnih informacija koje je administrator dodao kako

bi zainteresirao što veći broj potencionalnih gostiju.

13

Slika 9. Primjer prikaza početne stranice unutar glavnog dijela web aplikacije

4.2. Pregled svih apartmana

Tab „Apartmani“ otvara stranicu 'apartmani.html', odnosno pregled svih apartmana u

ponudi. Na lijevoj strani stranice nalazi se traka sa opcijama za navigiranje po pojedinim

apartmanima za detaljniji pregled željenog apartmana kao i sa opcijom za povratak na pregled

svih apartmana. S obzirom što je odabrano na toj traci, taj tekst je označen crvenom bojom i

znači da je učitana stranica aktivna na tom linku.

14

Slika 10: Prikaz trake za navigiranje po apartmanima

Na desnoj strani nalazi se lista svih pojedinih apartmana u obliku slika, sa dodatnim

opcijama ispod njih, kao i slika kompleksa gdje su apartmani smješteni. Te slike prikazane su

u obliku tablice u dimenzija dva apartmana po redu, dok je broj stupaca ovisan o broju

postojećih apartmana. Opcije ispod slika su „Više“ i „Rezerviraj“. Opcija „Više“ vodi

korisnika na stranicu pojedinog apartmana, sa njegovim detaljnim opisom, poput prije

spomenute trake, dok „Rezerviraj“ vodi korisnika na stranicu na kojoj može po želji

rezerviranji željeni apartman.

Slika 11: Prikaz apartmana

15

4.2.1. Pregled opisa apartmana

Pod tabom „Apartmani“ ili ispod slike ili na lijevoj strani stranice, pod trakom, nalazi

se pristup pregledu svakom posebnom apartmanu, odnosno skripti 'aprtman.php'. Prilikom

odabira odreĎenog apartmana, pomoću „GET“ metode se šalju podaci pri čemu se pomoću

identifikacijskog broja pronaĎe apartman u bazi i ispiše sadržaj traženog apartmana. Na

stranici apartmana nalazi se „slide show“ sa slikama apartmana , sadržaj i cijenik. Slide show

je napravljen sa slikama većeg formata kako bi korisnik stekao što realniji dojam apartmana.

Preporučeni format slike je 800 x 600. Osim što se slike same izmijenjuju, korisnik ih može

izmjenjivati sa strelicama na suprotnim krajevima slike ili pak kliknuti na kućicu u gornjem

kutu slike te time skočiti na sliku ekvivalentnu toj poziciji.

Slika 12: Prikaz „slide showa“ apartmana

Sadržaj apartmana, osim tekstualno, riješen je i slikovnim ikonama preko kojih se pomoću

JavaScript-a tj. prelaskom mišem po njima dobiva njihov opis. Prilikom prelaska mišem po

ikonama, aktivira se JavaScript koji uz pomoć CSS-a prikazuje tekst sa kratkim opisom ikone.

Tekst koji se prikazuje spremljen je unutar HTML-a pod oznakom „title“.

Slika 13: Prikaz ikona sa sadržajem

16

Na dnu stranice nalazi se cjenik, obavijest o prijevozu te gumb „BOOK NOW“ koji

vodi na tab „Rezervacija“ gdje korisnici mogu ili rezervirati ili provjeriti dostupnost

apartmana.

Slika 14: Prikaz cijenika, dodatne obavijesti i gumb

Sa lijeve strane nalaze se ikone koje označavaju prijevozna sredstva, sa desne strane nalazi se

ikona apartmana, te izmeĎu njih se nalazi ikona koja simbolizira besplatan prijevoz od/do

apartmana. Ikone su skinute s web stranice koja nudi programerima skidanje besplatnih

sadržaja.[14]Prilikom prelaska mišem po prijevoznim ikonama, aktivirati će se ponovno

JavaScript koji će prikazivati tekst „FREE TRANSFER“.

4.3.Rezervacija

Tab „Rezervacija“ služi za prikaz zauzetosti apartmana te ujedno služi i za slanje

rezervacija vlasniku apartmana. Stranica se dijeli u tri segmenta, sa lijeve strane nalazi se

kalendar, ispod kalendara nalazi se forma koju je potrebno ispuniti kako bi se poslao upit

vlasniku, te s desne strane se nalaze svi apartmani koji prilikom odabira prikazuju zauzetost

po datumima.

17

4.3.1. Kalendar

Kalendar zauzetosti pomaže korisnicima što jednostavnije prikazati slobodne i zauzete

termine prilikom čega ujedno korisnici mogu poslati zahtjev za rezervacijom odreĎenih dana

uz odabir željenog apartmana. Kada odaberemo apartman sa desne strane, aktiviramo

JavaScript 'apartman()' koji šalje identifikacijski broj apartmana skripti 'calendar.php', pri

čemu se ispisuje kalendar s danima njegove zauzetosti. Skripta 'calendar.php' uzima podatke

iz baze gdje su spremljeni datumi zauzetosti te crvenom bojom označuje datume koji se

nalaze u njoj a ostale, slobodne, zelenom bojom.

Slika 15: Prikaz zauzetosti odabranog apartmana (Apartman 1)

Crvena boja simbolizira zauzetost dok zelena boja simbolizira dostupnost rezervacije

apartmana.

4.3.2. Forma za slanje upita

Odmah ispod kalendara otvara nam se forma koja služi za slanje rezervacija vlasniku

tj. slanje upita za odreĎene dane. Forma se sastoji od polja za odabir datuma preko kalendara,

odabira broja noći ili unosa, odabira broja gostiju i apartmana, te unosom imena, prezimena i

kontakt e-mail-a. Navedena polja uz pomoć HTML5 ne dozvoljavaju korisniku slanje praznih

polja, takoĎer zahtjevaju od korisnika da unese e-mail u pravom formatu.

18

Slika 16: Forma za upis podataka koji će se poslati na e-mail vlasniku i korisniku

Nakon što se ispravno unesu podaci u sva zatražena polja, upit se šalje vlasniku i korisniku pri

čemu vlasnik provjerava validnost unosa podataka i odgovara gostu sa potvrdom je li traženi

apartman rezerviran za njega. U toj interakciji se očekuje dogovor izmeĎu vlasnika i gosta

oko uplata predujma tj. uplata boravka. Osim navedenog prikaza, na desnoj strani ispod svih

apartmana nalazi se tablica sa svim cijenama pojedinih apartmana.

4.4. Kontakt

Tab „KONTAKT“ koji se nalazi na gornjoj traci, otvara skriptu 'about.php' odnosno

sučelje za kontakt vlasnika stranice preko forme kao i prikaz osnovnih informacija za kontakt

vlasnika stranice, te informacije za pronaći apartmane na karti.

19

Slika 17: Prikaz podataka, kontakta i jpg isjecak mape na poziciji apartmana

Na skripti 'about.php', odnosno „KONTAKT“ sučelju nalazi se i forma preko koje korisnici

stranice mogu kontaktirati vlasnika stranice sa svojim pitanjima, komentarima, prijedlozima i

kritikama. Forma ima dva polja, „Email“ i „Message“ koji su zaštićeni svim potrebnim

restrikcijama i dugme „SEND“. Pomoću HTML5 atributa „required“ [15] omogućena je

validacija za provjeru je li e-mail upisan u točnom formatu, te je li polje ispunjeno. Nakon što

korisnik upiše svoj e-mail u pravilnom formatu kao i poruku u predviĎena mjesta na formi, te

pritisne „SEND“ forma uzima te podatke i pokreće skriptu pomoću ajax-a 'contact.php' koja

šalje mail vlasniku stranice sa prijašnje upisanim podacima, te nakon toga briše tekst iz forme

i ostaje na istoj stranici, u prvotnom obliku, bez osvježivanja stranice ili otvaranja nove.

20

Slika 18: Prikaz kontakt forme

4.5.Tab – „Više“

Tab „Više“ koji se nalazi na traci otvara „drop down“ meni sa višestrukim izborom. Navedeni

tab smanjuje gornji izbornik s ciljem preglednosti same početne stranice. Stalni nazivi tabova

su: Galerija, Komentari, Login, dok su ostali prikazani tabovi odabir administratora

(administrator ima mogućnost izmjene naziva tabova unutar admin panela).

Slika 19: Prikaz „drop-down“ menija

21

Slika 20: Prikaz koda „drop-down“ menija

Ovisno o kliku na odreĎeni tab pokreće se akcija koja u početnoj stranici otvara traženi link

koji uz pomoć 'GET' metode učitava što je točno kliknuto.

4.5.1. Prvi, drugi i treći tab

Sva tri navedena tab-a sastoje se od teksta i nekoliko slika koje slikovno opisuju

sadržaj navedenih tabova. Kako bi obogatili sadržaj stranice navedeni tabovi daju mogućnost

unosa zanimljivosti vezane za područje gdje se iznajmljuju apartmani. Administrator u

svakom trenutku može promjeniti sadržaj tabova kako bi na što bolji način privukao

potencijalne goste. Sva tri taba sa slikom i kratkim sadržajem se otvaraju na početnoj stranici.

4.5.2. Galerija

Pod tabom „Galerija“ nalaze se slike koje prikazuju okolicu apartmana te sam

apartman iz raznih kuteva gledanja. Namjenjen je korisnicima kako bi što bolje mogli

analizirati mjesto privremenog boravka.

Nakon odabira navedenog taba, otvara se ispis svih slika koje se nalaze u bazi podataka unutar

tablice 'galerija'. Ukoliko korisnik želi povećati sliku, klikom na neku od slika otvara se

velika slika sa mogučnošću pregledavanja sljedeće ili predhodne slike. U ovom dijelu je

korišten otvoreni kod za pregledavanje slika. [16] Osim svih navedenih funkcionalnosti,

galerija vlasnicima tj. administratorima nudi uz slike gumb „X“ koji služi za brisanje slike.

22

4.5.3. Komentari

Pod tabom „Komentari“ nalaze se komentari koje ostavljaju tj. pišu korisnici.

Uloga komentara je poboljšanje mogućih nedostataka unutar usluge koje nudi vlasnik tj.

pohvale ili eventualna iskustva koja su korisnici doživljeli boraveći u apartmanima.

Kako bi korisnik tj. osoba koja želi nešto napisati ostavila trag, potrebno je ispuniti tri polja

koja se nalaze na kraju stranice i koja su dio jedne forme.

Polje 'e-mail' služi da se vidi s koje e-mail adrese je upućen komentar, uz karakteristiku da je

to samo vidljivo vlasniku tj. administratoru stranice koji ukoliko ima potrebu, može

kontaktirati navedenog korisnika. Polje 'ime' daje naziv autora koji je napisao komentar, te se

u polje 'komentar' unosi tekst koji korisnik želi ostaviti na stranici.

Nakon unošenja svih potrebnih informacija odabirom gumba „Comment“ pokreće se forma

koja sprema u bazu podataka upisane u formi, te navedeni komentar prikazuje na samom

ekranu. Osim navedenog, vlasnik tj. administrator ima mogućnost brisanja komentara uz

pomoć gumba „X“ koji se nalazi pored komentara.

Slika 21: Prikaz koda za ubacivanje podataka u bazu

Slika 22: Prikaz sučelja za unos svih potrebnih informacija

23

4.5.4. Login

Pod tabom „Login“ nalazi se skripta 'login.html' odnosno sučelje koje omogućava

administratoru prijavu u sustav kako bi dobio pristup administratorskim opcijama koje

stranice pruža. Login je riješen pomoću „POST“ forme koja nakon pritiska na gumb „Log in“

poziva skriptu 'login1.php.

Slika 23: Prikaz login forme

Skripta 'login1.php' zatim provjerava da li uneseno korisničko ime, odnosno username, postoji

u bazi podataka. U slučaju da ne postoji otvara se nova stranica sa obavješću da su uneseni

podaci krivi i opcijom za ići natrag. U slučaju da korisničko ime postoji u bazi podataka

provjerava se lozinka, odnosno password, koja je enkriptirana md5 enkripcijskom funkcijom.

Ako lozinka ne odgovara svojem ekriptiranom ekvivalentu u bazi ponovno se otvara nova

stranica koja obavještava da su podaci krivi i nude gumb za natrag. Ako su i korisničko ime i

lozinka ispravno uneseni pokreće se nova sesija koja odgovara prijavljenom administratoru, te

on sada ima pristup administratorskom dijelu aplikacije.

24

Slika 24: Prikaz koda za otvaranje nove sesije i validacija lozinke

25

5. ADMINISTRATORSKI PANEL

Administratorski panel možemo podjeliti u dvije kategorije. Prva kategorija je početna

stranica koja nam se pojavi nakon logiranja gdje se nalaze sve moguće funkcije za izmjenu i

dodavanje podataka o apartmanima i korisnicima. Druga kategorija se nalazi pod gumbom

„POSTAVKE“ gdje se mogu ažurirati osnovni podaci o samom vlasniku stranice. Nakon što

se administrator ili vlasnik prijavi u administratorski panel, aktivira se modificirana skripta

otvorenog koda 'jquery-idleTimeout.js' [17] koja služi za odjavu korisnika ukoliko je duže

vremena neaktivan.

Slika 25: Prikaz administratorskog panela

26

Slika 26: Prikaz automatskog odlogiravanja

Ukoliko klikenmo na gumb „Ostanite logirani!“ ili „x“ u gornjem desnom kutu, poništiti ćemo

vrijeme neaktivnosti i moći nastaviti kao administrator, u protivnom ćemo biti odjavljeni i

vraćeni na stranicu za ponovno prijavljivanje.

5.1. Početna – administratorski panel

Prilikom prijave u administratorski panel pojavi nam se stranica sa pet podskupina.

Prva podskupina se zove „Apartmani“ koja administratoru nudi opciju „Dodavanje novog

apartmana“ i „Ispis apartmana“. Druga podskupina nosi naziv „Slike“ koja nudi

administratoru dva gumba: „Dodaj Nove Slike“ i „Ispis slika“. Dok treća skupina se sastoji od

naziva „Rezervacije“ i nudi administratoru odabira gumba „Evidencija i unošenje zauzetosti“.

Osim toga imamo i četvrtu podskupinu koja se naziva „Newsletter“ i daj administratoru

opciju „Ispis Prijava na Newsletter“. Zadnja podskupina se naziva „Dodatno“ i nudi

administratoru četiri opcije: „Uredi Opis početne stranice“, „Uredi Prvu Kategoriju“, „Uredi

Drugu Kategoriju“ i „Uredi Treću Kategoriju“.

5.1.1. Podkategorija – Apartmani

U podkategoriji „Apartmani“ nude nam se dvije opcije: „Dodavanje novog apartmana“

i „Ispis apartmana“. Ukoliko odaberemo prvu opciju otvara nam se nova skripta koja nudi

administratoru formu sa poljima koja je potrebno ispuniti za ubacivanje novog apartmana u

bazu. Unutar skripte pojavljuju nam se dvije vrste polja i to: polja za unos podataka i polja za

označavanje. Polja za unos podataka su: „Naziv Apartmana“, „Velicina apartmana“, „Broj

osoba“ te polja za unos cijena od 6.-tog do 10.-tog mjeseca.

27

Pored toga, skripta nudi klasičan sadržaj apartmana kako bi administratori mogli što lakše

označiti što se od navedenog nalazi u apartmanu tj. koje usluge mogu koristiti. Nakon što se

unesu sve potrebne informacije, apartman se dodaje u bazu i odmah je vidljiv na stranicama

gdje se opisuje njihov sadržaj.

Slika 27: Prikaz djelomične forme za dodavanje novog apartmana

Odabirom opcije „Ispis apartmana“ pojavljuje nam se tablica koja sadrži identifikacijske

brojeve, te nazive svih apartmana koji se nalaze u bazi. Osim navedenog , unutar tablice

nalaze se linkovi za izmjenu i brisanje apartmana iz baze. Odaberemo li brisanje odreĎenog

apartmana, obrisat će se sve slike i informacije zapisane o tom apartmanu unutar baze

podataka. Link „X“ pokreće skriptu za brisanje apartmana prilikom čega šalje toj skripti id

apartmana. Ukoliko odaberemo link „Edit“, pokrenuti će nam se nova skripta koja skoro u

potpunosti izgleda prikazu skripte za dodavanje novog apartmana ali sa popunjenim podacima

odabranog apartmana. Ukoliko izmjenimo neke podatke unutar te skripte i odaberemo gumb

„Spremi“ sve promjene izmjenjene bit će evidentirane u bazi podataka.

28

Slika 28: Ispis apartmana s mogučnošću izmjene i brisanja

5.1.2.Podkategorija – Slike

U ovoj podkategoriji imamo dvije opcije: „Dodaj novu sliku“ i „Ispis slika“.

Kada kliknemo na gumb „Dodaj novu sliku“ otvara nam se nova skripta koja zahtjeva od

korisnika da odabere tip slike. Nakon odabira i učitavanja slike, slika se spremi u bazi u

tablicu 'slike', iz koje kasnije pregledavamo slike apartmana i galeriju.

Slika 29: Odabir tipa slike za uploud

29

Ukoliko odaberemo gumb „Ispis slika“, na ekranu će nam se prikazati sve slike koje se nalaze

u tablici 'slike' i tablici 'slider' pri čemu administrator ima mogućnost brisanja uz samo jedan

klik na „X“.

5.1.3.Podkategorija – Rezervacije

U ovaj podkategoriji imamo opciju „Evidencija i unošenje zauzetosti“. Odabirom te

opcije pokreće se skripta koju možemo podjeliti na dva dijela. Prvi dio čini tablica koja

prikazuje online ispis rezervacija sa svim elementima rezervacije, dok drugi dio omogućuje

korisniku dodavanje i brisanje zauzetosti termina. Tablica nudi mogućnost brisanja

rezervacije. Dovoljno je samo kliknuti na „X“ u retku kojeg želite obrisati. Da bi provjerili

kalendar zauzetosti za odreĎeni apartman potrebno je sa desne strane kliknuti na ponuĎene

apartmane tj. apartmane koji se nalaze u bazi. Nakon navedene provjere, potrebno je odabrati

dan kojeg želite dodati u bazu. Osim toga potrebno je odabrati drugi put iz padajućeg

izbornika apartman o kojem se radi i kliknuti na gumb „Spremi“. Ako korisnik želi izbrisati

datum iz baze potrebno je označiti kućicu za brisanje uz gore navedeni postupak.

Slika 30: Prikaz ispisa rezervacija i dodavanje/brisanje datuma

30

5.1.4.Podkategorija – Newsletter

Pod kategorija „Newsletter“ pruža administratoru listu svih prijavljenih e-mail-a.

Nakon što se korisnici pretplate, administratoru su vidljive sve e-mail adrese na koje može

slati svoje ponude. Ukoliko administrator smatra da je neka e-mail adresa sa popisa lažna, u

svakom trenutku može izbrisati e-mail adresu iz baze podataka kratkim klikom na „X“.

Slika 31: Ispis svih pretplata na Newsletter

5.1.5.Podkategorija - Dodatno

U ovoj podkategorij imamo četiri opcije koje možemo podjeliti u dvije vrste i to: prva

opcija koja mjenja naslov i sadržaj na početnoj stranici, te ostale tri koje mjenjaju sadržaj u

tabovima koji se prikazuju pod tabom „Više“.

Odabirom gumba „Uredi Opis početne stranice“ pokreće nam se skripta koja nudi

administratoru unos naslova i sadržaja na četri jezika (hrvatski, engleski, njemački i talijanski)

tj. prikazuje se osam polja koja je potrebno ispuniti na adekvatan način, kako bi integrirani

prevoditelj što bolje preveo željeni sadržaj.

31

Ostale opcije takoĎer zahtjevaju od administratora unos podataka na sva četri jezika ali

sa ciljem što bolje prezentacije mjesta u kojem se nalaze apartmani.

Slika 32: Podkategorija - Dodatno

5.2. Postavke

Gumb „POSTAVKE“ otvara skriptu za izmjenu osobnih podataka, te izmjenu lozinke

i poveznica na društvene mreže.

Slika 33: Prikaz postavki za osobne podatke

Ukoliko se klikne na gumb za promjenu lozinke, otvara nam se skripta koja traži od

administratora unos stare i nove lozinke . Nakon što se unesu potrebni podaci skripta

'promjeni.php' provjerava je li unešena stara lozinka točna, ukoliko proĎe navedenu

autorizaciju u bazi se ažurira uz pomoć md5 enkripcije nova lozinka. Nakon toga

administratora skripta odjavi i zahtjeva ponovnu prijavu s novom lozinkom.

Ako se klikne na gumb „Linkove na društvene mreže“, pokreće se ispod sva tri

navedena gumba nova skripta koja se sastoji od dva popunjena polja iz baze, te zahtjeva

izmjenu postojećih poveznica. Sve promjene su odmah vidljive na cijeloj aplikaciji.

32

Slika 34: Ažuriranje poveznica na društvene mreže

Da bi administrator promijenio kontakt podatke koji se nalaze na stranici za kontakt,

potrebno je da klikne na gumb „Kontakt podatke“. Nakon odabira navedenog gumba, ispod

sva tri taba se otvara skripta sa popunjenim poljima iz baze, čije informacije administrator

može ažurirati.

33

6. ZAKLJUČAK

Nakon analize specifikacije zahtjeva i postavljanje prioriteta, dobivena je vrlo

stabilana i fleksibilna web aplikacija. Osim bogatog grafičkog izgleda, aplikacija nudi

mnoštvo funkcija pri čemu se cijela aplikacija može modificirati na željeni način vlasnika.

Aplikacija za prezentaciju i rezerviranje apartmana je namjenjena vlasnicima apartmana kako

bi iznajmili i prezentirali svoje apartmane na što bolji način. Aplikacija bi se uz minimalnu

korekciju mogla koristiti i za prezentaciju hotelskih soba kao i iznajmljivanje, te takoĎer za

ostale slične teme. Unutar administratorskog panela, nalaze se gumbovi koji nude

administratoru mogućnost dodavanja, ažuriranja i brisanja cijelog teksta, kao i svih slika koje

se prikazuju na web aplikaciji. Sadžaj koji se može mjenjati je spremljen u bazi podataka.

Osim prezentacijskog dijela, aplikacija nudi mogućnost komunikacije izmeĎu zainteresiranih

korisnika i vlasnika apartmana kroz razne načine. Ukoliko korisnik ima općeniti upit, pod tab-

om „Kontakt“ ima mogućnost slanja email-a i uvid u telefonske brojeve vlasnika. Osim toga

pod tabom „Rezervacija“ potencionalni gost ima mogućnost uvida u zauzetost svih

apartmana, te slanje rezervacije za slobodne dane.

Za potrebe razvijanja ove web aplikacije potrebno je dobro poznavanje tehnologija:

PHP-a, HTML5/CSS3, JavaScript-a, Ajax-a i MySQL-a. Kombinacija svih navedenih

tehnologija omogućuje širok spektar riješenja za sve nastale poteškoće prilikom razvijanja.

Tehnologija PHP-a je zaslužna za jednostavnu mogućnost prijenosa aplikacije na bilo koji

server uz minimalnu promjenu informacija, točnije izmjenu sadržaja dviju skripti. CSS3

tehnologijaje zaslužna u potpunosti o izgledu stranice. Ključno je prilikom razvijanja web

aplikacija imati što bolji dizajn jer je upravo dizajn taj koji zadržava korisnike na stranici.

Od mogućih dodatnih funkcionalnosti web aplikacije u budućnosti poželjno bi bilo

razmisliti o označavanju više datuma i ubacivanje istih u bazu, te uvesti mogućnost provjere

dostupnosti unosom datuma dolaska i datuma odlaska. TakoĎer za unos slika u sustav

poželjno bi bilo ugraditi mogućnost smanjenja veličine slika. Većina podataka u bazi koji se

odnose na apartmane nisu točni, nego se radi o testnim podacima. Do sada njihov utjecaj nije

bio važan, ali svakako je nužno prije puštanja aplikacije u upotrebu izmjeniti te podatke putem

administratorskog sučelja, kao i izbrisati sve datume koji su trenutačno dostupni u bazi.

34

7. LITERATURA

[1] W3Schools HTML5. [Online]. Dostupno na:

http://www.w3schools.com/html/html5_intro.asp

[2] PHP. [Online]. Dostupno na: http://www.php.net/

[3] W3Schools Javascript Tutorial. [Online]. Dostupno na:

http://www.w3schools.com/js/default.asp

[4] jQuery. [Online]. Dostupno na: http://www.jquery.com

[5] Ajax. [Online]. Dostupno na: http://www.w3schools.com/ajax/default.asp

[6] MySQL. [Online]. Dostupno na: http://www.mysql.com

[7] W3Schools CSS. [Online]. Dostupno na:http://www.w3schools.com/css/

[8] Notepad ++. [Online]. Dostupno na:http://notepad-plus-plus.org

[9] WAMP. [Online]. Dostupno na:http://www.wampserver.com/en/

[10] Besplatan CSS kod. [Online]. Dostupno na:http://www.templatemo.com/page/1

[11] Generiranje CSS-a. [Online]. Dostupno na:http://css3generator.com/

[12] Md5. [Online]. Dostupno na:http://www.hr.wikipedia.org/wiki/MD5

[13] Google translate alat. [Online]. Dostupno na:

http://translateclient.com/translator_widget.php

[14] Ikone prijevoza. [Online]. Dostupno na:http://www.dreamstime.com/royalty-free-

stock-images-set-simple-transport-icons-image14513449

[15] HTML5 validacija. [Online]. Dostupno na:

http://www.w3school.com/html/html5_form_attributes.asp

[16] Slider. [Online]. Dostupno na:http://thedesignhill.com/jquery-image-and-content-

sliders/

[17] Github AutoLogout. [Online]. Dostupno na:http://github.com/philpalmieri/jquery-

idleTimeout