40
Tomaž Močnik RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO Diplomsko delo Maribor, avgust 2012

RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

Tomaž Močnik

RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA

GOSTINSTVO

Diplomsko delo

Maribor, avgust 2012

Page 2: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 3: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno
Page 4: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 5: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 6: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 7: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 8: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 9: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno
Page 10: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 11: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 12: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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]

Page 13: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 14: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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?

Page 15: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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?

Page 16: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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 …

Page 17: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 18: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 19: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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,

Page 20: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 21: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 22: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 23: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.)

Page 24: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 25: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 26: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 27: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 28: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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>

Page 29: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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();

}

Page 30: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 31: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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);

Page 32: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 33: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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).

Page 34: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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.

Page 35: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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]

Page 36: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 37: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

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

Page 38: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

Razvoj mobilne spletne aplikacije za gostinstvo

29

Page 39: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

Razvoj mobilne spletne aplikacije za gostinstvo

30

Page 40: RAZVOJ MOBILNE SPLETNE APLIKACIJE ZA GOSTINSTVO · 2017-11-28 · natančneje razvoj mobilne spletne aplikacije za pomoč v gostinstvu. Spoznali se bomo z rešitvami, katere so trenutno

Razvoj mobilne spletne aplikacije za gostinstvo

31