| Zadaci za vježbe – Informatika 1 – MS VISUAL WEB DEVELOPER 1 |

Korištenjem alata Visual Web Developer izrađuju se web aplikacije. Mi demo Visual Web Developer
koristiti za izradu web sučelja (tj. web obrazaca, web formi) prema našoj bazi podataka za
studentsku prehranu.
Visual Web Developer tretira svaku novu web aplikaciju kao zasebni projekt – tj. skup svih datoteka i
ostalih resursa potrebnih za oblikovanje dotične web aplikacije. U resurse neke web aplikacije
ubrajamo, među ostalim:
 web stranice koje predstavljaju sučelje prema sadržaju baze podataka
 bazu podataka
 ostale datoteke koje služe za grafičko dotjerivanje web stranica – npr. statičke slike poput
logotipa i sl.

Postupak kreiranja novog projekta za razvoj web aplikacije

Ovaj se postupak izvodi samo jednom za svaku novu web aplikaciju, na samom početku njenog
razvoja.
KORACI:
1. Kreiranje novog projekta
U izborniku File kliknite na New Project … prikazat de se prozor New Project kao na slici 1

Slika 1. Postavke novog projekta

Pod Project Type izaberite Visual C#, pa zatim Web. Zatim pod Templates izaberite ASP.NET Web
Application. U polje Name upišite naziv projekta, tj. web aplikacije (u našem slučaju Prehrana). U
polju Location treba zadati početni direktorij za pohranu svih resursa projekta – vi obavezno
izaberite direktorij sa sadržajem današnje vježbe na lokalnom disku D:
Ostale postavke ostavite nedirnutim i kliknite na OK. Pojavit de se glavno sučelje MS Visual Web Developera (slika 2).

Slika 2. Osnovni dijelovi sučelja alata Visual Web Developer

2. Uključivanje ved postojedih vanjskih resursa u projekt
Ved postojede datoteke, poput MS Access baze podataka, treba dodati kao vanjske resurse projekta.
Jedan od mogudih načina kako to možemo napraviti je sljededi:

2.1 Kopiranje datoteka u središnji direktorij za vanjske resurse – nađite na disku D: direktorij sa
sadržajem današnje vježbe. U njemu dete nadi direktorij Prehrana (zadano u prethodnom koraku), a
u njemu još jedan poddirektorij pod imenom Prehrana. U tom poddirektoriju dete vidjeti direktorij
App_Data – to je središnji direktorij za vanjske resurse. U njega kopirajte bazu prehrana.accdb

2.2 Registracija vanjskih resursa u Visual Web Developeru – u okviru Solution Explorer desno
kliknite na App_Data i iz izbornika birajte Add > Existing Item … (slika 3). U dijalogu za dodavanje
datoteka locirajte App_Data direktorij, odaberite datoteku prehrana.accdb i kliknite na gumb Add.
Tek sada su datoteke dodane u direktorij App_Data na disku zaista postale sastavnim dijelom
projekta.

Slika 4. Povezivanje s bazom podataka

Slika 3. Dodavanje vanjskih resursa u projekt

Povezivanje s bazom podataka

Posljednji pripremni korak je otvaranje veze prema našoj bazi podataka. U okviru Database Explorer
(slika 4) dvokliknite na ime baze. Nakon par trenutaka veza de biti uspostavljena i u tom istom okviru
biste trebali vidjeti sve tablice u bazi (Tables) kao i sve definirane upite u bazi (Views).
ZADATAK: Izraditi web obrazac koji de omoguditi pregled i uređivanje zapisa u tablici
Student u bazi prehrana.accdb

Podrazumijevani naziv novootvorene web stranice je Default.aspx – promijenit demo ga u

studenti.aspx
KORACI:
1. U okviru Solution Explorer desno kliknite na naziv stranice Default.aspx
2. Iz skočnog izbornika izaberite Rename
3. U kudicu upišite studenti.aspx i pritisnite tipku Enter

