Univerzitet u Zenici

S S

T U D I O R UM

E R

Z I T E T U Z E

Pedagoški fakultet

Katedra za matematiku i informatiku

Programiranje za Internet

doc.dr. Samra Muja

v.as.mr. Samir Lemeš

Zenica, 2006

Programiranje za Internet

4.13.1.

Skripting jezici koji se izvršavaju na serveru (Server-side scripting) .............65

4.13.2.

Skripting jezici koji se izvršavaju kod klijenta (Client-side scripting) ...........67

Macromedia Dreamweaver.............................................................................68

5.1.

Uvod u Macromedia Dreamweaver ................................................................68

5.2.

Razvijanje strukture prezentacije....................................................................71

5.3.

Definisanje lokalne web prezentacije .............................................................72

5.4.

Zadavanje browsera ........................................................................................75

5.5.

Pravljenje i snimanje nove strane ...................................................................76

5.5.1.

Dajte naslov web strani...................................................................................78

5.5.2.

Zadavanje boje pozadine ................................................................................78

5.5.3.

Slika na pozadini strane ..................................................................................80

5.5.4.

Zadavanje podrazumijevane boje fonta ..........................................................80

5.6.

Smještanje teksta na stranu .............................................................................80

5.6.1.

Uvoženje teksta...............................................................................................81

5.6.2.

Centriranje i uvla

enje teksta..........................................................................82

5.6.3.

Pravljenje spiskova .........................................................................................83

5.6.4.

Ugnjež

ivanje lista .........................................................................................84

5.6.5.

Formatiranje znakova .....................................................................................84

5.6.6.

Promjena fonta................................................................................................85

5.6.7.

Promjena veli

ine fonta ..................................................................................86

5.6.8.

Mijenjanje boje slova......................................................................................87

5.7.

Definisanje html stilova ..................................................................................87

5.7.1.

Primjena html stilova ......................................................................................88

5.8.

Dodavanje specijalnih znakova.......................................................................89

5.9.

Dodavanje horizontalnih linija........................................................................89

5.10.

Automatsko dodavanje datuma.......................................................................90

5.11.

Umetanje grafi

kih elemenata na stranu.........................................................91

5.11.1.

Mijenjanje veli

ine grafi

kih elemenata i vra

anje na prvobitnu veli

inu......93

5.11.2.

Pozicioniranje slika na strani ..........................................................................94

5.11.3.

Dodavanje okvira oko slike ............................................................................95

5.11.4.

Omotavanje teksta oko slika ...........................................................................95

5.11.5.

Prilago

avanje prostora oko slike...................................................................96

5.11.6.

Poravnavanje slike u odnosu na jedan red teksta ............................................96

5.11.7.

Izrada mapiranih slika.....................................................................................97

5.12.

Crtanje tabela u prikazu layout .......................................................................98

5.12.1.

Mijenjanje nacrta tabele................................................................................100

5.12.2.

Formatiranje

elija ........................................................................................100

5.12.3.

Širina tabele i slike koje održavaju razmak...................................................101

5.12.4.

Izrada tabele u prikazu standard ...................................................................102

5.13.

Pravljenje šablona (Template-a) ...................................................................104

5.13.1.

Ubacivanje oblasti koje se mogu mijenjati u šablon .....................................104

5.13.2. Uklanjanje

promjenljivih oblasti...................................................................106

5.13.3. Izrada

opcionih oblasti šablona.....................................................................106

5.13.4. Pravljenje

oblasti koje se ponavljaju.............................................................107

5.13.5. Pravljenje

strana

pomo

u šablona.................................................................108

5.13.6. Kontrolisanje pojavljivanja opcionih oblasti ................................................109
5.13.7.

Izmjena stranica pomo

u šablona .................................................................109

Programiranje za Internet

III

6. Izrada

obrasca ...............................................................................................111

6.1.

Dodavanje polja za jedan red teksta..............................................................112

6.2.

Dodavanje polja za više redova teksta ..........................................................115

6.3. Dodavanje

polja za potvrdu ..........................................................................116

6.4. Dodavanje

radio-dugmadi.............................................................................117

6.5. Dodavanje

spiskova i menija ........................................................................118

6.6. Dodavanje

dugmadi ......................................................................................120

6.7.

Provjera valjanosti podataka u obrascima.....................................................121

6.8. Testiranje obrasca .........................................................................................123

7.

Meta oznake i komentari...............................................................................125

8. Pravljenje

spoljnih

kaskadnih opisa stilova ..................................................127

8.1. Mijenjanje

postoje

eg stila ...........................................................................130

8.2. Izrada

kaskadnih

opisa

CSS stilova za hiperveze .........................................132

8.3. Povezivanje

postoje

im opisom stila..........................................................133

9. Rad

bojama.................................................................................................134

9.1. Pozadina

stranice ..........................................................................................134

9.2. Kodiranje

boja ..............................................................................................135

10.

Slike u HTML dokumentima ........................................................................137

10.1. Veli

ina slika ................................................................................................137

10.2. Korištenje

manjih datoteka ...........................................................................138

10.3.

Prozirne i isprepletene GIF slike...................................................................139

11. CGI

programiranje........................................................................................140

11.1. Upoznavanje

sa skriptama ............................................................................140

12. JavaScript......................................................................................................147
12.1.

Java i JavaScript ...........................................................................................148

12.2. Kada

JavaScript?

Kada Java? Kada CGI? ....................................................149

12.3. JavaScript i HTML .......................................................................................150
12.4. Svojstva

JavaScript jezika ............................................................................152

12.4.1.

Varijable i automatsko pretvaranje tipova ....................................................152

12.4.2. Pisanje

vrijednosti i komentara.....................................................................154

12.4.3. Svojstva

objekata i nizovi .............................................................................154

12.4.4. Kontrola

tijeka programa ..............................................................................155

12.4.5.

Operatori i njihovi prioriteti..........................................................................155

12.4.6. Funkcije ........................................................................................................156
12.5. Stvaranje

objekata.........................................................................................157

12.6. Ugra

eni objekti ...........................................................................................157

12.6.1. Objekt Window.............................................................................................158
12.6.2. Objekt

Document..........................................................................................159

12.6.3. Objekti

Date i Math ......................................................................................160

12.7. Obrada

doga

aja ...........................................................................................160

12.8. Prakti

ne primjene JavaScripta.....................................................................163

12.8.1. Pozdravne poruke .........................................................................................163
12.8.2. Ispisivanje

pomo

i ........................................................................................164

Programiranje za Internet

15.1.5. ADO..............................................................................................................205
15.2. Baze

podataka

na web sajtovima ..................................................................205

15.2.1.

Windows vs. LINUX vs. ASP vs. PHP.........................................................206

15.3. Spajanje

bazu podataka............................................................................207

15.4. Manipulacija podacima.................................................................................209
15.5. Korisni

linkovi ..............................................................................................210

15.6.

Razvoj PHP & MySQL aplikacije korištenjem Dreamweavera ...................210

15.6.1. Priprema........................................................................................................211
15.6.2. Tabele ...........................................................................................................211
15.6.3. Definisanje sajta............................................................................................212
15.6.4. Konekcija na bazu.........................................................................................212
15.6.5. Unos

novosti .................................................................................................213

15.6.6. Zaštita

administrativnog dijela baze .............................................................213

15.6.7. Kreiranje

novih korisnika .............................................................................214

15.6.8. Login

forma ..................................................................................................216

15.6.9. Ograni

enje pristupa stranicama...................................................................217

15.6.10. Log out..........................................................................................................217

16. .NET .............................................................................................................218
16.1.

Šta je .NET Framework? ..............................................................................218

16.2. Osnovni

koncepti ..........................................................................................218

16.2.1. Common

Language Runtime ........................................................................218

16.2.2. Skupovi-assemblies ......................................................................................219
16.2.3. Opsezi imena ................................................................................................220
16.3. Konfigurisanje

okruženja..............................................................................221

16.3.1. Instalacija IIS-a.............................................................................................221
16.3.2. Instalacija

Visual Studio .NET-a ..................................................................222

16.4. Pregled

procesa

dinami

kih strana................................................................222

16.5.

Pregled obrade Web Service-a......................................................................223

16.6. Kreiranje

16.7. Korištenje

Web kontrola...............................................................................226

16.7.1. Dostupne

Web kontrole ................................................................................228

16.7.2. Definisanje Web formi..................................................................................228
16.7.3. Kodiranje

iza

formi u ASP.NET-u................................................................228

16.8. ASP.NET ......................................................................................................230
16.8.1. Na

in pisanja koda........................................................................................231

16.8.2. Programska

poboljšanja................................................................................233

17. XML .............................................................................................................235
17.1.

DTD – Document Type Definition ...............................................................237

17.2. Prikazivanje

XML

dokumenata u browseru .................................................239

18. Budu

nost: Ajax, Gadget,.............................................................................245

18.1. Ajax

.............................................................................................................245

18.2.

Ajax Agent 0.1..............................................................................................246

18.3. Gadget...........................................................................................................251
18.3.1. Kako

rade gadgeti .........................................................................................252

18.3.1. Gadget

datoteke ............................................................................................253

18.3.2. Kreiranje gadgeta..........................................................................................253

Programiranje za Internet

18.3.3. Sistemski

API-ji gadgeta ..............................................................................256

18.3.4. Postavke gadgeta ..........................................................................................257

19.

Planiranje i procedura dizajna web prezentacije...........................................261

19.1. Profiliranje ....................................................................................................261
19.2. Planiranje dizajna..........................................................................................261
19.3. Struktura sajta ...............................................................................................262
19.3.1. Slike ..............................................................................................................262
19.3.2. Fontovi..........................................................................................................263
19.3.3. Navigacija.....................................................................................................263
19.4. Izgradnja:

sklapanje

sadržaja u cjelinu .........................................................264

19.4.1. Flash

ili ne?...................................................................................................265

19.4.2. Veli

ina dokumenata ....................................................................................265

19.4.3. Podloge .........................................................................................................266
19.4.4. GIF

ili

JPEG?................................................................................................266

19.4.5. Web

tehnologije............................................................................................267

19.5.

Postavljanje na server – web hosting ............................................................268

19.6. Izbor

domene ................................................................................................269

19.7. Prijavljivanje

pretraživa

e........................................................................270

19.7.1. Meta

tagovi ...................................................................................................270

19.7.2.

Prijava na pretraživa

e..................................................................................272

19.7.3.

Trikovi za prijavljivanje na Yahoo ...............................................................274

19.7.4. Doma

i pretraživa

i......................................................................................275

19.8. Održavanje sajta............................................................................................275

20. Literatura.......................................................................................................278

Programiranje za Internet

je samo važno da se me

usobno dobro "razumiju". U po

etku, ARPAnet je spajao

samo

etiri institucije (uglavnom univerzitetske), dok ih je 1972. bilo oko dvadeset.

Do velikog buma dolazi po

etkom osamdesetih, ta

nije 1983., kada nastaju prve

lokalne mreže jer je Ethernet mrežna tehnologija postala svima dostupna. To je
omogu

ilo priklju

ivanje mnogih novih radnih stanica na Internet, a sve su one

inom koristile tada vrlo popularni operativni sistem Berkeley BSD Unix i

protokol IP za komunikaciju s drugim ra

unarima. Skupina protokola TCP/IP

razvijena je po

etkom osamdesetih, a 1983. prihva

ena kao standardni

komunikacijski protokol na ARPAnetu. Na mrežu se nisu priklju

ivale samo

pojedine radne stanice, ve

i cijele lokalne mreže: svako je htio u ARPAnet.

ARPAnet je tako postajao medij komuniciranja i za mnoge komercijalne
organizacije, a ne samo za vojne i univerzitetske ustanove, kako je prvobitno bilo
zamišljeno. Prednosti su bile sasvim o

ite: korisnik s jedne mreže mogao bi bez

problema komunicirati s korisnikom za nekim drugim ra

unarom, bilo gdje na

ARPAnetu.

Tako su nastajale neke namjenske lokalne mreže, poput NSFneta. NSF (Nacional
Science Foundation) je agencija ameri

ke vlade koja se bavi znanoš

u i ona je

stvorila NSFnet s namjerom da nudi ra

unarske usluge drugim korisnicima.

Konkretno, napravljeno je nekoliko centara sa super-ra

unarima (iako danas ono

što se onda zvalo "super-ra

unarom" stane u jedan sasvim prosje

ni Pentium) koji

su trebali pružati usluge složenih matemati

kih izra

unavanja i sli

ne usluge

drugim obrazovnim ustanovama. Napravljeno je samo pet takvih centara.

1.1.2. Organizacija Interneta

Zna

aj NSFneta je u tome što je zapo

eo s organiziranjem Internetove

komunikacijske infrastrukture. Isprva, NSFnet je bio povezan s drugim preko
ARPAneta. To rješenje nije bilo najbolje: najve

a prepreka bila je birokracija i

administracija, jer je trebalo urediti odnose izme

u takve dvije mreže

iji su

vlasnici dvije sasvim razli

ite vladine ustanove. Stoga su u NSF-u odlu

ili

napraviti svoju vlastitu mrežu, ali su pritom koristili ARPAnetovu IP tehnologiju
za komuniciranje. Pojedine

vorove u NSFnetu spojili su zakupljenim telefonskim

linijama koje su prenosile oko 7 KB podataka u sekundi. U usporedbi s današnjim
propusnostima to je bilo dosta malo, ali sasvim zadovoljavaju

e za zahtjeve koji su

se tada postavljali pred mrežu.

utim, trebalo je riješiti još jedan problem: kako povezati udaljene ra

unare na

novu mrežu? Iznajmljene telefonske linije vrlo su skupe u cijelom svijetu, te si je
rijetko tko mogao dopustiti pla

anje stotina ili hiljada kilometara posebne

telefonske linije do nekog zamišljenog centra mreže. Zbog toga je Internet od prvih
trenutaka zamišljan kao potpuno decentralizirana mreža. Problem je riješen tako da
su stvorene regionalne mreže u državama i ve

im gradovima. Zatim su se one

usobno povezivale,

ime su troškovi umrežavanja znatno pali, jer bi svaka od

Programiranje za Internet

mreža bila povezana samo s njoj najbližom. Na taj na

in, svaki ra

unar može do

do bilo kojeg drugog ra

unara. Doduše, ne neposredno, ali ARPAnetov razvijeni

protokol IP ve

je predvi

ao da drugi ra

unari moraju znati kako isporu

iti neku

poruku na ispravno odredište. Do današnjih dana, Internet upravo tako radi. Mnoge
druge mreže koje su tada postojale (npr. DECnet, Bitnet i sli

ne) povezale su se s

Internetom iako tada nisu koristile protokol IP. Pomo

u posebnih hardversko-

softverskih rješenja, nazvanih pristupnici (gateway), one su spojene na tu, sad ve

veliku, globalnu mrežu ra

unara.

Godine 1986. zapo

eo je rad na intenzivnoj komercijalizaciji mreže. Odlu

eno je

da se svi vojni ra

unari isklju

e u zasebnu podmrežu, a zastarjeli i spori

ARPAnetov sistem zamijenjen je boljim, NSFnetovim. Tako nam je ostao vrlo
dobro organizirani Internet, s NSFnetom kao ki

mom. (Ki

mom mreže – backbone

– smatra se struktura mreže na koju su spojeni svi drugi dijelovi mreže). U aprilu
1995. NSFnet je zasluženo "umirovljen", a ki

mom Interneta postale su sve do tada

povezane mreže. Zanimljivo je da tako Internet danas odli

no radi bez dva osnovna

etna dijela: ARPAneta i NSFneta. U me

uvremenu je osnovana i organizacija

CIX (Commercial Internet Exchange) putem koje su povezane sve tvrtke koje
pružaju pristup Internetu na komercijalnoj osnovi.

1.1.3. Ko upravlja Internetom?

Internet je decentraliziran u svojoj tehni

koj organizaciji, pa tako ne postoji niti

jedno vrhovno nadzorno tijelo koje bi nadziralo cijelu mrežu. Umjesto toga,
poslovi oko održavanja mreže, definiranja novih pravila, standarda i
komunikacijskih protokola povjereni su ve

em broju organizacija u cijelom svijetu.

Kada bi službeno postojao vrh, na njemu bi se našlo neprofitabilno društvo koje se
naziva The Internet Society (ISOC; http:/www.isoc.org). Njegove su zada

promocija Interneta i komunikacijske tehnologije. U njemu su

lanovi koji se

uglavnom bave tehni

kim razvojem Interneta, planiranjem njegove budu

nosti,

razvojem protokola i arhitektura, te donošenjem osnovnih pravila za rad mreže.

RFC je skra

enica od Request for Comment (zahtjev za komentarom). Kada se

neko dosjeti ne

ega što bi moglo unaprijediti Internet, neku uslugu ili neki

protokol, napiše svoj prijedlog i javno ga objavi na Internetu, traže

i od drugih da

mu pošalju svoje komentare. Nakon toga dopunjuje osnovni prijedlog prema
pristiglim komentarima i tako se stvaraju prijedlozi novih standarda ili usluga.
Svaki RFC nosi svoj broj. Pisci RFC-ova su dobrovoljci, to rade besplatno, a RFC-
ovi se mogu slobodno i neograni

eno koristiti. Dakle, ne radi se o službenoj

dokumentaciji ili standardima, ali ako ste zaista zainteresirani za prou

avanje

mreže i Interneta, RFC-ovi su golem izvor korisnih informacija. Mnogi od njih
namijenjeni su i po

etnicima, pa naprimjer, sadrže rje

nike, objašnjenja pojmova

ili upute za rad s pojedinim uslugama.

Programiranje za Internet

2. Klijentsko-serverski model

Kovanica client/server jedna je od onih koje se naj

eš

uju posljednjih godina.

Razli

iti pojedinci i razli

ite tvrtke tuma

e ovaj pojam na sasvim razli

ite na

ine

kada pri

aju o svojoj mreži. Zamislite bilo kakvu mrežu ra

unara. Mrežu valjda ne

trebamo definirati:

uli ste za takve stvari? Valjda jeste, nešto su jako popularne u

zadnje vrijeme... Svaki ra

unar koji pruža neku vrstu usluge ili koji nudi neke svoje

resurse na korištenje (npr. ispis na priklju

enom pisa

u ili korištenje podataka s

njegovog tvrdog diska) naziva se serverom. S druge strane, svaki ra

unar koji

koristi usluge servera naziva se klijentom.

U op

enitom slu

aju, serverom se naziva bilo koji ra

unar koji daje neke svoje

usluge na korištenje drugim ra

unarima. Jednako tako, klijent je bilo koji ra

unar

koji "posu

uje" i koristi uslugu ili neki resurs drugog ra

unara. Zbog toga svaki

unar može biti ili klijent ili server, i jedno i drugo, ili ništa od toga.

Druga važna stvar je na

in komunikacije izme

u klijenta i servera. To je posebno

važno, jer se svi komunikacijski protokoli, uklju

uju

i i TCP/IP i HTTP,

sporazumijevaju upravo na taj na

in. Kada klijent želi zatražiti pristup nekoj usluzi

ili resursu servera, šalje mu zahtjev za pristup usluzi. Nakon toga server šalje
odgovor klijentu i omogu

ava mu korištenje zatražene usluge. Na taj se na

zahtjevi i odgovori razmjenjuju sve do završetka komunikacije.

Klijentsko-serverski model nije danas tek tako prihva

en kao jedno od najboljih

rješenja za realizaciju ra

unarske mreže. Me

utim, postoje mnoge njegove

prednosti. Za po

etak, taj je model mreže vrlo ekonomi

an, jer se veliki ra

unarski

kapaciteti i kapaciteti za pohranjivanje podataka traže samo na strani servera. Osim
toga, pokazao se dosta prakti

nim u svakodnevnom radu, jer je mogu

e rasporediti

optere

enje jednog ra

unara (npr. glavnog servera u tvrtki) na više njih.

Klijentski program je jednostavno program kojim pristupate nekoj odre

enoj usluzi

na serverski. Naprimjer, pretraživa

za World Wide Web je primjer klijentskog

programa. Serverski program izvršava se na serverskom ra

unaru i opslužuje

zahtjeve klijenata. Bitno je jedino da klijent i server razmjenjuju podatke po istim
pravilima; informati

ari bi rekli: koriste

i se istim protokolom.

2.1. Mrežne adrese

Na velikoj mreži kakva je Internet, najve

i je problem bio osmisliti sistem

imenovanja ra

unara, koji

e koristiti svi protokoli, usluge i – na kraju krajeva –

sami korisnici da bi komunicirali s nekim ra

unarom. Sistem IP adresa koji je

razvijen imao je mnogo prednosti nad nekim drugim tada predloženim sistemima,
pa je prihva

en za korištenje na ARPAnetu i, kasnije, NSFnetu i Internetu.

Svaki ra

unar na mreži dobiva adresu u obliku

etiri broja odvojena ta

kama – to je

ono što

emo zvati IP adresom. Kako ra

unari najbolje rade s binarnim brojnim

Programiranje za Internet

sistemom, adrese su zapravo predstavljene s 32 bita. Naprimjer, mrežna adresa
nekog ra

unara može biti

10100001 00110101 00000011 00101000

Ljudima takav format, iz sasvim o

itih razloga, nije baš prihvatljiv, pa se takav

32-bitni niz binarnih cifara pretvara u

etiri dekadska broja koja su odvojena

kom. Dekadska adresa dobiva se tako da se svaka grupa od 8 bitova zasebno

pretvori u svoj dekadski brojni ekvivalent. Adresa gornjeg ra

unara je tako

161.53.3.40

što je prihvatljivije za pam

enje. Budu

i da dekadska vrijednost svakih 8 bitova

može biti izme

u 0 i 255, može se izra

unati da bi se na taj na

in moglo adresirati

nešto preko

etiri milijarde ra

unara.

Numeri

ka adresa ima dva važna dijela, koja nisu baš o

ita ako je promatrate samo

kao niz od

etiri broja. Me

utim, važno je znati da dio adrese predstavlja broj

mreže na koju je priklju

en ra

unar, a da drugi dio adrese predstavlja broj ra

unara

u toj mreži. Naravno, postavlja se pitanje "šta je šta" ako imate adresu od

etiri

broja: postoje barem tri mogu

nosti.

Upravo se sve te tri mogu

nosti koriste. Ve

smo rekli da je Internet velika mreža

manjih, lokalnih mreža koje se nalaze u tvrtkama ili organizacijama. Kada se
razmišljalo o na

inu izvedbe IP adresiranja, pretpostavilo se da

e postojati:

•

mali broj samostalnih mreža s jako velikim brojem ra

unara

•

odre

en broj mreža koje imaju srednji broj ra

unara

•

vrlo veliki broj mreža koje povezuju manji broj ra

unara.

Zbog toga su osmišljene klase adresa. Ako op

i format adrese napišemo kao

aaa.bbb.ccc.ddd

Klasa A su one adrese kojima je dio aaa adresa mreže, a ostali brojevi adresa
ra

unara. Tako može postojati samo nešto više od 120 takvih mreža, ali svaka

može imati preko 16 miliona ra

unara (jer posljednja tri broja ozna

avaju samo

unar). U klasi B, dio aaa.bbb predstavlja adresu mreže. Budu

i da su brojevi do

126 ve

zauzeti za klasu A, u klasi B prvi broj je ve

i od 128. Tako može postojati

16 hiljada mreža u toj klasi, a svaka od njih ima do 65 hiljada ra

unara (jer ra

unar

predstavljaju posljednja dva broja). U klasi C, prva tri broja, aaa.bbb.ccc,
ozna

avaju mrežu i zato je mogu

e imati oko 1 miliona mreža u toj klasi. Broj aaa

mora biti ve

i od 192. Samo zadnji broj, ddd, koristi se za oznaku ra

unara, pa

mreža klase C može u sebi imati samo malo više od 250 ra

unara.

U prvom stupcu tabele 1 je oznaka klase, u drugom i tre

em prvi brojevi iz IP

adrese izme

u kojih se nalazi ta klasa, a posljednja dva stupca pokazuju koliko

mreža može biti u toj klasi i koliko svaka od tih mreža može imati ra

unara.

Programiranje za Internet

odgovaraju

ih organizacija, imate sva prava na njeno korištenje. Sli

no je i na

Internetu: nakon što InterNIC prihvati ime vaše domene, sva su prava na njeno
korištenje samo vaša.

Time se pokušao okoristiti jedan desetogodišnji dje

ak iz Amerike, koji je

registrirao domenu toysrus.com kod InterNIC-a prije no što su to u

inili iz same

tvrtke. Zatim je tražio od ljudi iz tvrtke Toys R Us da mu u zamjenu za ime
domene daju jedan bicikl i (jedan) ra

unar. Predsjednik tvrtke smatrao je prijedlog

simpati

nim i povoljnim, pa je odlu

io "otkupiti" ime domene.

utim, cijela ta ideja s registriranjem imena domena poznatih tvrtki nije bila

dje

akova, nego njegovog pohlepnog ujaka, koji je registrirao još nekoliko imena

domena poznatih tvrtki prije no što su one to stigle u

initi. Ujak je zabrljao cijelu

stvar jer se nije mogao odlu

iti koje ra

unar želi dobiti od Toys R US, pa su za inat

neki direktori iz tvrtke odlu

ili da nema šanse niti da dobiju bicikl. InterNEC je

riješio problem tako da je domenu dao onome kome i pripada – tvrtki Toys R Us –
a dje

i ujak ostali su i bez ra

unara i bez bicikla.

Da biste od InterNIC-a dobili svoju grupu IP adresa i registrirali je kao domenu,
morate popuniti poseban formular. Do njega možete do

i pomo

u FTP-a na adresu

ftp.internic.net, pomo

u World Wide Weba na adresi http://www.rs.internic.net ili

elektroni

kom poštom s adrese [email protected]. Odgovor na elektroni

zahtjev dobit

ete u roku od dva dana.

2.2. Imena ra

unara

IP adrese u dekadskom obliku (

etiri broja s ta

kama) u svakom slu

aju ljudi lakše

pamte od binarnih adresa, ali to još uvijek nije to. Zato su mrežama i ra

unarima

nadjevena sasvim normalna imena. Ime se tako

er sastoji od nekoliko rije

i, koje

su opet odvojene ta

kama. Naprimjer, pogledajte adresu:

pi.unze.ba

Posljednja oznaka, ba, predstavlja oznaku države u kojoj se ra

unar nalazi. Oznaka

prije nje, u našem slu

aju unze, ime je organizacije u kojoj se ra

unar nalazi. Ime

organizacije i oznaka države zajedno se nazivaju domena. Kona

no, pi je ime

unara koje se nalazi u domeni unze.ba. Adresa ra

unara napisana u tom obliku

naziva se Fully Qualified Domain Name (FQDN). Gotovo uvijek kada se radi o
Webu, susretat

ete se upravo s ovakvim, a ne s IP adresama.

Broj oznaka u ovakvoj adresi nije ograni

en, ali ih je obi

no izme

u tri i pet.

Naprimjer, mogu

a je i adresa poput:

www.pf.unze.ba

Ovdje je www ime ra

unara, a sve ostalo predstavlja domenu. Kao što vidite,

domena ima tri dijela: osim zemlje i imena institucije (unze), u njoj se nalazi i
oznaka odjela (pf) te institucije gdje se ra

unar nalazi.

Programiranje za Internet

Zadnja oznaka u ovakvom imenu naj

eš

e je oznaka države (ba za BiH, hr za

Hrvatsku, si za Sloveniju, de za Njema

ku, uk za Veliku Britaniju, fr za Francusku,

au za Australiju itd). No, u slu

aju ra

unara koji se nalaze u Sjedinjenim

Ameri

kim Državama naj

eš

e nema oznake us, ve

na tom mjestu stoji oznaka

tipa mreže u kojoj se nalazi ra

unar. Naprimjer, edu ozna

ava obrazovanu

ustanovu, com komercijalnu organizaciju, gov vladinu ustanovu, mil vojno
ra

unar, org neku me

unarodnu organizaciju, net neku mrežu koja se prostire na

em podru

ju i tako dalje.

Ovakav na

in imenovanja ra

unara ostavlja mogu

nost dodavanja aliasa, odnosno

alternativnih zamjenskih imena za svaki ra

unar. Naprimjer, ako ra

unar pi.unze.ba

služi kao Web server, on obi

no dobiva dodatno ime www.unze.ba, ili kada bi na

njemu bila FTP arhiva s programima, ftp.unze.ba. Na taj je na

in olakšan pristup

korisnicima pojedinih usluga. Numeri

ka IP adresa i dalje ostaje ista, ali ra

unar

ima nekoliko FQDN imena.

2.3. Maskiranje

Podmreže dijele jednu ve

u mrežu na više manjih. Ako ste mrežni administrator, to

vam može ili ne treba koristiti. Naprimjer, ako vaša tvrtka dobije IP adresu u klasi
C koja dopušta samo 254 ra

unara, podmreže van ne trebaju: Ali, ako se radi o

nekoj ve

oj mreži, poželjno je njeno dijeljenje u više podmreža, jer se manje

mreže lakše održavaju, mrežni promet smanjuje, a sigurnost mreže poboljšava.
Recimo, mreža 161.53 predstavlja Hrvatsku. Podmreža 2 je zagreba

ko SRCE

(adresa ra

unara 181.53.2.x), a podmreža 128 je Institut Ru

er Boškovi

(adresa

unara 161.53.128.x). Loše izvedeno maskiranje naj

eš

e ima za posljedicu

potpuni raspad i nefunkcionalnost mreže, jer se poruke gube, putuju krivim
putevima, pro

u cijeli svijet da bi se zatim vratile na susjedni ra

unar i tako dalje.

Kada administrator mreže upotrijebi neke adrese za ozna

avanje podmreže mora na

neki na

in re

i protokolu TCP/IP kako da razlikuje jednu podmrežu od druge. Za to

se koristi maskiranje. Podmrežna maska je, poput IP adrese, tako

er 32-bitni

binarni broj, u kojemu se bitovi za adresu mreže (zajedno s podmrežom)
postavljaju na 1, a bitovi za adresu ra

unara na 0. To zahtijeva malo opreznog

binarnog ra

unanja i planiranja.

Naprimjer, ako vaše ra

unar pretražuje adresu klase B, 161.53.3.20 uz podmrežnu

masku 255.255.0, tada dio "161.53.3" smatra mrežom (podmrežom), a dio "20"
adresom ra

unara.

Podmrežna maska mora biti ista za sva ra

unara u podmreži. Ina

e, mreža ima

odre

enu podmrežnu masku

ak i ako nema podmreža. Naprimjer, maska za adrese

iz klase A je 255.0.0.0, za klasu B 255.255.0.0, a za klasu C 255.255.0. Da ste se
poslužili onime što znate o tome što ozna

ava mreža a što ra

unar u pojedinim

klasama adresa i

injenicom da 8 bitova koji su postavljeni na jedinicu tvore

dekadski broj 255 i sami biste došli do ovoga.

Programiranje za Internet

Najve

a razlika izme

u primarnih i sekundarnih DNS servera je u tome gdje

pronalaze svoje informacije o adresama. Primarni ih imaju zapisane u bazama
podataka, a sekundarni ih dobivaju od primarnih, ili od drugih sekundarnih servera.

I obi

ni ra

unari mogu se smatrati malim DNS serverima, iako ne u pravom smislu

te rije

i. Naime, nakon što ra

unar pita DNS servera (primarnog ili sekundarnog)

za IP adresu nekog drugog ra

unara, on

e je upamtiti u nekoj svojoj datoteci kako

slijede

i put ne bi moralo pitati DNS za adresu. Šta ako se promijeni IP adresa

nekog ra

unara i podatak zapisan na lokalnom ra

unaru postane pogrešan? Ra

unar

se želi povezati s ra

unarom kojemu je promijenjena IP adresa, a on zna samo

staru. Zbog toga naj

eš

e te keširane adrese imaju "rok trajanja", nakon

ega se

brišu s obi

nog ra

unara, pa ono ponovo mora kontaktirati DNS server da bi dobilo

adresu.

Slika 1. Funkcionisanje DNS-a

2.4.1. Obrnuto DNS mapiranje: pretvaranje IP u FQDN adresu

Evo i suprotnog slu

aja. Znate IP adresu, ali željeli biste znati i ime ra

unara.

Naprimjer, Web server može poželjeti saznati ime ra

unara s kojeg se javljate

pomo

u vaše IP adrese koju je dobilo prilikom uspostavljanja veze s vašim

klijentom. DNS zato može ustanoviti i ime nekog ra

unara, ako zna njegovu IP

adresu. Taj se proces naziva reverse lookup ili obrnuto mapiranje adresa, a ima i
drugih naziva.

Programiranje za Internet

Da bi se podržalo obrnuto mapiranje, na Internetu postoji posebna domena,
in-addr.arpa, koja se u prikazanom stablu adresa nalazi na vrhu.

vorovi u imenu te

domene su zapravo IP adrese. Tako domena in-addr.arpa ima 256 poddomena, koje
odgovaraju prvom broju IP adrese. Svaka od tih poddomena dalje opet može imati
256 poddomena koje odgovaraju drugom broju IP adrese, a svaka od njih opet ima
sljede

ih 256 poddomena za tre

i broj IP adrese. Kona

no, one se dijele na još 256

poddomena za

etvrti broj iz IP adrese. U toj krajnjoj grani nalazi se FQDN ime

unara.

Pogledajmo kako to radi: pretpostavimo da želite saznati koje se ra

unar koje iza

adrese 161.63.2.120. DNS kre

e od vrha stabla in-addr.arpa. On po

inje

pretraživati stablo od domene 161.in-addr.arpa. zatim ide dalje u dubinu do
53.161.in-addr.arpa, i tako sve dok ne do

e do kona

nih 120.2.53.161.in-addr.arpa.

U toj grani stabla zapisana je adresa jagor.srce.hr, što zna

i da je navedenoj IP

adresi odgovarao upravo taj ra

unar. Ovakva stabla adresa održavaju se na DNS

serveru paralelno s bazama podataka koje pretvaraju FQDN adresu u IP adresu, pa
su tako mogu

e pretvorbe adresa u oba smjera.

Programiranje za Internet

Tako je nastao i termin port. Radi se jednostavno o nekoj identifikacijskoj oznaci
pojedine usluge. Ili, još slikovitije, radi se o "vratima" neke usluge na pojedinom
serveru. Port se ozna

ava brojem izme

u 0 i 65535. Neke osnovne i uobi

ajene

usluge na Internetu imaju brojeve do 1000, dok se druge koriste na pojedinim
operativnim sistemima ili za neke ne toliko standardizirane usluge.

Evo i kako stvar radi: kada se pokrene serverski program za neku uslugu, on za
sebe rezervira neki broj porta (pogledajte tablicu 2) i

eka da u pristignu zahtjevi

upravo na taj port. Kada tome serveru pristignu neki paketi s podacima od nekog
klijenta, a zatim protokol za komunikaciju – TCP/IP – prvo pogleda koji je broj
porta u tim paketima, a zatim proslijedi zahtjev odgovaraju

em serveru, pod

uvjetom da svi oni rade na razli

itim portovima. Klijentski programi znaju na

kojem se od portova izvršava serverski program i tako mu znaju pristupiti. Stvar je
riješena, lako i jednostavno.

Tabela 2 Osnovni portovi i usluge koje se na njima izvršavaju

Broj
porta

Osnovni
protokol

Aplikacijski
protokol ili usluga

Opis usluga

TCP/UDP

daytime

Daje trenutno lokalno vrijeme

TCP

qotd

Quote of the Day

21 TCP

ftp

Prenošenje

datoteka

23 TCP

telnet

Terminalsko

povezivanje

25 TCP

SMTP

Prenošenje

elektroni

ke pošte

37 TCP/UDP

timeserver

Time

server

42 TCP

nameserver

Name

server

TCP

whois

Dobivanje podataka o korisniku/ra

unaru

TCP/UDP

DNS

Domain Name Server

UDP

tftp

Trivial File Transfer Protocol

70 TCP

gopher

Gopherski

serveri

TCP

finger

Dobivanje podataka o korisniku/ra

unaru

TCP

HTTP

World Wide Web serveri

110 TCP

POP3

Post-Office-Protocol

(elektroni

ka pošta)

119 TCP

NNTP

Pristup

novinskim

grupama

210 TCP

WAIS

Pristup

bazama

podataka

517

UDP

talk

Razgovor s drugim korisnikom

518 UDP

ntalk

Nova

verzija

talka

540

TCP

UUCP

Zastarjeli protokol Unix-to-Unix Copy

Pogledajte sliku 2. Na toj slici, jedan je ra

unar istovremeno server za tri usluge:

World Wide Web (HTTP), prenošenje datoteka (FTP) i E.mail (SMTP). Ti se
serverski programi izvršavaju na portovima 80, 21 i 25. Ako klijent želi pristupiti
Web serveru, upu

uje svoj zahtjev na port 80. Istovremeno, neki sasvim drugi

klijent na sasvim drugom kraju svijeta može komunicirati s portom 25 na istom
serverskom ra

unaru i tako pristupati serverskom programu za E-mail. Više

serverskih programa na jednom ra

unaru tako ne smetaju jedan drugome i

poslužuju svaki svoje klijente.

Programiranje za Internet

Slika 2. Primjer komunikacije klijenta i servera, gdje klijenti pristupaju razli

itim

portovima na istom serveru kako bi koristili razli

ite usluge

Pogledajmo još na trenutak tablicu 2. U prvom se stupcu nalaze brojevi portova
nekih važnijih usluga na Internetu. U drugom je stupcu tip protokola pomo

kojega se pristupa pojedinom portu. Kao što vidite, ovdje stoji ili oznaka TCP, ili
oznaka UDP, ili u nekim slu

ajevima obje. Ta se oznaka zapravo odnosi na

osnovni komunikacijski protokol niske razine pomo

u kojega se pristupa tom

portu. Skupina komunikacijskih protokola TCP/IP zapravo sadrži dva takva
protokola niske razine, TCP i UDP. Ta dva protokola samo prenose podatke
mrežom i oni mogu bez problema dijeliti jedan isti broj porta, zato što je za
uspješno uspostavljanje veze sa serverskim programom potrebno osim IP adrese i
broja porta znati i tip osnovnog protokola pomo

u kojeg mu se pristupa.

U tre

em stupcu tabele 2 nalazi se ime aplikacijskog protokola (protokola više

razine) koji se koristi za komunikaciju s pojedinom uslugom. Kona

no, u

etvrtom

je stupcu samo kratak opis usluge koja se izvršava na navedenom protu.

3.2. Rad na udaljenom ra

unaru (Telnet)

Rad na udaljenom ra

unaru jedna je od osnovnih Internet usluga. Program kojim se

to omogu

uje standardni je dio Unixa i naziva se Telnet. Telnet omogu

ava da se,

sa ra

unara na kojemu radite, povežete s ra

unarom u susjednoj sobi ili na drugom

kraju svijeta i koristite njegove usluge. Vaše ra

unar tada postaje terminal, koji na

svom ekranu samo prikazuje rezultate izvršavanja programa na udaljenom
ra

unaru, a sve što otipkate tako

er odmah proslje

uje udaljenom ra

unaru. Da

biste se povezali s udaljenim ra

unarom, trebate samo znati njegovu adresu i

pokrenuti program za telnet sa imenom ra

unara na koji se spajate.

3.3. HTML

HTML (Hypertext Markup Language) je alat kojim se stvaraju hipertekstualni
dokumenti za upotrebu na Webu. Nastao je iz op

enitijeg jezika SGML (Standard

Programiranje za Internet

teksta, što možete vidjeti i iz njegovog punog imena. Napravljen je kako bi
omogu

io developerima da definišu kako

e se tekst u njihovim dokumentima

prikazati na korisni

kom ra

unaru, te da omogu

i korisniku pristup ostalim

dokumentima povezanih hiperlinkovima. Mnogo tehnologija je razvijeno kako bi
popunile rupe u podru

jima gdje HTML ne zalazi, jednostavno zbog toga što nije

bio namijenjen i za šta više osim formatiranja teksta nezavisno od operativnog
sistema. HTML je prošao nekoliko revizija i standardizacija.

HTML 1.0

Ovo je prva verzija HTML jezika. Definisana je krajem 1990. godine i tada je samo
NeXT operativni sistem mogao

itati HTML dokumente. "Otac" HTML-a, Tim

Berners-Lee, primijetio je nedostatak tekstualnog programskog jezika neovisnog o
operativnom sistemu za upotrebu na Internetu, tako da je specifikacije HTML-a 1.0
postavio na Internet. Prije objavljivanja specifikacija, Bermers-Lee je napravio
reviziju HTML-a kako bi postigao neovisnost o operativnom sistemu kroz softver
za kompajliranje, danas poznat kao Browser. U samo nekoliko mjeseci browseri
prve generacije po

eli su podržavati ovaj standard, me

utim stvari nisu bile tako

jednostavne. Gotovo svaki od browsera imao je svoju specifi

nu verziju HTML-a,

a samo nekolicina njih je bila me

usobno kompatibilna. Godinama su razne grupe

za standarde pokušavale unificirati ovaj jezik i napraviti ga industrijskim
standardom, ali ti pokušaji nisu urodili plodom sve do pojave HTML-a 2.0.

HTML+

U 1993. godini, dok je borba za standarizaciju HTML-a uveliko trajala, pojavila se
inicijativa za nadogradnju jezika za verziju HTML+. Na žalost, ova verzija nikada
nije priznata, iako je nudila ve

u fleksibilnost od HTML-a 2.0 koji je kasnije

postao standard. Me

utim, važno je pomenuti HTML+ iz razloga što je on imao

uticaja na razvoj sljede

ih verzija HTML-a.

HTML 2.0

Ovo je prva verzija ovog jezika koja je postala standardom. Ugledala je svjetlo
dana 1995. godine, dakle trebalo je

etiri godine i nekoliko neuspjelih pokušaja da

bi se došlo do standarda za HTML jezik. Ubrzo nakon objavljivanja specifikacija
HTML-a 2.0 pojavila su se dva browsera koja danas zauzimaju najve

i udio tržišta

– Netscape Navigator 2.0 i Microsoft Internet Explorer 2.0. Oba su potpuno
podržali specifikacije HTML-a 2.0, a treba napomenuti kako je to prva verzija
ovog jezika koja je imala podršku za upotrebu slika i formi u web dokumentima.

HTML 3.0

Ubrzo nakon eksplozije weba i Interneta uopšte, što je i donijelo HTML-u 2.0
veliku popularnost, web developeri, odnosno dizajneri web stranica, po

eli su

primje

ivati nedostatak fleksibilnosti tadašnje verzije HTML-a. Kao rezultat toga,

zapo

et je razvoj nasljednika HTML-a 2.0. Dosta toga uzeto je iz nikada priznatog

HTML+ jezika, a najve

e novosti su podrška za tabele, više mogu

nosti

formatiranja teksta, ve

a fleksibilnost u formatiranju izgleda stranica... Me

utim,

Programiranje za Internet

poput svoga prethodnika – HTML+ jezika, i HTML 3.0 je prošao poprili

no loše

na tržištu. Promjene u odnosu na HTML 2.0 su bile ogromne i zahtijevale su velike
prilagodbe browsera. Ali, kompanije koje su pravile browsere odlu

ile su kako im

je to prevelik i neisplativ poduhvat, tako da HTML 3.0 nikada nije u potpunosti bio
podržan u njihovim proizvodima.

HTML 3.2

U želji da zaobi

u nedostatke HTML-a 2.0 neki browseri su po

eli da koriste svoje

specifi

ne tagove kako bi postigli ve

u fleksibilnost jezika. Na žalost, ovo je

dovelo u pitanje originalnu ideju iza HTML jezika - univerzalnog jezika za
publiciranje dokumenata na webu. Zato je W3 Consortium pokrenuo inicijativu za
razvijanje nove verzije HTML-a Rezultat je bio verzija 3.2 koja je sadržavala
HTML 2.0, HTML 3,0, kao i neke specifi

ne tagove koje su browseri po

eli

koristiti. U maju 1996. godine objavljene su specifikacije nove verzije, a svi veliki
browseri su ih u potpunosti podržavali. Istina, u finalnoj verziji HTML 3.2
nedostajale su neke mogu

nosti poput style sheetsa, napredne matemati

funkcije, okviri, kao i intemacionalizacija jezika.

HTML 4.0

HTLM 4.0 je kona

no postao standardom u decembru 1997. godine i samo je

djelimi

no bio podržan u browserima te generacije - Netscape Navigatoru 4.0 i

Microsoft Internet Exploreru 4.0. Do tada se razvoj HTML odvijao uvijek tako da
proširenja jezika odgovaraju browserima na tržištu, ali to se promijenilo u HTML-u
4.0 koji predstavlja prvi pokušaj da se ovaj jezik zaista proširi i postane fleksibilan
i prilagodljiv. Uvo

enje taga OBJECT omogu

ilo je ubacivanje koda skripti

direktno u HTML dokumente, uvedene su Cascading Style Sheets (CSS) i mnoge
druge stvari koje su nedostajale u HTML-u 3.2. Sada je granica u razvoju web
stranica bila samo mašta web dizajnera i ništa više.

Dynamic HTML (DHTML)?

DHTML nije nova verzija, odnosno revizija HTML jezika. Nije niti neka
specifi

na tehnologija, kao što su na primjer ActiveX ili CSS. DHTML kombinira

mnoge tehnologije kao što su CSS, JavaScript, VBScript, Document Object Model,
ActiveX zajedno sa HTML-om kako bi stvorio dinami

ne web stranice.

Jednostavno re

eno, DHTML je HTML koji se može mijenjati

ak i nakon što je

stranica downloadovana i prikazana u browseru. Kada pre

ete mišem preko neke

slike, ona se promijeni u drugu sliku, ili kada pre

ete preko nekog paragrafa,

njegova se boja promijeni... Ili, otvorite stranicu, a naslov doleti s desne strane i
smjesti se u vrh stranice. Sve što se može uraditi sa HTML-om može pomo

DHTML-a biti promijenjeno i nakon što je stranica downloadirana u browser.
HTML je ono što mijenjate, DOM (Document Object Model) je ono što ga

ini

promjenljivim, a client-side scripting (VBScript i JavaScript) je ono što ga mijenja.
I upravo to je Dynamic HTML.

Programiranje za Internet

4. HTML

Web server je mehanizam namijenjen distribuiranju dokumenata kroz Internet.
Iako

e drage volje prebacivati po Mreži bilo koje tipove dokumenata, najvažniju

klasu predstavljaju oni koji su sastavljeni u jeziku HTML. Radi se o "maternjem
jeziku" Weba kojim se odre

uje formacija, sadržaj i funkcija nekog

hipetekstualnog dokumenta. Njime se kombinira nekoliko važnih elemenata:
namijenjen je kontroliranju na

ina na koji

e pretraživa

ki programi prikazati

dokument, kreiranju hipertekstualnih veza izme

u razli

itih mjesta u dokumentu,

kreiranju hiperveza izme

u razli

itih dokumenata, te kreiranju hiperveza s drugim

servisima na Internetu. HTML vam tako

er omogu

ava da u dokumente ubacujete

grafiku, zvuk i druge multimedijalne zapise. Kako su HTML dokumenti mjesta na
kojima je ve

ina pravih podataka doista pohranjena, dobar dio kreiranja jednog

cjelovitog Web servera sastoji se od njihovog pisanja.

Stranica na World Wide Webu sastoji se od skupa datoteka pohranjenih negdje na
disku nekog ra

unara na kojem je instaliran Web server, odnosno rje

e, FTP

server. Ta

na lokacija tih datoteka odre

ena je URL adresom. Web stranica se u

ini slu

ajeva sastoji od teksta i slike, s time da se sav tekst i svaka pojedina

slika nalaze u zasebnoj datoteci. Slikama se uvijek pristupa pomo

u imena datoteke

u kojima su pohranjene, pa se tako jedna te ista slika može koristiti više puta unutar
jedne ili više razli

itih stranica. Svim drugim multimedijalnim elementima pristupa

se kroz pomo

ne aplikacije koje pokre

e pretraživa

ki program kada korisnik

klikne na odgovaraju

u hipertekstualnu vezu.

Oblikovanje Web stranica u mnogim se pogledima razlikuje od tradicionalnog
stolnog izdavaštva. Najve

a je razlika u tome što sada kreirate stranicu koja nije

ograni

ena svojim ta

nim formatom. Korisnikov pretraživa

ki program

automatski prelomiti re

enice teksta u zasebne retke, ovisno o širini prozora, te

mu omogu

iti da se še

e gore-dolje po stranici. U stolnom izdavaštvu potrebno je

no odrediti tipove pisma i stilove, podesiti razne veli

ine, te ta

no zadati

poziciju svakog pojedinog elementa na stranici. Autori Web stranice ne moraju se
zamarati s takvim preciznim podešavanjima, jer se za kona

an izgled stranice ne

brinu oni, ve

korisnikov pretraživa

ki program.

Kada kreirate Web stranicu, vi zapravo u tekst koji

e se prikazati ubacujete HTML

naredbe kojima opisujete kako biste htjeli da izgleda svaki pojedini element u
dokumentu. Tim postupkom se koristite nekom apstraktnom vrstom programiranja,
budu

i da na neki na

in kreirate pravu malu multimedijalnu aplikaciju. Razlika

izme

u izrade HTML dokumenta i programiranja je u tome što

e se krajnji

rezultat mo

i koristiti neovisno o hardverskoj platformi i operativnom sistemu, a

korisnik ga ne

e mo

i upotrebljavati za obradu nekih svojih podataka. Ipak, koliko

god da se oblikovanje Web stranica razlikuje i od stolnog izdavaštva i od
programiranja, ono obuhva

a elemente obiju ovih radnji. Ako se uzmu u obzir i

injenice da je za upotrebu naprednih mogu

nosti HTML-a kakve su obrada

obrazaca i ugradnja Java aplikacija potrebno u

i u programerske vode, te da morate

Programiranje za Internet

kreirati grafi

ki vrlo privla

nu stranicu ako se želite pred korisnicima istaknuti

u milionima drugih Web stranica koje ve

postoje na Internetu, dolazi se do

zaklju

ka da pravi autor HTML dokumenata mora biti i dobar dizajner i dobar

programer.

4.1. Struktura stranice

Datoteka koja se sastoji od teksta oboga

enog HTML naredbama op

enito se

naziva HTML dokumentom. Svaki HTML dokument zapo

inje naredbom

<HTML>, a završava s </HTML>. On se sastoji od dva dijela; zaglavlja koje je
obuhva

eno naredbama <HEAD> i </HEAD>, te tijela koje se nalazi unutar

oznaka <BODY> i </BODY>. Zaglavlje sadrži neke osnovne informacije o
dokumentu, dok se tijelo sastoji od teksta i naredbi kojima se taj tekst oblikuje.
Najjednostavnija informacija koju možemo smjestiti unutar zaglavlja je naslov
naše Web stranice, a to se

ini upotrebom naredbe <TITLE>. Da bi vam sve ovo

bilo jasnije, pogledajte sljede

i primjer minimalnog HTML dokumenta:

<HTML>

<HEAD>

<TITLE>mala Web strani

ica</TITLE>

</HEAD>

<BODY>

Ovdje se nalazi tekst koji želite prikazati na Webu,

zajedno s HTML oznakama koje ga formatiraju, te s

kojima se pozivaju slike i neki drugi elementi.

</BODY>

</HTML>

Važno je razumjeti da upravo naredbe <BODY> razdvajaju dokument u dvije
cjeline, a ne reci ili razmaci koje smo ostavili praznima izme

u redaka. Da uop

nismo koristili tipku Enter u prethodnom primjeru, tj. da smo cijeli ovaj dokument
napisali kao jednu duga

ku liniju teksta, on bi još uvijek generirao Web stranicu

koja izgleda potpuno jednako. Naš HTML dokument, prema tome, bit

e potpuno

druga

ije formatiran kada ga gledamo s editorom teksta, a druga

ije kad se gleda s

pretraživa

kim programom. Sli

no tome, svi dodatni razmaci izme

u rije

odlomaka ili znakova, svi dodatni Enteri koje

ete nabaciti tek tako da HTML kod

bude što duži i svi tabulatori, u pretraživa

kom programu

e se jednostavno

zanemariti, što zna

i da

e biti zamijenjeni jednim jedinim razmakom. Stoga

slobodno upotrebljavajte te elemente prilikom ure

ivanja HTML dokumenta kako

biste ga u

inili

itljivijim za daljnju upotrebu ili za neke kasnije ispravke.

U primjeru smo kao jedini element zaglavlja naveli naslov dokumenta. Kod ve

ine

Web stranica to je jedna stvar koju ljudi redovno stavljaju u zaglavlje, premda se

Programiranje za Internet

Tabela 3. Upotreba posebnih znakova unutar teksta

Simbol HTML

oznaka Zna

enje

& & ampersand
< &ltM manje

> >

e od

® ® registrirana

oznaka

pravo

malo a s desnom kosom crticom

malo a s lijevom kosom crticom

malo a s obrnutom kva

icom

malo a s preglasom (dvije to

kice)

&arubg;

malo a s kruži

malo c s kukicom, francusko slovo

malo n s tildom

malo o prekriženo kosom crtom

&szling njema

ko slovo oštro s

&aeling;

posebna oznaka za izgovor

  neizbrisivi

razmak

4.3. Sintaksa naredbi

HTML naredbe mogu biti pune ili prazne. Pune naredbe odnose se na tekst koji je
njima obuhva

en, a sastoje se od po

etne i završne oznake. Po

etna oznaka

zapo

inje simbolom < (manje od), iza

ega se navodi sama naredba te eventualno

neki dodatni argumenti. Kraj po

etne oznake prepoznaje se po simbolu > (ve

e od).

Završna oznaka razlikuje se od po

etne po tome što ne smije posjedovati nikakve

dodatne argumente, ali zato izme

u simbola < i naredbe uvijek mora sadržavati

kosu crtu (/). Primjer pune naredbe bio bi:

<A HREF="piramida.html">Saznajte sve o piramidi</A>

U ovom primjeru po

etna oznaka je <A HREF="piramida.html">, a završna </A>.

Primje

ujete da po

etna oznaka sadrži i jedan argument. Za razliku od punih

naredbi kojima se obuhva

ao odre

eni dio teksta, prazne nam služe kako bismo

nešto mogli ubaciti unutar teksta, poput slike, vodoravne linije ili oznake za novi
redak. Prazne naredbe ne dolaze u parovima, pa tako kod njih postoji samo po

etna

oznaka, a ne i završna koja bi sadržavala kosu crtu. Slijedi nekoliko primjera
praznih naredbi.

<BR> Kraj retka;

nadolaze

i tekst bit

e ispisan u novom retku.

<HR> Vodoravna linija koja se iscrtava duž stranice.

Kao i kod punih, tako se i kod praznih naredbi mogu koristiti argumenti kojima se
odre

uju neke konkretne vrijednosti. Sljede

i primjer prikazuje naredbu IMG

Programiranje za Internet

kojom se unutar teksta ubacuje slika. Ta naredba uvijek dolazi s argumentom SRC
kojem se dodjeljuje ime datoteke koja sadrži željenu sliku.

<IMG SRC="piramida.gif!> Slika piramide.

Argumenti se zapisuju u obliku varijabla=vrijednost, gdje vrijednost mora
odgovarati tipu varijable. Ako se, kao u našem primjeru, varijabli dodjeljuje neka
tekstualna oznaka poput imena neke datoteke, onda te vrijednost mora biti
obuhva

ena navodnim znacima, dok se oni kod numeri

kih veli

ina izostavljaju.

Katkada se argumentima ne dodjeljuju nikakve vrijednosti ukoliko oni
predstavljaju neku logi

ku vrijednost. Tako je, naprimjer svejedno ho

ete li kao

argument navesti BORDER="yes" ili samo BORDER. Ako vaša naredba sadrži
više od jednog argumenta, onda se oni odvajaju razmacima, a ne zarezom kao što
je to obi

aj kod ve

ine programskih jezika.

Kod primjera za punu oznaku upotrijebili smo naredbu A koja se koristi za
definiranje hipertekstualnih veza. Izraz "Saznajte sve o piramidi" u pretraživa

kom

programu bi se kod tog primjera prikazao druga

ije od ostalog teksta, naj

eš

ozna

en plavom bojom i podcrtan, kako bi se korisniku dalo do znanja da

e se

klikom na njega u

itati nova stranica. U ovom slu

aju radi se o stranici koja je

sadržana u dokumentu piramida.html, koji smo dodijelili kao vrijednost argumentu
HREF (Hypertext REFerence). U nastavku je dan primjer koji ilustrira upotrebu
svih dosad spomenutih sintakti

kih pravila, te upotrebu obiju vrsta HTML naredbi i

oznaka za posebne znakove.

<HTML>

<HEAD>

<TITLE>Jednostavan HTML primjer </TITLE>

</HEAD>

<BODY>

<H1>Ovo je naslov prve razine </H1>

Dok nam naredba <STRONG>TITLE</STRONG> koristi za

definiranje naslova dokumenta koji

e se pojaviti na

rubu prozora pretraživa

kog programa, naslovi prve

razine pojavljuju se unutar same Web stranice i mogu se

upotrijebiti više puta u istom dokumentu. <P> Ovo je

drugi odlomak teksta pomo

u kojega se upoznajemo s

praznom naredbom koja odvaja odlomke. U prvom smo

odlomku upotrijebili punu naredbu &1t;STRONG&gtM kako

bismo podebljali dio teksta.

</BODY>

</HTML>

Slika 3 prikazuje kako ovaj primjer izgleda kada se u

ita u Internet Explorer.

ite odmah da se naslov "Jednostavan HTML primjer" pojavljuje u gornjem

Programiranje za Internet

ispred znaka >, premda ne postoji neki razuman razlog zašto biste ih uop

e koristili

bilo gdje. String:

< H1 >Tu nešto ne valja!< /H1 >

e biti prikazan kao naslov. Simboli < i > bit

e ignorirani zajedno sa sadržajem

koji se nalazi izme

u njih, a prikazat

e se samo re

enica "Tu nešto ne valja!" i to

kao obi

an tekst. Pretraživa

ki programi su vrlo tolerantni prema pogreškama i

inu

e ih jednostavno ignorirati, ne javljaju

i korisniku ništa. Zbog toga je

važno da poštujete sintaksu jezika HTML jer za njega ne postoji kompajler koji bi
vas kao autora obavijestio o u

injenim sintakti

kim pogreškama.

HTML naredbe mogu se ugnjež

ivati, tj. koristiti jedna unutar druge, pa

ete tako

i koristiti hipertekstualne veze u listama ili kosi tekst unutar podebljanog. Neke

se naredbe, me

utim, ne smiju kombinirati kao, na primjer, hipertekstualne veze

unutar drugih hipertekstualnih veza. Postoje i situacije kada je dozvoljeno
kombiniranje, ali ga pretraživa

ki programi ignoriraju. To se, naprimjer, doga

kod upotrebe naredbi za tekstualne stilove unutar naslova.

Unutar HTML dokumenta možete koristiti i komentare kako biste svoj rad u

inili

što preglednijim, kao i kod drugih programskih jezika. Svaki pretraživa

ki program

e u potpunosti ignorirati komentare, što zna

i da unutar komentara smijete

upisivati

ak i HTML naredbe te posebne znakove. To, me

utim, nije preporu

ljivo

budu

i da postoje starije verzije nekih pretraživa

a koje ne prepoznaju oznake za

komentare. Komentari se moraju smjestiti unutar oznaka , a ne smiju se
ugnjež

ivati. Postoji nepisano pravilo da se svaki pojedini redak komentara

obuhva

a ovim oznakama, kako bi HTML dokument bio što pregledniji.

4.4. SSI

Ako se vaše stranice nalaze na ra

unaru na kojem je instaliran Web server koji

podržava SSI, mo

ete iskoristiti SSI (Server-Side Includes) tehnologiju kako

biste dotjerali svoje HTML dokumente bez potrebe za izradom tzv. CGI skripte.
SSI vam omogu

ava da na jednostavan na

in unutar stranice ugradite korisne stvari

poput trenutnog vremena, datuma ili veli

ine dokumenta. Tako

ete mo

ubacivati druge dokumente u sadržaj trenutnih HTML dokumenata, što je korisno
kod nekih uobi

ajenih tekstova poput poruke o zaštiti autorskih prava ili adrese

vaše tvrtke.

Kada je Web server konfiguriran tako da radi s SSI tehnologijom, on prepoznaje
poseban tip HTML dokumenata

iji je MIME tip nazvan

Text/x-server-parsed-html.

Ti dokumenti posjeduju ekstenziju .shtml, osim ako server nije konfiguriran
druga

ije. Kada se serveru pošalje zahtjev za jednim takvim dokumentom, on

e ga

otvoriti, te

e potražiti sadrži li ugra

ene posebno ozna

ene komentare. Ti

komentari sastavljeni su sljede

om sintaksom:

Programiranje za Internet

<!-- #naredba paraml="vrijednost1"

param2="vrijednost"...-->

Naredbe govore serveru što želite napraviti (ispred njih se obavezno piše znak #),
dok jedan ili više parametara daju dodatne podatke. Postoji šest razli

itih naredbi:

echo, include, fsize, flastmod, exec i config, a u nastavku je opisano kako se svaka
pojedina koristi.

Naredba echo zahtijeva od servera da unutar HTML dokumenta ispiše vrijednost
neke globalne varijable koja se koristi na serverskom ra

unaru. Postoje

etiri

varijable koje možete koristiti. Prva je DOCUMENT_NAME, a namijenjena je
ispisivanju datote

nog imena trenutnog dokumenta, druga je DATE_LOCAL, a

koristi se za ispisivanje lokalnog vremena i datuma; vrijeme po Greenwichu
ispisuje se varijablom DATE_GMT, a varijablom LAST_MODIFIED može se
ispisati datum zadnje izmjene trenutnog dokumenta. Evo i primjera:

Naredbom include može se u sadržaj trenutnog dokumenta ugraditi sadržaj nekog
drugog HTML dokumenta. S ovom se naredbom mogu koristiti parametri virtual i
file, ovisno o tome navodi li se URL adresa drugog dokumenta relativno u odnosu
na trenutni direktorij, odnosno relativno u odnosu na korijenski direktorij ra

unara

s Web serverom. Na mjestu gdje u trenutnom dokumentu želite uvrstiti sadržaj
drugog dokumenta, upišite ovakvu naredbu:

Naredbama fsize i flastmod može se unutar Web stranice ispisati veli

ina, odnosno

datum zadnje promjene bilo koje datoteke koja se nalazi na vašem Web serveru.
Kao i kod naredbe include, mo

ete upotrijebiti parametre virtual i file, kao u

sljede

em primjeru:

Pomo

u naredbe exec omogu

eno je izvršavanje bilo kojih programa na Web

serveru

iji se ispis preusmjerava u trenutni dokument. Radi se o potencijalno

opasnoj opciji, pa je mnogi administratori onemogu

avaju. Ovisno o tome želite li

izvršiti neki program koji predstavlja sastavni dio UNIX ljuske sistema na kom
radite ili neka CGI skripta, upotrijebit

ete parametre cmd ili cgi. U nastavku je dan

primjer pomo

u kojeg možete unutar HTML dokumenta upotrijebiti naredbu

finger, podržanu na svim UNIX sistemima:

Posljednja naredba, config, koristi se kako bi se odredilo ponašanje servera u
slu

aju da do

e do greške prilikom korištenja drugih naredbi SSI tehnologije, te

kako bi se odredio na

in obavještavanja korisnika Web stranice o pogreški.

Parametrom errmsg navodi se tekst koji

e se ispisati u dokumentu u slu

aju

pogreške, kao što je navedeno u primjeru:

Programiranje za Internet

<HTML>

<HEAD>

<TITLE>Razine naslova</TITLE>

<HEAD>

<BODY>

<H1<Naslov prve razine – najve

a slova </H1>

Ovo je prvi odlomak teksta koji se mora odvajati

posebnom

naredbom.

<H2>Naslov druge razine – velika slova</H2>

Ovo je drugi odlomak teksta.

<H3>Naslov

tre

e razine – mala slova </H3>

Ovo je drugi odlomak teksta.

<H4>Naslov

etvrte razine – mala slova </H4>

etvrti odlomak teksta ispisan je slovima gotovo

iste veli

ine kao i naslov

etvrte razine.

<H5>Naslov pete razine – mala slova </H5>

Peti odlomak teksta vidi se bolje od naslova pete

razine.

Kakve su ovo buhice gore?

</BODY>

</HTML>

Na slici 4 možete vidjeti kako ovaj primjer izgleda nakon u

itavanja u

pretraživa

ki program.

Naslovi se uvijek pojavljuju ispisani uz lijevi rub Web stranice. Upotrebom
argumenta ALIGN uz naredbe za kreiranje naslova, oni se mogu centrirati uz
sredinu stranice

ime se postižu bolji vizualni efekti. Da bismo to postigli,

argumentu ALIGN moramo dodijeliti vrijednost CENTER. Slika 5 prikazuje kako
naš sljede

i primjer u kojem je prikazana upotreba ovog argumenta izgleda nakon

prikazivanja u pretraživa

<H3 ALIGN=CENTER>Ova knjiga </H3>

<H5 ALIGN=CENTER>predstavlja</H5>

<H1 ALIGN=CENTER>Centrirani naslov prve razine!</H1>

<H5 ALIGN=CENTER>Slika: 11-3</H5>

Kao ni imena HTML naredbi, tako ni njihovi argumenti ne prepoznaju razliku
izme

u velikih i malih slova, pa je sasvim svejedno kako

ete ih dopisivati uz

naredbe. Me

utim, radi što bolje preglednosti dokumenta dobro je sve naredbe i

Programiranje za Internet

argumente s dodijeljenim im vrijednostima pisati u potpunosti velikim slovima.
Neki autori preferiraju pisanje argumenata velikim slovima, a njihovih vrijednosti
malim, što je tako

er dobro i uredno. Na vama je da odlu

ite koji

ete oblik

zapisivanja koristiti kod svojih dokumenata. Važno je samo da se svoje odluke u
svakom trenutku pridržavate.

Slika 4. Šest razina naslova

Slika 5. Centrirani naslovi

Programiranje za Internet

4.5.4. Novi redak

Kada samo želite da se tekst prebaci u novi redak, bez dodatnog razmaka koji bi
korisniku nagovještavao novi odlomak, upotrijebite naredbu <BR>. Ta naredba je
prazna, tj. ne dolazi sa završnom oznakom, pa je jednostavno ubacujte svugdje gdje
biste kod pisanja teksta u nekom editoru ina

e pritisnuli Enter. Ova se naredba

naj

eš

e upotrebljava kod duga

kih naslova koji se moraju prelomiti u više redaka,

ali i u mnogim drugim sli

nim situacijama. U programima za izradu Web stranica

ta se oznaka dobija i kombinacijom Shift+Enter.

4.5.5. Vodoravne linije

Izme

u ve

ih tematskih cjelina na jednoj stranici koje se sastoje od nekoliko

odlomaka teksta, mo

ete ubaciti vodoravnu liniju pomo

u naredbe <HR>. Time

ete automatski stvoriti i razmak izme

u dva odlomka, pa ispred i iza ove naredbe

ne morate upotrebljavati oznaku <P>. Pretraživa

ki program

e dužinu linije

prilagoditi širini prozora unutar kojeg je prikazana stranica, a mo

ete sami

odre

ivati dužinu linije zahvaljuju

i proširenjima koja je uvela tvrtka Netscape.

Najkorisnije proširenje ove naredbe koristi se upravo za reguliranje dužine
vodoravne linije upotrebom argumenta WIDTH kojemu valja dodijeliti željenu
dužinu u postocima. Ako, naprimjer, želite da vaša linija bude široka ta

no za

polovicu prozora, argumentu WIDTH dodijelit

ete vrijednost 50%. Sli

no,

pomo

u argumenta SIZE može se odrediti i visina linije, što je posebno korisno

kod centriranja linija koje se kre

u od cijele širine prozora. Naredbom:

dobiva se centrirana vodoravna linija visine 5 piksela i širine tri

etvrtine prozora

pretraživa

kog programa. Ukoliko pogledate sliku 6, primijetit

ete da linije

posjeduju i sjenu,

ime se postiže lagani efekt trodimenzionalnosti. Ukoliko želite

izbje

i taj efekt i liniju u

initi potpuno crnom, naredbi <HR> dodajte još i

argument NOSHADE kojem se ne dodjeljuje nikakva vrijednost. Sljede

i primjer

prikazuje upotrebu vodoravnih linija, te naredbi za razdvajanje odlomaka i prelaska
teksta u novi redak.

<HTML>

<HEAD>

<TITLE>Pjesmica</TITLE>

</HEAD>

<BODY>

<H1>Jedna super knjiga</H1>

Ima tome dosta, al' pamtim još uvijek, <BR>

Programiranje za Internet

Mislio sam, mom neznanju ne postoji lijek. <BR>

Sje

anje na stare dane k'o struja me strese, <BR>

Razlikovao tad nisam CD-ROM od Web adrese.

<P>

Nekad nisam znao ni modem uklju

it' <BR>

Mislio sam da to ne

u nikada nau

it'. <BR>

</BODY>

</HTML>

Slika 6 prikazuje ovaj primjer nakon u

itavanja u pretraživa

ki program.

Slika 6. Odlomci i vodoravne linije

4.5.6. Citati

esto

ete dio stranice htjeti posebno istaknuti kako biste korisniku dali do znanja

da se radi o materijalu citiranom iz nekog drugog dokumenta. Kada želite jedan ili
više odlomaka ozna

iti kao citate, obuhvatit

ete ih oznakama <BLOCKQUOTE> i

</BLOCKQUOTE>. Tekst na koji se odnosi ova naredba ve

ina

e pretraživa

kih

programa prikazati uve

ano od lijeve margine, a katkada i kosim slovima.

U slu

aju da citirate više odlomaka teksta, upotrijebite naredbu <BLOCKQUOTE>

samo jednom, a odlomak razdvojite naredbom <P>. To je puno bolje rješenje od
višestruke upotrebe naredbe <BLOCKQUOTE>, jer se time izbjegava mogu

Programiranje za Internet

Uvijek je korisno u džepu imati desetak KM viška.

</NOTE>

<HR>

Ako pri ruci nemate višak novca, uvijek se možete

poslužiti i sitnim

<A HREF= #pokloni">poklonima</A>, koja

ovjeka vesele.

<P>

ni satovi, walkmani, CD-ROMovi, foto-aparati, SIMM

moduli, te ostala sitna tehnika.

</FN>

</BODY>

</HTML>

4.5.9. Neproporcionalno pismo

Neproporcionalna pisma razlikuju se od obi

nih po tome što je svako slovo

jednako široko. Obi

na pisma još se nazivaju i proporcionalnim, a najjednostavniji

primjer bio bi tekst koji upravo

itate. Neproporcionalnim pismom je, naprimjer,

ispisan prethodni primjer. Kako je osnovno pismo kojim se ispisuje tekst na Web
stranicama proporcionalno, postoji naredba kojom možete cijeli odlomak ozna

iti

kao tekst koji se treba ispisivati neproporcionalnim pismom. Radi se o paru oznaka
<PRE> i </PRE>, a valja napomenuti da

e svi razmaci i prelasci teksta u novi

redak koji se nalaze izme

u ovih oznaka biti zapam

eni i identi

no prikazani u

svakom pretraživa

kom programu. Tako

er je važno napomenuti da se unutar

naredbe za neproporcionalno pismo smiju koristiti samo one HTML naredbe koje
su namijenjene promjeni stila unutar re

enice, te naredbe za stvaranje

hipertekstualne veze i ugradnju slika. Sljede

im primjerom prikazana je upotreba

naredbe <PRE>.

<HTML>

<HEAD>

<TITLE>Neproporcionalno pismo</TITLE>

</HEAD>

<BODY>

<H1>Glavolomka</H1>

<PRE>

Programiranje za Internet

| /

Evo kako možete o o o

spojiti svih devet | x

kuglica pomo

u samo o o o

etiri ravne crte: |/

o-o-o-

</PRE>

</BODY>

</HTML>

Na slici 7 možete pogledati kako ovaj primjer izgleda nakon u

itavanja u

pretraživa

ki program.

Slika 7. Neproporcionalno pismo

Naredbi za neproporcionalno pismo može se dodati i argument WIDTH kojim se
odre

uje najve

a mogu

a dužina jednog retka teksta na koji se naredba odnosi.

Dužina retka se navodi kroz broj slova, a ovisno o navedenoj vrijednosti
pretraživa

ki program

e prilagoditi veli

inu neproporcionalnog pisma. Vrijednosti

40, 80 i 132 u pravilu daju najbolje rezultate. Evo i kratkog primjera kojim se
prikazuje upotreba ovog argumenta:

<PRE WIDTH=80>Neproporcionalnost je izmislila Vlatka

Pokos</PRE>

4.5.10. Liste

Lista je strukturirani odlomak koji sadrži niz odre

enih elemenata. U jeziku HTML

postoje tri vrste lista: pobrojane, nepobrojane i definitne liste. Kod pobrojanih lista

Programiranje za Internet

</BODY>

</HTML>

Slika 8 prikazuje ovaj primjer u pretraživa

kom programu.

Slika 8. Pobrojana i nepobrojana lista

Uvla

enja pojedinih redaka u prethodnom primjeru korištena su samo zato da bi

HTML kod bio što

itljiviji i uredniji; to niti u najmanjoj mjeri ne utje

e na na

na koji

e pretraživa

ki program formatirati tekst. Uo

ite da se nepobrojana lista

nalazi izme

u dva elementa pobrojane liste, a ne unutar nekog od elemenata.

Drugim rije

ima, bilo bi neispravno napisati nešto poput:

<LI>

<UL>

<LI>Sintaksa</LI>

<LI>Formatiranje</LI>

</UL>

</LI>

Po standardu HTML 2, oznaka <LI> ne dolazi u paru sa završnom oznakom </LI>,
pa

ete na Webu prona

i još mnoštvo dokumenata kojima krajevi elemenata unutar

lista uop

e nisu ozna

eni. To je sasvim u redu i ne predstavlja nikakvu pogrešku.

I pobrojanim i nepobrojanim listama može se dopisati argument COMPACT kojim
se smanjuje prazan prostor izme

u pojedinih elemenata u listi, te argument PLAIN

koji pretraživa

kom programu govori da se elementi ne smiju ozna

avati niti

rednim brojevima, niti kruži

ima niti bilo kako druga

ije.

Programiranje za Internet

Za standard HTML 3 predloženo je uvrštavanje i naredbe <LH></LH> koja bi se
koristila za navo

enje naslova liste, no rijetko koji pretraživa

ki program podržava

ovu mogu

nost, budu

i da se isti efekt može posti

i i uobi

ajenim naredbama za

izradu naslova.

Tvrtka Netscape ve

je odavno za svoj Netscape pripremila argument START

pomo

u kojega kod pobrojane liste možete navesti broj s kojim

e biti ozna

en prvi

element liste, druga

iji od jedinice. Prema prijedlogu standarda HTML 3, isti se

efekt može posti

i i argumentom SEQNUM. Ukoliko vam je potrebna ova

mogu

nost jezika HTML, svakako se poslužite Netscapeovim argumentom, jer ga

sada podržava gotovo svaki pretraživa

ki program. Sli

no je i s argumentom

CONTINUE pomo

u kojega se pretraživa

kom programu navodi da listu po

odbrojavati tamo gdje je stao s prethodnom pobrojanom listom.

Netscape je sli

an argument uveo i za odre

ivanje na

ina kojim

e se odbrojavati

elementi list. Radi se o argumentu TYPE koji se može koristiti i kod nepobrojanih
lista. Kod pobrojanih lista taj argument može poprimiti vrijednosti navedene u
tablici 3, dok se kod nepobrojanih mogu navesti vrijednosti CIRCLE, SQUARE i
DISC, kako bi se odredilo ho

e li se elementi ozna

avati kruži

ima, kvadrati

ima

ili ta

kama.

Tabela 3: Na

ini odbrojavanja pobrojane liste

HTML oznaka

Zna

enje

TYPE="1" Odbrojavanje

obi

nim brojevima

TYPE="I"

Odbrojavanje velikim rimskim brojevima

TYPE="i"

Odbrojavanje malim rimskim brojevima

TYPE="A"

Abecedno odbrojavanje velikim slovima

TYPE="a"

Abecedno odbrojavanje malim slovima

Kod definitnih lista ne postoje ograni

enja pri upotrebi pojedinih HTML naredbi,

kao što je bio slu

aj s pobrojanim i nepobrojanim listama, kako kod navo

enja

definiraju

eg izraza, tako i kod navo

enja definicije. To definitne liste

ini vrlo

snažnim elementima jezika HTML, pomo

u kojih se mogu postizati najrazli

itiji

efekti. Pogledajmo najprije jedan jednostavan primjer.

<HTML>

<HEAD>

<TITLE>Popis uloga</TITLE>

</HEAD>

<BODY>

<H2>Uloge</H2>

<HR>

<DL>

Programiranje za Internet

<HR>

<DL>

<DT>

<H3>Linux</H3>

</DT>

<DD>

Ovo je besplatni OS.

</DD>

<DT>

<H3>MS

Windows</H3>

</DT>

<DD>

Ovaj OS nije besplatan.

</DD>

</DL>

<HR>

</BODY>

</HTML>

Slika 10. Definitna lista s naslovima

Programiranje za Internet

Na slici 10 možete pogledati kako izgleda ovaj primjer nakon u

itavanja u

pretraživa

ki program.

4.6. Tablice

esto

ete se na

i u situaciji da neke informacije poželite formatirati u neku

složeniju strukturu od one koja se dobiva pomo

u raznih vrsta lista. Tablice

e vam

omogu

iti da podatke organizirate u retke i stupce, a uvedene su tek standardom

HTML 3.

Kod izrade jednostavnih tabela koje ve

inom sadrže broj

ane podatke, najbolje je

upotrijebiti naredbu <TAB> kojom se kreiraju tabularni razmaci. Uvrštavanje ove
naredbe, u jezik HTML tako

er je predloženo tek standardom HTML 3. Kako biste

odredili poziciju na kojoj se mora poravnavati tekst, upotrijebit

ete argument ID

kojemu

ete dodijeliti neko simboli

ko ime. Potom

ete u svakom novom retku

elemente tablice poravnavati u odre

eni stupac pozivaju

i se na odgovaraju

simboli

ko ime pomo

u argumenta TO. Za ovu naredbu postoje još i argumenti

ALIGN i INDENT s kojima se odre

uje na

in poravnavanja pojedinog stupca, te

razmak izme

u stupaca. Razmak se zadaje u jedinicama koje odgovaraju polovici

veli

ine pisma kojom se ispisuje trenutni tekst. Sve

e vam biti puno jasnije kada

pogledate sljede

i primjer.

<HTML>

<HEAD>

<TITLE>Mala

tabela</TITLE>

</HEAD>

<BODY>

<H3>Planeta</H3>

<HR>

<B>

Planet

<TAB INDENT=30 ID="st1" ALIGN=RIGHT>Dužina godine

<TAB INDENT=30 D="st2" ALIGN=RIGHT>Dužina dana

</B><P>

<B>Merkur</B>

<B>Venera</B>

<B>Zemlja</B>

Programiranje za Internet

naslovima koriste redom parovi naredbi <TR></TR> i <TH></TH>. Svaka tabela
mora sadržavati najmanje jedan redak i jednu ku

icu. Pomo

u opcionalnog

elementa <CAPTION></CAPTION> tabelama se mogu dodavati naslovi. Oni

biti prikazani podebljanim slovima, iznad tablice, a bit

e i centrirani u odnosu na

tablicu. Sljede

im primjerom generira se jednostavna tabela s tri retka i tri stupca:

<HTML>

<HEAD>

<TITLE>Jednostavna

tabela</TITLE>

</HEAD>

<BODY>

<TABLE>

<CAPTION>Broj dnevnih obroka</CAPTION>

<TH>Ru

ak</TH> <TH>Ve

era</TH><TR>

<TR><TH>U kuhinji</TH> <TD>2</TD> <TD>1<TD></TR>

</TABLE>

</BODY>

</HTML>

Argument ALIGN može se upotrijebiti kako kod naredbe <TABLE> tako i kod
oznaka <TR>, <TH> i <TD>, a dodjeljuju mu se ve

standardne vrijednosti LEFT,

CENTER i RIGHT, namijenjene lijevom poravnavanju, centriranju i desnom
poravnavanju. Taj bi se argument unutar naredbe <TABLE> trebao koristiti u
kombinaciji s argumentom WIDTH kako bi se ta

no mogao kontrolirati smještaj

tablice unutar stranice. Naredbom:

kreirat

ete tablicu koja

e biti široka kao polovica prozora s pretraživa

kim

programom, a nalazit

e se ta

no na sredini istog prozora. Kod upotrebe s

naredbom <CAPTION>, argumentu ALIGN mogu se dodijeliti vrijednosti TOP za
smještanje naslova iznad tablice (što pretraživa

ki rade automatski, odnosno

BOTTOM kada naslov želite smjestiti ispod tablice).

Prilikom upotrebe argumenta ALIGN s drugim elementima tablice, poput redaka i
obiju vrsta ku

ica, upravlja se smještajem sadržaja unutar ku

ica. Dozvoljene

vrijednosti su LEFT, CENTER, RIGHT, JUSTIFY i CHAR. JUSTIFY služi
poravnavanju po oba ruba ku

ice (koristi se rijetko) a CHAR poravnavanju po

odre

enom znaku. Poravnavanje navedeno kod naredbe za kreiranje ku

ice ima

prednost pred onim koje je navedeno kod naredbe za kreiranje retka, koje opet ima
prednost pred poravnavanjem navedenim za cijelu tablicu, kod naredbe <TABLE>.

Programiranje za Internet

Sli

no je i s upotrebom argumenta VALIGN. On može poprimiti vrijednosti TOP,

MIDDLE i BOTTOM, a namijenjen je okomitom poravnavanju sadržaja unutar
ku

ica u tablici. Ukoliko se argument ne navodi, pretraživa

ki programi

e sadržaj

poravnavati po sredini okomice. O

ito je da se kod složenijih sadržaja i formata

tabela argumenti ALIGN i VALIGN moraju upotrebljavati vrlo oprezno.

Naredbi <TABLE> mogu se dodati još tri argumenta, od kojih se svakome
dodjeljuje cjelobrojna vrijednost koja predstavlja broj piksela na ekranu. Prvi takav
argument je BORDER, kojim se tabela smješta unutar rešetaka

iji vanjski rub ima

debljinu dodijeljene vrijednosti. Ukoliko e ovom argumentu ne dodjeli nikakva
vrijednost, rub tablice bit

e najtanji mogu

i. Drugi je CELLPADDING, kojim se

navodi broj piksela za koji

e sadržaj pojedine ku

ice biti udaljen od ruba tablice,

dok je tre

i CELLSPACING, kojim se odre

uje razmak izme

u svake pojedine

ice.

Naredbama <TD> i <TH> opcionalno se dodjeljuju i argumenti ROWSPAN i
COLSPAN, koji tako

er poprimaju cjelobrojne vrijednosti. Oni se koriste kod

složenih tabela, u slu

aju da želite kreirati ku

icu koja se visinom (ROWSPAN) i

širinom (COLSPAN) proteže kroz podru

je drugih ku

ica. One ku

ice koje su

"prekrivene" ovakvom pove

anom ku

icom, ne smiju se ponovo navoditi

upotrebom naredbi <TD> i <TH> unutar odgovaraju

ih redaka. Najbolje je da to

sve pogledate na primjeru.

<HTML>

<HEAD>

<TITLE>Složena

tabela</TITLE>

</HEAD>

<BODY>

<CAPTION

ALIGN=BETTOM>Sun

ev sistem</CAPTION>

<TR><TH

ROWSPAN=2></TH>

<TH COLSPAN=2>Udaljenost od Sunca</TH>

<TH

ROWSPAN=2>Dužina<BR>godine</TH>

<TH

ROWSPAN=2>Dužina<BR>dana</TH>

</TR><TR>

<TH>kilometara</TH>

<TH>svjetlosnih

god.</TH>

</TR><TR>

<TH>Merkur</TH> <TD>57.900.000</TD>

<TD

ALIGN=RIGHT>0.38</TD>

Programiranje za Internet

•

FLOAT Ovom argumentu mogu se dodijeliti vrijednosti LEFT i RIGHT kako
bi se odredilo ho

e li tekst koji slijedi iza kraja tablice ozna

enog s naredbom

</TABLE> biti ispisan s lijeve ili s desne strane u odnosu na tablicu. Kada se
ovaj argument ne upotrebljava, pretraživa

ki programi smještaju tekst ispod

tablice.

•

COLS?n Odre

ivanje broja stupaca u tablici. Znaju

i unaprijed ovaj broj,

pretraživa

ki programi mogu brže odrediti izgled tablice.

•

FRAME Vrijednosti za ovaj argument su TOP, BTTOM, TOPBOT, SIDES i
ALL, a njime se odre

uje ho

e li tabela imati okvir samo na gornjem rubu,

donjem rubu, oba ruba (i gornji i donji, obje stranice (lijevoj i desnoj), ili
posvuda.

Tablice mogu imati zaglavlje i tijelo, koji se odvajaju parovima oznaka
<THEAD></THEAD> i <TBODY></TBOD>>. Naredbe su korisne samo kod
jako velikih tabela. Zaglavlje

e biti prikazano na ekranu uvijek, bez obzira na to

što cijela tabela ne stane u prozor pretraživa

kog programa, dok

e se tijelo

pomicati u odnosu na pomicanje cijele stranice. Kod tabela koje cijele stranu na
ekran, razlika izme

u zaglavlja i tijela je neprimjetna. Obje naredbe mogu se

koristiti s argumentima ALIGN i VALIGN.

4.7. Stilovi

Stilskim naredbama mijenja se grafi

ki izgled sadržanog teksta. Takve naredbe se

smiju ugnjež

ivati jedne unutar drugih sli

no kao što u nekom tekstnom procesoru

možete na dijelove re

enica primijeniti više stilskih promjena. HTML stilovi su,

utim, apstraktni i logi

no konstruirani, dok su stilovi koji se upotrebljavaju kod

tekstnih procesora konkretni. Ve

ina drugih naredbi kojima se utje

e na strukturu

dokumenta slobodno se može pojaviti unutar stilskih naredbi, premda bi takve
situacije trebalo izbjegavati. Naj

eš

e korištene stilske naredbe koje prepoznaju svi

pretraživa

ki programi su sljede

•

<EM></EM> Naglašavanje, ve

ina pretraživa

kih programa

e tekst

obuhva

en ovom naredbom prikazati kosim slovima, a rje

e podcrtano, kako

bi se isticao od okolnog teksta.

•

<STRONG></STRONG> Jako naglašavanje, obi

no se prikazuje podebljanim

slovima. Obavezno se mora prikazivati druga

ije od obi

nog naglašavanja.

•

<CITE></CITE> Oznaka za citate unutar re

enice. Tekst

e biti prikazan

kosim slovima.

•

<TT></TT> Tekst ispisan neproporcionalnim pismom (svi znakovi su jednake
širine).

Na slici 13 vide se rezultati upotrebe ovih naredbi na gornjem tekstu. Pokušajte
sami sastaviti takvu Web stranicu.

Programiranje za Internet

Slika 13. Tekstualni stilovi

Tabela 4. Razli

iti logi

ki stilovi

HTML oznaka

Zna

enje

<ABBREV></ABBREV> Oznaka

skra

enicu

<ACRONYM></ACRONYM> Oznaka za akronime poput SIPA, FTP, FBI...
<AU></AU>

Autor teksta, odnosno Web stranice

Tekst ispisan nešto ve

im pismom od

uobi

ajenog

Oznaka za izbrisan tekst koji je "preživio" u
dokumentu

Novi tekst uba

en u stari sadržaj

<PERSON></PERSON> Nazna

avanje imena neke osobe

<Q></Q>

Tekst koji se nalazi izme

u znakova navoda

<S></S>

Precrtan tekst, naredba skra

uje oznaku

Tekst ispisan nešto manjim pismom od
uobi

ajenog

Oznaka za indekse i drugi niže ispisan tekst

Oznaka za eksponente i drugi više ispisan tekst

Oznaka za kod ispisan nekim programskim
jezikom

<VAR></VAR> Oznaka

varijablu, parametar, argument i

sli

Tekst koji korisnik mora utipkati na tipkovnici

Niz znakova kojima se nešto nabraja

Programiranje za Internet

<A NAME?"izvori">Evo i nekih dodatnih izvora

informacija... </A>

Klikom miša na tekst "dodatnih izvora" prebacit

ete se u pretraživa

kom

programu na onaj dio dokumenta koji je imenovan odgovaraju

im imenom pomo

argumenta ID ili NAME. Tekst koji je obuhva

en naredbom <A> uz koju je

umjesto argumenta HREF napisan argument NAME ne

e biti prikazan kao

hipertekstualna veza u pretraživa

kom programu, ve

kao obi

an tekst.

Kada želite kreirati hipertekstualnu vezu na dokument koji se nalazi u istom
direktoriju kao i trenutni dokument, dovoljno je argumentu HREF dodijeliti ime
željene datoteke. To se naziva relativnim URL adresiranjem, a primjenjuje se svaki
put kada je po

etak i kraj hipertekstualne veze nalaze na istom serveru. Evo kako

možete kreirati jednu takvu vezu.

Moj pas se zove <A HREF="lisa.html">Lisa</A>.

Upotrebom relativnog adresiranja vaš cjelokupni hipertekstualni rad ostaje
kompaktniji, budu

i da svaki put kada stranice selite na novu lokaciju ne

ete

morati mijenjati HTML kod kako biste popravili hipertekstualne veze. Naravno, to
vrijedi samo u slu

aju kada ne mijenjate strukturu direktorija, odnosno kada je

sadržaj svakog direktorija na staroj lokaciji istovjetan onome na novoj. Da biste
kreirali hipertekstualnu vezu na neku odre

enu to

ku unutar drugog dokumenta u

istom direktoriju, ponovno

ete upotrijebiti ime te ta

ke koje je u ciljanom

dokumentu ozna

eno argumentom ID ili NAME:

Pretpostavimo da se datoteka koju ciljate nalazi u poddirektoriju direktorija koji
sadrži trenutni dokument. Tada

ete u HTML dokumentu ovako kreirati

hipertekstualnu vezu:

Nije važno na koji su na

in konstruirane putanje, direktoriji i imena datoteka na

operativnom sistemu pod kojim je pokrenut vaš Web server – svejedno je koriste li
se obrnute kose crte () kao u Windowsima, ili uglate zagrade ( [,]) kao na VMS
sistemima- URL sintaksa uvijek koristi obi

ne kose crte za ovu namjenu (/). Server

e se sam pobrinuti o prevo

enju ove sintekse u onu koja se upotrebljava na tom

operativnom sistemu.

Ako želite kreirati hipertekstualnu vezu na datoteku koja se nalazi na drugom Web
serveru, morat

ete argumentu HREF dodijeliti njezinu apsolutnu URL adresu.

Format URL adresiranja dopušta vam da pristupate gotovo svim objektima na
Internetu kroz vašu Web stranicu, pa tako možete kreirati hipertekstualne veze na
Gopher servere, Usenet novinske grupe, FTP arhive, e-mail adrese i drugo. Evo i
jednog primjera:

Programiranje za Internet

Ovdje smo upotrijebili cijelu, apsolutnu URL adresu, a ne realtivnu. Jedina
pretpostavka koju moramo imati na umu je da Web server unze.ba radi na portu 80,
što je osnovni port za World Wide Web servere. Ako to nije slu

aj – recimo, ako

unze.ba poslužuje na portu 8080 – potrebno je unutar URL adrese navesti i taj broj:

Kao što vidite, URL adrese mogu biti prili

no duga

ke, no kao što znate, pomo

njih možete kreirati i hipertekstualne veze na mnoge druge ta

ke na Internetu koje

nisu Web stranice. U nastavku je dano nekoliko primjera pomo

u kojih možete

kreirati veze s FTP arhivom, Telnet serverom i novinskom grupom na Usenetu.

<A HREF="ftp://avalon.irb.hr/pub">Shareware

programi</A>

<A HREF="telnet://compuserve.com">Servis CompuServe</A>

<A HREF="news:hr.comp.literature">Doma

a literatura</A>

Ako URL adresa za neki FTP server završava s imenom konkretne datoteke, tada

e se prebaciti na korisnikov ra

unar i ovisno o njezinom tipu prikazati u prozoru

pretraživa

kog programa ili pohraniti na tvrdi disk. Ako adresa pokazuje na neki

direktorij, tada

e se u pretraživa

kom programu prikazati sadržaj tog direktorija,

uklju

ivši sve datoteke i poddirektorije koji su sadržani. Kod kreiranja

hipertekstualne veze koja vodi do FTP servera, naredbi <A> možete nadopisati i
argument TITLE kojemu

ete dodijeliti naslov koji želite da korisnik vidi na

gornjem rubu prozora s pretraživa

kim programom.

4.9. Slike

Slika ili dvije, ugra

ene u HTML dokument, poprili

e pridonijeti atraktivnosti

vaše Web stranice. Slike koje se nalaze na vašoj po

etnoj stranici dat

e korisniku

informacije koje se ne mogu pro

itati iz teksta; jednostavni linearni grafikon u

svakom je slu

aju puno informativniji od tablice prepune brojeva. Slike

e na vašoj

Web stranici odigrati vrlo veliku funkcionalnu, vizualnu i informativnu ulogu, pa
ih ni u kom slu

aju ne biste smjeli izostaviti.

Da biste unutar svoje stranice ugradili sliku, upotrijebite naredbu <IMG>. Oko
slike se ne

e pojaviti nikakvo razdvajanje odlomaka ili dodatni prazan prostor. Ako

tok teksta oko slike nije potrebno odre

en nekim argumentima, ona

e biti

prikazana unutar re

enice jednako kao da se radi o nekom slovu koje ima malo

udnu veli

inu. Za razliku od rada u programima za stono izdavaštvo gdje se za

svaku sliku zna ta

na pozicija, unutar Web stranice slika predstavlja najobi

niji dio

teksta unutar kojega je ugra

ena. Na bilo koje mjesto gdje možete smjestiti neko

slovo, mo

ete smjestiti i sliku.

Uz naredbu <IMG> mogu se dopisati argumenti. Prvi je SRC, a valja mu dodijeliti
URL: adresu datoteke u kojoj je pohranjena slika koju želite prikazati na Web
stranici. URL adresa navodi se na isti na

in kao i kod hipertekstualnih veza:

Programiranje za Internet

obuhvatili naredbom <A>. Sjetite se: sliku možete postaviti svugdje gdje možete
postaviti i tekst, pa prema tome i unutar oznake za kreiranje hipertekstualnih veza.
Kada korisnik klikne mišem na ovu sliku, u

itat

e se stranica s URL adrese

navedene unutar naredbe <A>.

Važno je napomenuti da se slike na Webu mogu prikazivati samo ako su
pohranjene u GIF ili JPEG formatu datoteka, jer su to jedini formati koje
podržavaju svi pretraživa

ki programi s grafi

kim korisni

kim su

eljem: To,

utim, ne zna

i da, ako vi postavite hipertekstualnu vezi na neki drugi grafi

format poput TIFF, PCX ili BMP zapisa, korisnik ne

e znati što da napravi s tom

datotekom. On

e je mo

i prebaciti na svoje ra

unar i kasnije pogledati u nekom

programu koji podržava taj zapis, ili

e u svojem pretraživa

kom programu

konfigurirati pomo

nu aplikaciju koja

e taj program pokrenuti svaki put kada se

na nekoj stranici pojavi nepoznati format.

Prikazivanje slika kao dio teksta i nije baš nešto posebno, pa zato postoji argument,
ALIGN kojim se može odrediti na

in prikazivanja teksta koji se nalazi oko slike.

Osnovne tri vrijednosti koje se mogu dodijeliti ovom argumentu su TOP, MIDDLE
i BOTTOM, što zna

i da se tekst koji se nalazi ispred i iza slike može poravnati uz

gornji rub slike, uz njezinu sredinu i uz njezino dno.

U slu

aju kada je slika viša nego šira, zasigurno

ete htjeti da tekst normalno te

e u

njezine lijeve ili desne strane, a ne da ona predstavlja dio tog teksta. U tu svrhu

vam poslužiti Netscapeova proširenja za naredbu <IMG> kojima se argumentu
ALIGN mogu dodijeliti još i vrijednosti LEFT i RIGHT. U prvom slu

aju slika

biti prikazana uz lijevi rub prozora s pretraživa

kim programom, dok

e tekst koji

je u HTML dokumentu smješten iza naredbe za sliku biti smješten s njezine desne
strane. U drugom slu

aju

e situacija, dakako, biti obrnuta. Za naredbu <IMG> ne

postoji završna naredba </IMG>, pa

ete, u trenutku kada zaželite tekst ponovo

ispisivati po cijeloj širini prozora, morati upotrijebiti naredbu <BR> uz koju

ete

dopisati argument CLEAR, koji je objašnjen ranije u ovom poglavlju. Ako ste
argumentu ALIGN kod naredbe <IMG> dodijelili vrijednost LEFT, istu

ete

vrijednost dodijeliti i argumentu CLEAR kod naredbe <BR>. Sli

ete postupiti

i u slu

aju da ste koristili vrijednost RIGHT. Cijelu ovu zbirku oko poravnavanja

slika i teksta najlakše je razjasniti jednim primjerom.

<HTML>

<HEAD>

<TITLE>Slike</TITLE>

</HEAD>

<BODY>

<B>ALIGN=TOP</B><BR>

<IMG SRC="image002.jpg" ALIGN=TOP>Shareware<P>

<B>ALIGN=MIDDLE</B><BR>

Programiranje za Internet

<IMG SRC="image002.jpg" ALIGN=MIDDLE>Shareware<P>

<B>ALIGN=BOTTOM</B><BR>

<IMG SRC="image002.jpg" ALIGN=BOTTOM>Shareware

<HR>

<B>ALIGN=LEFT<B/><BR>

Lorem ipsum dolor sit amet, consetetur sadipscing

elitr, sed diam nonumy eirmod tempor invidunt ut labore

et dolore magna aliquyam erat, sed diam voluptua. At

vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est

Lorem ipsum dolor sit amet.

<HR>

<B>ALIGN=RIGHT</B><BR>

Lorem ipsum dolor sit amet, consetetur sadipscing

elitr, sed diam nonumy eirmod tempor invidunt ut labore

et dolore magna aliquyam erat, sed diam voluptua. At

vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est

Lorem ipsum dolor sit amet.

<HR>

</BODY>

</HTML>

Slika 15 prikazuje ovaj primjer u pretraživa

kom programu.

Za dodatnu kontrolu nad smještajem slika, tvrtka Netscape je smislila i argumente
HSPACE i VSPACE. Tim se argumentima dodjeljuje numeri

ka vrijednost kojom

se odre

uje broj piksela za koji

e slika biti udaljena od teksta što je okružuje.

Argumentom HSPACE odre

uje se razmak s lijeve i s desne strane slike, a

argumentom VSPACE s gornje i s donje strane. Op

enito govore

i, što je ve

slika, ovim

ete argumentima htjeti dodijeliti ve

u vrijednost kako bi stranica

izgledala grafi

ki ukusno. Uobi

ajene vrijednosti kre

u se od pet do petnaest

piksela.

Argumentu BORDER koji se tako

er može dodijeliti naredbi <IMG>, pridružuje

se broj

ana vrijednost kojom se u pikselima odre

uje debljina okvira za neku sliku.

Dakako, upotreba ovog argumenta ima smisla samo kada se slika nalazi u ulozi
hipertekstualne veze, budu

i da u suprotnom uop

e ne

e biti uokvirena. Ukoliko ne

Programiranje za Internet

Argumentima HEIGHT i WIDTH valja dodijeliti ta

nu visinu i širinu slike u

pikselima, jer

e Netscape u protivnom sliku automatski pove

ati ili smanjiti, ve

prema tome jeste li unijeli ve

e ili manje vrijednosti od stvarnih. Kako za to

mijenjanje veli

ine Netscape ne koristi baš neke savršene algoritme, poslužite se

nekom grafi

kom aplikacijom poput Corel PhotoPainta ili Adobe PhotoShopa ako

želite promijeniti format slike.

4.9.1 Slikovne mape

Slikovne mape predstavljaju važno proširenje koncepta hipertekstualnog
povezivanja dokumenata. Takve mape su zapravo obi

ne slike na kojima su

definirana odre

ena podru

ja na koja korisnik može kliknuti i u

itati stranicu s

nove URL adrese. Ovdje

emo objasniti dva na

ina na koji se mogu kreirati

slikovne mape: prvi je pomo

u standardnih metoda koje su uvedene standardom

HTML 2, a drugi je pomo

u Netscapeovih proširenja jezika HTML koja su

uvedena Navigatorom 2.0. U prvom slu

aju govorimo o serverskim slikovnim

mapama, budu

i da se zahtjeva prisutnost posebnog programa na serverskom

unaru, dok u drugom govorimo o klijentskim mapama, jer one ne zahtijevaju

nikakvo procesiranje na serveru ve

se u potpunosti interpretiraju unutar

pretraživa

kog programa. S korisni

kog stanovišta, obje vrste slikovnih mapa

izgledaju i djeluju podjednako, no sa stanovišta autora HTML dokumenta, radi se o
dva vrlo razli

ita procesa.

Upotrebljava se argument USEMAP kojemu se dodjeljuje ime ta

ke unutar istog

dokumenta, koja je ozna

ena s argumentom NAME. Imenu kod argumenta

USEMAP mora prethoditi znak #, sli

no kao i kod hipertekstualnih veza kojima se

ska

e do odre

ene ta

ke u nekom ili istom dokumentu. Argument NAME dopisuje

se uz naredbu <MAP> kojom se definiraju podru

ja slikovne mape, a koju valja

smjestiti na kraju tijela HTML dokumenta. Pojedino podru

je na slici ozna

ava se

naredbom <AREA>. U nastavku predo

ujemo primjer koji

e vam razjasniti o

emu se radi:

<IMG SRC="slike/putokaz.gif"

ALT="ovo je slikovna mapa" USEMAP="#putokaz">

<AREA SHAPE="POLY" HREF="diskete.html"

COORDS="21,68,5,82,18,97,132,93,¸131,62,21,68>

<AREA SHAPE="POLY" HREF="kritike.html"

COORDS="10,100,8,133,126,136,142,121,124,103,10,100>

Programiranje za Internet

<AREA SHAPE="POLX" HREF="sadržaj.html"

COORDS="8,28,9,62,129,51,137,34,129,25,102,22,8,28>

<AREA SHAPE="POLY HREF="ocjena.html"

COORDS="4,154,18,171,130,175,131,145,22,140,4,154>

<AREA SHAPE="POLY" HREF="znak.html"

COORDS="12,181,12,213,124,211,144,194,125,179,12,181>

</MAP>

Nakon malo detaljnijeg prou

avanja ovog primjera nije teško zaklju

iti da se tip

geometrijskog lika odre

uje pomo

u argumenta SHAPE, URL adresa ciljanog

dokumenta argumentom HREF, a koordinate podru

ja odvojene zarezom

argumentom COORDS. Svi argumenti se, naravno, dopisuju uz naredbe AREA
kojih ima onoliko koliko ima i klju

nih podru

ja u slikovnoj mapi. Argument

SHAPE može osim vrijednosti POLY poprimiti i vrijednost RECT CIRCLE i
DEFAULT kako biste kreirali podru

ja u obliku pravokutnika i kružnice, odnosno

odredili URL adresu dokumenta koji

e se uo

iti ako korisnik klikne na dio slike

koji nije obuhva

en niti jednim podru

jem.

4.10. Multimedija

Kako biste ugradili multimedijalni objekt unutar svoje Web stranice, bilo da se radi
o nekom zvuku, filmu, kombinaciji filma i zvuka ili ne

emu drugom, jednostavno

kreirajte obi

nu hipertekstualnu vezu koja

e vaš dokument povezati s binarnom

datotekom koja sadrži taj objekt. Na korisniku je da ispravno konfigurira svoj
pretraživa

ki program i pomo

ne aplikacije ili plug-in module kojima ga

nadogra

uje kako bi mogao upotrijebiti taj objekt na svojem ra

unaru.

Obi

aj je, ali i dio uljudnog ponašanja, upozoriti korisnika da se radi o

hipertekstualnoj vezi koja nije uobi

ajena. Svakako navedite o kojem tipu datoteke

se radi, te kolika je njezina veli

ina u bajtima, kako bi korisnik mogao procijeniti

koliko je vremena potrebno da se ta datoteka prebaci do njegovog ra

unara.

Najuobi

ajeniji tipovi zvu

nih zapisa koji se koriste na Webu su AU i SND formati

datoteka, no nerijetko

ete nai

i i na WAV ili MP3 zvu

ne zapise. Što se ti

videozapisa, najuobi

ajeniji formati su QuickTime i MPEG, a u novije vrijeme

WMV i AVI (Microsoftovi video formati).

Evo i jednog primjera kreiranja hipertekstualne veze kojom se korisnik upu

uje na

zvu

nu datoteku:

<IMG SRC="zvu

nik.gif" ALT="Hard rock, zvu

ni zapis">

Hard rock</A> (150 Kb, mp3 format).

Programiranje za Internet

</HEAD>

<BODY>

<H1>Ho

emo komentare!!!</H1>

Zanima nas vaše mišljenje o ovim stranicama.

Upotrijebite sljede

i obrazac kako biste nam poslali

bilo kakav komentar.

<P>

Upišite svoje ime:

Upišite svoju e-mail adresu:

U sljede

i okvir za unos teksta upišite bilo kakav

komentar. Kliknite na tipku <B<Slanje</B> kada

završite.

<P>

<P>

Zahvaljujem na komentaru.

<P>

</FORM>

</BODY>

</HTML>

Slika 16 prikazuje ovaj primjer nakon u

itavanja u pretraživa

ki program. Uo

ite

odmah da se drugi HTML elementi mogu slobodno koristiti kako izvan, tako i
unutar obrasca.

Naredba <FROM>, kao što vidite, može sadržavati i argument METHOD koji je
namijenjen odre

ivanju na

ina na koji

e se sadržaj obrasca poslati na e-mail

adresu ili CGI skriptu. Najbolje je uvijek dodjeljivati vrijednost POST ovom
argumentu, kako bi se nazna

ilo da se sadržaj šalje preko standardnog ulaza. Druga

vrijednost koju možete navesti je GET, a ona se koristi kada se sadržaj obrasca
šalje serveru kao dio URL adrese. Neki stariji serveri imaju ograni

enje na koli

inu

podataka koja se ovako može poslati, pa je najbolje da koristite POST metodu.

Programiranje za Internet

Pomo

u argumenta ACTION, u ovom smo primjeru naveli da želimo podatke iz

obrasca poslati na e-mail adresu [email protected].

Slika 16. Jednostavan obrazac za komentar

Prva dva polja u ovom primjeru zatražit

e od korisnika da unese svoje ime i e-mail

adresu, a kreirali smo ih pomo

u naredbe <INPUT>. Argumentom TYPE koji se

dopisuje uz ovu naredbu odre

uje se tip polja koje želimo ugraditi u obrazac, pa

smo mi upotrijebili vrijednost TEXT kako bi dobili polje za unos teksta. Tu je još i
argument SIZE kojim smo odredili širinu tekstualnog polja koja se mjeri u broju
znakova, ali i argument NAME koji je obavezan za svako polje obrasca, a kojemu
se dodjeljuje neko jedinstveno ime. To ime

e nam poslužiti kao oznaka varijable u

kojoj

e biti pohranjeno ono što je korisnik upisao unutar odgovaraju

eg polja.

Kasnije

emo tu varijablu upotrijebiti u skripte koja obra

uje obrazac.

Naredbom <TEXTAREA> kreirali smo okvir za unos teksta kojemu smo veli

inu

u recima i stupcima odredili redom pomo

u argumenata ROWS i COLS. Za razliku

od naredbe <INPUT>, ova naredba sadrži i završnu oznaku </TEXTAREA>, a sav
tekst koji upišemo izme

u po

etne i završne oznake bit

e ve

upisan unutar okvira

za unos teksta, što je korisno ako korisniku želimo unaprijed kazati što želimo

uti.

U našem primjeru smo okvir za tekst ostavili praznim.

Programiranje za Internet

</HEAD>

<BODY>

<H1>Ovo je PRVA STRANICA!</H1>

Ovdje nabacate malo obi

nih HTML naredbi...

</BODY>

</HTML>

Ako ovaj primjer u

itate u neki pretraživa

ki program koji podržava Client-Pull

tehnologiju (neki stariji pretraživa

ki i Lynx je ne podržavaju), primijetit

ete da se

on svakih pet sekundi ponovno u

ita. Naredba <META> svakih

e pet minuta

simulirati pritiskanje tipke Reload (Refresh) u pretraživa

u, te

e ponovno u

itati

isti dokument nakon onoliko sekundi koliko ste naveli argumentom CONTENT.
Ovo je korisno u slu

aju da se sadržaj HTML dokumenta automatski kreira i

mijenja u odre

enim vremenskim razmacima. Istom naredbom mo

ete "povu

i neki drugi HTML dokument, kao u novom primjeru:

<META HTTP-EQUIV="Refresh"

CONTENT="60; URL=http://unze.ba/stats/">

ite da je obavezno navo

enje apsolutne URL adrese i to odmah nakon ta

ke-

zareza koju valja navesti iza broja za oznaku sekundi. Sljede

a stranica u nizu

tako

er može biti Client-Pull stranica, što zna

i da možete kreirati

itave nizove

dinami

kih dokumenata koji

e se automatski u

itavati. Ova tehnologija korisna je

i u slu

aju da ste svoje Web stranice preselili na drugi server, a želite da se

itatelji

koji još uvijek koriste staru adresu automatski upute na novu. Tada

ete, naravno,

navesti nulu kao broj sekundi nakon kojih

e pretraživa

sko

iti do novog

odredišta.

Kako postoje pretraživa

ki programi koji ne podržavaju naredbu <META>, dobra

ideja je da negdje pri vrhu stranice objasnite da

e dokument nakon toliko i toliko

sekundi nestati (odnosno da ne

e nestati), i na taj na

in navedete korisnika da

klikne na neku hipertekstualnu vezu.

Kada želite da korisnik odabere neku vrijednost iz nekog kona

nog popisa koji mu

je ponu

en, upotrijebit

ete kružne izbornike, kontrolne kvadrati

e ili padaju

izbornike. Kružni izbornici rade na taj na

in, da, kada se jedna opcija odabere,

nijedna druga više ne može biti istovremeno odabrana. Zbog toga kružne izbornike
treba koristiti onda i samo onda kada želite da korisnik odabere ta

no jednu

vrijednost iz izbora koji mu se nudi. Svaki kruži

unutar izbornika predstavljen je

jednom <INPUT TYPE="RADIO"> naredbom no, me

utim, argumentu NAME se

unutar jednog izbornika uvijek mora dodijeliti ista vrijednost. Pomo

u argumenta

VALUE odre

uje se vrijednost koja

e biti dodijeljena varijabli navedenoj

argumentom NAME kada korisnik izabere jednu od ponu

enih mogu

nosti. Kod

onog kruži

a koji želite odmah prikazati kao odabranu opciju, nadopisat

ete i

argument CHECKED. Evo primjera:

Programiranje za Internet

<HTML>

<HEAD>

<TITLE>Kružni izbornik</TITLE>

</HEAD>

<BODY>

<H1>Najviše volim:</H1>

<INPUT TYPE="RADIO" NAME="voli"

VALUE="pjeva

e">Pjeva

e<BR>

<INPUT TYPE="RADIO" NAME="voli" VALUE="pjeva

ice"

CHECKED>Pjeva

ice<BR>

<INPUT TYPE="RADIO" NAME="voli" VALUE="grupe">Grupe

izvo

a<BR>

</FORM>

</BODY>

</HTML>

Kontrolni kvadrati

i se koriste kada se korisniku želi omogu

iti izbor od nijedne,

jedne ili više ponu

enih opcija. Svaki kvadrati

prikazuje se pomo

u jedne

<INPUT TYPE="CHECKBOX"> naredbe, a kod svake naredbe argument NAME
poprima razli

itu vrijednost. Argumentom VALUE iskazuje se vrijednost koja

biti dodijeljena varijabli navedenoj pomo

u argumenta NAME u slu

aju da je

korisnik odabrao tu opciju. Unaprijed odabrani kvadrati

i ozna

avaju se

argumentom CHECKED. Na primjer:

<HTML>

<HEAD>

<TITLE>Kontrolni kvadrati

i</TITLE>

</HEAD>

<BODY>

<H1>Muzika koju slušam:</H1>

<INPUT TYPE="CHECKBOX" NAME="jazz" VALUE="da"

CHECKED>Jazz<BR>

<INPUT TYPE="CHECKBOX" NAME="funk" VALUE="da"

CHECKED>Funk<BR>

Programiranje za Internet

serverske programe za obradu obrazaca koji su instalirani na onom Web serveru na
kojem se nalaze vaše stranice.

Slika 17. Kružni izbornik, kontrolni kvadrati

i i padaju

i izbornik

4.13. Skripting jezici

4.13.1. Skripting jezici koji se izvršavaju na serveru (Server-side scripting)

ASP - Active Server Pages

Active Server Pages, odnosno kra

e ASP, je Microsoftovo rješenje za serverside

scripting. Kod obi

nih HTML stranica, klijent (odnosno web surfer) zatraži web

stranicu sa nekog servera (npr. www.unze.ba), a server jednostavno pošalje
dokument klijentu (obi

no index.html, ako nije navedeno ime) i surfer vidi tu

stranicu prikazanu u svom web browseru. Sa ASP-om, server ima priliku da
izmijeni dokument prije nego ga pošalje korisniku, odnosno klijentu. Dakle, kada
surfer zatraži neku stranicu sa nastavkom .asp, server je prvo obradi, izvrši
komande koje su zadane u ASP dokumentu, i zatim šalje dokument klijentu. Na
ovaj na

in postiže se interaktivnost, odnosno dinami

nost web stranica. Pomo

Programiranje za Internet

ASP-a možete samo za

initi svoje stranice dodaju

i sitne "cake" poput datuma, ili

broja

a posjeta, ali možete napraviti i ogromne web-aplikacije za pristup bazama

podataka, web-trgovine i sli

no. Da biste uspješno koristili ASP, morate koristiti

Microsoftov web server, ili ta

nije - Microsoft Internet Information Server (IIS) 3.0

ili ve

i. To je ujedno i glavna mana ove tehnologije - ovisna je o Windows

platformi, a na polju servera Unix i Linux zauzimaju zna

ajan procenat. Postoje i

programi koji omogu

avaju pokretanje ASP-a na Unix serverima.

Svakako dobra strana ASP-a je što on nije scripting jezik, dakle ne morate u

iti

njegovu sintaksu i komande da biste ga koristili. Microsoft ga naziva server-side
scripting environment, tj. okruženjem za server-side scripting. On u stvari
predstavlja kombinaciju HTML-a i nekog od skripting jezika - JavaScripta i
VBScripta. Pošto se stranice obra

uju na serveru, ne morate voditi ra

una o

kompatibilnosti koda koji ste napisali sa oba browsera, što je svakako još jedan
plus za ovu tehnologiju.

CGI - Perl

Obi

ni HTML je sasvim dobar kada je rije

o prikazivanju web stranica, grafike,

postavljanja linkova, teksta i ostalih, "uobi

ajenih" radnji. Me

utim, šta ako želite

uraditi neke stvari koje su izvan njegove mogu

nosti, kao npr. prikazati broja

posjeta, napraviti sobu za chatanje, prepoznati koji web browser koristi surfer i
sli

no? Ove stvari zahtijevaju slanje podataka od surferovog web browsera ka

serveru, koji zatim te podatke šalje programima koji ih obra

uju i ponovno

proslje

uju serveru, nakon

ega on šalje HTML dokument korisniku.

CGI, što je skra

enica od Common Gateway Interface, nije programski jezik nego

protokol - skupina pravila po kojima server postupa pri "razgovoru" sa programom.
Dakle, kada korisnik popuni formular na stranici i pritisne Enter, HTML kontroliše
slanje podataka web serveru. On zatim proslje

uje podatke Perl skripti (odnosno

programu) koja procesira podatke. CGI odre

uje kako se ti procesirani podaci

vra

aju nazad do web servera i zatim ponovo do korisnika.

Perl je programski jezik koji se može izvršavati na i na Windows i na Unix
serverima. Jedini uslov za funkcionisanje Perl skripti na serveru jeste postojanje
Perl kompajlera. Dosta je raširen na Internetu i možete na

i ogromnu koli

inu

gotovih Perl scripti koje možete koristiti bez ikakvog pla

anja autoru. Izvršava se

brže od ASP-a i PHP-a, tako da je dobar izbor za procesiranje ve

e koli

ine

podataka i pristup velikim bazama podataka. Velika mana ovog programskog
jezika jeste njegova kompleksnost i težina u

enja.

Ova "jednostavna" Perl scripta

e prikazati vrijeme na web stranici:

#usr/local/bin/perl

print "Content-type.text/plain"," ",

$time="Trenutno je;",$Time;

exit(0);

Programiranje za Internet

5. Macromedia Dreamweaver

5.1. Uvod u Macromedia Dreamweaver

Iako se web stranice mogu kreirati 100% pomo

u obi

nog tekst-editora, kao što je

Notepad, postoje programski paketi koji taj posao uveliko olakšavaju. Najpoznatiji
takav program je Macromedia Dreamweaver.

Prije nego što po

nete da pravite Web strane pomo

u Macromedia

Dreamweaver-a, treba da upoznate razne Dreamwavereove alatke i panoe, koji

vam omogu

iti da efikasno pravite Web prezentacije. Ako prvi put pokre

ete

Dreamweaver, prikazat

e se prozor dobrodošlice s informacijama za nove

korisnike, kao i sažetak novih mogu

nosti za one koji ve

poznaju program.

Dugmad na paleti u dnu prozora služe za kretanje kroz informacije o programu. Po
otvaranju Dreamweavera vidi se i prozor za nov dokument, u kome se obavlja
projektovanje i programiranje. Možda se vide i panoi za dodavanje i mijenjanje
teksta i objekata, za rad s datotekama prezentacije i drugo, Me

u panoima koji se

vide mogu biti traka Insert, pano za prikazivanje svojstava (Properties), prozor
prezentacije (Site) i pano za odgovore (Answers).

Slika 18. Pozdravni prozor Dreamweaver-a

ina Dreamweaverovih panoa svrstana je prema svojim funkcijama u slijede

grupe: Design, Code, Application, Files i Answers. Grupe panoa omogu

avaju da

naj

eš

e korištenim panoima brzo pristupate i da ih jednako brzo sakrivate. Svim

panoima (u pomenutim grupama i izvan njih) možete da pristupite iz menija
Window.

Programiranje za Internet

Ako ste ve

otvarali Dreamweaver, panoi

e biti smješteni tamo gdje ste ih ostavili

kada ste posljednji put zatvorili program. Znak za potvrdu u meniju Window
ozna

ava da su pano ili paleta alatki otvoreni i vidljivi. Može se desiti da pano

bude sakriven ispod drugog panoa ili prozora dokumenta. Da biste prikazali
sakriveni pano, ponovo ga izaberite u meniju Window. Ako se potrebni pano ne
nalazi u trenutno vidljivoj grupi panoa, pojavit

e se i pano i njegova grupa.

Ako je pano izabran, a ipak se ne vidi, izaberite Window, Arrange Panels da bi se
svi paneli vratili na svoja podrazumijevana mjesta. Traka Insert

e oti

i na svoje

mjesto u gornjem lijevom uglu, pano svojstava (Properties) pre

e na dno

prozora, a svi ostali otvoreni panoi na desnu stranu prozora.

Najve

i dio posla obavljate u prozoru dokumenta, gdje možete da umetnete,

promijenite i izbrišete mnoštvo elemenata od kojih se sastoji Web strana. Dok
radite, u prozoru dokumenta prikazuje se približan izgled strane u browseru: Nova
strana se podrazumijevano zove "Untitled Document", što se vidi na naslovnoj traci
dokumenta. Poslije naslova dokumenta, koji je prikazan i u polju Title na paleti
alatki dokumenta, u zagradama je navedeno ime datoteke.

U Dreamweaveru postoje tri na

ina prikazivanja: Design View, Code View i Split

Design and Code. Dugmad za uklju

ivanje ovih prikaza nalaze se na lijevoj strani

palete alatki dokumenta. Dugme aktivnog režima prikazivanja je uvijek istaknuto.

a) "Code" prikazuje samo HTML b) "Split" pokazuje i HTML i izgled

c) "Design" prikazuje stranicu kako

e izgledati u pretraživa

Slika 19. Na

ini prikazivanja stranice

Programiranje za Internet

Slika 22. Pano Properties služi za podešavanje osobina objekata

Pano Properties se koristi za pregled i mijenjanje atributa (svojstava) izabranog
teksta, slika, tabela i ostalih elemenata strane. Njegov sadržaj se mijenja u
zavisnosti od konteksta: atributi koje prikazuje zavise od toga šta je izabrano u
prozoru dokumenta. Da biste smanjili ili proširili pano Properties, pritisnite dugme
za proširenje u donjem desnom uglu panoa. Ako je pano smanjen, može biti
dodatnih svojstava za

ije prikazivanje nema mjesta i koja

e ostati nevidljiva dok

ne proširite pano.

ina panoa koje

ete koristiti tokom pravljenja Web strana jesu usidreni –

složeni u obliku kartica s jezi

kom – unutar grupa panoa. Sidrenje pove

ava

slobodnu površinu prozora, a istovremeno omogu

ava brz pristup potrebnim

panoima. Svaka grupa panoa može biti proširena tako da se prikažu svi njeni panoi,
odnosno sažeta tako da se vidi samo ime grupe.

Ponekad ne

ete mo

i da prona

ete odre

eni pano (jedan od razloga za to može biti

i promjena rezolucije). Ako vam neki pano treba, a ne možete da ga prikažete ni
kada ga izaberete u meniju Window, izaberite opciju menija Window, Arrange
Panels, pa

e se panoi prilijepiti uz ivice ekrana.

5.2. Razvijanje strukture prezentacije

Posvetite se pravljenju detaljne skice ili dijagrama toka prezentacije, jer

ete tako

lakše razviti svoje zamisli, bolje shvatiti opseg projekta i uštedjeti vrijeme i resurse.
Dobra Web prezentacija je intuitivna i ostavlja pozitivan i jedinstven utisak na
posjetioca. Izrada dobre Web prezentacije po

inje definisanjem i sažetim

prikazivanjem razloga i potrebe za takvom Web lokacijom. Zapitajte se ili pitajte
naru

ioca prezentacije: zašto je ona potrebna i

emu

e služiti? Šta ho

ete da

izrazite pomo

u ove prezentacije i na koji na

ete to posti

i? Kakav utisak

ete da ostavite i šta posjetioci ove Web lokacije treba da zapamte?

Poznavanje posjetilaca je suštinski zna

ajno. Ko

e posje

ivati Web lokaciju?

Definisanjem opšteg profila posjetilaca lakše

ete dosti

i ciljnu grupu posjetilaca.

Kada shvatite ko sa

injava vašu budu

u publiku, zapitajte se kakvom tehnologijom

oni raspolažu. Kakve softverske dodatke, browsere i operativne sisteme koristi
ve

ina budu

ih posjetilaca? Sve to morate uzeti u obzir da bi im Web lokacija bila

dostupna. Primjera radi, bilo bi pogrešno napraviti prezentaciju s elementima koje

Programiranje za Internet

podržavaju samo najnoviji i najsavremeniji browseri, ako vaša publika uglavnom
koristi starije ra

unare na kojima se takvi browseri uopšte ne mogu pokrenuti.

Web lokacije u velikoj mjeri zavise od strukture i koriš

enja datoteka; loše

struktuirana Web lokacija zbunjuje posjetioca dok se kre

e po njoj, i teško se

koristi i održava. Da biste napravili jasnu lokaciju, koja je komunikativna i lako se
koristi, morate do kraja da isplanirate strukturu i hijerarhiju datoteka i direktorija
unutar Web lokacije prije nego što po

nete da pravite HTML dokumente.

Važan dio priprema za projektovanje i izradu Web prezentacije jeste definisanje i
prikupljanje njenih sastavnih dijelova: teksta, slika i multimedijskih elemenata.

5.3. Definisanje lokalne web prezentacije

Prvi korak u pravljenju Web prezentacije – koji treba obaviti prije nego što po

nete

izradu Web stranica – jeste biranje postoje

eg ili pravljenje novog direktorija koji

e sadržavati cjelokupnu budu

u Web prezentaciju. Ovaj postupak se naziva

"definisanje lokalne "Web prezentacije". Izabrani direktorij, lokalni korijenski
direktorij, definiše granice lokalne Web prezentacije na vašem lokalnom disku i
odražava stanje udaljene Web lokacije, tj. stvarne lokacije na Web serveru kojoj

posjetioci pristupati. Pri definisanju lokalne Web prezentacije možete da zadate
istu hijerarhiju direktorija u lokalnoj i udaljenoj verziji, što je nezaobilazno
prilikom izrade i održavanja aktivne lokacije.

Pravljenjem lokalne Web prezentacije, koja se sastoji od lokalnog korijenskog
direktorija unutar kojega

ete izgraditi strukturu datoteka i direktorija budu

lokacije, sprije

ete tu lokaciju da pristupa drugim datotekama izvan lokalnog

korijenskog direktorija. Datoteke na lokalnom disku koje se nalaze izvan lokalnog
korijenskog direktorija ne

e biti dostupne udaljenom serveru.

Da bi mnoge Dreamweaverove funkcije, kao što je mogu

nost ažuriranja svih

referenci datoteke koja je premještena u drugi direktorij lokacije, mogle da rade u
potpunosti, lokalna lokacija mora biti definisana. Mjesto

uvanja i hiperveze do

svih datoteka koje lokacija sadrži bit

e relativne, zadate u odnosu na korijenski

direktorij lokacije. Uvijek bi trebalo da pravite lokalne Web prezentacije i da radite
unutar njih. Ako to ne budete

inili, imat

ete problema s hipervezama, putanjama i

korištenjem datoteka.

Prezentaciju

ete razvijati unutar lokalne prezentacije na lokalnom disku, gdje

ete

napraviti i testirati Web strane. Kada otpo

nete izradu novih Web prezentacija,

morat

ete za njih da napravite ili izaberete osnovne direktorije.

Ime osnovnog direktorija može da bude jednako imenu odgovaraju

e prezentacije,

a i ne mora. Ako pravite mnogo prezentacija, koristite imena koja se lako razlikuju.
Ime osnovnog direktorija služi samo vama, za rad s datotekama, pošto ga posjetioci
budu

e Web lokacije ne

e vidjeti.

Programiranje za Internet

radio-dugme "No, I do not want to use a server technology". (Ne

u.) Pritisnite Next

kako biste prešli u sljede

i odjeljak.

Za izradi stati

kih prezentacija izaberite opciju No. Definiciju prezentacije uvijek

možete da izmijenite kad izaberete opciju menija Site, Edit Sites... Ovaj dio kartice
Basic odgovara kategoriji Testing Server na kartici Advanced, gdje imate i dodatne
mogu

nosti za pravljenje dinami

kih prezentacija, kao što je biranje modela

servera koji

e se koristiti na udaljenom serveru.

Slika 24. Izbor na

ina rada sa datotekama

Na vrhu ovog podru

ja Dreamweaver pita: "How do you want to work with your

files during development?" (Izaberite na

in rada s datotekama tokom razvoja ove

prezentacije.) Pritisnite radio dugme, "Edit local copies on my machine, then
upload to server when ready (recommended)".

U istom podru

ju, Dreamweaver pita: "Where on your computer do you want to

store your files?" (Gdje

ete smjestiti datoteke ove prezentacije?). Treba izabrati

neki lokalni direktorij.

Ovdje izabrani direktorij odgovara korijenskom direktoriju udaljene Web lokacije.
Dreamweaver

e pomo

u lokalnog korijenskog direktorija odrediti putanje

dokumenata, slika i hiperveza vaše prezentacije.

Kada budete pravili druge prezentacije, a niste sami prethodno napravili potreban
direktorij, možete pustiti Dreaweaver da automatski napravi korijenski direktorij na
osnovu imena prezentacije koje ste zadali.

Ovo podru

je kartice Basic odgovara polju Local Root Folder u kategoriji Local

Info na kartici Advanced. Napredni (eng. advanced) na

in definisanja prezentacije

ima i opciju Refresh Local File List Automatically, koja je podrazumijevano
uklju

ena, a

ini da Dreamweaver automatski ažurira spisak korištenih datoteka

kad god dodate novu datoteku u direktorij prezentacije. Ako uklonite potvrdu ove
opcije, morat

ete ru

no da ažurirate lokalne datoteke kad god dodate ili uklonite

neku datoteku. Još jedna podrazumijevano uklju

ena opcija na kartici Advanced je

Enable Cache, koja dodjeljuje memoriju za

esto korištene elemente prezentacije.

Time se pove

ava brzina povezivanja i izvršavanja zadataka održavanja Web

lokacije. Premda ovu opciju obi

no treba ostaviti potvr

enu, imajte u vidu da

ponovno upisivanje sadržaja u memoriju usporava rad na veoma velikim Web
lokacijama.

Programiranje za Internet

Pritisnite Next da biste prešli na sljede

i korak. Izaberite "None" u padaju

oj listi

ispod pitanja "How do you connect to your remote server?" (Kako se povezujete s
udaljenim serverom?), ako radite isklju

ivo na lokalnoj prezentaciji i ako ne

ete

morati da pristupate udaljenom Web serveru.

Ovom podru

ju kartice Basic odgovara kategorija Remote Info na kartici

Advanced, gdje ima dodatnih opcija za definisanje prenosa datoteka na udaljeni
server.

Pritisnite Next da biste prešli na sljede

i korak. Pregledajte podatke o prezentaciji

koje ste dosad zadali i pritisnite dugme Done na dnu okvira za dijalog.

Kako ste u odjeljcima Application Server i Remote Info izabrali No, Dreamweaver

e kao vrijednost obje opcije prikazati tekst "Access; I'll set this up later". Kada

pritisnete dugme Done, Dreamweaver

e možda prikazati obavještenje da priprema

memoriju za ovu prezentaciju. Pritisnite OK i Dreamweaver

e pregledati datoteke

u direktoriju DWMX-project, kako bi mogao da pripremi memoriju i da prikaže
prozor Site kada završi s tim.

Aktivirat

e se pano Site (Windows) i prikazati kreirani direktorij, u desnom oknu

prozora, u koloni Local Files.

5.4. Zadavanje browsera

Tokom razvoja Web strana morat

ete stalno da provjeravate kako vaš rad izgleda

u razli

itim browserima, kao što su Netscape, Firefox ili Internet Explorer. Ono što

vidite u prozoru Dreamweavera samo je približno jednako stvarnom izgledu
prezentacije. Svaki browser prikazuje Web strane na razli

it na

in, i mada su neke

od tih razlika neznatne, druge su veoma zna

ajne. Primijetit

ete razlike

ak i

izme

u prikaza koje daju razli

ite verzije istog browsera. Što više budete

provjeravali izgled prezentacije u raznim browserima i operativnim sistemima i
pravili odgovaraju

e izmjene, bit

ete sigurniji da

e posjetioci Web lokacije njene

strane vidjeti kao što ste zamislili. Kartica Preferences u Dreamweaveru služi za
zadavanje browsera u kojima

ete provjeravati izgled strana prezentacije. Da biste

ubrzali provjeru, zadajte prvi i drugi podrazumijevani browser i za svaki definišite
pre

icu s tastature.

Izaberite File, Preview in Browser, Edit Browser List.

Otvorit

e se okvir za dijalog Preferences i prikazati browsere izabrane za provjeru.

Dreamweaver

e automatski prikazati spisak browsera instaliranih u ra

unaru.

Kada pritisnete ime browsera u spisku, polja za potvrdu ispod spiska (Defaults:
Primary Browser, odnosno Secondary Browser) pokazat

e da li se radi o

primarnom ili sekundarnom browseru. Ako imate više od dva instalirana browsera,
ni u jednom od polja za potvrdu ne

e biti znaka za potvrdu, što zna

i da tek treba

da izaberete koji browseri

e biti podrazumijevani.

Programiranje za Internet

ASP i ColdFusion. U spisku kategorija birate vrstu strane - ponu

eni su šabloni

(eng. Templates), kaskadni opisi stilova (eng. CSS Style Sheets), skupovi okvira
(eng. Framesets) i gotovi modeli HTML strana (eng. Page designs).

Na dnu okvira za dijalog New Document nalazi se opcija Make Document
XHTML Compliant (neka dokument bude kompatibilan sa jezikom XHTML).
Jezik za opisivanje Web strana HTML ograni

en je, naro

ito po tome što nove

mogu

nosti nisu kompatibilne s njegovim starijim verzijama, a postoji i mnogo

problema s izvršavanjem na razli

itim platformama. Jezik XHTML (eXtensible

HTML) proširuje mogu

nosti HTML-a, pretvaraju

i ga u jezik tipa XML

(eXtensible Markup Language) u koji su ugra

ene mogu

nosti proširenja.

Prednosti korištenja XHTML-a obuhvataju kompatibilnost sa starijim i novijim
verzijama, izvršavanje na razli

itim ure

ajima za pristupanje Webu - kao što su

mobilni telefoni i ru

ni ra

unari, i mogu

nost proširenja.

Ne odlažite snimanje Web strane dok na nju ne stavite tekst ili slike, ve

snimajte

im otvorite nov dokument. Ukoliko najprije snimite datoteku, sve

putanje, koje referenciraju slike i ostale elemente koje budete uvozili, bi

e propisno

formirane. Ukoliko ne snimite datoteku, za opis mjesta elementa koji se uvozi
koristit

e se referenca "file://putanja", relativno u odnosu na hard disk. Ako

pokušate da umetnete objekat na stranu, a da prethodno niste snimili dokument,
Dreamweaver

e vas upozoriti da za taj element mora da upotrijebi referencu

file://putanja.

Jedna od naj

eš

ih po

etni

kih grešaka u HTML dokumentu su apsolutne putanje

koje pokazuju na lokalni disk onoga ko je kreirao web prezentaciju umjesto na
datoteku na serveru gdje je mogu vidjeti svi korisnici Interneta.

Možete da koristite nastavak imena (oznaku tipa) datoteka .html ili .htm. Kada
snimite dokument, Dreamweaver mu automatski dodaje nastavak imena .htm ili
.html. Podrazumijevani nastavak imena možete da vidite kada izaberete Edit,
Preferences i kategoriju New Document – on je prikazan u tekstualnom polju,
mada je nedostupan (sive boje). Oba nastavka imena predstavljaju istu vrstu
datoteke, ali na istom serveru (i u istom direktoriju) možete da

uvate i uvod.html i

uvod.htm, jer te datoteke ipak imaju razli

ita imena. Obi

no je lakše držati se

jednog ili drugog, kako biste izbjegli greške prilikom pravljenja hiperveza.
(Hiperveza s datotekom uvod.html ne povezuje posjetioca s datotekom uvod.htm.)

Davanje imena datotekama koje

e se koristiti na Web serveru razlikuje se od

imenovanja datoteka za koriš

enje sa lokalnog diska. Prvo, morate da saznate

operativni sistem koji se izvršava na serveru – naj

eš

e su to Unix, Linux,

Windows NT (Windows 2000 server) i Macintosh. Struktura imena se razlikuje na
svakoj od ovih platformi. Primjera radi, Unix i Linux razlikuju mala i velika slova
u imenima i ekstenzijama datoteka, pa u njima datoteka_1.htm nije isto što i
DATOTEKA_1.HTM. Korištenje malih slova pojednostavljuje imenovanje
datoteka i olakšava održavanje ujedna

enosti. Za imena datoteka upotrebljavajte

samo slova (A-Z) i brojke (0-9). Evo još nekih važnih konvencija:

Programiranje za Internet

•

U imenima datoteka ne smije biti razmaka (praznih mjesta). Ako treba
razdvojiti rije

i, upotrijebite podcrtu (_) ili crticu (-). Razmaci izazivaju

probleme zato što ih browseri zamjenjuju oznakom %20.

•

Ne smijete koristiti specijalne znakove kao što su %, *, > ili /.

•

Ne po

injite imena datoteka brojkom.

Koristite što kra

a imena datoteka i direktorija. Vodite ra

una o tome da ime

direktorija postaje sastavni dio URL adrese koju korisnik mora da otkuca da bi
pristupio strani. Prilikom davanja imena direktorijima, pridržavajte se gore
navedenih smjernica za imenovanje datoteka.

5.5.1. Dajte naslov web strani

Svaki HTML dokument mora imati naslov, koji služi prvenstveno za identifikaciju.
On se prikazuje na naslovnoj traci browsera, ukazuje na sadržaj strane i automatski
postaje ime obilježiva

a (eng. Bookmark, Favorite) koji korisnik može da priloži

svojoj kopiji Web strane. Birajte kratke, informativne izraze koji opisuju namjenu
dokumenta. Neka vam pre

e u naviku da svakoj strani date naslov prije nego što

nete da joj dodajete tekst i slike. Ako zaboravite na to, Dreamweaver

e strani

dati ime Untitled Document. Na Internetu možete prepoznati stranice koje su
uradili loši dizajneri upravo po ovom detalju.

Upišite Ispitni zadaci u polje Title na paleti alatki dokumenta. Pritisnite Enter.

Slika 26. Naslov web stranice

Ako ne vidite paletu alatki dokumenta na kojoj je polje Title, izaberite opciju
menija View, Toolbars, Document. Polje Title na po

etku prikazuje naslov

"Untitled Document", pa

ete sada zamijeniti taj naslov pravim naslovom uvodne

strane prezentacije.

5.5.2. Zadavanje boje pozadine

U Dreamweaveru se boja pozadine lako mijenja pomo

u specijalne palete boja za

Web (eng. Web-safe color palette). Na toj paleti ima 216 boja koje jednako
izgledaju u Windowsu i na Macintoshu. Pristupit

ete toj paleti iz okvira za dijalog

Page Properties i promijeniti boju pozadine dokumenta. Izaberite Modify, Page
Properties. Otvorit

e se okvir za dijalog Page Properties. U njemu nema

podrazumijevanih opcija, premda je u Dreamweaveru podrazumijevana boja

Programiranje za Internet

5.5.3. Slika na pozadini strane

Na pozadinu se obi

no stavlja mali grafi

ki objekat,

ijim kopijama se poplo

ava

cijela strana. Strana može imati definisanu i boju i sliku za pozadinu. Ako je veza
korisnika s Internetom spora ili mu je browser spor, prvo

e se prikazati boja

pozadine, što je dobar razlog da je zadate

ak i u slu

aju da namjeravate da stavite

sliku na pozadinu. U

itana slika za pozadinu prikazuje se i prekriva definisanu boju

pozadine.

Izaberite Modify, Page Properties. Otvorit

e se okvir za dijalog Page Properties.

Pritisnite dugme Browse do polja Background Image. Izaberite sliku; zatim
pritisnite OK da bi se zatvorio okvir za dijalog Page Properties.

Sve što ste izabrali primjenjuje se na dokument; vidjet

ete kako slika poplo

ava

prozor dokumenta.

Ako treba da uklonite sliku sa pozadine, otvorite okvir za dijalog Page Properties i
obrišite ime datoteke u polju Background. Ako niste snimili datoteku odmah po
otvaranju dokumenta, u polju Background se prikazuje cjelokupna putanja izabrane
slike na disku. Kada snimite datoteku, putanja

e se izmijeniti i pokazivat

e mjesto

uvanja slike u odnosu na lokalni korijenski direktorij. Uvijek treba snimiti

datoteku prije uvoženja bilo kakvog sadržaja strane,

ak i slike za pozadinu.

5.5.4. Zadavanje podrazumijevane boje fonta

Kada izmijenite boju pozadine ili stavite sliku na nju, može postati uputno da se
izmijeni i boja slova teksta koji se prikazuje u prvom planu: primjera radi, crni
tekst se ne vidi na crnoj pozadini: prilikom biranja šeme boja za dokument,
izaberite kombinacije boja koje se dobro slažu i koje su dovoljno kontrastne. Sli

boje se teško razlikuju, a isto važi i za komplementarne boje, naro

ito na ekranu

monitora.

Izaberite Modify, Page Properties. Otvorit

e se okvir za dijalog Page Properties.

Pritisnite polje za boju teksta, desno od odrednice Text. Prikazat

e se paleta boja

kao ona za boju pozadine. Pipetom izaberite boju s palete, ili upišite njen
heksadecimalni kod u tekstualno polje. Kada pritisnete OK, zatvorit

e se okvir za

dijalog Page Properties i vratit

ete se u dokument.

5.6. Smještanje teksta na stranu

Tekst možete da upišete neposredno u dokument. Obi

no se na po

etku stranice

nalazi neki naslov, koji se ozna

i tagom "Heading". U padaju

oj listi Format na

panou Properties izaberite opciju Heading 4. Upisanom tekstu ste dali HTML
oznaku naslova

etvrtog nivoa.

Programiranje za Internet

Slika 28. Izbor oznake naslova 4. nivoa (Heading 4)

HTML ima šest nivoa naslova, s oznakama od Heading 1 do Heading 6. Naslov
prvog nivoa. Heading 1, ima najve

a slova. Naslovi se prikazuju ve

im ili debljim

slovima od ostatka teksta. Kada pasusu dodate HTML oznaku naslova (eng.
Heading), automatski se ispod njega dodaje odre

en prazan prostor,

iju veli

inu

ne možete da mijenjate.

U mnogim dokumentima, prvi naslov na strani jednak je naslovu prezentacije. Ako
dokument ima više dijelova, tekst prvog naslova treba da se odnosi na prvi dio
dokumenta, npr. naslov prvog poglavlja. Prethodno zadati naslov prezentacije treba
da odredi dokument u širem kontekstu, npr. da sadrži i naslov knjige i naslov
poglavlja.

Kada pritisnete Enter, time ste ispod naslova "Ispitni zadaci" dodali još jedan red,
koji podrazumijevano dobija HTML oznaku pasusa. Za obi

an tekst koristi se, po

pravilu, format pasusa.

Kad god izmijenite dokument, Dreamweaver dodaje zvjezdicu (*) do imena
datoteke na vrhu prozora dokumenta. Ona ozna

ava da je datoteka promijenjena, a

da potom nije snimljena. Zvjezdica

e nestati kada snimite dokument.

esto

snimajte dokument kako biste umanjili rizik od gubitka uloženog rada kada se
Dreamweaver ili operativni sistem sruše (radi brzine koristite: Ctrl+S).

5.6.1. Uvoženje teksta

Tekst se strani može dodati kopiranjem i prenošenjem iz drugog dokumenta. Ako
tekst poti

e iz aplikacije koja podržava kopiranje prevla

enjem i puštanjem (poput

Microsoftovog Word-a, na primjer), možete da otvorite i Dreamweaver i tu
aplikaciju i zatim da kopirate i umetnete tekst u Dreamweaver, ili da ga izaberete i
prevu

ete u Dreamweaver.

Dreamweaver može da otvori datoteke napravljene u programima za obradu teksta
ili programima za prelom strana, ukoliko su snimljene kao ASCII datoteke (

ist

Programiranje za Internet

Slika 29. Alati za poravnanje teksta, ozna

avanje spiskova i za uvla

enje teksta

5.6.3. Pravljenje spiskova

Dreamweaver omogu

ava pravljenje dvije vrste spiskova (lista): neure

enih i

ure

enih. Ure

ena lista (eng. ordered list) sadrži stavke odvojene rednim brojevima

ili slovima abecede, i pore

ane u numerisani, odnosno abecedni spisak. Možete da

koristite arapske ili rimske brojeve, odnosno velika ili mala slova abecede.
Neure

ena lista (eng. unordered list)

esto se naziva lista nabrajanja, jer svaka

stavka u njoj po

inje znakom za nabrajanje (bulletom). Podrazumijevani znak za

nabrajanje koji Dreamweaver prikazuje može biti zamijenjen punim krugom,
kružnicom ili kvadratom.

Slika 30. Osobine neure

ene liste i tipka "List Item..."

Šemu numerisanja ure

ene liste promijenit

ete izmjenom njenih svojstava.

Pritisnite bilo koji red spiska. Zatim pritisnite dugme List Item na panou Properties.

Izaberite samo jedan red liste. Ako izaberete cijelu listu, dugme List Item

e postati

nedostupno i sivo. Ako se dugme ne vidi, pritisnite strelicu za proširenje u donjem
desnom uglu panoa Properties. Otvorit

e se okvir za dijalog List Properties.

Ure

ena lista se u padaju

oj listi List Type naziva Numbered List.

U padaju

oj listi Style izaberite opciju Alphabet Small (a, b, c). Zatim pritisnite

OK. Alphabet Small se prikazuje kao opcija u padaju

oj listi Style samo ako ste

pritisnuli dugme Ordered List. Ako ste pritisnuli dugme Unordered List, prije
biranja stila morate da izaberete opciju Numbered List u padaju

oj listi List Type.

Redni brojevi liste pretvoreni su tako u mala slova abecede.

Programiranje za Internet

Podru

je List Item na dnu okvira za dijalog sadrži padaju

u listu New Style,

pomo

u koje mijenjate izgled pojedine stavke ili grupe stavki spiska, umjesto

cijelog spiska. U istom podru

ju je i polje Reset Count To, koje služi za

proizvoljno zadavanje rednog broja stavke u kojoj se nalazi ta

ka umetanja; sve

naredne stavke automatski dobijaju slijede

e redne brojeve.

Slijedi opis postupka izrade i modifikovanja neure

ene liste. Izaberite dio teksta i

pritisnite dugme Unordered List na panou Properties. Izabrani tekst

e biti uvu

en i

dobit

e znakove za nabrajanje.

Podrazumijevani znak za nabrajanje neure

enih lista možete da promijenite

imenom odgovaraju

ih svojstava, isto kao kod ure

enih lista. U padaju

oj listi List

Type, neure

ena lista se naziva Bulleted List. Pritisnite bilo koji red u listi i

izaberite opciju menija Text, List, Properties. Otvorit

e se okvir za dijalog List

Properties. U padaju

oj listi Style izaberite npr. opciju Square i pritisnite OK

Sve stavke u listi dobit

e kvadrat (eng. square) kao znak za nabrajanje.

Boja rednih brojeva i znakova za nabrajanje, koji se koriste u ure

enim i

neure

enim listama, jednaka je podrazumijevanoj boji teksta dokumenta, koju

zadajete u okviru za dijalog Page Properties.

5.6.4. Ugnjež

ivanje lista

Liste se mogu ugnjež

ivati, odnosno stavljati unutar drugih lista. Vrstu liste je

mogu

e promijeniti i kada je ugnijež

ena. Primjera radi, unutar neure

ene liste

možete imati ure

enu listu. Kada ugnjež

ujete liste, podrazumijevano se koriste

puni krugovi, kružnice i kvadrati (tim redom) kao znakovi za nabrajanje. U
Dreamweaveru se ti znakovi za nabrajanje nazivaju bullet, circle i square.
Odgovaraju

i termini u HTML-u su disc, circle i square.

Neki browseri prikazuju šuplje kvadrate kao znakove za nabrajanje. Takav je, na
primjer, Netscape 4.7 za Macintosh. Internet Explorer 5.0 za Macintosh prikazuje
ispunjene kvadrate. U Windowsu su kvadrati ispunjeni.

Da biste ugnijezdili stavku koju

ete napraviti, pritisnite dugme Text Indent na

panou Properties. Stavka

e biti uvu

ena na slijede

i nivo.

Ako ho

ete da uklonite ugnijež

enu listu, stavite kursor u nju, ali nemojte je

ozna

iti. Pritisnite dugme Text Outdent na panou Propperties i zatim uklonite

ugnijež

eni tekst.

5.6.5. Formatiranje znakova

Da biste istakli odre

ene stavove, rije

i ili izraze, u Dreamweaveru možete na tekst

da primijenite više opcija formatiranja. To su polucrni (podebljani) ispis (eng.
bold), kurzivni ispis (eng. italic) i podvla

enje (eng. underline) teksta.

Programiranje za Internet

•

Da biste dodali font koji nije instaliran na sistemu: upišite ime fonta u polje
ispod liste Available Fonts i pritisnite dugme sa dvostrukom strelicom; time

ete izabrani font dodati kombinaciji. Dodavanje fonta koji nije instaliran na

sistemu korisno je, na primjer, za zadavanje odre

enog Windowsovog fonta

kada radite na Macintoshu.

•

Da biste premjestili kombinaciju fontova naviše ili naniže u listi: pritiskajte
dugmad sa trougli

ima okrenutim nagore i nadole u gornjem desnom uglu

okvira za dijalog.

Slika 31. Izbor kombinacije fontova

Možete da uklonite podešene parametre fontova i vratite tekst u podrazumijevani
font: najprije izaberite tekst ispisan fontom koji ho

ete da uklonite, a potom

izaberite opciju Default Font u padaju

oj listi Font na panou Properties. Možete i

da izaberete opciju menija Text, Font, Default Font.

5.6.7. Promjena veli

ine fonta

U HTML-u su mogu

nosti mijenjanja veli

ine fonta prikazanog na strani

ograni

enje. Izgled strane

ete bolje kontrolisati ako koristite kaskadne opise

stilova (eng. cascading style sheets, CSS).

Veli

ine fontova u listi poslagane su od 1 do 77, od +1 do +7 i od –1 do –7. Ako

izaberete broj bez predznaka (1 je najmanji font, a 7 najve

i), zadali ste apsolutnu

veli

inu fonta. Biranjem broja s predznakom plus ili minus, zadajete relativnu

veli

inu fonta u odnosu na njegovu osnovnu veli

inu. Broj +1, na primjer, zadaje

font za jedan broj ve

i od njegove osnovne veli

ine.

Podrazumijevana osnovna veli

ina fonta u browseru je 3. Ako izaberete +3 za

veli

inu fonta, zapravo ste zadali 6 (3+3). Najve

a veli

ina fonta je 7, a najmanja 1.

Svaki font ve

i od 7 prikazuje se veli

inom 7; primjera radi, ako izaberete veli

inu

fonta +6, 3+6 je ve

e od 7, ali

e se ipak prikazati font veli

ine 7.

Korištenje relativnih veli

ina fontova omogu

ava ve

u kontrolu nad izgledom

strane kao cjeline, odnosno nad izgledom dijela teksta u odnosu na ostatak strane;
po pravilu, korisnici lakše rade sa relativnim veli

inama nego sa apsolutnim.

Programiranje za Internet

5.6.8. Mijenjanje boje slova

U Dreamweaveru se boja teksta lako mijenja.

Prozor za biranje boja se automatski zatvara kada pritisnete neki uzorak boje, koju
Dreamweaver odmah primjenjuje na tekst. Prozor za biranje boja možete otvoriti i
pomo

u opcije menija Text, Color,

ime nekoliko takvih prozora postaje dostupno.

Sve boje koje upotrijebite u prezentaciji

uvaju se na panou Assets. Da biste isti

skup boja mogli dosljedno da koristite u cijeloj prezentaciji, snimite naj

eš

korištene boje u direktorij Favorites na panou Assets: Pritisnite strelicu lijevo od
grupe panoa Files. Prikazat

e se grupa panoa Files, u kojoj se nalazi i pano Assets.

Ako grupa panoa Files nije otvorena, izaberite Window, Assets. Na panou Assets
pritisnite ikonicu Colors u lijevoj koloni, a zatim radio-dugme Site pri vrhu panoa.
Prikazat

e se sve boje koje ste ve

koristili u prezentaciji "Ispitni zadaci".

Izaberite jednu od boja iz spiska boja upotrijebljenih u prezentaciji, prikazanog na
panou Assets. Pritisnite dugme Add to Favorites u donjem desnom uglu panoa
Assets. Dreamweaver

e prikazati okvir za dijalog s porukom da je izabrana boja

dodata u listu Favorites. Da biste vidjeli spisak naj

eš

e korištenih boja, Favorites,

pritisnite istoimeno radio-dugme pri vrhu panoa Assets.

Slika 32. Lista korištenih boja u dokumentu

5.7. Definisanje html stilova

Da bi Web strane bile zanimljivije, ispisuju se raznim fontovima. Oblik, veli

inu i

boju slova možete lako da mijenjate, ali ako ho

ete da upotrijebite nekoliko

kombinacija boja, oblika i veli

ina slova za cijelu prezentaciju, te kombinacije

parametara morali biste da pamtite od strane do strane i od jedne selekcije do
druge. HTML stilovi

uvaju formatiranje slova i pasusa izabranog dijela teksta,

koje možete ponovo da upotrijebite u drugim pasusima istog dokumenta i u drugim
dokumentima. HTML stilovi

ine da dokumenti izgledaju ujedna

enije, postupak

formatiranja teksta je znatno ubrzan, a iste stilove možete da koristi cijeli tim
dizajnera. Ako izmijenite ili obrišete odre

eni HTML stil, to nimalo ne uti

e na

izgled teksta ve

formatiranog tim stilom.

Programiranje za Internet

HTML Styles nije potvr

eno. Zatim treba da izaberete stil koji ho

ete da obrišete i

da pritisnete sli

icu korpe za otpatke u donjem desnom uglu panoa. Ako zaboravite

da isklju

ite opciju Auto Apply, a ima izabranog teksta, taj tekst

e možda biti

formatiran stilom koji ste htjeli da uklonite. Formatiranje teksta možete da uklonite
kada izaberete tekst i zatim opciju Clear Paragraph Style ili Clear Selection Style
na panou HTML Styles. Tekst

e izgubiti sve formatiranje, bez obzira na to da li

mu je ono preneseno pomo

u HTML stila ili pomo

u panoa Properties. Ako brišete

stil pasusa,a kursor možete da smjestite bilo gdje u pasus – ne morate da birate
cijeli pasus.

HTML stilovi koje napravite mogu se primijeniti u drugim projektima i dijeliti s
ostalim korisnicima. Kada definišete HTML stil, u direktoriju Library se snima
datoteka Styles.html. Tu datoteku možete da kopirate i premjestite u druge
direktorije prezentacije, ali da je podijelite s ostalim saradnicima.

5.8. Dodavanje specijalnih znakova

Prilikom rada u Dreamweaveru katkada zatrebaju znakovi i ostale informacije
kojima ne možete pristupiti direktno sa tastature. Ovi specijalni znakovi imaju
specifi

ne HTML kodove ili alternativne pre

ice s tastature koje je teško zapamtiti.

Zadajte naredbu Insert, HTML, Special Characters, a zatim izaberite znak koji
treba ubaciti u tekst. Ako tog znaka nema na spisku ponu

enih, izaberite naredbu

Other...

Slika 34. Dodavanje specijalnih znakova

5.9. Dodavanje horizontalnih linija

Horizontalna linija se pruža preko cijele strane i vizuelno odvaja dijelove
dokumenta. Zadajte naredbu Insert, HTML, Horizontal Rule. Dok je horizontalna
linija izabrana, upišite 70 u polje W na panou Properties. Izaberite % u padaju

listi desno od broja koji ste upravo upisali.

Programiranje za Internet

Horizontalna linija

e tako zauzeti 70 odsto širine (eng. width, W) prozora

browsera, bez obzira na širinu samog prozora. Linija se prikazuje kao tanka pruga.

Ako ho

ete da zadate apsolutnu širinu linije, izaberite opciju pixels u padaju

listi. U tom slu

aju, linija ne mijenja širinu kada korisnik promijeni veli

inu

prozora browsera.

Pritisnite polje Shading kako biste uklonili znak za potvrdu iz njega. U polje H
upišite 1. Kad se ukloni potvrda iz polja Shading, prikazuje se puna linija.
Horizontalna linija je visoka (eng. height, H) 3 piksela.

Horizontalnu liniju možete i da poravnate s lijevom marginom, sa desnom
marginom ili centralno. Podrazumijevano poravnanje horizontalne linije je
centralno.

Slika 35. Osobine horizontalne linije

Izgled linije možete da promijenite kada je izaberete i promijenite joj parametre na
panou Properties.

5.10. Automatsko dodavanje datuma

Katkada treba voditi ra

una o tome kada ste posljednji put izmijenili stranu u

prezentaciji. Dreamweaver može da stavi datum i vrijeme posljednje izmjene na
sve strane prezentacije i da ih automatski ažurira svaki put kada snimite datoteku,
da to ne biste radili ru

no.

To nije dinami

ki datum koji se mijenja svaki put kada korisnik pristupi strani,

nego datum koji govori posjetiocima kada ste posljednji put ažurirali sadržaj Web
lokacije. Postavite kursor tamo gdje ho

ete da umetnete datum. Datum se obi

prikazuje na dnu strane. Okvir za dijalog Insert Date može da otvorite pomo

opcije menija Insert, Date.

Slika 36. Dodavanje datuma

Programiranje za Internet

Slika 37. Umetanje slike u html stranicu

Dok ne snimite datoteku, Dreamweaver ne može da napravi ovakve reference, pa
mora umjesto njih da pravi putanje na osnovu položaja slika na lokalnom disku, što
nisu valjane hiperveze i ne rade kada se prezentacija postavi na Web. Obavezno
snimite dokument prije nego što po

nete da ume

ete grafi

ke elemente. Ako to ne

uradite, Dreamweaver

e prikazati upozorenje i sa

ekati dok ne snimite datoteku,

da bi popravio putanju slika. Ako se slika koju ste izabrali u okviru za dijalog
Select Image Source nalazi izvan lokalne prezentacije, Dreamweaver

e prikazati i

sljede

e upozorenje ispod menija Relative To: The file is outside the root folder

(Izabrana datoteka se nalazi izvan osnovnog direktorija lokacije).

Od verzije 8 Dreamweaver prilikom svakog umetanja slike zahtijeva da se unese i
alternativni tekst za svaku sliku. Tekst iz polja Alt prikazuje se umjesto slike ako je
posjetilac onemogu

io prikazivanje slika u svom browseru, ako njegov browser

uopšte ne može da prikazuje slike ili ako u

itavanje odre

ene slike nije uspjelo.

Umjesto slike, tada se prikazuje tekst koji ste upisali u polje Alt. Tako

er služi i za

indeksiranje stranica u pretraživa

kim servisima. Svim grafi

kim objektima koji su

neophodni za navigaciju po lokaciji morate dodati HTML oznake <alt> (tj. upisati
tekst u polje Alt). Dodavanje oznaka <alt> je korisno i kod ostalih grafi

kih

elemenata, jer ako korisnik onemogu

i prikazivanje slika u svom browseru ili ima

browser koji može da prikazuje samo tekst, ipak

e vidjeti barem dio informacija

koje bi mu ina

e promakle. Slabovide osobe koriste specijalne browsere, koji

izgovaraju tekst <alt> oznaka, kao i tekst ispisan na Web strani. Kona

no, <alt>

Programiranje za Internet

tekst se nakratko prikazuje u Internet Exploreru kada korisnik zaustavi pokaziva

iznad grafike.

5.11.1. Mijenjanje veli

ine grafi

kih elemenata i vra

anje na prvobitnu

veli

inu

Kada uvezete grafi

ki objekat, njegova širina i visina prikazuju se na panou

svojstava i automatski upisuju u HTML kod, što browseru daje podatke potrebne
za definisanje izgleda strane. Veli

ina slike bitno uti

e na brzinu njenog u

itavanja.

U Dreamweaveru možete da promijenite te dimenzije, korištenjem miša ili pomo

polja u panelu svojstava.

Koristite HTML oznake za širinu i visinu kako bi grafika izgledala manja, a da
samu grafi

ku datoteku ne mijenjate. Veli

ina datoteke, prikazana na panou

svojstava, nije se promijenila.

Slika 38. Promjena veli

ine slike: širina je smanjena neproporcionalno,

te je u panou za promjenu osobina ispisana podebljano

Parametri širine i visine automatski se prilago

avaju novim dimenzijama slike i

ispisuju podebljanim brojkama. Ovo formatiranje je pokazatelj da je grafi

kom

objektu mijenjana veli

ina. Dešava se da slu

ajno promijenite veli

inu slike, pa

podebljani brojevi treba da vas podsjete da je veli

ina mijenjana. Veli

inu slike

možete promijeniti i upisivanjem novih vrijednosti u polja za širinu (eng. Width,
W) i visinu (eng. Height, H).

Ako ho

ete da odnos širine i visine slike ostane nepromijenjen prilikom mijenjanja

njene veli

ine, držite taster Shift dok mišem povla

ite ru

ice u uglovima slike.

ite kako je kvalitet slike opao kada ste je pove

ali. Slike se u browserima

prikazuju u rezoluciji ekrana, koja iznosi 72 ta

ke po in

u (eng. dots per inch, dpi).

Ova rezolucija nije dovoljna za lijepo prikazivanje uve

anih slika. Sliku možete da

smanjite i tada bi izgledala dobro, ali time ne mijenjate veli

inu grafi

ke datoteke,

Reset size
(vra

anje

originalne
veli

ine

slike

Programiranje za Internet

5.11.3. Dodavanje okvira oko slike

Katkada treba istaknuti sliku u odnosu na pozadinu. Jedan od na

ina da se to

postigne jeste i dodavanje okvira oko slike. Okvir može da privu

e pažnju na sliku

i da doprinese ujedna

enosti stila cijele Web prezentacije. Ponekad okvir može da

posluži i kao hiperveza. Na panou svojstava upišite 1 u polje Border. Dreamweaver

e oko grafike nacrtati okvir, debljine 1 piksel.

Debljinu okvira možete proizvoljno da zadajete. Boja okvira jednaka je
podrazumijevanoj boji teksta, zadatoj u okviru u dijalog Page Properties.

Ako slici pridružite hiperlink, boja okvira te slike postat

e jednaka

podrazumijevanoj boji hiperlinkova, zadatoj u okviru za dijalog Page Properties.
Na boju okvira možete da uti

ete i dodavanjem HTML oznaka za boju fonta prije i

poslije HTML oznake same grafike, u HTML kodu.

5.11.4. Omotavanje teksta oko slika

Mogu

nosti definisanja rasporeda elemenata strane u HTML-u obuhvataju i

omotavanje teksta oko slika. Slika se prikazuje u podrazumijevanom položaju, u
kome prvi red teksta po

inje na visini donje ivice slike.

Ako iz padaju

e liste Align na panou svojstava izaberete opciju Left, slika

e biti

poravnata s lijevom marginom. Tekst desno od nje ide na visini donje ivice slike do
desne margine i zatim se u novom redu vra

a sve do lijeve. Promjenom atributa

Align, oko slike možete da prelomite više redova teksta. Kada izaberete opcije Left
ili Right u padaju

oj listi Align, Dreamweaver stavlja simbol sidra za mjesto gdje

je slika umetnuta. Ako ho

ete, možete da premjestite ovaj simbol na drugo mjesto.

Sidro mora biti na po

etku teksta, da bi prelamanje teksta oko slike bilo ispravno.

Ovaj simbol pokazuje mjesto gdje se HTML oznaka slike nalazi u odnosu na tekst.
Ako ne vidite taj simbol, izaberite opciju menija View, Visual Aids, Invisible
Elements i potvrdite istoimenu stavku. Simbol sidra se ne vidi u browseru.

Slika 39. Tok teksta oko slika

Lista Align sadrži nekoliko opcija za slike, me

u kojima su Top i Text Top. Ako

va to zbunjuje, zapamtite da tekst može da omota grafiku samo s lijeve ili s desne

align=Right

align=Left

align=Default

Programiranje za Internet

strane, pa su jedine opcije koje možete da izaberete Left i Right. Ostale opcije služe
za smještanje samo jednog reda teksta do grafike.

Imajte u vidu da poravnanje slike mijenjate kad god izaberete opciju poravnanja
razli

itu od Browser Default (kako je podrazumijevano u browseru). Pri tome se

slika neznatno pomjera u odnosu na originalni položaj. Taj pomjeraj ne možete da
kontrolišete, niti da ga izbjegnete. Veli

ina pomjeranja se mijenja u zavisnosti od

browsera, ali obi

no iznosi samo nekoliko piksel, pa nije upadljiva. Me

utim, ako

pokušate da poravnate sliku u

eliji tabele, i to malo pomjeranje može da smeta. U

tom slu

aju, upotrijebite druge metode za kontrolu položaja grafike.

Koli

ina teksta koji se omotava oko grafike zavisi od veli

ine slova kojima je tekst

ispisan u prozoru browsera, koli

ine teksta i veli

ine prozora browsera. Kada

promijenite veli

inu prozora (bez obzira na to da li se radi o Dreamweaveru ili o

browseru), promijenit

e se i na

in na koji je tekst prelomljen oko grafike. Vodite

una i o tome da je slika koju vidite u Dreamweaveru samo otprilike jednaka

onome što

e se vidjeti u browseru.

Kad umetnete grafiku, sadržaj dokumenta koji dolazi poslije slike biva gurnut
nadole. Kada sliku poravnate s lijevom marginom pomo

u dugmeta Align Left, taj

sadržaj se ne vra

a uvijek na svoje mjesto, ukoliko koristite tabele. Zbog toga može

izgledati da u dokumentu ima viška praznog prostora. Ako do

e do toga, samo

pritisnite izvan posljednje tabele, tj. unutar tijela dokumenta.

5.11.5. Prilago

avanje prostora oko slike

Kada omotate tekst oko slike, vjerovatno

ete htjeti i da prilagodite prostor oko nje.

Možete da dodate vertikalni prostor (eng. V space) i horizontalni prostor (eng. H
space).

Ako na panou svojstava, upišete 10 u polje H Space, ovaj parametar zna

i da

e s

lijeve i s desne strane slike biti 10 piksela slobodnog prostora. Ne možete da dodate
prostor na samo jednu stranu slike.

Ako upišete 6 u polje V Space, ovaj parametar zna

i da

e s gornje i s donje strane

slike biti 6 piksela slobodnog prostora. Ne možete da dodate prostor na samo jednu
stranu slike.

5.11.6. Poravnavanje slike u odnosu na jedan red teksta

esto treba poravnati sliku u odnosu na jedan red teksta kraj nje. Relativni položaj

slike prema tekstu možete da promijenite pomo

u opcija poravnanja.

Absolute Middle poravnava sredinu reda teksta sa sredinom slike. Ostale opcije su:

•

Baseline: Poravnava dno slike sa osnovnom linijom teksta. Ova opcija je
obi

no podrazumijevana u browserima.

Programiranje za Internet

broj (#) u polje Link panoa svojstava. Ne brišite ovaj znak jer on rezerviše mjesto
za hipervezu i ukazuje na to da se podru

je može pritisnuti.

Kada napravite jednu ili više mapiranih slika, pojavit

e se ikonica mape na dnu

dokumenta (naj

eš

e). Ova ikonica li

i na ikonicu sidra, a vidi se samo u

Dreamweaveru, ne i u browseru. Vidljivost ovakvih objekata možete da uklju

ujete

i isklju

ujete pomo

u opcije menija View, Visual Aids.

Aktivna podru

ja koja napravite lako je preurediti: možete im mijenjati veli

inu,

premještati ih i brisati kad god ho

ete. Da biste premjestili aktivno podru

je,

dovedite pokaziva

miša u podru

je i prevucite ga. Ako ho

ete da uklonite aktivno

podru

je, izaberite ga i pritisnite Backspace.

Na isti na

in prave se i kružna aktivna podru

ja na slikama. Ako se dva i više

aktivnih podru

ja preklapaju, prvo koje ste napravili ima prvenstvo u odnosu na

sva kasnija.

Ako znak # u polju Link zamijenite URL adresom i izaberete opciju "_blank" u
padaju

oj listi Target, ta se hiperveza otvara u novom prozoru browsera.

Ako aktivno podru

je treba da ima složeniji oblik, možete ga dobiti pomo

u alatke

za poligonalna aktivna podru

ja (Polygon Hotspot), kojom treba da pritisnete

tjemena podru

ja. Ako je alatka Polygon izabrana, svaki pritisak miša pravi jedno

tjeme aktivnog podru

ja. Linija povezuje svako slijede

e tjeme s prethodnim. Kako

budete pritiskivali sliku i pravili tjemena, vidjet

ete kako se stvara providno

aktivno podru

je definisano tim tjemenima. Nastavite da pritiskate i pravite

tjemena sve dok ne dobijete oblik koji želite. Ne morate da "zatvorite" oblik
ponovnim pritiskanjem po

etnog tjemena. Što više tjemena aktivnog podru

zadate, to

e u dokumentu biti potreban duži kod da bi ih opisao.

Kada završite rad na mapiranoj slici, pritisnite izvan aktivnog podru

ja, dakle neki

drugi dio slike. Pritiskom izvan mapirane slike, na panou svojstava se prikazuju
svojstva slike.

Ako ho

ete da dobijete kvadratno aktivno podru

je pomo

u alatke za pravougaona

aktivna podru

ja (Rectangular Hotspot), držite taster Shift dok crtate podru

mišem.

Ako mapiranu sliku kopirate i prenesete u drugi dokument, Dreamweaver

e u

kopiji zadržati sve hiperveze i aktivna podru

ja.

5.12. Crtanje tabela u prikazu layout

Dreamweaver MX pruža dvije mogu

nosti za pravljenje tabela: prikaze Layout i

Standard. Prikaz Layout je sli

an programu za pravljenje rasporeda elemenata na

strani, gdje se crtaju pravougaonici u koje zatim ubacujete tekst ili slike. Možete da
mijenjate veli

inu tih pravougaonika i da ih razmještate po strani kako ho

ete.

Programiranje za Internet

Na traci Insert izaberite karticu Layout i pritisnite opciju Layout View. Prešli ste u
prikaz Layout, u kome se elementi lako smještaju na stranu. Prikazat

e se

obavještenje pod naslovom "Getting Started in Layout View", koje ukratko opisuje
glavne alatke: za pravljenje nacrta

elije i za pravljenje nacrta tabele. Kada

pro

itate ovo objašnjenje, pritisnite OK.

U pomenutom objašnjenju postoji polje "Don't show me this message again" (Više
ne prikazuj ovu poruku). Ako ne potvrdite ovo polje, isto objašnjenje

e se ponovo

prikazati kada restartujete Dreamweaver i pre

ete u prikaz Layout.

Neposredno ispod naslovne trake dokumenta, pojavit

e se svijetlosiva traka s

natpisom "Layout View". Mada izgleda kao da je sastavni dio dokumenta, ova
traka se ne vidi u browserima i koristi se u Dreamweaveru samo da bi vas
obavijestila u kom prikazu radite.

Slika 41. Layout na

in rada

SAVJET: Drugi na

in da pre

ete u prikaz Layout daje opcija menija View, Table

Mode, Layout Mode. Možete da upotrijebite i pre

icu s tastature Ctrl+F6.

Pritisnite ikonicu Draw Layout Cell u podru

ju Layout Insert. Kada dovedete

pokaziva

u prozor dokumenta, on

e se promijeniti u znak plus (+). Alatka Draw

Layout Cell služi za crtanje

elija, odnosno pravougaonika koje zovemo

elije, bilo

gdje na strani. Sadržaj tabele je podijeljen na njene

elije, jer sve tabele imaju

jednu ili više

elija u presjeku kolona i redova. U prikazu Layout ne morate da

brinete o broju i rasporedu redova i kolona kada crtate tabelu, jer se o njima
automatski brine Dreamweaver kada nazna

ite mjesto

elija na strani.

Dovedite pokaziva

na sredinu strane, zatim pritisnite miša i vucite ga dok kontura

elije ne bude odgovaraju

e veli

ine. Automatski

e se iscrtati struktura tabele,

koja sadrži

eliju koju ste sami nacrtali. Nacrt tabele je širok kao prozor

dokumenta, što vas ne sprje

ava da veli

inu te tabele mijenjate kako god ho

ete.

Nacrt

elije je iscrtan plavom bojom da bi se razlikovao od nacrta tabele, koji je

zelen. Puna plava linija nazna

ava da je ta

ka umetanja u

eliji, dok isprekidana

plava linija nazna

ava da ta

ka umetanja nije u

eliji. Svi ostali dijelovi nove

tabele, osim

elije, iscrtani su sivom bojom. Tanke bijele linije nazna

uju redove i

kolone tabele koju je Dreamweaver nacrtao oko nacrta vaših

elija. Kada dovedete

pokaziva

miša iznad ivice nacrta

elije, on postaje crven, i ukazuje na

eliju iznad

koje se nalazite.

Programiranje za Internet

101

sredinom

elije. Kad sami napravite nacrt

elije, Dreamweaver poravnava njen

sadržaj s gornjom ivicom

elije, ali to se može lako promijeniti.

U polje Bg na panou svojstava možete upisati oznaku boje pozadine ili izabrati
boju iz ponu

ene palete (ili pipete).

elija se bira pritiskanjem njene ivice (tako da

vidite njene ru

ice za biranje), a ne postavljanjem kursora u nju.

Ako ho

ete da promijenite boju pozadine cijele tabele, pritisnite njenu zelenu ivicu

kako biste je izabrali; možete da pritisnete i bilo koju sivu površinu unutar tabele.
Zatim pritisnite polje Bg i izaberite boju iz palete.

Ako u padaju

oj listi Horz na panou svojstava izaberete opciju Center, time ste

promijenili poravnanje teksta u

elijama, koji je sada centriran u odnosu na lijevu i

desnu ivicu

elije. Opcija Middle tekst centrira po vertikali

elija.

5.12.3. Širina tabele i slike koje održavaju razmak

U prikazu Layout možete da kontrolišete širinu tabele na dva na

ina: korištenjem

podrazumijevane širine ili opcije Autostretch, koja prouzrokuje da

elije

automatski mijenjaju širinu u zavisnosti od širine prozora browsera. U ovoj vježbi
primijenit

ete opciju Autostretch i nau

iti da koristite slike koje održavaju razmak

(eng. spacer images).

Ukoliko odre

ena slika za održavanje razmaka nije pridružena prezentaciji, pojavit

e se okvir za dijalog Choose Spacer Image.

Ako se gornji okvir za dijalog prikaže, izaberite opciju Use an Existing Spacer
Image File (Upotrijebi postoje

u sliku za održavanje razmaka), pritisnite OK i

prona

ite sliku. Prikazani okvir za dijalog sadrži i opciju za pravljenje slike za

održavanje razmaka. Ako radite na prezentaciji kojoj nije pridružena slika za
održavanje razmaka, izaberite opciju Create a Spacer Image File i pritisnite OK,
kako biste došli do direktorija u koji Dreamweaver treba da snimi sliku za
održavanje razmaka. Najbolje mjesto za to je direktorij Images.

Kolona koja automatski prilago

ava svoju širinu, u tabeli se prikazuje cik-cak

linijom. Kada izaberete opciju automatskog prilago

avanja širine kolone

Autostretch, Dreamweaver ume

e slike za održavanje razmaka kako bi održao

zadatu, fiksnu širinu kolona. Slika za održavanje razmaka odre

uje razmak

elija u

tabeli, ali se ne vidi u prozoru browsera.

Ako ho

ete da uklju

ite automatsko održavanje širine kolone, možete da otvorite i

podmeni u zaglavlju kolone i da tamo izaberete opciju Make Column Autostretch.

Dok mijenjate širinu prozora browsera, mijenja se i širina ove kolone, odnosno svih
njenih

elija. Pomo

u bijelih vo

ica na strani, utvrdite da li pojedina

elija pripada

koloni koju ste izabrali.

Ako odlu

ite da ne koristite slike za održavanje razmaka, kolone mijenjaju

veli

inu, pa

ak i nestaju, ukoliko nemaju sadržaja. Slike za održavanje razmaka

Programiranje za Internet

102

možete i sami da ume

ete i uklanjate, a možete pustiti i Dreamweaver da ih

automatski dodaje prilikom pravljenja Autostretch kolone. Ako ho

ete sami da

ume

ete i uklanjate slike za održavanje razmaka, izaberite jednu od sljede

ih opcija

u podmeniju na vrhu kolone:

•

Add Spacer Image: Ume

e sliku za održavanje razmaka u kolonu. Tu sliku

ete vidjeti, ali kolona može malo da se pomjeri.

•

Remove Spacer Image: Uklanja sliku za održavanje razmaka i kolona može
malo da se pomjeri.

•

Remove All Spacer Images: Sve

elije mogu malo (ili mnogo) da se pomjere, u

zavisnosti od sadržaja. Kolone u kojima nema sadržaja mogu potpuno da
nestanu.

Podmeni na vrhu kolone je kontekstni i mijenja se u zavisnosti od kolone koju ste
izabrali. Nemaju sve kolone sve tri gornje opcije.

5.12.4. Izrada tabele u prikazu standard

Kada ste pravili tabelu u prethodnoj vježbi, Dreamweaver je uradio glavninu posla.
Baš zato, u prikazu Layout donekle gubite kontrolu nad izgledom tabele. U
standardnom prikazu morate sami sve da uradite. Prednost standardnog prikaza je
preciznost i mogu

nost detaljnije kontrole izgleda tabele. Osim toga neke važne

Dreamweaverove mogu

nosti, kao što je podjela na slojeve, uopšte ne postoje u

prikazu Layout, nego morate da koristite prikaz Standard.

Premda je u prikazu Layout lako crtati

elije i tabele,

esto treba pregledati stranu u

standardnom prikazu, jer se tek tu vidi HTML struktura tabela. U ovom prikazu
možete sami da pravite tabele i da pregledate tabele koje je Dreamweaver napravio
dok ste crtali u prikazu Layout.

Ako su informacije koje ho

ete da prikažete podijeljene u redove i kolone, lakše je

upotrijebiti standardnu tabelu nego nacrtati novu.

esto

ete u standardnom

prikazu imati ve

e mogu

nosti da kontrolišete izgled tabele.

Pritisnite opciju Standard View na kartici Layout trake Insert. Kada umetnete
tabelu u standardnom prikazu, njene

elije i ivice se vide odmah, a ikonice za

crtanje

elija i tabela su nedostupne. Za prelazak u standardni prikaz možete da

upotrijebite i opciju menija View, Table Mode, Standard Mode. Tre

i na

in za

pre

ice s tastature; Shift+Ctrl+F6.

Za umetanje tabele može da posluži dugme Table na kartici Tables trake Insert.
Otvorit

e se okvir za dijalog Insert Table. Okvir za dijalog Insert Table sadrži

polja za davanje slijede

ih parametara:

•

Rows: Broj redova tabele. Podrazumijevana vrijednost u Dreamweaveru je 3.

•

Columns: Broj kolona tabele. Podrazumijevana vrijednost je 3.

Programiranje za Internet

104

5.13. Pravljenje šablona (Template-a)

Šablon je posebna vrsta datoteke u Dreamweaveru koja se koristi kada postoji
dosta stranica u kojima se nalazi dio sitog koda (teksta, slika, grafike, tabela,...).
Unutar šablona se definišu podru

ja koja su zajedni

ka i podru

ja u koje se unosi

sadržaj koji se nalazi samo u toj stranici. Svaka promjena na šablonu može se
automatski reflektovati na izmjene svih stranica za koje je taj šablon vezan,
odnosno od kojeg su napravljene.

Šablon definiše izgled i raspored strana koje

ete napraviti pomo

u njega. Šablon

možete da pravite od nule, a možete da uzmete i postoje

u HTML stranu i da je

snimite kao šablon, naredbom File, Save As Template. U dijalogu "Save As
Template" birate prezentaciju u koju

ete snimiti šablon.

Dreamweaver šablonu automatski daje ime datoteke iz koje je nastao. Ako ho

ete

da promijenite ime šablona, upišite ga u polje Save As. Ono ionako služi samo
vama: Šablonima dajte opisna imena. Strana je tako snimljena kao šablon, pa
možete da je koristite za pravljenje drugih strana.

Slika 44. Snimanje šablona

Šablon se snima u direktorij Templates sa nastavkom imena, .dwt. Ako takav
direktorij ne postoji, Dreamweaver

e ga automatski napraviti.

5.13.1. Ubacivanje oblasti koje se mogu mijenjati u šablon

Drugi korak u pravljenju šablona jeste definisanje oblasti na strani koje se mogu
mijenjati u dokumentima napravljenim na osnovu tog šablona.

Po pravilu, sve oblasti šablona su nepromjenljive. Ako ho

ete da mijenjate

informacije na stranama napravljenim pomo

u šablona, morate da definišete oblasti

na njima koje se mogu mijenjati. Ove oblasti na mnogim Web lokacijama sadrže
tekst. Svi dijelovi šablona koji nisu izri

ito definisani kao promjenljivi, daju

Programiranje za Internet

105

nepromjenljive oblasti strana zasnovanih na tom šablonu. Prilikom rada na šablonu
možete da mijenjate i oblasti koje

e biti promjenljive i one koje to ne

e biti, dok

na strani napravljenoj pomo

u šablona možete da mijenjate samo oblasti definisane

kao promjenljive.

Za vježbu kreirajte prazan HTML dokument, a zatim u njemu nacrtajte tabelu sa 2
reda i 2 kolone. Snimite datoteku kao šablon, pod imenom Sablon.dwt.

U šablonu Sablon.dwt izaberite drugu

eliju u drugom redu tabele pomo

u bira

oznaka na dnu prozora dokumenta: pritisnite oznaku <td>. Ovaj odjeljak strane
mora biti promjenljiv, kako biste mogli da mijenjate njegovu sadržaj na stranama
koje

ete napraviti pomo

u ovog šablona.

Pritisnite ikonicu Editable Region na kartici Templates trake Insert. Otvorit

e se

okvir za dijalog New Editable Region (nova promjenljiva oblast). Upišite rije

"tekst" kao ime promjenljive oblasti šablona i pritisnite OK.

Slika 45. Pravljenje promjenljive oblasti u šablonu

Imena oblasti ne smiju da sadrže specijalne znakove (znakove navoda, zagrade
itd.). Svaka oblast jednog šablona mora imati druga

ije ime.

Pošto ste izabrali

eliju tabele kada ste definisali promjenljivu oblast, cijela

elija

je istaknuta plavim okvirom na

ijem vrhu jezi

ak prikazuje ime promjenljive

oblasti. Ako se ne vide imena i konture izabranih oblasti, izaberite opciju menija
View, Visual Aids, Invisible Elements.

Ne možete definisati više

elija tabele kao jednu promjenljivu oblast. Ako ho

ete

da više

elija tabele bude promjenljivo, podesite da cijela tabela bude promjenljiva

ili je podijelite na nekoliko promjenljivih podru

ja. Ako izaberete nekoliko

elija

tabele i definišete ih kao promjenljive, cijela tabela

e postati promjenljiva oblast.

Sve što je u

eliji izvan izabranog podru

ja oivi

enog plavom konturom, bi

nepromjenljivo u dokumentima napravljenim pomo

u ovog šablona.

Imena svih promjenljivih oblasti koje ste napravili prikazuju se na dnu menija
Modify, Templates. Ako izaberete promjenljivu oblast, do njenog imena u spisku
pojavit

e se znak za potvrdu; isto važi i kada je kursor u toj oblasti ili je izabran

neki element unutar nje. Sve što treba da se mijenja mora biti u promjenljivoj
oblasti, uklju

uju

i i hiperveze.

Programiranje za Internet

107

Naredbom Insert, Template Objects, Optional Region kreirate opcionu oblast.

Ako namjeravate koristiti opcionu oblast šablona na ve

ini strana prezentacije koje

ete napraviti pomo

u njega, ostavite ovo polje potvr

eno. U ovom primjeru,

utim, oblast

e se prikazati na samo jednoj strani, pa

e prilikom izrade drugih

strana biti lakše ako ova oblast bude podrazumijevano skrivena.

Ako ste na stani ve

napravili neku opcionu oblast, pomo

u kartice Advanced

možete da je povežete s novom opcionom oblaš

u koju upravo pravite. Na istoj

kartici definišete i izraze (Template Expressions) koji odre

uju kada se oblast

prikazuje.

5.13.4. Pravljenje oblasti koje se ponavljaju

Oblast koja se ponavlja (eng. repeating region) jeste podru

je strane koje se

ponavlja više puta. Oblasti koje se ponavljaju naro

ito su pogodne za objekte koji

se ponavljaju promjenljiv broj puta na stranama napravljenim pomo

u šablona.

Ove oblasti omogu

avaju precizno kontrolisanje izgleda tabela s više stavki.

Naredbom Insert, Template Objects, Repeating Region kreirate opcionu oblast.

Slika 47. Ponavljaju

a oblast šablona

Kreirajte dokument koji li

i na primjer prikazan na sljede

oj slici; Unutar tabele

2 x 2 kreirajte jednu opcionu oblast (u prvom redu, sa imenom "Opciona_oblast") i
jednu obi

nu oblast (u drugom redu, sa imenom "tekst"). Unutar opcione oblasti

ubacite još jednu tabelu sa 2 kolone i u svaku njenu

eliju ubacite po jednu

ponavljaju

u oblast (sa imenima "Ponavljajuca_1" i "Ponavljajuca_2"). Sadržaj

tako kreiranih oblasti se ne

e mo

i mijenjati u stranici kreiranoj pomo

u ovog

šablona, jer se ne nalaze unutar promjenljive oblasti.

Slika 48. Primjer šablona sa oblastima

Snimite i zatvorite datoteku Sablon.dwt.

Programiranje za Internet

108

5.13.5. Pravljenje strana pomo

u šablona

Sljede

i korak u izradi prezentacije pomo

u šablona jeste pravljenje strana na

osnovu originalnog šablona.

U prikazanom primjeru napravit

ete nove strane na osnovu šablona profile koji ste

napravili u prethodnom primjeru. Te strane

e naslijediti sadržaj originalnog

šablona; mo

ete da mijenjate samo one dijelove koje ste definisali kao

promjenljive oblasti.

Izaberite File, New i pritisnite karticu Templates u okviru za dijalog New
Document. Na kartici Templates prikazuje se spisak definisanih prezentacija i
spisak svih šablona pridruženih izabranoj prezentaciji.

Slika 49. Kreiranje nove stranice pomo

u šablona

Izaberite profile u spisku šablona prezentacije "Ispitni zadaci", ostavite polje
"Update Page when Template Changes" (ažuriraj strane kada se izmijeni šablon)
potvr

eno i pritisnite dugme Create. Napravili ste novu stranu na osnovu šablona

"Sablon". Premda novi dokument prikazuje svu naslije

enu sadržaj šablona, ipak

ga treba snimiti. Snimite datoteku pod imenom primjer.html

Slika 50. Nova html stranica kreirana pomo

u šablona

Programiranje za Internet

110

Slika 53. Ažuriranje stranica pomo

u šablona

Naredbom Modify, Templates, Update Current Page se stranica može naknadno
ažurirati tako da prihvati izmjene koje su ura

ene na šablonu.

Naredbom Modify, Templates, Detach from Template se stranica odvaja od
šablona, tako da se njen sadržaj ne mijenja, a samo se raskida njena veza sa
šablonom (prilikom ažuriranja se promjene na šablonu ne

e reflektovati na sadržaj

stranice).

Programiranje za Internet

111

6. Izrada obrasca

Web stranice

esto prikupljaju podatke od korisnika. Obrasci (eng. Forms)

omogu

uju da korisnici pomo

u njihovog browsera unose neke podatke i šalju ih

na e-mail, pohranjuju na serveru ili proslje

uju nekoj aplikaciji. Obrasci u sebi

sadrže razli

ite vrste polja za unos ili izbor ponu

enih podataka.

Prije dodavanja pojedinih polja, morate da stavite obrazac na stranicu. On

sadržati polja u koja

e posjetioci upisivati podatke i zadati šta da se radi s

podacima.

Obrazac možete da stavite na stranicu naredbom Insert, Form, Form.

Crvene isprekidane linije ozna

avaju površinu obrasca u prozoru dokumenta; ista

površina je definisana unutar oznaka <form> i </form> u kodu. Crvene linije su
nevidljivi elementi i prikazuju se samo u Dreamweaveru; površinu obrasca u
browseru ništa ne ozna

ava. Te linije ne možete prevla

iti. Veli

ina obrasca zavisi

od onoga što umetnete u njega, a on

e se produžiti koliko treba da bi primio sav

sadržaj koji mu dodate.

Izaberite obrazac pritiskom na crvenu isprekidanu liniju. Na panou svojstava
prikazuju se svojstva obrasca. Na njemu je nekoliko opcija.

Slika 54. Pano svojstava obrasca

U polje Form Name upišite ime obrasca, ukoliko namjeravate da ga kontrolišete
pomo

u aplikacije za izvršavanje skriptova, poput JavaScripta. Dreamweaver

obrascima automatski dodjeljuje opšta imena: form1, form2 itd.

Ako nemate na raspolaganju CGI skripte dok radite ovu lekciju, informacije koje
slijede tuma

ite samo kao objašnjenje. Polje Action ostavite prazno, a Method ne

mijenjate. Action saopštava browseru šta da uradi s podacima iz obrasca. Zadaje
putanju ili URL adresu lokacije i ime aplikacije (obi

no CGI skripta ili dinami

strane) koja

e obra

ivati podatke kada posjetilac pritisne dugme Submit. CGI

skripte se nalaze na Web serveru koji obra

uje podatke koje obrazac pošalje.

Method definiše metodu kojom se podaci iz obrasca šalju: GET, POST ili Default.
Podaci koje šalje obrazac

ine kontinuiran tekstualni niz, koji sa

injavaju

informacije koje je upisao posjetilac. Metoda GET dodaje sadržaj obrasca URL
adresi zadatoj u polju Action; te informacije su stoga vidljive na adresnoj traci
browsera. GET nije bezbjedna metoda prenosa podataka, pa se ne smije koristiti za
slanje povjerljivih podataka kao što su brojevi kreditnih kartica i sli

no. Kako

browseri i serveri

esto name

u ograni

enja dužine URL adrese, Get može da šalje

malu koli

inu podataka. Ograni

enja su razli

ita, pa metoda Get nije dobra ni za

Programiranje za Internet

113

Izaberite naredbu Insert, Form Objects, Text Field.

Slika 55. Dodavanje polja za jedan red teksta

Polje za jedan red teksta umetnuto je na obrazac. Na panou svojstava prikazuju se
svojstva polja kada ga umetnete ili pritisnete u prozoru dokumenta.
Podrazumijevana opcija vrste polja je Single line (za jedan red teskta).

U ovom primjeru, ostavit

emo polje Init Val prazno. Možete da zadate po

etnu

vrijednost (eng. initial value) teksta koja se prikazuje u polju kada se strana u

ita.

Premda posjetilac može da promijeni ovaj tekst, koristite ovu mogu

nost oprezno.

Posjetioci koji ho

e da na brzinu pro

u kroz obrazac, mogu slu

ajno da presko

polje koje ve

ima neki tekst, jer misle da su ga sami upisali. Po

etna vrijednost

teksta daje posjetiocima primjer kakve informacije se od njih traže.

Izaberite polje koje ste upravo umetnuli i zamijenite textfield rije

ju "ime" u polju

Name na panou svojstava.

Slika 56. Osobine polja u obrascu

Kada se obrazac pošalje, ime tekstualnog polja opisuje informacije koje su unijete
u njega. U ovom slu

aju, "ime" ozna

ava da je u polje upisano ime posjetioca. Sva

polja obrasca moraju imati imena. U imenima ne smije biti razmaka niti specijalnih
znakova, a valja zapamtiti da se u njima razlikuju mala i velika slova.
Dreamweaver poljima za tekst automatski dodjeljuje imena textfield1, textfield2
itd.

Programiranje za Internet

114

Važno je da svim poljima date kratka, opisna imena. Pretpostavimo da na strani
imate dva polja za tekst, svako sa odgovaraju

im natpisom, u koje posjetilac treba

da upiše broj telefona kod ku

e i na poslu. Ako im ostavite imena textfield1 i

textfield2, po njima ne

ete mo

i da zaklju

ite koji je broj ku

ni, a koji na poslu.

Zabunu

ete izbje

i, ako im date imena kao što su npr. brojkuca i brojnaposlu.

Upišite 40 u polje Char Width na panou svojstava. Širina tekstualnog polja

e se

pove

ati tako da u njega stane približno 40 znakova. Po

etna širina polja je

otprilike 24, iako je polje prazno. Stvarna veli

ina polja u browseru mijenja se u

zavisnosti od veli

ine podrazumijevanog fonta u browseru posjetioca. I visina polja

u browseru mijenja se u zavisnosti od veli

ine podrazumijevanog fonta u browseru

posjetioca.

Upišite 50 u polje Max Chars na panou svojstava. Parametar Max Chars
ograni

ava ukupan broj znakova koje posjetilac može da upiše. Na po

etku je ovo

polje prazno, što zna

i da broj znakova koje posjetilac može da upiše nije

ograni

en. Ako informacije šaljete bazi podataka u kojoj je broj znakova svakog

polja ograni

en po definiciji, i sami morate da stavite sli

no ograni

enje.

Ako je vrijednost parametra Max Chars ve

a od vrijednosti parametra Char Width,

posjetilac može da nastavi sa upisivanjem teksta koji

e se automatski pomjerati u

polju. Pomjeranje

e prestati kada se dostigne vrijednost parametra Max Char.

Pažljivo zadajte vrijednost parametra Max Chars za polja koja prihvataju podatke
kao što su adrese e-pošte i URL adrese. Posjetioci ne

e mo

i da upišu cijelu URL

adresu ili drugu vrstu informacija, ako je ona duža od vrijednosti parametra Max
Chars, jer više ne

e mo

i ništa da upisuju kada dostignu zadato ograni

enje.

Obi

no tekstualno polje prikazuje informacije u browseru dok ih posjetilac upisuje.

Tekstualno polje za lozinku li

i na ostala polja za tekst, ali se tekst upisan u njega

prikriva na ekranu kruži

ima ili zvjezdicama. Tako se tekst samo sakriva od onih

kojih vam vire iza le

a dok upisujete lozinku, ali se upisani znakovi ne šifruju niti

obezbje

uju. Za šifrovanje je neophodno da se na Web serveru izvršava softver tzv.

bezbjednog servera (eng. secure server). Ako ho

ete da umetnete polje za lozinku,

ubacite obi

no polje za jedan red teksta, a za vrijednost opcije Type na panou

svojstava izaberite Password. Ova opcija obezbje

uje prikazivanje kruži

a ili

zvjezdica dok posjetilac upisuje podatke u polje. Polja za lozinke mogu primati
samo jedan red teksta. Vrijednost parametra Max Chars za lozinke treba zadati
prema maksimalnoj dužini lozinke na serveru.

6.2. Dodavanje polja za više redova teksta

Polja za više redova teksta olakšavaju prikupljanje velikih koli

ina informacija od

posjetilaca, jer daju oblast od više redova gdje posjetilac može da upisuje svoj

Programiranje za Internet

116

6.3. Dodavanje polja za potvrdu

Polja za potvrdu omogu

avaju korisnicima da izaberu jednu ili više opcija u grupi

povezanih stavki. Polja za potvrdu se obi

no koriste kada posjetilac treba da

izabere koliko god ho

e prikazanih opcija. Ako ho

ete da posjetilac izabere samo

jednu opciju, onda upotrijebite radio-dugme.

Izaberite Insert, Form, Check Box.

Slika 58. Polje "Label"

e ispisati opis pored polja za potvrdu (checkbox-a)

Slika 59. Osobine polja za potvrdu

Polje za potvrdu je umetnuto u obrazac, a pano Properties prikazuje njegova
svojstva. Obi

no se u obrascu dodaje više polja za potvrdu (odvojite ih sa

Shift+Enter).

Dok dodajete objekte u obrazac, tabela se produžava naniže kako bi sve to primila.
Pri tom se može desiti da se crvena isprekidana linija ne pomjera zajedno sa dnom
tabele. U tom slu

aju, pritisnite izvan tabele u prozoru dokumenta i natjerat

ete

Dreamweaver da osvježi prikaz tabele.

Programiranje za Internet

117

Kada u dokument upisujete natpise za polja obrasca, pazite na to da tekst bude
dovoljno blizu odgovaraju

eg dugmeta ili polja, i ne previše blizu ostalih objekata

na obrascu. Tako ne

ete zbuniti posjetioce Web lokacije.

Opcija "Initial State" može imati dvije vrijednosti, od kojih zavisi da li

e polje biti

uklju

eno (checked) ili isklju

eno (unchecked) kada korisnik prvi put otvori

stranicu sa obrascem. Naravno, korisnik

e mo

i mijenjati stanje tih polja, to su

samo po

etna stanja.

6.4. Dodavanje radio-dugmadi

Radio-dugmad su grupa opcija. Biranje jedne opcije automatski poništava izbor
svih ostalih opcija grupe. Radio-dugmad se obi

no koristi za izbor vrste kreditne

kartice i odgovore tipa da/ne. Izaberite Insert, Form, Radio Group.

Slika 60. Dijalog za kreiranje grupe radio-dugmadi

Pomo

u dugmadi plus (+) i minus (-) dodajete i brišete stavke u listama.

Redoslijed dugmadi mijenjate pomo

u dugmadi s trouglovima okrenutim nagore i

nadole (slika 60). Pritisnite dugme plus (+) i zamijenite novi primjerak rije

"Radio" drugom rije

ju (npr. brojem 512). U koloni Value, zamijenite sve

primjerke rije

ju "radio" odgovaraju

im tekstom.

Kada koristite radio-dugmad, istim imenom morate da nazovete cijelu grupu stavki.
Radio-dugmad treba da omogu

i izbor samo jedne stavke u grupi.

Slika 61. Grupa od dva radio-dugmeta

Ako umetnete jedno po jedno radio-dugme (pomo

u naredbe Insert, Form, Radio

Button), svu tu dugmad možete da u

inite dijelovima iste grupe kada im date isto

ime. Korištenje istog imena za više radio-dugmadi ozna

ava da ta dugmad

pripadaju istoj grupi. Ako imena nisu ista, ta radio-dugmad se smatra pripadnicima

Programiranje za Internet

119

Slika 62. Osobine liste

U polje Height treba upisati broj redova koji

e se vidjeti u listi

iji se sadržaj

pomjera. Ukoliko polje Selections ostavite nepotvr

eno, obavezno upišite broj

vidljivih redova ve

i od 1. U protivnom, umjesto liste

ija se sadržaj pomjera bit

prikazan meni. Uvijek zadajte visinu liste, jer ako to ne uradite, u njoj se prikazuje
broj redova podrazumijevan u browseru posjetioca, a on je razli

it.

Pritisnite dugme List Values na panou svojstava. Otvorit

e se okvir za dijalog List

Values, isti za spiskove i za menije.

Slika 63. Dodavanje stavki u listu ili meni

Pritisnite dugme sa znakom plus (+) za dodavanje stavke. U polje "Item Label"
upišite "Intel" i zatim pritisnite taster Tab. Širinu spiska/menija odre

uje dužina

najduže stavke u spisku. U polje Value upišite "i". Ovaj tekst se šalje CGI skriptu
ili serveru kao znak da je opcija izabrana.

Pritisnite Tab ili dugme sa znakom plus (+) u gornjem lijevom dijelu okvira za
dijalog, da biste dodali još jednu opciju u spisak. Za brisanje stavki iz dijaloga List
Values upotrijebite dugme sa znakom minus (-).

Ponovite te korake da biste dodali u spisak stavke "AMD" i "neki drugi". U polje
Value za ove stavke upišite "a" i "n". Za mijenjanje redoslijeda stavki u listi
upotrijebite dugmad iznad polja Value (s trouglovima okrenutim nagore i nadole).

Ako ho

ete da dodate više stavki u listu, poslije unošenja svake stavke pritisnite

Tab i automatski

ete prije

i na dodavanje nove. Zatvorite okvir za dijalog

pritiskom na OK. Lista prikazuje dodate opcije.

Za sve stavke liste/menija, na panou svojstava postoji opcija Initially Selected
(unaprijed izabrano). Bilo koja od svaki može biti izabrana kada se strana u

ita.

Možda to nije poželjno u listama

ija se sadržaj pomjera, ali u menijima pomaže

ako u prvom redu postoji primjer ili uputstvo kao "Izaberite jednu...".

Programiranje za Internet

120

Ako neku stavku unaprijed potvrdite, nema na

ina da to poništite, tj. da bi stavka

izgubila svoju potvrdu, morate je obrisati u okviru za dijalog List Values i ponovo
dodati.

6.6. Dodavanje dugmadi

Obrasci naj

eš

e imaju dva dugmeta: jedno za slanje (Submit) i drugo za brisanje

podataka iz obrasca (Reset). Dugmetom Submit saopštava se browseru da pošalje
podatke u skladu sa zadatom akcijom (Action) i metodom (Method). Dugme Reset
briše informacije iz svih polja na strani.

Izaberite Insert, Form, Button.

Slika 64. Dugme za slanje obrasca

Dugme Submit je umetnuto na obrazac, a pano Properties prikazuje njegova
svojstva. Kako je dugme Submit podrazumijevano, ne mijenjate nijednu opciju za
ovo dugme.

Dodajte još jedno dugme Submit. Jedina razlika je u imenu - ovo se zove submit2,
jer dva dugmeta ne smiju imati isto ime. Jedini objekti na obrascu koji mogu (i
treba) da imaju isto ime jesu radio-dugmad koja pripadaju istoj grupi. Dugme s
kojim radite u ovoj vježbi razlikuje se, jer se ne može grupisati s drugom dugmadi i
dodijelit

e mu se samostalna akcija u slijede

em koraku.

Izaberite Reset form u podru

ju Action na panou svojstava. Tekst u polju Label

(oznaka dugmeta na obrascu) automatski se mijenja u "Reset". Interno ime
dugmeta (eng. button name) ostaje nepromijenjeno.

Akcija resetovanja koju ste izabrali zna

i da se sva tekstualna polja, polja za

potvrdu i radio-dugmad brišu i vra

aju u prvobitno stanje, koje su imala kada je

strana bila u

itana.

Tre

a opcija u podru

ju Action je None. Za razliku od opcija Submit i Reset, opciji

None nije pridružena nikakva akcija. Da bi takvo dugme nešto uradilo, treba ga
povezati sa skriptom (napisanim u JavaScriptu, na primjer), koji

e recimo,

izra

unati ukupan zbir ili kamatu i posjetiocu dati kona

an rezultat.

Dugmadi dajte jasna imena, a u skladu s o

ekivanjima posjetilaca. Submit i Reset

su uobi

ajene oznake dugmadi na obrascima koje posjetioci razumijevaju, jer se

veoma

esto koriste.

Programiranje za Internet

122

polja i popuni ih, umjesto da tabulatorom prolazi kroz sva polja obrasca, ova
po

etna provjera valjanosti se zanemaruje.

Slika 66. Postupak Validate Form

Premda vam možda izgleda kao da je dobro provjeravati svako polje dok se
posjetilac kre

e kroz obrazac, budite oprezni, jer tako možete da naljutite

posjetioce. Mnogi ne popunjavaju polja redom, nego preska

u i naknadno se

vra

aju da popune propušteno.

Ako izaberete Email Address iz grupe opcija Accept, ova opcija provjerava da li je
posjetilac upisao znak @ u polje. Ne provjerava se da li upisana adresa elektronske
pošte zaista postoji.

Opcija Number zadaje da polje smije sadržati samo cifre. Opcija Number from
zadaje da polje smije sadržati samo broj unutar zadatog opsega brojeva, što je
naro

ito pogodno za godine.

Izaberite dugme Submit u prozoru dokumenta. Pritisnite dugme plus (+) i u
padaju

oj listi na panou Behaviors izaberite Validate Form. Akcija Validate Form

se dodaje na pano Behaviors, kao posljedica doga

aja onSubmit.

Izaberite polje Ime iz spiska Named Fields u okviru za dijalog. Potvrdite opciju
Required za parametar Value. Pritisnite Anything u grupi opcija Accept. Opcija
Anything zadaje da se u polje nešto mora upisati, ali ne odre

uje vrstu tih

podataka. Kada posjetilac pritisne dugme Submit, provjerit

e se valjanost.

Ako zadate po

etnu vrijednost tekstualnog polja, nema smisla provjeravati

valjanost podataka u njemu (pogotovo ako je izabrana opcija Anything), jer u
njemu ve

stoji tekst.

Pritisnite polje ime i potom taster Tab, ali u polje nemojte upisati ništa. Prikazat

se poruka o grešci koju generiše postupak provjere valjanosti podataka na obrascu
Validate Form. Provjera popunjenosti pojedinih polja odgovaraju

im podacima

radi jedino u slu

aju da posjetilac (tasterom Tab) premješta ta

ku umetanja iz polja

u polje. U protivnom, ne prikazuje se nikakva poruka o grešci. Dakle, ako

Programiranje za Internet

123

posjetilac ne koristi taster Tab i ne postavlja kursor u odre

eno polje, poruka o

grešci se ne prikazuje.

Ako ho

ete da se i polje ime provjeri nakon što posjetilac pritisne dugme Submit,

ponovo otvorite okvir za dijalog Validate Form: dvaput pritisnite akciju Validate
Form na panou Behaviors. Izaberite polje ime i željenu opciju. Kada završite,
pritisnite OK.

6.8. Testiranje obrasca

Obrazac se može poslati na adresu e-pošte

ak i ako se ne serveru na izvršava CGI

skripta. Ovu metodu koristite samo za testiranje svojih obrazaca.

U dokumentu izaberite obrazac biranjem oznake <form> na bira

u HTML oznaka.

U polje Action na panou svojstava upišite mailto: i svoju adresu e-pošte.

Ne zaboravite da upišete dvota

ku i ne ostavljajte razmake. Adresa treba da li

i na

mailto:[email protected]; svoju adresu e-pošte upišite umjesto "[email protected]".

Izaberite POST u padaju

oj listi Method i upišite text/plain u polje Enctype.

Slika 67. Dodjeljivanje akcije slanja obrasca na e-mail

Zadali ste vrstu kodiranja (eng. encode type) za obi

an (eng. plain) tekst. U

protivnom, poslati tekst bi kodiranjem bio doveden u gotovo nerazumljiv oblik.

Parametar Enctype zadaje na

in kodiranja podataka sa obrasca. Opcija text/plain

formatira podatke tako da svaki element obrasca dobije vlastiti red teksta. Tako se
lakše

itaju rezultati u e-mail poruci. Ako ne zadate vrstu kodiranja, browser

upotrijebiti podrazumijevanu vrstu koja formatira podatke. Kako je
podrazumijevana ona vrsta koju treba koristiti u najve

em broju slu

ajeva, vrsta

kodiranja se obi

no ne zadaje. Ovaj primjer je izuzetak, jer podatke šaljete u poruci

e-pošte radi testiranja.

Ako ho

ete da poruke e-pošte s podacima obrazaca imaju i temu u polju Subject,

promijenite sadržaj polja Action na:

mailto:[email protected]? Subject=Tema se upisuje ovdje.

Dio "? Subject =" definiše tekst koji slijedi kao temu poruke. U tekstu teme može
biti razmaka, ali ne i specijalnih znakova kao što su navodnici, polunavodnici,

Programiranje za Internet

125

7. Meta oznake i komentari

U kod se mogu umetnuti neki elementi koji se ne vide u browseru, ali su ipak važni
za dokument. Meta oznake i HTML komentari primjeri su takvih elemenata.

Meta oznake se koriste u više svrha: one identifikuju i opisuju dokument, daju
podatke o vlasniku autorskih prava, identifikuju njegove autore ili dizajnere,
preusmjeravaju posjetioce na druge strane, odre

uju njegove autore ili dizajnere,

preusmjeravaju posjetioce na druge strane, odre

uju izgled sažetka dokumenta koji

se prikazuje u nekim pretraživa

ima i uti

u na redoslijed pojavljivanja dokumenta

u njima. HTML komentari se koriste za pravljenje bilježaka u kodu, za
objašnjavanje svrhe pojedinih dijelova koda, ili kada treba onemogu

avati

izvršavanje dijela koda, da se on ne obriše.

Izaberite View, Head Content.

Odmah iznad okna za prikaz elemenata pojavit

e se podru

je Head Content. U

njemu

e se pojavljivati ikonice za elemente smještene u zaglavlju dokumenta,

izme

u oznaka <head> i </head>. Trenutno su u ovom podru

ju ikonice za naslov

dokumenta, za meta oznaku http-equiv i dijelovi Java Script koda koji treba da
budu u zaglavlju dokumenta.

Slika 68. Ikonice za zaglavlje dokumenta

Kada pritisnete neku od ikonica na panou zaglavlja (Head Content), bi

e istaknut

kod odgovaraju

ih elemenata u oknu koda.

Da biste vidjeli pano zaglavlja, morate biti u prikazu elemenata (Design View) ili u
kombinovanom prikazu elemenata i koda (Code and Design View). Ako radite u
prikazu koda, opcija View, Head Content nije dostupna. U ovom primjeru koristite
kombinovani prikaz elemenata i koda.

Dovedite pokaziva

miša iznad ivice koja razdvaja prikaz elemenata od prikaza

koda. Kada se pokaziva

pretvori u dvostranu strelicu, pritisnite i povucite ivicu

nagore, kako bi se okno koda pove

alo, a okno elemenata smanjilo.

Sadržaj zaglavlja vidite pri vrhu prozora dokumenta, neposredno iznad okna
elemenata. I od okna elemenata vidi se minimalan dio, dok se lako vidi
odgovaraju

i kod u donjem oknu kada se pritisnu ikonice na panou zaglavlja.

Programiranje za Internet

126

U oknu koda, postavite ta

ku umetanja na kraj reda koji sadrži naslov dokumenta,

neposredno poslije oznake </title>, i zatim pritisnite Enter. Izaberite Insert, HTML,
Head Tags, Description.

Otvorit

e se okvir za dijalog Description (opis), s poljem u koje možete da upišete

opis strane. Neki pretraživa

i u svoje rezultate uklju

uju meta oznaku description,

u koju se stavlja kratak sažetak strane. Dodavanje ove meta oznake važno je za
promociju prezentacije koju pravite.

Opis treba da je kratak - najviše 200 znakova. U ve

ini pretraživa

a ograni

en je

broj znakova i odbacuje se sve što prekora

i taj broj. Dobar opis je veoma kratak i

sažeto upu

uje na sadržaj dokumenta.

Kursor treba da je na po

etku sljede

eg reda.

Kada pišete spisak klju

nih rije

i (eng. keywords), razdvojite pojedine rije

i i

izraze zarezima. Ne ponavljajte istu klju

nu rije

ili izraz - ako u spisak klju

nih

rije

i stavite "novost novost novost novost", to

e se smatrati slanjem neželjene

sadržine na Web, zbog ponavljanja rije

i "novost". Klju

ne rije

i treba da

predstavljaju sadržaj strane i da se na njoj zaista upotrebljavaju.

<title>Obrazac</title>

Slika 69. Insert, HTML, Head Tags, Description

Pomenuta dva meta-taga (meta-oznake): Description i Keywords se naj

eš

koriste kod opisa stranica za koje je bitno da se pojave u pretraživa

kim mašinama

kao što su Google, Yahoo i sl.

Programiranje za Internet

128

Slika 70. Izvoz stila u spoljnu datoteku kaskadnih opisa stilova

Ovako kreirana datoteka stilovi.css je obi

na tekst datoteka, koja sadrži samo

definicije stilova.

Naredbom Text, CSS Styles, Attach style sheet pridružujete datoteku sa spoljnim
opisima stilova html datoteci.

Slika 71. Pridruživanje datoteke sa spoljnim kaskadnim opisima stilova

Unutar oznaka <head> i </head> pojavi

e se tekst:

type="text/css" />

Nakon toga se može obrisati dio koda izme

u <style type="text/css"> i </style>,

jer se ta definicija ve

nalazi u spoljnoj datoteci.

Tako kreirani opis stila se na neki drugi tekst primjenjuje tako što se tekst ozna

i, a

zatim u panelu svojstava izabere taj opis stila iz polja Style.

Slika 72. Izbor ve

definisanog opisa stila

Dreamweaver podržava neke atribute koji jesu u specifikaciji CSS, ali ih ne
podržavaju svi teku

i browseri. Obavezno provjerite stilove i u Netscape

Programiranje za Internet

129

Navigatoru i u Internet Exploreru, da biste vidjeli da li ovi browseri podržavaju
atribute koje ste izabrali.

Mogu se redefinisati postoje

e oznake (tagovi) tako da imaju posebne osobine, kao

što su boja slova, veli

ina, font,... Izaberite Text, CSS Styles, New. U dijalogu

(slika 72) izaberite "Tag" za redefinisanje postoje

ih oznaka, a zatim u padaju

meniju "Tag" izaberite npr. oznaku "p" (tako

e svi pasusi u dokumentu koji se

nalaze unutar oznaka <p> i </p> imati te osobine).

Slika 72. Redefinisanje standardnih oznaka (oznaka <p>)

Slika 73. Iako je drugi pasus u tekstu ozna

en bez posebnog opisa stila, on

e imati

osobine definisane u spoljnoj datoteci

Programiranje za Internet

131

Otvorit

e se okvir za dijalog CSS Style Definition, isti kao onaj u prethodnom

primjeru u kome ste birali atribute formatiranja.

Sve što izmijenite primijenjeno je na dokument. Kada bi drugi dokumenti koristili
ovaj opis stila, sav tekst unutar oznaka <p> u njima, bio bi formatiran prema
redefiniciji stila koju ste upravo napravili.

Kaskadni opis stila se primjenjuje po ure

enoj sekvenci. Kada se na isti tekst

primjeni dva i više stilova, browser primjenjuje kombinaciju atributa svih pozvanih
stilova. Ako je na isti tekst primijenjeno više stilova

iji se atributi sukobljavaju,

browser koristi specifikacije stila koji je najviše ugnijež

en (najbliži samom

tekstu). Stilovi koje ste posljednje primijenili ugnijež

eni su unutar onih koji su

primijenjeni. Pošto su stilovi koji su posljednji primijenjeni, u stvari HTML

oznake koje su fizi

ki najbliže tekstu, one imaju prioritet nad prethodnim stilovima

i zadaju kona

an izgled teksta. Redoslijed primjene stilova je:

•

spoljni stilovi (stilovi koji su najdalje od teksta; najniži prioritet)

•

unutrašnji stilovi

•

namjenski stilovi primijenjeni na tekst strane

•

lokalno formatiranje, recimo polucrni ili kurzivni ispis teksta, primijenjeno na
tekst strane pomo

u panoa svojstava (stil najbliži tekstu; najviši prioritet, ja

od svih opcija zadatih u gore nabrojanim stilovima).

Ako dokument koristi spoljni opis stila, stilovi u tom opisu primjenjuje se na cio
dokument. Pretpostavimo, me

utim, da spoljni opis stila sadrži definicije za

Heading 3 i Heading 4, a da ste napravili i jedan unutrašnji stil koji redefiniše
oznaku Heading 3. Unutrašnji stil ima prednost pred spoljnim ukoliko im se
atributi sukobe.

I ru

no formatiranje dijelova teksta ima prednost nad stilovima. Pretpostavimo da

ste pomo

u panoa svojstava (Properties) primijenili drugu boju na jedan od redova

teksta unutar oznaka Heading 3. To je lokalno formatiranje i ima prednost pred
ostalim stilovima (ako oni zadaju boju). Me

utim, atributi namjenskih stilova

imaju prednost pred atributima stilova HTML oznaka. Ako ho

ete da pomo

stilova definišete izgled pasusa, uklonite sve ostale opcije formatiranja (ukoliko se
sukobljavaju sa stilovima).

Kad primijenite namjenski stil, kako

ete potom da ga uklonite? Ako je namjenski

stil primijenjen na cio pasus, postavite ta

ku umetanja u pasus i pritisnite dugme

No CSS Style na panou CSS Styles. Time ste obrisali i definiciju stila i njegovo
formatiranje teksta. Ako je namjenski stil bio primijenjen sam na dio teksta u
pasusu, postavite ta

ku umetanja u rije

formatiranu pomo

u tog stila i zatim

pritisnite dugme No CSS Style na panou CSS Styles.

Programiranje za Internet

132

8.2. Izrada kaskadnih opisa CSS stilova za hiperveze

Primjenom stilova možete da mijenjate izgled hiperveza na strani. Kaskadni opisi
stilova mogu se upotrijebiti za mijenjanje izgleda dinami

ke hiperveze s razli

itim

atributima za njena razli

ita stanja. Razli

ita stanja oznake <a> aktiviraju se kada

posjetilac npr. pokaže hipervezu, pritisne je itd. U padaju

oj listi Selector u okviru

za dijalog New Style, Dreamweaver nudi

etiri standardna stanja oznake <a> koja

olakšavaju izbor formatiranja hiperveza na stranama. Ova vrsta CSS stilova zove se
pseudoklasa.

Slika 75. Izrada kaskadnih opisa CSS stilova za hiperveze

etiri mogu

a stanja hiperveza pojavljuju se u padaju

oj listi Selector zato što se

ona mijenjaju u zavisnosti od aktivnosti posjetioca. Opcije u padaju

oj listi su

a:link; a:visited, a:hover i a:active.

•

Opcija Active formatira hipervezu kada je izabrana ili neposredno pošto je
pritisne posjetilac; podrazumijevana boja u ovom stanju je crvena. U padaju

listi prikazuje se kao a:active.

•

Opcija Link formatira hipervezu kada je u normalnom stanju; podrazumijevana
boja u ovom stanju je plava. U padaju

oj listi prikazuje se kao a:link.

•

Opcija Visited formatira hipervezu nakon što ju je pritisnuo posjetilac;
podrazumijevana boja u ovom stanju je ljubi

asta. U padaju

oj listi prikazuje

se kao a:visited.

•

Opcija Hover formatira hipervezu kada je posjetilac pokaže; podrazumijevana
boja u ovom stanju je crvena. U padaju

oj listi prikazuje se kao a:hover. (Ovu

opciju ne podržavaju svi browseri).

Kaskadni opisi stilova hiperveza ne prikazuju se na panou CSS Styles.

Pomo

u opisanih kaskadnih opisa stilova, hiperveze se mogu prikazivati i bez

uobi

ajenog podvla

enja: u okviru za dijalog stilovi.css koji ste koristili u ovom

primjeru, izaberite a:link i pritisnite dugme Edit. U okviru za dijalog Style

Programiranje za Internet

134

9. Rad s bojama

Rad s bojama omogu

ila je tvrtka Netscape kada je napravila verziju 1.1 svojeg

Navigatora, no danas gotovo svi pretraživa

ki programi podržavaju to proširenje

jezika HTML.

Da biste pozadinu svojih dokumenata mogli ispuniti slikovnim uzorkom ili nekom
bojom, te da biste tekst i hipertekstualne veze obojili u neke nove nijanse, poslužite
se sa šest argumenata koji se mogu dopisati uz naredbu <BODY>. Argumentima
BACKGROUND i BGCOLOR kontrolira se izgled, odnosno boja "papira" na
kojem je "otisnut" sadržaj vaše stranice. Pomo

u preostala

etiri argumenta, TEXT,

LINK, VLINK i ALINK odre

uje se boja razli

itih dijelova teksta. Argumentu

TEXT dodjeljuje se boja kojom je "otisnut" sadržaj vaše stranice. Pomo

preostala

etiri argumenta, TEXT, LINK, VLINK i ALINK odre

uje se boja

razli

itih dijelova teksta. Argumentu TEXT dodjeljuje se boja kojom

e biti ispisan

obi

an tekst, koji se u "neobojenim" stranicama uvijek prikazuje crnom bojom.

Vrijednost argumenta LINK predstavlja boju hipertekstualnih veza, koja je ina

plava, dok vrijednost argumenta VLINK predstavlja boju ve

posje

enih

hipertekstualnih veza, koja je ina

e ljubi

asta. Boja kojom

e biti ispisan

hipertekstualna veza u trenutku kada korisnik na nju klikne mišem dodjeljuje se
argumentu ALINK.

9.1. Pozadina stranice

Da biste odredili koja sli

ica

e se koristiti za ispunjavanje pozadine Web

dokumenta uzorkom, dodijelit

ete njezinu URL adresu (po mogu

nosti relativnu)

argumentu BACKGROUND koji valja dopisati uz naredbu <BODY>. Na primjer:

Kada se u pretraživa

ki program u

ita stranica

ije je tijelo ozna

eno ovakvom

naredbom, cijela njezina pozadina bit

e ispunjena slikom uzorak.gif koja

e se

višestruko ponavljati, zalijepljena na samu sebe.

Nekih stvari, me

utim, morate biti svjesni kada radite s pozadinskim slikama. Prije

svega one moraju biti što manje. Što su manje, brže

e se u

itati na korisnikov

unar. Drugo, koristite što je mogu

e manje boja. Neki operativni sistemi mogu

prikazati samo ograni

en broj boja, a tako

er postoje i mnogi korisnici sa

zastarjelim grafi

kim karticama koje mogu prikazivati samo 256 boja. Ako ukupan

broj boja koji se koristi na vašoj stranici prelazi kapacitet

itateljevih hardverskih

mogu

nosti, viškovi boja

e se zamijeniti s bojama koje su dostupne, pa

e vaša

pozadinska slika izgledati, ružno. Stoga uvijek provjerite kako vaša pozadina
izgleda na ekranskim razlu

ivostima s razli

itim brojem boja.

Programiranje za Internet

135

9.2. Kodiranje boja

Argumentu BGCOLOR, te preostalim argumentima koji se koriste za bojenje
teksta, mora se dodijeliti tzv. RGB vrijednost. Radi se o ure

enoj trojki vrijednosti

kojima se odre

uju redom nijanse crvene, zelene i plave boje, kako bi se

standardnim miješanjem tih triju nijansi dobila neka nova boja iz uobi

ajenog

spektra podržanog na ve

ini grafi

kih kartica. U jeziku HTML, RGB vrijednost se

odre

uje na slijede

i na

in:

#RRGGBB

Za svaku od tri spomenute boje koriste se po dva znaka ispred kojih je smješten
simbol #. Svaki od ova tri para znakova predstavljaju heksadecimalnu numeri

vrijednost izme

u 0 i 255. Svaki od dva znaka "R", naprimjer, predstavlja neku

vrijednost od 0 do 15. Prvi "R" ozna

ava broj "šesnaestica", a drugi "R" broj

"jedinica". I onda se to sabere. Isto tako je i s oznakama "G" i "B". Prema tome,
heksadecimalna vrijednost 46 jednaka je zbroju

etiri šesnaestice i šest jedinica, što

decimalno iznosi 70. Kao što vidite, simboli koje koristimo u obi

ne brojke od 0 do

9, dok se za vrijednosti od 10 do 15 koriste slova A, B, C, D, E i F.

Crna boja se kodira kao RGB vrijednost #000000, dok je bijela sasvim suprotna -
#FFFFFF. Svaka boja kojoj su sve vrijednosti RR, GG i BB jednake, predstavlja
nijansu sive. Miješanje boja na ra

unarima je vrlo jednostavan proces zbrajanja:

e vrijednosti predstavljaju više svjetla koje pripada kona

noj boji. Zbog toga je,

naprimjer, #0000FF oznaka za svijetlo plavu, a ne tamnosme

u, u što se možete

uvjeriti ako pogledate tablicu 5. Evo i jednog jednostavnog primjera bojenja
stranice i teksta:

<BODY BGCOLOR=#000000" TEXT="#FFFFFF" LINK="#FF0000"

VLINK="#400000" ALINK="#404000">

Pozadinu smo obojili u crno, tekst u bijelo, hipertekstualne veze u svijetlocrvenu,
posje

ene veze u tamnocrvenu, a one veze na koje korisnik klika mišem u žutu

boju.

U tabeli 5 koja je dana u nastavku nalaze se RGB kodovi nekih uobi

ajenih boja,

pa ne

ete morati sami ra

unati.

Tabela 5: RGB kodovi nekih uobi

ajenih boja

Boja Tamna

Srednja

Svijetla

Crvena #400000 #7F0000 #FF0000
Žuta #404000

#F77F00

#FFFF00

Zelena #004000

#007F00

#00FF00

Cijan #004040

#007F7F

#00FFFF

Plava #000040

#00007F

#0000FF

Ljubi

asta #400040 #7F007F #FF00FF

Programiranje za Internet

137

10. Slike u HTML dokumentima

10.1. Veli

ina slika

Pored mnoštva drugih stvari, World Wide Web je i masovni distributer slika.
Umjetni

ka djela, fotografije, crteži, mape i drugi tipovi grafike sastavni su dio

Weba i

esto znaju namamiti

itatelje da dovla

e i

itave megabajte grafi

kih

elemenata na svoje ra

unar. Arhive slika imaju svoju funkcionalnu ulogu na Webu,

no organizacije i distributeri tih tipi

no ogromnih servera

esto

e vas natjerati da

nešto poželite, ali ne uspijete pogledati.

Kako onda možete objavljivati velike grafi

ke datoteke a da ne izgubite dio svojeg

važnog auditorija? Ako ste Web administrator neke umjetni

ke galerije, kako

ete

posljednju izložbu prezentirati na Mreži? Ili ako ste administrator poslovnog
poduze

a, kako

ete objavljivati grafikone s trgova

kim profitima i gubicima?

Odgovor je jednostavan: koristit

ete manje slike. Postoje dvije mjerljive veli

ine

na Webu koje biste trebali poznavati: koli

ina ekrana koju

e zauzeti neka slika i

veli

ina datoteke u kojoj je pohranjena.

Sve

emu se najobi

niji korisnik Web stranica nada su brzina i rezultati, odnosno

ako je mogu

e - brzi rezultati. Kako biste zadovoljili toj dominantnoj potrebi za

efikasnoš

u, razmislite o upotrebi tzv.

thumbnail

sli

ica unutar Web stranica, koje

e predstavljati hiperveze prema dokumentima unutar kojih se nalaze slike u svojoj

punoj veli

ini.

Thumbnail sli

ice, što se može prevesti kao sli

ice veli

ine pal

anog nokta, male

su grafi

ke skice koje

e korisnika hipertekstualno povezati s pravim slikama. One

obi

no zauzimaju izme

u dva i tri kvadratna centimetra ekrana, a svaka je velika

svega pet do deset kilobajta.

ak i oni korisnici koji posjeduju vrlo sporu vezu s

Internetom mogu tolerirati desetak takvih sli

ica unutar jedne Web stranice, no

ukoliko ih posjedujete puno više, razmislite o tome da ih razvrstate u kategorije.

Ukoliko želite koristiti velike slike, iskoristite Netscape proširenje naredbe IMG
koje je realizirano kroz argument LOWSRC. Ubacivanje slike unutar HTML
dokumenta pomo

u ovog proširenja, koji prepoznaju i drugi poznati pretraživa

obavlja se ovom sintaksom:

Time se pomo

u jedne naredbe navode putanje i imena datoteka i manje i ve

verzije iste slike. Prilikom prikazivanja stranice koja sadrži ovakvu naredbu,
pretraživa

e program prikazati sliku koja je dodijeljena argumentu LOWSRC.

Nakon što se u

ita manja sli

ica i sav potreban tekst, pretraživa

e se vratiti do

mjesta gdje je navedena SRC naredba, te

e zapo

eti s u

itavanjem ve

e slike.

Ovaj proces koji prolazi kroz dva koraka omogu

ava

itateljima da vide sliku koja

izgleda bolje nakon što su stekli ideju o potpunom sadržaju stranice.

Korisnik

e tako

er mo

i kliknuti na neku od hipertekstualnih veza na stranici bez

ekanja da se sve u

ita, ali

e svejedno znati što je bilo prikazano na slikama.

Programiranje za Internet

138

Pogodnost ovog Netscape proširenja je i u tome što pretraživa

ki programi koji ga

ne prepoznaju ne

e stvarati nikakve probleme, ve

e automatski u

itati ve

ina

icu slike. U nastavku su dana tri zanimljiva trika koja možete posti

upotrebom argumenta LOWSRC.

•

Trik#1:

Kao LOWSRC sliku upotrijebite crno-bijelu kopiju originalne obojene

slike koju ste dodijelili SRC argumentu. Neka formati obiju slika budu jednaki:
Time

ete posti

i zanimljiv efekt osvjetljivanja.

•

Trik#2:

Definirajte LOWSRC sliku kao prvi korak u animaciji koja se sastoji

od dvije slike. LOWSRC slika, na primjer, možete prikazivati šalicu

aja, a

SRC slika tu istu šalicu iz koje izlazi para. Tijekom u

itavanja stranice, najprije

e se na ekranu prikazati šalica, a potom i para koja iz nje izlazi. Time

ete u

svoje stranice unijeti dozu dinamike, bez pretjerano velikog truda.

•

Trik#3:

Definirajte LOWSRC sliku kao pozadinsku sliku, naprimjer, kao neku

teksturu ili gradacijski prijelaz boja. SRC sliku kreirajte tako da bude manjeg
formata od LOWSRC slike. Kada se SRC datoteka u

ita, LOWSRC datoteka

e izgledati kao pozadinski okvir kojim je obrubljena manja slika.

10.2. Korištenje manjih datoteka

Slike manjeg formata brže se u

itavaju u pretraživa

ki program. Da biste što

uspješnije smanjili datoteku unutar koje je pohranjena vaša slika, razmislite o
upotrebi JPEG formata. JPEG kodiranje sažimlje sliku na jednu tre

inu (katkada i

na jednu petinu) ukupne veli

ine originalne GIF ili BMP slike.

Prije prevo

enja svih velikih slika u JPEG format morate razumjeti da prilikom

sažimanja JPEG odbacuje dijelove koje smatra manje važnim za kvalitetni prikaz
slike. Što je ve

i stupanj sažimanja, više

ete izgubiti na kvaliteti slike, što zna

i da

e vaša fotografija, crtež ili nešto tre

e najvjerovatnije izgubiti na broju boja ili

se negdje pojaviti ta

kasti prijelazi. Ipak, uz ne prevelike stupnjeve sažimanja,

JPEG slike gledane prostim okom ne razlikuju se od GIF ili BMP slika, a datoteke
u kojoj su pohranjene znatno su manje.

Da biste još više smanjili veli

inu datoteke u kojoj je pohranjena slika, ograni

ite

broj boja koji se koristi. Svaka slika koju kreirate posjeduje paletu koja se koristi u
zapisu datoteke. GIF format podržava palete do 256 boja, dok JPEG zapisi mogu
raditi s više od 16 miliona razli

itih nijansi svih mogu

ih boja.

Odbacivanjem dijelova palete za boje koje se ne pojavljuju na slici, smanjit

ete

veli

inu datoteke za onaj dio koji je bio namijenjen tom dijelu palete.

Ograni

avanjem koli

ine boja za neku sliku (64 do 100 za GIF datoteke i 1 do

2000 za JPEG datoteke), prili

ete smanjiti

itav zapis. Programi kakvi su

PhotoShop, Corel PhotoPaint, Paint Shop Pro, i sli

ni, omogu

avaju vam

kontroliranje palete boja kod vaših grafi

kih datoteka.

Programiranje za Internet

140

11. CGI programiranje

Jedna od najsnažnijih mogu

nosti World Wide Weba je sposobnost kreiranja

dinami

kih dokumenata pomo

u izvršnih programa, poznatih pod imenom CGI

skripte (CGI je skra

enica od Common Gateway Interface). Te skripte mogu biti

vrlo jednostavne, poput onih koje ispisuju razne poruke slu

ajnim odabirom, ali i

prili

no složene, pružaju

i korisniku mogu

nost pretraživanja baza podataka ili

rada s pristupnicama za druge Internetske servise kakav je, naprimjer, E-mail.
Unato

njihovom imenu, skripte se mogu pisati u bilo kojem programskom jeziku.

Neke su doista prave skripte, napisane u interpreterskim jezicima poput Perla, dok
su druge napisane u kompajlerskim jezicima kakav je C.

11.1. Upoznavanje sa skriptama

CGI skripte su programi koje pokre

e server na zahtjev klijenta. Kada korisnik

zatraži URL adresu koja pokazuje na neka skripta, server

e je izvršiti. Svi izlazni

podaci koje skripta proizvodi prikazat

e se u prozoru pretraživa

kog programa.

URL adrese kojima se pozivaju skripte izgledaju kao i svake druge URL adrese s
HTTP protokolom. Na serveru tvrtke NCSA, naprimjer, instalirana je skripta
fortune koja je ozna

ena URL adresom:

http://hoohoo.ncsa.uiuc.edu/cgi-bin/fortune.

Kada serveru stigne zahtjev za ovom URL adresom, on

e izvršiti UNIX naredbu

fortune. Ta naredba vra

a druga

iju duhovitu dosjetku svaki puta kada je pozovete.

Kako server zna da skriptu treba izvršiti, a ne prikazati njen sadržaj? Postoje dvije
metode utvr

ivanja. Najviše se koristi ona kojom se odre

eni direktorij na serveru

posebno obilježi kao direktorij za skripte. Server sve datoteke u tom direktoriju i
svim njegovim poddirektorijima smatra izvršnim skriptama, a ne obi

nim

dokumentima.

ak je mogu

e kreirati nekoliko direktorija za skripte, navode

i ih u

konfiguracijskoj datoteci Web servera. Web serveri naj

eš

e su konfigurirani tako

da im se direktorij za skripte nalazi odmah u korijenskom direktoriju servera, te da
mu je dodijeljeno ime cgi-bin.

Drugi na

in utvr

ivanja radi li se o obi

nom dokumentu ili izvršnom programu je

upotreba ta

no odre

enih ekstenzija za skripte, naj

eš

e .cgi. Kada su skripte

obilježene ovim postupkom, nije ih potrebno smještati u ta

no odre

ene direktorije,

se one mogu nalaziti bilo gdje u serverevu stablu direktorija. Ako radite s Web

serverom koji podržava obje spomenute metode, mo

ete ih kombinirati,

postavljaju

i neke programe u direktorij za skripte, a neke bilo gdje u stablu,

dodjeljuju

i im posebnu ekstenziju.

Naj

eš

e nije potrebno obavljati nikakav drugi konfiguracijski posao oko skripti.

Jednostavno se uvjerite da su izvršive i da se ili nalaze u posebnom direktoriju, ili
da im je dodijeljena posebna ekstenzija. Potom kreirajte hipertekstualnu vezu koja
poziva skriptu, ili povežite svoj dokument sa skriptom na neki drugi na

in, kao, na

Programiranje za Internet

141

primjer, pomo

u obrasca. Ako vam se u

ini da se u direktoriju za skripte nalazi

previše programa i da nastaje prevelika gužva, slobodno kreirajte poddirektorije
kako biste uveli malo reda. Server

e svaku URL adresu koja sadrži ime cgi-bin

shva

ati kao poziv za izvršavanje skripte,

ak i ako je ona zakopana duboko u

stablu poddirektorija.

Da biste mogli pisati skripte, najprije morate nau

iti na kojem principu rade. Kada

HTTP server primi zahtjev s URL adresom vaše skripte, on kreira skup globalnih
varijabli koje sadrže korisne informacije o serveru, pretraživa

kom programu i o

trenutnom zahtjevu. Potom izvršava skriptu, "hvata" sve što ona izbacuje kao
izlazne podatke, te uhva

eni plijen šalje pretraživa

u na prikazivanje.

Vaša skripta je zapravo dokument kao i svaki drugi, pa tako posjeduje sve slabosti i
vrline pravih dokumenata. Ona može komunicirati izravno s korisnikom kao što to
mogu i najobi

niji ra

unarski programi. Kako bi se ostvario ovakav dvosmjerni

razgovor, morat

ete svojem korisniku poslati dokument unutar kojega je

omogu

en unos nekakvih podataka namijenjenih obra

ivanju pomo

u skripti.

Kako je HTTP prili

no jednostavan protokol, skripta ne može znati da li je isti

korisnik ve

koji put pozivao tu skriptu, pa se pokre

e na isti na

in svaki put

ispo

etka kada serveru stigne zahtjev s njenom URL adresom. Skripta se izvršava

sve dok se ne proizvede dokument koji

e se korisniku poslati kao rezultat. Sva

komunikacija koja se izvršava izme

u klijenta i CGI programa mora se stoga

obavljati preko standardnog I/O sistema, dakle pomo

u uobi

ajenih naredbi za

kontroliranje standardnog ulaza i izlaza podataka. Ne postoji na

in na koji možete

kontrolirati izgled korisni

kog ekrana, kreiranje okvira za dijalog, dugmadi i drugih

lijepih stvari kojima obiluju suvremene aplikacije koje rade pod grafi

kim

operativnim sistemima. Sve što vaš program mora proizvesti su podaci u obi

nom

tekstualnom obliku.

Kao i svaki dokument na Webu, tako i dokument koji

e proizvesti vašu skriptu

mora posjedovati pridruženi MIME tip. Naj

eš

e su dokumenti koje proizvodite

HTML dokumenti tipa text/html, no dozvoljena je upotreba svih tipova, uklju

ivši

grafiku i zvuk. Kako biste rekli pretraživa

kom programu koji MIME tip da

ekuje, vaš

e skript morati ispisati jedan redak koji sa

injava standardno HTTP

zaglavlje, poput:

Content-type: neki/mime-tip

Zaglavlje koje šalje vaša skripta može sadržavati i druga polja, no ne obavezno,
budu

i da

e server umjesto vas automatski popuniti sva neophodna polja. Iza

zaglavlja mora se ostaviti jedan prazan redak, te tada zapo

eti s ispisivanjem

željenih podataka.

Katkada ne

ete htjeti da vaš CGI program kreira nove dokumente za prikazivanje

na klijentskom ra

unaru, ve

ete, naprimjer, htjeti da iz nekog skupa URL adresa

odabere onu pravu i u

ita je u pretraživa

ki program vašeg korisnika. Na tom

principu rade serverske slikovne mape. Tako

er, možda

ete htjeti prikazati jedan

dokument spoljnim

itateljima, a neki drugi dokument

itateljima koji se nalaze u

Programiranje za Internet

143

•

Kada se koristi kao indeks niza, prefiks varijable ozna

ava tip elementa koji je

pohranjen u nizu. Uglate zagrade koriste se za obi

ne nizove, a viti

aste za

asocijativne nizove.

$niz [0] – prvi element niza @niz

$niz [1] – drugi element niza @niz

$niz {'jurica'} – vrijednost asocijativnog niza @niz na indeksu 'jurica'

$niz {jurica}- isto kao i gore

•

Uobi

ajeni izraz $niz = <> koristi se za uzimanje jednog retka teksta sa

standardnog ulaza. Navo

enje samo oznaka <> pohranit

e redak teksta sa

standardnog ulaza na varijablu $_.

•

Asocijativni niz %ENV sadrži trenutne globalne varijable sistema kako bi im
se moglo pristupiti. Primjeri

lanova niza bili bi: $ENV {'PATH'} i $ENV

{'HOME'}.

•

Izraz $varijabla=~/podudaranje_po_uzorku/ koristi se za operacije koje se
moraju podudarati po nekom zadanom uzorku. On se, naprimjer, može koristiti
da se provjeri sadrži li varijabla $varijabla odre

ene vrijednosti koje su

navedene iza tilde (~) kao uzorak.

•

Prefiks & koristi se za pozivanje potprograma. Na primjer: &sumiraj ($marke,
$lire).

•

Poziv system ("Neka naredba") izvršit

e odre

enu naredbu u UNIX ljusci, ili

ljusci nekog drugog operativnog sistema. Poziv eval ("neki Perl izraz")
izra

unat

e navedeni izraz i vratiti rezultat.

•

Perl varijablama koje su navedene unutar teksta obuhva

enog dvostrukim

znacima navoda biti

e ispisana vrijednost. Ako se u tekstu obuhva

enom

znacima navoda nalazi simbol , na tom

e mjestu ispis prije

i u novi redak.

Varijable unutar jednostrukih znakova navoda se ignoriraju. Evo primjera:

$varijabla = 'jurica';

print "Moje ime je $varijabla.";

ispis je: Moje ime je jurica.

print 'Moje ime je $varijabla.';

ispis je: Moje ime je $varijabla.

•

Obrnuti jednostruki znaci navoda, poput 'date', uzrokovat

e izvršavanje

navedenog programa (u ovom slu

aju naredbe date). Rezultati koje

e program

poslati na standardni izlaz bit

e vra

ene skripti. Ovo se naj

eš

e koristi u

kombinaciji s naredbom chop() kako bi se izbrisao znak za prijelaz teksta u
novi redak s kraja izlaznih podataka:

Programiranje za Internet

144

chop($datum='date'; # $datum postaje "Mon September 18 2006"

•

Još malo sintakse:

Print <<END

Ovo je tekst obuhva

en dvostrukim znacima navoda koji

e biti ispisan

zajedno s prijelazima teksta u novi redak i ispisima vrijednosti svih
varijabli...

END

Sav tekst izme

u prvog retka i rije

i END smatra se tekstom obuhva

enim

dvostrukim navodnim znacima. Rije

END nije klju

na, pa možete koristiti i

neku drugu, no me

u programerima je vrlo uobi

ajena. Gornji kod istovjetan je

sljede

oj naredbi:

Print "Ovo je tekst obuhva

en dvostrukim znacima navoda koji

e biti ispisan

zajedno s prijelazima teksta u novi red i ispisima vrijednosti svih varijabli...";

Naravno, nije teško zaklju

iti da se gornji primjer puno lakše

ita.

Primjer skripte:

#!/usr/local/bin/perl

# Datoteka: malena.pl

print <<END

Content-type: text/plain

Maleni dokument:

Ovo je najobi

niji tekst. Jednostavan, bez

zna

enja!

END

Ovaj program ne

e napraviti puno toga. On se sastoji od samo jedne print()

naredbe koja na standardni izlaz ispisuje HTTP zaglavlje dokumenta iza

ega

slijedi jednostavan tekst. Kako biste instalirali ovu skriptu i isprobali je u živo,
prilagodite putanju do Perl interpretera u prvom retku koda kako bi odgovarala
konfiguraciji vašeg sistema, napravite skript izvršnim i instalirajte ga u direktorij za
skripte. Pozovite ga iz svojeg pretraživa

kog programa pomo

u URL adrese

http://vaše.ra

unar/cgi-bin/malena.pl. Vaš

e pretraživa

ispisati sljede

i tekst:

Maleni dokument:

Ovo je najobi

niji tekst. Jednostavan, bez

zna

enja!

Najvažniji dio koji morate uo

iti u ovom primjeru je zaglavlje kojim se deklarira

text/plain kao MINE tip dokumenta. Bez prisustva ovog retka i praznog retka koji
slijedi, server

e prijaviti pogrešku.

Programiranje za Internet

146

chop ($kalendar='$CAL $godina');

#Ispisivanje svega u obliku HTML stranice

print <<END;

Content-type: text/html

<HTML>

<HEAD>

<TITLE>Kalendar za godinu $godina</TITLE>

</HEAD

<BODY>

<H1>Kalendar za godinu $godina</H1>

<PRE>

$kalendar

</PRE>

<HR>

<A HREF="/">Po

etna stranica</A>

</BODY>

</HTML>

END

U programu smo dva puta pozivali UNIX naredbe. Prvi poziv, naredba date, vratit

e trenutnu godinu. Drugi poziv koristi godinu dobivenu naredbom date za

izvršavanje naredbe cal. Tekst koji je nastao upotrebom naredbi date i cal potom se
ubacuje na odgovaraju

a mjesta u HTML dokumentu i ispisuje. Kako naredbe date

i cal mogu biti smještene u druga

ijim direktorijima na razli

itim sistemima, pune

putanje tih programa pohranili smo u Perl varijable pri vrhu skripta kako biste ih
kasnije lako mogli prona

i i promijeniti u odgovaraju

e vrijednosti. Tako

er ne

smijemo zaboraviti ispis kalendara smjestiti unutar naredbe <PRE>, jer

e se u

suprotnom izgubiti razmaci i prelasci u novi redak koje je kreirala naredba cal.

Programiranje za Internet

147

12. JavaScript

World Wide Web u samim po

ecima nije imao riješen problem povezivanja Web

stranica i drugih alata, poput baza podataka. Takve stvari mogao je riješiti CGI.
No, vrlo brzo pojavila se potreba da dokumenti obavljeni na Webu budu dinami

promjenljivi, odnosno da prikazuju najsvježije informacije o nekoj temi ili
informacije koje se

esto mijenjaju, a da administrator Weba ne mora u to ulagati

previše truda. Osim toga, razvoj Weba išao je u pravcu stvaranja što boljih su

elja,

tako da je ubrzo postalo gotovo neophodno imati na svojoj Web stranici ikone,
dugmad, padaju

e popise s opcijama, radio dugmad i ostale elemente modernih

elja. Budu

i da se CGI programi pozivaju na serveru, oni nisu mogli ponuditi

in da se ove posljednje zamisli riješe. Ostali nedostaci CGI programiranja bili

su:

•

potreba za u

enjem novog programskog jezika, naj

eš

e Perla;

•

nemogu

nost da CGI skripta vrati pretraživa

kom programu bilo šta drugo

osim

istog teksta ili neke datoteke;

•

sporost komunikacije s korisnikom, jer pretraživa

mora ponovno kontaktirati

servera da bi poslao podatke koje je korisnik upisao, a tek nakon toga poziva se
CGI skripta i ona šalje rezultate;

•

izvršavanje CGI skripti na serveru nepotrebno optere

uje server dodatnim

zahtjevima, jer se za svaku CGI skriptu mora pokrenuti dodatni proces;

•

relativno velik sigurnosni rizik, jer neka skripta s pogreškama može stvoriti
velike probleme;

•

CGI skripta može teoretski dobiti vrlo veliku razinu "dopuštenja" što smije
raditi na serverskom ra

unaru, zbog toga što se serverski program naj

eš

izvršava s vrlo visokim korisni

kim statusom, što sve zajedno omogu

ava

hakerima da preko CGI-a prona

u na

in da provale u vaše ra

unar;

•

Nemogu

nost stvaranja korisni

kih su

elja i op

enito vrlo sku

en popis stvari

koje se mogu riješiti pomo

u CGI-a

Zanimljivo je kako je mnogo vremena trebalo pro

i dok se nisu pojavila nova i

bolja rješenja. Budu

i da CGI s tehni

ke strane ne predstavlja ništa posebno (radi

se o najobi

nijem pozivanju UNIX skripti i preusmjeravanju njihovog ispisa u

pretraživa

ki program korisnika), tjera na razmišljanje

injenica da je Web

svojih prvih nekoliko godina bio ograni

en isklju

ivo na CGI.

Zatim je došla Java i revolucija je krenula. S Javom, autori Web stranica mogli su
uz minimalno programiranje stvarati efektne programe, a sam programski jezik na
sebe je preuzimao sve brige o sigurnosti, multimediji, prikazu grafike i sviranju
zvu

nih datoteka, te korištenju Internet protokola za komuniciranje s drugim

unarima. Me

utim, pojavom Jave Web još uvijek nije dobio alat koji bi

omogu

avao bolju interaktivnost na Web stranicama, a da napisani programi budu

Programiranje za Internet

149

smo spomenuli u prethodnom poglavlju; za pisanje JavaScript skripti bit

dovoljan pretraživa

ki program koji ih može pokrenuti i izvršavati.

Java aplikacije pozivaju se iz Web stranice pomo

u naredbe <APPLET>, putem

koje se programu proslje

uju i svi parametri potrebni za njegov rad. JavaScript

skripte ugra

uju se direktno u HTML kod stranice.

Brzina izvršavanja programa danas ide uglavnom u prilog JavaScriptu. Iako se
mnogo radi na tome da se Java ubrza, programi pisani u Javi još se uvijek
izvršavaju relativno sporo. To je djelomi

no posljedica potrebe da se bajt-kod

kompilira prije izvršavanja. S druge strane, JavaScript skripte obi

no se izvršavaju

vrlo brzo.

Java je objektno orijentirani jezik. Programeri mogu iznova koristiti ve

napisane

dijelove programa - objekte - a dodatno programirati samo onoliko koliko je
potrebno da se uskladi rad tih objekata. S druge strane, JavaScript je jezik zasnovan
na objektima, što je sasvim druga pri

a. JavaScript programi mogu pozivati objekte

koji su ugra

eni u pretraživa

ki program koji izvršava JavaScript, ali ne postoji

mogu

nost pravog rada s objektima, niti postoje klase i naslje

ivanja.

Druga zna

ajna razlika što se ti

e koncepcije samog jezika je specifikacija.

Specifikacija programskog jezika je skup pravila kojih se programeri moraju
pridržavati da bi napisali sintakti

ki i leksi

ki ispravan program. Java je tu, kao i

svi ostali pravi programski jezici, vrlo stroga, ali to je nešto na što su programeri
navikli. Varijable moraju biti deklarirane prije korištenja, a i svi ostali objekti
moraju prethodno biti stvoreni. JavaScript je ovdje sli

niji Perlu, koji se naj

eš

koristi u CGI programiranju, jer nije toliko rigorozan po pitanju na

ina stvaranja i

korištenja varijabli. Neki

e re

i da je to argument u prilog JavaScriptu, jer zašto na

etku programa razmišljati o varijablama koje morate deklarirati, kad je

prirodnije nove varijable uklju

ivati u program "u letu"? Pa, ovaj drugi na

in da

uvijek je podložan pogreškama, koje ne moraju biti samo do programera, ve

može raditi i o nedostatcima izvršnog sistema za JavaScript. Iako je po

etnicima

lakše "zaboraviti" na potrebu deklariranja varijabli, nama se ta ideja ne dopada.
Ve

ina programera

e s JavaScripta prije

i na Javu, a starih se navika teško odre

12.2. Kada JavaScript? Kada Java? Kada CGI?

JavaScript

ete koristiti za sve ono što ste željeli napisati u CGI-u, ali niste mogli

ili nije bilo elegantno. JavaScript

ete koristiti za jednostavne radnje

ije bi

programiranje u Javi oduzelo previše vremena. To su, naprimjer, ispisivanje
trenutnog datuma ili vremena na Web stranici, ispisivanje datuma zadnje promjene,
ispis poruka u statusnom retku pretraživa

kog programa, otvaranje novih prozora u

pretraživa

u i prikaz novih HTML dokumenata, provjeru ispravnosti podataka koji

su upisani u obrasce, pa

ak i ograni

eno pretraživanje vrlo jednostavnih baza

podataka.

Programiranje za Internet

150

Ako je potrebno napraviti efektnu animaciju, multimedijsku prezentaciju ili
interaktivnu aplikaciju na Webu koja stalno komunicira s korisnikom, Java je jedini
dobar odabir. Ako program mora obavljati složena prera

unavanja, s Javom možete

posti

i da se taj proces obavlja u pozadini zahvaljuju

i Javinom ugra

enom

sistemu višenitnosti; a ako je potrebno iz vlastitog programa intenzivno koristiti
druge mrežne protokole (poput pristupanja FTP serverima ili drugim uslugama),
Java ve

sadrži sve što vam treba. Dakle, za bilo pisanje bilo kojeg programa koji

bi trebao imati dulji životni vijek i koji se ne

e izvršiti samo jedan jedini put kada

netko posjeti Web stranicu, trebali biste odabrati Javu.

CGI-u

e, s obzirom na razvoj situacije u svijetu skriptnih jezika, ostati vrlo malo

prostora. Prakti

ki jedine radnje koje ne možete izvesti sa skriptnim jezicima su

pretraživanje baza podataka. Naime, baze podataka naj

eš

e se nalaze na serveru, a

Java i JavaScript im tamo ne mogu pristupati, pa CGI ostaje jedino rješenje.

12.3. JavaScript i HTML

Svi skriptni programa i ugra

uju se u HTML dokumente pomo

u naredbe

<SCRIPT>. Unutar tog bloka potrebno je jednostavno napisati cijeli kod JavaScript
programa i to je sve. Dakle, da bi pretraživa

ki program prepoznao da u

dokumentu postoji JavaScript, trebate koristiti par naredbi:

...

</SCRIPT>

Naravno, to je najjednostavnija varijanta te naredbe, ali se u tom obliku ne može
koristiti jer je potrebno nazna

iti i o kojem se skriptnom jeziku radi. Naprimjer,

postoji i VBScript, pa pretraživa

mora znati ho

e li pokušati intepretirati

JavaScript ili VBScript. U slu

aju JavaScripta, naredba <SCRIPT> treba glasiti:

...

</SCRIPT>

Trenuta

no se kao argumenti za parametar LANGUAGE mogu koristiti samo

imena !JavaScript"!, "VBScript" i "LiveScript". LiveScript je ostatak iz prošlosti,
pa preostaju samo prva dva skriptna jezika. Me

utim, kako se stvari na Webu vrlo

brzo razvijaju, moglo bi se dogoditi da

e se svi skripte, sve Java aplikacije i sve

ActiveX kontrole ubudu

e u HTML dokumente ugra

ivati uporabom jedinstvene

naredbe, <OBJECT>, koja se i danas primjenjuje za povezivanje ActiveX kontrola
i katkada plug-in dodataka ugra

enih u pretraživa

. I u interesu samih tvrtki je da

se kona

no o tome dogovore, jer nema smisla da postoje tri razli

ita na

ina

ugradnje vrlo sli

nih objekata u stranicu.

Programiranje za Internet

152

<!-- Po

etak komentara kojim "skrivamo" skript

document.write ("<H1>Moja prva skripta</H1>")

//-->

</SCRIPT>

<HEAD>

<BODY>

<H2>Ovo je obi

an HTML...</H2>

</BODY>

</HTML>

Slika 79. Rezultat izvršavanja skripte u prozoru pretraživa

kog programa

12.4. Svojstva JavaScript jezika

12.4.1. Varijable i automatsko pretvaranje tipova

Varijable u JavaScriptu mogu se zvati kako god želite, ali postoji ograni

enje kao i

u Javi, a to je da ne smiju po

injati brojevima. Dakle, prvi znak smije biti samo

slovo ili oznaka podvlake (-). Ne postoji ograni

enje duljine imena varijable.

Za deklariranje varijabli u JavaScriptu koristi se naredba var. JavaScript za po

etak

ne zahtijeva da varijable budu deklarirane na po

etku programa, a osim toga u

JavaScriptu ne postoje tipovi podataka. Potpuno jednako kao i Perl, JavaScript
obavlja dinami

ku pretvorbu podataka tijekom izvršavanja skripte, pa programeri

mogu pisati skripte bez razbijanja glave o tome smiju li pretvoriti jedan tip
podataka u drugi, a da pritom ne izgube na preciznosti. Osim toga, JavaScript

e za

Programiranje za Internet

153

vas sam odrediti kojeg tipa treba biti pojedina varijabla onog trenutka kada je
uvedete u program.

Na primjer, ako u svom programu koristite dvije varijable koje su prvi puta
spomenute s:

Varijabla1="15"

Varijabla2=5

Tada

e varijabla1 biti string (zbog toga što je njen sadržaj obuhva

navodnicima), dok

e varijabla2 biti cjelobrojnog tipa.

Ako kasnije u programu napišemo, recimo:

X = varijabla1 + varijabla2

Y = varijabla2 + varijabla1

Kako

e se ra

unati vrijednosti varijabli x i y? Za po

etak, budu

i da varijable

sasvim o

ito nisu jednakog tipa, JavaScript mora obaviti pretvorbu. Pravilo za

pretvaranje tipova podataka vrlo je jednostavno: pretvaranje se obavlja slijeva
nadesno, odnosno onaj operand s desne strane operatora (obi

nim rije

ima, "ono

desno od plusa") bit

e pretvoren u tip operanda s lijeve strane operatora.

Tako

e u prvom gornjem primjeru varijabla2 prvo biti pretvorena u string, a zatim

e taj string biti "zbrojen" sa stringom pohranjenim u varijabli varijabla1. Budu

da zbrajanje stringova rezultira njihovim spajanjem, nova vrijednost varijable x
(koja je u me

uvremenu tako

er postala tip string) bit

e "155".

U drugom slu

aju, varijabla1 se iz stringa mora pretvoriti u cijeli broj i zatim

pomnožiti s vrijednoš

u pohranjenom u varijabli varijabla2. Varijabla y bit

cjelobrojnog tipa, a sadržavat

e rezultat množenja 5 sa 15, odnosno broj 75.

Naravno, ne možete konvertirati iz bilo

ega u bilo šta. Ako se oslanjate na

automatsko pretvaranje varijabli, morte dobro razmisliti o tome može li se neka
pretvorba izvesti. Naprimjer, string se može pretvoriti u cijeli broj samo ako nije
sadržavao niti jedno slovo, što je tek samo jedan od posebnih slu

ajeva stringova,

budu

i da oni naj

eš

e sadrže i druge znakove. U tom biste primjeru iz stringa prvo

morali sami pobrisati ono što ne želite, a tek potom obaviti pretvorbu. Drugi
problem je u nedefiniranim operacijama: da smo prvu od ranijih naredbi napisali
kao x = varijabla1 – varijabla 2, što bi se dogodilo? Varijabla varijabla2 o

ito se

mora pretvoriti u string, ali operacija oduzimanja stringova nije definirana. U svim

e takvim slu

ajevima do

i do ispisivanja pogreške u prozoru pretraživa

kog

programa.

Programiranje za Internet

155

se prvo navede njegovo ime, a zatim i njegovo svojstvo koje se želi promijeniti ili
kojem se želi pristupiti. Naprimjer:

Knjiga.stranica=1050

e svojstvu stranica od objekta knjiga pridružiti navedenu vrijednost. Ako svojstvo

stranica ne postoji u objektu knjiga, ono

e mu biti dodato.

S nizovima se u JavaScriptu radi na sli

an na

in kao što se pristupalo objektima.

Razlog tome nije teško otkriti ako se malo promisli: budu

i da JavaScript na isti

uva u memoriji nizove i objekte, možete pristupati nizovima na jednak

in kao što pristupate objektima i obrnuto. Tako bismo gornju naredbu mogli

pisati i kao:

Knjiga ["stranica"]=1050

Jer se nizovima op

enito pristupa tako da se unutar uglatih zagrada navede indeks

lana koji se želi promijeniti ili

ija se vrijednost želi dobiti.

12.4.4. Kontrola tijeka programa

Naredba if ... else za postavljanje logi

kih uvjeta ima istu sintaksu kao u Javi ili

C++. Umjesto naredbe if ... else može se opet koristiti i skra

eno pisanje pomo

upitnika i dvota

ki.

if (logi

ki izraz) {

...

}

else {

...

}

Naredbe za stvaranje petlji, for i while tako

er se pišu jednako kao u Javi ili C++.

for (izraz; logi

ki izraz; izraz) {

...

}

Naredbe while i continue mogu se, kao i u Javi i C++, koristiti za iskakanje iz
petlje i nastavljanje izvršavanja od neke ta

ke programa.

12.4.5. Operatori i njihovi prioriteti

Operatori koji su na raspolaganju identi

ni su onima u Javi i C++, a njihovi su

usobni odnosi u prioritetima jednaki.

Programiranje za Internet

156

Tabela 6. Operatori za JavaScript i za Javu

Prioritet Operator Opis
1

( )

zagrade se koriste za promjenu prioriteta

+ +

inkrementiranje (unarni operator)

- dekrementiranje

! logi

ki komplement (unarni operator)

unarni komplement (unarna negacija)

unarni pozitivni predznak

- unarna

negacija

3 * množenje
/ dijeljenje

ostatak cjelobrojnog dijeljenja (modulo)

4 + sabiranje
- oduzimanje
5 << shift

bitova

ulijevo

shift

bitova

udesno

>>>

shift bitova udesno uz popunjavanje nulama

6 < manje

manje ili jednako

> ve

e od

e ili jednako

7 =

= jednako

razli

ito od (nejednako)

8 & AND
9 | OR
10 :

= dodjeljivanje

vrijednosti

12.4.6. Funkcije

Osnovna jedinica programa koja obavlja neki koristan posao u JavaScriptu se, kao i
u C-u naziva funkcijom.

Da biste stvorili vlastitu funkciju, koristit

ete klju

nu rije

function. Naprimjer,

sljede

a funkcija ispisat

e tekst koji primi kao parametar masnim slovima:

function ispisuj_masno (tekst) {

document.write ("<B>" + tekst + "</B");

}

Zgodno je odmah usput primijetiti da u JavaScriptu možete formatirati ekranski
ispis koriste

i HTML naredbe, kao u gornjem primjeru. Vaš

e skript jednostavno

pretraživa

u poslati cijeli string, koji uklju

uje i HTML naredbe za odre

ivanje

stila ispisa, a pretraživa

e to ispisati po njemu poznatim pravilima, koja kažu da

sve izme

u <B> i </B> mora biti masno.

Programiranje za Internet

158

12.6.1. Objekt Window

Objekt Window sadrži funkcije pomo

u kojih možete utjecati na izgled

pretraživa

kog prozora u kojem se izvršava vaš JavaScript program. Slijede neke

od zanimljivijih funkcija i primjeri njihovog korištenja.

window.frames ['okvir1'].document.bgColor="yellow"

mijenja boju pozadine u trenutnom dokumentu, ali samo u njegovom okviru
okvir1. Prvi dio te naredbe, window.frames, koristi se za pristup nekom okviru, a
nakon toga jednostavno treba pozvati funkciju kojom se postavlja nivoa boja.
Dakle, prevedeno na ljudski jezik, gornja naredba kaže "okvir1" oboji u žuto".

Možda vas u ovom trenutku još zbunjuje to što mi zapravo izrazu na lijevoj
dodjeljujemo vrijednost s desne strane izraza na lijevoj da bismo obavili neku
radnju. Me

utim, JavaScript je i zamišljen tako da radi isklju

ivo s objektima i

njihovim svojstvima.

im vi promijenite svojstvo objekta, to se odmah održava na

odgovaraju

i na

in, ovisno o tome što ste u

inili.

Da biste prikazali poruku u statusnom retku pretraživa

a, možete pozvati

window.status="Ne mogu zaspati bez neke TV serije!";

Ako želite prikazati okvir za dijalog s nekom upozorenjem, jednostavno pozovite

window.alert ("Ažuriraj antivirusni program!");

Slika 80. Okvir s upozorenjem

e prikazati okvir s porukom i korisnik

e morati kliknuti na dugme OK.

Ako želite prikazati okvir za dijalog u kojem korisnik može birati izme

u potvrde i

odbijanja pozovite funkciju

window.confirm ("Jeste li sigurni?");

Ako korisnik klikne dugme OK, vašem

e se programu vratiti vrijednost true, a ako

klikne na Cancel, dobit

ete nazad vrijednost false.

Programiranje za Internet

159

Slika 81. Okvir za potvrdu neke radnje

Objekt Window tako

er se brine za otvaranje novih prozora. Da biste otvorili novi

prozor i u njega u

itali neki dokument, pozovite funkciju open:

open ("stranica.htm","Window1","toolbar=yes");

12.6.2. Objekt Document

Objekt Document daje osnovne informacije o trenutnom dokumentu i koristi se za
sve ulazno-izlazne operacije.

Da biste ispisali neki tekst, upotrijebite naredbe document.write i
document.writeln:

document.write("Moja prva skripta");

document.writeln("Moja prva skripta");

Razlika izme

u prve i druge naredbe je u tome što

e se u drugom slu

aju ta

ka od

koje po

inje ispis nekog sljede

eg stringa premjestiti u novi redak.

Da biste promijenili boje kojima se ozna

avaju hipertekstualne veze (uklju

uju

i i

one koje su ve

posje

ene), upotrijebite:

document.linkColor ='red';

document.alinkColor ='yellow';

document.vlinkColor ='blue';

Koriste

i JavaScript možete saznati i odakle je došao vaš posjetitelj, tj. s koje je

stranice odabrao hipertekstualnu vezu koja je pokazivala na vašu stranicu:

document.write (document.referrer);

Ako želite ispisati datum zadnje promjene trenutnog dokumenta:

document.write ("Ovaj dokument je promijenjen:");

document.write (document.lastModified);

Programiranje za Internet

161

Na primjer, mnoge stranice koriste JavaScript za provjeru ispravnosti popunjavanja
obrazaca. Ako posjetitelj nije dobro popunio obrazac, treba ga na to upozoriti.
Dakle, kada korisnik klikne na dugme koji šalje neke podatke, mi želimo da
pretraživa

izvrši neke naredbe u JavaScriptu. Da bi se to dogodilo, potrebno je u

HTML naredbu za stvaranje dugmeta uklju

iti poziv tog doga

aja:

<INPUT TYPE="button" VALUE="posalji"

onClick="posalji(this.form)">

Novi parametar u naredbi <INPUT> govori koji doga

aj treba pratiti.

Pretraživa

ima gornji parametar kaže da pozovu vašu JavaScript funkciju "posalji"

nakon što korisnik klikne na taj dugme. Ukupno je 9 doga

aja koje možete pratiti,

a oni su prikazani tablicom 7.

Tabela 7. Doga

aji u JavaScriptu i njihova imena

Doga

aj Rukovatelj

doga

aja

Do njega dolazi...

blur

onBlur

...kada korisnik premjesti fokus s trenutnog

elementa na Web stranici

click

onClick

...kada korisnik klikne na neki element ili

hipertekstualnu vezu

change onChange

...kada

korisnik promijeni neki tekst ili

mišem ozna

i neki element na Web

stranici

focus

onFocus

...kada se korisnik usredoto

i na neki

element (npr. kada u obrascu za upis
podataka klikne unutar nekog od polja)

load

onLoad

...kada korisnik u

ita stranicu u pretraživa

mouseover

onMouseOver

...kada korisnik mišem do

e na

hipertekstualnu vezu

select

onSelect

...kada korisnik ozna

i neke elemente u

obrascu

submit

onSubmit

...kada korisnik pošalje podatke upisane u

obrazac

unload

onUnload

...kada korisnik napušta stranicu

Umjesto da funkciju pozivate, ako se radi o vrlo kratkoj naredbi koju treba izvršiti
nakon odre

enog doga

aja, možete je izravno uklju

iti u akciju koju treba obaviti

nakon doga

aja. Naprimjer, da biste pokazali okvir s upozorenjem ako korisnik

klikne na neki dugme:

<INPUT TYPE="button" name="Klikni!"

onClick="alert("Zašto bezveze klikaš?')">

Ili biste mogli na svojoj stranici napraviti dugme koji

e pretraživa

u narediti da se

vrati dvije stranice nazad, ovisno o tome gdje je korisnik bio:

Programiranje za Internet

162

<INPUT TYPE="button" name="Klikni!"

onClick="history.go(-2)">

Ako želite pozvati neku funkciju nakon što korisnik odlu

i poslati sadržaj

popunjenog obrasca, upotrijebite doga

aj onSubmit:

<INPUT NAME="obrazac" ACTION="obrada.cgi"

onSubmit="provjeri ( )">

Ovaj primjer

e pozvati funkciju provjeri( ) u vašem programu, pa tako možete

provjeriti je li korisnik ispravno popunio sva polja.

Kada korisnik u

ini neku promjenu u obrascu (npr. odabere neku drugu opciju

izme

u ponu

enih ili promijeni sadržaj nekog polja za upis teksta), JavaScript

poziva rukovatelj doga

ajem za doga

aj onChange:

Ovakva naredba pozvala bi funkciju provjeriAdresu svaki put nakon što korisnik
promijeni "fokus", odnosno nakon što je upisao nešto u neko polje i premjestio se
na drugo. Na ovaj na

in možete provjeriti je li dobro napisao svoje li

ne podatke

(npr. telefonski broj ne može imati 3 cifre, ne mogu sve biti iste, a adresa mora
sadržavati barem dva broja, broj ulice i poštanski broj grada). Ako korisnik nije
podatke pravilno upisao, možete ga stalno vra

ati na isto polje za upis sve dok ne

ispravi pogrešku.

Ako želite da se neka poruka ispiše

im korisnik do

e na vašu Web stranicu,

upotrijebite doga

aj onLoad. Njega je najbolje uklju

iti u naredbu <BODY> u

HTML dokumentu. Sljede

i primjer otvorio bi okvir za dijalog i u njemu prikazao

poruku odmah nakon što korisnik u

ita stranicu koja sadrži taj redak:

<BODY onLoad="alert('Dajemo popust za sve narudzbe na

Webu!'">

A ako želite korisnika pozdraviti na odlasku ili obaviti neku drugu radnju, možete
to na sli

an na

in u

initi pomo

u doga

aja onUnload.

Doga

aj onMouseOver radi sli

no prethodnima: nakon što se mišem na

ete iznad

odre

enog objekta, JavaScript

e obaviti neku radnju. Na primjer:

<INPUT TYPE="button" name="Klikni!"

onMouseOver="help( )">

Na ovaj na

in biste mogli ispisivati kratke poruke pomo

i koje korisniku

objašnjavaju što pojedini elementi stranice rade.

Programiranje za Internet

164

var porl=" Dobro došli na našu Web stranicu. Na ovim

stranicama pronaci cete potpuni katalog nasih izdanja,

zajedno sa svim sadrzajima i primjerima poglavlja. Bilo

bi nam drago kad biste nam javili kako vam se dopada

nas Web."

var por2=" Svoje poruke mozete poslati na adresu

[email protected]

var por3="Hvala na posjeti i zelimo vam ugodan boravak

na nasim stranicama! Ne zaboravite pogledati nova

izdanja!"

alert(por1 + por2 + por3)

//-->

</SCRIPT>

</HEAD>

12.8.2. Ispisivanje pomo

Kombiniraju

i doga

aj onMouseOver s pozivom funkcije window.status, možete u

statusnom retku pretraživa

kog programa ispisivati poruku koja pojašnjava

emu

služi neki element stranice ili kamo vodi hipertekstualna veza. Na primjer, da biste
umjesto same adrese, koja

e se u statusnom retku pojaviti nakon što korisnik

mišem do

e iznad hipertekstualne veze, ispisali detaljnije objašnjenje stranice,

pisat

ete u svojem HTML dokumentu:

<A HREF="novost.htm" onMouseOver="window.status='Sve

što želite saznati o nama!';return true">Novosti!</A>

Slika 84. Tekst iz prethodnog primjera ispisuje se u statusnoj liniji pretraživa

a kad

se mišem pokaže na link ozna

en tekstom "Novosti!"

Programiranje za Internet

165

12.8.3. Automatsko preusmjeravanje korisnika

Ako se lokacija vaših Web stranica promijeni, trebate korisnike uputiti na novu
lokaciju. Jedan na

in da se to u

ini je korištenje client pull/server push zahtjeva i

naredbe <META HTTP-EQUIV="REFRESH"...>, dok je drugi JavaScript:

<!-—

alert("Promijenila se nasa URL adresa. Sada cemo vas

automatski prebaciti na nasu novu adresu. Postavite

novu adresu u svoje favorite, a Web administratora cije

su vas stranice uputile na staru adresu obavjestite o

promjeni. Hvala!")

//-->

</SCRIPT>

</HEAD>

<BODY

onload="location='http://nova.adresa.com/novi.htm'">

12.8.4. Automatsko preusmjeravanje uz potvrdu

Ako želite da korisnik potvrdi svoju želju da posjeti vaše Web stranice i na novoj
adresi, možete malo promijeniti gornji skript tako da koristi funkciju confirm za
stvaranje okvira za dijalog u kojem korisnik može kliknuti na dugme OK ili
Cancel.

<!--

function redirect() {

if (confirm ("Promijenila se nasa URL adresa.

Sada cemo vas automatski prebaciti na nasu novu

adresu. Pritisnite OK ako zelite posjetiti nasu

novu adresu."))

{

location='nova_stranica.htm'

}

//-->

</SCRIPT>

Programiranje za Internet

167

Slika 86. Tekst preuzet iz dijaloga iz prethodnog primjera

12.8.6. Provjera starosti korisnika

smo rekli da se doga

aj onBlur koristi kako bi se vaša naredba u JavaScriptu

mogla pokrenuti nakon što korisnik napusti neki element na Web stranici, npr.
nakon što upiše svoje godine u odgovaraju

e polje i prije

e na sljede

e. Ako vas ne

zadovoljava ono što je korisnik upisao, možete mu ispisati upozorenje i poruku o
potvrdi upisa pomo

u sljede

e funkcije:

<!--

function testAge(form) {

var nAge = form.ageBox.value;

if (nAge >= 18) {

if (nAge >=1800) {

alert("Upisali ste starost od " + nAge +

"godina. Je li to sigurno tacno?")

}

else {

alert ("Morate imati vise od " + nAge + "godina")

}

//-->

</SCRIPT>

Programiranje za Internet

168

Naravno, u dokumentu mora postojati odgovaraju

i obrazac:

<FORM>

Upisite svoju starost: <INPUT TYPE="text" NAME="ageBox"

onblur="testAge(this.form)">

</FORM>

Isto bismo mogli u

initi i koriste

i doga

aj onSubmit:

<!--

function testAge() {

var nAge = document.age.ageBox.value;

if (nAge >= 18) {

if (nAge >=100) {

alert ("Upisali ste starost od " + nAge +

" godina. Morate imati barem 18!")

return false

}

else {

return true

}

else {

alert ("Morate imati vise od " + nAge + "godina")

return false

}

//-->

</SCRIPT>

U ovom slu

aju obrazac u dokumentu izgleda malo druga

ije:

Upisite svoju starost: <BR>

</FORM>

Programiranje za Internet

170

Kola

i imaju svoj "rok trajanja". Kada stvarate novi kola

, morate navesti kada

e mu iste

i rok trajanja. Ako kola

nema odre

en rok trajanja, pretraživa

e upisati u datoteku cookies.txt nakon izlaska iz pretraživa

a. (Ina

e svi

pretraživa

i drže kola

e u memoriji tijekom rada i spremaju ih na disk tek po

izlasku iz programa.) Na taj na

in možete pamtiti neke podatke samo tijekom

jednog posjeta Web stranici.

Ako želite da kola

bude zapam

en na disku korisnika, što bi nam svakako

trebalo ako želimo nakon nekog vremena vidjeti koje je sve knjige naru

io, morat

ete zadati rok trajanja kola

a. Pretraživa

i automatski

iste datoteku s

kola

ima i izbacuju one kojima je rok istekao. Ova je mjera neophodna zbog toga

što postoje ograni

enja broja kola

a i njihove veli

ine, tako da baš ne možete

upisivati što god želite i kako god želite na korisnikov disk. Ograni

enja nisu

uvedena zato što se to ne bi moglo izvesti druga

ije, nego zbog toga da se s previše

kola

a ne bi popunio sav prostor na disku. Tako pretraživa

ne smije

uvati više

od 300 kola

a od kojih je svaki veli

ine najviše 4 KB. Ukupna veli

ina datoteke

cookies.txt zbog toga ne

e nikad biti ve

i od 1,2 MB.

Da bismo stvorili i kasnije pro

itali jednostavan kola

, u svom programu

emo

napisati sljede

e dvije funkcije:

<!--

function SetCookie(name, form) {

document.cookie = name + form.textCookie.value + ";"

form.textCookie.value = ""

}

function ShowCookie(form) {

form.textCookie.value = document.cookie

}

//-->

</SCRIPT>

Prva funkcija, SetCookie, uzima vrijednost polja name iz obrasca. Zatim mijenja
svojstvo document.cookie, dodaju

i mu vrijednost tog polja, ali mu još dodaje i

ostali tekst koji je korisnik napisao u polje form.txtCookie.value, nakon

ega briše

sadržaj tog polja. Druga funkcija, ShowCookie, pro

itat

e kola

Sada moramo stvoriti odgovaraju

e su

elje za upis podataka koji

e se spremiti kao

kola

<FORM>

<INPUT TYPE="Text" NAME="textCookie" size=50 ROWS=10

COLS=73><P>

Programiranje za Internet

171

<I>Kliknite na ovo dugme da biste poslali

kolacic:</I><BR>

<INPUT TYPE="button" VALUE="Create Cookie"

NAME="butSet" onclick="SetCookie('Cookie1',

this.form);"><P>

<I>Kliknite na ovo dugme da biste prikazali sadržaj

novog kolacica:</I><BR>

<INPUT TYPE="button" VALUE="Display Cookie"

NAME="butDisplay" onclick="ShowCookie(this.form);">

</FORM>

Da biste ovo isprobali, upišite neki tekst u polje za upis i kliknite dugme na Web
stranici da biste poslali svoj odgovor skriptu. On

e upamtiti upisane vrijednosti

kao kola

e, pa ih možete prikazati klikom na drugo dugme.

Slika 88. Stranica sa kola

ima

Korisnici Netscape Navigatora i Internet Explorer mogu isklju

iti primanje

kola

a. Ako je ono uklju

eno, možete uklju

iti još i opciju za dobivanje

upozorenja o tome da neka skripta želi postaviti kola

. Tako možete odlu

iti

želite li da skripte s nekih Web stranica uop

e nešto

uvaju na vašem disku.

Programiranje za Internet

173

Ova naredba se razlikuje od sljede

e: echo "Zdravo<BR>";

echo

"Zdravo<BR>";

U prvom slu

aju

e u HTML tekstu koji server vra

a biti izveden "novi red". U

drugom slu

aju HTML tekst sadrži HTML naredbu za novi red.

13.4. Varijable (promjenljive)

Da bi se mogli pisati smisleni programi i aplikacije potrebne su nam promjenljive.
Sve promjenljive po

inju sa znakom 'dolar'

!!!

$text = "Ja sam jedna recenica!" ;

echo

$text,$text,$text;

$l = "duga";

$k = "kratka";

echo "Ja sam jedna $l$l$l$l$l$l recenica!";

echo "Ja sam jedna $k recenica!";

$i = 10;

$j = 5;

echo

$i,"+"$j,"=",$i+$j;

Tip promjenljive (cijeli broj, decimalni broj, tekst ...) dobija se automatski prilikom
primjene. (Za razliku od C i C++ gdje se tip promjenljive morao egzaktno i ru

odrediti). Ovaj "ru

ni" na

in odre

ivanja tipa promjenljive vrši se samo u

specijalnim slu

ajevima.

13.5. Pred-definisane (ve

odre

ene) promjenljive

Kako je PHP specijalno razvijen za pravljenje dinami

kih web-stranica, samim tim

je i obrada podataka koji vode porijeklo iz formulara lagana.

Primjer:

Pretpostavimo da u formularu stoji:

<INPUT

NAME="ImePoIzboru">

<INPUT

TYPE="submit">

</FORM>

Prilikom "

klika

" na

SUBMIT

dugme, bi

e pozvana datoteka

RadiNesto.html

Programiranje za Internet

174

Ova datoteka može npr. ovako izgledati:

echo "Vi ste ukucali $ImePoIzboru . ";

Tekst koji je ukucan u formular-polje

ImePoIzboru

, sa

uvan je (memorisan) u

PHP promjenljivoj

$ImePoIzboru

etnici trebaju uvijek koristiti

METHOD=POST

prilikom izrade formulara !

13.6. Jednostavne ra

unske operacije

Sljede

e ra

unske operacije su na raspolaganju:

Znak Radnja Primjer

Sabiranje

$i + $j

Oduzimanje

$i - $j

Množenje

$i * $j

Dijeljenje

$i / $j

Ostatak

$i % $j

Objašnjenje za radnju Ostatak: radnja izra

unava ostatak dijeljenja, npr. 23%17

daje 6 , jer je 23 podijeljeno sa 17 jednako 1 i ostatak 6 .

13.7. Povezane rije

i ('strings')

$d = "Dugacak";

$k = "Kratak";

echo

$l.$k;

DugacakKratak

(pokazuje na ekranu rije

DugacakKratak)

Kao i u C i C++ i dalje važe ve

poznate skra

enice i olakšice:

$i++

uve

ava varijablu

za 1

++$i

uve

ava varijablu

za 1

$i--

umanjuje varijablu

za 1

--$i

umanjuje varijablu

za 1

Programiranje za Internet

176

tzv.

broja

se postavi na nulu

while

($i<10)

//sve dok je $i manje od 10

{

echo $t;

//pokaži sadržaj promjenljive $t

$i++;

//uve

aj i za 1

}

moglo bi se isto tako napisati:

$t = "Moram sam raditi domace zadatke !<BR> ";

$i = 0;

//broja

na nulu

//izvrši

!!!

{

echo

$t;

//pokaži sadržaj $t, tj. memorisanu re

enicu

$i++;

//uve

aj broja

za 1

} while ( $i < 10 );

// i to radi sve dok je $i manje od deset

Gdje je razlika? Razlika se najbolje može uo

iti ako se kao po

etna vrijednost za

broja

umjesto nule

$i=0

; stavi deset

$i=10;

. U prvom slu

aju nije ispunjen

uslov

( $i<10 )

, tako da naredbe izme

u "

viti

astih

" zagrada ne

e biti izvedene. U

drugom slu

aju bi

e najprije izvedene naredbe unutar "

viti

astih

" zagrada, i tek

onda

e biti provjereno da li je uslov još uvijek zadovoljen tj. da li važi

$i<10

Kako ovo nije slu

aj, bi

e prekinuto izvo

enje naredbi unutar petlje. Važno je

primijetiti da

e u ovom drugom slu

aju, zna

i upotrebom

DO-WHILE petlje

naredba biti

BAREM JEDNOM izvedena

. Još jedna mogu

nost za primjenu petlji

u programu je tzv.

FOR

petlja.

Programiranje za Internet

177

Primjer:

$t = "Moram sam raditi domace zadatke !<BR> ";

for

($i=0;$i<10;$i++)

{

echo

$t;

}

'for

' petlja se sastoji od tri izraza. U opštem slu

aju:

for (izraz1;izraz2;izraz3)

{

...

}

Sa vrijednoš

izraz1

inicijalizira se petlja, prosto re

eno "

broja

se stavlja na

etnu vrijednost

". Vrijednost data u

izraz2

predstavlja krajnju vrijednost . Kada

se ona dostigne izlazi se iz petlje. Kroz

izraz3

daje se tzv. "

korak

", tj. dajemo

vrijednost za koju treba pove

ati ili umanjiti broja

. Prednost

'for

' naredbe je taj što

sve naredbe potrebne za kontrolu petlje stoje u jednom redu (ta

nije u jednoj

zagradi). U idu

em primjeru bi

e pokazana jedna petlja u kojoj se broja

umanjuje

za odre

enu vrijednost, tj. brojat

emo "

unazad

$t = "Moram sam raditi domace zadatke !<BR> ";

//promjenljiva

for

($i=10;$i>0;$i--)

broja

se postavlja na 10. U svakom idu

em koraku bit

umanjen za 1 sa $i--,... naredba se izvršava sve dok je $i>0 */

{

echo

$t;

}

13.10. Uslovno grananje programa

Ukoliko se program želi "usmjeriti" u nekom pravcu, i to u zavisnosti od izabranog
slu

aja, upotrijebit

e se

naredba:

($i<0)

Programiranje za Internet

179

}

else

//ako $i nije ni manje ni ve

e od nule,...

{

echo "$i je nula ";

// onda je sigurno $i=0, pa to pokaži...

}

Ako jednu promjenljivu treba više puta testirati, onda je lakše upotrijebiti naredbu

switch

. Primjer:

switch

($ime)

{

case

"Suljo":

echo "Ja sam Suljo";

break;

case

"Mujo":

echo "Ja sam Mujo";

break;

case

"Haso":

echo "Ja sam Haso";

break;

default:

echo "Nisam Suljo, Mujo a ni Haso, ja sam Huso";

}

Ako je ime sadržano u promjenljivoj

$ime

Suljo

, (tj. ako promjenljiva $ime

sadržava vrijednost "Suljo") bi

e izvršena prva naredba:

echo "Ja sam Suljo"

;

Nakon toga se prekida dalje izvršenje naredbi u petlji sa naredbom

break;

Ako

ime nije Suljo, onda se nastavlja sa "

ispitivanjem slu

ajeva

" datim u

case

, u datom

slu

aju pore

enjem sadržaja promjenljive

$ime

i imena (rije

i Mujo, Haso,..).

Ukoliko ni jedan slu

aj ne odgovara (tj. ako ime nije ni Suljo ni Mujo ni Haso),

onda

e biti izvršena naredba

default;

. Pod

default

se uvijek stavlja ona naredba

koja treba biti izvršena ako ni jedna od pretpostavki nije istina, u našem slu

aju

e pokazan tekst: Nisam Suljo, Mujo a ni Haso, ja sam Huso.

Programiranje za Internet

180

13.12. Proširena pore

enja

Do sada smo vidjeli osnovne mogu

nosti usporedbe: provjeru na

manje

ili

jednako

($i<10, $i>10, $i=0) . Osim ovih osnovnih usporedbi, naravno da je

mogu

e napraviti i "

proširene

" usporedbe kao npr.:

$i == 10

// Da li je $i jednako 10 ?

$i <= 10

// Da li je $i manje ili jednako 10 ?

$i => 10

// Da li je $i vece ili jednako 10 ?

$i != 10

// Da li $i nije jednako 10 ?

Ove upite možemo i koristiti u kombinaciji, kao npr.:

($i==10) && ($j>0)

// Da li je $i jednako 10 i $j ve

e od 0 (nule)?

($i==10) || ($j==0)

// Da li je $i jednako 10 ili $j jednako 0?

Prikazani slu

ajevi su identi

ni (ta

nije sintaksa) je ista kao i kod C jezika. Zna

- znaci 'bool'

(

AND

)

- znaci 'bool'

ili

(

)

13.13. Predefinisane promjenljive

U PHP datoteci, koja je pozvana iz nekog formulara, imena "

elemenata iz

formulara

" stoje na raspolaganju kao promjenljive. Ovu osobinu možemo

iskoristiti tako što

emo sami formular i naredbe koje "

komanduju

" formularom (tj.

šta i kad

e biti izvedeno) memorisati u jednu datoteku. Pretpostavimo, naša

datoteka form.html sadržava sljede

i formular:

<INPUT

NAME="ImePoIzboru">

<INPUT

TYPE="submit">

</FORM>

Programiranje za Internet

182

gostiju

", ili pove

anje za jedan na broja

u kod nove "

posjete

".)

Iz sigurnosnih razloga je web-server na serveru dodijeljen korisniku (user - u) koji
ima vrlo mala prava. Izme

u ostalog, taj korisnik ne smije onako kako bi on htio

pisati i brisati po vašim datotekama (tj. vašim htm ili html stranicama). Još manje
ima pravo da sam polaže nove datoteke u vaš folder na web-serveru.

Kako položiti datoteku za "upisivanje" na web-serveru?

Da bismo položili datoteku

NekaDatoteka

u koju web-server smije upisivati

podatke, potrebni su sljede

i koraci:

U nekom FTP programu kliknemo desnom tipkom na mišu i izaberemo

chmod

Ukoliko nemamo izbor

chmod

sa desnim klikom, naredbu možemo poslati i

direktno ftp-om:

site chmod xyz ImeDatoteke

Ovdje su

X, Y

tri cifre koje služe za odre

ivanje prava za ovu datoteku, i to:

- stoji na prvom mjestu za prava koje ima vlasnik (onaj koji je položio

datoteku)

- stoji na drugom mjestu za prava koja ima grupa kojoj vlasnik pripada;

- stoji na tre

em mjestu za prava koja ima ostatak svijeta -tj. svi drugi.

Pri tome važi:

•

0 zna

i : nikakvo pravo (potpuna zabrana).

•

1 zna

i : pravo izvo

enja (važno za programe i direktorije).

•

2 zna

i : pravo pisanja (što istovremeno zna

i i "pravo brisanja").

•

4 zna

i : pravo

itanja.

Ova prava se mogu sabirati, pojašnjenje

e se dati u primjeru za datoteku

primjer.htm. Htjeli bismo da postavimo sljede

a prava: Da vlasnik ima pravo

itanja (4) + pravo pisanja (2) + pravo izvo

enja (1) što zna

i sva prava, slijedi:

4+2+1 = 7

;

Da grupa kojoj vlasnik pripada ima pravo

itanja (4) i pravo izvo

enja (1):

4+1=5

;

I da svi ostali imaju samo pravo za izvo

enje (1); Zna

i prava za vlasnika 7, za

grupu 5 i ostale 1, pa je naredba:

site chmod 751 primjer.htm

Ako bismo stavili :

site chmod 777 primjer.htm

Programiranje za Internet

183

zna

ilo bi da

SVI IMAJU SVA PRAVA ZA OVU DATOTEKU, A TO BI

BILO VRLO OPASNO!!!

Web-server radi u normanom slu

aju pod pravima za "ostale", što zna

i da nema ni

prava vlasnika, a ni prava grupe kojoj pripada vlasnik. (

Ovo se naj

eš

e zaboravi

prilikom prebacivanja CGI-skripte na server, pa se onda

udimo zašto skripta ne

radi :)

" Po

imo od toga da sada imamo datoteku pod imenom

NekaDatoteka

koje želimo nešto

itati. Prije svega moramo otvoriti ovu datoteku. Pri tome je

neophodno nazna

iti koje akcije želimo preduzeti npr.

itati iz datoteke, upisivati u

nju, brisati itd....

Naredba glasi:

$dato = fopen("NekaDatoteka","r");

Ovo zna

i da otvaramo datoteku

NekaDatoteka

i da želimo iz nje

itati (" r " zna

itati - eng. read ). "

Tehni

ke detalje

emo prepustiti promjenljivoj

$dato

, tj. kada

budemo željeli

itati iz datoteke

NekaDatoteka

jednostavno

emo upotrijebiti

promjenljivu

$dato

U drugom koraku

itat

emo iz datoteke

NekaDatoteka

i to red po red , sve dok ne

emo do kraja datoteke:

while

(!feof($NekaDatoteka))

{

$red = fgets($NekaDatoteka,1000);

echo

$kraj;

}

•

feof($NekaDatoteka)

je istina kada do

emo na kraj datoteke. (

EOF

skra

enica od

End Of File

•

$red = fgets($dato,1000);

Uz pomo

sistemske funkcije

fgets

postižemo

sljede

e: pro

itaj maksimalno 1000 znakova u redu iz datoteke

NekaDatoteka

, prekini sa

itanjem kada nai

eš na znak za novi red ili na

znak za kraj datoteke, i to "

pro

itano

" upiši u promjenljivu pod imenom

$red

(

Objašnjenje za broj 1000 ... Broj 1000 je izabran po slobodnoj volji jer je

vrlo vjerovatno niko ne

e napisati 1000 znakova u jedan jedini red. Da

smo htjeli mogli smo napisati i 1.000.000, onda bismo imali još ve

vjerovatno

u da niko nije napisao milion znakova u jedan red

:).

•

echo $red;

jednostavno pokazuje sadržaj promjenljive

$red

na ekranu.

Na kraju moramo još zatvoriti datoteku:

fclose($NekaDatoteka);

Prilikom otvaranja neke datoteke imamo sljede

e mogu

nosti:

Programiranje za Internet

185

Slijedi primjer:

Header( "Content-type: image/gif");

$slicica = imagecreate(200,100);

$plava = ImageColorAllocate($slicica,

0x2c,0x6D,0xAF);
ImageFilledRectangle($im,0,0,200,100,$plava);
ImageGif($slicica);
ImageDestroy($slicica);
?>

Ako pozovemo ovu datoteku, dobit

emo jedan plavi pravougaonik. Naravno,

koriste

<IMG

SRC="slika.php3">

možemo povezati ovaj pravougaonik u nekoj HTML stranici. Šta se postiže gore
navedenim naredbama?

Naredba:

Header( "Content-type: image/gif");

najavljuje browser-u da je ono što slijedi jedna GIF-sli

ica. (Ako želimo sprije

iti

javljanje greške možemo privremeno ovaj red "izbaciti iz upotrebe" ostavljaju

i ga

kao komentar stavljanjem znaka # na po

etak reda.)

Naredba:

$slicica = imagecreate(200,100);

pravi sli

icu koja je 200 px (piksela) široka i 100 px visoka.

Svaka boja mora biti prije same upotrebe "stvorena" tj. odre

ena. Ovo postižemo

naredbom:

$plava = ImageColorAllocate($im, 0x2c,0x6D,0xAF);

ovdje je

$slicica

slika za koju odre

ujemo boju, ostala tri parametra predstavljaju

heksadecimalne RGB-vrijednosti. (Obrati pažnju na sintaksu:

0x2c

odgovara

decimalnom udjelu crvene boje od

Sa:

ImageFilledRectangle($slicica,0,0,200,100,$plava);

nacrtat

emo jedan popunjeni pravougaonik , koji po

inje u lijevom gornjem uglu

(0,0), i završava 200 px desno i 100 px dole. Naravno, ispunjen je sa prije
odre

enom (u promjenljivoj

$plava

) plavom bojom.

Programiranje za Internet

186

Naredba:

ImageGif($slicica);

zna

i: najprije pravi jednu GIF-sli

icu na osnovu "

unutrašnjeg predstavljanja

" i

onda je pošalji nazad posmatra

u, dok

ImageDestroy($slicica);

osloba

a interno zauzeto mjesto za memorisanje.

Postoji

itav niz mogu

nosti za pravljenje slika. Npr. možemo upisati neki tekst u

sli

icu koju stvaramo:

$bijela = ImageColorAllocate($slicica,

255,255,255);
imagestring($slicica,5,20,20,"Zdravo",$bijela);

Uz pomo

prve naredbe definišemo bijelu boju. (Ovdje se još da primijetiti da smo

bijelu boju odredili sa decimalnim vrijednostima - 3 x 255). Drugom naredbom
postižemo upisivanje teksta "

Zdravo

" veli

ine 5 koji po

inje na mjestu 20,20 (20

px desno i 20 dole). Obje naredbe treba da stoje direktno ispred naredbe

ImageGif($slicica) .

Osim pravougaonika mogu

e je "

crtati

" i ostale uobi

ajene elemente kao što su

krugovi, elipse, poligoni, lukovi itd.

13.17. Povezivanje sa bazama podataka

Jedno od glavnih podru

ja u kojima se primjenjuje PHP je "

on-line

" korištenje

baza podataka. Baza podataka sadržava odgovaraju

e "

elemente

" (

"redove" sa

istovjetnim vrstama podataka npr. "prezime, ime, ulica, broj ku

e, poštanski broj,

mjesto"

). U svakom redu stoje razli

iti upisi ("

promjenljive

") koje odgovaraju tipu

podataka.... tako bi ime bilo jedna "

rije

", dok bi broj ku

e ili poštanski broj imali

tip "

cijeli broj

Redovi

- "

upisi

" mogu biti pozvani,

itani, mijenjani i sl., mogu

je dodavanje novih upisa, brisanje starih itd. Svi ovi postupci nazivaju se jednim
imenom "

upiti

Naj

eš

e korištena vrsta baza podataka su

SQL

(

skr. od Structured Query

Language

) - baze koje mogu da se obra

uju pomo

u jezika SQL. PHP se može

koristiti za vezanje sa više vrsta baza podataka, a naj

eš

a je

MySQL

. Prednosti

MySQL baza podataka su relativno velika brzina i to što je njihovo korištenje
besplatno.

Da bismo izveli neki SQL-upit sa PHP-om, moramo prije svega otvoriti bazu
podataka - odnosno povezati se s njom. (

Što bi bilo identi

no sa

itanjem iz

datoteke i upisivanje u datoteke

). Nakon toga bi se poslala SQL- naredba bazi

podataka, bio bi preuzet odgovor od baze i na kraju bi se baza još morala zatvoriti.

Programiranje za Internet

188

Edo Mehi

prakti

ni dio ispita

... ... ... ...

Mogu

e je iz tabele uzeti samo one podatke koji zadovoljavaju neki uslov. Npr. sa:

SELECT * FROM studenti WHERE Ocjena=9;

dobijamo samo studente koje u koloni Ocjena u bazi imaju upisanu vrijednost 9.

Odgovor bi bio

•

Amir Ali

samo

usmeni

Sa:

SELECT * FROM studenti ORDER BY Prezime;

Odgovor bi bio:

•

Amir Ali

samo

usmeni

•

Edo Mehi

prakti

ni dio ispita

dobijamo studente, poredane po prezimenu..

Nove "redove" u tabeli možemo dodati sa:

INSERT studenti (ID,Ime,Prezime,Ocjena,Komentar)

VALUES

(3,'Ivo','Zec','9','

');

Ta naredba bi dodala novi red u tabelu studenti i u taj red upisala podatke za
studenta koji se zove "Ivo Zec" i ima ocjenu 9.

Postoje

e "

elemente

" možemo promijeniti sa:

UPDATE studenti SET Ocjena='6',

Komentar='prolazna ocjena' WHERE ID=2;

13.18. SQL-naredbe sa PHP-om

Gore navedene SQL naredbe se mogu iskoristiti zajedno sa PHP-om. Za primjer bi
trebalo pokazati sve elemente iz tabele studenti u datoteci pod imenom www2.
Prije svega mora se uspostaviti veza izme

u PHP-a i servera sa bazom podataka:

$veza = @mysql_connect("localhost","korisnik","");

localhost

zna

i da se povezujemo sa istim ra

unarom na kojem se nalazi i web-

server. U našem slu

aju to funkcioniše jer baza podataka i web-server leže na istom

unaru. Mogu

e je povezivanje i sa bazom podataka koja leži na bilo kojem

unaru na Internetu - naravno uz uslov da raspolažemo odgovaraju

im pravom

zahvata na taj ra

unar.

korisnik

je važe

e korisni

ko ime za ovu bazu podataka (odre

eno od strane

administratora baze).

Programiranje za Internet

189

(navodnici na kraju naredbe u zagradi) zna

e da ovaj korisnik ne treba lozinku

(password).

Da li je veza uspostavljena možemo provjeriti sa:

if (!$veza)

{

echo "Nije mogu

e uspostaviti vezu sa bazom! ";

exit;
}

Ako ve

imamo uspostavljenu vezu, možemo po

eti sa upitima. Radi bolje

preglednosti, upisat

emo upit u jednu promjenljivu (varijablu):

$pitanje = "SELECT Ime,Prezime FROM studenti";

Ovaj upit se onda šalje na server sa bazom podataka. Rezultat koji on vrati
memorisat

e se u promjenljivoj

$rezultat:

$rezultat

mysql_db_query("www2",$pitanje,$veza);

Prva promjenljiva sadržava ime baze podataka koju pitamo, druga sadržava SQL
naredbu i tre

a promjenljiva sadržava vezu koju smo uspostavili sa mysql_connect.

Sad slijedi nešto teži dio posla. Treba da pro

itamo "redove" koji su upisani u

promjenljivoj

$rezultat

. Da smo koristili neku drugu SQL naredbu ( INSERT,

UPDATE ili DELETE ) bilo bi mnogo jednostavnije. Mogli bismo jednostavno
provjeriti je li šta ura

eno ili nije, je li naredba izvršena ili nije... Zna

i odgovor bi

bio

ISTINA

(

TRUE

) ili

LAŽ

(

FALSE

). Ali kako naša SQL naredba ima u sebi

SELECT

, mi bismo htjeli i da vidimo ono što smo izabrali. Iz elemenata

redova

") sadržanih u tabeli studenti mi smo tražili da vidimo kolone Ime i

Prezime. Sada

emo ih

itati i to red po red:

list($Ime,$Prezime) = mysql_fetch_row($rezultat);

Promjenljiva

$rezultat

poslije upita sadržava dvije kolone (u jednoj je ime, a u

drugoj prezime).

mysql_fetch_row($rezultat)

nam vra

a ta

no jedan red. Na po

etku stoji jedna vrsta pokaziva

a (

pointer

) na

prvi red. Izvo

enjem naredbe

mysql_fetch_row($rezultat)

, ovaj pokaziva

e da

pokazuje na idu

i red itd. Ako bismo htjeli da pokažemo sve redove koji su

selektirani u tabeli studenti i memorisani u promjenljivu

$rezultat

, onda bismo to

izveli uz pomo

jedne while-petlje:

while (list($Ime,$Prezime =

mysql_fetch_row($rezultat))

{

echo "Student se zove $Prezime $Ime <BR> ";

}

Programiranje za Internet

191

function KamatniRacun ($procent,$VrijemeRacunanja)

{

$kapital = 10000.0;

$x = 1.0 + ($procent/100.0);

$y = $kapital * exp( $VrijemeRacunanja*log($x) );

return

$y;

}

$proc = 6;

$vrijeme = 10;

$x = $KamatniRacun($proc,$vrijeme);

echo "Kapital iznosi $x KM-a";

Problemati

no u ovom navedenom primjeru je da se promjenljiva

$kapital

polaže, bolje re

eno unaprijed odre

uje. U normalnom slu

aju se i ova vrijednost

unosi u vrijeme izvršenja programa, tj. kao ARGUMENT predaje funkciji na
obradu:

function KamatniRacun

($procent,$VrijemeRacunanja,$kapital)

{

...

Mi posmatramo slu

aj u kojem je i ova varijabla ve

odre

ena, tj. kada je njena

vrijednost upisana od strane programa u funkciju i kada se NE PREDAJE kao
argument. U tom slu

aju moramo eksplicitno navesti da ova promjenljiva dolazi

spolja

". To postižemo korištenjem naredbe

global

$kapital = 10000.0;

function

KamatniRacun($procent,$VrijemeRacunanja)

{
global

$kapital;

$x = 1.0 + ($procent/100.0);

$y = $kapital * exp( $VrijemeRacunanja*log($x) );

return

$y;

}

$proc = 6;

$vrijeme = 10;

$x = $KamatniRacun($proc,$VrijemeRacunanja);

echo "Kapital iznosi $x KM-a";

Programiranje za Internet

192

13.21. String-funkcije

Još jedno važno podru

je za primjenu PHP-a je obrada "

nizova znakova

" (string).

Postoji mnogo naredbi za obradu "stringova" - ovdje

e biti predstavljene samo

najvažnije.

$x = " Ja sam jedna dosadna recenica! ";

$y = trim($x);

Naredbe

ltrim()

chop()

otklanjaju "

whitespace

" tj "

prazna polja

" prije, odnosno

poslije re

enice. Funkcije

strtoupper()

strtolower()

mijenjaju sve znakove jedne

enice u velika, odnosno mala slova. Naredba

ucfirst()

mijenja prvi znak u redu

rije

i u veliko slovo (naravno, ako je to mogu

e). Naredba

ucwords()

mijenja u

svakoj rije

i jedne re

enice prvi znak u veliko slovo (opet ako je mogu

e).

Sljede

a naredba je vrlo važna kod pripreme teksta za WWW:

$x = nl2br($y);

Na ovaj na

in mijenjamo sve znakove za novi red ("

") re

enice

u naredbu

<BR>

13.22. Cookies (kola

Cookies sadržavaju sljede

e informacije:

Name:

Ime

Value:

Vrijednost

Expires:

Datum isteka važnosti

Domain:

Dio za adresiranje na serveru, koji cookie može ponovo pro

itati

Path:

Samo stranice, koje leže u tom direktoriju ili nekom od poddirektorija, smiju

biti zatražene od cookie-a.

Secure:

Ako je uklju

ena (secure - sigurnost), cookie smije biti prenošen SAMO

preko "

zaklju

anih

" informacijskih kanala.

Primjer: Želimo utvrditi da li je posjetilac ve

bio na nekoj stranici. U tu svrhu

stavit

emo prilikom prve posjete cookie: Ovo moramo uraditi još u samom

zaglavlju HTML stranice (HTML-Head), odnosno na po

etku teksta. (Obavezno

povesti ra

una da baš nikakav znak - ni prazan znak ne stoji prije ovog PHP-

dijela).

$t = time()+3600*24*10;

SetCookie("mojcookie", "Vec posjeceno", $t,

"/test",

".ba");

Programiranje za Internet

194

preduzeti sljede

e korake:

Najprije bismo spojili izabrana imena promjenljivih :

for

($i=0;$i<100;$i++)

{

$v = "polje".$i;

echo "$v: ${$v} <BR> ";

}

Zna

i sa

dobijamo imena promjenljivih, sa

${$v}

dobijamo zahvat na sadržaj

promjenljive sa imenom

$v.

13.24. Polja (arrays) iz formulara

Na kraju još jedan trik:

Ako ho

emo u PHP-u da saznamo koji je "

kvadrati

" (check-box) izabran u

jednom formularu, onda ne možemo koristiti dosadašnju uobi

ajenu strategiju:

<INPUT TYPE=CHECKBOX NAME="x" VALUE=1 > opcija 1

<INPUT TYPE=CHECKBOX NAME="x" VALUE=2 > opcija 2

...

Ako pošaljemo jedan ovakav formular, onda

e PHP-promjenljiva

imati

vrijednost prvog kliknutog "

kvadrati

Trik je u tome, da se u HTML-u "

kvadrati

" nazove druga

ije, npr. ovako:

<INPUT TYPE=CHECKBOX NAME="x[]" VALUE=1 > opcija 1

<INPUT TYPE=CHECKBOX NAME="x[]" VALUE=2 > opcija 2

...

Na ovaj na

in dobijamo u PHP-u jedno polje sa imenom $x. Sadržaj možemo

pro

itati na sljede

i na

in:

for

($i=0;$i<sizeof($x);$i++)

{

echo "$x[$i] ";

Programiranje za Internet

195

14. ASP

14.1. Kompromis izme

u CGI i ISAPI

Želimo li interaktivne web aplikacije, možemo koristiti CGI ili ISAPI. Svaki od
njih ima problema. CGI koristi previše sistemskih resursa, pa nije prikladan za ve

broj korisnika. Ako koristimo ISAPI, riješili smo problem resursa, ali ISAPI
aplikacije mogu pisati samo iskusni C/C++ programeri.

Da bi zadovoljio apetite velike ve

ine ostalih programera (npr. VisualBasic),

Microsoft je kreirao ASP. ASP je tehnologija koja omogu

uje brzo (ne trebate biti

C/C++ programer) i efikasno (koristi DLL, a ne proces za svakog korisnika)
pisanje web aplikacija. Jednostavno re

eno, ASP koristi skript jezik na strani

servera da bi komunicirao sa drugom aplikacijom (koja, npr. obra

uje podatke).

Novost kod ASP-a je da se taj skript izvodi na serveru neposredno prije nego li se
stranica pošalje korisniku. Zapravo, rezultat izvo

enja skripta je nova stranica. To

je nešto sli

no kao predprocesorske naredbe u C/C++.

Vidimo dakle, da kod ASP-a kreiranje HTML stranice i programiranje (skript kod
na serveru) postaje jedan te isti proces. Nemamo više posebno HTML stranice, a
posebno programe koji povezuju te stranice sa bazama podataka ili drugim
aplikacijama. Programiranje je u skript jeziku, npr. VisualBasic skript, pa je
jednostavno. Pošto skript zna pozivati COM komponente, mogu

e je, i poželjno,

kompleksne programske cjeline izdvojiti u COM komponente koje mogu biti
programirane u prakti

no bilo kojem programskom jeziku. Na taj na

in dobivamo

savršenu sintezu jednostavnosti (skript) i kompleksnosti (COM komponente).

Naglasimo još jednom cijeli proces:

Kreiramo HTML stranicu zajedno sa skript kodom

Skript kod se izvodi i kao rezultat nastaje nova stranica

Nova stranica se šalje korisniku; korisnik nema pojma da li je ta stranica
stati

ka ili je nastala kao rezultat nekog programa koji se izvodi na serveru.

14.2. Kako izgleda ASP stranica?

ASP stranice su vrlo sli

ne HTML stranicama, jer sadrže HTML kod zajedno sa

skript kodom. Osnovna razlika je dakle dodatni skript kod. ASP stranice imaju
ekstenziju .ASP, dok HTML stranice imaju ekstenziju .HTM ili .HTML. Evo
jednostavnog primjera:

<HTML>

<HEAD><TITLE>VBScript stranica</TITLE></Head>

MsgBox "ASP je zanimljiv!"

Programiranje za Internet

197

HTML stranica se može smatrati kao specijalni slu

aj ASP stranice kod koje

jednostavno nema nikakvog koda. Server

e ovakvu stranicu pro

itati, zaklju

iti da

nema potrebe da išta promijeni (jer nema skript koda) i generirati novu stranicu
koja je 100% kopija originalne.

Evo sada malo kompliciraniji primjer, gdje ispisujemo poruke u svih sedam
fontova:

<HTML>

<% For Count = 1 TO 7 %>

<FONT SIZE =

<%=Count %>

ASP je zanimljiv <BR>

</FONT>

<% Next %>

</HTML>

Ovaj primjer pokazuje kako se ASP kod (podebljano) i HTML format (normalan
tekst) mogu miješati na bilo kojem mjestu. Druga linija zapo

inje programski

odsje

ak:

<% For Count = 1 To 7 %>

gdje se vrti petlja od 1 do 7 (to su dozvoljene veli

ine fontova na Internetu). Tre

linija

pokazuje da se na svakom mjestu u HTML formatu može ubaciti programski kod;
naravno, mora biti unutar delimitera <% i %>. =Count predstavlja vrijednost
varijable Count i pridružuje se atributu SIZE. Drugim rije

ima, specificiramo font.

Nakon toga, linija 4 ispisuje tekst, a linija 5 završava font blok. Linija 6 pove

ava

broja

petlje, kao i u normalnom Visual Basicu.

14.3. Kako testirati ASP stranicu?

Ako želite testirati gornje primjere, morate instalirati Internet (Web) server. To

koraci za instaliranje i testiranje su sljede

Instalirajte web server. Web server može biti ili Internet Information Server -
IIS ili Personal Web Server - PWS.

Spremite gornji primjer u datoteku, npr. asptesl.asp.

Ako koristite IIS startajte Internet Service Manager program. Odaberite
Default Web Site i dugme Properties. Nakon toga odaberite Home Directory
tab i postavite Execute permission. Pritisnite OK i iza

ite iz Internet Service

Manger programa. Ako koristite PWS, startajte Personal Web Manager i

Programiranje za Internet

198

pritisnite ikonu Advanced. Odaberite Home i zatim Edit Properties dugme.
Selektirajte Execute item i pritisnite OK. Iza

ite iz Personal Web Manager.

Startajte Internet Explorer (ili Netscape Navigator) i upišite:

http:/ImeServera/asptesl.asp

"ImeServera" je ime vašeg ra

unara. Možete koristiti ime "Localhost".

U Internet Exploreru odaberite View i zatim Source. Vaša stranica bi trebala
izgledati ovako:

<HTML>

<FONT SIZE = 1> ASP je zanimljiv!<BR> </FONT>

<FONT SIZE = 2> ASP je zanimljiv!<BR> </FONT>

<FONT SIZE = 3> ASP je zanimljiv!<BR> </FONT>

<FONT SIZE = 4> ASP je zanimljiv!<BR> </FONT>

<FONT SIZE = 5> ASP je zanimljiv!<BR> </FONT>

<FONT SIZE = 6> ASP je zanimljiv!<BR> </FONT>

<FONT SIZE = 7> ASP je zanimljiv!<BR> </FONT>

</HTML>

Ne zaboravite da je vaša originalna stranica najprije procesirana na strani servera i
kao rezultat je generirana gornja stranica.

14.4. ASP objekti

Gornji primjer pokazuje kako po

eti programirati u ASP-u. Glavna snaga ASP-a

proizlazi iz pet objekata koji su ugra

eni u model:

•

Application object

•

Request object

•

Response object

•

Server object

•

Session object

14.4.1. Application objekt

Karakteristika web aplikacija je da one ne

uvaju stanje. Naime, kad se korisnik

spoji na server i dobije željenu stranicu, veza se prekida pa svako pam

enje stanja

na serveru nema smisla. To je i normalno, jer ako bi server pamtio stanja od svih
korisnika, kojih može biti na hiljade, vrlo brzo bi istrošio memoriju i ostale resurse.

Programiranje za Internet

200

<% Request("ime") %>

dohva

a podatak koji smo upisali kao ime. Ako smo kao ime napisali Hana, onda

rezultat gornje operacije daje ime Hana. Sli

no je sa drugim podacima.

14.4.3. Response objekt

Ovaj objekt služi da se pošalje poruka korisniku, naj

eš

e preko kola

(

Cookies

). Kako Internet aplikacije ne pamte stanja, a ponekad je potrebno da se

nešto spremi na strani korisnika, oni dolaze kao spas. Kola

je podatak kojeg

server sprema na strani korisnika (u obliku datoteke koja se kod Internet Explorera
sprema u direktorij c:WindowsCookies), da bi ga kasnije mogao koristiti. Tako,
npr. kola

može specificirati jezik kojeg korisnik želi. Kako razli

iti ljudi mogu

koristiti razli

ite jezike, ova varijabla ne može biti zajedni

ka za aplikaciju ve

specifi

na za korisnika. Server može specificirati jezik preko kola

a na sljede

in:

<% Response.Cookies("Jezik")="Hindu" %>

Kod izvo

enja ovog koda server

e generirati poseban HTTP header i poslati ga

browseru. Kasnije je mogu

e pro

itati vrijednost kukija:

Vi ste izabrali <% Request.Cookies("Jezik") %>jezik!

14.4.4. Server objekt

Najvažnija funkcija ovog objekta je da omogu

i kreiranje postoje

ih COM

komponenti. Na taj na

in programiranje dobiva novu dimenziju, jer možemo

povezivati prakti

ki sve što želimo (ne zaboravite da postoji na hiljade gotovih

COM komponenti). Tako, npr. ako se želimo povezati na bazu podataka preko
ADO (ADO je COM komponenta koja omogu

uje povezivanje na postoje

u bazu

podataka i

esto se koristi u VisualBasic aplikacijama) u

init

emo to na slijede

in:

Dim dbConn

Set db = Server.CreateObject("ADODB.Connection")

...

14.4.5. Session objekt

Ovaj objekat služi za

uvanje stanja (varijabli) koje neki korisnik želi samo za sebe

tokom svoje sesije (za razliku od varijabli u Application objektu koje su dostupne
svim korisnicima). Tako npr. možemo spremiti ime i dob korisnika u varijable Ime

Programiranje za Internet

201

i Dob i slobodno ih koristiti iz drugih stranica. Ove varijable postaju neaktivne ako
zatvorimo Internet Explorer, ili ako smo neaktivni neko vrijeme (obi

no 20

minuta). Primjer izgleda ovako:

Session("Korisnik") = "Jasmina"

Session("Dob") = 18

...

Ove varijable možemo kasnije koristiti iz drugih ASP stranica:

Zdravo <%Session("Korisnik")%>.

Ti imas <%Session("Dob")%> godina.

Programiranje za Internet

203

su SQL baze podataka ili sa multidimenzionalnim podacima, kao što su OLAP
kocke.

JDBC je stvoren kao objektni omota

pomo

u kojeg su Java programeri mogli

pristupati SQL bazama podataka. ADO dopušta programerima da koriste objekte
podataka. Oni mogu biti raznih vrsta, kao što su SQL baze podataka, preko
multidimenzionalne OLAP kocke, Lotus Notes, email sistemi, Active Directory i
drugi - ukratko,s ve što

uva bilo kakve podatke koji se mogu organizovati na neki

in. Programeri koji koriste Active Server Pages (ASP) tehnologiju mogu

koristiti preko HTTP i DCOM protokola.

RDS podržava diskonektovane klijente, klijent keširanje i ima mogu

nost da sva

ažuriranja na jednom klijentu prenese na sve druge distribuirane klijente. Tu je
tako

er i ActiveX kontrola pod imenom Advanced Data Control, koja se može

postaviti u program ili web stranicu i koja može biti izvor podataka za ostale
kontrole na stranici, kao što su liste ili tabele

15.1.1. ODBC

ODBC je najstariji i prvi prihva

eni de jure database API standard. Dizajniran za

maksimalnu interperabilnost, daje mogu

nost pristupa razli

itim sistemima za

upravljanje bazama podataka (DBMS) na uniforman na

in. Aplikacije za

upravljanje bazama podataka pozivaju funkcije u ODBC interfejsu, a ODBC putem
svojih drajvera za baze podataka aplikaciji vra

a podatke iz baze. Ovi drajveri su

analogni drajverima za štampa

Kada npr. program za obradu teksta nešto štampa, sve komande za štampanje se
upu

uju operativnom sistemu, koji upotrebljava odgovaraju

i drajver za željeni

štampa

. Isto tako, kada aplikacija za obradu podataka želi da pristupi bazi, ona

ODBC-u upu

uje zahtjev za podacima, a ODBC koristi odgovaraju

i drajver za

pristup toj bazi podataka. Prednost ovakve arhitekture leži u tome da više nije
potrebno prepravljati aplikaciju da bismo pristupili bazi podataka, ve

je samo

potrebno instalirati novi drajver u ODBC sistem.

15.1.2. OLE DB

Ništa nije vje

no, pa tako ni ODBC. Kada se pojavio, baze podataka su bile

relativno jednostavne - homogeni tabelarno organizovani podaci kojima se lako
moglo manipulisati pomo

u SQL jezika. Ipak, u posljednjih nekoliko godina vidjeli

smo ogroman porast u upotrebi baza podataka s jedne strane, a s druge strane ti su
podaci postali kompleksniji i heterogeniji – pohranjeni u više organizaciono
razli

itih izvora kao što su tekst datoteke, email sistemi, XML i mnogi drugi. Javio

se problem pristupa takvih podacima, a kao odgovor na njega pojavio se OLE DB.

Najjednostavnije re

eno, OLE DB je nova verzija ODBC-a. Najjednostavnije, ali

ne u potpunosti ta

no! Dok OLE DB koristi ODBC za pristup tradicionalnim

Programiranje za Internet

204

relacionim bazama podataka, ne pokušava ga zamijeniti - u Microsoftu i dalje tvrde
da je ODBC najbolji na

in za pristup SQL bazama podataka. OLE DB nadogra

uje

ODBC tako što, na jednako uniforman na

in na koji to radi ODBC sa relacionim

bazama, omogu

ava pristup heterogenim izvorima podataka i vrši njihovu prividnu

homogenizaciju, pojednostavljuju

i tako rad sa podacima.

Microsoft strateški vodi OLE DB kao novu tehnologiju za pristup svim vrstama
podataka i kao takav

e u budu

nosti u potpunosti potisnuti ODBC.

15.1.3. JDBC

JDBC je ekvivalent ODBC tehnologije namijenjen upotrebi prilikom razvoja
aplikacija u Java programskom jeziku. Nastao kao direktan odgovor na ODBC,
JDBC koristi sli

nu arhitekturu zasnovanu na API pozivima i drajverima za razne

vrste sistema za upravljanje bazama podataka (DBMS). Interesantno je napomenuti
da je Sun, kreator Java platforme, u JDBC ubacio i takozvani JDBC-ODBC "most"
- specijalni drajver koji aplikaciji koja koristi JDBC omogu

ava pristup ODBC

izvorima podataka. Obzirom da je ve

ina baza podataka u trenutku pojave JDBC

imala gotove ODBC drajvere, ovo je zna

ilo da Java aplikacije mogu pristupati

svim takvim bazama, iako JDBC drajveri za njih nisu (bili) dostupni.

15.1.4. DAO

ODB, OLE DB i JDBC su tehnologije koje aplikacijama obezbje

uju pristup

bazama podataka. Ipak, njihova upotreba zahtijeva od programera da do u
najsitnije detalje ru

no isprogramira svaki element pristupa bazi podataka. Ovakav

pristup se u vremenu objektno-orijentisanih jezika pokazao nepotrebno
komplikovanim i sklonim greškama, te je o

ito rješenje prona

eno u pravljenju

objektnog modela za pristup bazama podataka.

Prvi takav model (barem za Windowse) je DAO (Data Access Objects), koji je
sastavni dio VisualBasica ve

godinama. Originalno zamišljen kao set objekata za

pristup MS Access bazama podataka preko MS Jet sistema za upravljanje
podacima (Jet je prvi Microsoft DBMS na kojem je zasnovan Access), DAO
tako

er omogu

ava pristup ODBC izvorima podataka. I upravo tu leži njegov

najve

i nedostatak – pošto se oslanja na Access/Jet DBMS, prilikom pristupa

ODBC bazama podataka sve naredbe za bazu podataka is vi podaci iz nje moraju
pro

i kroz ovaj dodatni sloj, što može znatno ugroziti performanse aplikacije.

DAO je lakši za korištenje od standardnih ODBC API funkcija, ali ne pruža isti
nivo kontrole kao ODBC APL.

15.1.5. ADO

Programiranje za Internet

206

informacije o vama, linkove na razne sajtove koji vam se svi

aju, foto album kojeg

osvježavate svakog ljeta, povremeno obnavljanu bazu vaših literarnih dostignu

a u

vidu kratkih pri

a i pjesama i sli

ne stvari, logi

no je da ne

ete zakupiti poseban

(dedicated) server s ogromnim mjese

nim protokom (banda-with) i Microsoft SQL

Serverom. Obzirom da je broj potencijalnih posjetilaca ograni

en, a sadržaj

neobi

an, besplatni web server sa podrškom za ASP/PHP skripte i bilo koje baze

podataka bi

e sasvim dovoljan. Ako pak namjeravate praviti e-zine, news sajt,

pretraživa

, web knjižaru ili bilo koji drugi sajt koji

e imati dosta sadržaja i više

od deset posjetilaca dnevno, situacija je potpuno druga

ija. Ako programirate za

Windows platformu, Microsoft SQL Server je imperativ, jer

e baze kojim

pristupate preko Access enginea po

eti štekati ve

nakon nekoliko simultanih

upita. Za Linux platformu MySQL je najbolje rješenje - besplatan je, a performanse
su mu u rangu ve

spomenutog MS SQL-a. Mada nije uobi

ajeno, ASP se može

sasvim fino upariti i sa MySQL bazama, bez mnogo nekompatibilnosti i
degradacije performansi.

15.2.1. Windows vs. LINUX vs. ASP vs. PHP

Iako se za razvoj web aplikacija mogu koristiti mnogi skriptni i programski jezici
(Perl, Python, C), ve

ina programera odlu

uje se na PHP ili ASP. Koji od ova dva

skriptna jezika je bolji još jedna je od vje

itih rasprava koje se uglavnom vode na

subjektivnoj razini.

ASP

e kvalitetno raditi jedino na Windows platformi, iako postoje proizvo

koji

e vam pokušati prodati Apache modul koji ASP-u donosi podršku i za Unix.

Kad kažemo ASP, mislimo na ASP stranice napisane u VBscriptu, što je
uobi

ajeni, ali ne i jedini na

in pisanja ASP aplikacija. Sa druge strane, PHP

postoji i za Windows, gdje je donekle lišen funkcionalnosti (neke funkcije, doduše
rijetke, raditi

e samo na Unix verziji Apache web servera).

Za u

enje PHP-a, Apache za Windowse ili pak PHP modul za PWS (Personal Web

Server) ili IIS (Internet Information Server) poslužiti

e sasvim dobro.

Oba skriptna jezika zapravo su jednostavni, no o vašem prethodnom znaju ovisi
koji

ete lakše usvojiti. Na primjer, ako ste imali iskustva sa Visual Basicom, ASP

doslovno ne

ete morati u

iti. Programeri sa stažom u C-u ili Perlu, PHP

e na

mnogo jednostavnijim.

Prednosti PHP-a prema ASP-u je u ve

a osnovna funkcionalnost (ve

i broj

ugra

enih funkcija), no ASP za naprednije korisnike donosi ve

u skalabilnost zbog

mogu

nosti jednostavnog razvoja vlastitih serverskih komponenti, koje se

jednostavno inicijaliziraju i koriste iz ASP koda. Primijetit

ete da uglavnom

morate imati vlastiti Windows server za instaliranje dodatnih komponenti, što je u
BiH prije izuzetak nego pravilo. Mnogo korisnih komponenti može se na

i na

Internetu i besplatno koristiti.

Programiranje za Internet

207

Na kraju se izbor skriptnog jezika svede na izbor serverske platforme. Naši Internet
provajderi obi

no nude obje varijante, pri

emu je Linux varijanta po pravilu

jeftinija.

15.3. Spajanje na bazu podataka

OK, znamo kakav sajt želimo, kakve baze podataka

emo koristiti, ali kako se baze

podataka, odnosno podaci iz njih, koriste na web stranicama? Prvo treba napraviti
konekciju izme

u baze i web stranice, odnosno spojiti se na bazu podataka. Za to

postoji više na

ina na Windows i Linux platformama, a me

usobno se razlikuju po

mnogo

emu, a najbitnije su složenost i brzina pristupa.

Spajanje na baze bilo kojeg formata bilo iz ASP ili PHP-a u Windows OS-u svodi
se na ODBC, ali nije nimalo svejedno koji na

in koristite.

Najjednostavniji i ujedno najgori na

in za spajanje na bazu podataka je preko

sistemskog DSN-a Njegova osnovna prednost jeste da na serveru, u ODBC Data
Source Administratoru, definišete sve potrebne podatke - format, put ili ime baze
podataka, koji se spremaju u Registry. Obzirom da ste sve ve

odredili, u skripti je

potrebno samo navesti naziv DSN-a i eventualno login i password, ako je baza
zašti

ena. Ova prednost ujedno je i veliki nedostatak, jer

ete rijetko biti u stanju

sami praviti i brisati sistemske DSN-ove na serveru. Osim ako nemate vlastiti
Windows server u uredu,

ime se može pohvaliti malo doma

ih firmi. Drugi

nedostatak ovakvog pristupanja bazama jeste sporost spajanja na bazu i
manipulacija podacima (uzimanje, upisivanje, brisanje, pretraživanje i sli

no), bez

obzira da li koristite brzi Microsoft SQL Server ili spori Access engine. Generalno,
spajanje na baze podataka pomo

u sistemskih DSN-ova preporu

uje se samo

etnicima i to samo za u

enje, nikako za projekte koje namjeravaju postavljati na

Internet.

Nešto bolja solucija bi bila tzv. DSN-less metoda, koja funkcioniše identi

prethodno opisanoj DSN metodi, samo što server prilikom zvršavanja skripti ne
uzima podatke iz Registry baze, nego ih vi upisujete direktno u kodu. Druga

ije

eno, umjesto da u finom interfejsu ODBC Data Source Administratora

definišete format i naziv baze, to radite pišu

i komande u skripti. Razlike u

konekcijskom stringu nisu velike, a možete ih vidjeti u tabeli. Prednost ovakvog
pristupa bazama ogleda se u nešto ve

oj brzini i

injenici da ne morate imati

direktan pristup serveru da biste dodavali ili brisali baze podataka.

Programiranje za Internet

209

Prethodno opisani na

in pristupa bazama se podrazumijevaju u ASP-u, ali nisu

preporu

ljiv za sajtove sa ve

im brojem korisnika, odnosno sajtove koji puno

manipulišu sa podacima u bazama. Mnogo bolji na

in je korištenje OLEDB

objekta,

ime preska

ete jednu stepenicu u složenom sistemu komunikacije sa

bazama podataka u Windowsima. Naime, sva komunikacija sa bazama podataka se
svodi na ODBC, koji predstavlja prvi sloj. Iznad njega nalazi se OLEDB objekat, a
na vrhu se nalazi ADO, koji se koristi u dva prethodno opisana na

ina. Direktno

spajanje na OLEDB, bez posredovanja ADO-a, donosi zna

ajne uštede u vremenu,

što predstavlja dovoljan razlog za korištenje ove, ipak nešto složenije metode.
Primjerice, za spajanje na bazu pomo

u DSN metode potrebne su 82 milisekunde,

a korištenjem OLEDB-a samo 18 milisekundi? Za ispis hiljade slogova iz baze
pomo

u prve metode trebaju 5,4 sekunde, dok

ete to isto sa OLEDB-om odraditi

za 2,9 sekunde.

15.4. Manipulacija podacima

Dinami

ke web stranice su napravljene upravo kako bi se prikazali odre

eni

podaci, unijeli novi, izmijenili ili obrisali postoje

i, jednom rije

ju - kako bi se

manipulisalo podacima. Bez obzira koji skripting jezik koristili, kojeg je formata
baza u kojoj se nalaze podaci ili koji na

in spajanja na bazu ste izabrali, za

manipulaciju podacima se koristi jezik pod imenom SQL (Structured Query
Language). Iz imena se ve

da naslutiti kako se koristi. Vi pišete upit korištenjem

odgovaraju

ih komandi, zatim ga pošaljete bazi podataka i dobijete "odgovor" u

obliku podataka iz baze. SQL je standard koji se koristi za pristup bilo kojoj bazi
podataka, iz bilo kojeg programskog jezika na bilo kojoj platformi.

Generalno, dinami

ke web stranice

ete najviše koristiti za prikaz podataka iz baze.

Bilo da se radi o tekstovima, albumima slika, informacijama o knjigama, linkovima
ili bilo kojem drugom sadržaju, princip je isti - potrebno je napraviti jednu (ili
nekoliko, u zavisnosti od potreba i specifi

nosti sajta) generi

kih web stranica koje

na osnovu parametara uzimaju potrebne podatke iz baze podataka i prikazuju ih
posjetiocu. HTML kostur je isti, dok se sadržaji dinami

ki ubacuju iz baze na

serveru i šalju korisniku ukomponovani u web stranicu.

Mijenjanje i brisanje podataka naj

eš

e ne rade korisnici, nego administratori web

sajta. Podatke možete dodavati, mijenjati i brisati i pomo

u nekog klijentskog

softvera, recimo Accessa, pa onda izmijenjenu bazu podataka uploadovati na
server, ali postoje mnogo elegantnija rješenja. Svaki dinami

ki web sajt ima svoj

administracijski dio, namijenjen samo odre

enom (malom) broju osoba, koji

omogu

ava mijenjanje sadržaja baza direktno preko web-a - korištenjem HTML

formi. Ako pak trebate omogu

iti korisnicima da mijenjaju odre

ene podatke u

bazama, koristit

ete isti na

in, samo što ovaj put trebate voditi ra

una da stranice

budu intuitivne i user-friendly. Kada smo kod dodavanja i editovanja podataka,
jedno upozorenje programerima u ASP-u: bez obzira koju bazu podataka i
konekciju koristite, sve manipulacije podacima radite isklju

ivo i samo pomo

Programiranje za Internet

210

SQL upita. Mada

e vam se možda u

initi jednostavnijim koristiti ADO komande

(ako koristite DSN ili DSN-less pristup bazama), vjerujte da

e vam se to odbiti od

glavu pri eventualnom prelasku na SQL server. A i performanse su mnogo bolje
kada koristite SQL upite.

15.5. Korisni linkovi

http://www.aspin.com/home/tutorial/database

Mnogo linkova na razne tekstove, tutorijale i primjere za rad sa bazama podataka iz
ASP-a.

http://www.planet-source-code.com

Ogroman web sajt na kome

ete prona

i mnogo primjera za rad sa bazama

podataka u ASP-u i PHP-u, kao i primjere za razne SQL funkcije.

http://www.asp101.com/resources/

Izme

u dosta drugih

lanaka, na ovome sajtu možete prona

i i nekoliko kvalitetnih

tutorijala za pristup bazama podataka iz ASP-a.

http://www.phpbuilder.com/columns/

Ovaj web sajt sadrži prili

no obimnu sekciju koja se bavi bazama podataka u vezi

sa PHP-om.

http://www.weberdev.com/

PHP-orijentiran web sajt koji ima prili

no veliku arhivu tekstova posve

enih

mySQL-u, Microsoft SQL serveru, ODBC-u, Informixu... i njihovom
kombinovanju sa PHP-om.

http://www.zend.com

Odli

an sajt posve

en razvoju PHP aplikacija

http://www.php-resources.com

Još jedan sajt posve

en PHP-u.

15.6. Razvoj PHP & MySQL aplikacije korištenjem Dreamweavera

Dreamweaver, pored podrške za PHP, ima i podršku za ostale web tehnologije
(Cold Fusion, ASP, ASP.NET...), od

ega je najizraženija podrška za ColdFusion,

što je i logi

no, jer je Cold Fusion web serverska tehnologija razvijena od strane

Macromedia-e.

Programiranje za Internet

212

UNIQUE KEY 'Id' '(Id')

) TYPE=MyISAM;

15.6.3. Definisanje sajta

Prije nego po

nemo razvijati našu aplikaciju, potrebno je definisati postavke sajta.

Definisanje je nešto druga

ije od klasi

nog, tj. definisanja sajt postavki pri izradi

stati

nih stranica, jer sada je potrebno odabrati koju tehnologiju

emo koristiti pri

izradi dinami

nih stranica - u našem slu

aju PHP/MySQL, sajt direktorij -

direktorij u koji se smještaju svi dokumenti vezani za sajt koji se razvija,
podešavanje lokalnog servera...

Za po

etak, kreirajte PHP dokument i definirajte njegov naslov (Title) upisuju

Infonews - Unos novosti koriste

i Document toolbar. Na glavnom izborniku

izaberite Site/Manage Sites i na vašem ekranu

e se pojaviti Manage Sites prozor.

Kliknite na dugme New i izaberite Site. Pojavit

e se novi prozor Site Definition, u

kojem definirate postavke sajta

Slika 89. Izbor serverske tehnologije za razvoj sajta

15.6.4. Konekcija na bazu

Da bi imali pristup podacima u bazi, ili imali mogu

nost upisa, brisanja i izmjene

podataka, potrebno je da uspostavimo konekciju (vezu) sa bazom. Pored navo

enja

imena baze, potrebno je navesti i korisni

ko ime, password, naziv konekcije...

Programiranje za Internet

213

15.6.5. Unos novosti

Kreirajte novi PHP dokument i implementirajte dizajn, i snimite ga sa nazivom
unos_novosti.php. Potrebno je kreirati Insert Record, a to

emo uraditi koriste

Record Insertion Form Wizard, koji

e kreirati formu za unos, i generisati potrebni

PHP kod i SQL upit. Prije nego krenemo sa radom na formi za unos, potrebno je
kreirati jedan Recordset (Query). On

e pokupiti sve kategorije iz tabele kategorije

koje

emo dinami

ki prikazati u listi kategorija. U okviru Application panela

kliknite na Bindings/Znak +/Recordset (Query). Na ekranu

e se pojaviti prozor za

kreiranje Recordset-a u Simple modu. U polje Name upišite naziv Recordset-a
(pokupi_kategorije), a pod Connection listom izaberite ranije definisanu infoNews
konekciju. Nakon toga kliknite na dugme OK,

ime završavate kreiranje upita na

bazu.

Idu

i korak je da napravimo formu za unos novosti u bazu. U okviru Document

toolbar-a izaberite Application, te kliknite na Record Insertion Form Wizard i na
ekranu

e se pojaviti prozor kao na slici 5. Pod listama Connection i Table izaberite

infoNews, odnosno sadržaj. Koriste

i dugme sa znakom minus u okviru Form

fields panela izbrišite id kolonu. Zatim selektirajte kolonu kategorija i pod listom
Display As izaberite menu. Nakon toga, pojavit

e se dugme Menu Properties.

Kliknite na njega i zatim izaberite From Databases. Pod listom Get Labels from
izaberite naziv, a nakon toga kliknite na OK, ostavljaju

i podrazumijevane

vrijednosti preostalih polja i listi.

Kolonama utekst i stekst pod Display As listama izaberite Text area, te Labele
promijenite u Uvodni tekst i Cijeli tekst. Još je preostalo da koloni datum pod
Display As izaberete Hidden Filed i u polje Default value upišete slijede

i PHP

kod

<?php.echo (date("d.m.y."))?>

koji

e pokazati vrijeme. Klikom na OK završavamo sa kreiranjem forme za unos

novosti, koja je ve

spremna za testiranje. Ali, prije nego to u

inite, kreirat

emo

JavaScript provjeru (validaciju) polja u formi. Pozovite Behaviors Panel
kombinacijom tipki Shift+F3 i zatim ozna

ite dugme Insert Record, te kliknite na

znak +/Validate Form. Nakon toga poljima naslov i utekst uklju

ite opciju

Required, ostavljaju

i izabranu opciju Anything.

Testirajte napravljeni dio aplikacije pritiskom na tipku F12, a rezultate unosa u
bazu provjerite pomo

u phpMyadmin-a, traže

i upis koji ste unijeli preko forme.

15.6.6. Zaštita administrativnog dijela baze

Zaštita se obavlja autorizacijom korisnika putem PHP sesija. Pristup
administrativnom dijelu aplikacije treba omogu

iti samo osobama koje

administrator odredi, pa trebamo uvesti neki vid autorizacije.

Programiranje za Internet

215

šablone za dizajn i pozicionirajte kursor miša u površinu šablona koja se može
ure

ivati. U okviru Application toolbar-a kliknite na Record Insertion Form

Wizard - na ekranu

e se pojaviti ve

dobro poznati prozor. Uspostavite konekciju

sa bazom izborom infoNews u okviru liste Connection. Kako upisujemo
informacije u tek kreiranu tabelu korisnici, pod listom Table izaberite opciju
korisnici. U polje After inserting, go to navedite putanju ili klikom na dugme
Browse izaberite datoteku korisnici.php, jer kako vam je ve

poznato, nakon

izvršenja ovog dijela aplikacije, želimo da se izvrši redirekcija na spomenutu
datoteku.

U okvirima Form Fields panela, koriste

i se dugmetom sa oznakom minus (-),

uklonite id kolonu, a zatim ozna

ite kolonu rang i pod Display as listom izaberite

Menu. Zatim kliknite na dugme Menu Properties. Pojavit

e se prozor koji služi za

definisanje ponu

enih opcija jedne liste, u našem slu

aju Rang liste, koja

e imati

dvije opcije: Administrator i Editor. Pošto je u pitanju lista

ije opcije

e se rijetko

ili skoro nikako mijenjati, ostavite ozna

eno Manually, a koriste

i se Label i Value

poljima, dodajte slijede

e opcije u listu: Administrator (sa vrijednoš

u admin) i

Editor (sa vrijednoš

u editor). Korisnik sa rangom "editor" ne

e imati pristup

modulima Postavke i Korisnici, odnosno ne

e imati ovlaštenje da pravi ili izmijeni

novu kategoriju ili korisnika, dok

e administrator imati sva ovlaštenja pri

korištenju aplikacije. Kliknite na OK, a zatim još jedanput, kako bi završili sa
kreiranjem forme za unos novih korisnika.

Idu

i korak je da kreiramo Recordset koji

e prikazati sve kreirane korisnike.

Kliknite na znak plus (+) na Application panelu, zatim izaberite Recordset (Query).
U polje Name upišite prikazi_korisnike. Uspostavite konekciju sa bazom, a zatim
pod listom Table izaberite korisnici. U okviru Columns panela ozna

ite Selected i

selektujte (koriste

i se tipkom Shift i mišem) kolone id, korisime, te rang. Za

prikaz korisnika nam nije potrebna njegova šifra, pa nemamo razloga da je
ozna

imo ovim Recordset-om. Kliknite na OK, kako bi završili sa kreiranjem

Recordset-a po imenu prikazi_korisnike.

Nakon uspješno kreiranog Recordset-a, idu

i korak je da prikažemo podatke

(ta

nije, korisnike) koje

e prethodno kreirati Recordset ozna

iti iz baze. Kliknite

na opciju Dynamic Table u okviru Application toolbar-a (druga sa lijeve strane), a
zatim u novootvorenom prozoru ozna

ite All Records, a u polja Border, Cell

padding i Cell spacing, upišite 0, 2, 2.

Kliknite na OK, i po potrebi dodatno formatirajte tabelu u kojoj se prikazuju
korisnici. Da bi u potpunosti kompletirali ovaj modul, potrebno je još omogu

iti

izmjenu i brisanje korisnika. Kako smo izmjenu i brisanje podataka objasnili ve

dva puta (brisanje i izmjena novosti, te kategorija), ostavljamo vam da sami
kreirate dijelove skripte koji

e vam omogu

iti da izmijenite ili izbrišete korisnika.

Logika i koraci su gotovo identi

ni.

Programiranje za Internet

216

Prije nego krenemo sa realizacijom login skripte, testirajte kreiranje novih
korisnika i upamtite podatke koje ste unijeli, jer

e vam isti biti potrebni prilikom

testiranja autorizacije.

15.6.8. Login forma

injemo sa konkretnom implementacijom autorizacije korisnika. Prvi korak u

tome je da kreiramo jednostavnu login formu. Ona

e se sastojati iz dva Text-Field-

a (za korisni

ko ime i šifru) i jednog dugmeta (Button). Kreirajte novu .php

datoteku i spasite pod imenom login.php. Ubacite formu, ta

nije form tag, klikom

na Insert (glavni izbornik), te na Form/Form. Zatim pozicionirajte kursor u okviru
tek uba

ene forme i ubacite dva TextFileld-a slijede

im koracima:

Insert/Form/Text Field. Ozna

ite prvi i u okviru Properties panela ga imenujte sa

korisime. Isto u

inite i za drugi TextFileld, samo njega imenujte sa sifra. Na

glavnom meniju kliknite na Insert / Form / Button, kao bi ubacili dugme za akciju,

iji

ete Label promijeniti u Prijavi me.

Sada imamo jednostavnu formu koja ne radi ništa. Trebamo je "oživjeti" pomo

opcije Log IN User, posljednje na Application toolbar-u. Ozna

ite dugme Prijavi

me i kliknite na Log In User na Application toolbaru.

Get input from form lista služi za definisanje iz koje forme

e aplikacija koristiti

ulazne podatke. Pošto je kreirana samo jedna forma (

iji je naziv form1),

spomenutu listu ostavite nepromijenjenom. U listi Username field izaberite opciju
korisime, jer je to polje koje

emo koristiti za unos korisni

kog imena. Lista

Password field služi za definisanje polja u koje se upisuje šifra za pristup. Kako
smo mi naše polje za šifru imenovali sa sifra, logi

no je da izaberemo opciju sifra u

spomenutoj listi. Naravno, potrebno je uspostaviti konekciju sa bazom, što možete
u

initi izborom opcije infoNews u listi Validate using connection. Naravno, pod

Table listom izaberite tabelu korisnici, jer aplikacija provjerava da li uneseni
podaci postoje u toj tabeli. Stoga je potrebno definisati kolonu u kojoj se nalazi
korisni

ko ime i kolonu u kojoj se nalazi šifra za pristup. To možemo uraditi

koriste

i se listama Username column i Password column, izborom odgovaraju

opcija (korisime i sifra).

Potrebno je navesti putanju do stranice na koju

e skripta izvršiti redirekciju

ukoliko su uneseni podaci prona

eni u bazi, kao i stranicu na koju

e skripta

izvršiti redirekciju, ukoliko je login bio neuspješan.

Kreirajte .php datoteku i nazovite je home.php, te primijenite predloške za dizajn.
Radi se o stranici na koju

e skripta preusmjeriti korisnika ukoliko login bude

uspješan. Ujedno, to

e biti i stranica u kojoj

e se prikazivati statisti

ki podaci

(broj novosti, kategorija i kroisnika u bazi) aplikacije. Navedite putanju do
datoteke home.php, upisuju

i je u polje if login succeeds, go to. U polje if login

fails, go to navedite putanju do datoteke login.php, jer želimo da se korisniku
ponovo prikaže forma za login, ukoliko je isti bio neuspješan. Još je samo preostalo
da definišemo privilegije za pristup koji

e biti realizovan na osnovu dva

Programiranje za Internet

218

16. .NET

16.1. Šta je .NET Framework?

U posljednjih nekoliko godina, zna

aj Interneta je enormno porastao u gotovo svim

oblastima ra

unarstva i obrade informacija. Direktan rezultat ovoga rasta je taj što

se od programera traži da kreiraju aplikacije koje koriste mogu

nosti Interneta, bilo

da je to proces naru

ivanja, isporuka robe, online saradnja ili bilo koja druga

upotreba. Nažalost, razvojni alati koji su ranije bili dostupni programerima, kao što
je Visual C++ 6 i Visual Basic 6, poti

u iz pre-Internet faze. Bilo koja Internet

mogu

nost koju su imali je bila rezultat naknadnog dodavanja, koje je trebalo da

zadovolji potrebe programera. Neke ranije tehnologije Internet programiranja su
zapravo bile impresivne i mnoge odli

ne aplikacije su bile kreirane sa njima.

Uprkos tome, to što Internet mogu

nosti nisu bile ugra

ene u ove alate za

programiranje od samog po

etka vodilo je do nezaobilaznih problema kod

efikasnosti pri razvoju, greškama i održavanju programa.

Microsoft-ov odgovor na ovu dilemu je da po

ne od po

etka, kreiraju

i novi

strukturni okvir programerskih alata koji je dizajniran od prvog dana sa potpuno
integrisanom Internet podrškom. .NET Framework se ne bavi samo Internet
programiranjem; on tako

er obezbje

uje razvoj tradicionalnih desktop aplikacija.

.NET ima dva glavna dijela:

•

.NET Framework Software Development Kit, proširivi set klasa i interfejsa,
zajedno sa raznim elementima podrške, je dizajniran da radi zajedno kako bi
zadovoljio svaku razvojnu potrebu. .NET Framework mora biti instaliran na
bilo kom sistemu koji

e biti korišten za pokretanje .NET aplikacija ili za

njihov razvoj. .NET SDK uklju

uje kompajlere za tri jezika: C++, novi jezik

nazvan C# (C sharp), i poboljšani Visual Basic.

•

Visual Studio razvojno okruženje. Ovaj alat obezbje

uje set programerskih

alata, kao što su editori koda, dizajneri interfejsa i debagera koji dosta
pojednostavljuju zadatak kreiranja .NET aplikacija.

16.2. Osnovni koncepti

Da bi se potpuno razumjeli listinzi koda u sljede

em tekstu, potrebno je razumjeti

nekoliko klju

nih izraza, uklju

uju

i common language runtine (CLR), skupove,

opsege imena i hendlere doga

aja.

16.2.1. Common Language Runtime

Common language runtime (CLR) je infrastruktura koju .NET koristi za
izvršavanje svih aplikacija. CLR uklju

uje ogroman set biblioteka klasa koje se

mogu koristiti u aplikacijama. Neke interesantne klase koje nisu povezane sa

Programiranje za Internet

219

Internetom uklju

uju programe koji vam omogu

uju da manipulišete Windows NT

logom doga

aja, Active Directory-em, kriptografskim uslugama, broja

ima

performansi, COM+ uslugama, skladištenjem objekata i osnovnim Windows
uslugama. U ovom tekstu fokusirat

emo se na klase koje su povezane sa Internet

programiranjem, kao što su Web kontrole, klase Web usluga i sigurnosne Web
klase.

CLR tako

er vodi brigu o kompajliranju "intermediate language" (me

ujezika) ili

IL koda u osnovni mašinski kod. Osnovni proces funkcioniše kao što slijedi:

Visual Basic kompajler konvertuje Vaš kod u IL. Što se ti

e funkcionalnosti i

kompleksnosti jezika, IL je negdje izme

u asemblera i C-a. IL je optimiziran

za brzo kompajliranje u mašinski kod. Možete zamisliti IL kao me

uproizvod

procesa kompajliranja.

Vašu Internet aplikaciju poziva korisnik, ili preciznije, Web server kao
odgovor na zahtjev korisnika.

CLR preuzima i kompajlira IL u mašinski kod. Ovo se dešava funkcija po
funkcija. Ako se funkcija koristi, ona se kompajlira u mašinski kod. Ako ne,
ona ostaje kao IL.

Iako ovaj proces izgleda zaobilazno i

ini vašu aplikaciju suviše sporom, on

ini

razvoj mnogo bržim, kao što je prvi korak mnogo brži od drugih metoda. Možete
tako

er kompajlirati vaš .NET kod direktno u mašinski kod korištenjem

standardnih alata instaliranih sa .NET Framework-om.

CLR sadrži druge usluge, uklju

uju

i podršku za izvršavanje više .NET aplikacija

unutar jednog procesa sa garancijom da se one ne

e miješati jedna sa drugom. Ovo

je rezultat koncepta nazvanog type safety (sigurnost tipa). Bilo koji .NET kod mora
garantovati type-safe kod, koji osigurava da, izme

u ostalog, nizovima i

kolekcijama nikada ne

e biti nekorektno pristupano. Visual Basic kompajler uvijek

uspostavlja sigurnosti tipa kada kompajlira vaš kod u IL.

16.2.2. Skupovi-assemblies

Sav .NET kod se kompajlira u skupove. Izvana, skup izgleda ta

no kao dynamic

link library (.dll) ili izvršni program (.exe). Prvih nekoliko bajtova unutar svakog
skupa sadrže mašinski kod koji aktivira common language runtime kada se skupu
pristupi iz drugog programa ili kada mu pristupi korisnik.

Unutar skupa je mješavina IL-a i mašinskog koda, u zavisnosti koliki dio skupa je
kompajliran CLR-om. Skupovi tako

er sadrže metapodatke. Metapodaci za .NET

program uklju

uju:

•

Informaciju o svakoj javnoj klasi ili tipu, uklju

uju

i ime, iz kojih klasa je

klasa razvijena, i svaki interfejs koji klasa implementira.

Programiranje za Internet

221

End Module

Prva linija koristi Imports klju

nu rije

, koja kaže kompajleru da uklju

i System

opseg imena u ovaj program. Linija koja ispisuje Hello World (Zdravo svijete),
može biti napisana razli

ito. Da listing nije koristio Imports klju

nu rije

u prvoj

liniji, linija sa ispisom bi izgledala ovako:

System.Console.WriteLine ("Hello World.")

Kao što možete vidjeti, opsezi imena grupišu sli

ne klase u jednu logi

ku grupu da

bi sprije

ili konflikte sa imenima.

Druga linija deklariše modul za kod programa, jedan od na

ina na koji VB.NET

organizuje svoj kod. Linije od Sub Main() do kraja definišu podproceduru nazvanu
Main ( ), gdje izvršavanje po

inje.

16.3. Konfigurisanje okruženja

Da biste izvršili prikazane primjere programa, potrebno je da imate instalirane tri
komponente na ra

unaru:

•

Jedan od sljede

ih operativnih sistema: Windows NT 4.0 Workstation ili

Server, Windows 2000 Professional ili Server, ili Windows XP ili viši, kao što
je Advanced Server ili Datacenter Server. Windows NT nije preporu

ljiv, jer je

poznato da ima problema sa .NET-om na tom operativnom sistemu. Nema
na

ina za izvršavanje .NET Internet razvoja na platformama kao što su

Windows 95/98ME.

•

Web server koji podržava ASP.NET. Ovo zna

i Microsoft Internet Information

Services (IIS) 4.0 ili viši, ili Microsoft Personal Web Server (PWS) na NT 4.0
radnoj stranici.

•

.NET Framework, koji uklju

uje CLR, Visual Basic kompajler i ASP.NET.

Iako je opcioni, preporu

uje se instaliranje Visual Studio .NET (koji uklju

uje

.NET Framework). Možete kreirati .NET aplikacije bez Visual Studio-a
korištenjem bilo kog editora teksta i kompajlera sa komandne linije, ali Visual
Studio

ini

itav proces-naro

ito debagovanje-mnogo lakšim.

16.3.1. Instalacija IIS-a

IIS dolazi sa Windows-om 2000 Professional ali se ne instalira podrazumijevano.
Da biste instalirali IIS, morate na

initi sljede

e korake, i morate imati pri ruci svoj

Windows 2000 CD.

Pratite ove korake:

U Windows Control Panel-u, izaberite Add/Remove Programs.

Programiranje za Internet

222

Izaberite Add/Remove Windows Component na dnu Add/Remove Programs
prozora.

Pogledajte polje za potvrdu pored Internet Information Services stavke.

Ubacite Windows 2000 CD u svoj ra

unar.

Kliknite Next i sa

ekajte da se završi instalacija.

16.3.2. Instalacija Visual Studio .NET-a

Prije nego što pokrenete bilo koji kod od prikazanih, potrebno je dobro
razumijevanje kako Web server izvršava Web stranicu ili Web Service. Internet
aplikacije kao što su dinami

ke Web strane ili korisni

ki Web Service-i brinu o

jednom zadatku - obrada korisni

kih zahtjeva. Ovi zahtjevi dolaze kao HTTP

zahtjevi iz Web pretraživa

a klijenta ili kao SOAP zahtjevi iz klijent programa

Web Service-a. Web Service-i mogu tako

er biti nazvani iz Web pretraživa

pored toga što ih pozivaju korisni

ki klijent programi. U ve

ini slu

ajeva,

korisni

ki klijent je potreban da uradi bilo šta korisno sa podacima koje vra

a Web

Service.

Tipi

an HTTP zahtjev izgleda ovako:

GET http/www.mycompany.com/index.htm HTTP 1.1

Ovaj zahtjev traži od Web servera koji se nalazi na ra

unaru nazvanom

"www.mycompany.com" da pošalje nazad stranu sa imenom index.htm.

SOAP zna

i Simple Object Access Protocol. Kao i HTTP, to je još jedan standard

za slanje i primanje podataka sa server ra

unara. U stvari , SOAP se oslanja na

HTTP i dodaje dodatne nivoe sofisticiranosti da bi dozvolio kompleksnije
interakcije. U ve

ini slu

ajeva. SOAP zahtjevi se šalju Web serveru kako bi

obradio zahtjev. SOAP zahtjevi i odgovori su prilago

eni pozivaju

im funkcijama

umjesto da vra

aju Web strane.

16.4. Pregled procesa dinami

kih strana

Šta se dešava kada korisnik zatraži preko Web pretraživa

a jednu od vaših strana?

Web pretraživa

generiše HTTP zahtjev za odre

enom stranom koju korisnik želi

da vidi. Web server, koji osluškuje sve vrijeme za HTTP zahtjevima, preuzima
zahtjev i traži datoteku za tu odre

enu stranu. Ako se strana završava sa .htm ili

.html ekstenzijom, Web pretraživa

jednostavno vra

a sadržaj datoteke.

Naravno, Web serveri mogu uraditi više nego jednostavno prikazivanje datoteka
koje se završavaju .htm ekstenzijom. Trenutno, možete na

i Web prezentacije koje

rade puno vrsta komplikovanih zadataka, kao što je usluga ispisivanja

ekova kod

online banaka, koja

e vam omogu

iti da pla

ate svoje ra

une korištenjem samo

Web pretraživa

a. Kako ove dinami

ke Web strane rade?

Programiranje za Internet

224

<%@ Pagelanguage = "VB" %>

sub Page_Load(Sender as Object, e as EventArgs)

if IsPostBack then

dim strUserName as string = Request ("username")

dim strPassword as string = Request ("password")

if (strUserName = "Joe Smith") and (strPassword =

"secret") then

Response.Write("<h2>Log on uspjesan za " &

strUserName & "<&h2>")

else

Response. Write("<h2>Vas username/password nisu

pronadjeni.</h2>")

end if

end sub

</script>

<h2>Dobrodošli na primjer stranice za Login</h2>

<td>UserName:</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

</tr>

</table></form>

</body></html>

Programiranje za Internet

225

Prva linija listinga kaže ASP.NET-u da koristite Visual Basic za kod na strani. Ova
linija predstavlja direktivu strane - page directive.

Iako ASP.NET omogu

uje da koristite bilo koji od .NET jezika, možete koristiti

samo jedan tip jezika za svaku pojedina

nu stranu koda sa strane servera. Ako vaša

strana sadrži kod sa strane klijenta, možete ga pisati sa razli

itim jezikom, kao što

je JavaScript.

Druga linija ozna

ava po

etak koda skripte. Direktiva runat="server" obezbje

uje

da se kod u skript tagovima izvršava na Web serveru. Ovaj kod se nikada ne šalje
klijent pretraživa

Prvi (i jedini) metod unutar <skript> taga se naziva Page_Load. Ovaj metod je
ASP.NET hendler doga

aja. ASP.NET poziva ovu metodu svaki put kada se

sastavlja strana. Ova metoda se tako

er poziva prije bilo kog kreiranog HTML

izlaza.

Page_Load metoda koristi kod da bi provjerila unijeto korisni

ko ime i password.

Kod koristi Request i Response objekte za prijem i slanje koda klijent pretraživa

Test u prvom if iskazu koristi IsPostBack zastavicu. ASP.NET automatski
podešava ovu zastavicu kada je strana pozvana pošto korisnik klikne submit
dugme. Kod prvog poziva strane, ova zastavica (flag) je False, tako da se ve

i dio

koda preska

e. Ovo je ono što želimo-želimo da provjerimo korisni

ko ime i

password samo ako je korisnik stvarno predao neke podatke.

HTML kod u preostalim linijama listinga je standardan izuzev <form> taga koji
sadrži runat="server" atribut. Ovaj tag je prvi primjer koji

ete vidjeti na jednoj

ASP.NET Web kontroli: ovaj tag funkcioniše kao obi

an tag forme, osim što

obezbje

uje da

e ASP.NET pozivati Page_Load doga

aj.

Slika 90. Login strana kreirana korištenjem ASP.NET-a

Programiranje za Internet

227

<tr>

<td>Password</td>

<td><asp:textbox id="password" textmode="password"

runat="server"/></td>

</tr>

<tr>

<td>

<asp:button text="Login" onCLick="LoginClicked"

runat="server"/>

</td>

</tr>

</table>

</form></body></html>

Primijetite da su Text box korisni

kog imena, Text box password-a i Login dugme

Web kontrole. Web kontrole su ozna

ene sa "<asp:controlname" i završavaju se sa

"/>". Svaka definicija Web kontrole sadrži direktive za podešavanje atributa
kontrola, kao što je textmode="Password" za polje password.

Listing ne koristi Page_Load doga

aj. Umjesto toga, koristi korisni

ki hendler

doga

aja, LoginClicked, koji poziva button kontrola. Primijetite tekst programa

onclick="LoginClicked" umjesto definicije Login dugmeta. Sve ASP.NET Web
kontrole koriste doga

aje koje možete obraditi sopstvenim kodom na strani.

Svaka ASP kontrola na prikazanoj strani sadrži atribut runat="server". Ovaj atribut
je od suštinskog zna

aja za bilo koju definiciju Web kontrole; bez njega, kontrola

e raditi pravilno.

Ako pokrenete kod u prikazanom listingu, možete primijetiti da polje korisni

kog

imena

uva svoju vrijednost

ak i nakon što je Login dugme kliknuto. Polje

password podrazumijevano ne

uva svoje stanje. ASP.NET Web kontrole

uvaju

svoje stanje bez bilo kakvog programskog napora sa vaše strane.

Programiranje za Internet

228

16.7.1. Dostupne Web kontrole

Dostupne ugra

ene (built-in) ASP.NET Web kontrole su:

Button

Table, TableCell, TableHeaderCell, TableRow

Checkbox, RadioButton TextBox

HyperLink AdRotator

Image, ImageButton

Calendar

Label

ListCOntrol (Checkbox, Dropdown, RadioButton)

LinkButton DataGBrid,

DataList

Panel Validator

kontrole

16.7.2. Definisanje Web formi

Primjer login strane u prethodnom dijelu je primjer ASP.NET Web forme. U
Visual Basic-u, forma je prozor sa kojim korisnik stupa u interakciju; za ASP.NET,
Web forma je Web strana koja stupa u interakciju sa korisnicima. Web forme imaju
programiranje stanja, doga

aja i svojstava baš kao i prozor na desktopu.

16.7.3. Kodiranje iza formi u ASP.NET-u

Održavanje strana koje sadrže kombinaciju HTML i ASP ili sli

nog koda je teško;

kod je težak za razumijevanje zbog kombinovanja HTML-a i scripta. Možete lako
praviti sintaksne greške u skriptu koje prouzrokuju grešku

itave strane, i

esto

ASP automat ne daje dobru informaciju greške o greškama pri kodiranju.

Da bi se sav kod i logika stavili u jednu datoteku, a sav HTML i elementi
korisni

kog interfejsa u drugu, to se može uraditi korištenjem "kod-iza" osobine

ASP.NET-a.

Promijenimo Login page primjer da koristi kod-iza, prikazan na sljede

a dva

listinga.

LoginCodeBehind.aspx (samo elementi HTML-a i korisni

kog interfejsa):

<%@ Page language="VB" inherits="MyLoginPage"

src="Login.vb" %>

<h2>Welcome to the Sample Login Page</h2>

<table>

<tr>

Programiranje za Internet

230

public sub LoginClicked(Sender as Object, e as

EventArgs)

dim strUserName as string = UserName.Text

dim strPassword as string = Password.Text

if (strUserName ) "Joe Smith") and (strPassword

="secret") then

Response.Write("<h2>Log on uspjesan za " &

strUserName & "</h2>")

else

Response.Write("<h2>Vas username/password ne

postoji.</h2>")

end if

end sub

end class

Ovakav kod deklariše klasu razvijenu iz Page klase, MyLoginPage. MyLoginPage
je ime klase koje se koristi u inherits atributu u prethodnom listingu. Sav kod iza
klasa za Web forme mora biti razvijen iz Page klase.

Primijetite da MyLoginPage klasa deklariše svaku Web kontrolu korištenu u .aspx
datoteci kao zašti

ene

lanove klase. Napravili smo ove deklaracije jer koristimo

kontrole u LoginClicked metodi za rukovanje doga

ajem.

Tako

er smo dodali imports direktive za svaki opseg imena koji MyLoginPage

koristi.

Iako je kombinovani kod iz ova dva listinga duži od originalne verzije koja nije
koristila kod-iza, ova nova implementacija je bolje organizovana. Takva
organizacija postaje zna

ajnija kada Web forme porastu, kao što se to dešava u

prakti

nim aplikacijama.

16.8. ASP.NET

Microsoft je nedavno predstavio Visual Studio. NET - kamen temeljac svoje .NET
strategije,

ime je ona zapravo otpo

ela svoje postojanje. Tek nešto ranije, web

developerima širom svijeta postao je dostupan nasljednik ASP-a, pod nazivom
ASP.NET. Nazvati ASP.NET logi

nom nadogradnjom klasi

nog ASP-a 3.0 bilo bi

pogrešno. ASP.NET, kao uostalom i cijela .NET strategija, uvodi potpuno novu
paradigmu u programiranje web skripti. Zapravo, od ASP-a je preuzeta tek
namjena (stvaranje dinami

nih web stranica) i dio imena, a uvedene su dvije bitne

stvari: mnoga programska poboljšanja na jednoj strani, a na drugoj potpuna
promjena osnovna programiranja, odnosno na

in na koji pišete kod za .ASP

stranice.

Programiranje za Internet

231

16.8.1. Na

in pisanja koda

Klasi

ne ASP stranice pišu se proceduralno, što zna

i da je svaki zadatak koji je

potrebno obaviti naj

eš

e smješten u posebnoj ASP stranici, a redoslijed kojim se

izvršavaju pojedine komande unutar stranice odre

en je njihovim položajem

(komande se izvršavaju odozgo prema dole). Kod ASP.NET-a, situacija je
drasti

no druga

ija. Recimo, za jednostavan zadatak ispisa forme u koje korisnik

treba upisati podatke i prikaza tih podataka nakon slanja forme, u klasi

nom ASP-u

potrebne su dvije stranice: jedna za ispis forme, druga za prikaz podataka nakon
klika na submit dugme. Alternativa je korištenje jedne stranice, sa nekoliko if petlji
za provjeru da li je forma poslana i da li su polja popunjena. Doda li se tome
potreba za provjerom unosa (error checking), postaje jasno da to nije jednostavna
stvar za isprogramirati (nije komplikovana, ali zahtijeva puno koda). U ASP.NET-
u sve se to može uraditi pomo

u jedne stranice. I ne samo to - korištenjem

serverskih kontrola i ugra

enih rutina za provjeru grešaka mogu

e je gore navedeni

primjer napisati u tek par linija koda. Da biste shvatili o

emu govorim, pogledajte

kod:

ASP 3.0:

Datoteka: forma.asp

<form method="post" action="ispis.asp" id=form1

name=form1>

<div align="center"> Ime i prezime: <br>

<input type="text" name="Ime" size="20"

maxlength="50">

<br> E-mail adresa: <br>

<input type="textbox" name="Email" size="20"

maxlength="50">

<br>

<input type="submit" name="Submit" value=" Ispisi

podatke ">

</div>

</form>

Datoteka: ispis.asp

'da li je forma uopste poslana

If Request.Form ("poslano") ="da" Then

Programiranje za Internet

233

Kod više li

i na dio nekog Visual Basic projekta, nego na web stranicu. Dok je kod

klasi

nog ASP-a teško izbje

i tzv. špageti-kod, ASP.NET kod je lako

itljiv,

uspješno odvojen od dizajna stranice i uopšte mnogo sli

niji pravom programskom

jeziku.

16.8.2. Programska poboljšanja

Jedan od najvažnijih novosti jeste zna

ajno ubrzanje izvršavanja skripti. Za razliku

od dosadašnjih ASP skripti, koje su interpretirane prilikom svakog pozivanja od
strane klijenta. ASP.NET skripte su u potpunosti kompajlirane! Kada se stranica
prvi put pokrene biva kompajlirana pomo

u CLR-kompatibilnog (Common

Language Runtime, još jedna bitna novost .NET platforme) kompajlera i pri
svakom sljede

em u

itavanju pokre

e se ve

kopajlirana verzija, koja se izvršava

puno brže. Kada do

e do osvježavanja (update) stranice, ona pri prvom u

itavanja

biva rekompajlirana.

Kompajliranje skripti donosi odre

eno ubrzanje, ali najve

i dio vremena

izvršavanja neke skripte odlazi na pristupanje bazama i uzimanje podataka iz njih.
Upravo zato ASP.NET donosi nekoliko tehnika keširanja podataka. Recimo da
imate stranicu na kojoj prikazujete posljednjih 20 unosa iz baze i da toj stranici
pristupa oko 100 ljudi u minuti. Bez obzira koju bazu podataka koristi i koliko jak
server imali, ovi korisnici

e prouzrokovati prili

no usporenje servera. U ASP.NET

skripti koja obavlja taj zadatak dovoljno je upisati naredbu koja

e keširati podatke

za nekoliko minuta (nekoliko sati ili dana, zavisi od frekvencije dodavanja novih
podataka u bazu), tako da

e skripta samo za prvog korisnika uzeti podatke iz baze,

a ostali

e vidjeti keširanu stranicu! Mogu

e je i fragmentno keširanje, tako da

možete recimo odrediti da se reklame ne keširaju (uvijek se u

itavaju iz baze), ali

da se ispisi onih 20 unosa iz baze keširaju.

Još jedna bitna novost jesu serverske kontrole. Dok ste u ASP-u za ispis forme
koristili standardne HTML kontrole (texbox, password, select, button i sl.), u
ASP.NET-u koristite ekvivalentne serverske kontrole, koje se kasnije renderišu u
obi

ni HTML, u zavisnosti od browsera. Dakle, problemi sa kompatibilnoš

browsera su gotovi! U svojoj skripti pišete naredbe koje su uvijek iste (recimo
aspxtextbox ili aspxbutton), a server vra

a klijentu HTML kod u zavisnosti od

njegovog browsera. Sa ovim kontrolama možete kombinovati kontrole za provjeru
(validation), tako da kompleksne if petlje potrebne za provjeru unosa u formi
kona

no odlaze u prošlost.

Jedan od najve

ih problema sa klasi

nim ASP skriptama jeste njihovo postavljanje

na server. Ako se radi o jednostavnim skriptama koje ne koriste nikakve serverske
objekte ili posebno postavke IIS-a, onda je postavljanje na server

as posla. Ali ako

vaša skripta zahtijeva posebne COM objekte ili IIS postavke postavljanje na server
zna biti mu

no. Potrebno je provjeriti da li ti objekti postoje na serveru, da li su

registrovani, provjeriti kakve su postavke servera... Sve ove probleme rješava

Programiranje za Internet

234

ASP.NET. COM objekte koje vaša skripta koristi više uopšte nije potrebno
registrovati na serveru! Dovoljno ih je kopirati na server u odgovaraju

i folder i

skripta ih može koristiti! Tako

er, sa ASP.NET-om stiže i tekstualna konfiguracija

datoteka u kojoj možete podesiti bitne postavke, koje su se do sada mogle mijenjati
jedino preko IIS administracijskih stranica.

Iako je ASP po tom pitanju ve

i bio iznad konkurencije, ASP.NET uvodi još

nekoliko jezika koji se mogu koristiti za programiranje skripti. Umjesto oslabljene
verzije VB-a - VBScript-a, koja je do sada predstavljala default jezik za
programiranje ASP stranica, ASP.NET stranice se mogu programirati u dva
"prava" programska jezika - VB.NET i C#. Pored njih, direktno je podržan Jscript,
a Visual StudioNET (samim tim i ASP.NET)

e podržavati oko 20 jezika! VBNET

i C# su moderni jezici, koji ne samo da podržavaju polimorfiranje i naslje

ivanje

objekata, nego se mogu i kombinovati - VBNET može naslje

ivati C# objekt i

obratno.

Programiranje za Internet

236

</cd-disk>

<cd-disk>

<izvodjac> Red Hot Chilli Peppers </izvodjac>

<naziv> Californication </naziv>

</cd-disk>

<cd-disk>

<naziv> Issues </naziv>

</cd-disk>

</lista>

Kao što vidite, dokument je dosta sli

an HTML-u. Sa jednom velikom razlikom -

tagovi su na našem jeziku! U XML-u sami definišete tagove koji imaju nazive
kakve odredite (obi

no su nazivi logi

ki povezani sa sadržajem). Još jedna razlika

u odnosu na HTML jeste da u ovome dokumentu ne postoje nikakve odrednice
koje govore kako

e podaci izgledati u browseru. Izgled dokumenta

e se, kada

budemo došli do toga, definisati iz posebne datoteke.

A zašto se u ovom primjeru nije jednostavno koristio obi

ni HTML, sa tabelom

popunjenom podacima? Zato jer XML daje mnogo više fleksibilnosti. Recimo da
jednog dana poželite odštampati svoju listu CD-ova (ima ih preko stotinu). Morali
biste ru

no brisati sve HTML tagove da biste dobili

istu tekstualnu datoteku, ili

biste morali mnogo koristiti copy i paste funkcije kako bi iz HTML dokumenta
prenijeli podatke u neki tekst procesor, što prili

no naporno i dugotrajno. Sa XML-

om, može se napisati jednostavan mali program ili koristiti neki ve

dostupan, koji

e "izvu

i" podatke iz dokumenta i automatski ih formirati u nekom tekst

procesoru (na primjer, informacije iz taga <izvodjac> i <naziv> su podebljane, a
ostale su ispisane normalnim fontom).

ak se može koristiti neki XML-enabled

tekst procesor koji

e za

as odštampati ovaj XML dokument. To su samo neke od

prednosti XML nad HTML-om u ovome slu

aju.

Iako XML ostavlja autorima na slobodu da kreiraju vlastite tagove, odnosno
elemente, prilikom pisanja XML dokumenta moraju se poštovati odre

ena pravila.

Svaki XML dokument mora biti pravilno napisan (pravilno formatiran) i ispravan.

Da biste pisali pravilne SML dokumente, trebate se pridržavati odre

enih pravila.

Ta pravila nisu uopšte komplikovana, a mnoga od njih bi se trebala odnositi i na

Programiranje za Internet

237

HTML. Prije svega, na po

etku svakog XML dokumenta morate staviti naznaku da

se radi o XML dokumentu, a to izgleda ovako:

<?xml version ="1.0"?>

Zatim u svakom XML dokumentu mora postojati root ili korijenski element unutar
kojeg se nalaze svi ostali elementi. Kod HTML dokumenata taj element je <html>,
a kod XML-a možete sami izabrati njegov naziv. Korijenski element u prikazanom
primjeru je <lista>.

Svaki otvoreni element u XML dokumentu mora biti i zatvoren. Na primjer, ako
otvorite element <cd>, morate ga i zatvoriti sa komandom </cd>. Dakle, svaki
element se zatvara sa istom komandom kojom se i otvara, samo što prije nje stoji
znak "/". U HTML-u mnogi tagovi su mogli ostati i nezatvoreni, a browser bi
prikazao pravilno web stranicu. U XML-u pak, ukoliko neki tag nije zatvoren
pravilno, dokument ne

e uopšte biti prikazan. Postoje neki tagovi koji u HTML-u

nisu imali svoju verziju za zatvaranje, poput taga <br>. U XML se oni pišu sa
znakom "/" nakon komande, u ovome slu

aju <br/>.

U XML dokumentu svi elementi moraju biti pravilno postavljeni, odnosno ne smije
do

i do njihovog "preklapanja". Na primjer, u HTML ste mogli slobodno napisati

sljede

<center><b><font face=verdana" size="2"> Tekst

</center></font></b>

i to ne bi uopšte bilo nepravilno. U XML-u je to fatalna greška, i dokument više ne
bi bio ispravno napisan. Pravilno napisani elementi izgledaju ovako:

<center><b><font face="verdana" size = "2"> Tekst

</font></b></center>

Prilikom pisanja XML dokumenta, treba voditi pažnju o velikim i malim slovima.
Dok bi u HTML-u tagovi (elementi) <cijena>, <Cijena> i <CIJENA> bili potpuno
isti, u XML-u su to tri razli

ita elementa.

Da ne bi došlo do pogreške, preporu

ujemo vam upotrebu ili samo velikih ili samo

malih slova u vašim XML dokumentima. Postoji još dosta pravila, ali najvažnija su
ova spomenuta.

17.1. DTD – Document Type Definition

Naravno, nešto

emo uraditi sa informacijama iz ispravno napisanog XML

dokumenta. Ta

nije, uradit

emo mnogo toga sa tim informacijama. Me

utim,

opasnost još uvijek vrijeba - postoji mogu

nost da dokument, iako je pravilno

napisan, ne sadrži neke klju

ne informacije. Pogledajmo slijede

i primjer.

<cd-disk>

<izvodjac> Metalica

Programiranje za Internet

239

može sadržavati parsed character data (sve drugo osim binarnih podataka, kao što
su slike), u našem slu

aju

e to biti tekst i brojevi.

17.2. Prikazivanje XML dokumenata u browseru

Ako u

itate ovaj XML dokument u Internet Explorer, pod uslovom da ste sve

pravilno uradili dobit

ete rezultat kao na slici 91. Ako se prisjetimo

injenice da je

XML zadužen za definisanje strukture podataka, ali da u sebi ne sadrži nikakve
informacije u tome kako

e se ti podaci prikazati u korisnikovom browseru, stvari

dolaze na svoje. Poseban jezik, koji se naziva XSL (eXtensible Style Language),
omogu

ava autorima da formatiraju podatke sadržane u XML dokumentu. XSL

koristi sintaksu XML-a, omogu

uju

i XML autorima da stiliziraju svoje

dokumente i podatke u njima bez potrebe za u

enjem CSS-a ili nekog drugog

stylesheet jezika (na primjer DSSSL).

Slika 91. Prikaz XML dokumenta u browseru

Programiranje za Internet

240

Drugim rije

ima, XSL vam omogu

ava da izdvojite odre

ene podatke iz XML

dokumenta, a zatim te podatke formatirate i prikažete korisniku na na

in koji želite.

Ovaj "transformacijski" dio XSL-a o kome govorimo se naziva XSLT (eXtensible
Style Language for Transformation) i on

e nas ovdje primarno zanimati, jer

omogu

ava svojevrsnu transformaciju XML dokumenta i podataka sadržanih u

njemu u HTML (i na taj na

in prikazivanje u korisnikovom browseru). Drugi dio

XSL-a se još naziva i XSL FO (Formatting Objects), vrlo je kompleksan i
omogu

ava prikazivanje XML-a u obliku bilo koje dvodimenzionalne prezentacije

koju možete zamisliti (PDF dokument, izlaz za štampa

itd.).

Šta se u stvari, jednostavnim jezikom re

eno, doga

a sa XML dokumentom

prilikom formatiranja pomo

u XSL-a? U XML dokumentu nalaze se podaci

organizovani u elementima koje ste sami definisali. XLS pronalazi te elemente i
pravi

source tree

(izvorno stablo dokumenta) XML dokumenta, a zatim

primjenjuje pravila navedena u XSL datoteci na elemente i pravi

result tree

(kona

no stablo dokumenta).

Kona

no, XSL procesor (program koji primjenjuje XSL stilove na XML

dokumente, a može biti na klijentskoj ili serverskoj strani) generiše HTML koji
može biti prikazan u browseru. Dakle, podaci dolaze iz XML dokumenta, a
formatiranje (koje može predstavljati i odre

eno restruktuiranje podataka) dolazi iz

XSL datoteke. To je i bit XML-a; podaci i njihov prikaz du odvojeni. HTML nije
jedini mogu

i "format" u kojeg se XML dokumenti mogu transformisati, ali nas u

ovome tekstu jedino on zanima.

U nastavku možete vidjeti kako izgleda XSL datoteka za Billy-jevu muzi

kolekciju, a kako to sve izgleda kada se prikažu u browseru, možete vidjeti na
slici 92.

Slika 92. Prikaz formatiranog XML dokumenta uz pomo

XSL-a

Programiranje za Internet

242

</cd-disk>

</lista>

ega se sastoji korišteni XSL:

<?xml version="1.0!?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-

xsl/">

XSL je u stvari jezik definisan u XML-u, pa stoga to mora biti i naglašeno u prvom
redu. Svaki XSL mora poštovati pravila pisanja ispravnih XML dokumenata i mora
biti validan. Drugi red nazna

ava da se radi o XSL stylesheetu i morate ga navesti

u svakoj XSL datoteci.

<xsl:template match="/">

Ovaj tag ozna

ava da se sve unutar njega (sva pravila) odnose na korijenski

element u XML dokumentu. U ovom slu

aju to bi bio element <lista>. Dalje

možete vidjeti klasi

an HTML koji susre

ete na svakoj web stranici, a on definiše

naslov stranice i postavlja tabelu na stranicu. Sljede

i zanimljiv XSL tag je:

<xsl:for-each select="lista/cd-disk">

On govori XSL procesoru da za svaki element <cd-disk> unutar korijenskog
elementa <list> ubaci navedeni HTML kod. Kao što vidite u sljede

em kodu, taj

HTML kod dodaje još jedan red tabeli koja je ve

ranije kreirana, a polja

popunjava sa podacima iz XML dokumenta.

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-

xsl">

<xsl:template match="/">

<html>

<head>

<title> Billyjeva muzi

ka kolekcija CD-ova </title>

</head>

<body>

<h2> Billyjeva muzi

ka kolekcija </h2>

<table width="550" border="1" cellspacing="0"

cellpadding="0">

Autor </b></center>

</td>

Programiranje za Internet

243

Naziv </b></center>

</td>

Godina </b></center>

</td>

Cijena </b></center>

</td>

</tr>

<xsl:for-each select="lista/cd-disk">

<tr>

<xsl:value-of select="izvodjac"/>

</td>

<xsl:value-of select="naziv"/>

</td>

<xsl:value-of select="godina"/>

</td>

<xsl:value-of select="cijena"/>

</td>

</tr>

</xsl:for-each>

</table></body></html>

</xsl:template>

</xsl:stylesheet>

Ovo je vrlo jednostavan XSL koji koristi samo osnovne komande. Pored for-each
komande, mogu

e je koristiti if-then petlje i choose funkcije, koje su sigurno

poznate programerima. Ove komande omogu

avaju manipulaciju i prikazivanje

podataka iz XML dokumenta na bilo koji na

in koji možete zamisliti (ili barem na

Programiranje za Internet

245

18. Budu

nost: Ajax, Gadget,...

18.1. Ajax

Vremenom se u razvoju web aplikacija postavilo vrlo logi

no pitanje: kako dodati

mogu

nosti koje imaju klasi

ne desktop aplikacije? I još pri tome poboljšati

performanse i omogu

iti potpunu neovisnost od browser-a sa istim brojem kontrola

koje deskop aplikacije

ine toliko boljim i jednostavnijim za programiranje. Ovo je

zapravo ideja AJAX (Asynchronous JavaScript and HML) strategije za razvoj web-
baziranih aplikacija.

Sam AJAX je nastao da bi se prevazišla ograni

enja klasi

nog request-response

modela današnjih web aplikacija. Svaki put pri promjeni podataka, odnosno
korisni

kog interfejsa, stranica se mora poslati serveru kako bi se ažurirala.

utim, velika koli

ina ovih zahtjeva sa velikim skupom podataka može

uzrokovati da korisnik

eka minutama za obradu jednog zahtjeva, što naravno nije

poželjno: AJAX omogu

ava da klijentske skripte asinhrono (neovisno jedna od

druge) pozivaju serverske aplikacije koriste

i HML kao protokol. To za rezultat

ima da se stranica mnogo brže u

itava, jer se mnoge skripte mogu izvršavati

paralelno, a obnavlja se samo onaj dio stranice koji se mijenja, bez potrebe za
u

itavanjem stati

kog dijela stranice.

Drugi razlog za AJAX-om je i nedostatak kontrola u web aplikacijama, što je imalo
za posljedicu da programeri naprave browser-specific kontrole

ija je izrada

prili

no kompleksna i ograni

ava upotrebu web aplikacije isklju

ivo u jednom

browser-u ili

ak u samo jednoj verziji nekog od browser-a. Ve

ina programera,

logi

no, izbjegava navedeni na

in razvoja kontrola, pa su opet korisnici ti koji su

nezadovoljni mogu

nostima web aplikacije. AJAX koristi JavaScript komponente

koje daju više mogu

nosti korisni

kom interfejsu, pri

emu je kompatibilnost

zagarantovana.

Izrada AJAX-baziranih aplikacija nažalost nije jednostavna i zahtijeva prili

znanja o JavaScript-u i dodatnim tehnologijama, premda postoji prili

an broj

biblioteka koje ovaj posao olakšavaju.

Da biste po

eli raditi sa AJAX-om morate kombinovati HTML, DHTML, CSS

XHTML i, naravno, JavaScript. Ukoliko dublje krenete u problematiku shvatit

ete

da najviše posla imate sa DHTML-om, XmlHttpRequest ili odgovaraju

Microsoft-ovim ActiveX objektom. Moramo primijetiti da programer odmah ima
probleme vezane za kompatibilnosti stranice u odgovaraju

em browser-u, jer mora

postojati detekcija u samoj stranici kako bi se koristio XmlHttpRequest ili
Microsoft-ov ActiveX objekat.

Sljede

i problem je vezan za konceptualni dizajn web stranice, odnosno

iskorištenje paralelnog izvršavanja skripti. Suština paralelizma se sastoji u tome da
se inicijalno koristi minimalan broj JavaScript-i, a zatim postepeno pove

ava

korištenje preostalih JavaScript-i, CSS-a i drugih tagova preko XmlHttpRequest
objekta. Ova tehnika koristi ve

i broj konekcija prema serveru i zna

ajno ubrzava

Programiranje za Internet

246

itavanje web stranice, za razliku od tradicionalnog pristupa koji je sinhronizovan

i koristi jednu konekciju. Ovdje opet možemo primijetiti da programer mora paziti
i na redoslijed izvršavanja JavaScript-i, CSS i ostalih tehnologija koje su klijentu
potrebne.

I kada pomislite da se problemi ovdje završavaju, prilikom programiranja dolazite
do situacije da morate imati ponovnu detekciju u stranici. Ovaj put morate znati u
kojem se stanju stranica nalazi, te u zavisnosti od toga pozvati odgovaraju

skriptu. Možete problem riješiti rekurzivno, me

utim, održavanje postaje

komplikovanije kako imate ve

i broj stanja stranice.

Ipak, održavanje nije uplašilo Google, koji nam je poklonio Gmail, Google Maps,
Google Suggests i sli

ne AJAX-bazirane servise. Ohrabreni ovim potezom,

programeri su po

eli AJAX prebacivati i na .NET pa

ete na Internetu prona

i i

njegovu varijantu Ajax.NET.

Iskusniji arhitekti moraju biti i kriti

ari AJAX strategije razvoja web stranica.

Naime, svaki informacioni sistem se može apstrahovati u tri logi

ka dijela -

prezentacijski dio sa kojim rade korisnici i administratori, biznis logika koja bi
trebala biti transparentna i na kraju, naravno, perzistencija. AJAX spaja
prezentaciju sa biznis logikom kako bi se pove

avala efikasnost, brzina rada i

jednostavnost upotrebe, ali znatno smanjuje kvalitete informacionog sistema,
posebno njegovu fleksibilnost. Može se lako zaklju

iti da je AJAX idealno rješenje

za male, jednostavne i

esto korištene servise.

Microsoft-ov odgovor na pitanje kako pojednostaviti AJAX i iskoristiti sve njegove
mogu

nosti je ASP.NET 2.0 Atlas tehnologija. Na klijentskoj strani Atlas pruža

impresivan skup JavaScript biblioteka koje sadrže objektno-orijentisane
mogu

nosti, HTML/HTTP za pozive procedura na udaljenim ra

unarima, te

komponente sa event-ima i

esto korištenim metodama poput drag and drop, auto

completion, popup i mouse hovering.

Na serverskoj strani Atlas se sastoji od ASP.NET serverske kontrole i ASP.NET
servisa. Serverske kontrole su odgovorne za slanje klijentskih skripti na korisni

mašinu,

ime se omogu

ava transparentan i neovisan rad od korisni

kog browser-a.

Servisi nam omogu

avaju da

uvamo podatke o korisniku kao što je novi

ASP.NET profiles koji je bio poznat pod nazivom Application i Session varijable.
Personalizacija interfejsa, autentifikacija i uloge (roles) omogu

uju da korisnik u

zavisnosti od privilegija dobije manji ili ve

i broj kontrola na interfejsu i da iste

posloži po svom naho

enju.

18.2. Ajax Agent 0.1

Ajax Agent je biblioteka napisana za PHP, koja na jednostavan na

in daje

mogu

nost korištenja Ajax tehnika u kombinaciji sa spomenutim skriptnim

jezikom. Ajax (Asynchronous JavaScript and XML) predstavlja potpuno novi

Programiranje za Internet

248

function veza_tekst(str)

{agent.call(",'server_tekst",klijent_tekst");}

function klijent_tekst(str)

{dpci,emt-getElementByld)"div_ispis").innerHTML=str,}

</script>

</head><body>

<p><b><a href="#" onclick="veza_tekst()">Ispisi

tekst</a><b></p>

</body></html>

Ako je sve kako treba, nakon klika na link

e se ispisati tekst (Koristite Ajax

Agent) bez ponovnog u

itavanja cijele stranice. Kako vidite, funkcija u sebi sadrži

tri odvojene funkcije. Prva je server-side funkcija (server-tekst()) koja samo vra

vrijednost stringa. Druga je klijent funkcija (klijent-tekst) koja odre

uje gdje

e se

tekst ispisivati. U ovom slu

aju to je div tag kod kojeg id parametar ima vrijednost

div_ispis. Tre

a funkcija povezuje prethodne dvije (function veza:tekst) i ponaša se

kao klijent server funkcija. Na kraju se poziv funkcije veza_tekst vrši kao i poziv
bilo koje druge JavaScript funkcije (onclick="veza:tekst()"). Sve ostalo su obi

PHP i JavaScript komande.

Nakon ovog napravite datoteku tekst2.php sa sljede

im sadržajem:

<?php

function server_tekst()

{return "Koristite Ajax Agent";}

include_once("agent.php");

$agent->init();

function klijent_tekst()

{

str = agent.call(",'server_tekst",");

alert(str);

}

</script>

</head><body>

Programiranje za Internet

249

<p><b><a href="#" onclick=" klijent_tekst

()">Ispisi tekst</a></b></P>

</body></html>

Rezultat klika na link

e biti ispis teksta, ali ovaj put ne na stranici, nego u alert

prozoru. Možete vidjeti da ova skripta ima dvije funkcije. Server_tekst() isto kao i
u prethodnom vra

a vrijednost stringa, dok funkcija klijent_tekst() u ovom slu

aju

uzima vrijednost serverske funkcije (str = agent.call(",'server-tekst',")) i ispisuje
poruku u alert prozoru (alert(str)).

Osim ovoga, Agent je sposoban da radi i sa parametrima, što možete vidjeti na
sljede

em primjeru:

<?php

function server_tekst($ime, $mail)

{ return " Vi se zovete: ".$ime, "<BR> Vas e-mail

je:".$mail;}

include_once("agent.php");

$agent->init();

function veza_tekst() {

ime = document.getElementByld('ime').value;

mail = document.getElementByld('mail').value;

agent.call(",'server_tekst",'klijent_tekst',ime,mail);

}

function klijent_tekst(str)

{document.getElementByld('div_ispis').innerHTML=str,}

</script>

</head><body>

Ime: <input name="ime" id="ime" size="4" type="text">

E-mail: <input name="mail" id="mail" size="4"

type="text">

<input name="OK" value="Posalji" onclick="veza_tekst();

return false; "type="submit">

</form></p>

Programiranje za Internet

251

<a href="#"

onclick="agent.call(", 'server_glavna',

'klijent_glavna', 'tekst3.php')">Tekst3</a>

</body<></html>

Prilikom klika na neki od linkova prikazat

e se jedan od prethodnih primjera bez

osvježavanja stranice. U ovom slu

aju imamo samo dvije funkcije, server-side

funkciju server_glavna() koja pokazuje kako

e se prikazivati datoteke, i

klijent_glavna() koja ukazuje gdje

e se datoteke izlistati. I ovaj put je to div tag

iji parametar id ima vrijednost div_ispis. Sada komanda agent.call povezuje obje

funkcije sa odre

enom datotekom (u ovom slu

aju to su: tekst.php, tekst2.php i

tekst3.php), a poziva se direktno komandom onclick.

18.3. Gadget

Rije

"gadget" (gizmo, gismo, widget) se koristi da ozna

i ure

aj koji je posebno

koristan za neki posao, mali elektronski ili mehani

ki aparat koji predstavlja

inovaciju, neimenovani ili hipoteti

ki proizvod.

U programerskom žargonu, rije

gadget se koristi za kombinaciju grafi

kih

simbola i nešto programskog koda s ciljem izvršenja neke odre

ene funkcije.

Naprimjer, scroll-bar ili tipka predstavljaju gadgete.

Slika 93. Windows Vista Beta 2 Desktop sa Windows Sidebarom i gadgetima

Programiranje za Internet

252

Gadgeti su mini aplikacije koje se mogu povezivati sa internet servisima kako bi
davale informacije o vremenskoj prognozi, novostima, auto-kartama, Internet radio
stanicama i galerijama slika.

Gadgeti se tako

er mogu integrisati sa mnogim aplikacijama da bi promijenili

in interakcije s njima. Naprimjer, gadget može dati brzi pregled adresa iz chat

programa, dnevne obaveze iz kalendara i sl. Gadgeti tako

er mogu biti kalkulatori,

igre, itd.

Microsoft Windows Vista

e uz standardne elemente grafi

kog interfejsa (desktop,

taskbar, start meni) imati i osnovni set gadgeta. Dodatni gadgeti se mogu skinuti sa
online galerije gadgeta (http://gallery.microsoft.com/). Windows Sidebar je novi
grafi

ki element Windows Vista desktopa koji se koristi za organizovanje gadgeta

(slika 93). Pored sidebara, gadgeti mogu biti sastavni dijelovi Internet stranica.

Windows Sidebar je aplikacija koja omogu

uje da se gadgeti prikazuju na sidebaru

i na Windows desktopu. Svi gadgeti iz sidebara se pohranjuju lokalno. Gadgeti se
mogu dobiti skidanjem sa nekog web sajta, kao e-mail attachment ili uz instalaciju
neke aplikacije. To su datoteke sa ekstenzijom .gadget. Dvostrukim klikom na te
datoteke pokrenut

e se proces instalacije.

Slika 94. Gadget na desktopu

18.3.1. Kako rade gadgeti

Svaki gadget se razvija pomo

u HTML i skriptnog jezika. Gadgeti tako

er imaju

pristup dodatnim informacijama kad se HTML pokre

e kao gadget. To omogu

uje

gadgetima da imaju interakciju sa Windows datotekama i folderima, kao što su

Programiranje za Internet

254

Kreirajte HTML datoteku
HTML datoteka bi trebala sadržati sljede

<html>

<head>

<title>Hello, World!</title>

<style>

body {

width:130; height:50;

}

</style>

</head>

<body>

<span id="gadgetContent" style="font-family: Tahoma;

font-size: 10pt;">Hello, World!</span>

</body>

</html>

Kona

no, kreirajte gadget manifest:

Datoteka manifesta se mora zvati "gadget.xml"
Datoteka mora biti snimljena sa UTF-8 encoding.

XML datoteka bi trebala sadržati sljede

<?xml version="1.0" encoding="utf-8" ?>

<name>Hello World!</name>

<namespace>Example.You</namespace>

</author>

<description>Moj prvi gadget</description>

<hosts>

<base type="HTML" apiVersion="1.0.0"

src="HelloWorld.html" />

Programiranje za Internet

255

</host>

</hosts>

</gadget>

Može se kreirati i datoteka za ikonu, kojoj treba dati isto ime koje ima i HTML
datoteka (HelloWorld). Ako se ne kreira posebna, Windows sidebar

e obezbijediti

generi

ki ikonu.

Kad se klikne na simbol "+" na dnu sidebara, u galeriji gadgeta trebao bi se pojaviti
novi gadget.

Slika 95. Tipka "Add Gadget" za dodavanje novih gadgeta

Slika 96. Gadget Gallery sa gadgetom "Hello World!"

Datoteka sa slikom (naprimjer "Background.png") se može koristiti kao podloga
gadgeta. Potrebno je samo izmijeniti CSS dio HTML datoteke "HelloWorld.html":

<style>

Programiranje za Internet

257

<span id="gadgetContent" style="font-family: Tahoma;

font-size: 10pt;">Hello, World!</span>

</body>

</html>

Slika 97. Gadget sa sistemskom varijablom

18.3.4. Postavke gadgeta

Gadgeti mogu prikazati dijalog za podešavanje postavki. Oni tako

er mogu snimiti

postavke sa APIjem.

Prvo je potrebno konfigurisati HTML stranicu koja

e se pojaviti kad korisnik

pritisne UI kontrolu za podešavanje postavki:

var variableName = "ProgramFiles"

function setContentText() {

gadgetContent.innerText =

System.Environment.getEnvironmentVariable(variableName)

;

}

System.Gadget.settingsUI = "Settings.html";

</script>

e omogu

iti da oznaka na za podešavanje gadgetu postane vidljiva:

Slika 98. Gadget sa uklju

enom oznakom za postavke

sada je potrebno kreirati html stranicu koja

e se koristiti za podešavanje postavki

(datoteka sa imenom "Settings.html"):

<html>

<head>

<style>

Programiranje za Internet

258

body{

width:250;

height:75;

}

</style>

function init() {

var currentSetting =

System.Gadget.Settings.read("variableName");

if (currentSetting != "")

envVar.innerText = currentSetting;

}

System.Gadget.onSettingsClosing

SettingsClosing;

function

SettingsClosing(event)

{

if (event.closeAction == event.Action.commit) {

variableName = envVar.value;

System.Gadget.Settings.write("variableName",

variableName);

}

event.cancel = false;

}

</script>

</head>

<span id="mySpan" style="font-family: Tahoma; font-

size: 10pt;">

Environment Variable:<br>

</span>

</body>

</html>

U ovoj html stranici postoji posebna funkcionalnost gadgeta:

Programiranje za Internet

260

Slika 99. Gadget sa dijalogom za podešavanje postavki

Posljednji korak je ažuriranje (update) gadgeta kad korisnik promijeni postavku (u
datoteci "HelloWorld.html"):

var variableName = "ProgramFiles";

function setContentText() {

gadgetContent.innerText =

System.Environment.getEnvironmentVariable(variableName)

;

}

System.Gadget.settingsUI = "Settings.html";

System.Gadget.onSettingsClosed = SettingsClosed;

function SettingsClosed() {

variableName =

System.Gadget.Settings.read("variableName");

setContentText();

}

</script>

Programiranje za Internet

261

19. Planiranje i procedura dizajna web prezentacije

Nakon što ste odlu

ili da se (kona

no) pojavite na Internetu u vidu prezentacije

firme, ponude odre

enih usluga ili u vidu li

nog predstavljanja, dolazi jedna od

najbitnijih faza u izgradnji sajta - planiranje. Kao i svakom drugom poslu, od toga
zavisi koliko konkretnog posla

ete imati u fazama koje slijede, a kvalitetno

planiranje

e doprinijeti ukupno boljem rezultatu.

Cjelokupno planiranje možemo podijeliti u dvije faze: osnovno planiranje u kojem
"profilirano" sajt i planiranje dizajna, u kojem na osnovu tih informacija planiramo
njegov izgled. Druga faza je bliža implementaciji - samom procesu izgradnje sajta.

19.1. Profiliranje

Prije svega, potrebno je definisati šta želite posti

i svojom pojavom na Internetu?

Postoji puno razloga zbog kojih možete odlu

iti "i

i online"; od li

ne prezentacije

ili objave portfolija, na koju se može odlu

iti svaki Internet korisnik ili

profesionalac u nekom poslu (slobodni dizajner/umjetnik, novinar i sl.), do
prezentacije firme ili

ak ponude odre

enih usluga ili aplikacija, što zna

i da

ete

Internet iskoristiti kao poslovnu alatku.

Sve mogu

nosti su tu, a na vama je da izaberete ono što želite. Ovdje

u odmah

upozoriti da posjedovanje web sajta košta i da dobro razmislite da li vam se isplati.
Jer, "tr

ati pred rudu" i napraviti sajt po svaku cijenu, a potom ga ne osvježavati,

pogrešan je pristup i antireklama, pa ga izbjegavajte. Na žalost, doma

i je web pun

ovakvih loših primjera.

Od razloga zbog kojeg

ete napraviti sajt zavisi sve što dolazi poslije: izbor

tehnologije koju

ete koristiti u njegovoj izgradnji, izbor web hosting provajdera,

pa na kraju i sam pojavni oblik, dizajn sajta. Jer, svima je jasno da

e se stranica

nog predstavljanja znatno razlikovati od prezentacije firme, web pretraživa

a ili

web prodavnice, kako u dizajnu, tako i u korištenim tehnologijama. To na kraju
najviše uti

e na kona

nu cijenu.

19.2. Planiranje dizajna

Nakon što ste odlu

ili kakav sajt želite imati, ulazite u drugu, konkretniju fazu. A u

njoj je najbitnije pravilno struktuirati sajt i odrediti koje informacije

ete na njemu

ponuditi. Svaki web sajt zasniva se na strukturi foldera, gdje svaki folder
predstavlja jednu sekciju u koju se smještaju web stranice sa sadržajem. Ve

sajtovi mogu imati puno sekcija, pa

ak i podsekcije, što zavisi isklju

ivo od

koli

ine ponu

enih informacija i dokumenata. U našim uslovima, najvjerovatnije je

ete završiti samo sa sekcijama.

Najbolji prijatelji u ovoj fazi bi

e vam dobri stari "analogni" papir i olovka.

Razmislite malo i skicirajte na papiru strukturu, odnosno podijelite informacije u

Programiranje za Internet

263

19.3.2. Fontovi

Fontovi su divna stvar,

ije ljepote na žalost gotovo nikako ne možemo iskoristiti

na Internetu. Kako nijedan korisnik nema instalirane iste fontove, to se pri izradi
web stranica moraju koristiti samo oni za koje ste sigurni da su prisutni na svakom
ra

unaru. Ovo obi

no sužava izbor na Arial, Times New Roman, Verdana i Courier

New. Iako su prve specifikacije HTML-a predvidjele da browser odabire fontove, a
dizajner samo bira vrstu (neproporcionalni, serif i sans serif), ovo se slabo koristi,
jer ve

ina dizajnera želi da ima što ve

u kontrolu nad onim što

e biti prikazano na

korisnikom ra

unaru. Zbog toga vodite ra

una koje

ete fontove koristiti. Naslove i

neke detalje za koje vam treba neki ki

asti font koji imate samo vi (i vaš prijatelj)

prikažite kao slike, ali umjereno zbog ve

e spomenutih razloga.

19.3.3. Navigacija

Bitan element svakog web sajta i stranice je navigacija. Pod navigacijom se
podrazumijeva skup linkova, predstavljen tekstualno ili grafi

ki, koji su u svakom

trenutku prisutni i mogu odvesti na glavne dijelove sajta. Sa svake podstranice
treba biti dostupna svaka druga sekcija i jasno naglašena mogu

nost povratka na

prethodnu ili osnovnu stranicu. Iz ove definicije mogu se zaklju

iti osobine koje

navigacija treba da posjeduje. Neprimjenjivanje svih pravila dovodi do konfuznog
sajta i lošeg snalaženja u njemu.

Na svakoj stranici mora se nalaziti identi

na navigacija, koja

e uvijek stajati na

istom mjestu. Uvijek mora sadržavati linkove na ili sve ili glavne sekcije sajta.
Navigacija mora biti uo

ljiva, ali ne prenapadna da odvla

i pažnju korisnika od

sadržaja. Naj

eš

e se koriste boje kontrastne ostatku stranice. Iako se ovo ne mora

uvijek striktno odnositi na navigaciju, korisnik uvijek mora biti u stanju pri prvom
pogledu na stranicu znati koja je to stranica i na šta se odnosi. Ovo se naj

eš

e radi

druga

ijim izgledom linka na navigaciji na željenu stranicu (koji više nije link).

Navigacija se naj

eš

e smješta u lijevu ili gornju stranu: Dosta rje

e sre

emo

rješenja navigacije s desne ili donje strane. Iako nema nekog pravila o tome kada
staviti navigaciju na neko mjesto, ponekad neke stvari ne možemo izbje

i. Za

veliki broj linkova preporu

uje se smještanje navigacije u lijevu ivicu zbog puno

više mjesta. Ako vam treba više sistema navigacije - jedan primami za cijeli sajt i
jedan sekundami koji

e biti prisutan samo na odre

enom skupu strana (jednoj

rubrici), primarna navigacija se smješta uz gornju ivicu, a sekundama (kontekstno
zavisna) uz lijevu ivicu. Kao što smo ve

naveli, nekog pravila kojeg bi se trebalo

pridržavati nema, pa ako ste nesigurni - eksperimentišite!

Preporu

ljivo je da korištenjem neke tehnologije navigacija uvijek bude u jednoj

datoteci koja

e se uvijek prikazivati na stranici putem razli

itih tehnologija

(server-side include, okviri...)

Programiranje za Internet

264

19.4. Izgradnja: sklapanje sadržaja u cjelinu

Suprotno popularnom mišljenju, dizajniranje sajta je tek pola (ili

ak manje) posla.

Zavisno od dizajna i tehnologija koje se odlu

ite primijeniti, sklapanje svih slika,

tekstova, skripti, opcionalno baza, CSS datoteka i mnogo

ega drugoga može biti

velik problem i postati no

na mora.

Spremili ste sve slike i tekstove koje

ete izbaciti na sajt, razradili dizajn i sada to

želite preto

iti u oblik koji

e browser prikazati. Iako nije neophodno, jako je

preporu

ljivo napraviti dobru strukturu foldera po kojima

ete razmještati datoteke.

Slike dobijaju svoj folder, svaka rubrika sajta svoj folder. Ako planirate imati više
razli

itih CSS datoteka sa razli

itim stilovima, napravite poseban folder za njih.

Tako umnogome olakšavate sami sebi snalaženje, a i drugim korisnicima
ažuriranje podataka na sajtu.

Pretpostavit

emo da ste ve

napravili neku bitmap sliku koja sadrži osnovni izgled

svih vaših stranica, te sve grafi

ke elemente koje

ete koristiti na njima. Ukoliko to

niste uradili, preporu

ujem da to u

inite. Dizajn sajta najbolje je raditi u nekom od

vektorskih alata, poput CorelDRAW-a ili Illustrator-a, jer je lakše. Tek kada ste
potpuno zadovoljni izgledom stranice unutar nekog grafi

kog programa, pre

ite na

pravljenje HTML-a.

Prije nego po

nete ovaj proces, odlu

ite koje

ete sve tehnologije koristiti. Da li

isklju

ivo tabele, okvire, slojeve.... Sve ima svoje prednosti i mane. Nakon toga u

grafi

kom programu prvo napravite svu grafiku. Uvijek je bolje staviti više manjih

slika nego jednu ve

u. Postiže se brže u

itavanje, posjetilac ima osje

aj da se nešto

dešava i - što je najbitnije - mogu se koristiti razli

iti formati zapisa, što pravilnom

primjenom umnogome smanjuje veli

inu i poboljšava kvalitet.

Nakon toga, napravite osnovni šablon (template) po kojem

ete praviti sve ostale

(pod)stranice. Time postižete konzistentnost, što je bitno kod web sajta, da bi on
ostavio dojam kompaktnosti i da bi posjetilac prilikom istraživanja po njemu uvijek
znao na kojem dijelu se nalazi.

Ako imate neke dijelove koji se ponavljaju (npr. navigacija, spisak linkova),
gledajte da oni stoje u jednoj datoteci koju

ete poslije samo pozivati, upotrebom

okvira, server-side include naredbi, razli

itih skripti i sl. Dosta

ete olakšati

održavanje, naknadno ažuriranje podataka, ispravljanje grešaka...

Kada završite proces izgradnje kostura sajta, sa

uvajte ga negdje, kao šablon, a tek

nakon postojanja rezervne kopije po

nite "punjenje" podacima. Dok se ovo može

initi glupo kod pravljenja manjih sajtova, svaka nadogradnja, dodavanje novih

sadržaja može po

i po zlu. Zato je rezervna kopija nešto što može uštediti puno

živaca.

Napravili ste sajt upotrebom raznih alata i tehnologija, sada osigurajte da web
server podržava sve tehnologije koje se na njemu koriste. ASP, server side
scripting i sl. moraju biti podržane i ispravno konfigurisane da bi radile. Zavisno od
servera i datoteka, mogu

a su ograni

enja na imena datoteka koja

ete koristiti

Programiranje za Internet

266

korištenu rezoluciju, a ona iznosi 800x600. Prakti

no, širina tabele u kojoj je

smješten sadržaj ne smije prelaziti 770 piksela. Ako ho

ete da budete sigurni da se

stranica ispravno prikazuje i na manjim rezolucija,a širina tabele treba biti
prilago

ena rezoluciji 640x480, odnosno ne smije prelaziti 600 piksela.

Drugi pristup je korištenje tabele sa relativnom širinom, pri

emu se sadržaj

prilago

ava veli

ini prozora browsera.

Oprezni trebate biti i kod izbora prave veli

ine fonta, jer ako izaberete premalen

font, na ve

im rezolucijama može biti ne

itak. Ra

unajte i da

e kompletna stranica

izgledati manja na ve

im rezolucijama.

Zbog svega ovoga se ne može dati neko generalno pravilo, ve

samo treba

prilagoditi stranicu korisnicima kojima je namijenjena. Zato uvijek isprobajte sve.

19.4.3. Podloge

HTML omogu

ava da se mali ponavljaju

i uzorci (pattem) mogu postavljati u

podlogu stranice. To su obi

no mali GIF ili JPEG dokumenti (32x32 ili 64x64

piksela) koji se brzo u

itavaju i mogu poboljšati izgled sajta. Zahvaljuju

i CSS-u,

mogu

e je posti

i da se slika pojavi samo jednom ili da se ponavlja samo

horizontalno ili vertikalno (duž x ili y - ose).

Budite pažljivi, jer prejak uzorak može tekst iznad njega u

initi ne

itkim. Koristite

svjetlija pisma na tamnijim podlogama i obrnuto. Je, ne zaboravite -

itljivost je

najbitnija!

19.4.4. GIF ili JPEG?

Dva se grafi

ka formata koriste na Internetu: JPEG i GIF. JPEG je format s

gubitkom (lossy) - radi postizanja što manje veli

ine datoteke, žrtvuje se odre

ena

koli

ina informacija (kvalitet slike). Veli

ina slike je obrnuto proporcionalna

kvalitetu. GIF nije format s gubitkom (non-lossy), pa

uva sve informacije uz

kompresiju. Zbog toga GIF naj

eš

e ima puno lošiju kompresiju. Pored toga, ima

ograni

en broj boja koje može

uvati (maksimalno 256). Najbolje

e poslužiti za

slike s malo boja ili slike male veli

ine. Pod ovim podrazumijevamo razne

logotipe, natpise i sl. GIF posjeduje još jednu korisnu osobinu: transparentnost.
Proglasimo jednu boju za providnu i umjesto nje se u browseru prikazuje ono što se
nalazi ispod slike.

JPEG je puno pogodniji za fotografije i ve

e slike s puno boja, kod kojih GIF ne

može puno u

initi. Najuo

ljiviji artifakti kod JPEG formata su na finim tonskim

prelazima iz jedne boje u drugu. Zato, zlatno pravilo kod dizajna - eksperimentišite
i pogledajte prije finalnog objavljivanja!

Programiranje za Internet

267

19.4.5. Web tehnologije

Okviri (frames)

Najkontroverznije pitanje na koje možete nai

i prilikom planiranja (i kasnije

izgradnje) sajta sigurno su okviri. Pomo

u njih se u istom prozoru browsera mogu

prikazati dvije ili više HTML datoteke, ali tako da zajedno

ine jednu cjelinu.

Okviri se naj

eš

e koriste za navigaciju, pri

emu se u neki od njih smješta HTML

dokumenti koji sadrži navigaciju: Tehni

ki - radi se o jednom HTML dokumentu u

kojem je opisan na

in na koji je podijeljen prozor browsera, te pokaziva

na druge

HTML dokumente koji se u

itavaju u svaki od okvira.

Prednost okvira je što je navigacija cijelo vrijeme dostupna posjetiocu stranice
(u

itana je u jedan od okvira), a ako sadrži puno grafike, štedi se propusnost i

dobija na brzini u

itavanja. Negativne strane su što programi koji prijavljuju

stranice na Internet pretraživa

e (nazivaju se botovi) mogu prijaviti samo neku

dokument stranicu, pa je mogu

e da prilikom pretrage posjetilac dobije samo

stranicu dokumenta, bez navigacije. I na kraju - pošto je HTML sa navigacijom
cijelo vrijeme u

itan, dosta je teško posti

i da linkovi ozna

avaju sekciju sajta na

kojoj se nalazite, pa treba izabrati neki drugi na

in.

Okvire treba koristiti samo kada je neophodno - kada dizajn zahtijeva da cijelo
vrijeme imate u

itanu navigaciju. Korisni su kod sajtova koji nude puno sadržaja,

jer se ubrzava u

itavanje i olakšava kretanje po sekcijama i dokumentima.

Slojevi (layers)

Ovo nema nikakve sli

nosti sa layerima iz Photoshop-a ili Fireworks-a. Rije

je o

okviru koji možemo smjestiti bilo gdje na stranici i kome možemo dati razli

ita

svojstva, a u njega staviti bilo koji sadržaj. Ovo omogu

ava dizajnerima veliku

slobodu, ali na žalost, zbog lošije podrške me

u starijim browserima, layere nije

preporu

ljivo uvijek koristiti. Neki browseri uopšte ne prikazuju layere, neki ih

nisu u stanju složiti kako je to zadano... Za neke stvari su neizbježni (padaju

meniji, recimo), no nastojte da njihovu upotrebu svedete na minimum zbog
problema sa kompatibilnosti. Vremenom

e ovi problemi nestati, što

e upotrebu

layera u

initi

eš

om.

Server-side include (SS)

Radi se o tome da se odre

eni HTML dokument pohrani na serveru jednostavnom

"include" komandom uklju

uje unutar drugog HTML dokumenta. I ova tehnologija

se naj

eš

e koristi za navigaciju, ali se može koristiti i za prikaz dijelova sajta koji

esto mijenjaju. Na ovaj na

in izbjegavate promjenu "glavnog" HTML sa

servera), ve

mijenjate samo pomenuti dokument, što u pojedinim situacijama

može olakšati administriranje i osvježavanje sajta. Za programere, rije

je o

obi

noj include naredbi poznatoj u svakom programskom jeziku. Unutar HTML

datoteke ubaci se link

<!- #include virtual="ime datoteke"-!>

Programiranje za Internet

269

"vrti" neki Unix, naj

eš

e Linux ili neki BSD. Ovo je ujedno najbitnije pitanje koje

morate razlu

iti.

ina doma

ih web hostinga provajdera nude razli

ite hosting "pakete" -

odre

enu koli

inu megabajta, odre

eni broj e-mail adresa, podršku za razli

ite

tehnologije i skripting jezik. Bitno je da provajder nudi neki na

in uvida u statistiku

(najbolje preko web browsera) posjeta sajta, te da su podržane tehnologije koje ste
koristili na sajtu. Cijene su razli

ite, pa

ete prema veli

ini sajta procijeniti šta vam

stvarno treba. Pojedini provajderi u paketu nude i registraciju domene.

Najbitnija stvar, koju ne

ete saznati iz cjenovnika, je podrška. Ako imate važan sajt

na kojem objavljujete puno novosti i drugih informacija, ne smijete dozvoliti ni sat
njegove neprisutnosti na Internetu. Zato je bitno da tehni

ko lice iz web presence

provajdera uvijek bude dostupno, bez obzira na doba dana ili no

i. Ovo je teško

saznati, ali je najbolje raspitati se kod drugih koji ve

koriste usluge odre

ene

firme. Na kraju krajeva, ako ve

nekoga i izaberete, iz iskustva

ete znati da li je

njihov odnos dovoljno poslovan, a provajdera uvijek možete promijeniti.

Za ve

inu doma

ih sajtova zbor nije toliko kriti

an. Ve

ina provajdera

e ispuniti

ekivanja i pokriti potrebe, pa onda ostaje da sinhronizujete potrebe sa ponudom.

19.6. Izbor domene

Ako surfate po doma

em web prostoru, sigurno ste primijetili sajtove sa

udnim

domenama. Izbjegavajte ovaj pristup! Domena je naziv po kojem

e neki posjetilac

i vašu stranicu. Ukucava se u URL polje u browseru, pa je bitno da bude što

kra

e (smanjuje mogu

nost greške) i da jasno opisuje namjenu sajta. Za firme,

najbolje je da oslikava njen naziv, a za projekte, potražite najkra

u mogu

u rije

koja i dalje asocira na dati projekat. Primjer dobrih imena domena su; trazi.com,
bosnia.ba, nt.ba i sl.

Za razumijevanje domena klju

no je shvatiti da se pod domenom naj

eš

podrazumijeva ime tipa "mojafirma.ba". Dok je "mojafirma" proizvoljno ime koje
vi birate (ako nije zauzeto). Zadnji desni dio imena (iza ta

ke) predstavlja

takozvanu Top Level Domenu. TLD domene su: .com, .net, .gov, .org, .infom,
.museum i neke druge. Postoje još jedan tip Top Level Domen-a, a to su državne
domene. Za BiH, nacionalni nastavak je .ba i treba ga što više koristiti, posebno za
lokalne firme, projekte, predstavljanje lokalnih informacija i sl. .hr je naravno
Hrvatska, .si Slovenija, .de je Njema

ka itd.

Domena .com dolazi do "commercial" i ozna

ava sve komercijalne projekte. Ovaj

nastavak treba koristiti samo ukoliko se sajtom obra

ate globalnoj Internet

populaciji - ako ste firma koja usluge/proizvode nudi na me

unarodnom nivou.

Ostali nastavci koriste se za odre

ivanje vrste organizacije koja stoji iza sajta ili

vrste sajta. Sajtovi državnih institucija

e imati .gov nastavak (od eng. Government

= vlada), .org

e koristiti razli

ite organizacije i sl.

Programiranje za Internet

270

Da bi ipak uz vrstu sajta vezali pripadnost državi, nastale su kombinacije. Doma

državne institucije trebale bi koristiti gov.ba domen, doma

e organizacije org.ba

domen i sl. iz kojih je jasna namjena sajta i pripadnost odre

enoj državi.

19.7. Prijavljivanje na pretraživa

Kona

no ste završili web sajt u koji ste uložili dosta vremena i truda, postavili ga

na neku Internet lokaciju, ali niko ga ne posje

uje. Niko uopšte ne zna da on

postoji. Jeste li ga prijavili na web pretraživa

Zamislite sljede

u situaciju: proteklih mjesec dana svu svoju energiju, vrijeme i

novac uložili ste u pravljenje web sajta. On je kona

no tu, završen i spreman za

start. Postavili ste ga na web, temeljito testirali i otklonili sve "404-file not found"
greške, sredili uvodnu stranicu koja izgleda poput crvenog saga prostrtog ispred
posjetitelja koji samo što nisu stigli. Ali, nakon po

etnog oduševljenja dolazi

razo

arenje - niko ne posje

uje vaš sajt!? Odnosno, niko osim vaše rodbine i

prijatelja. Šta ste krivo napravili? Ne svi

a im se dizajn? Ne. Sadržaj nije dovoljno

zanimljiv? Ne. Naslovnica je prenapadna? Ne. Stranice se predugo u

itavaju? Ne.

Pa šta je onda problem?

Niko uopšte i ne zna za vaš sajt! Me

u doslovce milijardama stranica koje postoje

na Internetu i hiljadama koje se svakodnevno prave, šanse da ljudi posjete vašu
web lokaciju tek onako, bez nekog specifi

nog razloga i povoda, tako su malene da

je o njima smiješno i govoriti. Potrebno je, dakle raširiti informaciju o vašem
novootvorenom web sajtu, o tome gdje se on nalazi i šta nudi. Potrebno je
omogu

iti surferima da saznaju za vas.

Prema podacima kompanija koje se bave Internet istraživanjima tržišta, 50% do
80% surfera za pronalaženje web sajtova koristi Internet pretraživa

e. Druga

ije

eno,

ak do 80% posjetitelja koji, barem u po

etku, posjete vaš sajt pronašli su

ga preko nekog od velikog broja Internet pretraživa

a. Takva situacija je

najlogi

nija, obzirom da je osnova svrha Altaviste, Googlea i drugih upravo to -

indeksiranje ogromnog broja stranica i omogu

avanje surferima da do

u do njih. Iz

toga nije teško zaklju

iti da je vaš primarni zadatak, nakon postavljanja web sajta

na Internet, njegovo prijavljivanje na što ve

i broj pretraživa

19.7.1. Meta tagovi

ina Internet pretraživa

a ima robota (ili bota), skriptu

iji je osnovni (i jedini)

zadatak da "surfa" po web stranicama širom Interneta i prikuplja podatke o njima.
Kasnije se ti podaci obra

uju i ubacuju u bazu podataka pretraživa

a, gdje postaju

dostupni svima za pretragu. Bitna stvar za vas, kao autora tek postavljenog i
nepoznatog web sajta, jesu upravo podaci koje roboti prikupljaju o web stranicama.
Iako to varira od robota do robota, naj

eš

i podaci su URL (adresa web sajta),

veli

ina stranica, datum zadnje izmjene i sadržaj TITLE i META tagova.

Programiranje za Internet

272

19.7.2. Prijava na pretraživa

Roboti i automatsko dodavanje na pretraživa

e su odli

na stvar, samo što su o

ajno

spori - zbog ogromnog broja novih stranica nekada zna pro

i i godinu dana dok

robot ne obi

e vašu stranicu i uvrsti je u bazu podataka. A vi ste upravo postavili

vaš sajt i želite dovu

i posjetitelje odmah, a ne za nekih godinu dana. Na sre

svaki od pretraživa

a i web direktorija omogu

ava ru

no dodavanje sajtova u baze.

Na nešto manju sre

u (da ne kažem na nesre

u), danas postoji puno pretraživa

a i

teško je na svaki od njih ru

no dodavali sajt.

Rješenje za to su "Submittion services" - servisi za prijavu web stranica na
pretraživa

e. Obzirom da su podaci koji se upisuju prilikom prijave na razli

ite

pretraživa

e dosta sli

ni, ljudi su se dosjetili da bi bilo korisno (i profitabilno)

napraviti skriptu koja bi jednom unesene podatke proslijedila ve

em broju

pretraživa

a. Tako jednim udarcem ubijete nekoliko (desetina) muha, ali i ostanete

lakši za odre

enu svotu novca. Danas postoji dosta ovakvih servisa, me

u kojima

vam barem polovica (ako ne i ve

ina) ne

e naplatiti ništa za te usluge. Naravno,

komercijalni servisi su kvalitetniji i obuhva

aju više pretraživa

a, a nisu pretjerano

skupi. Zato ih preporu

ujem za promociju web sajtova koji bi trebali donositi

svojim kreatorima profit. Za li

ne i nekomercijalne web sajtove

e sasvim dovoljan

biti neki besplatan servis za prijavu:

•

GetSubmitted
http://www.getsubmitted.com

Ovaj sajt nudi besplatnu prijavu vašeg sajta na veliki broj pretraživa

a uz

minimalan trud (samo upisivanje potrebnih podataka i klik na dugme) ali i više od
toga. Da biste mogli koristiti ovu uslugu, potrebno se prethodno registrovati (što je
besplatno). Nakon registracije dobijate pristup administratorskom dijelu unutar
kojeg se, pored skripte za prijavu sajtova na pretraživa

e, nalazi i obimna

dokumentacija koja

e vam biti od pomo

i pri promociji. Analizator meta tagova

e pomo

i svima koji se žele provjeriti ispravnost meta tagova na svom sajtu.

Posjedujete li više web sajtova, GetSubmmitted

e vam se svidjeti, jer nudi

mogu

nost prijave više sajtova, kao i postavljanje remindera glede termina prijave

(recimo, svake 3-4 sedmice želite ponovo prijaviti web sajt, jer nije ušao u izbor
mnogih pretraživa

a).

•

AddMe
http://www.addme.com

AddMe

e zanimati gotovo svakog webmastera, jer pored servisa za prijavu na

pretraživa

e nudi i niz drugih usluga. Recimo, ovdje možete pro

itati tekstove koji

se ti

u promocije na webu, ali i vo

enja poslovnih sajtova i uspješne prodaje

proizvoda preko Interneta. Treba li vam besplatna statistika, ova se adresa

ini

dobrim izborom. Ako ne znate sami ispisati meta tagove koji

e optimalno

"predstaviti" vaše stranice robotu, kliknite naMeta Tags Generator link u glavnom

Programiranje za Internet

273

meniju. Za postavljanje web shopa na sajt ne treba vam mnogo novaca i truda - sve
potrebno na

ete ovdje!

•

JimTools
http://www.jimtools.com

Poput prethodno opisanog sajta, JimTools

e ponuditi više od puke prijave na

pretraživa

e. Prije svega, možete pro

itati tutorijal o kreiranju pravilnih meta

tagova ili koristiti njihov alat za pravljenje meta tagova. Nakon toga, Jim nudi
prijavu na 42 pretraživa

a, 144 web direktorija i 1160 FFA stranica. Istina, ve

ina

tih lokacija nisu tako popularne i ne

e vam možda donijeti niti jednu posjetu, ali

obzirom na vaše vrijeme i trud koji iziskuje, alat je više nego dobar.

Aklo želite vidjeti koliko je vaš sajt popularan, odnosno koliko se drugih sajtova
linkuje na njega, preporu

ujem Link Popularity Analyzer. Position Tools

e vam

i kako sajt stoji na glavnim pretraživa

ima i web direktorijima. Sve u svemu,

sajt vrijedan posjeta.

•

Website Promotion Center
http://www.submit-away.com

Kako naslov kaže, ovaj sajt teži da bude centar za vašu promociju na webu. Ne

ete

tamo na

i skriptu koja

e vam omogu

iti prijavu na popularne pretraživa

e, mada

bi se to možda od sajta sa ovakvim imenom o

ekivalo: Ali

ete zato nai

i na

vrijedne informacije i linkove koji

e vam biti od velike pomo

i. Koje su prednosti

i nedostaci manualne (ru

ne) i automatske prijave na pretraživa

e? Šta sve trebate

raditi, a šta ne smijete raditi prilikom promovisanja sajta? Koje greške treba
izbjegavati po svaku cijenu? Odgovore na ova pitanja možete prona

i na gore

navedenoj adresi.

Posebno treba izdvojiti

ak 600 mjesta, odvojenih u kategorije, na koje možete

prijaviti sajt. Naravno, to

ete morati u

initi ru

no, ali su sajtovi lijepo opisani,

tako da možete izabrati one koji vam najviše odgovaraju.

Iako

e vam spomenuti servisi omogu

iti prijavu na Yahoo i druge velike web

diektorije (recimo Open Directory), mnogo je preporu

ljivije u ovim slu

ajevima

no se prijaviti. Razlog za to treba tražiti u

injenici da je nemogu

e automatski

optimizirati prijavu na Yahoo za sve sajtove (jer svaki sajt ima specifi

nosti), a

ispravno popunjen obrazac za prijavu na Yahoo

e vam kasnije donijeti barem 30%

od ukupnih posjeta sa svih pretraživa

a. Još jedna stvar je bitna, a zove se vrijeme.

Pravilno ispunjena i optimizirana prijava na Yahoo

e vas dovesti u ovaj direktorij

za oko tri sedmice (ako niste znali, ovaj vjerovatno najve

i web direktorij na

Internetu je ru

no administriran).

Programiranje za Internet

275

polje za komentar, u kome trebate upisati sve što bi moglo pomo

i osoblju koje

pregleda sajtove, a tako indirektno pomo

i i vama da što prije budete primljeni.

Još jedna važna stvar je da Yahoo sortira sajtove u kategorijama po abecednom
redu. Obzirom da kategorije znaju biti prili

no pune, sajt koji po

inje sa brojem ili

nekim od prvih slova abecede

e imati više klikova od nekog koji po

inje sa

recimo slovom Z. Ako ve

ne možete mijenjati naziv sajta, preporu

ujem da

izaberete kategoriju sa što manje sajtova u njoj.

Naziv, opis i URL su informacije po kojima Yahoo pretražuje sajtove u bazi, što ih

ini najvažnijima. Obratite posebnu pažnju na njih, posebno na opis. Pokušajte da

on bude fino složena re

enica, sa što više klju

nih rije

i koje odgovaraju sajtu.

Lista klju

nih rije

i odvojenih zarezom ne

e pro

i na Yahoo-u.

19.7.4. Doma

i pretraživa

Sve iznijete informacije vrijede za strane web pretraživa

e, dok

ete se na doma

morati ru

no prijavljivati. Na sre

u (ili nesre

u, prosudite sami), njih nema mnogo,

tako da vam prijava novog sajta na sve važnije doma

e pretraživa

e ne

e oduzeti

više od sat vremena. Što je prili

no isplativa investicija, posebno ako pravite sajt

iji je sadržaj namijenjen ili bi mogao biti interesantan posjetiteljima iz BiH.

Obzirom da se sli

ni jezici koriste u isto

nom i zapadnom susjedstvu, radi

postizanja ve

e popularnosti preporu

ujem prijavljivanje i na najpopularnije

pretraživa

e u susjednim zemljama (Hrvatska, Srbija, Crna Gora).

Neki doma

i pretraživa

•

http://www.pogodak.ba

•

http://www.trazi.com/

•

http://dir.bosnia.ba/

•

http://www.bosnia-online.com/

•

http://www.bosnia.com

19.8. Održavanje sajta

Za osnovno održavanje sajta koje bi uklju

ivalo neke male izmjene na tekstu,

pravljenje nekih novih stranica na osnovu šablona (template), mijenjanje cijena i
sli

no, nije potrebno neko veliko znanje, tako da je ovaj vid održavanja, na Zapadu

nazvan i self-maintenance, popularan, jer je pogodan za male i srednje firme. Još su
dva velika razloga popularnosti ovog vida održavanja: novac i kontrola.
Održavanje sajta je posao koji rijetko ko voli i zbog toga se od strane
profesionalaca masno napla

uje, što za male firme nije povoljno. S druge strane,

Programiranje za Internet

276

ina ljudi voli da ima kontrolu nad svojim drugim "ja" na Webu i želi da pravi

izmjene kad ho

e i koliko ho

e, a da ne mora svaki

as zvati druge u pomo

Stranice je potrebno redovno održavati. Ružno je da posjetioci do

u na stranicu i

tamo zateknu rije

i: "zadnje osvježavanje: 23.maj 1997". Redovnost brige o

stranici pokazuje da li se njen vlasnik brine o svojim posjetiocima i da li se trudi da
im uvijek dostavi najsvježiji mogu

i sadržaj. Zato - naglasak na redovnost i to na

dnevnoj bazi!

Važno je ve

u procesu planiranja stranice prilagoditi je kasnijem održavanju.

Stoga web dizajneri, obratite pažnju! Da li je stranica koju ste napravili laka za
izmjene? Da li je lako na nju dodavati tekst i slike? Nemojte da sami sebi u po

etku

zagor

ate život time što

ete poslije gubiti sate na održavanju. Ali isto tako,

ukoliko ne

ete biti zaduženi za održavanje (što je najvjerovatnije), zapitajte se ho

li se taj koji

e naslijediti stranicu od vas mo

i sna

i u vašem kodu? Potrudite se

da ostavite sve

isto iza sebe - to je najlakši put da zaradite poštovanje kolega.

Jedan od osnovnih zadataka je povratna informacija (feedback). Nakon što
postavite sajt online, dobijat

ete masu e-mailova, na koje neizostavno morate

odgovarati, što spada u aktivnosti održavanja. Ovo je posebno važno za vlasnike
komercijalnih sajtova. Jedno istraživanje u SAD pokazalo je da prosje

ni korisnik,

nakon što pošalje e-mail sa pitanjem, o

ekuje bilo kakav odgovor u roku od 1 sat!

Stoga se trudite da odgovorite što brže možete. Ukoliko ne možete sti

i da

odgovorite na sve, bilo bi dobro da napravite jedan šablonski tekst, koji

ete slati u

obliku automatskog odgovora na svaki e-mail, a u kome

ete objasniti da je mail

primljen id a

e posjetitelj konkretan odgovor dobiti

im prije. Na taj na

in, on

e ste

i utisak da je zapostavljen i da govori u prazno.

Izuzetno važno je i da nemate tzv. mrtvih linkova, posebno na druge sajtove. Zato
se oni redovno provjeravaju i održavaju da budu što je mogu

e više "up-todate". Za

ovaj posao postoji nekoliko dobrih shareware alata, a i noviji editori imaju svoje
alate koji provjeravaju i prijavljuju mrtve linkove. Držanje svježih i korisnih
linkova na stranici može u

initi

uda, dovode

i ponovno posjetioce i pove

avaju

promet i prodornost sajta.

Koliko god da pažljivo kucate tekst, uvijek

e se potkrasti barem nekoliko greškica

(Murphy-jev zakon). U po

etnim stadijima održavanja zato je korisno pažljivo

provjeravati tekst, tragaju

i za tip-felerima.

Kao i u svakom biznisu, ono što se od poslovnih partnera traži i cijeni je
pouzdanost. I u održavanju sajtova, pouzdanost je važna i tražena vrlina. Kako? Na
primjer, ako ste obe

ali da

ete staviti novi sadržaj na sajt svake sedmice, potrudite

se da to i obavite! NIKAD, nikad ne obe

avajte ono što ne možete ispuniti! To ruši

vaš ugled.

Posjetiocu koji se ponovo, nakon nekog vremena, vra

a na sajt može biti teško

sna

i se i razlu

iti šta je novo i šta se promijenilo od prošle posjete. Pomozite mu

na taj na

in što

ete jasno ozna

iti nove stvari. Isto tako, razgrani

ite i sadržaj koji

Programiranje za Internet

278

20. Literatura

[1]

Dario Sušanj, Dragan Petric,

Velika knjiga o World Wide Webu, ZNAK,

Zagreb, 1996, ISBN: 953-189-015-3

[2]

Peter Aitken, Phil Syme., Sams Teach Yourself Visual Basic .NET Web
Programming in 21 Days, ISBN: 978-0-672-32236-5; 2001;

[3]

Khristine Annwn Page, Macromedia Dreamweaver MX: Training from the
Source Macromedia Press; 2002, ISBN: 0201799294

[4]

H. M. Deitel, P. J. Deitel, A. B. Goldberg: Internet & World Wide Web How
to Program (3rd Edition), ISBN: 0131450913

[5]

C.D. Knuckles: Introduction to Interactive Programming on the Internet:
Using HTML and JavaScript, ISBN: 047138366X

[6]

S. Bishop: Macromedia Dreamweaver 8 Revealed, ISBN: 1418843083

[7]

H.E. Williams, D. Lane: Web Database Applications with PHP & MySQL,
ISBN: 0596005431

[8]

Emir Jusi

, BH Webmasters, http://www.most-art.de/phptutorial/index.php

[9]

Microsoft Windows Vista: Sidebar gadgets,
http://www.microsoft.com/windowsvista/features/foreveryone/sidebar.mspx

[10]

Brian Teutsch, Microsoft Sidebar for Windows Vista Beta 2, Gadget
Development Overview, Microsoft Windows White Paper, 2006,
http://microsoftgadgets.com/Sidebar/DevelopmentOverview.aspx

[11]

lanci iz magazina INFO, brojevi 26, 32, 33, 47, 49, 51, 87, 90-91, 99