Embed Size (px)
Citation preview
WEB Design – osnovni pojmovi
1. HTML..................................................................................................................................................6
1.1. Uvod u HTML..............................................................................................................................6
1.2. Elementi......................................................................................................................................7
1.3. Komentari....................................................................................................................................8
1.4. Formatiranje................................................................................................................................9
1.5. Linkovi.......................................................................................................................................10
1.6. Slike...........................................................................................................................................11
1.7. Liste...........................................................................................................................................13
1.8. Tablice.......................................................................................................................................14
1.9. Boja pozadine............................................................................................................................16
1.10. Slika kao pozadina...................................................................................................................17
1.11. Meta oznake............................................................................................................................17
2. CSS....................................................................................................................................................18
2.1. Uvod i prvi primjer.....................................................................................................................18
2.2. Vrste stilova...............................................................................................................................19
2.3. Background................................................................................................................................20
2.4. Definisanje fontova....................................................................................................................21
2.5. Izrada horizontalnog menija pomoću liste - 1.dio......................................................................22
2.7. Izrada horizontalnog menija pomoću liste - 3.dio......................................................................26
2.8. Overflow Teksta Unutar Div-a...................................................................................................28
3. PHP...................................................................................................................................................29
3.1. Instalacija PHP-a........................................................................................................................29
3.2. Sintaksa.....................................................................................................................................30
3.3. Include.......................................................................................................................................32
3.4. Require funkcija.........................................................................................................................33
3.5. If petlja......................................................................................................................................34
3.7. Elseif petlja................................................................................................................................35
3.9. PHP i HTML forme.....................................................................................................................37
3.11. Arrays......................................................................................................................................44
3.12. While loop...............................................................................................................................44
3.13. Upravljanje datotekama PHP-om: Uvod..................................................................................45
3.14. Stvaranje datoteke..................................................................................................................46
3.15. Otvaranje.................................................................................................................................47
3.16. Zatvaranje datoteke................................................................................................................48
3.17. Upravljanje datotekama PHP-om: Pisanje u datoteku.............................................................48
3.18. Čitanje iz datoteke...................................................................................................................49
3.19. Brisanje datoteka.....................................................................................................................51
3.20. Nadodavanje u datoteku.........................................................................................................52
3.21. Skraćivanje datoteke...............................................................................................................52
3.22. Uploadanje datoteke...............................................................................................................53
3.23. Pražnjenje varijabli i upita.......................................................................................................55
4. My SQL.............................................................................................................................................56
4.1. Uvod i osnove u MySQL.............................................................................................................56
4.2. Korištenje baze i stvaranje tablice kroz MySQL shell klijent......................................................58
4.3. Spajanje na MySQL server.........................................................................................................60
4.4. Unos podataka...........................................................................................................................61
4.5. Brisanje podataka......................................................................................................................62
4.6. Pribavljanje podataka................................................................................................................65
4.7. Uređivanje podataka.................................................................................................................68
5. ASP...................................................................................................................................................70
5.1. Uvod u ASP................................................................................................................................70
5.2. Osnovna ASP sintaksa................................................................................................................71
5.3. Varijable....................................................................................................................................72
5.4. Arrays........................................................................................................................................72
5.5. Operatori...................................................................................................................................73
5.6. If petlja......................................................................................................................................74
5.9. Select Case.................................................................................................................................76
5.10. Loop.........................................................................................................................................77
5.11. Session.....................................................................................................................................78
5.12. Cookies....................................................................................................................................79
5.13. Forme......................................................................................................................................79
5.14. Include.....................................................................................................................................80
6. Java Script.........................................................................................................................................81
6.1. Vaš prvi Javascript kod (Hello World).......................................................................................81
6.2. Gdje stavljati javascript na stranici?..........................................................................................81
6.3. Varijable....................................................................................................................................83
6.4. If...Else.......................................................................................................................................83
6.5. If...Else If... Else petlja................................................................................................................84
6.6. Switch........................................................................................................................................85
6.7. Operatori...................................................................................................................................86
6.9. Alerti u Javascriptu....................................................................................................................87
6.10. For Loop...................................................................................................................................89
6.11. While Loop...............................................................................................................................90
6.12. Do...While Loop.......................................................................................................................91
6.13. Prekidanje i nastavak Loopova (Break - Continue) While Loop..............................................91
6.14. Arrays.....................................................................................................................................93
7. Flash.................................................................................................................................................95
7.1. Šta je to Flash?...........................................................................................................................95
7.2. Izrada prvog flash dokumenta...................................................................................................95
7.3. Upoznavanje sa radnom okolinom Flasha.................................................................................99
7.4. Upoznavanje sa Layerima, Frameovima i scenama.................................................................102
8. Literatura........................................................................................................................................107
1. HTML
1.1. Uvod u HTML
Prvo da ukratko objasnimo šta je to HTML.HTML je skraćenica od HyperText Markup Language. To je opisni jezik za stvaranje web stranica. Njime se opisuju izgled dokumenta, pozicije slika, veličina teksta, boja pozadine, boja slova itd.
HTML stranice nisu ništa drugo nego obične tekstualne datoteke koje sadržavaju upute kako prikazati stranicu. Za opis stranica se koriste tagovi koji se pišu unutar znakova < i >. Evo primjera:
Ta rečenica bi bila prikazana ovako:
Ovo je tekst za web stranicu.
Kako su HTML stranice ništa drugo nego obične tekstualne datoteke možete ih izrađivati u bilo kojem tekstualnom editoru pa čak i u najjednostavnijem Notepadu koji dolazi s Windowsima.
Umjesto tekstualnih editora, kao što je Notepad, možete koristititi vizualne editore za izradu web stranica kao što su Macromedia Dreamweaver ili Microsoft Frontpage. Vizualni editori web stranica se nazivaju i WYSIWYG editori. What You See Is What You Get
Sa WYSIWYG editorima nemate neku veliku potrebu za učiti HTML, ali svatko tko se želi imalo ozbiljnije baviti izradom web stranica mora naučiti HTML jer je HTML majka svih web stranica i sve počinje od njega.
Sve html stranice koje napravite moraju imati ekstenziju .html ili .htm (npr. mojastranica.html).
1.2. Elementi
Html elementi se sastoje od 3 osnovna dijela:1. tag koji otvara neki element,2. sadržaj elementa,3. tag koji zatvara taj element.
elementi namjena<HTML> -sa ovim elementom počinje i završava svaka
web stranica
<HEAD> -ovaj element se treba nalaziti unutar <html> elementa
-browser ne prikazuje sadržaj unutar ovog elementa
<TITLE> -ovaj element se treba nalaziti unutar HEAD
elementa-riječi koje napišete unutar ovog elementa će
biti prikazane na vrhu web browsera
<BODY> -sadržaj napisan unutar ovog elementa će se prikazivati na web stranici, to znači tu idu
tekst, slike...
Primjer:
1.3. Komentari
Sa komentarima možete pisati bilo gdje unutar skripte a taj tekst neće biti prikazivan na stranici, tj. moći će se vidjeti samo ako otvorite skriptu sa code editorom. Na ovaj način možete ostavljati sebi poruke unutar skripte i sa njima npr. skrenuti pozornost na jedan dio skripte, ili sa ovime možemo jedan dio skripte isključiti, a sačuvati kod tog dijela, kojeg možemo ponovno aktivirati ako izbrišemo sljedeće:
<! -- sa ovim otvaramo komentar--> sa ovim zatvaramo komentar
1.4. Formatiranje
U HTML-u se formatira uz pomoć tagova. Evo popisa najpoznatijih tagova za formatiranje:
<p> tag za odlomak </p><b> podebljani tekst </b><em> nakrivljen tekst </em><strong> "jaki" tekst </strong><i> nakrivljen tekst </i><sup> podignut tekst </sup><sub> spusten tekst </sub> <del> precrtan tekst </del><code> tekst kompjuterskog koda </code>
-veličina fonta:
veličina od 1-7
-boja fonta:-boju fonta možemo mijenjati na više načina:
koristeći hexa zapis boja
ili koristeći ime boje-također boju fonta možemo zapisati i u rgb zapisu ali taj zapis nije uobičajen
-vrsta fonta:
-početno slovo:
1.5. Linkovi
Vaši linkovi mogu voditi na unutrašnjost stranice(internal) ,na kojoj se nalaze (npr. link "na vrh"), na stranicu unutar vaše domene(local) ili na neku drugu stranicu izvan vaše domene(global).O tome ovisi koji ćete href atribut koristiti:
internal href="#strelica"local href="../slike/slika.jpg"global href="http://www.hotmail.com"
(href- Hypertext Reference)
Ovako izgleda kod za link u obliku teksta.Sada ćemo se posvetiti ovom dijelu koda:
ovaj dio govori na koji način će se otvoriti taj link:_blank" otvara novu stranicu u novom prozoru_self" otvara novu stranicu u trenutačnom prozoru _parent" otvara novu stranicu u okvir koji je "nadređen" linku_top" otvara novu stranicu u trenutačno otvorenom prozoru, poništavajući sve ostale okvire
Strelice
sa ovim kodom korisnika će se vratiti na vrh stranice kada on stisne link "na vrh". Prva linija koda se stavlja ondje gdje želimo da nas stranica odvede kada kliknemo na link "na vrh"; "linkovi" će biti prikazano na browseru, ali će do njega biti skriven dio "top" i onda kada kliknemo na link "na vrh" ta linija koda će potražiti koju će varijablu tražiti, u našem slučaju pronaći će "top", i odvest nas na taj dio teksta.
Email linkovi
sa ovim kodom ,kojeg možemo staviti bilo gdje na stranicu, otvorit ćemo vaš email klijent na pisanju nove email poruke sa naslovom "pomoc" i sadržajem poruke "trebam pomoc"
Download linkovi
sa ovim kodom možete stavljati link na vaše datoteke u domeni (ili datoteke na internetu).
Baza
Dobra je ideja odrediti defaultnu stranicu na koju će ići svi linkovi ako oni ne rade, tj. ako nemogu pronaći stranicu na koju se odnose.
Slikovni linkovi
Slikovne linkove ćete dobiti tako da napišete ovakav kod:
Uklonite rub tih slika ovako:
1.6. Slike
Slike se mogu dodati na vašu stranicu sa ovim kodom:
XXX zamijenite sa jednim od sljedećegasrc="pas.gif" slika se nalazi u istom direktoriju kao i HTML stranicasrc="../pas.gif" slika se nalazi u prijašnjem direktoriju od HTML stranicesrc="../slike/pas.gif" slika se nalazi u direktoriju "slike" , prijašnjem direktoriju od HTML stranice
Alternativni atribut
u slučaju da se slika nemože učitati, biti će prikazana riječ "pas" unutar okvira slike.
Formatiranje slike
-VISINA I ŠIRINA
ako želite vi odrediti veličinu slike a ne da vam browser to odredi koristite kod iznad. Ovo može biti korisno kada vam se stranica počne "raspadati" zbog veličine slika i teksta.
-VERTIKALNO I HORIZONTALNO PODEŠ ENJE
align (horizontalno)-right-left-centervalign (vertikalno)-top-bottom-center
Ovo je popis mogućih podešenja slika. Primjer koda u kojem je slika podešena:
Linkovi na slike
sa ovim kodom će browser prikazati sliku koja će voditi na neku stranicu kada kliknete na nju.
ovaj kod će prikazati manju verziju slike koja će biti link na veću stranicu. Naravno, manju sliku vi morate napraviti.Thumbnails-to je naziv za smanjene verzije slika, napravljene da bi se stranica brže učitavala ili zbog estetskih razloga. Thumbnail ima link na sliku u punoj kvaliteti.
Slike kao linkovi
primjer koda koji će pretvoriti sliku u link na neku stranicu.
primjer koda koji će prikazati na stranici umanjenu sliku koja će biti link na veću sliku.
1.7. Liste
Postoje 3 različite vrste lista. <ol>, <ul> i <dl>.
<ul> - unordered list; točkice<ol> - ordered list; brojevi<dl> - definition list; točkice
Npr. Ordered listaIzmeđu <ol> i </ol> stavljate <li> tekst </li>
Znači.....
Rezultat će biti:
Proizvodi:1. DVD2. CD3. Tipkovnica4. Monitor 5. Miš
Možete i odabrati što će biti umjesto brojeva ovako:
<ol type="a"><ol type="A"><ol type="i"><ol type="I">
U prvom primjeru pomoću ovoga <ol type="a"> bi se ispisalo
a. DVDb. CDc. Tipkovnicad. Monitor e. Miš
Za <ul> možete birati između izgleda točkica.
<ul type="square"><ul type="disc"><ul type="circle">
1.8. Tablice
Tablice su možda i najkomplikovanije za početnike i zbog toga mnogi „bježe“ od HTML – a kada na red dođe rad sa tablicama. Šta će mi to kad imam Dreamweaver koji to umjesto mene obavi?", je pitanje koje se često postavlja. E pa to nije baš tako. Ako budete možda nekada radili sa PHP-om ili ASP-om trebati će vam znanje "ručne" izrade tablica u HTML-u.
Za početak tablice koristimo <table>. U tom elementu postoje tagovi <tr> (redak) i <td> (stupac).Evo primjera jedne tablice sa dva reda i dva stupca.
Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva redka.
Evo primjera:
Primjetite Rowspan s brojem 2. Taj broj označava koliko se redaka nalazi u drugom stupcu.
Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan. Evo primjera:
CellspacingKoristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:
1.9. Boja pozadine
Boja pozadine odnosno bgcolor atribut se koristi za promijenu boje pozadine cijele stranice ili pojedinih elemenata kao što su tablice. Bgcolor možete staviti na više mjesta u HTML elemente ali mi vam prporučamo da bgcolor koristite samo za boju pozadine stranice a za tablice koristite CSS.
Evo primjera kako promijeniti boju pozadine stranice:
HTML sistem bojenja - imena bojaSada ćemo naučiti neke boje koje koristimo u HTML-u. Postoje 3 različite metode postavljanja pozadinske boje. Najjednostavniji je općeniti način (primjer: blue, green, red, silver, black, yellow...)
Evo 16 osnovnih boja:
Drugi način je Hexadecimalni način bojanja. Evo primjera:
Ovdje možete vidjeti primjere boja.Treći način bojanja je sa RGB vrijednostima. Pogledajmo primjer:
Primjer dodavanja pozadinske boje tablici
1.10. Slika kao pozadina
Pozadinsku sliku možete koristiti u bilo kojem elementu (tablicama, odlomcima, body tablice...) Ovdje ćemo naučiti kako pomoću HTML-a napraviti da slika bude kao pozadina ali inače kada naučite HTML radite to CSS-om.
Evo primjera kako pomoću HTML-a postaviti neku sliku kao pozadinu u tablici.
Za pozadinske slike, zbog veličine slika, vam je najbolje koristiti tzv. Patterne odnosno minijaturene sličice koje se stalno ponavljaju koliko je god široka tablica.
U sljedećem tutorijalu ćemo naučiti kako napravit Layout stranice pomoću tablica.
1.11. Meta oznake
Meta tagovi se uvijek postavljaju izmedju <head></head>!Na pocetku svakog html dokumenta,ovisi o programu u kojem pisete vas html kod, prvu liniju zauzima ova linija koda:
- OPIS KODA - - Označava vrstu browsera namjenjenog za pregled stranice
- OPIS KODA – - Refresh stranice svakih 60 sekundi,zelite li mjenjati vrijeme za koje ce se vasa stranica refreshati promjenite broj 60 u bilo koji broj.To ce se samo dogoditi ako izbrisete url=http://www.net.hr,inače bi vas nakon 60 sekundi preusmjerilo na net.hr stranicu.Također ako želite da se vaša stranica nakon 60 sekundi prebaci na neku drugu stranicu promjenite url=”vašaStranica.com”
- OPIS KODA –- Upisujući ovo u <head> stranica omogućavate sebi pisanje na našem jeziku, te slova čćšđž
- OPIS KODA –- Upisite vaše ime ili osobne podatke
- OPIS KODA –Opis vaše web stranice
2. CSS
2.1. Uvod i prvi primjer
CSS je skraćenica od Cascading Style Sheets. Style (stil) definira kako prikazati HTML elemente. CSS vam može uštedjeti mnogo vremena i uz to poboljšati izgled i funkcionalnost vaših web stranica.
Style možemo pisati unutar <head> i </head> tagova ili u eksternim style stranicama. Češće korištena varijanta je pisanje CSS-a u eksternim stranicama. Ali mi ćemo prvo koristiti unutar <head> i </head> tagova radi lakšeg učenja, a kasnije ću vam objasniti kako se prebaciti na eksterni način rada. Ako želite imati CSS unutar head tagova, napišite ovo između <head> i </head>:
Između toga pišete vaš CSS kod. Npr. kao najjednostavniji primjer koristit ćemo ovo. Između dodajte ovaj kod:
body{color: red;}
S ovime ste promijenili boju teksta u crveno na cijeloj stranici. Sada probajte nešto napisati na vašu web stranicu. Gdje god nešto probate napisati bit će napisano crvenom bojom. To je bio najjednostavniji primjer. Evo sada primjer kako vam CSS može olakšati posao. Između <style type="text/css"> i </style> napišite sljedeće:
#primjer{background-color:#003366;padding: 20px;border: 1px;color: #FFFFFF;height: 200px;width: 400px; }
i zatim između <body> i </body> upišite:
<div id="primjer"> Ja ucim CSS </div>
2.2. Vrste stilovaPostoje interni, externi inline CSS style.
Interni style- Piše se u head dijelu stranice. Evo primjera:
<html><head><style type="text/css">.tablica {background-color: #006699;color: #FFFFFF;font-family: Tahoma; }</style></head><body>
<div class="tablica"> Tutorijali.Net </div>
</body></html>
Eksterni style- Ovaj način je najčešći. Piše su u externom fajlu. Otvorite notepad i napišite isto kao gore.
.tablica {background-color: #006699;color: #FFFFFF;font-family: Tahoma; }
Imenujte taj fajl npr. style.css
Sada u HTML fajlu moramo povezati taj externi CSS Style sa našom stranicom. To ćete napraviti tako da dodate ovu liniju koda u head dijelu stranice:
<link href="style.css" rel="stylesheet" type="text/css" />
HINT: ako ćete tako povezati onda style.css mora biti u istom folderu u kojem je i stanica s kojom se povezuje inače morate ispred style.css dodati putanju do fajla.
Inline style- Inline style se koristi na sljedeći način:
<td style="background: blue; color: white;">Plava pozadina sa bijelim tekstom.</td>
2.3. Background
U ovom tutorijalu ćemo vam objasniti Background dijelu CSS-a koji je vrlo koristan i puno korišten pri izradi web stranica.
Background color
Sa Backgroundom color možete promijeniti boju pozadinu bilo kojem elementu. Napravimo jedan css style za pozadinu koji ćemo primjeniti na raznim elementima.
.pozadina {background-color: #006699; }
Evo primjera kako to možete iskoristiti:
<table class="pozadina"></table><td class="pozadina"> </td><p class="pozadina">
Background Image
CSS ima mogućnost da umjesto boje postavite neku sliku kao pozadinu. Evo primjera:
.pozadina {background-image: url(neka-slika.jpg); }
ili sa punim pathom do slike npr.
.pozadina {background-image: url(http://www.tutorijali.com/slike/neka-slika.jpg); }
CSS ima još nekih naprednijih mogućnosti kod korištenja Backgrounda ali to ćemo objašnjavati kasnije jer nam nije sada cilj zamarati vas tim stvarima dok ne naučite osnove.
2.4. Definisanje fontova
Za prvi primjer koristit ćemo bojanje fonta po veličini fonta. Boju možemo promijeniti na sljedeće načine:
h4 { color: red; }h5 { color: #9000A1; }h6 { color: rgb(0, 220, 98); }
Ako vam to bude u style sheetu onda ćete kod h4, h5, i h6 fonta imati različite boje.
Font family
Evo kako možete promijeniti vrstu fonta:
h4 { font-family: Verdana; }h5 ( font-family: Arial; }h6 { font-family: Tahoma; }
Naravno ne morate postaviti h4, h5 i slično, možete i za određenu tablicu, npr:
.nekatablica {font-family: Verdana;}
Font size
Veličinu fonta možete odrediti u postotcima i pixelima. Npr.
.nekatablica {font-size: 120%; }
.drugatablica { font-size: 10px; } }
Font style
Font style odnosno nakošeni, podebljani ili normalni font definirate ovako:
.tablica {font-style: italic; }
.tablica2 {font-style: oblique; }
.tablica3 {font-style: normal; }
Font Variant
Ako napišete npr:.nekatablica { font-variant: small-caps; }
Dobti ćete "mala - velika slova" odnosno caps lock slova ali manja nego normalno.
2.5. Izrada horizontalnog menija pomoću liste - 1.dio
Ovo dosad su bile neke osnove CSS-a, nema smisla sve to objašnjavati, jednostavno uzmete neki css editor i učite po primjerima. Mi ćemo se zadržati na nećem korisnom.
U HTML tutorijalima ste mogli pročitati kako napraviti jednostavnu listu. Netko bi pomislio da one nisu korisne za ništa osim nekakvog nabrajanja. Ali ne, mi ćemo ih iskoristiti za izradu menija pomoću CSS-a.
Ići ćemo korak po korak, tako da ćemo najprije napraviti običnu horizontalnu listu koja sama po sebi ružno izgleda, ali u kako ću pisati tutorijale jedan po jedan tako ćemo praviti menije pomoću CSS koji će izgledati vrlo lijepo.
Idemo sada napraviti jednostavni horizontalni menu sa vrlo malo CSS-a. Neće biti baš lijep, ali za početak.... :)
Korisit ćemo interni CSS dakle u jednom fajlu.
Ovo napišite izmešu <head> i </head>:
<style type="text/css">#lista li{display: inline;padding-right: 20px;font-weight: bold;}
#lista a:hover {color: #FF9933;}</style>
Znači definirali smo CSS-om kako da se prikazuje lista pod ID-om "lista".
Sadisplay: inline;
smo naredili da se lista pod ID-om "lista" prikaže horizontalno.
Sapadding-right: 20px;
smo odmakuli desno svaki stavak u listi da nebi bili sljepljeni jedan na drugi.
Safont-weight: bold;
smo naravno definirali da nam tekst bude Bold.
I na kraju smo samo još dodali #lista a:hover odnosno kako će se ponašati linkovi kada se pređe strelicom miša preko njih.
To je sve što se tiče CSS dijela. Sada još moramo napraviti listu. Napravimo onda najprije jedan <div> u kojem ćemo držati naš menu odnosno listu i zatim unutar tog div-a napravimo listu koja će nam služiti kao menu.
<div><ul id="lista"><li><a href="bla1.html">Link 1</a></li><li><a href="bla2.html">Link 2</a></li><li><a href="bla3.html">Link 3</a></li><li><a href="bla4.html">Link 4</a></li><li><a href="bla5.html">Link 5</a></li></ul></div>
Vidite da smo listi dali id "lista". Znači da će se ta lista prikazat onako kako smo odredili CSS-om.
Primjer kako to izgleda možete pogledati ovdje.
Kao što sam već napomenuo, ovo je samo obična lista, nije nikakav menu. To je samo osnova i temelj za ono što ćemo napraviti postepeno u idućim tutorijalima.
2.6. Izrada horizontalnog menija pomoću liste - 2.dio
U prošlom tutorijalu smo naučili kao napraviti jednostavnu horizontalnu listu gdje linkovi mijenjaju boju kada se dođe mišem na njih.
Sada ćemo to zanje malo unaprijediti da poboljšamo izgled naše horizontalne liste i napravimo jedan lijepi horizontalni menu.
Dakle ovo postavite između <style type="text/css"> i </style> pa ćemo redom objašnjavati.
#lista{margin-left: 0;padding-left: 0;}
#lista li
{display: inline;list-style-type: none;}
#lista a{color: #FFFFFF;background-color: #003366;text-decoration: none;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight:bold;padding: 3px 10px;}
#lista a:hover{color: #FFFFFF;background-color: #6699CC;text-decoration: none;}
Sa#lista{margin-left: 0;padding-left: 0;}
smo napisali tako da našu listu možemo pomaknuti u lijevu stranu koliko ide da nema razmaka.
Sa#lista li{display: inline;list-style-type: none;}
smo definirali da se lista (li) u stilu "lista" prikazuje u liniji (display: inline), da nema nikakvih točkica, brojeva ni ničega ispred sebe (list-style-type: none)
Sa
#lista a{color: #FFFFFF;background-color: #003366;text-decoration: none;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight:bold;padding: 3px 10px;}
smo definirali da svi linkovi u stilu lista budu bijele boje, definirali smo pozadinu, da ne bude podvučen link (text-decoration: none), definirali font te stavili da ima 3px razmaka gore i dolje, te 10px razmaka lijevo i desno (padding: 3px 10px)
Sa#lista a:hover{color: #FFFFFF;background-color: #6699CC;text-decoration: none;}
smo odredili kako će se lista ponašati kada se pređe mišem preko linkova. Promijena bojea i da ne bude pocrtano.
I to je to što se tiče novog stila.
Sada možete prekopirati html kod od naše stare liste:
<div><ul id="lista"><li><a href="bla1.html">Link 1</a></li><li><a href="bla2.html">Link 2</a></li><li><a href="bla3.html">Link 3</a></li><li><a href="bla4.html">Link 4</a></li><li><a href="bla5.hrml">Link 5</a></li></ul></div>
i pogledati kako to izgleda u akciji.
2.7. Izrada horizontalnog menija pomoću liste - 3.dio
U prošlom tutorijalu naučili smo kako napraviti jednostavni menu koji koji mijenja boju pozadine kada se pređe mišem preko linkova.
Sada ćemo napraviti slično tako ali još malo bolje.
Dodajte ovo između <style type="text/css"> i </style> pa ćemo objasniti.
#lista{padding-left: 0;margin-left: 0;}
#lista li{list-style-type: none;display: inline;}
#lista a{font-family: Verdana;font-weight: bold;font-size: 12px;padding: 2px 5px 2px 5px;border-left: 10px solid #000066;background: #006699;text-decoration: none;color: #FFCC33;}
#lista a:hover{border-color: #6699CC;color: #FFFFFF;background: #000000;}
Gotovo je sve isto kao i u prošlom tutorijalu pa nema potrebe da objašnjavamo što koji kod radi. Reći ću samo za ono što je nadodano da bi se dobili ovi kvadratići sa strane.
U #lista a smo nadodali ovaj kod
border-left: 10px solid #000066;
Što pravi border širine 10 pixela sa lijeve strane. To vam je ovaj kvadratić.
zatim smo u #lista a:hover nadodali ovo:
border-color: #6699CC;
odnosno da onaj border od 10px promijeni boju u svijetlo plavu.
Eto, to bi bilo sve. Ne zaboravite u body dio stranice napraviti listu:
<div><ul id="lista"><li><a href="bla.html">Link 1</a></li><li><a href="bla2.html">Link 2</a></li><li><a href="bla3.html">Link 3</a></li><li><a href="bla4.html">Link 4</a></li><li><a href="bla5.html">Link 5</a></li></ul></div>
Evo kako to izgleda u akciji:
.
2.8. Overflow Teksta Unutar Div-a
Pokazat cu vam kako napraviti overflow texta unutar div-a.
Pravimo div #overflwed<style type="text/css">#overflwed {width: 400px; /* definiramo sirinu div-a*/height:200px; /* definiramo visinu div-a*/border-bottom:1px solid silver; /* donji rub*/border-top: 1px solid silver; /* gornji rub*/margin:0 auto; /* centriramo div na sredinu stranice*/overflow: scroll; /*Omogucavamo overflow */overflow-x:hidden;/* Sakrivamo kliznu traku po x-osi*/}
Opis imate poslije svake linije koda
Uredjujemo paragraf i Zatvaramo </style>p {margin-left:5px;color:blue;font-family: tahoma;
font-size:10px;}</style>
Ubacujemo ga u html
<!-- Unosimo div u html --><div id="overflwed"><p>Ovaj kod objasnjava kako napraviti div,koji ce ako se upise previse teksta sam od sebe napraviti scroll.Klizne trake se naravno mogu modificirati,moze im se mjenjati boja,ali to je podrzano samo u Internet Exploreru.Dok u Firefoxu ne radi,iako je Firefox trenutno na mnogo boljem glasu.Sad cu upisati mnogo slova tek toliko da vidite,kako ce se napraviti scroll!
-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>By:Goran</p></div>
Cijeli kod od <div id="overflwed"> do </div> morate ubaciti u body dio
Ovako izgleda konačan rezultat Overflow
3. PHP3.1. Instalacija PHP-a
Kada želite napraviti web stranicu baziranu na PHP-u prvo morate imat otvoren korisnički račun kod nekog web hosting providera. Također taj vaš račun kod tog providera mora imati podršku za PHP (što je naznačeno u opisu računa) i pristup MySQL bazama podataka.Također morate imati i PHP i MySQl instaliran na vašem računalu. MySQl nije obavezan kod korištenja PHP ali sa kombinacijom PHP & MySQL možete raditi čuda.Link za download PHP i uputstva za instalaciju možete naći ovdje.
Instalacija:Php možete instalirati automatski koristeći Windows installer i onda će on biti automatski i podešen, ali ta instalacija nije sigurna te bi trebali ipak PHP instalirati ručno. Ručnih načina za instalaciju ima puno, a o vašim potrebama ovisi na koji način (i što sve) ćete instalirati.
Zašto instalirati php?Ako vaš server podržava PHP onda nema nikakve potrebe instalirati PHP.
TestiranjeSve vaše skripte možete testirati sa programom XAMPP.
3.2. Sintaksa
Syntaxe su pravila koja moramo poštovati pri pisanju nekog koda tako da bi taj kod radio. O programskom jeziku ovisi kakve ćemo syntax koristiti.
<?phpneki kod?>
Ako hoćete da vaš php kod radi onda se on mora nalaziti unutar ovih tagova.
Kako spremiti PHP stranicu?
Ako hoćete da browser izvrši vaš kod u toj stranici stranica (datoteka) mora imati ekstenziju .php
Razmaci
Razmaci u PHP-u su potpuno dopušteni. U PHP skripti možete koristiti razmake, uvlačiti određene dijelove koda sa Tab tipkom; za razliku od HTML gdje razmaci nisu dopušteni.
Hello world!
Sada ćemo napraviti primjer jedne HTML i PHP stranice:
<html><head>
<title>jednostavna stranica</title></head><body><?phpecho "Hello World!";?></body></html>
Rezultat u browseru:Hello World!
Točka-zarez ;
; ovaj znak na kraju koda govori da je PHP tvrdnja gotova i taj znak nikad nesmijete zaboraviti
Komentari
Komentari u PHP su slični komentarima u HTML-u, ali PHP ima 2 tipa komentara:1) jednolinijski komentar. Kada stavite ovaj znak // sve desno od tog znaka će biti komentar2) višelinijski komentar.ova vrsta komentara počinje sa /* i završava sa */
3.3. Varijable
Kao i mnogim drugim programskim jezicima pa tako i u PHP-u varijable nam služe da pohranimo neku vrijednost. Kada spremimo neku vrijednost u neku varijablu možemo je koristiti dalje u kodu bez potrebe da ponovo upisujemo tu vrijednost.
Evo primjera:
$ime_korisnika = "Mario";
Primjetite navodnike kod imena Mario.
ili
$broj = 189;
Primjetite da kod brojeva ne trebaju navodnici.
Pravila imenovanja varijabli
- PHP varijable moraju početi sa slovom ili znakom _- PHP varijable mogu sadržavati jedino alfa-numeričke znakove a-z , A-Z, 0-9 ili _- Varijable sa više riječi trebale bi biti razdvojene sa _ ili ih možete napisati ovako da razlikujete riječi u imenu:
$mojaVarijabla
3.3. Include
PHP funkcija INCLUDE vam može spasiti puno vremena.Ta funkcija uzima datoteku i ubacuje njen sadržaj u skriptu koja je pozvala tu funkciju.
Primjer:Recimo da smo htjeli napraviti uobičajeni file menu koje će sve naše stranice korisititi. Kada hoćemo neke stranice includati običaj je da imaju .inc exstenziju. Menu ćemo nazvati „menu.inc“
<html> <body><a href="index.php">Početna</a> - <a href="about.php">O nama</a> - <a href="links.php">Linkovi</a> - <a href="contact.php">Kontakt</a> <br />
Spremite ovo iznad pod „menu.inc“. Sada napravite novi file imenom "index.php" u istom direktoriju kao i menu.inc. Ovdje ćemo iskoristiti prednosti include funkcije i dodat ćemo našem menu-u kod indeks.php.
<?php include("menu.inc"); ?><p>Ovo je moja stranica!</p></body></html>
Prikaz:Početna – O nama - Linkovi - Kontakt
Ovo je moja stranica!
Ako koristimo include funkciju da includamo menu na svakoj našoj stranici, korisnik će, ako gleda kod indeks.php, vidjeti:
<html> <body><a href="index.php">Početna</a> - <a href="about.php">O nama</a> - <a href="links.php">Linkovi</a> -
<a href="contact.php">Kontakt</a> <br /> <p> Ovo je moja stranica!</p></body></html>
Sažetak
Include komanda uzima sav tekst koji postoji u nekom fileu i kopira ga u file koji koristi inlude funkciju. Include funkcija je korisna kada želiš inlcludati više stranica i kod izrade web-stranica .
3.4. Require funkcija
Require funkcija se koristi kad se hoće includati file u vaš php kod. Ali postoji ogromna razlika između require i include funkcije:Kada includaš file sa include funkcijom i PHP nemože naći file vidjet ćeš grešku:
<?phpinclude("nepostojifile.php");echo "Hello World!";?>
Prikaz:Warning: main(nepostojifile.php): failed to open stream: No such file or directory in /početna/imeStranice/imeFoldera/skripta.php on line 2Warning: main(): Failed opening 'nepostojifile.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /početna/imeStranice/imeFoldera/skripta.php on line 2
Hello World!
Primjetili ste da se naša echo tvrdnja izvršila iako se pojavilo upozorenje, zbog toga što WARNING ne spriječava php skriptu da se ona izvrši. Ali, ako koristimo require funkciju, dobit ćemo sljedeće:
<?phprequire("nepostojifile.php");echo "Hello World!";?>
Prikaz:Warning: main(nepostojifile.php): failed to open stream: No such file or directory in /početna/imeStranice/imeFoldera/skripta.php on line 2Fatal error: main(): Failed opening required 'nepostojifile.php'
(include_path='.:/usr/lib/php:/usr/local/lib/php') in /početna/imeStranice/imeFoldera/skripta.php on line 2
Echo tvrdnja se nije izvršila zato što se skripta nije izvršila nakon što je require funkcija vratila kao rezultat grešku. Preporuča se da se korisiti require funkcija umjesto include zbog toga da se vaše skripte ne izvršavaju ako neki važni fileovi nedostaju ili su krivo imenovani.
3.5. If petlja
PHP petlja IF je jako slična petlji IF iz raznih drugih programskih jezika. Također, ta petlja je bitna za svako programiranje.Primjer:
<?php$moje_ime = "Bond";if ( $moje_ime == "Bond" ) {echo "Moje ime je Bond!<br />";}echo ",James Bond";?>
Rezultat:
Moje ime je Bond!,James Bond
Također, u PHPu, kada uspoređujete dvije varijable i želite provjeriti jesu li one jednake onda koristite = =U ovom slučaju, rezultat je bio istinit.Sada ćemo provjeriti šta će se dogoditi ako je rezultat te dvije usporedbe lažan:
<?php$moje_ime = "Zagor";if ( $moje_ime == "Bond" ) {echo "Moje ime je Bond!<br />";}echo ",James Bond"; ?>
Rezultat:,James Bond
U ovom slučaju, varijabla Zagor nije bila jednaka varijabli Bond, pa zbog toga je izvršen samo dio echo "Moje ime je Bond!";
Ako znate koristiti petlju IF pravilno, ona može postati itekako važna u vašem programiranju.
3.6. If/Else petlje
If/else petlja je napredniji oblik „čiste“ IF petlje. Objasnit ću vam kako radi IF/ELSE petlja: Želite na svojoj stranici pitati korisnike jesu li zadovoljni sa izgledom stranice. Sa IF petljom je to jako jednostavno. Postavite dva pitanja: „Zadovoljan sam“ i „nisam zadovoljan“. Ako odabere „Zadovoljan sam“ proslijedite ga natrag stranicu, a ako odabere „nisam zadovoljan“ proslijedite ga na stranicu (npr) „prijedlozi“.
Najjednostavniji primjer if/else petlje:
<?php$broj_jedan = 1;if ( $broj_jedan == 1 ) {echo "Ova tvrdnja je tocna";} else {echo "Ova tvrdnja nije tocna";} ?>
Rezultat:Ova tvrdnja je tačna.
U ovom slučaju, tvrdnja je bila točna. Sada ćemo napraviti primjer gdje tvrdnja nije točna:
<?php$broj_jedan = 15;if ( $broj_jedan == 23 ) {echo "Ova tvrdnja je tocna";} else {echo "Ova tvrdnja nije tocna";} ?>
Rezultat:Ova tvrdnja nije tačna
3.7. Elseif petlja
Elseif petlja, za razliku od If/else petlje, je dobra kada se treba provjeriti više od jednog uvjeta. Toj petlji mora prethoditi if petlja. Ako je rezultat if petlje neistinit, PHP će provjeriti elseif petlju. Ako je rezultat te petlje također neistinit, PHP će provjeriti, ako ih ima, sljedeću elseif petlju. Ako više nema elseif petlji ,php će izbaciti rezultat zadan else petljom.
Sada ćemo napraviti jedan osnovni primjer. Želimo, na primjer, provjeriti jeli neki zaposlenik u nekoj tvrtki šef (nazvat ćemo ga Pero):
<?php$zaposlenik = "Pero";if($zaposlenik == "Stefica"){echo "Dobro jutro mala";} else {echo "Jutro";} ?>
A ako smo htjeli također provjeriti jeli zaposlenik zaposlenik Pero šef moramo koristiti elseif petlju.
<?php$zaposlenik = "Pero";if($zaposlenik == "Stef"){echo "Dobro jutro mala";} elseif($zaposlenik == "Pero"){echo "Dobro jutro šefe!";}else {echo "Jutro";} ?>
Rezultat:Dobro jutro šefe!
3.8. Switch petlja
Sa switch petljom možete provjeriti jako puno uvjeta odjedanput. Switch petlja je puno brža, korisnija i jednostavnija od if petlje. Jedna switch petlja može zamijeniti desetke if petlji.Switch petlja radi tako da uzme jednu varijablu i provjerava je sa svim dostupnim slučajevima.
Primjer:
<?php$vrijeme = "suncano";echo "Vrijeme ce biti $vrijeme<br />";switch ($vrijeme){case "suncano":echo "Ponesi suncane naocale.";break;
case "kisovito":echo "Ponesi kisobran!";break; case "hladno":echo "Dobro se obuci";break; } ?>
Prikaz:Vrijeme ce biti suncanoPonesi suncane naocale.
Takođe, dobra je ideja da napravite jedan zadati slučaj:
Primjer:
<?php$vrijeme = "maglovito";echo "Vrijeme ce biti $vrijeme<br />";switch ($vrijeme){case "suncano":echo "Ponesi suncane naocale.";break; case "kisovito":echo "Ponesi kisobran!";break; case "hladno":echo "Dobro se obuci";break; default:echo "Cuvaj se!";break; } ?>
Rezultat:Vrijeme ce biti maglovitoCuvaj se!
3.9. PHP i HTML formeFormulari
Na web stranicama se može često vidjeti razne forme koje korisnik može ispuniti, naprimjer kod registracije, online kupovanja….itd.Prvo što moramo napraviti kod ovakve vrste forme, gdje HTML forma šalje podatke PHP
stranici je, naravno HTML forma.
Odmah u samome početku morate znati da php razlikuje $varijabla od $Varijabla. Dakle na to morate pripaziti jer su to zapravo dvije sasvim različite varijable.Pri definiranju varijable treba znati i da ona ne smije počinjati sa brojevima, iako ih smije sadržavati.
Krenimo od početka. Kao što sam već rekao u prethodnom dijelu da biste radili u php-u potrebno je predznanje osnova html-a. Sljedeći kod je html forma u koju je potrebno unjeti ime i prezime.
<form method="POST" action="obradi.php"><input type="text" name="ime" size="20"> Ime <br /><input type="text" name="prezime" size="20"> Prezime <br /><input type="submit" value="Pošalji" name="posalji"></form>
Dakle analizirajmo taj gore kod. U prvoj liniji vidite method=POST, taj dio koda govori kako će se podatci nformulara slati skripti, osim ove metode postoji i GET metoda. Razlika je u tome što pri POST metodi korisnik ne vidi što formular zapravo šalje skripti, ta metoda je sigurnija.U nastavku prve linije se nalazi action=obradi.php, taj dio govori formularu kojem fajlu da se šalju podatci iz formulara na obradu.Ovaj ostatak je jasan, tu se nalazi kod za polja koja treba popuniti.
Ovaj gore kod spremite kao forma.htm
Sada napravite novi fajl i nazovite ga obradi.php.U taj fajl pišite sljedeći kod:
<?php$ime = $_POST[ime];$prezime = $_POST[prezime];
Echo "Vaše ime je $ime, a prezivate se $prezime .";
?>
Da analiziramo i ovo. Prva linija varijabli $ime daje vrijednost polja „ime“ iz formulara. Ime polja smo zadali u formularu u dijelu name=ime. Ista stvar je i u drugoj liniji. Treća linija koda ispisuje rečenicu sa varijablama na odgovarajućim mjestima.Sada u browser upisite http://localhost/forma.htm i isprobajte skriptu.
U nastavku ćemo napisati još jedan jednostavan primjer pomoću formi. Napraviti ćemo jednostavnu aplikaciju koja će zbrojiti dva broja.
Dakle imamo ovakav formular:
<form method="POST" action="zbroji.php"><input type="text" name="broj1" size="20"> broj1 <br /><input type="text" name="broj2" size="20"> broj2 <br /><input type="submit" value="ZBROJI" name="zbroji"></form>
Spremimo to kao zbrajanje.htm
Sada kao što se iz formulara vidi treba nam skripta koja će zbrojiti brojeve koje unesemo, fajl se zove zbroji.php, a kod bi izgledao ovako:
<?php$broj1 = $_POST[broj1];$broj2 = $_POST[broj2];$zbroj = $broj1+broj2;
Echo "Rezultat je: $zbroj";
?>
Dakle prve dvije linije su jasne jer sam ih prethodno već objasnio. Jedino ova treća linija je nešto novo. Dakle tu varijabli $zbroj dajemo vrijednost $broj1+$broj2. Ona zbraja ta dva broja, znači zbroj tih brojeva je njezina vrijednost. U nastavku echo ispisiuje rezultat zbrajanja. Osim zbrajanja možete staviti bilo koju drugu matematičku operaciju. Ova skripta naravno ima nedostataka, na primjer što bi se dogodilo da umjesto broja unesete slova. Tada bi skripta ispisala da je rezultat 0, jer brojeva nema.
Evo sada jednog jednostavnog primjera pizzerije. Napravit ćemo formu i spremiti ju u narudzba.html
Kod narudzba.html:
<html><body><b>Pizzerija kod Debele babe</b><form><select> <option>mala pizza</option><option>srednja pizza</option><option>velika pizza</option></select>Kolicina: <input type="text" /> <input type="submit" /></form></body></html>
Ovo ćemo spremiti pod narudzba.html
Prikaz:
Ali mi želimo da naša HTML forma odredi PHP stranicu kojoj ćemo poslati informacije. Naravno, koristiti ćemo metodu POST.Kod narudžbe.html:
<html><body><b>Pizzerija kod Debele babe</b><form action="procesiranje.php" method="post"><select name="velicina"> <option>mala pizza</option><option>srednja pizza</option><option>velika pizza</option></select>Kolicina: <input name="kolicina" type="text" /> <input type="submit" /></form></body></html>
Sada ćemo napraviti procesiranje.php koji će obraditi podatke.
<html><body><?php$kolicina = $_POST['kolicina'];$velicina = $_POST['velicina'];echo "Vi ste narucili ". $kolicina . " " . $velicina . ".<br />";echo "Dodite nam opet!";?></body></html>
Ako netko odabere npr: 5 i malu pizzu rezultat će biti:Vi ste naručili 5 mala pizza.Dođite nam opet!
Napomena: rezultat izgleda kao da ga je rekao, tj. pisao indijanac. Taj problem ostavljam na vama da ga riješite kako god vam se sviđa!
Nadam se da vam je jasnije korištenje formulara, malo sada sa ovime što smo naučili isprobavajte. Pokušajte staviti više polja u formular. Već smislite nešto.
3.10. Operatori
Operatori se koriste da upravljaju ili izvode operacije na varijablama i vrijednostima.Kako je puno operatora koji se koriste u PHP, oni su svrstani u sljedeće kategorije:
Pridružujući operatori (Assignment Operators)Matematički (aritmetički) operatori (Arithmetic Operators)Uspoređivajući operatori (Comparison Operators)Znakovni operatori (String Operators)Kombinirani matematički i pridružujući operatori
Pridružujući operatori
-koriste se da bi izjednačili dvije varijable ili da izjednače vrijednost jedne varijable sa vrijednosti druge varijable.-takva pridruživanja obavljamo sa znakom jednakosti “= “Primjer:
$prva_varijabla = 9;$druga_varijabla = $prva_varijabla
Sada obadvije varijable sadrže vrijednost 9.
Matematički operatori
Operator Značenje+ zbrajanje- oduzimanje* množenje/ dijeljenje% ostatak
Kod:
<?php$zbrajanje = 2 + 4; $oduzimanje = 6 - 2; $mnozenje = 5 * 3; $dijeljenje = 15 / 3; $ostatak = 5 % 2; echo "zbroji: 2 + 4 = ".$zbrajanje."<br />";
echo "oduzmi: 6 - 2 = ".$oduzimanje."<br />"; echo "pomnozi: 5 * 3 = ".$mnozenje."<br />"; echo "podijeli: 15 / 3 = ".$dijeljenje."<br />"; echo "izracunaj ostatak: 5 % 2 = ".$ostatak.";?>
Prikaz:zbroji: 2 + 4 = 6 oduzmi: 6 - 2 = 4 pomnozi: 5 * 3 = 15 podijeli: 15 / 3 = 5 izracunaj ostatak: 5 % 2 = 1
Uspoređivajući operatori
-koriste se da bi provjerili odnos između varijabli i/ili vrijednosti. Imaju dva rezultata :true i false. Ovo su najvažniji u PHP-u:
$a = 1; $b = 2;
Operator Značenje Primjer Rezultat == jednako $a == $b false === apsolutno jednako $a===$a true!= nije jednako $a != $b true < manje od $a < $b true > veće od $a > $b false <= manje ili jednako od $a <= $b true >= veće ili jednako od $a >= $b false
Znakovni operatori
-točka "." se koristi da bi se spojila dva stringa Kod:
<?php$prvi_string = "Bok";$drugi_string = " stari";$novi_string = $prvi_string . $drugi_string;echo $novi_string . "!"; ?>
Prikaz:Bok stari!
Kombinirani matematički i pridružujući operatori
U programiranju ćete vrlo često naići na potrebu da povećate varijablu za neki određeni iznos. Najjednostavniji primjer je brojač. Recimo da želite povećavati brojač za jedan.
$brojac = $brojac + 1;
Ali, kraće to možete napraviti ovako:$brojac += 1;
Ovakav operator će napraviti isto kao i ovaj prošli. Jedini manjak ovog novog operatora je da smanjuje čitljivost koda programerima koji nisu naučili na takav operator. Ovo su primjeri najpoznatijih operatora:
Operator Značenje Primjer Drugi način:+= plus jednako $x += 2; x = $x + 2; -= minus jednako $x -= 4; x = $x - 4; *= množenje jednako $x *= 3; x = $x * 3; /= dijeljenje jednako $x /= 2; x = $x / 2; %= ostatak jednako $x %= 5; x = $x % 5; .= ulančena izjednačavanja
$moj_string.="bok"; $moj_string = $moj_string."bok"
Prije/Poslije-povećanje i Prije/Poslije-smanjenje
Postoji i još kraći način za dodavanje ili oduzimanje 1 od varijable. Da dodamo jedan varijabli koristimo operator ++
$x++; ovo je jednako $x += 1; ili $x = $x + 1;
Ako želimo oduzeti jedan od varijable koristimo -- operator:$x--; ovo je jednako $x -= 1; ili $x = $x - 1;
Također, možemo odrediti želimo li uvećati varijeblu za jedan prije nego što se linija koda izvrši ili nakon njezinog izvršavanja:
Kod:
<?php $x = 1;echo "vrijednost x sa poslije-uvecanja = " . $x++;echo "<br /> vrijednost x poslije poslije-uvecanja je " . $x;$x = 1;echo "<br />vrijednost x sa prije-uvecanja = " . ++$x; echo "<br /> vrijednost x poslije prije-uvecanja je" . $x;?>
Prikaz:
vrijednost x sa poslije-uvecanja = 1vrijednost x poslije poslije-uvecanja je = 2vrijednost x sa prije-uvecanja = 2vrijednost x poslije prije-uvecanja je = 2
3.11. Arrays
Sa arrayima možemo spremiti više vrijednosti u jednu varijablu.
Numeričko indexirani array
Ako želimo, npr. spremiti više imena u jednu varijablu, tako da poslije nemoramo pozivati svako ime sa svojom zasebnom varijablom, to ćemo napraviti ovako:
$ime_array[0] = "Gogy";$ime_array[1] = "Leviathan";
Koristili smo key/value strukturu arraya:$array[key] = value;
Sada ako želimo iskoristiti tu varijablu to ćemo napraviti ovako:
echo "Tko su face?". $ime_array[0] . " & " . $ime_array[1];
Prikaz:Tko su face? Gogy & Leviathan
Pridruženi arrayi
U pridruženim arrayima ključ je pridružen vrijednosti:$godine["Gogy"] = 18;$godine["Leviathan"] = 16;
echo "Gogy ima " . $godine["Gogy"] . "<br />";echo "Leviathan ima " . $godine["Leviathan"];
3.12. While loop
Loop koristimo kada trebamo nešto ponavljati dok se ne zadovolji neki uvjet i dok se neki
zadatak ne izvrši.
Pogledajmo primjer jednog loopa:<?php
$broj = 1;while($broj<=50) {echo "Tutorijali.Net";$broj++;}
?>
Dakle varijabli $broj smo dodali vrijednost 1. Pomoću while smo definirali da se ponavlja "Tutorijali.Net" sve dok je varijabla $broj manja ili jednaka broju 50. Pomoću $broj++; smo napravili da se nakon ispisa vrijednost varijable $broj poveća za 1. I tako ide sve do broja 50.
Do... While
Evo jednostavnog primjera za do...while.
<?php
$broj = 1;do { echo "Ispisuje se broj $broj <br />";$broj++;} while ($broj > 100 && < 600 );
?>
While je vrlo često korištena stvar kod čitanja podataka iz baze pa bi bilo dobro da to dobro naučite.
3.13. Upravljanje datotekama PHP-om: Uvod
Stvaranje, editiranje, otvaranje i brisanje datoteka pomoću php-a je osnova svakog većeg ozbiljnog programiranja.Ovi sljedeći tutorijali će vas naučiti gotovo svemmu što trebate znati ako želite manipulirati datotekama pomoću PHP-a.
Upozorenje:
Kada manipulirate datotekama php-om morate biti vrlo oprezni zato što možete napraviti
veliku štetu ako napravite nešto krivo. Uobičajene greške su: editiranje pogrešnih datoteka, stvaranje smeća na vašem disku i slučajno brisanje sadržaja datoteka ili cijelih datoteka.
3.14. Stvaranje datoteke
Upravljanje datoteka PHP-om: stvaranje datoteke
Sada ćemo naučiti kako stvoriti datoteku koristeći PHP.Važno:-u php-u datoteke se stvaraju istom komandom koja se koristi i za otvaranje datoteka! Funkcija za stvaranje datoteka se zove fopen. Ako naredimo php-u da otvori datoteku koja ne postoji on će je stvoriti. Ako takva datoteka postoji, php će je otvoriti bez stvaranja nove.
Fopen funkcija mora sadržavati dvije važne informacije: moramo joj dati ime datoteke koju ćemo otvoriti/stvoriti i moramo joj reći što ćemo raditi s tom datotekom (primjer: čitati ćemo iz nje).
Kod:
<?php$imedatoteke = "test.txt";$upravljanjedatoteke = fopen($imedatoteke, 'w') or die("datoteka se nemoze otvoriti");fclose($upravljanjedatoteke);?>
-moramo reći php-u da ćemo pisati u datoteku, inače php neće stvoriti novu datoteku.
Datoteka test.txt bi trebala biti stvorena u istom direktoriju u kojem se nalazi ovaj kod. PHP će vidjeti da datoteka test.txt ne postoji i stvoriti će novu nakon što se ovaj kod pokrene. Sada ćemo objasniti svaku liniju koda:
$imedatoteke = "test.txt";
Ovdje smo odredili ime datoteke i spremili ga u varijablu $imedatoteke
$upravljanjedatoteke = fopen($imedatoteke, 'w') or die("datoteka se nemoze otvoriti");
Ovaj linija koda ima dva dijela: prvi se sastoji od funkcije fopen i njoj smo dali dva argumenta: ime datoteke i rekli smo php-u da želimo pisati sa slovom W.Drugi, fopen funkcija vraća „file handle“(upravljač datoteke) koji nam dopušta da manipuliramo sa datotekom. Spremili smo upravljač datoteke u varijablu $upravljanjedatoteke.
fclose($upravljanjedatoteke);
S ovim zatvaramo datoteku koju smo otvorili.
Važno!Ako pokušavate pokrenuti ovaj program i on vam stalno javlja grešku provjerite jeste li dopustili vašem PHP-u da zapisuje informacije na disk. Ovaj problem se najčešće rješava ako uz pomoć FTP programa izvršimo komandu CHMOD.
3.15. Otvaranje
Upravljanje datotekama PHP-om: Otvaranje datoteka
U ovoj ćemo lekciji naučiti različite načine otvaranja datoteke.
Osnovni načini: čitaj: 'r'-otvara datoteku samo za čitanje.
piši: 'w'-otvara datoteku samo za pisanje. Ako išta zapišete u datoteku prijašnji podaci će biti izbrisani i počet ćete pisati na početku datoteke.
nadopisivanje: 'a'-otvara datoteku samo za pisanje, ali prijašnje informacije u datoteci su sačuvane i počet ćete pisati na kraju datoteke.
-file pointer (pokazivač u datoteci)– način na koji PHP zapamćuje lokaciju u datoteci. Kada otvorite datoteku samo za čitanje ili samo za pisanje pokazivač se nalazi na početku datoteke. Ali, kada otvorite datoteku za nadopisivanje, pokazivač se nalazi na kraju datoteke.
Napredni načini:
Također, postoje načini u kojima možete dopustiti čitanje i pisanje. Ovo najčešće postižemo stavljanjem znaka + pored znaka koji nam govori što želimo napraviti s datotekom.
Čitaj/Piši: 'r+'-otvara datoteku tako da možemo čitati iz nje i pisati u nju. Pokazivač se nalazi na početku datoteke.
Piši/čitaj: 'w+'-isti način kao i r+ samo što ovaj način briše sve informacije u datoteci kada je ona otvorena.
nadopisivanje: 'a+'-isti način kao i r+, samo što se pokazivač nalazi na kraju datoteke.
Obrazac (forma) za otvaranje datoteke:
<?php
$imedatoteke = "test.txt";$ud = fopen($imedatoteke, 'X') or die("datoteka se nemoze otvoriti");fclose($ud);?>
Zamijenite X sa r,w,a … ovisi o tome što želite raditi sa datotekom.
3.16. Zatvaranje datoteke
U ovom ćemo tutorijalu se upoznati sa time kako zatvoriti datoteku.
U PHP-u nije potrebno zatovriti sve datoteke nakon što ste ih koristili zato što će server zatvoriti sve datoteke kada se izvrši PHP kod. Ipak, programer može slučajno pogriješiti (npr. editirati datoteku koju smo zaboravili zatvoriti).
Za zatvaranje datoteke koristimo funkciju fclose:Kod:
<?php$imedatoteke = "test.txt";$ud = fopen($imedatoteke, 'w') or die("datoteka se nemoze otvoriti");fclose($ud);?>
Funkcija fclose zahtijeva upravljač datoteke koju želimo zatvoriti. Kada zatvorimo datoteku nemoguće ju je čitati, pisati ili nadodati u nju osim ako je ponovno ne otvorimo sa fopen funkcijom.
3.17. Upravljanje datotekama PHP-om: Pisanje u datoteku
U ovom ćemo tutorijalu naučiti kako pisati u datoteku. Funkcija kojom pišemo se zove fwrite:
Prvi korak je otvaranje naše test datoteke funkcijom fopen.Kod:
<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'w'); ?>
Sa php-om možemo pisati u bilo koju datoteku. Funkciji fwrite moramo dati upravljač datotekom i ime datoteke u koju ćemo pisati.
Sada ćemo napisati par imena u našu test datoteku.Kod:
<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'w') or die("datoteka se nemoze otvoriti");$podaci = "Gogy\n";fwrite($ud, $podaci);$podaci = "&\n";fwrite($ud, $podaci);$podaci = "Leviathan\n";fwrite($ud, $podaci);$podaci = "su face\n";fwrite($ud, $podaci);fclose($ud); ?>
Varijabla $ud sadržava upravljač datotekom test.txt.Napisali smo u datoteku test.txt četiri puta.Ako bi sada otvarali datoteku test.txt njen bi sadržaj izgledao ovako:
Gogy&Leviathansu face
Pisanje preko sadržaja:
Sada kada test.txt sadrži neki podatak možemo demonstrirati što se događa kada otvorite postojeću datoteku za pisanje. Svi podaci koje je datoteka sadržavala će biti izbrisani i vi dobijate praznu datoteku.
Kod:
<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'w') or die("datoteka se nemoze otvoriti");$podaci = "tutorijal.net team\n";fwrite($ud, $podaci);fclose($ud); ?>
Ako sada otvorite test.txt vidjet ćete da je prijašnji tekst nestao i da datoteka sadrži samo podatke koje smo upisali:Tutorijal.net team
3.18. Čitanje iz datoteke
Sada ćemo naučiti kako čitati informacije iz datoteka.
Prije nego što možemo čitati informacije iz datoteka moramo ih otvoriti za čitanje funkcijom fopen:
Kod:<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'r'); ?>
PHP skripta kojom pišete mora biti u istom direktoriju kao i test.txt datoteka koju smo stvorili u prijašnjim lekcijama.
Sadržaj test.txt:
Tutorijal.net team
Sada možemo čitati iz te datoteke. Koristiti ćemo se funkcijom fread.Fread funkciji moramo dati upravljač datotekom i moramo joj reći koliko podataka u bytima treba pročitati.Jedan znak zauzima jedan byte.Primjer:
<?php$mojadatoteka = "File.txt";$ud = fopen($mojadatoteka, 'r');$podaci = fread($ud, 9);fclose($ud);echo $podaci; ?>
Prikaz:Tutorijal
Ako smo htjeli pročitati sve podatke iz datoteke, onda moramo imati točnu veličinu datoteke. Za to će nam trebati filesize funkcija.
Kod:<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'r');$podaci = fread($ud, filesize($mojadatoteka));fclose($ud);echo $podaci; ?>
Prikaz:Tutorijal.net team
Sada su svi podaci iz test.txt spremljeni u varijablu $podaci.
Također, možete čitati samo liniju podataka iz datoteke sa gets funkcijom. Kod:
<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'r');$podaci = fgets($ud);fclose($ud);echo $podaci; ?>
Ovo funkcija vam možda zatreba ali nije česta. Također, naša datoteka nema više od 1 linije podataka tako da se niti nemože vidjeti stvarna namjena ove funkcije. Napišite za vježbu još par redaka u datoteku i probajte onda ovu funkciju.
3.19. Brisanje datoteka
Sada ćemo naučiti izbrisati datoteku. To se radi sa funkcijom unlink:Prvo, morate biti sigurni da datoteka koju želite brisati nije otvorena. Ako je zatvorite je sa fclose:
<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'w') or die("Datoteku nije moguce otvoriti");fclose($ud); ?>
Sada ako želimo izbrisati test.txt samo pokrenemo PHP skriptu koja se nalazi u istom direktoriju kao i datoteka. Funkcija unlink zahtjeva jedino ime datoteke za brisanje:
Kod:
<?php$mojadatoteka = "test.txt";unlink($mojadatoteka); ?>
Datoteka test.txt je sada izbrisana.
Upozorenje!Pazite kada želite brisati datoteke da izbrišete pravu datoteku da bi izbjegli probleme.
3.20. Nadodavanje u datoteku
Do sada smo naučili pisati u datoteku na taj način da su svi prijašnji podaci iz datoteke bili izbrisani. Ako želimo nadopisati nešto u datoteku bez gubitka prijašnjih podataka onda moramo otvoriti datoteku u append modu (modu za nadodavanje).
Kod:<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'a');?>
Ako želimo sada pisati u datoteku počet ćemo pisati na kraju datoteke.Koristiti ćemo datoteku test.txt koju smo već stvorili prije.
Kod:<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'a') or die("Datoteku nije moguce otvoriti");$podaci = "Tralalala\n";fwrite($ud, $podaci);fclose($ud); ?>
Sadržaj datoteke test.txt bi sada trebao izgledati ovako:Tutorijal.net team Tralalala
3.21. Skraćivanje datoteke
Već smo spomenuli da kada otvorite datoteku za pisanje sa parametrom W da se svi podaci izvrišu unutar te datoteke. Ovo se još naziva i skraćivanje datoteke.
Da izbrišemo sve podatke iz test.txt moramo otvoriti datoteku u normalnom načinu za pisanje. Svi podaci unutar datoteke će biti izgubljeni.Kod:
<?php$mojadatoteka = "test.txt";$ud = fopen($mojadatoteka, 'w');
fclose($ud);?>
Zašto koristiti?
Ovo se najčešće koristi na datotekama koje sadrže podatke koji će se koristiti samo kratko vrijeme prije nego što će biti zamijenjeni. Ovakve datoteke se najčešće zovu „temporary files“ (privremene datoteke).
3.22. Uploadanje datoteke
U ovom tutorijalu ćemo naučiti kako pomoću PHP „uploadati“ datoteke na vaš server. Omogućavanje uploada na vaš server je rizičan posao jer ste s time omogućili da se „zarazite“ ili prenesete „zarazu“ gotovo svakog ikad napisanog crva/virusa.
Prvi korak je pravljenje HTML forme.Kod:
<form enctype="multipart/form-data" action="dizanje.php" method="POST">
<input type="hidden" name="MAX_velicina_datoteke" value="100000" />
Odaberite datoteku za upload:
<input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload" /></form>
Objašnjenja:
enctype="multipart/form-data" -važno za PHP datoteku koju ćemo stvoriti. action="dizanje.php" - ime PHP datoteke koju ćemo stvoriti method="POST" - ovime govorimo Internet pregledniku da ćemo poslati informacije na server koristeći POST.input type="hidden" name=" MAX_velicina_datoteke" - s ovime ograničavamo maksimalnu veličinu datoteke u bytovima. input name="uploadedfile" - uploadedfile je način na koji ćemo naći datoteku u našoj PHP skripti.
Spremite ovu formu u datoteku dizanje.html.
Sada ćemo napraviti PHP skriptu koja će upravljati uploadima. Na način da će ih primiti ili odbiti.
Dizanje.php
Kada je datoteka dizanje.php izvršena, uploadana datoteka postoji u privremenom prostoru na serveru, i ako je ne maknemo datoteka će biti uništena. Uploadanu datoteku ćemo prebaciti sa funkcijom $_FILES. funkcija $_FILES sprema sve informacije o datotekama. Ovoj funkciji moramo dati dva elementa:uploadedfile - uploadedfile sa ovim ćemo reći $_FILES s kojom ćemo se datotekom igrati.$_FILES['uploadedfile']['name'] - name sadrži originalni put do datoteke. $_FILES['uploadedfile']['tmp_name'] - tmp_name sadrži put do privremenih datoteka koje su na serveru.Kod:
// mjesto gdje ce datoteka biti spremljena $target_path = "uploadi/";
/* Dodaje originalno ime datoteci u put do datoteke "uploadi/imedatoteke.ekstenzija" */$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
// sa ovime ćemo doći do privremene datoteke.$_FILES['uploadedfile']['tmp_name'];
Važno: morat ćete stvoriti direktorij u direktoriju gdje se dizanje.php nalazi i nazvati ga „uploadi“ jer ćemo tamo spremati sve datoteke.
Sve što sada moramo napraviti je pozvati move_uploaded_file funkciju i PHP će napraviti svoje. Ova funkcija mora znati sljedeće:-put do privremene datoteke-put do gdje će prebaciti privremenu datotekuKod:
$target_path = "uploadi/";
$target_path = $target_path . basename(
$_FILES['uploadedfile']['name']); if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {echo "Datoteka ". basename( $_FILES['uploadedfile']['name']). " je uspijesno pohranjena";} else{echo "Datoteka se nije mogla pohraniti na server.";}
VAŽNO!!!Ova skripta sadrži par linija koda i napravljena je samo za potreba učenja osnova upload funkcije te zbog toga ne preporučamo stavljati ju na web stranicu zato što nije sigurna.
3.23. Pražnjenje varijabli i upita
Sve varijable se učitvaju u memoriju servera te je poželjno te varijable isprazniti kako bi bilo više prostora za druge naredbe i varijable. Iako to nije obavezno, pražnjenje varijabli i mysql upita pridonosi brzini izvođenja naredbi te oslobađanje memorije servera. Kad se memorija servera napuni, dolazi do "pada" servera što nije baš poželjno. Varijable i upiti se prazne poslje izvođenja ili korištenja, tj. na kraju stranice. Ako varijablu ili upit ispraznite prije izvođenja ona više nama učinka, tj. ne postoji pa dolazi do prekida ispisa ili gubitak podataka.
Pražnjenje varijabli: unset($varijabla)<?php//prvi primjer$a = "ovo je nakakva txt varijabla";echo $a;unset($a);
//drugi primjer$a = "5";$b = "2";$c = "3";
$d=$a+$b+$c;unset($a, $b, $c, $d);?>
Pražnjenje upita: mysql_free_result($varijabla)
<?phpinclude("konekcija.php"); //konekcija na bazu$ime="Damir";$a = mysql_query("SELECT FROM tablica ORDER by ID ASC");while($redak = mysql_fetch_array($a)){ //ispis iz baze
echo "Bok $ime, ti se prezivaš $redak[prezime]";}mysql_free_result($a);unset($redak);unset($ime);?>
Pražnjenje upita: mysql_close($varijabla)
Ponekad je dobro i ugasiti vezu na bazu na kraju stranice jer iako se automatski veza gasi nakon završetka skripte, može se pojaviti greška pa se veza ne ugasi.
<?php
$a = mysql_connect(localhost, user, lozinka);mysql_select_db(baza);//neke naredbemysql_close($a);?>
4. My SQL
4.1. Uvod i osnove u MySQL
PHP (Personal Home Page) je jedno od najboljih server-side open source rješenja.Server side scripting znači da se skripte izvršavaju na serveru a ne na korisnikovu računalu. PHP u kombinaciji sa MySQL-om je najpopularniji jezik za programiranje, većina velikih sajtova, portala i foruma je rađena upravo pomoću php jezika i mysql baze podataka
U ovom vodiču ćemo proći kroz rad sa MySQL-om.
MySQL
MySQL je poslužitelj baze podataka (softwer) kojem se može pristupiti preko mreže, obično pomoću korisničkog imena i lozinke. Također, MySQL ima veliku prednost zbog toga što postoje verzije za sve operacijske sustave, i zbog toga što se izdaje pod GPL licencom; što znači besplatno za kućnu upotrebu.
Ovaj vodič je pisan za NT operacijske sustave.
Osnove rada s MySQL-om
U ovom poglavlju ćemo proći kroz osnove izrada tablica te kroz osnovne tipove polja koje MySQL podržava.
Potrebno:MySQL server (skinite ga sa www.mySQL.com)
#Namještanje lozinke korisnikaLozinku postojećem korisniku možemo namjestiti na više načina. Najjednostavniji način je pomoću administracijskog alata. Radi se o Command Prompt alatu.
1.Otvorite command prompt (Start -> Run -> Upišite „cmd“ )
2.Pozicionirajte se u c:/mySQL/bin
3. Utipkajte :C:mySQLbin>mySQLadmin.exe -u root password vaša lozinka
Ukoliko nekada kasnije želite ponovno izmjeniti lozinku za ovog korisnika ponovite iste korake, samo ovog puta morate mySQLadmin-u dati i opciju –p te ćete prije izmjene passworda biti zatraženi stari password.
C:mySQLbin>mySQLadmin.exe -u root -p password nova_lozinka
Sada smo obavili sva početna podešenja te možemo početi koristiti mySQL.
Defaultni MySQL klijent
MySQL u standardnoj verziji dolazi sa klijentom pomoću kojeg možemo raditi sa bazama na našem lokalnom serveru. Ali je on nepraktičan za rad, posebno početnicima u MySQL, jer i najjednostavnije radnje zahtjevaju puno tipkanja i napredno znanje MySQL-a. Zbog toga, upoznat ćemo vas samo sa njegovim osnovama.
U tipičnoj instalaciji, klijent se nalazi u c:/mySQL/bin direktoriju, a radi se o mySQL.exe datoteci. Da bi se klijent pokrenuo potrebno mu je pri pozivanju proslijediti korisničko ime te dati opciju koja omogućuje naknadni upis lozinke.
C:mySQLbin>mySQL -u root –p
Nakon upisa lozinke ušli ste u mySQL klijent koji izgleda odprilike ovako :
Welcome to the MySQL monitor. Commands end with ; or g.Your MySQL connection id is 16 to server version: 4.0.17-max-ntType 'help;' or 'h' for help. Type 'c' to clear the buffer.mySQL>
Dok se nalazite u ovom klijentu svaka naredba mora završiti sa „;“ ili „g“ i naredba se može protezati kroz više redova.Da bi vidjeli sve baze koje postoje na našem lokalnom serveru potrebno je upisati naredbu :
mySQL>SHOW DATABASES;
Važno je napomenuti da su naredbe case insensitive tako da se ne morate brinuti o tome.Rezultat gornje naredbe bi trebao izgledati otprilike ovako :+---------------+| Database |+---------------+| mySQL || test |+---------------+2 rows in set (0.01 sec)
Pri instalaciji MySQL-a automatski se stvaraju dvije tablice. Prva mySQL sadrži podatke oko našeg servera i nju ne trebate dirati jer bi mogli trajno oštetiti MySQL ako neznate što radite.Baza test je prazna.
Stvaranje baze kroz MySQL shell klijent
Napravit ćemo jednu bazu za neku malu, jednostavnu stranicu, na kojoj će se jedino vijesti obnavljati periodički.
Naredba za stvaranje nove baze i njen rezultat izgleda:
mySQL> CREATE DATABASE site_vijesti;Query OK, 1 row affected (0.00 sec)
Važno je reći da su imena baza, tablica te polja u njima case sensitive, te da se u njima ne smije nalaziti bilo kakav prazan prostor (razmak, tabulator, novi red).
4.2. Korištenje baze i stvaranje tablice kroz MySQL shell klijent
Naša baza će se sada nalaziti na listi ako upišemo naredbu za prikaz svih baza na serveru, ali moramo reći mySQL-u da ćemo sada koristiti tu bazu.
mySQL> USE site_vijesti;Database changed
Nakon obavljanja ove naredbe svi MySQL upiti koje upisujemo u komandnu liniju će se odnositi na izabranu bazu.
Stvaranje tablica:
Sada ćemo stvoriti tablicu u kojoj ćemo raditi. Napraviti ćemo sistem novosti i to će biti jedini dinamički dio ove stranice.Struktura tablice:Tablica se sastoji od više polja:
PK (primary key) je polje tablice koje sadrži jedinstvenu vrijednost svakog retka.Autoincrement- u Mysqlu postoji mehanizam koji svakom novom retku u tablici automatski dodaje novu vrijednost. Polja autoincremet sadrže te vrijednosti.Naslov- u našem slučaju naslov će biti varchar tipa (ograničen na 150 znakova)Tekst- tip text (nije ograničen)Datum- tipa date
Naredba za stvaranje tablice :
CREATE TABLE vijesti (idvijest INT( 11 ) NOT NULL AUTO_INCREMENT ,naslov VARCHAR( 150 ) NOT NULL ,tekst TEXT NOT NULL ,datum DATE NOT NULL ,PRIMARY KEY ( idvijest ));
Sada moramo provjeriti jeli tablica stvarno stvorena:mySQL> SHOW TABLES;+----------------------------+| Tables_in_site_vijesti |+----------------------------+| vijesti |+----------------------------+1 row in set (0.01 sec)
Izlazak is shell klijenta::
mySQL>quit;
4.3. Spajanje na MySQL server
U ovim i sljedećim primjerima napraviti ćemo HTML sučelje na bazu koju smo već stvorili.
#Spajanje na MySQL server
Spajanje na MySQL server je prvo što moramo napraviti u skriptama koje ovise o podacima u bazi. Važnost spajanja na MySQL server se može usporediti sa time da moramo prvo pokrenuti računalo da bi mogli npr. surfati internetom na njemu. Zbog toga je važno provjeravati svaki korak da se provjeri jeli operacija uspješno obavljena.
Za naše potrebe koristiti ćemo korisnika root te lozinku koju smo stvorili na početku ovog vodiča. Stvoriti ćemo direktorij na našem lokalnom (HTTP) serveru i u njega ćemo spremati sve naše primjere i kroz njih stvoriti cijelu aplikaciju.
Zbog mogućih razlika u mjestu spremanja različitih servera, nećemo navoditi točne putove do tih direktorija. Također svi primjeri će biti pisani na taj način da vam neće biti potreban nikakav code editor već ćete primjere moći pisati i u notepadu, ali zbog kompliciranosti kodova i za lakše ispravljanje greški preporučamo vam neki code editor. U svojem web root folderu web servera stvorite direktorij imena PHP i MySQL u kojeg ćemo spremati sve primjere.
Sada ćemo stvoriti file spoj.php te ga pohraniti u gore navedeni direktorij. U njemu će se nalaziti kod koji će se spajati na MySQL server.
<?if (!$db=@mySQL_connect("localhost", "root", "lozinka")){die ("<b>Nismo se mogli spojiti na MySQL server</b>");}if (!mySQL_select_db("site_vijesti", $db)){die ("<b>Greska pri odabiru baze</b>");}?>
Ukoliko ste MySQL funkcijama dali točne podatke rezultat skripte bi trebala biti prazna stranica.
mySQL_connect funkcija - njoj se prosljeđuju tri argumenta: prvi je host na kojem se nalazi server, drugi je korisničko ime s kojim se spajamo na server, a treći lozinka za tog korisnika.@ - onemogućuje PHP-u da ispisuje greške koje se dogode u naredbi iza njegovog pojavljivanja.die - funkcija koja ispisuje grešku, u ovom slučaju funkcija će prekinuti izvršavanje skripte ako je spajanje na server bilo neuspješno. Ona će nam također ispisati grešku koja nam govori u kojem je koraku nastala greška.
mySQL_select_db - funkcija koja odabire bazu sa čijim ćemo tablicama raditi. Ima dva argumenta: prvi dobija ime baze koju želimo koristiti, a drugi sadržava spoj na MySQL-ov server gdje se ta baza nalazi. Drugi argument smo pohranili u varijablu $db. Drugi argument nije obavezan, ali naveli smo ga zato što PHP automatski pamti posljednju otvorenu vezu na MySQL server te nju automatski koristi u svim MySQL funkcijama gdje je taj argument izostavljen.
Također, opet je važno provjeravati uspjeh odabira baze jer će se skripta nastaviti obavljati iako je nastala greška. Zbog toga je potrebno prekinuti rad skripte ako je nastala greška.
4.4. Unos podataka
Unosa podataka u bazu sastoji od dva koraka: prvi je prikupljanje podataka kroz formu, a drugi pohrana tih podataka u bazi.
Za unos podataka koristimo INSERT naredbu.INSERT INTO vijesti (naslov, tekst, datum) VALUES ("Prva vijest ", "Ovo je tekst prve vijesti", "2005-09-12");
Kao što već znate sve SQL naredbe počinju nazivom naredbe. Nakon toga smo koristili INTO prije imena tablice u koju želimo pohraniti podatke. Također, važno je napomenuti da su imena baza, tablica i polja osjetljiva na veličinu slova (case sensitive).VALUES- njome naznačujemo da slijedi lista vrijednosti koja se pohranjuje u tablicu.
Važno je opaziti neuobičajen način pisanja datuma. Format slovima bi bio GGGG-MM-DD i zbog toga datum mora biti ispravnog oblika jer datum 1989-12-9 neće proći zbog toga što datumu nedostaje druga znamenka: nula. Ovo pravilo isto vrijedi i za mjesece.
Forma za unos podataka:
<html><head><title>Unos vijesti</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body><h1>Unos vijesti</h1><hr><?if (!$_POST["SBunos"]){?><form method="post" action="">Naslov : <input type="text" name="naslov"><br />Tekst : <textarea name="tekst"></textarea><br /><input type="submit" name="SBunos" value="Pohrani">
</form><?} else {include "spoj.php";$datum=date("Y-m-d");$SQL="INSERT INTO vijesti (naslov, tekst, datum)VALUES ('$_POST[naslov]', '$_POST[tekst]', '$datum')";if (mysql_query($SQL)){echo "Novost je uspješno pohranjena";} else {echo "Novost nije pohranjena"<br />" . mysql_error();}}?></body></html>
Važno:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
-ovo je kodna stranica našeg dokumenta (encoding). Važno je da koristite uvijek jedan isti encoding kroz sve dokumente projekta da bi izbjegli probleme.
mysql_query() -funkcija prima dva argumenta: prvi je string podatak koji je obavezan i sadrži neki upit, dok je drugi neobavezan. Kod INSERT upita ova funkcija vraća true ako je uspješan obavljen ili false ako nije uspješno obavljen. Ako nije uspješno obavljen moguće su greške: -sintaktičke prirode: nešto je krivo napisano u samom SQL upitu -tehničke prirode: nešto se dogodilo sa MySQL serverom ili vezom na njega ili je korisnik u formu upisao neki nedozvoljen znak.
mysql_error() -funkcija pomoću koje ispisujemo grešku.
4.5. Brisanje podataka
Ovim upitom brišemo podatke: DELETE FROM tablica
Sada ćemo pokazati kako ćemo obrisati neku vijest ,koju smo već napravili , na osnovi njezinog ID-a:DELETE FROM vijesti WHERE idvijesti=1
WHERE- služi za naznačivanje da nakon njega slijede uvjeti pomoću kojih određujemo (ograničavamo) skup podataka nad kojima će se obaviti neka operacija.
Sada ćemo napraviti upit koji će izbrisati sve vijesti između dva datuma:
DELETE FROM vijesti WHERE datum>='2005-11-11' AND datum <'2005-12-01'
Brisanje vijesti:
<html><head><title>Preglednik vijesti</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body><h1>Administracija vijesti</h1><hr><a href="unos.php">Dodaj novost</a><hr><?function pretvoriDatum($mysqlDatum){$tmp=explode("-", $mysqlDatum);$datum=$tmp[2] . "." . $tmp[1] . "." . $tmp[0];return $datum;}include "spoj.php";// brisanje vijestiif ($_GET["action"]=="obrisi"){if ($_GET["idvijesti"]){$sql="DELETE FROM vijesti WHERE idvijesti=" . $_GET["idvijesti"];if (mysql_query($sql)){echo "Novost je uspješno obrisana";} else {echo "Nastala je greška pri brisanju vijesti<br />" . mysql_error();}}}$sql="SELECT idvijesti, naslov, datum FROM vijesti ORDER BY datum DESC";if (!$q=mysql_query($sql)){echo "Nastala je greška pri izvođenju upita<br />" . mysql_query();die();
}if (mysql_num_rows($q)==0){echo "Nema vijesti";} else {?><table width="760" border="0" cellpadding="1" cellspacing="1"><tr><td><b>Naslov</b></td><td><b>Datum</b></td><td><b>Opcije</b></td></tr><?while ($redak=mysql_fetch_array($q)){?><tr><td><?=$redak["naslov"]?></td><td><?=pretvoriDatum($redak["datum"])?></td><td><a href="uredivanjevijesti.php? idvijesti=<?=$redak["idvijesti"]?>">Uredi</a><a href="?action=obrisi&idvijesti=<?=$redak["idvijesti"]?> ">Obriši</a></td></tr><?}?></table><?}?></body></html>
Prije nego što obavljamo samo brisanje moramo provjeriti da li su ispunjeni svi uvjeti za obavljanje brisanja. Nakon toga moramo provjeriti ID vijesti kojeg želimo obrisati. Nakon provjere tih uvjeta prešli smo na samo brisanje:
$sql="DELETE FROM vijesti WHERE idvijesti=" . $_GET["idvijesti"];if (mysql_query($sql)){echo "Novost je uspješno obrisana";} else {echo "Nastala je greška pri brisanju vijesti<br />" . mysql_error();}
Ako je funkcija mysql_query() vratio true novost je obrisana a ako je vratio false znači da je nastala neka greška koju će nam funkcija mysql_error() opisati.
Ako želimo provjeriti je li stvarno vijest obrisana koristiti ćemo mysql_affected_rows () funkciju. Ona vraća broj redaka koji su bili zahvaćeni posljednjom operacijom i ona se može koristiti samo nakon sljedećih upita: DELETE, UPDATE i INSERT
Sada ćemo tu funkciju staviti u našu skriptu:
$sql="DELETE FROM vijesti WHERE idvijesti=" . $_GET["idvijesti"];if (mysql_query($sql)){if (mysql_affected_rows() > 0 ){echo "Novost je uspješno obrisana";} else {echo "Nije obrisana niti jedna novost!";}} else {echo "Nastala je greška pri brisanju vijesti<br />" . mysql_error();}
Sada smo dodali još jednu provjeru koja ispituje dali je broj obrisanih redaka veći od nule.
4.6. Pribavljanje podataka
Upit koji pribavlja sve retke iz jedne tablice:
SELECT * FROM vijesti
* Zvjezdica je skraćenica koja govori da želimo pribaviti sva polja iz navedenih tablica.FROM govori da slijedi lista tablica iz kojih se podaci pribavljaju.
Ovo su svi obavezni dijelovi svakog SQL SELECT upita.
Otvorite mysql shell klijent i obavite SQL SELECT upit. Rezultat bi trebao izgledati otprilike ovako:
mysql> SELECT * FROM vijesti;
+----------+--------+-------+--------+
| idvijesti | naslov | tekst | datum |
+----------+--- ----+-------+--------+
| 1 | Prva novost | Ovo je tekst prve vijesti. | 2005-09-12 |
| 2 | Druga novost | Ovo je tekst druge vijesti.| 2005-09-14 |
+----------+--- ----+-------+--------+
2 rows in set (0.01 sec)
Rezultat ovog našeg upita izgleda kao da nije sortiran niti po jednom polju, no retci su vraćenipo redosljedu upisa u bazu što znači da su sortirani po datumu unosa od manjeg prema većeg.
Sada ćemo sortirati prema datumu od najvećeg datuma prema najmanjem:
SELECT * FROM vijesti ORDER BY datum DESC
Da bi sortirali rezultate upita dodajemo mu ORDER BY klauzulu u ovom slučaju na njegov kraj.
ORDER BY- pomoću ove klauzule sortiramo rezultate upita. Ovaj upit mora biti popraćen imenima polja po kojima želimo sortirati rezultat te način sortiranja (DESC ili ASC). U našem slučaju radi se o polju datum i DESC načinom (decending).
Sada ćemo izraditi administracijski alat sistema vijesti. To će zapravo biti stranica na kojoj će se nalaziti lista svih vijesti iz tablice sa popratnim alatima kao što su linkovi za brisanje i uređivanje pojedine vijseti ....
Preglednik vijesti
Ovo je još jedan dio našeg sitea. Otvorite code editor te stvorite novi file imenom pregled.php i spremite ga u isti direktorij gdje se nalaze spoj.php i unos.php.
<html><head><title>Preglednik vijesti</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body><h1>Administracija vijesti</h1><hr><a href="unos.php">Dodaj novost</a><hr><?
function pretvoriDatum($mysqlDatum){$tmp=explode("-", $mysqlDatum);$datum=$tmp[2] . "." . $tmp[1] . "." . $tmp[0];return $datum;}include "spoj.php";$sql="SELECT idvijesti, naslov, datum FROM vijesti ORDER BY datum DESC";if (!$q=mysql_query($sql)){echo "Nastala je greška pri izvođenju upita<br />" . mysql_query();die();}if (mysql_num_rows($q)==0){echo "Nema vijesti";} else {?><table width="760" border="0" cellpadding="1" cellspacing="1"><tr> <td><b>Naslov</b></td><td><b>Datum</b></td><td><b>Opcije</b></td></tr><? while ($redak=mysql_fetch_array($q)){ ?><tr><td><?=$redak["naslov"]?></td><td><?=pretvoriDatum($redak["datum"])?></td><td><a href="uredivanjevijesti.php? idvijesti=<?=$redak["idvijesti"]?>">Uredi</a><a href="?action=obrisi&idvijesti=<?=$redak["idvijesti"]?> ">Obriši</a></td></tr><? }?></table><? }?></body></html>
Ova funkcija pretvara MySql datum u datum kojeg smo navikli gledati:
$tmp=explode("-", $mysqlDatum); ova funkcija pretvara MySQL-ov datum u onog kojeg smo navikli.
return $datum; vraća danu vrijednost u glavni program tako da se ta vrijednost kasnije može koristiti u skripti.
mysql_num_rows() je funkcija koja obavlja samu provjeru postoji li rezultat za pikaz. Ova funkcija je korisna zato što mysql_query funkcija neće vratiti false ukoliko upit nije vratio niti jedan rezultat dok će ova funkcija na svoj način provjeriti ono što mysql_query funkcija ne provjerava, a to je ima li rezultata za prika, te ako ih nema poduzeti odgovarajuće korake da se korisnik obavijesti o tome.
Mysql_fetch_array() funkcija vraća redak kao niz koji se sastoji od svih polja rezultata s tim da je svako polje indeksirano brojem i svojim imenom.
Mysql_fetch_row() također vraća niz, sa tom razlikom da u njemu postoje samo numerički indeksi.
Mysql_fetch_assoc() isto vraća niz, no u njemu se nalaze samo tekstualno indeksirana polja.
<a href="uredivanjevijesti.php? idvijesti=<?=$redak["idvijesti"]?>">Uredi</a>
<a href="?action=obrisi&idvijesti=<?=$redak["idvijesti"]?> ">Obriši</a>
Sa ovim iznad korisniku nudimo dvije moguće opcije: Brisanje i uređivanje pojedine vijesti.
4.7. Uređivanje podataka
Upoznali smo se prošli put sa SELECT naredbom te smo naučili kako prihvatiti sve retke jedne tablice te kako ih sortirati. Sada ćemo vidjeti kako točno izabrati određene retke tablice.
WHERE klauzula je jedna od klauzula SELECT upita. S njome ćemo izdvojiti skup podataka iz tablice.
SELECT * FROM vijesti WHERE idvijesti=1
Ovime smo pribavili sva polja vijesti čiji je ID jednak jedan.
Također unutar ove klauzule možemo kombinirati veći broj uvjeta spojenih sa logičkim funkcijama kao što su AND, OR, NOT i ostale.
Ako hoćemo izmjeniti podatke koristiti ćemo UPDATE naredbu.
UPDATE vijesti SET naslov="neki naslov"
Sada kada bi htjeli ukomponirati WHERE klauzulu sa UPDATE naredbom to bi izgledalo otprilike ovako:
UPDATE vijesti SET naslov="neki naslov", datum="2005-09-12" WHERE idvijesti=1
Ovim upitom smo izmijenili naslov upisa vijesti koja ima ID jednak jedan.
Izmjena vijesti
[code]<html><head><title>Uređivanje vijesti</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body><b>Uređivanje vijesti</b><hr><?include "spoj.php";if (!$_POST["SBuredi"]){$err=false;if (!$_GET["idvijesti"]){echo "Nepotpuni ulazni podaci";$err=true;} else {$sql="SELECT * FROM vijesti WHERE idvijesti=" . $_GET["idvijesti"];if (!$q=mysql_query($sql)){echo "Nastala je greška pri izvođenju upita<br />" . mysql_query();$err=true;} elseif (mysql_num_rows($q)==0) {echo "Nema takve novosti";$err=true;} else {$novost=mysql_fetch_array($q);}}
if (!$err){?><form method="post" action=""><input type="hidden" name="idvijesti" value="<?=$_GET["idvijesti"]?>">Naslov : <input type="text" name="naslov" value="<?=$novost["naslov"]?>"><br />Tekst : <textarea name="tekst"><?=$novost["tekst"]?></textarea><br /><input type="submit" name="SBuredi" value="Pohrani"></form><?}} else {$sql="UPDATE vijesti SET naslov='". $_POST["naslov"] ."', tekst='".$_POST["tekst"] ."' WHERE idvijesti=". $_POST["idvijesti"];if (mysql_query($sql)){if (mysql_affected_rows() > 0 ){echo "Novost je uspješno uređena.";} else {echo "Novost nije izmjenjena.";}} else {echo "Nastala je greška pri izmjeni vijesti<br />" . mysql_error();}}?></body></html>
$err - varijabla koja nam služi kao "zastavica" koja govori da li su podaci uspješno pribavljeni iz baze te da li je sigurno prikazati formu. Ako je zastavica dignuta ($err=true) nešto ne valja te formu ne prikazujemo. Ako je spuštena ($err=false) sve je u redu. Na početku skripte moramo stvoriti zastavicu u spuštenom stanju jer na početku skripte još nije ništa krivo.
5. ASP5.1. Uvod u ASP
Prvo da kažemo što je ASP.ASP je skraćenica od Active Server Pages. To je Microsoftova tehnologija.
Kako koristiti ASP na vlastitom računaluDa biste radili sa ASP-om morate instalirati Microsoft's Personal Web Server (PWS) ili Internet Information Services (IIS)
Kako instalirati IIS i koristiti ASP na Windows XP Professional- Windows XP Home Edition ne podržava ASP!
Najprije stavite Windows XP Professional CD u vaš CD drive. Kliknite na Start -> Control Panel -> Add/Remove Programs, zatim chekirajte Internet Information Services i kliknite na Next. Inetpub folder će biti kreiran na vašem hard disku. Otvorite Inetpub folder i nađite folder "wwwroot", unutar tog foldera kreirajte novi folder i imenujete ga npr. "stranica".
Kada budete pisali ASP kod usnimavat ćete ga kao npr. test1.asp i spremat će te ga u kreirani folder (u našem primjeru stranica).
Budite sigurni da je web server upaljen. To možete provjeriti tako da odete u Control Panel -> Administrative tools te dvostruki klik na ikonu IIS Manager.
Da biste pogledali kako radi vaša prva ASP stranica u browseru upišite http://localhost/stranica/test1.asp
Za informacije kako instalirati IIS na nekoj drugoj verziji windosa potražite na Microsoftovoj officialnoj stranici. www.microsoft.com
5.2. Osnovna ASP sintaksa
ASP se upisuje u HTML kod, a ASP kod upisujete između znakova <% i %>Sav kod koji napišete između tih znakova će se izvršavati na serveru.
Sada jedan primjer ispisivanja rečenice Hello World.
<html><body><%response.write("Hello World!")%></body></html>
Početni skriptni jezik je VBScript, a da biste kao početni skriptni jezik postavili Javascript napravite to tako da jezičnu specifikaciju ubacite na vrh stranice. Primjer:
<%@ language="javascript"%><html><body><%Response.Write("Hello World!")%></body></html>
5.3. Varijable
Kao i u mnogim programskim i skriptnim jezicima i u ASP-u postoje varijable. Varijable zapravo sadržavaju neke vrijednosti koje smo im dodjelili.
Sada ćemo vidjeti kako definirati varijable, dodati im neku vrijednost i ispisati sadržaj varijable.
<html><body><%dim stranicastranica="Tutorijali.Net"response.write("Ja ucim ASP na stranici " & stranica)%></body></html>
Dakle, prvi redak iza <body> sadrži <% što znači da ovdje započinje ASP kod. U drugom retku definiramo varijablu stranica sa "dim stranica". U trećem retku varijabli stranica dodajemo tekst "Tutorijali.Net"U četvrtom retku pišemo normalno za ispis response.write("Ja učim ASP na stranici") samo što ubacujemo sadržaj varijable tako da iza navodnika ali prije zatvaranja zagrade stavimo znak & i napišemo ime varijable (u ovom slučaju stranica).
5.4. Arrays
Arrays (nizovi) se koriste za pohranjivanje više povezanih informacija. Kao primjer napravit ćemo array sa imenima.
<html><body><%Dim ime(5)
ime(0) = "Ivana"ime(1) = "Matija"ime(2) = "Goran"ime(3) = "Marina"ime(4) = "Damir"ime(5) = "Kristina"
response.write(ime(3))
%></body></html>
sa redom "Dim ime(5)" definiramo varijablu ime i određujemo da maksimalni broj podataka može biti 5. Zatim upisujemo u array podatke tako da napišemo ime varijable pa u zagradi broj te iza jednako u navodnike dodjelimo vrijednost.
Zatim ispisujemo sa response.write tako da u zagradi napišemo ime varijable te u zagradi broj podatka kojeg želimo ispisati. Nemojte zaboraviti zatvoriti glavnu zagradu od response.write
5.5. Operatori
ASP je programiran u VBScriptu po defaultu pa su ASP operatori VBScript operatori. Operatori u ASP su dijele na: aritmetičke operatore, usporedne, logičke i znakovne.
Aritmetički operatoriTi operatori su slični svim ostalim programskim jezicima.
Operator .... Naziv+ .... dodavanje- .... oduzimanje * .... množenje/ .... dijeljenje^ .... eksponent
Isprobajte ih sve. Znači npr. definirate varijablu neki_broj = 5 / 6 i onda ispišete varijablu neki_broj.
Usporedeni operatoriOvi operatori nam služe kada želimo nešto provjeriti da li je jednako nečemu, manje ili više, nije jednako itd.
Operator .... Naziv= .... Jednako nečemu< .... Manje od nečega> .... Veće od nečega<= .... Manje ili jednako nečemu>= .... Više ili jednako nečemu<> .... Nije jednako nečemu
Logički operatoriOvi operatori se koriste kad rezultat mora vratiti vrijednost istina ili laž.
Operator.... Opis .... Primjer .... RezultatAnd .... obadva moraju biti istina ..... istina i laž ..... LAŽ (mora biti istina i istina da bi rezultat vratio istinu.
Or .... jedan mora biti istina .... istina i laž ..... ISTINANot .... obrnuto od prave vrijednosti .... laž ..... ISTINA
Znakovni operatoriJedini znakovni operator je znak & koji spaja dva stringa u jedan. Npr.
rijec = "World Wide" & "Web"
će rezultirati kao
rijec = World Wide Web
5.6. If petlja
If petlja se koristi kada želimo izvršiti neki dio koda ako je neki uvjet zadovoljen. If petlja u ASP-u je mrvicu drugačija nego u drugim programskim jezicima. Nema nikakvih zagrada. Primjer:
<%Dim brojbroj = 5If broj = 5 ThenResponse.Write("Broj pet!")End If%>
Znači definirate varijablu broj i dodate joj vrijednost 5, zatim sa if provjerite ako je 5 onda se ispiše kod koji zadate. Na kraju morate zatvoriti if sa naredbom End If. Ako promijenite
vrijednost varijable ime tj. ako u varijablu broj napišete neki drugi broj a iza if broj ostane 5 onda se ništa neće ispisati.
Primjer sa tekstom:
<%Dim imeime = "Marko"If ime = "Marko" ThenResponse.Write("Pozdrav Marko!")End If%>
Ovdje primjetite navodnike koji su stavljeni u varijabli. Za sve tekstove morate staviti navodnike dok za brojeve možete ali i ne morate.
5.7. If...Else petlja
U prošlom tutorijalu smo naučili kako izvršiti dio nekog koda ako je neki uvjet zadovoljen. Sada ćemo naučiti If...Else petlju kojom možemo napraviti da se dio nekog koda izvrši ukoliko je neki uvjet zadovoljen a u svim ostalim slučajevima da se izvrši neki drugi kod. Evo primera:
<%Dim imeime = "Josip"If ime = "Josip" ThenResponse.Write("Pozdrav Josipe!")ElseResponse.Write(Ne poznajem vas")End If%>
Sve je isto kao i kod If petlje samo je ovdje dodano Else dio koji ispisuje za sve ostale uvjete ako prvi uvjet nije zadovoljen (u ovom slučaju ime Josip)
Evo sada jednog lijepog primjera koji će prepoznati Josipa kao člana nekog kluba dok će za sve ostale reći da nisu učlanjeni.
<%Dim imeime = "Josip"If ime = "Ivan" ThenResponse.Write("Pozdrav Josipe! Vi ste uclanjeni u nas klub")Else
Response.Write("Vi ste: " & ime & " <br /> Niste ucanjeni u nas klub")End If%>
Ispod Else dijela uočite kako smo napravili ispis. U navodnike smo upisali što želimo napisati, zatvorili navodnike i sa znakovima & i & izdvojili ispis varijable, opet otvorili navodnike i upisali ostali dio rečenice te zatvorili navodnike.
5.8. Elseif petlja
Do sada smo naučili samo kako izvršiti neki kod ako je neki uvjet zadovoljen i kako izvršiti neki drugi kod ako nije zadovljen taj uvjet. Sada ćemo naučiti kako provjeriti više uvjeta, dakle nismo ograničeni samo na onaj prvi if.Primjer:
<%Dim imeime = "Gogy"
If ime = "Gogy" ThenResponse.Write("Pozdrav gazda Gogy")
Elseif ime = "Leviathan" ThenResponse.Write("Pozdrav gazda Leviathan")
ElseResponse.Write("Vi ste: " & ime & " <br /> Uclanjeni ste u nas klub")End If%>
Dakle ovdje smo još uvrstili Elseif koji služi kao i onaj prvi. A tu možete koristiti Else za ispis ako ni jedan od ta dva uvjeta nije zadovoljen. Elseif možete stavljati koliko god hoćete puta. Isprobajte.
5.9. Select Case
U prošlom tutorijalu smo pokazali kako funkcionira Elseif petlja i rekli da Elseif možemo koristiti koliko god puta hoćemo. No ako imate jako puno uvjeta koji se mogu zadovoljiti
bolje je koristiti Select Case nego puno Elseif blokova.
Evo primjera:
<%Dim imeime = "Ivica"
Select Case ime
Case "Ivica"Response.Write("Pozdrav Ivice")
Case "Marko"Response.Write("Pozdrav Marko")
Case "Ivan"Response.Write("Pozdrav Ivane")
Case ElseResponse.Write(ime & " vi niste uclanjeni u nas klub")End Select%>
Probajte mijenjati ime u varijabli ime da vidite kakvi se rezultati ispisuju.
5.10. Loop
Iako vam se u početku ovo baš i neće činiti nešto posebno korisno, loop će vam puno koristiti kada budete ASP koristili sa bazom podataka kada budete pravili skriptu s kojom ćete čitati sve rezultate iz baze.
Evo primjera loop-a
<%dim ifor i=1 to 15response.write("Ovo je jedna recenica <br /> ")next%>
Definiramo varijablu i, zatim napravimo "for i = 1 to 15" koji govori da se varijabla "i" treba ispisati 15 puta. Zatim napišemo koja rečenicu se treba ispisati i zatim na kraju napišemo next kako bi se ta rečenica mogla ponavljati do broja 15.
5.11. Session
Session je odlična stvar za izradu modernijeg sitea. Session vam omogućava da zadržite informacije o svakom posjetitelju posebno.
Da biste spremili session varijablu najprije ju morate staviti u kolekciju, što je vrlo lako napraviti.
Idemo probati spremiti vrijeme u koje je posjetitelj posjetio web stranicu.
<%Session("vrijeme") = Time()Response.Write("Zadnja posjeta: " & Session("vrijeme"))%>
Prvi redak započinje session i sprema informaciju odnosno vrijeme u koje je posjetitelj posjetio web stranicu. Tu smo napravili key "vrijeme" i vrijednost Time() što govori da se zapamti vrijeme. Drugi redak služi za ispis teksta "Zadnja posjeta: " i vremena.
Evo sada jedan primjer pomoću kojeg možete saznati id od svakog pojedinog posjetitelja.
<%Dim idid = Session.SessionIDresponse.Write(id)%>
Definirali smo varijablu id i zatim joj dodali vrijednost Session.SessionID što uzima id od svakog posjetitelja posebno. Drugi redak naravno ispisuje varijablu id.
Session timeoutSession neće trajati vječno. Može se desiti da informacije u sessionu budu uništene. Ima nekoliko razloga zašto će se to desiti, kao npr. posjetitelj može zatvoriti browser ili otići od kompjutera na neko duže vrijeme i session će otići u session timeout. Vi možete odrediti točno u minutama koliko će to vrijeme biti dok se session informacije ne unište. Kao primjer imat ćemo 240 minuta što je sasvim dovoljno za većinu web stranica.
<%Session.Timeout = 240Response.Write("Timeout iznosi: " & Session.Timeout)%>
5.12. Cookies
Kao i ASP session i cookies se koriste za pohranjivanje informacija za svakog posjetitelja posebno. Cookies (kolačići) se spremaju na surferovom računalo na neko određeno vrijeme.
Kreiranje ASP cookies je vrlo slično kao i kod ASP sessions. Također morate imati key i vrijednost. Kreirani cookie će spremiti podatke koji su zapisani u kao vrijednost. Sada ćemo napraviti cookie koji će spremiti neku informaciju. U ovom slučaju korisničko ime.
<%Response.Cookies("korisnicko_ime") = "Sanja"%>
Kao što vidite ovdje u cookie zapisujemo ime Sanja sa key-em korisnicko_ime. Sada to spremite u neki fajl sa extenzijom .asp i otvorite tu stranicu. Na ekranu se neće pojaviti ništa zato što smo samo zapisali ime sanja u cookie a nismo napravili da se ništa očitava.
Sada kada smo spremili ime Sanja u cookie zatvorite browser. I napravite novi fajl (možete i u isti onaj ako hoćete samo obrišite onaj kod gdje smo pravili cookie) i upišite ovaj kod za čitanje iz cookiea.
<%Dim korisnicko_imekorisnicko_ime = Request.Cookies("korisnicko_ime")
Response.Write("Vase korisnicko ime je: " & korisnicko_ime )%>
Sada otvorite tu stranicu i pogodite što ste dobili :-)
Vaše korisničko ime je: SanjaVeoma korisna stvar zar ne?
5.13. Forme
Da bismo napravili neki formular moramo najprije u HTML-u napraviti jednu formu za unos podataka. Nadam se da već znate HTML kad učite ASP ali svejedno evo primjera. Između <body> i <body> taga unesite ovo.
<form method="POST" action="akcija.asp">Ime <input type="text" name="ime">
Prezime <input type="text" name="prezime"><input type="submit" value="posalji"></form>
Tu stranicu usnimite npr. pod nazivom formular.aspKao što ste vidjeli u gornjem kodu smo pod action stavili "akcija.asp" što znači da ćemo sada napraviti asp fajl pod nazivom akcija.asp i tamo će se vršiti obrada. U tom fajlu napišite ovaj kod:
<%Dim ime, prezime
ime = Request.Form("ime")prezime = Request.Form("prezime")Response.Write("Vase ime: " & ime & "<br />")Response.Write("Vase prezime: " & prezime & "<br />")%>
Spremite taj kod u fajl akcija.asp zatim otvorite stranicu fomular.asp i probajte upisati podatke i stisniti tipku "Posalji".
Ako radite sa GET metodom onda umjesto Request.Form pišete Request.QueryStrin
5.14. Include
Includanje je jako korisna stvar kod dinamičkih web stranica. Ne morate imati za svaki tekst posebnu stranicu nego napravite samo index.asp i tu mijenjate dizajn i sve ostalo a svi ostali fajlovi sadrže samo npr. tekstove koje hoćete da vam se includaju.
Evo primjera kako includati neku stranicu u početnu.
<html> <body> <b> Ispod ce se includati neka stranica </b><p><!--#include file="nekastranica.asp"--></p> </body> </html>
U ovom kodu je sve jasno, tu se nema baš puno za objašnjavati. Dakle kada hoćete includati neki fajl u vašu stranicu koristite <!--#include file=" "--> i u navodnike samo napišete stranicu koju hoćete. Vrlo jednostavno zar ne?
6. Java Script
6.1. Vaš prvi Javascript kod (Hello World)
Da biste umetnuli Javascript u vaš HTML kod morate korisititi <script> tag. Evo najjednostavnijeg primjera kako nešto napisati pomoću Javascripta.
Između <body> i </body> napišite sljedeće:
<script type="text/javascript">document.write("Hello World!")</script>
Pogađate, ovaj kod će na ekran ispisati Hello World!
Pa da pojasnimo sada dio po dio.Kao što smo već rekli za umetanje javascripta u vaš HTML kod koristimo <script> tag. Znači sa <script type="text/javascript"> i </script> govorimo browseru gdje počinje i gdje završava Javascript.
Komanda document.write je standardna komanda za ispisivanje teksta na ekran. Dakle da bi se nešto ispisalo na ekran morate napisati document.write i u zagradu pod navodnicima staviti tekst koji želite da se ispiše.
Ako želite ispisati neki tekst ali da ga prethodno oblikujete nekim html tagom, to možete učiniti ovako:
<script type="text/javascript">document.write("<h1>Hello World!</h1>")</script>
6.2. Gdje stavljati javascript na stranici?
Gdje stavljati javascript na stranici
Postoje 3 mjesta na koje možete staviti vaš Javascript kod. Između <head> i </head> elemenata, između <body> i </body> elemenata i kao eksternu skriptu.
Head dioKada skrite stavimo u između head elemenata onda znamo da će nam se skripte učitati prije nego ih pozovemo. Dakle kada stavljate skriptu u Head element onda to radite na ovom principu:
<html><head><script type="text/javascript">....</script></head>
Body dioOve skripte će se izvršiti kada se stranica učita. Takve skripte se upisuju na ovaj način:<html><head></head><body><script type="text/javascript">....</script></body>
Eksterni JavascriptKoristi se kada jednu skriptu trebate ispisati na više stranica, pa da ju ne pišete na svakoj, napravite jednu eksternu i koristite ju za sve stranice. Kada napišete skriptu usnimite ju sa ekstenzijom "*.js" (npr. skripta.js)Takve skripte se pozivaju na sljedeći način:
<html><head><script src="skripta.js"></script></head><body></body></html>
Znači pod src="..." ide path do vaše skripte.
6.3. Varijable
Varijable se koriste da u sebi pohrane neki podatak. Evo za početak jednog primjera pa ćemo ga postepeno objasniti.
<script type="text/javascript">var stranica = "www.tutorijali.net"document.write(stranica)document.write("<h1>"+stranica+"</h1>")</script>
Rezultat će biti ispisano prvo malim slovima www.tutorijali.net a zatim velikim slovima taj isti tekst.
Kao što smo već govorili u prošlim tutorijalima, skriptu otvaramo tako da napišemo <script type="text/javascript">
Zatim deklariramo varijablu. Varijablu smo nazvali stranica. Zatim smo stavili znak jednakosti i u navodnike upisali vrijednost varijabli. U ovom slučaju je to "www.tutorijali.net".
Treći redak normalno ispisuje vrijednost varijable dok treći redak formatira tekst sa html kodom (<h1>). Znači stavite navodnike pa html tag koji formatira tekst, stavite još jedne navodnike i između pluseva upišete ime varijable.
Zatim zatvorite sve što ste otvorili (navodnike, html tag i opet navodnike)Vrijednost varijable se tjekom izvršavanja skripte može promijeniti. Ne mora skroz ostati jednaka.
Pravila za imenovanje varijabli- Imena varijabli su case sensitive što znači osjetljiva na velika i mala slova, nije isto "var ime" i "var Ime" - Imena varijabli moraju počinjati sa slovom ili crticom dolje ( _ )
Varijablu možete deklarirati i bez početnog "var", dakle:
var ime = "neko ime" i ime = "neko ime"
6.4. If...Else
Ovaj način se koristi kada želite izvršiti jedan dio koda ako je zadovoljen neki uvjet, a drugi dio koda ako nije zadovoljen.
Npr. ako je ime Martina onda se ispiše rečenica "Dobar dan šefice!" u suprotnom se ispiše "Dobar dan (ime u varijabli) " Pogledajmo primjer:
<script type="text/javascript">
ime = "Ivana"
if (ime=="Martina") {document.write("<b>Dobar dan sefice!</b>")}else{document.write("<b>Dobar dan "+ime+" !</b>")}</script>
Dakle u ovom slučaju će se ispisati Dobar dan Ivana jer je ime Ivana što ne zadovoljava prvi uslov nego se ispisuje rečenica Dobar dan i dodaje se sadržaj varijable (u ovom slučaju Ivana).
6.5. If...Else If... Else petlja
Ova petlja se koristi kada imate više mogućih uvjeta za zadovoljiti. Kao primjer napravit ćemo jedan kod koji će provjeravati što piše u varijabli ime i na temelju toga će ispisivati svakom drugačiju rečenicu. A na kraju ako nije niti jedno zadano ime onda će se ispisati rečenica "Dobar dan (ime u varijabli)"
<script type="text/javascript">
ime = "Katarina"
if (ime=="Marina"){document.write("<b>Dobar dan sefice!</b>")}
else if (ime=="Marina") {document.write("<b> O mala, sta ima? </b>")}
else if (ime=="Monika") {document.write("<b>Dobar dan, kako ste danas Monika?</b>")
}
else{document.write("<b>Dobar dan "+ime+" !</b>")}
</script>
6.6. Switch
Switch je vrlo slična stvar kao i If...elseif...else, isto se koristi kada imate više mogućih uslova za zadovoljenje.
Koristit ćemo iste rečenice za ista imena kao iz prošlog tutorijala samo pomoću Switch načina.
<script type="text/javascript">
ime = "Katarina"
switch (ime){case "Martina":document.write("<b>Dobar dan sefice!</b>")break
case "Marina":document.write("<b> O mala, sta ima? </b>")break
case "Monika":document.write("<b>Dobar dan, kako ste danas Monika?</b>")break
default:document.write("<b>Dobar dan "+ime+" !</b>")}</script>
Primjetite da iza svakog Casea ide dvotočka ":" i da ime npr. Monika, Marina i sva ostala moraju biti u navodnicima. Ako pišete Case 1: Case 2: itd. znači brojevima onda vam navodnici ne trebaju.
default: se koristi za ispis ako niti jedan uvjet nije zadovoljen (slično kao Else kod prošlog tutorijala).
6.7. Operatori
Operatori u javascriptu su slični sa svim ostalim operatorima u drugim programskim jezicima.
Matematički operatori
Operator Funkcija Primjer + zbrajanje 1 + 2 - oduzimanje 4 - 3 * množenje 5 * 6 / djeljenje 8 / 2 % ostatak 25 % 10
Uspoređivajući operatori
-koriste se da bi provjerili odnos između varijabli i/ili vrijednosti. Imaju dva rezultata :true i false:
Operator Značenje Primjer Rezultat == jednako $a == $b false != nije jednako $a != $b true < manje od $a < $b true > veće od $a > $b false <= manje ili jednako od $a <= $b true >= veće ili jednako od $a >= $b false
6.8. Funkcije u Javascriptu
Ako već imate programerskog iskustva onda vam ovo neće predstavljati neku novost. Ako nemate, onda pažljivo proučite ovaj tutorijal.
Što je funkcija? Funkcija je dio koda koji neprimjetno čeka dok se ne pozove. Funkcije su jako dobra stvar kod nekih zadataka koje stalno treba ponavljati.
Funkcija se ne izvršava pri učitavanju stranice zato svaka funkcija mora biti u <head> dijelu stranice. Kreiranje funkcije je vrlo jednostavno i brzo. Pogledajmo primjer:
<html><head><script type="text/javascript"><!--
function popup() {alert("Pozdrav od Tutorijali.Net tima!")}//--></script></head><body><input type="button" onclick="popup()" value="Klikni"> </body></html>
Stvar je vrlo jednostavna. Kažete browseru da pravite funkciju sa function i dajete neko ime funkciji, u ovom slučaju popup(). Zatim dalje pišete normalan Javascript kod. Pripazite na to da ne izostavite vitičaste zagrade { i } prije i poslje koda.
U sljdećem tutorijalu ćemo naučiti nešto više o aleritma odnosno popup prozorima.
6.9. Alerti u Javascriptu
Alert box može biti veoma koristan kod raznih formulara kod kojih provjerimo da li su sva polja popunjena, ako nisu onda iskoči prozorčić (alert) i obavijesti korisnika da nisu sva polja popunjena.
U predhodnom tutorijalu kod funkcija ste naučili ako napraviti jednostavan alert, a ovdje ćemo se malo više pozabaviti s njima.
Evo primjera kako napraviti alert box sa više redova:
<html><head><script type="text/javascript">function popup(){alert("Pozdrav svima. Kako ste, sta se radi?" + '\n' + "Evo ovo pisem u novi redak")}</script></head>
<body>
<form><input type="button" onclick="popup()" value="Klikni ovdje"></form>
</body></html>
Da pojasnimo. Pravite normalno alert box i onda sa + i + odvajate kod i u jednostruke navodnike pišete \n što označava novi redak.
Confirm boxOvdje će iskočiti alert box gdje možete birati između tipke OK i Cancel:
<html><head><script type="text/javascript">function popup(){var ime=confirm("Pritisnite tipku")if (ime==true){document.write("Pritisnuli ste tipku OK")}else{document.write("Pritisnuli ste tipku Cancel")}}</script></head><body>
<form><input type="button" onclick="popup()" value="Klikni ovdje"></form>
</body></html>
Pogledajte ovdje, definirate varijablu ime sa: var ime=confirm("Pritisnite tipku") i pridodajete joj vrijednost confirm alerta, i onda sa if (ime==true) provjeravate da li je korisnik kliknio na OK tipku, ako je ispisuje rečenicu da ste pritisnuli OK, ako nije, kod: else { document.write("Pritisnuli ste tipku Cancel") } ispisuje da ste kliknuli na Cancel. Vjerujem da vam je sve jasno.
Prompt box Prompt box vam je prozorčić gdje trebate nešto upisati. Evo primjera:
<html><head><script type="text/javascript">function popup(){var ime=prompt("Unesite vase ime")if (ime!=null && ime!="")
{document.write("Pozdrav " + ime )}}</script></head>
<body><form><input type="button" onclick="popup()" value="Klikni ovdje"></form></body>
</html>
Dakle isto kao i kod confirm boxa i ovdje definirate varijablu ime sa: var ime=prompt("Unesite vase ime") samo što ovdje prije zagrade piše prompt a ne confirm. Zatim sa: if (ime!=null && ime!="") provjeravate ako je ime upisano i ako ime nije prazno neka se ispiše rečenica.
6.10. For Loop
For Loop se kao i u ostalim programskim jezicima koristi za ponavljanje nekog koda. U ovom tutorijalu ćemo imati primjer ponavljanja jedne rečenice uz promjenu broja za svaki novi redak.
Evo primjera:
<script type="text/javascript">for (i = 0; i <= 5; i++){document.write("The number is " + i)document.write("<br />")}</script>
A sada da objasnimo sve što smo napisali.Dakle pišemo:
for (i = 0; što znači ispisuj i, početna vrijednost slova i = 0
<= 5; ispisuj sve dok je i manji od 5
i++
povećavaj i za jedan broj
zatim pišemo vitičastu zagradu i unutra rečenicu pomoću document.write. Sa navodnicima i znakom + na kraju odvajamo tekst od varijable i, i ispisujemo. Document.write("<br />") pogađate, ispisuje novi red. Zatvaramo vitičastu zagradu i zatvaramo kod sa </script> .
6.11. While Loop
While Loop je vrlo sličan For Loop načinu. Isto se koristi za ponavljanje ispisa dok se ne zadovolji neki uvjet.
Evo primjera:
<script type="text/javascript">i = 0while (i <= 10){document.write("The number is " + i)document.write("<br />")i++}</script>
Pa da objasnimo.
Sai=0
Definiramo varijablu "i" i dodajemo joj vrijednost 0.
Zatim sawhile (i <= 10)
kažemo kodu da radi "neku radnju" dok je vrijednost varijable "i" manji ili jednak broju 10.
Zatim otvaramo vitičastu zagradu { i unutra naređujemo ispis rečenice koja će se ispisivati kao "neka radnja" iz prošlog koraka. Naravno pazite kod ispisa da varijablu "i" stavite iza navodnika u zagradi. Ispod se ispisuje i <br /> što označava novi red.
Zatim pišemo i++
Što govori kodu da poslje svakog ispisanog broja poveća vrijednost varijable "i" za jedan broj. Zatim zatvaramo vitičastu zagradu } koja označava kraj onoga što je u While Loop petlji.
6.12. Do...While Loop
Do...While Loop je jedna vrsta while loop. Kod ovog ponavljanja kod će se izvršiti jednom i ponavljat će se toliko dugo dok je određeni uvjet istinit.
Evo primjera:
<html><body><script type="text/javascript">var i=0do {document.write("Broj " + i)document.write("<br />")i=i+1}while (i<9)</script></body></html>
Dakle, ovako bismo čitali ovaj kod: Varijabla i je 0, ispisuj Broj i dodaj vrijednost varijable i, s tim da se kod svakog ispisa varijabla "i" poveća za 1.
6.13. Prekidanje i nastavak Loopova (Break - Continue) While Loop
U Loopovima koristimo Break i Continue da bismo prekinuli i nastavili izvršavati Loop.
Break
Naredbu Break ćemo iskoristiti da prekinemo Loop kada dođe do određenog uvjeta. Evo primjera:
<script type="text/javascript">var i=0for (i=0;i<=10;i++){if (i==3){break}document.write("Broj " + i)
document.write("<br />")}</script>
Dakle, normalno pravimo For Loop tako da zadamo varijablu i=0 i napravimo da se varijabli i dodaje jedan broj sve dok ne dođe do broja 10.
Ali pomoću If naredbe kažemo kodu da prekine izvršavanje koda ukoliko je varijabla i=3.
if (i==3){break}
Primjetite da je break napisano u vitičastim zagradama.
Rezultat će naravno biti:
Broj 0 Broj 1Broj 2
Continue
Continue naredba će prekinuti odnosno preskočiti ispis kada dođe do određenog uvjeta i nastaviti dalje. Continue naredba sama prekida pa kada koristite continue nema potrebe da stavljate Break. Evo primjera:
<script type="text/javascript">var i=0for (i=0;i<=10;i++){if (i==3){continue}document.write("Broj " + i)document.write("<br />")}</script>
Sada smo u vitičaste zagrade stavili continue umjesto break što će rezultirati preskakanjem broja 3.
Dakle rezultat će biti:
Broj 0Broj 1Broj 2Broj 4Broj 5
Broj 6Broj 7 Broj 8Broj 9Broj 10
6.14. Arrays
Što su Arrays? Arrays je zapravo skup podataka sačuvan u jednoj varijabli. Npr. Ako imate firmu sa 10 zaposlenika u jednoj varijabli ih možete imati ovako:
zaposlenik[0] = "Petar"zaposlenik[1] = "Marko"zaposlenik[2] = "Ivana"...itd.
Evo cijelog primjera:<script type="text/javascript">
var zaposlenik = new Array()zaposlenik[0] = "Petar"zaposlenik[1] = "Marko"zaposlenik[2] = "Ivana"
{document.write(zaposlenik[1])}</script>
To će, pretpostavljate, ispisati na ekran "Marko".
Array možete napraviti na još jedan način:
<script type="text/javascript">
var zaposlenik = new Array("Petar", "Marko", "Ivana")
{document.write(zaposlenik[1])}</script>
Ovo će također na ekran ispisati "Marko", jer je uvijek prvi podatak u arrayu nulti.
6.15. Nasumičan odabir slika
Siguran sam da ste često vidjeli, željeli ili tražili skripte čiji su poslovi nasumično izabrati komad koda i prikazati ga, bile to slike ili nešto drugo. Takvih skripta ima na tone na internetu a u ovom tutorijali ću vam pokazati kako napraviti svoju skriptu i objasniti svaki korak. U biti, nema koraka nego objašnjenje uz svaku liniju koda.
<script language="JavaScript">
/*U sljedeću varijablu unesite broj koji će predstavljati broj slika koje želite nasumično prikazati */var broj=3;
/* Deklaracija varijable u kojoj se pomoću funkcije nasumičnog odabira kod svakog učitavanja pridružuje nasumičan broj od 0 do vrijednosti varijable 'broj' */var nasumicno=Math.floor(Math.random()*broj);
/* Sad dolazi dio koda u kojem upisujete kodove za vaše slike. */if(nasumicno==0){document.write("Ovdje unesite HTML kod za vašu prvu sliku"); }
else if(nasumicno==1){document.write("Ovdje unesite HTML kod za vašu drugu sliku"); }
else if(nasumicno==2){document.write("Ovdje unesite HTML kod za vašu treću sliku"); }
//Kraj skripte</script>
To je to. Sada se sigurno pitate što ako imam više od 3 slike? Odgovor je sljedeći. Prvi korak je promijeniti vrijednost varijable 'broj'. U nju upišite ukupan broj slika od kojih želite jednu nasumično prikazati. Zatim, prepišite kod za ispis vaših slika za svaku dodatnu sliku i izmijenite kod sa odgovarajućim. Također, VAŽNO je da promijenite broj u zagradi. Za svaku sljedeću sliku broj se povećava za 1. Npr. (nasumicno==3) u (nasumicno==4) za sljedeću sliku pa onda u (nasumicno==5) za još jednu sliku itd.
7. Flash
7.1. Šta je to Flash?
Sto je Flash? Flash je alat koji dizajneri koriste za izradu prezentacija, aplikacija i ostalih sadržaja koje omogućuju interakciju sa korisnicima. Moguće je izraditi vrlo bogate Flash aplikacije u koje možemo uključiti slike, zvukove, video, i specijalne efekte.
Flash se dosta koristi za izradu animacija ili kompletnih web stranica. Ali napominjem da ljudi nekada znaju zlouporabiti flash, a to se događa kada nabacaju brdo bespotrebnih animacija na web stranicu što dovodi do predugog učitavanja web stranice. Vrlo je lijepo vidjeti kada je nešto profesionalno odrađeno u flashu ali bez bespotrebnih animacija tipa “Dobrodošli na....”
Vrlo lijepo znaju izgledati profesionalni banneri izrađeni u flashu. Puno bolje nego u animiranom gifu.
Flash koristi vektorsku grafiku pa su izlazne datoteke (animacije i slično) bitno lakše u kilobajtima od obične bitamp grafike.
Vjerojatno glavna prednost flasha je interakcija s korisnicima. Npr. kada korisnik klikne na neku tipku neka slika se pojavi i slično. To je samo jedna mala, mala mogućnost. Flash nudi mnogo toga više. Više o tome ćemo u idućim tutorijalima. Najprije ćemo krenuti od samog početka, tj. upoznavanja sa radnom okolinom Flasha i slično.
Probnu verziju Macromedijinog Flasha (ali Macromediu je kupio Adobe pa je u njihovom vlasništvu) možete skinuti na ovoj adresi: http://www.adobe.com/downloads/
Ali najprije se morate registrirati. Ili ako niste u mogućnosti skidati s Interneta možete ga naći na nekim od DVD-a informatičkih časopisa (Bug, Vidi, PCchip...)
Zasad toliko o Flashu, do idućeg tutorijala...
7.2. Izrada prvog flash dokumenta
U ovom tutorijalu ćemo objasniti kako napraviti prvi, jednostavni flash dokument sa ultra jednostavnom animacijom.
Da biste kreirali flash dokument kliknite na File -> New. U novom prozoru će vam se ponuditi vrsta dokumenta. Ostavite označeno Flash document i kliknite na OK.
U Properties-u tipka Size označava trenutnu veličinu dokumenta 550 x 400 pixela.
Background boja je po defaultu podešena na bijelu boju.
Tu boju možete jednostavno promijeniti tako da kliknete na to i select pickerom označite boju koju želite.
Taj properties dio dio u kojemu namještate postavke dokumenta naziva se Property inspector
Crtanje krugaSada kada ste napravili dokument možemo nešto crtati na tom dokumentu. U našem slučaju će to biti krug.
Iz tool panela izaberite Oval tool
Kada ste kliknuli na Oval tool kao Stroke color odaberite bez boje.
Kao Fill color odaberite boju po želji. (Fill color vam se nalazi ispod Stroke color)
Odaberite boje tako da Fill color ima dobar kontrast u odnosu na pozadinsku boju dokumenta.
Sada pomoću Oval toola napravite krug držeći pritisnutu tipku Shift dok pravite kružnicu. Shift držimo zato što želimo napraviti pravilnu kružnicu.
Kreiranje simbolaPretvorit ćemo naš krug u flash simbol kako bismo ga mogli ponovo iskorititi.
Odaberite Selection tool iz Tools panela. (To vam je prva strelica s lijeve strane, na vrhu Tools panela)
Klinite na krug da ga označite. Kada je krug označen idite na Modify -> Convert to Symbol. Kao ime napišite npr. Moj_krug. Defaultno ponašanje tog simbola je sada Movie Clip. Kliknite na OK.
Pojavio se četvrtasti granični rub oko vašeg kruga što znači da je krug pretvoren u simbol i da ga možete ponovo koristiti u dokumentu bilo gdje.
Sada se simbol pojavio u Library panelu. Ako Library panel nije otvoren idite na Window -> Library
Animiranje krugaSada kada imamo krug u našem dokumentu možemo ga i animirati.
Povucite krug skroz na lijevi dio dokumenta. Sada u Timelineu odaberite 20. frame prvog Layera
Kada ste kliknuli na 20. frame prvog Layera idite na Insert > Timeline > Frame ili desni klik na 20. frame pa Insert Frame (ili jednostavno tipkom F5)
Flash je sada dodao frameove do dvadesetog framea i svi frameovi su selektirani.
Dok je 20. frame još uvijek označen kliknite na Insert -> Timeline -> Keyframe ili desni klik pa Insert keyframe. Sada ste dodali keyframe na 20. frame. Keyframe je ključni frame gdje mijenjamo svojstava objekta. Tu ćemo promijeniti lokaciju kruga.
Dok je 20. frame označen prenesite krug s lijeve strane dokumenta na desnu.
Selektirajte prvi frame prvog Layera. U Property inspectoru (obično na dnu) odaberite Motion u Tween meniju. Sada se pojavila strelica u timelineu između prvog i zadnjeg framea koja
pokazuje da postoji motion tween.
Idite na File -> Save spremite flash dokument negdje. Odaberite Control -> Test Movie ili pritisnite Ctrl + Enter da pogledate vašu prvu animaciju.
7.3. Upoznavanje sa radnom okolinom Flasha
U prošlom tutorijalu smo objasnili kako napraviti prvu animaciju da se uvjerite kako se lako može napraviti jednostavna animacija.
No, prije ikakvog novog učenja moramo se upoznati sa Flashom odnosno njegovom radnom okolinom. Mi u našim tutorijalima koristimo Macromedia Flash 8 Professional.
Ovo će biti malo poduži tutorijal jer Flash ima zaista bogatu radnu okolinu s kojom se treba pobliže upoznati. Možda je malo naprorno ovo sve čitati no isplati se upoznati da bi nam bilo lakše u radu i u učenju iz slijedećih tutorijala. Pa krenimo.
Radna okolina Flasha se sastoji od Stagea, Timelinea, i PanelaPogledajte ovdje veliku sliku što je što.
Screenshot
Stage
Kada otvorite novi Flash dokument vidjet ćete bijelu površinu. Ta bijela površina naziva se Stage i sve što je na Stageu (slike, animacije, tekstovi) će biti vidljivo onome tko gleda gotovu animaciju. Sve što je izvan Stagea, odnosno na sivoj površini, neće biti vidljivo onome tko gleda animaciju.
Defaultna veličina Stagea je 550 pixela širine sa 400 pixela visine. Pokušajte sada za probu otvoriti neki gotovi flash dokument File -> Open -> Nađite Macromedia folder -> Flash 8 -> Samples & Tutorials -> Samples -> Masking -> ScriptableMasksPart2 -> ScriptableMasksPart2.fla
Kada ste ga otvorili vidjet ćete da se na Stageu pojavio flash file. Promijenite sada Zoom na 200%.
Primjetite da ste sada samo zoomirali grafiku i niste ništa promijenili na dokumentu. Vrlo je vjerojatno da sada nećete vidjeti cijeli Stage, osim ako nemate neki ogromni monitor).
Da biste mogli pregledati cijeli Stage možete koristiti standardne Windowsove scrollbare ili koristiti Hand tool. Možete izabrati Hand tool iz Tools panela ali puno vam je lakše samo stisnuti razmak na tipkovnici i pomicati lijevo desno. To je brži pristup Hand tool-u.
Probajte sada zoomirati tako da tamo gdje ste odabrali 200% odaberete Fit in Window. Sada se Stage prilagođava vašem monitoru.
Također povećavati i smanjivati zoom pagea možete povećalom na dnu Tools Panela:
Tools Panel
Tools Panel je vrlo sličan svim grafičkim editorima kao što je Photoshop, Fireworks itd. Svaki put kad budete htjeli nešto dodati na Stage ili editirati nešto morat ćete odabrati jedan tool (alat) iz Tools Panela. Sa alatima iz Tools Panela ćemo se detaljnije upoznati kroz ostale tutorijale.
Timeline
Timeline se sastoji od Layera i Frameova. Svaki frame predstavlja jednu sličicu odnosno više frameova čini animaciju.
Ako želimo animirati više objekata odjednom za to će nam poslužiti Layeri. Također, ako
želimo da se neki objekt nalazi ispod drugog i za to koristimo Layere.
Layeri u timelineu se mogu zaključati i sakriti ali o tome u sljedećim tutorijalima. Timeline i Tools Panel su najčešće korišteni dijelovi Flash okoline.
Properties Panel
Iako su Timeline i Tools Panel najkorišteniji dijelovi Flash okoline vjerojatno ćete puno puta trebati koristiti i Properites Panel.
Properies Panel se obično nalazi na dnu Flash prozora.
Properites Panel nam služi da promijenimo svojstva nekog objekta. Properties Panel s mijenja ovisno o tome koji je objekt selektiran. Probajte na Stageu nacrtati krug sa Oval Toolom, selektirajte ga i pogledajte Properties Panel. Zatim probajte koristiti Text Tool i napisati neki tekst, zatim ga selektirati. Primjećujete da svaki alat ima svoja svojstva.
The Library
Iako je The Library u Panelima pa ga nismo napisali tamo kod nabrajanja ali vrlo je važno znati što je The Library. The Library nam služi da bismo pohranili medijske elemente u flashu (slike, zvukove, klipove i slično). Npr. imate jednu sliku u Libraryu i sada tu sliku možete prenesti 100 puta na Stage ali će u flash fajlu zapravo biti samo jedna i tako će konačni flash fajl biti malen.
Ni neznajući, kada smo u prošlom tutorijalu konvertirali krug u symbol, mi smo ga zapravo stavili u Libray. I zato sam reko da ga možemo koristiti bezbroj puta bez da povećavamo veličinu flash fajla.
The Library se obično nalazi s desne stane u Panelima. Ako ga ne vidite kliknite na izbornik Window -> Library (ili jednostavno pritisnite Ctrl + L)
Evo kako izgleda Library u Panelima.
Ako kliknete dvostukim klikom na taj krug možete ga editirati, promijeniti mu svojstva (npr. boju) i onda će vam se svagdje gdje koristite taj krug promijeniti u to što ste promijenili. Nema potrebe da u svakom frameu ponovo editirate objekt.
7.4. Upoznavanje sa Layerima, Frameovima i scenama
Kao što smo već spomenuli u prošlom tutorijalu, važna stvar u Flashu je da razumijete gdje se cijelo vrijeme nalazite. Sada ćemo objasniti kako se što bolje snalaziti u Flash-u.
Trenutni Layer
Iako imamo samo jedan Timeline, možemo u njemu imati više Layera (kao što smo već rekli u prošlom tutorijalu).
U svrhu pregledavanja, napravite sada jedan dokument i dodajte jedan Layer. Možete ga dodati tako da idete na Insert -> Timeline -> Layer ili jednostavno kliknite na ovu tipku.
Važna stvar koju trebate znati je da se možete nalaziti samo u jednom Layeru u isto vrijeme. Dakle ako crtate neku grafiku ona će biti dodana samo u aktivni Layer. Aktivni layer možete prepoznati po olovki (pencil).
Probajte sada kliknuti na drugi Layer i vidjet ćete da se olovka miče uvijek u aktivni Layer. Kada nešto editirate ili crtate obratite pažnju na olovku kako biste bili sigurni u kojem Layeru se trenutno nalazite.
Još jedna korisna opcija u Flashu je da možete zaključati određeni Layer. Malo višlje od olovke, desno, vidjet ćete lokot. Točkice ispod njega služe kako bi se zaključao određeni Layer.
Kliknete li na točkicu Layera koja je ispod lokota, taj Layer ćete zaključati i nećete moći na njemu ništa mijenjati dok ga ne otključate. Otključavate ga na isti način kao i zaključavanje. Jedan klik na točkicu, odnosno lokot u ovom slučaju.
Trenutni frame
U Timelineu, crveni marker pokazuje koji frame trenutno gledate ili uređujete.
Crveni marker također može biti samo na jednom frameu u isto vrijeme. Znači, crverni marker označava frame a olovka Layer u kojemu se nalazite. Primjetite da crveni marker ne možete micati poslje framea 1 ukoliko nemate više frameova.
Trenutna scena ili trenutni simbol
Najzbunjujuća stvar za nove Flash korisnike je ta da u Flashu ima više od jednog Timelinea. Velika ili komplicirana animacija može biti podjeljena u nekoliko scena.
Možete to zamisliti kao jednu pjesmu. Pjesma je podjeljena u više strofa ali je u cjelini jedna pjesma. Tako imamo više Timeline-ova i jedan glavni Timeline. Ali ako podjelite fajl u više scena, onda svakoj sceni možete pristupati individualno. To je jedna dobra mogućnost jer možete promijeniti poredak ili ishod scena.
Ali opet vam mora biti jasno cijelo vrijeme u kojoj se sceni trenutno nalazite. Ime trenutne scene se uvijek nalazi iznad Stagea što je nazvano Edit Bar. Defaultni naziv je Scene 1, ta tipka se zove Clapper ikona.
Probajte sada nacrtati jedan nekoliko krugova sa Oval tool-om. Desni klik na jedan od krugova i konvertirajte ga u simbol (to smo već radil u prvom tutorijalu), i imenujte ga pod nazivom Krug. Sada sve ostale možete isto tako ali sa nazivima Krug 1, Krug 2... Sada dvostrukim klikom kliknite na jedan od krugova. To je sada editiranje objekata (u ovom slučaju simbola). Sada ništa drugo osim tog jednog kruga nije moguće editirati.
Kada editirate jedan od objekata onda vidite koja je to scena i koji objekt.
Navigacija kroz interface
Pitate se kako ste sada ušli u to i kako izaći? Jednostavno, navigacija kroz Flash je vrlo lagana, vjerojatno je i to razlog zašto se tako lako izgubiti. Edit Bar sadrži hijerarhiju trenutne lokacije i navigaciju. Tako da, npr. kada ste kliknuli dvostrukim klikom na onaj krug, ne možete editrati ostale krugove. Ali u editiranju ovoga možete pored njega dodavati još krugova. Ako kliknete u jedan od tih krugova okolo, možete dobiti još jednu navigaciju niže u hijerarhiji itd.
Ako se želite vratiti, jednostavno kliknete na simbol ispred toga, ili scenu u Edit Baru. Ako imate jako puno tih grupa (krugovi, kvadrati, linije...) onda se možete poslužiti ovime.
7.5. Svojstva dokumenta
Kod svake animacije potrebno je odrediti nekoliko svojstava. Glavna svojstva svakog flash dokumenta određivat ćete u prozoru "Document Properties".
Taj prozor možete prikazati tako da idete na Modify -> Document, ili pritisnete Ctrl + J.Primijetite da se mnoge postavke prikazuju i u Properties panelu.
Otvorite sada Document Properties prozor. Odredite jedinice ravnala u pixele. (Ruler units postavite na pixels). Pixeli su nekakav standard na webu i u multimediji općenito.
Druga važna stvar u Document Propertiesu su Frame Rate i Dimensions. Frame Rate određuje koliko će se frameova prikazati po jednoj sekundi. Dimensions određuje omjer širine i visine dokumenta, tako da možete npr. napraviti dokument sa wide screenom odnosno širokim ekranom ili normalnog oblika kvadrata.
U Document Propertiesu možete još odrediti boju pozadine dokumenta, njegov naziv i opis.
U sljedećem tutorijalu ćemo se pozabaviti tipovima datoteka.
8. Literatura
