Asp.

net MVC
Iskustva grupe memleak+

Studenti: Mirza Dervievid Nedim rndid Emir Pando Mladen Drma Benjamin Kapetanovid Strana | 1

Sadraj
Sadraj ................................................................................................................................................2 Uvod ...................................................................................................................................................3 Asp.net MVC .......................................................................................................................................4 Procesiranje jednog zahtjeva ..............................................................................................................5 Asp.net MVC - Model .........................................................................................................................6 Odabir Database ORM-a: Entity framework vs LinqToSql vs NHibernate ..........................................6 Komparacija EF1, LinqToSql i NHibernate ORM-ova.........................................................................7 Bududnost .......................................................................................................................................7 Asp.net MVC - View ...........................................................................................................................8 Asp.net MVC - Controller ................................................................................................................. 11 Iskustva i problemi .......................................................................................................................... 12 Versioning baze: .......................................................................................................................... 12 Verzije SQL Servera: .................................................................................................................... 12 Entity Framework vs. Linq2SQL: ................................................................................................ 12 Koritenje razvojnog servera: ..................................................................................................... 12 Timski rad:................................................................................................................................... 13 ASP.NET MVC Framework: ......................................................................................................... 13 SVN klijenti: ................................................................................................................................. 13 JavaScript i MVC: ......................................................................................................................... 13 Deployment Asp.net MVC na IIS 6 serveru (Windows server 2003)................................................ 14 Software Design Patterns .................................................................................................................. 15 Model-View-Controller (MVC) Architectural Pattern ..................................................................... 15 Iterator Pattern ............................................................................................................................. 16 Factory Method ............................................................................................................................ 16 Lazy Initialization .......................................................................................................................... 16 Object Pool ................................................................................................................................... 16 Null Object .................................................................................................................................... 16 JavaScript Frameworks ..................................................................................................................... 17 jQuery Framework .................................................................................................................... 17 jNice.......................................................................................................................................... 18 Prototype Framework ............................................................................................................... 19 ScriptAculoUs ............................................................................................................................ 19 ASP.NET MVC i JavaScript.............................................................................................................. 21 Strana | 2

