IT Prirucnik SR

VISOKA TEHNIKA KOLA
STRUKOVNIH STUDIJA SUBOTICA

INTERNET TEHNOLOGIJE
prirunik za laboratorijske vebe

Zlatko ovi
Subotica 2007
INTERNET TEHNOLOGIJE prirunik za vebe

I

Sadraj

Sadraj I
Predgovor II
XHTML 1
Java Script 39
XHTML zadaci za proveru znanja 47
CSS 59
CSS zadaci za proveru znanja 80
XML 96
PHP 100
PHP zadaci za proveru znanja 143
Dodatak 148
Instalacija WAMP servera 149
Postavljanje web prezentacija na kolski web server 155
Korisni linkovi 157
Literatura 159


II

Predgovor

Prirunik je nastao kao elja autora da doprinese boljem upoznavanju studenata sa
internet tehnologijama. On pokriva tematiku XHTML, JavaScript, CSS, XML, PHP i
MySQL internet tehnologija.

U okviru predmeta Internet tehnologije studenti se upoznavaju sa osnovama web
programiranja, kreiranja statikih i dinamikih web stranica i korienjem baza
podataka na webu.

Sadraj prirunika tematski u potpunosti odgovara planu i programu predmeta
Internet tehnologije prema akreditovanom studijskom programu Visoke tehnike
kole strukovnih studija u Subotici i usklaen je sa kolskim udbenikom Internet
tehnologije profesora Dr. ule Metera .

Prirunik sadri 93 reena zadataka, dok se u dodatku mogu nai uputstva za
instalaciju Wamp servera i postavljanje internet prezentacija na kolski web server.

Prirunik je dostupan u elektronskom formatu na web adresama
http://www.it.vts.su.ac.yu i http://literatura.vts.su.ac.yu.

Zlatko ovi dipl.ing.
chole@vts.su.ac.yu
Subotica , septembar 2007. godine


1

XHTML


2
1. Zadatak

Kreirajte jedan jednostavan XHTML dokument koji sadri deklaraciju, zaglavlje i telo.
Ispisati tekst Hello World (slika 1.1.).

Slika 1.1.

Reenje:

<?xml ver si on=" 1. 0" encodi ng=" UTF- 8" ?>
<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" >
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml : l ang=" sr " l ang=" sr " >
<head>
<t i t l e>Zadat ak 1</ t i t l e>
</ head>
<body>Hel l o Wor l d! </ body>
</ ht ml >

Listing 1.1. XHTML kod 1. zadatka

2. Zadatak

Kreirajte jedan XHTML dokument koji prikazuje tekst prikazan na slici. Kreirati novi
paragraf, koristiti komentar, prelom teksta i specijalni karakter za ubacivanje praznog mesta
(slika 1.2.).

Slika 1.2.

3

Reenje:

<head>
</ head>
<body>

<! - - ovo j e koment ar - - >

Vi soka t ehni cka skol a vt s
 
Subot i ca

Ovo j e novi par agr af . 

</ body>
</ ht ml >


3. Zadatak

Kreirajte XHTML dokument, koji ispisuje line podatke studenata. Koristite sledee
elemente: strong, br, b, p, em, i, u, address (slika 1.3.).

Slika 1.3.


4

Reenje:

<head>
</ head>
<body>
<st r ong>Li cni podaci </ st r ong> 
St udent i : 

Pet ar Pet r ovi c Beogr adska 25 
Subot i ca 
024- 333- 333

<addr ess>Mar ko Mar kovi c Mar ka Kr al j evi ca 12 Subot i ca</ addr ess>
</ body>
</ ht ml >


4. Zadatak

Kreirajte jedan XHTML dokument, koji prikazuje dve horizontalne linije i naslov Matrix
ispisuje u 6 nivoa (slika 1.4.).

Slika 1.4.


5
Reenje:

<head>
</ head>
<body>
<hr / >
<h1>Mat r i x</ h1>
<h2>Mat r i x</ h2>
<h3>Mat r i x</ h3>
<h4>Mat r i x</ h4>
<h5>Mat r i x</ h5>
<h6>Mat r i x</ h6>
<hr / >
</ body>
</ ht ml >


5. Zadatak

Kreirajte jedan XHTML dokument, koji prikazuje tekst sa slike 1.5. Koristite sledee
elemente: hr, big, code, small. Proizvoljno koristite title atribut.

Slika 1.5.

Reenje:

<head>
</ head>
<body>
<hr / >
<bi g t i t l e=" MATRI X I S EVERYWHERE! " >MATRI X - Fut ur e i s now! </ bi g>
 
<code>
01010110101001110101010100001

6
00111010011010110100010
11010101101001010
010101010101
 
Syst emer r or ?!
</ code>
 
End i s not her e! 
<smal l >End i s not her e! </ smal l >
<hr / >
</ body>
</ ht ml >


6. Zadatak

Kreirajte jedan XHTML dokument koji prikazuje tekst sa slike 1.6. Koristite h2, sup i sub
elemente (slika 1.6.).

Slika 1.6.

Reenje:

<head>
</ head>
<body>
<h2 xml : l ang=" sr " l ang=" sr " >E=mc
2
 
Voda=H20
</ h2>
</ body>
</ ht ml >



7
7. Zadatak

Kreirajte XHTML dokument koji je podeljen na dva dela kao to je prikazano na slici 1.7.
Koristite div, dfn, cite, pre, blockquote elemente i id atribut.

Slika 1.7.

Reenje:

<head>
</ head>
<body>
<di v i d=" pr ogr am" >
<df n>PHP j e skr aceni ca od Hyper t ext Pr epr ocessor . </ df n>
 
<ci t e>PHP pr ogr am</ ci t e>
<pr e>
mt _sr and( ( doubl e) mi cr ot i me( ) *1000000) ;
$l engt h=mt _r and( 5, 8) ;
$down=97;
$up=122;
$i =0;
$passwor d=" " ;

</ pr e>
</ di v>
<di v i d=" def i ni ci j a" >
<bl ockquot e >
PHP j e pr ogr amski j ezi k i nt er pr et er skog t i pa namj enj en i zr adi sof t ver ski h

8
apl i kaci j a koj e se i zvr savaj u na Wi ndows i l i na UNI X- ol i ki mser ver i ma ( npr .
Li nux) . Podr zava i pr ocedur al no i obj ekt no or j ent i sano pr ogr ami r anj e.
Naj cesce se kor i st i za i zr adu di nami cki h I nt er net st r ani ca.
</ bl ockquot e>
</ di v>
</ body>
</ ht ml >


8. Zadatak

Kreirajte XHTML dokument prema slici 1.8. Koristite sledee elemente: acronym, tt, code,
kbd, samp, var, ins, del. Proizvoljno koristite title atribut.

Slika 1.8.

Reenje:

<head>
</ head>
<body>
<acr onymt i t l e=" Hyper t ext Pr epr ocessor " >PHP</ acr onym> pr ogr am.
 
<t t >
echo ( " Hel l o Wor l d" ) ;

9
</ t t >
 
<code>
$sql =" updat e podaci set gr ad=' Subot i ca' wher e i me=' Mar ko' " ;
</ code>
 
<kbd>
$r esul t = mysql _quer y( $sql ) or di e( " Er r or ! " ) ;
</ kbd>
 
<samp>
def i ne( " pi " , 3. 14) ;
</ samp>
 
<var >$pi =3. 14</ var >
 
by J ohn 
<del >www. t f q. com</ del >
</ body>
</ ht ml >


9. Zadatak

Kreirajte jedan XHTML dokument, u kojem se nalaze hiperlinkovi
- ka drugoj stranici (drugi.html)
- ka web adresi http://www.vts.su.ac.yu (slika 1.9.)

Slika 1.9.
Reenje:

<head>
</ head>

10
<body>
<h2>Li nkovi </ h2>
<a hr ef =" dr ugi . ht ml " t i t l e=" i nf or maci j e o nama" >Li nk</ a> 
<a hr ef =" ht t p: / / www. vt s. su. ac. yu" t i t l e=" Vi soka t ehni cka skol a Subot i ca"
t ar get =" _bl ank" >Vi soka t ehni cka skol a Subot i ca</ a> 
</ body>
</ ht ml >


10. Zadatak

Kreirajte XHTML dokument u kome se pojavljuju tekst prikazan na slici i sledei
hiperlinkovi
- ka sidru xhtml koje se nalazi u istom dokumentu
- ka sidru css koje se nalazi u istom dokumentu
- ka sidru pocetak koje se nalazi u istom dokumentu
- ka sidru portfolio koji se nalazi na adresi http://www.vts.su.ac.yu (slika 1.10.)

Slika 1.10.


11
Reenje:

<head>
</ head>
<body>
<a name=" pocet ak" > </ a>
 
<a hr ef =" #xht ml " >- xht ml </ a>
 
<a hr ef =" #css" >- css</ a>
 
<a hr ef =" ht t p: / / www. vt s. su. ac. yu/ i ndex. php#php" >- php</ a>
 
<a name=" xht ml " >
<bi g>XHTML</ bi g>
 
St a j e uopst e XHTML? Evo st var no kr at kog odgovor a koj i daj emo l j udi ma na
zabavama: XHTML j e podskup Pr osi r i vog J ezi ka Oznacavanj a ( Ext ensi bl e Mar kup
Language - XML) koj i j e pr oj ekt ovan da se ponasa kao HTML, samo sa bol j i m
mat er i j al om. XHTML j e naj novi j i al at za r azvoj Web st r ani ca.
</ a>
 
 
<a name=" css" >
<bi g>CSS</ bi g>
 
CSS j e skr aceni ca od " Cascadi ng St yl e Sheet s" , a sl uzi za def i ni sanj e
st i l ova koj i odr edj uj u i zgl ed HTML el emenat a . Ti st i l ovi se pohr anj uj u u
" St yl e Sheet s" , ext er ne f aj l ove sa ekst enzi j om. css , i l i j ednost avno se
pi su u zagl avl j u HTML dokument a.
Ekst er ni st i l ovi su i naj bol j i j er omogucuj u ust edu vr emena pr i r adu i pr i
r edi zaj ni r anj u vaseg HTML dokument a.
CSS su i zmi sl i l i i speci f i ci r al i devel oper i i z ( Wor l d Wi de Web Consor t i um)
W3C- a, a poj avi l i su se sa HTML- om4. 0 kao r esenj e koj e j e pr oi zasl o i z sve
vece pot r ebe za odvaj enj emsadr zaj a st r ani ce od di zaj na.
CSS su podr zal i svi vodeci I nt er net br owser i ( I E, Fi r ef ox, Oper a. . . ) .
</ a>
<a hr ef =" #pocet ak" >pocet ak</ a>
</ body>
</ ht ml >



12
11. Zadatak

Kreirajte XHTML dokument koji prikazuje dve slike u stvarnoj veliini i tekst prikazan na
slici 1.11. Druga slika predstavlja hiperlink koji vodi na adresu http://www.vts.su.ac.yu. Tekst
koji sledi nakon slika potrebno je pozicionirati horizontalno u sredinu u odnosu na sliku.

Slika 1.11.
Reenje:

<head>
</ head>
<body>

<! - -
moguci f or mat i sl i ke: gi f , j pg, bmp, png

moguce vr ednost i at r i but a al i gn:
t op

13
bot t om
mi ddl e
l ef t
r i ght
- - >
pr i mer upot r ebe sl i ka
 
<a hr ef =" ht t p: / / www. vt s. su. ac. yu" t i t l e=" Vi soka t ehni cka skol a Subot i ca"
t ar get =" _bl ank" >

</ a>
sl i ka koj a pr edst avl j a l i nk
</ body>
</ ht ml >


12. Zadatak

Kreirajte XHTML dokument koji prikazuje neureenu listu (slika 1.12.).

Slika 1.12.
Reenje:

<head>
</ head>
<body>
I nt er net t ehnol ogi j e
<ul >
<l i >xht ml </ l i >

14
<l i >css</ l i >
<l i >xml </ l i >
<l i >php</ l i >
<l i >j ava</ l i >
</ ul >
</ body>
</ ht ml >


13. Zadatak

Kreirajte XHTML dokument koji prikazuje ureenu listu (slika 1.13.)

Slika 1.13.

Reenje:

<head>
</ head>
<body>
I nt er net t ehnol ogi j e
<ol >
<l i >css</ l i >
<l i >xml </ l i >
<l i >php</ l i >
<l i >j ava</ l i >
</ ol >
</ body>
</ ht ml >


15
14. Zadatak

Kreirajte XHTML dokument koji prikazuje liste prikazane na slici 1.14.

Slika 1.14.

Reenje:

<head>
</ head>
<body>
Li st a 1
<ol >
<l i >css</ l i >
</ ol >

Li st a 2
<ol st ar t =" 5" >
<l i >php</ l i >
<l i >j ava</ l i >
</ ol >
</ body>
</ ht ml >



16
15. Zadatak

Kreirajte XHTML dokument koji prikazuje definicionu listu sa slike 1.15. Koristiti sledee
elemente: dl, dt, dd.

Slika 1.15.
Reenje:

<head>
</ head>
<body>
<st r ong>I NTERNET TEHNOLOGI J E</ st r ong>
<dl >
<dt >XHTML</ dt >
<dd>XHTML j e podskup Pr osi r i vog J ezi ka Oznacavanj a ( Ext ensi bl e Mar kup
Language - XML) koj i j e pr oj ekt ovan da se ponasa kao HTML, samo sa bol j i m
mat er i j al om. XHTML j e naj novi j i al at za r azvoj Web st r ani ca. 
</ dd>
<dt >PHP</ dt >
<dd>PHP pr edst avl j a skr aceni cu od Hyper t ext Pr epr ocessor . </ dd>
</ dl >
</ body>
</ ht ml >



17
16. Zadatak

Kreirajte XHTML dokument koji prikazuje tabelu sa slike 1.16. Za kreiranje tabele koristiti
sledee elemente: table, tr, td i caption, kao i atribute cellpadding, cellspacing, border i align.

Slika 1.16.
Reenje:

<head>
</ head>
<body>
<t abl e bor der =" 1" al i gn=" cent er " cel l paddi ng=" 5" cel l spaci ng=" 5" >
<capt i on>Tabel a</ capt i on>
<t r >
<t d>vt s</ t d>
<t d>Subot i ca</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >



18
17. Zadatak

sledee elemente: table, tr, td i caption, kao i atribute border i align.

Slika 1.17.
Reenje:

<head>
</ head>
<body>
<t abl e bor der =" 1" al i gn=" cent er " >
<capt i on>Tabel a</ capt i on>
<t r >
<t d>cel i j a 1. 1</ t d>
<t d>cel i j a 1. 2</ t d>
<t d>cel i j a 1. 3</ t d>
</ t r >
<t r >
<t d>cel i j a 2. 1</ t d>
<t d>cel i j a 2. 2</ t d>
<t d>cel i j a 2. 3</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >


18. Zadatak

sledee elemente: table, thead, tbody, tfoot, tr, td, i caption, kao i atribute border i align.


19

Slika 1.18.

Reenje:

<head>
</ head>
<body>

<capt i on>St udent i </ capt i on>
<t head>
<t r >
<t h>I me</ t h>
<t h>Pr ezi me</ t h>
<t h>Odsek</ t h>
</ t r >
</ t head>
<t f oot >
<t r >
<t h>I me</ t h>
<t h>Pr ezi me</ t h>
<t h>Odsek</ t h>
</ t r >
</ t f oot >
<t body>
<t r >
<t d>Pet ar </ t d>
<t d>Pet r ovi c</ t d>
<t d>i nf or mat i ka</ t d>
</ t r >
<t r >
<t d>Mar ko</ t d>
<t d>Mar kovi c</ t d>
<t d>el ekt r oni ka</ t d>
</ t r >

20
<t r >
<t d>Sr ecko</ t d>
<t d>Sr eckovi c</ t d>
<t d>masi nst vo</ t d>
</ t r >
</ t body>
</ t abl e>

</ body>
</ ht ml >


19. Zadatak

sledee elemente: table, thead, tbody, tr, td i caption, kao i atribute border, align i rowspan.

Slika 1.19.
Reenje:

<head>

21
</ head>
<body>
<capt i on>XHTML t abel a</ capt i on>
<t head>
<t r >
<t h>I nf or maci j e</ t h>
<t h>Sl i ka</ t h>
</ t r >
</ t head>
<t body>
<t r >
<t d>Pet ar </ t d>
<t d r owspan=" 2" ></ t d></ t r >
<t r ><t d>Pr ogr am</ t d></ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >


20. Zadatak

sledee elemente: table, thead, tbody, tr, td i caption, kao i atribute border, align, cellpadding,
cellspacing i colspan.

Slika 1.20.

Reenje:

<head>
</ head>
<body>

