Ajax Php Mysql

AJAX, PHP, MySQL. Primeri.

SADRŽAJ

Kreiranje baze i ubacivanje podataka......................................................................................3

Primer 1. Ispis na osnovu selektovane vrednosti u combo – box...........................................4

Primer 1 urađen korišćenjem JQuery biblioteke..................................................................7

Primer 2. Autosuggest i autocomplete.....................................................................................9

Primer 2 urađen korišćenjem JQuery biblioteke................................................................12

Primer 2a. Nadograđeni primer 2...........................................................................................14

Primer 2a urađen korišćenjem JQuery biblioteke..............................................................16

Primer 3. Anketa koja prikazuje rezultate asinhronim pozivom nakon izbora drzave............19


Primer 4. Provera postojanja države prilikom unosa nove države za registraciju..................24


Primer 5. Asinhrono brisanje reda iz tabele...........................................................................30


Primer 6. Prikaz RSS-a..........................................................................................................35


2

Kreiranje baze i ubacivanje podataka

U primerima koji slede koristi se baza pod nazivom svet. Upiti pomoću kojih se kreira i popunjava baza, dati su u nastavku

CREATE DATABASE `svet` CHARSET=utf8 COLLATE=utf8_unicode_ci;

Kreiranje tabele:

CREATE TABLE `drzava` (ìd` INT( 20 ) NOT NULL AUTO_INCREMENT ,`drzava` VARCHAR( 20 ) NOT NULL ,`narod` VARCHAR( 15 ) NOT NULL ,`glgrad` VARCHAR( 30 ) NOT NULL ,`brstanovnika` VARCHAR( 20 ) NOT NULL ,`kontinent` VARCHAR( 20 ) NOT NULL ,`brglasova` INT( 20 ) NOT NULL ,PRIMARY KEY ( ìd` ) )

Ubacivanje podataka:

INSERT INTO `drzava` ( ìd` , `drzava` , `narod` , `glgrad` , `brstanovnika` , `kontinent` , `brglasova` ) VALUES ('', 'Srbija', 'Srbi', 'Beograd', '7500000', 'Evropa', '5'), ('', 'Italija', 'Italijani', 'Rim', '70000000', 'EU', '3'); INSERT INTO `drzava` ( ìd` , `drzava` , `narod` , `glgrad` , `brstanovnika` , `kontinent` , `brglasova` ) VALUES ('', 'Španija', 'Španci', 'Madrid', '60000000', 'Evropa', '2'), ('', 'Švajcarska', 'Švajcarci', 'Bern', '7000000', 'Evropa', '3');

Baza sada izgleda ovako:

3

Primer 1. Ispis na osnovu selektovane vrednosti u combo – box

Na slikama se vidi rezultat ovog primera. Na zahtev korisnika, odnosno nakon selektovanja jedne od opcija iz combobox-a, asinhrono se ispisuju podaci o državi.

konekcija.php

<?php$mysql_server = "localhost";$mysql_user = "root";$mysql_password = "";$mysql_db = "svet";$mysqli = new mysqli($mysql_server, $mysql_user, $mysql_password, $mysql_db);if ($mysqli->connect_errno) { printf("Konekcija neuspešna: %s\n", $mysqli->connect_error); exit();}$mysqli->set_charset("utf8");?>

index.php (Prikaz)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="pronadji.js"></script></head>

4

<body><?phpinclude "konekcija.php";$sql="SELECT * FROM Drzava";$rezultat = $mysqli->query($sql);?><form> <b>Izaberi državu:</b><select name="drzave" onchange="PrikaziZemlju(this.value)"><?phpwhile($red = $rezultat->fetch_object()){?><option value="<?php echo $red->id;?>"><?php echo $red->drzava;?></option><?php}?></select></form><p><div id="popuni"><b>Podaci o selektovanoj državi će biti prikazani ovde. Stranica se ne učitava ponovo.</b></div></p><?php$mysqli->close();?></body></html>

pronadji.js