Nakon toga, potrebno je na (za sad praznu) web stranicu dodati komponente za prikazivanje sadržaja
– tekstualne oznake (Label), tekstualna polja (Textbox), padajude liste (Combo Box), tablice
(GridView) i sl.
Sve kontrole koje trebamo pronadi demo u okviru Toolbox.

Za organizaciju i uredno raspoređivanje sadržaja po web stranici se u alatu Visual Web Developer
najčešde koriste tzv. div regije. Radi se o pravokutnim područjima, spremnicima za smještaj drugih
kontrola koje prikazuju stvarne sadržaje. Na stranici možemo imati koliko hodemo div regija. Za svaku
div regiju možemo definirati drugačiji način poravnanja sadržaja i sl. – time možemo sve sadržaje na
stranici rasporediti na željeni način.
Primijetite da de jedna div regija biti podrazumijevani sastavni dio svake nove web stranice koju dete
izrađivati u Visual Web Developeru.

Naslov na vrhu web stranice

Izradit demo ga pomodu tekstualne oznake (Label). Kontrolu tipa Label demo pronadi u okviru
Toolbox > sekcija Standard
KORACI:
1. Dodavanje kontrole - drag&drop postupkom odvucite kontrolu Label unutar ved postojede div
regije (slika 5) na vrhu stranice.

Slika 5. Početna div regija i kontrola tipa Label u Toolbox okviru

2. Upisivanje željenog teksta u labelu - odaberite na web stranici labelu koju ste dodali i u okviru
Properties upišite u svojstvo Text željeni sadržaj – upišite Evidencija studenata.
3. Centriranje naslova – odaberite div regiju u koju ste dodali labelu i u okviru Properties podesite
svojstvo Align na Center.
4. Izbor fonta – sada ponovo odaberite labelu i u okviru Properties podesite skupinu opcija Font
(Name - Calibri, Size – X-Large, Bold – True) i ForeColor (boja teksta – kliknite na tri točkice i izaberite
željenu boju). Konačan naslov bi trebao biti kao na slici 6.
 Slika 6. Konačan naslov web obrasca za evidenciju studenata

Prikaz sadržaja iz baze na web stranici u tabelarnom obliku

a) Dodajte ispod div regije s naslovom još jednu div regiju za smještaj kontrole s tablicom
KORACI:
1. okvir Toolbox > sekcija HTML > opcija Div
2. Na ved poznati način definirajte da de sadržaji dodani u ovu div regiju biti horizontalno centrirani.

b) Dodavanje kontrole za tablični prikaz sadržaja iz baze – GridView

KORACI:
1. Iz okvira Toolbox > sekcija Data odvucite kontrolu tipa GridView u div regiju koju ste malo prije
dodali na stranicu. Prikazat de se generička tablica (slika 7), koju tek treba povezati s željenom
tablicom u bazi podataka (tablicom Student)

Slika 7. Početni prikaz GridView kontrole

c) Povezivanje GridView kontrole s tablicom Student u bazi prehrana.accdb

Opcije za povezivanje GridView kontrole s bazom podešavamo pomodu izbornika GridView Tasks
kojeg na slici 7 vidimo desno pored tablice. Ukoliko taj izbornik nije vidljiv, prikažite ga klikom na
gumb sa strelicom (taj gumb se uvijek nalazi na gornjem desnom kutu odabrane kontrole).
KORACI:
1. Određivanje baze koju demo koristiti (tj. izbor izvora podataka)
a) Pod Choose Data Source izaberite <New Data Source…> - otvara se Data Source
Configuration Wizard
b) U prvom koraku čarobnjaka izaberite tip baze (u našem slučaju izaberite Database). U
polje Specify an ID for the data source upišite ime za izvor podataka koji upravo kreiramo – npr.
upišite PrehranaStudentSource. Zatim kliknite na OK.
c) U drugom koraku birate na koju se bazu želite spojiti (Choose Your Data Connection) – iz
padajude liste izaberite prehrana.accdb i kliknite na Next.
d) U sljededem koraku ostavite kvačicu pored opcije "Yes, save this connection as" i kliknite
Next.
2. Oblikovanje upita koji de prikupiti sve potrebne podatke za prikazivanje u GridView kontroli
e) I dalje smo u čarobnjaku s kojim smo radili i u prethodnim koracima. Sada moramo
oblikovati upit koji de iz tablice Student prikupiti sadržaj svih četiriju stupaca – JMBAG, Prezime, Ime i
Adresa.
e.1) Iz liste Name (slika 9) izaberite tablicu Student
e.2) U popisu Columns stavite kvačice pored naziva stupaca JMBAG, Prezime, Ime i
Adresa
e.3) Kliknite na gumb Advanced… i označite opciju Generate INSERT, UPDATE and
DELETE statements (slika 8) kako bismo u našoj GridView kontroli mogli i pregledavati i mijenjati
sadržaj tablice Student u bazi prehrana.accdb – ako tu opciju ne označite, u GridView kontroli dete
modi samo pregledavati sadržaj tablice Student.