22
<t abl e bor der =" 1" al i gn=" cent er " cel l paddi ng=" 5" cel l spaci ng=" 5" >
<capt i on>Kr edi t i </ capt i on>
<t head>
<t r >
<t d>XHTML</ t d>
<t d>CSS</ t d>
<t d>PHP</ t d>
</ t r >
</ t head>
<t body>
<t r >
<t d col span=" 3" >maksi mal no 30 poena</ t d>
</ t r >
</ t body>
</ t abl e>

</ body>
</ ht ml >


21. Zadatak

sledee elemente: table, thead, tbody, tfoot, tr, td i caption, kao i atribute border, align,
cellpadding, cellspacing, rowspan i colspan.

Slika 1.21.
Reenje:

<head>
</ head>
<body>
<t abl e bor der =" 1" al i gn=" cent er " cel l paddi ng=" 2" cel l spaci ng=" 2"

23
wi dt h=" 800" bgcol or =" #f f 0000" >
<capt i on>Konkur s</ capt i on>
<t head>
<t r >
<t h>Fi r ma</ t h>
<t h>Posao</ t h>
<t h col span=" 2" >I st i ce</ t h>
</ t r >
</ t head>
<t f oot >
<t r >
<t d col span=" 4" al i gn=" cent er "
bgcol or =" #f f f f 00" ><st r ong>www. i t j obs. co. yu</ st r ong></ t d>
</ t r >
</ t f oot >
<t body>
<t r >
<t d>West net </ t d>
<t d val i gn=" t op" wi dt h=" 150" >Web devel oper </ t d>
<t d>11. 11. 2007. </ t d>
<t d r owspan=" 4" wi dt h=" 170" ></ t d>
</ t r >
<t r >
<t d>Pr oWebi ng</ t d>
<t d>Web pr ogr ammer </ t d>
<t d>12. 10. 2007. </ t d>
</ t r >
<t r >
<t d>Net Pr o</ t d>
<t d>Syst emAdmi ni st r at or </ t d>
<t d>12. 3. 2007. </ t d>
</ t r >
<t r >
<t d>Web Max</ t d>
<t d>Syst emAdmi ni st r at or </ t d>
<t d>12. 3. 2007. </ t d>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >



24
22. Zadatak

Kreirajte XHTML dokument koji deli stranicu na okvire prikazane na slici 1.22. Za kreiranje
okvira proizvoljno koristiti atribute noresize, scrolling i frameborder.

Slika 1.22.
Reenje:

<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Fr ameset / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- f r ameset . dt d" >
<head>
<t i t l e>Zadat ak 22</ t i t l e></ head>
<f r ameset r ows=" 25%, *" >
<f r ame i d=" okvi r 1" name=" okvi r 1" sr c=" okvi r 1. ht ml " nor esi ze=" nor esi ze"
scr ol l i ng=" aut o" f r amebor der =" 0" / >
<f r ame i d=" okvi r 2" name=" okvi r 2" sr c=" okvi r 2. ht ml " scr ol l i ng=" no"
f r amebor der =" 1" / >
<nof r ames>
<body>
<! - - web br owser ne podr zava okvi r e - - >
Vas web br owser ne podr zava okvi r e
</ body>
</ nof r ames>
</ f r ameset >
</ ht ml >

Listing 1.22.1. XHTML kod 22. zadatka


25
<head>
<t i t l e>Okvi r 1</ t i t l e>
</ head>
<body>
Ovo j e okvi r 1 <a hr ef =" . . / 17. ht ml " t ar get =" okvi r 3" >dr ugi okvi r </ a>
<! - -
_bl ank - ot var a f aj l u sasvi mnovompr ozor u br ouzer a
_sel f - ot var a f aj l u t ekucemokvi r u
_par ent - zamenj uj e f aj l sa t ekucompost avkomokvi r a novi mf aj l om
_t op - br i se sve okvi r e i uci t ava f aj l u t ekucembr ouzer u
i d okvi r a i dent i f i kat or okvi r a
- - >
</ body>
</ ht ml >

Listing 1.22.2. XHTML kod okvir1.html dokumenta

<head>
<t i t l e>Okvi r 2</ t i t l e></ head>
<body>Ovo j e okvi r 2</ body>
</ ht ml >


23. Zadatak


Slika 1.23.

26
Reenje:

<head>
</ head>

<f r ameset col s=" 25%, *, 50%" >




<nof r ames>
<body>
</ body>
</ nof r ames>

</ f r ameset >
</ ht ml >

Listing 1.23.1. XHTML 23. zadatka

<head>
<t i t l e>Okvi r 3</ t i t l e>
</ head>
<body>

Ovo j e okvi r 3

</ body>
</ ht ml >


Napomena: Sadraj dokumenata okvir1.html i okvir2.html su isti kao u 22. zadatku. Ovi
dokumenti se koriste i u 24. i 25. zadatku.


27

24. Zadatak


Slika 1.24.
Reenje:

<head>
</ head>
<f r ameset col s=" 25%, *" >
</ f r ameset >
<nof r ames>
<body>
</ body>
</ nof r ames>
</ f r ameset >
</ ht ml >


28

25. Zadatak


Slika 1.25.
Reenje:

<head>
</ head>
<f r ameset col s=" 25%, *" >
</ f r ameset >
<nof r ames>
<body>
</ body>
</ nof r ames>
</ f r ameset >
</ ht ml >



29

26. Zadatak

Kreirajte XHTML dokument koji kreira okvir unutar dokumenta. Za kreiranje okvira koristiti
element iframe i njegove odgovarajue atribute (slika 1.26.).

Slika 1.26.
Reenje:

<head>
</ head>
<body>

<h1>I nt er net </ h1>


Vas br ouzer ne podr zava i f r ame

</ body>
</ ht ml >



30
27. Zadatak

Kreirajte XHTML dokument koji vri prikaz jednog Java aplet-a (slika 1.27.).

Slika 1.27.
Reenje:

<head><t i t l e>Zadat ak 27</ t i t l e></ head>
<body>
<obj ect codet ype=" appl i cat i on/ j ava" cl assi d=" j ava: ap1. cl ass" wi dt h=" 300"
hei ght =" 50" ></ obj ect >
</ body>
</ ht ml >


28. Zadatak

Kreirajte XHTML dokument koji prikazuje obrazac za prijavu prikazan na slici 1.28. Taster
ponisti brie sve unete podatke dok taster posalji alje podatke u skript edit.php, koji prihvata
i obrauje poslate podatke. Kod kreiranja polja za unos koristiti atribute maxlength i size.
Metod slanja podataka je post.

Slika 1.28.

31
Reenje:

<head>
</ head>
<body>
<f or mi d=" f or ma" name=" f or ma" met hod=" post " act i on=" edi t . php" >
<l abel >kor i sni k: </ l abel > 
 
<l abel >l ozi nka: </ l abel >
 



</ f or m>
</ body>
</ ht ml >

Listing 1.28. XHTML kod 28.zadatka

29. Zadatak

Kreirajte XHTML dokument koji vri prikaz anketnog obrasca sa slike 1.29. Taster za slanje
podataka kreirati preko slike. Uneti podaci se alju u skript edit.php, koji prihvata i obrauje
poslate podatke. Kod jednog od radio tastera proizvoljno koristiti atribut checked. Metod
slanja podataka je post.

Slika 1.29.


32
Reenje:

<head>
</ head>
<body>
<f or m name=" f or ma" met hod=" post " act i on=" edi t . php" >
Koj i web pr ogr amski j ezi k kor i st i s?
 
 
PHP
 
ASP
 
J AVA
 
PERL
 
 

</ f or m>
</ body>
</ ht ml >


30. Zadatak

Kreirajte XHTML dokument koji vri prikaz anketnog obrasca sa slike 1.30. Taster ponisti
brie sve unete podatke dok taster posalji alje podatke u skript edit2.php, koji prihvata i
obrauje poslate podatke. U form elementu koristiti metod slanja podataka post.

Slika 1.30.

33
Reenje:

<head>
</ head>
<body>
<f or mi d=" f or ma" name=" f or ma" met hod=" post " act i on=" edi t 2. php" >
Koj e web pr et r azi vace kor i st i s?
 
www. googl e. com
 
www. yahoo. com
 
www. l ycos. com
 
www. pogodak. co. yu
 


</ f or m>
</ body>
</ ht ml >


31. Zadatak

Kreirajte XHTML dokument koji vri prikaz obrasca za slanje slike. Taster ponisti brie sve
unete podatke dok taster posalji alje podatke u skript slika.php, koji prihvata i obrauje
poslate podatke. U form elementu koristiti enctype atribut i njegovu odgovarajuu vrednost.
Metod slanja podataka je post (slika 1.31.).

Slika 1.31.

34
Reenje:

<head>
</ head>
<body>
<f or mname=" f or ma" met hod=" post " act i on=" sl i ka. php"
enct ype=" mul t i par t / f or m- dat a" >
Posal j i svoj u sl i ku!
 
 
<l abel >sl i ka: </ l abel >
 
 

</ f or m>
</ body>
</ ht ml >


32. Zadatak

Kreirajte XHTML dokument koji vri prikaz anketnog obrasca sa slike 1.32. Taster ponisti
brie sve unete podatke dok taster posalji alje podatke u skript film.php, koji prihvata i
obrauje poslate podatke. U okviru elementa select koristiti atribute multiple i size. Metod
slanja podataka je post.

Slika 1.32.


35
Reenje:

<head><t i t l e>Zadat ak 32</ t i t l e></ head>
<body>
<f or mname=" f or ma" met hod=" post " act i on=" f i l m. php" >
Koj i od ponudj eni h f i l mova si pogl edao? Mozes i vi se i zabr at i ! 
<sel ect name=" f i l m" mul t i pl e=" mul t i pl e" si ze=" 3" >
<opt gr oup l abel =" sci - f i " >
<opt i on val ue=" mat r i x" >Mat r i x</ opt i on>
<opt i on val ue=" t er mi nat or " >Ter mi nat or </ opt i on>
<opt i on val ue=" st ar war s" >St ar War s</ opt i on>
</ opt gr oup>
<opt gr oup l abel =" r at ni " >
<opt i on val ue=" d- day" >D- Day</ opt i on>
<opt i on val ue=" di r t y dozen" >Di r t y Dozen</ opt i on>
<opt i on val ue=" bl ack hawk down" >Bl ack Hawk Down</ opt i on>
</ opt gr oup>
</ sel ect > 
</ f or m>
</ body>
</ ht ml >


33. Zadatak

Kreirajte XHTML dokument koji vri prikaz obrasca sa slike 1.33. Taster ponisti brie sve
unete podatke dok taster posalji alje podatke u skript komentar.php, koji prihvata i obrauje
poslate podatke (slika 1.33.). Metod slanja podataka je post.

Slika 1.33.

36
Reenje:

<head>
</ head>
<body>
<f or mname=" f or ma" met hod=" post " act i on=" koment ar . php" >
Napi si svoj koment ar o www. pogodak. co. yu st r ani ci !
 
 
<f i el dset >
<l egend>www. pogodak. co. yu</ l egend>
<t ext ar ea name=" koment ar " r ows=" 5" col s=" 30" ></ t ext ar ea>
 
 
 
 
</ f i el dset >
</ f or m>
</ body>
</ ht ml >


34. Zadatak

Kreirajte XHTML dokument koji vri prikaz registracionog obrasca prema slici 1.34. Taster
ponisti brie sve unete podatke dok taster posalji alje podatke u skript registracija.php, koji
prihvata i obrauje poslate podatke. Koristite sve potrebne atribute. Metod slanja podataka je
post.

Reenje:
<head>
</ head>
<body>
<f or mname=" f or ma" met hod=" post " act i on=" r egi st r aci j a. php"
enct ype=" mul t i par t / f or m- dat a" >
Regi st r uj se! 
<f i el dset >
<l egend><st r ong>Li cni podaci </ st r ong></ l egend>
<l abel >i me: </ l abel >
 
<l abel >pr ezi me: </ l abel >
 
<l abel >e- mai l : </ l abel >
 
<l abel >l ozi nka: </ l abel >

37
 
<l abel >sl i ka: </ l abel > 
<l abel >oper at i vni si st em: </ l abel >
wi ndows
l i nux
 
 
<l abel >koment ar : </ l abel >
 
<t ext ar ea name=" koment ar " r ows=" 3" col s=" 20" ></ t ext ar ea> 
 

 
</ f i el dset >
</ f or m>
</ body>
</ ht ml >

Listing 1. 34. XHTML kod 34. zadatka

Slika 1.34.

38
35. Zadatak

Kreirajte XHTML dokument u okviru koga je potrebno definisati meta informacije. Sadraj
atributa meta elementa je proizvoljan.

Reenje:
<head>
<met a ht t p- equi v=" Cont ent - Type" cont ent =" t ext / ht ml ; char set =UTF- 8" / >
<met a ht t p- equi v=" cont ent - l anguage" cont ent =" sr " / >
<met a ht t p- equi v=" expi r es" cont ent =" 0" / >
<met a name=" aut hor " cont ent =" vt s" / >
<met a name=" keywor ds" cont ent =" xht ml , Zadat ak, i t , vt s, subot i ca" / >
<met a name=" descr i pt i on" cont ent =" Web st r ani ca - skol ski Zadat ak" / >
<met a name=" r obot s" cont ent =" i ndex, f ol l ow" / >
</ head>
<body>
Ovo j e Zadat ak upot r ebe met a i nf or maci j a na j ednoj st r ani ci .
</ body>
</ ht ml >



39

Java Script


40
1. Zadatak

Kreirajte XHTML dokument koji uz pomo spoljanjeg JavaScript programa (script.js)
ispisuje poruku Hello World i pozdravnu poruku za uneto ime (slika 2.1.).

Slika 2.1.

Reenje:
<head>
<scr i pt t ype=" t ext / j avascr i pt " sr c=" scr i pt . j s" >
<! - -
/ / - - >
</ scr i pt >
</ head>
<body>
<noscr i pt >Vas br owser ne podr zava J avaScr i pt !
</ noscr i pt > 
Hel l o f r omXHTML! 
<f or mname=" pozdr av" i d=" pozdr av" onsubmi t =" zdr avo( ) ; "
act i on=" j avascr i pt : ; " >


</ f or m>
</ body>
</ ht ml >


41

document . wr i t e( " <st r ong>Hel l o f r omJ avaScr i pt ! </ st r ong>" ) ;

f unct i on zdr avo( )
{
var t =document . f or ms. pozdr av. i me. val ue;
al er t ( " Pozdr avl j amt e " +t ) ;
}

Listing 2.1.2 sadraj script.js dokumenta

2. zadatak

Kreirajte XHTML dokument koji uz pomo JavaScript programa ispisuje poruku Hello to my
homepage nakon uitavanja stranice. U okviru stranice postaviti jedan obrazac. Obrazac
sadri tekstualno polje (smer) i tastere posalji i ponisti. Nakon pritiska na taster posalji
JavaScript program treba da ispie uneti tekst (slika 2.2.).

Slika 2.2.

Reenje:
<head>

<scr i pt t ype=" t ext / j avascr i pt " >

42
<! - -
f unct i on pozdr av( )
{
var por uka=" The best pl ace f or you! " ;
wi ndow. al er t ( " Hel l o t o my homepage" ) ;
wi ndow. st at us=por uka;
}
/ / - - >
</ scr i pt >
</ head>
<body onl oad=" pozdr av" >
<noscr i pt >
Vas br owser ne podr zava J avaScr i pt !
</ noscr i pt >
J ava Scr i pt :
onl oad
<f or mname=" f or m1" onr eset =" al er t ( ' naj bol j i i zbor ! ' ) "
onsubmi t =" al er t ( document . f or ms. f or m1. smer . val ue) " act i on=" j avascr i pt : ; " >
Koj i smer bi r as? 



 
</ f or m>
</ body>
</ ht ml >


3. zadatak

Kreirajte XHTML dokument, koji uz pomo JavaScript programa koji koristi dogaaje
onmouseover, onmouseout, onmouseup i onmousedown manipulie slikom (slika 2.3.).

Slika 2.3.

43
Reenje:
<head>
<! - -

var d=new Dat e( ) ;
var sat =d. get Hour s( ) ;

i f ( sat <10)
document . bgCol or =" #f f f f f f " ;
el se
document . bgCol or =" #f f 0000" ;

f unct i on pr omeni _sl i ku( )
{
document . sl i ka. sr c=" l i nk2. gi f " ;
document . sl i ka. al t =" sl i ka 2" ;
wi ndow. st at us=" Ovo j e dr uga sl i ka. " ;
r et ur n t r ue;
}

f unct i on vr at i _sl i ku( )
{
wi ndow. st at us=" Ovo j e pr va sl i ka. " ;
r et ur n t r ue;
}

