SVEUČILIŠTE U MOSTARU
FAKULTET PRIRODOSLOVNO-MATEMATIČKIH I ODGOJNIH ZNANOSTI
INFORMATIKA
Josip Mikulić
Razvoj web aplikacija temeljenih na
Ajax tehnologiji
Diplomski rad
Mostar, 2014.
SVEUČILIŠTE U MOSTARU
FAKULTET PRIRODOSLOVNO-MATEMATIČKIH I ODGOJNIH ZNANOSTI
INFORMATIKA
Razvoj web aplikacija temeljenih na
Ajax tehnologiji
Diplomski rad
Mentor: Dr.sc. Goran Kraljević
Student: Josip Mikulić
Mostar, srpanj 2014.
Sadržaj:
1
Uvod ....................................................................................................... 1
2
Razvoj web aplikacija ........................................................................... 3
3
2.1
HTML............................................................................................... 4
2.2
CSS ................................................................................................. 5
2.3
JavaScript........................................................................................ 8
2.4
PHP ................................................................................................. 9
2.5
MySQL .......................................................................................... 10
AJAX .................................................................................................... 12
3.1
Model Web aplikacije..................................................................... 13
3.2
HTTP zahtjev i odgovor ................................................................. 17
3.3
XMLHttpRequest Object ................................................................ 18
3.3.1 XMLHttpRequest Methods ...................................................... 19
3.3.2 XMLHttpRequest svojstva ....................................................... 20
3.4
4
Primjer AJAX funkcije .................................................................... 22
Praktični primjer izrade web aplikacije (IS Fakulteta) ...................... 24
4.1
Model baze podataka .................................................................... 28
4.1.1 Opis tablica.............................................................................. 29
4.2
AJAX funkcije i PHP skripte ........................................................... 32
4.2.1 Dodavanje novog studenta ...................................................... 32
4.2.2 Brisanje studenta ..................................................................... 34
4.2.3 Ažuriranje podataka o studentu ............................................... 35
5
Zaključak.............................................................................................. 40
6
Literatura ............................................................................................. 41
Dodatak A: Popis slika ............................................................................. 43
Dodatak B: Popis tablica .......................................................................... 44
Dodatak C: JavaScript funkcije ............................................................... 45
Dodatak D: PHP ........................................................................................ 66
Sažetak
Moderne web aplikacije osim funkcionalnosti i dobrog dizajna moraju biti
maksimalno jednostavne i brze.
Korištenjem Ajax tehnologije smanjuje se vrijeme čekanja korisnika na
odgovor servera. Ajax omogućuje rad korisnika bez osvježavanja stranice.
Prvi dio rada odnosi se na razvoj web aplikacija općenito. U ovom dijelu
opisuju se tehnologije koje se najčešće koriste prilikom razvoja web aplikacija, kao
što su PHP, HTML, CSS, JavaScript i MySQL.
Drugi dio rada se bavi samo Ajax-om. Ovdje se opisuje razlika između
sinkronog i asinkronog pristupa, zatim se govori o XMLHttpRequest Object-u i na
kraju se opisuje jedna tipična Ajax funkcija.
Razvoj web aplikacije temeljene na Ajax tehnologije opisuje se u zadnjem
dijelu rada na praktičnom primjeru.
Razvoj web aplikacija temeljenih na Ajax tehnologiji
1 Uvod
Internet je vrlo važna tehnologija za današnje vrijeme. Mnogi ljudi koriste
ovu tehnologiju. Web aplikacije imaju brojne prednosti u odnosu na desktop
aplikacije. Lakše ih je razvijati, implementirati i održavati. Internet tehnologija nije
savršena, postoje određeni problemi. U prošlosti sadržaj na web-u je bio isključivo
statičan. Ovakav pristup imao je puno ograničenja. Zbog tih problema vrlo brzo
dolazi do razvoja programskog okruženja na strani klijenta. Međutim ovo rješenje
također nije dovoljno dobro. Najveći problem se događa prilikom interakcije
između klijenta i servera. Problem je što ova interakcija nije dovoljno brza.
Programeri su pokušali riješiti ovaj problem više puta. Razvijeni su novi web
programski jezici koji su trebali riješiti ovaj problem ali bezuspješno.
Rješenje ovog problema je Ajax tehnologija. Ajax zapravo nije nova
tehnologija, to je skup tehnologija koje su već postojale. Ajax je skraćenica za
asinkroni JavaScript i XML. Ova tehnologija se zasniva na razmjeni malih količina
podataka sa serverom, kako korisnik ne bi morao stalno osvježavati stranicu.
Ovakav pristup se naziva asinkroni pristup. Mnogo prije pojave Ajax tehnologije
koristili su se slični principi, kao što su Remote Scripting ili DHTML.
Asinkroni pristup je velika prednost Ajax tehnologije. Asinkrono znači da
kada se pošalje zahtjev serveru, dok korisnik čeka odgovor sa servera slobodan je
raditi druge stvari dok odgovor ne stigne. Na ovaj način komunikacija se odvija u
pozadini, a korisnik uopće ne zna da se takvo nešto događa. Za slanje zahtjeva na
server koristi se JavaScript. Korištenjem ovog jezika odvija se interakcija sa
korisnikom.
XMLHttpRequest objekt služi za uspostavljanje direktne komunikacije
JavaScript-a sa serverom. Različiti pretraživači koriste različite metode za
stvaranje XMLHttpRequest objekt, zbog toga je potrebno najprije detektirati koji
pretraživač korisnik upotrebljava.
1
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Za dodavanje Ajax funkcionalnosti u aplikaciju, potrebno je definirati
događaje na strani klijenta koji će biti zaduženi za pokretanje asinkronog poziva i
HTTP zahtjeva.
U zadnjem dijelu ovog rada opisuje se praktični primjer aplikacije temeljenje
na Ajax tehnologiji. U toj aplikaciji uz pomoć Ajax tehnologije potrebno je eliminirati
bilo kakva potreba za osvježavanjem stranice ručno. Rezultati akcija kao što su
dodavanje, ažuriranje i brisanje podataka potrebno je prikazani odmah bez
osvježavanja stranice.
2
Razvoj web aplikacija temeljenih na Ajax tehnologiji
2 Razvoj web aplikacija
Web aplikacija je bilo koji program koji se izvodi na web pregledniku.
Popularne su zbog sveprisutnosti web preglednika. Web aplikacije su jednostavne
za održavanje i ažuriranje, nema potrebe za instalacijom i distribucijom softvera na
klijentska računala. Ovo je glavni razlog za njihovu popularnost.
Osnovna arhitektura web aplikacija je dvoslojna arhitektura. Sastoji se od tri
komponente podijeljene u dva sloja:

Klijent

Server
Osnovna karakteristika klijent-server sustava je distribuirana obrada
podataka. Prednosti dvoslojne arhitekture su centralizirano upravljanje resursima
sustava i osiguravanje sigurnosti je jednostavno, a osnovni nedostatak
nemogućnost osiguravanja efikasnog rada velikog broja korisnika. [1]
Slika 1 Dvoslojna arhitektura web aplikacija
HTTP (Hyper Text Transfer Protocol) je najčešća metoda za prijenos
informacija na webu. HTTP je zahtjev/odgovor protokol koji omogućuje
komunikaciju između klijenta i poslužitelja. [2]
3
Razvoj web aplikacija temeljenih na Ajax tehnologiji
2.1 HTML
HTML (Hyper Text Markup Language) je prezentacijski jezik za izradu web
stranica. Ovakvi dokumenti sadrže ekstenziju „.html“ ili „.htm“. Ovim jezikom se
oblikuje sadržaj te se stvaraju hiperveze hipertext dokumenta. HTML je od početka
besplatan i tako dostupan svima. Za izradu HTML dokumenta dovoljno je imati bilo
koji uređivač teksta. [3]
Osnovni građevni element svakog HTML dokumenta su tagovi. Postoje
elementi koje je potrebno zatvoriti i elementi koje nije potrebno zatvoriti. Svaki html
tag na početku ima znak „ < “ a završava znakom „ > “. Ukoliko se radi o
zatvarajućem tagu između znakova „ < “ i „ > “ nalazi se znak „ / “. Neki od tagova
koje nije potrebno zatvoriti su <input>, <br>, itd.
HTML dokument piše se unutar tagova <html> </html>. Svakom HTML tagu
moguće je dodati neki atribut. Uz pomoć atributa se oblikuje sadržaj. [4]
<img src=“slika.jpg“ width=“100“ height=“100“ />
U ovom primjeru postoji tag <img> koji govori web pregledniku da želi učitati
sliku koja se naziva „slika.jpg“ te ima zadanu visinu i širinu. Atributi se rijetko
koriste zbog pojave CSS-a koji na jednostavniji način uređuje HTML elemente.
Primjer najjednostavnijeg HTML elementa:
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
Sadržaj stranice
</body>
<html>
4
Razvoj web aplikacija temeljenih na Ajax tehnologiji
2.2 CSS
CSS (Cascading Style Sheets) je stilski jezik koji se koristi za opis
prezentacije dokumenta napisanog pomoću HTML-a. CSS je ono što definira stil
na web stranici. Može biti umetnut u HTML na više različitih načina. Svaki HTML
element na web stranici mogu se oblikovati pomoću ugrađenih stilova npr:
<h1 style=“color: blue; background-color:#123;“></h1>
Ovo je vrlo neučinkovit način umetanja CSS-a te ga treba izbjegavati u svim
okolnostima. Najbolji način umetanja CSS-a u web stranicu je pomoću <link>
elementa. Ovaj element se postavlja unutar <head> elementa određenog HTML
dokumenta. Na ovaj način CSS je potpuno odvojen od HTML koda.
<link rel=“stylesheet“ href=“css/style.css“>
Svako pravilo unutar CSS stila sastoji se od selektora i niza deklaracija. Na
lijevoj strani nalazi se selektor, a s desne strane dodaju se deklaracije. Blok
deklaracije sastoji se od jedne ili više deklaracija.
Slika 2 CSS struktura
5
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Selektor CSS-a je dio koji određuje na koji element se zapravo odnosi CSS
stil. Postoji više vrsta selektora. Osnovni selektori su:

Univerzalni selektor

Tipski selektor

ID selektor

Class selektor
Univerzalni selektor se odnosi na sve tekstualne elemente na stranici. Ovaj
selektor se deklarira uz pomoć znaka „ * “.
Na sljedećem primjeru definiran je univerzalni selektor koji određuje da svi
tekstualni elementi imaju plavu boju.
*
{
Color: blue;
}
Tipski selektor odnosi se na sve elemente istog tipa unutar stranice, ako se
drugačije ne bude definiralo uz pomoć drugih selektora. Na sljedećem primjeru
definiran je stil koji se odnosi na sve linkove unutar stranice.
a
{
color: white;
}
ID selektor deklarira se korištenjem znaka „ # “ iza kojeg se dodaje naziv ID
selektora koji se kasnije poziva unutar HTML elementa. Ovaj selektor moguće je
pozvati samo jednom unutar stranice.
Na sljedećem primjeru definiran je jedan ID selektor koji je naknadno
pozvan unutar <div> taga.
6
Razvoj web aplikacija temeljenih na Ajax tehnologiji
#stil
{
width: 500px;
margin: 10px;
}
<div id=“stil“></div>
Najčešće korišteni selektor je class selektor. Deklarira se korištenjem točke
prije naziva klase. Class selektor moguće je primijeniti na svaki element unutar
stranice. Sljedeći primjer prikazuje jedan class selektor koji je naknadno pozvan
unutar <div> taga. [5]
.klasa
{
width: 500px;
Margin: 10px;
}
<div class=“klasa“></div>
7
Razvoj web aplikacija temeljenih na Ajax tehnologiji
2.3 JavaScript
JavaScript je skriptni programski jezik koji se izvršava na strani korisnika.
Izvorno ga je razvila tvrtka Netscape. Naredbe JavaScript-a su u tekstualnom
formatu. JavaScript kod postavlja se unutar oznaka <script> i </script>. Drugi
način za uključivanje koda napisanog JavaScript-om je povezivanje udaljene
datoteke koja sadrži naredbe ili funkcije. Povezivanje se obavlja na sljedeći način:
<script language=“JavaScript“ src=“javafunkcije.js“></script>
Funkcija je dio koda koji se izvršava kada je funkcija pozvana ili kad se
izvrši neki događaj. JavaScript koristi dijalog prozore za interakciju s korisnikom.
Kreiraju se uz pomoć tri metode:

Alert box

Confirm box

Prompt box
Alert box koristi se za upozoravanje korisnika. Kada se dijalog prozor
pojavi, izvršavanje koda je stopirano dok korisnik ne klikne na potvrdu. Confirm
box se koristi kada se traži od korisnika da nešto prihvati ili odbije. Prompt prozor
se pojavljuje s jednostavnim poljem za tekst.
Događaji su signali koji se generiraju kada se dogodi neka akcija.
JavaScript detektira ovakve signale, te se pišu programi koji reagiraju na ovakve
događaje. Događaji se dijele u dvije osnovne skupine:

Sistemski događaji

