03 HTML Bootstrap Osnove

.NET Okruenje - Nastavni materijaliTVZI.
Cesar
.NET Okruenje
Vjeba 3: HTML, Bootstrap
.NET Okruenje - Nastavni materijaliTVZI.Cesar
Sadraj
Klijent-server komunikacija.................................................................................... 3
Osnove HTML jezika............................................................................................... 7
Twitter Bootstrap.................................................................................................... 9
Grid system......................................................................................................... 9
Modal................................................................................................................ 10
Klijent-server komunikacija
Komunikacija izmeu klijenta (primjerice, web browsera) i servera se odvija
putem zahtjeva i odgovora klijent alje zahtjev (request), a server zaprima
zahtjev i alje odgovor (response). Zahtjev je definiran s nekoliko vanijih
dijelova:
URL svaki zahtjev je naslovljen na neku URL adresu, koja se sastoji od

protokola, domene, (porta), relativne putanje (relative path), URL
parametara.
Primjer
jednog
takvog
zahtjeva
bi
bio
https://moj.tvz.hr:443/Predavanja.php?pred=37372.
Protoko
Domen
Port
URL parametri
Relativna putanja
Zaglavlje dodatni parametri koji specificiraju primjerice jezik, format

oekivanog sadraja, autentikacijske podatke i sl.
POST vrijednosti zahtjev moe sadravati i dodatne parametre i
vrijednosti
Tip zahtjeva GET, POST, PUT, DELETE
Postoji nekoliko tipova zahtjeva, mi emo istaknuti sljedea dva:
GET zahtjev koji alje parametre preko URL-a, i kao povratnu vrijednost
dobiva (najee) HTML koji se prikazuje korisniku u web pregledniku
POST isto kao GET, no alje dodatne parametre POST metodom koji
mogu biti obraeni na serveru. Najee se na ovaj nain alju podaci koji
se popunjavaju u formi na web stranici.
Komunikaciju servera i klijenta moemo pregledavati u posebnom dijelu

developer tools alata:
Ukoliko napravimo reload stranice na kojoj smo trenutno, moemo pregledati

tono kako izgleda zahtjev i kako izgleda odgovor:
Ukoliko otvorimo stranicu koja na sebi ima formu za unos podataka, moemo
vidjeti i nae podatke koji se alju POST metodom na server (pomou istog alata):
Kako bi mogli ostvariti komunikaciju servera i klijenta, potrebno je poznavati

(barem) HTML jezik.
Osnove HTML jezika

S obzirom da je znanje HTML-a usvojeno na obveznom kolegiju u prvom
semestru, i kasnije primjenjeno, u ovom poglavlju dat e se samo osnovni pregled
bitnijih HTML elemenata i principa.
Container elementi
<html> korijenski element stranice. Unutar njega su jo <head> i

<body>
<head> - sadri direktive kao to su meta podaci o stranici, naslov,
reference na klijentse skripte ili stilove
<body> - element koji sadri ostale elemente za prikaz sadraja
<div> oznaava najee koriteni container element koji zauzima cijelu
liniju u HTML strukturi (osim ako mu je postavljeno plutanje float). Unutar
njega elementi se slau ovisno o svojim postavkama
<span> - element koji nee zauzeti cijelu liniju, ve samo onu irinu koja
mu je potrebna. U njega se dalje mogu slobodno umetati ostali elementi
<table> - slui za tablini raspored elemenata. Koristi dodatno elemente
<th>,<tr>, <td>
Elementi za rukovanje uneenim vrijednostima
<form> - element unutar kojeg se nalaze <input> elementi ije

vrijednosti se alju POST metodom na server
<input> - postoji nekoliko razliitih tipova <input> elemenata, gdje svaki
slui za razni standardni tip podataka koji se treba poslati na server
o <input type=text /> - jednostavni element za unos teksta
o <input type=submit> - iscrtava se u obliku gumba, na iji
pritisak se cijela forma i njene vrijednosti alju na server 1
<select> - vrlo slian input elementu, no sadri predefiniran skup
vrijednosti koje se mogu odabrati
<textarea></textarea> - kontrola za unos teksta koja podrava vie
linija uneenog teksta
Zadatak 3.1: Modificirat emo Contact.cshtml datoteku na nain da dodamo

form element i nekoliko input elemenata i poaljemo podatke koje e korisnik
unijeti na server te ih nakon toga ispiemo korisniku na drugoj stranici.
1. Prouiti
HomeController
klasu,
posebno
akcije
Contact()
i
SubmitQuery(), te proitati komentare u kodu
2. U Contact.cshtml kreirati formu (HTML form element) koja alje podatke
na URL /Home/SubmitQuery.
3. Dodati kontrole za unos sljedeih podataka:
a. Ime i prezime
b. Email
1 Vie o drugim tipovima kontrola za unos moe se nai ovdje:
http://www.w3schools.com/html/html_form_input_types.asp
7

