XHTML 2.0 and HTML 5 · Konfiguracija XMLHttpRequest objekta ... Komunicira sa ostalim servisima i protokolima –IMAP, LDAP, SNMP, HTTP, POP, zatim podrška za XML iCORBA OO aplikacije

AJAX, jQuery

Što ćete naučiti Internet općenito

HTML

CSS

XML

XHTML

Javascript

DOM

DHTML

jQuery

AJAX

PHP

ASP.NET

Ruby On Rails

MS Silverlight

FLASH, SMIL, SVG

...

2

AJAX

Asynchronous JavaScript and XML

Zašto asinkrono?

Zašto Javascript?

Zašto XML?

3

Ajax 2005

Primjeri

Google Suggest

Osvježavanje podataka meteo stanice

Modeliranje širenja šumskog požara

http://www.google.com/

6

Asinkrona komunikacija?

KLIJENT

šalje httpRequest

čeka

čeka

čeka

čeka

prima httpResponse

Učitava podatke

Osvježava se stranica

SERVER

čeka

čeka

prima httpRequest

priprema httpResponse

šalje httpResponse

čeka

čeka

čeka

HTTP protokol: Klijent-server

Klasični pristup

9

AJAX pristup

10

Asinkorna komunikacija Korisničke akcije koje bi u generirale HTTP request

pretvaraju se u Javascript pozive koje pozivaju AJAX engine

AJAX engine upravlja svim odgovorima sa servera

Potencijalni problemi

Javascript mora biti omogućen

“Back button” ne radi uvijek

Stranice nekad teško spremiti u “Bookmarks”

JavaScript

Dohvat dijela stranice (DOM model, getElementById)

Slanje http zahtjeva

Dohvat http odgovora

Obrada http odgovora

Izmjena (update) dijela stranice

XML Format podataka

Strukturirani podaci

XMLHttpRequest

14

Pokretanje HTTP zahtjeva

1. Kreiranje i konfiguracija

XMLHttpRequest objekta

2. Pokretanje zahtjeva

3. Obrada odgovora

Kreiranje XMLHttpRequest objekta

Mozilla:

IE:

var request = new XMLHttpRequest();

var request = new

ActiveXObject("Microsoft.XMLHTTP");

15

Konfiguracija XMLHttpRequest objekta

request.open("method","URL",false)

request.setRequestHeader("header","value")

• Method je GET, POST, itd.

• URL postoje sigurnosna ograničenja

• false hoće li se zahtjev izvršiti asinkrono

16

Pokretanje zahtjeva

request.send(content)

• content je poslan u POST zahtjevu

• content se koristi samo sa POST

• content može biti prazan ili "null”

17

Konfiguracija XMLHttpRequest objekta URL

Datoteka na serveru

Može biti bilo koja vrsta datoteke (xml, txt, asp, php, …)

Asinkrono izvođenje – true ili false

Da bi se XMLHttpRequest ponašao kao AJAX potrebno postaviti u true

Ukoliko je Async=false

Javascript se ne izvodi dok se ne dobije odgovor servera

Ne pise se onreadystatechange funkcija, već samo .send()

Async = false Async = false

xmlhttp.open("GET","ajax_info.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Async = true xmlhttp.onreadystatechange=function()

{if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}

xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

XMLHttpRequest onreadystatechange

xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){// Neki kod}

}

0 – Zahtjev nije inicijaliziran

1 – Zahtjev je postavljen

2 – Zahtjev je poslan

3 – Zahtjev se obrađuje

4 – Zahtjev je izvršen20

GET i POST GET:

xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);xmlhttp.send();

POST: xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

Obrada odgovora

request.responseText

request.responseXML

request.status request.statusText

request.getAllResponseHeaders()

request.getResponseHeader("header")22

responseText Ukoliko odgovor sa servera nije XML

Odgovor je u biti string

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML Dohvaćeni odgovor može se parsirati kao XML dokument

xmlDoc=xmlhttp.responseXML;var txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++){txt=txt + x[i].childNodes[0].nodeValue + "<br />";}

document.getElementById("myDiv").innerHTML=txt;

AJAX – auto sugestija

25


26

AJAX – auto sugestija Ako u input polju ima nešto zapisano:

Definira URL (filename) koji će se poslati serveru

Dodaje parametar (q) tom URL-u sa sadržajem input polja

Dodaje random broj da bi se spriječio caching

Kreira XMLHTTP objekt te se pokreće funkcija stateChanged kad se dogodi promjena

Otvara XMLHTTP objekt sa danim URL-om

