var xmlhttp;
//variabel ini untuk menampilkan halaman yang sudah diupdate
var mydiv;
Salah satu contoh fungsinya adalah sebagai berikut:
function showTransactions(str,str1)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="ajaxTransactions.php";
mydiv = "show_transactions";
str=document.form1.string1.value;
str1=document.form1.string2.value;
url=url+"?str="+str+"&str1="+str1;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
if (mydiv=="show_transactions")
{
document.getElementById("txtTransaction").innerHTML=xmlhttp.responseText;
}
}
}
}
[ add comment ] | permalink |
( 0 / 0 )Mungkin seringkali kita bertanya2, bagaimana caranya membuat timer yang realtime pada halaman web kita. Salah satu contoh yang mungkin kita tahu adalah game Mafia Wars dari Facebook. Karena Facebook diakses di seluruh dunia dimana menggunakan zona waktu yang berbeda, maka tidak mungkin kita menggunakan time yang ada di client. Dan timer ini akan tetap tersimpan dalam database server, seandainya terjadi koneksi terputus pada komputer client, padahal client belum sempat logout.
Dari beberapa fakta ini, saya bisa menyimpulkan:
1. Tidak mungkin menggunakan time yang ada di client untuk kebutuhan ini.
2. Database harus selalu terupdate, artinya setiap detik akan terjadi proses pengupdatean data di server. Seandainya terjadi kesalahan pada komputer client, data sudah tersimpan dengan aman di server.
Salah satu teknik yang bisa digunakan untuk kebutuhan tersebut adalah AJAX, karena AJAX memungkinkan terciptanya hubungan ke server tanpa harus reload seluruh halaman. Dan bahkan, user sendiri mungkin tidak akan merasa bahwa sudah terjadi proses update data ke server.
Berikut adalah contoh script timer dengan menggunakan AJAX
<html>
<head>
<title>Ajax Example</title>
<script language="Javascript">
function postRequest(strURL) {
var xmlHttp;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatepage(str){
document.getElementById("result").innerHTML =
"<font color='red' size='5'>" + str + "</font>";;
}
function showCurrentTime(){
var rnd = Math.random();
var detik = document.getElementById("detik").value;
var menit = document.getElementById("menit").value;
var jam = document.getElementById("jam").value;
if (detik<=0) {
detik=59;
document.getElementById("detik").value=detik;
if (menit<=0) {
menit=59;
document.getElementById("menit").value=menit;
jam=jam-1;
document.getElementById("jam").value=jam;
} else {
menit=menit-1;
document.getElementById("menit").value=menit;
}
} else {
detik=detik-1;
document.getElementById("detik").value=detik;
}
var url="timer.php?id="+rnd+"&jam="+jam+"&menit="+menit+"&detik="+detik;
postRequest(url);
timedRefresh(1000);
}
function timedRefresh(timeoutPeriod) {
setTimeout("showCurrentTime();",timeoutPeriod);
}
</script>
</head>
<body>
<?php
//remaining time in minutes
$remaining=500;
//convert in hour
$jam=intval($remaining/60);
//convert in minutes
$menit=intval($remaining % 60);
//initial second: 59
$detik=59;
echo "Jam Check In: ". date("H:i:s");
echo $jam;
?>
<form name="f1">
<p align="center">
<input value="Start" type="button" onclick='JavaScript:showCurrentTime()' name="startcounter">
<input value="<?php echo $jam?>" type="text" name="jam" id="jam" style="display:none">
<input value="<?php echo $menit?>" type="text" name="menit" id="menit" style="display:none">
<input value="<?php echo $detik?>" type="text" name="detik" id="detik" style="display:none">
</p>
</form>
<!-- tempat AJAX mengupdate halaman web -->
<div id=result></div>
</body>
</html>
dan berikut adalah file PHP yang dipanggil AJAX
<?php
//print date("H:i:s");
echo "Waktu tersisa: ".$_GET['jam']." jam ".$_GET['menit']." menit ".$_GET['detik']." detik";
?>
Jika dijalankan, script diatas akan menghitung mundur dari variabel yang sudah dimasukkan, dalam contoh diatas adalah 500 menit. Kita dapat memodifikasi script ini dengan menambahkan fungsi update database pada file PHPnya, sehingga setiap saat akan terjadi update database. Semoga tulisan ini bisa membantu rekan2 semua.
By: Wahyu Kurniawan
[ add comment ] | permalink |
( 0 / 0 )Terkadang kita membutuhkan melihat sebuah nilai yang ada di database lalu ditampilkan di website, tanpa trigger dari user. Artinya kita memanggil fungsi AJAX secara terus menerus, untuk dapat memantau sebuah nilai yang tersimpan dalam database kita.
Pertama2 kita buat fungsi AJAXnya dulu:
<html>
<head>
<script language="Javascript">
function postRequest(strURL) {
var xmlHttp;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatepage(str){
document.getElementById("result").innerHTML =
"<font color='red' size='5'>" + str + "</font>";;
}
function showCurrentStatus(){
var rnd = Math.random();
var url="retrieve.php?id="+rnd;
postRequest(url);
timedRefresh(5000);
}
function timedRefresh(timeoutPeriod) {
setTimeout("showCurrentStatus();",timeoutPeriod);
}
</script>
</head>
<body onLoad='JavaScript:showCurrentStatus()'>
<div id=result>
</div>
</body>
</html>
Penjelasan dr script singkat diatas, pada saat halaman diload, fungsi showCurrentStatus akan dipanggil, dimana fungsi ini nantinya akan mengeksekusi fungsi AJAX untuk menjalankan file PHP yang digunakan untuk mengambil nilai dari tabel. Setelah itu, fungsi ini akan memanggil dirinya sendiri selang beberapa detik yang bisa kita set, sehingga kita akan dapatkan fungsi rekursif.
Berikut contoh file retrieve.php yang dipanggil AJAX
<?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 $data[statusA];
echo $data[statusB];
echo $data[statusC];
}
?>
[ add comment ] | permalink |
( 0 / 0 )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.
[ add comment ] | permalink |
( 0 / 0 )Berikut adalah cara membuat slide show dengan jQuery:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
<style type="text/css">
body{
font-family:arial
}
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
</head>
Untuk menggunakannya, kita tinggal memasukkan image dalam id=galery
[ add comment ] | permalink |
( 0 / 0 )
Calendar