Slika 8. Omogudavanje izmjene sadržaja tablice u bazi

e.4) Konačni upit bi trebao biti oblikovan kao na slici 9. Eventualno sortiranje
podataka možete zadati pomodu gumba ORDER BY… . Kad ste gotovi sa svime kliknite Next.

Slika 9. Upit za prikaz svih podataka o studentima

e.5) U posljednjem koraku čarobnjaka možete klikom na gumb Test Query ispitati
koje podatke vrada upit kojeg ste upravo zadali. Ako je sve u redu, kliknite na Finish.
Nakon ovih koraka, tablica u Design pogledu izgleda kao na slici 10. Primijetite stvarne nazive stupaca
iz baze i novostvorenu kontrolu PrehranaStudentSource tipa SqlDataSource. Upravo je ta kontrola
rezultat rada prethodnog čarobnjaka. Treba li mijenjati bilo što u upitu koji je podloga za prikaz
podataka u GridView kontroli, morate mijenjati svojstva kontrole PrehranaStudentSource (opet,
najlakše pomodu čarobnjaka koji je dostupan iz desnog izbornika vezanog uz samu kontrolu)

Slika 10. GridView kontrola povezana s tablicom Student i pripadajuda PrehranaStudentSource kontrola

d) Pokretanje web stranice u web pregledniku

Želimo vidjeti što smo do sada napravili – zato demo trenutnu stranicu studenti.aspx otvoriti u web
pregledniku.
KORACI:
1. Iz glavnog izbornika Debug izaberite Start Without Debugging

Vizualno dotjerivanje tablice (GridView komponente)

Svi koraci koji slijede pretpostavljaju da imate odabranu GridView kontrolu za prikaz studenata.
KORACI:
1. Oblikovanje zaglavlja tablice – okvir Properties – svojstvo HeaderStyle – podsvojstva BackColor
(boja pozadine) i Font (Name – Calibri)
2. Oblikovanje glavnih redaka tablice – okvir Properties – svojstvo RowStyle – podsvojstvo Font
(Name – Calibri)
3. Alternirajuda boja pozadine glavnih redaka tablice – okvir Properties – svojstvo
AlternatingRowStyle – podsvojstvo BackColor
4. Vede margine unutar delija tablice – okvir Properties – Layout - svojstvo CellPadding – npr. 3

Nakon svih ovih koraka, u web pregledniku biste trebali vidjeti prikaz kao na slici 11.
 Slika 11. Izgled tablice sa studentima u web pregledniku

Dodatna funkcionalnost web forme

a) Straničenje dugačkih tablica
Kao što vidimo, tablica sa studentima je dosta dugačka i nepregledna. Zato želimo omoguditi prikaz
sadržaja tablice kroz vedi broj "stranica".
KORACI:
1. Odaberite GridView kontrolu sa studentima i prikažite njen
izbornik sa zadacima (gumbid sa strelicom u gornjem desnom
kutu GridView kontrole). Stavite kvačicu pored opcije Enable
Paging (slika 12)
2. Za određivanje broja redaka na pojedinoj stranici tablice
podesite svojstvo PageSize (okvir Properties) na željeni iznos –
npr. na 15 da bi dobili 15 redaka po jednoj stranici prikaza

