Post ini merupakan balasan dari pertanyaan
http://catment.blogspot.com/2010/03/konsultasi-dan-pertanyaan-seputar-web.html?showComment=1303962877607#c5141183143205731266
Sebenarnya dasar dari tutorial ini seperti ajax sugestion tetapi dengan beberapa perubahan.
Langsung aja:
Misal database'a dg nama db_kampus:
CREATE TABLE `kp_kota` (
`id_kota` smallint(2) NOT NULL auto_increment,
`kode` varchar(5) NOT NULL,
`kota` varchar(50) NOT NULL,
PRIMARY KEY (`id_kota`),
KEY `kode` (`kode`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
INSERT INTO `kp_kota` VALUES (1, 'jkt', 'Dki Jakarta');
INSERT INTO `kp_kota` VALUES (2, 'bdg', 'Bandung');
INSERT INTO `kp_kota` VALUES (3, 'sby', 'Surabaya');
INSERT INTO `kp_kota` VALUES (4, 'diy', 'Jogja');
CREATE TABLE `kp_mahasiswa` (
`id_mahasiswa` smallint(2) NOT NULL auto_increment,
`nim` varchar(15) NOT NULL,
`nama` varchar(100) NOT NULL,
PRIMARY KEY (`id_mahasiswa`),
UNIQUE KEY `nim` (`nim`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
INSERT INTO `kp_mahasiswa` VALUES (1, '611070085', 'Catur A.');
INSERT INTO `kp_mahasiswa` VALUES (2, '611070081', 'Reza N.');
Selanjutnya mari kita buat halaman index.php yang berisi form untuk memanggil data yang berhubungan dengan teks yang kita masukan pada field input text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Demo Contoh Script Tutorial Ajax Chat Online Support" />
<meta name="keyword" content="tutorial ajax,script ajax,ajax,tutorial,script,contoh,php,javascript" />
<meta name="author" content="bobybibbob - catment.blogspot.com" />
<title>Tutorial Ajax - catment.blogspot.com</title>
</head>
<body>
<table>
<tr>
<td>NIM</td>
<td>: <input type="text" name="nim" id="nim" onkeyup="req_nama(this.value,document.getElementById('nama'),'start');" /></td>
</tr>
<tr>
<td>Nama</td>
<td>: <input type="text" name="nama" id="nama" /></td>
</tr>
<tr>
<td>Kode Kota</td>
<td>: <input type="text" name="kode" id="kode" onkeyup="req_kota(this.value,document.getElementById('kota'),'start');" /></td>
</tr>
<tr>
<td>Nama Kota</td>
<td>: <input type="text" name="kota" id="kota" /></td>
</tr>
</table>
<script type="text/javascript" language="javascript">
<!--
var xmlhttp;
var nim;
var kota;
var area;
var timer;
/*req_nama*/
function req_nama(get_nim,get_area,flag)
{
clearTimeout(timer);
nim=get_nim;
area=get_area;
if(flag=="start")
{
timer=setTimeout("req_nama(nim,area,'delay')",1000);
}
else if(flag=="delay")
{
if(get_nim==document.getElementById("nim").value)
{
var url="nama.php?rand="+Math.random();
var post="nim="+nim+"&act=req_nama";
ajax(url,post,area);
}
else
{timer=setTimeout("req_nama(nim,area,'delay')",1000);}
}
}
/*--------*/
/*req_kota*/
function req_kota(get_kode,get_area,flag)
{
clearTimeout(timer);
kode=get_kode;
area=get_area;
if(flag=="start")
{
timer=setTimeout("req_kota(kode,area,'delay')",1000);
}
else if(flag=="delay")
{
if(get_kode==document.getElementById("kode").value)
{
var url="kota.php?rand="+Math.random();
var post="kode="+kode+"&act=req_kota";
ajax(url,post,area);
}
else
{timer=setTimeout("req_kota(nim,area,'delay')",1000);}
}
}
/*--------*
/*ajax*/
function ajax(url,post,area)
{
xmlhttp=GetXmlHttpObject();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
area.value=xmlhttp.responseText;
}
else{ajax_fail();}
}
}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
}
/*--------*/
/*ajax_fail*/
function ajax_fail()
{
alert("There's a problem with the ajax, please reload the page.");
return false;
}
/*--------*/
/*pilih xmlhttp berdasarkan browser*/
function GetXmlHttpObject()
{
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{alert("Maaf browser anda tidak mendukung ajax.");}
return false;
}
/*--------*/
//-->
</script>
</body>
</html>
Selanjutnya kita membutuhkan file yang berfungsi untuk menghubungkan ke database. Simpan file ini dalam folder config dengan nama file "db_config.php"
<?php
$hostname_conn="localhost";
$username_conn="root";
$password_conn="bismillah";
$db_conn="db_kampus";
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Sorry, there's a problem with our database.");
mysql_select_db($db_conn);
?>File yang akan memproses ajax ada 2 yaitu:
nama.php
<?php
include_once"config/db_config.php";
$nim=$_POST['nim'];
$act=$_POST['act'];
if($act=="req_nama")
{
/*select mahasiswa*/
$command="SELECT * FROM kp_mahasiswa WHERE nim='$nim'";
$select=mysql_query($command);
$row=mysql_fetch_array($select);
/*--------*/
echo"$row[nama]";
}
else{header("Location: index.php");}
?>
kota.php
<?php
include_once"config/db_config.php";
$kode=$_POST['kode'];
$act=$_POST['act'];
if($act=="req_kota")
{
/*select mahasiswa*/
$command="SELECT * FROM kp_kota WHERE kode='$kode'";
$select=mysql_query($command);
$row=mysql_fetch_array($select);
/*--------*/
echo"$row[kota]";
}
else{header("Location: index.php");}
?>
Selesai! Silahkan coba.. :)
Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com
YM:
tawank_x
bobybibbob