f unct i on nor m( )
{
wi ndow. st at us=" Ovo j e t r eca sl i ka. " ;
r et ur n t r ue;
}

/ / - - >
</ scr i pt >
</ head>
<body>
<noscr i pt >
</ noscr i pt >
J ava Scr i pt :
 onmouseover , onmouseout , onmouseup & onmousedown
 

</ body>
</ ht ml >



44
5. zadatak

Kreirajte XHTML dokument koji koristi JavaScript dogaaje onclick, ondblclick, onkeypress i
onkeydown. Stranica treba da poseduje taster uz pomo koga moemo odtampati sadraj
stranice (slika 2.5.).

Slika 2.5.

Reenje:
<head>
<! - -
f unct i on pr i nt page( )
{
wi ndow. pr i nt ( )
}

f unct i on changeBg1( ) {

var r =Mat h. r andom( ) *5;
boj a=Mat h. r ound( r ) ;
document . bgCol or =" #f f " +boj a+" f " +boj a+" f " ;
}

f unct i on changeBg2( )

45
{
document . bgCol or =" #0000f f " ;
}

/ / - - >
</ scr i pt >
</ head>
<body>
<noscr i pt >
</ noscr i pt >
J ava Scr i pt :
 oncl i ck, ondbl cl i ck, onkeypr ess & onkeydown
 

 


 
<f or mact i on=" 39. ht ml " met hod=" post " i d=" myf or m" name=" myf or m" >
<l abel >koment ar </ l abel >
</ f or m>

</ body>
</ ht ml >


6. zadatak

Kreirajte XHTML dokument koji koristi JavaScript dogaaje onfocus, onblur i onselect
(slika 2.6.).

Slika 2.6.


46
Reenje:
<head>
<! - -

f unct i on pr omena_f ocusa( )
{
s1 = " U f okusu si ! "
document . myf or m. myText . val ue = s1. t oUpper Case( ) ;
}

f unct i on i zl az_f ocus( )
{

al er t ( " Napust i l i st e el ement koj i j e bi o u f okusu! " ) ;

}
/ / - - >
</ scr i pt >
</ head>
<body>
<noscr i pt >
</ noscr i pt >
J ava Scr i pt :
 onf ocus, onbl ur & onsel ect 
 
<f or mname=" myf or m" i d=" myf or m" act i on=" j avascr i pt : ; " >
<l abel >f ocus 1: </ l abel >
 
<l abel >f ocus 2: </ l abel >
 
<l abel >sel ect ed t ext </ l abel > 
 

</ f or m>
</ body>
</ ht ml >



47

XHTML
zadaci za proveru
znanja


48
1. zadatak

Kreirati priloenu web stranicu upotrebom XHTML tehnologije. Web stranica sadri
XHTML 1.0 Transitional DTD (slika 3.1.).

Slika 3.1.

Reenje:
<head>
<t i t l e>Li nkovi </ t i t l e>
</ head>
<body>
<h2>Li nkovi , sl i ke i l i st e</ h2> 
 
<a hr ef =" 2. ht ml " t i t l e=" Dr uga st r ani ca" >Li nk ka dr ugoj st r ani ci </ a>
 
<a hr ef =" ht t p: / / www. vt s. su. ac. yu" t i t l e=" VTS" >ht t p: / / www. vt s. su. ac. yu</ a>
<hr / >I T - VTS
<ul >
<l i >css</ l i >
</ ul >

49
<ol st ar t =" 3" >
<l i >php</ l i >
<l i >j ava</ l i >
<l i >j scr i pt </ l i >
</ ol >
<ol st ar t =" 2" >
<l i >xml </ l i >
<l i >css</ l i >
</ ol >
<hr / >
</ body>
</ ht ml >

Listing 3.1. XHTML kod 1.zadatka

2. zadatak


Slika 3.2.

50
Reenje:

<head>
<t i t l e>Tabel e</ t i t l e>
</ head>
<body>
<h2>Tabel e, l i nkovi i l i st e</ h2>

 
<a hr ef =" 1. ht ml " >Li nk ka pr voj st r ani ci </ a>
 
 
Li nk ka <a hr ef =" ht t p: / / www. vt s. su. ac. yu"
t ar get =" _bl ank" >ht t p: / / www. vt s. su. ac. yu</ a> koj i se ot var a u novompr ozor u
<hr / >

<capt i on>XHTML t abel a</ capt i on>

<t head>
<t r >
<t h>I nf o</ t h>
<t h>Sl i ka</ t h>
</ t r >
</ t head>

<t body>
<t r >
<t d>www. googl e. com</ t d>
<t d r owspan=" 2" ></ t d>
</ t r >
<t r >
<t d>www. gmai l . com2</ t d>
</ t r >
</ t body>

</ t abl e>

<st r ong>I T</ st r ong>
<dl >
<dt >XHTML</ dt >
<dd>XHTML ( Ext ensi bl e Hyper Text Mar kup Language) </ dd>

<dt >PHP</ dt >
<dd>PHP ( Hyper t ext Pr epr ocessor ) </ dd>
</ dl >
</ body>
</ ht ml >



51
4. zadatak


Slika 3.4.

Reenje:

<head>
<t i t l e>Vezba 1</ t i t l e>
</ head>
<body>

52
wi dt h=" 600" >
<t r >
<t d col span=" 2" al i gn=" cent er " wi dt h=" 600" >

</ t d>
</ t r >
<t r >
<t d al i gn=" cent er " wi dt h=" 150" val i gn=" bot t om" >
I nt er net t ehnol ogi j e
<ol >
<l i >css</ l i >
</ ol >

<ol st ar t =" 8" >
<l i >php</ l i >

<l i >j ava</ l i >
</ ol >
</ t d>

<t d al i gn=" cent er " >

<bi g>CSS</ bi g>
 

</ t d>
</ t r >

<t r >
<t d col span=" 2" al i gn=" r i ght " >
<bi g>XHTML</ bi g>
 
St a j e uopst e XHTML? Evo st var no kr at kog odgovor a koj i daj emo l j udi ma na
zabavama: XHTML j e podskup Pr osi r i vog J ezi ka Oznacavanj a ( Ext ensi bl e Mar kup
Language XML) koj i j e pr oj ekt ovan da se ponasa kao HTML, samo sa bol j i m
mat er i j al om. XHTML j e naj novi j i al at za r azvoj Web st r ani ca.

</ t d>
</ t r >

<t r >
<t d col span=" 2" al i gn=" cent er " >
<a hr ef =" ht t p: / / www. webmast er . com" t i t l e=" webmast er " >www. webmast er . com</ a>
</ t d>
</ t r >

</ t abl e>

</ body>
</ ht ml >



53
5. zadatak


Slika 3.5.

Reenje:

54
<head>
<t i t l e>Zadat ak br oj 2</ t i t l e>
</ head>
<body>
wi dt h=" 600" bgcol or =" #e5e5e5" >
<t r >
<t d col span=" 2" al i gn=" cent er " wi dt h=" 600" >

</ t d>
</ t r >

<t r >
<t d al i gn=" l ef t " wi dt h=" 400" val i gn=" t op" r owspan=" 2" >
<a hr ef =" #css" >CSS</ a> <a
hr ef =" #r egi st r aci j a" >Regi st r aci j a</ a> <a
hr ef =" #xht ml " >XHTML</ a>
<a name=" css" ><bi g>CSS</ bi g></ a>
 

<hr / >
<a name=" r egi st r aci j a" >
Regi st r aci j a
</ a>

<f or mmet hod=" post " act i on=" 2. php" >
<l abel >e- mai l : </ l abel > 
<l abel >l ozi nka: </ l abel > 
<l abel >pol : </ l abel > muski zenski 

</ f or m>

<hr / >
 
<a name=" xht ml " ><bi g>XHTML</ bi g></ a>
 
XHTML j e podskup Pr osi r i vog J ezi ka Oznacavanj a ( Ext ensi bl e Mar kup Language
XML) koj i j e pr oj ekt ovan da se ponasa kao HTML, samo sa bol j i mmat er i j al om.


<a hr ef =" #pocet ak" t i t l e=" Povr at ak na pocet ak" >pocet ak</ a></ t d>
<t d al i gn=" cent er " val i gn=" t op" >

<a hr ef =" vest i 2. ht ml " t ar get =" okvi r " >Li nk 1 ( okvi r ) </ a> 
<a hr ef =" vest i 2. ht ml " t ar get =" _bl ank" >Li nk 2 ( novi pr ozor ) </ a> 
</ t d>
</ t r >

55
</ t abl e>
</ body>
</ ht ml >


<head>
<t i t l e>vest i </ t i t l e>
</ head>
<body>
<pr e>
i
n
t
e
r
n
e
t
</ pr e>
</ body>
</ ht ml >

Listing 3.5.2. XHTML kod vesti2.html dokumenta

<head>
<t i t l e>vest i </ t i t l e>
</ head>
<body>
<pr e>
v
t
s

s
u
b
o
t
i
c
a
</ pr e>
</ body>
</ ht ml >

Listing 3.5.3. XHTML kod vesti.html dokumenta


56
6. zadatak


Slika 3.6.
Reenje:

<head>
<t i t l e>Kol okvi j um</ t i t l e>
</ head>
<body>
wi dt h=" 770" bgcol or =" #eef 99c" >
<t r >
<t d col span=" 3" al i gn=" cent er " wi dt h=" 780" bgcol or =" #eef 99c" >

</ t d>
</ t r >
<t r >

57
<t d al i gn=" j ust i f y" wi dt h=" 380" val i gn=" t op" >
<dl >
<dt >Nas saj t </ dt >
<dd>
Nas web saj t j e nast ao sa zel j omda kuvanj e uci ni l aksi m, j ednost avni j i mi
l epsi muz pomoc vi zual no bogat i h r ecepat a.
</ dd>
<dt >Nas ci l j </ dt >
<dd>
Gl avni ci l j namj e da zaj edno sa poset i oci ma konst ant no si r i mo bazu
r ecepat a sa kompl et ni mpost upkompr i pr eme.
</ dd>
</ dl >
<hr / >

 
<hr / >
<a hr ef =" ht t p: / / www. becook. com" >www. becook. com</ a>
</ t d>
<t d al i gn=" l ef t " wi dt h=" 500" val i gn=" t op" bgcol or =" #e6f 480" >
<t abl e bor der =" 0" al i gn=" cent er " wi dt h=" 400" cel l paddi ng=" 5"
cel l spaci ng=" 5" >
<t r >
<t d val i gn=" t op" al i gn=" j ust i f y" >
Savr seno j ednost avan pr i l og od pavl ake i sampi nj ona j e odl i can sast oj ak
svakodnevne t r peze, mada nj egova j ednost avnost ne bi t r ebal o da bude r azl og
da se ne nadj e na st ol u kao j edan od speci j al i t et a i pr i l i komneke
svecanost i .
</ t d>
<t d wi dt h=" 100" val i gn=" t op" >

</ t d>
</ t r >
<t r >
<t d val i gn=" t op" al i gn=" j ust i f y" >
Zani ml j i va kombi naci j a pi l eceg mesa, povr ca i zaci na koj a zasl uzuj e da se
mal o pot r udi t e oko nj ene pr i pr eme j er pl eni i zgl edomi odusevl j ava ukusom.
</ t d>
<t d wi dt h=" 100" val i gn=" t op" >

</ t d>
</ t r >
</ t abl e>
Koj u naci onal nu kuhi nj u naj vi se vol i t e?
<f or mmet hod=" post " act i on=" act i ons. php" >
I t al i j ansku 
Fr ancusku 
Meksi cku 
Ki nesku 
Sr psku
 

</ f or m>
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >



58
<head>
<t i t l e>Kol okvi j um</ t i t l e>
</ head>
<body>
 

 
 
<hr / >
 

</ body>
</ ht ml >

Listing 3.6.2. XHTML kod iframe.html. dokumenta


59

CSS


60
1. zadatak

Kreirajte XHTML dokument koji ispisuje tekst prikazan na slici 4.1. Za definisanje
stila teksta koristite unutranju listu stilova.

Slika 4.1.

Reenje:

<head>
<t i t l e>css 1</ t i t l e>
<st yl e t ype=" t ext / css" >

h1, h2{
f ont - f ami l y: " Ver dana" , ar i al , sans- ser i f ;
col or : #0000f f ;
f ont - si ze: 16px;
}

h3{
f ont - f ami l y: " Tahoma" , ar i al , sans- ser i f ;
col or : r ed;
}

</ st yl e>
</ head>
<body>
<h1>I nt er net t ehnol ogi j e</ h1>
<h2>Vi sa t ehni cka skol a Subot i ca</ h2>
<h3>www. vt s. su. ac. yu</ h3>
</ body>
</ ht ml >


61
2. zadatak

stila teksta koristite spoljanju listu stilova.

Slika 4.2.

Reenje:

body {
backgr ound- col or : #f f f f f f ;
backgr ound- i mage: ur l ( " sl i ka. gi f " ) ;
f ont - f ami l y: ver dana;
f ont - si ze: 12pt ;
col or : #000000;
}

h1, h2{
f ont - f ami l y: Ver dana;
col or : #0000f f ;
}

h3{
f ont - f ami l y: Ar i al ;
col or : #f f 0000;
}

h3. zel eno{
col or : #00f f 00;

62
}

. pl avi {
col or : bl ue;
}

. i t al i c{
f ont - st yl e: i t al i c;
}

Listing 4.2.1. CSS kod 2.css dokumenta

<head>
<l i nk t ype=" t ext / css" r el =" st yl esheet " hr ef =" 2. css" / >
</ head>

<body>
<h1>Wel come t o t he I nt er net t echnol ogi es</ h1>
<h2>Pol yt echni cal Engi neer i ng Col l ege, Subot i ca</ h2>
<h3>www. vt s. su. ac. yu</ h3>
<h3 cl ass=" zel eni " >www. vt s. su. ac. yu</ h3>
i nt er net t ehnol ogi j e
</ body>
</ ht ml >


3. zadatak

stila teksta koristite inline listu stilova.

Slika 4.3.

63
Reenje:

<head>
</ head>
<body st yl e=" backgr ound- col or : #F9F6CC; col or : #000000; " >
<h1 st yl e=" f ont - f ami l y: Tr ebuchet MS, ar i al , sans-
ser i f ; col or : #0000f f ; f ont - si ze: 20px; " >I nt er net t ehnol ogi j e</ h1>
<h2 st yl e=" f ont - f ami l y: Ver dana, ar i al , sans- ser i f ; col or : #000000; f ont -
si ze: 18px; " >www. vt s. su. ac. yu</ h2>
</ body>
</ ht ml >


4. zadatak

Kreirajte XHTML dokument koji odgovara stranici datoj na slici 4.4. Za formatiranje
stranice koristiti spoljanju listu stilova.

Slika 4.4.

Reenje:

body {backgr ound- col or : #818181;
}

. dr ugi {f ont - f ami l y: Ar i al ;
}

. t r eci {f ont - f ami l y: Ver dana;
col or : #f f f f f f ;
}


64
ol {l i st - st yl e- t ype: upper - r oman;
col or : #e5e5e5;
}

Listing 4.4.1. CSS kod 4. css dokumenta

<head>
</ head>
<body>
 
Vi sa t ehni cka skol a Subot i ca vt s
 
<ol >
<l i >i nf or mat ka</ l i >
<l i >el ekt r ot ehni ka</ l i >
<l i >masi nst vo</ l i >
</ ol >
</ body>
</ ht ml >


5.zadatak

Kreirajte XHTML dokument koji odgovara stranici datoj na slici 4.5. Za definisanje
stila stranice koristiti dve spoljanje liste stilova. Prva lista treba da sadri definicije
stilova za naslove dok druga lista sadri sve ostale definicije.

Slika 4.5.

65
Reenje:

h2 {f ont - f ami l y: Ver dana;
f ont - si ze: x- l ar ge;
f ont - st yl e: nor mal ;
f ont - wei ght : bol d;
col or : #0000f f ;
}or : gr een;
}

Listing 4.5.1. CSS kod 5-naslovi. css dokumenta

body {
backgr ound- col or : #44ddf f ;
col or : #000;
}

p {
f ont - f ami l y: Tahoma;
f ont - st yl e: obl i que;
}

b {
f ont - f ami l y: Cour i er , Ar i al ;
col or : gr een;
}

Listing 4.5.2. CSS kod 5-ostalo. css dokumenta

<head>
<st yl e t ype=" t ext / css" >
<! - -
@i mpor t ur l ( " 5- nasl ovi . css" ) ;
@i mpor t ur l ( " 5- ost al o. css" ) ;
- - >
</ st yl e>
</ head>
<body>
<h2>O konf er enci j i </ h2>