b) Sortiranje podataka po bilo kojem stupcu

KORACI:
1. Odaberite GridView kontrolu sa studentima i prikažite njen
izbornik sa zadacima (gumbid sa strelicom u gornjem desnom
kutu GridView kontrole). Stavite kvačicu pored opcije Enable
Sorting (slika 12) – nazivi stupaca postaju hyperlinkovi – klikom
Slika 12. GridVIew Tasks izbornik s izabranim
na njih zadaje se poredak sortiranja (rastudi – padajudi – rastudi dodatnim opcijama
…)
c) Omogudavanje izmjene i brisanja podataka u bazi
KORACI:
1. Odaberite GridView kontrolu sa studentima i prikažite njen izbornik sa zadacima (gumbid sa
strelicom u gornjem desnom kutu GridView kontrole). Stavite kvačicu pored opcija Enable Editing i
Enable Deleting (slika 12) - tablica dobiva dodatni stupac u kojem za svaki redak dobivate
hyperlinkove za uređivanje sadržaja retka izravno u tablici u bazi (Edit) i brisanje retka izravno u
tablici u bazi (Delete).
VAŽNO: Preduvjet za normalan rad Edit i Delete naredbi je označena opcija Generate INSERT,
UPDATE and DELETE statements (vidi sliku 8).

Konačan obrazac za prikaz i uređivanje podataka o studentima bi trebao izgledati kao na slici 13.

Slika 13. Konačni izgled obrasca za evidenciju studenata u web pregledniku

ZADATAK: Napravite istovrsni web obrazac za prikaz i uređivanje podataka o artiklima.

Novu praznu web stranicu kreirajte na sljededi način:

1. U okviru Solution Explorer desno kliknite na korijen stabla (Prehrana) i iz izbornika izaberite Add >
New Item …
2. Prikazuje se prozor "Add New Item – Prehrana" – lijevo pod Categories izaberite Web, a desno
pod Templates izaberite Web Form
3. Stranici dajte ime artikli.aspx – u polje Name upišite artikli.aspx i kliknite na gumb Add
Ponavljajudi (naravno, uz odgovarajude prilagodbe koje su vezane za artikle) korake koji su navedeni
od sredine četvrte stranice ovog dokumenta (dakle, počevši od teme Naslov na vrhu web
stranice), oblikujte web obrazac za manipulaciju s artiklima. Izgled i dodatna funkcionalnost trebaju
biti isti kao i na web obrascu za studente.

NAPOMENA: Pripazite kod korištenja Data Source Configuration čarobnjaka – na koraku Choose
Your Data Connection ovaj put iz padajude liste nedete birati datoteku prehrana.accdb nego opciju
ConnectionString (jedino bi ta stavka trebala biti vidljiva u popisu).

Konačan web obrazac za artikle bi trebao izgledati kao na slici 14.

Slika 14. Konačni izgled obrasca za evidenciju artikala u web pregledniku

ZADATAK: Omoguditi unos novih zapisa u tablicu Student.

Kontrola GridView pored svih svojih mogudnosti ne dopušta na jednostavan način unošenje novih
zapisa u tablicu. Zato postoji kontrola tipa FormView, koja to omogudava.