var xmlHttp;function PrikaziZemlju(str){ xmlHttp=GetXmlHttpObject();if (xmlHttp==null){ alert ("Browser ne podržava xmlHttpRequest"); return;}var url="prikazidrzavu.php";url=url+"?id="+str;//ne dozvoli keširanjeurl=url+"&sid="+Math.random();//obrada promene stanja objekta xmlHttpRequestxmlHttp.onreadystatechange=obradapromenestanja;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function obradapromenestanja(){ if (xmlHttp.readyState==4){ document.getElementById("popuni").innerHTML=xmlHttp.responseText; } }function GetXmlHttpObject(){var xmlHttp=null;try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){

5

//Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;}

prikazidrzavu.php

<?phpif (!isset ($_GET["id"])){echo "Parametar ID nije prosleđen!";} else {$pomocna=$_GET["id"];//uspostavljanje konekcijeinclude "konekcija.php";//citanje podataka o drzavi$sql="SELECT * FROM Drzava WHERE id='".$pomocna."'";

$rezultat = $mysqli->query($sql);//ispis naziva kolona u tabeliecho "<table border='1'><tr><th>Država</th><th>Većinski narod</th><th>Broj stanovnika</th><th>Glavni grad</th><th>Kontinent</th></tr>";//ispis podataka o zemljiwhile($red = $rezultat->fetch_object()){ echo "<tr>"; echo "<td>" . $red->drzava . "</td>"; echo "<td>" . $red->narod . "</td>"; echo "<td>" . $red->brstanovnika . "</td>"; echo "<td>" . $red->glgrad . "</td>"; echo "<td>" . $red->kontinent . "</td>"; echo "</tr>"; }echo "</table>";

$mysqli->close();}?>

6

Primer 1 urađen korišćenjem JQuery biblioteke

konekcija.php


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function () {$("#kombo_drzave").change(function(){var vrednost = $("#kombo_drzave").val();$.get("prikazidrzavu.php", { id: vrednost }, function(data){ $("#popuni").html(data); });});});</script></head><body><?phpinclude "konekcija.php";$sql="SELECT * FROM Drzava";$rezultat = $mysqli->query($sql);?><form> <b>Izaberi državu:</b><select name="drzave" id="kombo_drzave"><?phpwhile($red = $rezultat->fetch_object()){?><option value="<?php echo $red->id;?>"><?php echo $red->drzava;?></option><?php}?>

7

</select></form><p><div id="popuni"><b>Podaci o selektovanoj državi će biti prikazani ovde. Stranica se ne učitava ponovo.</b></div></p><?php$mysqli->close();?></body></html>

prikazidrzavu.php

<?phpif (!isset ($_GET["id"])){echo "Parametar ID nije prosleđen!";} else {$pomocna=$_GET["id"];//uspostavljanje konekcijeinclude "konekcija.php";//citanje podataka o drzavi$sql="SELECT * FROM Drzava WHERE id='".$pomocna."'";

$rezultat = $mysqli->query($sql);//ispis naziva kolona u tabeliecho "<table border='1'><tr><th>Država</th><th>Većinski narod</th><th>Broj stanovnika</th><th>Glavni grad</th><th>Kontinent</th></tr>";//ispis podataka o zemljiwhile($red = $rezultat->fetch_object()){ echo "<tr>"; echo "<td>" . $red->drzava . "</td>"; echo "<td>" . $red->narod . "</td>"; echo "<td>" . $red->brstanovnika . "</td>"; echo "<td>" . $red->glgrad . "</td>"; echo "<td>" . $red->kontinent . "</td>"; echo "</tr>"; }echo "</table>";


8

Primer 2. Autosuggest i autocomplete

Na slikama se vidi rezultat ovog primera. Korisnik unosi simbole u polje za unos i asinhrono se ispisuju predlozi. Lista drzava se čita iz baze.

Selektovanjem određene države, njen naziv se automatski ubacuje u text-box

9

konekcija.php


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="sugerisi.js" type="text/javascript"></script> <script type="text/javascript">function place(ele){ document.getElementById('txt').value = ele.innerHTML;

document.getElementById("livesearch").style.display = "none";}</script><style type="text/css"> #livesearch{ margin:5px; width:220px; }#txt{ border: solid #A5ACB2; margin:5px; } </style></head><body onload="document.getElementById('txt').focus()"><form><input type="text" id="txt" size="32" onkeyup="sugestija(this.value)"> <div id="livesearch"></div>

</form></body></html>

10

sugerisi.js

var xmlHttpfunction sugestija(naziv){ if (naziv.length==0){ document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return }xmlHttp=GetXmlHttpObject()if (xmlHttp==null){ alert ("Browser does not support HTTP Request"); return; } var url="suggest.php";url=url+"?unos="+naziv;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true);xmlHttp.send(null);}function stateChanged(){

if (xmlHttp.readyState==4){ document.getElementById("livesearch").innerHTML=xmlHttp.responseText; document.getElementById("livesearch").style.border="1px solid"; document.getElementById("livesearch").style.display="block"; } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;}

