Ajax PHP Mysql

AJAX, PHP, MySQL. Primeri.
SADRAJ
Kreiranje baze i ubacivanje podataka....................................................................................3 Primer 1. Ispis na osnovu selektovane vrednosti u combo box..........................................4 Primer 1 uraen korienjem JQuery biblioteke................................................................7 Primer 2. Autosuggest i autocomplete...................................................................................9 Primer 2 uraen korienjem JQuery biblioteke...............................................................12 Primer 2a. Nadograeni primer 2........................................................................................14 Primer 2a uraen korienjem JQuery biblioteke.............................................................16 Primer 3. Anketa koja prikazuje rezultate asinhronim pozivom nakon izbora drzave...........18 Primer 3 uraen korienjem JQuery biblioteke...............................................................22 Primer 4. Provera postojanja drave prilikom unosa nove drave za registraciju................24 Primer 4 uraen korienjem JQuery biblioteke ..............................................................27 Primer 5. Asinhrono brisanje reda iz tabele.........................................................................29 Primer 5 uraen korienjem JQuery biblioteke ..............................................................32 Primer 6. Prikaz RSS-a.......................................................................................................34 Primer 6 uraen korienjem JQuery biblioteke...............................................................37
Kreiranje baze i ubacivanje podataka

U primerima koji slede koristi se baza pod nazivom svet. Upiti pomou 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:
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 dravi.
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 neuspena: %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=utf8" /> <script type="text/javascript" src="pronadji.js"></script> </head> 4
<body> <?php include "konekcija.php"; $sql="SELECT * FROM Drzava"; $rezultat = $mysqli->query($sql); ?> <form> <b>Izaberi dravu:</b> <select name="drzave" onchange="PrikaziZemlju(this.value)"> <?php while($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 dravi e biti prikazani ovde. Stranica se ne uitava ponovo.</b></div></p> <?php $mysqli->close(); ?> </body> </html> pronadji.js var xmlHttp; function PrikaziZemlju(str){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null){ alert ("Browser ne podrava xmlHttpRequest"); return; } var url="prikazidrzavu.php"; url=url+"?id="+str; //ne dozvoli keiranje url=url+"&sid="+Math.random(); //obrada promene stanja objekta xmlHttpRequest xmlHttp.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 <?php if (!isset ($_GET["id"])){ echo "Parametar ID nije prosleen!"; } else { $pomocna=$_GET["id"]; //uspostavljanje konekcije include "konekcija.php"; //citanje podataka o drzavi $sql="SELECT * FROM Drzava WHERE id='".$pomocna."'"; $rezultat = $mysqli->query($sql); //ispis naziva kolona u tabeli echo "<table border='1'> <tr> <th>Drava</th> <th>Veinski narod</th> <th>Broj stanovnika</th> <th>Glavni grad</th> <th>Kontinent</th> </tr>"; //ispis podataka o zemlji while($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(); } ?>
Primer 1 uraen korienjem JQuery biblioteke

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 neuspena: %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=utf8" /> <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> <?php include "konekcija.php"; $sql="SELECT * FROM Drzava"; $rezultat = $mysqli->query($sql); ?> <form> <b>Izaberi dravu:</b> <select name="drzave" id="kombo_drzave"> <?php while($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 dravi e prikazani ovde. Stranica se ne uitava ponovo.</b></div></p> <?php $mysqli->close(); ?> </body> </html> prikazidrzavu.php <?php if (!isset ($_GET["id"])){ echo "Parametar ID nije prosleen!"; } else { $pomocna=$_GET["id"]; //uspostavljanje konekcije include "konekcija.php"; //citanje podataka o drzavi $sql="SELECT * FROM Drzava WHERE id='".$pomocna."'"; $rezultat = $mysqli->query($sql); //ispis naziva kolona u tabeli echo "<table border='1'> <tr> <th>Drava</th> <th>Veinski narod</th> <th>Broj stanovnika</th> <th>Glavni grad</th> <th>Kontinent</th> </tr>"; //ispis podataka o zemlji while($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(); } ?>
biti
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 odreene drave, njen naziv se automatski ubacuje u text-box
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 neuspena: %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=utf8" /> <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 xmlHttp function 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.responseTex t; 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 <?php if (!isset ($_GET["unos"])){ echo "Parametar Unos nije prosleen!"; } 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 drava koja poinje na " . $pomocna; } else { while($red = $rezultat->fetch_object()){ ?> <a href="#" onclick="place(this)"><?php echo $red->drzava;?></a> <br/> <?php } } $mysqli->close(); } ?>

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 neuspena: %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=utf8" /> <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> </form> </body> </html>
suggest.php <?php if (!isset ($_GET["unos"])){ echo "Parametar Unos nije prosleen!"; } 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 drava koja poinje 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. Nadograeni primer 2