Uvod
Odabir teme za ovaj projekt bio je teak zadatak. Ideje koje smo razmotrili prije DevNet aplikacije su: Online code editor - online editor, slian google docs, koji je optimiziran za programiranje i omogudava real time simultanu kolaboraciju. Od ovog projekta smo odustali jer svi lanovi tima nisu smatrali da je ovaj projekat koristan i smislen. Online advanced clipboard server - Razvoj web i desktop aplikacije za napredni clipboard. Od ovog projekta smo odustali jer se sama ideja nije dovoljno sviala svim lanovima tima. Blog engine - razvoj blog engine-a slian wordpress-u. Od ove ideje smo odustali jer su lanovi tima glasali za temu DevNet. Druga bitna stvar je bila izbor tehnologije. Interesovanja lanova tima su dosta razliita, pa j e bilo potrebno pronadi tehnologiju koja je dovoljno zanimljiva i korisna za savladavanje, i koja nije previe poznata to vedem broju lanova. Na prijedlog kolege Emira, kao odgovor se nametnuo ASP.NET MVC framework. Glavni razlog za koritenje ASP.NET MVC-a je to to radi dosta nisko, moemo raditi u jeziku koji svi poznajemo (C#), i imamo priliku nauiti koristiti jedan novi, mlad framework, ije bi se poznavanje u bududnsti moglo jo bolje iskoristiti. Uz to, odluili smo koristiti sve popularnije Jav aScript framework-e. jQuery i prototype su se pokazali kao odlian izbor za custom ajax komponente koje smo razvijali, ovi frameworci dosta olakavaju razvoj iz perspektive to adresiraju mnoge probleme kompatibilnosti razliitih browsera.

Strana | 3

Asp.net MVC
ASP.net MVC je Microsoftov open source framework za razvoj web aplikacija. ASP.net MVC je baziran na MVC patternu (Model-View-Controller) koji razdvaja Model, View i Controller. ASP.net MVC je framework je baziran na ASP.net frameworu, ali ne koristi WebForms tehnologije. ASP.net MVC osnovne osobine: Kompletna kontrola nad HTML-om AJAX integracija (jQuery, script.aculo.us, ...) Razdvajanje oblasti (Model, View, Controller) Lake odravanje aplikacije tokom vremena Testabilnost arhitektura pogodna za test driven development Podrka za iste linkove

Strana | 4

Procesiranje jednog zahtjeva

Asp.net mvc procesira svaki zahtjev na slijededi nain: 1. Korisnik u browseru otvara web stranicu i na server dolazi request sa adresom http://www.memleakplus.com/novosti/detalji/5 2. Svaki URL se rutira na odgovarajudi kontroler koristedi pravila rutiranja U tom procesu, instancira se odgovarajudi kontroler i poziva odgovarajuda akcija (npr. instancira se kontroler novosti, poziva metoda detalji kojoj se proslijeuje parametar 5) 3. Kontroler instancira odgovarajude klase modela 4. Metode iz modela skupljaju odgovarajude podatke (baze podataka, web servisi i sl.) 5. Kontroler instancira pogled, proslijeuje mu potrebne podatke i renderira se odgovor koji web server alje klijentu (Response)

Rutiranje

Kontroler
2 5

Pogled

Model

Podaci

Ilustracija request response modela u Asp.net MVC frameworku

Asp.net mvc request response model je neto kompleksniji u realnosti. Postoje dodatne komponente koje nisu prikazane dok su odreene navedene komponente opcionalne. Npr., Defaultni View engine (ili template language u terminologiji drugih platformi) je u potpunosti zamjenjiv sa drugim engine-ima. Postoje odreeni open source projekti koji mogu zamijeniti ViewEngine uz odreeni nivo konfiguracije. Takoer, Model komponenta u ASP.net mvc projektu je opcionalna. Programer nije prisiljen da je koristi (to moda npr. ima smisla za neke stateless web servise) dok prilikom koritenja iste ima veliku slobodu odabira tehnologija. Mogude je koristiti LinqToSql, EntityFramework, Nhibernate kao dio modela za pristup bazama podataka ili koristiti model koji uopte ne mora biti baziran na paradigmi relacionih baza podataka (npr. CouchDB, MongoDB, Amazon SimpleDB)

Strana | 5

Asp.net MVC - Model

Model komponente ASP.net mvc projekta mogu biti veoma razliite. Najede se koristi ORM alat za apstrakciju pristupa bazi podataka. Model komponente se takoer mogu koristiti i za pristup podacima u drugoj formi, npr. Pristup web servisima, Document bazama i sl. Za projekat DevNetwork odluili smo se odabrati i koristiti relacionu bazu podataka i ORM koji de odgovarati potrebama naeg projekta.

Odabir Database ORM-a: Entity framework vs LinqToSql vs NHibernate

ORM (Object relational mapping) je alat koji omogudava koritenje baze podataka kao skupa klasa i objekata. Ovaj alat treba da premosti razlike izmeu Relacionog i objektno orijentisanog svijeta. Tri su veoma popularna alata koja se horiste danas: Microsoft Entity Framework Microsoft LinqToSql NHibernate, open source projekat

NHibernate projekat nismo odabrali jer mu nedostaje podrka za LINQ upite, koji znaajano ubrzavaju i pojednostavljuju razvoj (prvenstveno zbog comile time sintaksne provjere upita i jednostavnijeg refactoringa) Incijalno smo eljeli koristiti napredni object relational mapping framework Microsoft Entity Framework koji podrava naslijeivanje entiteta i relacije. EF je veoma kompleksan framework i omogudava kreiranje modela koji za storage moe koristiti tabele i stored procedure koje ne odgovaraju modelu. Za premotavanje ovih razlika koristi se structural mapping. Takoer, EF ima podrku za vie razliitih baza podataka ukljuujudi MSSQL, Oracle, PostgreSQL i MySQL. Nakon odreenih problema sa EntityFrameworkom (mnoge jednostavne operacije nisu implementirane), odluili smo se ipak za LinqToSQL ORM. LinqToSQL ORM je veoma jednostavan i brz za koritenje. Krivulja uenja postoji, ali je znaajno manja u odnosu na vede ORM-ove kao to su EF i Nhibernate. Postoje znaajna ogranienja kao to su manjak podrke za naslijeivanje, ali mi smo smatrali da je LinqToSql ORM iji TradeOff najvie odgovara potrebama naeg projekta.

Strana | 6

Komparacija EF1, LinqToSql i NHibernate ORM-ova

Entity Framework 1 Prednosti: LINQ Podrka za vie baza podataka Podrka za naslijeivanje Mane: Prekomplikovan Prevelik overhead Neke jednostavne stvari nisu implementirane Zakljuak: Previe kompleksan, fale mnoge stvari

LinqToSql Prednosti: LINQ SQL upiti veoma optimizirani za MSSQL Mane: Bez podrke za druge baze podataka Nema naslijeivanja entiteta TablePerClass pattern Zakljuak: Brz agilan i jednostavan ORM

NHibernate Prednosti: Open source Odlina podrka za vie baza Podrka za naslijeivanje 3rd party alati Mane: Nema LINQ Krivulja uenja Konfiguracija Zakljuak: Odlina open source alternative bez dobre podrke za LINQ

Budunost
Entity framework 2 se trenutno nalazi u beta stanju razvoja. Mnoge mane i problemi koji su pratili Entity Framework 1 su rijeeni. Verzija 2 ovog frameworka donosi nove feauture kao to su LazyLoading (ili DefferedLoading), podrka za generisanje baze podataka iz konceptualnog modela, POCO (Plain Old CLR Object) i sl. Linq to Sql je projekat koji se nede vie znaajno razvijati, ali de nastaviti da bude podran od strane Microsofta u smislu ispravljanja bug-ova greaka i sl. NHibernate projekat de uskoro dobiti provider za LINQ (ovaj projekat je trenutno u ranoj beti razvoja). FluentHibernate je projekat koji treba da pojednostavi konfiguraciju Nhibernatea i smanji krivulju uenja.

Strana | 7

Asp.net MVC - View

Iako u nazivu ima rije page (P u ASP Active Server Pages), ASP.NET MVC ne posjeduje koncept stranica . Ne postoji file na disku koji odgovara jednoj stranici, odnosno putanji navedenoj u URL-u. Umjesto toga, uveden je pojam view-a. Kod ASP.NET MVC-a, dolazedi zahtjevi od browser-a se mapiraju u akcije odgovarajudeg kontrolera. Rezultat izvrenja pojedine akcije kontrolera je najede upravo generisanje podataka koji de se prikazati na view-u. Sljededi isjeak koda prikazuje jednu akciju kotrolera, tanije Index akciju BlogPost kontrolera iz nae aplikacije:
public class BlogPostController : Controller { public ActionResult Index(string userName) { if (CheckBlogPermission(userName)) { return View(GetUserBlogs(userName)); } else { return View("Error"); } }

Naziv kontrolera, bez kljune rijei Controller (BlogPost), i akcije (Index) nam govori da demo za izvrenje ove akcije u address bar naeg browsera trebati upisati BlogPost/Index. Ovakav zahtjev de, u zavisnosti od permisija, vratiti ili defaultni view (prilikom kreiranja, view se vee za odreenu akciju), ili Error view, koji koristimo za prikaz greaka. Sam view je u sutini HTML ili XHTML dokument koji moe sadravati i skripte. Struktura view-a je pokazana na primjeru view-a koji prikazuje listu blogova (rezultat Index akcije). Pojedini dijelovi su skradeni zbog itljivosti:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<DevNet.Controllers.Blo gPostViewModel>>" %> <h2>Blog aggregator</h2> <table> <% foreach (var item in Model) { %> <tr> <td> <span id="blogTitleLink"> <b><%= Ajax.ActionLink(item.Title...);</b> </span><br /> <i><%= Html.Encode(item.blogPost.DateTime)) %></i> </td> </tr> <tr> <td> <%= Html.Encode(item.blogPost.Entry.Substring(0,200) %> </td> </tr> <tr>

Strana | 8

<td> Tags: <%= Html.Encode(item.Tags)%> </td> </tr> <tr> <td> Response.Write(Ajax.ActionLink( "(Edit)", "Edit", new { id = item.blogPost.Id }, new AjaxOptions { UpdateTargetId = "blogHandler" } )); } %> </td> </tr> <% } %> </table>