Događaji uzrokovani akcijama miša ili tipkovnice
U prvu skupinu spadaju događaji OnLoad i OnUnload. Kada se traženi
HTML dokument potpuno učita tada se aktivira OnLoad događaj. Događaj
OnUnload koristan je za čišćenje poslije posjete određenoj stranici. U drugu
skupinu spadaju događaji koji su uzrokovani akcijom miša ili tipkovnice.
8
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Najčešće korišteni događaj u toj skupini je OnClick. Aktivira se svaki put
kada korisnik klikne na objekt koji prihvaća takve događaje. OnSubmit događaj se
također često koristi. Povezan je sa objektom forme. Najčešće se koristi kada
treba proslijediti sadržaj popunjene forme na HTTP server. Provjera greške vrši se
na strani klijenta čime se smanjuje opterećenje na serveru. U ovu skupinu još
spadaju događaji OnSelect, OnBlur, OnChange, itd. [6]
2.4 PHP
PHP (Hypertext Preprocessor) je široko rasprostranjen skriptni jezik koji se
izvršava na strani servera. Namijenjen je za kreiranje dinamičkih web stranica.
Sintaksa samog jezika slična je sintaksi programskog jezika C. PHP radi na svim
operativnim sustavima i besplatan je.
Popularan je zbog sposobnosti da podržava veliki broj sustava za
upravljanje bazama podataka. Na prvom mjestu je MySQL, pa zatim Oracle, MS
Access, SQL Server, Postgre SQL, i još mnogi drugi.
PHP stranice su općenito HTML stranice s PHP naredbama ugrađenim u
njih. Web poslužitelj obrađuje PHP naredbe i šalje svoj izlaz u preglednik. Kako bi
se PHP kod držao odvojen od HTML koda potrebno ga je umetnuti unutar
specijalnih tagova <?php i ?>. Moguće je PHP kod držati u eksternim fajlovima.
Svaki PHP iskaz obavezno završava znakom točka-zarez. Kako bi kompajler
razlikovao varijable od teksta, potrebno je prije imena varijable dodati znak „ $ “.
Imena varijabla su osjetljiva na mala i velika slova. Na prvom mjestu u imenu
varijable ne može biti broj, ali ime varijable može sadržavati broj. [7]
9
Razvoj web aplikacija temeljenih na Ajax tehnologiji
2.5 MySQL
MySQL je besplatan, open source sustav za upravljanje bazom podataka.
Ova baza je optimizirana kako bi bila brža, zbog toga je morala žrtvovati
funkcionalnost. Najveća prednost MySQL baze podataka je podrška od brojnih
programskih jezika među kojima prednjači PHP. Ovo je relacijska baza podataka.
Ovaj tip baza podataka pokazao se kao najbolji način skladištenja i pretraživanja
velike količine podataka. [8]
Prvi korak u radu s bazama podataka je izgradnja modela baze. Podatke je
potrebno organizirati u tablice. Osnovni element koji se sprema u bazu podataka
je entitet. Entitet može biti bilo što o čemu se čuvaju podaci u bazi. Unutar baze
podataka postoje relacije ili veze između raznih entiteta, koji se na odgovarajući
način predstavljaju unutar baze. Veze ili relacije se mogu podijeliti na:

Jedan prema jedan

Jedan prema više

Više prema više
Postoje stavke ispred koje se označavaju kao primarni ključ. Primarni ključ
se u određenoj tablici može pojaviti samo jedan put. Osim primarnog postoji i
strani ključ. Strani ključ je polje u sekundarnoj tablici kojim se vrši povezivanje i ne
mora imati jedinstvenu vrijednost.
Integritet baze podataka čini skup pravila koji osiguravaju ispravnost
ovisnosti i nepromjenjivosti stanja baze podataka prilikom unošenja, brisanja i
osvježavanja podataka. Glavna pravila integriteta baze podataka su:

Nije moguće unijeti podatak u sekundarnu tablicu ako ne postoji u
primarnoj tablici.

Ne može se ukloniti podatak iz primarne tablice, ukoliko postoji
podatak koji je povezan u sekundarnoj tablici.

Ne može se mijenjati vrijednost primarnog ključa u primarnoj tablici
ukoliko postoji povezani slog u sekundarnoj tablici.
10
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Uz pomoć SQL naredbi moguće je vršiti brojne operacije nad bazom
podataka, kao što su:

Dodavanje podataka

Brisanje podataka

Ažuriranje podataka

Pregled podataka
Slika 3 Model baze podataka
11
Razvoj web aplikacija temeljenih na Ajax tehnologiji
3 AJAX
AJAX je skraćenica od „Asynchronous JavaScript and XML“. Ajax nije
odvojena tehnologija, nego grupa tehnologija. [9] Ovaj pojam prvi put se koristi
2005. god. Jesse James Garret pokušao je da pronađe naziv za grupu tehnologija
koju je predlagao svom klijentu. Tehnologije korištene u Ajax -u postojale su i
ranije, ali nisu imale podršku od strane web čitača.
Ovaj skup tehnologija
obuhvaća:

Prezentacijski sloj web aplikacije stvoren korištenjem XHTML-a i
CSS-a

Dinamički prikaz i interakcija upotrebom DOM-a

Izmjena podataka i manipulacija korištenjem XML-a i pripadnih
tehnologija

Asinkroni prihvat podataka korištenjem XMLHttpRequest objekta

JavaScript koji ovo sve povezuje [10]
Nedostatak web aplikacija u odnosu na desktop aplikacije je taj što su
desktop aplikacije funkcionalnije i bogatije informacijama. [10] Klasičnim web
stranicama se upravlja preko web servera a korisnici dobivaju odgovor preko
mreže. Ovakve web aplikacije imaju brojne nedostatke pri interakciji s korisnicima.
[11] Nedostaci su:

Spor odgovor na zahtjev

Sinkroni način rada

Prilikom ponovnog učitavanja stranice izgubi se sadržaj

Gubitak informacija na ekranu

Potrebno čekati odgovor za akcije korisnika

Korisnik mora čekati na učitavanje sljedeće stranice

Za svaki akciju korisnika potrebno učitati cijelu stranicu sa servera
12
Razvoj web aplikacija temeljenih na Ajax tehnologiji
3.1 Model Web aplikacije
Tradicionalne i moderne web aplikacije razlikuju se u nekoliko segmenata.
Moderne web aplikacije cijelu stranicu učitaju samo jedan put, dok tradicionalne
stranice dohvaćaju cijelu stranicu prilikom svakog novog zahtjeva korisnika. Način
rada i mjesto obrade podataka se razlikuju za tradicionalne i moderne web
aplikacije.
Slika 4 Tradicionalne i moderne web aplikacije
13
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Najveći problem kod tradicionalnih web stranica predstavlja čekanje
korisnika. Kada web aplikacija pošalje zahtjev serveru, korisnik je prisiljen da čeka
dok server ne obradi zahtjev. Tek kada server obradi zahtjev preglednik dohvaća
stranicu i prikazuje rezultat korisniku. Dodatni problem predstavlja učitavanje cijele
stranice bez obzira koliko su male izmjene u odnosu na staru stranicu. Ovakav
način rada naziva se sinkroni. U ovakvom načinu rada procesi se izvode
sekvencionalno.
Na slici 5 prikazan je sinkroni način rada web aplikacije. Iz slike je vidljivo
da postoji pauza između korisnikove aktivnosti i obrade zahtjeva na serverskoj
strani. U vremenu čekanja korisnik nije u mogućnosti napraviti nove zahtjeve ili
nastaviti koristiti web stranicu.
Kada obradi zahtjev korisnika server vraća rezultate u vidu nove web
stranice. Ovakve stranice su sporije od modernih web stranica.
Slika 5 Sinkroni način rada web aplikacije
14
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Asinkroni način radi omogućuje korisniku stalno korištenje web aplikacija
bez pauza kao što je slučaj kod sinkronog načina rada. Ajax dodaje novi sloj u
aplikaciju. Taj novi sloj omogućuje asinkroni način rada. Prilikom učitavanja web
stranice preglednik učitava i Ajax mehanizme koji su napisani u JavaScript jeziku.
Asinkronim načinom rada komunikacija se odvija u pozadini. Korisnik uopće nije
upoznat da se nešto takvo događa.
Na slici 6 prikazan je asinkroni način rada web aplikacije. Ako se usporedi s
slikom 5, vidljivo je da postoji potpuno novi sloj koji obuhvaća Ajax mehanizme.
Ajax tehnologija se zasniva na razmjeni malih količina podataka sa serverom. Na
ovaj način korisnik ne mora osvježavati stranicu.
Slika 6 Asinkroni način rada web aplikacije
15
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Svaka korisnička akcija koja bi inače generirala HTTP zahtjev poprima oblik
JavaScript pozivanja Ajax -a. Svaki korisnički zahtjev koji ne zahtjeva odgovor
servera kao što je npr. validacija podataka, Ajax mehanizam može izvršiti sam po
sebi. Ako zahtjev treba izvršiti na serveru, mehanizam to čini asinkrono. [10] Na
slici 7 prikazano je izvršenje tipičnog Ajax zahtjeva.
Slika 7 Izvršavanje tipičnog AJAX zahtjeva
U prvom koraku korisnik klikom aktivira događaj, zatim se stvara
XMLHttpRequest objekt koji šalje zahtjev serveru. Server dohvaća odgovarajuće
podatke koje šalje natrag, zatim XMLHttpRequest kada podaci stignu vraća
povratnu informaciju. [12]
16
Razvoj web aplikacija temeljenih na Ajax tehnologiji
3.2 HTTP zahtjev i odgovor
Pretraživači koriste HTTP metode kako bi poslali zahtjev na server i primili
odgovor sa servera. Kada server primi zahtjev onda odlučuje što će odgovoriti.
Postoje različiti odgovori s servera. Najčešći odgovori su prikazani u tablici 1
skupa s odgovarajućim kodovima. [13]
Tablica 1 Kodovi HTTP statusa
KOD
200 OK
304 Not Modified
401 Unauthorized
403 Forbidden
404 Not Found
500 Internal Server Error
503 Service Unvaliable
OPIS
Odgovor koji se vrati kada je traženi
odgovor pronađen i uspješno spremljen
Odziv ako nema izmjena
Pristup je odbijen
Zabranjen pristup
Ne može pronaći datoteku
Interna pogreška poslužitelja
Servis nije dostupan
Postoje različiti oblici metoda koje se koriste za zahtjev prema serveru.
HTTP zahtjev metode su:

GET

POST

HEAD

PUT

DELETE

TRACE

OPTIONS

CONNECT
Najčešće korištene metode su GET i POST. POST metoda se koristi kada
se prenosi više od 512 bajta, a GET metoda može biti korisna prilikom ispravljanja
pogrešaka.
17
Razvoj web aplikacija temeljenih na Ajax tehnologiji
3.3 XMLHttpRequest Object
XMLHttpRequest objekt služi za uspostavljanje direktne komunikacije
JavaScript-a sa serverom. Pomoću HTTP zahtjeva pretraživač može poslati
zahtjev serveru i primiti odgovor bez ponovnog učitavanja stranice. Različiti
pretraživači koriste različite metode za stvaranje XMLHttpRequest objekta. Svi
pretraživači osim Internet Explorer-a koriste JavaScript metodu XMLHttpRequest,
dok Internet Explorer koristi ActiveXObject metodu. [11]
Pri izradi Ajax aplikacija preporučljivo je najprije detektirati o kojem
pretraživaču se radi. U nastavku je prikazana funkcija koja omogućuje
kompatibilnost s različitim pretraživačima.
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari , Chrome
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Vaš pretraživač ne podržava AJAX!");
return false;
}
}
}
Funkcija najprije stvori varijablu xmlHttp u kojoj će čuvati odgovarajuću
metodu.
18
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Zatim
se
pokušavaju
kreirati
metodu
koje
pretraživač
pokušava
interpretirati. U slučaju da pretraživač ne može interpretirati ni jednu metodu, onda
se radi o jako starom pretraživaču koji nema podršku za Ajax.
3.3.1 XMLHttpRequest Methods
Jednom kada je XMLHttpRequest objekt stvoren postoji niz metoda koje su
dostupne korisnicima. XMLHttpRequest metode su:






Abort()
Open()
Send()
getAllResponseHeaders()
getResponseHeader()
setRequestHeader()
Abort metoda je vrlo jednostavna metoda. Koristi se kada se zatraženi
zahtjev nakon određenog vremena želi prekinuti.
Metoda getAllResponseHeaders se koristi kako bi se dobile potpune
informacije o svim HTTP zaglavljima koja su prolazila.
Metoda getResponseHeader() se koristi kako bi se dobio sadržaj
određenog dijela zaglavlja. [13]
HTTP zahtjev XMLHttpRequest objekta mora biti inicijaliziran kroz open
metodu. Potrebno je pozvati ovu metodu prije slanja samog zahtjeva kako bi
potvrdio zahtjev. Open metoda ne garantira ispravnost poslanih podataka. Prvi
parametar označava HTTP zahtjev koji se koristi. Može biti:






GET
POST
HEAD
PUT
DELETE
OPTIONS
19
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Drugi parametar označava URL HTTP zahtjev, a treći parametar je
vrijednost koja označava da li će zahtjev biti asinkron. Asinkroni zahtjev ne čeka
odgovor servera nego se skripta dalje izvršava. U nastavku je prikazan kod jedne
open metode. [14]
xmlhttp.open("GET","ajax_load_select.php?name=" + fieldName,true);
Metoda setRequestHeader može se koristiti samo kada je metoda open
korištena i mora se koristiti prije nego se pozove send funkcija. Ova metoda se
koristi za slanje HTTP zaglavlja skupa sa zahtjevom. Prvi parametar predstavlja
naziv zaglavlja, a drugi parametar predstavlja vrijednost.
Send metoda se koristi za slanje HTTP zahtjeva. Ako je zahtjev poslan
asinkrono, odgovor će se vratiti odmah. Postoji samo jedan parametar koji može
biti izostavljen ako se nikakav sadržaj ne treba poslati.
3.3.2 XMLHttpRequest svojstva
Svaki objekt ima cijeli set svojstava koji se mogu koristiti. Svojstva
XMLHttpRequest su:

Onreadystatechange

readyState

responseText

responseXML

status

