Vjež ba 3-1: Ražvoj ASP.NET MVC 4 Modela

Transcription

1 Vjež ba 3-1: Ražvoj ASP.NET MVC 4 Modela Morate isprogramirati MVC modele koji su izrađeni u razvojnom planu za web aplikaciju online prometa vrijednosnica na burzi. Model mora pohraniti podatke u SQL Server bazu podataka čija svojstva opisuju grafove, novosti i njihov sadržaj. Također, model mora omogućiti web aplikaciji da pohranjuje uploadirane grafove, uređuje njihova svojstva, te ih izbriše ako to korisnik aplikacije bude zahtjevao. Ciljevi vježbe Nakon završetka ove vježbe, biti ćete u mogućnosti: Kreirati novi ASP.NET MVC 4 projeka u Visual Studio-u Dodavati nove modele u ASP.NET MVC 4 web aplikaciji i dodjeliti im svojstva. Koristiti Visual Studio za izradu nove SQL Server baze podataka, te MVC 4 projekt povezati s bazom podataka. Dodavati Entity Framework kod u klase modela u MVC modelima. Koristiti i uređivati svojstva podataka (eng. Data annotations) u MVC modelima. Vježba : Kreiranje MVC 4 projekta i dodavanje Modela Glavni zadaci ove vježbe su sljedeći: 1. Kreiranje novog ASP.NET MVC 4 projekta u Visual Studio-u Dodavanje klasa modela u MVC 4 projekt. Zadatak 1: Kreiranje novog ASP.NET MVC 4 projekta 1. Pokrenite Visual Studio 2012, odaberite File/New/Project i kreirajte novi ASP.NET MVC 4 web application pomoću sljedećih podataka: Name: OnlineVrijednosnice Location: D:\RPA\BrojIndeksaVjezba3 -> ako mapa ne postoji, kreirajte ju Solution name: OnlineVrijednosnice Create directory for solution: Označite kvačicom u kvadratiću Project Template: Empty

2 Zadatak 2: Dodavanje klasa modela u MVC 4 projekt 1. Dodajte novu klasu modela u OnlineVrijednosnice projekt pomoću sljedećih podataka: Naziv klase: Graf 2. Dodajte još jednu klasu modela u OnlineVrijednosnice projekt koristeći sljedeće podatake: Naziv klase: Novost Vježba : Dodavanje svojstava u MVC Modele 1. Dodavanje svojstava u klasi Graf modela. 2. Dodavanje svojstava u klasi Novost modela. 3. Implementiranje veze između klasa modela. Zadatak 1: Dodavanje svojstava u klasi Graf modela 1. Dodajte svojstvo s primarnim ključem u klasu Graf modela pomoću sljedećih podataka: Ime svojstva: GrafID Tip podatka: Cijeli broj (int) Pristup: čitanje i pisanje 2. Dodajte svojstvo Naslov u klasu Graf modela pomoću sljedećih podataka: Ime svojstva: Naslov Tip podatka: tekst (string) Pristup: čitanje i pisanje 3. Dodajte svojstvo GrafDatoteka Naslov u klasu Graf modela i pohranite MIME tip pomoću sljedećih podataka: Ime svojstva: GrafDatoteka, MimeTypeSlika Tip podatka za GrafDatoteka: Byte Tip podatka za MIME tip: tekst (string) Pristup: čitanje i pisanje 4. Dodajte svojstvo Opis u klasu Graf modela pomoću sljedećih podataka: Ime svojstva: Opis Tip podatka: tekst (string)

3 Pristup: čitanje i pisanje 5. Dodajte svojstvo datuma kreiranja u klasu Graf modela pomoću sljedećih podataka: Ime svojstva: DatumKreiranja Tip podatka: Datum (DateTime) Pristup: čitanje i pisanje 6. Dodajte svojstvo Korisničko Ime u klasu Graf modela pomoću sljedećih podataka: Ime svojstva: ImeVlasnikaKorisnika Tip podatka: tekst (string) Pristup: čitanje i pisanje Zadatak 2: Dodavanje svojstava u klasi Novost modela 1. Dodajte svojstvo s primarnim ključem u klasu Novost modela pomoću sljedećih podataka: Ime svojstva: NovostID Tip podatka: Cijeli broj (int) Pristup: čitanje i pisanje 2. Dodajte GrafID svojstvo u klasu Novost modela pomoću sljedećih podataka: Ime svojstva: GrafID Tip podatka: Cijeli broj (int) Pristup: čitanje i pisanje 3. Dodajte svojstvo Korisničko Ime u klasu Novost modela pomoću sljedećih podataka: Ime svojstva: ImeKorisnika Tip podatka: tekst (string) Pristup: čitanje i pisanje 4. Dodajte svojstvo Predmet u klasu Novost modela pomoću sljedećih podataka: Ime svojstva: Predmet Tip podatka: tekst (string) Pristup: čitanje i pisanje 5. Dodajte svojstvo Sadrzaj tijelo u klasu Novost modela pomoću sljedećih podataka: Ime svojstva: Sadrzaj Tip podataka: tekst (string) Pristup: čitanje i pisanje