suggest.php

<?phpif (!isset ($_GET["unos"])){echo "Parametar Unos nije prosleđen!";} else {

11

$pomocna=$_GET["unos"];include "konekcija.php";$sql="SELECT id,drzava FROM Drzava WHERE drzava LIKE '$pomocna%'ORDER BY drzava";$rezultat = $mysqli->query($sql);if ($rezultat->num_rows==0){echo "U bazi ne postoji država koja počinje na " . $pomocna;} else {while($red = $rezultat->fetch_object()){?><a href="#" onclick="place(this)"><?php echo $red->drzava;?></a><br/><?php}}$mysqli->close();}?>


konekcija.php


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function () {$("#txt").keyup(function(){var vrednost = $("#txt").val();$.get("suggest.php", { unos: vrednost }, function(data){ $("#livesearch").show(); $("#livesearch").html (data); });

12

});});function place(ele){

$("#txt").val(ele.innerHTML);$("#livesearch").hide();

}</script><style type="text/css"> #livesearch{ margin:5px; width:220px; border: 1px solid; display: none; }#txt{ border: solid #A5ACB2; margin:5px; } </style></head><body onload="document.getElementById('txt').focus()"><form><input type="text" id="txt" size="32"> <div id="livesearch"></div>


suggest.php

<?phpif (!isset ($_GET["unos"])){echo "Parametar Unos nije prosleđen!";} else {$pomocna=$_GET["unos"];include "konekcija.php";$sql="SELECT id,drzava FROM Drzava WHERE drzava LIKE '$pomocna%'ORDER BY drzava";$rezultat = $mysqli->query($sql);if ($rezultat->num_rows==0){echo "U bazi ne postoji država koja počinje na " . $pomocna;} else {while($red = $rezultat->fetch_object()){?><a href="#" onclick="place(this)"><?php echo $red->drzava;?></a><br/><?php}}$mysqli->close();}?>

13

Primer 2a. Nadograđeni primer 2

Kao nadogradnja prethodnog primera, mogu se iskombinovati primeri 1 i 2.

U primeru 2 treba ubaciti sledeće fajlove

pronadjinaziv.js

var xmlHttp;function PrikaziZemlju(naziv){ xmlHttp=GetXmlHttpObject();if (xmlHttp==null){ alert ("Browser does not support HTTP Request") return } var url="pronadjiponazivu.php";url=url+"?naziv="+naziv;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true);xmlHttp.send(null);}

function stateChanged(){

if (xmlHttp.readyState==4){ document.getElementById("livesearch").innerHTML=xmlHttp.responseText; document.getElementById("livesearch").style.display="block"; document.getElementById("livesearch").style.border="0px solid"; } }

function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;}

pronadjiponazivu.php

14