KORACI:
Na web stranicu studenti.aspx demo dodati kontrolu tipa FormVIew.
1. Dodajte novu div regiju na kraj stranice, a u nju odvucite FormView kontrolu (okvir Toolbox >
sekcija Data > kontrola FormView)
2. Iz desnog izbornika "FormView Tasks" izaberite ved postojedi PrehranaStudentSource kao izvor
podataka (isti onaj izvor koji je korišten i za popunjavanje GridView kontrole)
3. Našu FormView kontrolu trebamo prebaciti u način rada u kojem de služiti samo za unos novih
zapisa (FormView kontrola se može iskoristiti i za pregledavanje ved postojedih podataka i za
njihovo uređivanje i brisanje, ali ta nam funkcionalnost nije potrebna, jer je ved imamo unutar
GridView kontrole) – okvir Properties > skupina Behaviour > svojstvo DefaultMode treba postaviti
na Insert.
4. Uljepšavanje obrasca za unos novog zapisa – početni raspored polja na FormView kontroli je, blago
rečeno, vrlo ružan, pa trebamo malo intervenirati
a) iz izbornika "FormView Tasks" izaberite Edit Templates, a zatim iz novog izbornika
izaberite InsertItemTemplate iz liste Display (InsertItemTemplate je obrazac koji određuje raspored
polja na FormView-u kad je FormView u Insert načinu rada, tj. kad FormView služi za unos novih
zapisa – naš FormView de stalno biti baš u tom načinu rada i zato moramo podesiti baš
InsertItemTemplate obrazac)
b) Označite mišem 4 reda s tekstualnim poljima (JMBAG, Prezime, Ime i Adresa) i zadajte
preko glavne alatne trake lijevo poravnavanje sadržaja
c) Dodavanjem potrebnog broja razmaka nakon svakog od natpisa ispred tekstualnih polja
približno poravnajte tekstualna polja po lijevom rubu
d) Po potrebi proširite svako od 4 tekstualna polja na potrebnu širinu. Sada biste trebali
vidjeti FormView kontrolu kao na slici 15.

Slika 15. FormView kontrola za vrijeme uređivanja InsertItemTemplate obrasca

e) Završite s uređivanjem InsertItemTemplate obrasca tako da iz izbornika "FormView Tasks"

izaberete End Template Editing. Podesite još font čitave FormView kontrole na Calibri (okvir
Properties > svojstvo RowStyle > podsvojstvo Font > Name = Calibri).

Iznad FormView kontrole još dodajte još jedan div u koji dete staviti label s tekstom "Unos podataka
o novom studentu". Nakon svih tih koraka trebali biste vidjeti FormView kontrolu kao na slici 16.

Slika 16. Konačan izgled FormView kontrole

ZADATAK: Napravite na stranici artikli.aspx istovjetan obrazac za unos novih zapisa u
tablicu Artikl.

Ponovite (opet uz odgovarajude prilagodbe za tablicu Artikala) korake iz prethodnog zadatka.

VAŽNA NAPOMENA: Ako dete se pridržavati gornjih uputa, imat dete problem prilikom unosa novih
zapisa u tablicu artikala. Problem je u tome što (zbog internog propusta!!) Visual Web Developer
krivo tretira primarni ključ tipa AutoNumber (a primarni ključ ID_artikl u našoj bazi je upravo takav tip
primarnog ključa) prilikom unosa novih redaka u tablicu u bazi.
Ručno rješenje problema je sljedede – napravite sve na način kako je zadano i u prethodnom
zadatku, ali prije isprobavanja funkcionalnosti stranice napravite još i sljedede:
1. Odaberite PrehranaArtiklSource kontrolu na stranici artikli.aspx
2. Okvir Properties > svojstvo InsertQuery – kliknite na tri točkice – prikazat de se prozor "Command
and Parameter Editor" kao na slici 17. Izmijenite crveno uokvirene dijelove na sljededi način:
a) Pod "INSERT command:" obrišite [ID_artikl], (skupa sa zarezom iza zagrade) i obrišite prvi
?, nakon VALUES i to opet skupa sa zarezom iza upitnika.
b) Pod "Parameters:" označite ID_artikl i obrišite ga klikom na gumb s crvenim znakom X
-> nakon toga bi u "INSERT command:" trebao ostati samo tekst
INSERT INTO [Artikl] ([Naziv], [Cijena]) VALUES (?, ?)
-> a u popisu "Parameters:" bi trebali ostati samo parametri Naziv i Cijena
3. Kliknite na OK i isprobajte stranicu u web pregledniku.

Slika 17. Command and Parameter Editor