Konf er enci j a E- t r govi na j e naj veci skup o e- posl ovanj u u Sr bi j i ,
posvecen pr acenj u nast anaka i r azvoj a domaceg i r egi onal nog
( Sl oveni j a, Hr vat ska, Cr na Gor a, BI H, Makedoni j a, Rumuni j a . . . ) e-
commer ce i e- busi ness t r zi st a. 
E- t r govi na 2007
</ body>
</ ht ml >


66
6. zadatak

stila stranice koristiti spoljanju listu stilova.

Slika 4.6.

Reenje:

body {
backgr ound- col or : #f f f f 00;
}

h1 {
f ont - var i ant : smal l - caps;
l et t er - spaci ng: 4px;
col or : #f f 0000;
}

p {
l i ne- hei ght : 20px;
col or : #000000;
}


<head>

67
</ head>

<body>
<h1>vt s</ h1>

Smer ovi st udi r anj a:
 
- i nf or mat i ka
 
- el ekt r ot ehni ka
 
- masi nst vo

</ body>
</ ht ml >


7. zadatak


Slika 4.7.

Reenje:

body {
backgr ound- col or : #FDC689;
col or : #000;
}

h1 {

68
t ext - decor at i on: over l i ne;
t ext - al i gn: l ef t ;
t ext - i ndent : 10px;
col or : #f f 0000;
}

h4 {
t ext - al i gn: r i ght ;
t ext - decor at i on: under l i ne;
}

p {
t ext - al i gn: j ust i f y;
}


<head>
</ head>

<body>

<h1>CSS</ h1>



st i l ova koj i odr edj uj u i zgl ed HTML el emenat a. Ti st i l ovi se
pohr anj uj u u " St yl e Sheet s" , ext er ne f aj l ove sa ekst enzi j om. css ,
i l i j ednost avno se pi su u zagl avl j u HTML dokument a.
Ekst er ni st i l ovi su i naj bol j i j er omogucuj u ust edu vr emena pr i r adu
i pr i r edi zaj ni r anj u vaseg HTML dokument a.
CSS su i zmi sl i l i i speci f i ci r al i devel oper i i z ( Wor l d Wi de Web
Consor t i um) W3C- a, a poj avi l i su se sa HTML- om4. 0 kao r esenj e koj e
j e pr oi zasl o i z sve vece pot r ebe za odvaj enj emsadr zaj a st r ani ce od
di zaj na. CSS su podr zal i svi vodeci I nt er net br owser i ( I E, Fi r ef ox,
Oper a. . . ) .



<h4>Subot i ca 2007</ h4>

</ body>
</ ht ml >



69
8. zadatak


Slika 4.8.

Reenje:

body {backgr ound- col or : #f 7a0a3;
col or : r gb( 0, 0, 0) ;
}

h1 {f ont - f ami l y: Ver dana;
t ext - al i gn: cent er ;
t ext - t r ansf or m: l ower case;
col or : r ed;
backgr ound- col or : r gb( 255, 255, 0) ;
}

p {
t ext - t r ansf or m: upper case;
backgr ound- col or : whi t e;
mar gi n: 0. 3cm;
}



70
<head><t i t l e>css 8</ t i t l e>
</ head>
<body>
<h1>CSS</ h1>
CSS j e skr aceni ca od " Cascadi ng St yl e Sheet s" , a sl uzi za
def i ni sanj e st i l ova koj i odr edj uj u i zgl ed HTML el emenat a . Ti st i l ovi
se pohr anj uj u u " St yl e Sheet s" , ext er ne f aj l ove sa ekst enzi j om. css ,
di zaj na. CSS su podr zal i svi vodeci I nt er net br owser i ( I E,
Fi r ef ox, Oper a. . . ) . 
</ body>
</ ht ml >


9. zadatak

Kreirajte XHTML dokument koji odgovara stranici datoj na slici 4.9. Pozadinska
slika treba da se pomera zajedno sa sadrajem stranice. Za definisanje stila stranice
koristiti spoljanju listu stilova.

Slika 4.9.

Reenje:

body {backgr ound- col or : #f f f f f f ;
backgr ound- i mage: ur l ( i t bg. gi f ) ;
backgr ound- r epeat : no- r epeat ;
col or : r gb( 0, 0, 0) ;
}


71
pr e {f ont - f ami l y: Ar i al ;
backgr ound- col or : t r anspar ent ;
mar gi n- l ef t : 2cm;
mar gi n- r i ght : 2cm;
}


<head>
t i t l e>css 9</ t i t l e>
</ head>
<body>
<pr e>
# br owser #

Mr ezni kl i j ent ski pr ogr amza pr egl ed Wor l d- Wi de Web st r ani ca.

</ pr e>
</ body>
</ ht ml >


10. zadatak

Kreirajte XHTML dokument koji odgovara stranici datoj na slici 4.10. Pozadinska
slika treba da je fiksna u odnosu na sadraj stranice. Za definisanje stila stranice
koristiti spoljanju listu stilova.

Slika 4.10.

72
Reenje:

body {
backgr ound- i mage: ur l ( i t bg2. gi f ) ;
backgr ound- at t achment : f i xed;
col or : #000;
}

pr e {
backgr ound- col or : t r anspar ent ;
mar gi n- l ef t : 2cm;
mar gi n- r i ght : 2cm;
}


<head>
</ head>

<body>
<pr e>
# XHTML #

St a j e uopst e XHTML? Evo st var no kr at kog odgovor a koj i daj emo l j udi ma
na zabavama:
XHTML j e podskup Pr osi r i vog J ezi ka Oznacavanj a ( Ext ensi bl e Mar kup
Language - XML)
koj i j e pr oj ekt ovan da se ponasa kao HTML, samo sa bol j i m
mat er i j al om.
XHTML j e naj novi j i al at za r azvoj Web st r ani ca.

# CSS #

st i l ova koj i odr edj uj u i zgl ed HTML el emenat a .
Ti st i l ovi se pohr anj uj u u " St yl e Sheet s" , ext er ne f aj l ove sa
ekst enzi j om. css , i l i j ednost avno se pi su u zagl avl j u HTML
dokument a.

73


Consor t i um) W3C- a, a poj avi l i su se sa HTML- om4. 0
kao r esenj e koj e j e pr oi zasl o i z sve vece pot r ebe za odvaj enj em
sadr zaj a st r ani ce od di zaj na.


</ pr e>
</ body>
</ ht ml >


11. zadatak

stila stranice koristite spoljanju listu stilova. Za element a kreirajte pseudo klase link,
visited, hover i active.

Slika 4.11.


74
Reenje:

body {
backgr ound- col or : #80a5d2;
}

i mg {
bor der - st yl e- l ef t : dashed;
}

t abl e {
bor der - st yl e: dot t ed;
bor der - col or : #000000;
bor der - wi dt h: 1px;
bor der : sol i d 1px #000000;
backgr ound- col or : #e5e5e5;
}

p {
}

p. dr ugi {
col or : #000000;
}

ol {
l i st - st yl e- t ype: ci r cl e;
}

a: l i nk {
col or : #818181;
t ext - decor at i on: none;
}

a: vi si t ed {
col or : #000000;
}

a: hover {
col or : #000000;
}

a: act i ve {

75
col or : #000000;
}

a. dol e: l i nk {f ont - f ami l y: Tahoma;
col or : #818181;
}

a. dol e: vi si t ed {f ont - f ami l y: Tahoma;
col or : #000000;
}

a. dol e: hover {f ont - f ami l y: Tahoma;
col or : #000000;
}

a. dol e: act i ve {f ont - f ami l y: Tahoma;
col or : #000000;
}


<head>
</ head>

<body>

 
<t abl e cel l paddi ng=" 5" >
<t r >
<t d>
Academi c Net wor k of Subot i ca
<ol >
<l i ><a hr ef =" ht t p: / / www. vt s. su. ac. yu"
t i t l e=" www. vt s. su. ac. yu" >ht t p: / / www. vt s. su. ac. yu</ a></ l i >

76
<l i ><a hr ef =" ht t p: / / www. gf . su. ac. yu"
t i t l e=" www. gf . su. ac. yu" >ht t p: / / www. gf . su. ac. yu</ a></ l i >
<l i ><a hr ef =" ht t p: / / www. eccf . su. ac. yu" cl ass=" dol e"
t i t l e=" www. eccf . su. ac. yu" >ht t p: / / www. eccf . su. ac. yu</ a></ l i >
</ ol >
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >


12. zadatak

stila stranice koristite spoljanju listu stilova. Za element a kreirajte pseudo klase link,
visited, hover i active. Za kreiranje strukture stranice obavezno koristiti div element .
Zadatak reiti bez upotrebe tabela.

Slika 4.12.

Reenje:

ht ml , body{
mar gi n: 0;
paddi ng: 0;
}


77
body{
f ont - f ami l y: " Tr ebuchet MS" , ar i al , sans- ser i f ;
col or : #000000;
}

#header {
hei ght : 100px;
mar gi n: 0;
paddi ng: 0;
backgr ound: #EEE;
col or : #ef 2805;
backgr ound: ur l ( " i t . gi f " ) ;
}

#header h1{
mar gi n: 0;
paddi ng- t op: 40px;
paddi ng- l ef t : 100px;
}

#cont ai ner {
wi dt h: 700px;
mar gi n: 0 aut o;
paddi ng: 0;
posi t i on: r el at i ve;
over f l ow: hi dden;
bor der : 1px sol i d #d5d5d5;
}

#l ef t {
f l oat : l ef t ;
wi dt h: 150px;
mar gi n- l ef t : - 700px;
}

#wr apper {
f l oat : l ef t ;
wi dt h: 100%;
}

#cont ent {
mar gi n: 0 150px;
backgr ound: #f f f ;
}

#cont ent p{
l i ne- hei ght : 1. 4;
}

#r i ght {
f l oat : l ef t ;
wi dt h: 150px;
mar gi n- l ef t : - 150px;

78
}

#f oot er {
backgr ound: #d5d5d5;
wi dt h: 100%;
cl ear : l ef t ;
}

#f oot er p{
mar gi n: 0;
paddi ng: 5px 10px;
}

p{
mar gi n: 0 10px 10px;
}


<head>
</ head>

<body>
<di v i d=" cont ai ner " >
<di v i d=" header " ><h1>Kr ei r anj e st r ukt ur e saj t a uz pomoc DI V
t aga</ h1></ di v>

<di v i d=" wr apper " >
<di v i d=" cont ent " >

st i l ova koj i odr edj uj u i zgl ed HTML el emenat a . Ti st i l ovi se
di zaj na.




</ di v>
</ di v>

<di v i d=" r i ght " >

Li nkovi , baner i


79
</ di v>

<di v i d=" l ef t " >

Li nkovi i dr uge i nf or maci j e

</ di v>

<di v i d=" f oot er " >ovde dol azi t ekst za f oot er </ di v>

</ di v>
</ body>
</ ht ml >



80

CSS
zadaci za proveru
znanja


81
1. zadatak

Kreirajte web stranicu prikazanu na slici 5.1. primenom XHTML i CSS tehnologija.
Web stranica treba da poseduje XHTML-1.0-Transitional DTD i spoljanju listu
stilova.

Slika 5.1.

Reenje:

body {
backgr ound- i mage: ur l ( " bg. gi f " ) ;
col or : #000000;
}

/ * t abel e */

t abl e{
bor der : 2px dashed #000000;
wi dt h: 700px;
}

t d. cr no{
backgr ound- col or : #000000;
}

82

t d. si vo{
backgr ound- col or : #e5e5e5;
col or : #000000;
}

/ * t ekst */

. i t al i c{f ont - st yl e: i t al i c;
}

. bol d{f ont - wei ght : bol d;
}

. l evo{t ext - al i gn: l ef t ;
}

/ * l i nkovi */

a: l i nk, a: vi si t ed, a: act i ve {
col or : #818181;
}

a: hover {
col or : #000000;
}


<head>
<t i t l e>zadat ak 1</ t i t l e>
</ head>
<body>
<t abl e al i gn=" cent er " bor der =" 0" >
<t r >
<t d col span=" 2" cl ass=" cr no bol d" >I nt er net t ehnol ogi j e</ t d></ t r >
<t r ><t d wi dt h=" 450" >

# XHTML # 
na zabavama: XHTML j e podskup Pr osi r i vog J ezi ka Oznacavanj a
( Ext ensi bl e Mar kup Language - XML) koj i j e pr oj ekt ovan da se ponasa
kao HTML, samo sa bol j i mmat er i j al om. XHTML j e naj novi j i al at za
r azvoj Web st r ani ca.


# CSS # 

83
i l i j ednost avno se pi su u zagl avl j u HTML dokument a. Ekst er ni st i l ovi
su i naj bol j i j er omogucuj u ust edu vr emena pr i r adu i pr i
r edi zaj ni r anj u vaseg HTML dokument a. CSS su i zmi sl i l i i speci f i ci r al i
devel oper i i z ( Wor l d Wi de Web Consor t i um) W3C- a, a poj avi l i su se sa
HTML- om4. 0 kao r esenj e koj e j e pr oi zasl o i z sve vece pot r ebe za
odvaj enj emsadr zaj a st r ani ce od di zaj na. CSS su podr zal i svi vodeci
I nt er net br owser i ( I E, Fi r ef ox, Oper a. . . ) .

</ t d>
<t d></ t d></ t r >
<t r ><t d col span=" 2" cl ass=" si vo" >
| <a hr ef =" h. ht ml " >home</ a> | <a hr ef =" d. ht ml " >downl oad</ a> | <a
hr ef =" v. ht ml " >vest i </ a> | <a hr ef =" k. ht ml " >kont akt </ a> |
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >


2. zadatak

stilova. Za formatiranje strukture stranice koristiti div elemente.

Slika 5.2.

84
Reenje:

ht ml , body{
mar gi n: 0;
paddi ng: 0;
}

body{
col or : #000000;
backgr ound: ur l ( " bg. gi f " ) #f f f ;
}

#header {
mar gi n: 0;
paddi ng: 0;
backgr ound: #000;
col or : #f f f ;
}

#header p{
paddi ng: 2px 2px;
mar gi n: 0px;
}

#cont ai ner {
wi dt h: 700px;
mar gi n: 10px aut o;
paddi ng: 2px;
bor der : 2px dashed #000;
}

#wr apper {
f l oat : l ef t ;
wi dt h: 100%;
}

#cont ent {
mar gi n: 0;
}

#cont ent p{
}

#cont ent i mg{
di spl ay: bl ock;
f l oat : r i ght ;
mar gi n: 10px;
paddi ng: 2px;
}

#f oot er {

85
backgr ound: #e5e5e5;
col or : #818181;
wi dt h: 100%;
cl ear : l ef t ;
}

#f oot er p{
mar gi n: 0;
paddi ng: 5px 10px;
}

#f oot er a: l i nk, a: vi si t ed, a: act i ve {
col or : #818181;
}

#f oot er a: hover {
col or : #000000;
}

p{
mar gi n: 0 10px 10px;
}

. i t al i c{
}


<head>
</ head>
<body>
<di v i d=" header " >I nt er net t ehnol ogi j e</ di v>
<di v i d=" wr apper " >


# XHTML #
 
na zabavama: XHTML j e podskup Pr osi r i vog J ezi ka Oznacavanj a
( Ext ensi bl e Mar kup Language - XML) koj i j e pr oj ekt ovan da se ponasa
kao HTML, samo sa bol j i mmat er i j al om. XHTML j e naj novi j i al at za
r azvoj Web st r ani ca.


# CSS # 

86
i l i j ednost avno se pi su u zagl avl j u HTML dokument a. Ekst er ni st i l ovi
su i naj bol j i j er omogucuj u ust edu vr emena pr i r adu i pr i
r edi zaj ni r anj u vaseg HTML dokument a. CSS su i zmi sl i l i i speci f i ci r al i
devel oper i i z ( Wor l d Wi de Web Consor t i um) W3C- a, a poj avi l i su se sa
HTML- om4. 0 kao r esenj e koj e j e pr oi zasl o i z sve vece pot r ebe za
odvaj enj emsadr zaj a st r ani ce od di zaj na. CSS su podr zal i svi vodeci
I nt er net br owser i ( I E, Fi r ef ox, Oper a. . . ) .

</ di v>
</ di v>
<di v i d=" f oot er " >
| <a hr ef =" h. ht ml " >home</ a> | <a hr ef =" d. ht ml " >downl oad</ a> | <a
hr ef =" v. ht ml " >vest i </ a> | <a hr ef =" k. ht ml " >kont akt </ a> | 
</ di v>
</ di v>
</ body>
</ ht ml >


3. zadatak


Slika 5.3.


87
Reenje:

ht ml , body{
mar gi n: 0;
paddi ng: 0;
}

