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 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 mentor: prof. dr. sc. Miroslav Joler Emrah Tahirović Rijeka, rujan 2014. 0069051032 1
2
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 3
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 4
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. 5
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] 6
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 7
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. 8
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 9
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 10
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. 11
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. 12
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. 13
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 14
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 15
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. 16
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. 17
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. 18
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. 19
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 20
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. 21
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 22
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. 23
Slika 24: Prikaz koda za otvaranje nove sesije i validacija lozinke 24
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 25
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. 26
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. 27
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 28
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 29
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. 30
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. 31
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. 32
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 tabom 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. 33
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-freestock-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-contentsliders/ [17] Github AutoLogout. [Online]. Dostupno na:http://github.com/philpalmieri/jqueryidletimeout 34