AJAX: Study Case

BY IN AJAX Comments Off on AJAX: Study Case

Anggaplah ada satu database sbb:

CREATE database `pabrik`;

CREATE TABLE `lampu`.`status` (
`id` INT( 6 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`Nama` VARCHAR( 10 ) NOT NULL ,
`statusA` ENUM( ‘1’, ‘2’, ‘3’ ) NOT NULL ,
`statusB` ENUM( ‘1’, ‘2’, ‘3’ ) NOT NULL
) ENGINE = MYISAM ;

anggap saja ada 3 baris data:

id | Nama | statusA | statusB
—————————————————
1 | pabrikA | 1 | 2
2 | pabrikB | 3 | 2

Bagian status itulah yang harus update terus tanpa reload halaman seluruhnya..

Jadi ketika record dalam database berubah, maka tampilan dalam website juga ikut berubah tanpa reload halaman…

Pertama2 kita siapkan file untuk menampilkan isi status terlebih dahulu

<script language=”Javascript”>

function ajax(){

var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e){
// Something went wrong
alert(“Your browser cannot support AJAX!”);
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById(‘Update’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;

}
else
{
var ajaxDisplay = document.getElementById(‘Update’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = “<img src=images/ajaxload.gif>”;
}
}

//ambil variabel status
var statusA=document.getElementById(‘statusA’).value;
var statusB=document.getElementById(‘statusB’).value;

//passing variabel ke PHP
var queryString = “?statusA=” + statusA + “&statusB=” + statusB;

ajaxRequest.open(“GET”, “update.php” + queryString, true);
ajaxRequest.send(null);

</script>

<body>

<div id=”Update”>

<?php
//baca dari tabel
@mysql_connect( $dbHost,$dbUser,$dbPasswd ) or error( mysql_error() );
mysql_select_db( ‘pabrik’ );

$sql=’SELECT * FROM lampu’
$result=mysql_query($sql);

while($data=mysql_fetch_array($result))
{
echo “<input type=’text’ value=’$data[statusA]’ id=’statusA’>”;
echo “<input type=’text’ value=’$data[statusB]’ id=’statusB’>”;

}

//buat tombol untuk panggil fungsi AJAX
echo “<input type=’button’ value=’Update’ onClick=’javascript:ajax();’”;

?>

</div>

</body>

selanjutnya kita buat file PHPnya

<?php
//baca dari parameter yang dikirim AJAX

$statusA=$_GET[‘statusA’];
$statusB=$_GET[‘statusB’];

//update database
$sql=”UPDATE lampu SET statusA=”. $statusA. “,statusB=”.$statusB;

//tampilkan
echo “<input type=’text’ value=’$statusA’ id=’statusA’>”;
echo “<input type=’text’ value=’$statusB’ id=’statusB’>”;

//buat tombol untuk panggil fungsi AJAX
echo “<input type=’button’ value=’Update’ onClick=’javascript:ajax();’”;

}
?>

Dari program di atas, kita dapat mengubah-ubah nilai status pada textbox yang langsung diupdate ke dalam database dan langsung pula berubah pada halaman yang sedang ditampilkan melalui proses AJAX. Semoga tulisan ini berguna bagi kita semua.




Comments are closed.