body{
col or : #f f f ;
backgr ound: #000;
}

#cont ent {
wi dt h: 650px;
paddi ng: 2px;
}

#cont ent h1{
mar gi n: 0;
paddi ng: 5px 0 5px 0;
}

#cont ent i mg{
di spl ay: bl ock;
f l oat : r i ght ;
mar gi n: 10px;
paddi ng: 2px;
}

p{mar gi n: 0 10px 10px;
}

f i el dset {
col or : #f f f f 00;
bor der : 1px sol i d #f f f f 00;
}

l abel , l egend {col or : #f f f f 00;
}

i nput , t ext ar ea {
}

i nput . dugme{f ont - wei ght : bol d; }



88
<head>
</ head>

<body>
<f or mi d=" f or ma" name=" f or ma" met hod=" post "
act i on=" r egi st r aci j a. php" >

<h1>Regi st r aci j a</ h1>

<f i el dset >
<l egend>Li cni podaci </ l egend>


 

 
<l abel >e- mai l : </ l abel >

 
<l abel >l ozi nka: </ l abel >

 
 
<l abel >koment ar </ l abel >
 
<t ext ar ea i d=" koment ar " name=" koment ar " r ows=" 3" col s=" 20"
></ t ext ar ea>
 
 



</ f i el dset >
</ f or m>
</ di v>
</ body>
</ ht ml >



89
4. zadatak


Slika 5.4.

Reenje:

ht ml , body{
mar gi n: 0;
paddi ng: 0;
}

body{
f ont - f ami l y: " Ver dana" , ar i al , sans- ser i f ;
col or : #3abbf d;
backgr ound: ur l ( " bg. j pg" ) #f f f ;
backgr ound- posi t i on: t op cent er ;
backgr ound- r epeat : r epeat - x;
}

#header {
mar gi n: 0;
paddi ng: 0;
backgr ound: ur l ( " skype. j pg" ) no- r epeat #f f f 50px 10px;
col or : #3abbf d;

90
}

#header h1{
paddi ng: 20px 10px 20px 0;
mar gi n: 0;
}

#cont ai ner {
wi dt h: 700px;
paddi ng: 2px;
col or : #000;
bor der : 2px sol i d #3abbf d;
bor der - bot t om: 20px sol i d #3abbf d;
}

#cont ent {
mar gi n: 0;
paddi ng: 5px;
backgr ound: ur l ( " bg2. j pg" ) no- r epeat cent er cent er #f f f ;
}

#l ef t {
backgr ound: t r anspar ent ;
col or : #3abbf d;
f l oat : l ef t ;
wi dt h: 445px;
mar gi n: 0;
paddi ng: 0;
}

#l ef t p{
col or : #000;
}

#l ef t l i {
l i st - st yl e- t ype: upper - r oman;
}

#r i ght {
mar gi n- l ef t : 450px;
hei ght : 200px;
}

#f oot er {
col or : #000;
cl ear : l ef t ;
wi dt h: 100%;
}

. under l i ne{

91
}

/ * menu1 */

#menu1{
col or : #f f f ;
mar gi n: 0;
paddi ng: 5px;
di spl ay: bl ock;
backgr ound: #3abbf d;
}

#menu1 a: l i nk, a: vi si t ed, a: act i ve {
col or : #f f f ;
mar gi n: 0 10px 0 10px;
}

#menu1 a: hover {
col or : #f f f ;
backgr ound- col or : #067dba;
}

f i el dset {
paddi ng: 10px;
}

l abel , l egend {
col or : #3abbf d;
}

i nput {
backgr ound: none;
bor der : 0px;
bor der - bot t om: 1px dot t ed #3abbf d;
}

i nput . dugme{
paddi ng: 5px;
}


<head>

92
</ head>
<body>
<di v i d=" header " >
<h1>The whol e wor l d can t al k f or f r ee! </ h1>
</ di v>
<di v i d=" menu1" >
<a hr ef =" home. php" >Home</ a>
<a hr ef =" pr oduct s. php" >Pr oduct s</ a>
<a hr ef =" downl oad. php" >Downl oad</ a>
<a hr ef =" communi t y. php" >Communi t y</ a>
</ di v>
<di v i d=" l ef t " >

Skype- t o- Skype cal l s ar e al ways f r ee - but t hat ' s j ust t he st ar t .
Tal k, l i st en, wat ch, r ead, wr i t e t o anyone, anywher e i n t he wor l d
wi t hout wor r yi ng about cost , di st ance or t i me.

<ul >
<l i >Fr ee Skype- t o- Skype Cal l s</ l i >
<l i >Make Vi deo Cal l s</ l i >
<l i >Send Cheap Text Messages</ l i >
<l i >Easy Conf er ence Cal l i ng</ l i >
<l i >Fr ee To Downl oad</ l i >
</ ul >
<f or mi d=" f or ma" name=" f or ma" met hod=" post "
act i on=" r egi st r aci j a. php" >
<f i el dset >
<l egend>Logi n i f you ar e r egi st er ed</ l egend>
<l abel >user name: </ l abel >

 
<l abel >passwor d: </ l abel >

 


</ f i el dset >
</ f or m>
</ di v>
<di v i d=" r i ght " >

</ di v>
</ di v>
<di v i d=" f oot er " >
Suppor t t he Skype Communi t y!
</ di v>
</ di v>
</ body>
</ ht ml >



93
5. zadatak

stilova.

Slika 5.5.

Reenje:

body {
backgr ound- col or : #a5a5a5;
backgr ound- i mage: ur l ( " pozadi na. gi f " ) ;
backgr ound- r epeat : r epeat ;
f ont - f ami l y: ver dana;
}

t abl e{
bor der - st yl e: sol i d;
backgr ound- col or : #f f 0000;
col or : #000;
}

t d. desna {
backgr ound- col or : #f f f ;
col or : #f f 0000;

94
}

t d. l i nk{
col or : #f f f ;
}

i mg{
bor der - st yl e: sol i d;
}

ol {
l i st - st yl e- t ype: upper - al pha;
}

. uvucen{
}

. l evo{
}

. desno{
}

a: l i nk, a: vi si t ed, a: act i ve {
}

a: hover {
}


<head>
</ head>
<body>
<t abl e cel l paddi ng=" 2" cel l spaci ng=" 2" al i gn=" cent er " wi dt h=" 660"
bor der =" 0" >
<t r >

95
<t d wi dt h=" 200" al i gn=" r i ght " r owspan=" 2" >
I t ' s been t hr ee year s si nce Aust i n Power s, t hat swi ngi ng
i nt er nat i onal man of myst er y, has f aced hi s ar ch- nemesi s, Dr . Evi l .
But af t er Dr . Evi l and hi s accompl i ce Mi ni Me escape f r oma maxi mum-
secur i t y pr i son, Aust i n i s cal l ed t o act i on once mor e i n t hi s t hi r d
i nst al l ment of t he hi ghl y successf ul " Aust i n Power s" movi e
f r anchi se. 
</ t d>
<t d col span=" 2" cl ass=" desno l i nk" >
<a hr ef =" 3. ht ml " >downl oad</ a> *
<a hr ef =" 2. ht ml " >member s</ a> *
<a hr ef =" 4. ht ml " >char t s</ a></ t d></ t r >
<t r ><t d wi dt h=" 200" >
</ t d>
<t d wi dt h=" 220" cl ass=" desna" >
Ri ght s and l i mi t at i ons: 
<ol >
<l i >
You may i nst al l and use t he SOFTWARE PRODUCT f or an unl i mi t ed t i me
</ l i >
<l i >
You may copy and di st r i but e t he SOFTWARE PRODUCT,
but onl y i n i t s or i gi nal f or m( as f ound on t he
WI ERI NG SOFTWARE web si t e) and wi t hout any
modi f i cat i ons.
</ l i >
</ ol ></ t d></ t r >
<t r >
<t d col span=" 3" cl ass=" l evo l i nk" >
<a hr ef =" ht t p: / / www. games. co. yu" >www. games. co. yu</ a></ t d></ t r >
</ t abl e>
</ body>
</ ht ml >



96

XML


97
1. zadatak

Kreirajte XML dokument koji sadri podatke o predmetima sa prve, druge i tree
godine studija. Za svaku godinu studija definisati najmanje tri predmeta (slika 6.1.).

Slika 6.1.

Reenje:

<! - - Fi l e Name: 1. xml - - >
<pr edmet i >
<pr vagodi na>
<pr edmet >Mat emat i ka</ pr edmet >
<pr edmet >Fi zi ka</ pr edmet >
<pr edmet >Osnovi r acunar st va</ pr edmet >
</ pr vagodi na>
<dr ugagodi na>
<pr edmet >Baze podat aka</ pr edmet >
<pr edmet >I nt er net t ehnol ogi j e</ pr edmet >
<pr edmet >Racunar ske mr eze</ pr edmet >
</ dr ugagodi na>
<t r ecagodi na>
<pr edmet >El ekt r onsko posl ovanj e</ pr edmet >
<pr edmet >Admi ni st r i r anj e r acunar ski h mr eza</ pr edmet >
<pr edmet >E- mobi l apl i kaci j e</ pr edmet >

98
</ t r ecagodi na>
</ pr edmet i >

Listing 6.1. XML kod 1. zadatka

2. zadatak

Kreirajte web stranicu koja je prikazana na slici 6.2. uz pomo XML i CSS
tehnologija. Koristiti spoljanju listu stilova (slika 6.2.).

Slika 6.2.

Reenje:

pr ogr amski j ezi k{
mar gi n: 20px;
}

nasl ov {
col or : whi t e;
di spl ay: bl ock;
backgr ound: r ed;
}

j ezi kw {

99
di spl ay: bl ock;
col or : bl ue;
}

j ezi kd{
di spl ay: bl ock;
col or : r ed;
}

v{
di spl ay: bl ock;
mar gi n- t op: 12pt ;
}

Listing 6.2.1. CSS kod xml2.css dokumenta

<! - - Fi l e Name: 2. xml - - >
<?xml - st yl esheet t ype=" t ext / css" hr ef =" xml 2. css" ?>
<pr ogr amski j ezi k>
<nasl ov>Web</ nasl ov>
<j ezi kw>php</ j ezi kw>
<j ezi kw>asp</ j ezi kw>
<j ezi kw>per l </ j ezi kw>
<v> </ v>
<nasl ov>Deskt op</ nasl ov>
<j ezi kd>del phi </ j ezi kd>
<j ezi kd>vi sual basi c</ j ezi kd>
<j ezi kd>c++</ j ezi kd>
</ pr ogr amski j ezi k>

Listing 6.2.2. XML kod 2. zadatka

100

PHP

101
1. zadatak

Kreirajte PHP skript koji ispisuje tekst prikazan na slici 7.1.

Slika 7.1.

Reenje:

<head><t i t l e>php 1</ t i t l e></ head>
<body>
<?php
echo " Hel l o Wor l d! " ;
?>
</ body>
</ ht ml >

Listing 7.1. programski kod 1. zadatka

2. zadatak

Kreirajte PHP skript koji ispisuje tekst prikazan na slici kao i aktuelni datum (slika
7.2.).

Slika 7.2.
102
Reenje:

<head>
<t i t l e>php 2</ t i t l e>
</ head>
<body>

<?php

/ * vi sel i ni j ski koment ar
( bl ok koment ar ) */

echo " Pet ar " ; / / j ednol i ni j ski koment ar
echo " Pet r ovi c" ;
echo " VTS Subot i ca" ; # j ednol i ni j ski koment ar
echo " Danas j e " . Dat e( " d. m. Y. " ) ;

?>

</ body>
</ ht ml >


3. zadatak

Kreirajte PHP skript koji ispisuje vrednosti i tipove tri promenljive (slika 7.3.).

Slika 7.3.

103
Reenje:

<head>
<t i t l e>php 3</ t i t l e></ head>
<body>
<?php
$pr om1 = " pet ar " ;
$Pr om1= 13;
$pr om2= 23. 456;
$t 1=get t ype( $pr om1) ;
$t 2=get t ype( $Pr om1) ;
$t 3=get t ype( $pr om2) ;
/ / $t 11=var _dump( $pr om1) ;
/ / f unkci j a var _dump( ) i spi suj e vr ednost i t i p pr omenl j i ve
/ / var _dump( $pr om1) ;
echo " 1. pr omenl j i va ( $pr om1) - $t 1" ;
echo " 2. pr omenl j i va ( $Pr om1) - $t 2" ;
echo " 3. pr omenl j i va ( $pr om2) - $t 3" ;
/ / echo " 1. pr omenl j i va ( $pr om1) - " . get t ype( $pr om1) ;
/ / echo " 2. pr omenl j i va ( $Pr om1) - " . get t ype( $Pr om1) ;
/ / echo " 3. pr omenl j i va ( $pr om2) - " . get t ype( $pr om2) ;
?>
</ body>
</ ht ml >


4. zadatak

Kreirajte PHP skript koji definie dve promenljive, $broj integer tipa i $tekst string
tipa. Kreirati promenljivu $broj2 i dodeliti joj vrednost zbira promenljive $tekst i
broja 20. Nakon toga kreirati promenljivu $broj3 i dodeliti joj vrednost zbira
promenljive $broj2 i teksta vts 20. Ispisati vrednosti promenljivih $tekst, $broj2 i
$broj3 (slika 7.4.).

Slika 7.4.
104
Reenje:

<head>
</ head>
<body>
<?php

$br oj =12;
$t ekst =$br oj . " - st r i ng t i p" ; / / " 12 - st r i ng t i p"
echo " $t ekst " ;
$br oj 2=$t ekst +20; / / " 12 - st r i ng t i p" + 20
echo " Novi br oj = $br oj 2 " ; / / 32
$br oj 3=$br oj 2 + " vt s 20" ; / / 32 + " vt s 20"
echo" 2 = $br oj 3 " ; / / 32

?>
</ body>
</ ht ml >


5. zadatak

Kreirajte PHP skript koji definie dva niza i ispisuje vrednosti tih nizova. Prvi niz
treba da bude jednodimenzionalni i da sadri lina imena, dok drugi niz treba da bude
dvodimenzionalni i da sadri nazive filmova (slika 7.5.).

Slika 5.5.

Reenje:

105
<head>
</ head>
<body>
<?php

$i mena[ 0] =" Pet ar " ;
$i mena[ 1] =" Mar ko" ;
$i mena[ ] =" I gor " ;

$f i l m[ 0] [ 0] =" Mat r i x" ;
$f i l m[ 0] [ 1] =" Lor d of The r i ngs" ;

echo" $i mena[ 0] , $i mena[ 1] , $i mena[ 2] , $i mena[ 3] " ;
echo" {$f i l m[ 0] [ 0] }, {$f i l m[ 0] [ 1] }" ;
?>
</ body>
</ ht ml >


6. zadatak

Kreirajte PHP skript koji izraunava i ispisuje povrinu i obim kruga. Dat je
poluprenik kruga r=15 (slika 7.6.).

Slika 7.6.

Reenje:

<body>
<?php
def i ne( " PI " , 3. 14) ; / / konst ant a
$r =15;
106
$povr si na=$r *$r *PI ;
$obi m=2*$r *PI ;

/ / $f =pow( $r , 2) ; st epenovanj e
/ / 2=st epen
/ / sqr t ( $r ) ; kvadr at ni kor en

echo " pol upr ecni k kr uga = $r " ;
echo " povr si na kr uga = $povr si na" ;
echo " obi mkr uga = $obi m" ;
?>
</ body>
</ ht ml >


7. zadatak

Kreirajte PHP skript koji uz pomo if else uslovne strukture ispisuje tekst (slika
7.7.)

Slika 7.7.

Reenje:

<body>
<?php
$eur o=82;
i f ( $eur o! =81) / / ! = r azl i ci t o
echo ( " Kur s: $eur o" ) ;
el se
echo ( " Pr osecan kur s! " ) ;
?>
</ body>
</ ht ml >

107
8. zadatak

Kreirajte PHP skript koji u zavisnoti od trenutne vrednosti sata ispisuje odgovarajuu
pozdravnu poruku, aktuelni datum i prikazuje sliku. Ako je trenutna vrednost sata
vea od 18, prikazati poruku belom bojom teksta i sliku 2.jpg. Pozadinska boja
dokumenta da bude crna. Ako je trenutna vrednost sata manja od 18, prikazati poruku
crnom bojom teksta i sliku 1.jpg. Pozadinska boja dokumenta u ovom sluaju da bude
uta (slika 7.8.).

Slika 7.8.

Reenje:

<head>
<t i t l e>php 8 - <?php echo Dat e( " d. m. Y. " ) ?></ t i t l e>
</ head>
<?php

$sat =Dat e( H) ;

