Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacijaMarijana Zeki-Suac, Saa Mitrovi

4. Razvoj MVC web aplikacija

Karakteristike i arhitektura MVC aplikacijaU poglavlju 2 spomenuta je MVC arhitektura web aplikacija i opisane su funkcije svakog od dijela Model-View-Controller. Ukratko, MVC arhitektura dijeli aplikaciju u tri osnovne komponente Model, Pogled (View) i Kontroler (Controller). Takva podjela omoguuje razdvajanje programiranja same obrade podataka od programiranja suelja i zaprimanja zahtjeva korisnika, ime se omoguava razvoj aplikacije u nekom od objektnih programskih jezika, a u isto vrijeme i kontrola nad HTML-om, CSS-om i JavaScript-om s pomou kojih se izgrauju Pogled i Kontroler. Ova napredna tehnologija omoguuje razvoj od jednostavnih do vrlo sloenih aplikacija, budui da se model potpuno odvaja od suelja i kontrolera, koji se mogu razvijati zasebno, a zatim spojiti u jednu aplikaciju.

Da se podsjetimo, MVC aplikacija komunicira s korisnikom putem Pogleda (eng. View), gdje korisnik unosom zahtjeva alje naredbe Kontroleru (eng. Controller), dok Kontroler od Modela trai da obavi radnju i vrati mu rezultat. Rezultat radnje zatim Kontroler alje u Pogled gdje ga korisnik moe vidjeti. Ovaj je postupak i prikazan na Slici 4.1.

