proses(PHP,ASP, dll) dan kemudian output dari file proses akan disisipkan pada bagian tertentu halaman web. berbeda dengan mekanisme pengiriman data biasa halaman akan terrefresh dan hal ini membutuhkan watu yang lebih lama.
proses pengiriman data mengguakan ajax:
jika client mengirimkan permintaan maka javascript akan mengirimkan permintaan client ke web server menggunakan HTTP request dan kemudian web server akan mencarinya didatabase jika ada maka web server akan mengirimkannya ke browser client menggunakan Format data XML yang kemudian akan dirubah ke format data html dan disisipkan dibagian tertentu dari halaman web.
proses pengiriman data biasa :
.jpg)
proses seperti gambar diatas akan membutuhkan waktu yang lama karena setiap kali client mengirimkan permintaan ke server halaman akan terreload kembali.
langsung saja kita praktekkan membuat form pencarian data menggunakan ajax:
1. Membuat database
Create database tugas;
Copy paste kode dibawah ini:
CREATE TABLE IF NOT EXISTS `transaksi` (
`id_transaksi`
int(5) DEFAULT NULL,
`pelanggan`
varchar(25) DEFAULT NULL,
`barang` varchar(25)
DEFAULT NULL,
`harga` int(12)
DEFAULT NULL,
`jumlah` int(10)
DEFAULT NULL,
`diskon` int(19)
DEFAULT NULL
)
Kode diatas digunakan untuk membuat table transaksi. Isikan juga
data kedalam table tersebut:
INSERT INTO `transaksi` (`id_transaksi`, `pelanggan`,
`barang`, `harga`, `jumlah`, `diskon`) VALUES
(101, 'ade', 'gula', 6000, 5, 0),
(102, 'leni', 'beras', 10000, 15, 1500),
(103, 'budi', 'beras', 10000, 8, 1000),
(104, 'budi', 'telur', 4500, 10, 1500),
(105, 'leni', 'gula', 6000, 12, 1500),
(106, 'ida', 'telur', 4500, 10, 1000),
(107, 'ahmad', 'minyak', 5000, 9, 1000),
(108, 'ade', 'beras', 10000, 4, 0),
(109, 'ahmad', 'beras', 10000, 8, 1000),
(110, 'leni', 'telur', 4500, 13, 1500),
(111, 'almi', 'telur', 5000, 2, 1000);
2. Setelah itu buat file index.html:
<html>
<head>
<title>Belajar Ajax</title>
<script type="text/javascript">
var xmlHttp= createxmlHttpRequestObject();
function createxmlHttpRequestObject(){
var
xmlHttp;
if(window.ActiveXobject){
try{
xmlHttp=new
ActiveXobject("Microsoft.XMLHTTP");
}catch
(e){
xmlHttp=false;
}
}else{
try{
xmlHttp=new
XMLHttpRequest();
}catch
(e){
xmlHttp=false;
}
}
if(xmlHttp==false)
alert("Browser Tidak Dikenali");
else
return xmlHttp;
}
function proses(){
if(xmlHttp.readyState==4
|| xmlHttp.readyState==0){
nama=document.getElementById('nama').value;
xmlHttp.open('GET','proses.php?n='+nama,true);
xmlHttp.onreadystatechange=handleServerResponse;
xmlHttp.send();
}
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200)
document.getElementById('hasil').innerHTML=xmlHttp.responseText;
else
alert("terjadi
kesalahan !"+xmlHttp.statusText);
}
}
</script>
</head>
<body onLoad="proses();">
<input type="text" id="nama">
<button id="tbl"
onClick="proses();">Tampilkan Data</button>
<div id="hasil"></div>
</body>
</html>
Penjelasan:
Perhatikan kode
var xmlHttp= createxmlHttpRequestObject();
terdapat variable xmlHttp, variable ini memanggil fungsi createxmlHttpRequestObject()
dimana fungsi ini akan mengambalikan object berupa detail browser klient yang
digunakan.
<body onLoad="proses();">
Pada saat halaman dibuka maka fungsi proses akan dijalankan
<input type="text" id="nama">
<button id="tbl" onClick="proses();">Tampilkan
Data</button>
Disitu terdapat form jika tombol di klik maka akan memanggil
fungsi proses, dimana fungsi ini akan mengambil value dari input text yang
kemudian mengirimkan datanya ke file proses dengan method get dengan parameter
n. dan jika file proses sudah mengerjakan tugasnya dan selesai tanpa error maka
fungsi handleServerResponse dijalankan. Dimana fungsi ini akan menginsertkan
output dari file proses kedalam div id hasil.
document.getElementById('hasil').innerHTML=xmlHttp.responseText;
3. membuat file proses.php
<?php
mysql_connect("localhost","root","almi1711");
mysql_select_db("tugas");
$nama=$_GET['n'];
$sql=mysql_query("select * from transaksi where
pelanggan like '%$nama%'");
$no=1;
echo "<table border=1>";
echo
"<tr><td>No</td><td>Nama</td><td>Alamat</td><td>Kota</td><td>Gaji</td></tr>";
while($data=mysql_fetch_array($sql)){
echo
"<tr><td>".$no."</td><td>".$data['pelanggan']."</td><td>".$data['barang']."</td><td>".$data['harga']."</td><td>".$data['jumlah']."</td></tr>";
$no++;
}
echo "</table>";
?>
File proses digunakan untuk memproses permintaan file index
yang kemudian hasilnya akan dikirimkan menggunkan ajax. Perhatikan kode
$nama=$_GET['n'];
Data inputan dari file index akan disimpan dalam variable nama.
$sql=mysql_query("select * from transaksi where
pelanggan like '%$nama%'");
Melakukan query ke database untuk mencari pelanggan yang
namanya mengandung kata yang diinputkan user.
while($data=mysql_fetch_array($sql)){
echo "<tr><td>".$no."</td><td>".$data['pelanggan']."</td><td>".$data['barang']."</td><td>".$data['harga']."</td><td>".$data['jumlah']."</td></tr>";
$no++;
}
Mengulang data dari database yang ditampilkan berupa table.
Sekian tutorial dari saya.
0 komentar:
Posting Komentar