Šalje HTTP zahtjev na server

27


28

Serverski dio pogledati na:

http://www.w3schools.com/ajax/ajax_aspphp.asp

http://www.w3schools.com/ajax/ajax_aspphp.asp

jQuery & AJAX

jQuery poziva higher level

.loadAJAX funkciju

29

JSON Počeci razvoja 2001. godine

U kombinaciji sa Javascriptom

Mime type “application/json”

Primjereniji od XML za prijenos preko mreže

Bliži programerskom pristupu shvaćanja strukture podataka

Brži od XML-a

DOM relativno spor

Za AJAX puno pristupačniji i brži

JSON U JSON-u postoji 6 tipova podataka:

1. Stringovi – “xyz” … “Pozdrav!”

2. Brojevi – 17 … -22.76425 … 8.54621e7

3. Boolean – true or false

4. Null – null

5. Objekti – { “propName”: value, … }

6. Nizovi – [ value, value, value… ]

JSON – kako izgleda{

“porukaID”: 243,

“poruka”: “Pozdrav!!!”,

“poslano”: “2010-05-26 12:21:17.271”,

“adrese”:

{ “ime”: “Jure”, “prezime”: “Ivić” },

“intLista”: [46, 482, -48, 31.234e7, 14, -6],

“posaljiZaglavlje”: true

}

JSON Koristiti JSON parser (Firefox ima ugrađeni parser)

Npr. Json2.js

http://www.json.org/json2.js

var oMyData = JSON.parse(sJSON);

Javascript je popularan

JSON je “prirodan” način prenošenja podataka u Javascript aplikacijama

PHP PHP - PHP: Hypertext Preprocessor (rukurzivno)

PHP - personal home page (stari akronim)

Riječ je o serverskom skriptiranju

PHP se izvršava na serveru

Podrška za baze podataka (najčešće MySQL)

Open source

Besplatan za korištenje

Uvod PHP Skriptni jezik opće namjene, otvorenog koda Pogodan za razvoj Weba Dostupan na raznim platformama

Windows, Linux, Unix, OS X, ...

Jednostavan za učenje Sintaksa slijedi C, Javu, Perl

http://www.php.net

Povijest Početak kao dio Perl-a 1997 (Personal Home page), Danas najkoristenija verzija 5.x.x Preko 16 milijuna domena koristi PHP

HTML ne radi s podacima (služi samo da oblikuje prikaz hipertekstualnih elemenata)

PHP radi s podacima (obrasci, baze podataka itd..)

Cilj: Jednostavan jezik za brzo stvaranje dinamičkih stranica Weba

PHP datoteka Nije striktno vezana samo za PHP kod

Može sadržavati tekst, HTML i skripte

Nakon obrade PHP datoteke server vraća čisti HTML

Ekstenzije “.php”,”.php3”,”.phtml”

Još o PHP-u Neovisnost o OS i serverskoj platformi –Unix, Linux, Solaris, MacOS,

Windows, FreeBSb, Apache, Netscape...

Multi DataBase Access – MySQL, PostgreSQL, dBase, Oracle, Informix, Sysbase, ODBC itd

Komunicira sa ostalim servisima i protokolima –IMAP, LDAP, SNMP, HTTP, POP, zatim podrška za XML i CORBA OO aplikacije...

PHP je hibridni jezik, podržava proceduralano i objektno orijentirano programiranje, gotovo sve tipove podataka (Boolean, Integer, Floating-point number (float), String, Array, Object, Resource, NULL) itd...

Ostalo : jednostavan, brz, intuitivan, stabilan, open source i besplatan, podržava ekstenzije...

Princip rada PHP-a Proces uključivanja PHP programa uključuje sljedeće

korake: Korisnik putem preglednika zahtijeva određeni resurs (PHP

program, datoteku).

Zahtjev dolazi na poslužitelj koji prepoznaje da se radi o PHP programu.

Poslužitelj poziva PHP engine koji izvršava PHP program koji za rezultat ima HTML kod koji se onda nazad šalje korisniku.

Hello World - PHP

Svaka linija završava sa “;”

“;” je separator koji odvaja instrukcije

Datoteka u kojoj se nalazi ovaj kod mora imati ekstenziju .php (ili slične)

Sintaksa Dinamički dijelovi određeni sa:

<?php ?>

Moguće još i konstrukcije: <% %>

<? ?>

<script language='php'> </script>

U trenutku pokretanja .php skripte na serveru se pokreće novi proces