<?phpif (!isset ($_GET["naziv"])){echo "Parametar Naziv nije prosleđen!";} else {$pomocna=$_GET["naziv"];include "konekcija.php";

$sql="SELECT * FROM Drzava WHERE drzava='".$pomocna."'";$rezultat = $mysqli->query($sql);

echo "<table border='1'><tr><th>Vecinski narod</th><th>Broj stanovnika</th><th>Glavni grad</th><th>Kontinent</th></tr>";

while($red = $rezultat->fetch_object()){ echo "<tr>"; echo "<td>" . $red->narod . "</td>"; echo "<td>" . $red->brstanovnika . "</td>"; echo "<td>" . $red->glgrad . "</td>"; echo "<td>" . $red->kontinent . "</td>"; echo "</tr>"; }echo "</table>";


Istovremeno, neophodno je uneti promene u fajl index.php:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="sugerisi.js"></script> <script type="text/javascript" src="pronadjinaziv.js"></script> <script type="text/javascript">function place(ele){ document.getElementById('txt').value = ele.innerHTML;

document.getElementById("livesearch").style.display = "none";}</script><style type="text/css"> #livesearch{ margin: 5px; width: 220px; display: none; }

15

#txt{ border: solid #A5ACB2; margin:5px; } </style></head><body onload="document.getElementById('txt').focus()"><form><input type="text" id="txt" size="32" onkeyup="sugestija(this.value)"> <input type="button" id="sub" value="Pronadji" onclick="PrikaziZemlju(document.getElementById('txt').value)" ><div id="livesearch"></div></form></body></html>

Primer 2a urađen korišćenjem JQuery biblioteke

konekcija.php


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function () {$("#txt").keyup(function(){var vrednost = $("#txt").val();$.get("suggest.php", { unos: vrednost }, function(data){ $("#livesearch").show(); $("#livesearch").html (data); });});$("#sub").click(function(){

16

var vrednost = $("#txt").val();$.get("pronadjiponazivu.php", { naziv: vrednost }, function(data){ $("#prikaz_rezultata").html (data); });});});function place(ele){

$("#txt").val(ele.innerHTML);$("#livesearch").hide();

}</script><style type="text/css"> #livesearch{ margin:5px; width:220px; border: 1px solid; display: none; }#txt{ border: solid #A5ACB2; margin:5px; } </style></head><body onload="document.getElementById('txt').focus()"><form><input type="text" id="txt" size="32"> <div id="livesearch"></div><br/><div id="prikaz_rezultata"></div><input type="button" id="sub" value="Pronadji" >


suggest.php

<?phpif (!isset ($_GET["unos"])){echo "Parametar Unos nije prosleđen!";} else {$pomocna=$_GET["unos"];include "konekcija.php";$sql="SELECT id,drzava FROM Drzava WHERE drzava LIKE '$pomocna%'ORDER BY drzava";$rezultat = $mysqli->query($sql);if ($rezultat->num_rows==0){echo "U bazi ne postoji država koja počinje na " . $pomocna;} else {while($red = $rezultat->fetch_object()){?><a href="#" onclick="place(this)"><?php echo $red->drzava;?></a><br/><?php

17

}}$mysqli->close();}?>

pronadjiponazivu.php

<?phpif (!isset ($_GET["naziv"])){echo "Parametar Naziv nije prosleđen!";} else {$pomocna=$_GET["naziv"];include "konekcija.php";

$sql="SELECT * FROM Drzava WHERE drzava='".$pomocna."'";$rezultat = $mysqli->query($sql);

echo "<table border='1'><tr><th>Vecinski narod</th><th>Broj stanovnika</th><th>Glavni grad</th><th>Kontinent</th></tr>";

while($red = $rezultat->fetch_object()){ echo "<tr>"; echo "<td>" . $red->narod . "</td>"; echo "<td>" . $red->brstanovnika . "</td>"; echo "<td>" . $red->glgrad . "</td>"; echo "<td>" . $red->kontinent . "</td>"; echo "</tr>"; }echo "</table>";


Primer 3. Anketa koja prikazuje rezultate asinhronim pozivom nakon izbora drzave

U ovom primeru je prikazan jednostavan primer kreiranja ankete na stranici. Rezultati se biranja opcije prikazuju asinhrono.

18

konekcija.php


index.php

19

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="obradiglasanje.js" type="text/javascript"></script> </head><body><?phpinclude "konekcija.php";$sql="SELECT * FROM Drzava";$rezultat = $mysqli->query($sql);?><div id="poll"><h2>Za koju zemlju glasate?</h2><form><?phpwhile($red = $rezultat->fetch_object()){?><?php echo $red->drzava;?><input type="radio" name="vote" value="<?php echo $red->id;?>" onclick="glasaj(this.value)"><br><br><?php}$mysqli->close();?></form></div></body>

obradiglasanje.js

var xmlHttp

function glasaj(izbor){xmlHttp=GetXmlHttpObject();if (xmlHttp==null){ alert ("Browser does not support HTTP Request"); return; } var url="upisglasanja.php";url=url+"?glas="+izbor;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}

function stateChanged(){ if (xmlHttp.readyState==4){ document.getElementById("poll").innerHTML=xmlHttp.responseText; }

20

}

function GetXmlHttpObject(){ var objXMLHttp=nullif (window.XMLHttpRequest){ objXMLHttp=new XMLHttpRequest(); }else if (window.ActiveXObject){ objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); }return objXMLHttp;}