c. Poruku (multiline)
d. Tip poruke (predefinirana lista vrijednosti: pohvala, upit, poslovni
prijedlog, alba)
e. Checkbox kontrolu za oznaavanje da elimo primati newsletter
f. Submit gumb
4. Testirati slanje podataka i promotriti zahtjev i odgovor servera
5. U akciji SubmitQuery proitati vrijednosti poslane s forme (preko
parametra akcije koji je klase FormCollection), te sastaviti opisnu
reenicu koju je potrebno proslijediti kao odgovor nakon slanja podataka.
Reenica treba biti oblika: Dragi IME PREZIME (EMAIL) zaprimili smo vau
poruku te e vam se netko ubrzo javiti. Sadraj vae poruke je: [TIP
PORUKE] SADRZAJ PORUKE. Takoer, (obavijestit emo vas/neemo vas
obavijestiti) o daljnjim promjenama preko newslettera.
Twitter Bootstrap
Ili popularnije, samo bootstrap, je skup javascript i CSS biblioteka koje
omoguavaju laki razvoj web aplikacija, pri tome inicijalno postavljajui dobar
dizajn i pruajui niz funkcionalnosti koje su potrebne u veini sluajeva prilikom
izrade web stranica i web aplikacija.
S obzirom na veliku koliinu postojee dokumentacije 2, ovdje e biti samo
istaknuto nekoliko glavnih principa izrade aplikacija temeljenih na bootstrap
bibliotekama.
Grid system3
Ideja je da se cijelo korisniko suelje podijeli u mreu manjih dijelova, koji se
dalje dijele opet u mreu, itd. Bitno svojstvo ovakve mree je da je (manje-vie)
automatski prilagodljivo veliini ekrana (mobiteli, tableti, iroki ekrani) te na taj
nain drastino poboljava iskustvo korisnika na stranici.
Zadatak 3.2
Implementirati kontakt formu koristei grid system.
Isprobati i uoiti razlike izmeu xs, -sm, -md, -lg sufixa na primjeru
smanjenja browser prozora (skaliranja na manje rezolucije)
Prouiti bootstrap forms i implementirati ispravni HTML i CSS kako bi forma
izgledala kao na slici na iduoj stranici, te kada se rezolucija smanji
(suziti browser), onda treba izgledati ovako (lijeva slika je scroll na vrhu,
desna scroll na dnu):
2 Kompletna dokumentacija s nizom primjera moe se pronai ovdje:

http://getbootstrap.com/
3 Detalji o grid system konceptu: http://getbootstrap.com/css/#grid
9
Modal4
Vrlo esto koritena komponenta za prikaz informacija u popup prozoru. Uz
mogunost otvaranja popup prozora samo koritenjem HTML-a, dodatno
omoguava i proirenja koritenjem javascript funkcija.
Zadatak 3.3
4 Modal: http://getbootstrap.com/javascript/#modals
10

Modificirati Contact.cshtml stranicu na nain da se kontakt forma prikazuje u
bootstrap popup prozoru.
11
Zadatak 3.4
Iskoristiti alert prozor za prikaz poruke na zadnjem ekranu:
Zadatak 3.5
Iskoristiti breadcrumbs bootstrap komponentu kako bi prikazali korisniku gdje
se trenutno nalazi:
12

03 HTML Bootstrap Osnove

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

03 HTML Bootstrap Osnove

Uploaded by

Copyright:

Available Formats

.NET Okruenje - Nastavni materijaliTVZI.

.NET Okruenje - Nastavni materijaliTVZI.Cesar

.NET Okruenje - Nastavni materijaliTVZI.Cesar

URL svaki zahtjev je naslovljen na neku URL adresu, koja se sastoji od

Zaglavlje dodatni parametri koji specificiraju primjerice jezik, format

Postoji nekoliko tipova zahtjeva, mi emo istaknuti sljedea dva:

Komunikaciju servera i klijenta moemo pregledavati u posebnom dijelu

.NET Okruenje - Nastavni materijaliTVZI.Cesar

Ukoliko napravimo reload stranice na kojoj smo trenutno, moemo pregledati

.NET Okruenje - Nastavni materijaliTVZI.Cesar

.NET Okruenje - Nastavni materijaliTVZI.Cesar

Kako bi mogli ostvariti komunikaciju servera i klijenta, potrebno je poznavati

.NET Okruenje - Nastavni materijaliTVZI.Cesar

Osnove HTML jezika

<html> korijenski element stranice. Unutar njega su jo <head> i

Elementi za rukovanje uneenim vrijednostima

<form> - element unutar kojeg se nalaze <input> elementi ije

Zadatak 3.1: Modificirat emo Contact.cshtml datoteku na nain da dodamo

.NET Okruenje - Nastavni materijaliTVZI.Cesar

.NET Okruenje - Nastavni materijaliTVZI.Cesar

2 Kompletna dokumentacija s nizom primjera moe se pronai ovdje:

.NET Okruenje - Nastavni materijaliTVZI.Cesar

.NET Okruenje - Nastavni materijaliTVZI.Cesar

.NET Okruenje - Nastavni materijaliTVZI.Cesar

You might also like