statusText
Onreadystatechange obrađuje događaj koji se ostvaruje svaki put kada se
promijeni stanje objekta. Za svaku promjenu stanja objekta poziva se odgovarajući
dio koda. [13]
20
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Svojstvo readyState čuva status odgovora servera. Onreadystatechange
funkcija će biti izvršena za svaku promjenu svojstva readyState. Moguće
vrijednosti readyState svojstva su prikazane u tablici 2.
Tablica 2 Moguće vrijednosti readyState svojstva
STANJE
0
1
2
3
4
OPIS
Zahtjev nije inicijaliziran
Zahtjev je podešen
Zahtjev je poslan
Zahtjev se obrađuje
Zahtjev je završen
Svojstvo responseText daje vrijednost odgovora u tekstualnom obliku. Puno
veće mogućnosti pružaju podaci u XML obliku koje osigurava svojstvo
ResponseXML. Svojstvo status daje statusni kod HTTP zahtjeva kao broj, dok
statusText svojstvo daje status HTTP zahtjeva kao tekst.
21
Razvoj web aplikacija temeljenih na Ajax tehnologiji
3.4 Primjer AJAX funkcije
function loadAjaxPage(curPage , func)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("myDiv").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
if(func!=null)
{
func();
}
}
}
xmlhttp.open("GET",curPage,true);
xmlhttp.send();
}
U ovom primjeru prikazana je tipična Ajax funkcija koja se naziva
loadAjaxPage. Ova funkcija prima dva parametra, a to su curPage i func.
Prvi dio koda odnosi se na omogućavanje kompatibilnosti s različitim
pretraživačima. Zatim se definira onreadychange svojstvo i provjerava da li ima
vrijednost 404, u slučaju da je uvjet točan ispisuje se pogreška unutar elementa
„myDiv“. Dalje se provjerava da li readyState svojstvo ima vrijednost 4 i da status
svojstvo ima vrijednost 200. Ako je ovaj uvjet točan onda responseText svojstvo
preuzima podatke sa servera i prikazuje ih na ekranu. U slučaju da funkcija ima
argument func različit od null vrijednosti tada se poziva funkcija func().
22
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Zadnji dio koda se zapravo prvi izvršava. U ovom slučaju metoda open
koristi GET metodu za prijenos podataka na server, drugi parametar metode open
je curPage. U varijabli curPage nalazi se URL adresa koju je funkcija
loadAjaxPage primila kao parametar. Treći parametar true označava da se zahtjev
treba odraditi asinkrono. Izvršavanje slanja zahtjeva vrši se metodom send u
zadnjoj liniji koda.
23
Razvoj web aplikacija temeljenih na Ajax tehnologiji
4 Praktični primjer izrade web aplikacije (IS Fakulteta)
U ovom poglavlju će biti prikazan primjer izgradnje informacijskog sustava
fakulteta temeljen na Ajax tehnologiji.
Ovaj sustav se sastoji od četiri pogleda:

pogled studenta

pogled profesora

pogled administratora

pogled gosta
Svaki korisnik ima jednu od tri razine koje mogu biti A, P i S. Razine ovlasti
dodjeljuje administrator. U ovisnosti o razini, nakon prijave na sustav korisnik
dobiva određeno korisničko sučelje. Prijava na sustav se vrši upisivanjem
korisničkog imena i lozinke. Na slici 8 prikazano je sučelje za prijavu na sustav.
Ovo je ujedno sučelje kojem može pristupiti svaki gost. Osim mogućnosti prijave
na sustav, gost može vidjeti ispitne rokove bez da se prijavi na sustav.
Slika 8 Sučelje za prijavu na sustav
24
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Pomoću sustava student može prijaviti ispit, odjaviti ispit i pregledati ispitne
rokove za predmete koje je upisao. Na slici 9 prikazano je sučelje studenta.
Slika 9 Sučelje studenta
Profesor na sustavu može pogledati ispitne rokove i unositi ocijene za
studente koji su prijavili ispit na nekom od predmeta kojima je nositelj logirani
profesor. Sučelje profesora prikazano je na slici 10.
Slika 10 Sučelje profesora
25
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Upravljanje cijelim sustavom vrši se iz administratorskog sučelja. Sučelje
administratora prikazano je na slici 11. Administrator može upravljati podacima
kao što su:

studijske grupe

semestar

općina

županija

država

ispitni rokovi

profesor

korisnici

predmet

