XHTML 2.0 and HTML 5 · Konfiguracija XMLHttpRequest objekta ... Komunicira sa ostalim servisima i...
Transcript of XHTML 2.0 and HTML 5 · Konfiguracija XMLHttpRequest objekta ... Komunicira sa ostalim servisima i...
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
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
AJAX – auto sugestija
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
AJAX – auto sugestija
28
Serverski dio pogledati na:
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
$con = mysql_connect("localhost","peter","abc123");if (!$con){die('Could not connect: ' . mysql_error());}
// some code
mysql_close($con);?>
Slanje naredbi <?php
$con = mysql_connect("localhost","peter","abc123");if (!$con){die('Could not connect: ' . mysql_error());}
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')");
mysql_close($con);?>
Unos podataka u bazu <?php
$con = mysql_connect("localhost","peter","abc123");if (!$con){die('Could not connect: ' . mysql_error());}
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')");
mysql_close($con);?>
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());}
mysql_select_db("my_db", $con);
$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());}
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM Persons");
while($row = mysql_fetch_array($result)){echo $row['FirstName'] . " " . $row['LastName'];echo "<br />";}
mysql_close($con);?>