upisglasanja.php

<?phpif (!isset ($_GET["glas"])){echo "Parametar Glas nije prosleđen!";} else {$vote = $_GET['glas'];include "konekcija.php";$sql1 = "SELECT brglasova FROM Drzava WHERE id='".$vote."'"; //pronaći vrednost polja brglasova za izabranu zemlju$upit1 = $mysqli->query($sql1);$rezultat1 = $upit1->fetch_object();$novi_rezultat = $rezultat1->brglasova + 1;$sql2 = "UPDATE drzava SET brglasova=".$novi_rezultat." WHERE id='".$vote."'";//povećati broj glasova za jedan$rezultat2 = $mysqli->query($sql2);$sql3 = "SELECT SUM( brglasova ) as br FROM drzava"; //utvrditi ukupan broj glasova za sve zemlje zajedno$ukupanbroj = $mysqli->query($sql3);$objekat = $ukupanbroj->fetch_object();$ukupan_broj_glasova = $objekat->br;$sql4 = "SELECT drzava, brglasova FROM drzava";$konacni=$mysqli->query($sql4);echo "<table>";while($red = $konacni->fetch_object()){$drzava = $red->drzava;$brglasova = $red->brglasova;$procenat_glasova = 100*round($brglasova/$ukupan_broj_glasova,2);?><tr><td><b><?php echo $drzava; ?>:</b></td><td><img src="slika.gif" width="<?php echo($procenat_glasova); ?>" height="20"><b><?php echo($procenat_glasova); ?>%</b> </tr><?php}echo "</table>";$mysqli->close();}?>

21


konekcija.php


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function () {$(".radiodugme").change(function(){var vrednost = $("input[name='vote']:checked").val();$.get("upisglasanja.php", { glas: vrednost }, function(data){ $("#poll").html(data); });});});</script>

</head><body><?phpinclude "konekcija.php";$sql="SELECT * FROM Drzava";$rezultat = $mysqli->query($sql);?><div id="poll"><h2>Za koju zemlju glasate?</h2><form><?phpwhile($red = $rezultat->fetch_object()){?><?php echo $red->drzava;?><input type="radio" name="vote" value="<?php echo $red->id;?>" class="radiodugme"><br>

22

<br><?php}$mysqli->close();?></form></div></body>

upisglasanja.php

