Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Kristijan Pintarič
Spletna aplikacija za namizne in mobilne
naprave z uporabo ASPNET MVC 3
Diplomsko delo
Maribor december 2011
I
Diplomsko delo visokošolskega strokovnega študijskega programa
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3
Študent Kristijan Pintarič
Študijski program VS ŠP Računalništvo in informatika
Smer Informatika
Mentor višji pred mag Boštjan Kežmah
Maribor december 2011
II
III
ZAHVALA
Zahvaljujem se svojemu mentorju višjemu pred
mag Boštjanu Kežmahu ki mi je omogočil
izdelavo diplomskega dela z želeno temo ter mi pri
tem svetoval in me vodil Zahvaljujem se svojim
staršem ki so mi omogočili študij ter me pri tem
podpirali Zahvaljujem se tudi vsem ostalim ki so
mi na kakršen koli način pomagali v času študija
IV
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET
MVC 3
Ključne besede ASPNET MVC 3 spletna aplikacija mobilni telefoni Razor pogon
UDK [6592004]00445(0432)
Povzetek
V teoretičnem delu smo predstavili ASPNET MVC 3 tehnologijo Izpostavili smo njene
prednosti in slabosti ter prikazali uporabo AJAX tehnologije skupaj z ASPNET MVC 3
Lotili smo se tudi področja mobilnih telefonov in kako bi z uporabo ASPNET MVC 3
razvili spletno aplikacijo ki bi podpirala namizne in mobilne naprave V teoretičnem delu
smo predstavili tudi pristope razvijanja spletnih aplikacij za namizne in mobilne naprave
V praktičnem delu smo razvili lastno spletno aplikacijo ki podpira namizne in mobilne
naprave
V
Web application for desktop and mobile devices based on ASPNET
MVC 3
Key words ASPNET MVC 3 web application mobile phones Razor view engine
UDK [6592004]00445(0432)
Abstract
In the theoretical part we presented the ASPNET MVC 3 technology We highlighted its
strengths and weaknesses and demonstrated the use of the AJAX technologies along with
ASPNET MVC 3 We also addressed the area of mobile phones and the use of ASPNET
MVC 3 in the development of a web application that supports desktop and mobile devices
In the theoretical part we find approaches of developing web applications for desktop and
mobile devices In the practical part we developed our own web application that supports
desktop and mobile devices
VI
KAZALO VSEBINE
1 UVOD - 1 -
2 MVC (Model ndash View ndash Controller) - 2 -
21 Modeli - 3 -
22 Pogledi - 3 -
23 Krmilniki - 4 -
3 PREDNOSTI IN SLABOSTI ASPNET MVC - 9 -
4 ASPNET MVC IN AJAX - 10 -
5 RAZOR POGON ZA POGLED - 15 -
6 ASPNET MVC 3 IN MOBILNI TELEFONI - 23 -
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone - 24 -
62 Zaznava brskalnikov - 24 -
621 Zaznava brskalnika s pomočjo http zahteve - 25 -
622 WURFL (Wireless Universal Resource File) - 25 -
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3 - 26 -
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET MVC 3) PRIMERNA
TUDI ZA MOBILNE TELEFONE - 27 -
71 Opis aplikacije - 27 -
72 Uporabljena orodja pri razvoju - 28 -
73 Načrt razvoja - 28 -
74 Implementacija - 29 -
741 Grafična predloga za namizne in mobilne naprave - 30 -
742 Podatkovni model - 31 -
743 Zaznava namiznih in mobilnih brskalnikov - 34 -
744 Prijava uporabnika v sistem - 36 -
745 Spored - 38 -
746 Rezervacija - 42 -
747 Vnos novih filmov - 45 -
748 Dodajanje filmov v spored - 47 -
749 Pregled in prevzem rezervacij - 48 -
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah - 50
-
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
I
Diplomsko delo visokošolskega strokovnega študijskega programa
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3
Študent Kristijan Pintarič
Študijski program VS ŠP Računalništvo in informatika
Smer Informatika
Mentor višji pred mag Boštjan Kežmah
Maribor december 2011
II
III
ZAHVALA
Zahvaljujem se svojemu mentorju višjemu pred
mag Boštjanu Kežmahu ki mi je omogočil
izdelavo diplomskega dela z želeno temo ter mi pri
tem svetoval in me vodil Zahvaljujem se svojim
staršem ki so mi omogočili študij ter me pri tem
podpirali Zahvaljujem se tudi vsem ostalim ki so
mi na kakršen koli način pomagali v času študija
IV
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET
MVC 3
Ključne besede ASPNET MVC 3 spletna aplikacija mobilni telefoni Razor pogon
UDK [6592004]00445(0432)
Povzetek
V teoretičnem delu smo predstavili ASPNET MVC 3 tehnologijo Izpostavili smo njene
prednosti in slabosti ter prikazali uporabo AJAX tehnologije skupaj z ASPNET MVC 3
Lotili smo se tudi področja mobilnih telefonov in kako bi z uporabo ASPNET MVC 3
razvili spletno aplikacijo ki bi podpirala namizne in mobilne naprave V teoretičnem delu
smo predstavili tudi pristope razvijanja spletnih aplikacij za namizne in mobilne naprave
V praktičnem delu smo razvili lastno spletno aplikacijo ki podpira namizne in mobilne
naprave
V
Web application for desktop and mobile devices based on ASPNET
MVC 3
Key words ASPNET MVC 3 web application mobile phones Razor view engine
UDK [6592004]00445(0432)
Abstract
In the theoretical part we presented the ASPNET MVC 3 technology We highlighted its
strengths and weaknesses and demonstrated the use of the AJAX technologies along with
ASPNET MVC 3 We also addressed the area of mobile phones and the use of ASPNET
MVC 3 in the development of a web application that supports desktop and mobile devices
In the theoretical part we find approaches of developing web applications for desktop and
mobile devices In the practical part we developed our own web application that supports
desktop and mobile devices
VI
KAZALO VSEBINE
1 UVOD - 1 -
2 MVC (Model ndash View ndash Controller) - 2 -
21 Modeli - 3 -
22 Pogledi - 3 -
23 Krmilniki - 4 -
3 PREDNOSTI IN SLABOSTI ASPNET MVC - 9 -
4 ASPNET MVC IN AJAX - 10 -
5 RAZOR POGON ZA POGLED - 15 -
6 ASPNET MVC 3 IN MOBILNI TELEFONI - 23 -
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone - 24 -
62 Zaznava brskalnikov - 24 -
621 Zaznava brskalnika s pomočjo http zahteve - 25 -
622 WURFL (Wireless Universal Resource File) - 25 -
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3 - 26 -
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET MVC 3) PRIMERNA
TUDI ZA MOBILNE TELEFONE - 27 -
71 Opis aplikacije - 27 -
72 Uporabljena orodja pri razvoju - 28 -
73 Načrt razvoja - 28 -
74 Implementacija - 29 -
741 Grafična predloga za namizne in mobilne naprave - 30 -
742 Podatkovni model - 31 -
743 Zaznava namiznih in mobilnih brskalnikov - 34 -
744 Prijava uporabnika v sistem - 36 -
745 Spored - 38 -
746 Rezervacija - 42 -
747 Vnos novih filmov - 45 -
748 Dodajanje filmov v spored - 47 -
749 Pregled in prevzem rezervacij - 48 -
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah - 50
-
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
II
III
ZAHVALA
Zahvaljujem se svojemu mentorju višjemu pred
mag Boštjanu Kežmahu ki mi je omogočil
izdelavo diplomskega dela z želeno temo ter mi pri
tem svetoval in me vodil Zahvaljujem se svojim
staršem ki so mi omogočili študij ter me pri tem
podpirali Zahvaljujem se tudi vsem ostalim ki so
mi na kakršen koli način pomagali v času študija
IV
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET
MVC 3
Ključne besede ASPNET MVC 3 spletna aplikacija mobilni telefoni Razor pogon
UDK [6592004]00445(0432)
Povzetek
V teoretičnem delu smo predstavili ASPNET MVC 3 tehnologijo Izpostavili smo njene
prednosti in slabosti ter prikazali uporabo AJAX tehnologije skupaj z ASPNET MVC 3
Lotili smo se tudi področja mobilnih telefonov in kako bi z uporabo ASPNET MVC 3
razvili spletno aplikacijo ki bi podpirala namizne in mobilne naprave V teoretičnem delu
smo predstavili tudi pristope razvijanja spletnih aplikacij za namizne in mobilne naprave
V praktičnem delu smo razvili lastno spletno aplikacijo ki podpira namizne in mobilne
naprave
V
Web application for desktop and mobile devices based on ASPNET
MVC 3
Key words ASPNET MVC 3 web application mobile phones Razor view engine
UDK [6592004]00445(0432)
Abstract
In the theoretical part we presented the ASPNET MVC 3 technology We highlighted its
strengths and weaknesses and demonstrated the use of the AJAX technologies along with
ASPNET MVC 3 We also addressed the area of mobile phones and the use of ASPNET
MVC 3 in the development of a web application that supports desktop and mobile devices
In the theoretical part we find approaches of developing web applications for desktop and
mobile devices In the practical part we developed our own web application that supports
desktop and mobile devices
VI
KAZALO VSEBINE
1 UVOD - 1 -
2 MVC (Model ndash View ndash Controller) - 2 -
21 Modeli - 3 -
22 Pogledi - 3 -
23 Krmilniki - 4 -
3 PREDNOSTI IN SLABOSTI ASPNET MVC - 9 -
4 ASPNET MVC IN AJAX - 10 -
5 RAZOR POGON ZA POGLED - 15 -
6 ASPNET MVC 3 IN MOBILNI TELEFONI - 23 -
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone - 24 -
62 Zaznava brskalnikov - 24 -
621 Zaznava brskalnika s pomočjo http zahteve - 25 -
622 WURFL (Wireless Universal Resource File) - 25 -
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3 - 26 -
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET MVC 3) PRIMERNA
TUDI ZA MOBILNE TELEFONE - 27 -
71 Opis aplikacije - 27 -
72 Uporabljena orodja pri razvoju - 28 -
73 Načrt razvoja - 28 -
74 Implementacija - 29 -
741 Grafična predloga za namizne in mobilne naprave - 30 -
742 Podatkovni model - 31 -
743 Zaznava namiznih in mobilnih brskalnikov - 34 -
744 Prijava uporabnika v sistem - 36 -
745 Spored - 38 -
746 Rezervacija - 42 -
747 Vnos novih filmov - 45 -
748 Dodajanje filmov v spored - 47 -
749 Pregled in prevzem rezervacij - 48 -
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah - 50
-
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
III
ZAHVALA
Zahvaljujem se svojemu mentorju višjemu pred
mag Boštjanu Kežmahu ki mi je omogočil
izdelavo diplomskega dela z želeno temo ter mi pri
tem svetoval in me vodil Zahvaljujem se svojim
staršem ki so mi omogočili študij ter me pri tem
podpirali Zahvaljujem se tudi vsem ostalim ki so
mi na kakršen koli način pomagali v času študija
IV
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET
MVC 3
Ključne besede ASPNET MVC 3 spletna aplikacija mobilni telefoni Razor pogon
UDK [6592004]00445(0432)
Povzetek
V teoretičnem delu smo predstavili ASPNET MVC 3 tehnologijo Izpostavili smo njene
prednosti in slabosti ter prikazali uporabo AJAX tehnologije skupaj z ASPNET MVC 3
Lotili smo se tudi področja mobilnih telefonov in kako bi z uporabo ASPNET MVC 3
razvili spletno aplikacijo ki bi podpirala namizne in mobilne naprave V teoretičnem delu
smo predstavili tudi pristope razvijanja spletnih aplikacij za namizne in mobilne naprave
V praktičnem delu smo razvili lastno spletno aplikacijo ki podpira namizne in mobilne
naprave
V
Web application for desktop and mobile devices based on ASPNET
MVC 3
Key words ASPNET MVC 3 web application mobile phones Razor view engine
UDK [6592004]00445(0432)
Abstract
In the theoretical part we presented the ASPNET MVC 3 technology We highlighted its
strengths and weaknesses and demonstrated the use of the AJAX technologies along with
ASPNET MVC 3 We also addressed the area of mobile phones and the use of ASPNET
MVC 3 in the development of a web application that supports desktop and mobile devices
In the theoretical part we find approaches of developing web applications for desktop and
mobile devices In the practical part we developed our own web application that supports
desktop and mobile devices
VI
KAZALO VSEBINE
1 UVOD - 1 -
2 MVC (Model ndash View ndash Controller) - 2 -
21 Modeli - 3 -
22 Pogledi - 3 -
23 Krmilniki - 4 -
3 PREDNOSTI IN SLABOSTI ASPNET MVC - 9 -
4 ASPNET MVC IN AJAX - 10 -
5 RAZOR POGON ZA POGLED - 15 -
6 ASPNET MVC 3 IN MOBILNI TELEFONI - 23 -
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone - 24 -
62 Zaznava brskalnikov - 24 -
621 Zaznava brskalnika s pomočjo http zahteve - 25 -
622 WURFL (Wireless Universal Resource File) - 25 -
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3 - 26 -
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET MVC 3) PRIMERNA
TUDI ZA MOBILNE TELEFONE - 27 -
71 Opis aplikacije - 27 -
72 Uporabljena orodja pri razvoju - 28 -
73 Načrt razvoja - 28 -
74 Implementacija - 29 -
741 Grafična predloga za namizne in mobilne naprave - 30 -
742 Podatkovni model - 31 -
743 Zaznava namiznih in mobilnih brskalnikov - 34 -
744 Prijava uporabnika v sistem - 36 -
745 Spored - 38 -
746 Rezervacija - 42 -
747 Vnos novih filmov - 45 -
748 Dodajanje filmov v spored - 47 -
749 Pregled in prevzem rezervacij - 48 -
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah - 50
-
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
IV
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET
MVC 3
Ključne besede ASPNET MVC 3 spletna aplikacija mobilni telefoni Razor pogon
UDK [6592004]00445(0432)
Povzetek
V teoretičnem delu smo predstavili ASPNET MVC 3 tehnologijo Izpostavili smo njene
prednosti in slabosti ter prikazali uporabo AJAX tehnologije skupaj z ASPNET MVC 3
Lotili smo se tudi področja mobilnih telefonov in kako bi z uporabo ASPNET MVC 3
razvili spletno aplikacijo ki bi podpirala namizne in mobilne naprave V teoretičnem delu
smo predstavili tudi pristope razvijanja spletnih aplikacij za namizne in mobilne naprave
V praktičnem delu smo razvili lastno spletno aplikacijo ki podpira namizne in mobilne
naprave
V
Web application for desktop and mobile devices based on ASPNET
MVC 3
Key words ASPNET MVC 3 web application mobile phones Razor view engine
UDK [6592004]00445(0432)
Abstract
In the theoretical part we presented the ASPNET MVC 3 technology We highlighted its
strengths and weaknesses and demonstrated the use of the AJAX technologies along with
ASPNET MVC 3 We also addressed the area of mobile phones and the use of ASPNET
MVC 3 in the development of a web application that supports desktop and mobile devices
In the theoretical part we find approaches of developing web applications for desktop and
mobile devices In the practical part we developed our own web application that supports
desktop and mobile devices
VI
KAZALO VSEBINE
1 UVOD - 1 -
2 MVC (Model ndash View ndash Controller) - 2 -
21 Modeli - 3 -
22 Pogledi - 3 -
23 Krmilniki - 4 -
3 PREDNOSTI IN SLABOSTI ASPNET MVC - 9 -
4 ASPNET MVC IN AJAX - 10 -
5 RAZOR POGON ZA POGLED - 15 -
6 ASPNET MVC 3 IN MOBILNI TELEFONI - 23 -
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone - 24 -
62 Zaznava brskalnikov - 24 -
621 Zaznava brskalnika s pomočjo http zahteve - 25 -
622 WURFL (Wireless Universal Resource File) - 25 -
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3 - 26 -
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET MVC 3) PRIMERNA
TUDI ZA MOBILNE TELEFONE - 27 -
71 Opis aplikacije - 27 -
72 Uporabljena orodja pri razvoju - 28 -
73 Načrt razvoja - 28 -
74 Implementacija - 29 -
741 Grafična predloga za namizne in mobilne naprave - 30 -
742 Podatkovni model - 31 -
743 Zaznava namiznih in mobilnih brskalnikov - 34 -
744 Prijava uporabnika v sistem - 36 -
745 Spored - 38 -
746 Rezervacija - 42 -
747 Vnos novih filmov - 45 -
748 Dodajanje filmov v spored - 47 -
749 Pregled in prevzem rezervacij - 48 -
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah - 50
-
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
V
Web application for desktop and mobile devices based on ASPNET
MVC 3
Key words ASPNET MVC 3 web application mobile phones Razor view engine
UDK [6592004]00445(0432)
Abstract
In the theoretical part we presented the ASPNET MVC 3 technology We highlighted its
strengths and weaknesses and demonstrated the use of the AJAX technologies along with
ASPNET MVC 3 We also addressed the area of mobile phones and the use of ASPNET
MVC 3 in the development of a web application that supports desktop and mobile devices
In the theoretical part we find approaches of developing web applications for desktop and
mobile devices In the practical part we developed our own web application that supports
desktop and mobile devices
VI
KAZALO VSEBINE
1 UVOD - 1 -
2 MVC (Model ndash View ndash Controller) - 2 -
21 Modeli - 3 -
22 Pogledi - 3 -
23 Krmilniki - 4 -
3 PREDNOSTI IN SLABOSTI ASPNET MVC - 9 -
4 ASPNET MVC IN AJAX - 10 -
5 RAZOR POGON ZA POGLED - 15 -
6 ASPNET MVC 3 IN MOBILNI TELEFONI - 23 -
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone - 24 -
62 Zaznava brskalnikov - 24 -
621 Zaznava brskalnika s pomočjo http zahteve - 25 -
622 WURFL (Wireless Universal Resource File) - 25 -
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3 - 26 -
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET MVC 3) PRIMERNA
TUDI ZA MOBILNE TELEFONE - 27 -
71 Opis aplikacije - 27 -
72 Uporabljena orodja pri razvoju - 28 -
73 Načrt razvoja - 28 -
74 Implementacija - 29 -
741 Grafična predloga za namizne in mobilne naprave - 30 -
742 Podatkovni model - 31 -
743 Zaznava namiznih in mobilnih brskalnikov - 34 -
744 Prijava uporabnika v sistem - 36 -
745 Spored - 38 -
746 Rezervacija - 42 -
747 Vnos novih filmov - 45 -
748 Dodajanje filmov v spored - 47 -
749 Pregled in prevzem rezervacij - 48 -
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah - 50
-
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
VI
KAZALO VSEBINE
1 UVOD - 1 -
2 MVC (Model ndash View ndash Controller) - 2 -
21 Modeli - 3 -
22 Pogledi - 3 -
23 Krmilniki - 4 -
3 PREDNOSTI IN SLABOSTI ASPNET MVC - 9 -
4 ASPNET MVC IN AJAX - 10 -
5 RAZOR POGON ZA POGLED - 15 -
6 ASPNET MVC 3 IN MOBILNI TELEFONI - 23 -
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone - 24 -
62 Zaznava brskalnikov - 24 -
621 Zaznava brskalnika s pomočjo http zahteve - 25 -
622 WURFL (Wireless Universal Resource File) - 25 -
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3 - 26 -
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET MVC 3) PRIMERNA
TUDI ZA MOBILNE TELEFONE - 27 -
71 Opis aplikacije - 27 -
72 Uporabljena orodja pri razvoju - 28 -
73 Načrt razvoja - 28 -
74 Implementacija - 29 -
741 Grafična predloga za namizne in mobilne naprave - 30 -
742 Podatkovni model - 31 -
743 Zaznava namiznih in mobilnih brskalnikov - 34 -
744 Prijava uporabnika v sistem - 36 -
745 Spored - 38 -
746 Rezervacija - 42 -
747 Vnos novih filmov - 45 -
748 Dodajanje filmov v spored - 47 -
749 Pregled in prevzem rezervacij - 48 -
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah - 50
-
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
VII
8 SKLEP - 53 -
9 VIRI IN LITERATURA - 54 -
10 PRILOGE - 56 -
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
VIII
KAZALO SLIK
Slika 1 ASPNET MVC ogrodje [18] - 2 -
Slika 2 Primer pogleda - 4 -
Slika 3 Primer HTML pomožna metoda za besedilno polje - 4 -
Slika 4 Preprost krmilnik - 5 -
Slika 5 Primer MVC URL-ja - 5 -
Slika 6 Krmilnik z metodo ki sprejme parameter - 6 -
Slika 7 MVC URL s parametrom - 6 -
Slika 8 Vračanje pogleda - 7 -
Slika 9 Rezultat pogleda about - 7 -
Slika 10 Vračanje pogleda z imenom Test - 8 -
Slika 11 Rezultat pogleda Test - 8 -
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo - 11 -
Slika 13 Aspx datoteka z Ajax formo - 12 -
Slika 14 Akcija AjaxUra() v HomeControllerju - 12 -
Slika 15 Rezultat forme podprte z Ajaxom - 13 -
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta - 13 -
Slika 17 Dopolnjena akcija AjaxUra() - 14 -
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra() - 14 -
Slika 19 Nov pogled na podlagi Razor pogona - 16 -
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom - 17 -
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja - 17 -
Slika 23 Prejšnji primer napisan v WebForms sintaksi - 18 -
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse - 18 -
Slika 25 Rezultat prejšnje kode v brskalniku - 19 -
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi - 19 -
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi - 19 -
Slika 28 Komentiranje v Razorju - 20 -
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja -
20 -
Slika 30 Primer grafične predloge v Razorju - 21 -
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki - 22 -
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju - 22 -
Slika 33 Grafična predloga za namizne naprave - 30 -
Slika 34 Grafična predloga za mobilne naprave - 31 -
Slika 35 Podatkovni model Kinematograf - 33 -
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
IX
Slika 36 Koda za detekcijo vrste brskalnika - 35 -
Slika 37 Obrazec za prijavo pri namizni grafični predlogi - 36 -
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije - 36 -
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem - 37 -
Slika 40 Obvestilo o neuspešni prijavi - 37 -
Slika 41 Spored filmov na namiznem brskalniku - 38 -
Slika 42 Pogojni stavek za velikost naslovne slike - 39 -
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti - 39 -
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike - 39 -
Slika 45 Metoda VrniNaslovnoSliko - 40 -
Slika 46 Metoda GetSlike - 41 -
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike - 41 -
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku - 42 -
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku - 43 -
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin - 43 -
Slika 51 Koda akcije oz metode Rezerviraj - 44 -
Slika 52 Vnosna forma za film - 45 -
Slika 53 Koda akcije ShraniFilm - 46 -
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini - 47 -
Slika 55 Del kode za shranjevanje termina - 48 -
Slika 56 Administratorski pregled rezervacij - 48 -
Slika 57 Koda za začetek Ajax forme - 49 -
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši) - 49 -
Slika 59 Koda akcije PotrdiRezervacijo - 50 -
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
X
KAZALO TABEL
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah - 50 -
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
XI
UPORABLJENE KRATICE
ASP Active Server Pages
MVC Module View Controller
AJAX Asynchronius Javascript and XML
SQL Structured Query Language
LINQ Language Integrated Query
HTML Hyper Text Markup Language
WURFL Wireless Universal Resource File
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 1
1 UVOD
V zadnjih letih se je močno povečal delež uporabnikov mobilnih telefonov ki uporabljajo
mobilni širokopasovni dostop do interneta Največji problem s katerim se soočajo
uporabniki tovrstnih storitev je slaba uporabniška izkušnja s spletnimi aplikacijami saj je
velika večina spletnih aplikacij prirejenih le za osebne računalnike in prenosnike medtem
ko so mobilni telefoni več ali manj prezrti
ASPNET MVC 3 je ena izmed novejših tehnologij kjer so podatki oblika in
funkcionalnost ločeni ASPNET MVC 3 ogrodje predstavlja alternativo ASPNET
WebForms S to tehnologijo bomo skušali s čim bolj enotno kodo podpreti namizne in
mobilne odjemalce
Na začetku diplomskega dela bomo podrobno opisali in razčlenili vzorec MVC V tretjem
poglavju bomo predstavili prednosti in slabosti ogrodja ASPNET MVC 3 Funkcioniranje
Ajax in ASPNET MVC 3 ter težave s katerimi se pri tem srečujemo bomo opisali v
četrtem poglavju V petem poglavju bomo razložili in opisali lastnosti pogona Razor za
poglede V šestem poglavju se bomo poglobili v tematiko mobilnih telefonov in ogrodja
ASPNET MVC 3 ter predstavili probleme s katerimi se soočamo pri razvoju spletnih
aplikacij za mobilne odjemalce Raziskovali bomo tudi kako odkriti mobilni brskalnik
Predstavili bomo tudi pristope kako se lotiti razvoja spletnih aplikacij za mobilne naprave
Praktični del bomo pričeli v sedmem poglavju kjer bomo opisali aplikacijo in orodja
uporabljena pri implementaciji Predstavili bomo tudi samo implementacijo spletne
aplikacije za namizne in mobilne naprave z uporabo ASPNET MVC 3
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 2
2 MVC (Model ndash View ndash Controller)
ASPNET MVC je del ASPNET ogrodja[18] Je alternativa ASPNET WebForms za
razvoj ASPNET spletnih aplikacij Model ndash view ndash controller (MVC model ndash pogled ndash
krmilnik) [3] predstavlja arhitekturni vzorec ki se uporablja za ločevanje aplikacije na tri
glavne vidike Ti trije vidiki so
- model (model) podatki in pravila za manipuliranje s podatki aplikacije
- view (pogled) uporabniški vmesnik aplikacije in
- controller (krmilnik) tu se nahaja funkcionalnost aplikacije obravnava sporočila
od uporabnika in vrača informacije uporabniku preko pogledov
Slika 1 ASPNET MVC ogrodje [18]
Z ločevanjem [18] aplikacije na te tri glavne vidike lahko dosežemo da je aplikacija
fleksibilna in lažja za vzdrževanje Ta vzorec [18] nam tudi nudi
- popolno kontrolo nad HTML kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 3
- integracijo Ajaxa in JQueryja
- raquoprijateljskelaquo URL-je primerne za višjo pozicijo v iskalnikih
- enostavno testiranje
21 Modeli
Izraz [19] model v MVC ogrodju predstavlja podatke aplikacije Modeli vsebujejo glavno
logiko aplikacije vrednotenje in dostop do baze podatkov zaradi česar so tudi najbolj
obsežni ASPNET MVC [3] ogrodje podpira več različnih tehnologij za dostop do baze
podatkov zato lahko za implementacijo modela uporabimo eno izmed naslednjih
tehnologij
- LINQ
- Entity ogrodje
- SQL
- NHibernate
- ADONET DataReaders ali DataSets itd
22 Pogledi
Pogledi [3] predstavljajo uporabniški vmesnik aplikacije Pogled [3] je zadolžen da
dobljene podatke iz modela pretvori v format ki je primeren za predstavitev podatkov
uporabniku V pogledu je odsvetovano uporabljati ASPNET strežniške kontrole saj kršijo
MVC vzorec MVC vzorec ne podpira View State-a in PostBack-ov Pogled je datoteka s
končnico aspx tehnično gledano pa pogled ni spletna forma ker ne vsebuje značke ltform
runat=servergt Pogled je le navadna ASPNET stran [3]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 4
Slika 2 Primer pogleda
Z značko lt ViewData[Message] gt preko krmilnika določimo sporočilo oz podatke
ki bi jih naj ta del kode prikazal Poglede je pri MVC aplikaciji najtežje testirati zato je
priporočljivo da imajo pogledi čim manj kode Z [20] ločili lt in gt določimo začetek in
konec skripte Bližnjica za klicanje metode ResponseWrite () je uporaba ločil lt= in gt
Pri pogledih si lahko pomagamo tudi s pomožnimi HTML metodami (ang HTML
helpers) s katerimi lahko ustvarjamo standardne HTML elemente kot so
- besedilna polja
- gesla
- povezave
- spustni meniji itd
S HTML pomožnimi metodami lahko občutno zmanjšamo HTML kodo
Slika 3 Primer HTML pomožna metoda za besedilno polje
23 Krmilniki
V krmilniku [19] se nahaja logika vračanja pravilnih pogledov in preusmeritev uporabnika
na drugo akcijo Če krmilnik postane preobsežen je smiselno razmisliti da se logika v
krmilniku prestavi v model Krmilnik bi naj vseboval le nekaj vrstic kode Ime [3]
krmilnika je sestavljeno iz dveh delov in sicer iz imena ter dodatne besede Controller npr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 5
NovController Za pisanje novega krmilnika pa moramo poskrbeti da naš krmilnik
podeduje funkcionalnosti oz obnašanje glavnega abstraktnega razreda Controller
Slika 4 Preprost krmilnik
URL v MVC-ju je razdeljen na tri dele in je videti takole krmilnikakcijaid Naš
URL iz zgornje kode bi potem bil takšen homepozdravljen
Slika 5 Primer MVC URL-ja
Za vključitev parametra v URL moramo metodo public void pozdravljen() malenkostno
spremeniti seveda se potem spremeni tudi URL V metodo pozdravljen vključimo
parameter string id ime parametra naj bo raquoidlaquo ker potem ne rabimo spreminjati privzete
MVC URL poti (krmilnikakcijaid) in s tem ohranimo URL ki je prijaznejši
iskalnikom V primeru da vhodni parameter metode poimenujemo string ime bi potem
URL bil takšen homepozdravljenime=Kristijan
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 6
Slika 6 Krmilnik z metodo ki sprejme parameter
Če naš URL zgleda takole homepozdravljenKristijan pomeni da bo vrednost id-ja v
metodi pozdravljen Kristijan in brskalnik nam bo zaradi tega izpisal rezultat raquoPozdravljen
Kristijanlaquo
Slika 7 MVC URL s parametrom
V ASPNET MVC aplikacijah se največ uporablja prikazovanje podatkov s pomočjo
ActionResult metod ki vračajo različne tipe [3] ActionResult-ov
- EmptyResult
- ContentResult
- JsonResult
- RedirectResult
- ViewResult
- PartialViewResult
- JavaScriptResult itd
ViewResult [3] je najpogostejši uporabljen tip ki združi specifične podatke pogleda s
predlogo ki v ustrezni obliki prikaže podatke
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 7
Slika 8 Vračanje pogleda
Zgornja metoda About() vrne rezultat tipa ViewResult s pomočjo pomožne metode View()
Prek URL-ja je dostopen na naslovu homeabout vendar moramo paziti da imamo
ustvarjeno datoteko aboutaspx v mapi Views sicer bo prišlo do napake in se nam bo
prikazala stran z opisom napake da pogled about ne obstaja v mapi Views
Slika 9 Rezultat pogleda about
V metodi About() pa lahko vrnemo tudi kakšen drug pogled poleg about pogleda na
primer pogled z imenom Test Seveda moramo imeti ustvarjeno datoteko Testaspx v mapi
Views drugače nam bo brskalnik javil napako
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 8
Slika 10 Vračanje pogleda z imenom Test
Pogled Test je dostopen na URL naslovu homeabout
Slika 11 Rezultat pogleda Test
Kot vidimo se URL naslov ni spremenil spremenil se je le pogled in sicer namesto about
pogleda prikazujemo pogled Test
Kot [3] ste lahko na zgornjih primerih opazili je glavna naloga krmilnika da se pravilno
odzove na uporabnikovo zahtevo in prikaže primeren pogled Seveda mora ta pogled
ustrezno napolniti krmilnik s podatki iz modela
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 9
3 PREDNOSTI IN SLABOSTI ASPNET MVC
Prednosti [9] uporabe ogrodja ASPNET MVC so
- lažji nadzor nad aplikacijo zaradi uporabe vzorca MVC
- popoln nadzor nad obnašanjem aplikacije
- podpora t i prijateljskim URL-jem zaradi katerih se lahko spletna aplikacija
pojavi na višjih mestih pri iskalnih rezultatih
- omogočanje lažjega in hitrejšega testiranja
- podpora že obstoječim ASPNET značilnostim
- razširljivo in priključljivo ogrodje
- možnost uporabe pomožnih metod s katerimi imamo priložnost zmanjšati obseg
kode
- popoln nadzor nad HTML kodo
- integracija Ajaxa in JQueryja ter
- možnost vključitve lastnega View pogona
Slabosti uporabe ogrodja ASPNET MVC so
- pomanjkanje [14] kontrol za razvoj bogatih spletnih aplikacij večino kontrol
moramo razviti sami
- počasnejši razvoj spletne aplikacije in
- več kodiranja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 10
4 ASPNET MVC IN AJAX
Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih
tehnik uporabljenih za ustvarjanje interaktivnih spletnih aplikacij Z Ajaxom si lahko
spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju brez potrebe po
ponovnem nalaganju strani S tem je mogoče tekoče in hitrejše spremljanje ter
spreminjanje vsebine na spletni strani [21] Ajax je poleg JQueryja ena izmed najbolj
priljubljenih JavaScript knjižnic ki je tudi brezplačna [3]
Spletne aplikacije ki imajo integriran Ajax se lahko srečajo z nekaj problemi v
primerih [3]
- ko je JavaScript izključen v uporabnikovem brskalniku
- ko uporabnik želi uporabiti gumb Nazaj v brskalniku in se zaradi uporabe Ajaxa
URL ni spremenil se potem uporabnik ne more vrniti na prejšnjo akcijo
- če ima uporabnik počasno internetno povezavo in so JavaScript datoteke prevelike
saj si jih mora brskalnik naložiti iz strežnika in shraniti v njegov pomnilnik
Pozitivne lastnosti uporabe Ajaxa v spletnih aplikacijah so [22]
- boljša uporabniška izkušnja
- hitrejše delovanje spletne aplikacije
- asinhrono posodabljanje le določenih delov spletne aplikacije
V primerih ko ima uporabnik izključen JavaScript v brskalniku bi naj programer
zagotovil da aplikacija vseeno ustrezno deluje [3]
Ajax in JQuery knjižnice se nahajajo znotraj MVC aplikacije v mapi scripts [3] V primeru
da jih nameravamo uporabljati skozi celotno aplikacijo jih je najbolj smiselno vključiti v
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 11
datoteko MasterPage (to je oblikovna predloga aplikacije ki se uporablja več ali manj na
vseh straneh aplikacije) v sekcijo ltheadgt
Slika 12 Vključitev Ajaxa in JQueryja v MVC aplikacijo
Kakor smo že omenili je Ajax zelo uporaben pri asinhronem posodabljanju določenih
delov spletne aplikacije kar pripomore k hitrejšemu delovanju ter boljši uporabniški
izkušnji Za asinhrono posodabljanje določenih delov spletne aplikacije moramo želeni del
v aspx datoteki preurediti v Ajax formo Pomagamo si z Ajax pomožnimi metodami
(ang helpers) ki so vključene znotraj ASPNET MVC Z AjaxBeginForm metodo
določimo da gre za Ajax formo Ta metoda sprejme enega ali več argumentov med njimi
so npr naziv akcije ki se izvede ob asinhronem posodabljanju naziv krmilnika v katerem
se ta akcija nahaja Ajax možnosti s katerimi lahko določimo kateri del spletne aplikacije
se naj ob izvedbi akcije asinhrono posodobi idr
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 12
Slika 13 Aspx datoteka z Ajax formo
Prejšnji primer nam prikazuje dve uri prva se posodobi ob osvežitvi celotne strani druga
se posodablja asinhrono ob kliku na gumb Posodobi Ob kliku na gumb Posodobi se
izvede akcija ajaxUra v krmilniku HomeController Ta akcija vrne trenutni čas Z Ajax
možnostmi smo določili da se bo osvežil le del spletne aplikacije imenovan ajaxUra ki
ima začetno privzeto vrednost trenutni čas
Slika 14 Akcija AjaxUra() v HomeControllerju
Rezultat je torej z Ajaxom asinhrono posodobljena druga ura medtem ko prva kaže stari
čas dokler se ne osveži cela stran Za pravilno delovanje opisanega primera moramo imeti
v brskalniku vključen JavaScript
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 13
Slika 15 Rezultat forme podprte z Ajaxom
V primeru da v brskalniku ni vključen JavaScript bi nam brskalnik ob kliku na gumb
Posodobi prikazal drugačen rezultat Zgodil bi se navadni ResponseWrite kar pomeni da
bi se izpisal le trenutni čas brez kakršnih koli oblikovnih predlog ki smo jih prej določili
Slika 16 Rezultat v brskalniku brez vključenega JavaScripta
Da se izognemo nevšečnostim ki se zgodijo v primeru izklopljenega JavaScripta v
brskalniku malenkostno preuredimo akcijo AjaxUra Ta nam bo v primeru izklopljenega
JavaScripta osvežila celoten pogled in s tem bomo ohranili oblikovno predlogo strani V
akciji AjaxUra() preverimo ali gre za Ajax zahtevo Če gre za Ajax zahtevo potem
vrnemo trenutni čas in posodobi se le del spletne aplikacije oz le druga uraV primeru da
ni Ajax zahteva pa preusmerimo na akcijo Test ki prikaže pogled Test kar pomeni da se
osveži celoten pogled in s tem tudi obe uri
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 14
Slika 17 Dopolnjena akcija AjaxUra()
Zgornjo kodo še lahko zmanjšamo za eno vrstico z že vgrajeno metodo ASPNET MVC
ogrodja IsAjaxRequest()
Slika 18 Uporaba metode IsAjaxRequest() v akciji AjaxUra()
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 15
5 RAZOR POGON ZA POGLED
Pogoni za poglede so vtičniki ki implementirajo različne predloge sintaktičnih
možnosti [26] Glavni pogon za pogled v ASPNET MVC ogrodju je WebForms pogon ki
uporablja aspxascxmaster datotečne predloge Obstajajo tudi drugi pogoni kot so
- Spark
- NDjango
- NHaml
- NVelocity
- Brail idr
V tem poglavju se bomo osredotočili na nov pogon za pogled imenovan Razor ki prihaja
iz Microsofta Razor pogon je optimiziran glede HTML generiranja na podlagi predloge s
kodno usmerjenim pristopom [26]
Glavne značilnosti Razor pogona so [26]
- omogoča hitrejše kodiranje z manj znaki in tipkanja
- je enostaven za učenje saj se uporablja že obstoječ programski jezik in HTML
- deluje v vsakem tekstovnem urejevalniku
- ima podporo v programih Visual Studio 2010 in Visual Web Developer 2010 ki
nudita odlično zaključevanje stavkov (uporabnik vpiše prvih nekaj črk ukaza in
program mu ponudi možne ukaze na podlagi vpisanih črk)
- možno je testiranje enot (unit testing)
Datotečne predloge za Razor pogon so cshtmlvbhtml (odvisno od programskega jezika
C ali Visual Basic) V aplikaciji lahko uporabljamo različne pogone za pogled to pomeni
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 16
da imamo lahko nekaj aspx datotek nekaj cshtml datotek ali katere druge od kakšnega
drugega pogona za poglede odvisno od razvijalčeve odločitve
Pogon [24] za pogled dodamo v aplikacijo tako da pri ustvarjanju novega pogleda iz
spustnega seznama view engine izberemo možnost Razor Razor pogon kot glavno
oblikovno predlogo uporablja t i layout predlogo medtem ko WebForms pogon uporablja
t i master page Uporaba layout predlog oz master page predlog ni obvezna
Slika 19 Nov pogled na podlagi Razor pogona
Druga možnost za izbor pogona Razor je da pri ustvarjanju nove ASPNET MVC
aplikacije določimo kateri pogon za poglede bomo uporabljali Prav tako iz spustnega
seznama view engine izberemo možnost Razor [24]
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 17
Slika 20 Nova ASPNET MVC aplikacija z Razor view pogonom
Pri pogonu za pogled WebForms se je koda začela z znaki lt= in končala z gt kar je
vsega skupaj pet znakov Pri pogonu Razor pa se koda začne z in konča z kar so
vsega skupaj trije znaki To pomeni da že samo na začetku privarčujemo dva znaka kode
Pri Razorju se lahko sklicujemo na spremenljivke tudi zunaj kodnega bloka in sicer
se na spremenljivko znotraj HTML-ja sklicujemo z ukazom imeSpremenljivke
Slika 21 Enovrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Kodni bloki v Razorju so lahko enovrstični ali pa večvrstični [23]
Slika 22 Večvrstični kodni blok Razor in sklic na spremenljivko znotraj HTML-ja
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 18
Če prejšnji primer zapišemo v WebForms sintaksi bi za to potrebovali pet znakov več To
je pri tako preprostem primeru že opazna razlika Seveda bi pri obsežnejšem primeru
privarčevali še veliko več tipkanja
Slika 23 Prejšnji primer napisan v WebForms sintaksi
Znotraj kodnega bloka se ni treba posebej sklicevati na določeno spremenljivko razen v
primeru če bi bila znotraj kodnega bloka uporabljena HTML koda in znotraj HTML kode
sklic na spremenljivko
Slika 24 Uporaba HTML elementov znotraj kodnega bloka Razor sintakse
Izpis v brskalniku bi torej bil HTML seznam kjer bi se izpisovalo raquoi=laquo in vrednost
spremenljivke i
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 19
Slika 25 Rezultat prejšnje kode v brskalniku
Posebni znaki kot so idr in bi jih želeli uporabiti znotraj teksta se v WebForms
pogonu zraven posebnega znaka uporabi tudi znak Z njim povemo da gre za posebni
znak ki ga hočemo uporabiti znotraj niza Pri Razor pogonu pa pred začetkom niza z
znakom povemo da bo niz vseboval posebni znak ki ga želimo uporabiti kot znak V
primeru da ne uporabimo posebnega znaka pred začetkom niza bo prevajalnik javil
napako saj znaka ne bo prepoznal kot navaden znak za uporabo znotraj niza V spodnjem
primeru uporabimo posebni znak in s tem povemo prevajalniku da uporabljamo
posebni znak znotraj niza V brskalniku se potem izpiše v odebeljeni pisavi naslednji
tekst raquoMoje diplomsko delo se nahaja v mapi FFaksDiplomalaquo [23]
Slika 26 Uporaba posebnega znaka znotraj niza v Razor sintaksi
V primeru ko želimo uporabiti posebni znak znotraj niza to naredimo tako da ga
dvakrat ponovimo [23]
Slika 27 Uporaba znaka znotraj niza v Razor sintaksi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 20
Komentiranje v Razorju je enako kot pri uporabljenem programskem jeziku (C ali
VisualBasic) prav tako lahko uporabimo HTML komentiranje ali Razor sintakso
komentiranja [23]
Slika 28 Komentiranje v Razorju
V HTML kodi se lahko sklicujemo tudi na objekte in njihove lastnosti To naredimo tako
da pred objektom zapišemo posebni znak [23] Spodnji primer nam v brskalniku izpiše
raquoTa primerček deluje na naslovu httplocalhostlaquo
Slika 29 Uporaba objektov in njihovih lastnosti znotraj HTML kode z uporabo Razorja
Kot smo v uvodu že povedali Razor pogon za glavno grafično predlogo uporablja datoteko
imenovano layout page ki ima podobno vlogo kot master page v WebForms pogonu V
layout grafični predlogi razdelimo stran na sekcije [24] Programer lahko tem sekcijam
določi opcijsko uporabnost (obvezneneobvezne) [24] Te sekcije v layout datoteki
nastavimo s pomočjo HTML pomočnikov imenovanih RenderSection RenderBody itd
RenderSection sprejme en obvezni parameter in en neobvezni parameter Obvezni
parameter je za ime sekcije neobvezni parameter pa se uporablja ko želi programer
nastaviti sekciji da ni obvezna za uporabo znotraj cshtmlvbhtml datotek ki uporabljajo to
grafično predlogo RenderBody pomožna metoda predstavlja vsebino spletne strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 21
Layout datoteko ustvarimo v Solution raziskovalcu prek kontekstnega menija Add-gtNew
item in izberemo s seznama MVC 3 Layout Page datoteko ter jo primerno poimenujemo
Slika 30 Primer grafične predloge v Razorju
Razor grafično predlogo drugim Razor datotekam priredimo tako da v cshtmlvbhtml
datoteki layout lastnosti priredimo pot do layout datoteke Seveda moramo definirati tudi
vse obvezne sekcije po želji lahko definiramo tudi neobvezne sekcije odvisno od
programerjeve odločitve Vse ostalo kar nismo definirali s sekcijami je vsebina strani V
naslednjem primeru smo definirali sekciji glava in noga ki nista obvezni Ostalo kar ni
definirano znotraj sekcij je vsebina strani
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 22
Slika 31 Uporaba layout predloge in definiranje sekcij v cshtmlvbhtml datoteki
V brskalniku se nam nato izpišejo tri sekcije (glava body oz vsebina ter noga) V css
datoteki smo pred tem vsaki sekciji določili svojo barvo ozadja in velikost da se potem na
primeru vidi od kod do kod segajo te sekcije
Slika 32 Prikaz pogleda v brskalniku z uporabo grafične predloge Layout v Razorju
V prejšnjih primerih smo dokazali da pogoni za pogled lahko razvijalcu občutno olajšajo
in poenostavijo delo Razvijalcu [24] omogočijo fleksibilnost hitrost in večjo preglednost
nad samo kodo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 23
6 ASPNET MVC 3 IN MOBILNI TELEFONI
V zadnjih letih se je močno povečal trg t i pametnih telefonov ki uporabniku nudijo
pisarno v malem Ti mobilni telefoni uporabniku omogočajo tudi dostop do svetovnega
spleta kjer brskajo po njihovih najljubših spletnih mestih ali pa iščejo določene
informacije Uporabniki mobilnih brskalnikov se pri brskanju po spletu srečujejo tudi z
določenimi problemi saj določene spletne aplikacije ne podpirajo oz zelo slabo podpirajo
mobilne brskalnike in s tem posledično odvrnejo uporabnika od obiska spletnega mesta s
pomočjo mobilnega brskalnika Prikaz teh spletnih aplikacij v mobilnih brskalnikih je slab
saj mora uporabnik v primeru da želi poiskati določeno informacijo na tem spletnem
mestu veliko uporabljati horizontalni in vertikalni drsnik ali pa mu spletnega mesta sploh
ne prikaže Zaradi tega uporabniki raje obiščejo konkurenčne spletne strani ki nudijo
podporo mobilnim telefonom oz brskalnikom [1]
Razlog da nekatere spletne aplikacije ne nudijo podpore mobilnim brskalnikom je
predvsem dvojno delo saj mora razvijalec razviti dve različni aplikaciji eno za namizne
naprave in eno za mobilne naprave Takšen razvoj pomeni večje stroške in dalj časa
trajajoči razvoj [1]
ASPNET MVC 3 nam nudi razdelitev spletne aplikacije na tri dele in sicer na podatke
obliko in funkcionalnost [3] Ta tehnologija nam pri razvoju spletne aplikacije za mobilne
in namizne naprave omogoča da ohranimo iste podatke in funkcionalnost tako pri
mobilnih kot pri namiznih napravah drugačna je le oblika Seveda mora razvijalec sam
poskrbeti da izkoristi vse ugodnosti ASPNET MVC 3 saj bo le tako lahko s čim bolj
enotno kodo podprl tako mobilne kakor tudi namizne brskalnike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 24
61 Problemi pri razvoju spletnih aplikacij za mobilne telefone
Razvijalec se pri razvoju spletne aplikacije ki podpira tudi mobilne telefone srečuje z
različnimi problemi kot so [1]
- podpora različnih mobilnih brskalnikov
- primerna ločljivost spletne aplikacije za mobilne telefone (širina krat višina)
- skromna grafična predloga za mobilni brskalnik
- dve grafični predlogi ena za mobilne in ena za namizne brskalnike
- razviti mobilno spletno aplikacijo le za pametne telefone ali tudi za manj pametne
- paziti je treba na primerno uporabo Javascripta v spletni aplikaciji saj nekatere
funkcije oz dogodki niso podprti v določenih mobilnih brskalnikih
- poskrbeti je treba da je odzivnost spletne aplikacije čim večja
- primerna velikost in vrsta pisave
- slaba podpora določenih CSS ukazov v mobilnih brskalnikih
- manjša podpora Ajaxa v določenih mobilnih brskalnikih
62 Zaznava brskalnikov
Pr razvijanju spletne aplikacije za namizne in mobilne naprave je bistvenega pomena da
ugotovimo ali obiskovalec oz uporabnik spletne aplikacije uporablja mobilni ali namizni
brskalnik saj mu bomo lahko le tako na najboljši možni način prikazali spletno aplikacijo
v uporabljanem brskalniku
Obstaja več možnih načinov zaznave brskalnika [1]
- s pomočjo http zahteve
- s pomočjo WURFL (Wireless universal resource file) datoteke itd
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 25
621 Zaznava brskalnika s pomočjo http zahteve
Http zahteva vsebuje glavo ki ima različne lastnosti kot so [1]
- User-Agent
- Accept
- Accept-Charset
- Accept-Language itd
Za nas najbolj uporabni lastnosti sta User-Agent in Accept saj lahko prek njiju ugotovimo
ali gre za mobilni brskalnik Veliko mobilnih brskalnikov pošlje prek http zahteve v
lastnosti Accept vrednost raquolaquo S pomočjo te vrednosti lahko potem ugotovimo ali gre za
mobilni brskalnik [1]
Vrednost v lastnosti User-Agent nam pove podatke o brskalniku (naziv brskalnika verzija
brskalnika operacijski sistem hellip) mobilni brskalnik pa še nam pove nekatere dodatne
podatke (vrsta telefona številka modela naziv in verzijo mobilnega brskalnika državo
jezik hellip) Prek ključnih besed oz izrazov v lastnosti User-Agent lahko potem ugotovimo
ali gre za mobilni brskalnik ali za namizni brskalnik Nekatere ključne besede za mobilni
brskalnik so ime telefona (npr Blackberry iPhone hellip) operacijski sistem (Android
Symbian Windows mobile hellip) ime mobilnega brskalnika (npr Opera mini hellip) in druge
[1]
622 WURFL (Wireless Universal Resource File)
To je xml datoteka ki je v bistvu knjižnica mobilnih naprav s katero prek http zahteve
identificiramo ali gre za mobilno napravo V njej najdemo podatke oz lastnosti o mobilni
napravi Ta knjižnica je odprtokodna in se jo redno posodablja V ASPNET MVC 3 se
uporablja ASPNET Mobile Device Browser File datoteko ki vključuje tudi popularno
knjižnico WURFL To datoteko se v projektu vključi v mapo App_Browsers podmapo
mobile in potem v kodi s pomočjo objekta RequestBrowser dobimo podatke o napravi Z
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 26
metodo RequestBrowserIsMobileDevice() preverimo ali uporabnik oz obiskovalec
spletne aplikacije uporablja mobilni brskalnik [12]
63 Pristopi razvoja spletnih aplikacij za mobilne telefone z ASPNET MVC 3
Pri razvoju spletnih aplikacij za mobilne telefone z ASPNET MVC 3 je priporočljivo
slediti določenim splošnim korakom
- odločitev [1] katere mobilne naprave vse podpreti (wap mobilne naprave manj
pametne telefone pametne telefone tablične računalnike idr)
- priprava grafičnih predlog [10] za mobilne in za namizne brskalnike
- priprava css-jev [1] za mobilne in za namizne brskalnike
- grafična [1] predloga za mobilne telefone naj bo grafično skromnejša ter pregledna
naj ima večje razmike med povezavami oz gumbi (zaradi mobilnih telefonov z
zasloni na dotik) sekcije naj bodo barvno ločene itd
- odločitev [10] kako menjavati grafično predlogo (avtomatsko glede na detekcijo
brskalnika ali po izbiri uporabnika)
- odločiti [1] se je treba ali ohraniti vse funkcionalnosti spletne aplikacije ki so v
namiznih brskalnikih tudi pri mobilnih brskalnikih (npr določeni meniji spletne
aplikacije niso dostopni prek mobilnega brskalnika ali pa npr galerija slik ni
dostopna prek mobilnega brskalnika itd)
- poleg [2] testiranja spletne aplikacije v posnemovalnikih je zelo priporočljivo da se
spletna aplikacija testira tudi na pravih mobilnih napravah in v različnih mobilnih
brskalnikih saj le tako dobimo najbolj natančne rezultate
- URL-ji [2] naj bodo čim krajši da uporabnik mobilnega brskalnika ne izgublja časa
z vpisovanjem dolgih URL-jev možnost napak pri vpisovanju je manjša
- onemogočiti [2] oz omejiti uporabo transkoderjev ki jih mobilni operaterji
uporabljajo zato da bi namizno spletno aplikacijo čim bolj optimizirali ter jo
prikazali uporabniku Mi tega ne želimo saj imamo pripravljeno grafično predlogo
za mobilne naprave in s tem zagotavljamo boljšo uporabniško izkušnjo
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 27
7 PRAKTIČNI PRIMER SPLETNA APLIKACIJA (ASPNET
MVC 3) PRIMERNA TUDI ZA MOBILNE TELEFONE
V praktičnem primeru diplomske naloge želimo predstaviti spletno aplikacijo ki bo tudi
primerna za mobilne telefone saj se je število mobilnih telefonov ki imajo dostop do
svetovnega spleta močno razširilo Mobilni telefoni predvsem pametni mobilni telefoni
postajajo vedno bolj priljubljeni za deskanje oz iskanje informacij po svetovnem spletu
žal pa mobilni uporabniki nimajo najboljše uporabniške izkušnje s spletnimi mesti saj še ti
večinoma ne podpirajo mobilnih brskalnikov Z uporabo tehnologije ASPNET MVC 3
bomo skušali s čim bolj enotno kodo podpreti obe platformi torej namizno in mobilno
71 Opis aplikacije
Opazili smo da v slovenskem prostoru veliki kinematografski centri (npr Kolosej Planet
Tuš) nimajo spletnih strani ki bi podpirale mobilne brskalnike zaradi česar ima uporabnik
že pri pregledu sporeda z mobilnim telefonom precej težav Odločili smo se za spletno
aplikacijo ki bo uporabnikom s pomočjo namiznih in mobilnih naprav z možnostjo
dostopa do spleta omogočala rezervacijo kart za filme ki se vrtijo tisti dan na sporedu
Uporabnik bo lahko pregledal spored v določenem kinematografskem centru in na podlagi
tega po želji rezerviral določeno število kart za izbrani film Urejanje rezervacij bo
omogočeno le s pomočjo namiznih brskalnikov medtem ko bo preklic rezervacij podprt
tudi na mobilnih brskalnikih Prav tako bo lahko uporabnik z administratorskimi pravicami
dodajal nove filme v spored imel bo pregled nad uporabniki in filmi kar bo omogočeno le
s pomočjo namiznih brskalnikov saj smo se odločili da na mobilni platformi to ne bi bilo
smiselno Obiskovalci spletne strani se bodo morali registrirati če bodo želeli izvesti
rezervacijo za izbrani film Po uspešni registraciji se bodo v spletno aplikacijo prijavili z
izbranim uporabniškim imenom in geslom Prijavljeni uporabnik ima potem na voljo še
pregled vseh preteklih rezervacij in urejanje tekočih rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 28
72 Uporabljena orodja pri razvoju
Pri razvoju spletne aplikacije smo uporabljali Visual Studio 2010 in Microsoft Sql Server
Management Studio 2008 s katerim smo ustvarili podatkovno bazo S programom Gimp
smo naredili grafično obliko aplikacije S spletno aplikacijo smo gostovali na spletnem
strežniku IIS 7 Pri namiznih napravah smo spletno aplikacijo testirali v brskalnikih
Google Chrome in Mozilla Firefox 50 za testiranje na pametnem mobilnem telefonu
Samsung Galaxy Mini smo uporabljali enega izmed najbolj priljubljenih mobilnih
brskalnikov Opera Mobile
73 Načrt razvoja
Oblikovanje grafične predloge za namizne
brskalnike
Oblikovanje in razrez grafične predloge za
mobilne brskalnike
Razrez grafične predloge za namizne
brskalnike
Implementacija grafične predloge za namizne
brskalnike v ASPNET MVC 3 Razor layout
oz Master page datoteko
Uporaba oz priprava slogovne datoteke (css)
za namizne brskalnike
Implementacija grafične predloge za mobilne
brskalnike v drugo ASPNET MVC 3 Razor
layout oz Master page datoteko
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 29
74 Implementacija
Pri implementaciji smo uporabili Razor sintakso programiranja saj nam je pospešila in
poenostavila razvoj aplikacije
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Uporaba oz priprava druge slogovne datoteke
(css) za mobilne brskalnike
Programsko preverjanje ali uporabnik do
aplikacije dostopa preko mobilne ali namizne
naprave V primeru da uporabnik dostopa do
spletne aplikacije z mobilnim telefonom mu
prikažemo aplikacijo z grafično predlogo za
mobilne naprave
Razvoj vseh funkcionalnosti za spletno
aplikacijo
Onemogočanje določenih funkcionalnosti (npr
kakšni dolgi vnosi opisov) spletne aplikacije
za mobilne naprave
Testiranje aplikacije na namizni in mobilni
napravi v več različnih brskalnikih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 30
741 Grafična predloga za namizne in mobilne naprave
Za zagotavljanje najboljše možne uporabniške izkušnje na obeh platformah moramo
izdelati dve grafični predlogi in sicer eno za namizne naprave in eno za mobilne naprave
Namizne naprave razpolagajo z resolucijo zaslona od 1024 x 768 točk navzgor medtem ko
mobilne naprave z resolucijo zaslona do nekje 480 x 800 točk (HTC Desire HD) in
navzdol Uporabnik mobilne naprave z zgoraj omenjeno resolucijo torej ne bi imel
najboljše uporabniške izkušnje s spletno aplikacijo ki bi podpirala le namizne naprave in
bi bila izhodiščna velikost aplikacije 1024 x 768 točk saj bi moral uporabnik pogosto
uporabljati horizontalni in vertikalni drsnik na mobilni napravi da bi prišel do želenih
informacij
Pri praktičnem primeru smo se osredotočili na dve grafični predlogi (namizno in mobilno)
Grafična predloga za namizne naprave je oblikovno bogatejša (reklamna pasica lepša
pisava več slik itd)
Slika 33 Grafična predloga za namizne naprave
Predlogo za mobilne naprave smo načrtovali veliko bolj skromno (brez reklamnih pasic
fizično manjši logotip privzeta pisava) Njena skupna velikost ne presega 10 KB kajti pri
predlogah za mobilne naprave je pomembno da imajo skupno velikost čim manjšo da
lahko mobilni brskalnik uporabniku čim hitreje naloži spletno aplikacijo na zaslon
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 31
Mobilni telefoni po navadi ne razpolagajo s hitrimi internetnimi povezavami oz s
paketnim prenosom pa tudi mobilni brskalniki so skromnejši od namiznih saj razpolagajo
z manjšo procesorsko močjo Prav tako se internetna povezava prek mobilnega telefona oz
ponudnika mobilnih storitev po navadi plačuje za vsak byte posebej Pri načrtovanju
predloge smo pazili da je širina predloge vedno 100 ne glede na velikost zaslona na
mobilni napravi S tem načinom podpremo večino zaslonskih resolucij mobilnih naprav
Slika 34 Grafična predloga za mobilne naprave
742 Podatkovni model
Podatkovni model praktičnega primera obsega 10 tabel
- Dvorana
o v njej najdemo podatke o dvoranah ki se nahajajo v določenem
kinematografskem centru
- Film
o vsi podatki o filmu
- KinoCenter
o podatki o kinematografskem centru ki pa so več ali manj statični saj so
predvideni le trije kinematografski centri (Maribor Ljubljana Celje)
- Posta
o poštne številke vseh pošt v Sloveniji uporabnik mora ob registraciji podati
naslov
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 32
- Rezervacija
o shranjeni podatki o rezerviranem filmu terminu uporabniku itd
- Slika
o tabela se uporablja za shranjevanje filmskih slik ki so potem prikazane ob
opisu filma
- Spored
o datum sporeda v kinematografskem centru
- Termin
o tabela termin je povezana s sporedom v njej se nahaja podatek o začetku in
koncu predvajanja določenega filma ter povezave z vstopnico (vstopnina)
dvorano (id dvorane v kateri se predvaja)
- Uporabnik
o podatki o registriranem uporabniku le registrirani uporabniki lahko delajo
rezervacije
- Vstopnica
o določeni filmi (3D daljši od 120 min hellip) imajo po navadi višjo vstopnino
zato smo se odločili posebej za tabelo vstopnica v kateri se nahajajo
podatki o ceni vstopnice
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 33
Slika 35 Podatkovni model Kinematograf
FilmFilmId
NaslovSlo
NaslovAng
OpisKratek
OpisDolg
Igralci
Zvrst
TrajanjeMin
TriD
KinoCenterKinoCenterId
Naziv
Naslov
Opis
PostaPostaId
Naziv
PostnaStevilka
RezervacijaRezervacijaId
UporabnikId
DatumRez
Koda
TerminId
Prevzel
StKart
SlikaSlikaId
Datoteka
SlikaBin
NaslovnaSlika
FilmId
SporedSporedId
Datum
KinoCenterId
UporabnikUporabnikId
UporabniskoIme
Geslo
ImePriimek
Naslov
PostaId
TelefonskaSt
Admin
Blokiran
VstopnicaVstopnicaId
Cena
DvoranaDvoranaId
Naziv
TriD
KinoCenterId
Kapaciteta
TerminTerminId
UraOd
UraDo
VstopnicaId
FilmId
DvoranaId
SporedId
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 34
743 Zaznava namiznih in mobilnih brskalnikov
Za zaznavo mobilnih brskalnikov smo uporabili metodo s katero s pomočjo ključnih besed
v HTTP zahtevi in njeni lastnosti User-Agent v mobilnem brskalniku programsko
ugotovimo ali gre za mobilni ali namizni brskalnik Za to metodo zaznave smo se odločili
ker s tem načinom pokrijemo največji del mobilnih brskalnikov Ta metoda je uspešna tudi
pri zaznavi mobilnih brskalnikov ki so izdali novejšo verzijo brskalnika in nam tako ni
treba vedno posodabljati WURFL datoteke v primeru da bi se odločili za metodo zaznave
brskalnikov z njeno pomočjo
Na podlagi programske zaznave vrste brskalnika uporabniku prikažemo ustrezno grafično
predlogo Privzeta grafična predloga je za namizne brskalnike V sejo si tudi shranimo
vrsto brskalnika da potem vemo katere podatke prikazati uporabniku kajti za mobilno
verzijo prikazujemo okleščene podatke o filmih Kodo zaznave vrste brskalnika umestimo
v Razor datoteko ViewStartcshtml v kateri se programsko določa glavna grafična
predloga spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 35
Slika 36 Koda za detekcijo vrste brskalnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 36
744 Prijava uporabnika v sistem
Prijavljen uporabnik ima možnost rezervacije kart Uporabnik se v sistem prijavi z
uporabniškim imenom in geslom ki ju je podal ob registraciji Obrazec za prijavo se pri
namizni grafični predlogi nahaja v zgornjem desnem kotu
Slika 37 Obrazec za prijavo pri namizni grafični predlogi
Pri mobilni grafični predlogi smo obrazec za prijavo umestili v območje reklamnih pasic
saj pri mobilni verziji ne uporabljamo reklamnih pasic in nam zato ostane prostor za
prijavo
Slika 38 Obrazec za prijavo pri mobilni verziji spletne aplikacije
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 37
Pri prototipni spletni aplikaciji ne uporabljamo šifriranja gesel zato so gesla v bazi
shranjena nešifrirano Uporabnik ob kliku na gumb Prijava sproži akcijo Prijava s katero
se začne preverjanje uporabniškega imena in gesla Če se ta dva podatka ujemata s
podatkoma v bazi se uporabnik uspešno vpiše v sistem Ob uspešni prijavi si v sejo
shranimo nekaj podatkov o uporabniku kot so uporabniško ime identifikacijsko številko
uporabnika podatek ali ima uporabnik administratorske pravice in zastavico o prijavi
Metoda ki preverja vpis uporabnika vrača true (pravilno) za uspešno prijavo oz false
(napačno) za neuspešno prijavo Seveda moramo preverjati tudi ali je uporabnik morda
blokiran in zato nima dostopa do sistema
Slika 39 Metoda za preverjanje vpisa uporabnika v sistem
V primeru da uporabnik ne vpiše pravilnih podatkov ob prijavi oz prijava ni uspešna
uporabnika o tem obvestimo
Slika 40 Obvestilo o neuspešni prijavi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 38
745 Spored
Pri sporedu filmov smo se odločili da bodo filmi sortirani po datumu in terminu
predvajanja To pomeni da lahko pride do več enakih vnosov (npr isti film in 3 različni
termini predvajanja se pravi trije vnosi istega filma v spored) Ta odločitev je bila sprejeta
zaradi za uporabnike lažje rezervacije kart prek mobilnih naprav
Spored vsebuje datum termin ter nekaj podatkov o posameznem filmu (slovensko in
angleško ime filma naslovno sliko igralce zvrst kratek opis vstopnino in dvorano) in
gumb za rezervacijo Ti podatki so enaki tudi pri ogledu spletne aplikacije prek mobilne
naprave le da je naslovna slika pomanjšana Pri namizni verziji imamo na voljo še gumb
Podrobnosti ki nam prikaže še dodatne podatke o posameznem filmu
Slika 41 Spored filmov na namiznem brskalniku
Mobilna verzija ima manjšo naslovno sliko in nima gumba podrobnosti Zato smo morali
za mobilno verzijo uporabiti le dva dodatna pogojna stavka ki sta glede na uporabljeno
napravo (namizno oz mobilno) pravilno prikazala spored filmov uporabniku To pomeni
da za prikaz sporeda uporabljamo le eno datoteko (mi smo uporabili datoteko tipa view
user control) ne glede na uporabljeno napravo s strani uporabnika
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 39
Oba pogojna stavka preverjata pogoj ali je spletna aplikacija obiskana s pomočjo mobilne
naprave Prvi pogojni stavek spreminja velikost naslovne slike drugi pogojni stavek
prikazuje oz skriva gumb Podrobnosti V seji imamo shranjeno vrednost ali je naprava
mobilna oz namizna V spremenljivkah (slikaHeight in slikaWidth) imamo shranjene
privzete vrednosti za namizne naprave ki se potem spremenijo glede na uporabljeno
napravo Vrednosti teh spremenljivk nato uporabimo v HTML kontrolah v tem primeru
img kontroli (primer ltimg src= width=slikaWidth height=slikaHeight gt)
Slika 42 Pogojni stavek za velikost naslovne slike
Slika 43 Pogojni stavek za prikaz gumba Podrobnosti
Pri prikazovanju naslovne slike smo naleteli na problem kako prikazati sliko iz
podatkovne baze Problem smo rešili tako da smo napisali metodo ki vrača objekt tipa
FileContentResult To metodo kličemo v akciji HTML kontrole img in njenem atributu src
Slika 44 Klic akcije v HTML kontroli za prikazovanje naslovne slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 40
S pomočjo akcije oz metode VrniNaslovnoSliko prikažemo naslovno sliko posameznega
filma Če naslovna slika ne obstaja prikažemo privzeto naslovno sliko ki jo imamo
shranjeno nekje na strežniku Tej privzeti sliki moramo najprej prebrati vse zloge da lahko
potem ustrezno vrnemo rezultat metode oz akcije Metoda vrača objekt tipa
FileContentResult ki hrani binarno vrednost slike in tip datoteke oz slike Metoda sprejme
parameter filmId s katerim najdemo naslovno sliko za točno določen film
Slika 45 Metoda VrniNaslovnoSliko
Parameter filmId uporabimo ob klicu metode GetSlike ki vrne objekt tipa Slika Z drugim
parametrom metodi GetSlike povemo ali gre za naslovno sliko ali za slike ki niso
naslovne Po podatkih v podatkovni bazi povprašujemo z jezikom Linq
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 41
Slika 46 Metoda GetSlike
V primeru da uporabnik obiskuje spletno aplikacijo z mobilnega brskalnika moramo slike
ustrezno zmanjšati oz skrčiti saj ne želimo da odjemalcu preko strežnika pošiljamo
izvirno velikost slike kajti pri mobilnih napravah se internetna povezava plačuje glede na
količino prenesenih bytov oz podatkov Slike zmanjšujemo z implementirano metodo
ResizeImage v razredu Funkcije Metodi kot parametra podamo binarno vrednost slike in
želeno velikost slike
Slika 47 Koda [26] metode ResizeImage za zmanjševanje slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 42
746 Rezervacija
Kot že rečeno ima prijavljen uporabnik možnost rezervacije kart želenega filma
Uporabnik lahko rezervira največ 5 kart pri posameznem filmu S pritiskom na gumb
Rezerviraj se mu izpiše obvestilo o uspešnosti
Slika 48 Prikaz obvestila o uspešni rezervaciji na mobilnem brskalniku
Za vsak rezerviran film ima uporabnik možnost preklica rezervacije Pri sporedu se mu ta
možnost preklica prikaže v obliki gumba pri že rezerviranem filmu Prav tako bo
uporabnik opazil nad gumbom za preklic obvestilo z rdečimi črkami ki uporabnika obvesti
o rezervaciji filma
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 43
Slika 49 Gumb za preklic rezervacije na mobilnem brskalniku
Pri prikazu gumbov Rezerviraj in Prekliči termin smo uporabljali Razor sintakso v cshtml
dokumentu Za vsak posamezen film preverjamo če ga je uporabnik že rezerviral
Rezervacijo preverjamo z metodo ZeRezervirano ki prejme parametre id termina in id
uporabnika Ta metoda vrne pravilno (true) za že rezerviran termin in napačno (false) za še
ne rezerviran termin Ob kliku na gumb Rezerviraj pošljemo strežniku podatke o id-ju
termina zato mora biti ta del kode znotraj HTML forme (HTMLBeginForm)
Slika 50 Koda za prikaz gumbov Rezerviraj in Prekliči termin
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 44
Ob kliku na gumb Rezerviraj poslane podatke (HttpPost) ustrezno obdelamo v določenem
krmilniku (Film) in ustrezni akciji oz metodi (Rezerviraj) V tej akciji preverjamo če je
uporabnik rezerviral manj kot 6 kart (največ 5 rezerviranih kart za posamezen film) in ali
je še kaj prostih mest za izbrani film (metoda ProstaMesta(int terminId)) Seveda
uporabnika obvestimo o uspešnosti oz neuspešnosti rezervacije obvestilo pa shranimo v
sejo in ga nato prikažemo v spletni aplikaciji Rezervacijo shranimo v bazo s kodo
frShrani() V tej metodi operiramo z objektom podatkovne entitete ki ima vgrajeno
metodo SaveChanges ki shrani spremembe v podatkovno bazo
Slika 51 Koda akcije oz metode Rezerviraj
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 45
747 Vnos novih filmov
Nove filme v podatkovno bazo lahko vnaša le uporabnik s statusom administratorja Novi
filmi se vnašajo le preko namiznega brskalnika kajti vnosna forma je precej obsežna
(glede na število znakov ki jih je treba vpisati) in bi vnos prek mobilnega brskalnika bil
nesmiseln
Pri vnosu filma vnašamo podatke o filmu kot so naslov v slovenščini in angleščini kratek
in dolg opis zvrst trajanje filma v minutah ali je film na voljo tudi v 3D tehniki in 3
fotografije filma ena fotografija je naslovna fotografija ki je vidna na prvi strani sporeda
Slika 52 Vnosna forma za film
Obrazec za vnos novega filma smo ustvarili v viewuser kontroli ki jo prikažemo ko je bila
klicana akcija NovFilm Ko uporabnik klikne na gumb Shrani je sprožena akcija
ShraniFilm v krmilniku Film
Podatki se k strežniku pošljejo s POST metodo tam jih obdelamo z akcijo oz metodo
ShraniFilm Ta metoda sprejme 2 parametra Prvi parameter je kolekcija vrednosti vseh
vnosnih HTML kontrol pri vnosu novega filma drugi parameter je kolekcija vseh poslanih
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 46
datotek oz slik Preden zapišemo film v podatkovno bazo moramo preveriti ali je
uporabnik ki je te podatke poslal prijavljen in ima administratorske pravice Šele ko so
pogoji izpolnjeni ustvarimo nov objekt tipa Film in mu priredimo poslane vrednosti Z
metodo DodajFilm dodamo nov objekt tipa Film v naše kino entitete z metodo Shrani()
pa le še zapišemo spremembe v podatkovno bazo
Slika 53 Koda akcije ShraniFilm
Pri kodiranju smo naleteli na težavo kako pošiljati datoteke k strežniku To smo rešili
tako da smo pri vnosni formi označili da bomo pošiljali tudi datoteke Vrstica kode ki
rešuje omenjeno težavo izgleda takole HTMLBeginForm(ShraniFilm Film
FormMethodPost new Enctype = multipartform-data) in tako akciji preko objekta
IEnumerableltHttpPostedFileBasegt pošljemo datoteke oz v našem primeru slike
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 47
748 Dodajanje filmov v spored
Formo za urejanje terminov smo načrtovali tako da uporabnik izbere datum sporeda film
vstopnino dvorano in začetek filma Pod formo za urejanje terminov ima administrator
pregled nad že vnesenimi termini ki ji lahko še posebej uredi ali izbriše
Ob kliku na gumb Shrani se pošljejo podatki k strežniku kjer se izvede metoda oz akcija
ShraniTermin Ta metoda poslane podatke obdela in shrani v podatkovno bazo
Slika 54 Forma za vnos filma v spored in razpredelnica z vnesenimi termini
Datum termina je v podatkovni bazi zapisan kot datum sporeda pri vsakem dodajanju
novega termina preverjamo če vneseni datum že obstaja v podatkovni bazi (lastna metoda
GetSpored) Če ne obstaja ustvarimo nov datum sporeda V primeru da obstaja
povežemo id obstoječega datuma sporeda z novim terminom
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 48
Slika 55 Del kode za shranjevanje termina
749 Pregled in prevzem rezervacij
Prevzem kart smo načrtovali tako da mora uporabnik ko pride prevzeti karte na
prevzemno mesto (npr blagajna kinematografskega centra) blagajničarki pokazati osebni
dokument oz povedati prevzemno kodo če osebnih dokumentov nima pri sebi
Blagajničarka potem s pomočjo spletne aplikacije potrdi prevzem kart in uporabniku ob
plačilu izroči karte
V spletni aplikaciji ima uporabnik brez administratorskih pravic pregled nad svojimi
rezervacijami medtem ko ima uporabnik z administratorskimi pravicami pregled nad
vsemi rezervacijami
Slika 56 Administratorski pregled rezervacij
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 49
Pri pregledu rezervacij smo uporabili Ajax tehnologijo in sicer pri potrjevanju urejanju in
brisanju smo uporabili le delno posodobitev strani aplikacije (posodablja se le
razpredelnica s podatki o rezervacijah) S tem pridobimo na hitrosti izvajanja operacij in
nalaganja podatkov prav tako ima uporabnik boljšo uporabniško izkušnjo z aplikacijo Za
uporabo Ajax tehnologije moramo uporabiti Ajax formo koda za Ajax formo zgleda
takole AjaxBeginForm(parametri hellip) V našem primeru moramo kot parametre navesti
ime akcije ime krmilnika in Ajax možnosti kot so vrsta http metode in id dela strani ki bi
se asinhrono posodabljal
Slika 57 Koda za začetek Ajax forme
Znotraj Ajax forme imamo tabelo s podatki o rezervacijah in povezave za operacije (potrdi
prevzem uredi briši) Te povezave morajo biti vrste Ajax če želimo da se stran asinhrono
posodablja Povezavo Potrdi prevzem prikažemo le če je prijavljen uporabnik z
administratorskimi pravicami Prav tako prikazujemo povezavo Uredi in Briši le če karte
še niso bile prevzete
Slika 58 Koda Ajax povezave za operacije (potrdi prevzem uredi briši)
Pri potrjevanju rezervacije kličemo akcijo PotrdiRezervacijo ta akcija prejme id s
pomočjo katerega najdemo rezervacijo v podatkovni bazi
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 50
V akciji oz metodi PotrdiRezervacijo še dodatno preverimo ali potrjuje uporabnik z
administratorskimi pravicami potem z našo implementirano metodo
PotrdiPrevzemRezervacije potrdimo rezervacijo Preverjamo tudi za kakšno vrsto zahteve
gre če gre za Ajax zahtevo vrnemo PartialView oz delni pogled in se posodobi le
določen del strani aplikacije v nasprotnem primeru kličemo drugo akcijo ki vrne celotni
pogled in se posodobi celotna stran aplikacije
Slika 59 Koda akcije PotrdiRezervacijo
75 Pregled podpore funkcij spletne aplikacije na namiznih in mobilnih napravah
V spletni aplikaciji določenih funkcij nismo podprli na mobilnih napravah ker smo pri tem
naleteli na določene omejitve oz smo imeli utemeljene druge razloge zaradi katerih nismo
podprli določenih funkcij na obeh napravah
Tabela 1 Podprtost funkcij spletne aplikacije na mobilnih in namiznih napravah
Funkcija spletne
aplikacije
Podpora na mobilni
napravi
Podpora na namizni
napravi
Registracija novega
uporabnika
X X
Prijava uporabnika v sistem X X
Osnovni pregled sporeda
(kratek opis filma in
naslovna slika)
X X
Dodatni pregled sporeda
(dolg opis filma in dodatne
slike)
X
Rezervacija kart X X
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 51
Preklic rezervacije X X
Pregled vseh rezervacij
uporabnika
X
Spreminjanje uporabniškega
računa
X X
Dodajanjeurejanjebrisanje
filmov
X
Urejanje terminov za spored
filmov(dodajanje brisanje
spreminjanje)
X
Pregled registriranih
uporabnikov
X
Pregled vseh rezervacij X
Potrjevanje rezervacij X
Urejanje rezervacije X
Pri razvoju spletne aplikacije smo se odločili da bomo za mobilne naprave podprli le
osnovne funkcije saj smo želeli doseči da je spletna aplikacija za mobilne naprave
preprosta pregledna in čim manj kompleksna Ob razvijanju aplikacije smo se spraševali
- kaj uporabnik mobilnega telefona najbolj potrebuje ko obiskuje spletno aplikacijo
preko mobilnega brskalnika in
- kdaj uporabnik obiskuje aplikacijo preko mobilnega brskalnika
Za odgovor na prvo vprašanje smo morali sprva odgovoriti na drugo vprašanje Uporabnik
bi po vsej verjetnosti našo aplikacijo obiskoval preko mobilnega brskalnika tedaj ko ni
vnaprej načrtoval ogleda filma in pri tem ni imel dostopa do namizne naprave Tu dobimo
odgovor na prvo vprašanje uporabnika ki ni nekaj vnaprej načrtoval po navadi zanimajo
le osnovne informacije oz funkcije (spored kratek opis filma rezervacija kart hellip)
medtem ko dodatne informacije (pregled vseh rezervacij dolg opis filma) za njega v tistem
trenutku niso tako pomembne Med osnovne funkcije smo šteli registracijo prijavo
pregled sporeda rezervacijo kart preklic rezervacije in spreminjanje uporabniškega
računa Funkcijo spreminjanja uporabniškega računa bi lahko tudi izključili kajti za
uporabnika ki spletno aplikacijo obiskuje preko mobilnega brskalnika ta funkcija ni tako
temeljna
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 52
Pri razvoju spletne aplikacije smo naleteli na omejitve kot so širina in dolžina zaslona
pasovna širina mobilne internetne povezave različne vrste mobilnih brskalnikov omejitve
pri količino besedila itd
Naša priporočila za razvoj namiznomobilnih spletnih aplikacij so
- razviti spletno aplikacijo ki podpira do največ dve vrsti mobilnih naprav (npr
srednje pametne in pametne mobilne telefone)
- ustvariti ločene grafične predloge in CSS datoteke za namizne in mobilne naprave
- grafična predloga za mobilne naprave naj bo grafično skromnejša pregledna
preprosta in naj bodo sekcije (glava vsebina noga hellip) barvno ločene
- povpraševanja po bazi podatkov naj bodo skupna za obe vrsti naprav
- podatke ki jih ne želimo prikazati na mobilni napravi skrijemo s pomočjo
pogojnih stavkov s čimer se izognemo dvojnemu kodiranju
- fizično zmanjševanje slik pri spletni aplikaciji za mobilne naprave
- avtomatska zaznava brskalnika in glede na zaznan brskalnik prikaz ustrezne
grafične predloge
- pri mobilni spletni aplikaciji prikaz le osnovnih funkcij in informacij ki so
uporabniku najnujnejše ter zmanjšanje količine teksta in povečanje razmika med
povezavami ter gumbi
- URL-ji naj bodo kratki
- zelo priporočamo da se spletna aplikacija sproti testira na mobilni napravi
- lažje in hitrejše programiranje če izberete Razor pogon za poglede ali katerega
izmed drugih priljubljenih pogonov
- čim bolj se držati arhitekturnega vzorca MVC
- zmanjšati uporabo Javascripta v mobilnih spletnih aplikacijah saj s tem pohitrimo
delovanje spletne aplikacije in se izognemo težavam v primeru da določen mobilni
brskalnik ne podpira Javascripta v celoti
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 53
8 SKLEP
Cilj diplomske naloge je bil da s pomočjo tehnologije ASPNET MVC 3 in s čim bolj
enotno kodo podpremo namizne in mobilne naprave To smo tudi naredili saj smo za
podporo mobilnih naprav morali ustvariti le dve dodatni datoteki ki sta v bistvu bili
grafična predloga in css datoteka za mobilne brskalnike Za prikaz podatkov na obeh
platformah smo uporabili enake datoteke tako za mobilne kot za namizne naprave in v njih
zapisali le nekaj dodatnih vrstic kode pogojnih stavkov ki so glede na napravo prikazali
ustrezne podatke Torej to pomeni da nismo potrebovali nobenih ločenih datotek oz
ASPNET strani za mobilne naprave ampak smo vse sprogramirali v datoteki ki sta jo
uporabljali obe napravi
Prav tako nismo pisali nobenih dodatnih povpraševanj za mobilne naprave ampak smo vsa
povpraševanja uporabljali za obe napravi
Pri razvoju spletne aplikacije smo morali skrbno načrtovati vsako stran operacijo in
povpraševanje kajti zagotoviti smo morali čim bolj enotno kodo Pri načrtovanju smo si
vedno skušali določeno stran oz operacijo zamisliti na obeh platformah V primeru da je
bilo izvedljivo smo s čim manj dodatne kode poskušali podpreti obe platformi če ni bilo
izvedljivo smo iskali drugo rešitev Morali smo se tudi odločiti če je določeno stran sploh
smiselno podpreti na obeh platformah (npr vnos novega filma ni smiseln kajti vnos
podatkov o novem filmu vsebuje veliko znakov kratek opis dolg opis igralci itd in bi to
bilo z enoprstnim tipkanjem preko mobilne naprave zelo zamudno ter za uporabnika tudi
mukotrpno delo) V primeru da bi uporabnik kljub temu želel vnos novega filma preko
mobilne naprave bi se to izvedlo z ustreznimi nastavitvami v css datoteki (npr vnosna
polja se glede na širino zaslona prikazujejo drugo pod drugim)
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 54
9 VIRI IN LITERATURA
1 M Firtman Programming the mobile web OReilly Media inc ZDA 2010
2 G Frederick in R Lal Beginning smartphone web development ZDA 2009
3 J Galloway P Haack S Hanselman S Guthrie in R Conery Professional
ASPNET MVC 2 ZDA 2010
4 A Mackey Introducing NET 40 with Visual Studio 2010 ZDA 2010
5 S Sanderson Pro ASPNET MVC 2 Framework ZDA 2010
6 M Gu K Tang Comparative analysis of WebForms MVC and MVP
architecture 2nd Conference on Environmental Science and Information
Application Technology Wuhan 17 ndash18 julija 2010 str 391ndash394
7 httpwwww3orgMobile
8 httpwwwaspnetmvc
9 httpwwwaspnetmvctutorialsasp-net-mvc-overview-cs
10 httpwwwaspnetlearnwhitepapersadd-mobile-pages-to-your-aspnet-web-
forms-mvc-application
11 httpwwwaspnetmobiledevice-simulators
12 httpwwwhanselmancomblogMixMobileWebSitesWithASPNETMVCAnd
TheMobileBrowserDefinitionFileaspx
13 httpweblogsaspnetgunnarpeipmanarchive20101027building-mobile-
web-site-with-asp-net-mvc-and-jquery-mobileaspx
14 httpdotnetdzonecomarticlesdeciding-when-use-aspnet-mvc-f
15 httpwwwkevinwilliampangcom20090421should-you-use-asp-net-mvc
16 httpwwwdevxcomenterpriseArticle44610
17 httpchannel9msdncomblogslostintangentweb-application-toolkit-mobile-
web-applications
18 httpwwwaspnetmvcwhatisaspmvc
19 httpwwwaspnetmvctutorialsunderstanding-models-views-and-controllers-
cs
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 55
20 httpmsdnmicrosoftcomen-usmagazinedd942833aspx
21 httpslwikipediaorgwikiAjax_(programiranje)
22 httpwwwaspnetmvctutorialsiteration-7-add-ajax-functionality-cs
23 httpwwwaspnetwebmatrixtutorials2-introduction-to-asp-net-web-
programming-using-the-razor-syntax
24 httpweblogsaspnetscottguarchive20100702introducing-razoraspx
25 httpwwwkolosejsi
26 httpsnippetsdzonecompostsshow1485
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 56
10 PRILOGE
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 57
Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58