Slika 4.1. MVC okvir (adaptirano prema http://cupsofcocoa.files.wordpress.com/2011/08/mvc-diagram1.png, 2011)Neke od karakteristika (ujedno i prednosti) MVC aplikacija su (Microsoft, 2013): Olakano upravljanje razvojem sloenih aplikacija zbog mogunosti posebnog razvoja svake od komponenti aplikacije, ime se olakava organizacija posla razvoja aplikacije, a takoer i nadogradnja novim verzijama (ponekad je ee potrebno unaprijediti Poglede i Kontrolere, a Model ostaje isti) Olakano testiranje aplikacije (tzv. Test-Driven Development - TDD), jer je mogue odvojeno testirati pojedine komponente aplikacije i nije uvijek za testiranje potrebno koristiti web server (neke komponente se mogu testirati lokalno) Olakano procesiranje zahtjeva koje alje korisnik, jer se za tu svrhu koristi Front Controller koji kroz jedan kontroler alje sve zahtjeve korisnika.

Kada je dobro koristiti MVC arhitekturu? Kada aplikaciju razvija vei tim developer-a i kada dizajneri trebaju vei stupanj kontrole nad ponaanjem aplikacije.Nasuprot tome, ako se ne eli koristiti MVC, web aplikacije se mogu razviti i kao Web form aplikacije. One su pogodne za manje sloene aplikacije koje razvija manji tim developer-a.

Kreiranje MVC web aplikacije u .NET okruenju

Prva aplikacija na kojoj e biti objanjeno kreiranje MVC web aplikacija bit e nazvana MVCMovie. Primjer je preuzet od: Anderson, R., Introduction to ASP .NET MVC 4, Microsoft, 15.08.2012, http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4, [25.10.2013]

Cilj nam je u toj aplikaciji: Moi unositi podatke o novim filmovima u nekoj videoteci Moi mijenjati i brisati podatke o filomovima Moi pregledavati podatke o filmovima po tipu ili nazivu filmaPodaci e se pohranjivati u bazu SQL server. elimo napraviti suelje aplikacije ovog oblika:

Slika 4.3. Pogled na suelje za unos podataka o filmovima

Slika 4.3. Pogled na suelje za pregled i editiranje filmova

Za model e biti potrebna klasa: Movie, koja e imati svojstva: Title (naslov filma), ReleaseDate (datum izdavanja), Genre (anr filma) i Price (cijena).

Kod planiranja aplikacije, za svaku klasu modela treba navesti svojstva i dati opis navedene klase modela.Tablica 4.1: MVC Modeli za primjer Klase Modela OpisSvojstvaTipovi podataka

MovieKlasa za filmoveID (ifra filma)Title (naslov filma) ReleaseDate (datum izdavanja) Genre (anr filma)Price (cijena).

Cijeli broj (int)Tekst (String)Datum(DateTime)Tekst (String)Decimalni broj (Decimal)

Potrebno je stvoriti sljedee navedene kontrolere. Za svaki kontroler treba navesti radnje (eng. Actions) i dati opise.Tablica 4.2: MVC Kontroleri za primjer KontrolerRadnja(eng. Action)Opis

MovieControllerSearchIndex (GET)

CreateMovie (GET)DeleteMovie (GET)EditMovie (GET)DetailsMovie (GET)Prikaz filmova u bazi i mogunost pretraivanja po naslovu i anruDodavanje novog filmaBrisanje filmaEditiranje filmaDetalji o jednom izabranom filmu (sve upisane informacije o tom filmu)

Potrebno je stvoriti sljedee navedene kontrolere. Svaki pogled je naveden zajedno s kontrolerom s kojim je povezan.Tabelica 4.3: MVC PoglediKontrolerPogledOpis

MovieControllerIndexPrikazat e sve filmove u bazi u obliku tablice tako da je na vrhu upisano zaglavlje tablice, a zatim po jedan slog (film) iz tablice u svakom retku, te tipke za editiranje, dodavanje i brisanje filmova

DetailsOmoguit e prikaz detaljnijih informacija o svakom filmu

CreateForma za unos novog filma

EditOmoguava editiranje sloga za jedan film i spremanje izmjena u bazu

Za kreiranje nove aplikacije potrebno je aktivirati alat Microsof Visual Studio for Web (Express) 2012 i aktivirati naredbu File / New Project, te izabrati za tip aplikacije Web, zatim u desnom prozoru ASP .NET MVC 4.0 web application (vidi Sliku 4.3).

Slika 4.3. Otvaranje nove MVC 4.0 web aplikacije

Kao naziv aplikacije upisat emo MVCMovie, te izabrati odgovarajuu lokaciju. Nakon to alat otvori novi projekt, na ekranu e se u desnom dijelu prikazati prozor Solution Explorer koji prikazuje dijelove aplikacije kao na Slici 4.4.

Slika 4.4. Komponente aplikacije (Models, Controllers, Views) u prozoru Solution Explorer

Ako se aplikacija pohrani (tipkom File / Save All) i zatim aktivira prevoenje aplikacije i njezino pokretanje putem izbornika Debug / Start Debugging, ili tipkom F5, vidjet emo kako aplikacija izgleda na poetku, prije nego smo unijeli bilo kakve izmjene.

Napomena: Postupak debuggiranja aplikacije ukljuuje dvije osnovne radnje: Prevoenje aplikacije u tzv. Meujezik (eng. Intermediate Language) koji se prilikom izvoenja prevodi u strojni, te tako omoguava Izvoenje aplikacije na raunaluUkoliko se prilikom debuggiranja otkriju greke u programskom kodu, alat e te greke prikazati u prozoru ErrorList i omoguiti korisniku njihovo ispravljanje, a nee pokrenuti aplikaciju ukoliko programer to izriito ne kae.

Slika 4.5. Poetni izgled aplikacije

U aplikaciji emo najprije napraviti dio Model, zatim Controller, te View.

Razvoj modela u MVC web aplikacijiNovi model kreira se na nain da se u desnom dijelu prozora miem oznai komponenta Models, na iskonom izborniku izabere Add, zatim Class (vidi Sliku 4.6), te klasu nazovite Movie.

Slika 4.6. Dodavanje novog modela (nove klase u modelu)Program e kreirati novu datoteku pod nazivom Movie.cs s programskim kodom u kojem su automatski upisani imenski prostori (naredbe Using na poetku), te je kreirana klasa pod nazivom Movie kao na donjoj slici. Ispod zadnjeg imenskog prostora dodajte novi red i u njega umetnite naredbu koja e nam omoguiti koritenje klasa za rad s bazom podataka s pomou Entity Framework (okvira). To je naredba: Using System.Data.Entity;

Slika 4.7. Poetni izvorni kod datoteke Movie.cs u kojoj se kreiraju klase modelaUnutar klase Movie potrebno je upisati svojstva i metode klase koja smo definirali u razvojnom planu programa. Nakon upisa klasa izgleda kao na donjoj slici:public class Movie { public int ID { get; set; } public string Title { get; set; } public DateTime ReleaseDate { get; set; } public string Genre { get; set; } public decimal Price { get; set; }}Slika 4.8. Upisana svojstva klase MovieS obzirom da e se koristiti Entity Framework za povezivanje aplikacije s bazom podataka, potrebno je jo kreirati i klasu MovieDBContext koja e definirati kontekst za upis podataka u bazu, a izgleda ovako:public class MovieDBContext : DbContext { public DbSet Movies { get; set; } }Slika 4.9. Definiranje klase MovieDBContext za povezivanje s bazom

Tako e biti omogueno da svako svojstvo klase Movie koje je definirano u klasi bude automatski predstavljeno jednim poljem (odnosno stupcem) u tablici baze podataka, a svaki novi film koji se unese e biti u bazi pohranjen u jednom retku (slogu) tablice.Povezivanje aplikacije s bazom podataka (ConnectionString)Da bi se aplikacija povezala s odgovarajuom bazom podataka, potrebno je u aplikaciji upisati naredbu ConnectionString koja definira naziv baze podataka i stazu do baze (path). Ta se naredba nalazi u datoteci Web.config u prozoru Solution Explorer.

Slika 4.10. Otvaranje Web.config datoteke za povezivanje aplikacije s bazomU datoteci Web.config potrebno je upisati ove naredbe:

Slika 4.11. Web.configOvdje vidimo da je automatski kreirana baza Movies.mdf u SQL server relacijskoj bazi.

Razvoj kontrolera u MVC web aplikacijiKontroler upravlja zahtjevima korisnika u aplikaciji, i kreira se na nain da se u prozoru Solution Explorer oznai komponenta Controller, zatim desnim klikom mia u iskonom izborniku izabere Add, Controller. Kontroleru za nau aplikaciju dat emo naziv MoviesController. Podaci koje treba upisati za kontroler prilikom kreiranja su: Controller name:MoviesController. Template:MVC Controller with read/write actions and views, using Entity Framework. Model class:Movie (MvcMovie.Models). Data context class:MovieDBContext (MvcMovie.Models). Views:Razor (CSHTML). (The default.)

Slika 4. 12. Postavke kontroleraNakon kreiranja novog kontrolera, alat e automatski kreirati ove komponente aplikacije: MoviesController.csdatoteku u mapi Controllers(u Solution Exploreru) MapuMoviesu komponentama Views. Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, iIndex.cshtmlu mapi Views\Movies.

Pod treom tokom u nabrajanjima su navedeni pogledi, koji su kreirani u aplikaciji, a da bi ih se moglo vidjeti u suelju, potrebno je debugirati aplikaciju, a zatim u pregledniku, u polju za adresu, iza standardno upisane adrese localhost:/1234 treba dodati /Movie jer ova staza vodi do poene Index.cshtml datoteke koja se pojavljuje na ekranu.

Slika 4.13. Izgled Index.cshtml datoteke u suelju preglednikaPrimijetite da se na gornjoj slici nalazi link Create New, a kada se pokrene, dobiva se forma kao na donjoj slici:

Slika 4.14. Izgled forme za dodavanje novog filmaKlikom na tipku Create u suelju korisnik e dodati novog korisnika u bazu na posluitelju, a zatim ga program automatski vraa na stranicu Index.cshtml gdje moe vidjeti unesene filmove.

Slika 4.15. Pogled na unesene filmoveAko pogledamo izvorni kod koji je program automatski upisao u kontroler MoviesController.cs, tada je vidljiv ovaj kod:Kreiranje klase MoviesController koja nasljeuje svojstva od nadklase Controller

public class MoviesController : Controller{ private MovieDBContext db = new MovieDBContext();Kreiranje instance db klase MoviesDBContext

// // GET: /Movies/

public ActionResult Index()Kreiranje metode Index() koja e vraati pogled na listu s dodanom instancom db u klasu Movies

{ return View(db.Movies.ToList()); }Slika 4.16. Sadraj MoviesController klaseVidljivo je da je u klasi MoviesController napravljena klasa Controller koja nasljeuje svojstva klase MoviesController (prva naredba), da je kreirana nova instanca db klase MovieDBContext, te da je kreirana metoda ActionResult Index () koja vraa pogled na instancu klase Movies koju dodaje u listu (s pomou metode ToList()).

Prosljeivanje podataka iz Kontrolera u PogledeASP .MVC ima mogunost dvojakog prosljeivanja podataka u Poglede:a) Dinamiki putem ViewBag objekta tom objektu se proslijede podaci koji mogu biti razliitih tipova i mijenjati tipoveb) Prosljeivanje vrsto tipiziranih podataka (eng. strongly typed data) u poglede. ovaj nain je bri za kompajliranje programa, i omoguava dobivanje pomoi pri pisanju naredbi s pomou IntelliSense alata. Mi emo uglavnom koristiti ovaj drugi nain prosljeivanja podataka i objekata u Poglede.Primjer metode u kojoj se u Pogled prosljeuje neki podatak:public ActionResult Details(int id = 0){ Movie movie = db.Movies.Find(id); if (movie == null) { return HttpNotFound(); } return View(movie);}Slika 4.17. Ovdje se metodi Details() u zagradi prosljeuje varijabla id koja je tipa int (cijeli broj), koji omoguava da se pronae film koji ima taj id. Ako je takav film pronaen, u pogled se prosljeuje instanca klase Movie pod nazivom movie (uoite da se instance uvijek piu malim poetnim slovom, a klase velikim poetnim slovom).Ako se u datoteku na gornjoj slici na vrhu doda naredba koja poinje s kljunom rijei @model, tada se moe specificirati tip objekta koji neki Pogled moe oekivati. Npr. ako se na vrh datoteke Details.cshtmlumetne ova naredba: @model MvcMovie.Models.Movie

