Embed Size (px)
Citation preview
6. Tabele
Elektronsko poslovanje
Šta su zapravo tabele?
Elektronsko poslovanje
Tabela je prikaz informacija u takozvanom
“grid” formatu (rešetkastom formatu). Tabele
mogu biti prikazi finansijskih izvještaja,
različitih raspored, makroekonomskih
pokazatelja i sl. Ovakan način prikazivanja
nam omogućava razmumjevanje
kompleksnijih grupa podataka,
referencirajući podatke kroz dve ose.
Elektronsko poslovanje
Td predstavlja ćeliju
Kreiranje
tabele
Osnovna struktura tabela
Table element se koristi
za kreiranje tabela.
Sadržaj tabele se
popunjavaju red po red.
Element tr pokazuje
početak svakog reda
<tr> i kraj samog reda
</tr>. Element td
predstavlja svaku ćeliju
u redu.
Neki pretraživači odmah
učitavaju liniju oko
ćelija.
Jedan red
od <tr> do
</tr>
Elektronsko poslovanje
Prazna ćelijaNaziv
kolona
Nazivi kolona i redova
Element <th> se koristi
slično kao i <td> (unutar
glavnog elementa
<table> i <tr> elementa)
i njegova svrha je da
opiše zaglavlje tabele
tj.da dodjeli nazive
kolonama i redovima.
Gore pomenuta dva taga
trebate koristiti čak i kada
je tabela prazna kako ne
biste narušili strukturu
tabele. Th koristite
različito u zavisnosti da li
dodjeljujete naziv redu ili
koloni.
Naziv reda
Elektronsko poslovanje
Zaglavlje tabele
Tijelo tabele
“Duge tabele”
Podnožje tabele
Elektronsko poslovanje
Atribut width kod
elementa <table>
Na istom
mjesto
podešavamo
i razmakeŠirina tabele
i razmaci
Atribut <width> se koristi
pri otvaraćujeg tagu
<table> elementa iako je
danas većinom zamjenjen
primjenom CSS-a.
Korišten je i uz <th> i <td>
elemente da bi se
specifikovala širina
određenih ćelija.
“Cellpadding” i
“cellspacing” su atributi
koji su se koristili da bi
dodali razmaci u ćelijama i
između svake ćelije.
Elektronsko poslovanje
Ali i uz
element
<td>
Atributi border i
bgcolor se
koriste uz
element <table>
Okviri i pozadina
Border atribut koji se
koristi za okvire se
koristi i uz element
<table> i uz element
<td>.
Isto je i sa atributom
bgcolor koji se koristi za
pozadinske boje tabele
uz hex kod (više o tome
kada budemo radili
CSS).
Moderni sajtovi više
koriste CSS u uređivanju
boja ali je moguće da
ćete naletiti na stari kod.
7. Forme
Elektronsko poslovanje
Vrste formi
Elektronsko poslovanje
Dodavanje teksta
Submitting forme
Izborne liste
Dodavanje fajlova
Elektronsko poslovanje
Jedna od dva
metoda: get ili
post
Element <form> i
prateći atribut
action
Osnovna struktura formi
Kod elementa <form> moramo definisati atribute action i method.
Postoje 2 vrste metoda: get i post. Get je obično odgovarajući kada
nam ne treba dodavanje unesenog u bazu (npr.samo pretraga) a
post obično koristimo kada korisniku forme dozvoljavamo da
aploduje fajlove, unosi šifre, dodaje podatke u bazu podataka i sl.
Atribut id se koristi za odvajanje vrijednosti od drugih vrijednosti na
stranici (ne koristimo trenutno u primjeru).
URL za stranicu na
serveru koja će primiti
informaciju kada se
sumituje
Elektronsko poslovanje
Element
<form> i
prateći atribut
action
Tekst input
Element <input> se koristi za kreiranje nekih kontrola forme.
Vrijednost pratećeg atributa type definiše kakav će biti unos. Kada
ovaj atribut ima vrijenost teksta onda se kreira polje za unos teksta.
Da bi server prepoznao potrebno je unijeti o kakvom vrstu unosa je
riječ (npr.korisnočno ime tj.username, šifra password i sl.).
Maxlenght atribut se koristi kada želimo da ograničimo maksimalan
broj mogućih unesenih karaktera. Npr.koliko bi bilo ograničenje kod
unosa godina?
Element <input> sa pratećim atributima za tekst,
veličinu i maksimalnu veličinu
Elektronsko poslovanje
Forma za unos šifre
Identičan unos kao i u predhodnom slučaju sa tim da moramo dodati
novi paragraf gdje ćemo definisati da je type password kako bi ga
server mogao prepoznati prilokom prijavljivanja.
Element <input> sa pratećim atributima za šifru,
veličinu i maksimalnu veličinu
Elektronsko poslovanje
Tekstualno polje
Element <textarea> se koristi za kreiranje tekstualnih polja za
višelinijski unos teksta. Ovo nije samozatvarajući element.
Tekst koji se nalazi između otvarajućeg i zatvarajućeg taga ovog
elementa je tekst koji će se naći u tekstualnom polju prije kucanja
teksta od strane korisnika.
Element <textarea> sa pratećim atributima name, cols,
rows. Između je tekst koji će se naći u tekstualnom polju
prije unosa tekst od strane korisnika.
Elektronsko poslovanje
Radio dugme
Element <input> se koristi i za kreiranje radio dugmeta ali sa
upotrebom atributa type=“radio”. Ovaj atribut nam omogućava da
odaberemo samo 1 od ponuđenih odgovora. Value atribut u ovom
slučaju definiše vrijednost koja će se poslati serveru nakon odabire
od strane korisnika (napomena: nema diselekcije nego samo odabir
druge opcije).
Element <input > sa pratećim atributima type, name,
value i za radio dugme karakterističnim atributom
CHECKED.
Elektronsko poslovanje
Checkbox
Atribut i njegova vrijednost type checkbox> se koristi za kreiranje
checkbox formi. Ova forma omogućava korisniku da selektuje jedan
ili više odgovora.
Element <input > sa pratećim atributtom type koji
ovdje ima vrijednost “checkbox”. Primjetićete da
onaj kojeg postavite da je checked će biti čekiran.
Elektronsko poslovanje
Padajuća lista
Forma padajuća lista (eng. Drop down listi ili select box) dozvoljava
korisniku da odabere jednu vrijednost iz padajućeg liste. Element
<select> se koristi za kreiranje padajuće liste unutar koje se mogu
definisati jedna ili više mogućnosti izbora.
Atribut selected se može dodatno koristiti kada želimo da jedna
opcija unaprijed bude odabrana.
Element <option> koristimo za definisanje
mogućnosti za izbor koje će korisnik imati.
Dodatni element
select
Elektronsko poslovanje
Polje za višestruki odabir
Element <select> skupa sa elementom <option> ali sa dodatnim
atributom multiple se koristi za kreiranje polja sa višestrukim
odabirom (po potrebi zamjeniti sa drugim mogućnostima). Za
višestruki odabir je potrebno koristiti i ctrl dugme na tastaturi
Dodatni atribut multiple
Elektronsko poslovanje
Dodavanje fajlova
Element <input> se koristi i za dodavanje fajlova (od .doc i .pdf do
jpeg formata) ali sa upotrebom atributa i vrijednosti type=“file”.
Ovdje će se pojaviti “browse” tj.pretraži sa mogućnošću upload-a.
Slično je i sa primjerom za pretplatu na newsletter:
Napravili bismo <input type=“text” name “email” /> a u narednom redu
bismo preko <input type=“submit” name “prijava” value=“Prijavi se” />
definisali bismo da se taj konkretan email šalje u bazi pretplatnika na nl.
Vrijednost
atributa
type je
file.
Method je
post
Elektronsko poslovanje
Oznaka forme
Element <label> koristimo kako bismo dodjelili oznaku formi.
Možemo umotati oznaku oko riječi koje označavamo ili podjeliti
odvojeno oznaku kada koristimo atribut for kojim definišemo za koga
vežemo oznaku.
Elektronsko poslovanje
Grupisanje elemenata forme
Moguće je grupisati više kontrola formi unutar elementa <fieldset>.
Ovo je posebno korisno kada je riječ o dužim formama.
Element <legend> koristimo kada nakon otvarajućeg taga gore
pomenutog elementa <fieldset> u koji unosimo naziv seta formi.
Fieldset
element
Legend element se
ubacuje nakon fs