4 Zadatak 3: Implementiranje veze između klasa modela 1. Dodajte novo svojstvo u klasi Graf modela za dohvaćanje novosti uz određeni Graf pomoću sljedećih podataka: Ime svojstva: Novosti Tip podatka: kolekcija novosti (ICollection<Novost>) Pristup: čitanje i pisanje Uvrstite ključnu riječ virtual 2. Dodajte novo svojstvo u klasi Novost modela za dohvaćanje Grafa za danu novost pomoću sljedećih podataka: Ime svojstva: Graf Tip svojstva: Graf Pristup: čitanje i pisanje Uvrstite ključnu riječ virtual Vježba : Svojstva podataka (eng. Data annotations) u MVC modelima U ovoj vježbi treba napraviti: Dodati atribute na svojstva kako bi ih MVC web aplikacija mogla koristiti u pogledima i vršiti provjeru korisničkog unosa pomoću njih. 1. Dodavanje atributa za prikaz i uređivanje podataka u modelu. 2. Dodavanje atributa validacije podataka u modelu. Zadatak 1: Dodavanje atributa za prikaz i uređivanje podataka 1. Dodajte atribut prikaza podataka u klasi Graf modela kako bi osigurali da se svojstvo GrafDatoteka prikazuje s naziv Grafikon u pogledu (eng. view). 2. Dodajte atribut za uređivanje podataka u klasi Graf modela kako bi osigurali da polje za unos svojstva Opis bude višelinijsko (u više redova).

5 3. Dodajte sljedeće atribute podataka u klasi Graf modela za prikazivanje svojstva DatumKreiranja: Tip podatka: Datum (DateTime) Prikaz na pogledu: Datum kreiranja Format prikazanog datuma : {0: dd / mm / gg} 4. Dodajte atribut za uređivanje podataka u klasi Novost modela kako bi osigurali da polje za unos svojstva Sadrzaj bude višelinijsko (u više redova). Zadatak 2: Dodavanje atributa validacije podataka 1. Dodajte atribut za validaciju podataka u klasi Graf modela kako bi osigurali da korisnici obavezno unose tekst u polje Naslov. 2. Dodajte atribut za validaciju podataka primjedbe u klasi Novost modela kako bi osigurali da korisnici obavezno unose tekst u polje Predmet i da uneseni tekst ne bude duži od 250 znakova. Vježba : Kreiranje nove SQL baze podataka U ovoj vježbi treba napraviti: Implementirati Entity Framework Code-First pristup u web aplikaciju 1. Dodavanje Entity Framework konteksta u MVC modelu. 2. Dodavanje Entity Framework inicijalizatora. Zadatak 1: Dodavanje Entity Framework konteksta 1. Upotrijebite NuGet Package Manager za dodavanje Entity Framework 5.0 u aplikaciju. 2. Dodajte novu klasu naziva OnlineVrijednosniceContext u Models mapu i pobrinite se da nova klasa nasljeđuje klasu System.Data.Entity.DbContext.

6 3. Dodajte DbSet svojstvo za Grafovi i Novosti kako bi omogućili Entity Framework-u stvaranje baze podataka s tablicama Grafovi i Novosti. Zadatak 1: Dodavanje Entity Framework inicijalizatora 1. Dodajte novu klasu naziva OnlineVrijednosniceInitializer u Models mapu i i pobrinite se da nova klasa nasljeđuje klasu DropCreateDatabaseAlways<PhotoSharingContext>. 2. Dodajte sljedeći kod u novokreiranu klasu OnlineVrijednosniceInitializer: private byte[] getfilebytes(string path) { FileStream fileondisk = new FileStream(HttpRuntime.AppDomainAppPath + path, FileMode.Open); byte[] filebytes; using (BinaryReader br = new BinaryReader(fileOnDisk)) { filebytes = br.readbytes((int)fileondisk.length); } return filebytes; } 3. Override ajte Seed metodu OnlineVrijednosniceInitializer klasi. 4. Kreirajte novu listu Graf objekata u Seed metodi.lista treba sadržavati jednu sliku objekta sa sljedećim svojstvima: Naslov: TestGraf Opis: Dodajte opis po vašem izboru ImeKorisnika: PeroPeric GrafDatoteka: getfilebytes ("\ \Slike\ \graf1.jpg") MimeTypeSlika: image/jpeg DatumKreiranja: Trenutni datum 5. Dodajte listu Grafova u Entity Framework kontekst i spremite Graf u bazu podataka. 6. Kreirajte novu listu Novost objekata u Seed metodi. Lista treba sadržavati jedan novost objekt sa sljedećim svojstvima: NovostID: 1 ImeKorisnika: PeroPeric Predmet: Test Novost Sadrzaj: Ovaj tekst bi se trebao pojaviti uz graf 1 7. Dodajte listu Novosti u Entity Framework kontekst i spremite Novost u bazu podataka. 8. Otvorite Global.asax i dodajte liniju koda koji poziva Database.SetInitializer, dajući mu kao ulazni parametar OnlineVrijednosniceInitializer klasu koju ste kreirali. Također treba dodati sljedeće imenske prostore (eng.namespaces):

7 using System.Data.Entity; using OnlineVrijednosnice.Models; Vježba : Testiranje Modela i Baze podataka U ovoj vježbi treba napraviti: Dodavanje kontrolera i pogleda u MVC web aplikaciju. Pokrenuti web aplikaciju. 1. Dodavanje kontrolera i pogleda. 2. Dodavanje grafa i pokretanje programa. Zadatak 1: Dodavanje kontrolera i pogleda 1. Dodajte novi kontroler u OnlineVrijednosnice projektu pomoću sljedećih podataka: Name: GrafController Template: MVC Controller with read/write actions and views, using Entity Framework Model class: Graf Data context class: OnlineVrijednosniceContext Views: Razor(CSHTML) Zadatak 1: Dodavanje grafa i pokretanje programa 1. Kreirajte novu mapu na najvišoj razini u projektu i kopirajte sliku u novonastalu mapu pomoću sljedećih informacija: Naziv nove mape: Slike Slika koju trebate kopirati: ina.jpg Lokacija slike: D:\RPA\Vjezba3\Slike 2. Pokrenite aplikaciju u debug modu (F5) i pristupite sljedećoj relativnoj putanji: / graf / index