i f ( $sat <18)
{
$boj a=" yel l ow" ;
$por uka=" Dobar dan! " ;
$boj asl ova=" bl ack" ;
$sl i ka=" 1. j pg" ;
}
el se
{
$boj a=" bl ack" ;
$por uka=" Dobr o vece! " ;
$boj asl ova=" whi t e" ;
$sl i ka=" 2. j pg" ;
}

echo" <body st yl e=\ " backgr ound- col or : $boj a; \ " >" ;
108
echo" $por uka" ;
echo" " ;
?>
</ body>
</ ht ml >


9. zadatak

Kreirajte web stranicu koja prikazuje jedan obrazac sa slike 7.9.1. Obrazac sadri
tekstualno polje (ime), tastere posalji i ponisti. Metod slanja podataka je post. Taster
posalji alje podatje u z9.php skript koji prihvata i obrauje poslate podatke. Taster
ponist brie unetu vrednost. Skript z9.php proverava da li promenljiva ime ima
vrednost i da li su podaci poslati preko obrasca. Ako jedan od ovih zahteva nije
zadovoljen, skript vraa korisnika na stranicu sa obrascem. U suprotnom, ispisuje
pozdravnu poruku za uneto ime (slika 7.9.2.).

Slika 7.9.1.

Slika 7.9.2.

109
Reenje:

<head>
</ head>
<body>
<f or mmet hod=" post " act i on=" z9. php" >
i me: 


</ f or m>
</ body>
</ ht ml >


<?php

$i me = $_POST[ " i me" ] ;
$sdugme = $_POST[ " sdugme" ] ;

i f ( ! empt y( $i me) AND $sdugme == " posal j i " )
{
?>
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml : l ang=" sr "
l ang=" sr " >
<head>
</ head>
<body>
<?php

echo " Zdr avo $i me " ;

?>
</ body>
</ ht ml >
<?php
}
el se
{ header ( " Locat i on: 9. php" ) ;
exi t ( ) ;
}
?>

Listing 7.9.2. php kod z9.php dokumenta

110
10. zadatak

Kreirajte web stranicu koja prikazuje obrazac sa slike 7.10.1. Obrazac sadri
tekstualno polje za unos imena, tri radio tastera za odabir boje teksta, tri radio tastera
za odabir tipa fonta, tastere posalji i ponisti. Metod slanja podataka je post. Taster
posalji salje podatke u skript z10.php koji prihvata i obrauje poslate podatke. Taster
ponisti ponitava unos. Nakon prijema podataka skript z10.php ispisuje pozdravnu
poruku za uneto ime, formatiranu sa odabranom bojom i tipom fonta (slika 7.10.2.).

Slika 7.10.1.

Slika 7.10.2.

111
Reenje:

<head>
</ head>
<body>
i me: 
<hr / >
boj a t ekst a: 
cr vena 
zel ena 
pl ava 
<hr / >
t i p f ont a: 
Ar i al 
Ver dana 
Tahoma 
<hr / >

</ f or m>
</ body>
</ ht ml >


<head>
</ head>
<body>
<?php

$boj a=$_POST[ " boj a" ] ;
$sl ova=$_POST[ " sl ova" ] ;
$i me=$_POST[ " i me" ] ;

echo " Zdr avo $i me" ;
?>
</ body>
</ ht ml >

Listing 7.10.2. programski kod z10.php dokumenta

112
11. zadatak

tekstualno polje za unos imena, tri radio tastera za odabir boje teksta, tri radio tastera
za odabir tipa fonta, opadajui meni za odabir veliine slova (od 10 do 18 pt), tastere
posalji i ponisti. Metod slanja podataka je post. Taster posalji salje podatke u skript
z11.php koji prihvata i obrauje poslate podatke. Taster ponisti ponitava unos. Nakon
prijema podataka skript z11.php ispisuje pozdravnu poruku za uneto ime, formatiranu
sa odabranom bojom, tipom fonta i veliinom slova (slika 7.11.2.).

Slika 7.11.1.

113

Slika 7.12.2.

Reenje:

<head>
</ head>
<body>
i me: 
<hr / >
boj a sl ova: 
cr vena 
zel ena 
pl ava 
<hr / >
t i p f ont a: 
Ar i al 
Ver dana 
Tahoma 
<hr / >
vel i ci na sl ova ( pt ) : 
<sel ect name=" vel i ci na" >
<opt i on val ue=" 10" >10</ opt i on>
</ sel ect ><hr / >
</ f or m>
</ body>
</ ht ml >


114
<head>
<body>
<?php
$boj a=$_POST[ " boj a" ] ;
$sl ova=$_POST[ " sl ova" ] ;
$vel i ci na=$_POST[ " vel i ci na" ] ;
$i me=$_POST[ " i me" ] ;
echo " Zdr avo $i me" ;
?>
</ body>
</ ht ml >


12. zadatak

tekstualna polja za unos vrednosti za promenljive a i b, etiri radio tastera za odabir
aritmetike operacije i taster posalji. Metod slanja podataka je post.Taster posalji salje
podatke u skript z12.php. koji prihvata i obrauje poslate podatke. Nakon prijema
podataka skript z12.php ispisuje vrednosti promenljivih a i b kao i rezultat aritmetike
operacije sa tim promenljivama (slika 7.12.2.). U sluaju da je aritmetika operacija
deljenje i vrednost promenljive b nula, tada ispisuje poruku da je zabranjeno deljene
sa nulom. Koristite switch strukturu.

Slika 7.12.1.
115

Slika 7.12.2.

Reenje:

<head>
</ head>
<body>
a=
 
 
b= 
<hr / >

+ 

-
 

*
 

/
 

<hr / >

</ f or m>
</ body>
</ ht ml >


<head>
116
</ head>
<body>
<?php

$vr ednost = 0;

$oper aci j a = $_POST[ " oper aci j a" ] ;

$a = $_POST[ " a" ] ;

$b = $_POST[ " b" ] ;

/ *

zadat ak se moze pr osi r i t i pr over omda l i pr omenl j i ve a i b i maj u
vr ednost

*/

swi t ch ( $oper aci j a)
{
case " sabi r anj e" : $vr ednost =$a+$b;
$i spi s = " a+b = $vr ednost " ;
br eak;

case " oduzi manj e" : $vr ednost =$a- $b;
$i spi s = " a- b = $vr ednost " ;
br eak;

case " mnozenj e" : $vr ednost =$a*$b;
$i spi s = " a*b = $vr ednost " ;
br eak;

case " del j enj e" :
i f ( $b==0)
$i spi s = " Ni j e dozvol j eno del j enj e sa
nul om! " ;
el se
{
$vr ednost =$a/ $b;
$i spi s = " a/ b = $vr ednost " ;
}
br eak;

def aul t : $i spi s = " nepost oj eca oper aci j a" ;
br eak;

}

echo $i spi s;

?>
</ body>
</ ht ml >


117
13. zadatak

Kreirajte PHP skript koji ispisuje rei i brojeve prema slici 7.13. Za ispise koristiti for
petlju.

Slika 7.13.

Reenje:

<head>
</ head>
<body>
<?php

f or ( $k=1; $k<=5; $k++)
echo " VTS " ;

118
echo" " ;

f or ( $i = 1; $i <= 10; $i ++)
{
i f ( $i ==10)
echo" $i " ;
el se
echo " $i , " ;
}

echo" " ;

f or ( $i = 1; $i <= 10; $i ++)
{
i f ( $i %2==0)
echo " $i " ;
el se
echo " $i " ;
}

?>
</ body>
</ ht ml >


14. zadatak

Kreirajte PHP skript koji ispisuje rei i brojeve prema slici 7.14. Za ispise koristiti
while petlju.

Slika 7.14.

119
Reenje:

<body>
<?php
$k = 1;
whi l e ( $k<=5)
{
echo " VTS " ;
$k++;
}
echo " " ;
$i = 1;
whi l e ( $i <= 10)
{
i f ( $i ==10)
echo" $i " ;
el se
echo " $i , " ;
$i ++;
}
?>
</ body>
</ ht ml >


15. zadatak

Kreirajte PHP skript koji ispisuje brojeve prema slici 7.15. Za ispis koristiti do...while
petlju.

Slika 7.15.
120
Reenje:

<head>
<body>
<?php
$i = 10;

do
{
echo " $i " ;
$i - - ;
}
whi l e ( $i >= 1)
?>
</ body>
</ ht ml >


16. zadatak

Kreirajte PHP skript koji definie niz od etiri elemenata i ispisuje sve vrednosti niza.
Za ispis koristit foreach funkciju (slika 7.16.).

Slika 7.16.

Reenje:

<head>
121
</ head>
<body>
<?php

$ni z = ar r ay ( 5, " subot i ca" , " vt s" , 17) ;
$i =1;

/ *

f unkci j a count ( $i meni za) daj e ukupan br oj el emenat a ni za

*/

$br oj = count ( $ni z) ;

echo " U ni zu i ma $br oj el emenat a " ;

f or each ( $ni z as $vr ednost )
{
echo " $i . vr ednost : $vr ednost . " ;
$i ++;
}

?>
</ body>
</ ht ml >


17. zadatak

Kreirajte PHP skript koji uz pomo funkcije rauna i ispisuje rezultat sabiranja
promenljivih a i b. Vrednosti promenljivih zadati proizvoljno. Definisati dve funkcije,
jednu koja ne vraa vrednost i drugu koja vraa (slika 7.17.).

Slika 7.17.

122
Reenje:

<body>
<?php
$a = 1;
$b = 2;

echo " pr omenl j i va \ $a=$a, pr omenl j i va \ $b=$b " ;

f unct i on sabi r anj e( $a, $b)
{
$c = $a + $b;
echo " \ $a+\ $b = $c " ;
}

f unct i on sabi r anj e2( $a, $b)
{
$c = $a + $b;
r et ur n $c;
}

sabi r anj e( $a, $b) ; / / pozi v f unkci j e
$c = sabi r anj e2( $a, $b) ;
echo " \ $a+\ $b = $c" ;
?>
</ body></ ht ml >


18. zadatak

Kreirajte PHP skript koji uz pomo funkcije izraunava i ispisuje rezultat sabiranja
promenljivih a i b. Vrednosti promenljivih zadati proizvoljno. Koristiti globalne
promenljive (slika 7.18.).

Slika 7.18.
123

Reenje:

<head>
</ head>
<body>
<?php

$a = 1;
$b = 2;
echo " pr omenl j i va \ $a=$a, pr omenl j i va \ $b=$b " ;

f unct i on sabi r anj e( )
{
gl obal $a, $b;
$b = $a + $b;
}

sabi r anj e( ) ;

echo " \ $a+\ $b = $b" ;
?>
</ body>
</ ht ml >


19. zadatak

Kreirajte PHP skript koji uz pomo include() funkcije ukljuuje u sebe fajl
promenljive.php i ispisuje njen sadraj. Dokument promenljive.php treba da sadri
etiri promenljive od kojih je jedna ime slike (slika 7.19.)

Slika 7.19.
124
Reenje:

<?php

$pr om1=" VTS" ;
$pr om2=234. 5;
$pr om3=50;
$sl i ka=" 1. j pg" ;

?>

Listing 7.19.1. sadraj dokumenta promenljive.php

<head>
</ head>
<body>
<?php

i ncl ude( " pr omenl j i ve. php" ) ;

/ *
za ukl j uci vanj e spol j asnj i h dat ot eka u PHP- u se kor i st e i ncl ude( ) i
r equi r e( ) f unkci j e

i ncl ude( ) - ukl j ucuj e spol j asnj u dat ot eku, ako se dat ot eka ne
pr onadj e nast avl j a se sa i zvr savanj empr ogr ama
i ncl ude_once( ) - ponasa se i st o kao f uncki j a i ncl ude( ) ,
j edi na r azl i ka j e da se spol j asnj a
dat ot eka ne ukl j ucuj e ako j e vec j ednombi l a ukl j ucenj a u okvi r u
skr i pt a
r equi r e( ) - ukl j ucuj e spol j asnj u dat ot eku, ako se dat ot eka ne
pr onadj e pr eki da se i zvr savanj e pr ogr ama
r equi r e_once( ) - ponasa se i st o kao f uncki j a r equi r e( ) ,
j edi na r azl i ka j e da se spol j asnj a
dat ot eka ne ukl j ucuj e ako j e vec j ednombi l a ukl j ucenj a u okvi r u
skr i pt a
*/

echo" \ $pr om1=$pr om1 " ;



echo" " ;

?>
</ body>
</ ht ml >

Listing 7.19.2. programski kod 19. zadatka

125
20. zadatak

Kreirajte PHP skript koji ispisuje sve podatke iz login tabele baze podataka it. Ispis
formatirati prema slici 7.20.

CREATE TABLE `l ogi n` (
ì d_l ogi n` i nt ( 11) NOT NULL aut o_i ncr ement ,
ì me` char ( 30) char act er set l at i n1 NOT NULL,
`pr ezi me` char ( 30) char act er set l at i n1 NOT NULL,
èmai l ` char ( 30) char act er set l at i n1 NOT NULL,
`kor i sni k` char ( 10) char act er set l at i n1 NOT NULL,
`l ozi nka` char ( 10) char act er set l at i n1 NOT NULL,
PRI MARY KEY ( ì d_l ogi n`)
) ENGI NE=I nnoDB DEFAULT CHARSET=ut f 8 COLLATE=ut f 8_uni code_ci
AUTO_I NCREMENT=1 ;

Listing 7.20.1. SQL izrazi za kreiranje tabele login

Slika 7.20.

Reenje:

<head>
<t i t l e>PHP 20</ t i t l e>
</ head>
<body>
<?php

$ser ver = " l ocal host " ;
$kor i sni k = " r oot " ;
$l ozi nka = " r oot " ;
126
$baza = " i t " ;

$konekci j a = mysql _connect ( " $ser ver " , " $kor i sni k" , " $l ozi nka" ) or
di e( mysql _er r or ( ) ) ;
mysql _sel ect _db( " $baza" , $konekci j a) or di e( mysql _er r or ( ) ) ;

$sql = " SELECT * FROM l ogi n" ;

/ *
$sql = " SELECT * FROM l ogi n WHERE pr ezi me LI KE ' m%' " ;

na ovaj naci n mozemo vr si t i pr et r agu

u kr ei r anj u SQL upi t a znakovi %i _ i maj u sl edeca znacenj a:

%- dzoker znak, vi se znakova
_ - dzoker znak, j edan znak
*/

$r ezul t at = mysql _quer y( $sql ) or di e( mysql _er r or ( ) ) ;

echo " <t abl e bor der =\ " 1\ " al i gn=\ " cent er \ " >" ;
echo
" <t r ><t h>I me</ t h><t h>Pr ezi me</ t h><t h>emai l </ t h><t h>l ozi nka</ t h></ t r >" ;

i f ( mysql _num_r ows( $r ezul t at ) >0)
{
whi l e ( $r ecor d = mysql _f et ch_ar r ay( $r ezul t at ) )
echo
" <t r ><t d>$r ecor d[ i me] </ t d><t d>$r ecor d[ pr ezi me] </ t d><t d>$r ecor d[ emai l ] </ t d>
<t d>$r ecor d[ l ozi nka] </ t d></ t r >" ;
}
el se
{
echo " Nema podat aka" ;
}

echo " </ t abl e>" ;

mysql _f r ee_r esul t ( $r ezul t at ) ;
?>
</ body>
</ ht ml >

Listing 7.20.2. programski kod 20. zadatka

21. zadatak

Kreirajte PHP skript koji izvrava upit koji vri promenu vrednosti u tabeli login baze
podataka it. Upit treba da promeni vrednosti kolone ime na Petar u onim redovima
gde je vrednost kolone prezime jednaka markovic.

Reenje:

127
<head>
</ head>
<body>
<?php

$baza = " i t " ;


$sql = " UPDATE l ogi n SET i me=' Pet ar ' WHERE pr ezi me = ' mar kovi c' " ;

i f ( mysql _af f ect ed_r ows( ) >0)
echo " Uspesno st e pr omeni l i podat ke! " ;
el se
echo " Ni j e dosl o do pr omene" ;
?>
</ body>
</ ht ml >


22. zadatak

Kreirajte PHP skript koji izvrava upit koji brie zapise iz tabele login baze podataka
it u onim redovima gde je vrednost kolone ime jednaka Nikola.

Reenje:

<head>
</ head>
<body>
<?php

$baza = " i t " ;



$sql =" DELETE FROM l ogi n WHERE i me=' Ni kol a' " ;


128
echo " Uspesno st e i zbr i sal i podat ke! " ;
el se
?>
</ body>
</ ht ml >


23. zadatak

Kreirajte PHP skript koji izvrava upit koji vri unos podataka u tabelu login baze
podataka it.

Reenje:

<head>
</ head>
<body>
<?php

