· web viewova napredna tehnologija omogućuje razvoj od jednostavnih do vrlo složenih...

Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacijaMarijana Zekić-Sušac, Saša Mitrović

4. Razvoj MVC web aplikacija

Karakteristike i arhitektura MVC aplikacija

U 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 omogućuje razdvajanje programiranja same obrade podataka od programiranja sučelja i zaprimanja zahtjeva korisnika, čime se omogućava razvoj aplikacije u nekom od objektnih programskih jezika, a u isto vrijeme i kontrola nad HTML-om, CSS-om i JavaScript-om s pomoću kojih se izgrađuju Pogled i Kontroler. Ova napredna tehnologija omogućuje razvoj od jednostavnih do vrlo složenih aplikacija, budući da se model potpuno odvaja od sučelja 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 traži da obavi radnju i vrati mu rezultat. Rezultat radnje zatim Kontroler šalje u Pogled gdje ga korisnik može 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): Olakšano upravljanje razvojem složenih aplikacija zbog mogućnosti posebnog razvoja

svake od komponenti aplikacije, čime se olakšava organizacija posla razvoja aplikacije, a također i nadogradnja novim verzijama (ponekad je češće potrebno unaprijediti Poglede i Kontrolere, a Model ostaje isti)

Olakšano testiranje aplikacije (tzv. Test-Driven Development - TDD), jer je moguće odvojeno testirati pojedine komponente aplikacije i nije uvijek za testiranje potrebno koristiti web server (neke komponente se mogu testirati lokalno)

Olakšano procesiranje zahtjeva koje šalje korisnik, jer se za tu svrhu koristi Front Controller koji kroz jedan kontroler šalje sve zahtjeve korisnika.

1


Kada je dobro koristiti MVC arhitekturu? Kada aplikaciju razvija veći tim developer-a i kada dizajneri trebaju veći stupanj kontrole nad ponašanjem aplikacije.Nasuprot tome, ako se ne želi koristiti MVC, web aplikacije se mogu razviti i kao Web form aplikacije. One su pogodne za manje složene aplikacije koje razvija manji tim developer-a.

Kreiranje MVC web aplikacije u .NET okruženju

Prva aplikacija na kojoj će biti objašnjeno 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:- Moći unositi podatke o novim filmovima u nekoj videoteci- Moći mijenjati i brisati podatke o filomovima- Moći pregledavati podatke o filmovima po tipu ili nazivu filma

Podaci će se pohranjivati u bazu SQL server. Želimo napraviti sučelje aplikacije ovog oblika:

Slika 4.3. Pogled na sučelje za unos podataka o filmovima

2

http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4



Slika 4.3. Pogled na sučelje 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 Opis Svojstva Tipovi podatakaMovie Klasa za filmove ID (š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 sljedeće navedene kontrolere. Za svaki kontroler treba navesti radnje (eng. Actions) i dati opise.

Tablica 4.2: MVC Kontroleri za primjer

Kontroler Radnja(eng. Action)

Opis

MovieController SearchIndex (GET) Prikaz filmova u bazi i mogućnost pretraživanja po

3


CreateMovie (GET)DeleteMovie (GET)EditMovie (GET)DetailsMovie (GET)

naslovu i žanruDodavanje novog filmaBrisanje filmaEditiranje filmaDetalji o jednom izabranom filmu (sve upisane informacije o tom filmu)

Potrebno je stvoriti sljedeće navedene kontrolere. Svaki pogled je naveden zajedno s kontrolerom s kojim je povezan.

Tabelica 4.3: MVC Pogledi

Kontroler Pogled OpisMovieController Index Prikazat ć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

Details Omogućit će prikaz detaljnijih informacija o svakom filmuCreate Forma za unos novog filmaEdit Omogućava 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

4


Kao naziv aplikacije upisat ćemo „MVCMovie“, te izabrati odgovarajuću 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 prevođenje aplikacije i njezino pokretanje putem izbornika Debug / Start Debugging, ili tipkom F5, vidjet ćemo kako aplikacija izgleda na početku, prije nego smo unijeli bilo kakve izmjene.

Napomena: Postupak debuggiranja aplikacije uključuje dvije osnovne radnje:- Prevođenje aplikacije u tzv. Međujezik (eng. Intermediate Language) koji se prilikom

izvođenja prevodi u strojni, te tako omogućava- Izvođenje aplikacije na računaluUkoliko se prilikom debuggiranja otkriju greške u programskom kodu, alat će te greške prikazati u prozoru ErrorList i omogućiti korisniku njihovo ispravljanje, a neće pokrenuti aplikaciju ukoliko programer to izričito ne kaže.

5


Slika 4.5. Početni izgled aplikacije

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

Razvoj modela u MVC web aplikaciji

Novi model kreira se na način da se u desnom dijelu prozora mišem označi komponenta Models, na iskočnom izborniku izabere Add, zatim Class (vidi Sliku 4.6), te klasu nazovite Movie.

Slika 4.6. Dodavanje novog modela (nove klase u modelu)

6


Program će kreirati novu datoteku pod nazivom Movie.cs s programskim kodom u kojem su automatski upisani imenski prostori (naredbe Using na početku), 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 omogućiti korištenje klasa za rad s bazom podataka s pomoću Entity Framework (okvira). To je naredba:

Using System.Data.Entity;

Slika 4.7. Početni izvorni kod datoteke Movie.cs u kojoj se kreiraju klase modela

Unutar 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 Movie

S 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:

7


Slika 4.9. Definiranje klase MovieDBContext i svojstva za povezivanje s bazom

Tako će biti omogućeno 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 odgovarajućom 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 bazom

U datoteci Web.config potrebno je upisati ove naredbe:

8


Slika 4.11. Web.config

Ovdje vidimo da je automatski kreirana baza Movies.mdf u SQL server relacijskoj bazi.

U nastavku je prikazan dio Web.config datoteke s dodanim connection string elementom:

Razvoj kontrolera u MVC web aplikaciji

Kontroler upravlja zahtjevima korisnika u aplikaciji, i kreira se na način da se u prozoru Solution Explorer označi komponenta Controller, zatim desnim klikom miša u iskočnom izborniku izabere Add, Controller. Kontroleru za našu 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.)

