Preporuka je, ako ste totalni poĉetnik da uĉite sledećim redosledom: HTML, CSS, JavaScript i na kraju PHP i MySQL

Transcription

1 Web izrada Zanima Vas web izrada sajta, da aţurirate već postojeći, ili da unapredite svoja znanja da biste bolje radili svoj posao onda je ovo pravo mesto za Vas. Upoznaćete se sa najboljim tekućim rešenjima, dobićete realna znanja, a ne parcijalne i nedoreĉene tutorijale i koještarije. Na ovom sajtu ćete najkraćim putem temeljno nauĉiti kako se prave sajtovi. Upoznaćete se sa desetinama HTML, CSS, JavaScript i PHP i MySQL primera. Primeri su u svim naslovima sajta pravljeni što jednostavnije, i neke je lako prepraviti za Vaše projekte. Primeri su pisani tako da su što kraći ali ujedno da objasne sve vezano za tu temu. Potrebna su Vam specifiĉna rešenja? Primeri su pisani u efikasnom formatu i brzo ćete steći potrebna znanja. Malo je sajtova, pogotovu na našem govornom podruĉju, o ovoj temi koji pokrivaju toliko materija, na tako jasan i sveobuhvatan naĉin. Uĉeći na ovom sajtu stećićete na brz naĉin konkretna i jako upotrebljiva znanja za izradu sajta. Krenite sa radom i videćete rezultati će stići za kratko vreme. Na ovom sajtu naćićete upotrebljiva znanja za kreiranje realnih projekata. Nauĉićete kako da napravite sajt koje će raditi u svakom okruţenju. Svako poglavlje sajta je tako napisano da Vam brzo donese konkretno i upotrebljivo znanje. Kompleksne teme i tehnologije su redukovane na osnovne komponente, a svaka komponenta je obraċena na jasan i svima razumljiv naĉin. Na sajtu su prisutne jedino konkretne informacije za efikasnu izradu sajta. Pošto na sajtu ima puno primera, i pošto se kroz sajt lako krećete, videćete da ga, nakon što nauĉite osnove, moţete koristiti i kao referencu u svakodnevnom poslu. Preporuka je, ako ste totalni poĉetnik da uĉite sledećim redosledom: HTML, CSS, JavaScript i na kraju PHP i MySQL HTML HTML je skraćenica od HyperText Markup Language. HyperText (u prevodu hipertekst) je tekst koji sadrţi isprepletene hiperveze izmedju relevantnih reĉi, a postupak pravljenja hiperteksta se naziva hipertekstovanje. Kad se pojavio HTML jezik on je bio upravo takav da je sadrţao samo hipertekst. Znaĉi mogli ste da kliknete na pojedine reĉi i one bi vas poslale na neku drugu internet stranu ili pak unutar te iste strane ali u nekom njenom drugom delu. Medjutim kasnije se HTML razvijao i dodavane su nove mogućnosti manipulacije sa slikama, tabelama i tako dalje. HTML je opisni skriptni jezik namenjen izradi web stranica. HTML ima elemente kojima se upravlja tekstom, paragrafima, citatima, linkovima, slikama i sliĉno. Takodje postoje i elementi koji opisuju samu internet stranu brauzeru i pretraţivaĉima u smislu kratkog opisa dokumenta, kljuĉne reĉi koje su prisutne na stranici, podaci o autoru i sliĉno. Ovi HTML elementi su poznati kao meta podaci i vidljivi su samo ako se pogleda izvorni HTML kod a ne i internet strana u brauzeru. Meta podaci se smeštaju u meta tagove. Kasnije će mo detaljnije videti o ĉemu se radi. U principu moţete napisati tekst u najobiĉnijem tekst editoru (na primer u notepad-u), snimiti taj tekstualni fajl sa ekstenzijom.html, ili samo.htm i pogledati ga u svom brauzeru. Videćete da će vaš brauzer prikazati vaš tekst. Ako taj fajl stavite i na host i linkujete adresu iz brauzera opet će vaš tekst biti vidljiv. Medjutim ako ţelimo da nam stranica sadrţi linkove, tabele, slike, i dizajnerske elemente koji su standard za internet strane, kao što su navigacijski dugmići i sliĉno, onda moramo savladati HTML jezik kako bi smo sve to napravili. Tekst Skoro svaka internet stranica koristi obiĉan tekst za prikazivanje većeg dela sadrţaja. Normalno sadrţaj moţe biti i u video formatu, zvuĉnom formatu, slikovnom itd., ali ipak tekstualni sadrţaj najviše dominira internetom. Kao što sam već u glavnom uvodu napisao vi moţete tekst napisati i u notepad i da taj tekst fajl prebacite na host. Normalno tekst će biti prikazan kad linkujemo iz brauzera taj tekst dokument. Medjutim ako ţelimo da nam tekst bude [1]

2 u nekom fontu, ili neki pasusi da se razlikuju u fontu slova, bilo u smislu tipa slova, ili veliĉine (na primer naslov da bude napisan većim slovima), itd. onda moramo koristiti HTML elemente za izradu takve stranice. U ovom delu bavićemo se HTML elementima za manipulaciju tekstom. Tekst Svaka HTML internet stranica se u globalu sastoji od tagova. Poĉetak taga je logiĉki znak manje "< " a kraj taga je logiĉki znak veće " > ". Izmedju ta dva znaka, ili taĉnije reĉeno unutar taga se smeštaime taga i atributi taga. Ime taga definiše o kom tagu se radi, a atributi definišu ponašanje i naĉin prikaza oznaĉenog dela teksta ili dokumenta. Znaĉi pomoću tagova se odreċeni deo teksta ili dokumenta odvaja od ostatka i na njega se primenjuju pravila definisana samim tagom. Postoje elementi HTML-a koji se sastoje samo od jednog taga, ali postoji i veliki broj elemenata koji se sastoji od dva taga. Oni koji se sastoje od dva taga imaju poĉetni i krajnji tag. Poĉetni i krajnji tag se razlikuju po tome što krajnji ima kosu crtu " / " ispred imena taga a poĉetni nema. Izmedju poĉetnog i krajnjeg taga se nalazi tekst ili dokument na koji se primenjuju pravila koja definiše taj tag i njegovi atributi. Sve ovo verovatno deluje apstraktno zato hajde sa konkretnim primerima i sve će se razjasniti. Otvorite NOTEPAD i krenite sa pisanjem. Svaka HTML internet strana mora poĉeti sa tagom <HTML>. Taj tag ima i krajnji tag i on je </HTML>. Sve izmedju ta dva taga je HTML dokument, i svaki brauzer zna pomoću tih tagova granicu HTML dokumenta. Dalje u svakom HTML dokumentu mora se naći i par HEAD tagova. Naravno ne treba više napominjati da svi naredni tagovi, i sve što budemo uĉili se smešta izmedju <HTML> i </HTML> tagova. Znaĉi imamo: <HTML> <HEAD> </HEAD> </HTML> Ono što se smešta unutar HEAD tagova nije direktno vidljivo posetiocima stranice preko brauzera. Tu se smeštaju META tagovi koji opisuju dokument, govori ko je autor, koje su kljuĉne reĉi na stranici, opis stranice za pretraţivaĉe i tako dalje. Ali tu se smešta i naslov web stranice koji je vidljiv u jeziĉku brauzera kad se strana otvori. Postoji jedan problem sa našim srpskim slovima kao što su ššċđĉĉććţţ. Naime dok ih pišemo pri izradi HTML stranice oni su lepo vidljivi jer su definisani unutar našeg operativnog sistema. Ali kad tu HTML stranicu prebacimo na host i preuzme je brauzer on nezna za naša slova! Da bi mu definisali naša slova unutar HTML dokumenta unutar HEAD taga kao meta tag moramo staviti jedan od ova dva: <meta http-equiv="content-type" content="text/html; charset=windows-1250"> Ukoliko ţelite da koristite ćirilicu, sve što treba je da u gornjem redu vrednost 1250 zamenite sa Za latiniĉno pismo sa našim slovima postoji još jedna varijanta: <meta http-equiv="content-type" content="text/html; charset=iso "> I nakon svega ovoga naš HTML kod će izgledati: <HEAD> <META http-equiv="content-type" content="text/html; charset=windows-1250"> <TITLE>Moja prva HTML web strana</title> </HEAD> </HTML> [2]

3 Glavni deo HTML dokumenta koji je vidljiv posetiocima stranice u brauzeru se nalazi izmeċu BODYtagova: <HEAD> <META http-equiv="content-type" content="text/html; charset=windows-1250"> <TITLE>Moja prva HTML web strana</title> </HEAD> <BODY> Ovo je tekst moje prve web stranice </BODY> </HTML> Sada treba dokument snimiti, na primer kao strana1.htm u neki folder, i pogledati tu stranicu u brauzer. Videćete ispisano pri vrhu u levom uglu naš tekst "Ovo je tekst moje prve web stranice". U nastavku tutorijala pisaćemo samo BODY delove zbog saţetosti, a Vi kad pravite HTML stranice naravno nemojte izostavljati sve potrebne HTML elemente. Pozadina Otvorite ponovo u notepad našu stranicu strana1.htm. I BODY tag zamenite sa sledećim: <BODY BGCOLOR="#FFFF00"> Ovo je tekst moje prve web stranice </BODY> Dakle iseĉak stranice kad se pokrene u brauzer bi izgledala ovako: Znaĉi pozadina cele strane je u ţuta. Primetite sad jednu novu stvar, da unutar poĉetnog taga BODY izmedju oznaka za poĉetak i kraj taga"< >"figutišepored imena i BGCOLOR atribut. Taj atribut gde god se pojavi definiše boju pozadine [3]

4 polja dokumenta kojeg zahvata i definiše tag u kome je smešten. U ovom našem sluĉaju naš tag je BODY a on zahvata ĉitavu stranicu, što znaĉi da će se definisati boja pozadine cele stranice. Drugi deo atributa BGCOLOR je heksadecimalni skup brojeva"#ffff00" koji definiše u koju boju će biti pozadina. Hajdemo sad nešto malo više o heksadecimalnim oznakama za boje. U HTML se oznake za boju definišu heksadecimalnim brojevima. Heksadecimalni brojevi imaju 16 cifre i to: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Tako na primer decimalni broj 255 će u heksadecimalnom broju biti FF. Oznaka taraba " # " ispred naše oznake kaţe da je u pitanju heksadecimalni broj. HTML kodovi boja imaju 6 heksadecimalne cifre. Osnovne ekranske boje su crvena, zelena i plava i njihove nijanse. Sve ostale boje se definišu mešanjem te tri osnovne boje i njihovih nijansi. To mešanje poznato je kao RGB definicija (engleski R-red, G-green i B-blue). Ostali programi tipa Photoshop, Photopaint i sliĉni koriste decimalne brojeve za oznaĉavanje RGB boja, ali HTML koristi heksadecimalne. E sad da vidimo kako se to dobija boja mešanjem osnovnih. Na primer iamamo #FF8C67 boju. Prva dva heksadecimalna broja FF govore vrednost, ili nivo, ili nijansu crvene boje. Druga dva broja 8C odredjuju nijansu zelene boje a zadnja dva heksadecimalna broja 67 odredjuju nijansu plave boje. Dakle boja se dobija mešanjem ovih nijansi osnovnih boja. Kako mešanjem? Pa evo tabelarno: FF + 8C + 67 = FF8C67 Naravno znak plus ne treba shvatiti kao da se sabiraju ti heksadecimalni brojevi već figurativno kao da se mešaju. Znaĉi sve nijanse osnovnih boja se kreću u opsegu od 0 do 255. To sve znaĉi da kompjuter moţe izmešati ukupno 256 * 256 * 256 = boja u RGB definiciji. Medjutim treba znati da kompjuter (ili bolje reĉeno grafiĉka kartica) generiše samo te 256 nijanse u sve tri osnovne boje ali kompjuter ne meša boje već naše oko. Znaĉi kompjuter tako oboji susedne sub-piksele da se napravi šahovnica od tri boje u blizini i tako cela površina. A pošto su sub-pikseli jako mali naše oko u stvari izmeša te osnovne boje i dobijemo te nijanse. Medjutim za neke osnovne boje ne moramo pisati heksadecimalne brojeve. Na primer ako ţelimo ţutu boju moţemo pisati i ovako: bgcolor="yellow". Yellow na engleskom znaĉi ţuta. Pa tako ako ţelimo crvenu pišemo red, zelenu pišemo green, plavu pišemo blue, crnu - black, belu - white, i tako dalje. Evo tabele: Black Yellow Red Maroon Gray Lime Green Olive Silver Aqua Blue Navy White Fuchsia Purple Teal Za pozadinu moţemo pored boja izabrati i neke slike. U tom sluĉaju pišemo: <BODY BGCOLOR="pozadina.gif"> Ovo je tekst moje prve web stranice </BODY> A rezultat iseĉka stranice koja se prikazuje u brauzeru: [4]

5 Da bi se slika prikazala, brauzer mora da je naċe. Za sada, sliku stavimo u istom folderu u kome se nalazi i HTML web stranica strana1.htm. Naravno, slika ne mora da stoji u istom folderu kao i web strana ali za sad neka bude tako a kasnije ćemo objasniti detaljno. Moţete izabrati za pozadinu veliĉinu slike nezavisno od veliĉine stranice ili prostora gde planirate tu pozadinu, jer ukoliko je slika manja onda će se ponavljati sve dok ne popuni prostor a ako je veća onda će se videti samo onaj deo koliki je prostor poĉevši od gornjeg levog ugla. Još malo oko pozadine. Na primer imamo sliku pozadina2.jpg koja nije animacija. E sad na primer izradili smo stranu veću po vertikali i/ili po horizontali nego što je ekran brauzera. U tom sluĉaju da bi brauzer mogo da prikaţe sve šta piše na toj stranici mora da napravi klizaĉ koji kad pomeramo spustamo se niţe na stranici i vidimo ostatak strane. E sad ako imamo pozadinu onda kako mi pomeramo klizaĉ tako će se i slika pomerati i iscrtavati. Medjutim to moţe da se promeni da iako mi klizaĉem idemo naniţe pozadina ostaje fiksna, i samo se kreće sadrţaj stranice. To se postiţe atributom: bgproperties="fixed". Evo primera: <BODY BGCOLOR="pozadina2.jpg" bgproperties="fixed"> Ovo je tekst moje prve web stranice </BODY> Fiksiranje pozadine ne podrţavaju svi brauzeri. Na primer firefox ne podrţava a podrţavaju: noviji internet explorer, novija opera, google chrome itd. Oni koji ne podrţavaju ponašaju se kao da nije napisan atribut bgproperties. Tekst format Tekst pomoću raznih HTML tagova moţe biti napisan u raznim formatima i sa raznim efektima. Tekstu moţemo menjati boju, veliĉinu slova, naĉin ispisivanja teksta i tako dalje Ovo sve je lako shvatiti, te ću dati tabelarno. [5]

6 HTNL formati tekstova Rezultat u brauzeru Objašnjenje Neki <b>text</b> napisan Neki <i>text</i> napisan Neki <u>text</u> napisan Neki text napisan Neki text napisan Neki text napisan Podebljava tekst izmedju tagova (bold) Iskošava tekst (italic) Podvlači (underline) Masa _text = Masa text = Smanjuje i snižava tekst. Pogodno u matematičkim formulama Neki ^text napisan Neki <strong>text<strong> napisan Neki text napisan Neki text napisan Smanjuje i podiže tekst. Pogodno za stepenovanje u matematici Podebljava tekst a i u nastavku Neki <em>text</em> napisan Neki text napisan Iskošava tekst Neki <pre>text je</pre> napisan Neki <tt>text</tt> napisan Neki <strike>text veliki</strike> napisan Neki text je napisan Neki text napisan Neki text veliki napisan Tekst unutar taga izvlači u novi pasus u odnosu na tekst pre i posle njega Piše tekst kao kucaćom mašinom - znači tekst je fiksne dužine. Stavlja crtu po sredini rečenica [6]

7 Neki <blink>text</blink> napisan Neki <big>tekst</big> napisan Neki <small>tekst</small> napisan Neki <h1>tekst</h1> napisan Neki <h6>tekst</h6> napisan Neki text napisan Neki tekst napisan Neki tekst napisan tekst Neki napisan Neki tekst napisan Tekst se pojavlja i gubi naizmenično. Opera i firefox podržavaju, ostali ne. Povećava tekst za jedan Smanjuje takst za jedan Pravi naslov od teksta i to sa najvećim slovima. Pravi naslov od teksta i to sa najmanjim slovima. Postoje od h1 do h6 Mislim da posebna neka objašnjenja za sve ovo nije potrebno, ali mora se reći da se svi ovi tagovi mogu medjusobno kombinovati u neograniĉenom broju. Znaĉi moţete pustiti mašti na volju. Jedino što je poţeljno da se tagovi ne preklapaju, već da se ugnjeţċuju jedan u drugi. Evo primera: <strike><u><i><b>neki veeeeliki text u mnogim formatima</b></i></u></strike> A rezultat bi bio: neki veeeeliki text u mnogim formatima Verovatno ste shvatili ali da ipak kaţem. Ne odnose se ovi tagovi za formatiranje teksta samo za jednu reĉ ili reĉenicu nego na primer i za ĉitave pasuse, pa i za ĉitav tekst. Znaĉi koliko god pišete unutar poĉetka i kraja taga na taj tekst će se i odnositi. Primetite da svi ovi tagovi u tabeli su jednostavni u smislu da nemaju atribute. Znaĉi poĉetni tag ima ime i ništa više. Postoji jedan tag za formatiranje teksta pod nazivom FONT koji ima atribute za veliĉinu slova, vrstu slova (vrstu fonta teksta), i za boju teksta. E sad da bi se primenio tag FONT treba da postoji potreba bar za jedan od ovih nabrojanih atributa, a moţe da sadrţi i sve atribute. Moguće su sve kombinacije ako su potrebna dva atributa. Ajde sad da vidimo na primerima: [7]

8 <BODY> neki kratak <FONT SIZE=6>tekst</FONT> <FONT SIZE=1>i mali</font> </BODY> Rezulat bi bio: Znaĉi veliĉina slova se definiše atributom SIZE, koji moţe imati vrednost od 1 do 7. Vrednost 7 piše najveće tekstove a vrednost 1 najmanje. Podešavanje boje teksta se vrši na sledeći naĉin: <BODY> neki kratak <FONT COLOR="#0000FF">tekst</FONT> </BODY> Rezultata bi bio: Atribut za definisanje boje teksta je COLOR, a definicija boje je isto zapisana u 6 heksadecimalna broja kao kad smo objašnjavali pozadinu HTML stranice. I ovde što se tiĉe boje sve isto vaţi kao i tamo. [8]

9 Treći atribut FONT taga sluţi, kao što smo napisali za definisanje fonta slova. Znamo da postoje razni fontovi, na primer Arial, Helvetica, Verdana, Times New Roman, i tako dalje. Atribut za fontove je FACE i iszgleda ovako: <BODY> neki kratak <FONT FACE="Verdana">tekst</FONT> </BODY> Rezultat bi bio: Font će se videti samo ako posetilac web strane ima instaliran taj font na svom raĉunaru! Ukoliko to nije sluĉaj, tekst će biti predstavljen podrazumevanim (default) fontom. Uz Windows, veoma su ĉesti fontovi Arial i Verdana, Impact i tako dalje. Da bi se ovo delimiĉno prevazišlo, moţete navesti više od jednog fonta ovako: <FONT FACE="ARIAL, HELVETICA, VERDANA">Zdravo</FONT> Znaĉi brauzer traţi prvo ARIAL pa ako ga naċe, koristi ga, a ako ne, onda traţi sledeći navedeni font HELVETICA. Ako ga ne naċe, traţiće VERDANA, i ako ne naċe i taj font, onda će koristiti podrazumevani (default) font. I na kraju ovog dela kao što smo napisali moguća je bilo koja kombinacija atributa unutar FONT taga. Evo primera: <BODY> neki kratak <FONT FACE="Verdana" COLOR="#0000FF" SIZE=6>tekst</FONT> </BODY> [9]

10 Svaki brauzer ima podešene podrazumevan font face=times New Roman, veliĉinu slova size=3 i boju teksta crnu. Uredjenje teksta U prethodnom naslovu videli smo kako se moţe formatirati tekst u smislu njegove boje, veliĉine, fontovi, iskošenje itd. Ovde ćemo videti kako moţemo uredjivati tekst u smislu novih redova, pasusa, uredjivati u prostoru i tako dalje. <BODY> brzo shvatam HTML </BODY> Znaĉi u samom kodu hteli smo da svaka reĉ bude u novom redu, medjutim brauzer to nije ispoštovao i sve je ispisao u jednom redu. Dakle, da bi brauzer razumeo da hoćemo nešto napisati u novom redu moramo mu to "objasniti" tagom. Tag za novi red je <br>, pa da vidimo: <BODY> brzo<br> shvatam<br> [10]

11 HTML </BODY> Do istog rezultata u brauzeru bi smo došli da smo napisali kod i ovako: <BODY> brzo<br>shvatam<br>html </BODY> A moţemo ako je potrebno i više puta zaredom stavljati oznaku za novi red, na primer A<br><br><br>B. U ovom sluĉaju ispisaće se slovo A pa tek nakon tri reda ispod i slovo B. Ako ţelimo novi red, i pri tome da uredimo i tekst u smislu da bude poravnjan i u desnu stranu (kao tekst u novinama), ili da tekst bude centriran, ili na levoj strani ili desnoj onda koristimo tag DIV: <BODY> brzo <div> shvatam HTML jer nije nimalo tezak </div> </BODY> [11]

12 Znaĉi kad je tag DIV bez atributa imamo isti efekat kao da smo koristili i tag <br>. Medjutim poenta korišćenja DIV taga je u njegovim atributima, pa da vidimo: <BODY> brzo <div align=center> shvatam HTML jer nije nimalo tezak </div> <div align=left> shvatam HTML jer nije nimalo tezak </div> <div align=right> shvatam HTML jer nije nimalo tezak </div> </BODY> Atribut ALIGN=CENTER centrira tekst na sredinu prostora, ALIGN=LEFT pomera tekst krajnje levo (to imamo i bez atributa), i ALIGN=RIGHT pomera tekst krajnje desno. Postoji još jedan vrlo zanimljiv atribut koji se zapisujealign=justify. Kada pogledate primer sve će biti jasno: <BODY> Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to. <div align=justify> Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to. </div> </BODY> [12]

13 Kao što vidimo prvi tekst je napisan bez ikakvih tagova a drugi sa DIV tagom u kome je napisan i atribut. Primećujete kako je tekst sa atributom na desnoj strani lepo poravnjan kao neki profesionalan novinarski ĉlanak. Korišćenjem <br> i <div> taga tekst pisan nakon tih tagova se premešta u novi red. Postoji još jedan tag<p></p> koji tekst spusta direktno dva reda niţe, i tako pravi novi pasus. Naravno takav efekat imamo ako stavimo <br><br>, ali <p> tag moţe da sadrţi i sve atribute kao i <div> tag. Da ne bi se ponavljao uzeću za objašnjenje zadnji primer <div> taga samo ću zameniti umesto<div align=justify></div> staviću<p align=justify></p>. Naravno i ostali primeri su isti stim što se rezultat razlikuje jer pomera dva reda niţe <p> tag. <BODY> Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to. <p align=justify> Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to. </p> </BODY> Vidite kako je <p> tag napravio novi pasus, preskoĉio jedan red. Ovde treba napomenuti da svi ovi tagovi <br>, <div> i <p> mogu se koristiti, i imaju iste efekte, i na HTML objekte kao što su tabele, multimedija, slike i tako dalje, a ne samo na tekst. To isto vaţi i za naredne tagove koje ćemo do kraja ovog naslova videti. I još nešto, ako ţelimo da centriramo neki tekst na sredini prostora moţemo koristiti i tag <center></center>. Ostali kao što su left, right i justify nemaju takav tag. [13]

14 Da bi bio siguran da vam je sve jasno daću prethodni primer sa dodatkom tagova iz prethodnog naslova, kako bi ste videli da moţete pustiti mašti na volju u kombinovanju HTML tagova pri izgradnji web stranica. <BODY> Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta.<font SIZE=5 color=#cc33ff> Nas tekst sa tim etributom izgleda jako profesionalno i lepo</font>. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to. <p align=justify> Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo <font color=#ff0000 face="verdana" SIZE=1><b>zanimljivog atributa za uredjivanje teksta</b></font>. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to. </p> </BODY> Idemo dalje. Hajde sad da napišemo reĉenicu u kojoj su reĉi priliĉno razmaknute izmedju sebe: <BODY> brzo shvatam HTML </BODY> Rezultat biće: [14]

15 Dakle iako smo mi u kodu napisali tekst sa više razmaka brauzer je ipak sve prikazao sa jednim razmakom. Znaĉi i ovde moramo nekako reći brauzeru kroz kod da piše više od jedne razmaknice. Za pisanje razmaknice se ne koristi nikakav tag već šifra <BODY> brzo shvatam HTML </BODY> Znak " &" oznaĉava poĉetak šifre, a znak " ; " kraj.pored ove šifre za razmaknicu postoje šifre za sve moguće znakove i slova. Za razmaknicu je neophodno uvek koristiti šifru, a za neke znakove je po nekad potrebno koristiti njihovu šifru. Na primer svaki tag poĉinje znakom " < " a završava se " > ". I sad kad bi se ti znakovi koristili unutar koda i za njihovo prikazivanje u brauzer, tada bi u nekim sluĉajevima došlo do greške jer bi ih brauzer razumeo u nekim sluĉajevima kao sintaksu za pisanje tagova. Da do toga ne bi došlo ti znakovi ( a i ostali kao što je na primer znak dvostruki navodnici " "" ) moraju se po nekad napisati u obliku šifre. Takodje ne moramo koristiti one meta tagove za definisanje srpskih slova koji smo na poĉetku napisali, već i naša slova imaju šifre. I jedna vrlo bitna napomena. Za pisanje šifri obavezno koristite samo mala slova. Evo tabele interesantnih HTML šifri: Šifra1 Znak1 Šifra2 Znak2 Šifra3 Znak3 Šifra4 Znak4 č ĉ ± ± ² ¼ Ľ Č Ĉ & & ³ ł ½ ć ć < < ˆ ¾ ľ Ć Ć µ µ đ Ċ > > Ð Đ " " Ø Ř ß ß š ń Š Ń ¹ ą ž ņ Ž Ņ Ł Ą ƒ Postoje preko šifri (ASCII-HEX vrednosi) za raznorazne znakove. Kliknite na sledeće dugme da vifite većinu interesantnih šifri: Da nastavimo sa novim stvarima. Primetili ste da tekst koji pišete u HTML kodu i tekst koji prikazuje brauzer se dosta razlikuje. Na primer vi moţete u kod-u pisati tekst u jednom redu jako dugo, a kad brauzer prikaţe taj tekst on ga saseĉe u nekoliko redova tako da se smesti baš u prostor po horizontali kolika je horizontalna duţina ekrana. Medjutim [15]

16 postoji tag koji nedozvoljava da brauzer saseĉe vaš tekst bez obzira koliko je dug. Naime, neće smeti da ga iseĉe već će napraviti horizontalni klizaĉ tako da se ceo tekst moţe isĉitati. Tag koji radi to je <nobr></nobr> a izmedju poĉetnog i krajnjeg taga NOBR smeštate tekst koji ne ţelite da seĉete u više redova. Tag <BLOCKQUOTE></BLOCKQUOTE> pravi margine sa leve strane ĉitavom tekstu koji je u njemu (sve redove pomera par razmaka udesno). Evo primera: <BODY> <BLOCKQUOTE> Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to. </BLOCKQUOTE> </BODY> A rezultat: Već nekoliko puta smo pisali u ovom delu kako brauzer ne prikazuje tekst onako kako ga mi napišemo u kod-u ako ne primenjujemo tagove. Medjutim postoji tag koji omogućava da brauzer prikaţe naš tekst baš onako kako ga mi napišemo u kod-u. Taj tag je <pre></pre>. Evo primera koji jasno doĉarava sve: <BODY> (o)--(o) /.. /./. (., ) _\//_/ / ~~ ~~ ~~ <BODY> Ako samo ovako napišemo brauzer će dati sledeći prikaz: [16]

17 A ako napišemo ovako: <BODY> <PRE> (o)--(o) /.. /./. (., ) _\//_/ / ~~ ~~ ~~ </PRE> <BODY> Rezultat će sad biti: I na kraju ovog dela moţemo opisati tag koji sluţi za komentar unutar HTML kod-a. Kada pišete neki HTML kod koji je jako veliki potrebno prokomentarisati neke njegove delove, kako bi se kasnije lakše snašli kad trebate nešto da dodate ili ispravite. Tag za komentar poĉinje <!-- a završava se sa -->. Sve unutar tog taga brauzer preskaĉe i ignoriše. Znaĉi tu moţete da pišete šta god ţelite, ĉak i bilo koje tagove itd, sve će biti ignorisano. [17]

18 Lista Liste su potrebne u tekstu kad nešto nabrajamo. HTML grafiĉke liste se prave na sledeći naĉin: <body> Ovo je moja prva lista <ul> <li>text</li> <li>text</li> <li>text</li> </ul> </body> Znaĉi stavi crnu taĉku ispred teksta i pomeri ga nekoliko razmaknica u desno. E sad postoje par varijanti oko te taĉke. Ako u UL tag stavimo atribut TYPE=CIRCLE imaćemo taĉku koja nije ispunjena. Pa da vidimo primer: <body> Moja druga lista <ul type="circle"> <li>text</li> <li>text</li> <li>text</li> </ul> </body> [18]

19 Takodje ne mora da bude krug, već ispunjen kvadrat, ako se stavi atribut type="square" u UL tagu: <body> Moja treca lista <ul type="square"> <li>text</li> <li>text</li> <li>text</li> </ul> </body> Postoje i numeriĉke oznake. U tom sluĉaju umesto taga UL pišemo tag OL. Pa da vidimo: <body> Moja lista sa rednim brojevima <ol> <li>text</li> <li>text</li> [19]

20 <li>text</li> </ol> </body> Ne mora uvek poĉeti sa jedinicom. Na primer ajde da pošnemo sa peticom: <body> Jos jedan primer liste <ol start=5> <li>text</li> <li>text</li> <li>text</li> </ol> </body> Postoje mnoge varijante atributa OL taga pa je naj ekonomiĉnije da ih vidimo tabelarno. Napomena da atribut START vaţi u kombinaciji sa svakim atributom u tabeli. [20]

21 Atribut OL taga <ol type="a"> <ol type="a"> <ol type="i" start="7"> <ol type="i"> Izgled i objašnjenje Za obeleņavanje se koriste velika slova. A. text B. text C. text Za obeleņavanje se koriste mala slova. a. text b. text c. text Za obeleņavanje se koriste rimski brojevi. VII. text VIII. text IX. text Za obeleņavanje se koriste mali rimski brojevi. i. text ii. text iii. text Postoji i treća vrsta liste a to je definiciona lista. Evo primera i sve će biti jasno: <BODY> <DL> <DT><B>Grafičke liste</b> <DD>Grafičke liste su one kod kojih imamo popunjene i prazne krugove. <DT><b>Numeričke liste</b> <DD>Numeričke liste su one kod kojih imamo brojeve, slova mala i velika, i rimski brojevi. <DT><b>Definicione liste</b> <DD>Definicione liste su one kod kojih je u odnosu na podnaslov uvučen tekst ispod naslova. </DL> </BODY> [21]

22 Linije Po nekad je potrebno u nekom redu iscrtati neku horizontalnu liniju. Na primer da odvoji neke pasuse, ali moţe da se linija iscrtava i u drugim sluĉajevima, zbog estetike itd. HTML tag za iscrtavanje horizontalne linije ima naziv HR, i on nema zatvarajući tag. Kao primer daću kod sa svim varijantama HR taga a posle ću objasniti. <BODY> <HR> <HR WIDTH=35%> <HR WIDTH=100> <HR WIDTH=50% ALIGN=LEFT> <HR WIDTH=50% ALIGN=RIGHT> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=10> <HR WIDTH=60% SIZE=3 COLOR="blue"> <HR WIDTH=60% SIZE=8 NOSHADE> </BODY> Objašnjavaću red po red kod-a. Ako je napisano samo <hr> onda se iscrtava horizontalna linija od kraja do kraja prostora kojeg definiše tag u kome je ugnjeţċen HR tag. U našem sluĉaju HR tag je ugnjeţċen u BODY tagu tako da će [22]

23 se horizontalna linija iscrtavati horizontalno duţ celog ekrana. Kada se napiše samo <hr> onda je debljina linije po defoltu 3, a boja crna. U drugom redu smo ubacili u HR tag i atribut WIDTH = 35%. Taj atribut definiše duţinu linije, i to u procentima. Mi smo stavili 35%, što znaĉi da bez obzira na rezoluciju ekrana duţina linije će uvek biti 35% od rezolucije ekrana po horizontali. Uoĉite i još jednu stvar, da se po defoltu horizontalne linije iscrtavaju centrirane ako se drugaĉije ne naglasi. U sledećem redu koda nisu procenti u WIDTH atributu već pikseli. To znaĉi da se duţina ne definiše u zavisnosti od rezolucije ekrana, već će uvek biti fiksno u našem sluĉaju 100 piksela. To znaĉi da će na ekranima manjih rezolucija linija biti veća od ekrana sa većim rezolucijama. U ĉetvrtom redu koda ispod BODY taga imamo HR tag sa novim atributom ALIGN. Rekli smo da se po defoltu linije iscrtavaju centrirane. Ako ţelimo to da promenimo onda se koristi ovaj ALIGN atribut i to tako da ako ţelimo ulevo da pomerimo pišemo ALIGN = left, a ako ţelimo udesno onda ALIGN = right. U šestom redu koda definišemo i debljinu linije. Debljina ide od SIZE = 1 do mislim SIZE = 100. Debljina se definiše samo u pikselima. U osmom redu imamo atribut COLOR koji definiše boju linije. Napomena, da ukoliko se ne definiše atributom, ako je linija priliĉno debela ona se iscrtava linijama koje oiviĉuju površinu linije a unutrašnjost linije je u boji pozadine. Medjutim i to se moţe promeniti da se popuni i unutrašnjost linije bojom koju definiše atribut COLOR. U tu svrhu koristi se atribut NOSHADE. I na kraju treba reći da svi atributi u HR tagu koje smo u ovom naslovu naveli mogu se koristiti u isto vreme, ili razne njihove kombinacije po potrebi. Slika i link Linkovi su upravo ono što daje glavnu karakteristiku interneta. Naime u bilo kom delu sajta moţete postaviti neki tekst i linkovati ga ka nekoj drugoj strani na istom sajtu, ili pak na nekom drugom sajtu. Linkovi mogu biti tekstualni ili slikovni. Slikovni u smislu da kliknete na neku sliku i da vas to odvede ka nekoj drugoj strani. Zamislite internet biz slika. To bi bilo monotono, dosadno, daleko manje estetski, ali što je najbitnije sa mnogo mnogo manje informacija. Ne kaţe se Ċaba da slika govori hiljadu reĉi. Naravno i HTML ima mnoge tagove koji omogćavaju veliki broj operacija sa slikama. U narednim tekstovima će mo uptavo o tome govoriti. Slika Za ubacivanje slika u HTML stranicu koristi se tag <IMG>. Ovaj tag nema zatvarajući tag. Obavezan atribut IMG taga je SRC koji definiše odakle brauyer da uzme sliku. Evo osnovnog kod-a za slike: <body> <img src="slika.jpg"> </body> A rezultat je: [23]

24 Pre nego krenemo na sledeće atribute da objasnimo detaljnije o pisanju putanja do slika da bi ih brauzer nalazio: Putanja SRC="slika.gif" SRC="images/slika.gif" SRC="../slika.gif" SRC="../../slika.gif" SRC="../images/slika.gif" SRC="../../../other/images/slika.gif" Objašnjenje Slika je u istom folderu u kome je i HTML dokument koji je poziva. Slika je u folderu koji je unutar foldera u kome je HTML dokument koji je poziva. Koliko unutra ispod? U nańem sluĉaju jedan jer imamo jednu kosu crtu. Slika je u folderu jednom izvan u kome se nalazi folder koji sadrņi HTML dokument koji je poziva. Slika je izvan dva foldera. Slika je jedan folder izvan, pa jedan unutar u odnosu na HTML dokument. Slika je tri foldera izvan, pa u dva foldera unutra u odnosu na HTML dokument koji poziva sliku [24]

25 Obratite paţnju da uvek se pišu dve taĉke a ne tri ili ĉetri, itd. U tabelama su objašnjene relativne putanje. Medjutim putanju slike (ali i bilo kog fajla) moţete da definišete i korišćenjem kompletne adrese gde se nalazi. Na primer I još nešto oko pisanja imena fajlova ili slika. Na primer imate na kućnom raĉunaru windows i na njemu napravite sajt sa slikama. Prebacite sve to na host i primetite da vam slike ne rade. Razlog tome je da je host na unix / linux. Windows ne razlikuje mala i velika slova u nazivima fajlova, dok unix / linux razlikuje. Zato uvek pišite nazive fajlova malim slovima i nikad neće doći do greške. Takodje u nazivu fajlova ne koristite razmaknicu, već za razdvajanje reĉi u nazivu koristite donju crtu ili znak minus. Ako napišemo IMG tag samo sa obaveznim SRC atributom brauzeru će trebati dodatno vreme pri otvaranju stranice kako bi definisao širinu i visinu slike. Da bi smo skratili vreme poţeljno jedefinisati atributima širinu i visinu slike u pikselima. Širina se definiše WIDTH a visina HEIGHTatributom. Evo primera: <body> <img src="pozadina.gif" width=200 height=100> </body> Ovde treba napomenuti da mi moţemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim reĉima moţemo da je skupljamo, ili širimo i po visini i po širini. Medjutim treba napomenuti da je mi na taj naĉin ne smanjujemo u smislu bajtova. Znaĉi bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isĉita celu veliĉinu slike. Moţe se desiti nekad da sliku sluĉajno izbrišemo, ili brauzer posetioca ne ĉita slike jer je on tako podesio, pa onda na mestu gde se treba pojaviti slika stoji samo prazan oiviĉen prostor. Da bi takav posetilac znao koja slika tu treba da stoji onda moţemo u tom prostoru namenjen slici ispisati tekst koji imenuje sliku ili pak ispisuje neki kraći tekst objašnjenja. Medjutim ako je ta slika koja se ne vidi u stvarim link, onda je itekako bitno da ljudi znaju našta klikću ukoliko se slika ne pojavi iz raznoraznih razloga. U tu svrku koristi se tag ALT. Na primer ajde da stavimo sliku koja ne postoji: <body> <img src="grad-nis.gif" width=200 height=100 alt="grad Nis"> </body> Takodje moţete i oiviĉavati sliku. Evo primer sa oiviĉenom slikom, ali i sa umanjenjem slike: <body> <img src="pozadina.gif" width=200 height=100 alt="slika pozadine" border=10> </body> [25]

26 Ovde vidimo da pomoću atributa BORDER se iscrtava okvir slike neposredno po obodu slike. Moţemo napraviti da se prostor oko slike koji je nedodirljiv na rastojanju od slike kojeg mi definišemo u pikselima. Za tu shvrhu se koriste atributi Hspace i Vspace. Evo primera: <body> <img src="pozadina.gif" width=200 height=100 alt="slika pozadine" border=1 Hspace="30" Vspace="10">hhhhhh </body> Primećujete kako je slika pomerena za 30 piksela od vertikalne ivice, i 10 piksela od horizontalne sa svih strana kada uporedjujemo sa slikom iz recimo prvog primera. E sad moţemo pokazati kako se slika moţe umetati unutar teksta. Za tu shvrhu se koristi atribut ALIGN pa da vidimo: <body> <BLOCKQUOTE> <p align="justify"> Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati [26]

27 kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini. <img src="pozadina.gif" width=171 height=90 alt="slika pozadine" border=1 Hspace="30" Vspace="10" align=left> Medjutim treba napomenuti da mi na taj način ne smanjujemo u smislu bajtova. Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike. </p> <p align="justify"> Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini. <img src="pozadina.gif" width=100 height=50 alt="slika pozadine" border=1 Hspace="30" Vspace="10" align=right> Medjutim treba napomenuti da mi na taj način ne smanjujemo u smislu bajtova. Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike. </p> </BLOCKQUOTE> </body> [27]

28 Vidite da sa malo HTML koda moţemo napraviti vizuelno mnogo dobre tekst stvari. Na primer mnogi će reći da znaju HTML. I oni bi mogli napraviti efekte teksta i slika iz prethodnog primera ali bi veĉina koristila tabele. Tako da bi na kraju više bilo teksta HTML koda nego samog efektivnog teksta kojeg ţelimo da vide posetioci. E sad da je samo jedna strana u pitanju nije bitno ali zamislite sajt sa 100 HTML strana i u svakoj 50% i više viška koda. Znaĉi kad se dobro poznaje HTML to doprinosi u mnogome uštedi resursa, ali što je najbitnije i vreme uĉitavanja stranica. Link Linkovi su upravo ono što ĉini internet tako dinamiĉnim. Link moţe biti tekst, slika ili bilo kakav objekat, na koji kad se klikne odvede te na neku drugu internet stranu, ili pak na neki drugi deo iste stranice. Ovde će mo objasniti tekstualne i slikovne linkove. Krenimo najpre sa tekstualnim. Kako od jedne reĉi ili reĉenice (a moţe i od ĉitavog teksta ili stranice) da se napravi link? Odgovor je uz pomoćanchor taga. Taj tag se tako zove ali u praksi se tag imenuje samo [28]

29 sa malim ili velikim slovom " a ".Taj tag ima i poĉetni i krajnji, znaĉi <a></a>. Ali ajde da vidimo primer i sve će biti jasnije: <body> Posetite google na <a href=" </body> To bi izgledalo ovako kad brauzer otvori: Atribut koji definiše web adresu na koju vodi link kad se klikne se naziva HREF. Verovatno i sami zakljuĉujete da je obavezan HREF atribut, jer u suprotno je besmisleno. Kada linkujemo neku stranicu sa nekog drugog sajta onda se mora pisati puna adresa stranice, znaĉi sa http i sve ostalo. Medjutim ako linkujemo neku stranicu unutar našeg sajta, onda ne moramo (ali i moţemo) pisati punu adresu, već samo relativnu putanju do strane. Relativna putanja je ok, na primer pravimo sajt na svom raĉunaru, i kad prebacimo fajlove na host ako su fajlovi linkovani relativnim putanjama sve će raditi kako treba. Mada se u zadnje vreme ne linkuju mejlovi iz raznoraznih razloga, medjutim moguće je i to na sledeći naĉin: <body> Pošalji na <a href="mailto:mojmail@gmail.com">mejl</a> </body> Ĉak moţemo i unapred definisati poruku u mejlu, na primer: <body> Pošalji na <a href="mailto:mojmail@gmail.com?subject=pera Peric&body=Zdravo. Kakosi, šta radiš?">mejl</a> </body> Medjutim imajte na umu da neki brauzeri ne podrţavaju subject i body funkcije unutar mejla. Dalje, kao što smo rekli mogu se praviti linkovi koji će voditi na pojedine delove unutar same stranice. Takav link se zove sidro. Evo primer: <body> Klikni na <a href="#unutra">link</a> da odeš na naslov ispod <p><a name="unutra">naslov</a></p> </body> [29]

30 Znaĉi prave se dva ANCHOR-a. Jedan na koji se klikće a drugi na deo strane gde se odvodi posetilac. Prvi gde se klikće se pravi sa HREF atributom, stim ĉto se za link piše obavezno taraba " # " pa bez razmaka tekst koji je isti sa tekstom koji je vrednost atributa NAME u drugom ANCHOR-u (u našem sluĉaju to je tekst "unutra"). E sad, drugi anchor ima atribut NAME kao što smo napisali, a tekst u njemu mora biti isti kao i u prvom ANCHOR-u u atributu HREF, samo bez tarabe. U našem sluĉaju taj tekst je "unutra". Tekstovi za NASLOV i za LINK su obiĉno medjusobno razliĉiti (ali i ne mora) kao što je kod nas sluĉaj, i mogu se razlikovati od teksta "unutra", kao što je opet sluĉaj kod nas. Medjutim ako imate mnoge linkove koji vode unutar stranice onda je preporuĉljivo da je tekst zanaslov i za "unutra" isti kako bi lakše pratili izradjivanje stranice. Primećujete u dosadašnjim primerima da iako smo izmedju poĉetka i kraja anchor taga pisali samo tekst, brauzer automatski tekst farba u plavo. Ako ţelite da promenite tu boju u crnu, crvenu ili u kakvu god ţelite onda to moţe ovako: <body> Posetite google na <a href=" color=black>link</font></a> </body> Ali postoji bolji naĉin u vezi boje teksta linka. Na primer moţda ste primetili da je tekstualni link recimo plav, a kad kliknete na taj link on dobije drugu boju, a kad se opet vratite na tu stranicu link je u trećoj boji. Isto se dešava i sa našim primerima iako mi nismo ništa ĉaĉkali sa bojama, izuzev ovaj zadnji primer. Znaĉi brauzer po defoltu daje obiĉno plavu boju linku kojeg nismo kliknuli a teget boju linku koga smo kliknuli. Medjutim to se moţe promeniti na sledeći naĉin: <body link="#0080a0" alink="#40ff00" vlink="#999900"> Posetite google na <a href=" </body> Znaĉi ti atributi se stavljaju u BODY tagu i vaţe za sve tekstualne linkove unutar te stranice (ali i za okvire oko slika i objekekata ukoliko su linkovi, ako ne uklonimo okvire. Atribut LINK definiše boju linka kojeg nismo nikad kliknuli, ALINK boju dok drţimo klik na linku i VLINK boja linka kad se vratimo na stranicu ako smo nekad kliknuli na link. Sve ovo u vezi ovih tagova je dobra ideja jer zamislite neku stranicu koja nabraja nešto sa linkovima, i ovako kad se menjaju boje linkova znate šta ste već kliknuli a šta ne. Kod tekstualnih linkova moţemo primenjivati sve tagove vezani za tekst. Samo sav tekst i sve tagove treba pisati ugnjeţċeno unutar anchor tagova kako bi sve to bio link. Mi smo za objašnjenje tekstualnih linkova koristili po jednu reĉ, ali naravno moţemo koristiti ĉitave reĉenice, pa i pasuse i na njima primenjivati sve moguće tagove za tekst, samo kao što sam napomenuo, a nije na odmet opet, svi ti tagovi moraju biti ugnjeţċeni unutar anchor tagova za poĉetak i kraj. I slike mogu biti linkovi. Evo primera i sve će biti jasno: <body> <a href=" src="pozadina.gif" width=200 height=100></a> </body> Znaĉi sve je isto kao i sa tekstom samo umesto teksta ubacimo tag za sliku. Brauzer automatski daje plavi okvir oko slike ĉak i ako ne stavimo atribut BORDER u IMG tagu. Medjutim ako ţelite da nema slika taj plavi okvir onda samo stavite u tagu IMG atribut BORDER=0. Ali ako ţelite da još više naglasite okvir i da ga podebljate stavite umesto nule neki veći broj. Po defoltu brauzer stavlja broj 3. E sad sve atribute koje smo nauĉili u vezi IMG taga moţemo i ovde pisati i primenjivati. Znaĉi vezano za veliĉinu slike, onda onaj ALT tag je ovde za link jako bitan, pa onda onaj tag ALIGN itd, znaĉi sve. Treba napomenuti da ne mora samo jedna slika da bude kao link. Znaĉi moţemo staviti više IMG tagova unutar ANCHOR taga i sve te slike će linkovati ka toj adresi. Takodje moţe i kombinacija više slika i teksta, itd itd. To se jako retko realno koristi ali ĉisto da kaţem da uoĉite kako se tagovi mogu mešati u milion kombinacija, i kako nam mašta nalaţe, jedino je preporuĉljivo da tagovi budu lepo ugnjeţdeni a ne da se preklapaju. [30]

31 E sad stvar vezana za sve linkove bilo da su tekstualni ili slikovni. Verovatno ste primetili da kad kliknete na neki link u brauzeru on nekad otvori nov jeziĉak (kartica ili engleski New Tab) i u njemu otvori web stranu. Najĉešće otvori web stranu u isti jeziĉak (u istu karticu ili engleski Tab) u kojoj je bila web strana na kojoj ste i kliknuli. Po defoltu svaki brauzer otvara u isti jeziĉak. Naravno to moţe da se isprogramira kako nama najviše odgovara. Sledeći ANCHOR otvara kliknutu adresu u novom jeziĉku (kartici ili engleski New Tab): <body> Posetite google na <a href=" </body> Kao što vidimo tag za to je TARGET a njegova vrednost je _blank. Target tag ima još i _selfvrednost ali ona se slabije koristi jer kad se ona upiše stranica se otvara u istom jeziĉku, što je i po defoltu brauzera. Postoje još i vrednosti _parent, _top, i _search ali oni se gotovo nikad ne koriste. Tabela Tabele se obiĉno koriste iz dva razloga u HTML-u. Prvi je uredjenje podataka tabelarno. Drugi je manje uoĉljiv ali u HTML-u mnogo više korišćen, a to je dizajniranje web stranica korišćenjem nevidljivih tabela. Gotovo svi sajtovi koriste nevidljive tabele u dizajnu. Dizajniranje web stranice tabelama znaĉi podeliti stranicu na razliĉite delove i u njima smeštati pojedine njene elemente. Obiĉno ti delovi su zaglavlje, deo za dugmiće koji povezuju stranice web sajta, polje za pretragu weba ili sajta, polje za glavni deo strane, itd. Prilikom dizajniranja stranica tabelama mora se voditi raĉuna o brzini uĉitavanja stranice. Naime, sadrţaj tabela brauzeri ne prikazuju sve dok ne uĉitaju celu tabelu zajedno sa podacima u njoj. To drugim reĉima znaĉi, ako je tabela velika sa mnogo podataka posetioci će dugo ĉekati dok se nešto ne pojavi na stranici. Taj problem se rešava tako što se naprave više nezavisnih tabela koje dele stranicu na više delova, i onda se uĉitava jedna po jedna tabela. Znaĉi uĉita se prva tabela pri vrhu strane brzo i posetilac dok gleda taj deo brauzer nastavlja sa uĉitavanjem ostalih tabela. Simetriĉne HTML tabele Svaku tabelu, kao što znamo, saĉinjavaju veći broj polja. Medjutim HTML tabela ima malo drugaĉiju logiku. Naime, osnovni tag tabele shvatite kao jedan pravougaonik. U tom pravougaoniku stavljamo jedan ili više horizontalnih polja, a u horizontalna polja stavljamo jednu ili više ćelija. E sad ovako napisano hajde i da objasnimo u HTML jeziku. Osnovni tag tabele je TABLE, koji ima poĉetni i krajnji tag. Taj tag je u stvari onaj naš pravougaonik. U tabelu stavljamo jedan ili više horizontalnih polja. Tag horizontalnog polja je TR, i ono ima takoċe poĉetni i krajnji tag. U horizontalno polje stavljamo jednu ili više ćelija. Ćelija ima tag TD, a i ona ima poĉetni i krajnji tag. E sad sve to pretoĉimo i u HTML kod, ali i sa nekim podatkom u tabeli kao i sa linijama koje oiviĉuju tabelu. Linije se prave tako što se stavi atribut BORDER unutar TABLE taga. Evo kako sve izgleda:: <table border=4> <tr> <td>dejan</td> </tr> </table> [31]

32 Uoĉite da se horizontalne linije ugnjeţċuju u TABLE, a ćelije u horizontalne linije. Ovo je osnovna struktura bilo koje tabele. Ako izostavimo bilo koja od ova tri taga tabela neće funkcionisati. Takodje svi podaci koje upisujemo unutar tabele uvek, ali uvek i jedino se pišu unutar taga za ćelije, to jest izmedju poĉetnog i krajnjeg taga TD. Napravimo sada sloţeniju tabelu sa dva reda koji sadrţe po tri ćelije: <table border=4> <tr> <td>dejan</td> <td>pera</td> <td>vera</td> </tr> <tr> <td>milan</td> <td>saša</td> <td>đura</td> </tr> </table> Ovako moţete praviti koliko god ţelite horizontalnih linija, samo dodajete TR tagove. Takodj i ćelija, ali da bi bila simetriĉna tabela moraju u svim horizontalnim linijama da bude isti broj ćelija. Ovim objašnjenjenjima do sada stekli ste logiku pravljenja obiĉnih HTML tabela koje imaju simetriĉne kolone i redove. Simetriĉne tabele se koriste uglavnom za nabrajanje podataka tabelarno. Takve tabele ste uglavnom do sada sretali i koristili. [32]

33 Asimetriĉne HTML tabele HTML moţe praviti takoreći sve varijante asimetriĉnih tabela. Ta osobina daje mogućnost izmedju ostalog i dizajniranju stranica i obradi slika u smislu deljenje stranica i slika na sve moguće naĉine. Asimetriĉne tabela se izraċuju korišćenjem TD atributa ROWSPAN i COLSPAN. Na primer ajde da napravimo tabelu sliĉnu iz prethodnog naslova zadnji primer, ali da PERINO polje zauzme i VERINO polje: <table border=4> <tr> <td>dejan</td> <td colspan=2>pera</td> </tr> <tr> <td>milan</td> <td>saša</td> <td>đura</td> </tr> </table> Izbacili smo VERINO polje a u PERINU ćeliju stavili smo atribut COLSPAN = 2. A sad ajde da PERINA ćelija zauzme i DEJANOVU: <table border=4> <tr> <td colspan=3>pera</td> </tr> <tr> <td>milan</td> <td>saša</td> <td>đura</td> </tr> </table> [33]

34 Izbacili smo DEJANOVU ćeliju i u atribut COLSPAN stavili smo broj 3 jer sad ta PERINA ćelija zauzima tri ćelije. Da rezimiramo, COLSPAN atribut manipuliše samo sa horizontalnim ćelijama. Hajde sad da vidimo efekte sa ROWSPAN atributom. Na primer promenimo našu tabelu iz primera sa 6 ćelija tako da izbacimo DEJANA a MILANOVA ćelija da se proširi po vertikali: <table border=4> <tr> <td rowspan=2>milan</td> <td>pera</td> <td>vera</td> </tr> <tr> <td>saša</td> <td>đura</td> </tr> </table> Eto dobili smo efekat. Medjutim ovde treba nešto jako bitno uoĉiti. Ako pogledate kod koji daje 6 ćelija videćete da je MILANOVA ćelija u kodu u drugoj horizontalnoj liniji na prvom mestu, a sad u ovom kodu smo izbrisali tekst DEJAN i napisali MILAN, a izbrisali u drugoj liniji ćeliju u kojoj je bio tekst MILAN. Znaĉi poenta je ta da ako ţelimo proširivati ćelije po vertikali moramo brisati ćelije ispod a tekstove pisati kako nam odgovara. E sad ajde da vidimo kombinaciju oba parametra. Na primer neka u gornjem primeru ĐURA zauzme i SAŠINU ćeliju: <table border=4> <tr> [34]

35 <td rowspan=2>milan</td> <td>pera</td> <td>vera</td> </tr> <tr> <td colspan=2>đura</td> </tr> </table> Ajde još sloţeniju tabelu da napravimo. U gornjem primeru ćeliju MILAN podelimo na primer po horizontali na 3 dela i ubacimo neka nova imena u tako dobijene nove ćelije: <table border="4"> <tr> <td>dejan</td> <td rowspan="2">pera</td> <td rowspan="2">vera</td> </tr> <tr> <td rowspan="2">milan</td> </tr> <tr> <td colspan="2" rowspan="2">saša</td> </tr> <tr> <td>đura</td> </tr> </table> [35]

36 Primećujete da smo ubacili još jednu horizontalnu liniju, a takodje vidite da neki TD tagovi mogu imati i oba atributa. Sve kombinacije asimetriĉnih tabela je moguće izraditi ovim atributima. Moguće je korišćenje i tabele u tabeli, ali takav pristup nije ekonomiĉan jer mnogo natrpava kod. Nije poenta samo napraviti efekat, nego trebamo i ekonomiĉno koristiti HTML tagove. A ekonomiĉnost je moguća ukoliko dobro poznajemo sve mogućnosti HTML jezika. Mi smo za podatke u gornjim tabelama koristili samo imena, ali tu mogu da stoje i ĉitavi pasusi teksta, sa svim mogućim tagovima za formatiranje i uredjivanje teksta koje smo nauĉil. Mogu da stoje i slike, linkovi i svi mogući tagovi za slike i linkove itd itd. Naravno linije tabela mogu biti vidljive ali i nevidljive, ili pak da budu vidljive samo neke linije a neke ne itd itd. U nastavku slede objašnjenja tih dekorativnih atributa. Table tag Sve atribute TABLE taga daću tabelarno: Atribut Kod Prikaz Objašnjenje border=n <table border=14> <tr> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA IKA ICA ERA Definińe debljinu linija koje oiviĉavaju spoljni deo tabele u pikselima. Po defoltu vrednost atribute je nula. Uoĉite da je defoltna boja linija siva i to svetlija siva gornja linija i leva, a desna i donja je tamnija. [36]

37 bordercolor=#rrggbb bordercolordark=#rrggbb bgcolor=#rrggbb bacground=<img> cellpadding=n <table border=10 bordercolor=#3333ff> <tr> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> <table border=10 bordercolordark=#3333ff> <tr> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> <table bgcolor=#b0d8ff> <tr> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> <table background="pozadina.gif"> <tr> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> <table border=2 cellpadding=10> <tr> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA IKA ICA ERA ACA IKA ICA ERA ACA IKA ICA ERA ACA IKA ICA ERA ACA ICA IKA ERA Atribut koji uvek ide sa border. Definińe boju svih linija koje uokviruju spoljni deo tabele. Ne podrņavaju svi brauzeri. Atribut daje boju desnoj i donjoj ivici tabele. Atribut koji uvek ide sa border, ali vrlo ĉesto i sa bordercolor. Ne podrņavaju svi brauzeri. Daje boju ĉitavoj pozadini tabele. Definińe sliku pozadine ĉitave tabele Definińe udaljenost izmedju podatka i ivice ćelija u svim pravcima simetriĉno u pikselima. Ne mora da ide zajedno sa border ali ovde zbog demonstracije [37]

38 <table border=2 cellspacing=10> <tr> <td>aca</td> <td>ika</td> cellspacing=n </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> <table border=1 width=130> <tr> <td>aca</td> <td>ika</td> </tr> width=n ili n% <tr> <td>ica</td> <td>era</td> </tr> </table> <table border=1 height=200> <tr> <td>aca</td> <td>ika</td> </tr> height=n ili n% <tr> <td>ica</td> <td>era</td> </tr> </table> <table align=right> <tr> <td>aca</td> <td>ika</td> </tr> align=right ili center ili left <tr> <td>ica</td> <td>era</td> </tr> </table> frame = above ili below ili lhs ili rhs ili hsides ili vsides ili box ili void <table frame=above> <tr> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA ICA ACA IKA ICA ERA IKA ERA ACA IKA ICA ERA ACA IKA ICA ERA ACA IKA ICA ERA Definińe udaljenost izmedju ćelija, i izmedju ćelija i linija koje oiviĉavaju spoljni deo tabele. Ne mora da ide zajedno sa border ali ovde zbog demonstracije. Definińe horizontalnu veliĉinu tabele. Kad nije dat widthńirina je tolika da se smeste svi podaci. Moņe se dati u procentima ili pikselima. Ne mora da ide uz border. Definińe vertikalnu veliĉinu tabele. Kad nije datheight ńirina je tolika da se smeste svi podaci. Moņe se dati u procentima ili pikselima. Ne mora da ide uz border. Smeńta tabelu uz desnu ivicu prostora u kojem se nalazi tabela ako je vrednostright, levo ako jeleft i u sredinu horizontale ako jecenter. Ako nema align po defoltu je left. Kad je vrednostabove iscrtava sve gornje vodoravne linije koje poseduje tabela. Kad je below crta sve donje vodoravne, lhscrta sve leve uspravne, rhs crta sve desne uspravne, hsidescrta i sve gornje i donje vodoravne linije, vsides sve leve i desne uspravne, box crta sve [38]

39 moguće, voidne iscrtava ni jednu liniju. Box vam je isto kao da ste stavili border=1, a void vam je isto kao kad i ne koristite frame a ni border.frame i border nikad ne idu zajedno. TR tag Ovde ću dati tabelu atributa koji se koriste u TR tagu. Napomena: da bi lakše shvatili u jednoj horizontalnoj liniji tabele biće ubacivani atributi a u drugoj ne. Atribut Kod Prikaz Objašnjenje bordercolor=#rrggbb <table border=7> <tr bordercolor=#3333ff> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA IKA ICA ERA definińe boju linija ćelija koje poseduje taj TR tag u kome je bordercolor atribut. Uvek mora u TABLE tagu da stoji border atribut. Ne podrņavaju svi brauzeri bordercolordark=#rrggbb bgcolor=#rrggbb <table border=7 > <tr bordercolordark=#3333ff> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> <table> <tr bgcolor=#b0d8ff> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> [39] ACA IKA ICA ERA ACA IKA ICA ERA Daje boju gornjoj i levoj liniji svim ćelijama po horizontali. Taj atribut uvek ide sa border u TABLE tagu, ali vrlo ĉesto i sa bordercolor u istom TR tagu. Ne podrņavaju svi brauzeri Daje boju pozadini svih ćelija koje sadrņi taj TR. Ako se ne koristi bgcolor defoltna vrednost je pozadina tabele a ako nema ni tabela pozadinu onda je pozadina strane.

40 align=right ili center ili left <table border=3 width="124"> <tr align=right> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ICA ACA ERA IKA Smeńta sadrņaj ćelija uz desnu ivicu ćelija ako je vrednost atributaright koje se nalaze u tom tagu TR. Ako je vrednost left onda se smeńta u levu stranu (to je i po defoltu), ako jecenter onda u centar. valign=top ili bottom ili middle <table border=3 height=130> <tr valign=top> <td>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA IKA ICA ERA Sadrņaj ćelija smeńta uz gornju ivicu ćelija, i to onih ćelija koje se nalaze u tom TR tagu. Ako jebottom onda smeńta uz donju ivicu a ako jemiddle onda u sredinu. Middle je po defoltu ako se i ne koristi valign atribut TD tag I ovde ću dati tabelu atributa koji se koriste u TD tagu. Kao primer menjaću samo prvoj ćeliji atribute a ostale će biti po defoltu. Atribut Kod Prikaz Objašnjenje bordercolor=#rrggbb <table border=7> <tr > <td bordercolor =#3333FF>ACA</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA IKA ICA ERA definińe boju linija ćelije u kome je bordercolor atribut. Uvek mora u TABLE tagu da stoji border atribut. Nije podrņan od svih brauzera bordercolordark=#rrggbb <table border=7 > <tr> <td bordercolordark =#3333FF>ACA</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> [40] ACA IKA ICA ERA Daje boju gornjoj i levoj liniji ćeliji koja ima taj atribut. Uvek ide sa border u TABLE tagu, ali vrlo ĉesto i sa bordercolor u istom TR tagu. Nije podrņan od svih brauzra.

41 bgcolor=#rrggbb </table> <table> <tr> <td bgcolor =#B0D8FF>ACA</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA IKA ICA ERA Daje boju pozadini ćelije koja sadrņi atribut. Ako se ne koristi bgcolor defoltna vrednost je pozadina tabele a ako nema ni tabela pozadinu onda je pozadina strane. align=right ili center ili left <table border=3 width="124"> <tr> <td align=right>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ICA ACA IKA ERA Smeńta sadrņaj ćelije uz desnu ivicu ćelije ako jeright. Ako je vrednost left onda se smeńta u levu stranu (to je i defoltna vrednost ako se ne koristi align), ako jecenter onda u centar. colspan i rowspan valign=top ili bottom ili middle <table border=3 height=130> <tr> <td valign=top>aca</td> <td>ika</td> </tr> <tr> <td>ica</td> <td>era</td> </tr> </table> ACA IKA ICA ERA Objańnjeno je ranije a sluņe za izradu asimetriĉnih tabela. Sadrņaj ćelije smeńta uz gornju ivicu ćelije ako jetop Ako je bottomonda uz donju ivicu a ako je middleonda u sredinu. Middle je po defoltu ako se i ne koristi valign Dekorativne HTML tabele Videli smo skoro sve atribute TABLE, TR i TD tagova. Mi smo uglavnom koristili po jedan do dva atributa, ali mogu se koristiti razne kombinacije stributa kako bi smo dobili estetski razne efekte. Evo jedan primer tabele koja sluţi da rasporedi elemente jedne web stranice: <table border="1" cellpadding="0" cellspacing="0" width="600" height="426"> <tr> <td valign="top" colspan="3" height="75"> Vrh stranice</td> </tr> <tr> <td valign="top" width="155"> Navigacija 1 </td> <td valign="top" width="398"> [41]

42 Sadržaj stranice </td> <td valign="top" height="278" width="164"> Navigacija 2</td> </tr> <tr> <td valign="top" colspan="3" height="71"> Dno stranice </td> </tr> </table> To bi izgledalo ovako: Praktiĉno mi smo pomoću tabele web stranicu podelili na nekoliko delova u kojima smeštamo njene elemente. U "Vrh stranice" se obiĉno moţe smestiti na primer neka flash animacija ili gif, ili samo neka lepa slika. Tu se takodje smešta i naziv sajta, naziv firme, logo firme itd. U "Navigacija 1" se najĉešće smešta navigacija web stranice. U "Navigacija 2" se smešta na primer pomoćna neka navigacija, a mogu i reklame, baneri itd. U "Sadrţaj stranice" se smešta sam sadrţaj stranice. U"Dno stranice" se obiĉno smešta ime firme, vlasnik sajta, mogu i baneri, reklamne, kontakt podaci i sliĉno. Evo recimo kad bi dodali odgovarajuće te neke elemente, odnosno kad bi ubacili odgovarajuće pozadine, menije, i sadrţaj kako bi mogla da izgleda web stranica: [42]

43 Moţete jasno primetiti kako su ispunjene ćelije tabele iz našeg primera. E sad naravno linije tabele se ne vide jer nije estetski, a to se postiţe ako u TABLE tagu stavimo BORDER = 0. Frejm Svaki frejm je jedan kompletan HTML fajl. Ako delite stranu na dva frejma, onda će u jednom frejmu biti jedan kompletan HTML dokument (npr. frejm1.htm), u drugom frejmu biće drugi kompletan HTML dokument (npr. frejm2.htm). Ali, glavna stvar je zapravo treći HTML fajl. Treći HTML fajl je u stvari GLAVNA STRANA koja iskljuĉivo sadrţi <FRAMESET> tagove, koji definišu kako će se rasporediti frejmovi (FRAME tagovi). Glavna strana se struĉno naziva frejm stranica ili frameset stranica. Frejm strana je HTML dokument koji nema <BODY> tag jer neće prikazivati nikakav sadrţaj. Na ovaj naĉin u web ĉitaĉu moguće je prikazati više stranica odjednom. Na kraju uvoda ipak treba reći da strana ne treba imati previše frejmova. Otprilike ne bi trebalo da bude više od tri frejma na web strani. Medjutim moj vam je savet ukoliko moţete izbeći potpuno frejmove, to bi bilo najbolje. Razlog tome je da sadrţaj stranica koje su u frejmovima mnogo teţe dospeva na pretraţivaĉe od obiĉnih strana. Najprihvatljivije korišćenje frejmova je da se u njima smeštaju na primer neki reklamni baneri. Baneri se stavljaju na većini strana sajta tako što se svi ubace u jednu stranicu, koja se kao frejm ubaci na sve stranice sajta. Pa recimo nekad ako ţelimo da izbrišemo neki reklamni baner ne moramo ga brisati na svim stranama već samo na tu jednu. Frejmovi Kao što znamo svaka HTML strana mora imati BODY tag u kome se smešta kod strane za prikaz sadrţaja u brauzer. Medjutim frejm stranica ne mora sadrţati BODY tag, i umesto njega se stavlja FRAMESET tag. Frameset tag ima i poĉetni i krajnji tag. FRAMESET tag se moţe naći više puta na stranici. Napravimo stranicu strana1.htm koja ispisuje samo tekst "STRANA1", i stranicu strana2.htm koja samo ispisuje "STRANA2". E sad ako ţelimo da te dve strane prikaţemo na jednoj strani koristimo treću stranu u kojoj se nalazi FRAMESET, koji definiše na koji naĉin će se podeliti strana kako bi se prikazale strane strana1.htm i strana2.htm. Na primer ako ţelimo stranu da podelimo na pola po vertikali onda pišemo: <HTML> <HEAD> <TITLE>Frejm strana</title> [43]

44 </HEAD> <FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm"> <FRAME SRC="strana2.htm"> </FRAMESET> </HTML> Tag FRAME definiše uz pomoć atributa SRC stranicu koja će biti prikazana u odgovarajućem prostoru na stranici. Atribut COLS u FRAMESET tagu definiše u kom odnosu će strana1.htm i strana2.htm deliti po vertikali frejm stranu. U našem sluĉaju na pola jer je 50%. Znaĉi bez obzira kolika je rezolucija ekrana stranica će biti izdeljena po vertikali taĉno po sredini. Kad imamo više frejmova i ako svima dajemo vrednost u procentima uvek se mora vodito raĉuna da zbir svih procenata iznosi 100%, jer u suprotno dolazi do greške. Doduše redje ali takodje za definisanje veliĉine polja frejma umesto procenata mogu se koristiti i pikseli. Na primer COLS=300, 500. Ali u ovom sluĉaju stranica sa frejmovima razliĉito će se prikazivati na razliĉitim rezolucijama ekrana. Na primer ako je rezolucija ekrana 1280 u širini naši prozori frejma biće jako uski i zauzimaće mali prostor uz levu ivicu strane a ostatak strane će biti prazan. Tu nelagodnost moţete izbeći ako napišemo COLS= 300,*. Zvezdica u prevodu znaĉi " sve što je ostalo ". Frejm stranicu moţemo deliti i po horizontali. U tu svrhu se koristi atribut ROWS u FRAMESET tagu. Sve što smo pisali za COLS vaţi i za ROWS samo što se sve odnosi na horizontalnu podelu stranice. Podela prostora frejm strane po vertikali ili horizontali se moţe izvršiti i ovako: COLS="50,*,2*". To znaĉi da će prvi frejm zauzeti 50 piksela a druga dva ostatak ekrana, stim što će treći frejm biti duplo veći od drugog. Deljenje strane moţe se vršiti koliko god ţelimo i kako god ţelimo. Hajde na primer u našem gornjem kodu da frejm koji zauzima strana2.htm podelimo takodje na pola, ali u ovom sluĉaju igre radi po horizontali, i u novom trećem polju da prikaţemo neku novu stranicu, na primer strana3.htm koja ispisuje tekst "STRANA3": <HTML> <HEAD> <TITLE>Frejm strana</title> </HEAD> <FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm"> <FRAMESET rows=50%, 50%> <FRAME SRC="strana2.htm"> <FRAME SRC="strana3.htm"> </FRAMESET> </FRAMESET> </HTML> Primećujete da kad god se vrši neka nova podela uvek se mora koristiti FRAMESET tag jer on definiše na koji naĉin će se deliti prostor. U ovom našem sluĉaju podeliće se 50% po horizontali. A sve to bi brauzer prikazao ovako: [44]

45 E sad moţemo nastaviti sa deljenjem koliko nam je volja i kako god ţelimo, ili po vertikali ili horizontali. Samo ako delimo u procentima moramo voditi raĉuna da zbir svih horizontalnih delova mora biti 100% ali i vertikalnih. Ako ţelimo neko polje da podelimo, na primer polje gde jestrana3.htm, onda izbrišemo FRAME tag koji sadrţi adresu strana3.htm i na tom mestu stavimo <FRAMESET></FRAMESET>, i definišemo atributima deljenje tog prostora, i u njemu stavimo koliko god ţelimo FRAME tagova. Ranije su postojali neki brauzeri koji nisu podrţavali frejmove. Kako danas internet posećuju milijarde ljudi dnevno moguće je da i danas neko koristi takav brauzer, koji onda otvori samo praznu stranicu. Da se ta nelagodnost ne bi desila tag NOFRAMES omogućava da takvim posetiocima napišete nešto. Evo primera koji će sve razjasniti: <HTML> <HEAD> <TITLE>Frejm strana</title> </HEAD> <FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm"> <FRAMESET rows=50%, 50%> <FRAME SRC="strana2.htm"> <FRAME SRC="strana3.htm"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> <!-- Ovde pišete HTML tagove sve normalno kao kad pišete obične HTML stranice --> </BODY> </NOFRAMES> </HTML> [45]

46 Scrollbar, margin i iviĉne linije Naše stranice strana1.htm, strana2.htm i strana3.htm iz prethodnog naslova imaju samo po jednu reĉ. U tom sluĉaju sve će biti prikazano. Medjutim ako stranice imaju mnogo teksta, tada će po defoltu brauzer u frejmovima napraviti scrollbar - ove, to jest vertikalne i / ili horizontalne klizaĉe kako bi mogli da vidite sve sadrţaje u frejmovima. E sad ako ţelimo moţemo definisati da li uvek prikazati scrollbar - ove, ili ih prikazati po potrebi (što je i po defoltu), ili pak nikad ih ne prikazati bez obzira što se moţda neki deo stranice nikad neće videti. Atribut koji sve to definiše jescrolling a smešta se unutar FRAME taga. E sad na nekoj frejm stranici moţemo frejmovima razliĉito podesiti SCROLLING atribute. Evo primera: <HTML> <HEAD> <TITLE>Frejm strana</title> </HEAD> <FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm" scrolling=yes> <FRAME SRC="strana2.htm" scrolling=no> <FRAME SRC="strana2.htm" scrolling=auto> </FRAMESET> </HTML> Dakle, kad je vrednost SCROLLING atributa YES onda se uvek pojavljuje scrollbar ĉak i ako nema potrebe za to. Ako je vrednost atributa NO onda se scrollbar nikad ne pojavljuje, ali ako je vrednost AUTO onda se pojavljuje po potrebi. Medjutim ako ţelimo AUTO onda i ne moramo pisati SCROLLING atribut jer je i po defoltu tako. Budite obazrivi ako nekad koristite NO vrednost jer nisu sve rezolucije ekrana iste, tako da nešto što lepo izgleda na vašoj rezoluciji ne mora da znaĉi da će izgledati tako na svim. Zato uvek pogledajte kako vam stranice ozgledaju na svim rezolucijama. Verovatno ste primetili da brauzer uvek ostavi malo slobodnog prostora oko sadrţaja svakog frejma u svim pravcima. Ova pojava postoji zbog estetike. MeĊutim, i veliĉina margin - a se moţe kontrolisati pomoću atributa MARGINWIDTH (margine po horizontali) i MARGINHEIGHT (po vertikali). Na primer podešavanje margin - a u svim pravcima na 1 piksel (što je minimalna vrednost) u nekom frejmu bi izgledalo ovako: <HTML> <HEAD> <TITLE>Frejm strana</title> </HEAD> <FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm" MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="strana2.htm"> </FRAMESET> </HTML> Defoltna vrednost margin - a u svim pravcima je 6 piksela. Medjutim mnogi se muĉe kad na primer postavljaju slike pa nikako ne mogu da uklope da se frejm prikaţe baš po obodu slike. Ili po nekad neznatno frejmovi iseku sliku, ili ostave mali prazan prostor oko nje. Znajte da se širina frejma ne meri od kraja do kraja već 4 piksela je kao neka rezerva. Što znaĉi ako ţelite taĉno da uklopite sliku uvek kad definišete širinu i visinu frejma na osnovu širine i visine slike dodajte 8 piksela! Primećujete da su svi frejmovi medjusobno ograniĉeni tanjim ili debljim linijama medjusobno. Po nekad je potrebno ukloniti sve te linije, ili ih pak podebljati, ali u svakom sluĉaju koriste se za to atributi BORDER, SPACING, FRAMEBORDER i FRAMESPACING a smeštaju se svi po potrebi u FRAMESET tagu. Evo primera ako ţelimo da uklonimo sve linije: <HTML> <HEAD> <TITLE>Frejm strana</title> [46]

47 </HEAD> <FRAMESET cols=50%, 50% BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0 MARGINHEIGHT=0> <FRAME SRC="strana1.htm"> <FRAME SRC="strana2.htm"> </FRAMESET> </HTML> Vrednost atributa BORDER definiše debljinu granice izmeċu frejmova u pikselima. FRAMEBORDER moţe imati vrednost 1 (ili YES), i tad se prikazuje granica izmeċu dva frejma, dok vrednost 0 (ili NO) ne prikazuje. FRAMESPACING definiše razmak izmeċu granica frejma i sadrţaja frejma izraţenog u pikselima. U FRAMESET tagu moţe da se nadje i BORDERCOLOR atribut koji definiše boju granice izmeċu frejmova. Ovaj atribut se primenjuje jedino pod uslovom da je atribut FRAMEBORDER postavljen na aktivnu vrednost. Postoji i atribut NORESIZE koji spreĉava da posetilac stranice menja zadatu veliĉinu frejma. Ovaj atribut se samo navodi bez ikakve vrednosti. Vaţi samo za FRAME tag! Postoje još neki atributi ali su manje vaţni. Forma Na internetu gotovo svi sajtovi imaju formulare koji od nas traţe popunjavanje. Ti formulari mogu biti raznovrsni i u smislu podataka koje zahtevaju, ali i po svojoj strukturi. U formularima moţemo pisati jednu reĉ, ili jednu do dve reĉenice, ali i ĉitave pasuse. Od nas se po nekad zahteva da izaberemo neke opcije od unapred pripremljenih, ili da ih ĉekiramo. Takodje preko tih formulara moţemo na sajtovima ubacivati i naše fotografije, neke video klipove, i sliĉno. Da nema tih formulara na sajtovima bi smo nalazili samo ono što webmasteri pripreme, ili vlasnici tih sajtova. Dok ovako i sami posetioci mogu doprinositi sadrţaju sajta. Neki sajtovi se i zasnivaju na tim formularima. Primeri takvih sajtova su forumi, blogovi, youtube, myspace, facebook i tako dalje. Jednom reĉju formulari su ti koji ĉine sajtove dinamiĉnim. IzraĊivanje formulara omogućavaju HTML FORME. One dakle sluţe za prikupljane raznih podataka od posetilaca sajta, i te podatke šalju drugim skriptama na dalju automatsku obradu. Skripte koje preuzimaju podatke od HTML formi su PHP, ASP, CGI, JavaScript, i tako dalje. Postoji glavni tag za forme koji ima naziv FORM. On ima poĉetni i krajnji tag <form></form>. Normalno FORM tag ima nekoliko atributa ali o njima malo kasnije. FORM tag shvatite kao jednu kutiju u koju se smeštaju elementi forme, a upravo preko tih elemenata forme se unose raznorazni podaci. Skoro svi elementi forme moraju iskljuĉivo da se nadju samo unutar forme a ne i samostalno izvan nje. Izmedju poĉetnog i krajnjeg FORM taga se ubacuju elementi forme. Elementi forme mogu biti u raznim kombinacijama. Na primer moţe da postoji samo jedan element forme, mogu dva razliĉita, mogu dva ili više ista, ili više ista sa drugim elementima, itd. Elementi forme su: 1. Text box - Polje u kome unosimo tekst od jedne reĉi do jedne reĉenice. 2. Password field - Polje u koje upisujemo šifre. 3. Hidden field - Sakriveno polje. Prosledjuje podatke koje posetioci nisu upisali i koji im nisu vidljivi ali su bitni su za dalju obradu unetih podataka. 4. Text area - Podruĉje u kome unosimo tekst od jedne reĉi do ĉitavih nekoliko pasusa 5. Check box - Potvrdni okvir. Omogućava posetiocima da ĉekiranjem izaberu jednu ili više opcija od ponudjenih. 6. Radio button - Radijsko dugme. Sliĉno kao i Check box ali posetioci ĉekiranjem biraju iskljuĉivo samo jednu opciju od više ponudjenih. 7. Drop-down menu - Spuštajući izbornik. Smisao je isti kao i kod Check box-a, ali se koristi ako se nude veliki broj opcija, na primer desetak ili stotinak. Kad bi smo 100 opcija pisali Check box-om trebala bi nam metar strana, a ovako se pravi padajući izbornik sa klizaĉem i sve je elegantnije i lepše. 8. File upload - Polje za unošenje fajlova. Na primer slika, tekst fajlova video klipova, i drugih fajlova. [47]

48 9. Submit button - Dugme na koje kliknemo kad popunimo formular. Kad se klikne na to dugme onda forma prosledjuje te naše podatke drugim skriptama na obradu, na primer PHP skripti. 10. Reset button - Reset dugme briše sve što smo popunili u formi da bi opet krenuli sa novim popunjavanjem jer smo recimo napravili mnoge greške. 11. Image button - Slikovno dugme. To je dugme koje moţe imati istu upotrebu kao Submit dugme ali se Image button moţe i slikovno dekorisati. Submit dugme ne moţe jer ga definiše sam brauzer po defaultu. U nastavku će mo objasniti sve ove elemente. FORM tag FORM tag izmedju ostalog pokazuje brauzeru gde poĉinje i gde se završava formular. Unutar poĉetnog i krajnjeg taga se smeštaju elementi za unos podataka, ali mogu i svi drugi mogući HTML tagovi. Na primer moţemo uneti tekst koji objašnjava šta pisati u poljima, mogu i slike, linkovi itd. Takodje vrlo ĉesto se elementi forme rasporedjuju tabelarno, što znaĉi da se i tabele mogu smeštati u formama, itd. Minimalni izgled forme je: <body> <form> <!-- Ovde se smeštaju jedan ili više elemenata forme za unos podataka ali mogu i svi mogući drugi HTML tagovi --> </form> </body> Ovaj kod naravno nema nikakvu funkciju. Vi FORM tag trebate shvatiti kao nevidljivi kontejner u kome se smeštaju elementi forme koji su vidljivi. Svaka forma moţe imati svoje ime. Ime forme je neophodno nekim skriptama koje se koriste u izradi web stranica, na primer JavaScript skriptama. Dok recimo PHP skriptama apsolutno nije bitan naziv forme. Ime forme se daje atributom NAME ovako: <body> <form NAME="forma1"> <!-- Telo forme --> </form> </body> Obratite paţnju na navodnike u imenu. Vrednosti nekih atributa ne moramo stavljati u dvostrukim navodnicima, ali ovde to moramo. Da ne bi razmišljali u kojim to atributima ne moraju navodnici a u kojim moraju savetujemo vam da sve moguće vrednosti svih HTML atributa smeštate u dvostrukim navodnicima jer tako sigurno nećete nikad pogrešiti. Kao što smo već napisali, elementi forme su vidljivi i oni sakupljaju podatke. Kad se klikne na submit dugme sve te podatke, iz svih elemenata, forma šalje nekoj skripti na obradu. E sad, definisanje adrese kom fajlu se šalju podaci definiše ACTION atribut koji se smešta u FORM tagu: <form ACTION="cgi/obrada.cgi"> U vrednost atributa ACTION se dakle stavlja adresa skripte za obradu podataka. Ali ukoliko se na primer obrada podataka vrši u samom tom fajlu u kome se i nalazi forma (što je sluĉaj sa nekim PHP skriptama) onda moţemo pisati <form ACTION = "">. Dakle samo navodnici. Mada i u takvim sluĉajevima moţemo pisati adresu skripte u kojoj se nalazi i sama forma. Moţete podatke prikupljene iz forme poslati na neku mejl adresu. U tom sluĉaju bi izgledalo: <form method="post" action="mailto:tvojeime@sajt.com" enctype="text/plain"> Napomena: ako ţelite slati na mejl adresu podatke iz forme onda uvek koristite ENCTYPE i METHOD atribute u obliku kao gore. Zašto se koriste ENCTYPE i METHOD atributi objasniću u nastavku. [48]

49 Postoje dva metoda prenosa podataka. Zato i u samoj formi po nekad moramo definisati metodu prenosa podataka. Atribut kojim se definiše metoda prenosa je METHOD. Metoda prenosa podataka nije direktno nešto bitna u samoj formi, a i za JavaScript gotovo da i nije bitna, ali na primer za PHP skripte je neophodna. Te dve metode su GET i POST. Ovde nećemo pisati ništa više vezano za te dve metode, a o tome imate sve detaljno u PHP delu gde se objašnjava prenos podataka. Znaĉi ako je potrebno u formi definisati metodu prenosa onda pišemo: <form METHOD="POST"> U gornjem primeru za metodu prenosa podataka izabrali smo POST, a ako ţelimo GET onda umesto POST pišemo GET. Ako koristimo sve elemente forme osim element za ubacivanje fajlova (slika, videa, muzike itd), onda su NAME, ACTION i METHOD argumenti sasvim dovoljni u FORM tagu (osim ako šeljete podatke na mejl jer onda je obavezno i enctype="text/plain" kao što je već reĉeno). U nastavku ćemo objasniti neke argumente FORM taga vezane za elemente forme koji sluţe za ubacivanje fajlova. Znaĉi ako se u telu forme nalazi i polje za ubacivanje slike, video klipova, tekst dokumenata ili drugih fajlova, onda se u FORM tagu atributom ACCEPT moţe definisati kojim od tih vrsta fajlova je dozvoljeno ubacivanje. Na primer ako ţelimo ubacivanje slika onda definišemo kojim tipovima slika je dozvoljeno, na primer: <form ACCEPT="image/gif, image/jpeg"> Naravno ovde smo primera radi definisali dve vrste slika ali postoje još vrsta slika, pa moţe da stoje tri, i više. Ili recimo ţelimo da ubacujemo samo neke video klipove, onda moţemo definisati koje vrste klipova: <form ACCEPT="video/mpeg, video/3gpp">. Bitna napomena je da ovaj atribut ne štiti ukoliko neko baš naumi da vam pošalje drugaĉiju sliku od one koje ste vi definisali ovim atributom, ili ĉak umesto slike da vam pošalje na primer neki klip. Na primer iskopira vašu stranicu i otvori je u notepad. Promeni vaš kod kako hoće. Tako promenjenu stranicu otvori brauzerom i ubaci u formi šta mu je volja. Znaĉi ako ţelite da štitite svoj sajt ne postoji mogućnost u HTML-u ili na primer u JavaScriptu, već jedino na strani servera, na primer u PHP skriptama. Medjutim ovaj atribut ima smisla jer daleko više ima posetilaca koji nisu militantni, i onda ako unesu nepoţeljan fajl odma im se na korisniĉkoj strani to napomene da isprave a ne mora da se opterećuje server. Medjutim ako prethodni atribut nije neophodan, atribut ENCTYPE moramo ali moramo pisati u FORM tagu. Taj atribut definiše metodu kodiranja podataka prikupljenih iz polja za ubacivanje fajlova kojom će podaci biti poslati na host. Metode su sledeće: 1. application/x-www-form-urlencoded - To je i po defaultu ako i ne navedemo atribut ENCTYPE, i vaţi za sve podatke koji se ubacuju a nisu fajlovi, ili se podaci ne šalju mejlom. To je metoda kojom se kodiraju tekstualni podaci pre nego što ih HTML pošalje serveru, i to tako da se razmaci pretvaraju u "+" simbol, a posebni znakovi se pretvaraju u ASCII-HEX vrednosti. 2. multipart/form-data - Da mnogo ne zamaram objašnjenjima dovoljno je reći da ovu metodu uvek ali uvek morate koristiti kad se ubacuju bilo koji fajlovi, bilo oni slike, muzika, video, ili bilo koji drugi fajlovi. Moţda se pitate zašto morate koristiti ovaj metod. Pa kao što vidite postoje razni metodi, i sad ako forma ne pošalje informaciju serveru kojom metodom su kodirani podaci onda server neće znati kako da se preipremi za dekodovanje. 3. text/plain - Ukoliko koristite ACTION="mailto:..." morate izabrati ovu metodu kodovanja, ali MORATE. E sad ajde da vidimo kako se obavezno piše FORM tag ukoliko se u telu forme nalazi element za ubacivanje (upload) fajlova (slika, muzike, videa, tekst fajlovi, i bilo koji drugi fajlovi), kompletan sa recimo post metodom prenosa podataka: <form name ="fajl" action="post" enctype="multipart/form-data"> Postoji i atribut FORM taga pod nazivom ACCEPT_CHARSET koji moţe definisati koji tip tekstualnih znakova forma šalje. Evo kako bi to izgledalo: <form accept-charset="iso "> [49]

50 Internet explorer ne podrţava ovaj atribut i po njemu je uvek on Windows-1252, što je po defoltu i kod drugih brauzera. Text box, Password field, Submit, Reset, Image button Taxt box Text box je HTML FORM element za unos teksta u jednom redu. Znaĉi zamišljen je da se unese tekst od jedne reĉi do eventualno jedne reĉenice. Evo koda minimalne forme sa TEXBOX elementom: <form name="forma2"> <input type="text" name="tekst1" value="upisi ime"><br> <input type="submit" value="posalji" name="submitdugme"><br> <input type="reset" value="ponisti"> </form> Brauzer bi prikazao sledeće: Upisi ime Posalji Ponisti sve Tag TEX BOX elementa forme kao što vidimo u kodu je <input type="text">. Brauzer kad naidje na taj tag odma iscrtava polje za popunjavanje. Atribut NAME u TEXT BOX-u je obavezan i njegovu vrednost dajemo po ţelji. Atribut VALUE nije neophodan. Ukoliko se ne ubaci a mi napišemo nešto u polje i kad kliknemo na submit dugme forma automatski to što smo napisali dodeljuje u vrednost VALUE. Medjutim ako ipak ţelimo da mu damo vrednost (kao što smo mi dali) onda je to defoltna vrednost koja će se proslediti kada kliknemo na submit dugme iako ništa nismo upisali. Ako nismo napisali VALUE vrednost a i ne napišemo ništa a kliknemo submit dugme onda će se u value dodeliti prazan string i tako poslati na dalju obradu. E sada slede atributi textbox-a koji nisu obavezni ali su zanimljivi naravno. SIZE je numeriĉki atribut koji definiše širinu polja po horizontali mereno u tekstualnim znacima. Na primer SIZE = 10 definiše da će 10 znaka biti veliĉina prozorĉića u kome će se pisati. Drugim reĉima ovim atributom definišemo veliĉinu prozorĉića. MAXLANGTH je isto numeriĉki atribut.koji definiše maksimum slova koliko moţemo da pišemo u prozoĉe. Na primer MAXLANGTH = 8 znaĉi da moţemo maksimalno 8 slova pisati u prozorĉe, a kad ispišemo 8 slova više nemoţemo jer iako mi i dalje kucamo slova na tastaturi slova se više ne ispisuju. Obiĉno ide zajedno sa SIZE atributom, ali tako da [50]

51 vrednost u size atributu uvek bude za dva ili tri veća od MAXLANGTH vrednost. Naravno MAXLANGTH nemojte nikad shvatiti kao sigurnu zaštitu. Već smo pisali da se na klijentskoj strani svaka zaštita moţe izigrati. Ali pošto ima daleko više obiĉnih korisnika od militantnih sve ovo ipak ima smisla jer se rasterećuje server tako što se još na klijentskoj strani definiše veliĉina teksta. Submit button Submit button (submit dugme) je obavezno u svim formama jer se na njega klikne kad je sve popunjeno da bi forma poslala podatke. Zato sam ja dao vrednost POSALJI. Submit button je isto element forme. Njegov tag je <input type="submit"> koji uvek sadrţi atribut VALUE osim ukoliko ţelite da vam se na dugmetu ispiše Submit Query. Vrednost VALUE atributa je znaĉi tekst koji će se prikazivati na dugmetu. SUBMIT tag mora da sadrţi atribut NAME ukoliko forma šalje podatke nekoj skripti za obradu podataka, na primer PHP skripti. Vrednost atributa NAME se naravno ne vidi u brauzeru, ali se vrednost imena šalje skriptama kao što su PHP kojima je to neophodno. Ako koristimo formu samo u JavaScript-ovima onda nije neophodno imenovati submit dugme. Image button Image button moţe da zameni submit dugme i besmisleno je da se zajedno nadju u istoj formi jer vrše istu funkciju. Naime priĉa je vrlo sliĉna kao i za submit, samo što IMAGE dugme nema VALUE atribut a ima atribute koji su vezani za slike. Evo jednog IMAGE BUTTON taga pa će sve biti jasnije: <input type="image" src="dugme.gif" name="submitslikovno" width="60" height="60" ALT="POŠALJI"> Znaĉi kad se klikne na IMAGE dugme forma šalje podatke. E sad kao što vidimo postoji i SRC argument a on kao što znamo daje kratko objašnjenje slike ako se ona iz nekog razloga ne pojavi. Znaĉi vaţe svi argumenti koje smo nauĉili u vezi slika da se ne ponavljamo. Jedino treba naglasiti da je poţeljno uvek koristiti ALT argument obzirom da nekad moţe se desiti da se ne pojavi slika pa da ljudi znaju gde je submit dugme. Takodje NAME argument uvek mora da se koristi ako forma šalje na primer PHP skriptama podatke, a ako šalje JavaScript-u onda nije neophodno. Reset Reset dugme nije obavezno ali se u ogromnoj većini formi koristi. Reset dugme se klikće kad ţelimo da izbrišemo sve šta smo uneli u polja forme, na primer zato što smo pogrešili na više mesta pa se više isplati da sve ponovo popunimo. Reset dugme ima tag <input type="reset"> koji uvek sadrţi atribut VALUE osim ukoliko ţelite da vam se na dugmetu ispiše Reset. Vrednost VALUE atributa je tekst koji će se prikazivati na dugmetu u brauzeru. Password Field Password field je apsolutno u svemu isti kao i TEXTBOX samo što se ovde pojavljuju taĉkice dok pišemo u prozorĉe a u texbox-u se pojavljuju slova koja pišemo. Znaĉi ovde se isto pamte u VALUE atributu ono što zapišemo ali vizuelno vidimo taĉkice kao zaštita šifre da neko ko posmatra sa strane ne vidi šifru. Tag ovog atributa je <input type="password">. Ponavljam još jednom, sve ostalo je apsolutno isto kao kod textbox-a. Hidden Field U nekim sluĉajevima forma mora pored podataka koje unose posetioci da pošalje i odredjene podatke koje ne unose posetioci i nisu im vidljivi. Na primer neki sajt ima englesku i srpsku verziju. I recimo iz obe verzije forme šalju podatke istoj skripti na obradu. E sad da bi ta skripta znala iz koje verzije su podaci, moţemo kroz HIDDEN polje da prosledimo na primer vrednost engleski, ili srpski. Ali nemojte zaboraviti da je taj podatak sakriven u smislu da se ne [51]

52 vidi u direktno u displeju brauzera, ali ako neko ţeli moţe ga videti. Na primer pogleda Source code vaše stranice pomoću brauzera. HIDDEN tag je <input type="hidden">. A kompletan FORM tag bi izgledao ovako: <form name="forma3"> <input type="hidden" name="jezik" value="srpski"> Upisi svoje ime: <input type="text" name="tekst1" value="upisi ime"><br> <input type="submit" value="posalji" name="submitdugme"><br> <input type="reset" value="ponisti"> </form> Upisi svoje ime: Upisi ime Posalji Ponisti Iz primera jasno uoĉavate da se TEXT BOX vidi a HIDDEN polje ne. Kad se unese ime u našem primeru i klikne na POSALJI forma šalje ime, ali šalje i vrednost iz HIDDEN atributa iako ga posetioc nije uneo a ni video. HIDDEN tag uvek mora da sadrţi VALUE i NAME atribute i da im bude dodeljena vrednost. HIDDEN tag ima samo NAME I VALUE atribute. Text Area TEXT AREA sluţi za unos velikih tekstova, pa zato polje koje se iscrta u brauzeru za pisanje teksta moţe biti i u nekoliko redova, što nije sluĉaj na primer sa TEXT BOX - om. Za razliku od većine elemenata forme TEXT AREA ima poĉetni i krajnji tag. Izmedju poĉetnog i krajnjeg taga TEXT AREA - je se upisuje eventualni defaultni tekst, a ako ga nema onda ostaje prazno. Forma sa text area-om bi izgledala ovako: <form name="forma4"> Napiši svoju priču:<br> <textarea cols="40" rows="5" name="velikitekst"> Ovo je default tekst a ako nema potrebe za njim ništa ne pišete </textarea><br> <input type="submit" value="posalji" name="submitdugme"><br> <input type="reset" value="ponisti"> </form> Napińi svoju priĉu: Posalji Ponisti [52]

53 Dakle tag je TEXAREA. Ovaj tag obavezno mora da sadrţi atribut NAME u koji se smešta naziv. Nema VALUE atribut. Moţe (a i ne mora) se definisati koliko će se znaka ispisati po horizontali atributom COLS. U našem sluĉaju je 40 znaka. Takodje moţe se definisati (a i ne mora) koliko će se redova prikazivati dok pišemo u polju. U našem sluĉaju je 5. E sad ako mi pišemo tekst koji će zauzeti veći prostor od iscrtanog kojeg definišu COLS i ROWS onda će se pojaviti vertikalni klizaĉ koji će nam omogućiti da pratimo ceo tekst. U nekim sluĉajevima u zavisnosti kako podesimo atribut WRAP moţe se pojaviti i horizontalni klizaĉ. Naime, tekst koji upisujemo u iscrtani okvir dok pišemo moţe se automatski prebaciti u novi red kad naidje na ivicu prozorĉića, ali moţe i da se nastavi sa pisanjem sve dok mi ne kliknemo enter kad ţelimo preći u novi red. Obzirom da se ne lomi pojaviće se horizontalni klizaĉ. Ali bez obzira na to koja od ova dva naĉina pisanja u prozorĉiću izaberemo moţe postojati opcija da se naš tekst posle submitovanja prenese samo u jednom redu, ali moţe i baš onako kako smo ga i pisali. Te opcije odredjuje argument WRAP u TEXAREA tagu. Wrap moţe imati jednu od sledećih vrednosti: OFF, VIRTUAL i PHYSICAL. PHYSICAL je defaultna vrednost (kad se i ne koristi wrap) i definiše automatsko lomljenje teksta prilikom pisanja, ali takav tekst će biti i poslat. VIRTUAL će lomiti ali će tekst biti poslat kao da smo ga pisali samo u jednom redu. OFF definiše da se tekst u prozorĉiću ne lom, a i poslaće se baš onakav tekst kako ga napišemo. Radio Button RADIO BUTTON sluţi da posetilac izabere ĉekiranjem samo jednu od nekoliko ponudjenih opcija. Evo kompletnog koda i sve će biti jasnije: <form name="forma5"> <table border="0" cellpadding="0" cellspacing="0" width="315" height="93"> <tr> <td valign="top" align="center"> <!-- POČETAK prvog tipa opcija --> <b>ko ti je najbolji drug?</b><br> <input type=radio name="drug" value="pera" CHECKED> PERA<br> <input type=radio name="drug" value="mika"> MIKA<br> <input type=radio name="drug" value="aca"> ACA<br> <!-- KRAJ prvog tipa opcija --> </td> <td valign="top" align="center"> <b>koja ti je boja kose?</b><br> <!-- POČETAK drugog tipa opcija --> <input type=radio name="kosa" value="bela"> BELA<br> <input type=radio name="kosa" value="crna" CHECKED> CRNA<br> <input type=radio name="kosa" value="plava"> PLAVA<br> <!-- KRAJ drugog tipa opcija --> </td> </tr> </table> <input type="submit" value="submit" name="b1"> <input type="reset" value="reset" name="b2"> </form> Ko ti je najbolji drug? PERA MIKA ACA Koja ti je boja kose? BELA CRNA PLAVA [53]

54 Submit Reset Osnovni tag je kao što vidimo <input type=radio>. Takodje vidimo u kodu da svaka ponudjena opcija ima svoj RADIO tag. Svaki RADIO tag obavezno mora sadrţati NAME i VALUE atribute. U istoj formi u primeru su ponudjena dva tipa opcija. Prvi tip opcija je koje najbolji drug, a drugi tip opcija je koju boju kose ima posetilac. U svaka od ta dva tipa opcija bira se ĉekiranjem jedna opcija od ponudjenih tri. Na primer po defaultu smo stavili da je PERA najbolji drug, ali ako ĉekiramo MIKA onda se automatski briše ĉekiranje PERE. U NAME atributu svih RADIO tagova koji se odnose na jedan tip opcija pišete obavezno istu vrednost. Za opcije na pitanje koje najbolji drug za NAME atribut svih RADIO tagova izabrali smo za vrednostdrug. A za opcije na pitanje koja je boja kose za NAME atribut svih RADIO tagova izabrali smo vrednost kosa. Vrednosti VALUE atributa svih RADIO tagova unutar istog tipa opcija mora da se naravno medjusobno razlikuju kako bi se opcije programski razlikovale.. CHECKED je atribut RADIO taga bez vrednosti, a definiše defaultno ĉekiranje koja se automatski pojavi. Naravno CHECKED ako ga već imamo onda u jednom tipu opcija moţe da postoji najviše jedan CHECKED. Ako pogrešimo i stavimo na više mesta u jednom tipu opcija onda će brauzer konstatovati onaj CHECKED kojeg zadnjeg primeti. A ako ţelimo da ne bude automatskog ĉekiranja onda svuda izbacimo CHECKED. A vezano za forme u ovom primeru moţete primetiti da smo koristili tabelu za grafiĉko organizovanje pojedinih elemenata forme. Znaĉi to je ono što sam pisao da unutar forme moţete pisati po potrebi sve moguće tagove koje smo nauĉili. Jedino ne moţe se umetati forma unutar druge forme!! Na primer tabela u tabeli moţe ali ne i forma u formi. Check Box CHECK BOX ima cilj odabiranja ponudjenih opcija ĉekiranjem sliĉno kao i RADIO BUTTON ali stom razlikom da omogućava ĉekiranje jedne ili više, pa i svih ponudjenih opcija. Osnovni tag je <input type="checkbox">. A evo forme koja doĉarava korišćenje ovog elementa forme: <form name="forma6"> <b>koje sve mlečne proizvode voliš?</b><br> <input type="checkbox" name="opcija1" value="mleko" CHECKED> MLEKO<br> <input type="checkbox" name="opcija2" value="maslac"> MASLAC<br> <input type="checkbox" name="opcija3" value="sir"checked> SIR<br> <input type="submit" value="posalji" name="submitdugme"><br> <input type="reset" value="ponisti"> </form> Koje sve mlečne proizvode voliš? MLEKO MASLAC SIR Posalji [54]

55 Ponisti Takodje i ovde vidimo u kodu da svaka ponudjena opcija ima svoj CHECKBOX tag. Svaki CHECKBOX tag obavezno mora sadrţati NAME i VALUE atribute. Svi NAME atributi u svim CHECKBOX tagovima moraju imati razliĉitu vrednost. Zato i nema smisla postojanja više tipova opcija kao u sluĉaju RADIO taga jer svaki CHECKBOX tag ima drugaĉiju vrednost u NAME tagu. Da pogrešno ne shvatite, moţete vi praviti više tipova opcija što se tiĉe posetilaca ali programski postoji jedan tip opcija za jednu formu. Vrednosti VALUE atributa svih CHECKBOX tagova se naravno moraju medjusobno razlikovati kako bi se opcije i programski razlikovale. CHECKED je atribut i CHECKBOX taga kao i kod RADIO taga ali za razliku od RADIO taga gde se stavlja samo jedan CHECKED atribut u jednom tipu opcija, ovde moţete stavljati koliko god hoćete, pa i sve opcije ako ţelita mogu biti po defaultu ĉekirane. Drop down menu DROP-DOWN element forme ima istu funkciju izbora jedne opcije od ponudjenih kao što to omogućava RADIO BUTTON. Medjutim razlika je u broju ponudjenih opcija. Radio button elementom moţemo ponuditi nekoliko opcija, dok dropdown menu elementom moţemo ponuditi veliki broj opcija, na primer dvadeset ili ĉak i preko sto. Mi moţemo preko RADIO tag ponuditi i trideset opcija ali zamislite tu situaciju, to bi bilo jako ruţno na stranici. Daću sad kod a zatim objasniti: <form name="forma8"> <b>ko je najbolji tvoj drug?</b><br> <select size="1" name="drug"> <option value="sasa" selected>sasa</option> <option value="pera">pera</option> <option value="drago">drago</option> <option value="tuta">tuta</option> <option value="giga">giga</option> <option value="mika">mika</option> </select><br> <input type="submit" value="posalji" name="submitdugme"><br> <input type="reset" value="ponisti"> </form> Ko je najbolji tvoj drug? SASA Posalji Ponisti Osnovni tag je <select></select>. Kao što vidimo SELECT tag ima poĉetni i krajnji tag, a izmedju se nalaze opcije koje se definišu pomoću OPTION taga, koji takodje ima poĉetni i krajnji tag:<option></option>. [55]

56 Imenovanje drop-down menija je obavezno a NAME atribut se nalazi u SELECT tagu. Takodje je i VALUE obavezan argument ali on se nalazi u OPTION tagu. Naravno vrednosti u VALUE atributu se medjusobno razlikuju. U OPTION tagu moţe se naći i SELECTED atribut (koji nema vrednost) koji odredjuje koja opcija će biti na prvom mestu. Ako selected nije postavljen u ni jednom OPTION tagu onda je na prvom mestu ona opcija koja je na prvom mestu i u kodu. Ako ne izaberemo prilikom popunjavanja forme ništa onda forma šalje onu vrednost iz taga OPTION u kome se nalazi atribut SELECTED. Ako nigde ne figuriše SELECTED onda forma šalje vrednost iz prvog taga u kodu. Znaĉi u ovom sluĉaju nije moguće poslati prazan string kao što moţe to RADIO BUTTON ukoliko nigde nije postavljen CHECKED atribut. Medjutim ako imamo potrebe za praznim stringom u sluĉaju da posetilac ništa ne izabere moţemo napraviti jedan ovakav OPTION tag: <option value=""></option> i staviti ga na prvom mestu u kodu, stim da nakon toga nigde nesme da se nadje SELECTED argument. E sad postoje dva argumenta koji se mogu naći u SELECTED tagu koji su ĉisto grafiĉke prirode. Naime po defaultu svi brauzeri iscrtavaju prozorĉe u kome se ispisuje (vidi) samo jedna opcija a sa desne strane se nalazi strelica (taĉnije trouglić koji je okrenut na dole). E sad ako hoćemo na primer da se vide dve, tri ili koliko god ţelimo opcije a ne samo jedna onda SELECT tag stavimo SIZE atribut ovako: <select SIZE="3" name="drug">. U ovom sluĉaju će se videti SASA, ali i PERA i DRAGO iz prve. Naravno ako kliknemo na strelicu onda će se otvoriti neposredno ispod ili iznad prozorĉe sa ostalim opcijama. A ukoliko imamo mnogo opcija onda će se u prozorĉe pojaviti sa desne strane i klizaĉ kojim moţemo videti sve opcije. E sad ukoliko ţelimo da nam se odma pojavi to prozorĉe sa eventualnim klizaĉem bez prethodnog kliktanja strelice onda pišemo atribut MULTIPLE (koji nema vrednost). File upload File upload je element forme koji se koristi za ubacivanje fajlova, na primer slika, video klipova, tekst fajlova, i ostalih tipova fajlova. Daću kod pa ću onda objasniti: <form method="post" action="obrada.php" enctype="multipart/form-data" accept="image/gif, image/jpeg"> <input type="hidden" name="max_file_size" value="20480"> UBACI SLIKU: <input type="file" size="25" name="slika"><br> <input type="submit" value="posalji" name="submitdugme"><br> <input type="reset" value="ponisti"> </form> UBACI SLIKU: Posalji Ponisti Form tag što se tiĉe ubacivanja fajlova UVEK mora sadrţati method="post", enctype="multipart/form-data" i action sa adresom fajla u kome se obradjuje uneti fajl. ACCEPT atribut moţe ali i ne mora da se ubacuje, i nećemo ga objašnjavati jer smo to već uradili kad smo objašnjavali FORM tag. Uvek ali uvek u formi za upload fajlova morate staviti HIDDEN tag ako prosledjujete podatke PHP skripti. U hidden tag obavezno moramo staviti atribut name="max_file_size" i value="20480".value atribut odredjuje maksimalnu veliĉinu fajla koji moţe da se ubaci. Naravno to je da se server ne opterećuje ali nikako to ne shvatite kao zaštitu od prevelikog unosa. Zaţtitu morate napraviti na strani servera u skripti za obradu podataka. U ovom našem sluĉaju maksimalna veliĉina fajla je 20 Kb a dobija se 20 * 1024 = Naravno ako ţelimo veću sliku u bajtima pišemo kako nam odgovara, ili manju. [56]

57 E sad konaĉno o FILE UPLOAD tagu. Znaĉi osnovni tag se piše <input type="file">. FILE tag nema VALUE atribut jer je vrednost u stvari sam fajl koji se ubacuje, a NAME vrednost odredjujemo kako nama odgovara. U FILE UPLOAD tag moţemo ubaciti i SIZE atribut koji definiše veliĉinu prozorĉića. CSS Kao prvo i osnovno, da bi uĉenje CSS -a imalo nekog smisla morate znati HTML. CSS (Cascading Style Sheets) je jezik formatiranja pomoću koga definišemo izgled internet strana. Kad se pojavio internet jedino je HTML definisao kompletan izgled, strukturu i sadrţaj web stranica. Kada su u HTML 3.2 dodati tagovi poput <font> poĉinju poteškoće za web programere, jer HTML dokumenti poĉinju bivati sve veći, i vrlo je teško bilo snalaziti se u njima. Da bi se uprostio takav HTML dokument od verzije HTML 4.0 uveden je CSS. Sa uvodjenjem CSS web dokumenti se dele na: 1. HTML deo koji definiše sadrţaj internet stranice, 2. CSS deo koji definiše izgled i strukturu internet stranice (kao na primer boja slova, pozadine, margine i tako dalje). Šta je to magiĉno postignuto u CSS što uprošćava web programiranje? Kao što znamo da bi definisali na primer boju teksta moramo upotrebiti tag <font> sa atributom COLOR. E sad ako imamo 100 ili 1000 stranica onda to znaĉi da na svaku stranu moramo upotrebiti tag FONT kako bi smo definisali boju. Znaţi 1000 stranica daje 1000 upotrebe taga FONT sa svim parametrima koje on poseduje. Na svakoj stranici pored <font> taga postoje u proseku još 100 taga koji definišu izgled tablica, margina itd itd, što daje preko tagova. E sad to sve pomnoţimo u proseku sa oko 20 znaka kojim je ispisan svaki tag sa svojim atributima, što daje preko znaka. To je negde oko 200 Kb. To je moţda ĉak i 10% od samog tekstualnog sadrţaja web sajta. E sad tu stupa na scenu CSS da nam olakša i pisanje stranica ali što je još vaţnije da nam štedi prostor na hostu. Naime, sve te stilske osobine tekstova, slika, pozadina, tabela itd. definišemo samo jednom u fajlu pod nazivom na primer stil.css. Taj CSS fajl zatim ubacujemo u HEAD sekciju svakog HTML dokumenta kao link. Sve to rezultira definisanju izgleda web strana samo na jednom mestu u tom CSS fajlu. Taj CSS fajl moţe se pozivati neograniĉen broj puta. Medjutim CSS ima daleko veće dizajnerske mogućnosti od ĉistog HTML-a. Zato je danas CSS gotovo nezamenjljiv u dizajniranju internet stranica. CSS osnove U ovom delu CSS osnove objasnićemo CSS sintaksu, umetanje CSS fajla i koda unutar HTML koda. Sama sintaksa je vrlo uprošćena u odnosu na HTML sintaksu u smislu manjeg korišćenja znakova za sliĉne vizuelne efekte. Pa da krenemo :) CSS sintaksa i umetanje CSS fajla CSS sintaksa se sastoji od jednog ili više opisa. Svaki opis se sastoji od tri elementa: [57]

58 Selektor Atributi Vrednosti Sintaksa svakog opisa ima sledeću opštu šemu: selektor1,selektor2,...,.imeklase1,...{svojstvo1: vrednost1; svojstvo2: vrednost2;... Obiĉno u jedan opis figuriše jedan selektor, ali ako više selektora imaju ista svojstva onda moţemo i njih dodati, samo se odvoje zarezom (moţe i klase itd) - to se naziva grupisanje selektora. Da nastavimo objašnjenje opšte šeme opisa. Znaĉi navede se selektor (ili više njih odvojenih zarezom) a u vitiĉastim zagradama se nabrajaju atributi koji se medjusobno odvajaju taĉka zarezom. Vrednosti atributa se dodeljuju ne znakom jednako kao što je bio sluĉaj u HTML već se pišu dve taĉke izmedju atributa i njegove vrednosti. E sad ovde su šematski prikazane dva svojstva ali naravno moţe koliko god nam je potrebno. Ajde da vidimo konkretan primer pa će sve biti jasno: p {color: red; text-align: center ili ako je selektor sa mnogo atributa moše se pisati i ovako: p{ color: red; text-align: center; U gornjem kodu smo definisali da tekst u pasusima (<p></p>) bude u crvenoj boji, i centriran. Znaĉi, iako u HTML kodovima nećemo pisati u <p> tagovima atribute za boju i poloţaj tekstova svi tekstovi će ipak biti u crvenoj boji i centrirani. Ajde to i da dokaţemo, a ujedno i da vidimo kako se to umeću CSS fajlovi. Znaĉ otvorimo notepad i prepišemo gornji kod u njemu, i taj fajl imenujemo sa stil.css. Otvorimo novi notepad i u njemu napravimo HTML stranicu strana.htm sledećeg sadrţaja: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <link rel="stylesheet" type="text/css" href="stil.css"> <title>css edukacija</title> </head> <body> <p>moja prva CSS lekcija</p> </body> </html> Na poĉetku svakog HTML dokumenta (ĉak i ispred <html> taga) gde ubacujete CSS stilove steknite naviku da uvek pišete!doctype tag u formatu kao što smo mi u gornjem kodu napisali. Idemo dalje. Kad otvorimo u brauzeru fajl strana.htm dobijemo tekst "Moja prva CSS lekcija" u crvenoj boji ispisan po sredini. Znaĉi, iako nismo direktno u HTML dokumentu u <p> tagu definisali boju i poloţaj teksta, brauzer je ispoštovao naredbe fajla stil.css. CSS fajl kao što vidimo umeće se u HTML dokument u HEAD delu i to pomoću taga <link> i atributa REL, TYPE i HREF. Uvek pišete REL i TYPE atribute kao u gornjem primeru zajedno sa njihovim vrednostima, a u HREF atributu pišete lokaciju CSS fajla. Medjutim CSS kod ne mora uvek da se umeće. Naime, moţemo CSS kod direktno pisati u HTML HEAD delu ovako: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> [58]

59 <style type="text/css"> p {color: red; text-align: center </style> <title>css edukacija</title> </head> <body> <p>moja prva CSS lekcija</p> </body> </html> Rezultat će biti isti. I ovde imamo <style> tag ali samo sa TYPE atributom U ovom sluĉaju postoji i zatvarajući tag </style>. Postoji i mogućnost umetanja CSS stilova i u samim HTML tagovima, a efekat će biti isti. Na primer moţemo pisati i ovako: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <title>css edukacija</title> </head> <body> <p style="color:red; text-align:center">moja prva CSS lekcija</p> </body> </html> CSS podrţava i komentare, koji izgledaju kao u programskom jeziku C, dakle navodeći se izmeċu znakova /* i */, ali samo unutar CSS koda. CSS selektor Razlikujemo tri tipa selektora: navodeći ime HTML taga, navodeći klasu elemenata i, navodeći identifikacionu vrednost (ID) elementa. Ime taga Kad definišemo navodeći ime HTML taga onda će opis uticati na sve elemente u dokumentu koji su definisani takvim imenom taga. To izgleda ovako: body { svojstvo: vrednost;... Medjutim nije na odmet napomenuti vrlo bitno CSS pravilo. Naime, moţemo mi definisati da svi pasusi budu na primer u crvenoj boji i to na svim stranicama, ali ako recimo ţelimo baš neki konkretan pasus da bude u plavoj boji onda moţemo definisati i taj konkretan pasus, na primer preko ID (malo ispod objasnićemo ID). CSS klasa CSS klasa se pravi tako što se stavi taĉka pa odma napiše neko ime na primer ImeKlase, a ostalo je isto: [59]

60 .ImeKlase { svojstvo: vrednost;... I kasnije u HTML kodu tu klasu sa tim imenom moţemo stavljati u razliĉitim HTML tagovima kao atribute, a osobine će biti one koje su definisane u klasi. Evo primera: <p class="imeklase">...</p> <div class="imeklase">...</div>... Medjutim ako ţelimo da nam samo za paragrafe vaţe svojstva klase onda pišemo: p.imeklase { svojstvo: vrednost;... Kasnije u HTML kodu u paragrafima ne moramo navoditi atribut class jer će automatski da se podrazumeva. Obratite peaţnju da upravo to razlikuje klase od identifikacione elemente koje ćemo odma ispod prouĉiti. Medjutim pomoću klasa mogu da se ugnjeţċuju selektori, kao i praviti pseudo klase, a to se ne moţe postići identifikacionim elementima takodje. Identifikacioni element Identifikacioni element se piše sa id (ili velikim slovima ID) u HTML kodu unutar tagova kao atribut. Identifikacioni element se definiše samo jednom unutar CSS koda, znaĉi mora biti jedinstven unutar CSS koda. To jest moţe postojati samo jedan identifikacioni element sa odreċenom identifikacionom vrednošću. Identifikaciona vrednost (u našem sluĉaju ispod smo je imenovali sa "prvi") se imenuje sledećim pravilima: Vrednost mora poĉeti slovom (moţe i brojem ili da bude samo broj, ali mozilla firefox brauzer ne podrţava takvo imenovanje). Nakon poĉetnog slova mogu da slede brojevi, slova, ili razne kombinacije slova sa brojevima ili znacima kao što su: Znak minus "-", donja crta "_", dve taĉke ":", i taĉka "." Vrednosti su osetljive na mala i velika slova. Ajde da definišemo jedan identifikacioni element sa vrednošću na primer "prvi": #prvi {color: red; text-align: center Kao što vidimo CSS identifikacioni element se definiše tako što prvo pišemo znak tarabu, pa onda vrednost identifikacionog elementa i zatim u vitiĉastim zagradama pišemo svojstva. E sad, unutar HTML tagova, kao što smo već pisali, identifikacioni element shvatite kao atribut, odnosno pišemo: <p ID="prvi">Moja prva CSS lekcija</p> A moţe se ubaciti i u nekom drugom tagu u istom HTML dokumentu: <div id="prvi">moja prva CSS lekcija</div> Ovaj će, dakle, opis uticati na sve HTML tagove koji imaju id="prvi". CSS atributi, vrednosti i jedinice mere [60]

61 Neke od CSS atributa moţemo kategorisati u sledeće grupe: definicija pozadine elementa ivica okvir prikaz dimenzije font generisani sadrţaj margine unutrašnji prazan prostor pozicija izgled pripadajućeg teksta Vrednosti atributa mogu biti: predefinisane kljuĉne reĉi brojevne vrednosti Primeri predefinisanih kljuĉnih reĉi su recimo "scroll" - da se kreće uvek zajedno sa sadrţajem elementa, ili "fixed" - da stoji uvek na istom mestu bez obzira na kretanje sadrţaja. Brojevne vrednosti se mogu zadavati na nekoliko naĉina: zadajući samo brojevnu vrednost zadajući brojevnu vrednost navodeći i jedinicu veliĉine (px, em, pt,...) Ako zadajemo samo brojevnu vrednost, imamo mogućnost da je pišemo na dva naĉina: u dekadnom sistemu u heksadekadnom sistemu (#a4fde3), a ovaj sistem se najviše koristi u definiciji boje OdreĊena CSS svojstva kao što smo napisali, imaju vrednost u odredjenim jedinicama mere. CSS jedinice mere su: px - piksel, oznaĉava broj taĉkica na ekranu pt - point, najĉešće se koristi za zadavanje veliĉina slova (ovo je jedinica mere koja odgovara veliĉini slova u Word-u). Inaĉe, 1pt = 1/72 inĉa. pc - pika, jedinica mere koja se reċe zadaje. 1pc = 12pt. mm, cm, in - milimetri, centimetri ili inĉi se retko zadaju za stilove koji se prikazuju na ekranu, ali su korisni kada se dokument priprema za štampanje % - procenti predstavljaju relativnu jedinicu mere. Kada se zada npr. veliĉina nekog bloka u procentima, njegova veliĉina će biti podešena kao npr. 60% od rezolucije ekrana ili bloka u kome se to što se definiše nalazi. em - relativna mera u odnosu na trenutnu veliĉinu fonta. Ako je font veliĉine 12pt, onda će 2em predstavljati veliĉinu od 24pt. ex - još jedna relativna mera u odnosu na veliĉinu slova, 1ex je otprilike jednak polovini veliĉine fonta. U praksi se najĉešće zadaju px, pt ili procenti. CSS stil U ovom delu ćemo nauĉiti već konkretne stvari za kreiranje efikasnog dizajna sajta. Prouĉićemo razne CSS atribute sa njihovim svim mogućim vrednostima. CSS stilove ćemo podeliti na stilove za pozadine, za fontove, tekst, tekstualne liste i linkove. Pa da krenemo :) [61]

62 CSS pozadina i boje Da se potsetimo, u HTML pozadina moţe se definisati za celu stranu, zatim u TABLE, TD i TR tagovima tabela, itd. Pozadina moţe biti u boji ili u slici. CSS uvodi još neke nove atribute vezane za pozadinu, a samim tim i još neke mogućnosti i efekte. Na primer u CSS moţemo postaviti pozadinu i u tekstualnoj liniji. Zapravo CSS moţe postaviti pozadinu takoreći gde god ţelimo, odnosno gde postoji vizuelna mogućnost. U CSS se pozadine definišu sledećim atributima: background-color - boja pozadine. Boja se moţe zadati slovno na primer crvena boja kao red, u heksadecimalnim zapisu kao u HTML na primer #FFFFFF, a moţe i u decimalnom formaturgb(255,255,0). background-image - definiše sliku za pozadinu. Putanja slike se zadaje u obliku: "url(putanjadoslike.gif)" background-repeat - definiše da li će se slika u pozadini ponavljati. Vrednosti: o repeat - klasiĉno ispunjava slika površinu pozadine nadovezivanjem dok je ne ispuni, o no-repeat - definiše da slika ne treba da ispuni celu površinu pozadine ukoliko je ne pokriva svojom veliĉinom, o repeat-x - slika se ponavlja samo vodoravno dok ne ipuni u jednoj "liniji" površinu pozadine, o repeat-y - isto kao sa X samo u ovom sluĉaju se odnosi na vertikalu. background-attachment - definiše kako će se slika u pozadini ponašati pri skrolovanju. Vrednosti: scroll - prati skrolovanje i, fixed fiksirana i ne prati skrolovanje. background-position - definiše poziciju slike. Vrednosti mogu biti kombinacije unapred definisanih reĉi: o top left - znaĉi da će se pozadina pojaviti bez ponavljanja samo jednom u gornjem do vrha levom uglu (baš u vrh bez imalo razmaka), o top center - u gornjem centralnom delu, o top right - u gornjem desnom delu, o center left - u centralnom delu po vertikali ali po horizontali u levom delu, o center center - u centralnom delu ali i u centru po horizontali, o center right - u centralnom delu ali uz desnu ivicu o bottom left - u donjem delu skroz i to u levom delu po horizontali, o bottom center - u donjem delu po vertikali a po horizontali u centru, o bottom right - u donjem delu po vertikali a u desnom delu po horizontali, o x% y% - daju se x i y koordinate u procentima od visine i širine ekranske rezolucije ako je upitanju pozadina cele strane, ili procentualno u odnosu na visinu i širinu prostora u koji se smešta pozadina. o xpos ypos - fiksno se definiše poloţaj najĉešće u pikselima (a moţe i u mm, cm, pc, ex, itd) po vertikali i horizontali gde će se pozadinska slika pojaviti Ajde sad da vidimo kako se atributi primenjuju u praksi kroz par primera. Poĉnimo od background-color: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #w1 {background-color: #c5def7; </style> </head> <body id=w1> <p>prvi tekst</p> <p>drugi tekst</p> </body></html> A rezultat će biti pozadina u boji koju definiše heksadecimalni zapis boje #c5def7. Ako pak ţelimo da nam pozadina bude slikovna onda to radimo pomoću sledećeg kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [62]

63 <html><head> <style type="text/css"> #w2 { background-image: url(csspozadina.gif); </style> </head> <body id=w2> <p>prvi tekst</p> <p>drugi tekst</p> </body></html> E sad ako ţelimo da nam slika pozadine ne ispunjava celu površinu već samo onu kolika je i sama slika pišemo sledeći kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #w3 { background-image: url(csspozadina.gif); background-repeat: no-repeat; </style> </head> <body id=w3> <p>prvi tekst</p> <p>drugi tekst</p> </body></html> A rezultat: Ovde vidimo da se slika u pozadini pojavila samo jednom bez ponavljanja. To smo uspeli zbog parametra backgroundrepeat i to zato što je njegova vrednost no-repeat. Ako je vrednost repeatonda se ponavlja po celoj površini kao što je to sluĉaj u ĉistom HTML-u. A ako stavimo za vrednostrepeat-x prostor će se puniti slikom samo po jednoj horizontali na vrhu prostora, a ako je repeat-yonda po jednoj vertikali uz levu ivicu prostora. A u kombinaciji sa backgroundposition moţemo odrediti i u koji taĉno deo prostora ţelimo da ispunimo, itd. Probajte i veţbajte sve mogućnosti. Naravno za definisanje jednog selektora moţemo koristiti više atributa i to u raznim kombinacijama, ali ne samo recimo bacground atribute već i sve moguće ako su interesantni za neki efekat. Znaĉi ovde smo atribute podelili u [63]

64 grupe za pozadinu, za fontove itd ali to samo da bi vi lakše shvatili, ali za definisanje selektora moţemo upotrebljavati sve kombinacije svih mogućih CSS atributa ako daju odredjene efekte. Upravo to je jedan od razlog koji daje velike mogućnosti CSS-u za dizajniranje stranica. Zato ajde da vidimo našta se taĉno misli vezano za atribut background-attachment, a ujedno ajde da vidimo kako to CSS moţe da umeće pozadine gde god ţelimo, što nije bio sluĉaj sa ĉistim HTML-om. Primera radi ajde da umetnemo pozadinu u TEXT AREI: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #w4 { background-image: url(csspozadina.gif); background-attachment: fixed; </style> </head> <body> <form> <textarea rows="6" cols="51" id="w4"> Neki tekstttttttt tttttttt tggggggggggg ggggggg ggggggggffff ffffffff fttttttttt ttttttttt tttttttt tggggggggggg ggggggg ggggggggffff ffffffff fttttttttt ttttttttt tttttttt tggggggggggg ggggggg ggggggggffff ffffffff fttttttttt ttttttttt ttttttggggggg gffffffff ffffggggg ggggghhhhh hhhhhh hhhhhhhh hhhhhffff ffffff ffffffttttt tttttttttttt gfffffffff ffffff ghhhhhhh hhhhhhh hhhhfffff fffffff ftttttttt nnnnnnnn nnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnn nnnnnnnnn < /textarea></form> </body></html> A rezultat: Dakle kad stavimo background-attachment: fixed; imamo pozadinu koja se iako pomeramo klizaĉ ne pomera jer je fiksirana. Pomerajte gornji klizaĉ i vdećete CSS i font Neki FONT atributi imaju za vrednosti predefinisane kljuĉne reĉi, a nekima se vrednost zadaje kao numeriĉka vrednost. Numeriĉke vrednosti su praćene mernom jedinicom (px, pt, %...). Jedinica se navodi bez razmaka, npr: "15px". Imamo sledeće atribute fonta:. font-family - naziv fonta, zadaje se unutar navodnika ako font ima razmake. Moguće je zadati nekoliko fontova odvojenih zarezom, pri ĉemu web ĉitaĉ pokušava da uĉita prvi, pa ako ne uspe drugi, itd. Kao vrednost fontfamiliy mogu da se zadaju na primer vrste slova kao što jearial, Times New Roman, Century, itd. Medjutim osim vrste slova mogu se zadavati i varijacije izabrane vrste slova: serif, sansserif, cursive, fantasy, monospace. Detaljnije videćemo u primeru. [64]

65 font-size - veliĉina fonta, zadaje se na više naĉina. Postoje i ovde kao vrednosti predefinisane kljuĉne reĉi, iako se reċe zadaju: o xx-small o x-small o small o medium o large o x-large o xx-large o smaller o larger Ali kao najĉešća vrednost zadaje se broj koji definiše fiksnu veliĉinu slova u pikselima, milimetrima, santimetrima i ostalim CSS veliĉinama. Moguće je i procentualno definisanje veliĉine fonta (%) - koji definiše procentualno veliĉinu slova u odnosu na zadatu veliĉinu okolnih slova. Mi nećemo moći sve prikazati primerima ali nije loše Vi da izvrtite sve varijante jer tako ćete dobiti predstavu o kakvim veliĉinama slova se radi, a ujedno i da stiĉete rutinu u pisanju CSS. font-style - definiše dodatno oblik slova u smislu normalnog ili iskošenog itd. Vrednosti:normal, italic, oblique. font-variant - ispis slova. Vrednosti: normal, small-caps. font-weight - obiĉna ili masna slova (debljina slova). Vrednosti: normal, bold, bolder, lighter,100, 200,..., 900. Ajde da vidimo neke varijante svih atributa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #f1 {font-family: "Times New Roman"; #f2 {font-family: "Times New Roman"; font-family: cursive; #f3 {font-family: Arial; #f4 {font-family: Arial; font-family: monospace; #f5 {font-family: Arial; font-family: monospace; font-size: x-small; #f6 {font-family: Arial; font-style: italic; #f7 {font-family: Arial; font-variant: small-caps; #f8 {font-family: Arial; font-weight: bolder; color: blue; background-image: url(csspozadina.gif); </style></head><body> <p id=f1>slova prva varijanta samo Times New Roman</p> <div id=f2>slova druga varijanta Times New Roman sa cursive</div> <div id=f3>treća a font Arial. <span id=f4>četvrta font Arial i monospace.</span></div> <div id=f5>peta arial, monospace plus veličina x-small</div> <div id=f6>šesta arial, a stil italic</div> <div id=f7>sedma arial, a font variant small-caps</div> <div id=f8>osma arial, a font weight bolder</div> </body></html> A rezultat: SLOVA prva varijanta samo Times New Roman SLOVA druga varijanta Times New Roman sa cursive Treća a font Arial. Četvrta font Arial i monospace. [65]

66 Peta arial, monospace plus veličina x-small Šesta arial, a stil italic SEDMA ARIAL, A FONT VARIANT SMALL-CAPS Osma arial, a font weight bolder U gornjem kodu smo koristili sve atribute sa nekim njihovim varijantama. Mislim da neko posebno objašnjenje nije potrebno. CSS tekst atributi Ajde prvo da damo sve atributa sa njihovim vrednostima pa da ih objasnimo zatim i primerima. direction - Definiše smer pisanja teksta. Vrednosti su: ltr - sa leva na desno, što je i po defaultu; rtl - sa desna na levo. Ovaj atribut je iz CSS 2 specifikacije. line-height - Definiše udaljenost izmedju redova pisanja. Vrednosti mogu biti: o normal - Rastojanje po defaultu, o broj - bilo koji celi broj koji definiše rastojanje tako što je ono jednako proizvodu tog broja i trenutne razdaljine izmedju redova pisanja, o rastojanje u px, pt, cm i ostalim CSS jedinicama - Rastojanje izmedju redova pisanja se definiše fiksno u datim jedinicama, o rastojanje u % - Rastojanje se odredjuje procentualno u odnosu na veliĉinu slova. letter-spacing - Definiše razmak izmedju znakova u tekstu. Veliĉina moţe biti: normal - koja je po defaultu i; razmak u px (pikselima) ili u drugim CSS jedinicama mere. Negativne vrednosti su dozvoljene. word-spacing - Definiše duţinu razmaka izmedju reĉi u reĉenicama. Vrednost moţe biti upikselima ali i ostalim CSS jedinicama mere; normal - onako kako je po defaultu. text-align - Rasporedjuje tekst u prostoru po horizontali. Vrednosti su: o left - pomera tekst uz levu ivicu prostora, o right - uz desnu ivicu, o center - postavlja tekst u centralnom delu prostora u datoj horizontali, o justify - poravnava tekst sa svih strana da izgleda kao neki novinarski ĉlanak (svi redovi su iste duţine). vertical-align - Rasporedjuje tekst u odnosu na objekat. Vrednosti su: o duţina u CSS jedinicama za duţinu. Podiţe ili spušta za odredjen broj recimo piksela. I negativne vrednosti su dozvoljene. o % - Podiţe ili spušta tekst u odnosu na gornju ivicu objekta za vrednost koja je jednaka procentualnom u odnosu na veliĉinu objkta po vertikali. Moguća je i negativna vrednost. o baseline o sub [66]

67 o super o top o text-top o middle o bottom o text-bottom text-decoration - Vrši dekoraciju teksta. Vrednosti su: o none - bez dekoracije što je i po defaultu, o underline - podvlaĉi tekst (iscrtava liniju ispod teksta), o overline - nadvlaĉi tekst (crta liniju iznad teksta), o line-through - precrtava tekst (crta liniju po sredini teksta), o blink - definiše trepćući tekst (naizmeniĉno se tekst gubi i pojavljuje ali nije podrţano od svih brauzera). text-indent - Uvlaĉi tekst u prvom redu deksta. Vrednosti: rastojanje u px, pt, cm i ostalim CSS jedinicama; rastojanje u % u odnosu na širinu prostora u kome se ispisuje tekst. text-shadow - Omogućava stvaranje tekstualne senke, to jest kopira tekst i izvlaĉi malo naviše ili naniţe i pri tome je tekst malo zamagljen. Na ţalost za sada ovaj atribut ne podrţava explorer. Vrednosti su: none- kada nema senke a to je po defaultu, kad ima vrednost onda ima4 nazovimo podvrednosti koje idu uvek zajedno i definišu vrednost. Podvrednosti su: o boja senke koja moţe biti zapisana kao reĉ, heksadecimalno ili decimalno; o duţina pomeraja po horizontali u CSS jedinicama duţine (na primer 20px znaĉi desno od poĉetka teksta a ako pišemo -20px onda ispred poĉetka teksta kome se pravi senka); o duţina pomeraja senke po vertikali u odnosu na tekst u jedinicama duţine (na primer ako je 20px onda ide ispod teksta za 20 piksela a ako je -20px onda iznad teksta); o broj u CSS jedinicama duţine. Ako je nula onda nema zamagljivanja. Na primer po mom ukusu je 12px lepo zamagljivanje. Zamagliti tekst na primer 2px znaĉi toliko tekst razvući uzrokujući blur efekt. Nemojte postaviti ovu vrednost preveliku jer shadow tekst brzo postaje neĉitak. text-transform - Definiše da li su mala slova u tekstu ili velika. Vrednosti su: [67]

68 o none - postavlja slova po defaultu; o capitalize - transformiše prvi znak svake reĉenice u veliko slovo; o uppercase - transformiše sva slova u tekstu u velika slova; o lowercase - transformiše sva slova u tekstu u mala slova. white-space - Definiše prikaz otkucanog teksta u HTML kodu. Vrednosti su: o normal - onako kao što je i bez tog atributa, znaĉi po defaultu; o pre - onako kako otkucamo tekst u kodu tako će biti i prikazan. Znaĉi gde god kliknemo na enter tu se prikazuje <br>; o nowrap - koliko god dug tekst kucali u kodu brauzer će ga prikazati baš te duţine i neće ga seći kad tekst naidje na kraju ekrana brauzera. Znaĉi u nov red se prelazi tek kad se i naidje na novi pasus ili na <br>. Ajde da vidimo kroz primer interesantnije atribute i koji su moţda manje jasni, i neke njihove zanimljive vrednosti: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css">.a {direction: rtl;.b {line-height: 3mm;.c {letter-spacing: 2px;.d {word-spacing: 10px;.e {text-align: center;.f {text-decoration: overline;.g {text-shadow: blue 10px -10px 2px; </style></head><body> <div>direction definiše smer pisanja teksta. Vrednost su ltr i rtl.</div> <div class=a>direction definiše smer pisanja teksta. Vrednost su ltr i rtl.</div><br> <div class=b>line-height-definiše udaljenost izmedju redova pisanja. line-height - Definiše udaljenost izmedju redova pisanja.</div><br> <div class=c>letter-spacing-definiše razmak izmedju znakova u tekstu</div><br> <div class=d>word-spacing-definiše dužinu razmaka izmedju reči u rečenicama</div><br> <div class=e>text-align - Rasporedjuje tekst u prostoru po horizontali</div><br> <div class=f>text-decoration - Vrši dekoraciju teksta</div><br> <div class=g>text-shadow - Omogućava stvaranje tekstualne senke</div><br> </body></html> Direction definińe smer pisanja teksta. Vrednost su ltr i rtl..lica ariiruiviiifiiivi.aficeifa iacif fecireciiifrd ndiicerid line-height-definińe udaljenost izmedju redova pisanja. line-height - Definińe udaljenost izmedju redova pisanja. Letter-spacing-definińe razmak izmed ju znakova u t ekstu word-spacing-definińe duņinu razmaka izmedju reĉi u reĉenicama text-align - Rasporedjuje tekst u prostoru po horizontali [68]

69 text-decoration - Vrńi dekoraciju teksta text-shadow - Omogućava stvaranje tekstualne senke CSS link Linkovi se u CSS dekorišu najĉešće pomoću 4 pseudo klasa. Te 4 klase se medjusobno najĉešće definišu razliĉitim atributima da bi link imao vizuelno lep efekat, ali mogu i dva po dva imati iste atribute ili tri pa jedan itd. Evo kako se prave pseudo klase za link: a:link { - klasa koja definiše izgled linka koji nikad nije posećen od strane posetioca; a:visited { - izgled linka nakon klika na njega; a:hover { - izgled linka kad se predje mišem preko njega; a:active { - izgled linka u trenutku klika. Sve 4 klase mogu sadrţati bilo koji atribut, ali naravno da ima smisla. Evo primer: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> a:link {width: 178px; height: 43px; background: url(cssmenu/link.jpg); a:visited {width: 178px; height: 42px; background: url(cssmenu/visited.jpg); a:hover {width: 196px; height: 48px; background: url(cssmenu/hover1.jpg); a:active {width: 160px; height: 39px; background: url(cssmenu/hover2.jpg); </style></head><body> <br><a href=" </body></html> Znamo da se u HTML-u za link moţe koristiti samo jedna slika, ali CSS uz pomoć klasa proširuje tu mogućnost, i kao što vidimo koristili smo 4 razliĉite slike. Da bi funkcionisao link u 4 slike (ili 2, 3 slike zavisno kako osmislimo) u klasama smo koristili atribute width i height koji definišu visinu i duţinu boksa a ĉije su vrednosti u našem primeru iste kao i duţine i širine slika (a i ne mora). Kasnije će mo detaljnije o uredjivanju boksova elemenata. U atributima background (moţe i bacgroun-image) za vrednost stavljamo lokacije slika. Napisane klase u gornjem primeru definišu sve linkove u HTML dokumentu. Ali ako ţelimo da se linkovi medjusobno razlikuju u efektima onda moramo imenovati klase kako bi se znalo koji link koji efekat ima. Vaţna stvar je ako ţelimo razliĉite linkove onda ne moţemo na primer prvo definisati klase za sve linkove a posle dodavati nove imenovane klase za druge linkova u istom dokumentu jer će u nekim sluĉajevima dolaziti do komflikta. Znaĉi ako nameravamo imati linkove sa razliĉitim efektima onda moramo baš sve klase imenovati! Imenovanje klasa se vrši klasiĉno kao bilo koja druga klasa. Takodje ako za dizajn jednog tipa linkova koristimo 4 klase onda sve 4 klase imenujmoistim imenom. Na primer ako imenujemo sa dizajn1, onda to zapisujemo ovako: a.dizajn1:link { a.dizajn1:visited { a.dizajn1:hover { a.dizajn1:active { [69]

70 Kako to konkretno izgleda pokazaću u dekoraciji razliĉitih linkova u jednom HTML dokumentu: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> a.jedan:link {color: #ff0000 a.jedan:visited {color: #0000ff a.jedan:hover {color: #ffcc00 a.dva:link {color: #ff0000 a.dva:visited {color: #0000ff a.dva:hover {font-size: 150% a.tri:link {color: #ff0000 a.tri:visited {color: #0000ff a.tri:hover {background: #66ff66 a.pet:link {color: #ff0000 a.pet:visited {color: #0000ff a.pet:hover {font-family: monospace a.cetri:link {color: #ff0000; text-decoration: none a.cetri:visited {color: #0000ff; text-decoration: none a.cetri:hover {text-decoration: underline a.sest:link {background-color:#b2ff99; a.sest:visited {background-color:#ffff85; a.sest:hover {background-color:#ff704d; a.sest:active {background-color:#ff704d; a.sedam:link, a.sedam:visited { width:140px; padding:7px; font-weight:bold; color:#ffffff; text-align:center; text-decoration:none; background-color:#98bf21; a.sedam:hover, a.sedam:active {background-color:#7a991a; </style></head><body> <a class="jedan" href="#">prva dekoracija</a><br><br> <a class="dva" href="#">druga dekoracija</a><br><br> <a class="tri" href="#">treća dekoracija</a><br><br> <a class="cetri" href="#">četvrata dekoracija</a><br><br> <a class="pet" href="#">peta dekoracija</a><br><br> <a class="sest" href="#">šesta dekoracija</a><br><br> <a class="sedam" href="#">sedma dekoracija</a><br><br> </body></html> Prva dekoracija Druga dekoracija Treća dekoracija Ĉetvrata dekoracija Peta dekoracija [70]

71 Ńesta dekoracija Sedma dekoracija U primeru vidite da smo pojedine linkove dekorisali pomoću tri klase. Takodje vidite da smo koristili raznorazne atribute u klasama za dobijanje raznih efekata linkova. Takodje zapazite da smo grupisali po dva selektora za definisanje sedmog linka. Znaĉi mašta je granica mogućnosti. CSS lista Ajde i ovde da damo sve atribute sa svim vrednostima pa zatim da objasnimo. list-style-type - Definiše izgled znaka u listama (nabrajanjima). o Za neuredjenu listu atribut list-style-type moţe imati sledeće vrdnosti: none - bez oznaka; disc - pun kruţić (što je i po defaultu); circle - prazan kruţić; square - pun kvadratić. o Za uredjene liste atribut list-style-type moţe imati sledeće vrednosti: armenian - neki Armenski znaci; decimal - decimalni brojevi, 1, 2, 3, 4 itd; decimal-leading-zero - decimalni brojevi sa vodećom nulom, 01, 02, 03 itd; georgian - neki Georgian brojevi: lower-alpha - mala slova abecede, a, b, c, d itd; lower-latin - isto mala slova abecede a, b, c, d itd; lower-greek - grĉka slova, alfa, beta. gama, delta itd; lower-roman - rimski mali brojevi, i, ii, iii, iv, v itd; upper-latin - velika slova latinice, A, B, C, D itd; upper-alpha - isto velika slova latinice, A, B, C, D itd; upper latin - veliki rimski brojevi, I, II, III, IV, V itd. list-style-position - Odredjuje poziciju liste. Vrednosti su: o outside - po defaultu kao i obiĉna pozicija liste; o inside - malo uvuĉenija lista nego obiĉno; list-style-image - Za oznaku u nabrajanju definiše jednu sliku. Pošto je jedna slika onda je to neuredjena lista. Vrednosti su: o none - bez slike; o url("adresaslike.jpg") - upišete edresu slike; Mislim da nije teško ovo shvatiti zato ću objasniti kroz primer sve atribute ali samo sa pojedinim vrednostima. Naravno vi moţete u cilju veţbanja menjati vrednosti atributa i videti konkretno izgled svih vrednosti. Evo primera: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> ul.a {list-style-type: square; ul.b {list-style-type: none; #a {list-style-type: decimal; list-style-position: inside; </style> </head><body> <ul class="a"> <li>milan</li> <li>zoran</li> <li>steva</li> </ul> <ul class="b"> [71]

72 <li>milan</li> <li>zoran</li> <li>steva</li> </ul> <ul id="a"> <li>milan</li> <li>zoran</li> <li>steva</li> </ul> </body></html> Milan Zoran Steva Milan Zoran Steva 1. Milan 2. Zoran 3. Steva CSS box model HTML elementi kao što su naprimer <p>, <div>, <span>, <table>, <td>, <tr> i drugi, definišu sadrţaj i strukturu, ali što je najvaţnije za našu priĉu PRAVE PROSTOR kako bi se smestio taj sadrţaj. Taj prostor shvatimo kao jednu kutiju (box - boks) koju CSS moţe dekorisati. Taj BOX moţemo pretstaviti i slikovno: [72]

73 Kao što vidimo sa slike taj box prostor se deli na 4 dela: CONTENT - sadrţaj elementa koji je na našoj slici samo veliko slovo A; PADDING - praznina izmedju sadrţaja i linije granice elementa; BORDER - linija granice elementa; MARGIN - prazan prostor izmedju granice elementa i okolnih elemenata; Svi ovi nabrojani delovi prostora u CSS - u se opisuju većim brojem atributa, a atributi većim brojem vrednosti da bi se što lepše i preciznije dekorisale internet strane. Postoje atributi box modela koji definišu njegovu visinu i širinu kao što su: with - definiše širinu elementa, hight - koji definiše visinu elementa. U nastavku će mo objasniti sve atribute box elemenata kao i njihove vrednosti. Širina i visina CSS BOX elementa Ovde nema neke velike filozofije. Evo daću odma primer i onda ću ga prokomenterisati. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #wr {border: 1px solid gray; #wc {width: 200px; height: 100px; border: 5px solid gray; #wo {width: 300px; padding: 20px; border: 5px solid gray; #we {width: 200px; height: 100px; border: 5px solid gray; margin:30px; </style></head><body> <p id=wr>baš volim boks model</p> <p id=wc>baš volim boks model</p> <p id=wo>baš volim boks model</p> <p id=we>baš volim boks model</p> </body></html> [73]

74 Bań volim boks model Bań volim boks model Bań volim boks model Bań volim boks model Prvi pasus je obiĉan pasus koji se sreće u ĉistom HTML - u, stim što sam mu samo dodao vrednost zaborder i za boju linije solid gray kako bi videli granice pasusa, odnosno tog box elementa. U drugom pasusu smo dodali još i širinu width od 200 piksela, visinu height od 100 piksela, i liniju granice smo malo podebljaji tako što smo stavili border 5 piksela. Znaĉi u tom drugom pasusu vidimo kako smo definisali širinu i povećali visinu. U trećem pasusu smo umesto height stavili padding koji definiše u svim pravcima rastojanje izmedju sadrţaja i linije granice, te imamo da je tekst od granica boxa udaljen podjednako od 20px u svim pravcima. Ĉetvrti pasus je isti kao i drugi samo mu je dodat atribut margin od 30 piksela, što prouzrokuje da se u svim pravcima oko granice elementa napravi prazan prostor od 30 piksela. Ovde smo demonstrirali upotrebu atributa width i height a ostale atribute smo ovde koristili samo da bi se lepše uoĉile stvari vezane za širinu i visinu. O tim drugim atributima sledi u nastavku mnogo više. CSS border Atribut border moţe imati po tri vrednosti, a to su boja, stil, i debljina. Svaka od te tri vrednostimoţe imati razne varijacije te ću ih dati kao spisak sa objašnjenjima, a nakon toga daćemo i primer koji će doĉarati atribut border. boja linije granice (color) - se moţe definisati imenovanjem boje (blue, red, black itd), ili uheksadecimalnom zapisu (#aabbcc), ili udecimalnom zapisu (rgb(23,123,12)) stil linije granice (style) - Vrednosti mogu biti: o none - ne vide se linije granice o hidden - isto kao i none ali u situacijama sa drugim elementima da ne bi došlo do sukoba vrednosti (najĉešće u tablicama) o dotted - Odredjuje ukrasnu granicu u obliku tufna o dashed - Granice u obliku crtica o solid - puna linija o double - prikazuje granice sa dve linije a izmedju prazan prostor o groove - 3D uţljebljene granice. A izgled zavisi od border-color vrenosti o ridge - efekat grebena. 3D efekat umišljene granice, koji takodje zavisi od vrednosti border-color o inset - odredjuje 3D umetak granice. Isto efekat zavisi od border-color atributa o outset - odredjuje poĉetak 3D granice. Efekat zavisi isto od border-color debljina linije granice (width) - Vrednosti mogu biti: o debljina u jedinicama CSS za duţinu - znaĉi pikseli (px), milimetri (mm), centimetri (cm), i sve ostalo što smo već objasnili o thin - tanka linija svih granica o medium - srednja debljina svih granica o thick - sve granice debele [74]

75 Kao što znamo sve što je ĉetvorougaono ima ĉetri strane, ivice, ili kako god to nazvali. Kad napišemo samo border onda se tako definišu sve 4 ivice našeg box modela potpuno isto. Medjutim CSS omogućava definisanje i svih ivica drugaĉije kako nama odgovara. Na primer ţelimo definisati gornja ivicu onda pišemo atribut border-top, levu ivicu border-left, desnu ivicu border-right i donju ivicuborder-bottom. Svi ti atributi mogu imati spisak vrednosti kao i border atribut gore. Ajde sad da vidimo neke karakteristiĉne atribute kroz primer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #ba {width: 160; border: 5px dotted blue; #bb {width:160; border: 5px dashed blue; #bc {width:160; border: 5px solid blue; #bd {width:160; border: 5px double blue; #be {width:160; border: 10px groove; #bf {width:160; border: 10px ridge; #bg {width:160; border: 10px inset; #bh {width:160; border: 10px outset; #bi { width: 230; height: 50; border-top: 5px dotted black; border-left: 8px double blue; border-right: 4px dashed green; border-bottom: 15px solid black; #bj {width:260; border-bottom: solid; </style></head><body> <span id="ba"> Boks model sa dotted</span> <span id="bb"> Boks model sa dashed</span> <span id="bc"> Boks model sa solid</span> <br><p> <span id="bd"> Boks model sa double</span> <span id="be"> Boks model sa groove</span> <span id="bf"> Boks model sa ridge</span> </p><br><p> <span id="bg"> Boks model sa inset</span> <span id="bh"> Boks model sa outset</span> </p> <span id="bi"> Boks model sa 4 razlicite strane</span> <span id="bj"> Boks model samo sa donje strane linija</span> </body></html> Boks model sa otted Boks model sa ashed Boks model sa solid [75]

76 Boks model sa double Boks model sa groove Boks model sa ridge Boks model sa inset Boks model sa outset Boks model sa 4 razlicite strane Boks model samo sa donje strane linija Prva 8 spanova prikazuju sve varijacije stilova. U tim delovima vidimo da se sve 4 strane boksa obradjuju istim vrednostima te zato se koristi samo atribut border. A vrednosti se definišu tako što se samo nabrajaju iza dve taĉke i nije potreban zarez već samo da su razmaknute. Vidimo takodje da ako nije zadata boja da je ona po defaultu crna, odnosno sa nijansama crne sive da bi se dobio odredjen stil. U devetom spanu smo stavili da nam sve 4 strane budu drugaĉije po skoro svim elementima. U desetom spanu smo demonstrirali kako moţe da se definiše samo jedna strana boksa, ali naravno tom logikom moţemo bilo koju drugu stranu ili kombinacije raznorazne. U desetom takodje primetite da mi ne moramo uvek zadavati debljinu border atributu. Moţemo samo zadati stil i automatski se nacrta sa defaultnom debljinom od 3px. U CSS postoji još jedna linija koja se moţe definisati. Naime radi se o spoljnoj liniji koja oiviĉuje border, to jest dodatno oiviĉava graniĉne linije boksa. Za tu liniju apsolutno sve isto vaţe vrednosti kao i za border, jedino se umesto atributa border piše outline i nema mogućnosti da se posebno definišu pojedine ivice. Znaĉi nema left, right, top, i bottom varijante. Evo jedng kratkog primera: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #bc { width: 250; border: 10px solid blue; outline: 15px dotted red; </style></head><body> <p id="ga">boks model sa outline i border</p> </body></html> [76]

77 Boks model sa outline i border Meni ovo nije radilo u internet explorer 8, neznam kod drugih. CSS margin i padding Margine su prazan prostor izmedju border dela i okolnih elemenata. Pomoću atributamargin se definiše veliĉina praznog prostora svuda oko border. Obzirom da border ima 4 strane postoji mogućnost da se zasebno odredi veliĉina praznog prostora oko sve 4 strane i to redom: margin-bottom definiše prazan prostor ispod donje ivice; margintop definiše iznad gornje ivice; margin-leftlevo od leve ivice i; margin-right desno. Svi ovi atributi, znaĉi i margin, i margin-left, margin-right, margin-top i margin-bottom mogu imati sledeće vrednosti: auto - defaultna vrednost koju dodeljuje sam brauzer duţina - na primer u pikselim, milimetrima, itd, znaci sve CSS merne jedinice duţina u procentima - procenat u odnosu na širinu elementa Evo primera koji sve objašnjava: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> p {background-color: yellow; p.margine { margin-top: 85px; margin-bottom: 50px; margin-right: 500px; margin-left: 25px; </style></head><body> <p>ovo je pasus bez ikakvih margina</p> <p class=margine>ovo je sa marginama koje su različite u svim pravcima</p> <p>ovo je pasus bez ikakvih margina</p> </body></html> Ovo je pasus bez ikakvih margina Ovo je sa razliĉitim marginama Ovo je pasus bez ikakvih margina Ako nam se veliĉina praznina razlikuje samo po horizontali u odnosu na vertikalu, što znaĉi da su leva i desna iste, kao i gornja i donja onda to moţemo kraće zapisati i ovako: margin:80px 40px. Stim što se 80 odnosi na duţinu vertikalnih a 40 na duţinu horizontalnih praznina. [77]

78 Padding, za razliku od margin, definiše unutrašnje praznine izmedju sadrţaja i bordera. Padding što se tiĉe obeleţavanja atributa i njihovih vrednosti je potpuno isti kao i margin, samo umesto margin pišete padding, ovako: padding - definiše prazan prostor izmedju sadrţaja i bordera u svim pravcima podjednako; padding-left - definiše veliĉinu praznog prostora levo od sadrţaja i ivice; padding-right- desno; padding-top - gored i; paddingbottom - dole. Evo primera koji sve lepo doĉarava. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> p.padng { width: 300px; border: 4px solid blue; padding-top: 5px; padding-bottom: 25px; padding-right: 50px; padding-left: 100px; </style></head><body> <p class=padng>ovo je sa padding koji su različite u svim pravcima</p> </body></html> Ovo je sa padding koji su razliĉite u svim pravcima Takodje i ovde vaţi ona priĉa da ako trebamo definisati prostor samo po horizontali i vertikali onda pišemo padding: 30px 50px gde 50px definiše left i right praznine, a 30px top i bottom. Sadrţaj CSS BOX elementa Kad je sadrţaj veći od prostora kojeg nudi BOX onda po defaultu se on povećava naniţe ili udesno. Medjutim to moţemo promeniti. Atribut koji nam sluţi za to jeoverflaow koji moţe imati sledeće vrednosti: auto - pojavljuju se vertikalni i horizontalni klizaĉi iskljuĉivo po potrebi. hidden - nikad se ne pojave klizaĉi, a i veliĉina polja će uvek biti striktno po definisanim veliĉinama bez obzira i da se tekst ili bilo koji drugi sadrţaj iseĉe. scroll - pojaviće se vodjice za scroll i po vertikali i po horizontali uvek bez obzira ako i ne treba, a ako se pojavi potreba onda se ubacuje i klizaĉ visible - to je kao i po defaultu, znaĉi kao i bez overflow atributa. Bez obzira na veliĉine height i width atributa sadrţaj će proširivati box sve do kraja sadrţaja. Ukoliko je tekst onda će se proširivati na dole po vertikali a po horizontali će zadrţati definisanu vrdnost. Ukoliko je slika recimo, onda će se proširivati i po horizontali i po vertikali ako je potrebno. Evo primera koji sve doĉarava: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #skrl { width: 100px; height: 100px; overflow: scroll; #hid { [78]

79 width: 100px; height: 100px; overflow: hidden; #vis { width: 100px; height: 100px; overflow: visible; #au { width: 100px; height: 100px; overflow: auto; #bez { width: 100px; height: 100px; </style></head><body> <div id="skrl"> Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll</div><br> <div id="hid"> hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden</div><br> <div id="vis"> visible visible visible visible visible visible visible visible visible visible visible visible visible visible visible</div><br> <div id="au"> auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto</div><br> <div id="bez"> bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow</div> </body></html> Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden visible visible visible visible visible visible visible visible visible visible visible visible visible visible visible auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow Naravno i atribut overflow podrţavaju uglavnom noviji brauzeri jer je iz CSS2 specifikacije. CSS display U ovom delu atributi su i iz CSS 1 specifikacije ali i u velikom broju iz CSS 2. Ovi novi atributi su jako zanimljivi, kao što će te videti i sami, ali problem je što ih podrţavaju naravno uglavnom nove verzije brauzera. Medjutim nesme se zanemariti ĉinjenica da pojedini posetioci još uvek posećuju sajtove sa starijim brauzerima. Dakle treba još vremena da zaţive u većem obimu brauzeri koji podrţavaju CSS 2 atribute. Ajde da vidimo kakve nove efekte CSS sprema za budućnost :) [79]

80 CSS atribut DISPLAY U HTML postoje elementi koji u nekim sluĉajevima iako sadrţajem ne ispunjavaju do kraja celu širinu ekrana ne dozvoljavaju prisustvo u nastavku sadrţaju drugom elementu. Takvi su na primer <h1>,<p>, <div> itd. i oni se zovu blok elementi. Postoje elementi koji dozvoljavaju i druge sadrţaje u ekranskoj liniji u kojoj se nalaze. Takvi elementi su <span> i <a>, i nazivaju se inline elementima. CSS uvodi jedan atribut DISPLAY koji ima sposobnost da blok elementima omogućava ponašanje sa okolnim sadrţajem kao da su inline, a inline kao da su blokovi. Evo primera: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #displ {display: block #inl {display: inline </style></head><body> <p>recicu iskreno da je <a href=#>ovaj SAJT ZA UČENJE</a> vrlo, ali vrlo, ozbiljan sajt</p> <p>recicu iskreno da je <a href=# id=displ>ovaj SAJT ZA UČENJE</a> vrlo, ali vrlo, ozbiljan sajt</p> <p>pasusi koji nisu prebaceni u inline</p> <p>pasusi koji nisu prebaceni u inline</p> <p id=inl>pasusi koji jesu prebaceni u inline</p> <p id=inl>pasusi koji jesu prebaceni u inline</p> </body></html> Recicu iskreno da je OVAJ SAJT ZA UĈENJE vrlo, ali vrlo, ozbiljan sajt Recicu iskreno da jeovaj SAJT ZA UĈENJEvrlo, ali vrlo, ozbiljan sajt Pasusi koji nisu prebaceni u inline Pasusi koji nisu prebaceni u inline Pasusi koji jesu prebaceni u inline Pasusi koji jesu prebaceni u inline Mislim da je ovde sve jasno. Display atribut moţe pored ove dve vrednosti block i inline imati još neke vrednosti. Evo spiska sa objašnjenjima: - none - sakriva element. Evo primera: <style> #test1 {display: none; </style> <div>bez sakrivanja</div> <div id="test1">sakrivanje</div> [80]

81 bez sakrivanja Primetite (naravno oni sa novim brauzerima) da na desnom delu u rezultat se ne vidi tekst iz DIV sa identifikacijom "test1". -list-item - sve elemente pretvara u listu. Evo primera: <style> #test1 {display: list-item; list-style-position: inside; </style> <div>nesto u div</div> <span>nesto u span</span> <p>nesto u P</p> <br><br> <div id="test1">nesto u div sa id=test1</div> <span id="test1">nesto u span sa id=test1</span> <p id="test1">nesto u P sa id=test1</p> nesto u div nesto u span nesto u P nesto u div sa id=test1 nesto u span sa id=test1 nesto u P sa id=test1 Vi display: list-item morate uvek pisati u kombinaciji sa list-style-position: inside, inaĉe neće doći do efekta, ili hoće ali u kombinaciji sa recimo padding-left: 20px. I još nešto, preporuĉujem korišćenje samo neuredjenih lista u kombinaciji sa display: list-item, jer ĉesto se dešava kad se koriste uredjene da brojanje ne poĉinje od 1 već od nekog broja. Naime neki brauzeri broje sve elemente a ne samo one koje mi ţelimo. To se dešava jer pojedini brauzeri oćito imaju bagove. Takodje oni sa novijim operama vide da pasus (iako ima taĉku ispred, i da pravi listu) je spušten za jedan red niţe, ali naravno to ne treba tako jer je bag. Sva tri elementa (verovatno u budućnosti) će graditi lepu listu. Postoje još: - run-in - element će biti prikazan ili kao inline ili kao blok-element, zavisno od sadrţaja. - compact - opet, element će biti prikazan ili kao inline ili kao blok-element, zavisno od sadrţaja, a u cilju uštede ekranskog prostora. Vrednosti run-in i compat nisu podrţane od ogromne većine brauzera, a mnogi brauzeri koji kao podrţavaju imaju bagove, te nećemo ih nešto posebno objašnjavati primerima. Mislim nema smisla jer Ċaba ja napišem nešto i prokomentarišem rešenja ako većina vas vidi sasvim nešto drugo na ekranu. Ispašće da laţem. Medjutim postoje i tabelarne display vrednosti. Zapravo te vrednosti su uveli u CSS kako bi zamenile HTML tabele u dizajniranju stranica. A klasiĉne HTML tabele preporuĉuju za prikazivanje podataka tabelarno. U sledećem naslovu ćemo više o tim tabelarnim display vrednostima [81]

82 CSS DISPLAY i tabele Atribut DISPLAY ima i, nazovimo, tabelarne vrednosti pomoću kojih mogu da se kreiraju pod znacima navoda tabele, prvenstveno namenjene dizajniranju internet strana. Spisak tih vrednosti sledi: table - vrednost u display atributu koja je analogija <table> HTML tagu table-row - vrednost u display atributu koja je analogija <tr> HTML tagu table-cell - vrednost u display atributu koja je analogija <td> HTML tagu table-row-group - trebalo bi da bude nešto kao analogija figurativno tbody za tabelu kao body u html kodu table-header-group - analogno kao nekom, nazovimo figurativno, thead za te CSS tabele, a kao analogija head tagu u HTML kodu table-footer-group - trebalo bi da se definiše kao podnoţje tabele (ĉitaj podnoţje internet strane) table-caption - kao neki deo za naslov tabele. Zapravo taĉnije za internet stranice, jer u stvari mi sad pravimo alat za lakše dizajniranje stranica. table-column - vrednost koja bi trebala (ako zatreba) da definiše pojedinu kolonu (primećujete da tako nešto nije postojalo u HTML tabelama). table-column-group - vrednost koja bi trebala ako zatreba da definiše ĉitave grupe kolona (takodje nije postojalo u HTML tabelama). Ako uzmemo neke od gornjih vrednosti sa njihovim znaĉenjem ajde da napravimo tu CSS tabelu sa, na primer, tri ćelije: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css">.kontejner {display: inline-table;.redovi {display: table-row;.celije { display: table-cell; width: 100px; height: 20px; border: 1px solid blue; padding: 3px; </style></head><body> <div class="kontejner"> <div class="redovi"> <div class="celije">celija A</div> <div class="celije">celija B</div> <div class="celije">celija C</div> </div> </div> </body></html> CELIJA A CELIJA B CELIJA C Samo napomena da trebate kao rezultat videti ćelije koje su rasporedjene ne jedna ispod druge nego jedan pored druge horizontalno. Svi oni koji vide ćelije jednu ispod druge njihovi brauzeri ne podrţavaju CSS tabele. Jer i bez ikakvih display atributa prave se ćelije jedna ispod druge. Poenta je napraviti ih tabelarnim vrednostima jednu pored druge. Nastavimo sad dalje. [82]

83 Medjutim obzirom da smo sada na terenu CSS-a, komotno će raditi potpuno isto i sledeći kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css">.celije { display: table-cell; width: 100px; height: 20px; border: 1px solid blue; padding: 3px; </style></head><body> <div class="celije">celija A</div> <div class="celije">celija B</div> <div class="celije">celija C</div> </body></html> CELIJA A CELIJA B CELIJA C Ovakva CSS tabela koja ima samo ćelije naziva se anonimna tabela. Ovde smo izbacili klase sa atributima display: inline-table i display: table-row da bi demonstrirali kako se u CSS mogu kreirati fleksibilnije tabele. Naravno takve anonimne tabele imaju svoju primenu, ali takodje i atribute koje smo izostavili imaju svoju logiku i primenu. Na primer u klasu koju smo nazvali kontejner moţemo ubacivati atribute koji su opšti za celu jednu tabelu, pa kasnije kad hoćemo nešto menjati, menjamo samo kontejner, itd. Takodje i svi ostale vrdnosti tabelarne koje smo nabrojali za atribut display itekako imaju svoju primenu. Za sada će mo ovde stati sa teorijom u vezi CSS tabela iz prostog razloga što ih jako malo brauzera podrţava. A i oni koji podrţavaju većina ima bagova. Evo spisak brauzera sa njihovim verzijama od kojih su poĉeli da podrţavaju CSS tabele: firefox 2, opera 9.62, internet explorer 8.x, safari 4.0b, chrome 2, konqueror 3. Svi ispod tih verzija ne podrţavaju. CSS dimenzije Ovde se misli na definisanje širine i visine elemenata. Već smo upoznali atribute za definisanje širine (width) i visine (height) ali sada će mo ovde kompletirati sve atribute. Evo spiska a zatim i primer: height - definiše visinu elementa. Jedinice su: o auto - defaultna vrednost koju odredjuje brauzer u zavisnosti od prave veliĉine elementa o duţina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama o % - procentualna visina u odnosu na visinu elemena max-height - definiše maksimalnu visinu elementa o duţina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama o % - procentualna visina u odnosu na visinu elementa min-height - definiše minimalnu visinu elementa o duţina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama o % - procentualna visina u odnosu na visinu elementa width - definiše širinu elementa o auto - defaultna vrednost koju odredjuje brauzer o duţina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama o % - procentualna visina u odnosu na visinu elementa [83]

84 max-width - definiše maksimalnu ĉirinu elementa o duţina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama o % - procentualna visina u odnosu na visinu elementa min-width - definiše minimalnu širinu elementa o duţina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama o % - procentualna visina u odnosu na visinu elementa Verovatno se pitate kakva je razlika izmedju na primer max-width i width? Recimo definišemo neki prostor gde će stajati slike sa max-width = 200px. E sad ako unese posetilac sliku koja je manja od 200 piksela onda će se u tom prostoru širina te slike prikazati po defaultu. Znaĉi neće se ni smanjiti ni povećati. Jedino ako neki posetilac unese neku sliku koja je veće širine od 200px, onda će se širina slike smanjiti na 200px, jer je to maksimum. Ali ako smo taj prostor definisali striktno sa width = 200px onda kakvu god širinu slike posetilac uneo, znaĉi i manju ili veću nebitno, uvek će širina slike biti 200px u tom prostoru. Evo jednog primera gde unapred definišemo koliki će prostor biti: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #cv { max-width: 50px; max-height: 50px </style></head><body> <span><img src="csspozadina.gif"></span> <span><img src="csspozadina.gif" id="cv"></span> </body></html> max-width, max-height, min-width i min-height podrţavaju noviji brauzeri. CSS LAYER Moţemo definisati poziciju (poloţaj) svakog HTML elemenata u prostoru na razliĉite naĉine uz pomoć CSS -a. Sad ću dati spisak atributa koji definišu odredjene naĉine pozicioniranja elemenata: Bottom, left, right i top Do sad smo bottom, left, right i top koristili kao vrednosti nekih atributa ali oni se mogu koristiti i kao atributi. Oni se kao atributi koriste uglavnom nakon atributa koje ćemo ovde u nastavku razmatrati. Ali najpre ću dati sliku na kojom ću pokušati da objasnim atribute left, right, bottom i top: [84]

85 Mislim da je slika jasna i da ne treba neko posebno objašnjenje. Vrednosti za bottom, top, right i left mogu biti u procentima (u odnosu na veliĉinu elementa), duţinskim jedinicama (pikseli, milimetri i ostale CSS jedinice mere), i auto što je i po defaultu. Position Position atribut definiše poziciju elementa na osnovu jedne od sledećih vrednosti: static - to je pozicija po defaultu, kad i ne koristimo position atribut absolute - Pomoću ove vrednosti odredjujemo taĉan poloţaj elementa u odnosu na "body" površinu, bez obzira na poloţaj bilo kog drugog elementa. Nakon atributa position: absolute slede atributi bottom, top, left, ili right koji će definisati taĉku ili oblast gde će biti apsolutan poloţaj elementa. Evo na primer definišimo da nam neki tekst bude u apsolutnom nekom poloţaju: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #abs { position: absolute; left: 165px; top: 60px; </style></head><body> <h3 id="abs">ovo je kao naslov tog nekog podugačkog teksta</h3> <p>ovo je neki podugacak tekst</p> </body></html> [85]

86 Kao što vidite mi smo dali apsolutnu poziciju naslova pomoću "kordinata" u left i top atributima, tako da on ne stoji iznad teksta već ispod njega, iako bi na osnovu HTML koda trebao da stoji iznad teksta. Fixed Fixed fiksira poloţaj nekog objekta na ekranu tako da bez obzira da li mi pokrećemo scrollbar -ove (ako ih ima), tekst i dalje stoji u istom poloţaju ekrana. Evo primera i sve će biti jasnije: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #ku { position: fixed; left: 845px; top: 52px </style> </head><body> <p id="ku">fiksiran tekst</p> <p>internet Explorer 7 (ili noviji) podržava ovaj atribut, ali uz!doctype specifikaciju</p> <p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p> <p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p> <p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p> <p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p> <p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p><p>neki tekst</p> </body></html> Pogledajte u brauzeru kako radi ovaj kod. Znaĉi iskopirajte ga u neki fajl sa ekstenzijom htm. i taj fajl otvorite brauzerom (po mogućstvu neki noviji brauzer). Primetićete da i ako klizaĉem idete naniţe jedan tekst će uvek biti fiksiran na ekranu i neće se pomerati. Relative Relative je atribut kojim definišemo poloţaj elementa u odnosu na normalan poloţaj koji bi taj element imao kad ne bi primenili taj CSS atribut "realative". Moţda je ovako napisano malo nejasno, ali primer će svima biti jasan: [86]

87 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <title>relative</title> </head> <body> <p>obican tekst</p> <p style="position: relative; left: -100px; top: 10px">Tekst kojeg pomeramo relativno</p> </body></html> Obican tekst Tekst koji pomeramo relativno Oni sa novijim brauzerima primećuju kako je tekst u odnosu na normalan poloţaj koji bi imao zbog HTML koda pomeren priliĉno u levo. Znaĉi poenta je u tome da se pozicija nova odredjuje u odnosu na poziciju koju bi element imao na osnovu HTML koda. Z-index Moguće je da ako na odredjeni naĉin upotrebimo atribute relative ili absolute moţe doći do preklapanja elemenata. E sad na primer preklope se neki tekst i neka slika, onda mi pomoću argumenta z-index moţemo odrediti koja od ta dva elementa će biti iznad, ili ispod, odnosno koji će u delu preklapanja biti vidljiv a koji ne. Evo primera: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> #ispod { position: absolute; left: 0px; top: 0px; z-index: -1; #iznad { position: absolute; left: 110px; top: 0px; z-index: 1; </style> </head><body> <p>ovaj tekst na osnovu HTML koda treba da se pojavljuje ispod slike</p> <img src="pozadina.gif" id="ispod"> <img src="pozadina.gif" id="iznad"> </body></html> [87]

88 Primetićete da je tekst ispisan na slici u jednom delu vidljiv a u drugom nije u zavisnosti od vrednostiz-index: -1 - vidljiv, a kad je 1 nije vidljiv. Znaĉi u tome je poenta. z-index odredjuje koji element će biti ispred a koji iza ukoliko se medjusobno preklapaju. Takodje z-index jedino i uvek ide u kombinaciji sa atributima absolute, fixed i relative, i to nakon njih u CSS kodu. E sad postoje tu još neke varijacije kad se preklapaju više elemenata jer onda se koriste i brojevi veći od 1 (naravno i u negativnom i u pozitivnom smeru), kako bi smo taĉno definisali koji objekti su ispred kojih. Clip Clip atribut prikazuje samo onaj deo elementa koji ţelimo da bude vidljiv. Znaĉi na primer ako imamo neku sliku moţemo definisati pomoću ovog atributa da se vidi samo neki deo slike (na primer prva ĉetvrtina slike) a ne i cela slika. Vrednosti ovog atributa su auto - što je i po defaultu, kad i nema atributa clip, i rect(top, right, bottom, left) - kad taĉno definišemo oblast unutar elementa koji ţelimo da bude vidljiv. Evo primera: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head> <style type="text/css"> img { position: absolute; clip: rect(0px, 300px, 150px, 0px); </style> </head><body> <img src="boksmod.gif" width=580 height=300> </body></html> I ovaj primer prebacite u neki fajl (u kome se nalazi i slika bilokojaslika.gif) i otvorite brauzerom. Primetićete da slika nije prikazana u celosti već samo njena gornja leva ĉetvrtina. CSS i cursor CSS2 je uveo mogućnost upravljanja naĉina prikazivanja kursora. Atribut je cursor. Ovo je vrlo jednostavan atribut zato je dovoljan samo primer: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html><head></head><body> <span style="cursor: auto">auto</span><br /> [88]

89 <span style="cursor: crosshair">crosshair</span><br /> <span style="cursor: default">default</span><br /> <span style="cursor: e-resize">e-resize</span><br /> <span style="cursor: help">help</span><br /> <span style="cursor: move">move</span><br /> <span style="cursor: n-resize">n-resize</span><br /> <span style="cursor: ne-resize">ne-resize</span><br /> <span style="cursor: nw-resize">nw-resize</span><br /> <span style="cursor: pointer">pointer</span><br /> <span style="cursor: progress">progress</span><br /> <span style="cursor: s-resize">s-resize</span><br /> <span style="cursor: se-resize">se-resize</span><br /> <span style="cursor: sw-resize">sw-resize</span><br /> <span style="cursor: text">text</span><br /> <span style="cursor: w-resize">w-resize</span><br /> <span style="cursor: wait">wait</span><br /> </body></html> auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait Kako prelazite preko reĉi tako se i menja izgled kursora. Reĉi su engleske i one su u stvari predefinisane kljuĉne reĉi za taj konkretan izgled kursora. Ovaj atribut naravno podrţavaju uglavnom novi brauzeri. [89]

90 JavaScript JavaScript programski jezik unapredjuje HTML dokument u smislu dinamiĉnosti, realizuje razne grafiĉke efekte, ali i funkcionalno i interaktivno. Kao takav JavaScript se integriše u HTML kod. Iz ovoga verovatno pretpostavljate da vam je besmisleno uĉiti JavaScript ukoliko neznate HTML. Medjutim preporuĉujemo da takodje nauĉite i CSS pre nego krenete sa uĉenjem JavaScript-a. JavaScript se izvršava jedino na klijentskoj strani, odnosno u brauzeru. JavaScript ne moţe da razmenjuje podatke sa hard diskom. Evo konkretno na primer, JavaScript moţe izvršavati odredjene akcije kada se recimo završi uĉitavanje stranice, ili kada korisnik klikne, ili predje preko nekog HTML elementa-. Takodje JavaScript moţe napisati neki tekst u zavisnosti od neke akcije koju izvede posetilac na stranici. Moţe ĉitati i menjati sadrţaj nekog HTML elementa. Moţe se koristiti za proveru valjanosti podataka koji se unose u HTML forme pre nego što se pošalju na server. To štedi resurse servera. I još mnoge druge korisne stvari moţemo obaviti JavaScript-om unutar HTML dokumenta koji sam HTML ne moţe. JavaScript je stvorio Brendan Eich na Netscape 1996 godine. JavaScript se i danas usavršava i razvija. Dodatnu popularnost JavaScript jeziku doneo je AJAX koji omogućava JavaScript-u da u svakom trenutku nezavisno od akcije posetioca razmenjuje u oba smera podatke sa serverom. To ĉini jako dnamiĉnim internet strane. I još nešto. JavaScript moţe manipulisati i odredjenim sadrţajima, ali mora se znati da taj sadrţaj nije vidljiv pretraţivaĉima, što znaĉi da nikad neće se naći u rezultatima pretrage. E sad sa druge strane ako je nekom i potrebno da se sadrţaj sajta ne nadje u rezultatima pretrage onda moţe sav sadršaj sajta da ide preko JavaScript. Sintaksa [90]

91 U ovom delu razmatraćemo najosnovnije stvari bez kojih je nemoguće bilo šta kreirati vezano za JavaScript. Tu se pre svega misli na JavaScript sintaksu, tipove promenjljivih, operatore itd. Poţeljno je ovaj deo dobro nauĉiti kako bi se kasnije lakše razumele kompleksnije stvari. Primeri su kreirani tako da naj minimalnijim pisanjem doĉaravaju najbolje što je moguće vezano za ono što bi trebalo da objasne. Preporuĉujemo da ni jedan primer ne preskaĉete. Preporuĉujemo takodje da svaki primer prepišete u notepad, saĉuvate fajl kao HTML dokument i pokrenitega brauzerom, kako bi ste videli rezultat. Ovakvim naĉinom uĉenja stećićete rutinu, a i bolje će te zapamtiti sintaksu. Takodje je preporuĉljivo da sami izvršite razna eksperimentisanja sa primerima Implementacija JavaScript u HTML Postoje nekoliko naĉina implementacija, to jest umetanja JavaScript koda unutar HTML koda. Osnovni je pomoću SCRIPT taga, koji ima i poĉetni i krajnji tag, ovako: <script type="text/javascript"> <!-- Ovde se smešta JavaScript kod //--> </script> Unutar SCRIPT taga koristi se atribut TYPE sa vrednošću text/javascript kako bi brauzer prepoznao da se radi o JavaScript kodu. Primećujete da smo JavaScript kod takodje umetnuli i izmedju HTML oznake za komentar. Naime, ako postoji neki brauzer koji nema ugraċenu podršku za JavaScript on će sam JavaScript kod prikazatii kao tekst što je efekat koji sigurno ne ţelimo. Da bi to izbegli, potrebno je sam skript staviti unutar HTML oznake za komentar <!-- i -->. Po nekad je Javascript kod jako veliki pa da ne opterećujemo HTML fajl moţemo ga smestiti u poseban fajl sa ekstenzijom.js. Umetanje takvog JavaScript fajla u HTML kod vrši se ovako: <script type="text/javascript" src="javascriptfajl.js"></script> Kao što vidimo dodali smo atribut SRC koji za vrednost ima lokaciju JavaScript fajla. U samom JavaScript fajlu na poĉetku ne stavljamo nikakve posebne tagove ili bilo kakve oznake, već normalno pišemo ĉist JavaScript kod. Ovi zasebni fajlovi su jako zgodni u sluĉajevima kad jednom napisan JavaScript kod moţemo upotrebljavati u više HTML dokumenata. Obiĉno se JavaScript fajlovi umeću u HEAD delu ali i ne mora. JavaScript kod, kao što smo rekli, se umeće u HEAD delu HTML koda, i u tom sluĉaju taj kod se ne izvršava sve dok se ne pozove na izvršenje. U HEAD delu se najćešće smeštaju JavaScript funkcije koje mi pravimo. Takodje JavaScript kod moţemo umetati i u BODY delu. Kada se umetne u BODY, onog trenutka kad brauzer naidje na SCRIPT tag u kome je JavaScript kod onda se taj kod i izvršava. Broj umetanja je neograniĉen, kako u BODY tako i u HEAD delu. Medjutim u HEAD nema potrebe za višestruko umetanje jer se JavaScript kod izvršava tek nakon poziva, što znaĉi da komotno moţemo sve JavaScript kodove smestiti u jedan SCRIPT tag. Medjutim odredjene JavaScript naredbe mogu se naći u HTML kodu i izvan SCRIPT taga. Te naredbe se upotrebljavaju kao HTML atributi. Evo primera: <html><head> <title>moj prvi JavaScript</title> <script type="text/javascript" src="javascriptfajl.js"></script> </head> <body onload="nekajavascriptfunkcija()"> tekst tela dokumenta </body></html> [91]

92 ONLOAD je JavaScript naredba, a kao što vidimo unutar HTML koda se tretira kao atribut. Takvi JavaScript HTML atributi za vrednost mogu imati i neke naše kreirane funkcije u JavaScript. U konkretno ovom primeru je to naša nekajavascriptfunkcija() koja je definisana unutar fajlajavascriptfajl.js a koji smo umetnuli u HEAD delu SCRIPT tagom. E sad naravno, ne mora samo BODY tag imati takve JavaScript atribute. Gotovo svi HTML tagovi mogu sadrţati odredjene JavaScript naredbe kao svoje atribute. U ovom konkretnom sluĉaju ONLOAD atribut ima efekat da tek kad se ceo BODY tag realizuje (drugim reĉima kad se uĉita cela stranica) onda se aktivira vrednost atributa, to jest u konkretnom sluĉaju pokreće se na izvršenje naša funkcija. JavaScript promenjljive U JavaSript razlikujemo formalne, i nazovimo, neformalne tipove podataka. Formalni podaci su oni koje programer definiše u promenjljive, a neformalni su oni koji se razmenjuju izmedju JavaScript koda i Brauzera. Na primer ako postoji JavaScript naredba koja kontroliše kliktanje na neko dugme, onda kad se klikne brauzer i JavaScript razmenjuju neformalne podatke o kliktanju. Nećemo ulaziti u detalje neformalnih podataka ali eto ĉisto da se napomene. Podaci koji nas kao JavaScript programere najviše zanimaju su naravno formalni JavaScript podaci. Formalni tipovi podataka su: String- niz znakova unutar navodnika Brojevi- bilo koji broj koji nije pod navodnicima Boolean- logiĉko istinito(true) ili neistinito(false) Null- lišeno vrednosti Object- sva svojstva i metodi koji pripadaju objektu ili nizu Function- definicija funkcije Najpogodniji naĉin za rad sa podacima u skriptu je dodeljivanje podataka promenljivima. Promenljiva se u JavaScript-u definiše metodom dodeljivanja. Na primer promenjljivoj pod nazivom brojucenikadodelimo vrednost 30: brojucenika = 30 Operator za dodeljivanje vrednosti je znak jednakosti. U JavaScriptu imena promenljivih se sastoje od slova engleske abecede (a-z, A-Z), cifara (0-9) i donje crte ( _ ). Kao poĉetni znak u nazivu promenjljive moţe biti slovo i donja crta ali ne i broj. Za ime promenljive ne moţe se uzeti ni jedna JavaScript kljuĉna reĉ. Promenljiva u nazivu ne moţe sadrţati razmak. Ako ipak postoji potreba za imenom od više reĉi, postoje dve varijante zdruţivanja reĉi u jednu. Prva je da se reĉi razdvoje donjom crtom (broj_ucenika), a u druga da poĉetno slovo reĉi bude veliko slovo (brojucenika). U promenjljivama se razlikuju mala i velika slova pa su brojkilograma i BrojKilograma dve razliĉite promenjljive. Promenjljivoj koja je deklarisana unutar funkcije moţe se pristupiti samo unutar te funkcije. Kada se funkcija napusti, promenljiva prestaje da vaţi. Ovakve promenljive se nazivaju lokalne i moţe postojati više lokalnih promenljivih sa istim imenom u razliĉitim funkcijama. Ako je promenljiva deklarisana van funkcije tada je slobodna za pristup svim funkcijama sa stranice, ali koje su ispod promenjljive u kodu. Oblast vaţenja ovih promenljivih tzv. globalnih, poĉinje od mesta gde su deklarisane pa sve do kraja koda. Tipovi podataka Celi brojevi Celi brojevi u JavaScript-u mogu biti predstavljeni u tri formata: u decimalnom (baza 10), u oktalnom (baza 8) i heksadecimalnom (baza 16). Decimalni celi brojevi se predstavljaju kao niz cifara (0-9) bez vodeće nule. Oktalni celi brojevi se predstavljaju kao niz cifara (0-7) predvoċen sa nulom ( 0 ). Heksadecimalni celi brojevi se predstavljaju kao niz cifara (0-9) i slova (a-f ili A-F) predvoċen sa nulom koju sledi slovo x ( 0x ili 0X ). Primer prestavljanja decimalnog celog broja deset (10) u tri brojna sistema je: [92]

93 decimalnom: 10. oktalnom: 012. heksadecimalnom: 0xA. Broj 0 ispred oktalnih i oznaku 0x ispred heksalnih brojeva treba shvatiti kao oznake kako bi program razlikovao o kojim brojevima se radi. Brojevi u pokretnom zarezu Brojevi u pokretnom zarezu imaju sledeće delove: decimalni ceo broj, decimalnu taĉku (. ) i deo iza decimalne taĉke. A moţe se napisati i kao eksponent sa oznakama e ili E, praćen decimalnim celim brojem. Primeri brojeva u pokretnom zarezu su sledeći: E12-3.1E12 2E-10 Boolean Boolean tip podataka moţe imati samo dve vrednosti: true (taĉno) i false (netaĉno). Stringovi Stringovi su znakovni podaci smešteni izmedju dvostrukih ili jednostrukih navodnika. Stringovi mogu biti tekstovi, brojevi, ili bilo koji znaci ali iskljuĉivo smešteni unuter navodnika. Evo par primera stringova: "string" "12cc34ccc" "PRVA LINIJA druga linija" U JavaScript stringovima moţete koristiti i sledeće specijalne tekst oznake: \b - pomeraj za jedno mesto ulevo (backspace), \f - pomeraj jedan red dole (form feed), \n - pomeraj na poĉetak novog reda (new line), \r - povratak (carriage return), \t - tabulator (tab). TakoĊe je ĉesto neophodno koristiti navodnike unutar samih navodnika koji definišu string. Korišćenje navodnika unutar stringa moţete realizovati upotrebom obrnute kose crte ispred navodnika. Na primer: navod = "<p>javascript je vrlo moćno <b>\"oružje\"</b>." Primećujete da se kao string mogu koristiti i HTML kodovi!!! Operatori [93]

94 Aritmetički operatori: Operator Naziv Primer rezultat + sabiranje oduzimanje * množenje 2 * 2 4 / delenje 5 / % moduo 5 % uvedanje za 1 (inkrament) -- umanjenje za 1 (dekrament) x = 4; x++ 5 x = 4; x-- 3 Operatori dodeljivanja: Operator Primer Ekvivalentno = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y Operatori poredjenja: Operator Opis = = jednako!= nije jednako > vede < manje >= vede ili jednako Logički operatori: Operator Opis && AND (logičko I) OR (logičko ILI)! NOT (logičko NE) <= manje ili jednako String operator String operator spaja dva ili više stringa a znak je obiĉan znak plus +: t1 = "Dobar" t2 = "dan!" t3 = t1 + t2 Vrednost promenljive t3 sada je "Dobardan!" Ako hoćemo razmak izmedju reĉi onda pišemo: [94]

95 t1 = "Dobar" t2 = "dan!" t3 = t1 + " " + t2 Ili da upišemo razmak u jedan od stringova: t1 = "Dobar " t2 = "dan!" t3 = t1 + t2 Uslovni operator JavaScript ima i jedan uslovni operator (ternarni) koji dodeljuje vrednost promenljivoj na osnovu nekog uslova. Sintaksa je sledeća: imepromenljive = (uslov)? vrednost1 : vrednost2 Dakle, ako je uslov zadovoljen promenljivoj imepromenljive se dodeljuje vrednost vrednost1, a ako nije zadovoljen uslov onda vrednost2. Prioriteti operatora Prioritet Operator Objašnjenje ( ) male zagrade 1 [] vrednost indeksa niza function( ) bilo koji poziv funkcije! logiĉko NOT ~ NOT nad bitovima - znak za negativni broj ++ povećanje za umanjenje za 1 typeof void delete brisanje elementa niza ili objekta * mnoņenje 3 / deljenje % modulo + sabiranje 4 - oduzimanje << pomeranja u operacijama nad 5 > bitovima >> < <= 6 operatori poredjenja < >= 7 = = jednako!= nejednako [95]

96 8 & AND nad bitovima 9 ^ XOR nad bitovima 10 OR nad bitovima 11 && logiĉko AND 12 logiĉko OR 13? uslovni operator 14 = += -= *= /= %= <<= operatori dodele >= >>= &= ^= = 15, zarez (za razdvajanje parametara) Veći prioritet imaju oni operatori koji su pod manjim rednim brojem, a koji imaju isti redni broj, onda oni koji su pri vrhu. Nizovi Videli smo kako se definišu promenjljive. Medjutom u JavaScript se mogu koristiti i nizovi. Niz je promenjljiva koja ima više vrednosti. Jednoj istoj promenjljivoj moţemo dodeliti više vrednosti u isto vreme tako što svaka vrednost ima svoj indeks. Na primer imamo promenjljivu brojevi i ajde da toj promenjljivoj dodelimo 5 razliĉita broja kao vrednosti: brojevi = Array(2, 4, 12, 43, 9) Ili moţemo ovako: brojevi = Array() brojevi[0] = 2 brojevi[1] = 4 brojevi[2] = 12 brojevi[3] = 43 brojevi[4] = 9 Ili ovako: brojevi = [2, 4, 12, 43, 9] Ili ovako: brojevi = [] brojevi[0] = 2 brojevi[1] = 4 brojevi[2] = 12 [96]

97 brojevi[3] = 43 brojevi[4] = 9 Vidite da kad god ţelimo napraviti neki niz moramo upotrebiti rezervisanu reĉ Array zajedno sa malim zagradama. Pišite tako da uvek prvo slovo "A" bude veliko! E sad ukoliko znamo unapred vrednosti koje ţelimo dodeliti nizu onda te vrednosti i upisujemo direkto u zagradama, kao u prvom sluĉaju. Ali moţemo i ostaviti praznu zagradu pa dole ispod u nekim izraĉunavanjima dodeliti vrednosti nizu, na primer kad neznamo unapred koje će se vrednosti dobijati u nekim izraĉunavanjima. Moţemo malo skratiti pisanje ako umesto Array() pišemo samo srednje zagrade [ ] kao u primeru 3 i 4. U daljim izraĉunavanjima moţemo pojedinaĉno koristiti koji god ţelimo konkretnu vrednost niza. Na primer moţemo izraĉunati i ovako: s = brojevi[2] + brojevi[4] Takodje pošto je niz promenjljiva moţemo u nastavku skripte i menjati vrednosti kako pojedinaĉnih vrednosti pojedinih elemenata niza tako i više njih, pa i svih ako se ukaţe potreba. Da rezimiramo, indeksi niza su brojevi 0, 1, 2, 3, 4 a vrednosti su redom 2, 4, 12, 43, 9, a"brojevi" je naziv niza. U JavaScript-u indeksi mogu biti samo brojevi. Osnovne funkcije JavaScrip ima izuzetno mnogo ugradjenih funkcija. Sve te ugradjene funkcije imaju neku svrhu, pa tako i ove osnovne. Osnovne funkcije mogu manipulisati brojevima, tekstovima, uredjivti brojeve, tekstove. Funkcije mogu izvršavati neke ugradjene matematiĉke radnje, ili kao rezultat da vraćaju vreme u minutima, ĉasovima, danima, itd, itd. Spektar mogućnosti ugradjenih funkcija u JavaScript je izuzetno veliki a upravo to daje velike mogućnosti JavaScript-u. Malte ne sve do kraja ovog kursa mi će mo prouĉavati u velikoj meri uglavnom ugradjene funkcije, a u ovom delu prouĉićemo one najosnovnije koje se i najmasovnije i najĉešće i koriste. Opšte JavaScript funkcije eval( ) Ako je argument eval funkcije string koji predstavlja neki JavaScript izraz, eval će izvršiti izraz. Ako argument predstavlja jednu ili više JavaScript naredbi, eval će izvršiti te naredbe. Ova funkcija je takodje korisna za transformisanje stringa koji predstavlja numeriĉki izraz u broj, itd. Evo primera i sve će biti jasno: <html><body> <script type=text/javascript> a = "3 + 5" document.write(eval(a)) </script> </body></html> Rezultat će biti: 8 parsefloat( ) Ako je string broj ili strin poĉinje brojem, parsefloat taj broj prebacuje iz string u broj. Evo primer sa više varijacija: [97]

98 <script type="text/javascript"> document.write(parsefloat("10") + ", "); document.write(parsefloat("10.00") + ", "); document.write(parsefloat("10.33") + ", "); document.write(parsefloat(" ") + ", "); document.write(parsefloat(" 60 ") + ", "); document.write(parsefloat("40 godina") + ", "); document.write(parsefloat("ona ima 40 godina")); </script> Rezultat: 10, 10, 10.33, 34, 60, 40, NaN escape( ) Escape vraća string koji sadrţi ASCII kod karaktera koji nisu slova u obliku %xx, gde je xx numeriĉki kod karaktera. Evo primera: <script type="text/javascript"> document.write(escape("sta volis? COKOLADU!")); </script> Rezultat: Sta%20volis%3F%20COKOLADU%21 unescape( ); Unescape je revizibilna (suprotna) od escape( ). Evo primer: <script type="text/javascript"> document.write(unescape("sta%20volis%3f%20cokoladu%21")); </script> Rezultat: Sta volis? COKOLADU! length Length funkcija u stringu broji karaktere a za nizove broji koliko ima elemenata niza. Brojanje poĉinje sa 1. Evo primer: <script type="text/javascript"> a = [1, 3, 7, 5, 4] b = "Ana voli Milovana" c = a.length d = b.length document.write(c + "<br>" + d) </script> Rezultat: [98]

99 5 17 JavaScript funkcije nizova concat( ) concat( ) spaja dva ili više niza. Evo primer: a = [2, 4, "Milan"] b = [5, 2, 3] c = [1, 7, 9] spoj = a.concat(b, c) Niz spoj će imati vrednosti: 2, 4, "Milan", 5, 2, 3, 1, 7, 9. A da smo primera radi napisali b.concat(c, a) vrednosti bi bile: 5, 2, 3, 1, 7, 9, 2, 4, "Milan". Mogu i više od 3 niza. join( ) join( ) funkcija sve elemente niza spaja u jedan string. Evo primera: <html><body> <script type="text/javascript"> voce = ["Banana", "Jabuka", "Narandza", "Mango"]; document.write(voce.join( ) + "<br>"); document.write(voce.join("+") + "<br>"); document.write(voce.join(" plus ")); </script> </body></html> Kao rezultat u brauzeru će se pojaviti sledeće: Banana,Jabuka,Narandza,Mango Banana+Jabuka+Narandza+Mango Banana plus Jabuka plus Narandza plus Mango Mislim da je ovde što se tiĉe same funkcije sve jasno. Medjutim da objasnimo document.write. Write je funcija za ispisivanje na ekran onog što je u zagradi. Medjutim ako napišemo samo write neće se ispisati. Da bi se ispisalo moramo definisati u kom objektu ţelimo ispisivanje. Ako ţelimo u sklopu našeg HTML dokumenta onda moramo napisati document pa taĉka pa onda write, i onda u zagradi ono što ţelimo ispisati. pop( ) pop( ) funkcija briše zadnji element u nizu a ujedno i vraća tu vrednost, tako da ako ţelimo moţemo tu izbrisanu vrednost smestiti u neku novu promenjljivu. Evo primera: a = [1, 3, 6] b = a.pop( ) document.write(a + "<br>" + b) Rezultat će biti: [99]

100 1,3 6 shift( ) shift( ) funkcija je ista kao i pop( ) samo što uklanja prvi element i vraća ga ako je potrebno u nekoj promenjljivoj. push( ) push( ) funkcija dodaje nove elemente na kraj niza a ako nam je potrebno i vraća broj koji je jednak ukupnom broju elemenata niza sa novim elementima koji su dodati. <script type="text/javascript"> voce = ["Banana", "Kivi", "Jabuka", "Mango"]; document.write(voce.push("kruska") + "<br>"); document.write(voce.push("limun", "Grozdje") + "<br>"); document.write(voce); </script> Rezultat: 5 7 Banana,Kivi,Jabuka,Mango,Kruska,Limun,Grozdje unshift( ) unshift( ) funkcija je skoro ista kao i push( ) samo što dodaje nove elemente na poĉetku niza. Naravno i on vraća po potrebi broj elemenata novokomonovanog niza. reverse( ) reverse( ) funkcija pravi obrnuti redosle elemenata u nizu. Onaj koji je prvi biće zadnji, drugi, biće predzadnji itd. <script type="text/javascript"> voce = ["Banana", "Kivi", "Jabuka", "Mango"]; document.write(voce.reverse( )); </script> Rezultat: Mango,Jabuka,Kivi,Banana slice( ) slice( ) funkcija odabira deo niza i vraća u novi niz. Prvi broj u zagradi je od kog broja elementa će se iseći niz a drugi broj je krajnji element. Broji se od 1. <html><body> <script type="text/javascript"> voce = ["Banana", "Jabuka", "Narandza", "Mango"]; document.write(voce.slice(1, 3 ) + "<br>"); document.write(voce.slice(1, 2) + "<br>"); document.write(voce.slice(3)); [100]

101 </script> </body></html> Rezultat: Jabuka,Narandza Jabuka Mango sort( ) sort( ) funkcija sortira elemente niza po abecednom redosledu, ili po brojĉanom. Mislim da ovde ne treba primer ali vi moţete da eksperimentišete. splice( ) splice( ) funkcija dodaje i uklanja elemente u nizu. Evo primera: <script type="text/javascript"> voce = ["Banana", "Narandza", "Jabuka", "Mango"]; voce.splice(2, 0, "Limun"); document.write(voce); </script> Rezultat:Banana,Narandza,Limun,Jabuka,Mango Tekstualne string funkcije Ovde neću objańnjavati sve pojedinaĉno jer je lako shvatiti sve funkcije iz sledećeg primera (uz napomenu da ne rade bań sve funkcije u svim brauzerima): <html><body> <script type="text/javascript"> txt="hello World!"; document.write("<p>big: " + txt.big() + "</p>"); document.write("<p>small: " + txt.small() + "</p>"); document.write("<p>bold: " + txt.bold() + "</p>"); document.write("<p>italic: " + txt.italics() + "</p>"); document.write("<p>blink: " + txt.blink() + "</p>"); document.write("<p>fixed: " + txt.fixed() + "</p>"); document.write("<p>strike: " + txt.strike() + "</p>"); document.write("<p>fontcolor: " + txt.fontcolor("red") + "</p>"); document.write("<p>fontsize: " + txt.fontsize(16) + "</p>"); document.write("<p>subscript: " + txt.sub() + "</p>"); document.write("<p>superscript: " + txt.sup() + "</p>"); document.write("<p>link: " + txt.link(" "</p>"); </script> </body></html> [101]

102 Rezultat: Big: Hello World! Small: Hello World! Bold: Hello World! Italic: Hello World! Blink: Hello World! Fixed: Hello World! Strike: Hello World! Fontcolor: Hello World! Fontsize: Hello World! Subscript: Hello World! Superscript: Hello World! Link: Hello World! String funkcije charat( ) charat( ) funkcija vraća znak iz stringa u zavisnosti od poloţaja. Broji se od 0. Znaĉi prvi znak u stringu je na nultom poloţaju. <script type="text/javascript"> str="hello world!"; document.write(str.charat(1), str.charat(4), str.charat(6)); </script> Rezultat: eow charcodeat( ) charcodeat( ) funkcija isto kao prethodna samo što vraća ASCII kod znaka. [102]

103 fromcharcode( ) fromcharcode( ) funkcija pretvara ASCII kodove u odgovarajuće znakove. document.write(string.fromcharcode(72,69,76,76,79)) Rezultat: HELLO indexof( ) indexof( ) funkcija vraća broj koji pretstavlja poziciju traţenog teksta u stringu. Broji se od 0. Ako ne nadje reĉ vraća - 1. Obratite paţnju da je fukcija osetljiva na mala i velika slova. <script type="text/javascript"> str = "Hello world!"; document.write(str.indexof("hello") + "<br>"); document.write(str.indexof("world") + "<br>"); document.write(str.indexof("world")); </script> Rezultat: slice( ) slice( ) funkcija seĉe delove stringa i takve ih vraća. <script type="text/javascript"> str="hello happy world!"; document.write(str.slice(0)+"<br>"); // ne seče ništa document.write(str.slice(6)+"<br>"); // seče od znaka na poziciji 6 document.write(str.slice(-6)+"<br>"); // seče od pozicije 6 ali od pozadi document.write(str.slice(0,1)+"<br>"); document.write(str.slice(6,11)+"<br>"); </script> Rezultat: Hello happy world! happy world! world! H happy split( ) split( ) funkcija deli string na osnovu definisanog znaka i duţine, i te delove smešta u niz. [103]

104 <script type="text/javascript"> var str="how are you doing today?"; a=[]; b=[]; c=[]; d=[]; a=str.split(); b=str.split(" "); c=str.split(""); d=str.split(" ",3); document.write(a +"<br>"+ b +"<br>"+ c +"<br>"+ d); </script> Rezultat: How are you doing today? How,are,you,doing,today? H,o,w,,a,r,e,,y,o,u,,d,o,i,n,g,,t,o,d,a,y,? How,are,you substr( ) substr( ) funkcija izvlaĉi odredjen broj znakova iz string. <script type="text/javascript"> str="hello world!"; document.write(str.substr(3)+"<br>"); document.write(str.substr(3, 4)); </script> Rezultati lo world! lo w tolowercase( ) tolowercase( ) funkcija prebacuje sve znakove stringa u mala slova touppercase( ) touppercase( ) funkcija prebacuje sve znakove stringa u velika slova JavaScript regularni izrazi Regularni izraz (engl. skr. regexp ili regex, u mnoţini regexps, regexes ili regexen) je string koji opisuje, menja, sparuje, ili pretraţuje skup stringova, u skladu sa odreċenim sintaksnim pravilima. Regularni izrazi proširuju mogućnosti manipulacijom stringova i to pomoću javascript funkcijama kao što su: match( ) replace( ) search( ) U JavaScript -u string regularnog izraza ima dva dela: [104]

105 regizraz = /uzorak/modifikatori Znaĉi, izmedju dve kose crte se piše konkretno uzorak regularnog izraza (koji se sastavlja iz tabela "Zagrade" "Metakarakteri" "Kvantifikatori") a modifikator je jedan ili više simbola (mogu i sva tri simbola biti zajedno samo ih pišete jedan pored drugi) iz tablice "Modifikatori". Modifikator i g m Modifikatori: Opis Ne pravi razliku izmedju mala i velika slova Prodi kroz ceo string. A kad je bez " g " onda kad se naidje na prvo podudaranje ili pretragu onda se staje Izvodi podudaranje svih redaka Izgled Zagrade Opis [abc] [^abc] Pronadi bilo koji znak a, b, c Pronadi bilo koji znak a da nije a, b, c [0-9] Pronadi brojeve od 0 do 9 [a-z] [A-Z] [a-z] [belo plavo crno] pronadi sva mala slova pronadi sva velika slova pronadi sva slova pronadi ili reč belo ili reč plavoili reč crno Metakarakter Metakarakteri Opis. Tačka pronalazi bilo koji znak, ili zamenjuje bilo koji znak \w Pronalazi bilo koji word znak. Znači slova, brojevi i podvučeno. \W Pronalazi bilo koji znak osim word znakova. \d Pronalazi brojeve \D Pronalazi bilo koji znak osim brojeve [105]

106 \s Pronalazi razmake i tabulatore, ekvivalentno izrazu [\t\n\r\f\v] \S Pronalazi znakove a da nisu tabulatori i razmak \b Pronadji podudaranje na početku ili/i kraju reči \B Pronadji podudaranje ali da nije na početku i kraju reči \0 Nadji null znak \n Pronadji znak novog reda \f Pronadji novi red \r pronadji povratak \t Pronadji tabulator \v Pronadji vertikalni tabulator \xxx \xdd \uxxxx Pronadji znak mimo oktalnog broja xxx Pronadji znak mimo heksadecimalnog broja dd Pronadi Unicode znak naveden mimo heksadecimalnog broja xxxx Kvatifikator n+ Kvantifikatori Opis Pronalazi jednom ili više puta prethodni znak. Na primer bo+ de pronadi bo, i boo, ali nede i b n* Isto kao gore samo što pronalazi i nula puta, odnosno pronadi de i b n? Pronalazi na primer b i bo ali nede boo n{x n{x,y n{x, Pronalazi znak n tačno X puta. Na primer o{2 pronalazi samo oo na primer o{2,4 pronalazi oo, ooo, i samo još oooo Pronalazi minimum X puta. Na primer o{3 pronalaziooo, oooo i tako dalje n$ Traži znak na kraju reči. Na primer abc$ podudaride se sa reči pegfabc ^n Traži znak na početku reči. Na primer ^abc podudaride se sa reči abcdefr [106]

107 ?=n?!=n Pronalazi bilo koji niz koji sledi specifičan niz n Pronalazi bilo koji niz koji ne sledi specifičan niz n match( ) match( ) funkcija vraća podudaranja ako ih nadje, na primer izmedju regularnog izraza i stringa koji se kontroliše. Ako ne nadje vraća nulu. Evo primera: <script type="text/javascript"> str="mali pali za palidrom"; document.write(str.match(/ali/gi)); </script> Rezultat: ali,ali,ali replace( ) replace( ) funkcija traţi podudaranje izmedju stringova, ili regularnog izraza i stringa, i ako nadje vrši zamenu tog nadjenog sa novin stringom. Evo primera: <script type="text/javascript"> str="poseti danas Danicu."; document.write(str.replace(/dan/gi, "nocas")); </script> Rezultat: Poseti nocasas nocasicu. search( ) search( ) funkcija traţi podudaranje izmeċu regularnih izraza i stringa, i vraća poloţaj podudaranja: Znakove broji od 0. A ako ne nadje vraća -1. <script type="text/javascript"> str="poseti danas Danicu"; document.write(str.search(/dan/i)); </script> Rezultat: 7 Matematiĉke funkcije [107]

108 Funkcije za brojeve tofixed( ) - fiksira odredjeni broj decimalnih mesta <script type="text/javascript"> num = ; document.write(num.tofixed()+"<br>"); document.write(num.tofixed(1)+"<br>"); document.write(num.tofixed(3)+"<br>"); document.write(num.tofixed(10)); </script> Rezultat: toprecision( ) - kao gore samo obuhvata ceo broj <script type="text/javascript"> var num = new Number( ); document.write(num.toprecision()+"<br>"); document.write(num.toprecision(1)+"<br>"); document.write(num.toprecision(2)+"<br>"); document.write(num.toprecision(3)+"<br>"); document.write(num.toprecision(10)); </script> Rezultat: e tostring( ) - Prebacuje broj u string Konstante E - Vraća Eulerov broj (approx ) LN2 - Vraća prirodan logaritam od broja 2 (approx ) LN10 - Vraća prirodan logaritam od broja 10 (approx ) LOG2E - Vraća LOG10E - Vraća PI - Vraća PI (approx ) SQRT1_2 - Vraća kvadratni koren od 1/2 (approx ) SQRT2 - Vraća kvadratni koren od 2 (approx ) Matematiĉke funkcije abs( ) - Apsolutna vrednost broja. Evo primera [108]

109 <script type="text/javascript"> document.write(math.abs(7.25) + "<br>"); document.write(math.abs(-7.25) + "<br>"); document.write(math.abs(null) + "<br>"); document.write(math.abs("hello") + "<br>"); document.write(math.abs( )); </script> Rezultet: NaN 2.75 Znaĉi piše se Math pa taĉka pa onda funkcija odgovarajuća. Tako se piše i za ostale matematiĉke funkcije koje ću dati samo kao spisak. acos(x) - Vraća arkus sinus od x, u radijanima asin(x) - Vraća arkus kosinus od x, u radijanima atan(x) - Vraća arkus tangens od x, u radijanima atan2(y,x) - Vraća arkus tangens od koliĉnika argumenata ceil(x) - Vraća veći najbliţi celi broj cos(x) - Vraća kosinus od x u radijanima exp(x) - Vraća vrednost eksponenta od x floor(x) - Vraća zaokruţeni najniţi celi broj log(x) - Vraća prirodni logaritam broja x max(x,y,z,...,n) - Vraća najveći broj min(x,y,z,...,n) - Vraća najmanji broj. pow(x,y) - Vraća broj koji se dobije kad se x stepenuje na y random( ) - Vraća sluĉajan decimalni broj iz opsega od 0 do 1 round(x) - Vraća celi broj sin(x) - Vraća sinus od x sqrt(x) - Vraća kvadratni koren od x tan(x) - Vraća tangens od x Datum funkcije getdate( ) - Daje tekući dan u mesecu u broju. <script type="text/javascript"> d = new Date() danumesecu = d.getdate(); document.write(danumesecu); </script> [109]

110 Rezultat: 6 Obratite paţnju da smo prvo napravili naš objekat d uz pomoć new Date( ) pa tek onda izvukli informaciju iz getdata( ) i to tako što smo napisali d.getdata( ). Za ostale vremenske funkcije neću više nadalje sve ovako pisati ali znajte da se sve tako radi. Sad ću dati spisak ostalih datumskih funkcija koje su interesantne nama: Funkcija Opis getday() Vraća tekući dan u nedelji (opseg 0-6) getfullyear() Vraća godinu u formatu 4 broja gethours() Vraća sat (0-23) getmilliseconds() Vraća milisekundu (0-999) getminutes() Vraća minutu (0-59) getmonth() Vraća mesec (0-11) getseconds() sekundu (0-59) gettime() Vraća broj milisekundi koji je protekao od ponoći 1. januara, 1970 do sadańnjeg trenutka gettimezoneoffset() Vraća vremensku razliku izmeċu GMT i lokalnog vremena, u minutama getutcdate() Prikazuje dan u mesecu, prema univerzalnom vremenu (1-31) getutcday() Univerzalno, dan u nedelji (0-6) getutcfullyear() Univerzalna godina u formatu 4 broja getutchours() Univerzalni ĉasovi (0-23) getutcmilliseconds() Univerzalni milisekundi (0-999) getutcminutes() Univerzalni minuti (0-59) getutcmonth() Univerzalni mesec (0-11) getutcseconds() Univerzalne sekunde (0-59) getyear() Godina u formatu 4 cifre tolocaledatestring() Vraća lokalni string na primer: 16. decembar 2009 tolocaletimestring() Vraća sat u formatu: 22:57:22 tolocalestring() Puno vreme i datum lokalno u formatu: 16. decembar :58:05 totimestring() U formatu: 22:59:27 UTC+0100 toutcstring() U formatu: Wed, 16 Dec :59:57 UTC tostring() Kompletno u formatu: Wed Dec 16 22:58:44 UTC Kontrolne strukture Kontrolne strukture odnose se na upravljanje tokom izvoċenja programa. Strukturno programiranje temelji se na tri osnovne kontrolne strukture: sekvenca (sled, programski blok), selekcija (grananje, odabir) i iteracija (petlja). Nestrukturno programiranje pridodaje još i skokove. Tipiĉna instrucija skoka je break i continue. Sekvenca, poznatija kao programski blok, predstavlja niz instrukcija obrade koje se izvode uzastopno. U JavaScriptu poĉetak sekvence oznaĉava se levom vitiĉastom zagradom {,a kraj sekvence desnom vitiĉastom zagradom. Evo primer: [110]

111 { // Telo bloka u kome se smeštaju JavaScript izrazi (instrukcije) Svaka leva vitiĉasta zagrada ima odgovarajuću desnu, odnosno svaki programski blok mora biti zatvoren. Programski blok (sekvenca) moţe da se nadje u petljama, kontrolnim strukturama kao što su IF - else, funkcije itd. Specijalni sluĉaj programskog bloka je onaj kada se on sastoji od samo jedne instrukcije obrade. Tad se ne moraju koristiti vitiĉaste zagrade za oznaĉavanje poĉetka i kraja sekvence. JavaScript IF, IF ELSE i SWITCH grananja If Najednostavnija odluka u programu jeste praćenje neke grane ili putanje programa ako je ispunjen odreċen uslov. Formalna sintaksa za ovu konstrukciju je: if (uslov) { // kod koji se izvršava ako je uslov true Ako se vrši grananje u oba sluĉaja, i kad je uslov ispunjen a i kad nije, koristi se onda if elsekonstrukcija. if (uslov) { //kod koji se izvršava ako je uslov true else { //kod koji se izvršava ako je uslov false A moţemo pratiti i nekoliko uslova. if (uslov1) { //kod koji se izvršava ako je uslov1 true else if (uslov2) { //kod koji se izvršava ako je uslov2 true else { //kod koji se izvršava ako uslov1 i uslov2 nemaju vrednsot true Evo konkretan primer. Za veće kupovine daje se popust: Za manje od 5 kupljenih artikla nema popusta, 5 10 popust 10%, popust 12%, 16 i više - popust 15% Evo kako bi izgledao kod: if (kolicina < 5) procenat = 0; else if (kolicina > 4 && kolicina < 11) procenat = 10; else if (kolicina > 10 && kolicina < 16) procenat = 12; else (kolicina > 15) procenat = 15; Ovde uslovi jedan drugi iskljuĉuje pa će se izvršiti samo jedan, ali ako se uslovi preklapaju biće izvršen onaj na koga se prvo naidje a ostali će biti preskoĉeni. [111]

112 SWITCH Takodje i SWITCH odluĉuje izmedju više opcija. Na primer, napravimo program koji će brojeve od 1 do 3 imenovati, a ako je u pitanju neki drugi broj izvan skupa od 1 do 3 da ispiše "vrednost promenjljive nije iz skupa jedan do tri". switch (a) { case 1: document.write("jedan"); break; case 2: document.write("dva"); break; case 3: document.write("tri"); break; default: document.write("vrednost promenjljive nije iz skupa od jedan do tri"); break; Umesto na primer "case 1:" moţemo pisati i neki matematiĉki izraz ako je neophodno, pa tako bi bilo na primer: case (b * ); Isto moţe i neki ovakav program da se pojavi: switch (x) { case (y * 4): case (9 * 3): document.write("zapamti"); break; default: document.write("zaboravi"); Dakle, mogu se pojaviti više CASE naredbe sa jednom BREAK naredbom. Naredba DEFAULT obezbeċuje nastavak po putanji izvršavanja kada vrednost izraza ne odgovara ni jednoj oznaci naredbe CASE. Naredba BREAK, koja sluţi za izlazak iz petlje, ovde ima znaĉajnu ulogu. Naime, ako nije navedeno break posle svake grupe naredbi u case granama, izvršiće se sve naredbe iz svake case grane bez obzira na to da li je naċena odgovarajuća oznaka. JavaScript FOR, WHILE i DO WHILE petlje For petlja For petlja omogućava višestruko prolaţenje kroz jedan te isti programski blok. for (pocetniizraz; uslov; korak) { // naredbe Tri parametra unutar zagrada petlje for igraju kljuĉnu ulogu. U petlji pocetniizraz izvršava se samo jednom kada se pokreće petlja. Najĉešća primena poĉetnog izraza je dodela imena i poĉetne vrednosti promenljivoj brojaĉa petlje. Izraz uslov definiše do koje vrednosti brojaĉ petlje treba da ide pre nego što se kruţenje završi. Poslednja izraz korak nakon svakog izvršenja petlje uvećava ili smanjuje za odredjeni korak brojaĉ. [112]

113 Evo na primer napišimo kod koji ispisuje brojeve od 0 do 10, svaki u posebnom redu. <html><body> <script language="javascript"> for (var i=0; i<=10; i++) { document.write(i + "<br>") </script></body></html> while petlja While petlja izvršava blok koda sve dok je uslov ispunjen. While petlja se koristi kada neznamo unapred broj iteracija. Kada je poznat broj iteracija obiĉno se koristi for petlja jer je brţa. Kao primer ispišimo brojeve od 10 do 20: a=10; While (a < 21) { document.write(a + "<br>"); a++; Do while JavaScript nudi još jednu konstrukciju petlje zvanu do while. Formalna sintaksa za ovu konstrukciju je sledeća: do { //naredbe while (uslov) Razlika izmeċu while i do.. while petlje je ta što se u do.. while petlji naredbe izvršavaju bar jednom pre nego što se uslov ispita, dok u petlji while to nije sluĉaj. Po nekad petlje nemaju potrebu da nastave kruţenje kroz ostatak vrednosti u opsegu brojaĉa petlje. Tad se za izlazak iz petlje koristi naredba break. Ona govori JavaScript-u da izaċe iz petlje, i izvršavanje skripta se nastavlja odmah iza bloka petlje. continue Naredba continue primorava skript da, ako je uslov ispunjen, preċe na sledeći korak tj. poveća vrednost brojaĉa i nastavi petlju od te vrednosti. for(i = 1; i <= 20; i++){ if (i = = 13) { continue; naredbe... U sluĉaju ugneţċenih for petlji, naredba continue utiĉe na petlju for u ĉiji trenutni opseg spada i konstrukcija if. Sopstvene funkcije Funkcije koje mi kreiramo predstavljaju jednu od veoma bitnih orudja JavaScript-a. Jednostavno reĉeno, funkcija je imenovani blok koda koga sami pravimo jednom a po potrebi upotrebljavamo više puta. Ako se deo nekog koda, ili neko izraĉunavanje stalno i ĉesto ponavlja, onda se taj deo koda moţe izdvojiti u funkciju. To će vam omogućiti da funkciju [113]

114 koju sami napišete koristite isto kao i neku ugradjenu funkciju, tako što je pozivate neograniĉen broj puta dodeljivanjem neophodnih parametara. Moţete kreirati proizvoljan broj funkcija u programu. Funkcija moţe vraćati vrednost, bilo promenjljivu, objekt, ili da izvrši neku akciju. Funkcija moţe smestiti bilo gde u okviru jednog HTML dokumenta, ali obiĉno sve funkcije se grupišu u jedan SCRIPT tag u HEAD tag. Ali moţemo ih smestiti u poseban fajl na primer funkcije.js i umetnuti ga u HTML dokument. Unutar funkcije je moguće pozvati druge funkcije definisane unutar istog HTML dokumenta. Izradu sopstvene finkcije zapoĉinjemo rezervisanom reĉju function. Zatim po našem izboru sledi ime funkcije. Slede u zagradi parametri odvojeni zarezom. I na kraju blok naredbi koji će biti izvršen svaki put kad se funkcija pozove. To izgleda ovako: function formula (parametar1, parametar2,..., parametarn, "stringn", 10,.) { //telo funkcije U telu funkcije inaĉe moţete koristite sve vezano za JavaScript što smo do sad nauĉili i šta će mo nauĉiti. U skriptama se ova naša funkcija iz gornjeg primera poziva više puta kad je potrebno na sledeći naĉin: formula (promenjljiva1, masa,..., tezina, "ana voli milovana", 110,.); Evo na primer nešto konkretno: function stampaj(string){ document.write(string) Funkcija stampaj ( ) ima argument promenljivu string. Unutar tela funkcije moţemo sa tom promenjljivom raditi šta god ţelimo. Funkciji se mogu prosleċivati promenljive, konstante, ali i obiĉni stringovi u navodnicima ili i obiĉni brojevi. Ukoliko se promenljiva prosledi funkciji, promena njene vrednosti unutar funkcije ne menja njenu vrednost izvan funkcije. Parametri postoje samo za ţivota funkcije. Ukoliko zovete funkciju više puta, svaki put kada zovete funkcije imaćete "nove" parametre, odnosno vrednost koji će parametri imati na kraju prethodnog poziva funkcije neće biti saĉuvana. Na primer, funkciju stampaj ( ) moţemo pozvati sa bilo kojim parametrom: ime = "Tanja"; stampaj (ime); Kada funkcija poĉne da se izvršava, promenljiva string u funkciji će imati vrednost "Tanja". Isto funkciju stampaj () moţemo pozvati sa konstantom: stampaj ("Tanja"); Kada funkcija poĉne da se izvršava, promenljiva string u funkciji će takoċe imati vrednost "Tanja". Pozivanje JavaScript funkcije se moţe obaviti na više naĉina. 1. Iz druge funkcije ili JavaScript programa: <SCRIPT LANGUAGE="JavaScript"> stampaj("ovo je tekst koji će se prikazati.") </SCRIPT> [114]

115 2. Kao reakciju na dogaċaj: <body OnLoad="stampaj(\"Ovo je tekst koji će se prikazati.\")"> 3. Izborom linka vezanog za dogaċaj: Kao što je prethodno pomenuto, funkcija moţe vraćati i rezultate. Rezultat se iz funkcije vraća korišćenjem naredbe return. Na primer: function kub(broj) { kub = broj * broj * broj; return kub; naredba return vraća vrednost promenljive kub. Znaĉi ne vraća promenjljivu nego samo njenu VREDNOST!!!! Istu funkciju moţemo napisati i na sledeći naĉin, preko vraćanja izraza: function kub(broj) { return broj * broj * broj; Izraz broj * broj * broj će se izraĉunati u jednu vrednost, i ta vrednost se vraća iz funkcije. Funkcije mogu biti rekurzivne, odnosno mogu pozivati same sebe. Rekurzija funkcija je veoma moćna stvar, ali moţe biti i veoma opasna. Duboke rekurzije, ĉak iako nisu beskonaĉne, mogu prouzrokovati pucanje WWW ĉitaĉa. U funkcijama se otvara pitanje o dubini vaţenja promenljivih. Ako smo promenljivu definisali u funkciju, oblast vaţnosti promenljive je ta funkcija. Ako je promenljiva definisana van funcije i to iznad te funkcije, oblast vaţenja te promenjljive je u celoj skripti ukljuĉujući i u funkciji. Takva promenjljiva je globalna promenljiva. Ako definišemo lokalnu promenljivu unutar funkcije sa istim imenom koju već ima neka globalna promenljiva, u toj funkciji će se kreirati nova verzija promenljive ĉija je oblast vaţenja funkcija, dok globalna promenljiva sa istim imenom neće promeniti vrednost. Dogadjaji Kad otvorite neku stranicu u brauzeru vi moţete kliktati, linkovati, pisati u raznim formama, i sliĉno. Sve te akcije su u stvari dogadjaji na osnovu kojih u HTML dokumentu JavaScript moţe aktivirati dalje neka dešavanja na sajtu. ObraĊivaĉi dogaċaja su predstavljeni kao specijalni atributi koji modifikuju ponašanje HTML elemenata u okviru kojih se nalaze. Na primer: <body OnLoad=alert("Dobrodošli!")> U gornjem primeru, u body tagu dodat je JavaScript atribut OnLoad, koji obraċuje dogaċaj uĉitavanja HTML dokumenta. U konkretnom sluĉaju, kada se uĉitavanje HTML dokumenta završi, izvršiće se naredba JavaScripta dodeljena atributu OnLoad. Kao rezultat u iskaĉućem prozorĉetu ispisaće se poruka "Dobrodošli". OnLoad se zove u stvari OBRADJIVAĈ DOGADJAJA. Postoje veći broj JavaScript obradjivaĉa dogadjaja. [115]

116 Obradjivaĉi dogadjaja Daću sve obradjivaĉe dogadjaja tabelarno sa objašnjenjima, i mislim da će znaĉenje biti jasno. A kasnije ćemo većinu obradjivaĉa dogadjaja ponaosob potkrepiti primerima. Dogadjaj Opis Obradjivač dogadjaja blur Kada pomeramo fokus sa elementa onblur click Klik mińa na objekat onclick dblclick Dupli klik mińa na objekat ondblclick change DogaĊa se kada korisnik promeni vrednost u text, textarea ili select elementima forme. onchange focus DogaĊa se kada element forme dobije ulazni fokus. onfocus load DogaĊa se nakon uĉitavanja stranice. onload mouseover DogaĊa se kada korisnik pomera mińa preko objekta onmouseover mouseout DogaĊa se kada miń preċe preko objekta. onmouseout select DogaĊa se kada korisnik izabere ulazno polje forme. onselect submit DogaĊa se kad je forma prosleċena HTTP serveru (kada korisnik klikne na dugme za slanje sadrņaja forme). onsubmit abort Dogadjaj koji se aktivira pri prekidu ucitavanja slike onabort eror Dogadjaj koji se aktivira kada dodje do greske pri ucitavanju slike oneror keydown Dogadjaj koji se aktivira kada se pritisne taster onkeydown keypress Dogadjaj koji se aktivira kada se pritisne taster ili otpusti onkeypress keyup Dogadjaj koji se aktivira kada se taster otpusti onkeyup mousedown Dogadjaj koji se aktivira kada se pritisne taster misa onmousedown mousemove Dogadjaj koji se aktivira kada se pomeri mis onmousemove mouseup Dogadjaj koji se aktivira kada otpusti taster misa onmouseup reset Dogadjaj koji se aktivira kada se pritisne taster Reset onreset resize Dogadjaj koji se aktivira kada se promeni velicina prozora onresize unload DogaĊa se kada korisnik napuńta HTML dokument, pre nego ńto poĉne sa uĉitavanjem novog HTML dokumenta. onunload DogaĊaje vezujemo za sledeće HTML elemente: HTML element Lista za izbor Text element Textarea element Button element Checkbox Radio Button Hypertext Link Reset Button Submit Button Document Određivači događaja koji mogu da se primene onblur, onchange, onfocus onblur, onchange, onfocus, onselect onblur, onchange, onfocus, onselect onclick onclick onclick onclick, onmouseover onclick onclick onload, onunload [116]

117 Window Form onload, onunload onsubmit Dosta objekata ima metode koji simuliraju dogaċaje.to moţe biti posebno korisno u nekim slu;ajevima ako ţelimo da simuliramo neke akcije korisnika. U JavaScriptu su raspoloţivi sledeći simulatori dogaċaja koje će mo kasnije detaljnije prouĉiti: blur( ) click( ) focus( ) select( ) submit( ) OnLoad OnLoad obradjivaĉ dogaċaja se aktivira pošto se HTML dokument (i svi njegovi delovi) kompletno uĉita. Dodeljuje se uglavnom elementima <BODY> i <FRAMESET>. Ako je nekad bitno kada će se i u kom roku uĉitati neka stranica ako koristite OnLoad, moţete biti sigurni da su svi ostali okviri uĉitani. Evo jedan konkretan primer upotrebe OnLoad <html><head> <script type=text/javascript> <!-- function caoo(){ window.alert("dobrodošli u svet JavaScripta!"); // --> </script></head> <body onload="caoo()"> <h3>onload</h3><hr> </body></html> OnUnload Obradjivaĉ dogaċaja OnUnload je koristan za "ĉišćenje" posle posete nekoj prezentaciji. Tokom posete nekoj prezentaciji, korisniku se moţe desiti da ima otvoreno nekoliko prozora kao rezultat rada programa u JavaScriptu. Njih treba zatvoriti, a to se najlakše obalja pomoću OnUnload. <html><head> <script type=text/javascript> function dovidjenja(){ window.alert("hvala što ste svratili."); </script></head> <body OnUnload="dovidjenja()"> <h3>onunload</h3> <p>kada napustite ovu stranicu dobićete pozdravnu poruku.</p> </body></html> [117]

118 OnClick Najĉešće korišćeni obradjivaĉ dogaċaja uzrokovan akcijom miša je OnClick. Objekti koji prihvataju OnClick dogaċaj su linkovi, check box-ovi i dugmad (ukljuĉujući submit, reset i radio buttons). U sledećem primeru daćemo jednostavnu formu koja odgovara na kliktaj komponenti forme. <html><head> <script type=text/javascript> function kliktanje(){ window.alert("aktiviran je onclick dogadjaj!"); </script></head><body> <a href="javascript:kliktanje()">standardni link</a> <form> <input type="radio" OnClick="kliktanje()">RadioButton<br> <input type="checkbox" OnClick="kliktanje()">CheckBox<br> <input type="button" OnClick="kliktanje()" value="standardno dugme"><br> <input type="reset" OnClick="kliktanje()"><br> <input type="submit" OnClick="kliktanje()"><br> </form></body></html> OnFocus DogaĊaj Focus se pojavljuje kada objekat postane predmet u fokusu mišem. To se dogaċa kada korisnik klikne mišem na odreċeni objekat, ili tamo doċe pritiskajući taster tab. Ako korisnik moţe da unese podatke u objekat (ili da promeni trenutni izbor za sluĉaj lista izbora), tada objekat ima fokus. ObraĊivaĉ dogaċaja OnFocus se koristi samo sa objektima text, textarea, password i select. U sledećem primeru prikazujemo upotrebu OnFocus sa jednostavnom formom koju ĉine ulazna polja Ime i Prezime. OnFocus je povezan sa poljem Prezime i prikazuje prozor sa porukom kada korisnik uċe u to polje. <html><head> <script type=text/javascript> function fokus(){ window.alert("\"prezime\" je u fokusu."); </script></head><body> <form> Ime: <input type="text"><br> Prezime: <input type="text" OnFocus="fokus()"> </form></body></html> OnBlur DogaĊaj Blur se pojavljuje kada objekt nije više u fokusu. To se moţe desiti sa prebacivanjem u drugi prozor ili aplikaciju, ili tako što kliknemom mišem na drugi objekt, ili što pomerimo fokus pritiskom na taster tab. ObraĊivaĉ dogaċaja OnBlur se koristi samo sa objektima text, textarea, password i select, baš kao i OnFocus. [118]

119 <html><head> <script language="javascript"> function dodaj(){ a = document.forma.ime.value b = document.forma.prezime.value document.forma.puno.value = (a + " " + b) </script></head><body> <form name="forma"> Ime: <input name="ime" type="text" OnBlur="dodaj()"><br> Prezime: <input name="prezime" type="text" OnBlur="dodaj()"><br><hr> Puno ime: <input name="puno" type="text"> </form></body></html> Nakon unosa i imena i prezimena kliknite gde god ţelite u prostoru brauzera da bi se kompletirao sadrţaj polja "Puno ime". OnChange DogaĊaj change se aktivira uvek kada objekat izgubi fokus i ako se njegova vrednost promenila. ObraĊivaĉ dogaċaja OnChange se koristi samo sa objektima text, textarea, password i select. OnChange moţe biti veoma koristan kada ţelite izraĉunati sumu unetih vrednosti na primer. <html><head> <script type=text/javascript> function kalkulacija(){ a = document.imena.ime1.value b = document.imena.ime2.value c = document.imena.ime3.value document.imena.total.value = a + " " + b + " " + c </script></head><body> <form name="imena"> Ime: <input name="ime1" type="text" OnChange="kalkulacija()"><br> Srednje ime: <input name="ime2" type="text" OnChange="kalkulacija()"><br> Prezime: <input name="ime3" type="text" OnChange="kalkulacija()"> <br><hr> Total: <input name="total" type="text"> </form></body></html> Nakon unosa svega kliknite gde god ţelite u prostoru brauzera da bi se kompletirao sadrţaj polja "Total". OnSelect Obradjivaĉ dogaċaja OnSelect se odnosi samo na text, textarea i password objekte i izvršava se kada korisnik oznaĉi deo teksta u jednom od nabrojanih tipova objekata. Evo i kratkog prmera. <html><head> <script type=text/javascript> function dodaj(){ window.alert("selektovao si tekst") </script></head><body> [119]

120 <form> <textarea rows="2" cols="20" OnSelect="dodaj()">aaaaaaaaaaaaaaa</textarea> </form></body></html> Selektujte malo tekst i pojaviće se reakcija. OnSubmit Obradjivaĉ dogaċaja OnSubmit je povezan sa objektom forme. Najĉešće je potrebno da se podaci uneti u polja forme, provere ili iskoriste pre prosleċivanja sadrţaja forme HTTP serveru. Na taj naĉin, moguće je smanjiti opterećenje samog HTTP servera, pošto se provera grešaka vrši na strani klijenta, te je redukovan broj izveštaja o grešci koje vraća server. OnSubmit omogućava zaustavljanje prosleċivanja sadrţaja forme serveru ako je to neophodno. <html><head> <script type=text/javascript> function proveri(){ if (document.forma.num1.value.length < 11) { window.alert("hvala što ste uneli samo 10 karaktera."); return true; else { window.alert("unesite samo 10 karaktera, molim Vas."); return false; </script> </head><body> <form name="forma" OnSubmit="return proveri(this)"> Unesite do deset karaktera: <input name="num1" type="text" size="10,1"><br><hr> <INPUT TYPE=SUBMIT value="pošalji podatke!"> </form></body></html> U ovom primeru proveravamo samo osnovne vrednosti, duţinu unetih podataka. Koristeći string metode u kombinaciji sa regularnim izrazima moţemo uraditi mnogo sloţenije provere sadrţaja polja forme pre njenog slanja. Ako unete vrednosti u polje ne bi zadovoljili proveru, sadrţaj polja neće biti prosleċen HTTP serveru. Primetite da je u primeru korišćena naredba this. Ona se odnosi na tekući objekat i biće detaljnije objašnjena u nekom od narednih poglavlja. OnMouseOver Kod OnMouseOver obradjivaĉa dogaċaja je dovoljno da pointer miša bude iznad nekog objekta pa da se dogaċaj aktivira. OnMouseOver se moţe upotrebiti za objašnjenje linkova ili dugmadi. U primeru OnMouseOver menja tekst u prozoru dobijenom primenom metoda alert(). <html><head> <script type=text/javascript> function objasni1(){ window.alert("presli ste preko Zdravo kakote"); function objasni2(){ window.alert("presli ste preko dobrosmo"); </script> </head><body> <a href="#" OnMouseOver="objasni1()">Zdravo kakote :)</a><br><br> [120]

121 <a href="#" OnMouseOver="objasni2()">Dobrosmo ;)</a> </body></html> Zavisno od toga preko kog linka preċemo mišem, prozor upozorenja će prikazati drugaĉiji podatak. OnMouseOut U ovom sluĉaju kada pointer miša izaċe iz podruĉja nekog objekta, dogaċaj je okinut. OnMouseOut se ĉesto koristi u sprezi sa dogaċajem OnMouseOver. <html><head> <script type=text/javascript> function objasni(a){ document.formica.limit.value = a </script> </head><body> <form name="formica"> <input type="button" value="dugme 1" OnMouseOver="objasni("preso si na dugme 1")" OnMouseOut="objasni("otiso si od dugmeta 1")"> <input type="button" value="dugme 2" OnMouseOver="objasni("preso na dugme 2")" OnMouseOut="objasni("otiso si od dugmeta 2")"> <input type=text name=limit size=25> </form></body></html> OnKeyUp KeyUp je dogadjaj koji se aktivira kada se taster otpusti. Tako moţemo praviti limiter teksta u textbox -u: <html><head> <script type=text/javascript> count = "100"; function limiter(){ tex = document.myform.comment.value; len = tex.length; if (len > count){ tex = tex.substring(0,count); document.myform.comment.value =tex; return false; document.myform.limit.value = count - len; </script></head><body> <form name="myform"> <textarea name=comment rows=3 cols=40 onkeyup=limiter()></textarea><br> <input type=text name=limit size=4> </form></body></html> Pišite nešto u textbox -u i videćete kako se smanjuje broj preostalh karaktera za ispis. Kad dodje do 100 karaktera više se ne moţe pisati. OnMouseMove OnMouseMovi reaguje na svako pomeranje miša. Evo primer koji sve doĉarava: [121]

122 <html><head> <script type="text/javascript"> function mispomeraj(event){ x=event.screenx; y=event.screeny; document.getelementbyid("txt1").value=x; document.getelementbyid("txt2").value=y; </script> </head> <body onmousemove="mispomeraj(event)"> <form> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> X koordinata kursora: <input type="text" size=10 id="txt1"><br> Y koordinata kursora: <input type="text" size=10 id="txt2"> </form></body></html> Mislim da je sve jasno što se tiĉe onmousemove. Ali u primeru figuriše i EVENT. EVENT je HTML DOM objekat i u tom delu je objašnjen. Ostalih 8 obradjivaĉa dogadjaja moţete i samo testirati na sliĉne naĉine, uz malo mašte. Browser funkcije Document Object Model ( DOM ) je plan organizacije objekata na web stranicama. Svaki objekat je jedinstven. Tri najvaţnije odlike objekata su: metod (u HTML je to ime taga), svojstva (u HTML su to atributi) i osobine (u HTML su to vrednosti atributa). JavaScript DOM ima sledeću hijerarhiju: 1. Ĉisto JavaScript objekti Nizovi Date Math Brojĉani String Regularni izrazi 2. Browser objekti Window Navigator Screen History Location 3. HTML DOM objekti [122]

123 Document Anchor Area Base Body Button Event Form Frame Frameset IFrame Image Input Button Input Checkbox Input File Input Hidden Input Password Input Radio Input Reset Input Submit Input Text Link Meta Object Option Select Style Table TableCell TableRow Textarea U delu "ugradjene JavaScript funkcije" prouĉili smo ĉiste JavaScript objekte. U ovom poglavlju u nastavku prouĉićemo window objekte. A ostale Browser objekte, kao i HTML DOM objekte prouĉavaćemo u posebnim glavama. Alert, confirm i prompt window dijaloški prozori JavaScript omogućava kreiranje tri "iskakajuća" prozora tj. popup box-a: 1. alert box (takozvani "upozoravajući" iskaćući prozor) 2. confirm box (dijalog za potvrdu) 3. prompt box (odzivni okvir za dijalog). CONFIRM ALERT box smo već upoznali, pa da krenemo na confirm box. CONFIRM iskaĉući prozor prikazuje dva dugmeta: Cancel i OK, i vraća vrednost: true ako korisnik pritisne OK ili false ako pritisne Cancel. Ovaj okvir za dijalog moţe se koristiti kao podsticaj korisniku da donese odluku o tome kako da se nastavi skript. Izlazna vrednost moţe se koristiti i kao uslov u nekoj if konstrukciji. CONFIRM funkcija je confirm( ). Evo primera: [123]

124 <html><head> <script type="text/javascript"> function izaberi(){ r = confirm("izaberi OK ili CANCEL"); if (r == true) { document.write("pritisli ste OK!"); else { document.write("pritisli ste Cancel!"); </script></head><body> <input type="button" onclick="izaberi()" value="izaberi OK ili CANCEL"> </body></html> PROMPT PROMPT iskaĉući prozor prikazuje poruku (pitanje) koju kreiramo, i obezbeċuje polje za unos teksta u koje korisnik unosi odgovor. Dva dugmeta, Cancel i OK, omogućavaju korisniku da ukloni okvir za dijalog sa dva efekta: otkazivanje cele operacije ili prihvatanje unetog. prompt( ) ima dva parametra, prvi je poruka koja se prikazuje korisniku, a drugi je podrazumevani odgovor ukoliko recimo korisnik klikne na OK. Ako nije potreban podrazumevani odgovor navodi se prazan niz- "". Pritiskom na dugme Cancel, metod vraća null (u uslovu neke if konstrukcije smatra se za false); pritiskom na OK vraća se vrednost unetog znakovnog niza, ili podrazumevana vrednost. Evo primera koji sve lepo objašnjava: <html><head> <script type="text/javascript"> function iskok() { ime = prompt("molimo unesite vaše ime", "Harry Potter"); if (ime!= null && ime!= ""){ document.write("zdravo " + ime + "! Kako ste danas?"); else{ document.write("e baš ste pokvareni što ste kliknuli Cancel!!"); </script></head><body> <input type="button" onclick="iskok()" value="unesi ime"> </body></html> Otvaranje stranice u iskaĉućem prozoru Moguće je otvoriti i ĉitavu stranicu, bilo da je ona HTML, ili PHP itd, u iskaĉućem (popup) prozoru. Funkcija za to je open( ). Šematski izraz je sledeći: window.open(url, ime, parametri, zamena) URL - parametar u kome se u znacima navoda upisuje link bilo koje web stranice, bilo da je sa našeg sajta ili nekog drugog. To je opcioni parametar, i ako se ne navede moţemo na primer mi sami definisati sadrţajm tog prozora, što će mo kasnije kroz primer i videti. Ne navodi se tako što se samo stave navodnici a ništa se ne piše izmedju njih ime (neobavezan parametar) - ako ga ne ţelimo samo stavimo znakove navoda a ništa ne pišemo. Taj parametar odreċuje naziv stranice ukoliko je prvi parametar samo navodnici. Medjutim tu moţemo definisati i na koji naĉin će se otvoriti taj novi prozor. Vrednosti koje se mogu naći u ovom parametru su sledeći: _blank - strana se otvara u novom prozoru. To je po defaultu [124]

125 _parent - strana se otvara u takozvanom "roditeljskom" okviru, to jest u prozoru u kome smo i inicirali pokretanje te strane _self - sliĉno kao prethodno _top - vezano za frameset, a za obiĉne strane sliĉno kao prethodna dva Ime - ime prozora Parametri (takodje neobavezan parametar) - tu se navode parametri koji opisuju kako će izgledati novootvorena stranica. Na primer da li će imati klizaĉe, kolika će biti po dimenzijama i sliĉno. Znaĉi mogu se tu naći i svi ti parametri zajedno samo se odvajaju zarezom, i svi se stavljaju unutar jednog para navodnika. Videćete u ostalom u primeru. E sad tih parametara ima podosta pa da ih damo tabelarno sa objašnjenjima: Parametar channelmode = yes no 1 0 directories = yes no 1 0 fullscreen= yes no 1 0 height = pixels width = pixels left = pixels top = pixels location = yes no 1 0 menubar = yes no 1 0 resizable = yes no 1 0 scrollbars = yes no 1 0 status = yes no 1 0 titlebar = yes no 1 0 toolbar = yes no 1 0 Objašnjenje Hoće li ili neće prikazati prozor u kompletu. Po defaultu je nula ili no Hoće ili neće prikazati menju za direktorijume. Po defoltu je 1 ili yes. Hoće li ili neće prikazati prozor u full-screen modu. Zadana je no ili nula. Prozor u full-screen modu takoċe mora biti u kompletu Visina prozora u pikselima, ali se oznaka za piksele ne pińe. Minimalna visina je 100. Ńirina prozora u pikselima, ali se oznaka za piksele ne pińe. Minimalna ńirina je 100. Smeńta popup prozor na odredjenom poloņaju u odnosu na levu ivicu brauzera Smeńta popup prozor na odredjenom poloņaju u odnosu na gornju ivicu brauzera Da li da prikņe adresno polje u brauzeru za taj popup. Po defoltu je yes Da li da prikazuje menubar u brauzeru za taj popup. Po defoltu je yes Da li da omogući promenu veliĉine popup prozora. Po defoltu je yes Da li da prikazuje scrollbar u brauzeru za taj popup. Po defoltu je yes Da li da prikazuje status bar u brauzeru za taj popup. Po defoltu je yes Da li da prikazuje naslov bar u brauzeru za taj popup. Po defoltu je yes Da li da prikazuje toolbar u brauzeru za taj popup. Po defoltu je yes Zamena - je takodje opcioni parametar koga ako ţelimo moţemo potpuno izostaviti. Konkretan parametar moţe moţe imati jednu od dve vrednosti, a one su true ili false. Ako je true, nova lokacija će zameniti trenutnu stranicu u istoriji brauzera. Neki brauzeri će jednostavno ignorisati ovaj parametar. Evo primera open( ) funkcije: <html><head> <script type="text/javascript"> function otvori(){ window.open(" "Moja strana", "toolbar=no, location=no, directories=no, status=no, scrollbars=yes, width=550, height=600"); </script> </head><body> <input type=button value="otvori stranicu" onclick="otvori()"> </body></html> A evo primera kad otvaramo novu stranicu i u njoj pišemo nešto: <html><head> <script type="text/javascript"> function otvori(){ prozor = window.open("","nasa","width=400, height=300"); prozor.document.write("ovo je nas prozor, zar nije lep?"); [125]

126 </script></head><body> <input type="button" value="otvori našu stranu" onclick="otvori()"> </body></html> Close(), moveby(), moveto(), focus() i blur() Close( ) Funkcija za zatvaranje otvorenih prozora je close( ). Evo primera koji sve objašnjava: <html><head> <script type="text/javascript"> function otvori(){ prozor=window.open("", "", "width=200,height=100"); prozor.document.write("ovo je otvoren prozor"); function zatvori(){ prozor.close(); </script> </head><body><br><br><br><br><br> <input type="button" value="otvori novi prozor" onclick="otvori()"><br> <input type="button" value="zatvori novi prozor" onclick="zatvori()"> </body></html> MoveBy( ) MoveBy( ) funkcija pomera otvoren prozor na poziciju koju definišemo u toj funkciji. Sve je prosto, evo primera: <html><head> <script type="text/javascript"> function otvori(){ prozor = window.open("", "", "width=200,height=100"); prozor.document.write("ovo je naš prozor"); </script> </head><body><br><br><br><br><br><br> <input type="button" value="otvori novi prozor" onclick="otvori()"><br> <input type="button" value="pomeri otvoreni prozor" onclick="prozor.moveby(250,250); prozor.focus()"> </body></html> MoveTo( ) MoveTo( ) je potpuno identiĉna funkcija funkciji MoveBy( ). Focus( ) U primeru takodje figuriše kao što vidimo i funkcija focus( ). Na primer napišite i pokrenite gornji program bez focus( ), i videćete da će se prozor pomeriti ali biće iza glavnog prozora. Znaĉi da bi ste ponovo uoĉili pomereni prozor morali bi ste da se spustite u kontrolnoj liniji operativnog sistema i kliknuli na prozor da bi fokusirali pomereni prozor. Sa ovom funkcijom focus( ) prozor je odma u fokusu. [126]

127 Blur( ) Postoji i funkcija blur( ) koja je suprotnost od focus( ). Znaĉi ukoliko postoji neki prozor iza tog prozora on će izaći u fokus a ovaj naš će se ukloniti iz fokusa. Printanje strane Funkcija za printanje veb stranice je print( ). Ovom funkcijom će se isprintati sve ono što se vidi u display brauzera preko štampaĉa na papir. Evo primera: <html><head> <script type="text/javascript"> function printanje(){ window.print(); </script> </head><body> <input type="button" value="printaj stranu" onclick="printanje()"> </body></html> SetTimeOut(),clearTimeOut(),setInterval(), clearinterval() SetTimeOut( ) SetTimeOut( ) izvršava odredjene naredbe ili funkcije nakon odredjenog broja milisekundi (1 sekunda = 1000 milisekunda). Prototip te funkcije je: SetTimeOut("nekafunkcija( )", 1000) Znaĉi funkcija nekafunkcija( ) će se izvršavati svake sekunde. ClearTimeOut( ) ClearTimeOut( ) - zaustavlja izvršenje funkcije SetTimeOut( ). Evo konkretan primer koji objašnjava obe funkcije: <html><head> <script type="text/javascript"> c=0; t=0; function startuj(){ document.getelementbyid("txt").value=c; c=c+1; t = settimeout("startuj()",100); </script> </head><body><form> <input type="button" value="startuj" onclick="startuj()"> <input type="text" size=10 id="txt"> <input type="button" value="stopiraj" onclick="cleartimeout(t)"> </form></body></html> [127]

128 SetInterval( ) i ClearInterval( ) Razlika izmedju setinterval( ) i settimeout( ) je ta što settimeout( ) na svakih X milisekundi poziva na primer neku funkciju na izvršenje, a setinterval izvršava pozvanu funkciju sve dok je ne opozove funkcija ClearInterval( ). Evo primera za SetInterval( ) i ClearInterval( ): <html><head> <script type="text/javascript"> int=self.setinterval("clock()",50); function clock() { t=new Date(); document.getelementbyid("clock").value=t; </script> </head><body> <input type="text" id="clock" size="40"> <button onclick="int=window.clearinterval(int)">stop interval</button> </body></html> ResizeBy() i resizeto() ResizeBy( ) ResizeBy( ) vrši promenu veliĉine prozora ali u zavisnosti od postojeće veliĉine. Znaĉi vrednosti u pikselima koje se unose kao parametri se oduzimaju ili dodaju na postojeću veliĉinu prozora. Stim ako se unesu negativne vrednosti onda se smanjuje a pozitivne povećavaju prozor. Evo primera koji sve lepo demonstrira: <html><body> <input type="button" onclick="resizeby(-100,-100)" value="resize window"> </body></html> ResizeTo( ) ResizeTo( ) je sliĉna kao ResizeBy( ) ali se razlikuje po tome što ne uzima u obzir trenutna veliĉina prozora, već se direktno definiše nova veliĉina prozora. Evo primer: <html><body> <input type="button" onclick="resizeto(400,400)" value="resize window"> </body></html> ScrollBy() i scrollto() ScrollBy( ) ScrollBy( ) za broj piksela (koji su kao parametri) pomera (skroluje) u odnosu na trenutnu poziciju. Evo primera: <html><head> </head><body> <input type="button" onclick="window.scrollby(400,400)" value="scroll"> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> [128]

129 <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p> </body></html> ScrollTo( ) ScrollTo( ) skroluje nezavisno od trenutne pozicije u prozoru na taĉno definisan poloţaj. Evo primera: <html><head> </head><body> <input type="button" onclick="window.scrollto(300,300)" value="scroll"/> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p><br><b><br><br><br><br><br><br> <p>scroll SCROLL SCROLL</p> </body></html> Navigatorske funkcije Navigacijske funkcije sadrţe informacije o pregledniku. Daću primer sa kompletno svim ovim funkcijama, a mislim da on sve objašnjava: <html><body><script type="text/javascript"> x = navigator; document.write("ime brauzera=" + x.appname + "<br>"); document.write("verzija brauzera=" + x.appversion + "<br>"); document.write("podverzija brauzera=" + x.appminorversion + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("kod brauzera=" + x.appcodename + "<br>"); document.write("da li su moguci kolacici u pregledniku=" + x.cookieenabled + "<br>"); document.write("cpu klasa sistema=" + x.cpuclass + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("da li je posetilac online=" + x.online + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("platforma operativnog sistema=" + x.platform + "<br>"); document.write("user agent=" + x.useragent + "<br>"); document.write("jezik brauzera=" + x.browserlanguage + "<br>"); // Ne podržava Firefox (verzija 3.3) document.write("jezik sistema=" + x.systemlanguage + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("jezik korisnika=" + x.userlanguage + "<br>"); // Ne podržava Firefox (verzija 3.3) </script></body></html> JavaEnabled( ) JavaEnabled( ) - ova funkcija proverava da li brauzer podrţava JavaScript. Ako podrţava vraća true a ako ne podrţava onda ne podrţava, ne moţe ništa da vrati :) Evo primera: <html><body> <script type="text/javascript"> alert(navigator.javaenabled()); </script></body></html> [129]

130 Ekranske (screen) funkcije Ekranske funkcije daju informacije o ekranskim podacima klijenta. Daću primer sa kompletno svim ovim funkcijema a mislim da on sve objašnjava: <html><body> <script type="text/javascript"> document.write("rezolucija ekrana: " + screen.width + "*" + screen.height + "<br>"); document.write("rezolucija bez tulbarova: " + screen.availwidth + "*" + screen.availheight + "<br>"); document.write("broj bita boje ekrana: " + screen.colordepth + "<br>"); document.write("broj bita boje u baferu: " + screen.bufferdepth + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("horizontalni broj piksela po inču: " + screen.devicexdpi + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("vertikalni broj piksela po inču: " + screen.deviceydpi+ "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("horizontalni broj normalnih piksela po inču: " + screen.logicalxdpi + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("vertikalni broj normalnih piksela po inču: " + screen.logicalydpi + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("omogućeno uredjivanje fontova: " + screen.fontsmoothingenabled + "<br>"); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) document.write("broj bita boje po pixelu : " + screen.pixeldepth + "<br>"); // Ne podržava Internet Explorer 8 document.write("interval osvežavanja ekrana : " + screen.updateinterval); // Ne podržavaju Firefox (verzija 3.3) i Opera (verzija 9.6) </script></body></html> Hystori funkcije History funkcije ĉuvaju URL-ove koje je korisnik posetio. History.length history.length - vraća broj stranica na sajtu koje je posetio posetilac. Na primer ako napišemodocument.write(histori.lenght) ispisaće se broj posećenih strana posetioca. Ovaj podatak moţe se korisno upotrebiti u nekim statistikama posete sajta. History.back( ) i history.forward( ) history.back( ) i history.forward( ) - pomoću ovih funkcija moţemo kreirati dugme kojim će mo omogućavati posetiocima sajta da se vraćaju (back) na prethodnu posećenu stranicu, ili da idu na sledeću stranicu u odnosu na tu (forward). Evo primera: <html><body> <input type="button" value="povratak na prethodnu stranicu" [130]

131 onclick="window.history.back()"> </body></html> Go(argument) go(argument) - Funkcija koja uĉitava taĉno odredjenu stranicu iz istorije poseta stranica. Argument moţe biti broj stranice, znaĉi 1, 2, 3 itd, ili pak konkretan URL stranice. Na primer ako hoćemo efekat back( ) funkcije moţemo pisati go(-1). Medjutim moţemo se vratiti na neku stranicu još u nazad na primer go(-3), itd. Location funkcije Location funkcija sadrţe informacije o trenutnom URL. Location objekti su deo prozora objekta i pristupa im se putem window.location. <html><body> <script type="text/javascript"> document.write("domen sajta: " + location.host + "<br>"); // na primer ako se stranica otvorila sa google hosta daće informaciju document.write("domen sajta: " + location.hostname + "<br>"); // potpuno isto kao location.host document.write("kompletna adresa otvorene stranice : " + location.href+ "<br>"); document.write("path stranice: " + location.pathname + "<br>"); // na primer ako je strana rezultat će biti /strane/prva.htm document.write("informacije o protokolu stranice: " + location.protocol+ "<br>"); // na primer da li je http, ftp, i slično document.write("query string: " + location.search + "<br>"); // ako je stranica daće?u=5&n=23 </script></body></html> assign(url) - Omogućava "programsko linkovanje". Na primer moţete ovom funkcijom ako umesto URL napišete neku adresu bilo koje internet stranice da u tom istom prozoru se otvori ta stranica bez da je posetilac kliknuo na bilo koji link. Naravno moţe se napraviti i da klikne na neko dugme pa da se otvori, ali onda je to klasiĉno linkovanje koje moţe da se ostvari i preko HTML anchor elemenata. ASSING omogućava više. Na primer moţete napraviti da posetilac otvori neku stranicu ako samo i predje preko nekog teksta, ili neke slike ili ĉak preko neke bilo koje površine prazne ili na slici itd. Ili na primer da napravite ako klikne na neku površinu na slici da tako linkuje. Evo primera sa dugmetom: <html><body> <input type="button" value="idite na google" onclick="window.location.assign(" </body></html> HTML DOM objekti HTML DOM je mapa HTML i CSS objekata. JavaScript ima za svaki HTML i CSS objekat odgovarajuću funkciju pomoću koje pristupamo, dodajemo, menjamo ili brišemo taj HTML ili CSS objekat. HTML objekti su u glavnom svi HTML tagovi, a CSS objekti su u glavnom svi CSS atributi. Da bi smo ovim HTML i CSS objektima pristupili moramo uvek ispred odgovarajućih funkcija, odvojeno taĉkom, koristiti rezervisanu reĉ document. Document objekat je takoċe deo window objekta, te se moţe pisati i window.document ali moţe i bez tog window, pa se zato skoro i nikad ne piše window. [131]

132 Document.anchors[] document.anchors[ ] je niz koji ĉuva HTML elemente svih linkova na stranici, kao što su tekstovi linkova (innerhtml), adrese na koje šalju linkovi (href), imena linkova ukoliko ih ima (name), moţe da izbaci koliko ima linkova na strnici (length). Evo primera: <html><body> <a href=" name="link1">prva strana sajta</a><br> <a href=" name="link2">druga strana sajta</a><br> <a href=" name="link3">treca strana sajta</a><br> <script type="text/javascript"> a = document.anchors.length; for (i = 0; i < a; i++){ document.write("<br>"); document.write("tekst linka" + i + " je: " +document.anchors[i].innerhtml + "<br>"); document.write("adresa linka" + i + " je: " + document.anchors[i].href+ "<br>"); document.write("ime linka" + i + " je: " + document.anchors[i].name + "<br>"); document.write("<br><br>na stranici ima ukupno linkova: ", document.anchors.length); </script> </body></html> Rezultat: Tekst linka0 je: Prva strana sajta Adresa linka0 je: Ime linka0 je: link1 Tekst linka1 je: Druga strana sajta Adresa linka1 je: Ime linka1 je: link2 Tekst linka2 je: Treca strana sajta Adresa linka2 je: Ime linka2 je: link3 Na stranici ima ukupno linkova: 3 document.forms[] i document.images[] document.forms[ ] - Potuno ist kao i anchors[ ] samo što se odnosi na forme. <html><body> <form name="forma1" method="post" action=" <p><input type="text" name="tekst1" size="20"></p> <p><textarea rows="2" name="tekst area1" cols="20"></textarea></p> <p><input type="submit" value="submit" name="submit dugme1"> <input type="reset" value="reset" name="reset dugme1"></p> </form> <form name="forma2" method="get" action=" <p><input type="text" name="tekst2" size="20"></p> <p><textarea rows="2" name="tekst area2" cols="20"></textarea></p> <p><input type="submit" value="submit" name="submit dugme2"> <input type="reset" value="reset" name="reset dugme2"></p> [132]

133 </form> <script type=text/javascript> document.write("broj formi na stranici je: " + document.forms.length + "<br>") document.write("ime prve forme na stranici je: " +document.forms[0].name + "<br>") document.write("metoda prenosa podataka druge forme je: " +document.forms[1].method + "<br>") document.write("podaci prve forme se salju na: " +document.forms[0].action + "<br>") </script> </body></html> document.images[ ] - Potpuno isto kao i prethodne dve funkcije samo što se u ovom sluĉaju odnosi na slike. Document.links[] document.links[ ] - Potpuno isto kao prethodne funkcije samo što se odnosi na links. Šta je links? Evo primera koji sve otkriva: <html><head> <script type=text/javascript> function klik(a){ prozor = window.open("","","width=167, height=224"); prozor.document.write("<body bgcolor=\"#000000\"><img src =\"" + a + "\">"); </script></head><body> <img src ="jsslikeplanete/sve.jpg" width="608" height="265" usemap ="#planetmap"> <map name="planetmap"> <area shape="rect" coords="544, 0, 604, 26" href="#" OnClick=klik("jsslikeplanete/pluton.jpg") alt="pluton"> <area shape="circle" coords="92, 199, 12" href="#" OnClick=klik("jsslikeplanete/merkur.jpg") alt="merkur"> <area shape="circle" coords="140, 179, 17" href="#" OnClick=klik("jsslikeplanete/venera.jpg") alt="venera"> <area shape="circle" coords="189, 152, 16" href="#" OnClick=klik("jsslikeplanete/zemlja.jpg") alt="zemlja"> <area shape="circle" coords="221, 121, 14" href="#" OnClick=klik("jsslikeplanete/mars.jpg") alt="mars"> <area shape="circle" coords="303, 136, 28" href="#" OnClick=klik("jsslikeplanete/jupiter.jpg") alt="jupiter"> <area shape="circle" coords="390, 95, 31" href="#" OnClick=klik("jsslikeplanete/saturn.jpg") alt="saturn"> <area shape="circle" coords="455, 60, 21" href="#" OnClick=klik("jsslikeplanete/uran.jpg") alt="uran"> <area shape="circle" coords="509, 31, 20" href="#" OnClick=klik("jsslikeplanete/neptun.jpg") alt="neptun"> <area shape="poly" coords="56, 264, 0, 264, 0, 0, 33, 15, 73, 134" href="#" OnClick=klik("jsslikeplanete/sunce.jpg") alt="sunce"> </map> <p>broj area/linkova na stranici je: <script type="text/javascript"> document.write(document.links.length); </script></p></body></html> Rezultat [133]

134 Broj area/linkova na stranici je: 29 Klikćite na planete da bi ste videli HTML efekat MAP taga Document.cookie i još neke funkcije document.cookie - Ĉuva informacije o kolaĉićima koji su povezani sa internet stranicom. Šta su JavaScript kolaĉići (cookie)? JavaScript Cookie su tekstualni fajlovi koje brauzer posetioca memoriše u sebe za svaku internet stranicu koju je otvorio. Taj tekstualni fajl se razlikuje od stranice do stranice, što znaĉi da je to u stvari identifikacioni broj stranice (ID). JavaSrcipt (to jest mi kao programeri :) ) pomoću ove COOKIE funkcije definiše cookie fajl. Format koji cookie fajl mora zadovoljiti je (sve ono što je u srednjim zagradama je opciono, to jest nije obavezno): ime = vrednost[;expires=datum][;domain=imedomena][;path=putanja] [;secure][;httponly] ime - ime koje definiše upisani cookie vrednost - je upravo informacija koja se ţeli zapamtiti kako bi se identifikovao posetilac (to je glavna stvari i obavezan je parametar) datum - je datum koji definiše do kada cookie ostaje memorisan u brauzeru. imedomena - definiše jedini domen sa kog cookie moţe da se ĉita i da mu se menja vrednost putanja - definiše jedinu putanju sa koje cookie moţe da se ĉita i da mu se menja vrednost. secure - upis i ĉitanje cookie se izvršava preko posebnih, bezbednijih kanala Atributi kolaĉića expires, domain, path, secure, httponly su opcioni i nije bitan redosled u kom se pojavljuju. Evo primera: <html><head> <script type=text/javascript> function postavljanjecookie(){ document.cookie="cookie je=" + document.forma1.imecookie.value; function prikazcookie(){ alert(document.cookie) </script> </head><body> <form name="forma1"> <h2>postavljanje i pregled COOKIE</h2> [134]

135 <p>upiši ime: <input type="text" name="imecookie" size="20"></p> <input type="button" value="upiši" onclick="postavljanjecookie()"> <input type="button" value="prikaži Cookie" onclick="prikazcookie()"> </form> </body></html> A rezultat (naravno svaki put je drugaĉiji) u alert prozoru je na primer: TP_ = ; cookie je=pera Perić document.domain - ispisuje domen document.lastmodified - Ispisuje datum kad je zadnji put modifikovana internet stranica document.referrer - Daje kompletan link stranice document.title - Daje naslov internet stranice. document.url - Potpuno identicno kao i referrer. Znaĉi daje kompletan link stranice. document.close( ) - Sa funkcijom close( ) smo se već susreli kada smo prouĉavali WINDOW objekte. Ta funkcija zatvara dokument. document.open( ) - I sa funkcijom open() smo se isto susreli već kad smo prouĉavali WINDOW objekte, i ona otvara novi prozor na primer, to jest novi dokument. document.write( ) - Sa funkcijom write() smo se već susreli bezbroj puta i ona omogućava JavaScript ispisivanje na internet stranici. Document.getElementById(id) I sa ovom funkcijom smo se susretali ali sad da je malo bolje objasnimo. Funkcija getelementby je pokazivaĉ elemenata, na primer HTML tagova. E sad u zavisnosti šta pokazuje imamo getelementbyid("a1") - pokazuje neki element koji ima identifikator "a1". Ili getelementsbytagname(imetaga) - pokazuje na sve tagove sa odredjenim imenom. GetElementsByName(ime) - pokazuje neki elemenat sa specifiĉnim imenom, na primer na neki element forme, ili sama forma. E sad u nastavku moţe stajati na primer innerhtml - što znaĉi da menja vrednost HTML teksta tog elementa. Ili samo value - što znaĉi da menja neku vrednost u nekom form elementu kao što je vrednost nekog text elementa forme. A moţe da stoji i lenght - što znaĉi da će pokazati broj nekih elemenata. Evo primera: <html><head> <script type=text/javascript> function brojznaka(){ document.getelementbyid("b").value = document.getelementbyid("a").innerhtml.length function sve(){ document.getelementbyid("a").innerhtml="aaaaaa"; brojznaka() </script></head><body> <input type=button value="klikni za iznenadjenje" onclick=sve()> <p id="a"><b><font face="arial" size="7">aaaaaaaaaaaaaaaaa</font></b></p> <p><input type=text id="b"></p> </body></html> [135]

136 Anchor funkcije Ne moramo samo mišem birati linkove. Biranje linka moţemo omogućiti i na primer istovremenim kliktanjem Alt + neka dirka. Nakon takvog biranja linka potrebno je samo kliknuti na Enter kako bi i aktivirali taj link. Ovo nam omogućava accesskey funkcija. Opera 9 ne podrţava ovu funkciju. Evo primera koji sve objašnjava: <html><head> <script type="text/javascript"> function accesskey(){ document.getelementbyid("w1").accesskey="w"; document.getelementbyid("w2").accesskey="d"; </script> </head><body onload="accesskey()"> <a id="w1" href=" sajt 1</a> (Klikni Alt + w da izabereš link 1, a zatim Enter)<br> <a id="w2" href=" sajt 2</a> (Klikni Alt + d da izabereš link 2, a zatim Enter) </body></html> Kao što znamo nakon linkovanja, stranica se moţe otvoriti ili u samom jeziĉku u kome smo kliknuli, ili u posebnom jeziĉku brauzera. A to se definiše kao što znamo u anshor tagu atributom target koji moţe imati vrednosti _blank, _self, _parent, i _top. E sad mi i preko target funkcije u JavaScript-u moţemo podešavati anchor target tag po našoj ţelji. Isto sve vaţi i za href atribut. Zatim sam tekst linka takodje moţemo menjati po ţelji pomoću innerhtml funkcije. ID znamo da je identifikacioni broj anchor elementa. Sve ovo moţda izgleda nejasno ali naravno sa jednim primerom je sve jasno: <html><head> <script type="text/javascript"> function promenalinka(){ document.getelementbyid("linki").innerhtml="poseti Yahoo"; document.getelementbyid("linki").href=" document.getelementbyid("linki").target="_blank"; </script> </head><body> <a ID = "linki" href=" target=_top>poseti google</a><br><br> <input type="button" onclick="promenalinka()" value="promeni link u Yahoo"> </body></html> Tastatura i miš (EVENT atributi) event.altkey = true false altkey vraća logiĉku vrednost true ili 1 ako je ALT dirka na tastaturi pritisnuta, ili false, odnosno 0 ako nije. Evo primera: <html><head> <script type="text/javascript"> function drzi(event){ if (event.altkey == 1) { alert("vi držite ALT tipku!"); else{ alert("alt tipku ne držite trenutno!"); [136]

137 </script> </head><body onmousedown="drzi(event)"> Alert će vam reći da li držite tipku ALT ili ne. Ako želite da vam javi da držite, morate držati ALT i u isto vreme mišem kliknuti bilo gde na stranici </body></html> event.ctrlkey = true false Potpuno identiĉno kao i altkey samo što je u pitanju CTRL tipka umesto ALT event.shiftkey = true false Potpuno identiĉno kao i altkey samo što je u pitanju SHIFT tipka umesto ALT event.button = Odredjuje koji ste klik mišem izvršili i to tako da 0 znaĉi da ste izvršili levi klik mišem; 1 znaĉi da ste izvršili srednji klik mišem (kod internet explorer je za tu funkciju broj 4); 2 znaĉi da ste izvršili desni klik mišem. Evo primera: <html><head> <script type="text/javascript"> function klikmis(event){ if(event.button == 2){ alert("vi ste kliknuli desni klik mišem!"); else{ alert("vi ste kliknuli levi klik mišem!"); </script> </head><body onmousedown="klikmis(event)"> Kliknite bilo kojim dugmetom mišem, bilo gde na stranici</p> </body></html> event.screenx i event.screeny - ove funkcije odredjuju x i y koordinate kursora u odnosu na ekransku površinu. Evo primera: <html><head> <script type="text/javascript"> function mispomeraj(event){ x=event.screenx; y=event.screeny; document.getelementbyid("txt1").value=x; document.getelementbyid("txt2").value=y; </script> </head> <body onmousemove="mispomeraj(event)"> <form> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> X koordinata kursora: <input type="text" size=10 id="txt1"><br> Y koordinata kursora: <input type="text" size=10 id="txt2"> </form></body></html> event.clientx i event.clienty - Vraća koordinate taĉke ekrana u kojoj je kliknuto. Evo primera: <html><head> <script type="text/javascript"> function koordinate(event){ x=event.clientx; y=event.clienty; alert("x koordinata je: " + x + ", Y koordinata je: " + y); [137]

138 </script> </head><body onmousedown="koordinate(event)"> <p>klikni bilo gde na stranici, a alert prozor će pokazati koordinate u kojoj tačci ste kliknuli.</p> </body></html> Tabele HTML tabele su takodje HTML DOM objekti ali zbog kompleksnosti smo ih izdvojili kao zasebno poglavlje. JavaScript funkcije koje manipulišu HTML tabelama su toliko sveobuhvatne da takoreći mogu iz korena promeniti bilo koju HTML tabelu, to jest promeniti je u svakom mogućem smislu. Pored menjanja te iste finkcije mogu i vraćati sve te elemente tabela, što omogućava upotrebu tih vraćenih informacija u koju god ţelimo svrhu. Cells[] i rows[] Niz cells[] sadrţi elemente svake ćelije u tabeli (znaĉi HTML tagove, vrednosti, znaĉi sve sve), a niz rows[] sadrţi elemente svakog reda u tabeli. Ove funkcije mogu i da prikaţu sadrţaje kolona i redova u tabeli, a isto tako mogu i da ih menjaju. Evo primera: <html><head> <script type="text/javascript"> function celija(a){ if(a=="sadrzaj") alert(document.getelementbyid("tabla").rows[0].cells[0].innerhtml); if(a=="sirina") alert(document.getelementbyid("tabla").rows[1].cells[0].width); if(a=="polozaj") alert(document.getelementbyid("tabla").rows[1].cells[1].align) if(a=="celije") alert(document.getelementbyid("tabla").rows[1].innerhtml) if(a=="promeni") document.getelementbyid("tabla").rows[1].cells[1].innerhtml = "AAA" </script></head><body> <table id="tabla" border="1" width="143"> <tr> <td>celija 1</td> <td>celija 2</td> </tr><tr> <td width="60" height="40">celija 3</td> <td align="center">celija 4</td> </tr> </table><br> <input type="button" onclick=celija("sadrzaj") value="sadrzaj prve ćelije"><br> <input type="button" onclick=celija("sirina") value="sirina trece celije"><br> <input type="button" onclick=celija("polozaj") value="polozaj teksta u cetvrtoj celiji"><br> <input type="button" onclick=celija("celije") value="html sadrzaj u drugom redu"><br> <input type="button" onclick=celija("promeni") value="promeni sadrzaj u cetvrtoj celiji"> </body></html> Border, cellpadding, cellspacing, width i height Sve ove funkcije menjaju ili isĉitavaju istoimene tabelarne atribute. Evo primera: <html><head> <script type="text/javascript"> function celija(a){ [138]

139 if(a=="border") document.getelementbyid("tabla").border=10; if(a=="pading") document.getelementbyid("tabla").cellpadding=15; if(a=="spacing") document.getelementbyid("tabla").cellspacing=20; if(a=="sirina") document.getelementbyid("tabla").width=600 if(a=="visina") document.getelementbyid("tabla").height=250 </script></head><body> <table id="tabla" border="1" width="143"> <tr> <td>celija 1</td> <td>celija 2</td> </tr><tr> <td width="60" height="40">celija 3</td> <td align="center">celija 4</td> </tr> </table><br> <input type="button" onclick=celija("border") value="promeni border table"><br> <input type="button" onclick=celija("pading") value="promeni cellpadding tabele"><br> <input type="button" onclick=celija("spacing") value="promeni cellspacing tabele"><br> <input type="button" onclick=celija("sirina") value="promeni sirinu tabele"><br> <input type="button" onclick=celija("visina") value="promeni visinu tabele"> </body></html> Frame frame = void above below hsides vsides lhs rhs box border - FRAME postavlja ili vraća spoljne granice tabele u raznim oblicima. Evo primera: <html><head> <script type="text/javascript"> function celija(a){ if(a=="above") document.getelementbyid("tabla").frame="above"; if(a=="void") document.getelementbyid("tabla").frame="void"; if(a=="below") document.getelementbyid("tabla").frame="below"; if(a=="hsides") document.getelementbyid("tabla").frame="hsides"; if(a=="vsides") document.getelementbyid("tabla").frame="vsides"; if(a=="lhs") document.getelementbyid("tabla").frame="lhs"; if(a=="rhs") document.getelementbyid("tabla").frame="rhs"; if(a=="box") document.getelementbyid("tabla").frame="box"; if(a=="border") document.getelementbyid("tabla").frame="border"; </script></head><body> <table id="tabla"> <tr> <td>celija 1</td> <td>celija 2</td> </tr><tr> <td>celija 3</td> <td>celija 4</td> </tr> </table><br> <input type="button" onclick=celija("above") value="promeni frame table u above"><br> <input type="button" onclick=celija("void") value="promeni frame table u void"><br> <input type="button" onclick=celija("below") value="promeni frame table u below"><br> <input type="button" onclick=celija("hsides") value="promeni frame table u hsides"><br> <input type="button" onclick=celija("vsides") value="promeni frame table u vsides"><br> <input type="button" onclick=celija("lhs") value="promeni frame table u lhs"><br> <input type="button" onclick=celija("rhs") value="promeni frame table u rhs"><br> [139]

140 <input type="button" onclick=celija("box") value="promeni frame table u box"><br> <input type="button" onclick=celija("border") value="promeni frame table u border"> </body></html> Rules rules = none groups rows cols all - RULES postavlja ili vraća unutrašnje granice tabele. Evo primera: <html><head> <script type="text/javascript"> function celija(a){ if(a=="all") document.getelementbyid("tabla").rules="all"; if(a=="none") document.getelementbyid("tabla").rules="none"; if(a=="groups") document.getelementbyid("tabla").rules="groups"; if(a=="rows") document.getelementbyid("tabla").rules="rows"; if(a=="cols") document.getelementbyid("tabla").rules="cols"; </script></head><body> <table id="tabla"> <tr> <td>celija 1</td> <td>celija 2</td> </tr><tr> <td>celija 3</td> <td>celija 4</td> </tr> </table><br> <input type="button" onclick=celija("all") value="promeni rules table u all"><br> <input type="button" onclick=celija("none") value="promeni rules table u none"><br> <input type="button" onclick=celija("groups") value="promeni rules table u groups"><br> <input type="button" onclick=celija("rows") value="promeni rules table u rows"><br> <input type="button" onclick=celija("cols") value="promeni rules table u cols"> </body></html> InsertRow() i insertcell() insertrow( ) i insertcell( ) - Funkcije za ubacivanje novog reda i novih celija u tabeli. Evo primera: <html><head> <script type="text/javascript"> function ubacired(){ x = document.getelementbyid("tabla").insertrow(0); x.insertcell(0).innerhtml = "Novi red celija 1"; x.insertcell(1).innerhtml = "Novi red celija 2"; </script> </head><body> <table id="tabla" border="1"> <tr> <td>red 1 celija 1</td> <td>red 1 celija 2</td> </tr><tr> <td>red 2 celija 1</td> <td>red 2 celija 2</td> </tr> </table><br> [140]

141 <input type="button" onclick="ubacired()" value="ubaci novi red u tabelu"> </body></html> DeleteRow(), deletecell() i rowindex deleterow( ), deletecell( ) i rowindex - deleterow briše red u tabeli, a deletecell briše ćeliju. RowIndex vraća indeks reda u tabeli. Analogno tome cellindex vraća indeks ćelije u redu. Evo primera: <html><head> <script type="text/javascript"> function brisiceliju(){ document.getelementbyid("tr2").deletecell(1); function brisired(r){ i = r.parentnode.parentnode.rowindex document.getelementbyid("tabla").deleterow(i); </script></head><body> <table id="tabla" border="1"> <tr id="tr1"> <td>red 1</td><td>Red 1</td> <td><input type="button" value="izbrisi red" onclick=brisired(this)></td> </tr><tr id="tr2"> <td>red 2</td><td>Ova celija se brise</td> <td><input type="button" value="izbrisi celiju" onclick=brisiceliju()></td> </tr> </table></body></html> Align align = left right center - vraća ili podešava vodoravno poravnanje teksta u ćelijama ili redova. Evo primer za ćelije, ali analogno tome je i za redove stim što se identifikator postavi u ţeljeni red: <html><head> <script type="text/javascript"> function poravnanje(){ document.getelementbyid("td1").align = "right"; </script> </head><body> <table border="1" width="181"> <tr> <th>ime</th> <th width="93">prezime</th> </tr><tr> <td id="td1">milan</td> <td width="93">milic</td> </tr> </table> <form> <input type="button" onclick="poravnanje()" value="poravnaj u desno ime Milan"> </form></body></html> [141]

142 ColSpan i rowspan colspan i rowspan - colspan menja ili vraća broj ćelija unutar jednog reda. A rowspan menja ili vraća broj ćelija po kolonama. Evo primera: <html><head> <script type="text/javascript"> function promeni(a){ if (a=="colspan")document.getelementbyid("td2").colspan="2"; if (a=="rowspan")document.getelementbyid("td1").rowspan="2"; </script> </head><body> <table border="1" width="226"> <tr> <th>ime</th> <th>prezime</th> </tr><tr> <td id="td1">harry</td> <td>potter</td> </tr><tr> <td id="td2">miki</td> <td>milic</td> </tr> </table><br> <input type="button" onclick=promeni("colspan") value="promeni colspan"> <input type="button" onclick=promeni("rowspan") value="promeni rowspan"> </body></html> InnerHTML innerhtml - menja ili vraća HTML sadrţaj ćelije ili reda. Evo primera za ćeliju, ali analogno tome je i za red tabele, stim što se u ţeljeni red postavi identifikator: <html><head> <script type="text/javascript"> function sadrzaj(){ document.getelementbyid("td1").innerhtml="<b><i>baba</i></b>"; </script> </head><body> <table border="1" width="226"> <tr> <th>ime</th> <th>prezime</th> </tr><tr> <td id="td1">miki</td> <td>milic</td> [142]

143 </tr> </table><br> <input type="button" onclick=sadrzaj() value="promeni ime" /> </body></html> Width width - Vraca ili menja vodoravnu veliĉinu ćelija. Evo primer: <html><head> <script type="text/javascript"> function povecaj(){ document.getelementbyid("td1").width="200px"; </script> </head><body> <table border="1"> <tr> <th>ime</th> <th>prezime</th> </tr><tr> <td id="td1">miki</td> <td>milic</td> </tr> </table><br> <input type="button" onclick=povecaj() value="promeni velicinu celije"> </body></html> VAlign valign = top middle bottom baseline - vraća ili menja vertikalni poloţaj sadrţaja u ćeliji ili redu. Daćemo primer za ćelije ali isti sluĉaj je i za redove, stim što se identifikator postavi u ţeljeni red. Naravno kad se postavi u red onda se vertikalni poloţaj sadrţaja definiše u svim ćelijama unutar tog reda. <html><head> <script type="text/javascript"> function topalign(){ document.getelementbyid("td1").valign="top"; document.getelementbyid("td2").valign="middle"; document.getelementbyid("td3").valign="bottom"; document.getelementbyid("td4").valign="baseline"; </script></head><body> <table width="500" border="1" height="221"> <tr> <th height="41">tekst0</th><th height="41">tekst1</th> <th height="41">tekst2</th><th height="41">tekst3</th> </tr><tr> <td id="td1">top</td><td id="td2">middle</td> <td id="td3">bottom</td><td id="td4">baseline</td> </tr></table><br> [143]

144 <input type="button" onclick="topalign()" value="top-align table cells"> </body></html> JS i CSS CSS objekti su takodje HTML DOM objekti ali zbog kompleksnosti smo ih izdvojili kao zasebno poglavlje. JavaScript funkcije manipulišu apsolutno svim CSS objektima kako u smislu menjanja tako i u smislu isĉitavanja. Ovo drugim reĉima znaĉi da preko JavaScript funkcija koje manipulišu CSS objektima mi moţemo apsolutno dinamiĉki menjati celokupni izgled stranica sajta. Opšta JavaScript sintaksa za sve CSS atribute bi izgledala ovako: document.getelementbyid("id").style.atribut = vrednost Obzirom da ima na desetine CSS atributa, a na stotine vrednosti, mi nećemo ovde svaku ekvivalentnu JavaScript funkciju zasebno objašnjavati, već ćemo dati tabele sa svim tim JavaScript funkcijama i njihovim svim vrednostima uz tekstualno objašnjenje. Na kraju ćemo dati par primera korišćenja nekih od tih JavaScript funkcija, a ostale se skoro identiĉno koriste. Sve funkcije nisu zastupljene u svim brauzerima i u svim njihovim izdanjima. U tabelama zato imamo kolone u kojima je zapisano od koje verzije odredjenog brauzera poĉinje primena odgovarajuće JavaScript funkcije. Sa "O" u tabeli je obeleţena Opera, sa "E" Internet Explorer, a sa "F" Firefox. Evo tabela: JS background CSS funkcije Svi znamo šta se definiše background HTML atributom, tako da nije teško shvatiti šta će se definisati JavaScript background funkcijom. Ajde tabelarno da vidimo sve vrednosti koje moţe imati ova funkcija. JS Funkcija background Objašnjenje Vrednosti Objašnjenje vrednosti E F O Definisanje boje pozadine red ime boje, blue, black... rgb(232,123,54) #AB3C23 RGB boja Heksadecimalni zapis Definisanje slike pozadine url(url) URL adresa slike pozadine Definińe kako će slika pozadine ispunjavati povrńinu elementa Ponańanje pozadine prilikom skrolovanja repeat repeat-x repeat-y no-repeat scroll fixed Ponavljaće se i po vertikali i po horizontali da ispuni povrńinu elementa Ponavljaće se po horizontali dok ne ispuni ńirinu elementa Po vertikali Neće se ponavljati. Pojaviće se na poĉetku elementa jednom Pomeraće se Biće fiksna [144]

145 top left gornja leva pozicija top center gornja centralna top right gornja desna center left centralna leva center center centralna centralna Poĉetni poloņaj slike pozadine center right bottom left bottom center centralna desna donja leva donja centralna 4 Ne Ne bottom right donja desna X% Y% Procentualna pozicija u odnosu na veliĉinu polja elementa Xpos Ypos Pozicija u pikselima, ili ostalim CSS veliĉinama Primer background funkcije: <html><head> <script type="text/javascript"> function stil(){ document.body.style.background = "#FFCC80 url(jsslikeplanete/zemlja.jpg) repeat-y"; </script></head><body> <input type="button" onclick="stil()" value="podesi novi stil pozadine"> </body></html> JS border CSS funkcije JS funkcije Objašnjenje Vrednosti Objašnjenje vrednosti E F O thin tanka linija Definisanje debljine linije border borderbottom borderleft borderright Definisanje stila linije bordertop outline Definisanje boje linije medium srednje debljine thick debela linija debljina linija u px Definisanje debljine u pikselima none bez stila hidden skriven dotted tufne dashed isprekidana linija solid puna linija double dupla linija groove brazda ridge greben inset umetak outset ispupĉenje red ime boje, blue, black... rgb(123,34,213) RGB boja [145]

146 #ACA445 Heksadecimalna boja Funkcija border se odnosi za sve 4 linije koje ograniĉavaju elemente. Medjutim mi moţemo definisati i svaku liniju posebno. Tako na primer ako umesto border napišemo borderleft onda će mo definisati samo levu ivicu elementa. BorderRight definiše desnu ivicu, bordertop definiše gornju liniju elementa, a borderbottom donju ivicu. I border, i borderleft, borderright, borderbottom i bordertop imaju iste vrednosti za definisanje boje, stila i debljine linija. Kao što vidimo u tabeli egzistira i outline funkcija. Outline u CSS je u stvari linija koja uokviruje i sam border! I outline takodje ima iste vrednosti za boju, stil linije i debljinu linije, pa da ne bi pravili zasebnu tabelu mi smo i nju smestilu u ovoj tabeli sa border funkcijama. Outline funkciju ne podrţava Internet Explorer. Evo jednog primera i za border i za outline: <html><head> <script type="text/javascript"> function element(a){ if(a == "border") document.getelementbyid("p1").style.border="5px double #0000FF"; if(a == "outline") document.getelementbyid("p1").style.outline="6px inset #FF00FF"; </script> </head><body> <input type="button" onclick=element("border") value="promeni border"><br> <input type="button" onclick=element("outline") value="promeni outline"> <p id="p1">ovo je paragraf</p> </body></html> JS margin CSS funkcije JS funkcije Objašnjenje Vrednosti Objašnjenje vrednosti E F O margin marginbottom marginleft marginright margintop postavlja margine elementa auto duņina margine u px,mm itd. duņina margine u % marginu postavlja sam brauzer definińemo na primer u pikselima u procentima u odnosu na ukupnu veliĉinu polja elementa Funkcija margin definiše sve margine oko elementa, a marginbattom donju marginu, marginleft - levu, marginright - desnu i margintop - gornju marginu. Sve one se definišu istim vrednostima. Evo jednad primer: <html><head> <script type="text/javascript"> function Margine(){ document.getelementbyid("p1").style.margin="100px"; </script> </head><body> <input type="button" onclick="margine()" value="promeni margine paragrafa"> <p id="p1">ovo je paragraf</p> <script type=text/javascript> document.getelementbyid("p1").style.border="5px double #0000FF"; </script> </body></html> [146]

147 JS padding CSS funkcije JS funkcije Objašnjenje Vrednosti Objašnjenje vrednosti E F O padding paddingleft paddingtop paddingright paddingbottom definińe veliĉinu prostora izmedju sadrņaja elementa i border-a duņina u px duņina u % Duņina u pikselima Duņina u procentima u odnosu na veliĉinu prostora kojeg zahvata element Kao što je i napisano u tabeli, padding definiše prostor izmedju sadrţaja elementa i border-a. Padding definiše sva 4 prostora, a paddingleft samo levi, paddingright - dsni, paddingtop - gornji, i paddingbottom definiše donji prostor. Evo primera: <html><head> <script type="text/javascript"> function element(){ document.getelementbyid("p1").style.padding="40px"; </script> </head><body> <input type="button" onclick="element()" value="promeni padding"> <p id="p1">ovo je paragraf</p> <script type=text/javascript> document.getelementbyid("p1").style.border="5px double #0000FF" </script> </body></html> JS layout CSS funkcije JS funkcije Objašnjenje Vrednosti Objašnjenje vrednosti E> F O clip cursor Seĉe slike Definińe izgled kursora rect(top, right, bottom, left) auto URL default auto [147] Definińe vidljivi deo Po defaultu Url slika kursora Default kursor (strelica) Brauzer postavlja kursor crosshair U obliku znaka + pointer move e-resize ne-resize nw-resize n-resize U obliku ruke U obliku + a ima i strelice na krajevima Minus sa strelicama na krajevima Linija po dijagonali sa strelicama na krajevima isto kao gore samo suprotna dijagonala Uspravna linija sa strelicama na krajevima 4 1 9

148 display height width minheigh maxheigh minwidth maxwidth overflow Definińe kako će se prikazivati element Definińe visinu elementa Definińe radnje ako sadrņaj elementa ne stane se-resize sw-resoze s-resize w-resoze wait help none block inline list-item run-in compact marker table inline-table table-row-group table-row table-headergroup table-footergroup table-columngroup table-column table-cell table-caption auto visina u pikselima visina u % auto scroll [148] isto kao nw-resize isto kao ne-resize isto kao n-resize isto kao e-resize Peńĉani sat Kursor sa znakom pitanja Element neće biti prikazan. Sakriće se Element će biti prikazan kao blok (<div>,<p> itd.) Element će biti prikazan kao inline (<span>, <a>) Element će biti prikazan kao lista Element će biti prikazan kao blok ili inline u zavisnosti od konteksta Element će biti prikazan kao blok ili inline da bi se zauzeo ńto manji prostor Sliĉno kao inline Element će biti prikazan kao tablca Element će biti prikazan kao inline tablica Element će biti prikazan kao grupa od jednog ili vińe reda Element će biti prikazan kao zaglavlje tablice Element će biti prikazan kao podnoņje tablice Element će biti prikazan kao red tablice Element će biti prikazan kao grupa od jednog ili vińe stupaca Element će biti prikazan kao stupac ćelija element će biti prikazan kao ćelija Element će se prikazati kao naslov tablice Brauzer postavlja visinu Definińe se u pikselima, milimetrima i ostalim CSS mernim veliĉinama 4M 1 9 U procentima u odnosu na visinu bloka u kome se nalazi element Brauzer sam odredjuje radnje Pojavljuje se klizaĉ 4 1 9

149 u okvir visible Prońiruje se prostor da bi se sve vidlo hidden Vidi se samo koliki je prostor a ostatak se ne vidi baseline Element je postavljen u nivou kao i nadredjeni element sub poravnava se kao ńto je napisan super poravnava kao natpis top Poravnava pri vrhu verticalalign Definińe vertikalno poravnanje elementa tex-top middle Vrh elementa je uskladjen sa vrhom nadredjenog elementa Element se nalazi u sredini nadredjenog elementa 4 1 No bottom Element se nalazi u donjem delu nadredjenog elementa tex-bottom Dno elementa je uskladjen sa dna nadredjenog elementa duņina u px Poloņaj se odredjuje u pikselima duņina u % Poloņaj se odradjuje u procentima visible Po defoltu je element vidljiv visibility Definińe vidljivost elementa hidden collapse Element nije vidljiv ali prostor koji zauzima je zauzet Element nije vidljiv ali i prostor koji zauzima je slobodan Daću samo jedan primer ali vama ako nisu jasna objašnjenja eksperimentišite malo ili odite u CSS delu koji sve pojedinaĉno objašnjava. <html><head> <script type="text/javascript"> function funkcija(){ document.body.style.cursor="help" </script> </head> <body onload = funkcija()> </body></html> JS list CSS funkcije JS funkcije Objašnjenje Vrednosti none Objašnjenje vrednosti bez markera E F O disc puni kruņići liststyle Odredjuje tip markera liste circle prazni kruņići square puni kvadratići decimal na primer [149]

150 Lista je i onako uvuĉena od ostalog teksta ali moņe biti i joń uvuĉenija decimal-leadingzero lower-roman upper-roman lower-alpha na primer na primer i ii iii iv na primer I II III IV na primer a b c.. upper-alpha A B C... lower-greek grĉka slova lower-latin na primer a b c... upper-latin A B C... hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha outside inside hebrejski brojevi armenijski brojevi gruzijski brojevi cjk simboli vijetnamski indoneņanski vijetnamski indoneņanski uvuĉena normalno joń vińe uvuĉena ne 4 ne ne Odredjuje sliku markera url(url) adresa slike 4 1 ne Evo primera: <html><head> <script type="text/javascript"> function lista(){ document.getelementbyid("ul").style.liststyle="decimal inside"; </script> </head><body> <ul id="ul"> <li>coffee</li> <li>tea</li> <li>water</li> <li>soda</li> </ul> <input type="button" onclick="lista()" value="promeni izgled liste"> </body></html> [150]

151 JS CSS funkcije za poziciju JS funkcije bottom top left right position zindex Objašnjenje Vrednosti Objašnjenje vrednosti E F O Definińe poziciju elementa u odnosu na prostor u kome se nalazi Definińe tip pozicije Definińe vidljivos elementa jednog u odnosu na druge auto % pozicija u px, ili mm itd static relative absolute fixed auto broj Po defaultu Pozicija se odredjuje procentualno od donje (bottom), gornje (top), levu (left) i desnu (right) ivicu prostora a u odnosu na veliĉinu prostora Sve isto kao % ali samo ńto se odredjuje u px ili ostalim CSS mernim jedinicama Po defaultu Pozicija se odredjuje u zavisnosti od defaultne pozicije Pozicija se odredjuje u zavisnosti od nulte pozicije na strani, tom jest od gornjeg kranjeg levog ugla Odredjuje se kao absolute, ali ostaje fiksna pozicija na ekranu bez obzira ńto mi pomeramo i klizaĉ Po defaultu. Onaj element koji je zadnji kreiran on će se i videti. Definińemo koji element će biti vidljiv a koji u pozadini. Vidite detaljnije u CSS edukaciji <html><head> <script type="text/javascript"> function promena(){ document.getelementbyid("img1").style.zindex="-1"; </script> </head><body> <h1>pozicija i vidljivost slike</h1> <img id="img1" src="jsslikeplanete/sunce.jpg"> <script type="text/javascript"> document.getelementbyid("img1").style.position="absolute" document.getelementbyid("img1").style.left="50px"; document.getelementbyid("img1").style.top="0px"; </script> <p>po defoltu z-index je 0. Z-index -1 ima prioritet.</p> <br><br><br><input type="button" onclick="promena()" value="povećaj vidljivost teksta"> </body></html> [151]

152 JS tekstualne CSS funkcije JS funkcije Objašnjenje Vrednosti Objašnjenje vrednosti E F O color definińe boju teksta ime rgb(1,1,1) #aaaaaa [152] Ime boje, na pr. red, blue black itd Boja u rgb zapisu Boja u heksazapisu fontfamily definińe izgled slova font Dfinińe font, na primer arial, itd. fontsize fontstyle fontvariant fontweight definińe veliĉinu slova Definińe stil slova Definińe varijantu slova Definińe debljinu slova xx-small x-small small medium large x-large xx-large smaller larger veliĉina u px % none normal italic oblique normal small-caps normal lighter bold bolder Definińe veliĉinu slova pomoću rezervisanih reĉi Postavlja manja slova u odnosu na nadredjeni element Postavlja veća slova u odnosu na nadredjeni element Definińe taĉno odredjenju veliĉinu slova u pikselima, milimetrima i drugim CSS jedinicama mere Definińe u procentima u odnosu na veliĉinu elementa u kome je tekst Po defaultu Po defaultu Malo iskońena slova sto kao i italic Po defaultu Sva slova pretvara u velika slova Po defaultu Tanka Podebljana Podebljana Debljina definisana brojem 4 1 9

153 letterspacing lineheight textalign textdecoration textindent texttransform whitespace wordspacing Definińe rastojanje izmedju slova u tekstu Definińe rastojanje izmedju redova teksta Definińe kako će tekst biti poravnjan Dekoracija teksta Definińe rastojanje teksta od leve ivice polja u kome se nalazi tekst Transformińe slova u velika ili mala itd Definińe lomljenje redova Definińe rastojanje izmedju reĉi u tekstu normal broj normal broj duņina u pikselima na primer % left right center justify none underline overline line-through blink duņina u px % none capitalize uppercase lowercase normal nowrap pre normal duņina Po defaultu Na primer -1,-2 itd ńto znaĉi da će se slova skupljati a ako je pozitivan broj onda će se slova udaljavati Po defaultu Rastojanje se definińe kad se broj pomnoņi sa veliĉinom fonta Na primer fiksno u pikselima ili drugim CSS veliĉinama Procentualno u odnosu na veluĉinu fonta slova Biće poravnan prema levoj liniji polja u kome je smeńten desno centrirano poravnan sa svih strana u liniju kao novinski tekst po defaultu podvuĉen tekst nadvuĉen tekst precrtan tekst tekst koji treperi Fiksno definisano u pikselima ili u nekim drugim CSS jedinicama Procentualno u odnosu na horizontalnu veliĉinu polja u kome se nalazi tekst Po defaultu prvi znak svake reĉi se pretvara u veliko slovo sva slova u tekstu se pretvaraju u velika slova sva slova u tekstu se pretvaraju u mala slova po defaultu ne lomi redove teksta u novi red ukoliko se naidje na kraj ekrana nego pravi vodoravni klizaĉ. Prikazuje se tekst bań onako kako je napisan u HTML kodu Po defaultu Definińe razmak u pikselima, milimetrima ili ostalim CSS jedinicama mere Primer: [153]

154 <html><head> <style type=text/css> #aa { background-color:#ff9966; width: 500px; height: 50px; border: 5px solid gray; padding-top: 10px; </style> <script type="text/javascript"> c=0; t=0; function startuj(){ document.getelementbyid("aa").style.textindent = c; if (c==435) c=1 c=c+1; t = settimeout("startuj()",1); </script> </head><body> <input type="button" value="startuj" onclick="startuj()"> <p id="aa"><b>dejan</b></p> <input type="button" value="stopiraj" onclick="cleartimeout(t)"> </body></html> CANVAS CANVAS (<canvas>) je HTML tag koji se pojavio u HTML5. CANVAS se koristiti za crtanje grafike pomoću JavaScript. Moţe se koristiti na primer za crtanje grafova, foto-kompozicija, ili praviti animacije. Canvas je prvi put predstavljen u Apple na Mac OS X, a kasnije je implementiran na brauzer Safari 1.3. Takodje ovaj tag podrţavaju i Firefox 1.5, Internet Explorer 6, i Opera 9. Canvas stvara crteţe ĉiju površinu popunjavamo sa jednim ili više renderanim kontekstima. Renderiranje se temelji na OpenGL-u. U ovom delu ću pokušati da opišem kako ugraditi CANVAS element u HTML stranicu. Takodje ću dati i primere koji bi trebalo da opišu neke ideje šta moţete uĉiniti sa CANVAS. CANVAS ugradnja u HTML CANVAS tag u HTML dokumentu izgleda ovako: <canvas id="graf" width="150" height="150"></canvas> CANVAS kao što vidimo ima samo dva atributa, širinu WIDTH i visinu HEIGHT izraţenu u pikselima. Medjutim i širina i visina su opcioni parametri. U ovom našem sluĉaju platno za crtanje je dimenzije 150 X 150 piksela, a ako nije definisana širina i visina platno je po defaultu dimenzije 300 X 150 piksela. [154]

155 Obzirom da CANVAS tag podrţavaju samo noviji preglednici mi moramo definisati i alternativni sadrţaj za te starije preglednike. Na primer moţemo pisati unutar CANVAS taga bilo koji HTML sadrţaj. Naravno preglednici koji podrţavaju CNVAS će ignorisati HTML kod unutar poĉetnog i krajnjeg CANVAS taga. Evo kako na primer moţemo pisati za brauzere koji ne podrţavaju CANVAS: <canvas id="graf" width="150" height="150"> ovde stoji crtež grafike ali vaš brauzer je star i ne podržava prikaz. </canvas> Ili: <canvas id="graf" width="150" height="150"> <img src="starbrauzer.png" width="150" height="150"> </canvas> Ovako napisano, preglednici koji podrţavaju CANVAS neće prikazati sliku starbrauzer.png a ni onaj gornji tekst. Da bi brauzeri koji podrţavaju CANVAS nešto prikazali treba definisati programibilnu sliku pomoću JavaScript funkcije getcontext ("2d" ). na primer ovako: <html><head> <script type="text/javascript"> function crtaj(){ canvas = document.getelementbyid("graf"); if (canvas.getcontext){ ctx = canvas.getcontext("2d"); </script> <style type="text/css"> canvas { border: 1px solid black; </style> </head><body onload=crtaj()> <canvas id="graf" width="150" height="150"></canvas> </body></html> Naravno ovako napisan kod u brauzere koji podrţavaju CANVAS daće samo prazano uokvireno platno jer još nismo ništa nacrtali. U ovom kodu takodje primetite vrlo bitnu stvar a to je da se funkcija za crtanje poziva tek nakon uĉitavanja dokumenta u brauzer. Ako koristimo na primer settimeout( ) ili setinterval( ) moţemo prikazivati i neke animacije, itd itd. Na kraju ću dati linkove u kojima moţete videti sloţenije CANVAS animacije, crteţe, grafikone, itd. Crtanje pravougaonika Evo jednog jednostavnog primera koji crta dva kvadrata koji se preklapaju: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect (30, 30, 55, 50); [155]

156 </script> </head><body onload="crtaj();"> <canvas id="kocke" width="150" height="150"></canvas> </body></html> Ovde smo crtali dva popunjena i obojena pravougaonika. Postoje tri funkcije koje crtaju pravougaonik: fillrect(x, y, duţina, visina) - crta ispunjen pravougaonik strokerect(x, y, duţina, visina) - crta samo konture pravougaonika clearrect(x, y, duţina, visina) - briše sve nacrtano unutar kontura ovako definisanog pravougaonika X i Y su koordinate gornjeg levog temena pravougaonika, a duţina je duţina pravougaonika a visina je visina. Pre nego krenemo dalje da damo prikaz kako se definiše canvas i kako je postavljen koordinatni sistem, i kako izgleda definicija pravougaonika unutar canvas-a: Evo primera sa sve tri funkcije gornje: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.fillrect(25,25,100,100); ctx.clearrect(45,45,60,60); ctx.strokerect(50,50,50,50); </script> </head><body onload="crtaj();"> <canvas id="kocke" width="150" height="150"></canvas> </body></html> Medjutim kada crtanje pravuganika kombinujemo sa drugim geometrijskim figurama kako bi nacrtali sloţene crteţe koristiti se funkcija: rect(x, y, width, height) Ali rect( ) se koristi samo u kombinaciji sa funkcijama stroke() i fill() koje će mo objasniti odma u sledećem naslovu: [156]

157 Crtanje raznih oblika Svaki sloţeniji crteţ mora da sadrţi sledeće funkcije: beginpath() closepath() stroke() fill() Kao što znamo sloţeniji crteţi se sastoje od raznih geometrijskih oblika, kao što su linije, pravougaonici, krugovi, itd. BeginPath( ) je zapravo kontejner koji sadrţi definicije svih geometrijskih oblika koji skupa definišu jedan crteţ. ClosePath( ) zatvara formu crteţa. Nije uvek potrebno koristiti closepath ali da mnogo ne komplikujemo bolje je uvek koristiti. Stroke( ) je funkcija koja se koristi za crtanje kontura, a fill( ) za crtanje ispunjenih površina. Evo jednog crteţa trougla koji demonstrira upotrebu beginpath: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.moveto(75,50); ctx.lineto(100,75); ctx.lineto(100,25); ctx.fill(); moveto( ) je vrlo korisna funkcija, koja zapravo ne definiše nikakv geometrijski oblik, ali moţe da pomera sve moguće oblike. Princip rada je takav, da na primer imate olovku na stolu, i sad je vi uzmete i pomerite je sa jednog mesta na drugo. Znaĉi, kad definišemo neki oblik pmoću beginpath() funkcijom i kad se pozove ta funkcija onda se crteţ crta u koordinati (0, 0). Medjutim mi moţemo pomoću moveto() funkcijom da pomeramo taj crteţ u koju god ţelimo koordinatu unutar našeg platna za crtanje. To je jedan korisan naĉin upotrebe ali mi moţemo pomerati ne samo ceo crteţ, već i pojedine geometrijske oblike unutar same defincije nekog crteţa. Evo primera: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.arc(75,75,50,0,math.pi*2,true); // definisanje spoljnog celog kruga ctx.moveto(110,75); ctx.arc(75,75,35,0,math.pi,false); // definisanje usta ctx.moveto(65,65); ctx.arc(60,65,5,0,math.pi*2,true); // levo oko ctx.moveto(95,65); ctx.arc(90,65,5,0,math.pi*2,true); // desno oko ctx.stroke(); [157]

158 lineto(x, y) - Funkcija za crtanje linije. Kao što znamo, da bi smo nacrtali liniju potrebno je definisati dve taĉke. Funkcija lineto( ) definiše jednu taĉku a druga taĉka je koordinatni poĉetak. E sad ako ţelimo liniju koja ne prolazi kroz koordinatni poĉetak onda koristimo funkciju moveto( ) za izmeštanje koordinatnog poĉetka. Evo primer korišćenja linija u crtanju dva trougla od kojih je jedan isunjen a drugi samo kontura: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); // Ispunjen trougao ctx.beginpath(); ctx.moveto(25,25); ctx.lineto(105,25); ctx.lineto(25,105); ctx.fill(); // Kontura trougao ctx.beginpath(); ctx.moveto(125,125); ctx.lineto(125,45); ctx.lineto(45,125); ctx.closepath(); ctx.stroke(); arc(x, y, polupreĉnik, poĉetakkruga, krajkruga, smer) - funkcija za crtanje krugova i iseĉaka krugova (lukova). X i Y su koordinate taĉke centra kruga. Smer crtanja luka je suprotan od smera kretanja na satu ako je true, a ako je false onda je u smeru kretanja kazaljke na satu. PoĉetakKruga i KrajKruga su parametri koji definišu poĉetak i kraj luka kruga a mere se u radijanima. Da biste pretvorili uglove u stepenima u uglove u radijanima koristite sljedeći JavaScript izraz: radijani = (Math.PI/180) * stepeni Evo primera za više sluĉajeva krugova: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); for(var i=0; i<4; i++){ for(var j=0; j<3; j++){ ctx.beginpath(); x = 25 + j*50; // x coordinate y = 25 + i*50; // y coordinate radius = 20; // Arc radius startangle = 0; // Starting point on circle endangle = Math.PI+(Math.PI*j)/2; // End point on circle [158]

159 anticlockwise = i%2==0? false : true; // clockwise or anticlockwise ctx.arc(x,y,radius,startangle,endangle, anticlockwise); if (i>1){ ctx.fill(); else { ctx.stroke(); Bezijerove krivulje Bezierova krivulja je parametriĉna krivulja vaţna u podruĉju matematiĉke numeriĉke analize, a naroĉito se primjenjuje u 3D vektorskoj grafici, Bézierove krivulje su vaţan alat, kojim se sluţi većina grafiĉkih programa pri oblikovanju glatkih krivulja, koje se mogu beskonaĉno skalirati. Svi programi za crtanje i ureċivanje slika poput; Adobe Illustratora, Adobe Photoshopa, CorelDrawa sluţe se "Putanjama" ( engleski: "Paths"), a one su kombinacija Bézierovih krivulja. Bézierove krivulje su široko rasprostanjene i u programima za animaciju poput; Adobe Flasha, Adobe After itd. Mi će mo ovde te krivulje koristiti da crtamo razne slike. Funkcije su sledeće: quadraticcurveto(cp1x, cp1y, x, y) beziercurveto(cp1x, cp1y, cp2x, cp2y, x, y) X i Y parametri u obe metode su koordinate taĉke na kraju. cp1x i cp1y su koordinate prve kontrolne taĉke, a cp2x i cp2y su koordinate druge kontrolne taĉke. Korišćenje kvadratiĉne i kubiĉne Bézierove krivulje moţe biti priliĉno zahtevno, jer za razliku od vektorskog crtaĉkog softvera (poput Adobe Illustrator-a) mi nemamo direktne vizualne povratne informacije o tome šta radimo. To ĉini priliĉno teško crtati sloţene oblike. U sledećem primeru, mi ćemo crtati neke jednostavne oblike, ali ako Vi imate vremena i, najviše od svega, strpljenja, mnogo sloţenije crteţe bi ste mogu kreirati. function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.moveto(75,25); [159]

160 ctx.quadraticcurveto(25,25,25,62.5); ctx.quadraticcurveto(25,100,50,100); ctx.quadraticcurveto(50,120,30,125); ctx.quadraticcurveto(60,120,65,100); ctx.quadraticcurveto(125,100,125,62.5); ctx.quadraticcurveto(125,25,75,25); ctx.stroke(); Ili na primer ovako nešto: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.moveto(75,40); ctx.beziercurveto(75,37,70,25,50,25); ctx.beziercurveto(20,25,20,62.5,20,62.5); ctx.beziercurveto(20,80,40,102,75,120); ctx.beziercurveto(110,102,130,80,130,62.5); ctx.beziercurveto(130,62.5,130,25,100,25); ctx.beziercurveto(85,25,75,37,75,40); ctx.fill(); Klasiĉne slike U prostor u kome smo crali pomoću CANVES moţemo uvoziti i gotove slike, koje mogu biti kao pozadina našim crteţima, ili pak da pravimo neke dinamiĉke animacije, itd. Moţemo ubacivati bilo koje tipove slika, na primer.jpg,.gif,.png itd. Ubacivanje slika se vrši u osnovi u dva koraka: Pravimo referencu na objekat JavaScript slike ili druge CANVAS elemente kao izvor. Nije moguće jednostavno ubacivanjem URL adrese slika. Zatim "crtamo" sliku na platno pomoću drawimage funkcije. drawimage(image, x, y) - kao što smo već napisali ovom funkcijom ubacujemo sliku, stim što su X i Y kordinate koje definišu poloţaj slike i to tako da definišu gornju levu taĉku slike. Zapravo drawimage( ) funkcija ima još dve varijante ali ovo je prva. Evo primera: function crtaj() { var ctx = document.getelementbyid("kocke").getcontext("2d"); var img = new Image(); img.onload = function(){ ctx.drawimage(img,0,0); ctx.beginpath(); ctx.moveto(30,96); ctx.lineto(70,66); ctx.lineto(103,76); ctx.lineto(170,15); [160]

161 ctx.stroke(); img.src = "jsslikeplanete/mars.jpg"; Medjutim ne moramo definisati sliku u samoj funkciji img.src="...". Ako već u dokumentu postoji slika koju ţelimo da iskoristimo moţemo je pozvati i ovako: function crtaj() { var ctx = document.getelementbyid("kocke").getcontext("2d"); ctx.drawimage(document.getelementbyid("img1"),0,0); ctx.beginpath(); ctx.moveto(30,96); ctx.lineto(70,66); ctx.lineto(103,76); ctx.lineto(170,15); ctx.stroke(); Druga varijanta funkcije nam dodaje još dva nova parametra koja omogućavaju skaliranje slike, to jest podešavanje veliĉine slike koja nama odgovara. Funkcija izgleda: drawimage(image, x, y, width, height) Gde su width širina slike koju mi ţelimo, i height visina koja nama odgovara, a sve u pikselima naravno. Mislim da je ovo jasno i da ne treba neki poseban primer, jer je sve ostalo isto kao i prethodni primer. Treća varijanta drawimag funkcije je mogućnost seĉenja slike. Naime, nekad je neophodno koristiti samo neki deo slike. Funkcija izgleda sad ovako: drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) sx, sy, swidth i sheight je pravougaonik iseĉka slike. Znaĉi sx i sy su kordinate taĉke u slici, a koordinatni poĉetak u slici je sam gornji levi ugao slike. dx, dy, dwith i dheight su u stvari oni naši poznati parametri kao iz gornje dve varijante drawimage funkcije. Ovako napisano moguće da je nejasno ali daću sliku koja objašnjava: [161]

162 Source image je slika koju seĉemo, a destinacion canvas je postavljanje tog iseĉka slike na naše platno. Pošto je ovo verujem jasno a kod je identiĉan kao u prvoj varijanti drawimage funkcije, onda mislim da nije potreban primer. Stilovi i boje Do sada smo linije crteţa, kao i ispune crtali samo bojom koja je po defaultu, a to je crna boja. Ovde će mo videti kako se koriste i sve ostale moguće boje. Postoje dve funkcije za boje a to su: fillstyle = color - definiše boju ispune strokestyle = color - definiše boju kontura Color je definicija boje a ona moţe da se definiše na više naĉina: ctx.fillstyle = "orange"; ctx.fillstyle = "#FFA500"; ctx.fillstyle = "rgb(255,165,0)"; ctx.fillstyle = "rgba(255,165,0,1)"; Svi ovi naĉini su nam poznati, sem zadnjeg rgba pa da ga objasnimo. Zapravo je zadnji parametar nepoznanica a ostala tri su definicije boja kao kod rgb. Zadnji parametar definiše nivo transparentnosti boje, odnosno nivo providnosti. Ako se stavi broj 1 onda nije providna boja a što se broj više smanjuje do 0 sve je transparentniji. Tako na primer 0.5 je upola providan. Ako postavite strokestyle i / ili fillstyle na kraju onda tako definišete boju za sve linije i površine. Ako neki oblik ţelite u drugoj boji, onda se fillstyle ili strokestyle definiše odma u narednom redu u odnosu na red u koji ste definisali oblik. Evo nekoliko primera: Primer1. function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); [162]

163 for (i=0; i<6; i++){ for (j=0; j<6; j++){ ctx.fillstyle="rgb(" + Math.floor( *i) + "," + Math.floor( *j) + ",0)"; ctx.fillrect(j*25,i*25,25,25); Primer2. function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); for (i=0; i<6; i++){ for (j=0; j<6; j++){ ctx.strokestyle="rgb(0," + Math.floor( *i) + "," + Math.floor( *j) + ")"; ctx.beginpath(); ctx.arc(12.5+j*25,12.5+i*25,10,0,math.pi*2,true); ctx.stroke(); Transparentnost boja Kao što je već pisano providnost (transparentnost) boja moţese praviti pomoću rgba definicije za boje, pomoću njenog zadnjeg parametre, koji se kreće od 0 - boja se i neće videti, polutransparentna boja i 1 - kad boja nije nimalo transparentna. Medjutim ako su sve boje transparentne podjednako onda ne moramo svuda koristiti rgba, već moţemo rgb, a transparentnost definisati kao globalnu pomoću sledeće funkcije: globalalpha = vrendnosttransparentnosti vrednosttransparentnoszi se naravno kreće od 0 do 1, sve isto kao kad se definiše transparentnost u zadnjem parametru rgba definicije boje. Evo primera: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); // Crtanje pozadine ctx.fillstyle = "#FD0"; ctx.fillrect(0,0,75,75); ctx.fillstyle = "#6C0"; ctx.fillrect(75,0,75,75); [163]

164 ctx.fillstyle = "#09F"; ctx.fillrect(0,75,75,75); ctx.fillstyle = "#F30"; ctx.fillrect(75,75,150,150); ctx.fillstyle = "#FFF"; // Definisanje transparentnosti ctx.globalalpha = 0.2; // Crtanje polutransparentnih krugova for (var i=0;i<7;i++){ ctx.beginpath(); ctx.arc(75,75,10+10*i,0,math.pi*2,true); ctx.fill(); Stil linija Postoje sledeće funkcije koje omogućavaju razne stilove linija: linewidth = vrednost linecap = tip linejoin = tip miterlimit = vrednost linewidth - definiše debljinu linija. Vrednost mora biti pozitivna, a po defaultu je 1. Evo jednog primera: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); for (i = 0; i < 10; i++){ ctx.linewidth = 1+i; ctx.beginpath(); ctx.moveto(5+i*14,5); ctx.lineto(5+i*14,140); ctx.stroke(); linecap - definiše krajeve linija. Tipovi mogu biti: butt, round i square. Da ne bih sad mnogo pisao objašnjenje evo primera koji daje sliku ova tri oblika linija: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); linecap = ["butt","round","square"]; [164]

165 // Crtanje pomoćnih linija za objašnjenje ctx.strokestyle = "#09f"; ctx.beginpath(); ctx.moveto(10,10); ctx.lineto(140,10); ctx.moveto(10,140); ctx.lineto(140,140); ctx.stroke(); // Crtanje linija ctx.strokestyle = "black"; for (i=0; i<linecap.length; i++){ ctx.linewidth = 15; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(25+i*50,10); ctx.lineto(25+i*50,140); ctx.stroke(); linejoin - definiše u kom obliku povezati dve linije. Postoje tri tipa: round (okruglina), bevel(kosina), i miter (kapa). Po defaultu je miter. Evo primera koji sve objašnjava (obratite paţnju na ivice linija gde se spajaju): function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); linejoin = ["round", "bevel", "miter"]; ctx.linewidth = 10; for (i =0; i < linejoin.length; i++){ ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5,5+i*40); ctx.lineto(35,45+i*40); ctx.lineto(75,5+i*40); ctx.lineto(115,45+i*40); ctx.lineto(155,5+i*40); ctx.stroke(); [165]

166 Nijansiranje boja Ovde imamo dve funkcije na raspolaganju: createlineargradient (x1,y1,x2,y2) - za linearno gradiranje boje (postepeno) od taĉke x1, y1 do taĉke x2, y2 createradialgradient (x1,y1,r1,x2,y2,r2) - za kruţno gradiranje od kruţnice iz taĉke x1, y1 sa polupreĉnikom r1, do kruţnice u taĉki x2, y2 sa polupreĉnikom r2. Shvatite ovo kruĉno kao prsten a prsten se gradira bojom. Medjutim ako mi samo ovako postavimo ove funkcije, ništa se neće desiti jer one samo definišu površinu gde će se vršiti nijansiranje. Moramo sad definisati i koja će biti poĉetna boja a koja krajnja kako bi izmedju nastalo nijansiranje. Poĉetna i krajnja boja se definišu funkcijom: addcolorstop (pozicija, color) - color je boja na primer u rgb ili rgba ili heksa zapisu. E sad obe boje izmedju kojih će se praviti prelaz se definišu istom funkcijom addcolorstop( ), stim što pozicija odredjuje da li će se od vrha ka dnu krenuti sa prvom bojom ili sa drugom, odnosno ako je u pitanju radijalni gradijent, da li će se sa prvom bojom krenuti sa unutrašnjosti ili sa spolja ka unutra. Zapravo pozicija moţe imati vrednosti od 0 do 1 a kad izmedju boja menjate 0 i 1 menjaju se i pozicije koje sam gore objašnjavao. E sad ako stavimo na primer jednu 0.5 a drugu 1 onda će se nijansirati ali malo više u korist one sa 1 itd itd. Malo eksperimentišite sa narednim primerima i videćete o ĉemu se radi. Medjutim ako iskoristimo sve dosadašnje funkcije kako treba, i dalje se ništa neće prikazivati na stranici. Mi smo do sada zapravo definisali vrednost za stil bojenja. Znaĉi moţemo definisati sledeće korišćenjem naše dobro poznate promenjljive ctx: nijansiranje = ctx.createlineargradient(0,0,0,600); nijansiranje.addcolorstop(0, "#00ABEB"); nijansiranje.addcolorstop(0.5, "#fff"); ctx.fillstyle = nijansiranje; Kao što vidite sve ovo smo iskoristili kako bi smo definisali jedan stil. E sad taj stil moţemo koristiti u funkcijama kako nam je volja, na primer u kreiranju neke površine pravougaone. Evo kompletnog takvog primera: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); nijansiranje = ctx.createlineargradient(0,0,0,600); nijansiranje.addcolorstop(0, "#00ABEB"); nijansiranje.addcolorstop(1, "#fff"); ctx.fillstyle = nijansiranje; ctx.fillrect(0,0,600,600); </script> </head><body onload="crtaj();"> [166]

167 <canvas id="kocke" width="600" height="600"></canvas> </body></html> Mislim da je ovaj primer priliĉno jasan, kao i sve ove nove funkcije. Evo još jedan primer ali vezan za radijalni gradijent boje: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); // Definiše prelaze boja radgrad = ctx.createradialgradient(45,45,10,52,50,30); radgrad.addcolorstop(0, "#A7D30C"); radgrad.addcolorstop(0.9, "#019F62"); radgrad.addcolorstop(1, "rgba(1,159,98,0)"); radgrad2 = ctx.createradialgradient(105,105,20,112,120,50); radgrad2.addcolorstop(0, "#FF5F98"); radgrad2.addcolorstop(0.75, "#FF0188"); radgrad2.addcolorstop(1, "rgba(255,1,136,0)"); radgrad3 = ctx.createradialgradient(95,15,15,102,20,40); radgrad3.addcolorstop(0, "#00C9FF"); radgrad3.addcolorstop(0.8, "#00B5E2"); radgrad3.addcolorstop(1, "rgba(0,201,255,0)"); radgrad4 = ctx.createradialgradient(0,150,50,0,140,90); radgrad4.addcolorstop(0, "#F4F201"); radgrad4.addcolorstop(0.8, "#E4C700"); radgrad4.addcolorstop(1, "rgba(228,199,0,0)"); // Crta oblike ctx.fillstyle = radgrad4; ctx.fillrect(0,0,150,150); ctx.fillstyle = radgrad3; ctx.fillrect(0,0,150,150); ctx.fillstyle = radgrad2; ctx.fillrect(0,0,150,150); ctx.fillstyle = radgrad; ctx.fillrect(0,0,150,150); </script> </head><body onload="crtaj();"> <canvas id="kocke" width="150" height="150"></canvas> </body></html> Pattern U ranijim nekim primerima koristili smo za kreiranje nekih oblika for petlje, ali postoji jednostavniji naĉin korišćenjem sledeće funkcije: [167]

168 createpattern (image, type) Ova funkcija uzima dva argumenta. IMAGE je ili referenca na neku sliku ili nešto što smo mi nacrtali uz pomoć "canves". TYPE je jedna od sledećih vrednosti: repeat, repeat-x, repeat-y i no-repeat. Već smo se susreli sa ovim vrednostima tako da ih nećemo objašnjavati, a verovatno sad i shvatate o ĉemu je sad reĉ. Evo i primera: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); // create new image object to use as pattern img = new Image(); img.src = "jsslikeplanete/mars.jpg"; img.onload = function(){ // Kreiramo pattern ponavljanje = ctx.createpattern(img, "repeat"); ctx.fillstyle = ponavljanje; ctx.fillrect(0,0,600,600); </script> </head><body onload="crtaj();"> <canvas id="kocke" width="500" height="500"></canvas> </body></html> Senke Za kreiranje senki se koriste sledeće funkcije: shadowoffsetx = vrednost shadowoffsety = vrednost shadowblur = vrednost shadowcolor = color shadowoffsetx i shadowoffsety pokazuju koliko daleko treba proširiti senke od objekta u X i Y smerovima. Mogu se koristiti i negativne vrednosti i tad se senke proširuju prema gore ili ulevo, a pozitivne vrednosti uzrokuju senke prema dole ili udesno. Po defaultu su oba 0. shadowblur definiše veliĉinu efekta zamućenja. Vrednost nije u pikselima. Defaultna vrednost je 0. shadowcolor definiše boju senke, a boja se definiše klasiĉno pomoċu rgb, rgba, heksadecimalno ili navedemo ime boje. Evo primera: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); [168]

169 ctx.shadowoffsetx = -5; ctx.shadowoffsety = -5; ctx.shadowblur = 4; ctx.shadowcolor = "rgba(0, 0, 0, 0.5)"; ctx.font = "40px Times New Roman"; ctx.fillstyle = "red"; ctx.filltext("zdravo ljudi, kakoste", 30, 60); Saving i restoring stanja Da bi smo mogli kreirati sloţenije crteţe moramo odredjena stanja (pozicije crteţa) spremati (uslovno reĉeno "memorisati") i po nekad obnavljati. U narednim primerima će biti sve jasnije. Funkcije za to su: save( ) restore( ) Odredjena CANVAS stanja moţemo po ţelji memorisati save( ) funkcijom, i takodje po ţelji moţemo ih pozivati restore( ) funkcijom kako bi smo ih ponovo promenili, i opet prikazali. Tako moţemo napraviti vrlo sloţene crteţe sa malo pisanja. Crtanje stanja sastoji se od: Transformacija (tj. translacije, rotacije i skaliranje - vidi u nastavku) Vrednosti strokestyle, fillstyle, globalalpha, LineWidth, linecap, linejoin, miterlimit, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation svojstva Trenutni clipping put, što ćemo videti u sledećem odeljku. Evo jednog kraćeg primera koji demonstrira save() i restore() funkcije: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.fillrect(0,0,150,150); // crtanje pravougaonika ctx.save(); // učitavanje pošetnog stanja crteža ctx.fillstyle = "#09F" // vršimo nove promene istog crteža, ali imajte // na umu da smo prethodno stanje zapamtili ctx.fillrect(15,15,120,120); // crtamo pravougaonik sa novim dimenzijama ctx.save(); // pamtimo nove promene ctx.fillstyle = "#FFF" // vršimo nove promene ctx.globalalpha = 0.5; ctx.fillrect(30,30,90,90); // Crtamo novi pravougaonik ctx.restore(); // vraćamo predjašnje stanje ctx.fillrect(45,45,60,60); // pravougaonik sa obnovljenim postavkama prepravljamo ctx.restore(); // vraćamo predjašnje originalno stanje ctx.fillrect(60,60,30,30); // pravougaonik sa obnovljenim originalnim [169]

170 //postavkama po drugi put prepravljamo Ovaj primer ilustriruje kako uĉitavanjem stanja moţemo manjim pisanjem nacrtati veći broj pravougaonika. Translacije Translacija je jedan od metoda transformacija. Ova metoda se koristi za paralelno pomeranje crteţa u razliĉitim taĉkama na platnu. Funkcija za to je: translate(x, y) Evo jednog primera transformacije translacje: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); ctx = canvas.getcontext("2d"); ctx.fillrect(0,0,300,300); for (i=0; i<3; i++) { for (j=0; j<3; j++) { ctx.save(); ctx.strokestyle = "#9CFF00"; ctx.translate(50+j*100,50+i*100); crtajspirograf(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); ctx.restore(); function crtajspirograf(ctx,r,r,o){ var x1 = R-O; var y1 = 0; var i = 1; ctx.beginpath(); ctx.moveto(x1,y1); do { if (i>20000) break; var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+o)*math.cos(((r+r)/r)*(i*math.pi/72)) var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+o)*math.sin(((r+r)/r)*(i*math.pi/72)) ctx.lineto(x2,y2); x1 = x2; y1 = y2; i++; while (x2!= R-O && y2!= 0 ); ctx.stroke(); </script> </head><body onload="crtaj();"> <canvas id="kocke" width="600" height="600"></canvas> </body></html> Rotacije [170]

171 Druga metoda transformacija je rotacija. Ona se koristi kada postoji potreba da se neki crteţ zarotira za neki ugao. Evo funkcije: rotate(angle) Evo jednog primera: function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.translate(75,75); for (i = 1; i < 6;i ++){ // crta prstenove (iznutra ka van) ctx.save(); ctx.fillstyle="rgb("+(51*i)+", "+(255-51*i)+", 255)"; for (j=0; j<i*6; j++){ // crta pojedinačne kružiće ctx.rotate(math.pi*2/(i*6)); ctx.beginpath(); ctx.arc(0,i*12.5,5,0,math.pi*2,true); ctx.fill(); ctx.restore(); Skaliranje Jedna od metoda transformacija je i skaliranje. To je takva transformacija kojom se moţe povećavati ili smanjivati širina ili visina canvas slika, pa time moţemo dobiti razne efekte izduţivanja ili zbijanja slika, ili pak smanjenje ili povećanje canvas slika ako i visinu i širinu slika smanjujemo odnosno povećavamo proporcionalno. Osnovna funkcja transformacije skaliranja je: scale(x, y) Ova metoda, kao što vidimo, uzima dva parametra. Parametar X je faktor u vodoravnom smeru a Y u vertikalnom. Oba parametra moraju biti pozitivni brojevi. Vrednosti manja od 1.0 smanjuje a vrednost veća od 1.0 povećaava jedinicu veliĉine. Ako je vrednost X ili Y parametra taĉno 1.0 onda ne utiĉe na veliĉinu jedinice. Po defaultu jedna jedinica na platnu je taĉno jedan piksel. Ako se primjenjuje, na primer, faktor od 0.5 to rezultira upola smanjenje visine ili širine canvas slike, a ako je faktor 2.0 onda će se širina ili visina duplo povećati. Evo primera koji će sve lepo demonstrirati: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); [171]

172 ctx.strokestyle="#fc0"; ctx.linewidth=1.5; ctx.fillrect(0,0,300,300); ctx.save(); ctx.translate(50,50); drawspirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(0.75,0.75); drawspirograph(ctx,22,6,5); ctx.translate( ,0); ctx.scale(0.75,0.75); drawspirograph(ctx,22,6,5); ctx.restore(); ctx.strokestyle="#0cf"; ctx.save(); ctx.translate(50,150); ctx.scale(1,0.75); drawspirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawspirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawspirograph(ctx,22,6,5); ctx.restore(); ctx.strokestyle="#cf0"; ctx.save(); ctx.translate(50,250); ctx.scale(0.75,1); drawspirograph(ctx,22,6,5); ctx.translate( ,0); ctx.scale(0.75,1); drawspirograph(ctx,22,6,5); ctx.translate( ,0); ctx.scale(0.75,1); drawspirograph(ctx,22,6,5); ctx.restore(); function drawspirograph(ctx,r,r,o){ x1 = R-O; y1 = 0; i = 1; ctx.beginpath(); ctx.moveto(x1,y1); do { if (i>20000) break; x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+o)*math.cos(((r+r)/r)*(i*math.pi/72)) y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+o)*math.sin(((r+r)/r)*(i*math.pi/72)) ctx.lineto(x2,y2); x1 = x2; [172]

173 y1 = y2; i++; while (x2!= R-O && y2!= 0 ); ctx.stroke(); </script> </head> <body onload="crtaj();"> <canvas id="kocke" width="500" height="500"></canvas> </body></html> Transformacije Nakon svih gornjih transformacija, na primer rotacije, translacije i skaliranja moţemo na kraju napraviti matricu svih tranlsacija, odnosno matricu transformacije. Funkcija za to je: transform (m11, m12, m21, m22, dx, dy) Naravno kao i svaka matrica, i ova se moţe pretstaviti šematski: m11 m21 dx m12 m22 dy Postoji i funkcija: settransform (m11, m12, m21, m22, dx, dy) Evo sad jednog primera koji obuhvata settransforms() funkciju ali i skoro sve ostale funkcije za transformacije: <html><head> <script type="text/javascript"> i=0; function crtaj(){ img = new Image(); img.src = "jsslikeplanete/neptun.jpg"; img.onload = function(){ canvas = document.getelementbyid("tutorial"); if (canvas.getcontext){ ctx = canvas.getcontext("2d"); crtaj() function crtaj(){ brzina1=5 brzina2=1 ctx.save() ctx.clearrect(0,0,750,750); // briše prethodno pre crtanja novog ctx.settransform (-.5,.5,-1,.25,250,img.width*.5) [173]

174 ctx.rotate(math.pi*2*(i/360)*brzina1 ) ctx.drawimage(img,img.width*-.5,-48); ctx.restore(); ctx.save() ctx.settransform(-.5,.5,-1,.01,250,img.width) ctx.rotate(math.pi*2*(i/360)*brzina2 ) ctx.drawimage(img,img.width*-.5,-48); ctx.restore(); font="times new roman" size= 40 // velicina teksta /* U navodnicima pišemo tekst po želji */ text="3d Canvas Tekst" /*U nastavku sledi podešavanje teksta*/ ctx.save() debljina =20 for (j=1; j<debljina; j++){ ctx.settransform(-.5,.5,-1,.01,250,img.width*.5-j) ctx.rotate(math.pi*2*(i/360)*brzina2 ) ctx.translate(-img.width*.25, img.height*.25); ctx.fillstyle="rgba(255,190,100,.3)" ctx.moztextstyle = size + "pt " + font ; ctx.mozdrawtext(text); ctx.restore() ctx.save() ctx.settransform(-.5,.5,-1,.01,250,img.width*.5-debljina) ctx.rotate(math.pi*2*(i/360)*brzina2 ) ctx.translate(-img.width*.25, img.height*.25); gradbase = ctx.createlineargradient(0,-img.height*.25,0,img.height*.25); gradbase.addcolorstop(0,"rgb(255,220,150)"); gradbase.addcolorstop(0.2,"rgb(220,180,90)"); gradbase.addcolorstop(0.5,"rgb(185,155,70)"); gradbase.addcolorstop(1,"rgb( 140, 100,50)"); ctx.moztextstyle = size + "pt " + font ; ctx.fillstyle=gradbase ctx.mozdrawtext(text); ctx.restore() gradgloss = ctx.createlineargradient(150,150,250,250); gradgloss.addcolorstop(0,"rgba(255,255,255,.4)"); gradgloss.addcolorstop(0.35,"rgba(225,225,225,.4)"); gradgloss.addcolorstop(0.65,"rgba(180,180,180,.3)"); gradgloss.addcolorstop(1,"rgba( 120, 120,120,.1)"); ctx.save() ctx.settransform(-.5,.5,-1,.01,250,img.width*.5-debljina) ctx.rotate(math.pi*2*(i/360)*brzina2 ) ctx.translate(-img.width*.25, img.height*.25); ctx.moztextstyle = size + "pt " + font ; ctx.fillstyle=gradgloss ctx.mozdrawtext(text); ctx.restore() i+=1; if (i==360) i=i%360 settimeout(crtaj, 50); </script> <style type="text/css"> canvas { border: 1px solid black; background-color: black; [174]

175 </style></head> <body onload="crtaj()"> <canvas id="tutorial" width="500" height="300"></canvas> </body></html> Kompozicije Ovde će mo razmatrati varijacije u sluĉajevima kada se preklapaju oblici u nekim njihovim delovima. Funkcija za to je: globalcompositeoperation = tip Gde tip moţe biti sledeće rezervisane reĉi: Tip Demonstracija Tip Demonstracija source-over (default) destination-over source-in destination-in source-out destination-out source-atop destination-atop [175]

176 lighter darker xor copy Iseĉci Moţemo i sakrivati neţeljene delove crteţa, i tako postizati razne efekte. Funkcija za to je: clip() Evo primera: <html><head> <script type="application/javascript"> function crtaj() { canvas = document.getelementbyid("kocke"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.fillrect(0,0,150,150); ctx.translate(75,75); // Kreiranje kružnog isečka ctx.beginpath(); ctx.arc(0,0,60,0,math.pi*2,true); ctx.clip(); // Crtanje pozadina lingrad = ctx.createlineargradient(0,-75,0,75); lingrad.addcolorstop(0, "#232256"); lingrad.addcolorstop(1, "#143778"); ctx.fillstyle = lingrad; ctx.fillrect(-75,-75,150,150); // crtanje zvezda for (j = 1; j < 50; j++){ ctx.save(); ctx.fillstyle = "#fff"; ctx.translate(75-math.floor(math.random()*150), 75- Math.floor(Math.random()*150)); drawstar(ctx,math.floor(math.random()*4)+2); ctx.restore(); function drawstar(ctx,r){ ctx.save(); ctx.beginpath() [176]

177 ctx.moveto(r,0); for (i = 0; i < 9; i++){ ctx.rotate(math.pi/5); if (i%2 == 0) { ctx.lineto((r/ )* ,0); else { ctx.lineto(r,0); ctx.closepath(); ctx.fill(); ctx.restore(); </script> </head><body onload="crtaj();"> <canvas id="kocke" width="600" height="600"></canvas> </body></html> Sloţeniji primeri CANVAS grafike Evo linkova na kojima moţete naći sloţenije primere upotrebe JavaScript CANVAS grafike: [177]

178 PHP i MySQL PHP je skriptni serverski programski jezik prvenstveno namenjen za izredu dinamiĉkih internet sajtova. Serverski jer se PHP program izvršava na serveru a korisnik u svom brauzeru dobija HTML stranicu. Da bi se izradio PHP sajt neophodno je da server na kome je hostovan sajt podrţava PHP. U sledećim tekstovima biće razmatrana uglavnom PHP verzija 4.3. MySQL je veoma brz sistem za upravljanje relacionim bazama podataka. MySQL omogućava veoma brzo skladištenje, pretraţivanje, uĉitavanje, sortiranje i isĉitavane podataka. MySQL server upravlja pristupu podacima u proseku više od 100 korisnika u istom trenutku ka jednom istom podatku jer je projektovan kao višekorisniĉki i višenitni server. PHP omogućava izuzetno dobro uspostavljanje veza sa svim bazama podataka, ali najĉešće se vezuje sa MySQL jer su oba otvorenog koda i licenca za upotrebu im je besplatna. Takodje PHP je usko povezan sa HTML jezikom jer se ĉesto u PHP program ubacuje HTML kod i obrnuto. Najvaţnija veza izmedju PHP-a i HTML-a je ta što se preko HTML formi ubacuju u PHP-u podaci. Zato je veoma bitno solidno poznavanje HTML programiranja pre nego se krene sa prouĉavanjem PHP programskog jezika. PHP i MySQL U ovom delu obradićemo PHP sintaksu. Zapravo manje više PHP sintaksa je sliĉna kao i JavaScript sintaksa u globalu, ali naravno oba ova jezika imaju svoje specifiĉnosti, odnosno razlike. Ukoliko ste dobro savladali JavaScript biće vam vrlo lako uĉenje i PHP. PHP je u globalu malo sloţeniji jezik od JavaScript, ne toliko po obimu koliko po tome što PHP pruţa mogućnost dobro i pravo objektno programiranje. I PHP ima jako mnogo ugradjenih gotovih funkcija koje mogu mnogo toga da završe umesto pisanja dugaĉkih potprograma, i samim tim da uštede i vreme i napor. U tom smislu jako je preporuĉljivo da se nauĉe dobro što više ugradjenih funkcija, kao i njihove mogućnosti. Praznine, komentari, promenjljive i konstante Oznaka <?php ili samo <? je poĉetak PHP programa, a oznaka?> je kraj. PHP kod se stavlja uvek u fajl sa ekstenzijom.php! Svaki kod koji je izvan znakova za poĉetak i kraj PHP koda tumaĉi se kao HTML kod, ili neki drugi. Unutar PHP znakova za poĉetak i kraj mogu se ubacivati i HTML kodovi ali iskljuĉivo pomoću PHP naredbe prikaza PRINT ili ECHO unutar dvostrukih ili jednostrukih navodnika. Svaki PHP kod sastavljen je od iskaza, praznina i komentara. Praznine To su znakovi kao što su novi red, tabulatori i razmaci. Oni se prilikom izvršenja koda zanemaruju a sluţe da bi nama program bio ĉitljiv. Komentari Komentari sluţe za objašnjenje PHP koda prilikom našeg ĉitanja, a pri izvršenju programa se zanemaruju. Postoji višeredni komentar koji poĉinje sa oznakom /* a završava se sa */ na primer: [178]

179 /* Autor Milenko Pantić Skripta za foto galeriju Napravljena */ Komentar pisan samo u jednom redu moţe poĉeti sa dve kose crte ili pak sa tarabom: // Deo koda za proveru verodostojnosti unetog podatka za username # Deo koda za proveru verodostojnosti unetog podatka za username Sve iza dve kose crte ili tarabe prilikom izvršenja programa se zanemaruje sve dok se ne dodje do kraja reda ili do znake za kraj PHP koda. Sve ostalo u PHP kodu nazivamo iskazima i po njima se program izvršava. Svi iskazi u PHP kodu se odvajaju znakom taĉka zarez " ; ". Promenjljive Promenjljive su veliĉine koje tokom izvršavanja PHP programa mogu menjati svoju vrednost. U PHP-u oznake za promenljive moraju poĉeti sa znakom dolar $. Iza znaka dolar naziv mora poĉeti slovom, a posle toga moţemo pisati brojeve, slova ili neke druge znakove ali ne i razmak. Zapamtite da PHP razlikuje velika i mala slova u nazivu promenjljive. U PHP ne moramo prvo deklarisati promenjljive kao kod nekih drugih programskih jezika, već jednostavno samo dodelimo vrednost. Promenjljivama dodeljujemo vrednost upotrebom operatora za dodelu vrednosti a to je znak =. Promenjljivoj moţete dodeliti i vrednos druge promenjljive na primer: $visina=8; $visina2=$visina; Sada i promenjljiva $visina2 ima vrednos 8. Tipovi promenjljivih U PHP-u razlikujemo sledeće tipove promenjljivih: Integer celobrojni podaci Double decimalni brojevi dvostruke preciznosti String znakovna promenjljiva, ili da bude razumljivije promenjljiva kojoj se dodeljuje tekst ili skup nekih znakova unutar dvostrukih i jednostrukih navodnika. Kao string unutar jednostrukih i dvostrukih navodnika moţe stajati i HTML, JavaScript kod i sliĉno. Bool logiĉke vrednosti, odnosno true (taĉno) i false (netaĉno) Arraj nizovi podataka Object objekat, ĉuvaju se klase Logiĉki podaci NULL - promenjljive kojima nije dodeljena vrednos imaju vrednost tipa NULL. NULL je nepostojaća vrednos, prazno polje ili ti polje bez vrednosti. Napomena da je i nula vrednost i zato ne treba mešati nulu i NULL. Resurs - promenjljive za rad sa bazama podataka imaju vrednost tipa resurs. PHP podrţava tipove podataka pdfdoc i pdfinfo ako server podrţava rad sa PDF dokumentima. U PHP-u moţemo u hodu menjati tip podataka!!!! PHP podrţava i promenjljiva promenjljiva logiku pomoću koje se imena promenjljivih mogu menjati dinamiĉki. To je u stvari kada vrednost jedne promenjljive koristimo da bi smo dobili naziv druge promenjljive. Na primer: [179]

180 $promenjljiva="tezina"; $$promenjljiva=10; Dobili smo novu promenjljivu $tezina koja ima isto vrednost 10. Vidljivost promenjljive Sve promenjljive nisu vidljive svuda u skripti. U PHP-u imamo sledeće vidljivosti promenjljive: 1. Superglobalne promenjljive vidljive su svuda. 2. Globalne promenjljive vidljive su svuda u skripti ali ne i u funkciji koju smo izradili. Takodje nije vidljiva i fajlovima koji se umeću u tu skriptu iskazima include i require. 3. Promenjljive unutar funkcije vidljive su samo u tu funkciju 4. Promenjljive unutar funkcije koje definišemo kao globalne vidljive su kao globalne. Spisak superglobalnih promenjljivih je sledeći: $GLOBALS niz svih globalnih promenjljivih $_SERVER niz svih serverskih promenjljivih $_GET niz promenjljivih koje se prosledjuju skripti metodom GET $_POST niz promenjljivih koje se prosledjuju skripti metodom POST $_COOKIE niz kolaĉića $_FILES niz promenjljivih koje sadrţe razne tipove podataka, pa i fajlove koje se prenose internetom $_ENV niz promenjljivih okruţenja $_REQUEST niz promenjljivih korisnika $_SESSION niz promenjljivih sesije Konstante Konstanta nosi vrednost isto kao i promenjljiva ali za razliku od promenjljive koja moţe da se menja u toku izvršavanja programa konstanta se ne menja. Konstantu u programu moţemo pisati kao vrednost bez ikakve oznake, (na primer 3.14 za vrednost PI) ili da joj damo oznaku za promenjljivu ali da je ne menjamo. Ipak ako izradjujemo veliki sajt da ne bi došlo do grešaka i zabuna poţeljno je da definišemo konstante jednom za uvek. Definisanje konstanti se vrši funkcijom DEFINE na sledeći naĉin: define ("HLEB",40); define ("PIVO",50); define ("SALAMA",100); Kasnije kad nam treba konstanta u programu pozivamo je sa HLEB, PIVO ili SALAMA. Oznake za konstante su bez znaka dolar ispred naziva. Vrednosti naših gornjih konstanti redom su 40, 50, 100. Poţeljno je konstante pisati velikim slovima kako bi se uoĉavale ali mogu se pisati i malim slovima. PHP operatori Kao i u matematici operatori omogućavaju izvršavanje operacija nad promenljivima i konstantama, na primer sabiranja, mnoţenja, itd. Operatori se mogu pisati sa jednim, dva ili tri znaka. Postoje sledeći tipovi operatora: Aritmetiĉki operatori Operator nad znakovnim nizom Operatori dodele Operatori poredjenja Logiĉki operatori [180]

181 Operatori nad bitovima Ostali operatori Aritmetiĉki operatori Operator Naziv Primer + Sabiranje $a + $b - oduzimanje $a - $b * množenje $a * $b / delenje $a / $b % Modulo $a % $b Evo primera upotrbe operatora: $a = $b + $c; Znak minus se koristi i za oznaĉavanje negativnih brojeva. $a = - 1; Ne treba posebno objasnjavati ove operatore, osim operatora modulo koji je moţda nepoznat. Modulo vraća ostatak celobrojnog deljenja promenjljive $a promenjljivom $b. Na primer: $a = 36; $b = 5; $c = $a % $b; Promenjljiva $c imaće vrednost 2 jer je 36 / 5 = 7.2 Aritmetiĉki operatori se iskljuĉivo primenjuju nad brojevima. String operatori Jedini operator nad stringovima je taĉka ".". Ovaj operator se koristi za spajanje dva i više znakovna izraza u jedan. Sve će biti jasnije nakon sledećeg primera: $a = "Ana "; $b = "voli "; $c = "Bobana"; $rezultat = $a. $b. $c; Znakovna proemnjljiva $rezultat imaće vrednost "Ana voli Bobana". Operator dodele Operator dodele je matematiĉki znak jednakosti " = ". Na primer: $masa = 5; Navedeni iskaz bi trebalo ĉitati: "promenjljivoj masi dodeljujemo vrednost 5". Moţemo pisati izraze sliĉne sledećem: [181]

182 $a = 2 + ($b = 3); Vrednost promenjlive $a biće 5. Kombinovani operator dodele Kombinovani operatori dodele su sledeći: $a += 5; Isti je iskazu kao da smo napisali: $a = $a +5; Pored kombinovanog operatora " += " postoje i sledeći: Operator Upotreba Ekvivalentan izrazu += $a += $b $a = $a + $b -= $a -= $b $a = $a - $b *= $a *= $b $a = $a * $b /= $a /= $b $a = $a / $b %= $a %= $b $a = $a % $b.= $a.= $b $a = $a.$b Prefiksni i sufiksni operatori Prefiksni i sufiksni operatori uvećanja imaju oznaku " ++ " a umanjenja " -- ". $a = 10; echo ++$a; Prefiksni operator uvećanja ++ poveća vrednost promenjljive $a za 1 pa tek onda se izvršava izraz echo$a. Znaĉi kao rezultat ovih izraza ispisaće se u našem sluĉaju 11. Potpuno identiĉan efekat ima i prefiksni operator umanjenja, naravno sa tom razlikom što se vrednost promenjljive $a umanjuje za 1. A sufiksno uvećanje (umanjenje) je sledeća logika: $a = 10; echo $a++; U ovom sluĉaju prvo se ispisuje prvobitna vrednost promenjljive $a (znaĉi ispisuje se broj 10) pa nakon toga se vrednost promenjljive uvećava za 1 i dodeljuje promenjljivoj $a. Tako na primer ako nastavimo gornju skripticu sledećim izrazom: echo $a; Tek onda biće ispisan broj 11. Sve isto se odnosi i na sufiksno umanjenje, naravno samo što je upitanju umanjenje vrednosti promenjljive za 1. [182]

183 Referentni operator dodele Oznaka za referencu je znak " & ". Efekat ovog operatora najbolje moţemo objasniti na primeru: $a = 5; $b = $a; Drugim iskazom kao što znamo pravimo kopiju promenjljive $a koju imenujemo sa $b. E sad nakon toga u daljem toku programa ako promenimo vrednos promenjljive $a, vrednost promenjljive $b kao što znamo i dalje će naravno ostati nepromenjena. Medjutim ako napišemo ovako: $a = 5; $b = &$a; Efekat će biti taj da ako u daljem toku programa promenimo vrednost promenjljive $a, vrednost promenjljive $b neće ostati nepromenjen već će i on biti automatski promenjen u novu vrednost koju ima promenjljiva $a. Operatori poredjenja Operator poredjenja ima simbol duplo jednako " == ". Kao rezultat operatora poredjenja uvek dobijamo logiĉku vrednost true (istina) ili false (laţ) u zavisnosti od rezultata poredjenja. Ako napišemo: $a == $b; Ovim izrazom proveravamo da li su vrednosti ove dve promenjljive jednake. Rezultat koji vraća ovaj izraz je true (istina) ako su jednake i false (laţ) ako nisu jednake. Operator jednakosti se lako brka sa operatorom dodele i ako dodje do toga program neće raditi ono sto mi ţelimo. Na primer: $a = 5; $b = 7; Rezultat izraza $a = $b biće TRUE jer operator " = " sluţi za dodeljivanje i u ovom našem sluĉaju promenjljivoj $a uspešno je program dodelio vrednost koju ima promenjljiva $b, odnosno vrednost 7. To je vrednost koja nije nula pa je logiĉka vrednost tog iskaza TRUE. Ako bi smo napisali $a == $b rezultat bi bio FALSE jer 5 nije jednako 7. Kao što vidimo operator poredjenja i operator dodele daju ĉesto kao rezultat suprotnu logiku, i zato moramo voditi raĉuna da ih ne pomešamo. Postoji i operator identiĉnosti ĉija je oznaka trostruko jednako " === ". Operator identiĉnosti vraća TRUE ako su obe vrednosti jednake i istog su tipa. Evo tabelarna prestava operatora poredjenja: Operator Ime Upotreba == jednako $a == $b === identično $a === $b!= različito $a!= $b <> različito $a <> $b < manje od $a < $b > vede od $a > $b <= manje ili jednako od $a <= $b >= vede ili jednako od $a >= $b [183]

184 Logiĉki operatori Ţelimo proveriti da li je vrednost promenjljive $a izmedju 10 i 100. Znaĉi treba proveriti uslove $a >= 10 i $a <= 100. To radimo upotrebom logiĉkog operatora konjukcije koji ima znak " && " ili " and " na sledeći naĉin: $a >= 10 && $a <= 100 Sve logiĉke operatore daću tabelarno: Operator Ime Upotreba Rezultat! negacija!$b vrada true ako je $b false i obrnuto && konjukcija $a && $b Vrada true samo ako su i $a i $b true disjunkcija $a $b Vrada true ako je ili $a ili $b true and konjukcija $a and $b Isto kao && samo niži prioritet or disjunkcija $a or $b Isto kao samo niži prioritet Ostali operatori Ostali operatori su: Operator zarez ", " koristi se ze razdvajanje argumenata funkcija i stavki u spisku. Operatori " new " i " - > " koriste se za pravljenje objekta i za pristup ĉlanovima objekta Operatori elementa niza " [ ] " omogućavaju pristupu elementima niza. Koristi se i oznaka " => " Uslovni operator ima oznaku "? : ". Logika ovog operatora videćemo na primeru: ($visina > 200? $b="visok" : $b="nizak"); Ako je promenjljiva $visina veća od 200 onda promenjljiva $b dobija vrednost "visok" a ako je $visina manja od 200 onda $b dobija vrednost "nizak". Ako ţelimo da se odma rezultat ispiše na ekran onda nam ne treba promenjljiva $b već izraz moţemo napisati ovako: echo ($ocena > 50? "Položio" : "Pao"); Operator potiskivanja greške sa oznakom " se koristi ispred izraza kad ne ţelimo da posetioci sajta vide ispisivanje greške koja moţe nastati u toku izvršenja tog izraza. To ispisivanje greške moţe odati bitne tajne podatke u vezi sajta. Operator izvršenja ima oznaku " ` ` ". Radi se o paru inverznih polunavodnika. Inverzni polunavodnik se nalazi na tastaturu gde i znak ~. PHP će izvršiti sve šta se nalazi izmedju inverznih polunavodnika u komandnom okruţenju na serveru. izlazni podaci komande pretstavljaju vrednost izraza. Na UNIX serveru upotrebljava se: $iz = `ls la`; echo "<pre>".$iz."</pre>" A na windows serveru: [184]

185 $out = `dir c:`; echo "<pre>".$iz."</pre>" U oba sluĉaja će se smestiti spisak dokumenata iz foldera u promenjljivu $iz. Prioritet operatora Kada se u jednom izrazu nadju više operatora onda redosled po kojima će se izvršavati operatori zavisi od njihovog prioriteta. Ukoliko dva i više operatora imaju isti prioritet onda se oni izvršavaju sa leva na desno ili obrnuto u zavisnosti od toga koji su operatori u pitanju što se naziva asocijativnost. Sada će mo dati tabelu prioriteta operatora i to tako da najmanji prioritet imaju operatori pri vrhu a najveći pri dnu tabele. Napomena da smo sa "n/b" u tabeli oznaĉili ukoliko je asocijativnost takva da je sve jedno da li se izvršava sa leva na desno ili sa desna na levo. Asocijativnost Operatori Levo, Levo Levo Levo Desno or xor and echo (ili print) Levo = += -= *= /=.= %= &= = ^= ~= <<= >>= Levo?: Levo Levo Levo Levo Levo && n/b = =!= === n/b < <= > >= Levo << >> Levo + -. Levo * / % Desno ^ &! ~ (int) (double) (string) (array) Desno [] n/b new n/b ( ) Najveći prioritet ima mala zagrada, zato uz pomoć malih zagrada moţemo zaobići prioritete tako što ako ţelimo da se prvo izvrši nešto manjeg prioriteta stavimo to u malim zagradama. Na primer: $a = (5 + 2) * 7; Vrednost promenjljive biće 49 a da smo napisali: $a = * 7; Bio bi 19 jer mnoţenje ima veći prioritet tako da će se prvo pomnoţiti 7 * 2 pa nakon toga rezultat toga će se sabrati sa 5. U prvom sluĉaju zbog zagrada će se prvo izvršiti sabiranje pa nakon toga rezultat sabiranja će se pomnoţiti sa 7. Moţemo koristiti neograniĉen broj malih zagrada i uvek će se prvo izvršavati onaj izraz koji se nalazi u zagradi koja je najviše ugnjeţdena. [185]

186 Funkcije za obradu promenjljivih gettype () gettype () funkcija utvrdjuje kog je tipa promenjljiva i vraća naziv tipa promenjljive. Naziv tipa promenjljive moţe biti sledeći: boolean integer double string array object resource NULL unknown type - ako je tip promenjljive nepoznat Evo primera: $a= 4.12; echo gettype($a); Rezultat će biti: double Za razliku od funkcije gettype () koja ispituje tipove promenjljivih i koja kao rezultat vraća ime tipa promenjljive postoje i funkcije koje ispituju taĉno odredjene tipove promenjljivih i vraćaju logiĉki true ako je promenjljiva tog tipa ili false ako nije. Te funkcije su: is_array - utvrdjuje da li je promenjljiva niz is_double, is_float, is_real, (sve je to ista funkcija) - ispituje da li je promenjljiva realan broj is_long, is_int, is_integer, (takodje je sve to ista funkcija) - ispituje da li je promenjljiva ceo broj is_string - ispituje da li je promenjljiva string is_object - ispituje da li je promenjljiva objekat settype () Funkcija settype () ima sledeći oblik: settype ($a, "string"); settype () menja tip promenjljive $a iz prvog argumenta u tip promenjljive koji je naveden u drugom argumentu funkcije koji je pod navodnicima. U našem sluĉaju je tipa "string". Evo primer: $a=4.12; settype($a, "integer"); echo $a; Rezultat: 4 Postoje i funkcije koje menjaju tip promenjljive u taĉno odredjen tip. Evo tih funkcija: intval ($a) - menja vrednost u ceo broj [186]

187 doubleval ($a) - menja vrednost promenjljve u realan broj strval ($a) - menja vrednost u string Ispitivanje i promena stanja promenjljive Te funkcije su: isset ($a) funkcija vraća true ako je promenjljiva definisana a ako nije vraća false. unset ($a) ĉini nedefinisanom promenjljivu $a. empty ($a) vraća true ako nije definisana promenjljiva $a ili ako je vrednost promenjljive nula, a u suprotno ako je vrednost promenjljve razliĉita od nule i definisana je vraća false. PHP strukture grananja IF Kroz primer je najlakše objasniti: if ( $a > 0 ) echo "vrednost je veća od nule i ona je: ". $a; Znaĉi, ukoliko vrednost promenjljive $a veća od nule izvršiće se echo iskaz, a u suprotno neće. Blok iskaza U prethodnom primeru za iskaz IF videli smo da ako je uslov zadovoljen izvršava se samo jedan iskaz. Ukoliko ţelimo da izvršimo više od jednok iskaza nakon što je uslov zadovoljen moramo koristiti "BLOK ISKAZA". Blokom iskaza se naziva skup iskaza smeštenih u vitiĉastim zagradama, to jest izmedju "{ ". Da bi smo ovo objasnili uzmimo prethodni primer i proširimo ga sa još jednim izrazom, na primer pored ispisivanja treba da se i kvadrira promenjljiva ukoliko je uslov zadovoljen: if ($a > 0) { echo "vrednost je veća od nule i ona je: ". $a. "<br>"; $kvadrat = $a * $a ; echo "a kvadrat te vrednosti je: ". $kvadrat ; Znaĉi ako je uslov ispunjen svi iskazi unutar vitiĉastih zagrada biće izvršeni a ako nije uslov ispunjen svi će biti preskoĉeni. Ovde smo došli do još jednog momenta! Kao što znamo iskaz <br> je u HTML iskaz koji sluţi da se sledeći ispis na koji se naidje ispiše u novi red. Naime, ranije smo rekli da unutar PHP programa mogu da se implementiraju i HTML iskazi, i to sad vidimo. Dakle, kao što vidimo implementira se preko echo ili print naredbi i to tako što HTML iskaze stavimo unutar navodnika. Iskaz ELSE Iskaz ELSE omogućava izvršenje iskaza ukoliko iskaz IF nije ispunjen. U prethodna dva primera videli smo da ako uslov IF nije bio ispunjen samo se preskaĉe blok iskaza. Sad će mo uvesti u novom primeru mogućnost da ako uslov nije ispunjen da se ispiše poruka "ne postoji vrednost promenjljive ili je jednaka nuli", i u istom bloku da dodelimo vrednost promenjljivoj $a na primer 100. if ($a > 0) { echo "vrednost je veća od nule i ona je: ". $a. "<br>"; $kvadrat = $a * $a; echo "a kvadrat te vrednosti je: ". $kvadrat; else { echo "vrednost je manja ili jednaka nuli"; $a = 100; Ako treba izvršiti samo po jedan iskaz onda nije neophodno koristiti blokove. Na primer: [187]

188 if ($a>0) echo "promenjljiva je veća od nule"; else echo "promenjljiva nije veća od nule"; Iskaz ELSE IF Po nekad treba doneti i više od dve odluke. U tom sluĉaju se koristi ELSE IF uslov. Ajde da vidimo na primeru: Za veće kupovine daje se popust: Za manje od 5 kupljenih artikla nema popusta, 5 do 10 popust 10%, 11 do 15 popust 12%, 16 i više - popust 15% Evo kako bi izgledao kod: if ($količina < 5) $procenat = 0; else if ($količina > 4 && $količina < 11) $procenat = 10; else if ($količina > 10 && $količina < 16) $procenat = 12; else ($količina > 15) $procenat = 15; Ovde uslovi jedan drugi iskljuĉuje pa će se izvršiti samo jedan ali ako se uslovi preklapaju biće izvršen onaj na koga se prvo naidje a ostali će biti preskoĉeni. SWITCH uslov Takodje i iskaz SWITCH odluĉuje izmedju više od dve opcije. Upotrebićemo prethodni primer: switch ($količina) { case ($količina<5): $procenat=0; break; case ($količina>4 && $količina<11): $procenat=10; break; case ($količina>10 && $količina<16): $procenat=12; break; default : $procenat=15; break; Napravimo program koji će brojeve od 1 do 5 imenovati, a ako je u pitanju neki drugi broj izvan skupa od 1 do 5 da ispiše "vrednost promenjljive nije iz skupa jedan do pet". switch ($a) { case 1: echo "jedan"; break; case 2: echo "dva"; break; case 3: echo "tri"; break; case 4: echo "četri"; break; case 5: echo "pet"; break; [188]

189 default: echo "vrednost promenjljive nije iz skupa od jedan do pet"; break; Umesto na primer "case 1:" moţemo pisati i neki matematiĉki izraz ako je neophodno, pa tako bi bilo na primer: case ($b * ); Isto moţe na primer i neki ovakav program da se pojavi nekad: switch ($x) { case ($y * 4): case (9 * 3): echo "Zapamti"; break; default: echo "Zaboravi"; Dakle mogu da se pojave vise CASE naredbe sa jednom BREAK naredbom. WHILE petlja Kao i IF i ona ima logiĉki uslov. Razlika izmedju while petlje i IF uslova je u tome što IF izvršava odredjeni iskaz ili blok iskaza ako je uslov ispunjen jednom, a while petlja izvršava blok koda sve dok je uslov ispunjen. While petlja se koristi kada neznamo unapred broj iteracija. Kada je poznat broj iteracija obiĉno se koristi for petlja jer je brţa. Kao primer ispišimo brojeve od 10 do 20: $a=10; While ($a < 21) { echo $a. "<br>" ; $a++ ; PHP petlje FOR petlje Napišimo for petljom brojeve od 10 do 20: for ($i=10 ; $i < 21 ; $i++) { echo $i. "<br>"; Rezultat bi bio ispisivanje brojeva jedan ispod drugog od 10 do 20. Znaĉi FOR petlja se sastoji od FOR strukture i blok iskaza. FOR struktura ima tri nazovimo parametara. Prvi parametar je brojaĉ petlje (promenjljiva $i) koji uzima vrednost poĉetka brojanja. Drugi parametar je uslov do kog broja treba brojati, i treći parametar je za koju vrednost se brojaĉ povećava nakon svake iteracije. Blok petlje se izvršava svaki put kad se poveća vrednost brojaĉa. Parametri se odvajaju taĉka zarezom. DO WHILE petlja Petlja DO WHILE se razlikuje od petlje WHILE po tome što se logiĉki uslov nalazi na kraju. Znaĉi iskaz, ili blok iskaza unutar petlje do while će se izvršiti bar jednom iako se moţda logiĉki uslov nikad neće ispuniti. Evo i primera: $broj=1; do { echo $broj. "<br>"; [189]

190 While ($broj<1); Izlaz iz petlje I pre ostvarivanja uslova petlje moţe se izaći iz nje iskazom BREAK. Kada se u petlji naidje na iskaz BREAK onda se prekida sve u petlji i nastavlja se od dela koda koji je posle petlje. Iskaz CONTINUE se koristi ako ţelimo momentalno krenuti na sledeću iteraciju petlje. Iskaz EXIT se koristi kada se ţeli prekinuti izvršenje ĉitave skripte. Fajl Uvek postoji potreba da se odredjeni podaci ĉuvaju kako bi smo ih po potrebi koristili. U uvodu smo pisali da za tu namenu koristimo na primer MySQL bazu. Za ĉuvanja malih koliĉina podataka, nekoliko desetina, moţemo koristiti i tekstualne fajlove. Tekstualni fajlovi imaju ekstenziju ".txt ". Vezano za tekst fajlove moramo skrenuti paţnju na bezbednost, naroĉito ako u njima smeštamo neke bitne i tajne podatke kao što su šifre ili sliĉno. Ako pozovemo tekst fajl pomoću internet pregledaĉa isĉitaće se sadrţaj fajla. Da bi smo spreĉili radi bezbednosti prikazivanje sadrţaja posetiocima sajta a dozvoliti samo PHP ili drugim skriptama sa servera da ih ĉitaju, moramo CHMOD tog tekst fajla postaviti na 600. Ako koristite Total Commander za pristup hostu (za ftp pristup) onda CHMOD bilo kog fajla ili foldera na hostu moţete podesiti ako pratite sledeću liniju: Jedan klik na fajl ili folder kome ţelite podesiti CHMOD, zatim u gornjem levom uglu kliknite na Files, pa kliknite na Change attributes, i u prozoru koji vam se otvori u donjem levom uglu upišite 600. Ako posle tog podešavanja upišite u internet pregledniku adresu fajla kome ste podesili CHMOD na 600 videćete da se neće ništa išĉitavati, što nam je i bio cilj. Upisivanje podataka u fajl Za upis podataka u fajl moţete koristiti jednu od sledećih funkcija potpuno ravnopravno: fwrite ilifputs. U nastavku teksta koristićemo funkciju fwrite ali sve što vaţi za nju vaţi i za fputs. Funkcija fwrite ima sledeći oblik: fwrite ($fp, string tekst [,int dužina]); Prvi parameter $fp kao što znamo je promenjljiva koja sadrţi podatke o putanji do fajla u kome će se upisati podaci, kao i naĉin na koji će se upisati, odnosno da li ćemo podatke upisivati po reţimu "r+", "w", "a" ili svi oni pojedinaĉno u kombinaciji sa "b". Drugi parametar "string tekst" je je promenljiva ili string koji sadrţi podatke koji će se upisivati u fajl. Treći parameter duţina nije obavezan, a inaĉe odredjuje maksimalni broj bajtova koji moţe da sadrţi fajl. Znaĉi "string tekst" je upravo ono što unosimo u fajl. "String tekst" je znakovni niz koji predstavlja jedan unos u fajl i moţemo ga kreirati ovako na primer: $stringunos=$rednibroj. "\t". $ime. "\t". $visina. "\t". $tezina. "\n"; Ovako upisujemo po jedan zapis u svakom redu u fajlu podaci.txt. Graniĉnik svakog zapise u našem sluĉaju je znak za novi red "\n". Pojedinaĉne podatke unutar jednog zapisa u našem sluĉaju smo razdvajili tabulatorskim znakom "\t". Medjutim nema tu striktnih pravila pa zato pored "\n" i "\t" moţete kao graniĉnike za razdvajanje pojedinaĉnih unosa i pojedinaĉnih podataka koristiti i razna slova ili brojeve, ili kombinacije raznih znakova. Ali nesme se medju unesenim podacima pojaviti znak ili kombinacija znakova koji su isti kao za graniĉnike! Sada ćemo dati izgled programa od samog poĉetka kad se izradjuje fajl, zatim unose podaci i na kraju prikazaćemo kako izgleda sadrţaj fajla: [190]

191 $fp=fopen("podaci.txt", "w"); $ime=array("milan","pera","dejan","slavko"); $visina=array(176,185,171,189); $tezina=array(70,95,81,105); for ($i=0; $i<4; $i++) { $stringunos=$i."\t".$ime[$i]."\t".$visina[$i]."\t".$tezina[$i]."\n"; fwrite($fp, $stringunos); fclose($fp); Sadrţaj fajla u kome su zapisani podaci bi bio: 0 Milan Pera Dejan Slavko Kad se završi sa upotrebom fajla i ne ţelimo ga više koristiti moramo ga obavezno zatvoriti iskazomfclose($fp). Ako nakon zatvaranja fajla opet ţelimo onda moramo sve od poĉetka sa$fp=fopen("podaci.txt","w"); i sve ostalo! Ĉitanje iz fajla red po red U svrhu ĉitanja podataka iz fajla red po red koriste se funkcije fgets, fgetss i fgetcsv. Evo daću program koji ĉita celi fajl i ispisuje njegov sadrţaj. Nakon toga sledi komentar: $fp "r"); if ($fp) { while (!feof($fp)) { $citaj = fgets($fp, 4096); echo $citaj. "<br>"; fclose($fp); Rezultat programa biće: 1 Milan Pera Dejan Slavko Iskazom $fp=@fopen("podaci.txt", "r"); kao što znamo smo otvorili fajl i to samo za ĉitanje jer smo izabrali za drugi parametar slovo "r". Na poĉetku smo stavili znak "@" koji ne dozvoljava pojavljivanje u brauzeru pojavljivanje programske poruke o grešci ukoliko nastane zbog nepostojanja fajla ili nemogućnosti njegovog otvaranja. Nakon toga ispitujemo da li je uspešno otvoren fajl pomoću izraza if (!$fp). Kad se otvori fajl promenjljiva $fp postaje definisana a ako dodje do bilo kakve greške prilikom otvaranja fajla ta promenjljiva neće biti definisana. E sad recimo da nije definisana znaĉi ifće vratiti false pa je potrebno da u else delu if naredbe postavimo našu poruku o grešci i izlalak iz programa. Ali ako postavimo operator negacije "! " onda menjamo logiku if naredbe i tad moţemo natrue pisati poruku o grešci odma nakon if uslova i time izbeći suvišne redove sa else. U while petlji ĉitamo sve podatke do kraja fajla. To nam omogućava funkcija feof tako što njome petlja whileproverava da li se došlo do kraja fajla ili ne. Jedini parametar funkcije feof je pokazivaĉ na fajl. Feoffunkcija vraća true ako je pokazivaĉ na kraju fajla. Indikator za kraj fajla je EOF kog poseduju svi fajlovi kao znak za kraj fajlova. Uopšteno while petlja vrši iteracije sve dok se ne pojavi u uslovufalse. A kako feof vraća true u trnutku kad se pokazivaĉ nadje na kraju onda moramo izmeniti logikufeof funkcije "spolja" i zato koristimo negaciju "! ". Funkcija fgets se koristi za ĉitanje fajla. [191]

192 $sadrzaj = fgets($fp, 4096); Ova funkcija ĉita jedan red teksta u fajlu. Ona ĉita sve dok ne naidje na znak za novi red, na kraj fajla ili dok ne proĉita sve iz jednog reda. Svi tekst fajlovi imaju maksimalnu duţinu reda od 998 bajta. A mi smo u drugom parametru funkcije fgets i zato stavili 999, odnosno to je 998 uvećan za jedan bajt. Normalno ukoliko stavimo recimo 500 umesto 999 neće ići funkcija fgets kada ĉita do samog kraja reda, već će ići do 500 bajta u redu. Takodje ako ţelimo da nam red bude duţi od standardne duţine onda pišemo na primer Za ĉitanje fajla red po red moţe se koristiti i funkcija fgetss koja ima sledeći oblik: fgetss($fp, $dužina [, string dozvoljeni_znaci]); Ona se razlikuje od fgets po tome što briše sve PHP i HTML oznake iz teksta koga isĉitava iz fajla. Medjutim ako ţelimo da ne izbaci neke PHP ili HTMAL znakove onda njih navedemo u parametru funkcije kog smo predstavili sa dozvoljeni_znaci. Za ĉitanje fajla u kome su korisnici sajta unosili podatke neophodno je koristiti funkciju fgetss, jer HTML ili PHP kod iz datoteke moţe da ugrozi bezbednost sajta. Postoji još i funkcija fgetcsv koji ima sledeći oblik: array fgetcsv (int $fp, int dužina [, string graničnik [, string navodnik]]; Ova funkcija ĉita redove iz fajla u formatu sa graniĉnikom tabulatorskim znakom ili zarezom koji obiĉno koriste programi za tabelarna izraĉunavanja i sliĉno. Omogućava jednostavno izdvajanje promenjljivih iz zapisa fajla bez analiziranja tekstualnih redova. Funkcija se poziva isto kao i fgets ali joj se prosledjuje graniĉnik za razdvajanje polja. Na primer: $sadržaj = fgetcsv($fp, 120, "\t"); Znaĉi, ĉita red iz fajla i rastavljaga ĉim naidje na tabulator "\t". Rezultati se vraćaju kao niz u promenjljivu $sadrţaj u našem sluĉaju. Parametar duţina bi trebao da bude broj bajtova veći od najvećeg broja bajtova koje ima jedno polje zapisa u fajlu. Parametar navodnik koristite da bi ste odredili šta stoji ispred i iza svakog polja u redu. Ako ništa ne stoji podrazumevan znak je "" (obiĉan navodnik). Ĉitanje celih fajlova Ĉitanje celih fajlova se vrši funkcijama readfile, fpassthru ili file. Funkcija readfile u isto vreme i otvara fajl i ispisuje njegov sadrţaj i na kraju i zatvara fajl. Da bi se isĉitao sadrţaj tekst fajla funkcijom readfile dovoljno je samo da upišemo readfile("podaci.txt"), a ne treba da se koristi echonaredba za ispisivanje. Znaĉi ĉim se naidje na funkciju readfile automatski se ispisuje sadrţaj fajla. Evo primera: <? $a=readfile("podaci.txt"); if ($a){ echo "<br>podaci su uspesno iscitani"; else{ echo "Podaci nisu iscitani"; echo "<br>". $a;?> Rezultat ove skripte bi izgledao ovako: 0 Milan Pera Dejan Slavko Podaci su uspesno iscitani 61 Kao što vidimo iako je funkcija iza znaka jednakosti ipak kad se naidje na readfile funkciju odma se ispusuje sadrţaj fajla. U promenljivu $a se smešta broj znakova koliko ima neki fajl. U ovom našem sluĉaju je $a=61. [192]

193 Funkcijom fpassthru se takodje ĉita ceo fajl, ali ova funkcija se upotrebljava tako što se prvo funkcijom fopen otvori fajl da bi smo inicirali promenjljivu $fp jer ona figuriše kao parametar ufpassthru. I ova funkcija takodje zatvara sama fajl. Kao i funkcija readfile tako i fpassthru sama ispisuje sadrţaj fajla kad se na nju naidje. Evo kako bi izgledao kod za upotrebu funkcije fpassthru: $fp = fopen ("podaci.txt", "r"); fpassthru ($fp); Funkcije file takodje ĉita celi fajl ali tako da sadrţaj fajla ne ispisuje već dodeljuje promenjljivoj u niz, tako što svaki red fajla smešta u zaseban element niza. Evo primera: <? $sadrzaj=file("podaci.txt"); foreach ($sadrzaj as $kljuc => $vrednost){ echo "$vrednost<br>";?> Rezultat bi bio sledeći: 1 Milan Pera Dejan Slavko Funkcija file nije bezbedna u binarnom reţimu. Funkcija file_get_contents je ista potpuno kao funkcija file stom razlikom što je bezbedna u binarnom reţimu. Ĉitanje fajla znak po znak Ĉitanje fajla znak po znak se vrši funkcijom fgetc. Funkcija fgetc ĉita fajl znak po znak sve dok ne dodje do kraja fajla. Jedini parametar te funkcije je pokazivaĉ na fajl (u našem sluĉaju $fp). Funkcija se najĉešće smešta u WHILE petlju jer nakon svake iteracije ĉita naredni znak sve dok ne naidje do kraja fajla. E sad moţemo te znakove odma obradjivati, ili ako ih trebamo nekako grupisati onda moţemo sve te znakove pamtiti u niz, itd. Evo jednog primera: <? $fp = fopen("podaci.txt", "r"); if (!$fp) { echo "Nije otvoren fajl"; exit; while (false!== ($znaci = fgetc($fp))) { if ($znaci=="\n") $znaci="<br>"; echo "$znaci";?> Rezultat bi izgledao ovako: 0 Milan Pera Dejan Slavko [193]

194 Tekstualne znakove za kraj redan "\n" zamenjujemo HTML oznakom za novi reda "<br>" da se ne bi ispis sadrţaja datoteke izvršio u jednom redu i bio neĉitljiv. Postoji i funkcija fgetc koja se razlikuje od fgets po tome što vraća znak EOF za kraj fajla. Da se kraj fajla "EOF" ne bi ispisao koristimo if nardbu da kad se naidje na taj znak da se preskaĉi ispisivanje. Ĉitanje zadatog broja bajtova iz fajla Zadati broj bajtova iz fajla se ĉita funkcijom fread. Funkcija fread ĉita proizvoljan broj bajtova iz fajla. Funkcija izgleda: fread ($fp, int dužina); Parametar "int dţina" je u stvari broj bajtova koji se ĉita. Ako nema dovoljan broj bajtova u fajlu kao što je zadato u ovom parametru onda se ĉita koliko ima. Evo jednog primera: <?php $fp = fopen("podaci.txt", "r"); $brbajtova = filesize("podaci.txt"); $sadrzaj = fread($fp, $brbajtova); fclose($fp); echo $sadrzaj;?> Rezultat bi bio: 0 Milan Pera Dejan Slavko Funkcija filesize() isĉitava koliko fajl ima bajtova. Ostale funkcije za rad sa fajlovima File_exists proverava da li postoji fajl a da se fajl ne otvori. Evo primera: if (file_exists("podaci.txt")) echo "fajl postoji"; else echo "fajl ne postoji"; Rezultat bi bio u našem sluĉaju ako postoji fajl "podaci.txt": fajl postoji Funkcija za utvrdjivanje veliĉine fajla u bajtima je filesize. Evo primera. echo filesize ("podaci.txt"); Rezultat bi bio u našem sluĉaju ako postoji fajl "podaci.txt": 61 Filesize moţe da se koristi u kombinaciji recimo sa fread da isĉita celi fajl kao što smo videli u prethodnom naslovu. Funkcija za brisanje fajla je unlink. Brisanje fajla se vrši na sledeći naĉin: [194]

195 unlink ("podaci.txt"); Funkcija ne moţe obrisati fajl ukoliko nemate ovlašćenje pristupu fajlu ili ako ne postoji fajl. Zakljuĉavanje fajla vršise funkcijom flock. Ako na primer dva posetioca sajta upisuje podatke u isti fajl, to jest zajedno pozivaju funkciju fopen postavlja se pitanje šta će biti u tom sluĉaju zapisano u fajl? Upis od jednog pa za njim upis od drugog korisnika, ili moţda upis drugog pa za njim upis prvog, ili samo jedan upis od njih dvoje, ili dva izmešana upisa? Odgovor je najĉešće nepredvidljiv! Takav problem se priliĉno rešava zatvoranjem fajla funkcijom flock nakon otvaranja fajla, ali pre ĉitanja ili upisa u fajl. Tako se rešava problem sa upisom podata u fajl ali se otvaraju novi problemi. Naime, kad se zakljuĉa fajl onda više niko nema pristup tom fajlu sve dok program ne otkljuĉa fajl. Znaĉi zakljuĉavanjem fajla pravi se lista ĉekanja za pristup fajlu. Ukoliko su mnogi posetioci sajta na toj listi vreme ĉekanja se povećava pa neki zato mogu i da odustanu od zahteva za tim podacima. Takodje je nejasno pitanje šta će se odigrati ako dva ili više posetioca u istom deliću sekunde, to jest u vremenu dok traje jedan takt procesora servera, istovremeno zakljuĉaju fajl, što nije nemoguće ako je sajt jako posećen? U tom sluĉaju će opet i jednom i drugom biti dozvoljeno istovremeno upisivanje u fajl, što nas opet vraća na prvobitan problem kako će upis izgledati, da li izmešano, itd itd. Znaĉi iako je vreme mnogostruko skraćeno zakljuĉavanjem fajla ipak se potpuno ne iskljuĉuje mogućnost problema pogrešnog upisivanja u fajl. Zakljuĉavanje se vrši sledećim pisanjem: bool flock (int $fp, operacija [, int &blokiranje]); Operacije mogu biti sledeće oznake: LOCK_SH - Zakljuĉava za zajedniĉko ĉitanje. LOCK_EX - Zakljuĉava za zajedniĉko pisanje. Odnosno omogućava samo jednom da piše. LOCK_UN - Otkljuĉavanje fajla (zajedniĉku ili ekskluzivnu). LOCK_NB - Ako ne ţelite flock() blokiranje prilikom zakljuĉavanja datoteke. (Nije podrţan od Windows servera) Treći opcioni parametar "blokiranje" postavlja se na TRUE ako dodje do greške u zakljuĉavanju. Ako nameravate koristiti funkciju flock, dodajte je svim skriptama koje otvaraju odredjeni fajl inaĉe je zakljuĉavanje beskorisno. Funkcija flock ne radi sa NFS i FAT, jer oni ne podrţavaju zakljuĉavanje. Zbog svih ovih problema koje smo napomenuli u ovom delu (a nisu jedini) je i izmišljen na kraju krajeva sistem za upravljanje bazama podataka. Evo jednog primera zakljuĉavanja fajla: <?php $fp=fopen("podaci2.txt", "w"); if(!flock($fp, LOCK_EX)) { echo "Nismo mogli da zakljucamo fajl"; exit; $ime=array("milan","pera","dejan","slavko"); $visina=array(176,185,171,189); $tezina=array(70,95,81,105); for ($i=0; $i<4; $i++) { $stringunos=$i."\t".$ime[$i]."\t".$visina[$i]."\t".$tezina[$i]."\n"; fwrite($fp, $stringunos); fclose($fp);?> Ovim kodom smo u fajlu "podaci2.txt" smestili odredjene podatke ali tek nakon njegovog zakljuĉavanja tako da neko drugi dok mi ubacujemo podatke ne moţe da ima pristup tom fajlu. [195]

196 Nakon funkcije fclose($fp) se fajl otkljuĉava i njegovom pristupu mogu imati i drugi posetioci. Još jednom napominjem, ako nameravate koristiti funkciju flock za odredjeni fajl onda je dodajte nakon svih funkcija koje otvaraju taj fajl (fopen i sliĉne) inaĉe je zakljuĉavanje beskorisno. Niz Promenjljive koje smo do sad vidjali sadrţe po jednu vrednost. NIZ je promenjljiva koja sadrţi dve i više vradnosti. Drugim reĉima niz ima više elemenata a svaki element sadrţi po jednu vrednost. Vrednost moţe biti tekst to jest string, broj ili drugi niz. Niz ĉiji su elementi takodje nizovi naziva se višedimenzionalni niz. Ako redosled elemenata u nizu indeksiramo (pravimo) pomoću brojeva (na primer 1,2,3,4...), tad se niz naziva numeriĉki indeksiranim nizom. Ako umesto brojeva koristimo slova ili stringove za indeksiranje elemenata niza (na primer a, b, c, d, f... ili Aca, Pera, Mika, Dejan...) onda se niz naziva asocijativni niz. Nizovi se koriste da bi se u njih smeštali na primer razni spiskovi, elementi tabela, itd. kako bi smo ih lakše obradjivali. U PHP-u se indeks naziva još i KLJUĈ. Numeriĉki indeksirani jednodimenzionalni nizovi Jednodimenzioni nizovi su oni koji imaju jedan indeks. U PHP-u numeriĉki indeksi uvek poĉinju nulom ali to moţe i da se promeni. Ajde da konkretizujemo celu dosadašnju "filozofsku" priĉu o nizovima. Imamo sledeći spisak uĉenika: Branko, Aca, Pera, Dejan, Slavko. Neka se naš niz naziva baš tako spisak. Taj niz pod nazivom spisak moţemo zapisati u PHP-u na sledeći naĉin: $spisak[0]= "Branko"; $spisak[1]= "Aca"; $spisak[2]= "Pera"; $spisak[3]= "Dejan"; $spisak[4]= "Slavko"; Ovde smo naš niz pretstavili pomoću $spisak. Primećujete da se koristi isto oznaĉavanje za niz kao i za promenjljivu jer se koristi ispred naziva niza znak za dolar. Brojevi 0, 1, 2, 3, 4 su indeksi niza i smeštaju se u zagradama " [ ] ", koji definišu elemente niza. Znaĉi elementi niza su: $spisak[0],$spisak[1], $spisak[2], $spisak[3], $spisak[4]. Vrednosti elemenata niza su stringovi redom:branko, Aca, Pera, Dejan, Slavko. Sve ovo se poĉetnicima moţe ĉiniti jako sloţeno ali vremenom kad se stekne rutina sve će biti jednostavnije jer će preći u intuiciju. Pored gore navedenog naĉina dodeljivanja vrednosti elementima niza u PHP-u postoje i drugi naĉini koji se mnogo ĉešće primenjuju. Na primer ovako: $spisak = array ("Branko", "Aca", "Pera", "Dejan", "Slavko"); Kao i echo, i array je jeziĉka konstrukcija u PHP-u. Dalje, ako se podaci nalaze u drugom nizu moţete jednostavno da kopirate jedan niz u drugi korišćenjem operatora " = " isto kao kad smo kopirali jednu promenjljivu u drugu. Ako ţelite da niz ima vrednosti rastući niz brojeva na primeru niz od 1 do 100, upotrebite funkcijurange() koja automatski pravi takav niz na sledeći naĉin: [196]

197 $brojevi = range (1, 100); Sadrţaj niza, ili drugim reĉima vrednost elemenata niza, ili samo vrednost niza moţe da se uĉita direktno iz fajla ili baze podataka korišćenjem odgovarajućih funkcija što će mo kasnije videti. Takodje postoje veliki broj funkcija kojima moţemo vršiti raznu obradu niza. Na primer ĉitanje samo odredjenih delova niza, promene redosleda elemenata u nizu, i mnoge druge radnje sa nizovima, što će mo u nastavku videti. Pristup numeriĉki indeksiranim jednodimenzionalnim nizovima Kao što se sadrţaju promenjljive pristupa upotrebom njenog imena tako se i sadrţaju niza pristupa upotrebom njegovog imena ili imena elemenata niza, bez obzira da li je u pitanju jednodimenzionalni ili višedimenzionalni niz, ili je numeriĉki ili pak asocijativni. Prema tome ispisivanje sadrţa našeg niza $spisak moţemo izvršiti najjednostavnije na sledeći naĉin: echo $spisak[0], $spisak[1], $spisak[2], $spisak[3], $spisak[4]; Kao i promenjljive tako i nizove ne morate pre upotrebe definisati jer se automatski prave prvi put kad ih upotrebite. Zamislite situaciju da naš niz $spisak ima 100 elemenata, da bi smo ispisali njegov sadrţaj kao gore treba nam sat vremena, zato je najadekvatnije koristiti petlje na sledeći naĉin: <?php $brojevi=range(1, 1000, 10); for ($i=0; $i<100; $i++){ echo $brojevi[$i]. "<br>";?> Rezultat bi bio: Za rad sa nizovima (a posebno sa asocijativnim nizovima što će mo malo kasnije i videti) postoji i posebna petlja foreach. Na primer tom petljom isti gornji primer moţemo napisati na sledeći naĉin: <?php $brojevi=range(1, 1000, 10); foreach ($brojevi as $vrednost){ echo $vrednost. "<br>";?> Rezultat je isti kao i gore. Ako su nam potrebni i indexi trebamo foreach petlju napisati ovako: [197]

198 <?php $brojevi=range(1, 1000, 10); foreach ($brojevi as $indeks => $vrednost){ echo "brojevi[". $indeks. "]=". $vrednost. "<br>";?> Rezultat bi bio: brojevi[0]=1 brojevi[1]=11 brojevi[2]=21 brojevi[3]=31 brojevi[4]=41 brojevi[5]=51... brojevi[99]=991 Još nešto vezano za foreach petlju i njoj sliĉne je to da je ona FUNKCIJA. Što znaĉi da su promenjljive $index i $vrednost vidljive samo u toj funkciji i ako nakon zatvaranja foreach funkcije pozovete te promenjljive one će biti nedefinisane. Asocijativni jednodimenzionalni nizovi Asocijativni jednodimenzionalni niz moţemo napraviti na sledeće naĉine: $boja_kose[milan] = "plava"; $boja_kose[pera] = "smedja"; $boja_kose[vesna] ="crvena"; $boja_kose[suza] = "crna"; $boja_kose[steva] = "crna"; A moţe i upotrebom reĉi array ovako: $boja_kose=array("milan"=>"plava", "Pera"=>"smedja", "Vesna"=>"crvena", "Suza"=>"crna", "Steva"=>"crna"); Ili to isto samo malo ĉitljivije: $boja_kose=array ( "Milan"=>"plava", "Pera"=>"smedja", "Vesna"=>"crvena", "Suza"=>"crna", "Steva"=>"crna" ); Pristup asocijativnim jednodimenzionalnim nizovima Indeksi u asocijativnim nizovima nisu brojevi pa for petlja je zato neupotrebljiva. Moţe da se koristiforeach petlja koja je na kraju krajeva zbog asocijativnih nizova i izmišljena. Takodje mogu da se koriste funkcije list i each. Evo na konkretnim primerima da vidimo pristup elementima asocijativnog niza: [198]

199 $boja_kose = array ( "Milan"=>"plava", "Pera"=>"smedja", "Vesna"=>"crvena", "Suza"=>"crna", "Steva"=>"crna"); foreach ($boja_kose as $index => $vrednost){ echo "boja kose[".$index."]=".$vrednost."<br>";?> Rezultat ove skripte je: boja kose[milan]=plava boja kose[pera]=smedja boja kose[vesna]=crvena boja kose[suza]=crna boja kose[steva]=crna Drugi naĉin je upotreba funkcije each i to ovako: $boja_kose = array ( "Milan"=>"plava", "Pera"=>"smedja", "Vesna"=>"crvena", "Suza"=>"crna", "Steva"=>"crna"); while ($elmenti_niza = each ($boja_kose)) { echo "boja kose[".$elementi_niza["key"]."]=".$elmenti_niza["value"]."<br>";?> Rezultat ove skripte je isti kao i prethodne skripte. Kao što se u foreach petlji uvode dve privremene, takozvane pomoćne promenjljive (definisane su samo dok se izvršava foreach petlja) $indeks i $vrednost (koje moţemo imenovati po volji), takoeach funkcija uvodi pomoćni niz koga smo u našem sluĉaju imenovali sa $elementi_niza (znaĉi ime pomoćnog niza sami dajemo). Taj pomoćni niz ima uvek dva elementa. Prvom elementu pomoćnog niza, koji je uvek indeksiran sa key ili sa brojnom vrednošću 0, each funkcija automatski dodeljuje vrednost indeksa trenutnog tekućeg elementa niza $boja_kose kome pristupamo. Drugom elementu pomoćnog niza, koji je uvek indeksiran sa value ili sa brojnom vrednošću 1, each funkcija automatski dodeljuje vrednost koju ima trenutni tekući element niza $boja_kose kome pristupamo. Dokle god each funkcija vraća definisane elemente niza $boja_kose dotle i while petlja vrši iteracije. Uobiĉajniji naĉin pristupa nizu je korišćenjem funkcije list i to na sledeći naĉin: $boja_kose = array ( "Milan"=>"plava", "Pera"=>"smedja", "Vesna"=>"crvena", "Suza"=>"crna", "Steva"=>"crna"); while (list($indeks,$vrednost)=each($boja_kose)){ echo "boja kose[".$indeks."]=".$vrednost."<br>";?> Rezultat je isti kao i do sada. [199]

200 Prvi parametar funkcije list je promenjliva koju moţemo imenovati po volji i prihvata iz funkcijeeach tekuće indekse elemenata niza $boja_kose. Drugi parametar funkcije list takodje je promenjljiva koju isto moţemo imenovati po volji, a ona prihvata iz funkcije each tekuće vrednosti elemenata niza $boja_kose. Ako ne obradjujemo sve elemente niza već samo pojedine jer na primer znamo kad i kako da upotrebljavamo pojedine elemente niza, onda moţemo koristiti i posebne funkcije za nizove kao što su current, next, prev, end i reset. Da ne bi smo mnogo filozofirali korišćenje navedenih funkcija najbolje se vidi na sledećem primeru: <?php $budzet = array("hrana","odeca","provod","gorivo","dazbine"); echo current ($budzet)."<br>"; echo next ($budzet)."<br>"; echo next ($budzet)."<br>"; echo prev ($budzet)."<br>"; echo end ($budzet)."<br>"; reset ($budzet); echo current ($budzet)."<br>"; reset ($budzet); echo next ($budzet);?> Rezultat skripte bi bio sledeći: hrana odeca provod odeca dazbine hrana odeca Ako ţelimo zapoĉeti sa pozivanjem prvog elementa, pored direktnog pozivanja na primer echo $transport[0], moţemo koristiti funkciju current kao u primeru. Current funkcija moţe se koristiti i u sredini posle neke next funkcije kad ţelimo recimo opet isti element pozvati. Svaki sledeći element moţemo pozivati funkcijom next. Ako nam je prva upotrebljena funkcija next onda će se pozvati drugi element niza. Prethodni elemenat ako nam je potreban u odnosu na onog koji je već pozvan na primer funkcijom next, onda ga pozivamo funkcijom prev. Drugim reĉima funkcija next poziva elemente sa rastućim indexom a funkcija prev obrnuto sa opadajućim indexom. Ako ţelimo odmah zadnji element da pozovemo onda koristimo funkciju end. Ako smo negde recimo na sredini niza sa pozivima a ţelimo ponovo da zapoĉnemo pozive od poĉetka onda se moţe sve resetovati funkcijomreset. Pored ovih funkcija za pozivanje niza postoje i druge funkcije koje obradjuju nizove koje će mo kasnije objašnjavati. Višedimenzionalni asocijativni nizovi Do sada smo imali jednodimenzionalne nizove, to jest nizove ĉiji su elementi definisani jednim indeksom. Višedimenzionalni nizovi su oni ĉiji se elementi niza definišu pomoću dva i više indeksa. Ako se definišu sa dva indeksa nazivaju se dvodimenzionalni nizovi, sa tri indeksa trodimenzionalni nizovi i tako dalje. Takodje višedimenzioni niz moţe da se objasni i ovako: Višedimenzioni nizovi su nizovi ĉiji elementi su takodje nizovi ali obiĉno ta definicija je poĉetnicima zbunjujuća. Da bi sve bilo jasnije definišimo dvodimenzionalni niz $kandidati na sledeći naĉin: $kandidat["aca"]["visina"]=185; $kandidat["aca"]["tezina"]=80; $kandidat["miki"]["visina"]=180; $kandidat["miki"]["tezina"]=90; [200]

201 Ili korišćenjem array: $kandidat = array ( "Aca"=>array("visina"=>185, "tezina" => 80), "Miki"=>array("visina"=>180, "tezina"=>90) ); Pristup višedimenzionalnim asocijativnim nizovima Pozivanje višedimenzionalnih asocijativnih nizova moţe da se vrši foreach petljom, na primer: $kandidat=array( "Aca"=>array("visina"=>185, "tezina"=>80), "Miki"=>array("visina"=>180, "tezina"=>90)); foreach ($kandidat as $indeks1 => $vrednost1){ foreach ($vrednost1 as $indeks2 => $vrednost2){ echo "kandidat[".$indeks1."][".$indeks2."]=".$vrednost2."<br>"; Rezultat ove skripte je: kandidat[aca][visina]=185 kandidat[aca][tezina]=80 kandidat[miki][visina]=180 kandidat[miki][tezina]=90 Ili korišćenjem kombinacije list i each funkcija: $kandidat=array( "Aca"=>array("visina"=>185, "tezina"=>80), "Miki"=>array("visina"=>180, "tezina" => 90)); while (list($indeks1, $vrednost1) = each($kandidat)){ while (list($indeks2, $vrednost2) = each($vrednost1)){ echo "kandidat[".$indeks1."][".$indeks2."]=".$vrednost2."<br>"; Višedimenzionalni numeriĉki indeksirani nizovi Na primer neke površine su odredjenih boja, i predstavimo te boje pomoću dvodimenzionalnog niza $obojena_polja. [201]

202 $obojena_polja[0][0]="crno"; $obojena_polja[0][1]="belo"; $obojena_polja[0][2]="plavo"; $obojena_polja[1][0]="ljubicasto"; $obojena_polja[1][1]="oranz"; $obojena_polja[1][2]="zuto"; $obojena_polja[2][0]="braon"; $obojena_polja[2][1]="teget"; $obojena_polja[2][2]="zeleno"; Ili elegantnije to moţemo napisati: $obojena_polja = array( array("crno","belo","plavo"), array("ljubicasto","oranz","zuto"), array("braon","teget","zeleno") ); Redovi kolone crno belo plavo 1 ljubicasto oranz zuto 2 braon teget zeleno Pristup višedimenzionalnim numeriĉki indeksiranim nizovima Višedimenzionaln numeriĉki indeksirani nizovi se, za razliku od asocijativnih, mogu pozivati i forpetljom: $obojena_polja = array( array("crno","belo","plavo"), array("ljubicasto","oranz","zuto"), array("braon","teget","zeleno")); for ($i=0; $i<3; $i++) for ($j=0; $j<3; $j++) echo "obojena polja"."[".$i."][".$j."]=".$obojena_polja[$i][$j]."<br>"; Rezultat bi bio: obojena_polja[0][0]=crno obojena_polja[0][1]=belo obojena_polja[0][2]=plavo obojena_polja[1][0]=ljubicasto obojena_polja[1][1]=oranz obojena_polja[1][2]=zuto obojena_polja[2][0]=braon obojena_polja[2][1]=teget obojena_polja[2][2]=zeleno Naravno pozivanje višedimenzionalnih numeriĉki indeksiranih nizova moţe da se izvrši i foreachfunkcijom: $obojena_polja = array( array("crno","belo","plavo"), array("ljubicasto","oranz","zuto"), array("braon","teget","zeleno")); [202]

203 foreach ($obojena_polja as $indeks1 => $vrednost1){ foreach ($vrednost1 as $indeks2 => $vrednost2){ echo "obojena polja"."[".$indeks1."][".$indeks2."]=".$vrednost2."<br>"; Rezultat je takodje isti kao u prethodnom primeru. Pozivanje moţe da se izvrši i kombinacijom each i list funkcija, gde je rezultat takodje isti: $obojena_polja = array( array("crno","belo","plavo"), array("ljubicasto","oranz","zuto"), array("braon","teget","zeleno")); while (list ($indeks1, $vrednost1) = each($obojena_polja)){ while (list ($indeks2, $vrednost2) = each($vrednost1)){ echo "obojena polja"."[".$indeks1."][".$indeks2."]=".$vrednost2."<br>"; Uredjivanje jednodimenzionalnih nizova sort() Funkcija sort uredjuje niz po abecednom redosledu, poĉevši od "A" ili ako su vrednosti brojevi poĉevši od najmanjeg broja: $imena = array ("Zoran", "Daliborka", "Stevan", "Zlatko", "Bojan"); sort ($imena); Redosled elemenata niza sada će biti: Bojan, Daliborka, Stevan, Zlatko, Zoran. Funkcija sort razlikuje mala i velika slova. Velika slova uvek idu ispred malih pa je "A" ispred "Z", ali je "Z" ispred "a". Vrednost moţete urediti i po numeriĉkom redosledu: $brojevi = array (10, 4, 7, 9, 3, 8); sort ($brojeva); Redosled će sada biti: 3, 4, 7, 8, 9, 10. asort() Ako ţelimo urediti niz od najmanje ka najvećoj a pri tome ne poremetiti vezu sa indeksima koristimo funkciju asort: $cene = array ( "hleb" => 30, "meso" => 300, "sok" => 100); asort ($cene); Sada će redosled biti: 30, 100, 300 ali kljuĉevi, to jest indeksi će biti povezani sa vrednostima kao i u poĉetku. [203]

204 ksort() Ako umesto po ceni, to jest vrednosti ţelimo da uredimo niz po opisu, to jest indeksu, ili ti kljuĉu, onda se koristi funkcija ksort. Znaĉi po abecedi uredjuje kljuĉeve, to jest indekse koji su naravno povezani sa vrednostima. Ako su indeksi brojevi onda uredjuje od najmanje do najveće vrenosti. rsort(), arsort() i krsort() Funkcije koje uredjuju po opadajućem redosledu i to su redom: rsort, arsort, krsort. Ove funkcije koriste se na isti naĉin kao i prethodne tri samo što redjaju od veće ka manje ili ti po opadajućem redsledu. Uredjivanje dvodimenzionalnih numeriĉki indeksiranih nizova Uredjivanje nizova sa dva i više indeksa u redosled koji moţda nije abecedni ili numeriĉki je sloţenije. U takvom sluĉaju morate napraviti svoje funkcije za poredjenje višedimenzionih nizova. Napravimo sada prvo tabelu a zatim i niz ĉiji elementi ĉuvaju na primer imena nekih kandidata, boju njihove kose i teţine. Znaĉi napravimo niz ĉiji elementi sadrţe vrednosti koje su razliĉite kako po svom karakteru tako i po svom znaĉenju. U našem sluĉaju razliĉiti su po karakteru u tome što postoje i numeriĉke i string vrednosti a po znaĉenju jer imaju podatke o boji kose kandidata, imena kandidata i njihovih teţina. Redovi kolone Pera plava Giga crna 60 2 Boban smedja 80 Sada ovu tabelu pretoĉimo u dvodimenzionalni numeriĉki indeksirani niz: $kandidati=array( array("pera","plava",100), array("giga","crna",60), array("boban","smedja",80) ); Ovim kodom smo napravili sledeći niz koga ću namerno napisati u tri kolone zbog objašnjenja: $kandidati[0][0]="pera"; $kandidati[0][1]="plava"; $kandidati[0][2]=100; $kandidati[1][0]="giga"; $kandidati[1][1]="crna"; $kandidati[1][2]=60; $kandidati[2][0]="boban"; $kandidati[2][1]="smedja" $kandidati[2][2]=80; Normalno niz moţe sadrţati i više osobina osim imena, boje kosa I teţina, potrebno je samo povećati broj kolona. Takodje ne moraju biti samo 3 kandidata, moţe ih biti i mnogo više, samo povećamo broj redova. Posmatrajmo sad indekse niza. Primećujemo da drugi indeks kad je nula onda vrednosti niza su imena kandidata. Ako je drugi indeks broj jedan vrednosti niza su boja kose a kad je drugi indeks broj dva niz sadrţi teţine. Znaĉi bez obzira što niz sadrţi raznovrsne podatke ipak smo ih uredili i to po drugom indeksu niza. E sad moţemo urediti niz po bilo kom od ta tri indexa u zavisnosti od toga po kojim osobinama ţelimo urediti niz. Ako ţelimo na primer po abecednom redosledu boja kose izabraćemo kao drugi index broj 1 i tad bi naša funkcija uporedjivanja izgledala ovako: [204]

205 function uporedjenja($x,$y){ if($x[1]==$y[1]) return 0; else if($x[1]<$y[1]) return -1; else return 1; usort ($kandidati,"uporedjenja"); Funkcija usort se koristi kada ţelimo sortirati neki niz po neobiĉnom redosledu. Taj neobiĉan redosled definišemo našom funkcijom function uporedjenja. Pisanje sopstvenih funkcije kasnije će biti detaljno objašnjeno ali sad da objasnimo u kratkim crtama: Funkcija se definiše pomoću rezervne reĉi function, pa zatim smisleno ime, u našem sluĉaju uporedjenja. Zatim u zagradi upisujemo parametre sa kojima funkcija barata. Broj parametara nije ograniĉen. U našem sluĉaju imamo dva parametra $x, i $y. Svrha naše funkcije je da utvrdi redosled ta dva parametra. U našem sluĉaju prametri $x[1] i $y[1] biće dva niza unutar glavnog niza od koji svaki pretstavlja po jednu boju kose jer smo za indeks uzeli broj 1. Da smo uzeli broj 2 onda bi smo naš glavni niz uredjivali po teţini kandidata, a da smo uzeli broj 0 onda po abecednom redosledu kandidata. Funkcija vraća rezultat za šta se koristi rezervna reĉ return. Na primer funkcija vraća vrednost 1 kad je return 1. Funkcija za poredjenje treba da uporedi x i y i da vrati 0 ako je x jednako y, -1 ako je x manje od y i 1 ako je x veće od y. Usort uredjuje po rastućem redosledu u ovom sluĉaju ali ako promenimo tako da funkcija vraća -1 ako je y manje od x i 1 ako je y veće od x. Uredjivanje dvodimenzionalnih asocijativnih nizova Kad je u pitanju asocijativni niz poĉnimo odma od primera: <?php function poredjenje($a,$b){ if($a["kiselo"]==$b["kiselo"]) return 0; else if($a["kiselo"]<$b["kiselo"]) return -1; else return 1; $voce[0]["kiselo"]="ananas"; $voce[1]["kiselo"]="banane"; $voce[2]["kiselo"]="dunje"; usort($voce,"poredjenje"); while (list($kljuc,$vrednost)=each($voce)){ echo "voce[".$kljuc."]:".$vrednost["kiselo"]."<br>";?> Rešenje je sledeće: voce[0]: Ananas voce[1]: Banane voce[2]: Dunje Funkcije uasort i uksort isto koriste funkcije poredjenja koje mi definišemo. Ostale zanimljive funkcije za rad sa nizovima array_count_values() Funkcija array_count_values vraća novi asocijativni niz koji sadrţi uĉestalosti pojavljivanja vrednosti u nizu koga ispitujemo. Vraćeni niz sadrţi sve jedinstvene vrednosti iz niza koga ispitujemo kao kljuĉeve. A svaki element vraćenog [205]

206 niza sadrţi numeriĉku vrednost broja pojavljivanja vrednosti iz kljuĉa vraćenog niza, odnosno koliko se puta ta vrednost iz kljuĉa vraćenog niza pojavljuje kao vrednost elemenata niza koga ispitujemo. Evo primera i sve će biti jasnije: $brojevi=array(30,10,20,10,40,50,10,20); $brojevi2=array_count_values($brojevi); foreach($brojevi2 as $index => $vrednost){ echo "\$brojevi2[".$index."]=".$vrednost."<br>"; Rezultat bi bio: $brojevi2[30]=1 $brojevi2[10]=3 $brojevi2[20]=2 $brojevi2[40]=1 $brojevi2[50]=1 Znaĉi brojevi 30, 40, 50 se po jednom pojavljuju u nizu $brojevi a 10 se pojavljuje 3 puta dok broj 20 se pojavljuje dva puta. extract() Funkcija extract od kljuĉeva (indexa) nizova pravi promenjljive a vrednost tih promenjljivih su vrednosti tih elemenata niza sa tim kljuĉevima. Evo primera koji doĉarava to jasno: $voce = array("banane"=>3, "ananas"=>8, "jabuke"=>5); extract($voce); echo "\$banane=".$banane."<br>"; echo "\$ananas=".$ananas."<br>"; echo "\$jabuke=".$jabuke; Rezultat bi bio: $banane=3 $ananas=8 $jabuke=5 Kompletan prototip funkcije extract bi bio: extract (niz [,tip] [,prefiks]); Opcioni parameter TIP govori funkciji extract šta da radi u sluĉaju da već postoji promenjljiva sa nazivom kao i kljuĉ iz niza koga konvertuje. Ako tip nije naveden onda se podrazumeva da se vrednost upisuje preko postojeće vrednosti. Ostale vrste parametra tip su sledeće: Tip EXTR_OVERWRITE EXTR_SKIP Značenje Upis preko postojede promenjljive ukoliko postoji Preskače element kada istoimena promenjljiva postoji [206]

207 EXTR_PREFIX_SAME EXTR_PREFIX_ALL EXTR_IF_EXISTS EXTR_PREFIX_IF_EXISTS EXTR_REFS pravi promenjljivu po imenu $prefiks_key kada postoji istoimena promenjljiva Stavlja prefiks svim promenjljivima. Prefiks definiše korisnik u tredem parametru funkcije extract( ) Izvlači samo promenjljive koje ved postoje i popunjava postojede promenjljive vrednostima iz niza. Ovo je korisno za konvertovanje, na primer, promenjljive $_REQUEST u skup važedih promenjljivih Pravi verziju sa prefiksom ako verzija bez prefiksa ved postoji Izvlači promenjljive kao reference String Pri izradi sajta uglavnom se koriste reĉi i zato je bitno poznavati dobro funkcije u PHP-u koje manipulišu reĉima, reĉenicama, znakovima, ili ti stringovima. U ovom delu obradjivaćemo funkcije za rad sa znakovnim promenjljivima i nizovima. Funkcije za manipulaciju stringovima Znakovne nizove koje unose korisnici preko HTML forme moramo radi sigurnosti prethodno proveriti i isfiltrirati pomoću ugradjenih PHP funkcija koje će mo obraditi u nastavku. filter_var() Funkcija filter_var proverava ispravnost unetog mejla. Ako je ispravno unet mejl vraća true a ako je nepravilan vraća false. Funkcija izgleda ovako: filter_var($mejl, FILTER_VALIDATE_ ); Gde je je $mejl string mejla koga proveravamo. trim() Funkcija trim briše praznine sa poĉetka i kraja stringa. $podatak = trim($podatak); Ova funkcija uklanja višak praznina sa poĉetka i kraja znakovnog niza. Na primer niz $podatak = " D E J AN " poĉinje sa 6 praznina i završava se sa 4 praznine. Posle filtriranja kroz trim funkciju rezultat će biti: "D E J AN" Dakle uklonjene su praznine sa poĉetka i kraja niza. [207]

208 ltrim() i chop() Za razliku od trim funkcija ltrim uklanja praznine samo sa poĉetka niza a funkcija chop samo sa kraja niza. preg_replace() Izbacivanje svih praznina iz teksta se obavlja funkcijom ereg_replace. Znaĉi i sa poĉetka, i sa kraja, a i iz sredine ova funkcija uklanja sve praznine. Evo primera: <?php $string = "This string has no whitespaces."; echo preg_replace( "/ +/", "", $string );?> Obratite paţnju da ispred znaka plus u izrazu je jedan razmak. Rezultat je sledeći: Thisstringhasnowhitespaces. A ukoliko hoćemo da ostavimo tamo gde ima praznina samo po jedno mesto onda umesto "" (bez razmaka izmedju navodnika) stavimo " " jedan razmak, ili već koliko ţelimo. strip_tags() Formatiranje stringa koji sadrţi PHP i HTML oznake vršim funkcijom strip_tags. Zlonamerni posetioci mogu ugroziti bezbednost sajta ako im se dozvoli da preko forme unose HTML ili PHP skripte. Da se to ne bi desilo koristi se funkcija strip_tags( ) koja preĉišćuje string od svih HTML i PHP oznaka (tagova). Prototip je: string strip_tags ( string $str [, string $dozvoljeni_tagovi]) $str je string koji se preĉišćava od HTML i PHP tagova, a opcioni parametar $dozvoljeni_tagovisadrţi dozvoljene tagove. Evo i primera: <?php $text = "Test paragraph<br>ostali text"; echo strip_tags($text); // A ako želimo dozvoliti <br> tag onda pišemo: echo strip_tags ($text, "<br>");?> Rezultat će biti: Test paragraphostali texttest paragraph Ostali text addslashes() Formatiranje znakovnih nizova pre unosa u bazu podataka se obavlja funkcijom addslashes(). Znakovi u stringu, kao što su su navodnici (obiĉni i dvostruki), obrnuta kosa crta (\) i znak NULL, prilikom unosa u bazu podataka mogu da izazovu probleme zato što se tumaĉe kao upravljaĉki znakovi. Da do toga ne bi došlo, pre upisa u bazu podataka, stringovi koji se unose preko formi od strane korisnika trebamo preĉistiti funkcijom addslashes. Na primer: $ime = addslashes($ime); Kada se koristi ova funkcija problematiĉni znak će u bazi podataka biti smešten sa kosom crtom (\) ispred. [208]

209 stripslashes() A kada izvlaĉimo podatke iz baze i pre njihovog korišćenja neophodno je izvršiti uklanjanje zaštitne kose crte ispred problematiĉnih znakova funkcijom stripslashes() na sledeći naĉin: $ime = stripslashes($ime); PHP moţe automatski da dodaje i briše kose crte upotrebom magiĉnih navodnika, ali o tome kasnije. Pretvaranje malih slova u velika i obratno Obzirom da postoji veći broj sluĉajeva i nekoliko funkcija najlakše je sve ovo sagledati tabelarno: Funkcija Opis Upotreba Vrednost Promenjljiva za primer $ime Pismo sa Web lokacije strtoupper Pretvara sve znakove u velika slova strtoupper($ime) PISMO SA WEB LOKACIJE strtolower Pretvara sve znakove u mala slova strtolower($ime) pismo sa web lokacije ucfirst Prvi znak u stringu pretvara u veliko slovo a sve ostale znakove u mala slova ucfirst($ime) Pismo sa web lokacije ucwords Pretvara prvi znak u svim reĉima u velika slova ucwords($ime) Pismo Sa Web Lokacije Spajanje, razdvajanje i prolaz kroz stringove explode() Funkcija explode deli string "tekst" po znaku ili navedenom nizu "graniĉnik". Ti delovi se vraćaju u vidu niza. Broj elemenata vraćenog niza moţe se ograniĉiti opcionim parametrom "broj". array explode (string graničnik, string tekst [, int broj]); Primera radi ako ţelimo da iz mejl adrese izdvojimo ime domena, upotrebićemo sledeći kod: $mejl="webmaster@hotmail.com"; $mejl_delovi=explode("@", $mejl); echo $mejl_delovi[0]."<br>".$mejl_delovi[1]; Rezultat: webmaster hotmail.com implode() i join() Suprotno funkciji explode funkcije implode i join (koje su identiĉne) spajaju elemente znakovnog niza dodajući izmedju njih znakovni niz naveden u prvom parametru. Tako se dobija jedna znakovna promenjljiva. strtok() Upotreba funkcije strtok nije baš jednostavna pa će mo je objasniti na primeru: [209]

210 <?php $recenica="sajt o pticama govori o pticama"; $uporedjivanje=strtok($recenica, " "); echo $uporedjivanje."<br>"; while ($uporedjivanje!= ""){ $uporedjivanje=strtok(" "); echo $uporedjivanje."<br>";?> Rezultat bi bio: sajt o pticama govori o pticama Da bi smo pri korišćenju funkcije strtok prošli kroz sve reĉi u reĉenici, moramo koristiti skriptu doslovce!!! substr() O funkciji substr konkretan primer sve govori: $recenica="nas monopolisticki telekom internet provajder je izuzetno jeftin"; $uporedjivanje=substr($recenica, 4, 9); echo $uporedjivanje; Rezultat bi bio: monopolis Znaĉi ovde se ne broje reĉi u reĉenici znakovne promenjljive već znaci, i to tako da prvi znak se broji od broja 0. Tako ako stavimo substr ($recenica, 0) dobićemo celu reĉenicu. Ako je na primer substr ($recenica, - 9) onda broji otpozadi. Ako je substr ($recenica, 4, -9) onda vraća znakove izmedju 4-tog znaka od poĉetka do znaka koji je 9-ti od kraja, itd. PoreĊenje stringova strcmp() Funkcija strcmp ima sledeći prototip: int strcmp (string1, string2); Funkcija strcmp poredi string1 i string2 i ako su jednaki vraća 0. Ako string1 dolazi iza string2 po abecednom redu ili po brojevima funkcija vraća broj veći od nule, u suprotno vraća broj manji od nule. Funkcija strcmp razlikuje mala i velika slova. strcasecmp() Funkcija strcasecmp je identiĉna prethodnoj funkciji stom razlikom što ne razlikuje mala i velika slova. [210]

211 strnatcmp() i strnatcasecmp() Funkcije strnatcmp i strnatcasecmp porede znakovne nizove prema prirodnom redosledu. Na primer, funkcija strcmp bi postavila string "2" ispred stringa "12" poštujući logiku da je broj "2" u brojanju ispred "12". Funkcija strnatcmp bi poredjala obrnuto i razlikovala bi mala i velika slova, dok funkcijastrnatcasecmp bi isto poredjala obrnuto ali ne bi razlikovala mala i velika slova. strlen() Funkcija strlen utvrdjuje duţinu stringa. Na primer: $a = "Zdravo"; $b = strlen ($a); echo $b; Rezultat: 6 Podudarnost i zamena delova stringa U ovom delu će mo obraditi funkcije za proveru da li se neki znakovni niz sadrţi u nekom većem znakovnom nizu. strstr() i strchr() Funkcije strstr i strchr su identiĉne i koriste se kako za nalaţenje znakova tako i reĉi unutar većeg znakovnog niza. Prototip funkcije strstr je sledeći: string strstr(string $tekst, string $uzorak [,bool $suprotna_logika = true]); Primer: $ = "ime@gmail.com"; $domain = strstr ($ , "@"); echo $domain. "<br>"; $user = strstr ($ , "@", true); // Treći parametar uveden od PHP echo $user; ime U tekst treba pronaći uzorak. Rezultat funkcije je znakovni podniz teksta koji poĉinje od prvog pojavljivanja uzorka pa do kraja. Ukoliko se uzorak ne javlja u tekstu, rezultat funkcije je false. Najĉešće se ove funkcije koriste da nam kaţu da li postoji neka reĉ u nekom nizu ili ne. stristr() Funkcija stristr je identiĉna funkciji strstr stom razlikom što ne pravi razliku izmedju mala i velika slova. Funkcija strrchr je identiĉna strstr stim što traţi podniz od kraja niza. [211]

212 strpos() i strrpos() Funkcije strpos i strrpos vraćaju broj koji ukazuje posle kog znaka se pojavljuje uzorak. Prototip je: int strpos (string $tekst, string $uzorak [, int pomeraj]); Imajte u vidu da brojanje poĉinje od nula. Na primer sledeći kod će proslediti web ĉitaĉu vrednost 5: $test="zdravo narode"; echo strops($test, "o"); Ovde smo za uzorak prosledili jedan znak ("o") ali moţemo, naravno proslediti i znakovni niz bilo koje duţine. Opcioni parametar pomeraj pokazuje funkciji od kog znaka u tekstu da poĉne traţenje uzoraka (ali i dalje se broji od poĉetka). Na primer da smo stavili echo strpos($test, "o", 6) rezultat bi bio 10 jer se na toj poziciji nalazi drugi znak "o". Funkcija strrpos je sliĉna funkciji strpos ali vraća poloţaj poslednjeg pojavljivanja znaka u tekstu, i traţi uzorke od samo jednog znaka. Ako joj kao uzorak postavimo neki znakovni niz ona će raditi samo sa prvim znakom a ostale će ignorisati. Korišćenjem bilo strpos ili strrpos funkcije ako uzorak ne postoji u tekstu one će vratiti vrednostfalse, a false u PHP jeziku jednako je 0 pa tad neznamo da li se znak (string) pojavljuje odmah na poĉetku ili ga u opšte i nema!!! Ovaj problem se moţe izbeći upotrebom operatora "===" za proveru rezultata na sledeći naĉin: $test="zdravo narode"; $rezultat=strops($test, "Z"); if ($rezultat === false) echo "ne postoji znak u tekstu"; else echo "Postoji znak na početku"; str_replace() Pretragom i u isto vreme zamenom pronadjene reĉi nekom drugom reĉi u stringu moţemo na primer cenzurisati razne pogrdne reĉi u forumima, komentarima i sliĉno. Funkcija str_replace upravo zato sluţi: mixed str_replace (mixed $uzorak, mixed $zamena, mixed $tekst [, int &$broj_pojavljivanja]) Primer sve objašnjava: $uzorci=array("a", "e", "i", "o", "u", "A", "E", "I", "O", "U"); $rezultat = str_replace($uzorci, "", "Hello World of PHP"); echo $rezultat."<br>"; $str = str_replace("ll", "", "good golly miss molly!", $broj_pojavljivanja); echo $broj_pojavljivanja; Rezultat: Hll Wrld f PHP 2 substr_replace() Za razliku od funkcije str_replace koja zamenjuje reĉ na osnovu reĉi koja se uporedjuje funkcijasubstr_replace zamenjuje reĉ na osnovu poloţaja u tekstu. Prototip je sledeći: string substr_replace( string $tekst, string $zamena, int $početak [, int $dužina]); [212]

213 Broj $poĉetak odredjuje od kog znaka u nizu će se krenuti sa zamenom, a opcioni broja $duţinaodredjuje do kog znaka će se izvršiti zamena. Parametar $duţina nije obavezan, i ako se ne upotrebi znakovni niz će biti zamenjen od parametra $poĉetak pa do kraja. Regularni izrazi i PCRE sintaksa Regularni izraz (engl. skr. regexp ili regex, u mnoţini regexps, regexes ili regexen) je string koji opisuje, menja ili sparuje skup stringova, u skladu sa odreċenim sintaksnim pravilima. Regularni izrazi proširuju mogućnosti manipulacijom stringova u odnosu na funkcije koje smo do sada koristili za opisivanje, zamenu ili spajanje stringova. Mi će mo ovde razmatrati PCRE sintaksu (engl. Perl compatible regular expressions), koja je implementacija regularnih izraza u programskom jeziku Perl. PCRE imaju bogatiju i predvidljiviju sintaksu ĉak i od proširenih POSIX regularnih izraza. Tek nakon razmatranja sintakse regularnih izraza mi će mo videti kako se konkretno oni upotrebljavaju u PHP-u, odnosno razmatraćemo regularne izraze u PHP-u kao parametre unutar sledećih funkcija: preg_ filter preg_ grep preg_ last_ error preg_ match_ all preg_ match preg_ quote preg_ replace_ callback preg_ replace preg_ split PCRE sintaksa regularnih izraza Sintaksa regularnih izraza se sastoji od raznih slovnih ili drugih znakova sliĉno kao na primer sintaksni znakovi u matematici. Jedina razlika je u tome što matematiĉki znaci izvršavaju akcije sabiranja, mnoţenja itd. nad brojevima a znaci regularnih izraza izvršavaju akcije nad slovima, raznim tekstualnim ili brojĉanim znacima ili pak nad ĉitavim tekstovima. Svaki znak definiše neku akciju nad stringovima. Takodje ti znakovi mogu medjusobno malte ne neograniĉeno da se kombinuju i pri tome rezultiraju razne, gotovo beskonaĉan broj mogućnosti i radnje nad stringovima. Evo spisak i objašnjenje sintakse regularnih izraza: Taĉka pronalazi bilo koji znak, odnosno drugim reĉima zamenjuje bilo koji znak. 2. [] - Pronalazi bilo koji znak koji se nalazi u uglastim zagradama. Na primer [abc] pronalazi a, bi c, ali ne i ostale znakove. 3. [ - ] - Pronalazi bilo koji znak koji se nalazi u uglastim zagradama a minus je izmeċu znaka. Na primer [ac] pronalazi a, b i c, ali ne i ostale znakove. 4. [^ ] - Pronalazi bilo koji znak osim onih koji se nalaze u uglastim zagradama. Na primer [^abc]pronalazi sve znakove osim a, b i c, jer znak ^ unutar uglastih zagrada znaĉi negaciju a izvan uglastih zagrada objašnjenje u sledećem redu 5. ^ - Ukoliko je ovo prvi znak regularnog izraza izvan uglastih zagrada, onda on oznaĉava da izraz mora biti pronaċen na poĉetku stringa. Na primer ako imamo ^abc onda moţemo traţiti u stringu samo ako string na poĉetku ima abc na primer abcdefg 6. $ - Sve isto kao i za znak ^, samo što se odnosi da izraz mora biti pronadjen na kraju stringa. Znak $ se piše na kraju, na primer abc$ [213]

214 7. * - Znak za mnoţenje pronalazi 0 ili više puta prethodni znak. Na primjer bo* pronalazi b, bo iboo i sliĉno Pronalazi jednom ili više puta prethodni znak. Na primjer bo+ će pronaći bo i boo, ali nećeb kao što je to bio sluĉaj gore 9.? - Pronalazi niti jednom ili jednom prethodni znak. Na primer bo? će pronaći b i bo, ali nećeboo. 10. {n - Gdje je n pozitivan ceo broj, pronalazi prethodni znak toĉno n puta. Na primer o{2pronalazi samo oo. 11. {n, - Kao gore samo ima još i zarez, pronalazi prethodni znak najmanje n puta. Na primero{2, pronalazi oo, ooo, oooo, itd. 12. {n,m - Gdje su n i m celi pozitivni brojevi, pronalazi prethodni znak najmanje n, a najviše mputa. Na primer o{2,3 pronalazi oo i samo još ooo. 13. ( ) - Pronalazi bilo koju sekvencu unutar zagrada. Na primer ako ga kombinujemo sa znakom + imaćemo: (ab)+ pronalazi ab, abab, ababab i tako dalje. Zagrade nam znaĉi sluţe za grupisanje znakova, tako da kvantifikatori *, +,? i { na njih gledaju kao na jedan znak Logiĉki ILI operator nad regularnim znakovima. Na primer prvo drugo pronalazi prvo ilidrugo, a na primer R(1 2) pronalazi R1 ili R \ - Obrnuta kosa crta tretira specijalne znakove literalno, odnosno kao obiĉne znakove. Na primer znak + oznaĉava pronaċi prethodni znak jednom ili više puta, dok \+ pronalazi baš znak+ kao da je obiĉan znak. Svi znakovi *? +. ( ) { [ ] ^ \ $ su sintaksni znakovi regularnih izraza a postaju literalni ako ispred njih stavimo znak " \ ". Literalni znak je onaj znak koji pronalazi sam sebe. 16. \n - Pronalazi znak kraja linije. 17. \r - Pronalazi carriage-return znak. U Windows -ima se kraj linije oznaĉava sa \n\r, ali će i sami \n u većini programa pronaći kraj linije. 18. \t - Pronalazi tabulator. Kontrolni znakovi \a, \e, \f, \v osim \n, \r i \t su praktiĉno izumrli, pa ih ovde nema potrebe opisivati. Perl proširenja: 1. \C - Pronalazi bilo koji znak. Ekvivalentno taĉki ". " 2. \d - Pronalazi broj. Ekvivalentno izrazu [0-9] 3. \D - Pronalazi bilo koji znak osim brojeva. Ekvivalentno izrazu [^0-9] 4. \l - (malo slovo L) Pronalazi mala slova ukljuĉujući i internacionalna slova. Za srpski jezik ekvivalentno izrazu [a-zĉćċšţ]. 5. \L - Pronalazi bilo koji znak osim mala slova. Za srpski jezik ekvivalentno izrazu [^a-zĉćċšţ]. 6. \s - Pronalazi bilo koji razmak (space) ukljuĉujući i tabulatore. Ekvivalentno izrazu [\t\n\r\f\v]. 7. \S - Pronalazi bilo koji znak koji nije razmak (tabulator). Ekvivalentno izrazu [^\t\n\r\f\v]. 8. \u - Pronalazi bilo koje veliko slovo ukljuĉujući i internacionalna slova. Za srpski jezik ekvivalentno izrazu [A- ZĈĆĐŠŢ]. 9. \U - Pronalazi bilo koji znak osim velikih slova. Za srpski jezik ekvivalentno izrazu [^A-ZĈĆĐŠŢ]. 10. \w - Pronalazi bilo koji word znak. Word znakovi su slova, brojevi i podvuĉeno. Naime radi se o znakovima koji se u C/C++ jeziku mogu koristiti za varijable, funkcije itd. 11. \W - Pronalazi bilo koji znak osim word znakova. 12. \0dd - Pronalazi znak sa ovim oktalnim ASCII/ANSI kodom. Gdje je dd jedan ili više oktalnih brojeva. 13. \xxx - Pronalazi znak sa ovim heksadecimalnim ASCII/ANSI kodom. Gdje je xx jedan ili heksadecimalni broj. Ove oznake su dovoljne za većinu stvari ali ima ih još. Kompletan spisak vezano za PHP moţete naći na Regularni izraz uzorka u PHP sa PCRE sintaksom uvek se piše u navodnicima, jednostrukim ili dvostrukim, ali izmedju dve kose crte! Te dve kose crte su graniĉni znaci uzorka regularnog izraza. Evo primera: "/^[0-9]{8$/". A ako vam se ne svidja kosa crta kao graniĉnik moţe potpuno ravnopravno da stoji ili ĉak i znak ~. Na primer izgledalo bi: "@^[0-9]{8$@". Ako sad stavimo i znak " i " nakon graniĉnika na primer ovako "/^[A-Z]{8$/i" to će znaĉiti pretraţivanje bez uzimanja u obzir da li su slova mala ili velika. Ako je bez " i " onda uzima u obzir veliĉinu slova. Znakovi ^ i $ u "/^[0-9]{8$/" govore da se traţe samo 8 broja. Znaĉi nebi prošo ovakav string:ab , jer ne [214]

215 sadrši samo 8 broja, a bez znakova ^ i $ bi prošlo. Korišćenjem specijalnog znaka \b na krajevima izraza, a bez znakova ^ i $ dobijamo isti efekat:"/\b[0-9]{8\b/" Funkcija preg_match Funkcija preg_match ima sledeći prototip: int preg_match (string $regularni_izraz, string $tekst [, array &$rezultat [, int $flags [, int $offset ]]]) Sve je lakše shvatiti na primerima. Napravimo skriptu koja proverava da li u stringu postoji osmocifreni broj. Skripta bi izgledala ovako: $tekst = "aaa "; if (preg_match("/[0-9]{8/", $tekst)) echo "postoji"; else echo "ne postoji"; Rezultat: postoji E sad da je $tekst = "aaa1234a5678" rezultat bi bio netaĉno. Isto netaĉno daje na primer $tekst = "as ". Taĉno bi bilo i $tekst = "ase f gtr". Takodje taĉan bi bio i $tekst = " " i tako dalje. Znaĉi poenta je da funkcija traţi ono što definiše regularni izraz. Na primer ako u istoj skripti stavimo malo drugaĉiji regularni izraz, na primer nama poznat "/\b[0-9]{8\b/" a sve ostalo ostane isto rezultat će biti netaĉno jer u ovom sluĉaju regularni izraz je napisan tako da traţi string koji samo i jedino sadrţi 8 broja, a naša promenjljiva $tekst sadrţi 11 znaka. I da su svih 11 znakova brojevi opet bi skripta ispisala netaĉno. Iz prototipa funkcije vidimo da ona sadrţi i opcione parametre. Jedan od njih je i niz $rezultat. Na primer ajde da napravimo skriptu koja uzima iz teksta osmocifren broj ukoliko postoji. $tekst = "aaa wwww "; preg_match("/[0-9]{8/", $tekst, $rezultat); echo $rezultat[0]; Rezultat skripte bi bio: Postoji i još jedan ĉetvrti opcioni parametar u funkciji, a to je PREG_OFFSET_CAPTURE. Na primer, osim što ţelimo da izvuĉemo osmocifrene brojeve iz teksta, ţelimo da znamo i informaciju od kog poloţaja u tekstu se nalazi osmocifren broj, ukoliko se nalazi naravno: $tekst = "aaa wwww "; preg_match("/[0-9]{8/", $tekst, $rezultat, PREG_OFFSET_CAPTURE); echo $rezultat[0][0]."<br>".$rezultat[0][1]; Rezultat bi bio: [215]

216 Znaĉi u ovom sluĉaju pored broja kog smo traţili vraća u niz i poloţaj osmocifrenog broja u tekstu. Ovde smo u preg_match koristili jednostavnije regularne izraze. Regularni izrazi mogu biti mnogo sloţeniji u zavisnosti od problema kog rešavamo. Neke primere sloţenije kao i sve vezano za funkciju moţete videti ovde LINK Funkcija preg_match_all Funkcija preg_ match_all je jako sliĉna preg_match funkciji stom razlikom što ona traţi sve do kraja teksta ono što smo definisali regularnim izrazom i smešta sve redom u $rezultat. Ajde da vidimo primer: $tekst="aaa wwww "; preg_match_all ("/[0-9]{8/", $tekst, $rezultat); echo $rezultat[0][0]."<br>".$rezultat[0][1]."<br>".$rezultat[0][2]; Rezultat: Funkcija je izvukla sve osmocifrene brojeve iz teksta. Šta će se desiti ako ubacimo i ĉetvrti parametar PREG _OFFSET _CAPTURE?? $tekst = "aaa wwww "; preg_match_all ("/[0-9]{8/", $tekst, $rezultat, PREG_OFFSET_CAPTURE); echo $rezultat[0][0][0]."<br>".$rezultat[0][0][1]."<br>".$rezultat[0][1][0]."<br>".$rezultat[0][1][1]."<br>".$rezultat[0][2][0]."<br>".$rezultat[0][2][1]; Rezultat bi bio: Neke sloţenije primere, kao i sve vezano za funkciju moţete videti u LINK Funkcija preg_replace Prethodne dve funkcije koje smo razmatrali pronalaze ono što smo definisali u regularnom izrazu i ako nadju vraćaju to što nadju. Funkcija preg_replace radi drugaĉije, ona ono što pronadje zameni sa stringom koga takodje definišemo u toj funkciji. Evo prototipa: mixed preg_replace (mixed $regularni_izraz, mixed $zamena, mixed $tekst, [int $ogranicenje]) [216]

217 Funkcija pronalazi $regularni_izraz u $tekst i kad nadje zamenjuje sa $zamena. Ako je zadato$ogranicenje, zamenjuje se samo toliki broj podudaranja koliki je broj u $ogranicenje. Ako$ogranicenje nije zadato ili je jednako - 1, zamenjuju se sva podudaranja. Evo primera: <? $tekst = "aaa wwww "; $rezultat = preg_replace("/[0-9]{8/", "zzzz", $tekst, 2); echo $rezultat;?> Rezultat: aaazzzz wwww zzzz E sad $regularni_izraz moţe biti i niz. Primer sve objašnjava: <?php $tekst = "aaa bbb ccc dejan mala sasa bbb aaa"; $uzorak[0] = "/aaa/"; $uzorak[1] = "/ccc/"; $uzorak[2] = "/bbb/"; $zamena = "@@@"; echo preg_replace ($uzorak, $zamena, $tekst);?> Rezultat @@@ dejan Znaĉi gde god funkcija nadje bilo koji od uzoraka u tekstu zameniće ga. Normalno da smo stavili za ĉetvrti parametar na primer broj 2 onda bi ccc dejan mala sasa bbb aaa Takodje i $zamena moţe biti niz. Ajde da vidimo: <?php $tekst = "aaa bbb ccc dejan mala sasa bbb aaa"; $uzorak[0] = "/aaa/"; $uzorak[1] = "/ccc/"; $uzorak[2] = "/bbb/"; $zamena[0] = "@@@"; $zamena[1] = "^^^"; $zamena[2] = "***"; echo preg_replace($uzorak, $zamena, $tekst);?> Rezultat *** ^^^ dejan mala sasa Znaĉi gde god se naidje na uzorak sa indeksom 0 zamenjuje se sa zamenom sa indeksom 0, a kad se naidje na uzorak u tekstu sa indeksom 1 zamenjuje se sa zamenom koja ima indeks 1, i tako dalje. E sad ako ima na primer više uzoraka od zamena, kad se istroše zamene posle toga se zamenjuje sa prazninom. A ako ima manje uzoraka od zamena onda se traţe samo oni uzorci koji postoje i oni se zamenjuju. I $tekst moţe biti niz. Evo kako to izgleda: [217]

218 <?php $tekst[0] = "aaa bbb ccc "; $tekst[1] = "aaa bbb ccc"; $tekst[2] = " aaa bbb ccc"; $uzorak[0] = "/aaa/"; $uzorak[1] = "/ccc/"; $uzorak[2] = "/bbb/"; $zamena[0] = "@@@"; $zamena[1] = "^^^"; $zamena[2] = "***"; $a = preg_replace($uzorak, $zamena, $tekst); for ($i=0; $i<3; $i++) echo $a[$i]."<br>";?> Rezultat *** ^^^ *** ^^^ *** ^^^ Ovde nema potrebe da se objašnjava pošto je valjda sve jasno. E sad parametar $zamena moţe imati odredjene varijacije još. Do sada smo funkcijom preg_replacetraţili uzorak u tekstu i kad se nadje zameni se sa $zamena. Znaĉi vraća se ceo tekst sa odredjenim izmenama. Medjutim postoji varijanta da se ne vrati ceo tekst (ali ako podesimo i moţe), već da se izvuku pronadjeni delovi teksta definisani uzorkom i da se poredjaju kako nam je volja i da se ubace znakovi po ţelji šta nam je volja, i kako nam je volja. Ovo ovako napisano moţda deluje totalno nejasno ali primeri će sve razjasniti: <? $tekst = "se####der jru, rt@@@@dfrtg. Jkjt jdydy y&&&&hbwef"; $uzorak = "/(.{2)(####)(.{11)(@@@@)(.{19)(&&&&)(.{5)/"; $zamena = "$4$6$2"; $a1 = preg_replace($uzorak, $zamena, $tekst); $zamena = "$4$3$6"; $a2 = preg_replace($uzorak, $zamena, $tekst); $zamena = "${48888$3POSAO$6"; $a3 = preg_replace($uzorak, $zamena, $tekst); echo $a1."<br>".$a2."<br>".$a3;?> jru, rt&&&& 8888der jru, rtposao&&&& Ponekad je bitno znati unapred formu (pravilo) teksta u stringu $tekst. Šta to znaĉi? Ne moramo znati taĉno sve znakove teksta koji se mogu pojaviti, ali moramo znati odredjena pravila koliko znaka, kog oblika i u kom delu teksta će se znaci pojavljivati u stringu koga ispitujemo. Na primer svi znamo da se imena sajtova pišu u formi E sad forma je sledeća, imamo uvek na istom mestu sa istim znacima. Pa zatim ime sajta koje moţe imati na primer mala ili velika slova, taĉku, srednju i donju crtu, itd. Pa zatim.com, ili.net koje su isto konstante itd. Znaĉi domeni sajtova imaju svoju formu. U tom smislu za naredne stvari koje slede moramo znati formu stringa$tekst. U našem konkretnom sluĉaju string $tekst je: "se####der jru, rt@@@@dfrtg. Jkjt jdydy y&&&&hbwef". A formu stringa $tekst moramo pretoĉiti u regularan izraz i to tako da taj regularan izraz opisuje uvek validno eventualne sve varijacije stringa $tekst (ili bar koliko god je to moguće). Regularan izraz za naš konkretan $tekst bi pravili ovako: Imamo prvo "se" a na primer to moţe u nekim varijacijama teksta da bude kombinacija bilo koja moguća dva znaka. [218]

219 Ako je tako onda "se" moţemo pretstaviti u reg. izrazu kao (.{2). Zatim imamo "####" i recimo neka bude to uvek fiksno ĉetri tarabe. To bi onda u reg. izrazu moglo da se zapiše kao (####). Krenimo tom logikom na dalje i biće: der jru, rt => => (@@@@) dfrtg. Jkjt jdydy y => (.{19) &&&& => (&&&&) hbwef => (.{5) Kad se svi ovi delovi regularnog izraza spoje dobićemo jedan regularan izraz koji potpuno opisuje našu tekst formu. On bi glasio: $uzorak = "/(.{2)(####)(.{11)(@@@@)(.{19)(&&&&)(.{5)/" Regularni izraz $uzorak se sastoji od nekoliko zagrada. Mada nije pravilo da mora da se sastoji samo od zagrada. Moţe se sastojati u nekim sluĉajevima i od zagrada i od još nekih znakova izvan zagrada. Medjutim u našem konkretnom sluĉaju šematski naš regularni izraz moţemo pretstaviti: $uzorak = "/()()()()()()/" Obeleţimo sad svaku od tih zagrada sa redom $1, $2, $3, $4, $5, $6, $7. Napomena je da $1, $2 i ostali, se odnose iskljuĉivo na zagrade (i ono što se nalazi u njima naravno) bez obzira što se reg. izraz uzorka kao što smo napomenuli moţe sastojati još od nekih znakova izvan zagrada. Time smo dobili "reĉi" regularnog izraza. I sad ono što je kljuĉno, te "reĉi" moţemo kombinovati u parametru$zamena funkcije preg_replace kako nam je volja. Na primer mi smo koristili 3 kombinacije u primeru, ali naravno mogućnosti su neograniĉene. Na primer mogu da se reĉi ponavljaju, kombinuju više puta i to sve "reĉi" ili samo neke, odnosno moţete pustiti mašti na volju. E sad onako kako iskombinujemo "reĉi" u $uzorak tako će i funkcija preg_replace i vratiti. Konkretno u našem primeru je preg_replace vratila ono što se nalazi u $a1, $a2 i $a3. Ako pogledamo u primeru videćemo da smo u jednom trenutku za zamenu napisali $zamena = "${48888$3POSAO$6". Kao što vidimo ne moramo samo pisati $1$2$3 itd. već izmednju njih moţemo pisati slova, brojeve ili bilo koje druge znakove. Medjutim ako se piše broj onda mora stajati redni broj reĉi u vitiĉastim zagradama da funkcija ne bi pomešala. Na primer da smo napisali $48888, funkcija bi to protumaĉila kao "reĉ". Reĉi mogu da idu od 0 do 99. Znaĉi $0, $1, $2, $3,..., $99. Kad je $0 onda se tako zamenjuju sve reĉi poredjane od najmanje do najveće. Znaĉi u našem sluĉaju $0 je ekvivalentno kao da smo napisali $1$2$3$4$5$6$7. Napomenuli smo da se regularni izraz ne mora "raslojiti" samo od zagrada, pa da to potkrepimo i primerom da bi sve bilo jasno: <?php $tekst = "April 15, 2003"; $uzorak = "/(\w+) (\d+), (\d+)/i"; $zamena = "${11,$3"; echo preg_replace($uzorak, $zamena, $tekst);?> Rezultat: April1,2003 $uzork je ovako napravljen: (\w+) - svi word znaci (a oni ne sadrţe kao što znamo i razmaknicu). To drugim reĉima znaĉi da taj deo reg. izraza ide samo do razmaknice u tekstu, to jest obuhvata u ovoj varijanti teksta samo"april". Medjutim takodje reg. izraz govori da ne mora tu stajati uvek samo 5 word znaka već najmanje jedan znak i više jer figuriše i reg. znak +. Znaĉi tu moţe [219]

220 u nekim varijacijama teksta na primer stajati i R43Uurthfzt ili pak samo jedan word znak, ali ne ni jedan znak. Da je stajao reg izraz znak mnoţenja onda bi obuhvatao i "ni jedan znak". Zatim reg. izraz se sastoji od razmaknice i u nastavku (\d+). Kao što znamo "\d" zamenjuje sve brojeve, a pošto ima i reg. znak "+" u nastavku znaĉi da tu moţe figurisati u raznim varijantama jedan ili neograniĉen broj brojeva. Zatim zarez kao fiksni koga smo napisali samostalno. Ali mogli smo i u zagradi (\,), ali zbog konkrtnog objašnjenja da izvan zagrada moţe da stoje i još neki znaci (u konkretnom primeru su zarez i dve razmaknice), stavili smo zarez izvan zagrada. Kao što vidimo da bi smo stavili kao literal znak zarez u bilo kojoj zagradi reg. izraza, moramo staviti i kosu crtu ispred zareza jer zarez je sintaksa regularnih izraza unutar zagrada, a izvan zagrada nije sintaksa pa moţe stajati bez kose crte. Zatim ide razmaknica opet, i na kraju opet deo reg. izraz za brojeve koji definiše jedan i više brojeva(\d+). Zamenu smo definisali kao "${11,$3". Reĉ ${1 oznaĉava prvu zagradu u reg izrazu, a reg izraz sa prvom zagradom u našem konkretnom tekstu nalazi "April". Zatim ide "slobodan" literal znak 1 i zarez, i na kraju $3 koji oznaĉava treću zagradu koja definiše i pronalazi u tekstu string "2003". Sve ovo kad se spoji dobijamo rezultat April1,2003. Poenta u ovom primeru je znaĉi da i u $zamena mogu da stoje slobodno znaci, ili oni koji nam trebaju iz uzorka koje smo smestili izvan zagrada pa ne moţemo da ih definišemo nekim $n izrazom, ili sasvim neki novi po našoj ţelji. I na kraju treba dodati da su ovde korišćeni prostiji regularni izrazi jer je fokus bio na što boljem objašnjenju funkcije. Sloţenije primere reg. izraza i još neke stvari vezane za funkciju moţete videti na LINK Funkcije preg_replace_callback i preg_quote preg_replace_callback() Funkcija preg_replace_callback je sliĉna funkciji preg_replace. Preg_replace sa varijantom "$n"radi tako da isĉitava odredjene "reĉi" iz $tekst i pravi onako kako kombinujemo "$n" elemente i to bez ikakvog menjanja tih "$n" elemenata. Medjutim preg_replace_callback ima mogućnost promene tih elemenata! Menja tako što na mestu drugog parametra se piše ime funkcije u kojoj ţelimo da napravimo odredjene zamene. Evo primera pa će sve biti jasno: $text = "Jedna od boljih godina je bila 2002, 2006, 2007 a mozda i 2008"; function sledeca_godina ($zamena){ return $zamena[1]+1; echo preg_replace_callback ( "/(\d{4)/", "sledeca_godina", $text); Rezultat: Jedna od boljih godina je bila 2003, 2007, 2008 a mozda i 2009 >Mislim da je sve jasno i da ne treba objašnjenje. Naravno i ovde postoji ĉetvrti parametar koji odrdjuje koliko maksimalno zamena moţe da se izvrši. Pa tako ako bi smo napisalipreg_replace_callback ("/(\d{4)/", "sledeca_godina", $text, 1) rezultat bi bio "Jedna od boljih godina je bila 2003, 2006, 2007 a mozda i 2008". Znaĉi zamenjena je i uvećana samo prva godina. Ako sve ostane isto u gornjem primeru a promenimo samo return "svaka od"; razultat bi bio "Jedna od boljih godina je bila svaka od, 2007, 2008 a mozda i 2009". Znaĉi mi ne moramo samo raĉunati. Detaljnije o ovoj funkciji i još neke primere, kao i sloţenije reg izraze moţete videti na LINK [220]

221 preg_quote() Funkcija preg_ quote stavlja obrnutu kosu crtu ispred svih znakova u znakovnom nizu koji predstavljaju deo sintakse regularnog izraza. Ovo je korisno ako imate znakovni niz dobijen tokom izvršavanja kome treba naći podudaranje s nekim tekstom, a taj niz moţe sadrţati posebne znakove regularnog izraza. Ako je zadat opcioni $granicnik, i on će biti pretvoren u poseban znak. To je korisno za pretvaranje graniĉnika u posebne znakove, što je potrebno u funkcijama biblioteke PCRE. Najĉešći graniĉnik je " / ". string preg_quote (string $string, [string $granicnik]) Posebni znakovi regularnih izraza su sledeći: \ +. *? [ ] $ ( ) { =! < > : Primer: $string = "$40 paaaaaa g3?400"; $reci = preg_quote($string, "/"); echo $reci; Rezultat: \$40 fpaaaaaa g3\?400 Detaljnije o ovoj funkciji i još neke primere, kao i sloţenije reg izraze moţete videti na LINK Ostale PREG funkcije Funkciju preg_filter moţete prouĉiti na LINK Funkciju preg_grep moţete prouĉiti na LINK Funkciju preg_last_error moţete prouĉiti na LINK Funkciju preg_split moţete prouĉiti na LINK *LINK= Funkcija Ovde ćemo objasniti višestruku upotrebu jednog istog koda primenom iskaza require, include. Objasnićemo i kako moţete piseti i pozivati funkcije koje sami pravite. Iskazi require i include Upotrebom iskaza require u PHP skripti se moţe uĉitati datoteka koja moţe sadrţati PHP iskaze, HTML kod, PHP funkcije ili klase. Za objašnjenje iskaza require neka imamo na primer fajlumetak.php u kome je zapisano sledeće: [221]

222 <? echo "Vrlo jednostavan primer upotrebe iskaza require.<br>";?> A u fajl sa nazivom glavna_strana.php je zapisano: <? echo "Ovo je glavna strana.<br>"; require ("umetak.php"); echo "Kraj strane.";?> Nakon izvršavanja skipte glavna_strana.php dobija se sledeći rezultat: Ovo je glavna strana. Vrlo jednostavan PHP primer iskaza require. Kraj strane. Ovde vidimo da iskaz require umeće TEKST skripte koje poziva. Znaĉi bukvalno ubacuje tekst iz pozvanog fajla a ne na primer da ubacuje rezultat skripte koji poziva!! Zamislimo sada i ovo: Sajt sadrţi na stotine stranica napravljenih identiĉno u HTML. Doneta je odluka da se na takvim stranama mora ubaciti mejl za kontakt. Da bi to odradili morate uneti promene na svaku od nekoliko stotina stranica. To je ogroman poso. U PHP-u moţemo na primer zajedniĉki HTML kod za sve stranice izvući u jedan fajl i pozivati ga kad god nam zatreba require iskazom. I ako ţelimo nešto izmeniti onda je dovoljno izmeniti samo taj jedan HTML fajl a ne na stotine. Kao što znamo, ako ţelimo primenjivati PHP na nekoj stranici na sajtu ona mora da se završava sa.php. Ali iskaz require moţe da poziva fajl sa bilo kojim završetkom u nazivu ĉak i ako se unutar tog fajla nalazi php cod. Uobiĉajno i preporuĉljivo pravilo, ali ne i obavezno, jeste da nastavak imena fajlova koji sluţe iskljuĉivo za umetanje u druge fajlove (na primer izmedju ostalog i umetanje pomoću iskaza require) bude.inc (inc je skraćenica od include umetanje). E sad ako postavimo HTML, php ili bilo koji drugi cod u fajlu koji se završava sa.inc i ako pozovemo taj fajl pomoću internet pregledaĉa isĉitaće ne ono što sadrţi taj fajl kao da je obiĉan tekstualni fajl. Da bi smo spreĉili radi bezbednosti sajta prikazivanje koda moramo zabraniti korisnicima preko interneta ĉitanje tog.inc fajla a dozvoliti samo skriptama sa servera da ga ĉitaju. To se odradjuje tako štochmod.inc fajla se postavi na 600. Ako koristite Total Commander za pristup hostu onda CHMOD bilo kog fajla ili foldera na hostu moţete podesiti ako partite sledeću liniju: Jedan desni klik na fajl ili folder kome ţelite podesiti CHMOD, zatim u gornjem levom uglu kliknite na Files, pa kliknite na Change attributes, i u prozoru koji vam se otvori u donjem levom uglu upišite 600. Ako posle tog podešavanja upišite u internet pregledniku adresu fajla kome ste podesili CHMOD na 600 videćete da brouzer neće ništa išĉitavati. Ako se fajl za umetanje završava sa ekstenzijom.php CHMOD 600 ne deluje na njega, već će se izvršiti kod u tom fajlu. Upotreba iskaza require i include je gotovo ista. Razlika je ta što u sluĉaju greške unutar fajla koji umeće iskaz require prekida izvršenje skripta, dok include daje samo upozorenje. Kreiranje sopstvenih funkcija U gotovo svim programskim jezicima postoje funkcije koje sami pravimo i po potrebi višestruko koristimo. Tako one postoje i u PHP-u. Najjednostavnije reĉeno, funkcija je imenovani blok koda koga sami pravimo jednom a po potrebi upotrebljavamo više puta. Znaĉi ako se deo nekog koda, ili neko izraĉunavanje stalno i ĉesto ponavlja u programu, onda se taj deo koda moţe izdvojiti u funkciju. To će vam omogućiti da funkciju koju sami napišete koristite isto kao i neku ugradjenu funkciju, tako što je pozivate neograniĉen broj puta dodeljivanjem potrebnih parametara. Funkcije sa kojima smo se do sada susretali su sistemske ugradjene funkcije. Medjutim u PHP-u kao što sm rekli korisnik moţe praviti i sopstvene funkcije. [222]

223 Izradu sopstvene finkcije zapoĉinjemo rezervisanom reĉju function. Zatim sledi po našem izboru ime te funkcije. Zatim slede u zagradi parametri odvojeni zarezom, pa u velikim zagradama "{ " telo ili kod funkcije koji će biti izvršen svaki put kad se funkcija pozove. To izgleda ovako: function formula($parametar1, $parametar2,..., $parametarn, "stringn", 10,.){ //telo funkcije U telu funkcije inaĉe moţete koristite sve vezano za PHP i HTML što smo do sad nauĉili i šta će mo nauĉiti. Znaĉi tu moţete pozivati kako sistemske ugradjene funkcije, tako i vaše funkcije, deklarisati nove promenjljive, iskaze include ili require itd. Znaĉi apsolutno sve. U skriptama se ova naša funkcija iz gornjeg primera poziva više puta kad je potrebno na sledeći naĉin: formula($parametar1, $parametar2,..., $parametarn,"stringn", 10,.); Ugradjene sistemske funkcije su dostupne u svim skriptama, dok su one koje sami pišete dostupne samo skriptama u kojima su deklarisane. A deklariše se tako što se funkcija napravi u skripti (fajlu) koja je poziva ili ako je pozivamo u više skripti (fajlova) obiĉno pravimo jedan fajl, na primerfunkcije.inc u kome se smeštaju sve funkcije koje ste napravili pa se u svim skriptama u kojima su te funkcije potrebne one umeću iskazom require ili include, na primer include (funkcije.inc). Ime funkcije u PHP zanemaruje razliku izmedju malih i velikih slova, tako da je potpuno isto formula, Formula ili FORMULA. Uobiĉajno je da se koriste mala slova za pisanje imena funkcija. Imena funkcija moramo davati tako da medjusobno budu razliĉita, kako sa ugradjenim funkcijama tako i medjusobno koje pravimo. Ime fnkcije moţe da bude sastavljeno od slova, cifara i donjih crta, stim da cifra ne sme biti na poĉetku imena a donja crta sme. Kao što vidimo u gornjem primeru skoro svaka funkcija ima odredjen broj parametara (mogu se praviti funkcije i bez parametra), koji mogu biti obavezni i oni koji nisu obavezni. Parametri mogu biti string, niz, promenjljiva, ili bilo koji broj. Parametare funkcija najbolje je objasniti na primeru izradjivanja funkcije za automatsko kreiranje tabela: <? pravljenje_tabele (5, 1000, 1500, 45, 60); echo "<br>"; pravljenje_tabele (10, 300, 600, 14, 28); echo "<br>"; pravljenje_tabele (12, 500, 255, 34, 23); function pravljenje_tabele ($B, $v1, $v2, $t1, $t2) { echo " <table border=\"".$b."\" width=\"200\"> <tr> <td align=\"center\" width=\"100\" height=\"25\">visina</td> <td align=\"center\" width=\"100\" height=\"25\">težina</td> </tr><tr> <td align=\"center\" width=\"100\" height=\"25\"> ".$v1."</td> <td align=\"center\" width=\"100\" height=\"25\">". $t1."</td> </tr><tr> <td align=\"center\" width=\"100\" height=\"25\">". $v2."</td> <td align=\"center\" width=\"100\" height=\"25\">". $t2."</td> </tr></table> ";?> Dobićemo sledeći rezultat: Visina Teņina [223]

224 Visina Teņina Visina Teņina Znaĉi jednom smo napravili funkciju za tebelu i kad god je pozovemo sa razliĉitim parametrima ona pravi na osnovu njih tabelu.obratite paţnju da smo tabelu napravili na sledeći naĉin: "HTML kod 1".$B."HTML kod 2".$v1."HTML kod 3".$t1."HTML kod 4".$v2."HTML kod 5".$t2 E sad da malo bolje objasnimo parametre funkcija koji nisu obavezni. Uuzmimo opet primer kreiranja tabela. Dodajmo mogućnost odredjivanja širine ivica, razmak izmedju ćelija i margine: $podatak = array ("Prvo polje", "Drugo polje", "Trece polje"); tabela ($podatak, 3, 8, 8); function tabela ($podatak, $granica, $celija, $razmak_celija) { echo "<table border= $granica cellpadding= $celija cellspacing= $razmak_celija>"; foreach ($podatak as $index => $vrednost){ echo "<tr><td> $vrednost </td></tr><br>"; echo "</table>"; Rezultat će biti sledeći: Prvo polje Drugo polje Trece polje A ako u istoj skripti umesto tabela ($podatak, 3, 8, 8) stavimo tabela ($podatak) biće: Prvo polje [224]

225 Drugo polje Trece polje Znaĉi pošto nismo pozivom funkcije definisali 2, 3, i 4 parametar onda se koriste podrazumevane vrednosti koje smo dali prilikom izrade funkcije. E sad na primer umesto function tabela ($podatak, $granica=1, $celija=4, $razmak_celija=4) ubacimofunction tabela ($podatak, $granica, $celija, $razmak_celija), a umesto tabela ($podatak, 3, 8, 8)ubacimo tabela ($podatak, 3) rezultat će biti: Prvo polje Drugo polje Trece polje Prvi parametar funkcije tabela je obavezan i zato je na prvom mestu dok ostala tri parametra nisu obavezna. Svi parametri koji su obavezni moraju stajati napred a oni koji nisu obavezni na kraju spiska parametara. Takodje parametri koji nisu obavezni mogu (ali i ne moraju) imati poĉetne podrazumevane vrednosti kao u našem sluĉaju, tako da u sluĉaju ako nisu dati pri pozivu funkcije imaju podrazumevanu vrednost. Ne morate zadati sve opcione parametre, neke moţete i izostaviti. Medjutim ne moţete izostaviti na primer prvi opcioni parametar a ubaciti one iza njega već se izostavljaju na primer zadnji, ili zadnji i predzadnji, znaĉi od pozadi. Zato na kraju stavljajte parametre sa najmanjim prioritetom a kako prioritet raste tako parametri idu napred. Oblast vaţenja promenjljivih, metod referenci i metod vrednosti Promenjljive koje mi definišemo "vidljive" su samo u onim skriptama gde ih definišemo. Ako ih definišemo u funkciju koju kreiramo vidljive su samo u toj funkciji. Medjutim promenjljive moţete praviti i u glavnom i u umetnutom fajlu i biće vidljive u oba fajla. Superglobalne tipa $_POST, $_GETi ostale tog tipa su vidljive u svim skriptama. E sad ako ţelite da promenjljiva koju mi kreiramo bude vidljiva svuda i izvan funkcije treba da to naglasimo rezervisanim iskazom global. Na primer ako napišemo u funkciji: global $promenjljiva; To znaĉi da će $promenjljiva biti vidljiva i izvan te funkcije u skriptama koje pozivaju tu funkciju. Na primer kreirajmo sleceći kod: $vrednost=10; povecanje(); echo $vrednost; function povecanje(){ $vrednost=$vrednost+1; Kao rezultat ovog koda na ekranu će se pojaviti broj 10! Zašto nije 11? Naravno razlog je zbog pravila da promenjljiva iz funkcije vaţi samo u funkciji a ne i izvan nje. [225]

226 E sad ako napišemo sledeći kod rezultat će biti 11. $vrednost=10; povecanje(); echo $vrednost; function povecanje(){ global $vrednost; $vrednost = $vrednost + 1; Prenos vrednosti iz funkcija korišćenjem iskaza global, odnosno preko naziva promenjljivih naziva semetod po vrednosti. Drugi naĉin za prenos vrednosti iz funkcija je metod prenosa po referenci. Da bi ste zadali prenos vrednosti po referenci u definiciji funkcije stavi se znak & ispred imena parametara koji se prenose. U našem primeru gornjem primeru bi to izgledalo: $vrednost=10; povecanje($vrednost); echo $vrednost; function povecanje(&$vrednost){ $vrednost=$vrednost+1; A rezultat će biti 11. Ono što je još vaţnije je da u ovoj metodi po referenci ne mora da se slaţu nazivi promenljive u skripti i u funkciji a što mora u sluĉajevima kad se koristi metoda po vrednosti. Na primer i sledeća skripta će dati isto rezultat 11: $vrednost=10; povecanje($vrednost); echo $vrednost; function povecanje(&$a){ $a=$a+1; Naravno kao što se jedan parametar vraća iz funkcije u našem primerima, takodje mogu da se vraćaju i više parametara. Postavimo znak & ispred svakog parametra koji se vraća ako koristite metodu reference a ako koristite metodu vrednosti definišete sve parametre koji se vraćaju kao globalne promenjljive iskazom global. Vraćanje iz funkcija i vraćanje vrednosti Bilo gde unutar funkcije kad se naidje na iskaz return prekida se izvršenje funkcije i izvršavaju se iskazi posle poziva funkcije. U sledećem primeru kad se pozove funkcija biće izvršen samo prvi iskaz echo: function test_return(){ echo "Ovaj iskaz bice uvek izvrsen"; return; echo "Ovaj iskaz nikada nece biti izvrsen"; Najĉešće se izvršavanje funkcije prekida samo u specijalnim situacijama, na primer u sluĉaju greške. Iskaz return se ne koristi samo zbog prekida izvršenja funkcije i vraćanja iz nje, već i za vraćanje vrednosti. Na primer pogledajmo sledeću funkciju: [226]

227 function vece ($x, $y) { if (!$x or!$y) return "greska";//izvršava se ova grana ako je jedna od promenjljivih nedefinisana else if ( $x >= $y ) return $x*50;//ukoliko je $x veće ili jednako od $y prekida izvršenje funkcije i vraća proizvod 50*$x else return $y*50;//ukoliko je $y veće od $x prekida izvršenje funkcije i ujedno vraća iz funkcije proizvod 50*$y Ovde treba uoĉiti da iskaz return ne vraća promenjljivu već samo vrednost. Objektno programiranje Objektno orijentisano programiranje (OOP) je tehnika programiranja zasnovana na objektima i njihovim medjusobnim interakcijama. Danas u gotovo svim oblastima softvera objektno orjentisano programiranje postalo je standard, dok se funkcijski orjentisan softver (onaj koji smo do sada razmatrali) smatra staromodnim. Funkcijski orjentisan softver moguće je koristiti za male aplikacije dok za veće projekte je takav pristup jako ne ekonomiĉan pa se koristi OOP. Objekat u PHP-u moţe biti bilo šta što je vezano za softver, na primer neki fajl, polje za unos teksta, ili neki objekti iz stvarnog sveta koje treba pretstaviti u softveru, na primer neki proizvodi, kupci itd. Objektno orjentisan softver se sastoji od više samostalnih objekata koji su medjusobno povezaniatributima i operacijama. Atributi su svojstva ili promenjljive koje se odnose na objekat. Operacije su metode, radnje ili funkcije koje objekat moţe da izvršava. Klase su skup objekata koji imaju velike sliĉnosti i male razlike. Na primer sa bicikle moţemo obeleţiti klasu objekata u koju spadaju razliĉite bicikle, male za decu, velike, trkaĉke, ţenske, muške, sa branicima, bez branika, plave, crvene itd. Polimorfizam je svojstvo svih objektno orijentisanih programskih jezika, što znaĉi da ista operacija moţe da se razliĉito ponaša u razliĉitim klasama. Na primer, operacija voţnje klase automobili i klase bicikli su razliĉiti jer se na jedan naĉin voze automobile a na drugi naĉin bicikle. Od neke jednostavne osnovne klase objekata mogu da se izvedu (nadograde) sloţenije, specijalizovanije klase što se naziva metod nasledjivanja. Ovo omogućava ponovnu upotrebu usavršenog koda klase. Ovo je i najveća prednost objektno orijentisanog softvera. Nasledjivanje ubrzava programiranje jer se operacije pišu jednom u nadklasi, umesto da se pišu mnogo puta u zasebnim potklasama. Klase, atributi, operacije, konstruktori Klasa (class) Za pravljenje klasa u PHP-u se koristi reĉ class. Klasa izgleda ovako: class ime { var $atribut1; var $atribut2; [227]

228 Atributi klase Ova klasa sadrţi atribute $atribut1 i $atribut2. Atributi se prave upotrebom rezervisane reĉi var u telu klase. Operacije klase Operacije klase se definišu kao funkcije u definiciji klase. Napravimo sada klasu ime sa dve operacije: class ime { function operacija1 (){ fnction operacija2 ($parametar1, $parametar2){ Konstruktori klase Većina klasa sadrţi posebnu operaciju koja se zove konstruktor. Konstruktor se poziva prilikom pravljenja objekta i obiĉno obavlja korisne poĉetne poslove poput davanja razumnih poĉetnih vrednosti atributima ili pravljenja zavisnih objekata. Konstruktor se deklariše isto kao i druge operacije, ali se zove kao klasa. Iako se konstruktor moţe ruĉno pozvati njegova glavna svrha je automatsko pozivanje prilikom pravljenja objekta. Klasa sa konstruktorom se deklariše na sledeći naĉin: class ime { function ime ($parametar) { echo " Pozvan konstruktor sa parametrom $parametar<br>"; Kao što znamo imena svih funkcija u PHP skriptama moraju biti jedinstvena ukljuĉujući i kostruktor. Instanciranje, upotreba atributa klase i pozivanje operacija klase Instanciranje klase Programiranje objekta ĉlana klase naziva se pravljenje instance ili instanciranje klase. Objekat se pravi upotrebom rezervisane reĉi new. Potrebno je navesti klasu i zadati parametre konstruktora. Sledeći kod deklariše klasu ime sa konstruktorom i zatim pravi tri objekta tog tipa: class ime { function ime ($parametar){ echo "Pozvan konstruktor sa parametrom $parametar<br>"; $a = new ime ("prvi"); $a = new ime ("drugi"); $a = new ime (); Konstruktor se poziva svaki put kad se pravi objekat, pa je rezultat sledeći: [228]

229 Pozvan konstruktor sa parametrom prvi Pozvan konstruktor sa parametrom drugi Pozvan konstruktor sa parametrom Upotreba atributa klase Upotreba atributa klase unutar klase, posebna promenjljiva $this odnosi se na tekući objekat. Atributu $atribut tekućeg objekta moţete da pristupite po imenu $this->atribut unutar operacije klase. Evo primera: class ime { var $atribut; function operacija($parametar){ $this -> atribut=$parametar; echo $this -> atribut; U PHP-u se svi atributi i operacije vide izvan klasa (znaĉi svi su javni). Prethodni odlomak se moţe napisati i drugaĉije pristupanjem podacima i izvan klase, upotrebom nešto drugaĉije klase: class ime { var $atribut; $a = new ime(); $a -> atribut="vrednost"; echo $a -> atribut; Medjutim ovakav direktan pristup atributima izvan klase kao u ova dva primera nije preporuĉljiv. Jedna od prednosti objektno orjentisanog razvoja je ta što podstiĉe kapsuliranje. Iako se u PHP-u ne mogu sakriti podaci, uz malo truda moţete postići iste rezultate. Ako umesto direktnog pristupa atributima neke klase napišete pristupne funkcije moći ćete da upravljate pristupom u jednom bloku koda. Pristupne funkcije mogu izgledati ovako: class ime { var $atribut; function citaj_atribut(){ return $this -> atribut; function zadaj_atribut($nova_vrednost){ $this -> atribut=$nova_vrednost; Funkcija "citaj_atribut" samo vraća vrednost atributa $atribut, dok funkcija zadaj_atribut dodeljuje tom atributu novu vrednost. Kao što vidimo samo jedan blok koda pristupa konkretnom atributu. Kada ovako imate samo jednu taĉku pristupa moţete na primer kasnije, ako se ukaţe potreba, da vrednost $atribut podesite na primer da bude iz opsega 0 i 100 tako što će te dodati nekoliko redova na samo jednom mestu u funkciji zadaj_atribut. Da nismo upotrebili pristupnu funkciju morali bi smo da pretraţujemo svaki red u kodu i da menjamo svaki pristup atributu što je jako obiman posao podloţan greškama. Kada imate samo jednu taĉku pristupa osnovnu relaciju slobodno moţete da menjate. Pristupna funkcija omogućava da izmenite naĉin na koji se atribut ĉuva i to samo na jednom mestu. Umesto da atribut snimite kao promenjljivu moţete ga po potrebi pozvati iz baze podataka, ili da svaki put izraĉunavate njegovu tekuću vrednost, ili da ga utvrdite na osnovu vrednosti ostalih atributa ili da podatke pakujete. [229]

230 Za kakvu god promenu da se odluĉite dovoljno je da izmenite pristupnu funkciju. To neće uticati na druge delove koda dokle god pristupna funkcija prima ili vraća podatke koje ostali delovi programa oĉekuju. Pozivanje operacija klase Operacija klase poziva se otprilike isto kao i atributi klase. class ime { function operacija1(){ function operacija2($parametar1, $parametar2){ Ako na sledeći naĉin napravite objekat $a: $a = new ime(); Operacije pozivate isto kao i druge funkcije navodjenjem imena i potrebnih parametara u zagradama. Obzirom da te operacije pripadaju objektima a ne nekoj obiĉnoj funkciji, potrebno je naglasiti kom objektu pripada. Ime objekta se koristi isto kao i prilikom pristupanja atributu tog objekta: $a -> operacija1(); $a -> operacija2(12,"test"); Rezultati se ĉitaju na sledeći naĉin: $x = $a - >operacija1(); $y = $a - >operacija2(12, "test"); Nasledjivanje Rezervisana reĉ extends govori da će klasa biti potklasa druge klase. Klasa po imenu B, koja nasledjuje klasu A, pravi se na sledeći naĉin: class B extends A{ var $atribut2; function operacija2(){ Ako se klasa A definiše na sledeći naĉin: class A{ var $atribut1; function operacija1(){ Sledeći iskazi za pristup operacijama i atributima objekta tipa B su ispravni: $b = new B(); $b -> operacija1(); $b -> $atribut1 = 10; [230]

231 $b -> operacija2(); $b -> $atribut2 = 10; Obzirom da klasa B proširuje (nasledjuje) klasu A, moţete upotrebiti funkciju operacija1 i atribut $atribut1 iako su oni deklarisani u klasi A. Kao potklasa klase A klasa B nasledjuje funkcionalnost i podatke. Osim toga, klasa B je deklarisala i sopstveni atribut i operaciju. Treba imati u vidu da nasledjivanje funkcioniše samo u jednom smeru. Potklasa moţe naslediti karakteristike od svakog pretka, odnosno nadklase, dok predak ne nasledjuje karakteristike potomka. To znaĉi da poslednja dva reda sledećeg koda nisu ispravni: $a = new A (); $a -> operacija1(); $a -> $atribut1 = 10; $a -> operacija2(); $a -> $atribut2 = 10; Klasa A nema funkciju operacija2, ni atribut $atribut2. Prikazali smo potklasu koja deklariše nove atribute i operacije. Ispravno je, i po nekad korisno deklarisati iste atribute i operacije kao u nadklasi. To se moţe uraditi da bi se nekom atributu u potklasi dala drugaĉija vrednost u odnosu na isti atribut u natklasi ili da bi se operaciji u potklasi promenila funkcionalnost u odnosu na istu operaciju u natklasi. Promena funkcionalnosti u potklasi je redefinisanje. Ako je na primer klasa A sledeće: class A { var $atribut="vrednost"; function operacija(){ echo "nesto <br>"; echo "vrednost \$atribut je $this -> $atribut<br>"; I ţelite da promenite podrazumevanu vrednost atributa $atribut i promenite funkcionalnost operacije operacija tada klasu B, koja definiše taj atribut i tu operaciju, moţete da napravite na sledeći naĉin: class B extends A { var $atribut="drugacija vrednost"; function operacija(){ echo "nesto<br>"; echo "vrednost \$atribut je $this -> $atribut<br>"; Deklarisanje klase B ne utiĉe na prvobitnu definiciju klase A. Pogledajte naredna dva reda: $a = new A (); $a -> operacija(); Napravili ste objekat tipa A i pozvali njegovu funkciju operacija. To ispisuje: Nesto Vrednost $atribut je vrednost Ovo dokazuje da time što ste napravili B niste izmenili A. Ako napravite objekat tipa B, dobićete drugaĉiji rezultat: $b = new B(); $b -> operacija(); [231]

232 Daje: Nesto drugo Vrednost $atribut je drugacija vrednost Isto kao što dodavanje atributa ili operacija u potklasi ne utiĉe na natklasu, tako i redefinisanje atributa i operacija u potklasi ne utiĉe na natklasu. Potklasa će naslediti sve atribute i operacije natklase ako ih ne zamenite. Ako redefinišete atribute ili operacije one zamenjuju prvobitne definicije. Za razliku od drugih jezika PHP ne dozvoljava da redefinišete funkciju, a da i dalje pozivate verziju definisanu u natklasi. Nasledjivanje moţe da se nastavi u više slojeva. Moţete definisati klasu C, koja proširuje klasu B, pa samim tim nasledjuje od nje i njenog pretka, klasu A. Pri tome klasa C moţe da redefiniše atribute i operacije natklase i doda nove. Pojedini objektno orjentisani programski jezici podrţavaju višestruko nasledjivanje, ali ne i PHP. To znaĉi da klasa moţe da nasledjuje samo jednog pretka. Broj potomaka koji mogu da nasledjuju tog pretka nije ograniĉen. Primer objektno orjentisanog programiranja Sad kad smo objasnili pojmove i sintaksu objektno orjentisanog programiranja u PHP-u hajde da vidimo kako se sve to moţe primeniti na konkretnom primeru izrade prostijeg sajta. Programirajmo ovaj tutorijal o objektno orijentisanom programiranu kao sajt pomoću objektno orijentisanim programiranjem. Obzirom da je sajt prost klasa će biti naš sajt, pa će mo klasu i nazvati sajt a stranice sajta u stvari biće objekti: class sajt { Naš sajt će imati elemente koji će se pojavljivati na svim njegovim stranicama. Ti konstantni elementi su ista tabelarna struktura stranica, isto zaglavlje, podnoţje i dizajn stranice pa će mo sve to strpati u jednu promenjljivu pod nazivom $strana. Medjutim postojaće delovi sajta koji su promenjljivi od stranice do stranice. Te promenjljive delove strpajmo u klasu. Ovo je prost sajt pa moţemo sve promenjljive delove strpati u jednu klasu jer imamo samo jednu vrstu objekta a to su same stranice, medjutim kod sloţenijih sajtova promenjljive delove moramo razvrstati po njihovim karakteristikama i napraviti od njih razne vrste objekata. Tako razne vrste objekata ne mogu da grade samo jednu klasu već više klasa itd, itd. Znaĉi u suštini glavna poenta OOP je da se uoĉe lepo karakteristiĉni objekti i da se lepo razvrstaju po klasama kako bi se izradio efikasan sajt sa što manje objekata i klasa. Napravimo operaciju klase sa nazivom sadrzaj. function sadrzaj ($navigacija, $tekst, $naslov){ Operacija sadrzaj kao sto vidimo sadrţi parametre klase. Ti parametri klase pretstavljaju u stvari elemente našeg sajta koji se menjaju od stranice do stranice (od objekta do objekta) ali i ne moraju da sadrţe samo promenjljive delove sajta. U tu svrhu kao primer postavio sam parametar $navigacija koja je ista na svim stranicama sajta. Ostali parametri su promenjljivi od stranice do stranice a to su $tekst - sadrţaj sajta i $naslov - naslov veb stranica. Napomena da za pojam naslov se misli na HTML element stranice: <title>naslov neki</title>. [232]

233 Hajde da sad kreiramo sajt: Konstantni HTML deo sajta <? $strana=" <html><head> <meta http-equiv=\"content-language\" content=\"sr\"> <meta http-equiv=\"content-type\" content=\"text/html; charset=windows-1250\"> <title>".$naslov."</title> </head><body bgcolor=\"#000000\"> <div align=\"center\"> <table border=\"0\" width=\"800\" height=\"550\" bgcolor=\"#ece9d8\"> <tr> <td width=\"800\" height=\"100\" bgcolor=\"#ff0000\"> <p align=\"center\"><b> <b><font face=\"arial\" color=\"#ffff00\" style=\"font-size: 19pt\"> PHP OBJEKTNO ORIJENTISANO PROGRAMIRANJE</font></b> </td> </tr> <tr> <td width=\"800\" height=\"350\"> <table border=\"0\" width=\"100%\" height=\"349\"> <tr> <td width=\"150\" bgcolor=\"#cfc89c\" valign=\"top\"> <p align=\"center\"><br>".$meni." </td> <td width=\"650\" valign=\"top\"> <p align=\"center\"><br>".$tekst." </td> </tr> </table> </td> </tr> <tr> <td width=\"800\" height=\"100\" bgcolor=\"#ff0000\"> <p align=\"center\"><b> <font color=\"#ffff00\" face=\"arial\" style=\"font-size: 16pt\"> HVALA NA POSETI</font></b> </td> </tr> </table> </div></body></html> ";?> Obratite paţnju da promenljivu $strana gradimo ovako: $strana ="html deo 1". $naslov. "html deo 2". $meni. "html deo 3". $tekst. "html deo 4"; Ovaj kod smestimo u fajl na primer html.php Navigacijski deo <? $dugmici=" <a href=\"objektno.php\">home</a><br><br> <a href=\"objektno.php?u=uvod\">uvod</a><br><br> [233]

234 <a href=\"objektno.php?u=klase\">klase, atributi i operacije</a><br><br> <a href=\"objektno.php?u=konstruktori\">konstruktori</a><br><br> <a href=\"objektno.php?u=instanciranje\">instanciranje</a><br><br> <a href=\"objektno.php?u=atributi\">upotreba atributa klase</a><br><br> <a href=\"objektno.php?u=operacije\">pozivanje operacija klase</a><br><br> <a href=\"objektno.php?u=nasledjivanje\">nasledjivanje</a><br><br> ";?> Ovaj deo je navigacija sajta koji se nalazi u levom delu sajta za upravljanje sadrţajem. Postavimo taj kod u fajl meni.php KOD za sadrţaj sajta od stranice do stranice <? $Uvod = " // html sadržaj uvoda "; $Klase = " // html deo sadržaja za naslov Klase "; $Konstruktori = " // html deo sadržaja za naslov Konstruktori "; $Instanciranje = " // html deo sadržaja za naslov Instanciranje "; $Atributi = " // html deo sadržaja za naslov Atributi "; $Operacije = " // html deo sadržaja za naslov Operacije "; $Nasledjivanje = " // html deo sadržaja za naslov Nasledjivanje ";?> Ovde nisam pisao HTML deo koda jer bi to mnogo zauzelo mesta ali podrazumevajte da je tu u stvari taj html sadrzaj za svaki od tih naslova. Na kraju ovog dela ću dati link sa koga moţete skinuti upakovano sve fajlove koje ovde pravimo kako bi ste mogli da vidite kako sve to funkcioniše i izgleda kad ugradite na host (samo prekopirate folder kog raspakujete na host i linkujete). Ovaj kod za sadrţaj sajta smestićemo u fajl tekst.php PHP KOD koji koji sadrţi programski mehanizam Upravo ovaj deo je vezan sa objekto orijentisano programiranje. Smestimo kod u fajl objektno.php(ukoliko vam je host prazan onda ga morate imenovati sa index.php ali onda gde god u meni.php naidjete na "objektno" morate zameniti sa "index") <? include("meni.php"); include("tekst.php"); $t=$_get["u"]; if (!$t){ $t = "Objektno orijentisano programiranje"; $tekst = "Dobro dosli na nasim stranicama. Zelimo vam uspesno ucenje"; [234]

235 else{ $tekst = $$t; $ObjekatSajt = new sajt(); $ObjekatSajt -> sadrzaj($dugmici, $tekst, $t); class sajt{ function sadrzaj($meni, $tekst, $naslov){ include("html.php"); echo $strana;?> Znaĉi na poĉetku koda umećemo naše skripte meni.php i tekst.php include izrazom. Mogli smo sve iz meni.php i tekst.php strpati u ovaj fajl medjutim ovako je ĉitljivije, a i kasnije kada ţelimo da dodamo još neki deo menija i sadrţaja pristupamo ovako brţe. Kod je vrlo prost i nije potrebno neko posebno objašnjenje, a doĉarava koliko toliko najosnovnije mehanizme objektno orjentisanog programiranja. Znaĉi ukratko pravimo klasu sajt. Ta klasa ima operaciju sadrzaj, operacija sadrzaj ima dinamiĉke i statiĉne parametre $meni, $tekst i $naslov. Zatim pravimo objekat $ObjekatSajt = new sajt (). I na kraju pozivamo operaciju klase $ObjekatSajt -> sadrzaj($dugmici, $tekst, $t); Zakljuĉak Neko će reći da konkretno ovaj naš sajt koji smo izradili moţe sa manje pisanja izraditi i funkcijskim programiranjem. Naravno, bio bi u pravu jer je ovo jednostavan sajt. Medjutim ako se prave sajtovi sloţeniji koji imaju ragistraciju, dinamiĉke delove sajta skoro na svim stranama, raznorazne forme za unos teksta, fajlova ili slika, itd. i pri tome se sadrţaj od stranice do stranice ne razlikuje samo po tekstualnom sadrţaju već i po dizajnu i po formi, pa i po raznim još elementima, itd. itd. onda itekako skraćuje pisanje sajta OOP. Medjutim nije samo poenta u duţini pisanja, već i u tome da će se kasnije lako bilo koji programer snaći ako treba neki deo sajta izmeniti ili unaprediti zbog mogućnosti nasledjivanja kao svojstva OOP. Jednostavno OOP treba shvatiti kao lego kockice. Znaĉi lego gockice su razliĉite po svojoj strukturi, veliĉini, boji, obliku itd i to su ekvivalent objektima. Od tih pojedinaĉnih lego kockica moţemo napraviti veće objekte koje pak medjusobno moţemo kobinovati i praviti konaĉnu gradjevinu. E sad po potrebi jednostavnim nekim većim izmenama moţemo ĉak napraviti potpuno drugaĉiju gradjevinu itd itd. To sve funcijskim programiranjem nema šanse da se uradi jer ne moţemo izvlaĉiti segmente jer onda se rušu ceo sajt ukoliko ne vodimo raĉuna o nazivima promenjljivih, nazivima funkcja, šta se gde poziva, šta gde vezuje itd. itd. a pri tome imamo 1000 promenjljivih, 300 naših funkcija koje su pozvane moţda na 800 mesta u ko zna kojim sve skriptama itd itd. Kod funkcijskih programa jednostavno ako ţelimo veći deo sajta da unapredimo gotovo je sigurno da je isplativije poĉeti sa programiranjem sajta iznova. Sve fajlovi koje smo ovde izradjivali, kako bi ste mogli da vidite kako sve to funkcioniše i izgleda kad ugradite na host (samo prekopirate folder kog raspakujete na host i linkujete), moţete skinuti [235]

236 MySQL MySQL baza podataka sluţi za ĉuvanje podataka. MySQL je veoma brz sistem za upravljanje relacionim bazama podataka. MySQL omogućava veoma brzo skladištenje, ĉuvanje, pretraţivanje, uĉitavanje, sortiranje i isĉitavane podataka. To skladištenje i ĉuvanje podataka se vrši tabelarno. Svaka tabela mora da ima ime, kolone i redove, vrednosti i kljuĉeve. Tabele, kolone, redovi, vrednosti, kljuĉevi, šeme i relacije Tabele Skup struktura svih tabela u bazi naziva se šema. Medjusobni odnosi izmedju tabela su relacije. Napravimo sad tabelu pod nazivom "kupci": BrojKupca Ime Adresa Grad 1 Aca Milicic Cvetna 32 Nis 2 Asen Peric Bela mala 2 Beograd 3 Ana Mitic Niska 41 Vranje Kolone Svaka kolona u tabeli ima svoje ime i sadrţi odgovarajući tip podataka. Na primer u našoj tabeli "kupci" kolona "BrojKupaca" sadrţi celobrojne vrednosti, dok su ostale tri kolone znakovni nizovi. Kolone se nekada nazivaju polja ili atributi. [236]

237 Redovi Svaki red u našoj tabeli iz primera predstavlja po jednog kupca, to jest sadrţi podatke o jednom kupcu. Redovi se nazivaju i zapisi ili torke. Vrednosti Svaki red se sastoji od skupa pojedinaĉnih vrednosti koje odgovaraju kolonama. Kolone odredjuju tip podataka za svaku vrednost. Kljuĉevi Potrebno je da postoji naĉin identifikacije svakog reda u tabeli, to jest u našem sluĉaju svakog kupca. Imena obiĉno nisu pogodna jer moţe postojati više kupaca sa istim imenom ili prezimenom. Zato dajemo jedinstven identifikacioni BrojKupca, po istom principu po kome dobijate u banci jedinstven broj raĉuna. Identifikaciona kolona u tabeli naziva se kljuĉ ili primarni kljuĉ. Kljuĉ ne mora da se sastoji samo od jedne kolone. Baze podataka se sastoje od više tabela koje su medjusobno povezane kljuĉevima. Na primer napravimo i poveţimo tabelu pod nazivom "Porudţbine" sa prethodnom tabelom "kupci": BrojPorudzbine BrojKupca Iznos Datum Tabela "porudţbine" sadrţi porudţbine kupaca. Svaki red u toj tabeli predstavlja pojedinaĉnu porudţbinu pojedinaĉnog kupca. Zahvaljujući identifikacionom broju BrojKupca, znamo ĉija je svaka porudţbina, odnosno tako smo i povezali ove dve tabele istom kolonom. BrojKupca je primarni kljuĉ u tabeli "kupci" a u tabeli "porudţbine" je to spoljni kluĉ. Šema Skup svih tabela u bazi naziva se šema baze podataka. Šema popisuje tabele sa njihovim kolonama, tipove podataka u tim kolonama, primarni kljuĉ svake tabele i spoljne kljuĉeve. Šema se moţe pretstaviti dijagramima koje nećemo koristiti ovde, moţe i dijagramima relacija entiteta koje takodje nećemo koristiti ali šema se moţe pretstaviti i u tekstualnom obliku što će mo koristiti, na sledeći naĉin: Kupci (BrojKupaca, Ime, Adresa, Grad) Porudţbine (BrojPorudţbine, BrojKupca, Iznos, Datum) Primarni kljuĉevi su na primer boldovani a spoljni kljuĉevi na primer podvuĉeni i plavi. Relacije Spoljni kljuĉevi povezuju dve tabele i definišu relacije. U relacionoj bazi podataka postoje tri osnovne vrste relacija prema broju stavki na svakoj strani relacije i to su: jedan prema jedan, jedan prema više i više prema više. Relacija [237]

238 tipa jedan prema jedan povezuje po jednu stavku u obe tabele. U relaciji tipa jedan prema više jedan red u jednoj tabeli povezan je sa više redova u drugoj tabeli. U tim odnosima tabela sa više redova imaće spoljni kljuĉ prema tabeli sa jednim redom. U relaciji tipa više prema više, više redova u jednoj tabeli povezano je sa više redova u drugoj. Projektovanje baze podataka Nije lako odrediti kad je potrebna nova tabela i šta bi trebalo da bude njen kljuĉ. Ako postoji skup podataka istog "oblika" tabela koja odgovara tim podacima lako se pravi. Na primer imamo online knjiţaru. Kao i svaka knjiţara i ona ima kupce, knjige i porudţbine. Znaĉi pravimo tri tabele. U jednoj imamo sve podatke o kupcima, u drugoj sve podatke o porudţbinama (na primer kad je poslata porudţbina, koja knjiga i od kog kupca je ta porudţbina, koliĉina naruĉene knjige, koje su knjige naruĉene itd), i u trećoj tabeli sve o knjigama (spisak knjiga, koji su autori, cene knjiga itd). Prilikom unošenja bilo kakvih podataka preko formi na sajtu ti podaci moraju da se ĉuvaju po jednom i da budu jedninstveni. U sluĉaju da se isti podaci nalaze u više tabela onda kad se menjaju na bilo koji naĉin moţe doći do greške jer se na svim mestima moraju menjati a i tad je poso veliki. Drugim reĉima treba teţiti da se što manje jedni te isti podaci pojavljuju na više mesta u tabelama. To sa druge strane štedi na prostoru ali i onemogućava greške. Ne teba teţiti da se što više podataka stavlja u jednu tabelu. Cilj treba da bude da se podaci lepo rašĉlane po tabelama tako da se onemogući efekat "tabele u tabeli". Kljuĉevi i spoljnji kljuĉevi moraju da se biraju tako da budu jedinstveni. Nikad nemojte zaboraviti da baze i tabele ne sluţe samo za smeštanje podataka, već njihova uloga je i da se iz njih isĉitavaju podaci i da se podaci menjaju. Zato kad kreirate tabele mislite i na pitanja koja će te postavljati bazi podataka tokom korišćenja sajta. Na primer za našu online knjiţaru jedno od pitanja na koje baza podataka mora dati odgovor je i koje knjige se najbolje prodaju. Da bi baza mogla da da odgovor na to pitanje ona mora da sadrţi taj podatak. Kreirajte tabele tako da ima što manje praznih polja. Na primer ako manji broj knjiga ima svoje slike ne morate u tabeli "knjige" staviti kolonu "prikaz" jer će imati više praznih polja nego punih. Zato bolje napravite novu tabelu, na primer pod nazivom "prikaz" koja će biti povezana sa tabelom "knjige" i koja će sadrţati slike knjiga i koja neće imati praznih polja. E sad normalno ako na primer 90% knjiga ima slika ne treba praviti novu tabelu. Drugim reĉima sve mora biti tako kreirano da se što manje troši prostor na hostingu, jer i prazno polje odvlaĉi bitove jer mora biti definisano. Ulazak u bazu i kreiranje tabela Pre nego krenemo sa izradom tabela moramo "ući" u bazu podataka na serveru da bi smo mogli da je administriramo, kontrolišemo, nadgledamo itd. Kad zakupite hosting daju vam sledeće podatke vezane za bazu: hostname (u prevodu ime hosta za bazu to jest internet adresa baze), username(korisniĉko ime), password (šifru), i ime baze. Nakon toga nadjite neki besplatni MySQL program (klijent) na intenretu za ulazak y bazu, instalirate ga ili na serveru ili na kućnom raĉunaru, u zavisnosti od programa, ubacite vaše podatke i konektujete se u bazu. Na primer ja koristimheidisql program koji se instalira na kućnom raĉunaru. Imate i PHP skripte za administraciju MySQL baze podataka koje instalirate na serveru. Medjutim pre bilo koje vaše akcije vezane za ulazak u bazu pitajte administratore provajdera kod koga ste zakupili host kako su oni osmislili ulazak u bazu jer moţda oni imaju gotova rešenja. Nakon "ulaska" u bazu moţemo pristupiti kreiranju tabela. Tabele u globalu moţemo kreirati na dva naĉina. Prvi je naĉin preko samog interfejsa programa preko koga ulazimo u bazu jer neki programi to dozvoljavaju, a drugi naĉin je uz pomoć PHP skripte na serveru koje pravimo. Nakon kreiranja tabela PHP skriptu koja nam je posluţila da kreiramo tabele slobodno moţemo da izbrišemo da nam ne zauzimaju prostor na serveru. I kod prvog naĉina izrade tabela a i pomoću drugog naĉina sintakse su iste samo je razlika da kod prvog naĉina imamo interfejs tako da uglavnom ne moramo da pišemo naredbe neg jednostavno samo klikćemo na njih i biramo ih, ali naravno sve to zavisi od samog klijenta kako je osmišljen. [238]

239 Obzirom da su sintakse iste u oba sluĉaja objasnićemo je. Ovde ćemo objasniti kako se prave MySQL tabele baze podataka za web sajt na primeru online knjiţare. Neka te tabele budu po sledećoj šemi: Korisnici (KorisnikID, Ime, Adresa, Grad) Narudţbine (NarudţbinaID, KorisnikID, Koliĉina, Datum) Knjige (ISBN, Autor, Prevod, Cena) Naruĉene_Knjige (NaruĉenoID, ISBN, Koliĉina) Opis_Knjige (ISBN, Opis) Pri izradi tabela koristi se sintaksa MySQL naredbi. Naredbe se završavaju taĉka zarezom " ; ". Prilikom pisanja naredbu moţemo prelomiti u više redova uz pomoć znaka " - > " (minus i veće). U MySQL iskazima se ne pravi razlika izmedju malih i veliki slova ali se pravi razlika u nazivima baza i tabela. Kao što smo rekli mi ćemo MySQL program za izradu tabela na hostu smestiti u PHP fajlu i neka se on zove na primer knjizara.php. Prvi korak je da uspostavimo vezu PHP skripte i baze podataka. Veza se uspostavlja mnogo puta u skoro svim skriptama i zato je uobiĉajno kod za vezu smestiti u poseban fajl pod nazivom recimo veza.php i po potrebi pozivati ga include izrazom. A kod izgleda ovako: <? $host = "-- internet adresa vaše baze --"; $korisnik = "-- vase korisnicko ime za bazu --"; $lozinka = "-- vasa lozinka za bazu --"; $baza = "-- ime baze --"; if (!$db=@mysql_pconnect ("$host", "$korisnik", "$lozinka")){ echo "Spajanje na mysql server je bilo neuspešno"; exit; if(!mysql_select_db ("$baza", $db)){ echo "Greska pri odabiru baze"; exit;?> Na poĉetku skripte smo promenjljivima dodelili podatke koje ste dobili od provajdera vezanih za bazu. PHP funkcijom mysql_pconnect( ) vršimo povezivanje sa bazom ali samo dok ne dodjemo do kraja skripte. Kad se skripta završi spoj se prekine. Stavili smo da u koliko dodje do greške ne kompromitujemo naše šifre nepoznatim ljudima jer tako ne dozvoljavamo prikaz sistemskog teksta o grešci u internet pregledniku. Da bi skratili kod u istom trenutku vrednost funkcije za konekciju dodeljujemo promenjljivoj $db jer će nam biti potrebna. Takodje istovremeno proveravamo da li se veza uspostavila naredbom if. Ukoliko se nije uspostavila veza (na primer baza je trenutno iskoĉila sa interneta) umesto kompromitujućih podataka pojavi se tekst iz echo iskaza i nakon toga se završava skripta naredbom exit. U sledećem koraku odabiramo ime baze koje će mo koristiti i to vršimo PHP ugradjenom funkcijo mmysql_select_db( ). Kao drugi parametar te funkcije vidimo da mora biti rezultat funkcije mysql_connect( ) zbog ĉega smo i uveli promenjljivu $db. Takodje i ovde se odma proverava da li je odabir baze uspešno izvršen, i ako je došlo do greške ispisuje se komentar iz echoiskaza i završava se skripta exit izrazom. MySQL naredba za prevljenje tabela je naredba sledećeg oblika: CREATE TABLE ime_tabele (kolone); Rezervisano mesto ime_tabele treba zameniti konkretnim imenom tabele a rezervisano mesto kolone spiskom kolona odvojenih zarezom. Pored navodjenja imena kolona na taĉno odredjen naĉin navodi se i tip podataka što će mo u nastavku videti. PHP ugradjena funkcija koja omogućava pisanje MySQL naredbi unutar PHP skripti izgleda ovako: [239]

240 mysql_query("create TABLE ime_tabele (kolone)"); U našem konkretnom sluĉaju izmedju znakova navoda smo stavili MySQL iskaz za kreiranje tabele pošto je sad reĉ o tome, ali naravno tu moţe da stoji bilo koji MySQL iskazi što će mo kasnije i videti. Sada kada znamo sve ovo moţemo pristupiti pisanju PHP koda za knjizara.php fajl kojim kreiramo tabele u bazi podataka: <? include ("veza.php"); mysql_query(" create table Korisnici (KorisnikID int unsigned not null auto_increment primary key, Ime char (30) not null, Adresa char (40) not null, Grad char (20) not null ) "); mysql_query(" create table Narudzbine ( NarudzbinaID int unsigned not null auto_increment primary key, KorisnikID int unsigned not null, Kolicina float (6,2), Datum date not null ) "); mysql_query(" create table Knjige ( ISBN char (13) not null primary key, Autor char (30), Prevod char (60), Cena float (4,2) ) "); mysql_query(" create table Narucene_Knjige ( NarucenoID int unsigned not null, ISBN char (13) not null, Kolicina tinyint unsigned, primary key (NarucenoID, ISBN) ) ");?> Obratimo paţnju sada u nastavku na MySQL iskazima za kreiranje tabela u bazi. Kao što vidimo iza svakog imena kolone naveden je tip podataka koji će se upisivati a i u nekim kolonama navedene su i druge karakteristike. Globalno govoreći MySQL baza podataka sadrţi tri tipa podataka: numeriĉke, datumsko-vremenske i znakovne podatke. Svaki tip podataka takodje sadrţi mnoge podtipova. Uglavnom se ti podtipovi medjusobno razlikuju po koliĉini memorije koju zauzimaju. Prilikom izbora podtipa vodi se raĉuna da se izabere najmanji tip u koji svi potencijalni podaci koji će se pojavljivati mogu da se smeste. Osnovna sintaksa MySQL baze Ovde će mo dati opis najupotrebljavanije sintakse, ali naravno ima još MySQL iskaza. [240]

241 Not null NOT NULL znaĉi da ta kolona mora imati sve vrednosti u redovima. Ako to nije navedeno onda moţe da se nadje i neko prazno polje. Auto_increment AUTO_INCREMENT je karakteristika celobrojnih kolona, uglavnom za izradu kljuĉeva koji se ne unose preko formi ili skripti na sajtu. Tako na primer ako polje ostane prazno automatski se generiše broj u polju i to takav da mu vrednost bude prvi veći ceo broj od najvećeg u koloni. Tako generisan broj je jedinstven identifikator u tabeli. Svi brojevi u koloni se generišu automatski. U tabeli moţe da postoji samo jedan jedinstveni identifikator. Kolone koje su oznaĉene rezervisanom reĉju AUTO_INCREMENT moraju biti indeksirane. Primary key PRIMARY KEY govori da je kolona primarni kljuĉ tabele. Vrednosti u toj koloni moraju biti jedinstvene i MySQL će kolonu automatski indeksirati. Pri izradi tabele "Narucene knjige" imamo dve kolone koje su primarni kljuĉevi i tad to moţemo navesti na kraju tako da se u zagradi upišu sve kolone koji su primarni kljuĉevi. Unsigned UNSIGNED stoji jedino u opisu kolona u kojima će se upisivati celi brjevi i to samo pozitivni, to jest celi brojevi veći od nula i broj nula. Int INT znaĉi da će u koloni da se upisuju iskljuĉivo celi brojevi. Memorija koja se rezerviše je od 4 bajta. Opseg brojeva koji mogu da se upisuju su od do Ili od 0 do ukoliko su izabrani pozitivni brojevi, to jest ukoliko u opisu tipa podataka kolone pored INT upišemo još i UNSIGNED. Ako unesemo neki veći broj od ovih maksimalnih upisaće se maksimalna vrednost a ne naš broj! Postoje još i sledeće rezervisane reĉi za cele rojeve: TINYINT - celi brojevi u rasponu od -127 do 128 i za pozitivne brojeve od 0 do 255. Memorija koja se rezerviše je 1 bajt. SMALLINT - celi brojevi u rasponu od do , i za pozitivne brojeve od 0 do Memorija 2 bajta. MEDIUMINT - celi brojevi u rasponu od do , i za pozitivne brojeve od 0 do Memorija 3 bajta BIGINT - celi brojevi u rasponu od do , ili za pozitivne brojeve od 0 do Memorija je 8 bajta. Char CHAR (broj znakova) - znaĉi da će se u koloni upisivati znakovi, ili ti string. Maksimalni broja znakova kod ovog tipa odredjuje broj u zagradi. Ako se unese u polje string sa manje znakova onda će MySQL do tog broja dodati razmake. Ovde MySQL pre unosa ne izbacuje nepotrebne praznine ali prilikom isĉitavanja briše. Ako ne ţelimo bespotrebno tako da trošimo memoriju onda alternativa je VARCHAR koji zauzima samo neophodnu memoriju plus jedan bajt, a takodje MySQL briše pre unosa u tabelu nepotrebne praznine.. Ovde je reĉ o kompromisu jer varchar zauzima manje prostora ali je char brţi. I u jednom i u drugom sluĉaju raspon je od 1 do 255 znakova. Takodje u nastavku oba ova opisa moţe stajati opis BINARY i u tom sluĉaju neće se razlikovati mala i velika slova [241]

242 Float() FLOAT(M,D) - kad su brojevi decimalni onda moţemo odrediti koliko cifara mogu imati u celobrojnom delu zapisa a koliko u decimalnom delu. Tako na primer FLOAT(4,2) znaĉi da decimalni broj u celobrojnom delu moţe imati maksimalno 4 cifre a u decimalnom 2 cifre. Raspon se kreće: od do ili kraće napisano od E-38 do E+38. Memorija koja se rezerviše je od 4 bajta. Postoji što se tiĉe decimalnog zapisa još jedan zanimljiv tip podataka a to je DOUBLE(M,D). Raspon ovog tipa je sledeći: E+308 do E-308. A memorija 8 bajta. Date DATE - Kada ubacujemo datum i vreme u MySQL moramo voditi raĉuna o formatu datuma kog izaberemo za kolonu. Raspon i format prikaza kad izaberemo DATE je od do (obavezno mora da stoji znak minus izmedju). A ako hoćemo i vreme onda pišemo DATETIME. Tad je format prikaza i raspon od :00:00 do :59:59. Ako nam je bitno samo vreme onda pišemo TIME a format prikaza i raspon će biti -838:59:59 do 838:59:59. Postoji i samo datum za godine YEAR(2 ili 4). Ako stavimo samo broj 2 onda je raspon i format 70 do 69 (misli se 1970 do 2069 samo pišemo zadnje dve cifre), a ako stavimo samo broj 4 u zagradi onda je format i raspon 1901 do Text TEXT - ovaj tip podataka definiše duţe tekstove poput novinskih ĉlanaka. Postoje nekoliko verzija ovog tipa koji se razlikuju po duţini ili broju unetih znakova. TINYTEXT - tekst koji sadrţi 255 znakova TEXT znakova (64 KB) MEDIUMTEXT znakova (16 MB) LONGTEXT znakova (4 GB) Blob BLOB smešta binarne podatke koji ĉuvaju bilo šta na primer slike, zvuk, film i sliĉno. Ako umesto TEXT u gornjoj listi ubacimo BLOB a sve ostalo identiĉno dobijamo ostale verzije BLOB podataka u vezi duţine znakova. Na primer TINYBLOB, MEDIUMBLOB, LONGBLOB i BLOB. Medjutim ako ţelimo da definišemo taĉno odredjene znakove koje ţelimo da ubacujemo u kolone onda koristimo tipove ENUM i SET. Piše se: ENUM("vrednost1", "vrednost2",...,vrednostn) Isto vaţi i za SET: SET("vrednost1", "vrednost2",...,vrednostn) Razlika izmedju ENUM i SET je ta da ENUM tip polja moţe da sadrţi navedenih znakova od vrednost1 do vrednostn zajednu i vrednost NULL koja je podrazumevana, a SET maksimalno 64 znakova. [242]

243 Pošto smo kreirali tabele moţemo sada videti kako se one pune podacima sa sajta koji mogu da se unose od strane posetilaca preko formi ili da se u tabele smeštaju podaci dobijeni nekim izraĉunavanjima. Ovde će mo videti kako se putem PHP skripti unose, brišu, dodaju, aţuriraju podaci i postavljaju pitanja MySQL bazi podataka. I ovde će mo obilato koristiti PHP funkcijumysql_query(). Unošenje podataka u bazu MySQL iskaz za unošenje podataka u bazu je INSERT koji ima sledeći oblik: INSERT [INTO] ime_tabele [(kolina1, kolona2,..., kolonan)] VALUES (vrednost1, vrednost2,..., vrednostn); Medjutim ne moramo uvek popunjavati sve podatke u redu tabele. Moţemo samo po neke ili ĉak na primer samo jedanu kolonu u redu dovoljno je samo taĉno navesti ime kolone. Evo kako se to radi: INSERT [INTO] ime_tabele [(kolina10, kolona22)] VALUES (vrednost10, vrednost22); U PHP skriptama da bi se izvršio INSERT MySQL iskaz moramo prvo povezati MySQL bazu i PHP skriptu iskazom include("veza.php"), pa zatim da ga stavimo u funkciju mysql_query() na sledeći naĉin: mysql_query('insert [INTO] ime_tabele [(kolina10, kolona22)] VALUES (vrednost10, vrednost22)') Hajde sad da vidimo konkretno kako se ubacuju podaci u bazu! <? include "veza.php"; $sql = "insert into Korisnici (KorisnikID, Ime, Adresa, Grad) values (NULL, 'Petar Milic', 'Ulica cveca br.25', 'Negotin')"; if (mysql_query($sql)){ echo "Uspesno je pohranjeno"; else{ echo "Nastala je greska pri unosu<br>";?> Ovo je sve ok i bezbedno jer u bazu upisujemo stringove koji nemaju problematiĉne znakove. Medjutim nesmemo nikad zaboraviti da pre unošenja podataka iz forme koje koriste posetioci najpre filtriramo funkcijom addslashes(), a kad isĉitavamo vratimo izvorni tekst funkcijom stripslashes()!!! U nastavku neću stalno to naglašavati jer su ovo samo školski primeri ali u realnoj upotrebi nikad to nemojte izostavljati!!! U tabeli moţete uneti i više redova istovremeno (što nije baš ĉesta pojava). Svaki red treba da se nadje u zasebnim zagradama, odvojenim zarezom. Evo primera: insert into Korisnici values (NULL, "Petar Milić", "Ulica cveća br.25", "Negotin"), (NULL, "Zoran Trbojević", "Nišavska br.39", "Niš"), (NULL, "Milena Cvijić", "Zlatiborska br.38", "Bor") Kao što vidimo ako unosimo podatke za sve kolone ne moramo navoditi imena kolona. Primetićete da smo koloni KorisniciID zadavali vrednost NULL ili smo je zanemarivali. Sećate se da smo tu kolonu oznaĉili kao primarni kljuĉ i što je vaţnije oznaĉili rezervisanom reĉju AUTO_INCREMENT. AUTO_INCREMENT znaĉi da će MySQL, ako unesete vrednost NULL ili bez vrednosti u tom polju, automatski generisati ceo pozitivan broj koji je za jedan veći od najvećeg broja u toj koloni. Takodje vidimo da se vrednosti unose pomoću navodnika koji mogu biti ili jednostruki ili dvostruki kao što je u našim primerima. [243]

244 Uzimanje podataka iz baze MySQL iskaz za ĉitanje podataka iz baze je SELECT. Postoje mnogo opcija i naĉina upotrebe iskaza SELECT i to: SELECT podaci FROM tabele [WHERE uslov] [GROUP BY grupisanje] [HAVING uslov_grupe] [ORDER BY redosled] [LIMIT kriterijum_ogranicenja] Upiti mogu raĉunati i vrednosti izraza, što će mo objasniti malo kasnije. Sledeći upit isĉitava sadrţaj kolone "Ime" i "Grad" iz svih redova tabele "korisnici": select Ime, Grad from Korisnici Ako ţelimo da proĉitamo sve kolone iz svih redova neke tabele onda ne moramo (a moţemo) da pišemo sve kolone već samo stavimo operator zvezdicu " * " na sledeći naĉin: select * from Korisnici A sad da vidimo kako se preuzimaju i obradjuju podaci iz baze u PHP skripte: <? include "veza.php"; $sql="select * FROM Korisnici"; if (!$q=mysql_query($sql)){ echo "Nastala je greska pri izvodjenju upita"; exit; if (mysql_num_rows($q)==0){ echo "Tabela je prazna"; else{ $a=0; while ($redak=mysql_fetch_assoc($q)){ $a=$a+1; $korisnici[$a]["korisnikid"]=$redak["korisnikid"]; $korisnici[$a]["ime"]=$redak["ime"]; $korisnici[$a]["adresa"]=$redak["adresa"]; $korisnici[$a]["grad"]=$redak["grad"]; for ($i=1; $i<=$a; $i++){ echo $korisnici[$i]["korisnikid"].$korisnici[$i]["ime"].$korisnici[$i]["adresa"].>$korisnici[ $i]["grad"]."<br>";?> Objasnimo sad ovaj kod: include "veza.php"; Prvi kod same skripte je spajanje na MySql server i odabir baze, pa opet koristimo fajl veza.php. [244]

245 $sql = "SELECT * FROM Korisnici"; Nije obavezno MySQL iskaze, to jest upite upisivati kao string u varijablu pa onda tu varijablu proslijeċivati mysql_query() funckiji. Mogli smo sam upit napisati direktno u mysql_query() funckiju. Npr. ovako: mysql_query ("SELECT * FROM Korisnici"); Po meni je bolje kad se pohrani u varijablu jer kasnije moţemo opet koristiti taj upit./p> if (!$q = mysql_query($sql)){ echo "Nastala je greska pri izvodjenju upita"; exit; Kao što vidite, ovog puta je kod koji izvršava SQL upit nešto drugaĉiji nego kod primera kada smo upisivali podatke u tabeli. Ovde smo rezultat mysql_query() funkcije pohranili u varijablu $q. Ovo je obavezno jedino kod izvršavanja SELECT upita jer da bi pribavili podatke koje taj upit vraća moramo saĉuvati "pokazivaĉ" na njegove rezultate. Takodje ovde u istom trenutku i proveravamo da li se SQL upit pravilno izvršio. Ako nije izvršava se echo izraz i izlazi se iz skripte exit naredbom. Ali mysql_query() funckija vraća false samo u sluĉaju da je nastala neka greška pri obavljanju samog upita. Znaĉi neka sintaksna greška ili nešto tehniĉke prirode, na primer kada ispadne server sa interneta što je obiĉno izvan sfere PHP-a. Ali mysql_query() neće vratiti false ukoliko upit nije vratio ni jedan rezultat u sluĉaju da je tablica iz koje pribavljamo podatke prazna. Zato moramo proveriti da li ima rezultata za prikaz i ukoliko nema obavestiti korisnika i po potrebi ponuditi mu opcije šta moţe uĉiniti dalje. Tu proveru obavljamo sledecim kodom: if (mysql_num_rows ($q) == 0){ echo "Tabela je prazna"; else{... Funkcija koja proverava da li postoje podaci u tabeli je mysql_num_rows(), i ona vraća broj jednak broju redova u tabeli. Ako nema podataka u tabeli onda nema ni jednog reda što znaĉi da je u tom sluĉaju vraćen broj nula. Ova funkcija uvek mora da sledi iza provere ispravnog izvršenja SELECT upita, to jest izvršenja mysql_query() funkcije jer u suprotno moţe vratiti da nema podataka u tabeli a da u stvari ima podataka. I konaĉno nakon svih ovih provera i upita došli smo do dela skripte koji prebacuje sve podatke iz tabele u niz sa dva indeksa $korisnici :... else{ $a = 0; while ($redak = mysql_fetch_assoc ($q)) { $a = $a+1; $korisnici[$a]["korisnikid"] = $redak["korisnikid"]; $korisnici[$a]["ime"] = $redak["ime"]; $korisnici[$a]["adresa"] = $redak["adresa"]; $korisnici[$a]["grad"] = $redak["grad"]; Rezultati iz baze podataka se prihvataju samo jedan po jedan i to samo unapred. Postoje više PHP funkcija za prihvat podataka iz baze. U našem primeru se koristi mysql_fetch_assoc(), a na raspolaganju su nam još mysql_fetch_row(), mysql_fetch_array(), i mysql_fetch_object(). Sve ove funckije pribavljaju celi red rezultata, samo se razlikuju u obliku u kojem ga vraćaju. [245]

246 mysql_fetch_array() funkcija vraća dvodimenzionalni niz ĉiji elementi sadrţe jedan red u tabeli baze sa svim kolonama koje se zahtevaju u MySQL SELECT iskazu. Svaki element niza je indeksiran brojem i imenom. A ime je isto kao i naziv kolone baze iz koje se podatak uzima. Da ovo ilustrujem na našem primeru. Mi pribavljamo polja : KorisnikID, Ime, Adresa, i Grad. Na primer na indeksu 0 i indeksu KorisnikID našeg vraćenog niza nalaziće se vrednost koja je u tabeli pohranjena u koloni KorisnikID unutar prvog reda. Funkcija mysql_fetch_array() je najkompletnija ali je i najsporija pa zato u našem primeru koristimo jednu od najbrţih mysql_fetch_assoc(). Doduše brzine se razlikuju u milisekundama ali ako je sajt jako posećen onda to prerasta u sekunde. mysql_fetch_row() funkcija takoċe vraća niz ali jednodimenzionalni i u njemu postoje samo numeriĉki indeksi. Ova funkcija je najbrţa ali je i najmanje pregledna. mysql_fetch_assoc() funkcija isto vraća jednodimenzioni niz, ali u njemu se nalaze tekstualno indeksirana polja što je ĉini preglednijom od funkcije mysql_fetch_row(). Brzina skripti koje koriste bazu podataka ponajviše zavisi od broja upita koje skripta obavlja kao i o kompleksnosti samih upita. Što je upit kompleksniji to je i sporiji. U najkompleksnije i najsporije upite recimo spadaju oni koji pribavljaju podatke iz dve ili više tabela sa kojima ćemo se kasnije upoznati, kao i upiti sa kompleksnim uslovima pribavljanja i pravilima sortiranja. Ĉetvrta navedena funckija, mysql_fethc_object(). Umesto niza ova funkcija vraća objekat stvoren od polja reda. Sve gore navedene funkcije imaju zajedniĉko to da će vratiti false na kraju našeg skupa rezultata ako koristimo petlje koje ne proveravaju dokle da idu sa iteracijama. Zato ovo ĉini while petlju idealnim alataom za pribavljanje rezultata iz tabela baze jer će se obaviti onoliko puta koliko ima rezultata u tabeli. Još jedna zajedniĉka stvar svim tim funckijama je da kao svoj argument dobijaju result identifier koji vraća mysql_query() funckija zbog ĉega taj rezultat moramo smestiti u promenjljivu $q. Obzirom da funkcija mysql_fetch_assoc() preuzima vrednosti samo iz jednog reda i u sledećoj iteraciji petlje briše prethodne vrednosti i upisuje na njihova mesta vrednosti sledećeg reda iz tablice moramo nekako saĉuvati sve podatke. Rešenje je da te podatke preuzima nov niz sa dve dimenzije koga smo u našem primeru imenovali sa $korisnici. Nakon toga sa podacima moţemo raditi šta nam je volja a u našem primeru mi smo ih samo ispisali. U nastavku objašnjavanja varijanti SELECT iskaza nećemo više navoditi PHP primere kao ovde jer bi kodovi tih skripti bili gotovo identiĉni sa kodom iz ovog primera, jedino bi se razlikovao SQL upit. Zato će mo u nastavku samo objašnjavati varijante SELECT iskaza. SELECT sa WHERE uslovom Kada nam nisu potrebni podaci iz svih redova već samo iz nekih onda koristimo WHERE uslov kao dodatak SELECT iskazu. Na primer evo kako bi izgledao upit da trazimo podatke iz tabele Korisnici samo iz jednog reda a iz svih kolina: select * from Korisnici where KorisnikID = 3 Normalno, ako nam nisu potrebni podaci iz svih kolona mi navedemo umesto zvezdice kolone koje nas zanimaju. Obratite paţnju da se SQL razlikuje od PHP-a! Zato je u SQL znak jednakosti baš to znak jednakosti, pa se piše " = ". Pored znaka jednakosti u WHERE uslovu mogu da se nadju svi operatori poredjenja i regularnih izraza. One koji se najĉešće koriste daćemo tabelarno. Napomenimo da nije ovo kompletan spisak ali sadrţi najupotrebljavanije operatore. Operator Naziv ako postoji Primer Opis = Jednako KorisnikID = 3 Proverava da li su dve vrednosti jednake > veće KorisnikID > 3 Proverava da li je prva vrednost veća od [246]

247 druge < manje KorisnikID < 3 Proverava da li je prva vrednost manja od druge >= veće ili jednako KorisnikID >= 3 Proverava da li je prva vrednost veća ili jednaka od druge <= manje ili jednako KorisnikID <= 3 Proverava da li je prva vrednost manja ili jednaka od druge!= ili <> nije jednako KorisnikID <> 3 Proverava da li su prva i druga vrednost razliĉite is not null KorisnikID is not null Proverava se da li postoji vrednost is null KorisnikID is null Proverava se da li je vrednost nedefinisana between KorisnikID between 0 and 3 Proverava da li je vrednost u zadatom opsegu in Grad in ("Nis", "Bor") Proverava da li se vrednost nalazi u skupu not in Grad not in ("Nis", "Bor") Proverava da li se vrednost ne nalazi u skupu like podudarni oblici Ime like ("Marko %") Proverava da li je vrednost podudarna uzorku not like podudarni oblici Ime not like ("Marko %") Proverava da li vrednost nije podudarna uzorku regexp regularni izrazi Ime regexp Proverava da li je vrednost podudarna sa regularnim izrazom Moţete da proverite više kriterijuma i da ih poveţete logiĉkim operaterima AND i / ili OR, na primer: select * from Korisnici where KorisnikID=3 AND KorisnikID=4 AND KorisnikID=5 Ovim SELECT upitom smo definisali da ţelimo isĉitati sve podatke iz redova 3, 4 i 5 tabele Korisnici. Varijante i mogućnosti SELECT iskaza u kombinaciji sa WHERE uslovima su jako velike zbog operatora poredjenja i regularnih izraza. Ĉesto puta su nam potrebni podaci iz više tabela da bi smo odgovorili na neka pitanja. Tako ako ţelimo da znamo koje knjige i koliĉine je odredjeni kupac naruĉio u odredjenom periodu vremena moramo potraţiti odredjene podatke iz tabela Korisnici i Narudzbine za tog konkretnog kupca. Dakle trebamo spojiti dve tabele u jednu nazovi fiktivnu tabelu ali tako da podaci odredjenog kupca iz jedne tabele odgovaraju podacima tog kupca u drugoj tabeli. Zato sluţe primarni i sekundarni kljuĉevi. Zapravo kao uslov za spajanje dve tabele biće podudaranje vrednosti primarnog i sekundarnog kljuĉa. Vratimo se sada našem primeru. Te podatke moţemo pribaviti pojedinaĉno korišćenjem dva SQL upita ali je ekonomiĉnije, preglednije i duplo brţe ako koristimo jedan SQL upit. Kolone koje nas interesuju iz tabele Korisnici je KorisnikID a iz tabele Narudzbine su Koliĉina i Datum. Upit bi mogo da izgleda ovako: SELECT Korisnici.KorisnikID, Narudzbine.Količina, Narudzbine.Datum FROM Korisnici, Narudzbine WHERE Korisnici.Ime = 'Pera Mitic' AND Korisnici.KorisnikID = Narudzbine.KorisnikID Pošto u SELECT upitu koristimo dve tabele poţeljno je gde god stoji ime neke kolone postaviti ispred imena te kolone spojeno taĉkom i ime tabele u koju se nalazi ta kolona zbog preglednosti, a obavezno je kod kolona koje se nalaze u obe tabele. Sa uslovom Korisnici.Ime = 'Pera Mitic' mi smo odredili koji nam je redak u tabelama potreban. Obzirom da kolona Ime postoji samo u tabeli Korisnici moglismo napisati samo Ime = 'Pera Mitic' ali preglednije je kad stoji informacija i iz koje je tabele. Moglismo staviti i na primer Korisnici.KorisnikID = 3, ali sve zavisi koji podatak posedujemo. Uslovom Korisnici.KorisnikID = Narudzbine.KorisnikID upravo obezbedjujemo da se podaci za taĉno odredjenog kupca iz jedne tabele podudare sa podacima za tog istog kupca i u drugoj tabeli da ne bi došlo do toga da spajamo redak kupca na primer "Milan" iz kolone Ime u tabeli Korisnici sa podacima redtka korisnika "Goran" vezano za [247]

248 naruĉene knjige. Pošto je kolina KorisnikID primaran kljuĉ u tabeli Korisnici i sekundaran kljuĉ u tabeli Narudzbine zato je ovo uslov spajanja ove dve tabele! Spajanje više od dve tabele takodje nije mnogo sloţenije treba samo pratiti primarne i sekundarne kljuĉeve od tabele do tabele. Primera radi ako ţelimo da znamo koji kupci su naruĉivali knjige o programskom jeziku "java" (na primer zato što je izašlo novo izdanje iz te oblasti pa ţelimo da ih obavestimo) treba da analiziramo odnose izmedju više tabela. Znaĉi potrebno je naći iz tabele Kupci one sa bar jednom porudţbinom knjige iz tabele Narucene_Knjige iz oblasti "java". Da bi ste od tabele Korisnici stigli do tabele Narudzbine upotrebite kljuĉ KorisniciID. Da bi ste od tabele Narudzbine stigli do tabele Naruĉene_Knjige upotrebićete kljuĉ NarudzbineID. Da bi ste od Naruĉene knjige stigli do konkretne knjige u tabeli Knjige upotrebite kljuĉ ISBN. Pošto uspostavite sve te veze, proverite da li se u naslovima nalazi reĉ java i saĉuvajte imena u kojima se nalazi. Znaĉi upit ima sledeći oblik: SELECT Korisnici.Ime FROM Korisnici, Narudzbine, Narucene_Knjige, Knjige WHERE Korisnici.KorisnikID = Narudzbine.KorisnikID AND Narudzbine.NarudzbinaID = Narucene_Knjige.NarudzbinaID AND Narucene_Knjige.ISBN = Knjige.ISBN AND Knjige.Naslov LIKE ' %Java% ' Povezali smo podatke iz ĉetri tabele pomoću tri kljuĉa uslova spajanja. Najĉešće je za spajanje dve tabele potreban jedan uslov i zato je ukupan minimalni broj uslova za jedan manji od ukupnog broja tabela. To pravilo moţe biti korisno pri nalaţenju grešaka u upitima koji ne funkcionišu pravilno. Evo još jednog primera, trebamo naći kupce koji nikad nisu ništa naruĉili. Evo upita: SELECT Korisnici.Ime FROM Korisnici, Narudzbine WHERE Korisnici.KorisnikID = Narudzbine.KorisnikID AND Kolicina IS null Ĉesto je potrebno, a po nekad i neizbeţno, tabele nazivati drugim imenima. Ta druga imena sualijasi. Alijasi su neophodni kad trebamo spojiti tabelu sa samom sobom. Na primer ţelimo da nadjem parove korisnika koji ţive u istim gradovima (na primer ţelimo da napravimo klubove ĉitalaca iz istih gradova). Znamo da se kolone Ime i Grad nalaze u istoj tabeli pod nazivom Korisnici. Upit bi izgledao na sledeći naĉin: SELECT c1.ime, c2.ime, c1.grad FROM Korisnici AS c1, Korisnici AS c2 WHERE c1.grad = c2.grad AND c1.ime!= c2.ime Ovde zapravo stvaramo dve fiktivne tabele c1 i c2 od jedne "Korisnici" iskazom AS. Uslov za spajanje je da Gradovi budu isti a drugi uslov c1.ime!= c2.ime obezbedjuje da ne sparujemo kupca sa samim sobom. SELECT sa ORDER BY redosled varijantom Da bi ste redove dobijene upitom prikazali sortirane po abecednom ili brojĉanom redosledu upotrebite iskaz ORDER BY. Naravno ORDER BY moţemo kombinovati i sa WHERE uslovom. Evo na primer upita koji isĉitava sva imena i njihove adrese po abecednom redosledu imena od A do Z a u sluĉaju dva ista imena i prezimena sortira po abecednom redosledu od A do Z u zavisnosti od gradova: [248]

249 SELECT Ime, Adresa FROM Korisnici ORDER BY Ime, Grad Ako nije drugaĉije naglašeno podrazumevano se sortira od A do Z ili od najmanjeg ka najvećim brojem, ali naravno moţemo to promeniti ako stavimo iskaz DESC. Evo kako to izgleda ako imena iz prethodnog upita ţelimo poredjati od Z ka A: SELECT Ime, Adresa FROM Korisnici ORDER BY Ime, Grad DESC SELECT sa GROUP BY grupisanjem varjantom Ĉesto je potrebno znati na primer koja je proseĉna cena porudzbine. Za takav tip upita u MySQL postoje nekoliko korisnih grupnih funkcija. Te funkcije moţete primeniti na ĉitavu tabelu ili samo na grupe podataka u tabeli. Evo tabelarno tih funkcija: Naziv AVG (kolona) COUNT (stavke) MIN (kolona) MAX (kolona) STD (kolona) STDDEV (kolona) SUM (kolona) Opis Proseĉna vrednost u navedenoj koloni Preciziranjem kolonu daje broj vrednosti u njoj. Ako ispred imena kolone stoji DISTINCT dobija se broj jedinstvenih vrednosti u njoj Minimalna vrednost koja figurińe u koloni Maksimalna vrednost koja figurińe u koloni Standardna devijacija vrednosti u navedenoj koloni Standardna devijacija vrednosti u navedenoj koloni Zbir svih vrednosti u navedenoj koloni Na primer ako ţelimo da znamo koliko ljudi proseĉno naruĉuju knjige onda trebamo znati koja je proseĉna vrednost u koloni "Kolicina" tabele "Narudzbine": SELECT AVG (Količina) FROM Narudzbine Ako ţelimo saznati koji kupac je naruĉio najviše knjiga onda pišemo: SELECT KorisnikID, MAX(Kolicina) FROM Narudzbine GROUP BY KorisnikID Uporedjujući ova dva upita vidimo da ako ne stoji ORDER BY upit daje samo odgovarajući broj iz kolone a ako postavimo ORDER BY onda nam daje kupca na primer. Sve kolone navedene u GROUP BY moraju se pojaviti i u SELECT a obrnuto ne mora kao što i sami vidimo iz gornjeg primera. SELECT sa LIMIT kriterijum ograniĉenje varijantom LIMIT definiše koji redovi treba da se preuzmu iz tabele. Kriterijum ograniĉenja ima dva parametra i to od kojeg reda se poĉinje i drugi koliko reda od tog broja će biti vraćen. [249]

250 SELECT Ime FROM Korisnici LIMIT 2, 3 Ovaj upit se moţe ĉitati kao "vrati tri reda poĉev od reda broj dva". Obratite paţnju da redovi poĉinju od nule, što znaĉi da je nula redni broj prvog reda u koloni. Aţuriranje tabela, izmena strukture tabela, brisanje redova ili cele tabele Ĉesto puta tokom vremena mnoge podatke u bazi moramo menjati. Na primer vremenom se manjaju cene knjiga, dolazi do popusta, itd. Za tu svrhu sluţi MySQL iskaz UPDATE koji ima sledeći opšti oblik: UPDATE ime_tabele SET kolona1 = izraz1, kolona2 = izraz2,... [WHERE uslov] [LIMIT broj] Izrazom WHERE kao što znamo moţemo da se ograniĉimo samo na odredjene redove a izrazom LIMIT da ograniĉimo ukupan broj aţuriranih redova. Na primer da bi ste cenu svih knjiga povećali za 10% upotrebite sledeći upit: UPDATE KnjigeSET Cene = Cene * 1.1 Ako ţelimo da izmenimo samo jednu adresu kupca to moţemo uĉiniti sledećim upitom: UPDATE Kupci SET Adrese = "Nova adresa" WHERE KorisnikID = 4 Vremenom se ukaţe potreba i za izmenu i strukture tabela u bazi podataka. Za to sluţi iskaz ALTER TABLE sledećeg osnovnog blika: ALTER TABLE tabela izmena [, izmena,...] Postoje razliĉiti tipovi izmena koje omogućava ALTER TABLE iskaz i daćemo ih tabelarno Sintaksa Opis Dodaje novu kolonu na navedenoj lokaciji. Ako lokacija nije ADD [COLUMN] opis_kolone [FIRST navedena kolona se dodaje na kraj. Opis_kolona sadrņi ime i tip AFTER kolona] kao u iskazu CREATE ADD [COLUMN] (opis_kolone, opis_kolone,...) Dodaje jednu ili vińe kolona na kraj tabele ADD PRIMARY KEY (kolona,...) Od navedenih kolona ili kolane pravi primarni kljuĉ tabele ADD INDEX [indeks] (kolona,...) Dodaje indeks tabeli po navedenoj koloni ili kolonama ADD UNIQUE [indeks] (kolona,...) Dodaje jedinstven indeks tabeli po navedenoj koloni ili kolonama ALTER [COLUMN] kolona {SET Dodaje ili brińe podrazumevanu vrednost za odredjenu kolonu [250]

251 DEFAULT vrednost DROP DEFAULT CHANGE [COLUMN] kolona opis_kolone MODIFY [COLUMN] opis_kolone DROP [COLUMN] kolona DROP PRIMARY KEY DROP INDEX indeks RENAME [AS] novo_ime_tabele Menja tip kolone. Moņe se upotrbiti i za promenu imena kolone jer opis_kolone sadrņi ime kolone Sliĉno kao CHANGE, moņe da se koristi za izmenu tipa, ali ne i imena kolone Brińe navedenu kolonu Brińe primarni indeks (ali ne i kolonu) Brińe navedeni indeks Menja ime tabele Ajde sad i neki primer da vidimo. Ĉesto puta se desi da na primer u tabeli Korisnici, koloni Ime karakteristika char (30) bude mala za unos nekih imena i trebamo je povećati na char (45). To radimo na sledeći naĉin: ALTER TABLE Korisnici MODIFY Ime char(45) not null Ako se vremenom ukaţe potreba da se izbriše tabeli neka kolona moţemo to uraditi ovako: ALTER TABLE Korisnici DROP Grad Redovi se brišu veoma jednostavno korišćenjem iskaza DELETE FROM sledećeg oblika: DELETE FROM tabela [WHERE uslov] [LIMIT ograničenje] Ako napišemo samo: DELETE FROM tabela Obrisaćemo nepovratno sve redove iz tabele, i zato budite obazrivi kad koristite ovaj iskaz. Obiĉno je potrebno obrisati samo neke redove, na primer onih kupaca koji se nisu pojavili na sajtu ĉitavu godinu, ili neke knjige više nema u prometu itd. Brisanje cele tabele iz baze podatakase vrši iskazom DROP TABLE, koja izgleda ovako: DROP TABLE tabela Unos fajla Ĉesto puta pri izradi sajta treba napraviti mogućnost posetiocima ubacivanje slika (fotografija) ili fajlova na sajt. Ubacivanjem slika ili fajlova, ukolikom se ne povede raĉuna o bezbednosti, moţe dovesti do ugroţavanja sajta. Zato je neophodno dobro obratiri paţnju na bezbednost sajta. U PHP-u postoje bezbedne funkcije za upload fajlova korišćenjem specijalno ugraċenog (sistemskog) niza $_FILES. U ovom poglavlju ćemo takodje objasniti i PHP editovanje slika, taĉnije PHP pisanje po uploadovanih slikama. [251]

252 Ubacivanje slika ili drugih fajlova U PHP-u postoje funkcije za upload fajlova korišćenjem specijalno ugraċenog (sistemskog) niza$_files. Evo skripte koja ubacuje slike preko forme i ujedno ispisuje tekst na slici: <html><head><title>upload slika</title><meta http-equiv="content-language" content="sr"> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </head><body><h2>upload slika</h2><hr> <? if ($_POST"SBgumb"]!="Posalji"){?> <form method="post" action="" enctype="multipart/form-data"> <input type="hidden" name="max_file_size" value="20480"> <input type="file" size="25" name="slika"><br> <input type="submit" name="sbgumb" value="posalji"> <input type="reset" value="reset"> </form> <? else{ if ($_FILES ['slika']['error'] > 0){ echo 'Problem:'; switch ($_FILES ['slika']['error']){ case 1: echo 'Slika je prevelika pokusajte ponovo'; break; case 2: echo 'Slika je prevelika pokusajte ponovo'; break; case 3: echo 'Slika nije potpuno ucitana, pokusajte ponovo'; break; case 4: echo 'Slika nije ucitana, pokusajte ponovo'; break; case 6: echo 'Serverska greska, pokusajte ponovo'; break; case 7: echo 'Slika nije ucitana, pokusajte ponovo'; break; case 8: echo 'Slika nije ucitana, pokusajte ponovo'; break; exit; if ($_FILES ['slika']['size'] > 20480) { echo 'Slika je prevelika pokusajte ponovo'; exit; if ($_FILES ['slika']['type']=='image/jpeg'){ $a="ok"; $b="jpg"; if ($_FILES ['slika']['type']=='image/png'){ $a="ok"; $b="png"; if ($a!="ok"){ echo'problem: slika nije u okviru ponudjenih formata jpg i png, pokusajte ponovo)'; exit; $upfile = $_FILES ['slika']['name']; if ( is_uploaded_file ($_FILES ['slika']['tmp_name'])){ if (!move_uploaded_file ($_FILES ['slika']['tmp_name'], $upfile)){ echo 'Problem: Nije premestena slika u sajt'; exit; else{ echo 'Problem: Nismo ucitali sliku pod nazivom:'; echo $_FILES ['slika']['name']; exit; include 'povzi.php'; $sql = "INSERT INTO slike (naziv) VALUES ('$upfile')"; if (!mysql_query ($sql)) { echo "Nastala je greška pri unosu naziva slike u bazu podataka"; if ($b == "jpg"){ header ("location: jpeg.php?ime=$upfile"); if ($b == "png"){ header ("location: png.php?ime=$upfile");?> </body></html> [252]

253 Prvi red forme za upload podataka je: <form method="post" action="" enctype="multipart/form-data"> Nakon toga skriveno hidden polje OBAVEZNO se ubacuje pre polja za unos podataka, i UVEK se mora pisati. Ako ga izostavimo forma neće raditi! <input type="hidden" name="max_file_size" value="20481"> Uvek se u "name" piše MAX_FILE_SIZE. U "value" se definiše maksimalna veliĉina fajla koga uplodujemo preko forme. To je broj izraţen u bajtima. Na primer ako ţelimo da maksimalna veliĉina fajla ne bude veća od 20 kb onda pišemo (20 x 1024). Sledeće polje je zapravo polje za upload: <input type="file" size="25" name="slika"> Pod "size" odredjujemo broj znakova polja za upis kojeg vidimo u brouzeru. Pod "name" definišemo programsko ime fajla kojim baratamo kroz program (u našem sluĉaju kao što vidimo je na primer "slika", a moţemo ga imenovati kako nam je volja). Nakon submitiranja superglobalna promenjljiva $_FILE iz HTML forme "skuplja" sledeće vrednosti: $ _FILES['slika']['name'] Vrednost ove globalne promenjljive je naziv fajla kao što je u brouzeru korisnika. $ _FILES['Userfile']['type'] Vrednost je string tipa podataka. Na primer ako je gif slika uplodovana preko forme onda će vrednost biti string "image/gif". Ostali tipovi slika mogu biti na primer: "image/jpeg", "image/png" i tako dalje. $ _FILES['Userfile']['size'] Vrednost je ceo broj koji je jednak veliĉini uplodovanog fajla u bajtima. Ovo je jako bitna promenjljiva za bezbednost sajta, kao što će mo videti u nastavku. $_FILES['userfile']['tmp_name'] Privremeni direktorij gde će fajl biti smešten na serveru. Kada se završi izvršavanje skripte taj privremeni direktorij biće izbrisan tako da ako ţelimo zapamtiti sliku ili fajl moramo pre toga odredjenom funkcijom zapamtimo uplodovan fajl. $_FILES['Userfile']['error'] Ukoliko smo iz forme izašli sa nekom greškom (na primer fajl je veći nego što smo odredili) ova globalna varijabla će je zapamtiti pomoću celih brojeva, pa tako biće: o 0 Nema greške. o 1 fajl koji je pokušan da se uploduje premašuje vrednost koju smo zadali u formi (u našem sluĉaju je u hidden polju value = ili ti 20kB). Ali ovo nije dovoljno za bezbednost jel posetilac moţe sam izraditi formu koja će slati veće slike na našu adresu. Zato je potrebno proveriti veliĉinu slike redkom u kodu if ($_FILES['slika']['size'] > 20480) o 2 Skoro isto kao u taĉki 1 (da ne komplikujemo). o 3 Datoteka je uĉitana delimiĉno. o 4 Datoteka (fajl) nije uĉitana, odnosno nema je. o 6 Nedostaje privremena mapa (uvedeno u PHP i novije). o 7 - Neuspelo pisanje datoteke na hard disku hosta. Uvedena u PHP o 8 Zaustavljena ekstenzija upload fajla. Uvedena u PHP Sve ove greške proveravamo sledećim kodom: if ($_FILES['slika']['error'] > 0){ echo 'Problem:'; switch ($_FILES['slika']['error']){ case 1: echo 'Slika je prevelika pokusajte ponovo'; break; case 2: echo 'Slika je prevelika pokusajte ponovo'; break; case 3: echo 'Slika nije potpuno ucitana, pokusajte ponovo'; break; case 4: echo 'Slika nije ucitana, pokusajte ponovo'; break; case 6: echo 'Serverska greska, pokusajte ponovo'; break; case 7: echo 'Slika nije ucitana, pokusajte ponovo'; break; case 8: echo 'Slika nije ucitana, pokusajte ponovo'; break; [253]

254 exit; Nastavimo sada sa objašnjenjem našeg koda. U nastavku sledi kljuĉni red za bezbednost forme i unetih fajlova: if ($_FILES['slika']['size'] > 20480){echo 'Slika je prevelika pokusajte ponovo'; exit; Naime, rekli smo da u formi u skrivenom polju, pomoću vrednosti "value" ograniĉavamo veliĉinu slike/fala koji se moţe ubaciti. Medjutim skriveno je u smislu da je nevidljivo u internet pregledniku ali ako stranu skinemo sa neta i ubacimo u nekom HTML programu za editovanje neće biti nevidljivo. Naime ţelim da kaţem da zlonamerni posetilac moţe napraviti sam formu koja će slati veliĉinu slike po njegovoj volji na našu skriptu za upload. Sistemski niz $_FILES ['Userfile'] ['error'] sa svojim vrednostima nam ne moţe pomoći jer on samo ĉita i prati sve ono što radi forma. Za pravu zaštitu zapravo sluţi sistemska promenjljiva $_FILES['slika'] ['size'] jer sistem u njoj kao vrednost smešta pravu veliĉinu privremeno uplodovane slike bez ikakve veze sa formom. I sada uporedimo tu stvarnu veliĉinu slike sa onom koju mi oĉekujemo i ako je neko menjao formu za slanje ne moţe da nas obmane. if ($_FILES['slika']['type']=='image/jpeg'){$a= "ok"; $b="jpg"; if ($_FILES['slika']['type']=='image/png'){$a="ok"; $b="png"; if ($a!= "ok"){ echo 'Problem: slika nije u okviru ponudjenih formata (jpg, png)'; exit; Ovim kodom kao prvo i osnovno dajemo da se uploduju samo slike i to ne sve već samo one koje imaju formate jpeg i png. Ako zadovoljava uplodovan format slike tada je "zastavica" $a = "ok". Takodje tu smo i definisali promenjljivu $b koju će mo kasnije koristiti. $upfile = $_FILES['slika']['name']; if (is_uploaded_file ($_FILES['slika']['tmp_name'])){ if (!move_uploaded_file ($_FILES['slika']['tmp_name'], $upfile)){ echo 'Problem: Nije premesten slika u sajt'; exit; else{ echo 'Problem: Nismo ucitali sliku pod nazivom:'; echo $_FILES['slika']['name']; exit; E u ovom delu koda već konkretno trajno memorišemo fajl na hostu. Promenjljivom $upfileodredjujemo ime slike. Ako ţelimo da je ime nepromenjeno sa onim koje je i korisnik uneo pišemo kao u skripti a ako ţelimo da damo novo ime samo ga dodamo kao string toj promenjljivoj. Takodje moţemo odrediti i neki folder u kome će mo smestiti našu sliku. U našem konkretnom sluĉaju folder je isti u kome je smeštena i skripta za upload. Naravno sve to moţemo promeniti recimo moţemo kreirati novi folder "slike" pa će biti: $upfile = "/slike/".$_files["slika"]["name"]; Fukcija is_uploaded_file ( $_FILES ['slika']['tmp_name'] ) proverava da li postoji privremen uplodovan fajl $_FILES ['slika']['tmp_name']. Ako postoji funkcija vraća "true" i nastavlja sa skriptom. Ako ne postoji privremeni uplodovan fajl funkcija vraća "false", ispisuje "nismo ucitali sliku pod nazivom: ispisujemo naziv fajla" i završavamo sa skriptom naredbom exit. Funkcije koja sluţi za trajno prebacivanje privremenog fajla, na server je: move_uploaded_file ($_FILES['slika']['tmp_name'], $upfile) Znaĉi ovim redom koda konaĉno sliku/fajl smeštamo na mesto u hostingu gde ţelimo i pod kojim imenom ţelimo kao što smo definisali u promenjljivoj $upfile. A ona privremena slika se briše nakon izvršenja skripte. [254]

255 Funkciju move_uploaded_file() smo smestili u IF da bi ujedno proverili da li smo uspešno trajno memorisali uplodovan fajl. Ako je sve ok onda IF zbog znaka negacije "! " ispred funkcije vraća "false" i nastavljamo sa izvršenjem ostatka skripte, a ako je došlo do greške pa fajl nije uplodovan trajno IF vraća "true" pa se ispisuje tekst "Problem: Nije premesten slika u sajt" i prekidamo sa izvršenjem skripte naredbom exit. U nastavku skripte imamo sledeći deo: include 'povzi.php'; $sql = "INSERT INTO slike (naziv) VALUES ('$upfile')"; if (!mysql_query ($sql)){ echo "Nastala je greška pri unosu naziva slike u bazu podataka"; Sada moţemo naziv mesta na hostingu gde smo smestili fajl memorisati u bazu podataka, to jest u konkretnom našem sluĉaju u tabeli "slike", kolona "ime". Ovde ne moramo koristiti fnkciju addslashes () jer u nazivima fajlova na hard disku ne mogu da se nadju naši nepoţeljni znaci. Ono što je bitno ovde je to da smo dakle u tabeli smestili samo "string" naziva lokacije fajla a ne sam fajl. Moţemo takodje smeštati i fajlove u bazu ali je zbog brzine izvršavanja skripte bolje ovako. Obrada unete slike U nastavku koda sa poĉetka prethodnog naslova recimo moţemo obradjivati uĉitane slike. PHP ima izuzetno mnogo mogućnosti što se tiĉe obrade slika ali mi ćemo ovde kao demonstraciju obraditi samo ispisivanje teksta na slici. Na primer na svaku uplodovanu sliku nalepimo u gornjem levom uglu tekst naziva našeg sajta, na primer zaljubi.com. Obzirom da smo omogućili da se uploduju dva tipa slika moramo kreirati i dva koda za obradu. I na primer neka ti kodovi budu smešteni u dva razliĉita fajla i to u jpeg.php i png.php. Naravno, ako je slika tipa na primer jpeg obradjivaće se u jpeg.php skripti te zato u našoj glavnoj skripti moramo odrediti koji tip slike će se obraditi u koji php fajl za obradu: if ($b=="jpg"){ header("location: jpeg.php?ime=$upfile"); if ($b=="png") { header("location: png.php?ime=$upfile"); Još nešto, da nebi smo otvarali bazu kako bi smo isĉitali gde smo smestili tekst lokacije slike moţemo pomoću komandne linije?ime=$upfile tu informaciju prebaciti u naše skripte za obradu slike. To nije bezbednosni rizik jer tu liniju i ne vidi korisnik zato što se sve brzo odvija i kad se skripta za ispis slova na slici završi automatski šalje korisnika za umos nove slike i ispisuje "slika je uspešno uplodovana". E sad skripte jpeg.php i png.php redom izgledaju ovako: Skripta jpeg.php: <?php $a=$_get["ime"]; $im=imagecreatefromjpeg($a); $black=imagecolorallocate($im, 0, 0, 0); $zuta=imagecolorallocate($im, 255, 255, 0); imagettftext($im, 15, 0, 5, 19, $black, 'star.ttf', 'zaljubi.com'); imagettftext($im, 15, 0, 3, 17, $zuta, 'star.ttf', 'zaljubi.com'); header("content-type: image/jpeg"); imagejpeg($im, $a); imagedestroy($im); header ("location: upload.php");?> Skripta png.php: [255]

256 <?php $a=$_get["ime"]; $im=imagecreatefrompng($a); $black=imagecolorallocate($im, 0, 0, 0); $zuta=imagecolorallocate($im, 255, 255, 0); imagettftext($im, 15, 0, 5, 19, $black, 'star.ttf', 'zaljubi.com'); imagettftext($im, 15, 0, 3, 17, $zuta, 'star.ttf', 'zaljubi.com'); header("content-type: image/png"); imagepng($im, $a); imagedestroy($im); header("location: upload.php");?> Kao što vidimo ove dve skripte za ispisivanje teksta sajta na slici su malte ne iste, a razlikuju se samo po nastavcima jpeg i png u funkcijama imagecreatefrompng ($a), imagepng ($im, $a) iheader("content-type: image/png"). Pre nego krenemo sa konkretnim objašnjenjem naših skripti daću mali uvod. PHP se sastoji od nekoliko desetina ekstenzija, medju kojima se nalazi i GD grafiĉka biblioteka, koja je zaduţena za kreiranje izmedju ostalog JPEG i PNG (izgovara se ping) slika, koje u svetu webdizajna i webprogramiranja veliku ulogu igraju. Naţalost za GIF format firma Unisys ima patent i ako ţelite koristiti GIF format na svom sajtu onda rizikujete tuţbu zbog licence. PNG (Portable Network Graphics) format polako dostiţe GIF, ali iako većina browsera podrţava PNG, ova trka će potrajati još dugo. PHP raspolaze sa veoma dosta komandi (preko 100) koje odliĉno rade sa GD ekstenzijom (ili bibliotekom). Mogućnosti su teoretski neograniĉene, iako se naravno mora napomenuti da GD nije Adobe Photoshop ili Corel Draw. GD je kao i većina drugih ekstenzija automatski ukljuĉena u sve novije verzije PHP-a. E sad krenimo sa objašnjenjem. U našim skriptama za obradu slika smo postavili zadatak, kao što smo rekli, da automatski na svakoj uplodovanoj slici ispišemo tekst "zaljubi.com". Kao prvo pravimo kopiju naše slike. To radimo sa jednom praktiĉnom funkcijom imagecreatefromjpeg ($a) ĉiju vrednost dodeljujemo na primer promenjljivoj $im. Znaĉi kreiramo od jedne postojeće slike jednu novu sliku, odnosno kopiju $im. Sada već moţemo upisati naš tekst na sliku. Kasnije ćemo opisati par sitnica, odnosno primeniti par dodatnih komandi kojima ćemo popraviti izgled našeg teksta i slike. Za upisivanje teksta na sliku se koristi funkcija: imagettftext($im, 15, 0, 3, 17, $zuta, 'star.ttf', 'zaljubi.com'); Kao prvi argument ove funkcije definišemo na kojoj slici ispisujemo tekst. U našem sluĉaju je naravno $im slika. Dalje, funkcijom definišemo koju vrstu slova ćemo koristiti. U našem sluĉaju koristimo font slova 'star.ttf'. Zato moramo u istom folderu gde su i naše skripte ubaciti i font koga koristimo za ispis teksta na slici. U našem sluĉaju je isti folder ali ako se fajl za fontove nalazi u nekom drugom folderu u odnosu na naše skripte onda upisemo tu lokaciju. Takodje funkcijom definišemo od kog piksela na slici treba da poĉnemo sa ispisom teksta. To definisemo u 4-om i 5-om parametru funkcije. I to na 4-om mestu je x kordinata a na 5-tom mestu u funkciji je y kordinata. Ako stavimo na 4-om i 5-om mestu broj nula to znaĉi da će poĉeti da se ispisuje tekst od krajnjeg gornjeg levog ugla u slici. Normalno slova se ispisuju ispod te taĉke. U našem sluĉaju kao što vidimo je 3 za "x" i 17 za "y" koordinatu. Pomoću promenjljive $zuta = imagecolorallocate ($im, 255, 255, 0)odredjujemo boju našeg teksta. Funkcija Imagecolorallocate() definise RGB KOD boje na konkretnoj slici. U našem sluĉaju na slici $im definišemo ţutu boju pomoću tri RGB broja i to: 255, 255, 0, jer su ti brojevi baš tim redosledom RGB definicija za ţutu boju. Takodje definišimo i crnu boju kako bi našem tekstu napravili i senku (ĉisto da malo ulepšamo ispisivanje teksta) pomoću crne boje $black = imagecolorallocate ($im, 0, 0, 0). Dalje, treći argument u funkciji je ugao pod kojim ţelimo zarotirati naš tekst. U našem sluĉaju je bez rotacije, odnosno tekst je horizontalno ispisan. Inaĉe uglovi se povećavaju suprotno od kazaljke na satu. Recimo ako stavimo broj 90 to znaĉi da je tekst zarotiran pod uglom od 90 stepeni, odnosno ispisaće se vertikalni tekst. Drugi argument u funkciji je veliĉina fonta. I na kraju zadnji argument je u stvari sam tekst koga ţelimo ispisati u obliku stringa a moţe tu naravno da stoji i promenjljiva ĉija je vrednost string a moţe i broj ako ţelimo ispisati samo neki broj. E sad, mi smo tekst ispisali na slici koja je u stvari kopija naše uplodovane slike pa zato sad trebamo da je zapamtimo trajno. Pre nego je trajno zapamtimo moramo definisati koji će tip slike ona biti. To radimo pomocu header("contenttype: image/png");. Zatim pristupamo memorisanju editovane kopije slike. To radimo pomoću funkcije imagepng ($im, [256]

257 $a);. Prvi argument funkcije je editovana kopija naše uplodovane slike, a drugi argument je lokacija gde ţelimo smestiti tako editovanu sliku. E sad u našem sluĉaju je to ista lokacija kao i uplodovana slika. Naime, pošto je lokacija ista onda funkcija prvo izbriše staru uplodovanu sliku pa na "njenom mestu" trajno uĉita editovanu sliku. Još jedna stvar vezano za istu funkciju je, na primer ţelimo samo da u brouzeru prikaţemo editovanu sliku a ne i da je zapamtimo na hostingu, to moţemo uraditi ako izostavimo drugi argument u funkciji, to jest ako napišemo imagepng ($im). E sad pošto smo zapamtili editovanu sliku na hostingu, nije nam više potrebna kopija slike te je brišemo funkcijom imagedestroy ($im). Medjutim kod skripti sa malim brojem redova, kao što je to sluĉaj kod nas ne moramo koristiti ovu funkciju za brisanje slike jer onog trenutka kad se završi sa skriptom automacki se briše iz memorije editovana kopija. Na kraju, nakon editovanja slike moţemo posetioce proslediti na poĉetku, da recimo unesu još slika, te zato upisujemo header ("location: upload.php"). Moramo napomenuti još nešto vezano za skripte koje edituju slike kao što su naše jpeg.php ipng.php. Vi moţete u kôdu za editovanje slika pisati bilo koju komandu koja prikazuje nešto u browseru ali sve će biti ignorisano, jer je ovo zapravo sada jedan.jpg ili.png file. Znaĉi sve Vaše echo, print i sl. komande neće funkcionisati. To znaĉi, ako otvaramo stranicu koja edituje slike, prikazivaće se samo editovana slika bez ikakvog teksta, pozadine i sl. E sad pitate se šta dalje sa uplodovanom i editovanom slikom. Pa moţemo sa njom da radimo šta nam je volja kao i sa svakom drugom slikom u HTML kodu. Evo sad ću dati kod jedne skripte koja prikazuje sve uplodovane slike ĉiji nazivi su smešteni u bazi u tabeli slike: <html><head><title>prikaz slika</title><meta http-equiv="content-language" content="sr"> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </head><body><h2>prikaz slika</h2><hr> <? include "pvzi.php"; $sql="select idnovost, naziv FROM slike"; if (!$q=mysql_query($sql)){ echo "nastala je greska pri iscitavanju podataka slike iz baze"; exit; while ($da=mysql_fetch_array($q)){ $b = $da["naziv"]; echo $da["idnovost"]."<br>"; echo $b;?> <p><img border="0" src="<? echo $b;?>" width="500" height="500"></p> <??> </body></html> Datum Ovde će mo videti formatiranje datuma i vremena i konverziju izmedju razliĉitih formata datuma. To je naroĉito vaţno pri konverziji izmedju MySQL-ovih i PHP-ovih formata datuma, unixovih i PHP-ovih forata datuma, ili datuma koje korisnici unose preko HTML formi. Funkcija DATE Tipiĉan primer pozivanja funkcije DATE bi bila: [257]

258 date ('d.m.y.'); Rezultat će biti u formatu " ". E sad ovo su najelementarnije oznake za datum u PHP, medjutim postoji još mnoge oznake koje mogu da se nadju u funkciji DATE vezano i za datum i za vreme pa najbolje da sve to damo tabelarno: Kod Opis a "am" ili "pm" u zavisnosti od doba dana A "AM" ili "PM" u zavisnosti od doba dana Vreme u formatu Swatch Internet time, ńto je univerzalan format za vreme.vińe B informacija o tom vremenskom formatu naćićete na adresiwww.swatch.com Dan u mesecu datuma kao dvocifren broj sa vodećom nulom, u opsegu od "01" do d "31" Dan u nedelji kao skraćenica od tri slova, u opsegu od "Mon" (ponedeljak) do "Sun" ( D nedelja) F Puno (englesko) ime meseca, u opsegu od "January" do "December" g Ĉas u 12-ĉasovnom formatu bez vodeće nule u opsegu od "1" do "12" G Ĉas u 24-ĉasovnom formatu bez vodeće nule u opsegu od "0" do "23" h Ĉas u 12-ĉasovnom formatu sa vodećom nulom, u opsegu od "01" do "12" H Ĉas u 24-ĉasovnom formatu sa vodećom nulom, u opsegu od "00" do "23" i Minuti u ĉasu sa vodećom nulom u opsegu od "00" do "59" Reņim raĉunanja vremena kao vrednost logiĉkog tipa. Vrednost je "1" ako vaņi letnje I (veliko slovo i) raĉunanje vremena i "0" ako ne vaņi (vaņi zimsko znaĉi) j Dan u mesecu bez vodeće nule u opsegu od "1" do "31" l (malo slovo L) Puno englesko ime dana u nedelji u opsegu od "Monday" do "Sunday" Podatak o tome da li je godina prestupna. Vrednost "1" ako je godina prestupna i "0" L ako nije. m Mesec u godini kao dvocifren broj sa vodećom nulom u opsegu od "01" do "12" M Mesec u godini kao skraćenica od tri slova u opsegu od "Jan" do "Dec" n Mesec u godini kao broj bez vodeće nule u opsegu od "1" do "12" Razlika u ĉasovima izmedju vremena u tekućoj vremenskoj zoni i graniĉnog vremena O (GMT, Greenwich Mean Time). Na primer Datum i vreme u formatu RFC822. Na primer: Sat, 9 Oct :45: ( r uvedeno od PHP ) s Sekunde u minuti sa vodećom nulom u opsegu od "00" do "59" Gramatiĉki sufiks (engleski) koji opisuje redni broj u obliku skraćenice od dva znaka. S To moņe biti "st", "nd", "rd", ili "th" u zavisnosti od broja iza koga se nalazi. t Ukupan broj dana u mesecu u opsegu od "28" do "31" T Vremenska zona servera u obliku skraćenice od tri slova na primer "EST" Ukupan broj sekunda koji je protekao od 1. januara godine do tekućeg trenutka, U poznat i kao Unixov format vremenske oznake Redni broj dana u sedmici kao jednocifren broj u opsegu od "0" (nedelja) do "6" w (subota) W Redni broj sedmice u godini prema standardu ISO Uvedeno u PHP-u y Godina kao dvocifren broj na primer 2010 pisaće se "10" Y Godina kao ĉetvorocifren broj na primer "2010" z Redni broj dana u godini kao broj u opsegu od "0" do "365" Z Pomak tekuće vremenske zone u sekundama u opsegu od "-43200" do "43200" Prosledjivanje datuma u MySQL bazu [258]

259 Objašnjenje vezano za ubacivanje datuma u MySQL sam dao u delu gde sam objašnjavao vrste podataka u kolonama. Ali hajde još jednom da napišemo to. Ako kao vrstu podataka u koloni MySQL baze stavimo DATE onda datum mora biti sledećeg formata: do (obavezno mora da stoji znak minus izmedju brojeva). A ako hoćemo i vreme onda pišemo DATETIME Tad je format prikaza u rasponu od :00:00do :59:59. Ako nam je bitno samo vreme onda pišemo TIME i tad je format u rasponu prikaza - 838:59:59 do 838:59:59. Postoji i samo datum za godine YEAR(2 ili 4). Ako stavimo samo broj 2 onda je raspon u formatu 70 do 69 (misli se 1970 do 2069 samo piše zadnje dve cifre), a ako stavimo samo broj 4 u zagradi onda je format u rasponu 1901 do Takodje morate voditi raĉuna da se svi datumski i vremenski formati u MySQL bazi zapisuju sa vodećom nulom!!! Tako na primer ako pokušate datum da ubacite u bazu neće vam uspeti. Kao što vidimo u MySQL bazu se prosledjuje nešto drugaĉiji format datuma i vremena od onog na koga smo navikli iz svakodnevnog ţivota. A kada podatak o datumu pribavljamo iz baze moramo ga konvertovati u format datuma koji bi nama najviše odgovarao. Nama jedan od prihvatljivih formata datuma koje bi mogli da koristimo bio bi na primer " " sa vodećom nulom. Ako ţelimo format datuma kao što je taj onda pišemo: DATE ('d.m.y.'); Medjutim primera radi pošto taj datum trebamo upisati u bazu onda nam odgovara sledeći format funkcije DATA: DATE ('Y-m-d'); Rezultat će biti baš onakav kako nama odgovara za unos u bazu dakle " ". Primećujte da izmedju oznaka u funkciji moţemo stavljati znak koji nam najviše odgovara i to taĉku ili " - ", ali moţemo staviti kakav god znak ţelimo. E sad, na primer izvuĉemo datum iz baze i smestimo ga u promenjljivu $DatumBaza. Sledeći korak je prebacivanje datuma iz MySQl formata u format koji nama odgovara, to jest u format " ". Kod za konvertovanje dobro je smestiti u funkciju i pozivati je svaki put kada trebamo konvertovati datum iz baze. Funkcija i red u kome se poziva ta funkcija bi mogli da izgledaju ovako:... $datum = KonverzijaDatum ($DatumBaza); // red u skripti u kome se poziva funkcija // i čija vrednost se dodeljuje promenjljivoj $datum... function KonverzijaDatum ($mysqldatum){ $tmp = explode ("-", $mysqldatum); $DATUM = $tmp[2]. ".". $tmp[1]. ".". $tmp[0]; return $DATUM; Forme Već smo imali primere sa formama ali ovde ćemo detaljnije o njima. Upload fajlova i slika preko formi smo dali zasebno jer je potrebno detaljno objašnjenje. HTML forme su jedini alat za prikupljanje informacija od posetilaca sajta. Tako prikupljene podatke PHP moţe dinamiĉki da obradjuje. Obzirom da su to HTML forme neophodno je poznavanje HTML-a. [259]

260 Forma je HTML element pomoću koga grupišemo jedan ili više elemenata za unos podataka (tipa text box, select izbornik, itd), U te elemente korisnik moţe uneti ili izabrati informacije koje se kasnije koriste za bilo koju svrhu (unos informacija u bazu podataka, slanje a sa unesenim informacijama itd.). Više elemenata forme mogu biti grupisani u jednu HTML formu kao što smo već napisali. Nakon unosa podataka u formu i "submitovanja", ti svi podaci šalju se najĉešće POST metodom PHP-u koji dalje vrši obradu tih podataka. Ako niste razumeli ne brinite, do kraja ovog poglavlja biće vam sve jasno Struktura HTML forme Otvorite notepad, upišite naredni kod a dokument spremite pod imenom forma.htm i pogledajte ispis u svom brauzeru: <html><head> <title>umetanje forme u HTML dokument</title> </head><body> <h1>umetanje forme</h1> <p>ispunite formu: </p> <form method="post" action="prihvat.php" name="forma1"></form> </body></html> Primećujete da je sama forma nevidljiva. Nju moţemo zamisliti kao nevidljivu "kutiju" u koju se umeću elementi forme. Elemente forme ćemo dodavati malo kasnije. Primećujete da je ekstenzija dokumenta forma.htm. Znaĉi forme se mogu nalaziti i u obiĉnim html dokumentima. Bitno je samo da dokument koji prihvata podatke forme bude PHP dokument. Normalno forme moţemo kombinovati unutar PHP skripte što je obiĉno najĉešći sluĉaj i tad ekstenzija mora da se završava sa.php. Dakle, konkretna HTML forma izgleda ovako: <form method="post" action="prihvat.php" name="forma1"> </form> Znaĉi radi se o obiĉnom HTML tagu koji ima svoj poĉetak, kraj i neke argumente. Argumenti su dosta bitni za celu priĉu, pošto odreċuju mnoge parametre o kojima zavisi tok dogaċaja nakon submitanja (slanja) podataka iz forme. Prvi argument je: method="post" Ovo je vrlo bitan argument. On govori kojom metodom će se podaci iz forme proslediti PHP skripti za obradu unesenih podataka. Drugi argument je: action = "prihvat.php" Pomoću njega govorimo formi kojoj skipti se podaci šalju kada se forma submita. Izmedju navodnika moţe pisati bilo kakav URL, ukljuĉujući i neki sa nekog drugog sajta. Medjutim, moţe se desiti (što nije redak sluĉaj) da se ti podaci prikupljeni iz forme šalju i u samoj skripti u kojoj se nalazi ona sama. U tom sluĉaju skripta mora da sadrţi i PHP kod za obradu podataka iz forme, i tada fajl u kome je smešteno sve to mora da ima ekstenziju.php. U tom sluĉaju argument moţemo pisati na sledeće naĉine: action="prihvat.php" gde je prihvat.php fajl u kome je smeštena i sama forma. Ili jednostavno samo action="", znaĉi samo navodnici. Treći navedeni argument je: name="forma1" [260]

261 On, oĉito, imenuje ovu formu. Ovaj argument nimalo nije bitan za prihvat i obradu podataka forme pomoću PHP-a. Vaţnost ovog argumenta je u izradi JavaScript klijentskih kodova, i sluţi za identifikovanje forme. Pošto je tema ovog ĉlanka PHP i forme, nećemo ulaziti u detalje te problematike. Bitno je znati da se forma moţe imenovati, i da je u našoj situaciji ovaj argument moguće i izostaviti, što će mo u buduće i ĉiniti. POST i GET metode slanja i prihvata podataka Postoje dve metode prosljeċivanja podataka HTML forme PHP dokumentu, i to su POST i GETmetoda. Odabir metode prosljeċivanja podataka forme se vrši navoċenjem u method argumentu<form> taga. Moguće vrednosti method argumenta zato su "post" ili "get". Ako odaberemo metodu GET podaci forme se šalju kroz komandnu liniju query string, tj. iza znaka? u adress baru brauzera. Odabirom metode POST podaci nisu vidljivi u komandnoj liniji već se šalju krozheader HTTP requesta, i time se na podatke ne moţe uticati izmenom linka u adress baru brauzera kao što to moţe biti sluĉaj sa GET metodom. Postoji ograniĉenje na koliĉinu podataka koji se mogu poslati putem GET metode. Ograniĉenje zavisi od postavke samog servera i varira od 256 bita do ĉak 32 Kb. Zato, ukoliko se radi o formi koja u sebi sadrţi polja za unos velikih tekstova GET nije dobra metoda za prosljeċivanje informacija. Kako se odluĉiti koju metodu koristiti? Metoda koja se koristi za prosljeċivanje informacija zavisi o situaciji u kojoj se nalazite. Svaka metoda ima svoje vrline i mane. Rekli smo da se u GET metodi informacije lepe na sam URL, što ovu metodu ĉini idealnom u sluĉaju kada ţelite omogućiti posetiocima da spreme stranicu koju gledaju u svoje favorite, jer će spremiti URL zajedno sa zalepljenim query stringom. Primer ovoga bi bio Google i njihova traţilica koja sve podatke iz formi lepi u query string baš iz tog razloga. Sa druge strane GET je vrlo nesigurna metoda jer je posetilac vrlo lako moţe izmeniti, i to tako što jednostavno izmeni URL u adress baru svog browsera. Iz tog razloga nije preporuĉljivo koristiti ovu metodu za prosljeċivanje recimo usernamea i passworda u login formama i sliĉnih osetljivih informacija. U suštini neka striktna pravila u odabiru metode ne postoje. Jedino pravilo koje se mora poštovati je da se obavezno mora koristiti POST metoda kada se izraċuju upload forme. Pogledajmo sad kompletan primer koji se sastoji od dva dela. Radi se o istoj formi, samo što se u sluĉaju a) koristi GET metoda, a u sluĉaju b) POST. Prvi ćemo nazvati forma.php, a drugi prihvat.php. Iz imena zakljuĉujete da će se u forma.php nalaziti sama forma, a u prihvat.php će se nalaziti PHP skripta koja će prihvatiti te informacije i ispisati ih na ekran. Primer a) Jednostavna forma pomoću GET metode. Dokument: forma.php <html><head> <title>primer2 a) ProsleĎivanje informacije GET metodom</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>prosleďivanje informacije GET metodom </h2><br><br> <form method="get" action="prihvat.php"> Unesi svoje ime :<br> <input name="ime" type="text" ><br> <input name="submit" type="submit" value="posalji"> </form> </body></html> Dokument: prihvat.php <? echo "Pozdrav".$_GET["ime"];?> [261]

262 Kao što vidimo method u argumentu je GET. Takodje smo u formu ubacili dva elementa, i to prvi: <input name="ime" type="text"> A drugi gumb: <input name="submit" type="submit" value="pošalji"> U oba ova elementa forme obavezno je korišćenje "name" argumenta. Pomoću njega dajemo polju ime i to ime koristimo u PHP-u za prihvat podataka koji su uneseni u to polje. Ukoliko ne imenujete polje, podaci koji se unesu u njega nisu vidljivi PHP skripti za prihvat podataka iz te forme. Prihvat podataka je sam po sebi vrlo jednostavan. Unutar PHP-u postoje superglobalne varijable. To su varijable (nizovnog tipa) koje definiše sam PHP pri pokretanju svake skripte. Superglobalna promenjljive koja prihvata GET vrednosti je $_GET a superglobalna koja prihvata POST promenjljive je $_POST. $_GET je korišćena u prihvat.php dokumentu našeg primera: echo "Pozdrav".$_GET["ime"]; Gornja linija ispisuje poruku u internet pregledniku koja se sastoji od konstantnog dela "Pozdrav" i dela u kome se ispisuje ono što je uneseno u text box polje u forma.php dokumentu. Iz ovog jednostavnog primera vidimo da se podacima iz forme pristupa pomoću odgovarajuće superglobalne promenjljive. Vrednost nekog elementa forme se nalazi unutar te superglobalne promenjljive na indeksu koji odgovara imenu tog elementa forme. U kojoj se superglobalnoj promenjljivoj nalaze podaci zavisi od izabrane metode prosljeċivanja podataka. U gornjem konkretnom primeru je metoda bila GET, tako da je korišćena superglobalna promenjljiva $_GET. Takodje primetite da su se podaci koje smo ispunili u forma.php dokumentu zalepili na link u prihvat.php dokumentu koji ispisuje te podatke. Na primer ako smo za ime napisali "Marko" onda će biti: Sve iza znaka? u gornjem linku se naziva QUERY STRING. Radi se o seriji parova imena i vrednosti meċusobno odvojenim znakom &. Uzgred moguće je ovim naĉinom preneti podatke sa jedne stranice na drugu ĉisto putem linkova. Naime, PHP-u je svejedno da li se podaci u query stringu ubacuju putem neke forme, ili se radilo o tagu u kojem je u href argumentu napisan url skupa sa query stringom. Znaĉi, ovo bi bio ekvivalent našoj formi iz primera, kada se u text box unese Marko <a href="prihvat.php?ime=marko">marko</a> Ĉak smo i izostavili drugu varijablu u query stringu pošto nam ona za sada nije potrebna u prihvat.php dokumentu. U b) delu ovog primera koristćemo POST metodu, odnosno superglobalnu $_POST: Dokument: forma.php <html><head> <title>primer2 a) ProsleĎivanje informacije GET metodom</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>prosleďivanje informacije GET metodom</h2> <form method="post" action="prihvat.php"> Unesi svoje ime:<br> <input name="ime" type="text" ><br> <input name="submit" type="submit" value="posalji"> </form> </body></html> [262]

263 Dokument: prihvat.php <? echo "Pozdrav ".$_POST["ime"];?> Princip prihvata podataka poslatih POST metodom je isti kao i kod prihvata podataka GET metode, sa razlikom što sada više nema query stringa i nije moguće direktno uticati na podatke nakon što je forma ispunjena i submitana. Sada moţemo napomenuti jednu zanimljivu ĉinjenicu. Otvorite formu sluĉaja b), ispunite je i submitajte. Kada se otvori prihvat.php refreshujte stranicu. Sada bi vas brauzer trebao pitati da li ţelite opet poslati podatke forme stranici te morate odabrati potvrdnu akciju ukoliko ţelite opet videtiprihvat.php. U sluĉaju da odaberete da ne ţelite opet poslati podatke dobijete error page (iako ovo zavisi o konfiguraciji samog brauzera). Sada pokušajte ovo isto uĉiniti za a) sluĉaj. Sada vas brauzer ništa ne pita već odmah prikazuje stranicu. Zbog ovoga je GET metoda puno praktiĉnija kada se rade forme za pretraţivanje, jer svako dodatno klikanje pri surfanju kroz sajt samo moţe iznervirati posetioca. TakoĊe, kod search formi je dodatna, već spomenuta, prednost ta što se query string sprema zajedno sa URL-om u favorite surfera, tako da se moţe opet vratiti na isto pretraţivanje nakon više dana jednostavnim odabirom bookmarka. Ova ĉinjenica takoċe dobro doċe kod debugiranja skripti za prihvat podataka forme. Ukoliko postoji greška u prihvat.php dokumentu moţete je ispraviti u editoru u kojem pišete skriptu, te nakon što saĉuvate izmene kliknete refresh u browseru i dokument će se prikazati ukoliko ste ispravili sve greške. Radi toga nije potrebno vratiti se na formu te je ponovo ispunite da bi testirali da li su sve greške ispravljene. HTML forme, PHP i srpska slova Problem Srpskih znakova leţi u nepravilnom i nedoslednom korišćenju charseta unutar svih dokumenata skripte. Pre izrade skripti dobra praksa je odluĉiti se za jedan (ili oba) charset taga te ga dosledno koristiti na svim dokumentima unutar sitea. Time ćete izbeći sve probleme. Ovo pravilo vredi i za rad sa bazom podataka. Obiĉno je dovoljno postaviti sledeće meta tagove izmedju<head><head> tagova: <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> U sluĉaju korišćenja charset-a u tekstovima na stranici moţemo preko tastature pisati domaća slova. Medjutim postoji mogućnost i nekorišćenja charset-a, ali onda moramo za svako naše slovo koristiti šifru. Te šifre su sledeće: Slovo Ć ć Ĉ ĉ Ń HTML kod Ć ć Č č Š Slovo ń Đ Ċ Ņ ņ HTML kod š Đ đ Ž ž [263]

264 HTML forme i PHP cod u jednom fajlu U srednjim i većim aplikacijama vrlo je nepraktiĉno imati odvojene dokumente za prikaz i obradu forme iz razloga što bi se broj dokumenata sajta popeo do tako velikog broja da bi postao problem praćenja šta je gde unutar strukture dokumenata sajta. Iz tog razloga je poţeljno formu i obradu forme drţati unutar istog dokumenta. <html><head> <title>prikaz i obrada forme unutar jednog dokumenta</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>prikaz i obrada forme unutar jednog dokumenta</h2> <? if (!$_POST["submitaj"]){?> <form method="post" action="<?=$php_self?>"> Unesi svoje ime:<br> <input name="ime" type="text" ><br> <input name="submitaj" type="submit" value="posalji"> </form> <? else{ echo "Pozdrav ".$_POST["ime"];?> </body></html> Kljuĉna stvar za logiku cele skripte je: if (!$_POST["submitaj"]){ Ova linija proverava da li postoji vrednost u elementu $_POST["submitaj"]. Ako smo ispunili formu i kliknuli na "Pošalji" $_POST["submitaj"] imaće vrednost te će se preskoĉiti iscrtavanje forme i prećiće se u "else" deo if strukture, to jest u deo za obradu forme. Ako pak nema vrednost onda će se ispisivati forma. Obiĉno nema vrednost kad prvi put otvaramo skriptu. Moramo napomenuti da u ovoj logici ima smisla proveravati samo vrednosti za submit gumbe jer se jedino sa njima garantuje postojanje vrednosti ili nepostojanje taĉno onda kad je šta potrebno. Recimo, u primeru nema smisla proveravati postojanje vrednosti u $_POST["ime"] kao uslov prikaza ili obrade forme, jer surfer moţda ne ispuni to polje, te bi mu se nakon submitanja forme nanovo prikazala. $PHP_SELF je promenjljiva koju definiše sam PHP. U njoj se nalazi ime trenutno aktivnog fajla. Pošto mi ţelimo da se forma prikaţe i obradi unutar istog fajla, to je taĉno ono što nama treba. Iako smo tu mogli upisati ime našeg dokumenta, korišćenje $PHP_SELF je preporuĉljivo, jer nekad moţemo promeniti ime našeg dokumenta, a u njemu će sve i dalje raditi kako je zamišljeno, zato što PHP sam namešta njenu vrednost. Ako ţelimo imati u jednoj formi više submit gumba, logika je malo drugaĉija. Razlozi za upotrebu više submit gumba u jednoj formi mogu biti razliĉiti. Na primer kada se radi neki administracijski alat, gde je potrebno napraviti više razliĉitih operacija nad istim podacima (recimo ţelimo omogućiti i brisanje jedne po jedne novosti u našoj news skripti, ali i ţelimo imati gumb koji bi obrisao sve poruke odjednom). Najbolje je ovo objasniti na konkretnom primeru. Primer se sastoji od forme sa dva submit gumba, i od obrade te forme unutar istog dokumenta. U obradi forme ćemo ispisati poruku koji je gumb iskorišćen. <html><head> <title>forma sa više submit gumba</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>forma sa više submit gumba</h2> <? [264]

265 if ($REQUEST_METHOD!="POST"){?> <form method="post" action="<?=$php_self?>"> <input type="submit" name="gumb1" value="gumb 1"><br> <input type="submit" name="gumb2" value="gumb 2"> </form> <? else{ if($_post["gumb1"]) echo "Pritisnuli ste gumb 1"; if ($_POST["gumb2"]) echo "Pritisnuli ste gumb 2";?> </body></html> Ovog puta smo kao uslov prikaza ili obrade forme koristili $REQUEST_METHOD jer neznamo koji je gumb kliknut. Poenta leţi u tome da će se nakon sumbitanja forme pomoću jednog od tih gumba popuniti vrednost unutar superglobalne $_POST varijable samo onog gumba koji je pritisnut, što dokazuje deo koda koji obraċuje formu. if ($_POST["gumb1"])echo "Pritisnuli ste gumb 1"; if ($_POST["gumb2"])echo "Pritisnuli ste gumb 2"; Napominjem, u ovim sluĉajevima nemoguće je koristiti GET metodu jer se tad u $REQUEST_METHODuvek nalaziti vrednost iako ne postoje podaci u query stringu, a to će prouzrokovati preskakanje ispisa forme. Drugo rešenje problema je da se u if-u napiše sledeća logika: if (!($_POST["gumb1"] or $_POST["gumb2"])){ Normalno, uoĉavate da bi sa ovom shemom morali navesti sve postojeće gumbe da osiguramo pravilno ponašanje našeg malenog sistema prikaza i obrade forme. To je jednostavno za mali broj gumba ali ako ih imamo desetak namuĉićemo se pisanjem. Kombinovanje POST i GET metoda kroz jednu formu U sluĉaju kada se unutar jednog PHP dokumenta nalazi više "delova" sitea, tu govorim o tzv. višenamenskim stranicama, koncept takvih dokumenata je da se na osnovu jedne (ili više) promenjljive iz query stringa surferu prikazuju potpuno razliĉiti delovi sitea. Recimo, ako surfer otvori link tipa prikazuje mu se lista svih novosti, a ako otvori link otvara mu se kontakt forma. Oĉito je da u ovom sluĉaju moramo nekako proslediti $_GET["nav"] varijablu kroz query string tako da sve radi kako treba. Ovo je moguće ukoliko se radi o formi sa POST metodom slanja podataka. Idemo pogledati primer pa će stvari biti jasnije. <html><head> <title>kombinovanje POST i GET metode prosljeďivanja podataka</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>kombinovanje POST i GET metode prosljeďivanja podataka</h2> <p>dobrodošli na višenamensku stranicu:</p> Delovi stranice:<br> <ul> <li><a href="<?=$php_self?>">početna stranica</a></li> [265]

266 <li><a href="<?=$php_self?>?nav=tekst">stranica sa tesktom</a></li> <li><a href="<?=$php_self?>?nav=forma">forma</a></li> </ul><br><br> <? switch case "forma": if (!$_POST["SBgumb"]){?> <form method="post" action="<?=$php_self?>?nav=forma"> Unesi svoje ime:<br> <input name="ime" type="text"><br> <input name="sbgumb" type="submit" value="pošalji"> </form> <? else{ echo "Polje ime sadrži vrednost: ".$_POST["ime"]; break; case "tekst":?> <p>ovo je deo stranice sa nekim većim tekstom koji služi samo za ilustraciju </p> <? break; default: echo "Nalazite se na početnoj stranici";?> </body></html> Već smo napisali da se ovde radi o višenamenskoj stranici koja je realizovana pomoću kontrolne varijable $_GET["nav"]. Zavisno od njene vrednosti naš dokument surferu vraća drugaĉiji ispis. if (! $_POST["SBgumb"]){?> <form method="post" action="<?=$php_self?>?nav=forma"> Unesi svoje ime:<br> <input name="ime" type="text"><br> <input name="sbgumb" type="submit" value="pošalji"> </form> <? else { echo "Polje ime sadrži vrednost: ".$_POST["ime"]; Kao što znamo action argument <form> taga sluţi za odreċivanje URL-a do dokumenta koji oĉekuje podatke iz te forme te ih obraċuje. Pošto je u ovom sluĉaju dokument koji prihvata podatke isti kao i onaj koji prikazuje formu kao prvi deo linka koristimo $PHP_SELF varijablu radi osiguravanja da će se opet otvoriti isti dokument. Ali, u ovom sluĉaju je problematika dodatno zakomplikovana time što se forma nalazi unutar višenamenske stranice i ukoliko nekako ne prosledimo vrednost i za $_GET["nav"]promenjljive nakon submitanja forme će se umesto koda za obradu forme pokrenuti default grana switch strukture. Iz tog razloga smo ruĉno "zalepili" na kraj action argumenta i query string sa vrednosti za $_GET["nav"] varijablu, tako da osiguramo da će se nakon submitanja forme opet pokrenuti pravilna grana switch-a (ona u kojoj se nalazi cod za prikaz i obradu forme). Pošto smo prosledili tu vrednost naša skripta će nakon submitanja pravilno obaviti obradu forme. Prva stvar je da moramo proslediti taĉnu vrednost za $_GET["nav"]. Ali druga, ne toliko oĉita stvar je da ovaj koncept ne radi ukoliko se radi o formi sa GET metodom. Problem leţi u samom HTML-u, tj HTTP protokolu. Naime, kada se formi daje GET metoda i u action argument te forme ruĉno upišemo link zajedno sa query stringom, taj query string će biti automatski zamenjen sa imenima i vrednostima elemenata iz forme. Ilustracije radi, pokušajte pokrenuti gornji primjer, samo promenite metodu slanja forme iz POST u GET. [266]

267 Ali, stvari ipak nisu toliko crne. Postoji naĉin kako "naterati" formu da ipak pravilno prosledi i$_get["nav"] varijabli nakon submitanja forme ukoliko se forma šalje GET metodom. Jedan od naĉina je da u formu dodamo, nevidljivo, polje imena "nav" te u njega spremimo pravilnu vrijednost, pa će mo imati sledeću formu: if (!$_GET["SBgumb"]){?> <form method="post" action="<?=$php_self?>"> <input name="nav" type="hidden" value="forma"> Unesi svoje ime:<br> <input name="ime" type="text"><br> <input name="sbgumb" type="submit" value="pošalji"> </form> <? else{ echo "Polje ime sadrži vrednost: ".$_GET["ime"]; Elementi HTML forme Postoji potreba za više razliĉitih naĉina prikupljanja podataka od korisnika pa zato postoje razliĉiti elementi forme. Svaki element forme ima neke svoje osobine. Neki elementi imaju mogućnost direktnog unosa podataka od strane surfera, dok mu drugi omogućuju da izabere jednu od ponuċenih vrednosti, neki se vide u formi a neke ne. Postoje sledeći elementi forme: Text box Text area Sakriveno polje / hidden field Checkbox Radio dugme Lista / meni select izbornik Polje za upload datoteka Dugmići U narednim opisima ovih elemenata formi zanemarićemo mnoge delove samog HTML-a poput davanja širine i visine polja i sliĉnih stvari za dizajn, već ćemo sekoncentrisati na kljuĉne delove elemenata forme. Ukoliko ţelite saznati više o samom HTML delu za dizajn elemenata forme predjite na HTML tutorijal i deo sa formama. Text box, Text area, Hidden skriveno polje i meni select izbornik Text box plje Text box polje ima sledeći tag: <input type="text" name="tekst" value="defaultna vrednost"> Ovo je element sa kojim smo se već upoznali, i mislim da ga nije potrebno previše komentarisati. Radi se o polju za unos jedne linije teksta. Ime pomoću kojeg mu pristupamo u PHP-u kao što znamo mu navodimo u name atributu. Ukoliko ţelimo da se pri uĉitavanju stranice u ovom elementu nalazi neka vrednost, to jest tekst moţemo je navesti pomoću value atributa. Value atribut nije obavezan. [267]

268 Text area Text area ima sledeći osnovni tag: <textarea name="velikitekst"></textarea> Text area sluţi za unos teksta od više redova. Korisnik moţe prebaciti unos teksta u novi red, i tako više puta. Pravila oko imenovanja su mu ista kao i za sve ostale elemente. Za razliku od text boxa, text area nema value atribut, već mu se defaultna vrednost zadaje na sledeći naĉin. <textarea name="velikitekst">defaulta vrednost</textarea> Kada ispisujemo novi red u text arei on će u njoj naravno i biti vidljiv. Medjutim uneti tekst se nakon PHP obrade ne prikazuje u izvornom obliku već novi redovi koje smo ubacili u tekst arei neće biti vidljivi u internet pregledniku, već će se sav tekst ispisati u jednom redu. Da bi se videli svi vaši novi redovi pri PHP obradi pre ispisa teksta u internet pregledniku koristite sledeću ugradjenu PHP funkciju: nl2br($_post["tekst"]); Da pojasnimo, radi se o tome da HTML u svom sourcu zanemaruje sve praznine, tj. više uzastopnih praznina interpretira poput jednog praznog prostora. To isto pravila vaţi i za prelazak u novi red u HTML sourcu. A naša funkcija menja sve nove redove ( \n ) sa HTML <br> tagom koji prebacuje ispis u novi red pri gledanju dokumenta u browseru. Hidden polje (skriveno polje) Hidden polje (skriveno polje) ima sledeći tag: <input type="hidden" name="nevidljivopolje" value="vrednost polja"> Kao što i samo ime elementa kaţe, radi se o polju koje nije vidljivo pri gledanju forme u browseru, te korisnik ne moţe direktno uticati na njenu vrednost. Vrednost koja se nalazi u takvom polju se mora namestiti direktno u sourcu dokumenta ili unosom u HTML source ruĉno ili pomoću PHP-a. Drugi naĉin promene vrednosti je dinamiĉki putem JavaScripta. Kao i kod text boxa, i ovde moţemo zadati value atribut. Pravila oko pristupa tim podacima su ista kao i kod text boxa, sa malom razlikom da u hidden polje moţemo spremiti tekst od više redova. Ovo polje obiĉno sluţi za pamćenje nekih vrednosti koje ne zavise direktno od surfera, te ih na ovaj naĉin štitimo od direktnog korisniĉkog unosa i izmene, ali moţe militantan surfer da ga indirektno promeni. Lista / meni select izbornik Za Lista / meni select izbornik daću samo KOD jer je sve uglavnom jasno na osnovu dosadašnjih analiza: <html><head> <title>izaberi lepšu curu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>izaberi lepšu curu</h2> <? if (!$_POST["drop"]){?> <body> <form method="post" action="<?$php_self?>"> <p><select size="5" name="cura" multiple> <option selected>suzica</option> <option selected>dara</option> [268]

269 <option selected>mila</option> <option selected>jana</option></select> <input type="submit" value="selektuj" name="drop"> <input type="reset" value="resetuj" name="reset"></p> </form> </body> <? else{ if ($_POST["cura"]=="Suzicica"){ echo "Lepša ti je Suza"; if ($_POST["cura"]=="Dara"){ echo "Lepša ti je Dara"; if ($_POST["cura"]=="Mila"){ echo "Lepša ti je Mila"; if ($_POST["cura"]=="Jana"){ echo "Lepša ti je Jana";?> </body></html> Checkbox Checkbox ima sledeći osnovni tag: <input type="checkbox" name="jezik" value="srpski"> Checkbox je element koji se uglavnom koristi u sluĉaju da korisniku ţelimo omogućiti da izabere jednu ili više vrednost iz nekog logiĉki povezanog skupa. Recimo, u gornjem primeru bi znaĉilo da naš surfer priĉa Srpski ukoliko je oznaĉio to polje, ili ga ne priĉa ukoliko ga je ostavio neoznaĉenim. Normalno, pošto se radi o grupi povezanih informacija trebali bismo ponuditi više jezika pomoću više checkboxova. Medjutim moţe se raditi o samo jednoj vrednosti, poput oznaĉavanja saglasnosti sa neĉim, na primer saglasnost "da" je kad je ĉekirano a "ne" kad nije ĉekirano. Kroz sledeće primere ću ilustrovati oba naĉina korištenja ovog elementa. Prvi primer je korišćenje jednog checkbox elementa: <html><head> <title>prihvat checkbox elementa</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>prihvat checkbox elementa</h2> <? if (!$_POST["SBgumb"]){?> <form method="post" action=""> <p><input type="checkbox" name="punoletan" value="1">punoletan sam i saglasan sam sa pravilima sajta</p> <p><input name="sbgumb" type="submit" value="ulaz"></p> </form> <? else{ if ($_POST["punoletan"]) { echo "Pošto si punoletan možeš dalje koristiti sajt"; else{ echo "Pošto nisi punoletan ne možeš pristupiti sadržaju sajta"; die(); [269]

270 ?> </body></html> Drugi primer je prihvat vrednosti iz više povezanih checkbox elemenata <html><head> <title>prihvat vrednosti više povezanih checkbox elemenata</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head><body> <h2>prihvat vrednosti više povezanih checkbox elemenata</h2> <? if (!$_POST["SBgumb"]){?> <form method="post" action=""> <p>koje od ponuďenih jezika govorite tečno?</p> <p> <input type="checkbox" name="jezik[]" value="engleski"> Engleski<br> <input type="checkbox" name="jezik[]" value="nemački"> Nemački<br> <input type="checkbox" name="jezik[]" value="francuski"> Francuski<br> <input type="checkbox" name="jezik[]" value="ruski"> Ruski</p> <p><input name="sbgumb" type="submit" value="pošalji"></p> </form> <? else{ if (is_array($_post["jezik"]) and count($_post["jezik"])>0){ echo "Jezici koje pričate su :"; foreach ($_POST["jezik"] as $pricam){ echo $pricam.", "; else{ echo "Vi ne govorite ni jedan od navedenih jezika.";?> </body></html> Kao što naziv primera kaţe, radi se o formi koja sadrţi više povezanih checkbox elemenata. Njihovo povezivanje u jednu celinu smo obavili tako što smo svima dali isto ime. U ovom sluĉajuname="jezik[]". Ali to nije sve što smo napravili. Primećujete uglaste zagrade na kraju imena? Ĉemu one sluţe? Odgovor na to pitanje leţi duboko unutar samog PHP-a i njegovog naĉina baratanja sa podacima koji dolaze iz forme. Sesija Osnovna ideja sesija je u tome da se omogući praćenje odredjenog posetioca sajta tokom cele njegove sesije (posete) na web lokaciji u tom trenutku ili kasnije kad se vrati na sajt. Ako to omogućimo neće biti teško da podrţimo registraciju korisnika. Od verzije PHP4 su standardno ugradjene funkcije za upravljanje sesijama. Kako se odvija sesija? Svakoj PHP sesiji PHP generiše i dodeljuje jedinstven identifikator, to jest nasumiĉno izabran i šifrovan broj. Taj identifikator se ĉuva na klijentskom raĉunaru dak traje sesija (poseta) korisnika sajtu. Identifikator se moţe smestiti u klijentski raĉunar i putem "kolaĉića", ili prosledjivanjem unutar URL-a. Sa druge strane identifikator sesije sluţi kao kljuĉ koji omogućava da se odredjene promenjljive registruju kao takozvane promenjljive sesije. Sadrţaj tih promenjljivih se ĉuva na serveru. Znaĉi identifikator sesije je jedini podatak [270]

271 dostupan na klijentskoj strani. Ako se drugaĉije ne zada vrednosti promenjljivih sesije se ĉuvaju na serveru u binarnim datotekama, ali za ĉuvanje tih podataka moţemo koristiti i bazu podataka ako napišemo namensku funkciju. Kolaĉići (COOKIE) i njihova upotreba Kolaĉić je kratak blok podataka koje skriptovi smeštaju na klijentske raĉunare. Kolaĉić moţete poslati iz PHP skripte pomoću funkcije SETCOOKIE sledećeg prototipa: int setcookie (string ime, string vrednost [, int vreme trajanja kolačića [, string putanja [, string ime domena [, int bezbedan]]]]); Parametri "ime" i "vrednost" su obavezni a ostali parametri su neobavezni. Parametar vreme trajanja kolaĉića je datum posle koga kolaĉić ne vaţi. Kolaĉić vaţi neograniĉeno (ili dok ga klijent ne izbriše ruĉno) ukoliko nije zadat parametar vreme trajanja kolaĉića. Putanja i ime domena mogu se upotrebiti da bi se zadala konkretna adresa stranica na koje se kolaĉić odnosi. Parametar bezbedanznaĉi da se kolaĉić neće slati putem obiĉne nezaštićene HTTP veze. Ako kolaĉić zadamo na primer ovako: setcookie ("kolacic", "vrednost"); Kada korisnik lista stranice sajta, ili kad korisnik sledeći put poseti tu web lokaciju sadrţaju kolaĉića moţemo pristupiti putem elementa niza $_COOKIE["kolacic"]. Kolaĉić moţete izbrisati pomoću iste funkcije setcookie kojoj će te zadati isto ime i vrednost ali i datum i to takav da je iz prošlosti. Kolaĉić u PHP skriptama moţete poslati i preko zaglavlja pomoću funkcije HEADER koristeći sledeću sintaksu za kolaĉiće: header (set-cookie: IME=VREDNOST; [expires=datum;] [path=putanja;] [domain=ime_domena;] [secure]); Napomena da se zaglavlje za kolaĉiće (header) moraju poslati pre svih drugih zaglavlja. Uzrok tog ograniĉenja su sami kolaĉići a ne PHP. Kolaĉići uvode nove probleme jer neki web ĉitaĉi ih ne podrţavaju a neki korisnici zabranjuju upotrebu kolaĉića u svojim ĉitaĉima weba. Zbog toga moramo u PHP sesijama da koristimo istovremeno i kolaĉiće i primenu URL-a. Putem URL-a moţemo ruĉno ugraditi identifikator sesije i to putem konstante SID na sledeći naĉin: echo '<a href = "link.php?<?=sid?>">'; Programiranje sesija Osnovni koraci upotrebe sesija su sledeći: Otvaranje sesije [271]

272 Registrovanje promenjljivih sesije Upotreba promenjljivih sesije Poništavanje promenjljivih sesije i uništavanje sesije Ne moraju uvek svi koraci koji su gore nabrojani da se sprovedu u jednu skriptu, a onaj zadnji moţe i potpuno da se izostavi. Da bi smo koristili sesije najpre moramo da zapoĉnemo sesiju. Zapoĉinjanje sesije moţe da se ostvari na tri naĉina. Prvi i najjednostavniji je da na samom poĉetku skripte pozovete funkciju session_startna sledeći naĉin: session_start(); Ova funkcija ispituje da li je tekućoj sesiji već dodeljen identifikator. Ako nije, funkcija ga generiše, a ako jeste funkcija uĉitava tekuće vrednosti registrovanih promenjljivih sesije da bi mogli da ih koristite u nastavku skripte. Na drugi naĉin sesiju moţete zapoĉeti ako registrujete promenjljivu sesije tako što ćete pozvati funkciju session_register. I treći naĉin zapoĉinjanja sesije jeste da PHP podesite tako da automatski zapoĉinje sesiju ĉim neko stigne na web lokaciju. To se postiţe pomoću opcije session.auto_start u fajlu php.ini. Otvaranje, upotreba i poništavanje promenjljivih sesije Od PHP4.1 pa nadalje promenjljive sesije se smeštaju u superglobalni niz $_SESSION. Da bi ste napravili promenjljivu sesije treba samo da zadate vrednost nekom elementu tog neza, kao u sledećem primeru: $_session['prom']=5; Da bi neka promenjljiva sesije bila dostupna morate najpre zapoĉeti sesiju, na primer funkcijomsession_start(). Posle toga promenjljivoj sesije moţete pristupiti putem niza $_SESSION. Kada završite sesiju i kada vam odredjena promenljiva sesije više ne treba moţete je poništiti. Vrednosti elemenata niza $_SESSION moţete poništiti direktno na primer korišćenjem unset() funkcije kao za obiĉne promenjljive na sledeći naĉin: unset ($_SESSION['prom']); A ako ţelite da poništite sesiju prvo morate poništiti sve vrednosti sesije pa zatim i samu sesiju sledećom funkcijom: session_destroy(); Sve ovo moţda izgleda previše apstraktno zato navešćemo jedan prost primer sajta od tri stranice na kojima demonstriramo sve korake u sesijama, od otvaranja sesije pa do gašenja sesije. Prva stranica neka bude u fajlu strana1.php, druga strana2.php i treća strana3.php i sve tri strane stavimo u isti folder: strana1.php: <? session_start(); $_SESSION['promenjljiva_sesije1']='povrce'; $_SESSION['promenjljiva_sesije2']='voce'; [272]

273 echo 'promenljive sesije imaju vrednost:<br>'; echo $_SESSION['promenjljiva_sesije1'].'<br>'; echo $_SESSION['promenjljiva_sesije2'].'<br><br>';?> <a href="strana2.php">sledeca STRANA</a> strana2.php <? session_start(); echo 'promenljive sesije imaju vrednost:<br>'; echo $_SESSION['promenjljiva_sesije1'].'<br>'; echo $_SESSION['promenjljiva_sesije2'].'<br><br>'; unset ($_SESSION['promenjljiva_sesije1']); unset ($_SESSION['promenjljiva_sesije2']);?> <a href="strana3.php">sledeca STRANA</a> strana3.php <? session_start(); echo 'promenljive sesije imaju vrednost:<br>'; echo $_SESSION['promenjljiva_sesije1'].'<br>'; echo $_SESSION['promenjljiva_sesije2']; session_destroy();?> Rezultat izvršenja prve i druge strane je isti i izgleda: promenljive sesije imaju vrednost: povrce voce SLEDECA STRANA Kad kliknemo na zadju stranu onda je rezultat: promenljive sesije imaju vrednost: Vidimo da vrednosti promenljive $_SESSION se prenose na sve strane u kojima je otvorena sesija funkcijom session_start(). Na kraju druge skripte poništavamo registrovane vrednosti promenjljivih sesije ali ne i sesiju. Da je postojala treća promenjljiva sesije i da nju na primer nismo poništili njena vrednost bi se prenela na treću stranicu. Tek nakon funkcijesession_destroy () sesija se ponistava. Registracija U ovom poglavlju zapravo nećete videti ništa novo u vezi same PHP teorije ali videćete izradu jednog od najbitnijeg dela sajtova, a to je registracija korisnika. [273]

274 Postoje sajtovi kod kojih nije potrebna registracija posetilaca. Takvi su na primer edukativni sajtovi. Medjutim kod većine sajtova neophodno je da se prepozna registrovani korisnika od onih koji nisu. Postoje sledeći elementi registracije: Registracijski nalog, je deo gde surfer unosi korisniĉko ime (username), šifru (password) i još neke podatke. Najbitniji su username i password jer pomoću njih će se uvek identifikovati korisnik na sajtu. Delovi registracijskog naloga mogu biti raznovrsni ali uglavnom sadrţi dva globalna dela. Prvi deo je HTML deo registracijskog naloga u kome se unose podaci preko HTML forme, a drugi je PHP deo registracijskog naloga gde se obradjuju podaci dobijeni iz HTML dela. Drugi deo se moţe podeliti grubo na bezbedonosni deo i deo za obradu i prosledjivanje podataka dobijenih iz HTML forme u MySQL bazu. Login, u kome surfer ubacuje username i password kako bi ušao na sajt kad god mu pristupa sa bilo kog raĉunara. I login u globalu ima dva dela i to HTML login deo koji sadrţi formu za ubacivanje username i password, i PHP login deo gde se obradjuju podaci dobijeni iz HTML login dela. Ovaj drugi login deo takodje mora da sadrţi bezbedonosni deo i deo koji izvlaĉi podatke iz baze kako bi identifikovao korisnika. Drugi deo moţe da sadrţi i deo koji šalje bazi neke podatke ako je tako osmišljen sajt da prati na primer statistiku registrovanih posetilaca, i sliĉno. Logout je deo koga surfer obiĉno samo jednim klikom sprovodi da bi obrisao sesiju i kolaĉiće u tom brauzeru. Na primer, razlog moţe biti taj da raĉunar sa koga je pristupio sajtu koriste i drugi surferi i ne ţeli da neko vidi njegove podatke ili da mu neko promeni profil. Napomena je da time surfer ne briše svoj profil na sajtu već samo sesiju i kolaĉiće sa tog raĉunara. Kasnije kad poţeli da koristi sajt samo se uloguje, a ne treba ponovo da se registruje. Zaboravljena šifra. Ĉesto puta se dešava da surfer zaboravi šifru a ima potrebu da pristupi sajtu. Zato moramo omogućiti opciju da surfer sazna širu i opet pristupi svom registrovanom nalogu. To se obiĉno ostvaruje tako što surfer ubaci svoju mejl adresu a sajt automatski preko ovog dela zaboravljena šifra šalje na mejl novu ili istu šifru od ranije. Kako samo taj surfer ima pristup svom mejlu mi smo na taj naĉin obezbedili legitimnost korisnika. Promena šifre, ili podataka koje je surfer uneo prilikom registracije. Podaci koje surfer prilikom registracije unosi mogu vremenom da se promene. Na primer mesto stanovanja, brojevi telefona, opredelenja, itd. Zato je potrebno ostaviti mogućnost da registrovani korisnik promeni podatke koje je uneo prilikom registracije, i to neke ili sve u zavisnosti od tipa sajta. Brisanje registrovanog naloga na sajtu, je kompletno brisanje svih podataka koje je uneo korisnik prilikom registracije. Ako bi kasnije taj surfer hteo da pristupi sajtu tretira se kao bilo koji neregistrovan posetilac. Medjutim to moţemo i izmeniti, sve zavisi od vrste sajta i kako ga osmislmo. HTML deo registracijskog naloga HTML deo registracijskog naloga obiĉno sadrţi CAPTCHA, username, password, ponovni password,mejl, submit dugme i, reset dugme. CAPTCHA deo se koristi da odredi da li je korisnik ĉovek ili program. Traţi se od korisnika da ispiše u formu nekoliko brojeve i slova koja su prikazana u iskrivljenoj slici. Pošto bi raĉunar trebalo da bude nesposoban da reši taj test, svaki korisnik koji unese taĉan odgovor se smatra ĉovekom. Razlog korišćenja ovoga je spreĉavanje spama. Oglašivaĉi ĉesto prave botove - programe koji krstare internetom i prave po forumima i portalima registracijske naloge kako bi u duskusijama generisali na hiljade reklamnih poruka u vrlo kratkom vremenu. Drugi razlog je što se spreĉava automatsko [274]

275 pravljenje velikog broja registracijskih naloga u jako kratkom vremenu sa ciljem da se iscrpu svi resursi u bazi podataka i time blokira sajt. Captcha se sastoji iz tri dela. Prvi deo je implementiran u HTML delu registracijskog naloga, a drugi dva dela su u zasebnom fajlu pod nazivom na primer kapca.php. Fajl kapca.php sadrţiencode_decode() funkciju i PHP kod za generisanje CAPCHA slike. Captcha deo koji je implementiran u HTML delu registracijskog naloga moţe izgledati ovako: Kontrolni tekst: <? $slova= array('w','r','y','u','p','s','d','f','h','k','l','z', 'x','c','v','b','m','2','3','4','8','9'); srand ((float) microtime()* ); shuffle ($slova); $ttekst = "$slova[1]"."$slova[2]"."$slova[3]"."$slova[4]"."$slova[5]"."$slova[6]"; $ttekst = encode_decode($ttekst,'k');?> <br> <img src="kapca.php?code=<?=$ttekst;?>"> <a href="registracija.php">izmeni sliku</a><br> Unesi tekst sa slike: <input type="text" name="kapca" size="10" maxlength="6"> <input type="hidden" name="ttekst" value="<?echo $ttekst;?>"> Napomena je da na poĉetku skripte mora da stoji include iskaz koji će umetnuti fajl kapca.php. Objasnimo sad gornji kod. U nizu $slova smeštamo sva potencijana slova koja ţelimo da se iscrtavaju na slici. Zatim, ugradjenom funkcijom shuffle($slova) u kombinaciji sa funkcijom srand((float) microtime()* ), svaki put kad se zatraţi izvršenje captcha menjamo redosled elemenata niza$slova sluĉajnim odabirom, ĉime dobijamo uvek razne kombinacije slova i brojeva. Zatim kreiramo promenjljivu $ttekst na primer duţine od 6 znaka ĉija vrednost se u stvari i lepe na sliku. Tu promenjljivu šaljemo odatle na dva mesta. Prvo mesto je u PHP kod za generisanje CAPCHA slike na sledeći naĉin: <img src="kapca.php?code=<?=$ttekst;?>"> A drugo mesto je u PHP delu registracijskog naloga kako bi smo tamo uporedli tekst sa slike koji je ukucao posetilac sa stvarnim tekstom na slici, i to kroz sledećeg HTML dela registracijskog naloga: <input type="hidden" name="ttekst" value="<?echo $ttekst;?>"> A korisnik ukucava tekst sa slike u sledećem elementu forme: Unesi tekst sa slike: <input type="text" name="kapca" size="10" maxlength="6"> Ovaj kod ne treba posebno objašnjavati ali treba reći da smo veliĉinu polja odredili da bude 10 unosa znakova a broj unosa znakova 6. Ovde treba još reći da po nekad tekst sa slike moţe biti neĉitljiva pa zato treba dati mogućnost da korisnik menja tekst na slici. To vršimo sledećim kodom: <a href="registracija.php">izmeni tekst sa slike</a><br> Da ne bi komplikovao kod ja sam u stavio ovde da se klikne na link za registraciju jer tako će uvek da se prikaţe slika sa novim tekstom. Ali treba napomenuti da tad CAPTCA mora biti na samom poĉetku forme, jer glupo je dozvoliti korisniku popunjavanje svih polja a na kraju kad dodje do CAPTCHA i kad promeni sliku ujedno i izbriše sve što je popunio. Naravno kao što rekoh moţe se napraviti da unete podatke stavimo u "value" vrednosti elemenata forme pa da [275]

276 captcha bude na kraju forme za registraciju ali ovo je edukativni tekst pa da ga ne komplikujemo previše jer i ovako solidno moţe da se odradi poso ĉak i kod profesionalnih formi za registraciju. E sad kako bi CAPTCHA zaštita bila zaštita u pravom smislu te reĉi obavezno treba da se "izvorni" tekst koga lepimo na slici ne vidi u formi!!!!!!!! A kao što uoĉavamo mogo bi se videti na dva mesta u formi, i to kad ga šaljemo slici da ga zalepi i preko hidden polja kad ga prosledjujemo PHP skripti na obradu, jer neko moţe jednostavno pogledati HTML izgled našeg registracijskog naloga. U PHP-u je naravno korisniku nevidljiv ovaj tekst (izmedju znakova za poĉetak i kraj PHP koda). Osnovno je pitanje znaĉi kako sakriti taj tekst? Rešenje je zapravo šifrovati taj tekst u našojcaptcha funkciji encode_decode($ttekst,'k'). A u PHP delu registracijskog naloga koji obradjuje unos iz forme mi trebamo dekodovati taj tekst i uporediti ga sa onim koga je uneo korisnik. Ako je isti onda dozvoljavamo registraciju a ako je korisnik pogrešio tekst onda ga vraćamo na ponovno pisanje. Takodje i u PHP kodu za generisanje CAPCHA slike trebamo dekodovati tekst kako bi ga zalepili na sliku. Funkcija za šifrovanje encode_decode($ttekst,'k') odnosno dešifrovanje encode_decode($ttekst,'d')treba u globalu da obezbedi sledeće: A24HGU - Tekst pre šifrovanja 1ć*'00#G%4K/(? - Tekst nakon šifrovanja koji se ispisuje u formi na ona naša dva mesta gde je vidljiv tekst A24HGU - Tekst nakon dekodovanja. Kao što vidimo osnovno i glavno je da bude isti sa tekstom pre šifrovanja! Funkciju za kodovanje i dekodovanje moţemo praviti na mnogo naĉina. Na primer jedan od naĉina je da se brojevi i slova prebace funkcijom ord() u ASCII brojeve, pa tako dobijeni brojevi da se nekim sloţenijim matematiĉkim obrascem šifriraju. Obiĉno se taj matematiĉki obrazac sastoji od operatora+, - i * a deljenje nije preporuĉljivo jer unosi decimalne ostatke pa moţe izazvati grešku prilikom dekodovanja, ali i moţe ako budemo paţljivije osmišljavali jednaĉinu. Kasnije kad se dešifruje sve to isto uradimo samo obrnutim redosledom kako bi smo dobili dešifrovani tekst koji je identiĉan tekstu pre šifrovanja. Naravno glupo je da vam ispisujem neku funkciju za kodovanje i dekodovanje jer poenta je u tome da funkcija koju koristite bude jedinstvena. Funkcija za prebacivanje ASCII broja uascii znak je chr(). Pored ofih funkcija u kode dekode funkcijama koje kreiramo vrlo ĉesto se koristi i funkcija strlen() za odredjivanje duţine znakovnog niza. Vratimo se sad kodu za prikaz CAPTCHA slike u HTML formi: <img src="kapca.php?code=<?=$ttekst;?>"> Kao što vidimo ovo nije poziv "klasiĉne" slika na primer kao što je <img src="kapca.jpg">. Zapravo naš editor slike je u stvari slika, to jest "programibilna slika". Adresa te nazovimo "programibilne" slike jekapca.php?$ttekst. Znaĉi kroz komandnu liniju šaljemo šifrovan tekst slici kako bi ga zalepila. Konaĉno pogledajmo sad kod fajla kapca.php: <? include ('funkcije.php'); $slova = encode_decode($_get['code'],'d'); $ime = array('1.png','2.png','3.png'); srand ((float) microtime()* ); shuffle ($ime); $a = $ime[1]; $im = imagecreatefrompng($a); $black = imagecolorallocate($im, rand(0,100), rand(0,100), rand(0,100)); imagettftext ($im, 25, rand(5,6), rand(2,50), 38, $black, 'star.ttf', $slova); header ("Content-type: image/png"); imagepng ($im); [276]

277 imagedestroy ($im); // ovde u nastavku je još i sadržana naša encode - decode funkcija encode_decode()?> Prisetimo se onog dela kad smo objašnjavali upload slika i lepljenje teksta zaljubi.com na slici. Kao što vidimo gotovo je identiĉan tako da je tamo dato potpuno objašnjenje ovog koda pa se neću ponavljati. Ovde ću samo objasniti funkciju na primer rand(0, 100). Ovom funkcijom, ovako napisanom sluĉajno generišemo jedan broj iz opsega od 0 do 100. Vidimo da sam ĉesto koristio ovu funkciju a razlog tome je da bi se slova lepila na slici u razliĉitim veliĉinama sluĉajno izabranih, da bi se ugao pod kojim se ispisuju slova sluĉajno menja, da bi se boja slova sluĉajno menjala itd. Drugim reĉima što više unesemo sluĉajnih parametara to je teţe napraviti program za skeniranje slike. Sada nakon objašnjenja CAPTCHE nastavimo sa sledećim delom forme za kreiranje naloga kod registracije korisnika. Ostali minimalni HTML elementi registracijskog naloga kao što smo rekli su: username, password, ponovni password, mejl, submit dugme i, reset dugme. Već smo se upoznali sa karakteristikama ovih elemenata formi a ovde ću dati objašnjenje eventualno onih delova koji nisu bas poznati. Evo prvo koda: Username: <br> <input type="text" name="username" size="25" maxlength="20"><br> (max 20 i min 3 znaka. Unesite samo mala i velika slova, brojeve, donju crtu "_", bez razmaka) <br><br> Password:<br> <input type="password" size="10" maxlength="8" name="password1"><br> (max 8 i min 5 mala i velika slova i brojevi bez razmaka) <br><br> Ponovi isti password:<br> <input type="password" size="10" maxlength="8" name="password2"> <br><br> Upisite vas mejl:<br> <input type="text" name="mejl" size="60" maxlength="60"><br> <br><br> <input name="registracija" type="submit" value="registruj"> <input type="reset"> Ovde se susrećemo sa jednim novim elementom forme a to je polje za registraciju. Zapravo to je gotovo identiĉan element kao i i text polje stom razlikom što kad ukucavamo širu pojavljuju se taĉkice a ne slova. Slova su u našim mislima :) radi bezbednosti da neko iz naše okoline krišom ne vidi šifru koju upisujmo. PHP deo registracijskog naloga Zapravo i ovde nema ništa nepoznatog jedino ću objasniti strukturu koda i njene funkcije. Najpre da dam COD cele skripte za registraciju koga moţete staviti na primer u registracija.php: <? include('funkcije.php'); include('vezabaza.php'); if ($greska=$_get['greskaa']){unset($_post); switch ($greska){ [277]

278 case 1: echo 'Sintaksna greska u mejlu. Molimo popunite sve pazljivije.';break; case 2: echo 'Lose ste prepisali slova sa kontrolne slike. Molimo popunite sve pazljivije.';break; case 3: echo 'Niste popunili sva polja. Molimo popunite sve pazljivije.';break; case 4: echo 'Niste uneli isti pasword u oba polja. Molimo popunite sve pazljivije.';break; case 5: echo 'U neko polje uneliste nedozvoljen znak, ili previse znakova. Molimo popunite sve pazljivije.';break; case 6: echo 'Izvinjavamo se, nastala je greska sa nase strane. Molimo registrujte se iznova.';break; case 7: echo 'Na zalost izabrali ste vec zauzet ussername. Izaberite drugi i popunite opet sve.';break; case 8: echo 'Vec ste registrovani. Kliknite OVDE da zatrazite lozinku.';exit; default: break; if ($d=$_get['d'] and $u=$_get['u']){ $sql="select username, aktivacija from korisnici where korisnikid='".$d."'"; if (!$q=mysql_query($sql)){ $greska=6; header("location: registracija.php?greskaa=$greska"); exit; while ($redak = mysql_fetch_assoc($q)) { $username=$redak["username"]; $aktivacija=$redak['aktivacija']; if ($u==$username and $aktivacija==0){ $sql="update korisnici SET aktivacija='1'where korisnikid=$d"; if (!mysql_query($sql)){ $greska=6; header("location: registracija.php?greskaa=$greska" ); exit; echo 'REGISTROVANI STE. KLIKTANJEM NA LINK'.'<a href="login.php">login</a>'; exit; else{ exit; if (!$_POST["registracija"]){?> <html><head><title>registracija</title></head> <body> <h1>registracija</h1> <form method="post" action="registracija.php"> Kontrolni tekst: <? $slova=array('w', 'r', 'y', 'u', 'p', 's', 'd', 'f', 'h', 'k', 'l', 'z', 'x', 'c', 'v', 'b', 'm', '2', '3', '4', '8', '9'); srand ((float) microtime()* ); shuffle ($slova); $ttekst = "$slova[1]"."$slova[2]"."$slova[3]"."$slova[4]"."$slova[5]"."$slova[6]"; $ttekst = encode_decode($ttekst, 'k');?> <br> <img src="kapca.php?code=<?=$ttekst;?>"> <a href="registracija.php">izmeni sliku</a><br> Unesi tekst sa slike:<input type="text" name="kapca" size="10" maxlength="6"> <input type="hidden" name="ttekst" value="<?echo $ttekst;?>"> <br><br> Username :<br> <input type="text" name="username" size="25" maxlength="20"><br> (max 20 i min 3 znaka. Unesite samo mala i velika slova, brojeve, donju crtu "_", bez razmaka) <br><br> Password :<br> <input type="password" size="10" maxlength="8" name="password1"><br> [278]

279 (max 8 i min 5 mala i velika slova i brojevi bez razmaka) <br><br> Ponovi isti password :<br> <input type="password" size="10" maxlength="8" name="password2"> <br><br> Upisite vas mejl :<br> <input type="text" name="mejl" size="60" maxlength="60"><br> <br><br> <input name="registracija" type="submit" value="registruj"> <input type="reset"> <br><br> </form></body></html> <? else { $username = $_POST['username']; $password1 = $_POST['password1']; $password2 = $_POST['password2']; $kapca = strtolower($_post['kapca']); $mejl = $_POST['mejl']; $ttekst = encode_decode($_post['ttekst'], 'd'); if (!filter_var($mejl, FILTER_VALIDATE_ ) or strlen($mejl) > 60) { $greska = 1; header("location: registracija.php?greskaa=$greska"); exit; if ($kapca!= $ttekst) { $greska=2; header ("location: registracija.php?greskaa=$greska"); exit; if (!$username or!$password1 or!$password2 or!$mejl) { $greska = 3; header ("location: registracija.php?greskaa=$greska"); exit; if ($password1!= $password2) { $greska = 4; header ("location: registracija.php?greskaa=$greska"); exit; if(!ereg("^[a-za-z0-9_]{3,20$", $username) or!ereg("^[a-za-z0-9]{5,8$",$password1)) {$greska = 5; header ("location: registracija.php?greskaa=$greska"); exit; $password1 = crypt($password1, $username); $sql = "SELECT username, korisnickimejl FROM korisnici"; if (!$q = mysql_query($sql)) { $greska=6; header ("location: registracija.php?greskaa=$greska"); exit; while ($redak = mysql_fetch_assoc($q)){ if($redak["username"] == $username){ $greska = 7; header ("location:registracija.php?greskaa=$greska"); exit; if($redak["korisnickimejl"] == $mejl) { $greska = 8; header ("location: registracija.php?greskaa=$greska"); exit; $datum = DATE ('Y-m-d H:i:s'); $IP = $_SERVER['REMOTE_ADDR']; $aktivacija = 0; $sql = "insert into korisnici (korisnickimejl, username, userpassword, datumregistracije, zadnjipristup, IP, aktivacija) values ('".$mejl." ',' ". $username. " ',' ". $password1. " ',' ". $datum. " ',' ". $datum. " ',' ". $IP. " ',' ". $aktivacija. " ')"; if (!mysql_query($sql)) { $greska = 6; header ("location: registracija.php?greskaa=$greska"); exit; $sql = "select korisnikid from korisnici where username = ' ". $username. " ' "; if (!$q = mysql_query($sql)) { $greska = 6; header ("location: registracija.php?greskaa=$greska"); exit; while ($redak=mysql_fetch_assoc($q)) { $korisnikid = $redak["korisnikid"]; $poruka = formaregistracija($username,$password2,$korisnikid); if(slanjemejla ($mejl,'registracija',$poruka)){ echo 'OCEKUJTE MEJL ZA DOVRSETAK REGISTRACIJE.'. ' <a href=" else{ $greska = 6; header ("location: registracija.php?greskaa=$greska"); exit; exit; [279]

280 ?> NASTAVAK SLEDI USKORO WEB dizajn Šta je web dizajn? Laici ĉesto misle da je web dizajn vizuelno uredjivanje internet stranice. Medjutim, vizuelno uredjivanje je grafiĉki dizajn, i to je samo jedan u nizu bitnih segmenata u web dizajnu. Zapravo web dizajn obuhvata sve radnje od trenutka kad dobijemo ideju da napravimo sajt, pa do trenutka kad je sajt potpuno završen. Web dizajn obuhvata sledeće: Osmišljavanje sadrţaja sajta Odabir naziva sajta, registracija domena i zakupljivanje hosta Grafiĉki web dizajn Programiranje sajta FTP konekcija na host Optimizacija sajta za pretraţivaĉe i indeksiranje sajta na pretraţivaĉe (poznatije kao SEO) Sadrţaj sajta je najbitniji element web dizajna. Zapravo, sadrţaj je glavni pokretaĉ ideje kreiranja sajta, ali i glavna stvar za uspeh nekog sajta. Ako posetioci ne nadju ono zbog ĉega su i došli na Vaš sajt, oni u ogromnoj većini nikad više se neće vratiti na njoj. Medjutim, i ako nadju te informacije to ne znaĉi da će vaš sajt biti uspešan. Da bi bio uspešan posetioci svaki put kad se vrate na sajt moraju naći to šta im treba, što znaĉi da vrlo ĉesto morate osveţavati vaš sadrţaj na sajtu sa aktuelnim i sveţim informacijama. Moţete napraviti idealan vizuelni izgled sajta, kao i upotrebiti najbolja programka rešenja, ali ako je sadrţaj bezvredan sajt je osudjen na neuspeh. Medjutim, ukoliko je sadrţaj jedinstven, jako zanimljiv, potreban ciljnoj grupi, stalno se osfeţava sa novim aktuelnim informacijama onda ĉak i ako je vizuelni izgled slabiji sajt ima velike izglede na uspeh. Postavlja se pitanje ovde šta je zapravo uspeh sajta? Da bi smo odgovorili na to pitanje moramo najpre videti kakvi sve sajtovi postoje: Forumi Blogovi e-trgovine Liĉni sajtovi Prezentacije firmi Sajtovi za vesti Sajtovi za komunikaciju i upoznavanje Portali Obrazovni sajtovi Specifiĉni sajtovi Iz samog ovog spiska vidite da postoje razni ciljevi sajtova u zavisnosti od svoje namene. Samim tim, pošto je cilj raznovrstan, i uspeh se razliĉito definiše. Neko će reći da je glavni cilj i uspeh svih sajtova stalno povećanje posete sajtu. Medjutim, to jeste glavni cilj skoro svih gore nabrojanih sajtova, ali ne baš svih. Na primer e-trgovina moţe imati izuzetnu posetu (zbog recimo dobre reklame), ali ako se preko sajta nedovoljno prodaje onda se sa pravom moţe reći da je sajt neuspešan. Sajtovima prezentacijama firmi nije primarna takodje poseta, već da posetioci koji imaju potrebe za uslugama te firme i ostvaruju te usluge, itd. U zavisnosti od sadrţaja sajta mi definišemo kojoj grupi sajtova će on pripadati, a na osnovu grupe odredjujemo naĉin dizajniranja sajta. Sam grafiĉki izgled sajta zavisi i od grupe sajtova kojoj pripada, ali u velikoj meri i od ciljne grupe sajta. E sad naravno grafiĉki dizajn mora biti jedinstven, ali ipak mora zadovoljiti neke standarde u zavisnosti od ciljne grupe kojoj je namenjen. Programski dizajn mora zadovoljiti odredjene kriterijume u većoj meri od grafiĉkog dizajna. [280]

281 Programski dizajn mora zadovoljiti kriterijume koji se oĉekuju za taj tip sajtova. Na primer normalno je da se vizuelno priliĉno razlikuju sajtovi za decu i sajt nekog ministarstva, ali ako su i jedan i drugi portali onda programski elementi sajta mogu biti priliĉno sliĉni. Kakve ciljne grupe sve postoje? Pod "ciljne grupe" se ne podrazumevaju samo pojedinci, pa hajde da vidimo spisak: Ljudi koji traţe posao Ljudi koji traţe zabavu (muzika, video, PC igre, upoznavanja itd) Firme Istraţivaĉi Ljudi koji traţe proizvode i usluge (razna fiziĉka roba, putovanja, hoteli, avio karte, poštanske i telekomunikacione usluge, itd) Poslovne informacije raznog tipa (gradjevinarstvo, pravo, ekonomija, zdravstvo, veterina, poljoprivreda itd.) Mladji ljudi Ljudi srednjih godina Sredoveĉni ljudi itd. Svaki pojedinac moţe pripadati većem broju ciljnih grupa od trenutka do trenutka. Na primer u jednom trenutku moţemo traţiti posao, ali u drugom da traţimo zabavu. Ali ipak u globalu se oĉekuje da u većini sredoveĉni ljudi, ili pak ljudi srednjih godina gotovo nikad ne posete neki sajt koji za sadrţaj ima berzu poslova. Znaĉi po pravilu berzu poslova posećuju mladji ljudi, te u skladu sa tim tako ga i grafiĉki uredjujemo. Domen i vrsta sajtova Šta je internet domen? Domen (ili URL) sa imenom sajta predstavlja vašu adresu na internetu. Domen praktiĉno predstavlja ime preko kog će biti pozivan vaš sajt u brauzerima. moj-sajt je ime sajta, a struĉan naziv je segment domena. A.com je domen sajta, odnosno struĉno ekstenzija domena. Segment moţe sadrţati cifre (0-9), slova engleskog alfabeta (a-z) i crticu (-). Duţina segmenta ne sme biti kraća od 2, niti duţa od 63 znaka. Segment ne sme da sadrţi crticu na poĉetku ili kraju, a takodje ne sme da sadrţi uzastopne crtice na trećoj i ĉetvrtoj poziciji. Ekstenzije domena su klasifikovane na više naĉina. Imamo:.com koji oznaĉava komercijalne domene,.net koji se odnosi na stranice koje svoje poslovanje direktno vezuju za internet,.org se odnosi na organizacije i tako dalje. Ovo su samo neki od takozvanih domena najvišeg reda. Ekstenzije domena su klasifikovane i po geografskom poloţaju, pa tako imamo npr..sr - Srbija,.ba - Bosna,.us,.uk i druge domene koji oznaĉavaju domene pojedinih drţava. U okviru geografskih domena razlikujemo i domene po svojoj vrsti tako da imamo.co.rs domen koji se odnosi na komercijalne stranice u okviru.rs domena, itd. Registracija domena i zakup hostinga Ime sajta je veoma vaţna stavka u web dizajnu. Odabirom imena vi u stvari pravite brand sajtu. Takodje je bitno izabrati ime koje se lako pamti, i po mogućstvu koristi vrlo ĉesto u svakodnevnom govoru. Jer pamtljivi domeni imaju više šanse da ĉitaoce vaše stranice vrati natrag. Naravno ime sajta treba izabrati tako da ima veze sa temom vašeg sajta. Na primer glupo je za ime staviti cmokićako sajt prezentuje neku ozbiljnu banku. Obiĉno se za naziv sajta firme bira sam naziv firme, a ako ima više reĉi one se odvajaju crticom. Ime sajta je priliĉno bitna stavka i za pretraţivaĉe, pošto neki pretraţivaĉi pri rankiranju web stranica uzimaju u obzir koje se reĉi nalaze u samom imenu domena. Pored toga, na primer, neko ţeli da kupi nešto od vas i traţi vašu firmu na intenretu. Da bi vas našao normalno je da će u pretraţivaĉ ukucati ime vaše firme. E sad ukoliko ste kao ime sajta stavili ime vaše firme postoji velika verovatnoća da će baš vaš sajt biti na prvoj poziciji u pretrazi. [281]

282 Koju ekstenziju domena izabrati?! Naš savet je da to u svakom sluĉaju bude.com jer se on primenjuje od samih poĉetaka interneta. On je manje više postao sinonim interneta. Naime, većina ukoliko se ne seća prave ekstenzije domene, pokušaće sa ekstenzijom.com. Svaki sajt mora imati jedinstven segment domena u okviru jedne ekstenzije domena, to jest jedinstven domen. E sad tu nastaju izvesni problemi. Na primer vi ste izabrali domen, ali kad ste pokušali da ga i registrujete hosting firma vam jednostavno kaţe da je to ime već zauzeto. Medjutim ne treba oĉajavati. Zapravo zbog toga se periodiĉno i uvode novi domeni (com, net, org, itd) kako bi se omogućila upotreba jednog istog opšteg pojma za više sajtova. Elem, znaĉi ako je zauzet domen sa com, onda pokušajte sa svim ostalim, na primer net, org, sr, itd. E sad ukoliko je to ime zauzeto u svim varijantama ne preostaje vam ništa drugo nego da smislite neko drugo ime. U vezi imena sajta otvara se i pitanje autorskih prava i zaštita licenci ţiga. Postoje pravila u pogledu registracije domena kada se radi o imenu nekog pravnog lica ili licenciranog brenda. Na primer ako biste registrovali domen siguran sam da bi Vas Disney tuţio, i dobio na sudu. Medjutim verovatno je druga stvar kada su u pitanja neki opšti pojmovi, tipa pas, ljubav, ljubimci ili kombinacija opštih reĉi. Na primer ako neka firma ima naziv Usluge.d.o.o., nije time stekla automatsko pravo na sve domene sa opštim pojmom "usluge". Znaĉi u sluĉaju spora sud bi verovatno utvrċivao i da li je sporni naziv opšti pojam. Medjutim ako vam ipak neko zapreti tuţbom zbog imena domena, pa zatraţe vašu ponudu pismenu da vam otkupe domen, moj vam je savet da nikako Vi prvi ne ponudite pismeno cenu. U SAD-u ukoliko Vi pošalješ prvi ponudu na sudu se to smatra kao ucenjivaĉka namera da bi izvukli novac od vlasnika brenda, što se uzima kao oteţavajući faktor. Znaĉi, oni treba prvi da ponude cenu otkupa domena, a na vama je da li ćete nastaviti pogodbu, ili da li ćete uopšte i prodati domen. Medjutim ovo su ipak samo pretpostavke a evo linka koji struĉno obradjuje ovu temu vezano za ţigove firmi: A proveru da li je neko ime, ili grupa reĉi zaštićen ţigom moţete izvršiti na adresi: I na kraju kad ste zakupili domen, takodje od iste hosting firme moţete zakupiti i host. Medjutim, ne morate od iste hosting firme zakupiti i host i domen. Na primer ako je kod jedne firme jeftiniji domen moţete tu zakupiti domen, a ako je kod druge firme jeftiniji host moţete od te druge firme zakupiti host. Postoje razne vrste hosting paketa, koji se razlikuju po mnogim parametrima: Po veliĉini hostinga, odnosno prostora na serverskom hard disku (na primer 50Mb, 100Mb, 1000Mb) Po veliĉini meseĉnog saobraćaja (medjutim postoji tendencija da se ukine veliĉina meseĉnog protoka) Prostor za mejl naloge i broj mejl naloga Broj pddomena Podrška za neke serverske programe kao što su PHP ili neki drugi. Podrška za bazu podataka, najĉešće MySQL bazu itd. E sad na osnovu raznih brojki obiĉno hosting firme nude odredjene pakete. Naravno što su brojke u paketima veće to je i cena paketa veća. Znaĉi, vi na osnovu vašeg sadrţaja, i na osnovu onoga kako će se vaš sajt u budućnosti razvijati zakupljujete odredjeni paket. Forum Forum se sastoji od većeg broja tematskih kategorija unutar kojih se nalaze diskusione teme koje otvaraju i zapoĉinju korisnici. Svaka tema ima svoju diskusiju u kojoj mogu potencijalno uĉestvovati svi registrovani korisnici pisanjem, odnosno objavljivanjem postova. Sve diskusije ostaju saĉuvane na forumu dok ih ne obriše administrator ili moderator [282]

283 (osobe koje uredjuju forum), ili dok ih sa prve strane ne potisnu novije teme. Tema na koju se odgovori automatski izbija na prvo mesto u spisku tema. Postoje vrlo raznovrsni forumi u smislu tematike, na primer koji se bave politiĉkim temama, filmskim, muziĉkim, itd. Medjutim postoje i opšti forumi koji imaju zastupljene veoma raznovrsne teme rasporedjene u podforumima. Svaki forum bi trebao imati administratore i moderatore koji se brinu da na forumu bude reda, da nema vulgarnosti, vredjanja itd. Takodje oni ureċuju forum u smislu brisanja ili nekog drugaĉijeg modifikovanja već objavljenih postova. TakoĊe mogu banovati korisnike, odnosno zabraniti uĉestvovanje na forumu nekim korisnicima ukoliko se nedoliĉno ponašaju, ili krše pravila foruma. Banovanje moţe biti na neko vreme ili zauvek. Administrator ima veća ovlašćenja od moderatora. Zapravo administratori su ili vlasnici ili jako bliski po poverenju vlasnicima. Administratori unapredjuju neke korisnike u moderatore u kojima steknu poverenje, a i koji potvrde struĉnost u okviru nekih tema. Administrator moţe banovati moderatore, u smislu oduzimanja administratorskih privilegija, ili ĉak i banovati ih i sa foruma. Ĉlanovi foruma kao što smo već rekli su svi oni koji se registruju na forum. Registracijom automatski stiĉu pravo da objavljuju postove, kao i nove topic-e (odgovore na postove). U većini foruma korisnici uz svoje ime (nick) obiĉno imaju malu sliku koja se naziva avatar. TakoĊe mogu primati i slati privatne poruke ostalim ĉlanovima. Ĉesto korisnici koriste i potpise - to jest reĉi ili slike koje se pojavljuju na kraju svakog posta koji objave. Većina foruma omogućava obaveštavanja om o odgovaranju drugih korisnika na vaš post. Za razliku od blogova, forumi dopuštaju svakome da zapoĉne novi razgovor, ili da uĉestvuje u bilo kojoj temi. Forumi se razlikuju i od chat-ova zato što više uĉesnika mogu da uĉestvuju u raspravi, a koja se moţe odigravati i tokom više dana pa i nedelja. Grafiĉki dizajn moţe biti raznovrstan ali programska organizacija foruma je uglavnom sliĉna kod svih foruma. Danas na intenretu postoje bezbroj već gotovih programa za forume. Potrebno ih je samo skunuti i prebaciti na host, uz neka jednstavna podešavanja. Postoje sajtovi koji iskljuĉivo i samo kao sadrţaj imaju forum, ali postoje i sajtovi koji imaju forume kao deo sajta. Blog i etrgovina Blogovi Blogovi - postoje sajtovi koji "online" omogućavaju posetiocima da sami kreiraju sadrţaj - "podsajt" sa jednom ili više stranica. Takvi "podsajtovi" se ţargonski nazivaju blogovi. Sajtovi koji psetiocima omogućavaju kreiranje blogova imaju u sebi programska rešenja (alate) koja na lak i brz naĉin omogućavaju ĉak i onima koji nemaju programerska iskustva da "online" kreiraju raznovrstan sadrţaj - to jest blog. Sadrţaj moţe biti, na primer razne kombinacije teksta, videa i muzike, a ĉak dopustaju da "blogeri" i sami uredjuju vizuelno stranice svog "bloga", itd. Obiĉno posetioci bloga mogu da ostavljaju svoje komentare, a komentar je obiĉno vidljiv tek kad dozvoli vlasnik bloga, to jest onaj koji je kreirao, odnosno otvorio blog. Programiranje takvih sajtova koji omogućavaju blogove nije mnogo sloţeno. Jedini veći zahvat je napraviti programski alat koji će na što jednostavniji naĉin omogućiti posetiocima da otvaraju blogove. Elektronska trgovina Elektronska trgovina, ili skraćeno e-trgovina, a poznata i kao online trgovina, internet trgovina, webshop, e-commerce itd, je prodaje proizvoda i usluga preko interneta, odnosno sajtova. Znaĉi, sajt nudi proizvode i usluge a posetioci kupuju. Takvi sajtovi ukljuĉuju elektronski transfer novca. Elektronski transfer novca je poznat kao elektronsko plaćanje, odnosno e-plaćanje. Da bi se ostvarilo e-plaćanje, onaj ko plaća mora imati e-raĉun. E-raĉun je elektronska programska isprava kreirana od strane banke koja u sebi sadrţi sve podatke za izradu e-naloga za plaćanje. Tako se povezivanjem e-plaćanja sa e-raĉunom dobija e-nalog za plaćanje koji se prosljeċuje banci na izvršenje. [283]

284 Ostvarivanje trgovine preko sajta ima veliki broj prednosti u odnosu na klasiĉne trgovine. Prednosti koje odma upadaju u oĉi su: nisu potrebne skupe nekretnine, niti aranţiranje izloga, minimalno prodajno osoblje i administracija, mogućnost da se prodaje kupcima na bilo kom geografskom podruĉju, trenutna komunikacija, prezentovanje interaktivnog multimedijalnog kataloga koji moţe da pruţi onoliko informacija koliko kupac ţeli (bez skupih klasiĉnih kataloga i poštanskih troškova). Takodje, smanjuju se troškovi naruĉivanja i knjigovodstva, a web narudţbe se mogu slati direktno u skladište. Trenutnim uvidom u stanje zaliha, i potraţnje znate kada je vreme za obnavljanje zaliha, a i priliĉno se štedi na magacinskom prostoru. Prednosti leţe i u marketinškom segmentu kao npr. slanje e-poruka tj. newslettera kupcima. To je jeftin a vrlo efikasan oblik marketinga kojim se informišu klijenti o novim proizvodima, specijalnim ponudama, naĉinima dostave, i sliĉno. Osim toga, odreċene informacije o stalnim kupcima mogu se pohraniti za stvaranje odreċenih analiza i formiranje razliĉitih grupa kupaca. Internet trgovina pogotovo ide na ruku proizvoċaĉima jer omogućava plasiranje proizvoda direktno kupcima, bez posrednika tj. distributera. Što opet utiĉe i na niţu cenu robe. Internet prezentacije firmi Dok neke firme preko sajtova prodaju svoju robu, druge firme uglavnom samo imaju internet prezentaciju firme. Na samom poĉetku interneta sve firme su preko sajtova imale prezentaciju u obliku internet brošura. Ali i danas mnoge firme imaju takav vid internet prezentacije, a naroĉito one koje nude svoje usluge tipa molerskih preduzeća i sliĉno. Sajt tipa brošure moţ biti u obliku od vizit karte prikazane u par web stranica do digitalnog skupa kompleksnijih marketinških informacija. Glavni cilj internet prezentacije firmi je da zainteresuje potencijalne kupce da stupe u vezu sa preduzećem. Takvi sajtovi ne donose direktno zaradu ali pospešuju marketinški tradicionalno poslovanje. Izrada ovakvih sajtova je tehniĉki jednostavna, a glavne stvari na koje treba obratiti paţnju su: Ubacivanje taĉne informacije o svim uslugama ili proizvodima firme Dobar vizuelni izgled lokacije, koji ostavlja utisak ozbiljnosti i pouzdanosti firme Omogućiti svaki vid kontakta posetilaca sa firmom (mejl forma, telefon i fiksni i mobilni, faks, MSN, Skype, itd) Redovno i brzo aţuriranje sajta svaki put kad dodje do bilo kakve promene u uslugama ili proizvodima, tipa promene cene ili vrste usluga ili roba Kakve informacije posetioci ţele da vide na internet sajtu vaše firme? To je pitanje na koje sajt kroz grafiĉki dizajn i sadrţaj mora dati precizan i jasan odgovor. Te informacije mogu biti raznovrsne od firme do firme, na primer sve vezano za proizvodni program, cene, od ĉega su izradjeni proizvodi, sertifikati proizvoda, itd. Jednostavno se sami postavite u poloţaju posetioca i definišite sebi koje informacije ţelite dobiti od sajta vaše firme. Obiĉno web dizajneri pogrešno sugerišu da je potrebno postavljati informacije tipa gde i kad je firma osnovana, ko je vlasnik firme, gde su sve sedišta firme i sliĉno, medjutim istraţivanja su pokazala da ogromnu većinu posetilaca takve informacije najmanje zanimaju. Zapravo moţete i takve informacije ponuditi, ali nikako na prvim stranicama, već u nekom sporednom delu sajta, pa ako nekog to zanima moţe pogledati. Dakle, u glavnom se usredsredite na ono što zanima posetioce vezano za vašu firmu. Na primer ako ste molersko preduzeće istaknite odma na prvoj stranici sajta sve vaše usluge, kao i cene i vreme za koje moţete odraditi poso, itd itd. Dalje svaka usluga neka bude potkrepljena sa što više slika raznih gradilišta na kojima ste završili poslove i sliĉno. Ono što je i najbitnije cene na sajtu moraju biti taĉne, jer ukoliko kaţete da su cene na sajtu stare i da je došlo do poskupljenja verujte ogromna većina odmah će potraţiti drugog jer ne ulivate ozbiljnost. Što se tiĉe grafiĉkog i programskog dizajna to je za ovakve sajtove od ogromnog znaĉaja. Mala preduzeća na internetu mogu zahvaljujući dobrom grafiĉkom i programskom dizajnu izgledati kao velika i impresivna preduzeća, ali isto tako velika preduzeća zbog lošeg dizajna mogu izgledati mala i beznaĉajna, te umesto da im internet prezentacija pomogne ona u stvari nanosi samo štetu preduzeću. Bez obzira na veliĉinu preduzeća u smilu broja zaposlenih i sliĉno web prezentacija preduzeća mora biti impresivna. [284]

285 Osim grafiĉkog izgleda sajta on i programski mora biti organizovan da se do glavnih i bitnih informacija dolazi na prvi klik. Ako dobijete mejl od zainteresovanog posetioca morate u najkraćem mogućem roku odgovoriti, gotovo trenutno. Jer kako je on našo vašu firmu naćiće i još neke, pa ako druga firma ranije odgovori na njegov mejl ogromna je verovatnoća da nećete dobiti poso. Dakle, ako ste ozbiljna firma morate imati mejl operatera koji će samo na tom mestu raditi i odgovarati istoga trenutka. Isto vaţi i ako ste ostavili faks, ili telefon i sliĉno. Ukoliko zainteresovani dobije momentalni odgovor, to uliva njemu veliko poverenje u vašu ozbiljnost izmedju ostalog. Takodje, kontakt telefonom je mnogo efikasniji nego odgovarati mejlom. Na primer i ukoliko postoji mejl forma na vašem sajtu (što se preporuĉuje jer ima stidljivijih ljudi koji se slabije izraţavaju telefonom) vi ostavite opciono da mogu upisati telefon. Ako je zainteresovani ostavio telefon u mejl mnogo je bolje odma ga pozvati nego odgovoriti mejlom. Sajtovi za vesti, komunikaciju i upoznavanje Sajtovima za vesti Sajtovima za vesti je primarna svrha prezentovanja "online" vesti. Postoje dve glavne vrste sajtova za vesti: Sajtovi koji prezentuju opšte vesti, i sajtovi koji prezentuju specifiĉne vesti, to jest vesti vezane za uske oblasti. Dizajnerski gledano sajtove za vesti je lako izraditi. Potrebno je samo napraviti administracijski mod (koji je jako jednostavan) tako da uredjivaĉi na jednostavan naĉin mogu svakodnevno menjati svaki sadrţaj sajta. Postoje mnoga gotova rešenja za takve sajtove koja se mogu i besplatno naći na internetu. Dovoljno ih je samo skinuti i podesiti po vašim nekim afinitetima, kako u tehniĉkom nekom smislu (na primer vremenska zona, jezik sajta i sliĉno), tako i u smislu grafiĉkog izgleda sajta. Danas gotovo sve medijske kuće, kako novinske tako i televizijske, imaju i svoja internet izdanja. Medjutim sve je više sajtova za vesti koje posluju iskljuĉivo na internetu. Sajtova za upoznavanje i komunikaciju Sajtova za upoznavanje i komunikaciju je sve više na internetu, ali sve je više i posetilaca takvih sajtova. Takvi sajtovi su jako sloţeni za izradu jer moraju ispuniti veliki broj usluga i servisa posetiocima. Medjutim gotovo svaki novi takav sajt nudi nove servise posetiocima i nove mogućnosti kako bi bio konkurentan. Osnovni servisi su mogućnost kreiranja profila, ubacivanje raznoraznih liĉnih informacija, slika i sliĉno. Omogućavanje direktnog ĉetovanja izmedju korisnika, slanje poruka, evidencija ko je online a ko ne, mogućnost pretrage ĉlanova po raznim kriterijumima, itd itd. Kao što rekoh svakodnevno nastaju novi servisi u sklopu tih sajtova tako da po tehniĉkoj i programskoj sloţenosti postepeno izbijaju na prvom mestu na internetu. Web portali, obrazovni, liĉni i specifiĉni sajtovi Web portali Web portali sadrţe raznorazne web servise i usluge, od vesti, ĉetova, forume, web igrice, viceve, raznorazne informacije iz sveta filma, muzike, biznisa, mode, i još mnogo toga. Medjutim ovako napisano ovo bi bio neki na primer zabavni portal. Medjutim i Yahoo sajt je takodje portal jer sadrţi ogroman broj servisa a korisnici sami biraju servise u svoj personalizovan portal. Takodje i neke drţavne institucije imaju svoje portale, na primer policija koja tako pruţa gradjanima raznorazne web servise i web usluge, ali i raznorazne informacije iz njihovog delokruga. Znaĉi, definicija portala bi bila, da su to sajtovi koji svojim posetiocima pruţaju internet servise i internet usluge iz raznoraznih, ĉesto puta nepovezanih oblasti. [285]

286 Dizajniranje takvih sajtova nije lak poso jer je to smeša više tipova sajtova u jedan. Obrazovni sajtove Obrazovne sajtove sam njihov naziv ih definiše. Dakle, to su uglavnom usko specijalizovani sajtovi iz neke oblasti koji pokušavaju da edukuju ljude. Informacije na takvim sajtovima ipak moraju pisati struĉni ljudi koji ulivaju poverenje. Tekstovi moraju biti pisani na svima razumljiv naĉin i to tako da se znanje brzo i lako prihvata. Tu spadaju sajtovi za kućne ljubimce, medicinski sajtovi, obraovni školski sajtovi i sliĉni. Dizajniranje ovakvih sajtova nije teţak posao jer uglavnom treba samo preneti sadrţaj lepo vizuelno upakovan na internet. Medjutim programski takvi sajtovi mogu jako biti sliĉni sajtovima za vesti te ih kao takve i dizajnirati. Ali ukoliko im je sadrţaj statiĉniji onda se daleko lakše dizajniraju. Medjutim postoji po nekad ţelja vlasnika da se omogući na svakoj temi opcija da posetioci diskutuju o temi. Znaĉi nešto sliĉno kao forum, ali posetioci ne mogu da pišu nove teme već samo mogu komentarisati. Elem, nešto sluĉno kao blog. Liĉne prezentacije Liĉne prezentacije su sajtovi pojedinaca koji ţele da se pretstave na internetu. Ti pojedinci mogu biti potpuni anonimusi ali i jako poznate liĉnosti. Na primer imate sajt Novaka Djokovića, Cece, Jelene Janković itd. Na takvim sajtovima se prezentuju uglavnom raznorazne stvari vezani za liĉnosti, njihov poso, liĉni ţivot, i sliĉno. Medjutim neki liĉni sajtovi nude i neke servise tipa foruma, ĉetova itd. Izrada takvih sajtova varira od vrlo jednostavnog do vrlo kompleksnog, u zavisnosti od ţeljenog sadrţaja koji se prezentira. Specifiĉni sajtovi U specifiĉne sajtove ulaze svi sajtovi koji ne mogu da se podvedu pod neku od navedenih grupa. Na primer to su sajtovi tipa svima poznati youtube, zatim porno sajtovi, sajtovi koji nude neke online servise tipa online fotomontaţa, sajtovi za download raznoraznih programa, itd. Izrada ovakvih sajtova takodje varira od vrlo jednostavnog do vrlo sloţenog, u zavisnosti naravno od sadrţaja. Grafiĉki web dizajn Kada govorimo o grafiĉkom dizajnu sajtova tu se pored vizualnog misli i na funkcionalnost sajta. Pod funkcionalnost sajta (usability) se podrazumeva da je sajt pregledan, jasan, dobro organizovan, vidljiva u razliĉitim brauzerima itd. Neki dizajneri su mišljenja da se stranicama o modi, bendovima, filmovima, umetnosti, liĉnim prezentacijama i sl. moţe oprostiti nepoštovanje nekih usability standarda, jer od takvih stranica posetioci mogu i oĉekivati da budu pomalo kontraverzni, neobiĉni, "in", te da koriste npr. Flash animaciju ili ĉudnu navigaciju i sl. ali za neke sajtove kao što su e-trgovine, prezentacije firme, forume, i sliĉne ozbiljne sajtove je neoprostivo da budu grafiĉki funkcionalno neobiĉni. Gledajući proseĉnu web stranicu, njena osnovna svrha je pruţanje informacije o nekim temama, proizvodu, usluzi ili firmi. Ako posetioci ne mogu doći do ţeljene informacije zbog koje je i posetio sajt, sajt je osudjen na neuspeh. Ne postoji jednostavan recept kako napraviti dobar sajt, pogotovo danas kada postoje na hiljade sajtova sa istom tematikom i sliĉnim sadrţajem, ali postoji mnoštvo sitnih (i ne tako sitnih) detalja na koje valja obratiti paţnju. Pokušaću u nastavku nabrojati neke od njih kroz niz primera. [286]

287 Boja pozadine i fontova Boje pozadine i fontova su bitan faktor u grafiĉkom dizajniranju sajta. Boje zavise od teme sajta i ciljne grupi kome je sajt namenjen. Na primer neki deĉji sajtovi imaće boje koje su šarene, crvene, vesele i sliĉno, dok recimo sajtovi firmi imaće dve, do najviše tri boja sa njihovim nijansama, bez šarenila, itd. Biznis sajt Dečji sajt Odnos izmedju boje pozadine i boje fonta je najbitniji za ĉitljivost teksta, da ne bi došlo do zamaranja posetilaca prilikom ĉitanja. Ukoliko se prilikom odabira pozadine teksta uzima neka slika, napravite je manje transparentnom pomoću phptoshop-a. Ili izaberite pozadinu teksta koja nije šarena, već je sa blago sloţenom teksturom, ĉisto da nije prazna monotona boja. Ako je previše šarena i dreĉava pozadina teksta onda je ĉitanje teksta jako zamarajući, a u nekim delovima ĉak ĉitanje moţe biti i totalno onemogućeno ako se boja fonta i boja pozadine poklope ili su jako sliĉne u nijansama. Loše Bolje Bolje Kolor šeme moţete odabirati automatski na sajtu: [287]

288 Veliĉina i tip fonta Postoje veliki broj studija koje su istraţivale koji je font najbolji i po pitanju veliĉine, a i po pitanju tipa. Došlo se do zakljuĉka da veliĉina fonta od 14 taĉaka se brţe ĉita od teksta veliĉine 12 taĉaka ili druge veliĉine. Takodje serif-ni font (Times, Georgija) se brţe ĉita od sans serif-nog (Arial, Verdana) u 14 taĉaka. Medjutim iako se serifni fontovi brţe ĉitaju, ispitanici preferiraju sans serifne fontove. Evi dve slike iz tih studija o ovome: Medjutim ispitivanja su takodje ustanovila da razliĉiti tipovi fontova ostavljaju razliĉite utiske na posetioce. Na primer većina ispitanima su Comic Sans Ms prokomentarisala kao mladalaĉki i zabavan. Zato bi za zabavne i mladalaĉke stranice takav tip fonta imao najbolji efekat, dok za sajtove firmi taj tip fonta nikako ne bi smeo da se koristi. Za stranice koje nastoje ostaviti ozbiljan utisak bi trebalo koristiti na primer Times ili Courier. Takodje postoji još jedna jako bitna stvar vezana za fontove, a to je da na stranicama ĉitavog sajta mora da se koristi jedan te isti font, a nikako mešati dve ili vrste fontova. Isto vaţi i za veliĉinu fonta. Znaĉi samo jedna veliĉina fonta. Slike, animacije i zvuk Stranice ispunjene ĉistim tekstom ili stranice ispunjene uglavnom slikama, gif animacijama ili zvukovima su krajnosti, od kojih ni jedna nije dobra. Oĉito je optimalno naći dobar odnos te dve krajnosti. [288]

289 Zvuk Nimalo se ne preporuĉuje da se prilikom otvaranja internet stranice automatski pokrene nekakva melodija. Nametati tako nešto posetiocima nije poţeljno, jer to moţe priliĉno usporiti otvaranje stranica sa jedne strane, a sa druge većina posetilaca ne oĉekuje tako nešto te im je moţda glasnoća zvuka postavljena preglasno, ili im se moţda neće svideti odabrana melodija, ili sama ĉinjenica da se melodija uĉitava bez njihove volje. U svakom sluĉaju više je razloga protiv korišćenja automatske muzike i zvukova na stranicama. Ukoliko se ipak odluĉite na korišćenje muzike, npr. tako nešto nije toliko iznenaċujuće kod stranica u Flash-u, uvek treba omogućiti opciju za ukljuĉenje i iskljuĉenje zvukova, i to na jako vidnom mestu u gornjem delu stranice. Animacije Na stranicama su najraširenije gif i Flash animacije. Najĉešće se radi o gumbima ili bannerima kojima se ţeli privući paţnja posetilaca. I dok jedan do dva takva elementa po stranici ne smeta previše, više od toga nije estetski lepo jer pravi priliĉno šarenila. Takvo šarenilo za deĉje i zabavne sajtove moţda i ne smeta previše ali ako je u pitanju poslovni sajt to apsolutno nije preporuĉljivo. Što se tiĉe poslovnih sajtova nimalo nije preporuĉljivo koristiti bilo kakvu animaciju u tekstualnom delu, ali ne smeta recimo u top (gornjem) delu sajta gde je logo firme na primer. Medjutim takva animacija mora biti ozbiljna, lepo uradjena i ne previše napadna i dreĉavih boja. Najbolje je napraviti je tako da se pokreće moţda prvih desetak sekundi ali kasnije da bude statiĉna kako ne bi odvlaĉila paţnju posetiocima od onoga zbog ĉega i dolaze na takve sajtove informaciju. TakoĊe treba obratiti paţnju na veliĉinu takvih animacija jer mogu znatno usporiti uĉitavanje stranice. Slike Slike web stranice ĉini zanimljivijima i manje suvoparnim, ali treba paţljivo odmeriti koliko je pojedina slika uistinu potrebna. Nije poţeljno postavljati slike koje nisu potrebne sadrţaju stranice. Svaka slika je u većini sluĉajeva veća u bajtima u odnosu na sav tekst na stranici te time usporava njeno uĉitavanje. Kao orjentacija moţe se uzeti da pojedini grafiĉki elementi ne bi trebao biti veći od 20KB dok celoukupna stranica ne bi trebala prelaziti 150KB. Preporuĉljivo je da se sve slike komprimuju, ali ne previše da ne bi slika bila previše "mutna". Ali svakim danom brzi internet je sve pristupaĉniji pa se i prihvatljiva merila u skladu sa tim menjaju. Osim na brzinu treba obratiti paţnju i na sam izgled slika koje se koriste. Treba izbegavati preterano korišćenje dreĉavih boja, šarenih tekstura, bevel opcije i ĉudnih oblika. Evo par primera par dobrih i loših dugmića: Tehnologija JavaScript Postoje prilike kada je korišćenje JavaScript opravdano, ali i kada je apsolutne nedozvoljeno. Na primer izrada navigacije u JavaScript-u je apsolutno nedozvoljena, jer takvi linkovi su totalno nevidljivi pretraţivaĉima što dovodi [289]

290 (ukoliko nemate HTML mapu sajta) da vaše unutrašnje strane budu jako sporo indeksirane. Odnosno, neće biti indeksirane preko vašeg sajta već će biti indeksirani ukoliko neki drugi sajtovi linkuju te vaše unutrašnje stranice. A ako se to ne desi onda nikad te unutrašnje stranice neće biti indeksirane. Takodje nikako nesmete sadrţaj sajta prikazivati pomoću JavaScript, jer takav tekst nikad neće biti indeksiran od strane pretraţivaĉa, što znaĉi da se nikad neće naći u rezultatima pretrage. Moţda se pitate pa zašto onda uopšte i koristiti JavaScript? JavaScript se koristi za izradu dinamiĉkih grafikona, dinamiĉkih tabela, ĉetova (naroĉito posle pojave AJAXA), bokseva za poruke, igrica, provera ispravnosti unetog teksta preko HTML formi, pravljenje kalendara, raznoraznih kalkulatora, ili dinamiĉkih kalkulatora, dinamiĉko uredjenje grafiĉkog dizajna stranica, prikladne raznovrsne animacije, izrada dinamiĉkog sadrţaja koji vam nije bitan da se pojavi u rezultatima pretrage, pruţanje informacije o posetiocu, na primer o njegovom sistemu, brauzeru, rezoluciji ekrana i sliĉno, ĉasovnici, itd itd. Ovo je samo jedan uopšteni i mali prikaz za šta se sve moţe koristiti JavaScript, ali mogućnosti i upotrebljivos je jako velika. Flash I u Flash-u se nikako ne preporuĉuje izrada menija, linkova i bitnog sadrţaja, takodje iz razloga što pretraţivaĉi neće moći kompletno indeksirati sajt. Postoje neke teorije o tome kako se moţe ovaj problem prevazići, ali verujte to su takve programske vratolomije koje odnose i vreme a i resurse, te je krajnji zakljuĉak da se ipak okanete takvog posla. Sajtovi u Flash-u se i duţe uĉitavaju, naroĉito kada su u pitanju posetioci sa obiĉnim 56K modemom. Kao još jedan od razloga da se sajt ne izradjuje iskljuĉivo u Flash-u je da amateri (a i priliĉan broj profesionalaca) ĉesto ubacuju obilje nepotrebnih efekata i sadrţaja koji se ĉak i bolje, ili jednako dobro mogu prikazati putem obiĉnog HTML-a ili CSS-a. Za pregled stranice izraċene u Flash-u potrebna je instalacija Flash player-a od strane korisnika, što takodje pretstavlja jednu od mana. Danas je sve više korisnika sa brzim internet vezama a takav trend povoljno utiĉe i na flash dizajn, te se deo razloga protiv korišćenja Flash-a smanjuje. Zašta je opravdano koristiti Flash? Flash je pravi alat za efektnu prezentaciju nekog proizvoda ili usluge, reklame, nekih grafiĉkih dizajnerskih efekata i sliĉno. Dobar primer efikasnog korišćenja Flash-a je sajt: Ostalo JavaScript i Flash su klijentski programski jezici, ali postoje i serverski skriptni jezici kao što su ASP i PHP. Serverski su jer se izvršavaju na serveru a klijent (tj. posetilac) u svom brauzeru dobije obiĉan HTML dokument. I ako ASP ili PHP ne utiĉu direktno na grafiĉki izgled same stranice, svakako je poţeljno koristiti ih prilikom izrade većih sajtova u grafiĉkom smislu, jer omogućavaju odrţavanje konzistentnog izgleda celog sajta. CSS (Cascading Style Sheets) je gotovo nezamenjljiv u grafiĉkom dizajniranju web sajtova. CSS omogućava kreiranje, menjanje i odrţavanje konzistentnog stila celog sajta kroz najĉešće jednu datoteku u kojoj smo definisali stilove svih relevantnih HTML elemenata. CSS je takoċe podrţan od većine današnjih internet preglednika pa je njegovo korištenje svakako preporuĉljivo. Razmeštaj elemenata sajta Glavni elementi svake internet stranice su navigacija, sadrţaj, link za pomoć, registracija, logovanje, itd. Istraţivanja su pokazala da posetioci od odredjenih tipova sajtova oĉekuju da će se pojedini bitni elementi sajta naći na oĉekivanim mestima. Zato je jako bitno ispoštovati odredjena nepisana pravila o tome kako i gde razmestiti bitne elemente sajta. Zapravo to je vaţno da korisnici ne bi lutali po stranici, a samim tim gubili vreme i ţivce umesto da se usredsrede na sadrţaj sajta. U sluĉajevima kad su ti bitni elementi jako malih dimenzija, i pri tome totalno smešteni u neki neobiĉan deo stranice, verovatnoća da će neki posetioci ĉak i odustati od traţenja se jako povećava. [290]

291 Iako moţda imate neku inovativnu ideju za razmještaj pojedinih elemenata, ipak se treba pridrţavati standarda koga nameću poznatiji sajtovi, bar u poĉetku dok razradite sajt. Koliko god je vaţno da stranica bude unikatnog izgleda to je samo jedan od elemenata koji ĉini kvalitetan sajt, i to ĉak manje bitnim. Nikad nemojte zaboraviti da osnovni razlog zbog kojeg neko dolazi na većini sajtova je informacija. Ukoliko posetilac ne moţe naći na brz i efektan naĉin ţeljenu informaciju on će tu informaciju potraţiti na drugom sajtu makar taj drugi sajt vizuelno i inovativno izgledao i upola dobro. Evo grafiĉki kako izgledaju oĉekivanja posetilaca gde se nalaze pojedini bitni elementi sajta (što je boja tamnija to je oĉekivanje veće): [291]

292 Navigacija Navigacija je element pomoću kojeg posetioci mogu dospeti do svake stranice na sajtu. Ako sajt sadrţi više desetina, ili ĉak stotinak, pa i više stranica dobra navigacija je kljuĉna u uspehu tog sajta. Vincent Flanders je navigaciju opisao pomoću pitanja na koja bi ona morala dati odgovore: Gde sam? Gde sam bio? Gde mogu ići? Gde je poĉetna stranica? Izgled navigacije na svim stranicama mora biti isti i da se nalazi na istom poloţaju na stranicama. Na primer ukoliko neka stranica koristi tabove za navigaciju, onda ne sme se na nekoj drugoj stranici tog istog sajta koristiti na primer padajući izbornici. Postoje više tipova navigacije: Mystery meat navigation Padajući izbornik odnosno tree Breadcrumb Mystery meat navigation Mystery meat navigation je navigacija u kojoj su linkovi zamenjeni grafiĉkim simbolima, bez ikakvih tekstova. Tek kada strelicu miša postavimo iznad jednog od tih simbola vidimo gde taj link vodi. I sami verovatno shvatate da je takva navigacija izuzetno loša. Posetioci na prvi pogled neće prepoznati navigaciju, a verovatno će je sluĉajno otkriti ako prodju mišem preko nje. Ĉak i kada je otkrije, svaki put kada ţeli otići na neku drugu stranicu unutar sajta (dok još nije zapamtio koji simbol šta predstavlja) mora ići od simbola do simbola sa strelicom miša i ĉitati gde taj link vodi dok ne naċe ţeljeno odredište. Padajući izbornik Padajući izbornik postaje jedan od najĉešćih navigacija na internetu, ali sa razlogom jer je vrlo efikasan i praktiĉan posebno za velike sajtove sa mnogo stranica i podstranica. Ova navigacija je efikasna jer na jako malom prostoru moţe organizovati jako puno linkova u navigaciji. Za padajuće izbornike se kaţe da imaju dubinu i širinu. Pod dubinom se misli na broj nivoa navigatora, a širina je broj linkova u pojedinim nivoima. Postoje mnoga istraţivanja na temu koji broj nivoa i linkova po nivoima je optimalan. Došlo se do zakljuĉka da je padajući izbornik sa dva nivoa, od kojih prvi ima 7 ili 8 linka, a drugi 3 ili 4 najoptimalniji. Medjutim naravno ukoliko vaš sajt zahteva drugaĉiji odnos Vi nećete previše brinuti što niste u optimalnim granicama. Breadcrumb Breadcrumb navigacija je u stvari potpora glavnoj navigaciji i moţe da se nadje od stranice do stranice po potrebi. Odnosno svaka stranica moţe imati drugaĉiju podnavigaciju u smislu broja linka ali ne i po vizuelnom izgledu. Naravno pojedine stranice na istom sajtu mogu ĉak i da nemaju tu breadcrumb navigaciju. Optimalni poloţaj ovakve navigacije je izmedju glavne navigacije i sadrţaja sajta. Ali glavna navigacija mora da se nalazi obavezno u poloţaju u kome se nalazi na svim ostalim stranicama. [292]

293 Mystery meat navigation Padajući izbornik Formatiranje teksta Prezentacija teksta je još jedan vaţan element u grafiĉkom dizajnu stranica. Osim na pravilan raspored slika i ostalih elemenata unutar teksta, potrebno je obratiti paţnju i na korištenje praznina u obliku margina, novih redova i paragrafa, proreda i sl. Vaţno je da tekst sadrţi dovoljno praznina ili npr. okvira jer se na taj naĉin tekst grupiše u celine koje se lakše pretraţuju pogledom. Većina posetilaca koji se prvi put naċu na nekoj stranici prvo pogledom "prelete" po sadrţaju stranice i na taj naĉin odluĉe sadrţi li ona ono što ih zanima. Zgusnuti tekst oteţava takvo pretraţivanje. Na ovoj slici levo je dobro uredjen tekst a na desnoj, taj isti tekst je vrlo loše uredjen. Primećujete da su slike na desnoj strani "zamarajuće" organizovane, kao i naslov i nema proreda. Sve to rezultira lošim utiskom i obeshrabruje posetioce da ĉitaju tekst. Sve vezano za margine i prorede pravilno korišćenje CSS-a na brz i jednostavan naĉim moţe automatski uredjivati bilo koji tekst bez obzira da li se redi o dinamiĉkim ili statiĉkim sajtovima. [293]

294 Kompatibilnost sajta u raznim okruţenjima Prilikom grafiĉkog dizajna potrebno je izgled stranice pogledati u razliĉitim okruţenjima, i to u skoro svim: Vrstama internet preglednika, kao i u gotovo svim njihovim verzijama Rezolucijama ekrana Brzinama interneta Najpopularniji brauzeri su Internet Explorer, Firefox, Opera, Google Chrome itd. MeĊu nabrojanim preglednicima trenutno postoje najveće razlike u interpretaciji CSS-a. Izuzetno pogrešan pristup bi bio odabrati jedan preglednik u kojem stranica dobro izgleda i oĉekivati od posetilaca da koriste baš taj preglednik ukoliko ţele ispravno videti Vaš sajt. Znaĉi jednostavno morate napraviti grafiĉki dizajn tako da je sajt potpuno identiĉno vidljiv u svim preglednicima. Naravno nije praktiĉno sad davati nekakve spiskove stvari koje se ne vide podjednako u svim preglednicima i njihovim varijantama jer bi spisak bio priliĉno veliki, a pri tome verovatno ne bi bio konaĉan i sveobuhvatan. Zato je ipak najbolje od sluĉaja do sluĉaja proveravati konkretne satjove prilikom izrade u svim popularnim preglednicima i njihovim varijantama, i štelovati HTML i CSS kodove kako bi sajt bio dobro vidljiv u svim preglednicima. Ali ako baš ţelite te nekakve spiskove imate na ovoj stranisi: Rezolucija ekrana moţe uveliko promeniti izgled stranice, ĉak dotle da je stranica potpuno neĉitljiva. To se moţe preduprediti na dva naĉina. Prvi naĉin je da se koriste fiksne dimenzije (u pikselima) u dizajniranju, a to dovodi do toga da će posetioci ĉija je rezolucija ekrana manja od širine stranice morati da skroluju da bi videli celu stranicu. Drugo rešenje bi bilo fluidni grafiĉki dizajn stranice, odnosno stranica koja se prilagoċava veliĉini prozora brauzera. Postavlja se pitanje koja varijanta je bolja? Prvi naĉin deluje priliĉno loše jer kad posetiloci sa manjim rezolucijama ĉitaju nešto moraju za svaku reĉenicu da skroluju. Ispostavlja se da je drugi naĉin bolji, ali mali nedostatak drugog naĉina je taj što pri većim rezolucijama postoji verovatnoća da će se pojaviti velike praznine na stranici, što nije baš estetski. Već smo pisali da treba obratiti paţnju koliko je stranica velika u bajtima tj. vreme potrebno da se ona uĉita. Pisali smo da stranice nikad ne bi trebale biti veće od maksimum 150kB. Ali bez obzira kolika je vaša stranica u bajtima morate proveriti koliko je potrebno vremena da se uĉita Vaša poĉetna stranica na najsporijoj vezi (danas bi to još uvek bilo 56Kbps). Ako posetilac otprilike za 4 sekunde ne moţe videti o ĉemu se radi na stranici šanse su da će je i napustiti. Još jedna od stvari koje treba izbegavati je "splash screen", odnosno pozdravni ekran, koji zapravo ne sluţi niĉemu i zahteva od korisnika da još jednom klikne ili priĉeka da se završi uĉitavanje strane. FTP konekcija Završili ste vaš sajt u smislu programiranja, grafiĉkog dizajna, takodje ste zakupili domen i host, i sada vam preostaje još da te vaše fajlove sajta sa kućnog raĉunara prebacite na host servera kako bi vaš sajt bio vidljiv na internetu. E to prebacivanje fajlova sa kućnog raĉunara na host obavlja se FTP konekcijom. FTP ( eng. File transfer protocol protokol za prenos foldera i fajlova) je najĉešće korišćen protokol za prenos podataka izmeċu dva raĉunara na mreţi. Veza se uspostavlja na zahtev klijentskog raĉunara prema serverskom raĉunaru. Klijentski raĉunar poseduje program koji omogućava FTP protokol, takozvani FTP klijent, a serverski raĉunar poseduje program koji prihvata konekciju na standardnom FTP, takozvani FTP server ili FTP demon. [294]

295 Kada se veza uspostavi, klijentski program šalje korisniĉke komande serverskom programu, koji ih obavlja i šalje odgovor. Taj odgovor moţe biti poruka da je komanda uspešno obavljena ili poruka o grešci. U nastavku bavićemo se samo osnovnim praktiĉnim stvarima vezanim za FTP klijent, i to kako uspostaviti konekciju i kako prebaciti fajlove vašeg sajta sa kućnog raĉunara na host, kako bi sajt bio vidljiv na intenretu. Postoje mnogi FTP klijenti ali najpoznatiji je Total Commander. Postoje još i Windows Commander, CuteFTP i drugi. Mi ćemo ovde objasniti Total Commander jer verovatno njega već imate i koristitega već za neke druge potrebe. Ukoliko nemate Total Commander skinitega sa interneta i instalirajte. Nakon instalacije pokrenite program. Poĉetni prozor bi trebao izgledati ovako: Kliknite na ikonicu FTP, a ona je na gornjoj slici zaokruţena pod 1. Nakon klika pojaviće se sledeći prozor: [295]

296 Kliknite sad na dugme New connection, a koje je pokazano strelicom 2. Kad ostvarite prvu konekciju program će sam zapamtiti sve podatke tako da kasnije moţete brzo ostvariti konekciju u ovom prozoru kliktanjem na dugme koje nosi naziv Connect. Nego mi da nastavimo, nakon kliktanja na New connection otvara se kljuĉni prozor za našu priĉu koji izgleda ovako: U polje Session pišete šta god hoćete, na primer neka primera radi bude prvi sajt. U polje Host namese piše ime sajta sa ekstenzijom domena ali bez www, na primer: imesajta.com. U polje User namese piše vaš user name koji ste dobili prilikom registracije domena. U polje Password se piše vaša šifra koju ste takodje dobili prilikom zakupa domena. I to bi bilo otpriliko dovoljno za konekciju. Ostala polja ništa ne dirajte. Medjutim neke host firme zahtevaju da se popunjavaju još neka polja. Pa ukoliko popunite sve ovako kako je ovde zapisano ali ipak ne moţete ostvariti konekciju pozovite tehniĉki servis firme kod koje ste zakupili host da vam daju detaljnije informacije kako da popunite FTP nalog za konekciju. [296]

297 Nakon uspešne konekcije otvara vam se sledeći prozor: U ovom prozoru na desnoj strani su folderi hosta. Vidite pod "A" je adresa poĉetnog host folderao:/*.* - što znaĉi da ste na hostu. A takodje primećujete i neposredno iznad strelice "A" goreftp://sajt.com gde će u vašem sluĉaju naravno umesto "sajt" pisati ime vašeg sajta. Na levoj strani otvorite folder na vašem raĉunaru koji sadrţi fajlove vašeg sajta koje ţelite prebaciti na host. E sad jako je bitno da jedan fajl nosi naziv index kao pod "D" na slici!! Kasnije kad linkujete vaš sajt (na primer otvoriće se taj prvi poĉetni fajl, odnosno index će biti vaša poĉetna stranica. Ukoliko ne imenujete ni jedan fajl sa nazivom index Vaš sajt neće biti vidljiv na intenretu. Na desnoj strani strelica pod "B" pokazuje folder na hostu pod nazivom WWW. Otvorite taj fajl. Nakon otvaranja prebacite sve fajlove vašeg sajta sa leve strane na desnu u folder WWW. I to bi bilo to. Nakon prebacivanja moţete brauzerom linkovati vaš sajt i on će biti vidljiv. U WWW folderu moţda će te primetiti neke foldere kao što je na primer cgi-bin i sliĉno. To su sistemski folderi i njih ništa ne dirajte. Zapravo nemojte brisatim ili menjati apsolutno ništa na hostu što VI NISTE UBACILI ukoliko niste sigurni šta radite!! [297]