Kao nadogradnja prethodnog primera, mogu se iskombinovati primeri 1 i 2. U primeru 2 treba ubaciti sledee 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.responseTex t; 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 <?php 14
if (!isset ($_GET["naziv"])){ echo "Parametar Naziv nije prosleen!"; } 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>"; $mysqli->close(); } ?>
Istovremeno, neophodno je uneti promene u fajl index.php: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <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; } #txt{ 15
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 uraen korienjem JQuery biblioteke

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 neuspena: %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=utf8" /> <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(){ var vrednost = $("#txt").val(); 16
$.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" > </form> </body> </html> suggest.php <?php if (!isset ($_GET["unos"])){ echo "Parametar Unos nije prosleen!"; } 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 drava koja poinje 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 <?php if (!isset ($_GET["naziv"])){ echo "Parametar Naziv nije prosleen!"; } 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>"; $mysqli->close(); } ?>
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 <?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 neuspena: %s\n", $mysqli->connect_error); exit(); } $mysqli->set_charset("utf8"); ?>
index.php 19
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <script src="obradiglasanje.js" type="text/javascript"></script> </head> <body> <?php include "konekcija.php"; $sql="SELECT * FROM Drzava"; $rezultat = $mysqli->query($sql); ?> <div id="poll"> <h2>Za koju zemlju glasate?</h2> <form> <?php while($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=null if (window.XMLHttpRequest){ objXMLHttp=new XMLHttpRequest(); } else if (window.ActiveXObject){ objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); } return objXMLHttp; } upisglasanja.php <?php if (!isset ($_GET["glas"])){ echo "Parametar Glas nije prosleen!"; } else { $vote = $_GET['glas']; include "konekcija.php"; $sql1 = "SELECT brglasova FROM Drzava WHERE id='".$vote."'"; //pronai 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."'";//poveati 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 <?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 neuspena: %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=utf8" /> <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> <?php include "konekcija.php"; $sql="SELECT * FROM Drzava"; $rezultat = $mysqli->query($sql); ?> <div id="poll"> <h2>Za koju zemlju glasate?</h2> <form> <?php while($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 <?php if (!isset ($_GET["glas"])){ echo "Parametar Glas nije prosleen!"; } else { $vote = $_GET['glas']; include "konekcija.php"; $sql1 = "SELECT brglasova FROM Drzava WHERE id='".$vote."'"; //pronai 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."'";//poveati 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 drave prilikom unosa nove drave za registraciju

U ovom primeru se nakon pokuaja unosa imena baze u formi za registarciju nove drave, asinhrono proverava da li takva drava ve postoji u bazi. Nakon unosa naziva drave i prelaza na sledee polja za unos, asinhrono se ispisuje upozorenje ukoliko takva drava postoji u bazi.
index.php 24
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Validacija forme</title> <script type="text/javascript" src="provera.js"></script> </head> <body> <form> <h1>Ova forma slui kao primer korienja AJAX-a u validaciji forme</h1> <br> <h2>Podaci o dravi</h2> <br> <b>Naziv drave</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 xmlHttp function proveri(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null){ 25
alert ("Browser does not support HTTP Request") return } var url="provera.php" url=url+"?naziv="+str url=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="Drava sa takvim imenom ve postoji u bazi"; document.getElementById("ime").focus(); } else { document.getElementById("user").innerHTML="Ime drave 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 <?php if (!isset ($_GET["naziv"])){ echo "Parametar Naziv nije prosleen!"; } 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(); } ?>

index.php <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <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("Drava sa takvim imenom ve postoji u bazi"); $("#ime").focus(); } if (data == 1){ $("#user").html("Ime drave je dostupno"); 27
} }); }); }); </script> </head> <body> <form> <h1>Ova forma slui kao primer korienja AJAX-a u validaciji forme</h1> <br> <h2>Podaci o dravi</h2> <br> <b>Naziv drave</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 <?php if (!isset ($_GET["naziv"])){ echo "Parametar Naziv nije prosleen!"; } 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
index.php <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> 30
<script type="text/javascript" src="obrisi.js"></script> </head> <body> <?php include "konekcija.php"; $sql="SELECT id, drzava, narod, glgrad, brstanovnika, kontinent FROM drzava"; if (!$q=$mysqli->query($sql)){ die ("Nastala je greka pri izvoenju upita<br/>" . $mysqli->error); } if ($q->num_rows==0){ echo "Nema drava"; } else { //prelazi se u HTML ispis ?> <table id="ta" width="600" border="1" cellpadding="5" cellspacing="2" style="text-align:center "> <tr> <td><b>Drava</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> <?php while ($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)">Obrii zemlju</a></td> <?php } ?> </table> <?php } $mysqli->close(); ?> </body> </html> obrisi.js var xmlHttp function 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="+str url=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 <?php if (!isset ($_GET["id"])){ echo "Parametar Id nije prosleen!"; } 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 neuspena: %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=utf8" /> <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> <?php include "konekcija.php"; $sql="SELECT id, drzava, narod, glgrad, brstanovnika, kontinent FROM drzava"; if (!$q=$mysqli->query($sql)){ die ("Nastala je greka pri izvoenju upita<br/>" . $mysqli->error); } if ($q->num_rows==0){ echo "Nema drava"; } else { //prelazi se u HTML ispis ?> <table id="ta" width="600" border="1" cellpadding="5" cellspacing="2" style="text-align:center "> <tr> <td><b>Drava</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> <?php while ($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;? >">Obrii zemlju</a></td> <?php } ?> </table> <?php } $mysqli->close(); ?> </body> </html> obrisi.php <?php if (!isset ($_GET["id"])){ echo "Parametar Id nije prosleen!"; } 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=utf8" /> <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 <?php if (!isset ($_GET["feed"])){ echo "Parametar Feed nije prosleen!"; } 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 "Nepostojei 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=utf8" /> <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 <?php if (!isset ($_GET["feed"])){ echo "Parametar Feed nije prosleen!"; } 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 "Nepostojei 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

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ajax PHP Mysql

Transféré par

Droits d'auteur :

Formats disponibles

AJAX, PHP, MySQL. Primeri.

Kreiranje baze i ubacivanje podataka

Baza sada izgleda ovako:

Primer 1. Ispis na osnovu selektovane vrednosti u combo box

Primer 1 uraen korienjem JQuery biblioteke

Primer 2. Autosuggest i autocomplete

Selektovanjem odreene drave, njen naziv se automatski ubacuje u text-box

Primer 2 uraen korienjem JQuery biblioteke

Primer 2a. Nadograeni primer 2

Primer 2a uraen korienjem JQuery biblioteke

Primer 3 uraen korienjem JQuery biblioteke

Primer 4. Provera postojanja drave prilikom unosa nove drave za registraciju

provera.js var xmlHttp function proveri(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null){ 25

Primer 4 uraen korienjem JQuery biblioteke

Primer 5. Asinhrono brisanje reda iz tabele

Primer 5 uraen korienjem JQuery biblioteke

Primer 6. Prikaz RSS-a

Primer 6 uraen korienjem JQuery biblioteke

Vous aimerez peut-être aussi