9


Slika 4. 12. Postavke kontrolera

Nakon kreiranja novog kontrolera, alat će automatski kreirati ove komponente aplikacije:

MoviesController.cs datoteku u mapi Controllers (u Solution Exploreru) Mapu Movies u komponentama Views. Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, i Index.cshtml u mapi Views\

Movies.

Pod trećom točkom u nabrajanjima su navedeni pogledi, koji su kreirani u aplikaciji, a da bi ih se moglo vidjeti u sučelju, potrebno je debugirati aplikaciju, a zatim u pregledniku, u polju za adresu, iza standardno upisane adrese „localhost:/1234“ treba dodati “/Movies“ jer ova staza vodi do počene Index.cshtml datoteke koja se pojavljuje na ekranu.

10


Slika 4.13. Izgled Index.cshtml datoteke u sučelju preglednika

Primijetite 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 filma

11


Klikom na tipku „Create“ u sučelju korisnik će dodati novog korisnika u bazu na poslužitelju, a zatim ga program automatski vraća na stranicu Index.cshtml gdje može vidjeti unesene filmove.

Slika 4.15. Pogled na unesene filmove

Ako pogledamo izvorni kod koji je program automatski upisao u kontroler MoviesController.cs, tada je vidljiv ovaj kod:

public class MoviesController : Controller{ private MovieDBContext db = new MovieDBContext();

// // GET: /Movies/

public ActionResult Index() { return View(db.Movies.ToList()); }

Slika 4.16. Sadržaj MoviesController klase

Vidljivo je da je u klasi MoviesController napravljena klasa Controller koja nasljeđuje svojstva klase MoviesController (prva naredba), da je kreirana nova instanca db klase MovieDBContext, te da je kreirana metoda ActionResult Index () koja vraća pogled na instancu klase Movies koju dodaje u listu (s pomoću metode ToList()).

Prosljeđivanje podataka iz Kontrolera u Poglede

ASP .MVC ima mogućnost dvojakog prosljeđivanja podataka u Poglede:

a) Dinamički putem ViewBag objekta – tom objektu se proslijede podaci koji mogu biti različitih tipova i mijenjati tipove

12

Kreiranje klase MoviesController koja nasljeđuje svojstva od nadklase Controller

Kreiranje instance „db“ klase MoviesDBContext

Kreiranje metode Index() koja će vraćati pogled na listu s dodanom instancom db u klasu Movies


b) Prosljeđivanje čvrsto tipiziranih podataka (eng. strongly typed data) u poglede. – ovaj način je brži za kompajliranje programa, i omogućava dobivanje pomoći pri pisanju naredbi s pomoću IntelliSense alata.

Mi ćemo uglavnom koristiti ovaj drugi način prosljeđivanja podataka i objekata u Poglede.

Primjer metode u kojoj se u Pogled prosljeđuje 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 prosljeđuje varijabla „id“ koja je tipa „int“ (cijeli broj), koji omogućava da se pronađe film koji ima taj „id“. Ako je takav film pronađen, u pogled se prosljeđuje instanca klase Movie pod nazivom „movie“ (uočite da se instance uvijek pišu malim početnim slovom, a klase velikim početnim slovom).

Ako se u datoteku na gornjoj slici na vrhu doda naredba koja počinje s ključnom riječi „@model“, tada se može specificirati tip objekta koji neki Pogled može očekivati. Npr. ako se na vrh datoteke Details.cshtml umetne ova naredba:

@model MvcMovie.Models.Movie

tada će @model omogućiti pristup filmu kojeg je Kontroler proslijedio u Pogled koristeći 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 sadrži ključnu riječ „@model“ na vrh Index.cshtml datoteke, a naredba je ova:

@model IEnumerable<MvcMovie.Models.Movie>

