Embed Size (px)
Citation preview
MYSQL TUTORIJALI
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 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 korisnika
Lozinku 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-nt
Type '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).
Sljedeći tutorijal: Korištenje baze i stvaranje tablice kroz MySQL shell klijent
Korištenje baze
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;
Sljedeći tutorijal: Spajanje na MySQL server
MySQL i PHP
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.
Sljedeći tutorijal: Unos podataka
Unos tutorijala
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.
Sljedeći tutorijal: Brisanje podataka
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 vijesti
if ($_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.
Sljedeći tutorijal: Pribavljanje podataka
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.
Sljedeći tutorijal: Uređivanje podataka
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.
ASP TUTORIJALI
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čunalu
Da 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
Sljedeći tutorijal: Osnovna ASP sintaksa
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>
Sljedeći tutorijal: Varijable
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 stranica
stranica="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 ucim 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).
Sljedeći tutorijal: Arrays
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
Sljedeći tutorijal: Operatori
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 operatori
Ti 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 operatori
Ovi 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 operatori
Ovi operatori se koriste kad rezultat mora vratiti vrijednost istina ili laž.
Operator.... Opis .... Primjer .... Rezultat
And .... 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ž ..... ISTINA
Not .... obrnuto od prave vrijednosti .... laž ..... ISTINA
Znakovni operatori
Jedini znakovni operator je znak & koji spaja dva stringa u jedan. Npr.
rijec = "World Wide" & "Web"
će rezultirati kao
rijec = World Wide Web
Sljedeći tutorijal: If petlja
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 broj
broj = 5
If broj = 5 Then
Response.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 ime
ime = "Marko"
If ime = "Marko" Then
Response.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.
Sljedeći tutorijal: If...Else petlja
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 ime
ime = "Josip"
If ime = "Josip" Then
Response.Write("Pozdrav Josipe!")
Else
Response.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 ime
ime = "Josip"
If ime = "Ivan" Then
Response.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.
Sljedeći tutorijal: Elseif petlja
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 ime
ime = "Gogy"
If ime = "Gogy" Then
Response.Write("Pozdrav gazda Gogy")
Elseif ime = "Leviathan" Then
Response.Write("Pozdrav gazda Leviathan")
Else
Response.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.
Sljedeći tutorijal: Select Case
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 ime
ime = "Ivica"
Select Case ime
Case "Ivica"
Response.Write("Pozdrav Ivice")
Case "Marko"
Response.Write("Pozdrav Marko")
Case "Ivan"
Response.Write("Pozdrav Ivane")
Case Else
Response.Write(ime & " vi niste uclanjeni u nas klub")
End Select
%>
Probajte mijenjati ime u varijabli ime da vidite kakvi se rezultati ispisuju.
Sljedeći tutorijal: Loop
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 i
for i=1 to 15
response.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.
Sljedeći tutorijal: Session
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 id
id = Session.SessionID
response.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 timeout Session 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 = 240
Response.Write("Timeout iznosi: " & Session.Timeout)
%>
Sljedeći tutorijal: Cookies
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_ime
korisnicko_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: Sanja
Veoma korisna stvar zar ne?
Sljedeći tutorijal: Forme
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.asp
Kao š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.QueryString
Sljedeći tutorijal: Include
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?
JAVASCRIPT TUTORIJALI
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>
Sljedeći tutorijal: 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 dio Kada 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 dio Ove 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 Javascript Koristi 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.
Sljedeći tutorijal: Varijable
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"
Sljedeći tutorijal: If...Else
If...Else petlja
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
uvjet nego se ispisuje rečenica Dobar dan i dodaje se sadržaj varijable (u ovom slučaju Ivana)
Sljedeći tutorijal: If...Else If... Else petlja
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>
Sljedeći tutorijal: Switch
Switch
Switch je vrlo slična stvar kao i If...elseif...else, isto se koristi kada imate više mogućih uvjeta 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).
Sljedeći tutorijal: Operatori u Javascriptu
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
Sljedeći tutorijal: Funkcije u Javascriptu
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.
Sljedeći tutorijal: Alerti
Alerti
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 box Ovdje ć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.
Eto to bi bilo to, nadam se da vam je sve jasno. Ako nije pitajte :)
Sljedeći tutorijal: For Loop
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> .
Sljedeći tutorijal: While Loop
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 = 0
while (i <= 10)
{
document.write("The number is " + i)
document.write("<br />")
i++
}
</script>
Pa da objasnimo.
Sa i=0
Definiramo varijablu "i" i dodajemo joj vrijednost 0.
Zatim sa while (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.
Sljedeći tutorijal: Do...While Loop
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=0
do
{
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.
Sljedeći tutorijal: Prekidanje i nastavak Loopova (Break - Continue)
Prekidanje i nastavak Loopova (Break - Continue)
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=0
for (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 1
Broj 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=0
for (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 0
Broj 1
Broj 2
Broj 4
Broj 5
Broj 6
Broj 7
Broj 8
Broj 9
Broj 10
Sljedeći tutorijal: Arrays
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.
Sljedeći tutorijal: Nasumican odabir slika
Nasumičan odabir slike
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.
