Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

Razvoj ASP.NET MVC Movie Web aplikacije - 2

UvodU ovoj vježbi obraditi će se kreiranje druge tablice, Code First migracije u Entity Framework-u i promjena bootstrap teme.

Vježba 1: Kreiranje druge tablice, stvaranje veze i omogućavanje migracija

Zadatak 1: Kreiranje druge tablice1. U Solution Exploreru , desnim gumbom miša kliknite na Models mapu, označite Add i zatim

Class:

1

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

Slika 1: Dodavanje klase u MVC projekt

2. Klasu nazovite "Actor".3. Dodajte sljedećih pet svojstava u Actor klasu:

4. Izmijenite i Movie klasu na sljedeći način:

2

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

5. Actor klasa će predstavljati glumce u bazi podataka. Svaka instanca objekta Actor će odgovarati za redu u tablici baze podataka, a svaki objekt klase Actor će mapirati stupac na tablici. U istoj datoteci i klasi MovieDBContext dodajte i Actor klasu:

Zadatak 1: Omogućavanje migracija

1. U alatu za upravljanje bazama(Database Explorer, Server Explorer ili SQL Server Object Explorer), na MovieDBContext kliknite desnim klikom miša i zatim na Delete za brisanje Movie baze.

3

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

Slika 2: Brisanje baze

2. U Solution Explorer-u desnim klikom i označavanjem Delete-a obrišite Movies.mdf datoteku.

Slika 3: Brisanje baze

4

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

3. Buildajte prije sljedećeg koraka kako bi bili sigurni da nemate grešaka.4. U Tools meni-u, kliknite na NuGet Package Manager te zatim Package Manager Console.

5. U Package Manager Console-i u prozoru PM> upišite: Enable-Migrations -ContextTypeName MVCMovieWebApp.Models.MovieDBContext

Obavezno pripazite na naziv ContextTypeName-a!! (pogledajte sliku)

5

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

6

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

6. Naredba Enable-Migrations (prikazana na slici iznad) kreira Configuration.cs datoteku u novoj mapi naziva Migrations.

7. Otvorite Configuration.cs datoteku i zamijenite Seed metodu u Configuration.cs datoteci sa sljedećim kodom:

7

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

8

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

8. Buildajte prije sljedećeg koraka.9. U Package Manager Console prozoru, upišite naredbu (bez navodnika) "add-migration Initial" za

kreiranje inicijalne migracije. Naziv "Initial"je proizvoljan i koristi se za kreiranu migraciju.

10. Code First Migrations kreiraju dodatnu klasu u Migrations mapi (s imenom {DatumVrijeme}_Initial.cs ), a ta klasa sadrži kod koji kreira bazu podataka. Ime migracije sadrži datum i vrijeme kako bi se lakše posložile datoteke u mapi. Proučite {DatumVrijeme}_Initial.cs datoteku.

11. U Package Manager Console-i, upišite narredbu (bez navodnika) "update-database" kako bi kreirali bazu i pokrenuli Seed metodu koja u kreiranu bazu umeće podatke.

9

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

Vježba 2: Pristupanje modelu iz kontrolera

Zadatak 1: Kreiranje ActorController klase i pisanje koda koji dohvaća glumce i prikazuje ih u Internet pregledniku pomoću pogleda

1. Buildajte prije sljedećeg koraka.2. Desnim gumbom miša kliknite na Controllers mapu i kreirajte ActorController kontroler.

Sljedeće postavke neće biti prikazane dok god ne buildate aplikaciju. Odaberite sljedeće opcije: Controller name: ActorController. Template: MVC Controller with read/write actions and views, using Entity Framework. Model class: Actor (MvcMovie.Models). Data context class: MovieDBContext (MvcMovie.Models). Views: Razor (CSHTML).

3. Kliknite Add. Visual Studio Express kreira sljedeće datoteke i mape: Datoteku ActorController.cs u Controllers mapi. Mapu Actor u Views mapi. Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml i Index.cshtml datoteke u Views\

Actor mapi.

ASP.NET MVC automatski je kreirao CRUD (Create, Read, Update, and Delete) metode i poglede za vas. Sada imate u potpunosti funkcionalnu web aplikaciju u kojoj možete kreirati, prikazati, uređivati i brisati filmove.

Pokrenite aplikaciju i Actor kontroler dodajući u URLu /Actor. Dodajte par filmova i proučite Edit, Details i Delete linkove.

Vježba 3: Mijenjanje postojeće baze

Zadatak 1: Dodavanje polja Rating u Movie Model

1. Dodajte polje Rating u postojeću Movie klasu:

2. Movie klasa sada izgleda:

10

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

4. Buildajte prije sljedećeg koraka.5. Nakon što je ažurirana Model klasa, trebate ažurirati i \Views\Movies\Index.cshtml i \Views\

Movies\Create.cshtml poglede kako bi prikazali novo Rating polje.6. Index:

11

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

12

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

7. Create:

8. Buildajte i pokrenite aplikaciju.9. Vidjeti ćete sljedeće greške:

13

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

10. Kako bi se izbjegle potrebno je koristiti mogracije.11. Ažurirajte Seed metodu (u Migrations\Configuration.cs datoteci) tako što ćete dodati Rating

polje:

12. Buildajte i zatim otvorite Package Manager Console prozor i upišite sljećeu naredbu:add-migration DodanoPoljeRating

13. Sljedeći kod se kreira:

14

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

14. Buildajte i u Package Manager Console prozoru i upišite naredbu (bez navodnika): "update-database"

15. Pokrenite aplikaciju.

Vježba 4: Kreiranje djelomičnog pogleda za Actor model

1. U Movie pogledu Details potrebno je za odabrani film prikazati sve glumce koji su u njemu.2. U MovieController datoteci, na kraj klase, ali unutar nje, dodajte sljedeću metodu:

3. Kreirajte djelomični pogled naziva _MovieActors.cshtml u Views\Movie mapi sa sljedećim kodom:

15

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

4. Za prikazivanje djelomičnog pogleda u Views\Movie\Details.cshtml-u potrebno je dodati sljedeću naredbu:

16

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

Vježba 4: Bootstrap teme

Bootstrap teme se mogu na lagan način promijeniti. Na stranici https://bootswatch.com/ odabarete temu koja vam odgovara i dodate je u vas MVC Movie projekt.

1. U solution exploreru\Content mapi preimenujte datoteku bootstrap.css u bootstrap_old.css:

2. Dodajte novu CSS datoteku desnim klikom na Contet\Add\Style Sheet:

3. Novu datoteku nazovite bootstrap

17

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

4. Zatim odite na stranicu bootswatch, odaberite temu i skinite njezin CSS:

5. Preuzeti CSS kod zalijepite u vašu novokreiranu datoteku bootstrap.6. Pokrenite aplikaciju. Nakon što je aplikacija pokrenuta, možda ćete morati osvježiti stranicu u

vašem Internet pregledniku da biste vidjeli promjene na vašem dizajnu.

18

Microsoft ASP.NET – Uvod u ASP.NET MVC Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacija

Literatura1. 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, [19.10.2014]

2. Guckenheimer, S., Loje, N., Agile Software Engineering With Visual Studio, From Concept to Contiuous Feedback, Addison Wesley, Upper Saddle River, NJ, 2012., available at: http://www.amazon.com/Agile-Software-Engineering-Visual-Studio/dp/0321685857/ref=sr_1_1?s=books&ie=UTF8&qid=1322601062&sr=1-1#_, 30.09.2013.

3. MSDN, C# Tutorials, http://msdn.microsoft.com/en-us/library/aa288436(v=vs.71).aspx, 2013.

19