U listingu moemo vidjeti standardne stvari koje se prikazuju na view -u. Pored obinih HTML tagova, imamo mogudnost da koristimo skup objekata koji smo poslali view -u, sadranih u varijabli Model. Model implementira IEnumerable interface, pa moemo koristi ti iterator da dobijemo pojedine objekte i njihove atribute. Na osnovu direktive Inherits koju navodimo na poetku view -a, ASP.NET MVC zna kakve objekte da oekuje. U ovom sluaju radi se o strongly -typed nainu kreiranja odreenog view-a. Prilikom pregledanja ovog isjeka, mogu se primijetiti jo dvije zanimljive stvari. Prva je vezana za Model, kod kojeg se postavlja pitanje kako prikazati podatke koji nisu vezani za jednu vrstu objekata (u naem sluaju imamo jedan blog post i tagove koji su mu pridrueni). Rjeenje je dato u vidu ViewModela, koncepta po kojem imamo mogudnost da kreiramo custom Modele za pojedini view, i tako olakamo posao prikazivanja najrazliitijih vrsta podataka.ViewModel je zapravo klasa kojoj kao atribute podesimo tipove objekata koje elimo imati, i instanciramo jednu ili niz ovih klasa u akciji kontrolera, nakon ega jednostavno proslijedimo skup objekata do view-a. Druga stvar koja je vezana za prikaz je koncept PartialView-ova i Ajax.ActionLink metode. Koritenjem navedenih stvari mogude je dobiti AJAX na naoj stranici bez odstupanja od ASP.NET MVC paradigme. PartialView je po strukturi jednak obinom view-u, razlika je jedino u baznoj klasi. Dok kod view-a imamo nasljeivanje ViewPage kontrole:
Inherits="System.Web.Mvc.ViewPage,

kod partial view-a, kao to smo vidjeli, imamo nasljeivanje ViewUserControl kontrole:
Inherits="System.Web.Mvc.ViewUserControl

Samo ime govori da se partial view moe iskoristiti kao dio drugog view-a ili partial view-a , na sljededi nain:
<div id="blogList" class="blogListNew"> <% Html.RenderPartial("BlogPostList"); %> </div> <div id="blogHandler" class="blogHandler"> </div>