Na taj način, Kontroler će proslijediti Pogledu neki Model objekt koji je strogo tipiziran. Na primjer, s pomoću foreach petlje, ti se objekti mogu dohvatiti na sljedeći način u Index.cshtml datoteci:

13


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

Slika 4.19.

Na slici 4.19, „modelItem“ predstavlja svaki objekt u listi Movies. Budući 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 početak petlje: “ @foreach (var item in Model)“Tumači kao „@foreach (movie in Model)“.

Taj se način prosljeđivanja objekata zove stablo lamda izraza ili „lambda expression tree“. Više o lambda izrazima u OOP oni koji žele programirati napredno mogu vidjeti na: https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions

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:

14

https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions

https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions


Slika 4.20. Izgled Index.cshtml datoteke za ispis filmova na ekranu u obliku tablice

Vidljivo je da kod pisanja narebi IntelliSense sugerira svojstva koja se mogu upisati za svaki objekt klase Movie.

Na taj način kontroler upravlja s pogledima i podacima iz baze.

15


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 izrađuje s pomoću 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<MvcMovie.Models.Movie>

koja određuje da će se kao elementi modela pojavljivati enumeracijeili

@model MVCMovie.Models.Movie

Koja određuje da će se kao elementi modela pojavljivati instance klase Movie.

Daljnje naredbe su uglavnom naredbe skriptnih jezika koje određuju 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 našoj aplikaciji)

16


Uočite da nismo obrisali postojeću metodu Index() u kontroleru, nego je ona ostala, samo smo dopisali novu metodu pod nazivom Index1() i u njoj upisali naredbu koja vraća pogled: Return View();. To znači da će se kao rezultat pozivanja metode Index1() pozvati novi pogled kojem se neće proslijediti nikakve vrijednosti.

Sad bismo trebali dodati pogled metodi Index1() u kontroleru. To možemo tako da pokazivačem miša dođemo na naziv metode Index1() i desnom tipkom miša aktiviramo u iskočnom izborniku naredbu „Add View“. U prozoru koji će se pojaviti treba upisati naziv pogleda, klasu na koju se veže, te izabrati željeni predložak (template). Upišite 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 predložak glavni predložak (master page) aplikacije.Nakon kreiranja pogleda program prikazuje izvorni kod datoteke pogleda Index1.cshtml koja izgleda u početku ovako:

Slika 4.23. Izvorni kod pogleda Index1.cshtml

17


Uočimo na vrhu pogleda naredbu koja počinje s „@model“ koja određuje da će se ovdje koristiti strogo definirani tip objekta Movie iz Modela.Sve ono što želimo da korisnik vidi na samoj stranici stranici piše se unutar html naredbi. Na slici je prikazana html oznaka <h2> koja označava da će se tekst prikazati veličinom h2 (velikim slovima). Ovdje možemo izmijeniti tekst na toj stranici na način da umjesto „Index1“ o oznakama između <h2> i </h2> upišemo nešto drugo, npr. „Dobrodošli na probni pogled.“ Ovaj tekst upisat ćemo kao na donjoj slici:

Slika 4.24. Početni izgled izvornog koda pogleda

Kada nakon ove izmjene pokrenemo Debug, i u pregledniku u prostoru za adresu iza „localhost:58449“ upišemo „/Movie/Index1“, prikazat će se ovaj izgled stranice:

Slika 4.25. Izgled novog kreiranog pogleda Index1

S pomoću html naredbi moguće je urediti poglede tako da sadrže obrasce za unos podataka, tablice, i druge načine 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 sadrži obrazac za unos podataka:

18


Slika 4.26. Primjer pogleda za unos podataka

Više o uređivanju pogleda bit će objašnjeno u poglavlju o HTML jeziku i CSS-u.

Literatura:

1. 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]

2. Microsoft, ASP.NET MVC Overview, http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview, , [09.10.2013]

3. 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.]

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.]

19

http://cupsofcocoa.com/2011/08/13/design-patterns-model-view-controller/

http://www.umsl.edu/~sauterv/analysis/488_f01_papers/quillin.htm

http://www.umsl.edu/~sauterv/analysis/488_f01_papers/quillin.htm#III.%20Object-Oriented%20Analysis%20vs.%20Traditional%20Methods

http://www.umsl.edu/~sauterv/analysis/488_f01_papers/quillin.htm#III.%20Object-Oriented%20Analysis%20vs.%20Traditional%20Methods

http://www.umsl.edu/~sauterv/analysis/488_f01_papers/quillin.htm#II.%20Tools%20and%20approaches%20involved%20in%20OO%20Analysis%20and%20OO%20Design

http://www.umsl.edu/~sauterv/analysis/488_f01_papers/quillin.htm#I.%20What

http://pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m1-intro&mode=live&clip=0&course=mvc4-building

http://pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m1-intro&mode=live&clip=0&course=mvc4-building

http://www.codeproject.com/Articles/486161/Creating-a-simple-application-using-MVC-4-0

http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview



· web viewova napredna tehnologija omogućuje razvoj od jednostavnih do vrlo složenih...

Documents