<?phpif (!isset ($_GET["glas"])){echo "Parametar Glas nije prosleđen!";} else {$vote = $_GET['glas'];include "konekcija.php";$sql1 = "SELECT brglasova FROM Drzava WHERE id='".$vote."'"; //pronaći vrednost polja brglasova za izabranu zemlju$upit1 = $mysqli->query($sql1);$rezultat1 = $upit1->fetch_object();$novi_rezultat = $rezultat1->brglasova + 1;$sql2 = "UPDATE drzava SET brglasova=".$novi_rezultat." WHERE id='".$vote."'";//povećati broj glasova za jedan$rezultat2 = $mysqli->query($sql2);$sql3 = "SELECT SUM( brglasova ) as br FROM drzava"; //utvrditi ukupan broj glasova za sve zemlje zajedno$ukupanbroj = $mysqli->query($sql3);$objekat = $ukupanbroj->fetch_object();$ukupan_broj_glasova = $objekat->br;$sql4 = "SELECT drzava, brglasova FROM drzava";$konacni=$mysqli->query($sql4);echo "<table>";while($red = $konacni->fetch_object()){$drzava = $red->drzava;$brglasova = $red->brglasova;$procenat_glasova = 100*round($brglasova/$ukupan_broj_glasova,2);?><tr><td><b><?php echo $drzava; ?>:</b></td><td><img src="slika.gif" width="<?php echo($procenat_glasova); ?>" height="20"><b><?php echo($procenat_glasova); ?>%</b> </tr><?php}echo "</table>";$mysqli->close();}?>

23

Primer 4. Provera postojanja države prilikom unosa nove države za registraciju

U ovom primeru se nakon pokušaja unosa imena baze u formi za registarciju nove države, asinhrono proverava da li takva država već postoji u bazi. Nakon unosa naziva države i prelaza na sledeće polja za unos, asinhrono se ispisuje upozorenje ukoliko takva država postoji u bazi.

konekcija.php


index.php

24

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Validacija forme</title><script type="text/javascript" src="provera.js"></script></head><body><form><h1>Ova forma služi kao primer korišćenja AJAX-a u validaciji forme</h1><br><h2>Podaci o državi</h2><br><b>Naziv države</b> <input type="text" name="naziv" id="ime" onblur="proveri(document.getElementById('ime').value)"><div id="user">Informacija o validnosti imena drzave</div><br><b>Narod</b> <input type="text" name="narod" id=""><br><br><b>Glavni grad</b> <input type="text" name="glgrad"><br><br><b>Broj stanovnika</b> <input type="text" name="brst"><br><br><br><b>Izaberite kontinent:</b><input type="radio" name="kont" value="eu"> Evropa<input type="radio" name="kont" value="af"> Afrika<input type="radio" name="kont" value="az"> Azija<br><br><input type="submit" value="Registruj" name="submit"> <input type="reset" value="Obrisi podatke" namer="reset"></form></body></html>

provera.js

var xmlHttpfunction proveri(str){xmlHttp=GetXmlHttpObject()if (xmlHttp==null){

25

alert ("Browser does not support HTTP Request") return} var url="provera.php"url=url+"?naziv="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged(){

if (xmlHttp.readyState==4){

if (xmlHttp.responseText=="0"){document.getElementById("user").innerHTML="Država sa

takvim imenom već postoji u bazi";document.getElementById("ime").focus();

} else {document.getElementById("user").innerHTML="Ime

države je dostupno";}

}}function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }

return xmlHttp;}

provera.php

<?phpif (!isset ($_GET["naziv"])){echo "Parametar Naziv nije prosleđen!";} else {$naziv=$_GET["naziv"];

26

include "konekcija.php";

$sql="SELECT * FROM Drzava WHERE drzava='".$naziv."'";$rezultat = $mysqli->query($sql);if ($rezultat->num_rows!=0){echo "0";} else {echo "1";}$mysqli->close();}?>


konekcija.php


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Validacija forme</title><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function () {$("#ime").blur(function(){var vrednost = $("#ime").val();$.get("provera.php", { naziv: vrednost }, function(data){ if (data == 0){ $("#user").html("Država sa takvim imenom već postoji u bazi"); $("#ime").focus(); } if (data == 1){ $("#user").html("Ime države je dostupno");

27

} });});});</script></head><body><form><h1>Ova forma služi kao primer korišćenja AJAX-a u validaciji forme</h1><br><h2>Podaci o državi</h2><br><b>Naziv države</b> <input type="text" name="naziv" id="ime"><div id="user">Informacija o validnosti imena drzave</div><br><b>Narod</b> <input type="text" name="narod" id=""><br><br><b>Glavni grad</b> <input type="text" name="glgrad"><br><br><b>Broj stanovnika</b> <input type="text" name="brst"><br><br><br><b>Izaberite kontinent:</b><input type="radio" name="kont" value="eu"> Evropa<input type="radio" name="kont" value="af"> Afrika<input type="radio" name="kont" value="az"> Azija<br><br><input type="submit" value="Registruj" name="submit"> <input type="reset" value="Obrisi podatke" namer="reset"></form></body></html>