Strana | 9

Poto PartialView ini samo dio jedne stranice u browseru, ovime dobijamo dobru osnovu za implementaciju AJAX funkcionalnosti. Ostatak je dat Ajax.ActionLink metodom, kojom moemo pozvati eljenu akciju bilo kojeg kontrolera, i, koritenjem AjaxOptions -a, definisati eljeno ponaanje nakon izvrenja requesta. Svakako najzanimljivija opcija je UpdateTargetId, koja nam omogudava da zadamo id HTML taga koji de se update-ovati nakon to se request izvri. Time postiemo refresh samo jednog dijela stranice, to je viestruko korisno. Potencijalni problem kod ovog pristupa predstavlja injenica da se svi partial view -ovi ipak nalaze na jednom view-u, a on u Inherits direktivi moe imati samo jedan model. To znai da moemo imati problema ako na jednoj stranici imamo vie PartialView-ova koji primaju razliite modele. Jedno od mogudih rjeenja bi bilo kreiranje custom ViewModel -a koji bi sadravao sve ono to je potrebno svim PartialView-ovima, ali to rjeenje je nepraktino jer zahtijeva izmjenu ViewModela svaki put kad se na stranicu doda novi PartialView. Rjeenje do kojeg smo doli je kreiranje statikih metoda u kontroleru, i pozivanjem tih metoda prilikom poziva Html.RenderPartial metode:
<% if (Request.IsAuthenticated) Html.RenderPartial("../News/Index", DevNet.Controllers.NewsController.GetNewsData (this.Context.User.Identity.Name)); %>

Ovo rjeenje je praktinije i fleksibilnije jer postiemo reusability kakav ne bismo imali sa prethodno opisanom metodom. Jo demo spomenuti da je prilikom poetnih dogovora postojala diskusija vezano za nain implementiranja AJAX funkcionalnosti (PartialView i Ajax.ActionLink VS jQuery), i da je odlueno da se isprobaju obe opcije, nakon ega lanovima tima ostaje sloboda izbora naina implementacij e.

Strana | 10

Asp.net MVC - Controller

Kontroler klase u ASP.NET MVC-u se nalaze unutar jednog foldera. U tom folderu se nalaze zasebne klase koje predstavljaju razliite kontrolere. Svaka stranica projekta sadri svoj kontroler kao i svoj view folder. Sve metode potrebne za funkcionalnost jedne stranice web aplikacije se nalaze u njenom kontroleru, npr. za stranicu Projects nase stranice postoji klasa ProjectsControler.cs. Svaka stranica unutar same Projects stranice ima svoje metode. Bitno je napomenuti da generalno postoje dvije vrste metoda unutar svakog kontrolera, GET i POST metode. Pored navedenih metoda postoje i dodatne metode, koje nisu direktno vezane za odreene poglede ali se koriste u skladu prin cipa objektno orjentisanog programiranja. GET metode unutar kontrolera vre funkcionalnost pripreme podataka koje treba proslijediti odreenom pogledu. Ako elimo prikazati spisak svih projekata nekog korisnika GET metoda je ta koja pripremi podatke iz baze podataka, iste smjesti u odgovarajudi model te taj model proslijedi odgovarajudem pogledu. POST metode se koriste za prikupljanje i obradu informacija sa stranica koje alju ili mijenjaju odreene podatke. POST metode su zaduene za izmjene i dodavanje podataka, a GET metode za prikupljanje postojedih podataka za prikaz.

Funkcionalnost GET i POST metoda unutar kontrolera se obavlja koristedi usku interakcijom sa modelima, pogledima te sa bazom podataka. Standardna metoda uobiajne GET metode nekog kontrolera ukljuduje slijedede korake: Prikupljanje informacija o trenutnom korisniku, te provjera prava pristupa nekom sadraju Prikupljanje podataka potrebnih podataka iz baze koristedi LinkToSQL Prikupljeni podaci se eventualno filtriraju Prikupljene podatci se smjetaju u model te se taj model alje pogledu

Svaki od kontrolera sadri runo razvijene metode kontrole pristupa. Zavisno od akcije postoje postoje dvije potrebne provjere (metode): Provjera pristupa za pregled sadraja: Ova metoda provjerava da li je korisnik koji vri akciju vlasnik sadraja ili lan grupe prijatelja. 1. Provjera pristupa za promjenu sadraja: Ova metoda doputa akciju samo ako je vrilac akcije vlasnik sadraja. Pored navedenih metoda, odreeni kontroleri sadre jo jedan bitan element, a to je custom ViewModel. Ako se vratimo na primjer Projects kontrolera, bila je potreba da se kreira ProjectViewModel koji je za razliku od autogenerisanog ProjectsModela sadravao i listu njegovih tagova i sve komentare.

Strana | 11