Sintaksa Kombinacija C, C++, Perl, Java te nešto vlastite sintakse Više načina kombiniranja sa HTML-om i escaping from

HTML Case sensitive (uglavnom) ali nije osjetljiv na whitespace

(pazno mjesto, razmak)

Komentari:/* Komentar u jednom ili višeredaka kao u C-u*/// Komentar u jednom redu ako u C++,Javi

Sintaksa PHP - Loosely Typed Language

Varijablu nije potrebno deklarirati prije korištenja, PHP automatski deklarira varijablu kad je to potrebno

Nije potrebno definirati tip varijable

Ovisno o vrijednosti, PHP pretvara varijablu u određeni tip

$ime_varijable=23;

$ime_str_var=“Pozdrav!”;

Sintaksa Varijable su osnovni način pohrane podataka ($varijabla),

postoje i predefinirane varijable za lakši rad

U imenu varijable za početni znak možemo koristiti slovo ili podvlaku (underline), a iza toga mogu se koristiti slova, brojevi i podvlake.

Korištenje posebnih znakova nije dozvoljeno.

Imena varijabli su case-sensitive, znači osjetljiva na korištenje malih i velikih slova.

Tipovi podataka Skalarni tipovi

Boolean Integer Float (dvostruka preciznost) String (8-bitni znakovi)

Složeni tipovi Array (simboličko polje, hash) Object (OO funkcionalnost)

Posebni tipovi Resource (pokazuju na vanjske resurse – npr. Otvorene

datoteke) NULL (prazan tip, pridružen varijablama koje nemaju

vrijednost)

Sintaksa Skup operatora sličan C-u

Spajanje stringova -> “.”

Operator identiteta -> “===“ jednakost vrijednosti i tipa

Sintaksa Upravljanje tokom programa

if ... elseif ... Else while, do ... While for, foreach break, continue switch return

Funkcije function fx ($x) { return $x; }

Primjer

PHP operatori PHP podržava gotovo sve tipove operatora:

Aritmetički

Logički

Operator spajanja dva niza (string-a)...

Aritemetički: $a + $b - zbrajanje

$a - $b - oduzimanje

$a * $b - množenje

$a / $b - dijeljenje

$a % $b – modul, ostatak cjelobrojnog dijeljenja

PHP operatori Logički:

$a and $b – i a i b $a or $b – a ili be $a xor $b – a ili b, ne oba !$a – nije a $a && $b – i a i b $a || $b – a ili b

Operator spajanja dva niza (string-a): $a = "Spajanje "; $b = $a . "dva niza!";

PHP operatori PHP podržava i pre i post inkrementaciju i

deinkrementaciju varijabli, npr.inkrementacija: $a=5;

$a++;

++$a

Primjer deinkrementacije: $b=9;

--$b;

$b --;

Kontrole strukture PHP ima ugrađenu višestruku podršku za kontrolu toka i

izraza poznatu iz ostalih jezika: If

If else

If else if

While

Do while

For

Foreach

Switch case

Break , continue

IF struktura IF kontrolna struktura, poznata iz drugih jezika, jedna je

od najvažnijih i u PHP jeziku. Sintaksa je vrlo slična C jeziku. Primjer if strukture je:

if ($a>$b){

echo "Varijabla a je veća od varijable b";

}

Vitičaste zagrade mogu se i izostaviti u posebnim slučajevima

IF ELSE struktura Ova struktura izvršava neku naredbu ili skup naredbi ako

je uvjet ispunjen, a ukoliko nije onda izvršava neki drugi skup naredbi

Primjer:if ($a>$b){echo "Varijabla a je veća od varijable b";} else {echo "Varijabla a je manja od varijable b";}

IF ELSE IF struktura Ova struktura proširuje IF ELSE strukturu sa više ELSE IF

uvjeta, npr:if ($a>$b){echo "Varijabla a je veća od varijable b";} else if ($a ==$b){echo "Varijabla a je jednaka varijabli b";} else {echo "Varijabla a je manja od varijable b";}

WHILE struktura petlje WHILE kontrolne petlje su petlje kod kojih se naredba ili skup naredbi izvršava

dok su ispunjeni zadani uvjeti, npr:$a=1;while ($a<10){echo "Varijabla a je manja od 10!";$a++;}

DO WHILE je proširenje WHILE petlje, ova petlja se za razliku od WHILE petlje izvede bar jedan put, neovisno o tome da li je uvjet ispunjen ili ne, npr.:

$a=1;do {echo "Varijabla a je manja od 10!";$a++;} while ($a<10)

