22 POGLAVJE 3. RAZVOJ LASTNE REˇSITVE
ASP.NET je postal zelo zahteven in neprilagodljiv ter tako ni mogel veˇc sle-diti smernicam modernega spleta. Prilagoditve so bile sicer moˇzne, vendar so predstavljale zahtevno in muˇcno opravilo, zato so se razvijalci raje posluˇzevali drugih spletnih ogrodij in programskih jezikov.
Microsoft je torej moral stopiti v korak s ˇcasom in idejo opustiti. Leta 2009 je izdal prvo verzijo ogrodja ASP.NET MVC 1.0, ki je bila zgrajena z namenom hitre, uˇcinkovite in prilagodljive izdelave spletnih aplikacij po programskem modelu MVC. Zaˇcetki modela MVC segajo v leto 1979. Razvijalci so ta model dobro sprejeli, saj se razvoj spletnih aplikacij v njih najbolje obnese. Prav tako pa je model uporaben tudi v namiznih in mobilnih aplikacijah [2].
Slika 3.1: Prikaz obdelave uporabnikove zahteve po modelu MVC
Model MVC loˇci uporabniˇski vmesnik v tri glavne dele:
Model vsebuje seznam objektov, ki opisujejo podatke. Prav tako nakazuje, kako se podatki lahko dodajajo, spreminjajo.
3.2. UPORABLJENE TEHNOLOGIJE 23
View ali Pogled definira, kako se bo uporabniˇski vmesnik izrisal uporabniku.
Controller ali Kontroler je seznam razredov, ki procesirajo uporabnikove za-hteve. Glede na zahtevo mu kontroler nato posreduje tudi zahtevan pogled z rezultati njegove zahteve.
3.2.2 Entity Framework
Entity Framework (EF) [5] je ogrodje, ki omogoˇca preslikavo objektov .NET v podatke, ki jih lahko shranjuje podatkovna baza. EF je privzeto takoj na voljo v ASP.NET in omogoˇca hitro vzpostavitev podatkovne baze. Omogoˇca veˇc naˇcinov vzpostavitve modela.
Prvi naˇcin je imenovan “Code First” ali “Najprej kodiranje”. Pri tem naˇcinu zaˇcnemo s pisanjem razredov, ki vsebujejo opise podatkov, ki bi jih radi shranili v podatkovni bazi. EF nato s pomoˇcjo teh razredov sam ustvari potrebne tabele in instance razredov tako, da je moˇzno takojˇsnje pridobivanje in zapisovanje podatkov iz tega podatkovnega vira. Ta naˇcin omogoˇca hiter razvoj in enostavno prilagodljivost, saj nam podatkovne baze ni potrebno vna-prej izdelati v programu za upravljanje s podatkovnimi bazami. Ta naˇcin je uˇcinkovit v zaˇcetku razvijanja spletne aplikacije, saj lahko tako na zaˇcetku razvoja enostavneje spreminjamo model.
Drugi naˇcin je imenovan “Schema First” ali “Najprej shema”. Uporaben je, ko ˇze imamo postavljeno strukturo podatkovne baze. EF nam v tem primeru omogoˇca avtomatiˇcno izdelavo razredov modela po strukturi podatkovne baze.
Za naˇso reˇsitev smo izbrali pristop “Code First”. Oglejmo si ˇse nekoliko podrobneje, kaj nam Entity Framework omogoˇca.
Recimo, da bi ˇzeleli v tabeli “Aplikacije” shranjevati vse objekte tipa Aplikacija. Za ta namen bi spisali naslednji razred:
24 POGLAVJE 3. RAZVOJ LASTNE REˇSITVE
p u b l i c c l a s s A p l i k a c i j a {
p u b l i c i n t I d { s e t ; g e t ; } p u b l i c i n t Ime { s e t ; g e t ; } p u b l i c i n t Opis { s e t ; g e t ; }
p u b l i c v i r t u a l Uporabnik L a s t n i k { s e t ; g e t ; } }
Izvorna koda 3.1: Razred, ki opisuje vrstico tabele Aplikacije
Razred Aplikacija vsebuje za nas trenutno vse potrebne informacije o aplikaciji. Objekt razreda (Izvorna koda 3.1) predstavlja vrstico v tabeli “Apli-kacije”. EF je zaradiIdatributa ugotovil, da razvijalec s tem misli na primarni kljuˇc in ustrezno ustvari v podatkovni bazi tabelo “Aplikacije” s primarnim kljuˇcemIdin nastavi, da se za vsak nov dodan objekt tipaAplikacijapoveˇca Id atribut za ena.
EF skrbi tudi za tuje kljuˇce. Ko EF iz tabele “Aplikacije” prebere nek objekt tipa Aplikacija, gre pogledat tudi v tabelo “Uporabniki”, kjer najde ustrezen objekt Uporabnik in ga dodeli ustreznemu atributu objekta.
Za dostop do podatkov posamezne tabele moramo napisati tudi razred, ki bo vseboval strukturo naˇse podatkovne baze. Ta razred bo razˇsiril razred DbContext in bo vseboval vse tabele, do katerih ˇzelimo imeti dostop v naˇsi podatkovni bazi. Za naˇs enostaven primer bi ˇzeleli imeti dostopni dve tabeli
-“Aplikacije” in “Uporabniki”. Razred izgleda takole:
p u b l i c c l a s s PodatkovnaBaza : DbContext {
p u b l i c DbSet<A p l i k a c i j a> A p l i k a c i j e {s e t ; g e t ;} p u b l i c DbSet<Uporabnik> U p o r a b n i k i {s e t ; g e t ;} }
Izvorna koda 3.2: Primer razreda, ki predstavlja podatkovno bazo v Entity Framework
Razred ima dva atributa: Aplikacije in Uporabniki, ki predstavljata
3.2. UPORABLJENE TEHNOLOGIJE 25
tabele v podatkovni bazi. ObjektDbSet nam doda dodatne moˇznosti nad ta-belama. Omogoˇca nam, da s tabelami ravnamo tako, kot ravnamo s seznami objektov v .NET. V tem primeru atributa Aplikacije inUporabniki vsebu-jeta sezname objektovAplikacija in Uporabnik. Primer prikazuje naslednja izvorna koda (Izvorna koda 3.3):
PodatkovnaBaza baza = new PodatkovnaBaza ( ) ; L i s t<A p l i k a c i j e> A p l i k a c i j e U p o r a b n i k a =
baza . Where ( a => a . L a s t n i k . Ime = ” I v a n ” ) . T o L i s t ( ) ;
Izvorna koda 3.3: Primer pridobivanja seznamaAplikacij, katerih lastnik je Uporabnikz imenom Ivan
3.2.3 Javascript
JavaScript je dinamiˇcni programski jezik, ki ga podpirajo skoraj vsi brskalni-ki. Je najbolj popularen programski jezik, ki omogoˇca dinamiˇcno spreminjanje spletne strani. JavaScript omogoˇca uporabniku, da kontrolira akcije brskal-nika, asinhrono komunicira s spletnimi streˇzniki ter spreminja vsebino spletne strani.
Prva verzija programskega jezika JavaScript je bila izdana skupaj z brska-lnikom Netscape Navigator 2.0 septembra 1995. Microsoft je leta 1996 vgradil JavaScript tudi v svoj spletni brskalnik Internet Explorer 3.0. Leta 1997 je bil JavaScript standardiziran v standardu imenovanem ECMAScript. Danes je to programski jezik, ki ga lahko poganjajo skoraj vsi brskalniki [3].
JavaScript je dinamiˇcni programski jezik, kar pomeni, da za doloˇcitev spre-menljivk ni potrebno doloˇciti toˇcnega tipa spremenljivke. Izvorna koda 3.4 prikazuje, kako lahko spremenljivki x najprej priredimo numeriˇcno vrednost, nato pa vrednost drugaˇcnega tipa (recimo niz znakov).
26 POGLAVJE 3. RAZVOJ LASTNE REˇSITVE
v a r x = 5 ; // S t e v i l k a x = ” p e t ” ; // Niz znakov
Izvorna koda 3.4: JavaScript je dinamiˇcni jezik, zato se tip spremenljivke doloˇci ob prirejanju vrednosti.
Ta dinamika nam pride zelo prav tudi pri JavaScript objektih, saj lahko objektom brez teˇzav dinamiˇcno dodajamo atribute in metode. Objekte pa lahko kreiramo tudi tako, da samo naˇstejemo njihove atribute ter metode.
Primer 3.5 prikazuje, kako enostavno lahko avtu doloˇcimo nov atribut in novo metodo.
v a r a v t o = {
” l a s t n i k ” : ” Franc M l i n a r ” ,
” t i p v o z i l a ” : ” E n o p r o s t o r e c ” ,
” s t s e d e z e v ” : 7 ,
” k d o j e l a s t n i k ” : f u n c t i o n ( ) { r e t u r n t h i s . l a s t n i k ;
},
” p r e v o z e n i k i l o m e t r i ” : [ 1 0 , 0 , 2 0 , 3 0 , 1 2 ] }
a v t o . v e l i k o s t k o l e s = 1 6 ;
a v t o . s k u p a j k i l o m e t r o v = f u n c t i o n ( ) {
v a r v s o t a = 0 ;
f o r ( v a r i = 0 ; i < t h i s . p r e v o z e n i k i l o m e t r i . l e n g t h ; i ++) {
v s o t a += t h i s . p r e v o z e n i k i l o m e t r i [ i ] ; }
r e t u r n v s o t a ; }
Izvorna koda 3.5: Primer dodajanja atributov in metod objektu
V modernem svetu se ne uporablja veˇc veliko domorodnega (osnovnega) JavaScripta, vendar se uporabljajo razliˇcna ogrodja kot so jQuery, AngularJS,
3.2. UPORABLJENE TEHNOLOGIJE 27
Dojo in drugi. V naˇsi reˇsitvi smo uporabili ogrodje jQuery.
3.2.4 jQuery
jQuery [4] je programsko ogrodje za JavaScript, ki ga je sestavil John Resig leta 2005. Njegova posebnost je v tem, da zelo olajˇsa iskanje elementov v HTML dokumentu ter dodeljevanje obnaˇsanja tem elementom. Od leta 2005 je ogrodje dobilo mnogo privrˇzencev. Sˇcasoma so ga tudi optimizirali ter dodali nove funkcionalnosti.
Velika prednost jQuery ogrodja je tudi ta, da je kompatibilen z vsemi popu-larnimi brskalniki in tako omogoˇca razvijalcu, da se skoncentrira na dejansko reˇsitev in ne na reˇsevanje problemov, ki nastanejo med razliˇcnimi brskalniki.
<i n p u t
t y p e=”b u t t o n ” i d =”TestniGumb ”
data−message=” P o z d r a v l j e n s v e t ! ” />
<s c r i p t t y p e = ’ ’ t e x t / j a v a s c r i p t ’ ’>
$ ( ’# TestniGumb ’ ) . on ( ’ c l i c k ’ , f u n c t i o n ( ) {
a l e r t ( $ ( t h i s ) . a t t r ( ’ data−message ’ ) ) ; }) ;
</ s c r i p t>
Izvorna koda 3.6: Primer uporabe ogrodja jQuery za dodelitev obnaˇsanja ob kliku na gumb z id-jem TestniGumb
3.2.5 Ajax
AJAX (Asynchronous Javascript And XML) je tehnologija, ki omogoˇca pri-dobivanje podatkov iz spletnega streˇznika in njihovo dinamiˇcno prikazovanje brez dodatnega nalaganja celotne spletne strani [7]. Ajax je nastal z namenom pribliˇzati spletne aplikacije namiznim aplikacijam. Te lahko posodobijo le nek
28 POGLAVJE 3. RAZVOJ LASTNE REˇSITVE
del svoje aplikacije, ne da bi morali aplikacijo ponovno v celoti izrisati ali pa ˇse huje - ponovno zagnati.
Ajax je strukturiran v JavaScriptu kot set funkcij in objektov, ki zmorejo poslati zahtevke na spletni streˇznik in prenesti njegov odgovor. Odgovor se nato lahko obdela in posodobi del spletne strani z rezultatom streˇznika. Lahko je v veˇcjih formatih (HTML, CSS, JS, JSON in podobni). Najpogosteje se trenutno uporabljata HTML in JSON.
Ajax tehnologija ˇse posebej stremi k temu, da je enostavna za implemen-tacijo. Z osveˇzevanjem le dela spletne strani pripomore k zmanjˇsanju prometa med uporabnikom in spletnim streˇznikom. Zaradi manjˇsega prometa se iz-boljˇsa odzivnost spletne strani in s tem tudi uporabniˇska izkuˇsnja. Spletna stran je tako bolj prijazna do uporabnika.
$ . a j a x ({
t y p e : ”POST” , u r l : ”/ U s e r s /Add ” ,
d a t a : { ime : ” Martin ” , p r i i m e k : ” Krizman ” } })
. done ( f u n c t i o n ( d a t a ) {
a l e r t ( ” Uporabnik s h r a n j e n : ” + msg . ime + ” ” + msg . p r i i m e k ) ; }) ;
Izvorna koda 3.7: Primer Ajax klica s pomoˇcjo jQuery ogrodja
3.2.6 Web API 2
Ogrodje ASP.NET MVC je bilo narejeno za prikaz spletnih strani v obliki HTML, vendar je sˇcasoma moderni splet priˇcel izdelovati spletne strani, ki so pridobivale podatke preko AJAX klicev, ki pa ne vraˇcajo nujno HTML, ampak veˇcinoma XML ali JSON. Zaradi tega je Microsoft v ASP.NET MVC 5 vgradil tehnologijo Web API 2 [6].
Web API omogoˇca enostavno in hitro odgovarjanje na RESTful zahte-ve. Za upravljanje teh zahtev se uporablja drugaˇcen kontroler, imenovan
3.2. UPORABLJENE TEHNOLOGIJE 29
ApiController, ki vsebuje metode za odgovarjanje na zahteve. Web API ne podpira Pogledov (View-ov), saj ne vraˇca HTML-ja, ampak vraˇca XML, JSON ali gole bite. Zaradi tega je ˇse posebej primeren za pridobivanje poda-tkov brez ponovnega nalaganja spletne strani ali pa za pridobivanje podapoda-tkov iz mobilne aplikacije.
3.2.7 Chart.js
Je knjiˇznica napisana v JavaScriptu, ki omogoˇca izdelavo grafov iz podanih podatkov. Avtor knjiˇznice je Nick Downie [9]. Knjiˇznica ustvari vektorske grafe, ki so preprosti za uporabo in modernega videza.
Knjiˇznica od nas zahteva, da ji posredujemo podatke o vodoravni osi (oznake) ter serije podatkov. Za vsako serijo podatkov lahko doloˇcimo njen izgled. Pri-mer uporabe knjiˇznice prikazuje naslednja izvorna koda (Izvorna koda 3.2):
v a r c t x = document
. getElementById ( ” h t m l e l e m e n t i d ” ) . g e t C o n t e x t ( ” 2 d ” ) ;
v a r d a t a = {
l a b e l s : [ ” Q1” , ”Q2” , ”Q3” , ”Q4 ” ] , d a t a s e t s : [
{
f i l l C o l o r : ” r g b a ( 7 7 , 2 1 0 , 2 5 5 , 0 . 5 ) ” , s t r o k e C o l o r : ” r g b a ( 1 5 3 , 1 7 9 , 1 5 3 , 1 . 0 ) ” , p o i n t C o l o r : ” r g b a ( 1 5 3 , 1 7 9 , 1 5 3 , 1 . 0 ) ” , p o i n t S t r o k e C o l o r : ”# f f f ” ,
d a t a : [ 3 4 5 , 5 4 3 , 7 7 7 , 6 8 7 ] },
{
f i l l C o l o r : ” r g b a ( 1 5 3 , 2 5 5 , 2 5 5 , 0 . 5 ) ” , s t r o k e C o l o r : ” r g b a ( 0 , 1 7 9 , 1 7 9 , 1 . 0 ) ” , p o i n t C o l o r : ” r g b a ( 0 , 1 7 9 , 1 7 9 , 1 . 0 ) ” , p o i n t S t r o k e C o l o r : ”# f f f ” ,
30 POGLAVJE 3. RAZVOJ LASTNE REˇSITVE
d a t a : [ 4 3 2 , 5 5 5 , 6 3 2 , 5 2 0 ] }]
};
v a r o p t i o n s = {
s h o w T o o l t i p s : t r u e , b e z i e r C u r v e : t r u e };
v a r c h a r t = new Chart ( ctx , { }) . L i n e ( data , o p t i o n s ) ;
Izvorna koda 3.8: Primer inicializacije preprostega grafa v Chart.js knjiˇznici, rezultat viden na sliki 3.2
Slika 3.2: Rezultat knjiˇznice Chart.js