Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Tomaž Močnik
RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA
GOSTINSTVO
Diplomsko delo
Maribor, avgust 2012
Diplomsko delo univerzitetnega strokovnega študijskega programa
RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA
GOSTINSTVO
Študent: Tomaž Močnik
Študijski program: UN Informatika in tehnologije komuniciranja, Informacijski sistemi
Mentor: doc. dr. Marko Hölbl
Maribor, avgust 2012
I
Zahvala
Zahvaljujem se mentorju doc. dr. Marku
Hölblu za pomoč in vodenje pri opravljanju
diplomskega dela.
Posebna zavhala velja staršem, ki so mi
omogočili študij.
III
Razvoj mobilne spletne aplikacije za gostinstvo
Ključne besede: mobilne aplikacije, spletne aplikacije, aplikacije za gostinstvo, PHP,
jQuery, HTML 5, CCS3, prilagojen vmesnik
UDK: 004.777(043.2)
Povzetek
V diplomski nalogi bomo obravnavali področje razvoja mobilnih spletnih aplikacij,
natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z
rešitvami, katere so trenutno prosto dostopne ter jih uporabili v procesu izdelave.
Podrobneje si bomo ogledali HTML5, jQuery Mobile, strežniški skriptni jezik PHP ter
MySQL podatkovno bazo. Aplikacija bo tako omogočala hitrejše naročanje, napreden
pregled nad prometom ter vodenje podjetja od doma in tako povečanje efektivnosti ter
zmanjšanje stroškov vodenja gostinstva. Cilj diplomske naloge je izdelati delujoč prototip
mobilne spletne aplikacije, katera bo tekla na strežniku v zaprtem omrežju.
IV
Development of a mobile web application for cafés
and restaurants
Key words: mobil applications, web applications, aplications for cafés and restarunts,
PHP, jQuery, HTML 5, CCS3, responsive design
UDK: 004.777(043.2)
Abstract
In this thesis we will be addressing the scope of the development of mobile web
applications, more specifically the development of an application to assist in the
hospitality industry. We are going to take the solutions, which are currently freely
available and use them in the manufacturing process. We are going to take a better look at
HTML5, jQuery Mobile, PHP server-side scripting language and the MySQL database.
The application will also allow faster ordering, advance view of traffic and running a
business from home and also increase the effectiveness of their management and reduce
the cost of catering. The goal is to develop a working prototype mobile web application,
which will run on the server in a closed network.
V
Vsebina
1 Uvod ............................................................................................................................... 1
2 Načrtovanje rešitve ...................................................................................................... 3
2.1 Anketa o uporabi mobilnih spletnih aplikacij ......................................................... 4
2.2 Funkcionalne zahteve ............................................................................................. 8
2.3 Tehnološke zahteve ............................................................................................... 10
2.4 Tehnične zahteve .................................................................................................. 10
3 Uporabljene tehnologije ............................................................................................. 12
3.1 Jezik HTML5 ........................................................................................................ 12
3.2 Skriptni jezik JavaScript ....................................................................................... 12
3.3 Strežniški skriptni jezik PHP ................................................................................ 15
3.4 Podatkovna baza MySQL ..................................................................................... 16
4 Razvoj in predstavitev rešitve ................................................................................... 17
4.1 Razvojno okolje .................................................................................................... 17
4.2 Razvoj rešitve ....................................................................................................... 17
4.3 Predstavitev rešitve ............................................................................................... 22
5 Sklep ............................................................................................................................ 25
6 Literatura in viri......................................................................................................... 26
7 Priloge .......................................................................................................................... 27
7.1 Seznam slik ........................................................................................................... 27
7.2 Kazalo programske kode ...................................................................................... 27
7.3 Zgoščenka ............................................................................................................. 28
7.4 Naslov študenta ..................................................................................................... 28
7.5 Kratek življenjepis ................................................................................................ 28
VI
UPORABLJENE KRATICE
PHP - PHP: Hypertext Preprocessor (PHP: hipertekst predprocesor)
CSS - Cascading Style Sheets (kaskadne stilske podloge)
HTML - Hyper Text Markup Language (jezik za označevanje nadbesedila)
AJAX - Asynchronous JavaScript and XML (asinhroni JavaScript in XML)
JSON - JavaScript Object Notation (Objektna notacija za JavaScript)
DOM - Document Object Model (Dokumentno objektni model)
MVC - Model View Controler (Model, Pregled, Kontroler)
SQL - Structured Query Language (strukturirani povpraševalni jezik za delo s
podatkovnimi bazami)
PDO - PHP Data Objects (PHP podatkovni objekti)
URL - Uniform Resoruce Locator (enovit vir lokacije)
OS - Operacijski sistem
QR code - Quick response code (koda za hitro prepoznavanje)
PB – Podatkovna baza
MD5 - Message-Digest algorithm 5 (Besedno številski algoritem 5)
RGB – Red Green Blue (rdeča zelena modra)
HEX - Hexadecimal (Heksa decimalno)
VII
Razvoj mobilne spletne aplikacije za gostinstvo
1
1 Uvod
Razvoj mobilnih aplikacij je v zadnjih letih strmo narasel. Vse več pozornosti se usmerja v
razvoj aplikacij prilagojenih za mobilne naprave, torej mobilne telefone ter v zadnjem času
vse več tudi za prenosne tablice oziroma tablične računalnike.
V diplomski nalogi bomo obravnavali področje razvoja mobilnih spletnih aplikacij,
natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Aplikacija bo tako
omogočala hitrejše naročanje, napreden pregled nad prometom ter vodenje podjetja od
doma in tako povečanje efektivnosti ter zmanjšanje stroškov vodenja gostinstva.
Cilj diplomske naloge je s pridobljenimi informacijami iz analize izdelati povsem delujoč
prototip mobilne spletne aplikacije, katera bo tekla na strežniku v zaprtem omrežju.
Izdelali bomo namensko mobilno spletno aplikacijo z trenutno prosto dostopnimi
rešitvami.
Pri sami realizaciji rešitve v diplomski nalogi bomo pozornost posvetili izgradnji strukture,
na kateri bo možen nadaljnji razvoj tudi v prihodnje. Zaradi neprestanega razvoja
posameznih tehnologij kot so HTML5, jQuery Mobile ter PHP ter objavljanjem novih
različic njihovih rešitev je pomembno, da bo naša aplikacija omogočala nadgradnjo na
najnovejše posodobitve. Tako bo aplikacija tekom časa ostala varna ter nudila zadnje
funkcionalnosti, katere ponujajo ogrodja.
Z aplikacijo želimo dokazati, da je mogoče spletno aplikacijo prilagoditi za različne
platforme, ne da bi bili pri tem prikrajšani za določene funkcionalnosti, kot jih ponujajo
namenske klasične aplikacije za posamezne operacijske sisteme oz. mobilne platforme.
Pomembno nam je tudi, da v same funkcionalnosti aplikacije zajamemo čim več želj ter
potreb lastnikov lokalov, tako bi prehod na našo rešitev bil brez prikrajšanja
funkcionalnosti.
Glavni poudarek aplikacije je povsem prilagojen vmesnik za mobilne naprave ter
optimalno delovanje na različnih mobilnih operacijskih sistemih. Prednost predstavljajo
tudi funkcionalne zahteve stroke.
V naslednjem poglavju bomo preučili zahteve stroke ter na podlagi zahtev pripravili načrt
aplikacije. Nato sledi v tretjem poglavju izbira programskih knjižnic ter orodij za
realizacijo načrta aplikacije. Tako se bomo podrobneje seznanili s programskim jezikom
Razvoj mobilne spletne aplikacije za gostinstvo
2
PHP, označevalnim jezikom HTML5, podatkovno bazo MySQL in javascript knjižnico
jQuery ter jQuery Mobile. V četrtem poglavju nato sledi izdelava aplikacije z izbranimi
tehnologijami iz tretjega poglavja ter predstavitev delovanja aplikacije v obliki zaslonskih
slik iz mobilne naprave.
Razvoj mobilne spletne aplikacije za gostinstvo
3
2 Načrtovanje rešitve
Zaradi trenda se vse več proizvajalcev strojne opreme usmerja na nova tržišča. S strojno
opremo pa na trg prihaja vedno več različnih operacijskih sistemov (OS), kateri imajo svoj
programski jezik ter svoje ogrodje za razvijanje aplikacij.
Trenutno je na trgu več kot 10 različnih operacijskih sistemov, od katerih vsak uporablja
različni programski jezik za razvijanje. Kot je razvidno na sliki 1, v letu 2012 prevladuje
operacijski sistem Android, kateri si lasti krepkih 64% tržišča, sledi mu iOS podjetja
Apple, zadnjih 10 odstotkov si še delijo Nokiin Symbian, Windows Phone ter RIM
(BlackBerry). Samo v drugi četrtini leta 2012 je Android zabeležil 98.529 nakupov
mobilnih telefonov in tablic z njihovo platformo [1] .
Slika 2.1 - Tržni delež mobilnih operacijskih sistemov zadnjih 5 let. [1]
Razvoj mobilne spletne aplikacije za gostinstvo
4
Po ogledu statistike bi lahko rekli, da je najbolj smiseln razvoj v okolju Android, vendar
tako izpustimo več kot 30 odstotkov populacije, katera ne uporablja tega operacijskega
sistema. Ker je pa razvoj za različne platforme bistveno dražji ter tudi časovno zahtevnejši,
je smiseln razvoj mobilnih spletnih aplikacij, katere delujejo neodvisno od operacijskega
sistema. Tako prihranimo denar, čas pa porabimo za optimiziranje delovanja same
aplikacije, kot podporo za več platform.
2.1 Anketa o uporabi mobilnih spletnih aplikacij
Z anketo smo želeli ugotoviti, kako uporabniki mobilnih naprav gledajo na mobilne spletne
aplikacije. V ta namen smo ustvarili kratko anketo. Anketo smo objavili na socialnih
omrežjih ter različnih debatnih forumih za čim večji vzorec. Objavljena je bila dne
1.8.2012 ter zaključena 14.8.2012. V tem času je anketo rešilo 79 oseb različnega spola ter
različne starostne skupine.
Slika 2.2 - Večina populacije predstavlja moški spol, kar 86 odstotkov.
Moški 86%
Ženski 14%
Spol
Razvoj mobilne spletne aplikacije za gostinstvo
5
Slika 2.3 - Povprečna starost znaša 22,08 let. Torej je zajeta starostna skupina mladih, kar
pomeni, da je bolje seznanjena z mobilnimi napravami ter samimi aplikacijami.
.
Anketo smo sestavili tako, da smo dobili osnovne podatke o anketirancu (starost ter spol).
Nato smo zastavili nekaj specifičnih vprašanj na tematiko mobilne aplikacije. Predvsem
nas je zanimalo ali uporabljajo namenske aplikacije na mobilnih napravah, kakšne mobilne
naprave uporabljajo (z zaslonom na dotik), kateri operacijski sistem uporablja naprava ter
za konec ali bi uporabljali spletne aplikacije.
Slika 2.4 – Rezultat nakazuje na vse večjo uporabo naprav občutljivih na dotik.
02468
1012141618
0
13
14
15
18
19
20
21
22
23
24
25
26
27
28
29
31
32
34
(bla
nk)
Starost
58
18 3
Da Ne Ne, vendar si bom vkratkem
Si lastite mobilno napravo z zaslonom na dotik?
Razvoj mobilne spletne aplikacije za gostinstvo
6
Z vprašanjem ali anketiranec uporablja mobilno napravo z zaslonom na dotik, smo želeli
ugotoviti, kakšen je trenutni trend, saj je implementacija vmesnika prilagojenega za dotik
bistveno lažja kot prilagoditev tudi na klasične tipkovnice. Rezultat nam je pokazal, da
večina že uporablja naprave z zaslonom občutljivim na dotik. Glavna prednost zaslonov na
dotik je predvsem ta, da so ti v veliki večini večji, kar omogoča večje vidno polje in s tem
možnost prikaza več podatkov na stran.
Slika 2.5 – Rezultati kažejo na veliko razpršenost operacijskih sistemov tudi pri majhnem
vzorcu.
Glede na statistične podatke v poglavju, nas je tudi zanimalo, kakšna je razpršenost
operacijskih sistemov na mobilnih napravah. Rezultati so pokazali podobno sliko kot je
trenutni globalni trend. Največ je uporabnikov operacijskega sistema Android, sledita
Symbian ter iOS. Tako smo že na mali populacijski skupini dobili zelo razpršene rezultate.
0 5 10 15 20 25 30 35
Android
Drugo
iOS
Symbian
Windows Phone
Kateri OS uporablja vaša mobilni naprava?
Razvoj mobilne spletne aplikacije za gostinstvo
7
Slika 2.6 – Večina anketirancev uporablja aplikacije na svojih mobilnih napravah.
Od anketirancev smo želeli tudi izvedeti, ali sploh uporabljajo aplikacije na njihovih
mobilnih napravah, ali le-ta služi zgolj kot komunikacijska napravam, če gre za mobilni
telefon. Rezultat je pričakovan, saj se vsak dan na namenskih tržiščih (Google Play, iTunes
App Store, Microsoft Marketplace itd.) pojavi na stotine novih aplikacij, najbolj
priljubljene pa imajo več milijonov prenosov.
Slika 2.7 – Anketiranci v večini nimajo zadržkov z uporabo spletnih aplikacij.
68
11
Da Ne
Uporabljate aplikacije na mobilnih napravah?
52
13 14
Da Ne Ne vem
Bi uporabljali namenske aplikacije če bi bile te v obliki spletne
aplikacije (spletne strani) in …
Razvoj mobilne spletne aplikacije za gostinstvo
8
Zanimalo nas je tudi ali so anketiranci pripravljeni zamenjati namenske klasične aplikacije
s spletnimi aplikacijami, če bi le te ponujale iste funkcionalnosti. Proti pričakovanju, jih je
večina odgovorila z da.
Kot zadnje nas je zanimalo kakšne so slabosti ali prednosti mobilnih spletnih aplikacij.
Večina jih je odgovorila, da je slabost povezava z internetom ter s tem povezani stroški.
Drugi so mnenja, da je aplikacija bolj uporabna, saj je prenosljiva in vedno posodobljena,
ter je mogoče povsod priti do podatkov (tudi iz drugih naprav). Tako je potrebno pri
razvoju katere koli spletne mobilne aplikacije paziti na optimizacijo pošiljanja podatkov,
čeprav je pokritost z brezžičnim omrežjem stalno večja, sploh v središčih mest ter
nakupovalnih centrih. Ker pa naša aplikacija deluje znotraj domačega omrežja, kjer je
brezžična povezava potrebna, teh težav ne bo.
2.2 Funkcionalne zahteve
Za načrtovanje ter izdelavo aplikacije, smo se poglobili v že obstoječe rešitve na trgu, ter
na podlagi le teh izdelali načrt. Tako smo določili nekaj obveznih mejnikov ter
funkcionalnosti, katere aplikacija mora vsebovati za brezhibno poslovanje.
Zaradi varnosti naročanja ter pogleda v poslovanje, mora aplikacija najprej zahtevati
avtorizacijo zaposlenega. Zaposleni imajo lastna uporabniška imena ter gesla za varno in
unikatno prijavo v aplikacijo. Po uspešno opravljeni prijavi, bo zaposlen imel možnost
naročanja, pregleda računov ter statistike naročil. Aplikacija omogoča tudi dva različna
tipa zaposlenega, tako lahko le lastnik (administrator) pregleduje statistiko vseh zaposlenih
ter ureja oziroma dodaja izdelke.
Naročilo bo sestavljeno iz treh korakov. Najprej bo zaposleni izbral mizo naročila, v
naslednjem koraku, bo izbral produkte. Produkti se morajo izpisat glede na izbrano
kategorijo. Pregled produktov bo sortiran glede na popularnost oziroma število naročil.
Tako bomo dosegli, da bodo največkrat naročeni produkti na vrhu seznama in bo naročanje
še hitrejše. Aplikacija mora tudi omogočati pregled naročenih produktov ter brisanje iz
seznama. Sledil bo zadnji korak, kjer se bo prikazalo predogled računa z vsemi naročenimi
produkti ter ceno. S klikom na potrditev, se bo račun ustvaril ter poslal na glavni terminal,
kjer bo možna takojšnja priprava naročila ter tiskanje računa.
Razvoj mobilne spletne aplikacije za gostinstvo
9
Po plačilu računa, se status naročila iz »Odprt« spremeni v »Plačan«. Kasnejša stornacija
računa bi tako bila možna le s strani osebe, katera ima za to pravice. Aplikacija bi na
glavnem meniju prikazovala tudi število odprtih računov trenutno prijavljenega
zaposlenega, število delovnih ur (od prijave) ter vrednost naročil od zadnje prijave.
Aplikacija bi še tudi omogočala pregled zaslužka za posameznega prijavljenega
zaposlenega po dnevih, tednih ter mesecih.
Ker gre v našem primeru za namensko aplikacijo, je vsekakor tudi potreben tudi posvet s
samo stroko, za katero bomo aplikacijo izdelali. V ta namen se je na spletnem forumu
InternetMojster.com [2] razvila debata ravno z namenom izdelave dotične mobilne
aplikacije. Tako smo dobili kar nekaj dodatnih zahtev in predlogov kaj vključiti v samo
aplikacijo.
Uporabniki so izpostavili naslednje predloge:
- prijava posameznih natakarjev (po prihodu v službo se prijavijo, po končanem
delovnem času odjavijo),
- novo naročilo po mizah (izris tlorisa miz),
- hitre tipke, priljubljeni oziroma večkrat naročeni artikli na začetku seznama izbire,
kategoriziranje artiklov v skupine,
- iskanje z uporabo avtosugestije (ang. Autosuggestion),
- prenosi naročil med natakarji,
- križno naročanje (oseba 1 lahko naroči v imenu osebe 2),
- administrativni pogled izven samega lokalnega omrežja (povezava od zunaj),
- sporočanje nizkih količin zaloge (elektronska pošta, SMS),
- izpis delovnih ur zaposlenih.
Tako smo dobili skupek najbolj pomembnih funkcionalnosti, brez katerih je razvijanje
nesmiselno. Za prototip aplikacije želimo ustvariti robustno infrastrukturo na kateri bo
možno razvijati tudi v prihodnje ter tako omogočiti enostavno dodajanje novih ter
izboljšanih funkcionalnosti.
Razvoj mobilne spletne aplikacije za gostinstvo
10
2.3 Tehnološke zahteve
Pred samo izdelavo aplikacije smo podrobneje analizirali posamezna ogrodja ter
tehnologije. Za aplikacijo je pomembno, da bo delovala v vseh trenutno razširjenih
operacijskih sistemih, tako mobilnih kot tudi namiznih, ter da bo prikaz v brskalnikih
omogočal optimalno delovanje ter tako nemoteč potek poslovanja v gostinstvu. Po zajemu
zahtev smo prišli do spoznanja, da za delovanje začrtane aplikacije potrebujemo naslednje
tehnologije:
- Izvajanje poslovne logike aplikacije na strežniku
- Shramba podatkov na strežniku
- Prikaz podatkov ter informacij na odjemalcu
Ker gre za spletno mobilno aplikacijo, pridejo v poštev programski jeziki kot so .NET,
JSF, PHP, Rubby on Rails, Paython ter drugi. Zaradi dostopnosti ter razširjenosti smo se
odločili za spletni skriptni programski jezik PHP. V veliko prednost je tudi to, da največ
razvijalcev seznanjenih s programskim jezikom PHP, tako bi nadaljnji razvoj bil lažji
zaradi široke izbire kadra programerjev ter razvijalcev aplikacij.
V povezavi s programskim jezikom PHP je podatkovna baza MySQL za shrambo
podatkov najprimernejša izbira, saj so za komunikacijo med programskim jezikom ter
podatkovno bazo obstajajo že vgrajene knjižnice, tako je delo hitro in enostavno ter tudi
čas izvajanja je tako brez obsežnih vtičnikov ter dodatnih knjižnic hitrejši.
Za prikaz do sedaj izbranih tehnologij, pa v spletu obstaja le en standard, HTML. Tako
bomo s pomočjo HTML-ja ter CSS-ja, kateri skrbi za grafično podobo aplikacije, vsebino
prikazali končnemu uporabniku. Za optimalnejšo izkušnjo pa še bo potreben poseg po
JavaScript-i, natančneje jQuery knjižnici. Izbira omenjene knjižnice je logična, saj je
trenutno najbolje razširjena in za njo obstaja največje število dodatnih modulov.
2.4 Tehnične zahteve
Glede na zahteve same poslovne logike aplikacije, potrebujemo primerno infrastrukturo za
delovanje vseh potrebnih tehnologij. Za delovanje aplikacije je tako potreben strežnik,
Razvoj mobilne spletne aplikacije za gostinstvo
11
kateri bo skrbel za programski del izvajanja aplikacije ter shrambo podatkov v podatkovni
bazi.
Sama investicija strežnika bi bila relativno majhna, saj za delovanje aplikacije ni potrebe
po zmogljivih ter dragih strežniških rešitvah. Prav tako je možen poseg v odprtokodne
rešitve operacijskih sistemov, kar zmanjša strošek investicije ter tako tudi samega
poslovanja.
Strežnik bi povezali v domače brezžično omrežje s požarnim zidom za varovan dostop do
podatkov izven domačega omrežja (oddaljen dostop lastnikov). Za vpeljavo domačega
brezžičnega omrežja je potreben zgolj brezžični usmerjevalnik. Če lokal že ponuja
brezžično omrežje svojim gostom, je smotrno, da se le ta loči z uporabo dodatnega
usmerjevalnika, namenjenega zgolj zaposlenim.
Za samo uporabo aplikacije, bi lokal potreboval mobilne naprave, bodisi tablične
računalnike ali mobilne telefone. Ker je aplikacija neodvisna od programske ter strojne
opreme proizvajalca, ni potrebe po omejitvi na določeni operacijski sistem. Tako bi
podjetje imelo proste roke pri izbiri opreme, kar bi spet omogočilo nakup najcenejše
oziroma najbolj optimalne opreme za čim manjše stroške investicije v sistem. Izbira
cenejše in tako tudi manj zmogljive strojne opreme ne bi vplivala na samo delovanje
aplikacije, saj za procesiranje skrbi strežnik, mobilna naprava mora le omogočati prikaz
podatkov na zaslon ter brezhibno navigiranje po aplikaciji.
Razvoj mobilne spletne aplikacije za gostinstvo
12
3 Uporabljene tehnologije
3.1 Jezik HTML5
Za celotno strukturo vizualne podobe mobilne aplikacije je potreben označevaleni jezik
HTML (Hyper Text Markup Language ali v prevodu jezik za označevanje nadbesedila). S
pomočjo HTML-ja določimo prikaz v brskalniku ter semantični pomen delov dokumenta.
Trenutno je v uporabi standard HTML 4.01 [3], katerega uporablja velika večina trenutnih
spletni strani. Za mobilno spletno aplikacijo pa je potreben poseg v prihajajoči standard
HTML5, kateri prinaša velike spremembe, tudi na področju za mobilne naprave.
HTML5 je označevalni jezik, kateri se nagiba k večji podpori za multimedijo (video, zvok)
in istočasno k bolj efektivni strukturi in s tem lepši preglednosti za človeka [4]. Trenutno je
še HTML5 vedno v fazi izdelave in še ni postal standard, kljub temu da se je razvoj začel
že leta 2004 ter je od zadnje različice (HTML 4.01) minilo že 13 let. Glavni namen
vpeljave novega standarda je zamenjava Flash tehnologije, katera se uporablja predvsem
za igre ter predvajanje slike ter zvoka. HTML5 tako prinaša nove elemente kot so article
(članek), audio (zvok), data (podatki), header (glava), footer (noga), video (film) itd.; nove
tipe vnosnih polj: date (datum), time (čas), number (število), itd.; ter nove atribute kot je
data-* (kjer * predstavlja poljubno besedo). Prav tako ogrodje jQuery Mobile že deluje v
HTML5 okolju, torej je razvoj v najnovejši različici neizogiben.
Tekom same izdelave bomo uporabili atribute data-type, data-role, data-theme, katere
komunicirajo z jQuery Mobile knjižnico. Za navigacijo ter glavo so v uporabi elementi
<nav> in <header>.Vse ostale značke so že standardne v različici HTML 4.1. Za
brezskrbno delovanje na različnih brskalnikih ter operacijskih sistemih, je potrebno
standard dosledno upoštevati ter generirano stran tudi preveriti z namenskimi orodji za
validiranje strukture dokumenta.
3.2 Skriptni jezik JavaScript
Javascript je objektno skriptni jezik s katerim ustvarjamo interaktivnost spletnih strani.
Razvit je bil s strani podjetja Netscape leta 1997. V spletu se uporablja zaradi enostavne
Razvoj mobilne spletne aplikacije za gostinstvo
13
povezave s HTML dokumenti. Prednost JavaScript programskega jezika je ta, da se izvaja
v brskalniku odjemalca in ne na aplikacijskem strežniku, saj tako razbremeni strežnik.
Težave nastanejo le, če brskalnik ne podpira JavaScript-a ali je ta onemogočen.
JavaScript ponuja tudi pester izbor knjižnic za lažje ter hitrejše razvijanje. Tako imamo več
različnih knjižnic, kot so: jQuery, MochiKit, Prototype, DOJO itd. [5] Za implementacijo
aplikacije, bomo posegli po knjižnici jQuery, saj le ta omogoča še podknjižnico jQuery
Mobile, katera omogoča lažji razvoj za mobilne naprave.
jQuery
jQuery je JavaScript knjižnica, katere razvoj sega v leto 2006. Po podatkih Wikipedije
uporablja jQuery knjižnico 55 odstotkov od 10.000 trenutno najbolj obiskanih spletnih
strani, kar jo zavihti na prvo mesto popularnosti v kategoriji JavaScript knjižnice. [6]
Največja prednost jQuery-ja je ta, da omogoča enostavno izbiro DOM elementov, saj
uporablja enak princip kot CSS (selektor za HTML elemente ter njihove atribute tipa
razred ali njegov identifikator), ponuja pa še tudi pester izbor posebnih selektorjev kot so
na primer za vnosna polja (input[type='text'), za lihe in sode elemente (.razred:odd) itd. [7]
Knjižnica vsebuje tudi obsežen seznam funkcij za animacijo (slide (premakni),
fade(prikaži) itd.). Omogoča pa tudi prenos podatkov z AJAX protokolom, kateri bo pri
izdelavi aplikacije bistvenega pomena za hitro nalaganje ter nemoteno delovanje
naročanja. Z AJAX protokolom bomo s pomočjo poizvedb pridobili podrobnejše podatke o
produktih, osveževali listo naročenih produktov ter prikazali seznam produktov glede na
kategorijo. Za lažje pošiljanje podatkov bomo tudi potrebovali JSON, s pomočjo katerega
bomo podatke pošiljali v poljih (array) in ne zgolj kot niz. Sam jQuery Mobile s pomočjo
AJAX protokola nalaga posamezne strani.
V naslednjem poglavju bomo opisali kaj je JSON ter kako deluje jQuery Mobile.
JSON
JSON (JavaScript Object Notation, v prevodu objektna notacija za javascript) je lahek
format za izmenjavo podatkov. Prednost je ta, da je branje ter pisanje za ljudi enostavno.
Uporablja se za pošiljanje med posameznimi programskimi jeziki, zato je programsko
neodvisen [8]. V našem primeru ga bomo uporabili za prenos podatkov iz PHP-ja v
Razvoj mobilne spletne aplikacije za gostinstvo
14
jQuery, in sicer za poizvedbe, katere bodo vračale podatke o produktu ali polja vseh
produktov za prikaz pri naročilu.
jQuery Mobile
jQuery Mobile je obsežna knjižnica JavaScript-e ter pod knjižnica jQuery-ja, katera je
spisana za izdelavo spletnih strani prilagojenih na mobilnih napravah. Knjižnica omogoča
enostavno ter hitro implementacijo elementov, kateri so prilagojeni za prikaz spletne strani
na mobilnih napravah. Tako s pomočjo HTML5 elementa data dodajamo v sam HTML
značke za preobrazbo v mobilni prikaz. Na primer z značko data-page='seznam' določimo,
da gre za stran, katere unikatni identifikator je seznam. S pomočjo tega identifikatorja
lahko prikličemo stran v prikaz ali jo skrijemo. En HTML dokument ima v telesu lahko
več takšnih strani, zato je nalaganje različnih strani znotraj enega dokumenta hitro.
jQuery Mobile omogoča tudi veliko izbiro elementov, kateri so dobro poznani v
standardnih aplikacijah na mobilnih OS. Tako imamo na primer elemente: button (gumb)
katere lahko združimo v skupine ter dodamo ikone. Omogoča tudi izdelavo navigacijskih
vrstic na vrhu in dnu strani.
Slika 3.1- Primer gumba za dodajanje in odstranjevanje [9].
Knjižnica ponuja tudi nekaj posebnih dogodkov (ang. Event), kateri prožijo funkcije. Ti
dogodki so posebej prilagojeni za mobilne naprave z zaslonom občutljivim na dotik. Ena
izmed takih funkcij je swipe (prevod podrsaj), katera simulira premik prsta v določeno
smer (levo, desno, gor, dol). Drugi uporabni dogodek je še taphold (prevod stisni in drži),
kateri se proži, če je pritisk s prstom daljši od 750 milisekund. Funkcijo taphold bomo v
sami aplikaciji uporabili za prikaz podrobnih informacij produkta pri naročanju, saj s tap
(prevod pritisk) prožimo dodajanje produkta na seznam naročil.
Posebnost je tudi način prehoda med stranmi. Knjižnica s pomočjo AJAX-a naloži želeno
spletno stran ter jo prikaže. S tem pa nam ponuja tudi poseben prehod med stranmi, da
dosežemo podoben učinek, kot na klasičnih aplikacijah (prehod iz leve proti desni,
obračanje strani itd.)
Razvoj mobilne spletne aplikacije za gostinstvo
15
Za izgled celotne podobe mobilne spletne strani, skrbi pet pripravljenih grafičnih predlog.
Te grafične predloge lahko priredimo za vsak element drugače, torej imamo možnost, da je
vsak gumb drugačne barve, vse kar je potrebno, je to da določimo njegovo grafično
predlogo z uporabo elementa data-theme. Če ponujene predloge ne ustrezajo, imamo
možnost z uporabo orodja ThemeRoller le te prilagoditi po lastnih potrebah. [10]
Slika 3.2 – Vseh pet pripravljenih grafičnih podob (primer za modro: data-theme='b').
Ta funkcionalnost nam omogoča, da za učinek kot je na klasičnih mobilnih aplikacijah, ne
potrebujemo znanja iz oblikovanja ter da aplikacijo oblikujemo brez grafičnih orodij kot so
Adobe Photoshop ter Adobe Fireworks. Za našo aplikacijo smo se odločili da uporabimo
barvno shemo A,B,C ter prilagojen E (Theme Roller) ter jih kombiniramo z barvami, da bo
aplikacija pregledna ter prijetna za pogled.
3.3 Strežniški skriptni jezik PHP
Za izvajanje poslovne logike aplikacije na strežniku, bo skrbel odprtokodni strežniški
programski jezik PHP. Podoben je strukturiranim programskim jezikom kot sta C in Perl.
Omogoča tudi razvijanje s pomočjo razredov ter funkcij. En izmed že vgrajenih razredov
je razred PDO (PHP Data Objects, v prevodu PHP objektni podatki), kateri omogoča
komunikacijo s podatkovno bazo MySQL.
Za delovanje PHP-ja je potrebna določena infrastruktura in sicer spletni strežnik kot je
Apache, kateri je trenutno najbolj razširjen spletni strežnik za PHP. Apache skrbi za
pretvorbo PHP programskega skriptnega jezika v jezik na nivoju operacijskega sistema.
Prednost Apache-ja je ta, da je na voljo na različnih sistemih (Windows, Linux, OS-X itd),
kar omogoča večjo izbiro pri vzpostavitvi infrastrukture aplikacije.
Razvoj mobilne spletne aplikacije za gostinstvo
16
Za potrebe aplikacije smo pripravili enostavno MVC (model, view, controler) strukturo za
lažjo izdelavo ter kasnejše spreminjanje in dopolnjevanje aplikacije. Model bo skrbel za
povezavo s podatkovno bazo MySQL in bo vseboval vse funkcije za delo s podatki (vnos,
branje, posodobitev podatkov), controller (kontroler) bo skrbel za poslovno logiko
aplikacije, view (pogled) bo vse generirane podatke in informacije prikazal v brskalniku.
Prednost takšne strukture je v enostavnejšem razvoju ter izboljšavah, kljub temu, da je
vzpostavitev le-te na začetku dolgotrajnejša.
3.4 Podatkovna baza MySQL
Aplikacija potrebuje tudi prostor, kjer se shranjujejo različni podatki (izdelki, uporabniki,
računi itd.). Podatkovna baza je zbirka dokumentov na katere se lahko sklicujemo, jih
razvrščamo, iščemo ter urejamo. Za potrebe aplikacije bomo uporabili relacijski model,
kateri spada med površinske modele, saj z njim predstavimo bazo na zunanjem in
konceptualnem nivoju [11][12].
V kombinaciji s skriptnim jezikom PHP je najbolj razširjena uporaba MySQL odprtokodne
rešitve podjetja Oracle (prej Sun). Vsa večja imena internetnega posla uporablja MySQL
podatkovno bazo (Google, Facebook, Wikipedia, Youtube itd)[13], prav tako velika
večina CMS-jev (Content Managment System, v prevodu sistem za urejanje vsebine)
podpira MySQL PB (podatkovne baze). Prednost izbrane PB je tudi ta, da je razširjena v
različnih programskih jezikih, tako ponuja obširno integracijo.
Za načrtovanje PB si lahko pomagamo z grafičnimi orodji kot je DB Designer, v katerem
narišemo ER-diagram vseh entitet ter relacij med entitetami. Orodje nato tudi omogoča
sinhronizacijo s samo podatkovno bazo MySQL.
Ker so podatki v podatkovni bazi za človeka težko berljivi, bomo v pomoč uporabili
phpMyAdmin rešitev, katera ponuja grafični vmesnik na osnovi programskega jezika PHP.
Tako bomo imeli pregled nad podatki, kateri se trenutno nahajajo v podatkovni bazi, jih
urejali ali dodajali nove.
Razvoj mobilne spletne aplikacije za gostinstvo
17
4 Razvoj in predstavitev rešitve
4.1 Razvojno okolje
Za razvoj aplikacije ter testiranje funkcionalnosti smo potrebovali infrastrukturo katera bo
omogočala razvoj ter istočasno delovanje vseh tehnologij. Za potrebe strežniškega
izvajanja smo na osebni računalnik namestili program WAMP (Windows Apache, MySql
and PHP) kateri v paketu ponuja vse rešitve za delovanje spletne aplikacije. WAMP je
brezplačen program, kateri deluje na vseh Microsoft Windows operacijskih sistemih.
Aplikacijo smo razvijali v okolju Adobe Dreamwaver, saj ponuja že integrirano knjižnico
za jQuery ter jQuery Mobile, kar je omogočalo hitrejši ter zanesljivejši razvoj. Podpira tudi
že HTML5 standard ter ima podporo za PHP.
4.2 Razvoj rešitve
Za delovanje aplikacije smo naprej pripravili podatkovno bazo. Za samo implementacijo,
hitrost delovanja ter nadaljnji razvoj je potrebna robustna ter optimalna podatkovna baza z
normaliziranimi entitetami. Najbolj pomembna je entiteta products (produkti) katera je v
povezavi z kategorijami ter dobavitelji. Vsak produkt ima lahko več kategorij ter
dobaviteljev in tudi dobavitelj in kategorija ima lahko več produktov, zato je tip relacije
mnogo-mnogo.
Posebnost je entiteta bills (računi) kjer imamo stolpec bill_products (produkti na računu), v
katerega shranimo serializirano polje vseh naročenih produktov ter cene. Bill_hash vsebuje
MD5 kodirano vsebino računa ter datuma, kar onemogoči naknadno spreminjanje cen
produktov.
Razvoj mobilne spletne aplikacije za gostinstvo
18
Slika 4.1 – ER-diagram podatkovne baze aplikacije, narisan v orodju DB Designer.
Sama zgradba strani je s pomočjo HTML5 povsem prilagojena za jQuery Mobile. Celotna
zgradba dokumenta mora biti sestavljena po HTML5 standardu. V glavi dokumenta
HTML je najprej vključena stilska predloga CSS za jQuery Mobile ter stilska predloga
aplikacije, nato sledi vključitev knjižnice jQuery, jQuery Mobile ter JSON kot je prikazano
na izseku programske kode 5.1
Za lažjo preglednost nad datotekami, so le te v mapi theme in kasneje ločene na css ter js
datoteke.
Po vključitvi potrebnih knjižnic in grafičnih predlog ustvarimo stran s pomočjo značke
data-role='page', s katero povemo, da gre za ločeno stran, katera bo prikazana v brskalniku.
Razvoj mobilne spletne aplikacije za gostinstvo
19
V samo stran lahko nato dodamo poljubne elemente, kot so glava strani (header),
navigacija (nav), noga strani (footer) itd. Vse elemente določamo z značko data-role. Tako
smo ustvarili uvodno stran z navigacijo na naslednje strani, kar je razvidno iz programske
kode 5.2.
Programska koda 4.1 – Izsek iz začetne strani, kjer imamo definirano navigacijo.
Za izvajanje operacij ter pridobivanja podatkov iz podatkovne baze smo uporabili
strežniški skriptni jezik PHP. Kot je omenjeno v analizi, ima aplikacija lastno MVC
strukturo za enostaven razvoj ter kasneje tudi enostavno razširitev določenih
funkcionalnosti.
Celotna spletna aplikacija se proži v eni datoteki in sicer index.php. Datoteka vsebuje
preverjanje dveh parametrov GET. Tako lahko iz URL-ja določimo, kateri kontroler ter
katera funkcija se naj naloži (proži). Vzemimo za primer povezavo
/index.php?page=user&action=login, s pomočjo parametra page (stran) določimo
kontroler, tako se bo v tem primeru naložil kontroler user (uporabnik), kateri se nahaja na
lokaciji /controller/user.controller.php. Parameter action (akcija), v tem primeru login
(prijava), nam pove, da se zažene funkcija login v razredu user.
<div data-role="page" class="type-home">
<div data-role="content">
<div class="content-primary">
<nav>
<ul data-role="listview" data-inset="true" data-
theme="c" data-dividertheme="b">
</ul>
</nav>
</div>
</div>
</div>
Razvoj mobilne spletne aplikacije za gostinstvo
20
Kontroler
Kontrolerji so posamezni razredi aplikacije, kateri se naložijo ter ustvarijo ob določeni
zahtevi. Ob zahtevi iz parametra page ustvarimo referenco na razred. Istočasno tudi
naložimo model kontrolerja z istim imenom. Nato preverimo ali obstaja tudi klic action, da
zaženemo ustrezno funkcijo razreda.
Vsako funkcijo si lahko predstavljamo kot svojo stran. Vse podatke pošljemo s pomočjo
funkcije render() v HTML, kjer se prikažejo. Funkcija render() sprejme dva parametra, s
prvim povemo za katero predlogo gre, v drugi pa so vsi podatki v polju (array).
Programska koda 4.2 - Izsek iz razreda Order.
Model
Model vsebuje vse operacije, katere so povezane s podatkovno bazo (branje, vnos,
posodobitev). Vsak kontroler ima svoj model, kateri se tudi avtomatsko naloži ob zagonu
kontrolerja.
Programska koda 4.3 – Funkcija getTables().
public function index(){
$tables = Order::getTables();
render('order',array(
'title' => 'Naročilo',
'tables' => $tables
));
}
public static function getTables(){
global $db;
$st = $db->prepare("SELECT * FROM wb_tables WHERE
table_status=1");
$st->execute();
return $st->fetchAll();
}
Razvoj mobilne spletne aplikacije za gostinstvo
21
Vsaka funkcija modela opravlja svojo operacijo s podatkovno bazo. Funkcije se nahajajo v
tistih modelih, v katerih jih potrebuje kontroler (delo s produkti v modelu product, delo s
kategorijami v modelu category itd.). Če v kontrolerju potrebujemo tudi model iz drugega
področja, le tega naložimo s funkcijo loadModel(), ter ji s parametrom določimo ime
modela (na primer loadModel('product')).
Funkcije vsebujejo globalno spremenljivko $db katera vsebuje podatke o povezavi z
podatkovno bazo. Nato s pomočjo funkcije prepare() ter SQL poizvedovalnega stavka
pripravimo poizvedbo ter jo s execute() izvedemo. Če funkcija vrača podatke (SELECT) s
pomočjo funkcije fetch() oziroma fetchAll() te podatke vnesemo v polje, katerega vrnemo v
kontroler.
Prikaz podatkov v brskalniku
Za prikaz vseh do sedaj zbranih podatkov skrbi view oziroma pogled, prikaz. Kot smo že
omenili, funkcija render() v kontrolerju pokliče pripadajoči prikaz. Prikaz je sestavljen iz
HTML značk, vključene glave ter noge dokumenta ter spremenljivk oziroma podatkov,
katere pošlje kontroler.
Razvoj mobilne spletne aplikacije za gostinstvo
22
Programska koda 4.4 – jQuery funckija za prikaz novih računov s pomočjo AJAX
protokola.
Za hitrejše delovanje same aplikacije, smo še tudi dodali nekaj ostale jQuery kode. Tako
na primer s pomočjo AJAX protokola pridobivamo zadnje dodane račune na seznam vseh
računov. V jQuery-ju smo ustvarili interval, kateri poganja odsek kode vsakih 5 sekund. S
pomočjo AJAX-a kličemo kontroler Bill ter funkcijo getNewBill(). Funkciji pošljemo tudi
zadnji dodan ID računa, ki nato preverja ali je podan ID zadnji v bazi, če ni, naloži nove
račune ter jih vrne jQuery-u, kateri podatke nato doda v obstoječi seznam.
4.3 Predstavitev rešitve
Razvita spletna aplikacija tako omogoča prijavo v sistem z uporabniškim imenom ter
geslom dodeljenim s strani administratorja. Prijavljeni uporabniki lahko tako naročajo
setInterval(function(){
$.ajax({
type: "GET",
url: "?page=bill&action=getNewBill",
data: "bill_id="+$("#lastBill").val(),
dataType:"JSON",
success: function(data){
if(data.bill!=""){
$("#BillList").prepend(data.bill)
.listview('refresh');
$("#lastBill").val(data.last_bill);
}
}});
},5000);
Razvoj mobilne spletne aplikacije za gostinstvo
23
produkte, kateri so razporejeni v več kategorij. Uporabnik ima ves čas pregled nad ceno
naročila ter tudi seznam naročenih produktov, katere lahko tudi odstrani. Po končanem
naročilu se prikaže račun z vsemi naročenimi produkti, enake produkte združi ter prikaže
količino ter skupno ceno. Po potrditvi naročila se generira račun, kateri se shrani v
podatkovno bazo. Račun ima status odprt, dokler ga uporabnik ne zaključi ali ga
administrator stornira. Aplikacija še v trenutni fazi omogoča tudi pregled statistike naročil
za zadnje dni. Administratorjem je omogočeno dodajanje ter urejanje produktov ter
kategorij. Vmesnik za administratorje je prilagojen za mobilne naprave, tako je možno
urejanje tudi brez uporabe računalnika, predvsem je poudarek na velikosti elementov za
lažji dostop. Posebnost je tudi lastna izbira barve kategorije, kar omogoča za večjo
preglednost ter hitrejšo dostopanje pri naročilih. Za izbiro barve so uporabljeni trije drsniki
za barve RGB (red, green, blue v prevodu rdeča, zelena, modra). S premikom drsnikov
nastavimo posamezno barvno intenzivnost ter pretvorimo RGB v obliko HEX (Heksa
decimalno).
Slika 4.2 – Naslovna stran z osnovnimi podatki ter navigacijo.
Razvoj mobilne spletne aplikacije za gostinstvo
24
Za samo testiranje delovanja aplikacije smo posegli po brskalniku Opera Mobile Emulator,
katerega smo namestili v Windows 7 okolje. Ta različica brskalnika generira stran v
mobilnem formatu. Za preverjanje določenih funkcij jQuery Mobile, smo tudi uporabili
brskalnik Google Chrome, kateri omogoča določene funkcionalnosti kot jih omogoča tudi
Chrome na mobilnih napravah.
Za podrobnejše testiranje smo uporabili tablični računalnik Asus Transformer, na katerem
je nameščen omenjeni Chrome za mobilne različice. Delovanje aplikacije smo tudi
preskusili na malo starejšem mobilnem telefonu Nokia 5800 v brskalniku Opera Mobile ter
Mini, na iPhonu 4 ter iPodu druge generacije. Zaradi kompatibilnosti jQuery Mobile ter
PHP strežniškega jezika, je aplikacija na vseh napravah, operacijskih sistemih ter
brskalnikih delovala brez odstopanj.
Sledijo zaslonske slike s tabličnega računalnika Asus Transformer, kateri uporablja
operacijski sistem Android 4.0.3 ter brskalnik Google Chrome (različica 18).
Slika 4.3 – Pregled naročil. Ob dodajanju novih računov, se leti prikažejo na vrhu seznama
samodejno (v intervalu pet sekund).
Razvoj mobilne spletne aplikacije za gostinstvo
25
5 Sklep
V sklopu diplomske naloge smo tako spoznali tehnologije, katere omogočajo razvoj
mobilne spletne aplikacije. Aplikacija je bila izdelana z mislimi na enostavno uporabo ter
pomoč pri samem vodenju gostinstva. Z nadaljnjim razvojem bi lahko še dodatno izboljšali
samo delovanje aplikacije, v pomoč bi pa nam tudi bile povratne informacije testiranja in
vpeljave v vsakdan. Ob vpeljavi bi bilo potrebno najprej testirati čase naročanja, ali so se ti
zmanjšali, ali so gostje z takim naročilom hitreje postrežen in bolj zadovoljni. Analiza bi
pokazala tudi ali so se zmanjšali stroški poslovanja zaradi hitrejšega naročanja ter hitrega
vpogleda v statistiko, kar bi spodbudilo večjo rivalstvo med uslužbenci ter tako povečanje
prometa.
Sama ideja izboljšave aplikacije se še nadaljuje z razvojem naprednejše statistike, vpeljave
v računovodske programe ter tudi v samostojno naročanje brez zaposlenih. Tako bi gost z
lastno mobilno napravo s pomočjo QR kode prišel na točno določeno stran v brskalniku,
kjer bi lahko sam izbiral s seznama produktov. Druga alternativa je tudi vgradnja tabličnih
računalnikov v mize. Prav tako bi omogočili naročanje brez osebja ter jim omogočili tudi
krajšanje časa med čakanjem na prihod naročenih produktov z brskanjem po spletu ali
igranju iger.
Pri samem razvoju smo naleteli tudi na različne težave. Največjo je predstavljal razvoj z
jQuery Mobile, kateri je v nekaj letih zelo napredoval. Pri začetni implementaciji
aplikacije je namreč obstajala le testna različica, katera se je hitro spreminjala ter
dopolnjevala. Do stabilne različice je minilo le nekaj mesecev, ker je ta vsebovala veliko
novosti, nas je vse skupaj pripeljalo do odločitve, da vizualno ogrodje spletne aplikacije
zasnujemo od začetka.
V diplomski nalogi smo pridobili veliko izkušenj ter znanja v samem procesu načrtovanja
ter realizacije aplikacije. Spoznali smo se z novimi, prihajajočimi trendi ter uporabili
tehnologije katere še komaj prihajajo v širšo uporabo.
Razvoj mobilne spletne aplikacije za gostinstvo
26
6 Literatura in viri
[1] Mobile operating system – Wikipedia, 2012. [Spletna stran]. Dostopna na:
http://en.wikipedia.org/wiki/Mobile_operating_system [Dostopano: 15.8.2012]
[2] Debata – mobilne spletne aplikacije, 2012 [Spletna stran]. Dostopna na:
http://www.internetmojster.com/splosno/debata-mobilne-spletne-aplikacije.html
[Dostopano: 13.8.2012]
[3] HTML – Wikipedia, 2012 [Spletna stran]. Dostopna na:
http://en.wikipedia.org/wiki/HTML [Dostopano: 15.7.2012]
[4] HTML5 – Wikipedia, 2012 [Spletna stran]. Dostopna na:
http://en.wikipedia.org/wiki/HTML5 [Dostopano: 15.8.2012]
[5] Javascript Libraries, 2012 [Spletna stran]. Dostopna na: http://javascriptlibraries.com/
[Dostopano: 16.8.2012]
[6] jQuery – Wikipedia, 2012 [Spletna stran] Dostopna na:
http://en.wikipedia.org/wiki/Jquery [Dostopano: 17.8.2012]
[7] Selectors – jQuery API, 2012 [Spletna stran] Dostopna na:
http://api.jquery.com/category/selectors/ [Dostopano: 18.8.2012]
[8] JSON, 2012 [Spletna stran] Dostopna na: http://www.json.org/ [Dostopana: 21.8.2012]
[9] jQuery Mobile Docs, 2012 [Spletna stran] Dostopna na:
http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-grouped.html [Dostopano:
18.8.2012]
[10] ThemeRoller, 2012 [Spletna stran] Dostopna na: http://jquerymobile.com/themeroller/
[Dostopano: 18.8.2012]
[11] Relacijski model, 2012 [Spletna stran] Dostopna na:
http://drenovec.tsckr.si/model/relac.htm [Dostopano: 19.8.2012]
[12] Podatkovna baza – Wikipedia, 2012 [Spletna stran] Dostopna na:
http://sl.wikipedia.org/wiki/Podatkovna_baza [Dostopano: 19.8.2012]
[13] MySQL – Wikipedia, 2012 [Spletna stran] Dostopna na:
http://en.wikipedia.org/wiki/Mysql [Dostopano: 19.8.2012]
Razvoj mobilne spletne aplikacije za gostinstvo
27
7 Priloge
7.1 Seznam slik
Slika 2.1 - Tržni delež mobilnih operacijskih sistemov zadnjih 5 let. [1] ............................. 3
Slika 4.1- Primer gumba za dodajanje in odstranjevanje [9]. .............................................. 14
Slika 4.2 – Vseh pet pripravljenih grafičnih podob (primer za modro: data-theme='b'). ... 15
Slika 4.3 – ER-diagram podatkovne baze aplikacije, narisan v orodju DB Designer
......................................................................................... Napaka! Zaznamek ni definiran.
Slika 6.1 – Naslovna stran z osnovnimi podatki ter navigacijo. ......................................... 23
Slika 6.2 – Pregled naročil. Ob dodajanju novih računov, se leti prikažejo na vrhu seznama
samodejno (v intervalu pet sekund). .................................................................................... 24
Slika 9.1 - Rezultat ankete na vprašanje »Vaš spol«. ...... Napaka! Zaznamek ni definiran.
Slika 9.2 - Rezultat ankete na vprašanje »Vaša starost«. Napaka! Zaznamek ni definiran.
Slika 9.3 – Rezultat ankete na vprašanje »Si lastite telefon z zaslonom na dotik?«. Napaka!
Zaznamek ni definiran.
Slika 9.4 – Rezultati ankete na vprašanje »Kateri OS (operacijski sistem) uporablja vaš
mobilni telefon?«. ............................................................ Napaka! Zaznamek ni definiran.
Slika 9.5 – Rezultati ankete na vprašanje »Uporabljate aplikacije na mobilnem telefonu?«.
......................................................................................... Napaka! Zaznamek ni definiran.
Slika 9.6 – Rezultati ankete na vprašanje »Bi uporabljali namenske aplikacije če bi bile te
v obliki spletne aplikacije in dostopne na različnih platformah?«.Napaka! Zaznamek ni
definiran.
7.2 Kazalo programske kode
Programska koda 5.1 – Izsek iz začetne strani, kjer imamo definirano navigacijo. ............ 19
Programska koda 5.2 - Izsek iz razreda Order. ................................................................... 20
Programska koda 5.3 – Funkcija getTables(). ..................................................................... 20
Razvoj mobilne spletne aplikacije za gostinstvo
28
7.3 Zgoščenka
Zgoščenka vsebuje digitalno obliko diplomskega dela ter izvirno kodo aplikacije s
podatkovno bazo.
7.4 Naslov študenta
Tomaž Močnik
Očeslavci 42
9245 Sp. Ivanjci
Telefon: +386 31 719 398
E-poštni naslov: [email protected]
7.5 Kratek življenjepis
Rojen: 5.4.1989
Kraj bivanja: Očeslavci
Izobrazba:
- 1996-2004 Osnovna šola Kapela
- 2004-2008 Srednja elektro-računalniška šola Maribor, Tehniška gimnazija
- 2008-2012 Fakulteta za elektrotehniko, računalništvo in informatiko Maribor,
Informatika in tehnologije komuniciranja, Univerzitetni
Razvoj mobilne spletne aplikacije za gostinstvo
29
Razvoj mobilne spletne aplikacije za gostinstvo
30
Razvoj mobilne spletne aplikacije za gostinstvo
31