student
Slika 11. Sučelje administratora
26
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Administrator može dodavati, brisati i ažurirati podatke. Osim upravljanja
osnovnim podacima administrator može upisivati predmete svakom studentu.
Student nije u mogućnosti prijaviti ispit iz predmeta na koji ga administrator nije
upisao.
Svaki korisnik mora imati korisničko ime i lozinku kako bi se prijavio na
sustav. Korisničko ime, lozinku i razinu ovlasti mora dodijeliti administrator.
27
Razvoj web aplikacija temeljenih na Ajax tehnologiji
4.1 Model baze podataka
Baze podataka služi za odvajanje podataka od aplikacije koja ih koristi.
Omogućava različite poglede na istu bazu podataka. Prva faza razvoja baze
podataka je modeliranje baze. Model baze podataka ovog sustava prikazan je na
slici 12.
Slika 12 Relacijski model baze podataka
28
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Iz modela vidljivo je da se baza sastoji od 12 tablica koje su međusobno
povezane određenim relacijama. Ukoliko se dogodi da je veze između dvije tablice
„više prema više“ potrebno je dodati jednu tablicu između njih. U ovom modelu
postoje dva ovakva slučaja. Jedan student može upisati više predmeta, isto tako
jedan predmet može imati više upisanih studenata. Jasno je da se ovdje radi o
vezi „više prema više“, zbog toga se dodaje tablica „upisani_predmeti“ koja sadrži
strane ključeve od tablica „student“ i „predmet“. Istom logikom dodaje se tablica
„ispit_zapisnik“ između tablica „student“ i „ispitni_rokovi“.
4.1.1 Opis tablica
U tablicu „student“ spremaju se osnovni podaci o studentu. Tablica se
sastoji od šest atributa koji su prikazani u tablici 3. „IdStudent“ je primarni ključ
tablice „student“, postavljen je kao „AUTO_INCREMENT“ kako korisnik ne bi
morao sam birati primarni ključ. Ovo je jako bitno kod velikog skupa podataka
zbog mogućnosti da korisnik ne može pronaći primarni ključ koji je slobodan. Tip
podataka ovog atributa je integer s ograničenjem na 11 znakova. Atributi koji
sadrže ime i prezime studenta su postavljeni kao znakovni tip podataka (Varchar),
s ograničenjima za ime na 20 znakova i prezime na 25 znakova. Atributi
„Studijske_grupe_id“, „Općina_id“ i „Semestar_id“ su strani ključevi koji se
referenciraju na tablice „studijske_grupe“, „općina“ i „semestar“. Tipovi podataka
ovih atributa su integer s ograničenjem na 11 znakova.
Tablica 3 Tablica Student
Naziv atributa
IdStudent
Ime
Prezime
Studijske_grupe_id
Vrsta atributa
Int(11)
Varchar(20)
Varchar(25)
Int(11)
Općina_id
Int(11)
Semestar_id
Int(11)
Opis atributa
Primarni ključ tablice
Ime studenta
Prezime studenta
Strani ključ na tablicu
studijske grupe
Strani ključ na tablicu
općina
Strani ključ na tablicu
semestar
29
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Podaci o predmetu se spremaju u tablicu „predmet“. Sastoji se od četiri
atributa. Atribut “idPredmeti“ je primarni ključ ove tablice. Tip podataka je integer s
ograničenjem
na
11
znakova,
koji
je
također
postavljen
kao
„AUTO_INCREMENT“. Zbog mogućnosti pojavljivanja predmeta s jako dugim
imenom, atribut „Naziv_predmeta“ postavljen je kao znakovni tip podataka s
ograničenjem na 45 znakova. U atribut „ECTS“ sprema se broj ECTS bodova koje
nosi predmet. Tip podataka je integer s ograničenjem na 11 znakova, kao i atribut
„Profesor_id“. Posljednji atribut je strani ključ koji se referencira na tablicu
„Profesor“.
Tablica 4 Tablica Predmeti
Naziv atributa
idPredmeti
Naziv_predmeta
ECTS
Profesor_id
Vrsta atributa
Int(11)
Varchar(45)
Int(11)
Int(11)
Opis atributa
Primarni ključ
Naziv predmeta
Broj ECTS bodova
Strani ključ na tablicu
profesor
Kao što je u prethodnom tekstu spomenuto, između ove dvije tablice
potrebno je dodati još jednu tablicu. Tablica „Upisani_predmeti“ sastoji se od tri
atributa.
Prvi
atribut
je
primarni
ključ
ove
tablice
koji
se
naziva
„idUpisani_predmeti“. Tip podataka je integer s ograničenjem na 11 znakova, kao i
preostala dva atributa u tablici. Preostala dva atributa su strani ključevi koji se
referenciraju na tablice „Student“ i „Predmet“.
Tablica 5 Tablica Upisani predmeti
Naziv atributa
idUpisani_predmeti
Predmeti_id
Vrsta atributa
Int(11)
Int(11)
Student_id
Int(11)
Opis atributa
Primarni ključ
Strani ključ na
predmet
Strani ključ na
student
tablicu
tablicu
30
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Kada se korisnik prijavljuje na sustav važno je da sustav može pročitati koju
razinu ovlasti korisnik ima. Tablica korisnici sadrži podatke koji su potrebni za
prijavu na sustav.
Tablica 6 Tablica korisnici
Naziv atributa
id_korisnici
Korisnicko_ime
Lozinka
Tip_korisnika
Student_id
Vrsta atributa
Int(11)
Varchar(15)
Varchar(15)
Varchar(2)
Int(11)
Profesor_id
Int(11)
Opis atributa
Primarni ključ
Korisničko ime
Lozinka
Razina ovlasti
Strani ključ na
student
Strani ključ na
profesor
tablicu
tablicu
Primarni ključ ove tablice je „id_korisnici“, tip podataka je integer s
ograničenjem na 11 znakova. Atributi „Korisnicko_ime“ i „Lozinka“ su znakovni tip
podataka s ograničenjem na 15 znakova, dok je „Tip_korisnika“ također znakovni
tip podataka ali s ograničenjem na dva znaka. Strani ključevi u ovoj tablici su
„Student_id“ i „Profesor_id“. Kod ova dva atributa dopušten je unos NULL
vrijednosti. Ako se radi o administratoru oba strana ključa imaju NULL vrijednost.
Ukoliko je korisnik student, tada se kao strani ključ postavlja primarni ključ od
odabranog studenta, a „Profesor_id“ se postavlja na NULL vrijednost. Ako je
korisnik profesor, tada se kao strani ključ postavlja primarni ključ od odabranog
profesora, dok se „Student_id“ postavlja na NULL vrijednost.
31
Razvoj web aplikacija temeljenih na Ajax tehnologiji
4.2 AJAX funkcije i PHP skripte
Tema ovog rada je „Razvoj web aplikacija temeljenih na Ajax tehnologiji“.
Prema tome posebni naglasak ide na Ajax funkcije. Za primjere će se uzimati
funkcije koje su vezane za rad sa studentima. Prva funkcija koje se opisuje služi
za dodavanje novog studenta bez osvježavanja stranice.
4.2.1 Dodavanje novog studenta
function ajaxUpisStudent()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("novi").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("student.php",null);
}
}
var ime=document.getElementById('naziv_studenta').value;
var prezime=document.getElementById('prezime').value;
var stg=document.getElementById('sifra_stgrupe').value;
var sifra_op=document.getElementById('sifra_opcine').value;
var sem=document.getElementById('sifra_sem').value;
var queryString = "?naziv_studenta=" + ime ;
queryString += "&prezime=" + prezime + "&sifra_stgrupe=" + stg +
"&sifra_opcine=" + sifra_op + "&sifra_sem=" + sem;
xmlhttp.open("GET", "insertstudent.php" + queryString, true);
xmlhttp.send();
}
32
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Kod Ajax funkcija prvi dio koda se odnosi na detekciju pretraživača, ovaj dio
je već ranije opisan. Funkcija najprije dohvaća vrijednosti iz forme uz pomoć
JavaScript funkcije „getElementById() “. Zatim vrijednosti sprema u odgovarajuće
varijable. Na kraju se stvara varijabla „queryString“ koja sadrži parametre koji će
biti proslijeđeni na stranicu „insertstudent.php“. Za prijenos podataka se koristi
metoda GET. Zahtjev će se odraditi asinkrono jer je zadnji parametar metode
open() označen kao „true“. Nakon što se podaci pošalju na server provjerava se
da li je došlo do neke pogreške. U slučaju da se pogreška dogodila ispisuje se
poruka o pogrešci, a ako je sve u redu poziva se funkcija loadAjaxPage() koja
asinkrono učitava stranicu „student.php“ s novim podacima.
Upis u bazu izvršava PHP skripta „insertstudent.php“. Ova skripta je jako
jednostavna. Najprije je potrebno uspostaviti vezu s bazom podataka. Zatim se
provjerava je li primljen parametar „naziv_studenta“, ako je primljen svi parametri
se spremaju u odgovarajuće varijable. Vrijednosti ovih varijabli upisuju se u bazu
uz pomoć SQL naredbe INSERT INTO. Cijeli kod ove skripte prikazan je u
nastavku.
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['naziv_studenta']))
{
$naziv_studenta = $_GET['naziv_studenta'];
$prezime = $_GET['prezime'];
$sifra_stgrupe =$_GET['sifra_stgrupe'];
$sifra_opcine = $_GET['sifra_opcine'];
$sifra_sem = $_GET['sifra_sem'];
// povezivanje
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
('Error connecting to mysql');
mysql_select_db($dbname);
$sql="INSERT
INTO
student(Ime,Prezime,Studijske_grupe_id,općina_id,semestar_id)
VALUES
('$naziv_studenta','$prezime','$sifra_stgrupe','$sifra_opcine','$sifra_sem')";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
dodavanja
studenta</h2>".mysql_error());
}
?>
33
Razvoj web aplikacija temeljenih na Ajax tehnologiji
4.2.2 Brisanje studenta
Za brisanje studenta koristi se Ajax funkcija „loadAjaxPage“. Ova funkcija
prima dva parametra. Prvi parametar je PHP skripta „student_brisi.php?id=$id“, a
drugi parametar je java funkcija „func_student“. Jako važno je PHP skripti
proslijediti parametar koji sadrži id studenta kojeg je potrebno izbrisati. Ajax
funkcija se aktivira klikom na gumb „Briši“, dio koda je prikazan u nastavku.
echo
"<td>
<input
type='button'
value='Brisi'
onClick=\"javascript:loadAjaxPage('student_brisi.php?id=$id' , func_student);\"
> </td>";
Kada se izvrši PHP skripta „student_brisi.php“ potrebno je ponovno učitati
stranicu „student.php“ s osvježenim podacima. Kako bi se podaci osvježili
automatski poziva se JavaScript funkcija „func_student“. Ova funkcija rekurzivno
poziva Ajax funkciju „loadAjaxPage“, kojoj je prvi parametar „student.php“, dok je
drugi parametar „null“.
function func_student()
{
loadAjaxPage('student.php', null);
}
Brisanje studenta u bazi podataka izvršava PHP skripta „student_brisi.php“.
Ova skripta prima samo jedan parametar „id“ uz pomoć GET metode, zatim taj
parametar sprema u varijablu. Korištenjem SQL naredbe DELETE student se briše
iz baze podataka.
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['id'])) {
$sifra_student
=
$_GET['id'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
$sql="DELETE FROM student WHERE IdStudent=$sifra_student";
$result=mysql_query($sql)
or
die("<h2>Pogreska
brisanja</h2>".mysql_error());
}
('Error
kod
34
Razvoj web aplikacija temeljenih na Ajax tehnologiji
4.2.3 Ažuriranje podataka o studentu
Ideja je da se klikom na gumb „Ažuriraj“ određeni redak pretvori u formu za
unos podataka kao na slici 13.
Unutar forme moguće je promijeniti podatke i klikom na gumb „Potvrdi“ novi
podaci se spremaju u bazu podataka.
Slika 13 Ažuriranje studenta
Kod ovakvog pristupa potrebno je funkciju „IspisStudent()“ napisati tako da
svaki element unutar retka bude jednoznačno određen. Dio koda koji ispisuje
elemente unutar tablice i jednoznačno određuje svakog od njih prikazan je u
nastavku. Varijabla „$id“ jednoznačno određuje svaki redak. Da bi se jednoznačno
odredio svaki element unutar retka potrebno je dodati još jedan dio koji će
jednoznačno odrediti svaki stupac.
$id=$ispisrez['IdStudent'];
echo "<td id='id-". $id ."'>".$ispisrez['IdStudent']."</td>";
echo "<td id='ime-" .$id. "'>".$ispisrez['Ime']."</td>";
echo "<td id='prezime-" .$id. "'>".$ispisrez['Prezime']."</td>";
echo "<td id='grupa-" .$id. "'>".$ispisrez['Naziv_studija']."</td>";
echo "<td id='opcina-" .$id. "'>".$ispisrez['naziv']."</td>";
echo "<td id='semestar-" .$id."'>".$ispisrez['Koji_semestar']."</td>";
35
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Klikom na gumb „Ažuriraj“ aktivira se događaj koji pozove JavaScript
funkciju „az_st(id)“ . Ova funkcija prima kao parametar „id“. Unutar funkcije najprije
se stvara polje u koje će se dodavati objekti. U ovom slučaju dodaje se šest
objekata. Objekt se sastoji od dva dijela:

Naziv objekta

Tip objekta
U ovom slučaju postoje dva tipa objekta, a to su „textbox“ i „listbox“.
Prilikom ažuriranja studenta u objekte tipa „textbox“ spadaju:

Id

Ime

Prezime
Objekti tipa „listbox“ su:

Grupa

Općina

Semestar
Tipovi objekta su važni zbog stvaranja forme. U slučaju da se radi o tipu
„textbox“ stvara se forma za unos teksta, a ako se radi o tipu „listbox“ tada se
korisniku nudi padajući izbornik gdje može izabrati jedan od ponuđenih podataka.
Primjer koda jednog objekta prikazan je u nastavku.
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
Nakon što se stvore objekti i dodaju se u polje stvara se varijabla u koju se
sprema dužina polja. O dužini polja ovisi broj iteracija FOR petlje. U svakom
koraku dohvaća se jedan element i sprema u varijablu „field“. Stvara se nova
varijabla „ x“ u koju se sprema vrijednost elementa prije ažuriranja.
36
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Ukoliko se radi o tipu objekta „textbox“, tada se uz pomoć JavaScript
funkcije „getElementById()“ dohvaća element i na njegovu mjestu se stvara forma
za unos teksta. Ova forma za početnu vrijednost ima vrijednost varijable „x“. Ako
je tip objekta „listbox“, tada se na mjestu odabranog elementa stvara padajući
izbornik umjesto forme za unos teksta. Zatim se pozove Ajax funkcija
„loadAjaxSelect()“ s određenim parametrima.
U svakom koraku petlja provjerava radi li se o posljednjoj iteraciji. Ukoliko
se radi o posljednjoj iteraciji tada se pored zadnjeg elementa dodaje gumb
„Potvrdi“. Klikom na ovaj gumb poziva se funkcija „az_st_send()“.
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++)
{
var field = arr[i];
var x=document.getElementById(field.name + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button' value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-"
+
field.name
+
"-"+id+"'>
</select><input
type='button'
value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
loadAjaxSelect(field.name, id, x);
}
}
else
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' />";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-" + field.name + "-"+id+"'> </select>";
loadAjaxSelect(field.name, id, x);
}}}
37
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Gore spomenuta Ajax funkcija „loadAjaxSelect()“ koristi se za popunjavanje
padajućeg izbornika podacima iz baze. Ova funkcija se poziva samo u slučaju da
je tip objekta „listbox“. Najprije se pozove PHP skripta „ajax_load_select.php“ koja
dohvaća podatke iz baze. Kada stigne odgovor sa servera podaci se preuzimaju u
varijablu „response“. Zatim se stvara polje u koje se spremaju podaci iz varijable
„response“ uz pomoć metode „split()“. Ova metoda služi za razdvajanje stringa u
niz podnizova. Uvjet razdvajanja je znak „\n“. Zatim se ulazi u petlju gdje se dodaju
vrijednosti u padajući izbornik. Dio koda ove funkcije prikazan je u nastavku.
var lb= document.getElementById("edit-" + fieldName +"-"+idx);
var response = xmlhttp.responseText;
var arr = response.split("\n");
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++)
{
var option = document.createElement("option");
var kv_arr = arr[i].split(";");
var id=kv_arr[0];
var naslov=kv_arr[1];
option.text=naslov;
option.value=id;
if(naslov!="" && naslov!=undefined)
{
lb.add(option);
}}}
xmlhttp.open("GET","ajax_load_select.php?name=" + fieldName,true);
xmlhttp.send();
Funkcija „az_st_send(id)“ prima parametar „id“. Na početku stvara polje,
zatim dodaje objekte u to isto polje kao i funkcija „az_st()“. Potrebno je odrediti
duljinu polja zbog broja iteracija FOR petlje. Prije ulaza u petlju stvara se varijabla
„str“ u koju će se spremiti parametri koji će biti proslijeđeni prema PHP skripti.
Sadržaj ove
varijable je u biti drugi dio URL adrese koji se dodaje na
„student_edit.php?“.
38
Razvoj web aplikacija temeljenih na Ajax tehnologiji
U zadnjem dijelu poziva se Ajax funkcija „loadAjaxPage ( )“ koja će pozvati
PHP skriptu i proslijediti joj parametre, zatim osvježiti podatke na ekranu
automatski. Dio koda ove funkcije prikazan u nastavku.
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++)
{
var field= arr[i];
var val=document.getElementById("edit-" +field.name+"-" + id).value;
str+=field.name+"=" + val +"&";
}
loadAjaxPage("student_edit.php?" + str,load_students);
PHP skripta „student_edit.php“ izvršava ažuriranje podataka u bazi. Skripta
prima parametre pomoću metode GET. Parametre je potrebno spremiti u varijable.
Vrijednosti varijabli se spremaju u bazu podataka uz pomoć SQL naredbe
UPDATE. Ova naredba služi za mijenjanje podataka u jednom ili više redaka
određene tablice.
$sifra_studenta = $_GET['id'];
$ime = $_GET['ime'];
$prezime = $_GET['prezime'];
$sifra_sg = $_GET['grupa'];
$sifra_opcine = $_GET['opcina'];
$sifra_semestar = $_GET['semestar'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="UPDATE STUDENT
SET Ime='" . $ime. "',Prezime='" . $prezime .
"',Studijske_grupe_id='" . $sifra_sg . "',Općina_id='" . $sifra_opcine .
"',Semestar_id='" . $sifra_semestar . "' WHERE idStudent='" . $sifra_studenta
."'";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
pronalaska
studenta</h2>".mysql_error());
39
Razvoj web aplikacija temeljenih na Ajax tehnologiji
5 Zaključak
U početku razvoja Web-a sadržaj je bio statičan. Od tada do danas
dogodile su se mnoge promjene. Danas su nezamislive stranice s statičkim
sadržajem. Sadržaj današnjih stranica je dinamičan i interaktivan. Ponekad nije
dovoljno imati interaktivnu stranicu ako je interakcija korisnika i servera spora.
Današnji korisnicu su jako zahtjevni, zbog toga je potrebno maksimalno smanjiti
vrijeme čekanja korisnika na odgovor servera. Kako bi se smanjilo vrijeme čekanja
koristi se Ajax tehnologija.
Uz pomoć Ajax-a komunikacija sa serverom se odvija u pozadini bez
korisnikova znanja. Ovo je uvelike smanjilo vrijeme korisnikovog čekanja. Na ovaj
način korisnici su slobodni izvoditi ostale aktivnosti iako se u pozadini odvija
komunikacija sa serverom.
Praktični primjer u zadnjem dijelu rada jasno pokazuje sve prednosti Ajax
tehnologije. Rezultati bilo kakve korisnikove akcije prikazuju se odmah bez
osvježavanja stranice. U ovom slučaju to su dodavanje, brisanje i ažuriranje
podataka, kao i pozivanje različitih PHP skripti.
Stranice koje koriste Ajax tehnologiju su jako jednostavne za korištenje,
moderne i brze. Teško je pronaći neki izraziti nedostatak stranica koje koriste Ajax
u odnosu na one koje ne koriste.
40
Razvoj web aplikacija temeljenih na Ajax tehnologiji
6 Literatura
[
»Wikipedia,« 10 Svibanj 2014. [Mrežno]. Available:
1] http://en.wikipedia.org/wiki/Web_application. [Pokušaj pristupa 15 Svibanj
2014].
[
»Wikipedia,« 30 Listopad 2013. [Mrežno]. Available:
2] http://hr.wikipedia.org/wiki/HTTP. [Pokušaj pristupa 16 Svibanj 2014].
[
»Wikipedia,« 25 Ožujak 2014. [Mrežno]. Available:
3] http://hr.wikipedia.org/wiki/HTML. [Pokušaj pristupa 16 Svibanj 2014].
[
4]
[
5]
[
W. Willard, HTML, New York, 2009.
L. Lazaris, Jump Start CSS, SitePoint Pty.Ltd, 2013.
»Tutoriali.org,« 2010. [Mrežno]. Available:
6] http://download.tutoriali.org/Tutorials/AJAX_i_JavaScript/JS_HTML_DOM.pdf.
[Pokušaj pristupa 17 Svibanj 2014].
[
7]
[
K. Tatroe, P. MacIntyre i R. Lerdorf, Programming PHP, O'Reilly, 2013.
»Wikipedia,« 24 Svibanj 2014. [Mrežno]. Available:
8] http://hr.wikipedia.org/wiki/MySQL. [Pokušaj pristupa 28 Svibanj 2014].
[
»Wikipedia,« 22 Svibanj 2014. [Mrežno]. Available:
9] http://en.wikipedia.org/wiki/Ajax_(programming). [Pokušaj pristupa 28 Svibanj
2014].
[
»Archive,« 18 Veljača 2005. [Mrežno]. Available:
10 https://web.archive.org/web/20080702075113/http://www.adaptivepath.com/ide
]
as/essays/archives/000385.php. [Pokušaj pristupa 18 Svibanj 2014].
41
Razvoj web aplikacija temeljenih na Ajax tehnologiji
[
»Tutoriali,« [Mrežno]. Available:
11 http://download.tutoriali.org/Tutorials/AJAX_i_JavaScript/AJAX_]
_IT_tehnologije.pdf. [Pokušaj pristupa 19 Svibanj 2014].
[
M. Stepp, J. Miller i V. Kirst, »Web Programming Step by Step,« 26
12 Kolovoz 2012. [Mrežno]. Available: http://www.webstepbook.com/supplements]
2ed/slides/chapter12-ajax-xml-json.shtml#. [Pokušaj pristupa 22 Svibanj 2014].
[
13
L. Babin, Beginning Ajax with PHP, Apress, 2007.
]
[
»Wikipedia,« 8 Veljača 2014. [Mrežno]. Available:
14 http://sr.wikipedia.org/wiki/XMLHttpRequest#onreadystatechange_oslu.C5.A1ki
]
va.C4.8D_doga.C4.91aja. [Pokušaj pristupa 20 Svibanj 2014].
42
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Dodatak A: Popis slika
Slika 1 Dvoslojna arhitektura web aplikacija ............................................ 3
Slika 2 CSS struktura ............................................................................... 5
Slika 3 Model baze podataka ................................................................. 11
Slika 4 Tradicionalne i moderne web aplikacije ..................................... 13
Slika 5 Sinkroni način rada web aplikacije ............................................. 14
Slika 6 Asinkroni način rada web aplikacije ........................................... 15
Slika 7 Izvršavanje tipičnog AJAX zahtjeva ........................................... 16
Slika 8 Sučelje za prijavu na sustav ....................................................... 24
Slika 9 Sučelje studenta......................................................................... 25
Slika 10 Sučelje profesora ..................................................................... 25
Slika 11 Sučelje administratora.............................................................. 26
Slika 12 Relacijski model baze podataka ............................................... 28
Slika 13 Ažuriranje studenta .................................................................. 35
43
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Dodatak B: Popis tablica
Tablica 1 Kodovi HTTP statusa ............................................................ 17
Tablica 2 Moguće vrijednosti readyState svojstva ................................ 21
Tablica 3 Tablica Student ..................................................................... 29
Tablica 4 Tablica Predmeti ................................................................... 30
Tablica 5 Tablica Upisani predmeti ....................................................... 30
Tablica 6 Tablica korisnici ..................................................................... 31
44
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Dodatak C: JavaScript funkcije
function change(){
var hash = location.hash;
var myhash = hash.substr(1);
}
window.onhashchange=change();
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
function loadAjaxPage(curPage , func)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("myDiv").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;if(func!=
null)
{
func();
}
}
}
xmlhttp.open("GET",curPage,true);
xmlhttp.send();
}
function loadAjaxSelect(fieldName, idx, selValue)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
45
Razvoj web aplikacija temeljenih na Ajax tehnologiji
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("myDiv").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var lb= document.getElementById("edit-" + fieldName +"-"+idx);
var response = xmlhttp.responseText;
var selInd=0;
var arr = response.split("\n");
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var option = document.createElement("option");
var kv_arr = arr[i].split(";");
var id=kv_arr[0];
var naslov=kv_arr[1];
option.text=naslov;
option.value=id;
if(option.text==selValue)
{
option.selected=true;
}
if(naslov!="" && naslov!=undefined)
{
lb.add(option);
}}}}
xmlhttp.open("GET","ajax_load_select.php?name=" + fieldName,true);
xmlhttp.send();
}
function func_student()
{
loadAjaxPage('student.php', null);
}
function func_predmet()
{
loadAjaxPage('predmeti.php', null);
}
function func_profesor()
{
loadAjaxPage('profesor.php', null);}^
function func_ispitnirok()
{
loadAjaxPage('ispitni_rokovi.php', null);
}
function func_drzava()
46
Razvoj web aplikacija temeljenih na Ajax tehnologiji
{
loadAjaxPage('drzava.php', null);
}
function func_opcina()
{
loadAjaxPage('opcina.php', null);
}
function func_zupanija()
{
loadAjaxPage('zupanija.php', null);
}
function func_korisnici()
{
loadAjaxPage('korisnici.php', null);
}
function func_semestar()
{
loadAjaxPage('semestar.php', null);
}
function func_studgr()
{
loadAjaxPage('studijske_grupe.php', null);
}
function func_odjava()
{
loadAjaxPage('odjava_ispita.php', null);
}
function func_upispredmeta()
{
var first = getUrlVars()["student"];
loadAjaxPage('upis_predmet.php?id='+first, null);
}
function func_pregledup()
{
loadAjaxPage('pregled_upisanih_predmeta.php', null);
}
function ajaxUpisPredmet()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
47
Razvoj web aplikacija temeljenih na Ajax tehnologiji
{
if(xmlhttp.status==404)
{
document.getElementById("predmet").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("predmeti.php",null);
}
}
var naziv=document.getElementById('naziv_predmeta').value;
var ects=document.getElementById('ects').value;
var stg=document.getElementById('sifra_prof').value;
var queryString = "?naziv_predmet=" + naziv ;
queryString += "&ects=" + ects + "&sifra_prof=" + stg;
xmlhttp.open("GET", "insertpredmet.php" + queryString, true);
xmlhttp.send();
}
function ajaxUpisStudent()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("novi").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("student.php",null);
}}
var ime=document.getElementById('naziv_studenta').value;
var prezime=document.getElementById('prezime').value;
var stg=document.getElementById('sifra_stgrupe').value;
var sifra_op=document.getElementById('sifra_opcine').value;
var sem=document.getElementById('sifra_sem').value;
var queryString = "?naziv_studenta=" + ime ;
queryString +=
"&prezime=" + prezime + "&sifra_stgrupe="
"&sifra_opcine=" + sifra_op + "&sifra_sem=" + sem;
xmlhttp.open("GET", "insertstudent.php" + queryString, true);
xmlhttp.send();
}
+
stg
+
48
Razvoj web aplikacija temeljenih na Ajax tehnologiji
function ajaxUpisProfesor()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("profesor_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("profesor.php",null);
} }
var naziv=document.getElementById('naziv_prof').value;
var prezime=document.getElementById('prezime_prof').value;
var titula=document.getElementById('titula_prof').value;
var queryString = "?naziv_prof=" + naziv ;
queryString += "&prezime_prof=" + prezime + "&titula_prof=" + titula;
xmlhttp.open("GET", "insertprofesor.php" + queryString, true);
xmlhttp.send();
}
function ajaxUpisRok()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("ispitni_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("ispitni_rokovi.php",null);
} }
var datum=document.getElementById('datum_rok').value;
var pred=document.getElementById('sifra_pred').value;
49
Razvoj web aplikacija temeljenih na Ajax tehnologiji
var queryString = "?datum_rok=" + datum ;
queryString += "&sifra_pred=" + pred;
xmlhttp.open("GET", "insertrok.php" + queryString, true);
xmlhttp.send();
}
function ajaxUpisDrzava()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("drzava_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("drzava.php",null);
} }
var drzava=document.getElementById('naziv_drzave').value;
var queryString = "?naziv_drzave=" + drzava ;
xmlhttp.open("GET", "insertdrzava.php" + queryString, true);
xmlhttp.send();
}
function ajaxUpisZupanija()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("zupanija_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("zupanija.php",null);
} }
var naziv=document.getElementById('naziv_zup').value;
50
Razvoj web aplikacija temeljenih na Ajax tehnologiji
var drzava=document.getElementById('sifra_drz').value;
var queryString = "?naziv_zup=" + naziv ;
queryString += "&sifra_drz=" + drzava;
xmlhttp.open("GET", "insertzupanija.php" + queryString, true);
xmlhttp.send();
}
function ajaxUpisOpcina()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("opcina_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("opcina.php",null);
}
}
var naziv=document.getElementById('naziv_opcine').value;
var zupanija=document.getElementById('sifra_zupanije').value;
var queryString = "?naziv_opcine=" + naziv ;
queryString += "&sifra_zupanije=" + zupanija;
xmlhttp.open("GET", "insertopcina.php" + queryString, true);
xmlhttp.send();
}
function ajaxUpisKorisnici()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("korisnik_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
51
Razvoj web aplikacija temeljenih na Ajax tehnologiji
{
loadAjaxPage("korisnici.php",null);
} }
var naziv=document.getElementById('kor_ime').value;
var lozinka=document.getElementById('lozinka').value;
var tip=document.getElementById('tip_kor').value;
var student=document.getElementById('sifra_kor_std').value;
var profesor=document.getElementById('sifra_kor_prof').value;
var queryString = "?kor_ime=" + naziv ;
queryString +=
"&lozinka=" + lozinka + "&tip_kor=" +
"&sifra_kor_std=" + student + "&sifra_kor_prof=" + profesor;
xmlhttp.open("GET", "insertkorisnik.php" + queryString, true);
xmlhttp.send();
}
tip
+
function ajaxUpisSem()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("semestar_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("semestar.php",null);
} }
var naziv=document.getElementById('naziv_sem').value;
var queryString = "?naziv_sem=" + naziv ;
xmlhttp.open("GET", "insertsemestar.php" + queryString, true);
xmlhttp.send();
}
function ajaxUpisStg()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//kad se dobije odgovor:
52
Razvoj web aplikacija temeljenih na Ajax tehnologiji
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.status==404)
{
document.getElementById("stg_otvori").innerHTML="Pogreška!!";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
loadAjaxPage("studijske_grupe.php",null);
} }
var naziv=document.getElementById('naziv_sg').value;
var queryString = "?naziv_sg=" + naziv ;
xmlhttp.open("GET", "insertsg.php" + queryString, true);
xmlhttp.send();
}
function provjera_form()
{
var x=document.forms["form_log"]["login-username"].value;
if (x==null || x=="")
{
alert("Greška,unesite korisničko ime");
return false;
}
var y=document.forms["form_log"]["login-password"].value;
if (y==null || y=="")
{
alert("Greška,unesite lozinku!");
return false;
}
}
function az_st(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="ime";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="prezime";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="grupa";
f.type="listbox";
arr.push(f);
var f =new Object();
53
Razvoj web aplikacija temeljenih na Ajax tehnologiji
f.name="opcina";
f.type="listbox";
arr.push(f);
var f =new Object();
f.name="semestar";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field.name + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button' value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-"
+
field.name
+
"-"+id+"'>
</select><input
type='button'
value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
loadAjaxSelect(field.name, id, x);
}}
else
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' />";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-" + field.name + "-"+id+"' > </select>";
loadAjaxSelect(field.name, id, x);
}}
var val=document.getElementById("edit-" +field.name+"-" + id).value;
}}
function az_st_send(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="ime";
f.type="textbox";
arr.push(f);
54
Razvoj web aplikacija temeljenih na Ajax tehnologiji
var f =new Object();
f.name="prezime";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="grupa";
f.type="listbox";
arr.push(f);
var f =new Object();
f.name="opcina";
f.type="listbox";
arr.push(f);
var f =new Object();
f.name="semestar";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field= arr[i];
var val=document.getElementById("edit-" +field.name+"-" + id).value;
str+=field.name+"=" + val +"&";
}
loadAjaxPage("student_edit.php?" + str,load_students);
}
function az_predmet(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="ects";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="prof";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++)
{
55
Razvoj web aplikacija temeljenih na Ajax tehnologiji
var field = arr[i];
var x=document.getElementById(field.name + "-" + id).innerHTML;
/*
if(i==(arrayLength-1))
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button' value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
}
else
if (i!=(arrayLength-1))
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' />";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-" + field.name + "-"+id+"'> </select>";
loadAjaxSelect(field.name, id, x);
}}
else
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button'
value='Potvrdi'
onClick=\"javascript:az_predmet_send("
+id
+");\">";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-"
+
field.name
+
"-"+id+"'>
</select><input
type='button'
value='Potvrdi' onClick=\"javascript:az_predmet_send(" +id +");\">";
loadAjaxSelect(field.name, id, x);
}}
var val=document.getElementById("edit-" +field.name+"-" + id).value;
}}
function az_predmet_send(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="textbox";
arr.push(f);
var f =new Object();
56
Razvoj web aplikacija temeljenih na Ajax tehnologiji
f.name="ects";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="prof";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field.name+"-" + id).value;
str+=field.name+"=" + val +"&";
}
loadAjaxPage("predmet_edit.php?" + str,func_predmet);
}
function az_ir(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="listbox";
arr.push(f);
var f =new Object();
f.name="datum";
f.type="textbox";
arr.push(f);
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field.name + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button' value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
}
else
if (i!=(arrayLength-1))
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' />";
}
else if(field.type=="listbox")
57
Razvoj web aplikacija temeljenih na Ajax tehnologiji
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-" + field.name + "-"+id+"'> </select>";
loadAjaxSelect(field.name, id, x);
}}
else
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button' value='Potvrdi' onClick=\"javascript:az_ir_send(" +id +");\">";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-"
+
field.name
+
"-"+id+"'>
</select><input
type='button'
value='Potvrdi' onClick=\"javascript:az_ir_send(" +id +");\">";
loadAjaxSelect(field.name, id, x);
}}
var val=document.getElementById("edit-" +field.name+"-" + id).value;
}}
function az_ir_send(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="listbox";
arr.push(f);
var f =new Object();
f.name="datum";
f.type="textbox";
arr.push(f);
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field.name+"-" + id).value;
str+=field.name+"=" + val +"&";
}
loadAjaxPage("ispitni_rokovi_edit.php?" + str,func_ispitnirok);
}
function az_zupanija(id)
{
var arr=new Array();
58
Razvoj web aplikacija temeljenih na Ajax tehnologiji
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="drzava";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field.name + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button' value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
}
else
if (i!=(arrayLength-1))
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' />";
}else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-" + field.name + "-"+id+"'> </select>";
loadAjaxSelect(field.name, id, x);
}}
else
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button'
value='Potvrdi'
onClick=\"javascript:az_zupanija_send("
+id
+");\">";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-"
+
field.name
+
"-"+id+"'>
</select><input
type='button'
value='Potvrdi' onClick=\"javascript:az_zupanija_send(" +id +");\">";
loadAjaxSelect(field.name, id, x);
}}
var val=document.getElementById("edit-" +field.name+"-" + id).value;
}}
59
Razvoj web aplikacija temeljenih na Ajax tehnologiji
function az_zupanija_send(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="drzava";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field.name+"-" + id).value;
str+=field.name+"=" + val +"&";
}
loadAjaxPage("zupanija_edit.php?" + str,func_zupanija);
}
function az_opcina(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="zupanija";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field.name + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
60
Razvoj web aplikacija temeljenih na Ajax tehnologiji
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button' value='Potvrdi' onClick=\"javascript:az_st_send(" +id +");\">";
}
else
if (i!=(arrayLength-1))
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' />";
}
else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-" + field.name + "-"+id+"'> </select>";
loadAjaxSelect(field.name, id, x);
}}
else
{
if(field.type=="textbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<input
type='text' value='" + x + "' id='edit-" + field.name+"-" + id + "' /><input
type='button'
value='Potvrdi'
onClick=\"javascript:az_opcina_send("
+id
+");\">";
}else if(field.type=="listbox")
{
document.getElementById( field.name + "-" + id).innerHTML="<select
id='edit-"
+
field.name
+
"-"+id+"'>
</select><input
type='button'
value='Potvrdi' onClick=\"javascript:az_opcina_send(" +id +");\">";
loadAjaxSelect(field.name, id, x);
}}
var val=document.getElementById("edit-" +field.name+"-" + id).value;
}}
function az_opcina_send(id)
{
var arr=new Array();
var f =new Object();
f.name="id";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="naziv";
f.type="textbox";
arr.push(f);
var f =new Object();
f.name="zupanija";
f.type="listbox";
arr.push(f);
var arrayLength = arr.length;
var str="";
61
Razvoj web aplikacija temeljenih na Ajax tehnologiji
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field.name+"-" + id).value;
str+=field.name+"=" + val +"&";
}
loadAjaxPage("opcina_edit.php?" + str,func_opcina);
}
function az_pr(id)
{
var arr=new Array();
arr.push("id");
arr.push("titula");
arr.push("ime");
arr.push("prezime");
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x +
"' id='edit-" + field+"-" + id + "' /><input type='button'
value='Potvrdi' onClick=\"javascript:az_pr_send(" +id +");\">";
}
else
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x + "' id='edit-" + field+"-" + id + "' />";
}
var val=document.getElementById("edit-" +field+"-" + id).value;
}}
function az_pr_send(id)
{
var arr=new Array();
arr.push("id");
arr.push("titula");
arr.push("ime");
arr.push("prezime");
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field+"-" + id).value;
str+=field+"=" + val +"&";
}
loadAjaxPage("profesor_edit.php?" + str,func_profesor);
}
function az_korisnici(id)
{
var arr=new Array();
arr.push("id");
62
Razvoj web aplikacija temeljenih na Ajax tehnologiji
arr.push("korisnicko_ime");
arr.push("lozinka");
arr.push("tip");
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x +
"' id='edit-" + field+"-" + id + "' /><input type='button'
value='Potvrdi' onClick=\"javascript:az_korisnici_send(" +id +");\">";
}
else
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x + "' id='edit-" + field+"-" + id + "' />";
}
var val=document.getElementById("edit-" +field+"-" + id).value;
}}
function az_korisnici_send(id)
{
var arr=new Array();
arr.push("id");
arr.push("korisnicko_ime");
arr.push("lozinka");
arr.push("tip");
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field+"-" + id).value;
str+=field+"=" + val +"&";
}
loadAjaxPage("korisnici_edit.php?" + str,func_korisnici);
}
function load_students()
{
loadAjaxPage("student.php",null);
}
function az_drzava(id)
{
var arr=new Array();
arr.push("id");
arr.push("naziv");
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
63
Razvoj web aplikacija temeljenih na Ajax tehnologiji
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x +
"' id='edit-" + field+"-" + id + "' /><input type='button'
value='Potvrdi' onClick=\"javascript:az_drzava_send(" +id +");\">";
}
else
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x + "' id='edit-" + field+"-" + id + "' />";
}
var val=document.getElementById("edit-" +field+"-" + id).value;
}}
function az_drzava_send(id)
{
var arr=new Array();
arr.push("id");
arr.push("naziv");
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field+"-" + id).value;
str+=field+"=" + val +"&";
}
loadAjaxPage("drzava_edit.php?" + str,func_drzava);
}
function az_semestar(id)
{
var arr=new Array();
arr.push("id");
arr.push("naziv");
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x +
"' id='edit-" + field+"-" + id + "' /><input type='button'
value='Potvrdi' onClick=\"javascript:az_semestar_send(" +id +");\">";
}
else
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x + "' id='edit-" + field+"-" + id + "' />";
}
var val=document.getElementById("edit-" +field+"-" + id).value;
}}
function az_semestar_send(id)
{
var arr=new Array();
arr.push("id");
arr.push("naziv");
64
Razvoj web aplikacija temeljenih na Ajax tehnologiji
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field+"-" + id).value;
str+=field+"=" + val +"&";
}
loadAjaxPage("semestar_edit.php?" + str,func_semestar);
}
function az_grupa(id)
{
var arr=new Array();
arr.push("id");
arr.push("naziv");
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var x=document.getElementById(field + "-" + id).innerHTML;
if(i==(arrayLength-1))
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x +
"' id='edit-" + field+"-" + id + "' /><input type='button'
value='Potvrdi' onClick=\"javascript:az_grupa_send(" +id +");\">";
}
else
{
document.getElementById( field + "-" + id).innerHTML="<input type='text'
value='" + x + "' id='edit-" + field+"-" + id + "' />";
}
var val=document.getElementById("edit-" +field+"-" + id).value;
}}
function az_grupa_send(id)
{
var arr=new Array();
arr.push("id");
arr.push("naziv");
var arrayLength = arr.length;
var str="";
for (var i = 0; i < arrayLength; i++) {
var field = arr[i];
var val=document.getElementById("edit-" +field+"-" + id).value;
str+=field+"=" + val +"&";
}
loadAjaxPage("studijskagr_edit.php?" + str,func_studgr);
}
65
Razvoj web aplikacija temeljenih na Ajax tehnologiji
Dodatak D: Izabrane PHP skripte
//head.php
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stil/css/main.css" rel="stylesheet" type="text/css" />
<script src="java_funkcije.js"></script>
<title>ISSFPMOZ</title>
<style type="text/css">
</style>
</head>
<body>
//header.php
<div id="head-container">
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$korisnik=$_COOKIE['uname'];
$razina=$_COOKIE['razina'];
echo "Prijavljeni ste kao:
pristupa je: <b>$razina</b>";
}
?>
<div id="header">
<h1> INFORMACIJSKI SUSTAV</h1>
</div>
</div>
<b><a>$korisnik</a></b><br>
Vasa
razina
//footer
<div id="footer">
<div id="copyright"> Copyright @FPMOZ 2013.
</div>
</div>
</body>
</html>
//indeks.php
<?php
require("konekcija.php");
include("head.php");
include("header.php");
include("izbornik.php");
?>
66
Razvoj web aplikacija temeljenih na Ajax tehnologiji
<div id="content-container" >
<div id="content-container2">
<div id="content-container3">
<div id="content">
</div>
<div id="aside1">
<script type='text/javascript' src='java_funkcije.js'>
</script>
<h3>Informacijski sustav FPMOZ-a</h3>
<div id="login">
<form
name="form_log"
action="prijava.php"
method="POST"
onsubmit="return provjera_form()">
<fieldset>
<p>
<label for="login-username"><b>Username</b></label><br>
<input type="text" name="username" id="login-username" autofocus />
</p>
<p>
<label for="login-password"><b>Password</b></label><br>
<input type="password" name="password" id="login-password" />
</p>
<input type="submit" class="button" value="PRIJAVA" />
</fieldset>
</form>
</div> <!-- end login -->
</div>
</div>
</div>
</div>
<?php
include("footer.php");
?>
//index2.php
<?php
require("konekcija.php");
include("head.php");
include("header.php");
include("izbornik.php");
?>
<div >
<script type='text/javascript' src='java_funkcije.js'>
</script>
<div id="myDiv">
</div>
</div>
<?php
include("footer.php");
?>
67
Razvoj web aplikacija temeljenih na Ajax tehnologiji
//izbornik.php
<?php
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
?>
<div id="tabs">
<div class="box">
<ul>
<li><li><a
onClick="javascript:document.getElementById('myDiv').innerHTML='';">POČETNA</a>
</li>
<?php
error_reporting (E_ALL ^ E_NOTICE);
if ($razina=='A'){
?>
<li><a onClick="javascript: document.location.hash = 'student.php';
loadAjaxPage('student.php');" >STUDENT</a></li>
<li><a onClick="javascript: document.location.hash = 'predmeti.php' ;
loadAjaxPage('predmeti.php');">PREDMET</a></li>
<li><a onClick="javascript: document.location.hash = 'profesor.php' ;
loadAjaxPage('profesor.php');">PROFESOR</a></li>
<li><a onClick="javascript: document.location.hash = 'ispitni_rokovi.php'
; loadAjaxPage('ispitni_rokovi.php');">ISPITNI ROKOVI</a></li>
<li><a onClick="javascript: document.location.hash = 'drzava.php' ;
loadAjaxPage('drzava.php');">DRŽAVA</a></li>
<li><a onClick="javascript: document.location.hash = 'zupanija.php' ;
loadAjaxPage('zupanija.php');">ŽUPANIJA</a></li>
<li><a onClick="javascript: document.location.hash = 'opcina.php' ;
loadAjaxPage('opcina.php');">OPĆINA</a></li>
<li><a onClick="javascript: document.location.hash = 'korisnici.php' ;
loadAjaxPage('korisnici.php');">KORISNICI</a></li>
<li><a onClick="javascript: document.location.hash = 'semestar.php' ;
loadAjaxPage('semestar.php');">SEMESTAR</a></li>
<li><a
onClick="javascript:
document.location.hash
=
'studijske_grupe.php'
;
loadAjaxPage('studijske_grupe.php');">STUDIJSKE
GRUPE</a></li>
<li><a href="logout.php">ODJAVA</a></li>
<?php }else if ($razina=='S'){
?>
<li><a onClick="javascript: document.location.hash = 'prijava_ispita.php'
; loadAjaxPage('prijava_ispita.php');">PRIJAVA ISPITA</a></li>
<li><a onClick="javascript: document.location.hash = 'odjava_ispita.php'
; loadAjaxPage('odjava_ispita.php');">ODJAVA ISPITA</a></li>
<li><a
onClick="javascript:
document.location.hash
=
'ispitni_rokovi_pocetna.php'
;
loadAjaxPage('ispitni_rokovi_pocetna.php');">ISPITNI ROKOVI</a></li>
<li><a href="logout.php">ODJAVA</a></li>
<?php
}
68
Razvoj web aplikacija temeljenih na Ajax tehnologiji
else if ($razina=='P'){
?>
<li><a
onClick="javascript:
document.location.hash
=
'ispitni_rokovi_pocetna.php'
;
loadAjaxPage('ispitni_rokovi_pocetna.php');">ISPITNI ROKOVI</a></li>
<li><a
onClick="javascript:
document.location.hash
=
'ocjene_izbor_predmet.php'
;
loadAjaxPage('ocjene_izbor_predmet.php');">UNOS
OCJENA</a></li>
<li><a href="logout.php">ODJAVA</a></li>
<?php
}
else {
?>
<li><a
onClick="javascript:
document.location.hash
=
'ispitni_rokovi_pocetna.php'
;
loadAjaxPage('ispitni_rokovi_pocetna.php');">ISPITNI ROKOVI</a></li>
<li><a href="prijava.php">PRIJAVA</a></li>
<?php
}
?>
</ul>
</div>
</div>
//konekcija.php
<?php
//konfiguracija baze podataka
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'isfpmoz';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or
connecting to mysql');
mysql_select_db($dbname);
mysql_query("SET NAMES utf8");
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION='utf8_unicode_ci'");
?>
die
('Error
die
('Error
//prijava.php
<?php
include("head.php");
include("header.php");
require("konekcija.php");
function CheckLogin($username,$password){
global $dbhost, $dbuser , $dbpass, $dbname;
// povezivanje
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
connecting to mysql');
mysql_select_db($dbname,$conn);
$db_selected = mysql_select_db($dbname, $conn);
if (!$db_selected) {
or
69
Razvoj web aplikacija temeljenih na Ajax tehnologiji
die ('Ne mogu se spojiti na bazu: ' . mysql_error());
}
$sql="SELECT * FROM korisnici where Korisnicko_ime='$username' AND
Lozinka='$password'";
$result=mysql_query($sql) or die("<br>".$sql."<br/><br/>".mysql_error());
$num_rows=0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
//printf("uSERNAME:
%s
lOZINKA:
%s",
$row["Korisnicko_ime"],
$row["Lozinka"]);
$num_rows++;
}
mysql_free_result($result);
if ($num_rows >= 1) {
return true;
}
else {
return false;
}
}
function ReturnUserData($username,$password){
global $dbhost, $dbuser , $dbpass, $dbname;
// povezivanje
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="SELECT
Korisnicko_ime,
Tip_korisnika
FROM
korisnici
where
Korisnicko_ime='$username' AND Lozinka='$password'";
$result=mysql_query($sql) or die("<br>".$sql."<br/><br/>".mysql_error());
$rez=array();
while($ispisrez = mysql_fetch_array($result)){
//print_r($ispisrez);
$rez=$ispisrez;
}
return $rez;
}
?>
<div id="content-container" >
<div id="content-container2">
<div id="content-container3">
<div id="content">
<div id="aside">
<h3>
Provjeravamo prijavu...
</h3>
<p>
<?php
if (isset($_POST["username"])||isset($_POST["password"])){
$username=$_POST["username"];
$password=$_POST["password"];
$postoji=CheckLogin($username,$password);
if ($postoji){
echo "<i>Postoji korisnik s navednim podacima.</i><br>";
echo "<p><a href=\"index2.php\">Naprijed</a></p>";
$rez=array();
$uname="";
70
Razvoj web aplikacija temeljenih na Ajax tehnologiji
$razina=0;
ReturnUserData($username,$password);
$rez=ReturnUserData($username,$password);
//print_r($rez); //ovo je samo za provjeru da vidite kao izgleda polje
list($uname,$razina)=$rez;
setcookie('uname', $uname, time()+31800,'/');
setcookie('razina', $razina, time()+31800,'/');
//print_r($_COOKIE); //ovo je samo za provjeru da vidite kao izgleda
polje
echo "<b>USPJEŠNA PRIJAVA</b><br>";
echo "<i>Postavljeni podaci o prijavi.</i><br>";
}
else {
echo "Ne postoji korisnik s navednim podacima<br>";
echo
"<p><a
href=\"index.php\">Kliknite
ovdje
prijavu...</a></p>";
}
}
else {
echo
"<p><a
href=\"index2.php\">Kliknite
ovdje
formu...</a></p>";
}
?>
</p>
</div>
</div>
</div>
</div>
</div>
<?php
include("footer.php");
?>
za
za
ponovnu
login
//logout.php
<?php
include("header.php");
include("head.php");
?>
<div id="content-container">
<div id="content-container2">
<div id="content-container3">
<div id="content">
<div id="aside">
<h3>
Odjava...
</h3>
<p>
<?php
if (isset($_COOKIE['uname'])){
setcookie('uname', "", time()-36000,'/');
echo "Odjavili ste se....";
}
echo
"<p><a
href=\"index.php\">Kliknite
prijavu...</a></p>";
?>
</p>
ovdje
za
ponovnu
71
Razvoj web aplikacija temeljenih na Ajax tehnologiji
</div>
</div>
</div>
</div>
</div>
<?php
include("footer.php");
?>
//ajax_load_select.php
<?php
header('Content-Type: text/plain; charset=utf-8');
require("konekcija.php");
$name=$_GET['name'];
$conn2 = mysql_connect($dbhost, $dbuser, $dbpass)
connecting to mysql');
mysql_select_db($dbname);
mysql_query("SET NAMES utf8");
or
die
('Error
if($name=="grupa")
{
$sql2="SELECT * FROM studijske_grupe";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
$id=$ispisrez2['idStudijske_grupe'];
$naslov=$ispisrez2['Naziv_studija'];
if(trim($id)=="") continue;
if(trim($naslov)=="") continue;
echo $id.";".$naslov."\n";
}}
else if($name=="opcina")
{
$sql2="SELECT * FROM općina";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
$id=$ispisrez2['idOpćina'];
$naslov=$ispisrez2['naziv'];
if(trim($id)=="") continue;
if(trim($naslov)=="") continue;
echo $id.";".$naslov."\n";
}}
else if($name=="semestar")
{
$sql2="SELECT * FROM semestar";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
$id=$ispisrez2['idSemestar'];
$naslov=$ispisrez2['Koji_semestar'];
if(trim($id)=="") continue;
if(trim($naslov)=="") continue;
echo $id.";".$naslov."\n";
}}
72
Razvoj web aplikacija temeljenih na Ajax tehnologiji
else if($name=="prof")
{
$sql2="SELECT * FROM profesor";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
$id=$ispisrez2['idProfesor'];
$ime=$ispisrez2['Ime'];
$naslov=$ispisrez2['Prezime'];
if(trim($id)=="") continue;
if(trim($naslov)=="") continue;
echo $id.";".$ime." ".$naslov."\n";
}}
else if($name=="naziv")
{
$sql2="SELECT * FROM predmeti";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
$id=$ispisrez2['idPredmeti'];
$naslov=$ispisrez2['Naziv_predmeta'];
if(trim($id)=="") continue;
if(trim($naslov)=="") continue;
echo $id.";".$naslov."\n";
}}
else if($name=="drzava")
{
$sql2="SELECT * FROM država";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
$id=$ispisrez2['idDržava'];
$naslov=$ispisrez2['Naziv'];
if(trim($id)=="") continue;
if(trim($naslov)=="") continue;
echo $id.";".$naslov."\n";
}}
else if($name=="zupanija")
{
$sql2="SELECT * FROM županija";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
$id=$ispisrez2['idŽupanija'];
$naslov=$ispisrez2['Naziv'];
if(trim($id)=="") continue;
if(trim($naslov)=="") continue;
echo $id.";".$naslov."\n";
}}
?>
73
Razvoj web aplikacija temeljenih na Ajax tehnologiji
//korisnici.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
function IspisKorisnici(){
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled korisnika</h2>";
$sql="SELECT K.* FROM KORISNICI K ORDER BY 1";
$result=mysql_query($sql);
echo "<table class=\"sample\"><tr><th>SIFRA KORISNIKA</th><th>KORISNIČKO
IME</th><th>LOZINKA</th><th>RAZINA</th></th></tr>";
while($ispisrez = mysql_fetch_array($result)){
$id=$ispisrez['id_korisnici'];
echo "<tr>";
echo "<td id='id-". $id ."'>".$ispisrez['id_korisnici']."</td>";
echo
"<td
id='korisnicko_ime-".
$id
."'>".$ispisrez['Korisnicko_ime']."</td>";
echo "<td id='lozinka-". $id ."'>".$ispisrez['Lozinka']."</td>";
echo "<td id='tip-". $id ."'>".$ispisrez['Tip_korisnika']."</td>";
echo
"<td><input
type='button'
value='Brisi'
onClick=\"javascript:loadAjaxPage('korisnici_brisi.php?id=$id'
,
func_korisnici);\"></td>";
echo
"<td><input
type='button'
value='Azuriraj'
onClick='az_korisnici($id)'></td>";
echo "</tr>";
// zatvaranje while petlje
}
//zatvaranje
mysql_close($conn);
echo "</table>";
}
?>
<div >
<?php
IspisKorisnici()
?>
</div>
<input
type='button'
value='Dodaj'
onClick="document.getElementById('korisnik_otvori').style.display='block' ;" />
<div id="korisnik_otvori" style='display:none;'>
<form method="GET">
<span>KORISNIČKO IME: <input type="text" id="kor_ime"><span>
<span>LOZINKA: <input type="text" id="lozinka"><span>
<span>TIP KORISNIKA: <input type="text" id="tip_kor"><span>
74
Razvoj web aplikacija temeljenih na Ajax tehnologiji
<span>
AKO JE KORISNIK STUDENT:
<select id="sifra_kor_std">
<option value="odabir">Odaberite korisnika</option>
<?php
// povezivanje
$conn2 = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled studenata</h2>";
mysql_query("SET NAMES utf8");
$sql2="SELECT * FROM STUDENT ORDER BY 1";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
echo "<option value=\"".$ispisrez2['idStudent']."\">".$ispisrez2['Ime']."
".$ispisrez2['Prezime']."</option>";
// zatvaranje while petlje
}
?>
</select>
<span>
AKO JE KORISNIK PROFESOR:
<select id="sifra_kor_prof">
<option value="odabir">Odaberite korisnika</option>
<?php
// povezivanje
$conn2 = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled profesora</h2>";
mysql_query("SET NAMES utf8");
$sql2="SELECT * FROM PROFESOR ORDER BY 1";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
echo
"<option
value=\"".$ispisrez2['idProfesor']."\">".$ispisrez2['Ime']."
".$ispisrez2['Prezime']."</option>";
// zatvaranje while petlje
}
?>
</select>
<span>
<input
type="button"
name="posalji"
value="Dodaj"
onclick="ajaxUpisKorisnici()"><br>
</form></div>
//korisnici_brisi.php
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
75
Razvoj web aplikacija temeljenih na Ajax tehnologiji
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['id'])) {
$sifra_kor=$_GET['id'];
// povezivanje
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
$sql="DELETE FROM korisnici WHERE id_korisnici=$sifra_kor";
$result=mysql_query($sql)
or
die("<h2>Pogreska
brisanja</h2>".mysql_error());
}
?>
('Error
kod
//korisnici_edit.php
<?php
require("konekcija.php");
include("head.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
?>
<?php
error_reporting(E_ALL ^ E_NOTICE);
$sifra_korisnika=$_GET['id'];
$naziv_kime=$_GET['korisnicko_ime'];
$lozinka=$_GET['lozinka'];
$tip =
$_GET['tip'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="UPDATE
KORISNICI
SET
Korisnicko_ime='"
.
$naziv_kime.
"',Lozinka='" . $lozinka. "',Tip_korisnika='" . $tip. "' WHERE id_korisnici='"
. $sifra_korisnika ."'";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
pronalaska
države</h2>".mysql_error());
//insertkorisnik.php
<?php
require("konekcija.php");
include("head.php");
include("header.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
?>
<?php
76
Razvoj web aplikacija temeljenih na Ajax tehnologiji
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['kor_ime'])) {
$naziv_kor=$_GET['kor_ime'];
$lozinka=$_GET['lozinka'];
$tip_kor=$_GET['tip_kor'];
$sifra_kor_std = $_GET['sifra_kor_std'];
$sifra_kor_prof = $_GET['sifra_kor_prof'];
// povezivanje
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="INSERT
INTO
korisnici(Korisnicko_ime,Lozinka,Tip_korisnika,Student_id,Profesor_id)
VALUES
('$naziv_kor','$lozinka','$tip_kor','$sifra_kor_std','$sifra_kor_prof')";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
dodavanja
korisnika</h2>".mysql_error());
}
?>
//student.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<script type='text/javascript' >
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
function IspisStudent(){
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled studenata</h2>";
$sql="SELECT S.*, SG.Naziv_studija,O.naziv,SE.Koji_semestar FROM STUDENT
S, STUDIJSKE_GRUPE SG,OPĆINA O,SEMESTAR SE ".
" WHERE SG.idStudijske_grupe=S.Studijske_grupe_id".
" AND O.idOpćina=S.Općina_id".
" AND SE.idSemestar=S.Semestar_id";
$result=mysql_query($sql);
echo
"<table
class=\"sample\"><tr><th>SIFRA
STUDENTA</th><th>IME</th><th>PREZIME</th><th>STUDIJSKA
GRUPA</th><th>OPĆINA</th><th>SEMESTAR</th></tr>";
while($ispisrez = mysql_fetch_array($result))
{
$id=$ispisrez['IdStudent'];
echo "<tr>";
echo "<td id='id-". $id ."'>".$ispisrez['IdStudent']."</td>";
echo "<td id='ime-" .$id. "'>".$ispisrez['Ime']."</td>";
echo "<td id='prezime-" .$id. "'>".$ispisrez['Prezime']."</td>";
echo "<td id='grupa-" .$id. "'>".$ispisrez['Naziv_studija']."</td>";
echo "<td id='opcina-" .$id. "'>".$ispisrez['naziv']."</td>";
echo "<td id='semestar-" .$id. "'>".$ispisrez['Koji_semestar']."</td>";
$id=$ispisrez['IdStudent'];
77
Razvoj web aplikacija temeljenih na Ajax tehnologiji
echo
"<td><input
type='button'
value='Brisi'
onClick=\"javascript:loadAjaxPage('student_brisi.php?id=$id' , func_student);\"
></td>";
echo
"<td><input
type='button'
value='Azuriraj'
onClick='az_st($id)'></td>";
echo
"<td><input
type='button'
value='Upisi
predmete'
onClick=\"javascript:loadAjaxPage('upis_predmet.php?id=$id');\"></td>";
echo
"<td><input
type='button'
value='Upisani
predmeti'
onClick=\"javascript:loadAjaxPage('pregled_upisanih_predmeta.php?id=$id');\"></
td>";
echo "</tr>";
}
//zatvaranje
mysql_close($conn);
echo "</table>";
}
?>
<div >
<?php
IspisStudent()
?>
</div>
<input
type='button'
value='Dodaj'
onClick="document.getElementById('novi').style.display='block' ;" />
<div id="novi" style='display:none;'>
<form method="GET">
<span>IME STUDENTA: <input type="text" id="naziv_studenta"><span>
<span>PREZIME STUDENTA: <input type="text" id="prezime"><span>
<span>
STUDIJSKA GRUPA:
<select id="sifra_stgrupe">
<option value="odabir">Odaberite studijsku grupu</option>
<?php
// povezivanje
$conn2 = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled studijskih grupa</h2>";
$sql2="SELECT * FROM STUDIJSKE_GRUPE ORDER BY 1";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
echo
"<option
value=\"".$ispisrez2['idStudijske_grupe']."\">".$ispisrez2['Naziv_studija']."</
option>";
// zatvaranje while petlje
}
?>
</select>
<span>
OPĆINA:
<select id="sifra_opcine">
<option value="odabir">Odaberite općinu</option>
<?php
// povezivanje
$conn2 = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
78
Razvoj web aplikacija temeljenih na Ajax tehnologiji
echo "<h2>Pregled općina</h2>";
$sql2="SELECT * FROM OPĆINA ORDER BY 1";
mysql_query("SET NAMES utf8");
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
echo
"<option
value=\"".$ispisrez2['idOpćina']."\">".$ispisrez2['naziv']."</option>";
// zatvaranje while petlje
}
?>
</select>
SEMESTAR:
<select id="sifra_sem">
<option value="odabir">Odaberite semestar</option>
<?php
// povezivanje
$conn2 = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled semestra</h2>";
$sql2="SELECT * FROM SEMESTAR ORDER BY 1";
$result2=mysql_query($sql2);
while($ispisrez2 = mysql_fetch_array($result2)){
echo
"<option
value=\"".$ispisrez2['idSemestar']."\">".$ispisrez2['Koji_semestar']."</option>
";
// zatvaranje while petlje
}
?>
</select>
<input
type="button"
name="posalji"
value="Dodaj"
onclick="ajaxUpisStudent()" ><br>
</form>
</div>
//student_brisi.php
<?php
require("konekcija.php");
include("head.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['id'])) {
$sifra_student=$_GET['id'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or
connecting to mysql');
mysql_select_db($dbname);
$sql="DELETE FROM student WHERE IdStudent=$sifra_student";
die
('Error
79
Razvoj web aplikacija temeljenih na Ajax tehnologiji
$result=mysql_query($sql)
brisanja</h2>".mysql_error());
}
?>
or
die("<h2>Pogreska
kod
//student_edit.php
<?php
require("konekcija.php");
include("head.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
?>
<?php
$sifra_studenta=$_GET['id'];
$ime=$_GET['ime'];
$prezime= $_GET['prezime'];
$sifra_sg= $_GET['grupa'];
$sifra_opcine= $_GET['opcina'];
$sifra_semestar= $_GET['semestar'];
//echo $ime; echo $prezime ; echo $sifra_sg; echo $sifra_opcine; echo
$sifra_semestar;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="UPDATE STUDENT
SET Ime='" . $ime. "',Prezime='" . $prezime .
"',Studijske_grupe_id='" . $sifra_sg . "',Općina_id='" . $sifra_opcine .
"',Semestar_id='" . $sifra_semestar . "' WHERE idStudent='" . $sifra_studenta
."'";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
pronalaska
studenta</h2>".mysql_error());
?>
//insertstudent.php
<?php
require("konekcija.php");
include("head.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['naziv_studenta'])) {
$naziv_studenta=$_GET['naziv_studenta'];
$prezime=$_GET['prezime'];
$sifra_stgrupe=$_GET['sifra_stgrupe'];
$sifra_opcine=$_GET['sifra_opcine'];
$sifra_sem=$_GET['sifra_sem'];
80
Razvoj web aplikacija temeljenih na Ajax tehnologiji
// povezivanje
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="INSERT
INTO
student(Ime,Prezime,Studijske_grupe_id,općina_id,semestar_id)
VALUES
('$naziv_studenta','$prezime','$sifra_stgrupe','$sifra_opcine','$sifra_sem')";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
dodavanja
studenta</h2>".mysql_error());
}
?>
//upis_predmet.php
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
function PregledUpisanihPredmeta()
{
$student=$_GET['id'];
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
mysql_query("SET NAMES utf8");
echo "<h2>Pregled upisanih predmeta</h2>";
$sql="SELECT * FROM PREDMETI P,STUDENT S,UPISANI_PREDMETI UP ".
" WHERE S.IdStudent=$student".
" AND S.IdStudent=UP.Student_id".
" AND P.idPredmeti=UP.Predmeti_id";
$result=mysql_query($sql);
echo
"<table
class=\"sample\"><tr><th>NAZIV
PREDMETA</th><th>IME
STUDENTA</th><th>PREZIME STUDENTA</th></tr>";
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
echo "<td>".$ispisrez['Naziv_predmeta']."</td>";
echo "<td>".$ispisrez['Ime']."</td>";
echo "<td>".$ispisrez['Prezime']."</td>";
echo "</tr>";
}
mysql_close($conn);
echo "</table>";
}
?>
<?php
$student=$_GET['id'];
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled predmeta</h2>";
81
Razvoj web aplikacija temeljenih na Ajax tehnologiji
$sql="SELECT P.* FROM PREDMETI P ORDER BY 1";
$result=mysql_query($sql);
echo
"<table
class=\"sample\"><tr><th>NAZIV
PREDMETA</th><th>ECTS</th><th>AKCIJA</th></tr>";
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
echo "<td>".$ispisrez['Naziv_predmeta']."</td>";
echo "<td>".$ispisrez['ECTS']."</td>";
$id=$ispisrez['idPredmeti'];
href=\"predmet_upisan.php?idd=".$ispisrez['idPredmeti']."&student=".$stud
ent."\">Upiši predmet</a></td>";
echo
"<td><a
href='#'
'
onClick=\"javascript:loadAjaxPage('predmet_upisan.php?id=$id&student=$student'
, func_upispredmeta);\">Upiši predmet</a></td>";
echo "</tr>";
}
mysql_close($conn);
echo "</table>";
?>
<?php
PregledUpisanihPredmeta()
?>
<br>
<input
type="button"
value="Natrag"
id="natrag"
onClick="javascript:loadAjaxPage('student.php')">
<?php
include("footer.php");
?>
//pregled_upisanih_predmeta.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
function PregledUpisanihPredmeta()
{
$student=$_GET['id'];
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled upisanih predmeta</h2>";
$sql="SELECT * FROM PREDMETI P,STUDENT S,UPISANI_PREDMETI UP ".
" WHERE S.IdStudent=$student".
" AND S.IdStudent=UP.Student_id".
" AND P.idPredmeti=UP.Predmeti_id";
$result=mysql_query($sql);
echo
"<table
class=\"sample\"><tr><th>NAZIV
PREDMETA</th><th>IME
STUDENTA</th><th>PREZIME STUDENTA</th></tr>";
82
Razvoj web aplikacija temeljenih na Ajax tehnologiji
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
echo "<td>".$ispisrez['Naziv_predmeta']."</td>";
echo "<td>".$ispisrez['Ime']."</td>";
echo "<td>".$ispisrez['Prezime']."</td>";
$id=$ispisrez['idUpisani_predmeti'];
echo
"<td><a
onClick=\"javascript:loadAjaxPage('upisano_brisi.php?id=$id'
func_pregledup);\" >Brisi</a></td>";
echo "</tr>";
}
mysql_close($conn);
echo "</table>";
}
?>
<?php
PregledUpisanihPredmeta()
?>
<input
type="button"
value="Natrag"
onClick="javascript:loadAjaxPage('student.php')">
href='#'
,
id="natrag"
//upisano_brisi.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['id'])) {
$sifra_predmet=$_GET['id'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
$sql="DELETE
FROM
upisani_predmeti
idUpisani_predmeti=$sifra_predmet";
$result=mysql_query($sql)
or
die("<h2>Pogreska
brisanja</h2>".mysql_error());
}
?>
('Error
WHERE
kod
//predmet_upisan.php
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
83
Razvoj web aplikacija temeljenih na Ajax tehnologiji
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['id'])) {
$predmet_id=$_GET['id'];
$student=$_GET['student'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="INSERT
INTO
upisani_predmeti(Predmeti_id,Student_id)
VALUES
('$predmet_id','$student')";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
dodavanja
predmeta</h2>".mysql_error());
}
?>
//rokovi_izaberi.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
function PregledUpisanihPredmeta()
{
$moj_predmet=$_GET['id'];
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled ispitnih rokova</h2>";
$sql="SELECT * FROM ISPITNI_ROKOVI I,PREDMETI P ".
" WHERE I.Predmeti_id=$moj_predmet".
" AND P.idPredmeti=I.Predmeti_id";
$result=mysql_query($sql);
echo "<table class=\"sample\"><tr><th>SIFRA ISPITNOG ROKA</th><th>NAZIV
PREDMETA</th><th>DATUM</th></th></tr>";
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
$id=$ispisrez['IdIspit'];
echo "<td>".$ispisrez['IdIspit']."</td>";
echo "<td>".$ispisrez['Naziv_predmeta']."</td>";
echo "<td>".$ispisrez['Datum']."</td>";
echo
"<td><input
type='button'
value='Prijavi
ispit'
onClick=\"javascript:loadAjaxPage('prijava_ispita.php?id=$id');\"></td>";
echo "</tr>";
}
mysql_close($conn);
84
Razvoj web aplikacija temeljenih na Ajax tehnologiji
echo "</table>";
}
?>
<?php
PregledUpisanihPredmeta()
?>
<?php
include("footer.php");
?>
//prijava_ispita.php
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
$naziv=$_COOKIE['uname'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="SELECT * FROM korisnici WHERE Korisnicko_ime='$naziv'";
$result=mysql_query($sql);
while($ispisrez = mysql_fetch_array($result)){
$trenutni_student=$ispisrez['Student_id'];
}
mysql_close($conn);
echo "</table>";
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled upisanih predmeta</h2>";
$sql="SELECT * FROM PREDMETI P,STUDENT S,UPISANI_PREDMETI UP ".
" WHERE S.IdStudent=$trenutni_student".
" AND S.IdStudent=UP.Student_id".
" AND P.idPredmeti=UP.Predmeti_id";
$result=mysql_query($sql);
echo
"<table
class=\"sample\"><tr><th>NAZIV
PREDMETA</th><th>PREGLED
ISPITNIH ROKOVA</th></tr>";
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
$id=$ispisrez['idPredmeti'];
echo "<td>".$ispisrez['Naziv_predmeta']."</td>";
echo
"<td><input
type='button'
value='Ispitni
rokovi'
onClick=\"javascript:loadAjaxPage('rokovi_izaberi.php?id=$id');\"></td>";
echo "</tr>";
}
85
Razvoj web aplikacija temeljenih na Ajax tehnologiji
mysql_close($conn);
echo "</table>";
?>
<?php
include("footer.php");
?>
//rokovi_prijava_konacno.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
$naziv=$_COOKIE['uname'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
$sql="SELECT * FROM korisnici WHERE Korisnicko_ime='$naziv'";
$result=mysql_query($sql);
while($ispisrez = mysql_fetch_array($result)){
$trenutni_student=$ispisrez['Student_id'];
}
mysql_close($conn);
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['id'])) {
$sifra_roka=$_GET['id'];
$Datum_prijave=date("yyyy-mm-dd");
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
mysql_query("SET NAMES utf8");
$sql="INSERT
ispit_zapisnik(Ispitni_Rokovi_id,Student_id,Datum_prijave)
('$sifra_roka','$trenutni_student','$Datum_prijave')";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
ispita</h2>".mysql_error());
}
?>
('Error
('Error
INTO
VALUES
prijave
//odjava_ispita.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
86
Razvoj web aplikacija temeljenih na Ajax tehnologiji
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
$naziv=$_COOKIE['uname'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="SELECT * FROM korisnici WHERE Korisnicko_ime='$naziv'";
$result=mysql_query($sql);
while($ispisrez = mysql_fetch_array($result)){
$trenutni_student=$ispisrez['Student_id'];
}
mysql_close($conn);
echo "</table>";
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled prijavljenih predmeta</h2>";
$sql="SELECT
*
FROM
ispit_zapisnik
IZ,ispitni_rokovi
IR,student
S,predmeti P".
" WHERE IZ.Student_id=$trenutni_student".
" AND IZ.Ocjena = '0'".
" AND IR.IdIspit=IZ.Ispitni_Rokovi_id".
" AND S.IdStudent=IZ.Student_id".
" AND P.idPredmeti=IR.Predmeti_id";
$result=mysql_query($sql);
echo
"<table
class=\"sample\"><tr><th>SIFRA
ZAPISNIKA</th><th>NAZIV
PREDMETA</th><th>DATUM ISPITNOG ROKA</th></tr>";
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
$id=$ispisrez['idIspit_zapisnik'];
echo "<td>".$ispisrez['idIspit_zapisnik']."</td>";
echo "<td>".$ispisrez['Naziv_predmeta']."</td>";
echo "<td>".$ispisrez['Datum']."</td>";
echo
"<td><input
type='button'
value='Odjavi
ispit'
onClick=\"javascript:loadAjaxPage('odjavi_ispit_konacno.php?id=$id',func_odjava
);\"></td>";
echo "</tr>";
}
mysql_close($conn);
echo "</table>";
?>
//odjava_ispit_konacno.php
<?php
require("konekcija.php");
87
Razvoj web aplikacija temeljenih na Ajax tehnologiji
include("head.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
if (isset($_GET['id'])) {
$sifra_zapisnik=$_GET['id'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
$sql="DELETE FROM ispit_zapisnik WHERE idIspit_zapisnik=$sifra_zapisnik";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
brisanja</h2>".mysql_error());
}?>
//ocjene_izbor_predmet.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
$naziv=$_COOKIE['uname'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
$sql="SELECT * FROM korisnici WHERE Korisnicko_ime='$naziv'";
$result=mysql_query($sql);
while($ispisrez = mysql_fetch_array($result)){
$trenutni_profesor=$ispisrez['Profesor_id'];
}
mysql_close($conn);
echo "</table>";
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
echo "<h2>Pregled predmeta</h2>";
$sql="SELECT * FROM PREDMETI P,PROFESOR PR ".
" WHERE PR.idProfesor=$trenutni_profesor".
('Error
('Error
88
Razvoj web aplikacija temeljenih na Ajax tehnologiji
" AND PR.idProfesor=P.Profesor_id";
$result=mysql_query($sql);
echo
"<table
class=\"sample\"><tr><th>NAZIV
PREDMETA</th><th>PREGLED
ISPITNIH ROKOVA</th></tr>";
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
$id=$ispisrez['idPredmeti'];
echo "<td>".$ispisrez['Naziv_predmeta']."</td>";
echo "<td><input type='button' value='Popis prijavljenih studenata'
onClick=\"javascript:loadAjaxPage('ocjene.php?id=$id');\"></td>";
echo "</tr>";
}
mysql_close($conn);
echo "</table>";
?>
//ocjene.php
<script type='text/javascript' src='java_funkcije.js'>
</script>
<?php
require("konekcija.php");
if (isset($_COOKIE['uname'])){
$prijavljen=true;
$razina=$_COOKIE['razina'];
$naziv=$_COOKIE['uname'];
}
else {
$prijavljen=false;
}
?>
<?php
global $dbhost, $dbuser, $dbpass,$dbname;
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die
connecting to mysql');
mysql_select_db($dbname);
mysql_query("SET NAMES utf8");
$sql="SELECT * FROM korisnici WHERE Korisnicko_ime='$naziv'";
$result=mysql_query($sql);
while($ispisrez = mysql_fetch_array($result)){
$trenutni_profesor=$ispisrez['Profesor_id'];
}
mysql_close($conn);
echo "</table>";
?>
<?php
if(isset($_GET['azuriraj']) )
{
//UPDATE..
$sifra_iz=$_GET['id_zapisnik'];
$ocjena_unos= $_GET['ocjena_prenesi'];
$conn = mysql_connect($dbhost, $dbuser,
connecting to mysql');
mysql_select_db($dbname);
mysql_query("SET NAMES utf8");
$dbpass)
or
die
('Error
('Error
89
Razvoj web aplikacija temeljenih na Ajax tehnologiji
$sql="UPDATE ispit_zapisnik
SET Ocjena='" . $ocjena_unos. "' WHERE
idIspit_zapisnik='" . $sifra_iz ."'";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
pronalaska
zapisnika</h2>".mysql_error());
}
// povezivanje
$predmet_preuzmi=$_GET['id'];
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error
connecting to mysql');
mysql_select_db($dbname);
mysql_query("SET NAMES utf8");
$sql="Select
*
from
ispit_zapisnik
IZ,profesor
P,student
S,ispitni_rokovi IR,predmeti PR".
" WHERE P.idProfesor=$trenutni_profesor".
" AND IZ.Ocjena='0'".
" AND PR.idPredmeti=$predmet_preuzmi".
" AND P.idProfesor=PR.Profesor_id".
" AND PR.idPredmeti=IR.Predmeti_id".
" AND S.IdStudent=IZ.Student_id".
" AND IR.IdIspit=IZ.Ispitni_Rokovi_id";
$result=mysql_query($sql)
or
die("<h2>Pogreska
kod
pronalaska
podataka</h2>".mysql_error());
echo
"<table
class=\"sample\"><tr><th>SIFRA
ZAPISNIKA</th><th>IME</th><th>PREZIME</th><th>SIFRA
ROKA</th><th>DATUM</th><th>OCJENA</th></tr>";
while($ispisrez = mysql_fetch_array($result)){
echo "<tr>";
echo "<form action=\"ocjene.php\" method=\"GET\">";
echo
"<td><input
type=\"text\"
name=\"id_zapisnik\"
value=\"".$ispisrez['idIspit_zapisnik']."\" READONLY></td><br>";
echo
"<td><input
type=\"text\"
name=\"id_rok\"
value=\"".$ispisrez['IdIspit']."\" READONLY></td><br>";
echo
"<td><input
type=\"text\"
name=\"datum\"
value=\"".$ispisrez['Datum']."\" READONLY></td><br>";
echo
"<td><input
type=\"text\"
name=\"ime_studenta\"
value=\"".$ispisrez['Ime']."\" READONLY></td><br>";
echo
"<td><input
type=\"text\"
name=\"prezime_studenta\"
value=\"".$ispisrez['Prezime']."\" READONLY></td><br>";
echo "<td><input type=\"text\" name=\"ocjena_prenesi\"></td><br>";
echo
"<td><input
type=\"submit\"
name=\"azuriraj\"
value=\"AZURIRAJ\"></td>";
echo "</form>";
echo "</tr>";
echo "</table>";
}?>
90

Uvjeti objavljivanja – tržišni rizik

PHP uvo od u dina amičko pr rogramir ranje

Funkcije - knjizara.hr

Razvoj web aplikacije korištenjem PHP MVC frameworka

PHP: Priručnik

Skriptni jezici Programiranje u bash ljusci 1

PASCAL

BUSINESS INTELLIGENCE U NAUTIČKOM

Lužnica u smiraj ljetnih noći - Duhovno