Iskustva i problemi
Versioning baze:
Kada smo poeli razvoj, odluili smo se za spiralni pristup. To je znailo da de i baza biti razvijana kako se projekat iri. Meutim, nismo uspjeli pronadi hosting za bazu, pa je svako od nas imao "svoju verziju" baze lokalno. Kada bi se desila izmjena strukture baze, osoba koja je izmjenu napravila poslala bi svoju verziju datoteke baze ostalima putem email-a. Ovo nam je stvorilo niz problema. Podaci su bili nekonzistenti svako je imao drugaije korisnike, blogove i dr. u svojoj bazi. Kada bi promijenili strukturu baze, dio koda, esto i tueg, se ne bi kompajlirao. Takoer, zbog naina na koji se u ASP.NET vri autentikacija korisnika, morali smo imati dvostruke podatke o korisnicima, u dvije odvojene tabele, dakle baza nije bila normalizirana. I ovo je doprinijelo pojavljivanju suptilnih greaka.

Verzije SQL Servera:

Imali smo probleme sa verzijama SQL Servera. Dio tima je koristio SQL Server 2005, dok je drugi dio koristio SQL Server 2008. Ove razlike su rezultat potrebe da se radi na vie predmeta u isto vrijeme sa razliitim bazama podataka. Prilikom razmjene datoteka sa bazom, deavalo se da kolege sa verzijom 2005 ne mogu da importuju iste. Ovo smo rijeili eksportovanjem skripte za generisanje baze iz verzije 2008 koja radi i za verziju 2005.

Entity Framework vs. Linq2SQL:

Incijalno smo eljeli koristiti napredni object relational mapping framework Microsoft Entity Framework koji podrava naslijeivanje entiteta i relacije. EF je veoma kompleksan framework i omogudava kreiranje modela koji za storage moe koristiti tabele i stored procedure koje ne odgovaraju modelu. Za premotavanje ovih razlika koristi se structural mapping. Takoer, EF ima podrku za vie razliitih baza podataka ukljuujudi MSSQL, Oracle, PostgreSQL i MySQL. Nakon odreenih problema sa EntityFrameworkom (mnoge jednostavne operacije nisu implementirane), odluili smo se ipak za LinqToSQL ORM.

Koritenje razvojnog servera:

Za razvoj smo koristili ASP.NET Development Server. To je mali server koji po default-u slui za debuggiranje aplikacija pisanih za ASP.NET MVC. Pokazao se kao jako sporo rjeenje, jer smo primijetili da odziv na klik moe da traje i po nekoliko sekundi, ak i kad se otvara plain html stranica.

Strana | 12

Timski rad:
Dva lana tima su zaposlena, te esto nisu bila u stanju da prisustvuju sastancima tima. Zbog toga smo imali problema u usklaivanju ciljeva i ideja za rad na projektu. Komunikacija je bila oteana. Smatramo da isto online lanstvo u timu nije dovoljno za produktivan rad. Pri sastavljanju tima, svi lanovi nisu imali isti cilj uestvovanja.

ASP.NET MVC Framework:

Generalno, framework nam je bio svijetla taka u projektu. Ima niz prednosti koje demo navesti u drugom dijelu rada, ali svakako da ima i neke nedostatke. Dokumentacija je oskudna, postoji samo online verzija i u dokumentaciji nema primjera upotrebe, to smo od drugih MS proizvoda navikli. Vedinu pomodi smo pronali na web stranici stackoverflow.com. Takoer, neke komponente koje smo trebali pri razvoju (npr. DateTime picker, CheckBoxList, kontrola za upload datoteka i dr.) ne postoje u okviru frameworka. Podrka za SSL nije bila dostupna u verziji 1.0, koju smo koristili, bez hackovanja rutiranja stranica na serveru.

SVN klijenti:
Dio tima je koristio AnkhSVN, koji podrava integraciju u VS2008 i "pametan je" (zna koje datoteke su dio projekta, a koje ne treba commitati), dok je drugi dio tima koristio "univerzalni" klijent, TortoiseSVN, koji nema ovu opciju. Iz ovog razloga, esto su se deavali problemi sa SVNom.

JavaScript i MVC:
Koritenje JavaScript u okviru View-ova naruava MVC pattern. Iako ovo nije predstavljalo znaajan problem pri praktinom radu, eventualno daljnje unaprjeenje aplikacije bi moglo biti tee zbog nerazdvajanja modela, pogleda i kontrolera.

Strana | 13

Deployment Asp.net MVC na IIS 6 serveru (Windows server 2003)