tada e @modelomoguiti pristup filmu kojeg je Kontroler proslijedio u Pogled koristei Model objekt koji je strogo tipiziran.

Ako u Kontroleru pod nazivom MoviesController.cs pogledamo metodu Index(), vidjet emo kako se u njoj kreira lista objekata pod nazivom Movies i u nju se dodaje instanca pod nazivom db.public ActionResult Index(){ return View(db.Movies.ToList());}Slika 4.18. Metoda Index() u kojoj se instanca klase Movie dodaje u listu i prikazuje u Pogledu

Da bi se kreirala lista objekata tipa Movies, alat je automatski dodao naredbu koja sadri kljunu rije @model na vrh Index.cshtml datoteke, a naredba je ova:

@model IEnumerable

Na taj nain, Kontroler e proslijediti Pogledu neki Model objekt koji je strogo tipiziran. Na primjer, s pomou foreach petlje, ti se objekti mogu dohvatiti na sljedei nain u Index.cshtmldatoteci:

@foreach (var item in Model) { @Html.DisplayFor(modelItem => item.Title) @Html.DisplayFor(modelItem => item.ReleaseDate) @Html.DisplayFor(modelItem => item.Genre) @Html.DisplayFor(modelItem => item.Price) @Html.DisplayFor(modelItem => item.Rating) @Html.ActionLink("Edit", "Edit", new { id=item.ID }) | @Html.ActionLink("Details", "Details", { id=item.ID }) | @Html.ActionLink("Delete", "Delete", { id=item.ID }) }Slika 4.19.