provera.php

<?phpif (!isset ($_GET["naziv"])){echo "Parametar Naziv nije prosleđen!";} else {$naziv=$_GET["naziv"];

28

include "konekcija.php";

$sql="SELECT * FROM Drzava WHERE drzava='".$naziv."'";$rezultat = $mysqli->query($sql);if ($rezultat->num_rows!=0){echo "0";} else {echo "1";}$mysqli->close();}?>

Primer 5. Asinhrono brisanje reda iz tabele

Primer prikazuje asinhrono brisanje reda iz tabele.

29

konekcija.php


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

30

<script type="text/javascript" src="obrisi.js"></script></head><body><?phpinclude "konekcija.php";$sql="SELECT id, drzava, narod, glgrad, brstanovnika, kontinent FROM drzava";if (!$q=$mysqli->query($sql)){die ("Nastala je greška pri izvođenju upita<br/>" . $mysqli->error);}if ($q->num_rows==0){echo "Nema država";} else {//prelazi se u HTML ispis?><table id="ta" width="600" border="1" cellpadding="5" cellspacing="2" style="text-align:center "><tr><td><b>Država</b></td><td><b>Narod</b></td><td><b>Glavni grad</b></td><td><b>Broj stanovnika</b></td><td><b>Kontinent</b></td><td><b><i>Akcija</i></b></td></tr><?phpwhile ($red=$q->fetch_object()){?><tr><td><?php echo $red->drzava; ?></td> <td><?php echo $red->narod; ?></td><td><?php echo $red->glgrad; ?></td><td><?php echo $red->brstanovnika; ?></td><td><?php echo $red->kontinent; ?></td><td><a href="#" onclick="obrisi('<?php echo $red->id; ?>',this.parentNode.parentNode.rowIndex)">Obriši zemlju</a></td><?php}?></table><?php}$mysqli->close();?></body></html>

obrisi.js

var xmlHttpfunction obrisi(str,red){pomocna=parseInt(red)xmlHttp=GetXmlHttpObject()if (xmlHttp==null){ alert ("Browser does not support HTTP Request")

31

return}var url="obrisi.php"url=url+"?id="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged(){ if (xmlHttp.readyState==4){ if (xmlHttp.responseText==1){ //alert("Selektovana drzava je uspesno obrisana") document.getElementById("ta").deleteRow(pomocna);}}}

function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;}

obrisi.php

<?phpif (!isset ($_GET["id"])){echo "Parametar Id nije prosleđen!";} else {$id=$_GET["id"];include "konekcija.php";$sql="DELETE FROM drzava WHERE id='".$id."'";if ($rezultat = $mysqli->query($sql)){echo "1";}$mysqli->close();}?>


konekcija.php

<?php$mysql_server = "localhost";$mysql_user = "root";

32

$mysql_password = "";$mysql_db = "svet";$mysqli = new mysqli($mysql_server, $mysql_user, $mysql_password, $mysql_db);if ($mysqli->connect_errno) { printf("Konekcija neuspešna: %s\n", $mysqli->connect_error); exit();}$mysqli->set_charset("utf8");?>

index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function () {$(".obrisi_link").click(function(){var vrednost = ($(this).attr("id")).substring(7);var red_tabele = $(this);$.get("obrisi.php", { id: vrednost }, function(data){ if (data == 1){ $(red_tabele).parent().parent().remove(); } });});});</script></head><body><?phpinclude "konekcija.php";$sql="SELECT id, drzava, narod, glgrad, brstanovnika, kontinent FROM drzava";if (!$q=$mysqli->query($sql)){die ("Nastala je greška pri izvođenju upita<br/>" . $mysqli->error);}if ($q->num_rows==0){echo "Nema država";} else {//prelazi se u HTML ispis?><table id="ta" width="600" border="1" cellpadding="5" cellspacing="2" style="text-align:center "><tr><td><b>Država</b></td><td><b>Narod</b></td>

33

<td><b>Glavni grad</b></td><td><b>Broj stanovnika</b></td><td><b>Kontinent</b></td><td><b><i>Akcija</i></b></td></tr><?phpwhile ($red=$q->fetch_object()){

?><tr><td><?php echo $red->drzava; ?></td> <td><?php echo $red->narod; ?></td><td><?php echo $red->glgrad; ?></td><td><?php echo $red->brstanovnika; ?></td><td><?php echo $red->kontinent; ?></td><td><a href="#" class="obrisi_link" id="obrisi_<?php echo $red->id;?>">Obriši zemlju</a></td><?php}?></table><?php}$mysqli->close();?></body></html>

obrisi.php

<?phpif (!isset ($_GET["id"])){echo "Parametar Id nije prosleđen!";} else {$id=$_GET["id"];include "konekcija.php";$sql="DELETE FROM drzava WHERE id='".$id."'";if ($rezultat = $mysqli->query($sql)){echo "1";}$mysqli->close();}?>

Primer 6. Prikaz RSS-a

U ovom primeru se asinhrono prikazuje RSS feed

34

index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="getrss.js"></script></head><form> Odaberi RSS-Feed:<select onchange="showRSS(this.value)"><option value="B92">B92</option><option value="RTS">RTS</option></select></form><p><div id="rssOutput"><b>RSS Feed će biti prikazan u ovom delu.</b></div></p></body></html>

35

getrss.js

var xmlHttp

function showRSS(str){ xmlHttp=GetXmlHttpObject() if (xmlHttp==null){ alert ("Browser does not support HTTP Request") return } var url="getrss.php" url=url+"?feed="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) }

function stateChanged(){ if (xmlHttp.readyState==4) { document.getElementById("rssOutput") .innerHTML=xmlHttp.responseText } }

function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;}

getrss.php

<?phpif (!isset ($_GET["feed"])){echo "Parametar Feed nije prosleđen!";} else {$feed=$_GET["feed"];

switch ($feed){case "B92":$xml=("http://www.b92.net/info/rss/sport.xml");

36

break;case "RTS":$xml=("http://www.rts.rs/page/stories/ci/rss.html");break;default:echo "Nepostojeći feed!";die();}

$xmlDoc = new DOMDocument();$xmlDoc->load($xml);$x=$xmlDoc->getElementsByTagName('item');for ($i=0; $i<=2; $i++){ $item_title=$x->item($i)->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $item_link=$x->item($i)->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $item_desc=$x->item($i)->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue;

echo ("<p><a href='" . $item_link . "'>" . $item_title . "</a>"); echo ("<br />"); echo ($item_desc . "</p>");}}?>


index.php

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function () {$("#kombo_feed").change(function(){var vrednost = $("#kombo_feed").val();$.get("getrss.php", { feed: vrednost }, function(data){ $("#rssOutput").html(data); });});});</script></head><form> Odaberi RSS-Feed:

37

<select id="kombo_feed"><option value="B92">B92</option><option value="RTS">RTS</option></select></form><p><div id="rssOutput"><b>RSS Feed će biti prikazan u ovom delu.</b></div></p></body></html>

getrss.php

<?phpif (!isset ($_GET["feed"])){echo "Parametar Feed nije prosleđen!";} else {$feed=$_GET["feed"];

switch ($feed){case "B92":$xml=("http://www.b92.net/info/rss/sport.xml");break;case "RTS":$xml=("http://www.rts.rs/page/stories/ci/rss.html");break;default:echo "Nepostojeći feed!";die();}

$xmlDoc = new DOMDocument();$xmlDoc->load($xml);$x=$xmlDoc->getElementsByTagName('item');for ($i=0; $i<=2; $i++){ $item_title=$x->item($i)->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $item_link=$x->item($i)->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $item_desc=$x->item($i)->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue;

echo ("<p><a href='" . $item_link . "'>" . $item_title . "</a>"); echo ("<br />"); echo ($item_desc . "</p>");}}?>

38

Ajax Php Mysql

Documents