esto postoji potreba da se uradi deployment ASP.net MVC projekta na IIS6 web server. IIS 6 web server dolazi uz Windows Server 2003 operativni sistem i veoma esto se nalazi na shared web hosting providerima. Asp.net mvc veoma dobro radi sa IIS7 webserverom koji dolazi uz Windows server 2008. Da bi se ASP.net mvc projekat deploy-ao na IIS6 web server potrebno je uraditi neke dodatne korake. IIS6 po defaultu ne podrava iste linkove, npr. www.memleak.com/novosti/decembar/27. ASP.net mvc rutiranje u potpunosti koristi iste linkove za odreivanje ruta i instanciranje odgovarajudeg kontrolera. Za URI www.memleak.com/novosti/decembar/27, na serveru ne moraju postojati direktoriji, novosti, decembar i ne mora postojati dokument sa nazivom 27. Web server koji podrava iste linkove, u sluaju da ne postoje direktoriji novosti i dokumenti, zahtjev za stranicu de poslati defaultnoj stranici, npr. www.memleak.com/Default.aspx, a kao parametar de poslati URL koji se treba procesirati (novosti/decembar/27). Asp.net MVC ruter koristedi regularne izraze de parsovati URL koji se treba procesirati, pronadi odgovarajudi kontroler i metodu koja se treba pokrenuti. Parsovati de parametre i proslijediti ih kontroleru. Ovaj proces se zove rutiranje zahtjeva. IIS6 web server po defaultu ne podrava iste linkove, to stvara probleme prilikom deployanja ASP.net MVC projekta na IIS 6. Postoji vie rjeenja za navedeni problem. Prvenstveno, najjednostavnije rjeenje je upgrade na Windows server 2008. Za na sluaj, to nije bilo mogude jer smo koristili besplatni shared hosting. Wildcard mapiranje u IIS postavkama se pravi wildcard mapiranje tako da se svi zahtjevi (ak i za statikim fajlovima) procesiraju koristedi asp.net skripte. Iako ovo rjeenje radi, postoje veliki utjecaji na performance. Takoer, u shared hosting okruenju ovo rijeenje nije mogude implementirati. Promjena ASP.net MVC rutiranja i deployment dodatnih dll fajlova Problem se rijeava tako to se sve rute promijene da u sebi eksplicitno pokazuju na aspx fajlove. Npr. Defaultni pattern rutiranja prelazi iz {controller}/{action}/{id} u {controller}.aspx/{action}/{id} Sve rute de sada eksplicitno pokazivati na aspx skriptu kontrolera kojem de se predavati parametri. Takoer, potrebno je i kopirati dll fajlove mvc framework-a prilikom deploymenta. Ovo rijeenje je primijenjeno za deployment asp.net mvc projekta na shared hosting providera.

Strana | 14

Software Design Patterns

Model-View-Controller (MVC) Architectural Pattern
Za razvoj nae aplikacije koriten je ASP.NET MVC. Ovaj framework u svom nazivu ved poblie odreuje da je u pitanju MVC arhitekturalni pattern. Kod MVC patterna, razlikujemo tri sloja aplikacije: model, koji se odnosi na podatke i domenski-specifine operacije nad istim, view, koji specificira korisniki interfejs, i controller, koji povezuje korisnike akcije dobivene preko view-a sa akcijama koje se odnose na model i podatke, i obratno. Kod ASP.NET MVC, u sprezi sa razvojnim okruenjem i Linq2SQL, mogude je generisati model na osnovu sheme baze podataka ili obratno, na osnovu dizajniranog modela mogude je generisati shemu baze podataka. Linq2SQL nam generie klase za pristup modelu skupa sa perzistencijom, tako da nismo morali puno raditi na modelu. Klase modela su C# klase. ASP.NET MVC podrava upotrebu dvije vrste view-ova: obini i partial view. Obini view predstavlja jednu cijelu stranicu (koja moe sadravati placeholdere za partial view-ove), dok partial view predstavlja jednu cjelinu na stranici, obino jednu web kontrolu koja se pojavljuje na vie stranica u istom obliku. Partial view je jako koristan u sprezi sa AJAX-om i najede smo ga za tu svrhu koristili. View-ovi se piu koristedi ASP.NET sintaksu za izgled, uz dodatak C# za logiku.

Kontroleri u ASP.NET MVC predstavljaju C# klase, jedna klasa po stranici, koje imaju metode razliitih imena, zavisno od funkcionalnosti koju elimo postidi. Tako moemo imati kontroler Profile za rad sa korisnikim profilima, koji ima metode Details za pregled, Edit za promjenu, Create za kreiranje i Delete za brisanje profila.

Strana | 15

Iterator Pattern
Koristili smo Iterator pattern, ugraen u C#, za iteriranje nad kolekcijama razliitih tipova. Jedan od primjera jeste kretanje kroz kolekciju objekata koju dohvatimo iz baze pomodu Linq2SQL:

Moemo primijetiti da se listanje objekata u kolekciji kb radi pomodu foreach petlje, koja koristi iteratore. Tipovi koji nasljeuju iz interfejsa IEnumerable mogu da koriste iteriranje.

Factory Method
Factory method pattern smo koristili da kreiramo objekte. Jedan primjer je kreiranje objekta tipa DevNetDataContext:

DevNetDataContext predstavlja model podataka u bazi. Koristedi factory pattern lako smo kreirali instancu modela. Ovaj primjer factory patterna je sastavni dio ASP.NET MVC framework-a.

Lazy Initialization
Za pristup podacima koristili smo Linq2SQL, koji koristi lijenu inicijalizaciju, tako da sve podatke koje koristimo on uitava tek kada ih prvi put upotrijebimo.

Object Pool
Object pool pattern dozvoljava nam da izbjegavamo skupe alokacije i brisanja resursa tako to reciklira objekte koji se vie ne koriste. Ovaj dio posla je ugraen u sam .NET framework, tako da se nismo morali posebno truditi da implementiramo Object pool pattern.

Null Object
Koristili smo ugraene .NET null vrijednosti za pojedine tipove, kao to su String.Null i drugi.

Strana | 16

JavaScript Frameworks
Koritene su dva popularna JavaScript framework-a: jQuery (JSON i jNice) Prototype
jQuery Framework jQuery je JavaScript framework koja pojednostavljuje pristup HTML objektima, podrava upravljanje dogaajima (event handling) za sve objekte ukljuujudi i sam dokument te posjeduje veliki broj dodatnih plugina. Framework sam i ne bi bio toliko znaajan da iza njega ne stoji veliki OpenSource community koji svakodnevno unaprijeuje i razvija nove plugine. Neki od jQuery plugina se mogu svrstati u kategorije: Ajax, Animation & Effects, DOM, Drag&Drop, Events, Forms, Layout, Media, Menus, Navigation, Tables, Widgets i mnogi drugi. Koristedi se ovim dodacima od statike Web stranice se moe napraviti izuzetno dinamiki glatka interaktivna stranica. Definisanje plugina na dokumentu se vri unutar head skecije i jednostavno je ukoliko se ne koriste drugi JavaScript Frameworks. JavaScript sintaksa je sljededa:
<script type="text/javascript" src="jquery.js"></script>

S obzirom da se svakodnevno objavljuju novije i stabilnije verzije kao i popravke za kompatibilnost novih verzija pretraivada, vremenski je zahtjevan posao vriti redovan update. Iz tog razloga Google je ponudio interfejs pomodu kojeg se mogu definisati najaktuelnije stabilne verzije svih popularnih frameworka vrlo jednostavno.

Sintaksa je sljededa: <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1"); </script>
Prva linija uitava Google JavaScript API dok druga inicira uitavanje jQuery -a. jQuery oficijelni Web Site takoer nudi mogudnost linkovanja biblioteke sa njihovog site -a:
<script src="http://code.jquery.com/jquery-latest.js"></script>

Strana | 17

