spletna aplikacija za namizne in mobilne naprave z uporabo asp.net mvc 3 · 2017. 11. 27. ·...

70
Kristijan Pintarič Spletna aplikacija za namizne in mobilne naprave z uporabo ASP.NET MVC 3 Diplomsko delo Maribor, december 2011

Upload: others

Post on 01-Oct-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Email

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

Spletna aplikacija za namizne in mobilne naprave z uporabo ASPNET MVC 3 Stran 58