Teknik AJAX sangat menarik untuk dipelajari, karena teknik ini bisa kita gunakan untuk menampilkan data hasil proses query tanpa harus merefresh page HTML yg sudah ada. Saya mulai menggunakan teknik ini saat membuat program keuangan. Disitu dibutuhkan tampilan data COA (code of account) saat kita ketikkan kodenya. Teknik AJAX merupakan kombinasi script PHP, Javascript dan XML.
Pada contoh script disini, saya gunakan teknik dasar AJAX, dengan harapan bisa lebih mudah dipahami, meskipun memang banyak sekali di internet kita temukan file-file class php yg menyediakan akses teknik AJAX.
Pada contoh dibawah, terdapat 2 event yg menggunakan teknik AJAX. Satu, event untuk menampilkan keterangan kode account setelah diisikan kode account (COA) nya - yg diambil langsung dari database MySQL, kedua, event untuk menampilkan titik ribuan saat dituliskan angka transaksi.
<TABLE width="66%">
<TR>
<TD><INPUT maxLength=16 size=12 type=text name="kode" onBlur="akun(this.value)"></TD>
<TD><INPUT maxLength=70 size=50 type=text name="note" id="note"> Rp.<INPUT maxLength=16 size=16 type=text name="nilai" id="isian" onChange="titik()" align=right></TD></TR>
</TABLE>
Input pertama pada kode HTML diatas terdapat event onBlur yg membangkitkan fungsi akun(nilai) yg digunakan untuk menampilkan keterangan kode account. Input kedua terdapat event onChange yg membangkitkan fungsi titik() yg digunakan untuk menampilkan titik ribuan pada angka.
Pada contoh script disini, saya gunakan teknik dasar AJAX, dengan harapan bisa lebih mudah dipahami, meskipun memang banyak sekali di internet kita temukan file-file class php yg menyediakan akses teknik AJAX.
Pada contoh dibawah, terdapat 2 event yg menggunakan teknik AJAX. Satu, event untuk menampilkan keterangan kode account setelah diisikan kode account (COA) nya - yg diambil langsung dari database MySQL, kedua, event untuk menampilkan titik ribuan saat dituliskan angka transaksi.
<TABLE width="66%">
<TR>
<TD><INPUT maxLength=16 size=12 type=text name="kode" onBlur="akun(this.value)"></TD>
<TD><INPUT maxLength=70 size=50 type=text name="note" id="note"> Rp.<INPUT maxLength=16 size=16 type=text name="nilai" id="isian" onChange="titik()" align=right></TD></TR>
</TABLE>
Input pertama pada kode HTML diatas terdapat event onBlur yg membangkitkan fungsi akun(nilai) yg digunakan untuk menampilkan keterangan kode account. Input kedua terdapat event onChange yg membangkitkan fungsi titik() yg digunakan untuk menampilkan titik ribuan pada angka.
var url1 = "search1.php?q=";
function akun(x) {
if (!done &&amp;amp; http) {
var term = x;
http.open('GET', url1 + term, true);
http.onreadystatechange = handleHttpResponse1
http.send(null);
}
}
var url2 = "search2.php?q=";
function titik() {
if (!done && http) {
var term = document.getElementById('isian').value;
http.open('GET', url2 + term, true);
http.onreadystatechange = handleHttpResponse2
http.send(null);
}
}
pada kedua fungsi diatas, nilai dari setiap input event yg membangkitkannya, dikirimkan melalui http.open() ke url yg sesuai. Untuk fungsi akun() ke search1.php dan fungsi titik() ke search2.php, dimana pada kedua file tsb, diproses lagi yg hasilnya dikirimkan balik dengan format xML melalui fungsi handleHttpResponse milik getHTTPObject().
//isi file search1.php
<?php
if (isset($_GET['q']) === FALSE)
{
exit();
}
include('../incl/koneksi.php');
//list($isi,$urut)=split("-",$q);
$isi = $q;
$query = "select nama from akun where kode='".$isi."' and jenak=0";
$rResult = mysql_query($query);
if ($rResult === FALSE) {
print 'ada kesalahan!';
}
$aTmp = array();
if (mysql_num_rows($rResult) == 0) {
echo "KODE SALAH ATAU KODE TIDAK ADA !!!";
}
else {
while ($aTmp = mysql_fetch_assoc($rResult)) {
$nobuk = $aTmp['nama'];
echo $nobuk;
}
}
?>
// isi file search2.php
<?php
if (isset($q) === FALSE)
{
exit();
}
echo number_format($q,2,',','.');
?>
Dan akhirnya hasil dari proses ke 2 file tadi diterima fungsi handleHttpRespons() yg sesuai,
function handleHttpResponse1() {
if (http.readyState == 4 && http.status == 200) {
document.getElementById('note').value = http.responseText;
}
}
function handleHttpResponse2() {
if (http.readyState == 4 && http.status == 200) {
document.getElementById('isian').value = http.responseText;
}
}
anda bisa lihat, hasilnya dimasukkan melalui element input form dengan id yg sesuai, id 'note' untuk hasil fungsi akun() dan id 'isian' untuk hasil fungsi titik().
script lengkap untuk file ajax.php adalah sbb :
<?php
include ('../incl/koneksi.php');
?>
<html>
<head>
<title>Tambah Data</title>
<script language="javascript" type="text/javascript">
var done = false;
// fungsi akun : menampilkan keterangan account
var url1 = "search1.php?q=";
function akun(x) {
if (!done && http) {
var term = x;
http.open('GET', url1 + term, true);
http.onreadystatechange = handleHttpResponse1
http.send(null);
}
}
function handleHttpResponse1() {
if (http.readyState == 4 && http.status == 200) {
document.getElementById('note').value = http.responseText;
}
}
// fungsi titik : menampilkan titik untuk ribuan
var url2 = "search2.php?q=";
function titik() {
if (!done && http) {
var term = document.getElementById('isian').value;
http.open('GET', url2 + term, true);
http.onreadystatechange = handleHttpResponse2
http.send(null);
}
}
function handleHttpResponse2() {
if (http.readyState == 4 && http.status == 200) {
document.getElementById('isian').value = http.responseText;
}
}
// fungsi utama ajax
function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try { xmlhttp = new XMLHttpRequest();
}
catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();
</script>
</head>
<body><p><br>
<center>
<TABLE width="66%">
<TR>
<TD><INPUT maxLength=16 size=12 type=text name="kode" onBlur="akun(this.value)"></TD>
<TD><INPUT maxLength=70 size=50 type=text name="note" id="note"> Rp.<INPUT maxLength=16 size=16 type=text name="nilai" id="isian" onChange="titik()" align=right></TD></TR>
</TABLE></P>
</form></center>
</body>
</html>
2 komentar:
Salam Sahabat Selalu
I would like to exchange links with your site www.syamsul.org
Is this possible?
Poskan Komentar