Na slici 4.19, modelItem predstavlja svaki objekt u listi Movies. Budui da je na vrhu datoteke specificirano da je @model tipa liste u kojoj su objekti tipa Movie, tada je svaki item objekt u petlji foreach tipiziran kao Movie (jer se tada poetak petlje: @foreach (var item in Model)Tumai kao @foreach (movie in Model).

Ako se filmovi ele ispisati u obliku tablice, tako da je na vrhu redak zaglavlja koji opisuje to se nalazi u svakom stupcu tablice, a zatim se u petlji foreach prikazuju redom podaci za svaki slog tj. svaki film u bazi, tada bi cijela Index.cshtml datoteka izgledala ovako:

Slika 4.20. Izgled Index.cshtml datoteke za ispis filmova na ekranu u obliku tabliceVidljivo je da kod pisanja narebi IntelliSense sugerira svojstva koja se mogu upisati za svaki objekt klase Movie. Na taj nain kontroler upravlja s pogledima i podacima iz baze.

Razvoj pogleda u MVC web aplikaciji

Pogled (View) kod web aplikacije je zapravo izgled same web stranice na kojoj e biti prikazan output korisniku ili ulazna maska za unos podataka. Pogled se izrauje s pomou skriptnih jezika HTML, CSS, JavaScript i dr., a u datoteci se mogu nalaziti i naredbe objektnog programskog jezika koje definiraju tip objekta koji e se pojavljivati u pogledu, npr.@model IEnumerable

koja odreuje da e se kao elementi modela pojavljivati enumeracijeili@model MVCMovie.Models.Movie

Koja odreuje da e se kao elementi modela pojavljivati instance klase Movie.

Daljnje naredbe su uglavnom naredbe skriptnih jezika koje odreuju izgled same web stranice i to e se na njoj prikazivati iz samog modela.

Da bi se neki pogled mogao povezati s aplikacijom, potrebno je kreirati najprije kontroler za pozivanje tog pogleda (u kontroleru se kreira metoda koja e pozivati taj pogled), a tek zatim se na temelju metode u kontrolera kreira pogled.

Primjer kreiranja pogleda

1. Najprije emo u kontroleru MovieController kreirati novu metodu, npr. Index1(), koja e pozivati pogled. U kontroler MovieController potrebno je upisati ove nove naredbe:

Slika 4.21. Kreiranje nove metode Index1() u kontroleru kako bismo dodali novi pogled (novu web stranicu u naoj aplikaciji)Uoite da nismo obrisali postojeu metodu Index() u kontroleru, nego je ona ostala, samo smo dopisali novu metodu pod nazivom Index1() i u njoj upisali naredbu koja vraa pogled: Return View();. To znai da e se kao rezultat pozivanja metode Index1() pozvati novi pogled kojem se nee proslijediti nikakve vrijednosti.

Sad bismo trebali dodati pogled metodi Index1() u kontroleru. To moemo tako da pokazivaem mia doemo na naziv metode Index1() i desnom tipkom mia aktiviramo u iskonom izborniku naredbu Add View. U prozoru koji e se pojaviti treba upisati naziv pogleda, klasu na koju se vee, te izabrati eljeni predloak (template). Upiite postavke kao na donjoj slici:

Slika 4.22. Postavke novog pogleda

Novi pogled nazvan je Index1, temeljit e se na klasi Movie (iz Modela), i koristit e kao predloak glavni predloak (master page) aplikacije.Nakon kreiranja pogleda program prikazuje izvorni kod datoteke pogleda Index1.cshtml koja izgleda u poetku ovako:

Slika 4.23. Izvorni kod pogleda Index1.cshtml

Uoimo na vrhu pogleda naredbu koja poinje s @model koja odreuje da e se ovdje koristiti strogo definirani tip objekta Movie iz Modela.Sve ono to elimo da korisnik vidi na samoj stranici stranici pie se unutar html naredbi. Na slici je prikazana html oznaka koja oznaava da e se tekst prikazati veliinom h2 (velikim slovima). Ovdje moemo izmijeniti tekst na toj stranici na nain da umjesto Index1 o oznakama izmeu i upiemo neto drugo, npr. Dobrodoli na probni pogled. Ovaj tekst upisat emo kao na donjoj slici:

Slika 4.24. Poetni izgled izvornog koda pogleda

Kada nakon ove izmjene pokrenemo Debug, i u pregledniku u prostoru za adresu iza localhost:58449 upiemo /Movie/Index1, prikazat e se ovaj izgled stranice:

Slika 4.25. Izgled novog kreiranog pogleda Index1

S pomou html naredbi mogue je urediti poglede tako da sadre obrasce za unos podataka, tablice, i druge naine prikaza informacija korisniku. Upamtite da prije kreiranja pogleda treba kreirati u kontroleru metodu koja e pozivati taj pogled i na temelju te metode dodati novi pogled.Primjer pogleda koji sadri obrazac za unos podataka:

Slika 4.26. Primjer pogleda za unos podataka

Vie o ureivanju pogleda bit e objanjeno u poglavlju o HTML jeziku i CSS-u.

Literatura:

1. Microsoft, ASP.NET MVC Overview, http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview, , [09.10.2013]2. Codeproject, Creating a simple application using MVC 4.0, http://www.codeproject.com/Articles/486161/Creating-a-simple-application-using-MVC-4-0, [20.10.2013.]3. 4. Pluralsight, Building Applications with ASP.NET MVC 4, http://pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m1-intro&mode=live&clip=0&course=mvc4-building, 2012. 5. Quillin, M.J., Object Oriented Analysis and Design:What is it?How Does it Work?Why is it used?, http://www.umsl.edu/~sauterv/analysis/488_f01_papers/quillin.htm, 2001, [05.10.2013]6. Feifan Zhou, Design Patterns: Model-View-Controller, http://cupsofcocoa.com/2011/08/13/design-patterns-model-view-controller/ , 2011, [8.10.2013.] 1