$baza = " i t " ;



$sql = " I NSERT I NTO l ogi n ( i me, pr ezi me, emai l , kor i sni k, l ozi nka)
val ues
( ' Ni kol a' , ' Ni kol i c' , ' ni kol a@vt s. su. ac. yu' , ' ni koni ' , ' ni ko789' ) " ;


/ *
ako se zel e upi sat i podaci dobi j eni pr eko obr asca t r eba da se
kor i st i sl edeca si nt aksa:
I NSERT I NTO l ogi n ( i me, pr ezi me, emai l , l ozi nka) val ues
( ' $i me' , ' $pr ezi me' , ' $eami l ' , ' $l ozi nka' )
*/
echo " Uspesno st e dodal i podat ke! " ;
el se
?>
</ body>
</ ht ml >


129
24. zadatak

Kreirajte web stranicu koja prikazuje obrazac. Obrazac sadri opadajuu listu sa
imenima korisnika iz tabele login baze podataka it, tastere posalji i ponisti (slika
7.24.1.). Imena korisnika u opadajuem meniu sortirati u abecednom redosledu. Za
podrazumevanu vrednost postaviti null i tekst izaberite korisnika-. Taster ponisti vri
ponitavanje izbora i prikazuje podrazumevanu vrednost. Taster posalji, post
metodom alje podatke u skript 24.php koji prihvata poslate podatke i ispisuje sledee
informacije o studentima: redni broj, ime, prezime, email i datum pristupa. Ove
informacije sortirati prema koloni datum u opdajuem redosledu. Kod formiranja
upita za ispis potrebno je izvriti spajanje tabela login i data preko kljua id_login. U
sluaju da nije izabrano ime korisnika ili da podaci nisu poslati preko obrasca, skript
treba da preusmeri korisnika na predhodnu stranicu. Ispis formatirati prema slici
7.24.2. Tabela login ima istu strukturu kao u 20. zadatku. Parametre za povezivanje sa
bazom podataka postaviti u spoljanju datoteku db_config.php.

