Konsep dari program ini sederhana, berupa aplikasi php untuk melakukan pencarian data seperti biasa. Namun, disini sedikit dikombinasikan dengan kemampuan baru dalam programing web yaitu AJAX. Untuk ajax nya saya menggunakan Jquery. Disini saya menggunakan metode parsingnya JSON untuk pertukaran data dari server ke clientnya.
Konsepnya client mengirimkan request ke server, dan server mengolah request tersebut dan memberikan respon berupa variabel data dalam bentuk JSON, yang kemudian
diterima oleh oleh javascript yang ada di client, dan oleh java script di generate menjadi sebuah dokumen HTML.
Konsepnya client mengirimkan request ke server, dan server mengolah request tersebut dan memberikan respon berupa variabel data dalam bentuk JSON, yang kemudian
diterima oleh oleh javascript yang ada di client, dan oleh java script di generate menjadi sebuah dokumen HTML.
Ok langsung saja ke intinya :
1. download jquery nya : http://code.jquery.com/jquery-1.4.4.js
2. ini script html nya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Kontak</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#kata_kunci').keyup(function(){
$.post('proses.php',
{
kunci : $(this).val()
},
function(data){
$('#hasil').html(data.list_kontak);
},'json');
});
});
</script>
</head>
<body>
<label>Cari kontak</label>
<input type="text" id="kata_kunci" />
<br />
<br />
<div id="hasil">hasil</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Kontak</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#kata_kunci').keyup(function(){
$.post('proses.php',
{
kunci : $(this).val()
},
function(data){
$('#hasil').html(data.list_kontak);
},'json');
});
});
</script>
</head>
<body>
<label>Cari kontak</label>
<input type="text" id="kata_kunci" />
<br />
<br />
<div id="hasil">hasil</div>
</body>
</html>
2. ini script PHP nya, Simpan dengan nama proses.php :
<?php
$host = 'localhost';
$user = 'root';
$pass = 'admin'; //samakan dengan password server situ
$db = 'telpon';
$konek = mysql_connect("$host","$user","$pass");
if (!$konek){
die('Gagal konek hahahaha: '. mysql_error());
}
mysql_select_db("$db", $konek);
$key = $_POST['kunci'];
$query = mysql_query("SELECT * from kontak WHERE nama LIKE '$key%'");
$data['list_kontak'] = "<table border='1'>";
$data['list_kontak'] .= "<tr>";
$data['list_kontak'] .= "<th width='50'>Nama</th>";
$data['list_kontak'] .= "<th width='70'>Nomor</th>";
$data['list_kontak'] .= "</tr>";
while($row = mysql_fetch_array($query))
{
$data['list_kontak'] .= "<tr>";
$data['list_kontak'] .= "<td>" . $row['nama'] . "</td>";
$data['list_kontak'] .= "<td>" . $row['no_telp'] . "</td>";
$data['list_kontak'] .= "</tr>";
}
$data['list_kontak'] .= "</table>";
echo json_encode($data);
mysql_close($konek);
?>
$host = 'localhost';
$user = 'root';
$pass = 'admin'; //samakan dengan password server situ
$db = 'telpon';
$konek = mysql_connect("$host","$user","$pass");
if (!$konek){
die('Gagal konek hahahaha: '. mysql_error());
}
mysql_select_db("$db", $konek);
$key = $_POST['kunci'];
$query = mysql_query("SELECT * from kontak WHERE nama LIKE '$key%'");
$data['list_kontak'] = "<table border='1'>";
$data['list_kontak'] .= "<tr>";
$data['list_kontak'] .= "<th width='50'>Nama</th>";
$data['list_kontak'] .= "<th width='70'>Nomor</th>";
$data['list_kontak'] .= "</tr>";
while($row = mysql_fetch_array($query))
{
$data['list_kontak'] .= "<tr>";
$data['list_kontak'] .= "<td>" . $row['nama'] . "</td>";
$data['list_kontak'] .= "<td>" . $row['no_telp'] . "</td>";
$data['list_kontak'] .= "</tr>";
}
$data['list_kontak'] .= "</table>";
echo json_encode($data);
mysql_close($konek);
?>
3. Ini databasenya :
create database if not exists `telpon`;
USE `telpon`;
/*Table structure for table `kontak` */
DROP TABLE IF EXISTS `kontak`;
CREATE TABLE `kontak` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(25) DEFAULT NULL,
`no_telp` varchar(15) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
/*Data for the table `kontak` */
insert into `kontak`(`id`,`nama`,`no_telp`) values
(1,'Aku','085721478977'),(2,'Dia','081321446797'),(3,'Fani','085222467997'),(4,'\
Lia','083829263177'),(5,'Banu','085664797977'),(6,'Feri','08882467979');
USE `telpon`;
/*Table structure for table `kontak` */
DROP TABLE IF EXISTS `kontak`;
CREATE TABLE `kontak` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(25) DEFAULT NULL,
`no_telp` varchar(15) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
/*Data for the table `kontak` */
insert into `kontak`(`id`,`nama`,`no_telp`) values
(1,'Aku','085721478977'),(2,'Dia','081321446797'),(3,'Fani','085222467997'),(4,'\
Lia','083829263177'),(5,'Banu','085664797977'),(6,'Feri','08882467979');