FOR petlja PHP također podržava i FOR kontrolne strukture, čiji je opći oblik:for (izraz1;izraz2;izraz3) {naredbe1;naredbe2;...naredbeN;}

Npr:for ($a=0; $a=<10; $a++) {echo $a;}

Funkcije u PHP-u PHP podržava rad sa funkcijama, kao i ostali programski

jezici, opći oblik definicije funkcije je navođenjem ključne riječi function, npr.:

function ime_funkcije ($argument1, $argument2,

..$argumentN)

{

izrazi1;

izraz2;

...

izrazN;

}

PHP i obrada formi Pretpostavimo jednostavni primjer:

<html><body><form action=“primjer1.php” method=“POST”>Ime : <input type="text" name="ime"><br>Prezime: <input type="text"name="prezime"><br><input type="submit" name="slanje"value="Posalji"></form></body></html>

PHP i obrada formi ♦ PHP program za obradu bio bi (primjer1.php):

<?php

// prihvat i ispis podataka forme

echo " Dobar dan, Vi ste: $ime $prezime ";

?>

♦ Gornji slučaj je moguć ukoliko je

REGISTER_GLOBALS postavljene na ON, a

ukoliko su postavljene na OFF , PHP program

primjer1.php varijable $ime i $prezime mora ove

vrijednosti pročitati iz nizova $_POST['ime'] i

$_POST['prezime'].

Nizovi U PHP-u postoje tri vrste nizova

Numerički nizovi

$cars=array("Saab","Volvo","BMW","Toyota");

$cars[2]="BMW";

Asocijativni nizovi

$ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34);

$ages['Quagmire'] = "30";

Multidimenzionalni nizovi

Multidimenzionalni nizovi

PHP i obrada formi Pretpostavimo jednostavni primjer:

<html>

<body><form action=“primjer1.php” method=“POST”>Ime : <input type="text" name="ime"><br>Prezime: <input type="text"name="prezime"><br><input type="submit" name="slanje"value="Posalji"></form></body></html>

PHP i obrada formi PHP program za obradu bio bi (primjer1.php):

<?php

// prihvat i ispis podataka forme

echo " Dobar dan, Vi ste: $ime $prezime ";

?>

Gornji slučaj je moguć ukoliko je REGISTER_GLOBALS postavljene na ON, a ukoliko su postavljene na OFF , PHP program primjer1.php varijable $ime i $prezime mora oveVrijednosti pročitati iz nizova $_POST['ime'] i$_POST['prezime'].

PHP iMySQL <?php

$con = mysql_connect("localhost","peter","abc123");if (!$con){die('Could not connect: ' . mysql_error());}

// some code?>

Otvaranje i zatvaranje veze <?php


// some code

mysql_close($con);?>

Slanje naredbi <?php


mysql_select_db("my_db", $con);

mysql_query("INSERT INTO Persons (FirstName, LastName, Age)VALUES ('Peter', 'Griffin', '35')");

mysql_query("INSERT INTO Persons (FirstName, LastName, Age)VALUES ('Glenn', 'Quagmire', '33')");


Unos podataka u bazu <?php



mysql_query("INSERT INTO Persons (FirstName, LastName, Age)VALUES ('Peter', 'Griffin', '35')");

mysql_query("INSERT INTO Persons (FirstName, LastName, Age)VALUES ('Glenn', 'Quagmire', '33')");


Unos podataka forme u bazu <html>

<body>

<form action="insert.php" method="post">Firstname: <input type="text" name="firstname" />Lastname: <input type="text" name="lastname" />Age: <input type="text" name="age" /><input type="submit" /></form>

</body></html>

<?php$con = mysql_connect("localhost","peter","abc123");if (!$con)

{die('Could not connect: ' . mysql_error());}


$sql="INSERT INTO Persons (FirstName, LastName, Age)VALUES('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";

if (!mysql_query($sql,$con)){die('Error: ' . mysql_error());}

echo "1 record added";

mysql_close($con)?>

Dohvat podataka iz baze <?php

$con = mysql_connect("localhost","peter","abc123");if (!$con)

{die('Could not connect: ' . mysql_error());}


$result = mysql_query("SELECT * FROM Persons");

while($row = mysql_fetch_array($result)){echo $row['FirstName'] . " " . $row['LastName'];echo "<br />";}


Documents

XHTML 2.0 and HTML 5 · Konfiguracija XMLHttpRequest objekta ... Komunicira sa ostalim servisima i protokolima –IMAP, LDAP, SNMP, HTTP, POP, zatim podrška za XML iCORBA OO aplikacije