CREATE TABLE `dat a` (
ì d_dat a` i nt ( 11) NOT NULL aut o_i ncr ement ,
ì d_l ogi n` i nt ( 11) NOT NULL,
`dat um` dat e NOT NULL,
PRI MARY KEY ( ì d_dat a`)
) ENGI NE=I nnoDB DEFAULT CHARSET=l at i n1 AUTO_I NCREMENT=1 ;

Listing 7.24.1. SQL izrazi za kreiranje tabele data

Slika 7.24.1.

130

Slika 7.24.2.

Reenje:

<?php

$baza = " i t " ;



?>

Listing 7.24.2. sadraj db_config.php datoteke

<head>
</ head>
<body>

<f or mmet hod=" post " act i on=" 24. php" >
kor i sni k
<?php

i ncl ude( " db_conf i g. php" ) ;

$sql = " SELECT i d_l ogi n, kor i sni k
FROM l ogi n
ORDER BY kor i sni k ASC" ;

131

{

echo " <sel ect name=\ " i d_l ogi n\ " si ze=\ " 1\ " >\ n" ;
echo " <opt i on val ue=\ " nul l \ " >- i zaber i kor i sni ka - </ opt i on>\ n" ;

echo " <opt i on
val ue=\ " $r ecor d[ i d_l ogi n] \ " >$r ecor d[ kor i sni k] </ opt i on>\ n" ;

echo " </ sel ect >\ n" ;

}
?>
 
</ f or m>
</ body>
</ ht ml >

Listing 7.24.3. programski kod stranice sa obrascem

<?php

$i d_l ogi n = $_POST[ " i d_l ogi n" ] ;
$sd = $_POST[ " sd" ] ;


i f ( empt y( $i d_l ogi n) OR empt y( $sd) OR $sd! =" posal j i " OR $i d_l ogi n
== " nul l " )
{
header ( " Locat i on: 24- f or m. php" ) ;
exi t ( ) ;
}
el se
{

i ncl ude( " header . ht ml " ) ;

$sql = " SELECT L. i me, L. pr ezi me, L. emai l , D. dat um
FROM l ogi n L, dat a D
WHERE L. i d_l ogi n = D. i d_l ogi n
AND D. i d_l ogi n = ' $i d_l ogi n' ORDER BY D. dat umDESC
" ;


{
$i = 1;

echo " <t abl e bor der =\ " 1\ " cel l paddi ng=\ " 5\ "
cel l spaci ng=\ " 5\ " al i gn=\ " cent er \ " >" ;
echo " <t r ><t h>R. b. </ t h><t h>I me</ t h><t h>Pr ezi me</ t h>
132
<t h>Emai l </ t h><t h>Dat um</ t h></ t r >" ;

{

echo " <t r ><t d>$i . </ t d><t d> $r ecor d[ i me] </ t d><t d>
$r ecor d[ pr ezi me] </ t d><t d> $r ecor d[ emai l ]
</ t d><t d>$r ecor d[ dat um] </ t d></ t r >" ;
$i ++;

} / / end of whi l e

echo " </ t abl e>" ;

} / / end of i f
el se
{
echo " Nema podat aka za i zabr anog kor i sni ka! " ;
}

i ncl ude( " f oot er . ht ml " ) ;

} / / end of el se
?>

Listing 7.24.4. programski kod datoteke 24.php

<head>
<t i t l e>PHP</ t i t l e>
</ head>
<body>

Listing 7.24.5. sadraj datoteke header.html

</ body>
</ ht ml >

Listing 7.24.6. sadraj datoteke footer.html

133
25. zadatak

Kreirajte web stranicu koja prikazuje dva obrasca kao na slici 7.25.1. Prvi obrazac
slui za prijavu na stranicu sa podacima email i lozinka. Drugi obrazac prihvata
podatke za registraciju novog korisnika. Tasteri posalji, post metodom alju podatke u
PHP skript check.php koji prihvata i obrauje poslate podatke. Tasteri ponisti briu
unose iz tekstualnih polja obrasca. Skript na osnovu parametra cmd koji se alje get
metodom poziva odgovarajue funkcije. Prvi obrazac za parametar cmd ima vrednost
1 a drugi 2. Ako su podaci poslati sa prvog obrasca vri se provera da li postoji
korisnik u tabeli login sa datim podacima. Ako postoji ispisati pozdravnu poruka u
protivnom preusmeriti korisnika na predhodnu stranicu. Podaci poslati sa drugog
obrasca se upisuju u tabelu login. U sluaju uspenog unosa, ispisati poruku o
uspenoj registraciji, u suprotnom ispisati odgovarajuu poruku o greci. Poruke
ispisivati ispod drugog obrasca. Parametre za povezivanje sa bazom podataka
postaviti u spoljanju datoteku db_config.php. Zadatak je potrebno reiti korienjem
funkcija.

Slika 7.25.1.

Reenje:

<head>
<t i t l e>l ogi n</ t i t l e>
134
</ head>
<body>
<body>
<hr / >
Logi n 
<f or mmet hod=" post " act i on=" check. php?cmd=1" name=" l ogi n" >
Emai l : 
Lozi nka: 


</ f or m>
<hr / >
Novi kor i sni k: 
<f or mmet hod=" post " act i on=" check. php?cmd=2" name=" r egi st er " >
I me: 
Pr ezi me: 
Emai l : 
Lozi nka: 


</ f or m>
<hr / >
<?php
$por uka = $_GET[ " por uka" ] ;

i f ( $por uka==1)
echo " Ne post oj i kor i sni k sa ovi mpodaci ma! " ;
i f ( $por uka==2)
echo " Uspesna r egi st r aci j a! " ;
i f ( $por uka==3)
echo " Gr eska pr i l i komunosa! " ;
?>
</ body>
</ ht ml >


<?php

$baza = " i t " ;



?>

Listing 7.25.2. sadraj db_config.php datoteke

<?php

$cmd = $_GET[ " cmd" ] ;
135
$l ozi nka = $_POST[ " l ozi nka" ] ;
$kor i sni k = $_POST[ " kor i sni k" ] ;
$emai l = $_POST[ " emai l " ] ;
$i me = $_POST[ " i me" ] ;
$pr ezi me = $_POST[ " pr ezi me" ] ;

/ *
zadat ak bi se mogao pr osi r i t i sa pr over omunet i h vr ednost i pr eko
obr asca
*/

i f ( $cmd==1)
{
pr i j ava_kor i sni ka( $emai l , $l ozi nka) ;
}
el sei f ( $cmd==2)
{
r egi st r aci j a_kor i sni ka( $i me, $pr ezi me, $emai l , $l ozi nka) ;
}
el se
{
header ( " Locat i on: l ogi n. php?" ) ;
}

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ / f unkci j e
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

f unct i on pr i j ava_kor i sni ka( $emai l , $l ozi nka)
{

$sql =" SELECT * FROM l ogi n WHERE emai l =' $emai l ' and l ozi nka=' $l ozi nka' " ;


header ( " Locat i on: saj t . php" ) ;
el se
header ( " Locat i on: l ogi n. php?por uka=1" ) ;
}

f unct i on r egi st r aci j a_kor i sni ka( $i me, $pr ezi me, $emai l , $l ozi nka)
{

$sql = " I NSERT I NTO l ogi n ( i me, pr ezi me, emai l , l ozi nka) val ues
( ' $i me' , ' $pr ezi me' , ' $emai l ' , ' $l ozi nka' ) " ;


el se
}

?>

Listing 7.25.3. programski kod check.php datoteke

136
26. zadatak

Kreirajte web stranicu koja poseduje strukturu prikazanu na slici 7.26.1. Zadatak reiti
primenom PHP funkcije include(). Umesto tabela za kreiranje strukture sajta se mogu
koristiti i div elementi. Na slici 7.26.2. se vidi primer implementacije strukture na
jednoj stranici.

HEADER
CONTENT
FOOTER
MENU

Slika 7.26.1.

Slika 7.26.2.

137
Reenje:

<?php
i ncl ude( " header . php" ) ;
i ncl ude( " menu. php" ) ;

swi t ch ( $_GET[ " l i nk" ] )
{
case " i ndex" :
i ncl ude( " i ndex. php" ) ;
br eak;

case " mp3" :
i ncl ude( " mp3. php" ) ;
br eak;

case " downl oad" :
i ncl ude( " downl oad. php" ) ;
br eak;
def aul t :
i ncl ude( " i ndex. php" ) ;
br eak;
}

i ncl ude( " f oot er . php" ) ;
?>

Listing 7.26.1. PHP kod web stranice

<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
<t i t l e>PHP Web page</ t i t l e>
</ head>
<body>
<t abl e al i gn=" cent er " bor der =" 0" wi dt h=" 700" st yl e=" bor der : 1px sol i d
#000000; " >
<t r >

</ t d>
</ t r >

Listing 7.26.2. sadraj header.php datoteke

<t r >
<t d wi dt h=" 150" al i gn=" l ef t " >
<a hr ef =" web. php?l i nk=i ndex" >Home</ a> 
<a hr ef =" web. php?l i nk=mp3" >Mp3</ a> 
<a hr ef =" web. php?l i nk=downl oad" >Downl oad</ a>
</ t d>

Listing 7.26.3. sadraj menu.php datoteke

138
<t d wi dt h=" 550" >
Wel come t o php web page
</ t d>
</ t r >

Listing 7.26.3. sadraj index.php datoteke

<t d wi dt h=" 550" >
Mp3
</ t d>
</ t r >

Listing 7.26.4. sadraj mp3.php datoteke

<t d wi dt h=" 550" >
Downl oad
</ t d>
</ t r >

Listing 7.26.5. sadraj download.php datoteke

<t r >
© by VTS
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >

Listing 7.26.6. sadraj footer.php datoteke

27. zadatak

Podesiti Apache Web server tako da se prilikom pozivanja bilo kojeg PHP skripta iz
direktorijuma it vri autentifikacija korisnika preko korisnikog imena i lozinke.
Podaci o korisnikim imenima i lozinkama treba da se nalaze u datoteci pod imenom
passwords u direktorijumu c:/wamp (ako ste instalirali Wamp server na drugoj
lokaciji koristite drugi direktorijum). Lozinka upisati u kriptovanom obliku. Kreirati
najmanje dva korisnika.

Reenje:

Prvo je potrebno podesiti konfiguracioni fajl http.conf, koji se nalazi u direktorijumu
c:/wamp/Apache2/conf. Pronaite fajl i otvorite ga za editovanje u nekom tekst
editoru (na primer Notepad). Ovom fajlu moete pristupiti i preko klika na ikonicu
wamp servera i odabirom opcije Config files (slika 7.27.1.) U fajlu pronaite deo #
Control access to UserDir directories. Ispod svih ovih stavki unesite stavke sa
listinga 7.27.1.

139

Slika 7.27.1.

<Directory "c:/wamp/www/it/">
AuthType Basic
AuthName "vts login"
AuthUserFile c:/wamp/password
Require valid-user
</Directory>

Listing 7.27.1. stavke koje se unose u fajl httpd.conf

Prvi parametar oznaava direktorijum koji elimo da zatitimo. Sledei parametar
definie osnovni tip autentifikacije. Parametar AuthName sadri tekst koji e se
ispisati prilikom prikazivanja prozora za unos korisnikog imena i lozinke. Datoteku
koja uva podatke o koriscima podeavamo preko parametra AuthUserFile. Poslednji
parametar definie pravilo da je za pristup skriptovima iz ovog direktorijuma,
potreban validan korisnik. Nakon unosa stavki u konfiguracioni fajl potrebno je
snimiti izmene i ponovo pokrenuti (restart) Apache web server.

Slika 7.27.2.
140
Sledei korak je kreiranje datoteke sa korisnikim podacima. pomou htpasswd
programa koji se nalazi unutar Apache web servera. Izaberite direktorijum
c:/wamp/Apaceh2/bin preko Windows Explorer-a ili Total Commander-a. Uite u
komandni reim rada (sika 7.27.1.) i unesite naredbu iz listinga 7.27.2.

htpasswd bc ../../passwords student vts

Listing 7.27.2. naredba za pozivanje htpasswd programa

Ovom naredbom pozivamo program htpasswd sa sledeim parametrima:

b - vri dodavanje novog zapisa
c kreira datoteku sa podacima
../../passwords putanja datoteke sa podacima (u ovom sluaju pokazuje na c:/wamp/)
student ime korisnika
vts lozinka

Izvravanjem ove naredbe dobijamo poruku u uspenom kreiranju dadoteke i zapisa
(slika 7.27.3.). Lozinka se kriptuje u MD5 formatu.

Slika 7.27.3.

Da bi smo dodali novog korisnika, predhodnu naredbu je potrebno malo
modifikovati. Pogledajte listing 7.27.3.

htpasswd b ../../passwords studen2t vts2

Listing 7.27.3. naredba za pozivanje htpasswd programa

Sada smo izostavili parametar c koji bi izbrisao sve postojee podatke u datoteci
passwords. Bez upotrebe ovog parametra dodajemo novi zapis, a stari zapisi se ne
briu (slika 7.27.4.). U listingu 7.27.4. se nalazi sadraj datoteke passwords

student:$apr1$.03.....$Dsga09z72xqijipK7Em4c.
student2:$apr1$U23.....$40yBJSKup9tg.WSctVyvz.

Listing 7.27.4 sadraj datoteke passwords

141

Slika 7.27.4.

Nakon svih ovih koraka moemo proveriti da li smo podesili sve kako treba. U web
browser upisati adresu http://localhost/it/. Ako je sve u redu dobiemo dijalog za unos
podataka (slika 7.27.5 i 7.27.6.) u zavisnosti od browsera koji koristimo.

Slika 7.27.5.

Slika 7.27.6.
142
Ako se i nakon unosa podataka pojavljuje dijalog za prijavu potrebno je proveriti da li
smo dobro uneli podatke, da li je dobro definisana putanja do datoteke passwords.

Direktorijume moemo zatiti i preko .htaccess datoteke. Najprostije reeno, .htaccess
je fajl koji na nivou direktorijuma u kome se nalazi menja normalno ponaanje
Apache web servera. Fajl .htaccess je obian ASCII fajl. Ne postoji neki poseban
editor za njegovo editovanje, ve e vam sasvim dobro posluiti bilo koji editor koji
radi u ASCII kodu.
Kako i kada (ne) koristiti ovaj fajl? Upotreba .htaccess fajla se preporuuje samo u
onim sluajevima kada nemate root pristup glavnom konfiguracionom fajlu Apache
web servera. Ovo je sluaj kada se hosting web sajta vri na web serveru nekog
internet provajdera, gde se vie stotina sajtova hostuje a administrator internet
provajdera nije voljan da esto menja podeavanja na nivou Apache web servera. Ako
posedujete root pristup poeljno je podesiti glavni konfiguracioni fajl.
Za ime datoteke sa podacima najee se koristi .htpasswd.

Aut hName " Samo za admi ni st r at or e"
Aut hType Basi c
Aut hUser Fi l e c: / wamp/ . ht passwd
Requi r e val i d- user

Listing 7.27.5 sadraj datoteke .htaccess

143

PHP
zadaci za proveru
znanja

144
1. zadatak

Kreirati web stranicu koja sadri obrazac prikazan na slici 8.1.1. Podaci sa obrasca se
alju na provera.php stranicu. Stranica provera.php vri proveru unetih vrednosti za
obavezna polja (oznaena su sa zvedicama). Ukoliko korisnik nije uneo vrednost u
jedno od obaveznih polja vratiti korisnika na stranicu sa obrascem i ispisati poruku o
greci. Uz pomo funkcije koja vraa vrednost i unetih vrednosti (a i b promenljiva)
izraunati formulu a*R+b*a gde je R konstanta koja ima vrednost 20. Ako je
korisnik uneo vrednosti za sva polja proveriti parnost godine rodjenja. Ukoliko je
godina rodjenja paran broj koristiti crvenu boju za ispis teksta a u sluaju neparnog
broja plavu boju. Ispisati sve unete vrednosti sa obrasca kao i rezultat formule (slika
8.1.2.). Ukoliko je godina rodjenja paran broj i ako je starost korisnika >18
preusmeriti korisnika na adresu www.vts.su.ac.yu. Za definisanje boja teksta koristiti
CSS. Za kreiranje opadajue liste sa vrednostima godina rodjenja koristiti for ciklus.
Godina rodjenja moe da ima vrednosti od 2000 do 1950 godine.

Slika 8.1.1.

145

Slika 8.1.2.

Reenje:

<head>
<t i t l e>For me</ t i t l e>
</ head>
<body>
<f or mmet hod=" post " act i on=" pr over a. php" name=" f or ma" >

pr omenl j i va a: * 
pr omenl j i va b: * 

 *
 
 *
 
godi na r odj enj a:
<?php
echo " <sel ect name=\ " godi na\ " si ze=\ " 1\ " >" ;
echo " <opt i on val ue=\ " nul l \ " >- i zaber i t e godi nu - </ opt i on>" ;
f or ( $i =2000; $i >=1950; $i - - )
echo " <opt i on val ue=\ " $i \ " >$i </ opt i on>" ;
echo " </ sel ect > *" ;
?>
 
146
 
<l abel >oper at i vni si st em: </ l abel >
wi ndows
l i nux
 
 
<l abel >koment ar : </ l abel >
 
<t ext ar ea name=" koment ar " r ows=" 3" col s=" 20" ></ t ext ar ea>
 
 

 
 

</ f or m>

<?php
$p = $_GET[ ' p' ] ;

i f ( $p==" 1" )
echo " Ni st e i spuni l i obavezna pol j a! " ;

?>

</ body>
</ ht ml >


<?php

def i ne( " R" , 20) ;

$a = $_POST[ ' a' ] ;
$b = $_POST[ ' b' ] ;
$i me = $_POST[ ' i me' ] ;
$pr ezi me = $_POST[ ' pr ezi me' ] ;
$godi na = $_POST[ ' godi na' ] ;
$os = $_POST[ ' os' ] ;
$koment ar = $_POST[ ' koment ar ' ] ;

i f ( ! i sset ( $a) OR ! i sset ( $b) OR ! i sset ( $i me) OR ! i sset ( $pr ezi me) OR
! i sset ( $godi na) )
{
header ( " Locat i on: f or ma. php?p=1" ) ;
exi t ( ) ;
}

$st ar ost = dat e( " Y" ) - $godi na;

i f ( $godi na%2==0)
{
$par nost _godi ne = 1;
$boj a_t ekst a = " #f f 0000" ;
}
el se
{
$par nost _godi ne = 0;
147
$boj a_t ekst a = " #0000f f " ;
}

i f ( $par nost _godi ne == " 1" AND $st ar ost >18)
{
header ( " Locat i on: ht t p: / / www. vt s. su. ac. yu" ) ;
exi t ( ) ;
}

echo " \ n" ;

echo " Unet e vr ednost i : \ n" ;

echo " a = $a \ n" ;
echo " b = $b \ n" ;
echo " i me = $i me \ n" ;
echo " pr ezi me = $pr ezi me \ n" ;
echo " godi na r odj enj a = $godi na \ n" ;
echo " oper at i vni si st em= $os \ n" ;
echo " komenat r = $koment ar \ n" ;
echo " r ezul t at f or mul e = " . i zr acunaj _f or mul u( $a, $b) ;

f unct i on i zr acunaj _f or mul u( $a, $b)
{
$r ezul t at = $a*R+sqr t ( $b) *pow( $a, 5) ;
r et ur n $r ezul t at ;
}

?>

Listing 8.1.2. PHP kod provera.php datoteke

148

Dodatak

149
1. Instalacija WAMP servera

Da bi smo na Windows platformama bili u mogunosti da kreiramo PHP aplikacije sa
podrkom za baze podataka, neophodno je da imamo instaliran Apache web server,
PHP programski jezik, MySQL server baze podataka i nekoliko korisnih programskih
alata za rad sa bazama podataka. Instalacija svake komponente pojedinano traje due
i este su greke kod ljudi koji se prvi put sreu sa ovima. Stoga se preporuuje
instalacija preko paketa koji sadre sve navedene programe. U naem primeru
koristiemo Wamp server koji moe da se preuzme sa stranica
http://www.wampserver.com i http://www.it.vts.su.ac.yu.

Nakon pokretanja izvrnog fajla pojavljuje se prozor sa pozdravnom porukom (slika
8.1.1.). Klikom na taster next prelazimo na sledei korak.

Slika 8.1.1.

Slika 8.1.2.

150
Prihvatamo informacije u vezi korienja programa (slika 8.1.2.) i prelazimo na
sledei korak gde upisujemo ime direktorijuma gde elimo da instaliramo Wamp
server. Podrazumevana vrednost je c:\wamp (slika 8.1.3.). Nakon toga upisujemo ime
direktorijuma koje e se pojaviti nakon instalacije u Start menu direktorijumu (slika
8.1.4.).

Slika 8.1.3.

Slika 8.1.4.

151

Slika 8.1.5.

Wamp server se ne pokree automatski sa startovanjem Windows operativnog
sistema. Ako elimo da se startovanje vri automatski treba da izaberemo opciju sa
slike 8.1.5. Manualno pokretanje Wamp servera se preporuuje jer moe doi do
konflikta u radu sa drugim programima.

Slika 8.1.6.

Sledei prozor prikazuje uneta podeavanja. Ako su vrednosti ispravne moemo
pritisnuti taster Install i pokrenuti proces instalacije. Pritiskom na taster Back vraamo
se na predhodni korak i imamo mogunost promene unetih vrednosti.

152

Slika 8.1.7.

Slika 8.1.7. prikazuje procesa instalacije.

Slika 8.1.8.

Na sledeem koraku moemo izabrati root (korenski) direktorijum. Preporuuje se
upotreba podrazumevane vrednosti www (slika 8.1.8.).

153

Slika 8.1.9.

Na slici 8.1.9. vidimo polje u koje moemo uneti podatke naeg SMTP servera. Ako
niste sigurni ta treba da unesete moete ostaviti podrazumevanu vrednost localhost.
Nako toga sledi unos email adrese (slika 8.1.10.). Moete ostaviti podrazumevanu
vrednost. Ove stavke su Vam bitne ako imate instaliran SMTP server.

Slika 8.1.10.

154

Slika 8.1.11.

Ako je instalacija protekla bez greke dobiete poruku o tome i mogunost startovanja
Wamp servera (slika 8.1.11.).

Slika 8.1.12.
155
Poto ste instalirali Wamp server, u web browser moete uneti adresu http://localhost
koja pokazuje na va root direktorijum (c:/wamp/www/). Preporuuje se kreiranje
posebnih direktorijuma za svaki projekat. Na primer, direktorijum c:/wamp/www/it se
u web browseru poziva preko adrese http://localhost/it/.

2. Postavljanje web prezentacije na kolski web server

Korisnici kojima je dozvoljeno postavljanje web sadraja imaju na raspolaganju
njihov home direktorijum na raunaru maugli.vts.su.ac.yu, za web prezentacije.
Pristup svom home direktorijumu se vri preko klijent programa WinSCP. WinSCP je
jedan open source SFTP klijent za Microsoft Windows operativni sistem. Njegova
glavna odlika je siguran transfer datoteka izmeu lokalnog i udaljenog raunara.
Pored toga, WinSCP nudi osnovne funkcije jednog fajl menader programa. Koristi
Secure Shell (SSH) i podrava SCP protokol.

Program WinSCP se moe besplatno preuzeti sa adresa
http://winscp.net/eng/index.php i http://download.vts.su.ac.yu.

Sledi kratko uputstvo za kreiranje nove konekcije i postavljanje web stranice na web
server Visoke tehnike kole u Subotici.

Nakon startovanja programa potrebno je kreirati novu sesiju preko opcije New. Nakon
odabira ove opcije pojavljuje se dijalog prozor koji sadri vie polja (slika 8.2.1.).

Slika 8.2.1.

156
Unesite sledee parametre:

host name: maugli.vts.su.ac.yu
port number: 22
user name: vae korisnicko ime
password: vau korisnicku lozinku
protocol: SFTP

Pritisnite taster Login i unesite svoju korisniku lozinku jo jednom.

Slika 8.2.2.

Po uspenom pristupu, nai ete se u vaem home direktorijumu (slika 8.2.2.). Morate
kreirati direktorijum www (funkcijski taster F7) u kojem ete aurirati vau web
prezentaciju. Ako ve imate kreiran direktorijum predhodni korak moete preskoiti.

Prva stranica vae prezentacija treba da ima ime index.html ili index.php (obavezno
malim slovima). Vodite rauna i o tome da web server (Linux) razlikuje velika i mala
slova u imenima datoteka.

Vaa prezentacija e imati URL adresu kao npr: http://www.vts.su.ac.yu/~it, gde it
predstavlja Vae korisniko ime.

157
3. Korisni likovi

http://www.vts.su.ac.yu
Web sajt Visoke tehnike kole strukovnih studija u Subotici

http://www.it.vts.su.ac.yu
Internet prezentacija predmeta Internet tehnologije

http://www.su.ac.yu
Web sajt subotike akademske mree

http://www.gmesterweb.com/e-nastava
Portal za uenje na daljinu (e-learning)

http://www.w3.org
World Wide Web konzorcijum

http://validator.w3.org
Online program za validaciju XHTML i HTML koda web stranica

http://jigsaw.w3.org/css-validator
Online program za validaciju CSS datoteka

http://www.w3schools.com
Odlian sajt namenjen svima koji su zainteresovani za Internet tehnologije

http://www.cssoptimiser.com/
Web sajt koji vri online optimizaciju CSS datoteka

http://www.htmlvalidator.com
Zvanian sajt programa CSEHTML Validator

http://www.wampserver.com
Zvanian sajt Wamp server projekta

http://www.apache.org
Zvanini sajt Apache web server projekta

http://www.mysql.com
Zvanian sajt najpopularnije open source baze podataka

http://www.php.net
Zvanian sajt PHP programskog jezika

http://2020ok.com/
Direktorijum besplatnih online knjiga

158
http://www.devprotalk.com/
Forumi IT profesionalaca

http://www.biznisblog.com
Web blog namenjen elektronskom poslovanju, dizajnu i brendingu

http://www.dzaba.com
Besplatan web hosting

http://www.0php.com/free_PHP_hosting.php
Lista stranica koje nude besplatan web hosting sa podrkom za PHP

http://www.extra.hu
Besplatan web hosting

159
4. Literatura

1. Thomas A. Powell: Web dizajn kompletan prirunik, Mikro knjiga,
Beograd 2001.

2. Lukke Welling, Laura Thomson: PHP i MySQL razvoj aplikacija za web,
Mikro knjiga, Beograd 2004.

3. Zlatko ovi: Razvoj i istraivanje baze podataka preko Interneta,
Konferencija Savremene raunarske tehnologije, Subotica, 23.09.2000.

4. Zlatko ovi, Silvester Pletl: Jedno reenje elektronske studentske slube,
Zbornik radova simpozijuma o raunarskim naukama i informacionim
tehnologijama YUINFO 2003, Kopaonik, 10-14.03.2003.

5. Zlatko ovi, Biljana prof. dr Radulovi, Zoran Subi: Implementacija sistema
za uenje na daljinu E-XPERT, Konferencija INFOTECH 2004, Vrnjaka Banja

6. Zlatko ovi: Internet based e-learning system, Proceedings of the SISY
2004, pp. 153-159, ISBN: 963 7154 32 9, Subotica

7. Zlatko ovi: Implementacija i administracija e-learning servisa, Zbornik
radova simpozijuma o raunarskim naukama i informacionim tehnologijama
YUINFO 2005, Kopaonik, 07-11.03.2005.

8. Zlatko ovi: Realizacija e-learning servisa E-xpert, Meunarodna nauno-
struna konferencija Informatika, obrazovna tehnologija i novi mediji u
obrazovanju 2005, Sombor, 01.-02.04.2005.

9. Zlatko ovi :Implementacija web servisa Favorit, Meunarodni simpozijum
o elektronskoj trgovini i elektronskom poslovanju E-trgovina 2005, Pali, 20.-
22.04.2005.

10. Livia Szedmina, Zlatko ovi, Serbia and Montenegro, Theresa Gattringer-
Sabino, Markus Risthaus, Austria: An e-Learning Multilingual Dictionary
(OpenDict), Proceedings of the SISY 2005, pp. 223 - 231, ISBN: 963 7154 41 8,
Subotica

11. ovi Zlatko, Lvia Szedmina: OpenDict, XXX. Tudomnyos Dikkri
Konferencia, Budapesti Mszaki Fiskola, 2005. November. 10.

12. Jano imon, Tibor Sakal, Zlatko ovi :Sistem za akviziciju podataka i
proces monitoring putem Interneta, Zbornik radova simpozijuma o raunarskim
naukama i informacionim tehnologijama YUINFO 2006, Kopaonik, 06-
10.03.2006.

13. Zlatko ovi :Projektovanje i implementacija web sajta CASE: Zavoda za
zatitu zdravlja u Subotici, Meunarodni simpozijum o elektronskoj trgovini i
elektronskom poslovanju E-trgovina 2006, Pali, 05.-07.04.2006.

160
14. Jano imon, Tibor Sakal, Zlatko ovi :Okruenje za implementaciju i
razvoj algoritama za kretanje mobilnih robota na tokovima, Zbornik radova
ICT simpozijuma JISA 2006, Beograd, 22-24.05.2006.

15. Lehel Njer, Zlatko ovi: Poboljanje grafikog okruenja programa
BANDWIDTHD u UNIX operativnom sistemu, Zbornik radova ICT simpozijuma
JISA 2006, Beograd, 22-24.05.2006.

16 Jnos Simon, Tibor Szakall, Zlatko ovi: Programming Mobile Robots in
ANSI C Language for PIC MCUs , Proceedings of the SISY 2006, pp. 131-137,
ISBN: 963 7154 50 7, Subotica

17. Zlatko ovi, Simon Jnos, Szakall Tibor :Egy fiskolai honlap
implementcija klnbz web szolgltatsokkal, Informatika Korszer
Techniki, Dunajvros, 2006.11.17-18.,

18. Zlatko ovi, Biljana Radulovi: E-Learning in web enviroment,
Proceedings of the HUCI 2006, pp. 211 - 217, ISBN: 963 7154 54 X, Budapest

19. Zlatko ovi: Zatita web obrazaca od botova, Zbornik radova
simpozijuma o raunarskim naukama i informacionim tehnologijama YUINFO
2007, Kopaonik, 11-14.03.2007.

20. Zlatko ovi: CAPTCHA metod zatite web obrazaca, Meunarodni
simpozijum o elektronskoj trgovini i elektronskom poslovanju E-trgovina 2007,
Pali,18.-20.04.2007.

21. Bai Robert, Zlatko ovi: RSS/XML internet portal, Meunarodni
simpozijum o elektronskoj trgovini i elektronskom poslovanju E-trgovina 2007,
Pali,18.-20.04.2007.

22. Zlatko ovi, Sedmina Livia: Security of web forms, Proceedings of the
SISY 2007, pp. 197-200, IEEE Catalog Number : 07EX1865C, ISBN: 1-4244-
1443-1, Subotica

IT Prirucnik SR

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IT Prirucnik SR

Uploaded by

Copyright:

Available Formats

VISOKA TEHNIKA KOLA

STRUKOVNIH STUDIJA SUBOTICA

You might also like