Pogledajmo kako se pomodu jQuery uitava JSON sadraj preko nekog Web Servisa:
jQuery.getJSON(source, function(data){ jQuery.each(data.items, function(i,item){ //Obradi 'item' }); });

jQuery koristedi se AJAX-om preuzima JSON sadraj sa URL-a iz varijable 'source', a blok jQuery.each blok se izvrava za svaku stavku iz primljene JSON strukture. Na ovaj nain smo prikupili podatke o WorkExperience-u korisnika na njihovom profilu i WorkXP kartici. Pogledajmo kako se preuzimaju podaci preko Ajax jQuery klase:
var url = 'http://www.adresa.com/servis'; new Ajax.Request(url, { method: 'get', onSuccess: function(transport) { var data = transport.responseText; alert(data); } });

Ovaj primjer preuzima podatke sa web servisa i prikazuje poruku sa sadrajem tih podataka. jNice jNice je jQuery plugin za prilagoavanje izgleda formi vlastitim potrebama. Plugin funkcionie tako to nakon svoje deklaracije pretrai kompletan dokument po zadanom kriteriju (obino po imenu css klase) i sve pronaene objekte modificira po predefinisanom kriteriju. Problem se javlja ako je forma dodana (addChild) na dokument nakon uitavanja i izvravanja jNice skripte ili ukoliko forma nema podeenu odgovarajudu klasu. Problem se rjeava tako to se nakon kreiranja svih objekata, izvri odgoena JS funkcija koja de pretraiti sve HTML objekte i promijeniti klasu onima kojima elimo izmijeniti izgled. Nakon toga moemo inicijalizirati jNice plugin. U naem projektu, ovo je implementirano na dnu Site.Master-a.

Strana | 18

Prototype Framework

Drugi podjednako popularan i koristan framework koji ima veliki community i bogat skup biblioteka koje su bazirane na njemu. Prototype ima za glavni cilj olakati razvoj web aplikacija. Najpoznatija JavaScript biblioteka, Script.aculo.us je bazirana upravo na Prototype-u. Ostali pluginovi se, slino jQuery-u, mogu svrstati u kategorije Ajaxa, Animation & Effects, Charts, Data, DOM, Drag and Drop, Events, Extensions, Forms, Media, Menus, Tables, GUI, Utilities, Widgets, Overlays i mnogi drugi. Prototype se na dokument stavlja na sljededi nain:

<script type="text/javascript" src="/path/to/prototype.js"></script>

Pogledajmo kako koristedi Prototype selektovati i sakriti vie objekata sa dokumenta istovremeno:

$('item1', 'item2', 'item3').invoke('hide');

ScriptAculoUs ScriptAculoUs je Javascript biblioteka bazirana na Prototype JS Frameworku.

Figura Scriptaculous i Prototype Stack

On sadri sljedede komponente: Animation framework Drag & Drop Ajax controlls DOM Utilities

Strana | 19

Osnovne komponente Animation Framework-a se nalaze u klasi Effect koja sadri izmeu ostalog i Queues, Appear, BlindDown, BlindUp, DropOut, Fade, Fold, Grow, Move, Puff, Scale, ScrollTo, SlideUp, SlideDown, i mnoge druge efekte. Kako biste koristili bogat skup klasa ove biblioteke potrebno je da je deklariete u dokumentu na sljededi nain:

<script src="javascripts/prototype.js" type="text/javascript"></script> <script src="javascripts/scriptaculous.js" type="text/javascript"></script>

Nakon ove deklaracije scriptaculous.js poziva sve svoje datoteke i priprema ih za rad. Na izuzetno jednosatavn nain moemo triggerovati bilo koji od ovih efekata kao u primjeru ispod:
var obj = $('objekat'); Effect.Pulsate(obj);

Primjetite znak dolar ($). Ovo je isto zamjena za document.getElementById('objekat') uz dodatne sigurnosne uslove koji se nalaze unutar samog frameworka. Neznatno je sporiji od izvorne JavaScript funkcije. Primjer iznad uzima HTML istoimeni objekat i poziva efekat Pulsate koji de da uradi dva puta brzi FadeOut i FadeIn na tom objektu. Drugi primjer (koriten u naoj web aplikaciji) je postepeno otkrivanje eljenog objekta (u naem sluaju tipa 'DIV' sa nazivom 'divTagovi':
new Effect.BlindDown('divTagovi');

Potrebno je napomenuti da i jQuery i Prototype imaju zajedniku osobinu da koriste simbol $ kao funkciju koja na osnovu ID-a vrada [HTML Object] bilo kojeg tipa. Upravo ovo predstavlja njihov veliki konflikt i razlog za est glavobolju. Naime, da bi ova dva plugina mogla na istoj stranici funkcionisati istovremeno, potrebno j e razrijeiti konflikt na sljededi nain:
<script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); </script>

Najprije se pozove Prototype a nakon toga jQuery te jQuery-ova funkcija za NoConflict koja rjeava preklapanje klasa i funkcija izmeu Prototype-a i jQuery-a. Postoje i druge konvencije za rjeavanje konflikta ali se ova oficijelno preporuuje.

Strana | 20

Pored navedenih, vedina biblitoeka posjeduje i svoje kompresovane ekvivalente zbog breg downloada i manje potronje bandwidth-a.

Arhitektura veze izmeu Javascript-e, jQuery-a i Prototype-a

ASP.NET MVC i JavaScript

Jedna od mogudnosti koje DevNet prua jeste vizualni pregled iskustva pojedinih korisnika. Ova opcija se naziva Work eXperience i na vremenskoj liniji (TimeLine) prikazuje aktivnosti korisnika sa pojedinim tehnologijama. Sve kativnosti se uitavaju iz DB-a i njihov poredak se izraunava dinamiki. Na kartici WorkXP svaki korisnik dodaje tehnologiju i vremenski period u kome se bavio tom tehnologijom. Takoer tehnologiju moe povezati i sa unaprijed kreiranim projektima.

Poetna stranica projekta Strana | 21

DevNet koristi ASP.mvc kako bi se vrio unos i izmjena podataka o korisnikim iskustvima (User Work Experience). Koristedi se MVC View-om, Javascripti se preko Input polja prosljeuje ID korisnika. jQuery preko JSON-a prikuplja Work Experience za dati UserID za Model koji je prosljeen preko View-a koristedi definisani WebServis. Javascript tada generie eXepreinece TimeLine i za svaki Item iz JSON pretrage. U svakoj iteraciji proraunava opseg TimeLine -a i odreuje tanu poziciju 'div' HTML elementa. Ovaj element je apsolutno pozicioniran na dokumentu, a relativno u odnosu na TimeLine objekat. Ukoliko je za neki WorkExperience povezan i Projekat kojim se korisnik bavio, odgovarajudi link se prikazuje u sredinjem dijelu prozora skupa sa ostalim informacijama o eXperience-u. Scriptaculous animation framework ini kompletan pregled da bude smooth. Centralni objekat (div) se otvara koristedi BlindDown kao i lijevi floating-div sa listom angamana. Svaki angaman na timeline pulsira on click, itd.

Slika - Work eXperience

Strana | 22