Membuat Combobox Dinamis dengan AJAX

Eko Heri Susanto mengulas penggunaan AJAX dalam ASP untuk membuat combobox yang dinamis

Kamis Pahing, 16 November 2006

Membuat Combobox Dinamis dengan AJAX

AJAX (Ashynchronous Javascript and XML) sebenarnya adalah konsep lama, tehnik ini sudah ada dari beberapa tahun yang lalu. Dengan sedikit modifikasi maka tehnik ini bisa menjadikan aplikasi web menjadi lebih dinamis dan interaktif seperti layaknya aplikasi desktop.
Dengan menggunakan teknologi ini, page HTML bisa membuat koneksi secara asinkron ke server dengan cara mengambil XML dokumen. Selanjutnya dokumen XML ini akan digunakan oleh javascript untuk meng-update atau memodifikasi Document Object Model (DOM) pada page HTML.

Untuk selanjutnya tehnologi ini juga dikenal web remoting atau remote scripting. Developer Web dapat mengkombinasikan plug in, java applets dan hidden frame untuk mengemulasikan interaksi antara page HTML dengan dokumen XML. Dalam teknologi Javascript telah disediakan sebuah object yaitu XMLHTTPRequest. Object ini sudah banyak disupport oleh banyak browser seperti Internet Explorer, Firefox dan lain sebagainya.

Berikut ini ilustrasi yang menggambarkan interaksi AJAX dengan Server :

[ajax.JPG: klik untuk menampilkan gambar]

Berikut ini contoh script sederhana yang memanfaatkan teknologi AJAX. Contoh script ini sebenarnya terinspirasi dari artikel Mas Aryo yang berjudul Merubah isi combobox dan Autocomplete pada form. Dalam contoh ini saya menampilkan combobox yang berisi data dinamis, yang isinya tergantung pada pilihan user Misalnya saja combobox untuk memilih Nama Kecamatan, maka isi combobox tersebut hanya berisi nama kecamatan yang ada dalam kabupaten yang dipilih. Dalam contoh ini saya menggunakan asp sebagai web server sedangkan database-nya saya menggunakan MS-Access.
Untuk mencoba teknik ini, silakan simpan file HTML berikut ini dengan nama testcustomer.htm

<html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <link rel=stylesheet href="../style/contents.css" type="text/css"> <title>Data Customer</title> <script language="javascript"> function createRequestObject() { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); }else{ ro = new XMLHttpRequest(); } return ro; }//end createRequestObject var xmlhttp = createRequestObject(); function loadDataMaster(kode1, kode2) { xmlhttp.open('get', 'LoadDataRegional.asp?param1='+kode1+'&param2='+kode2, true); xmlhttp.onreadystatechange = function() { if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) { var response = xmlhttp.responseText; switch(kode1) { case "wilayah":document.getElementById("lokasicmbWilayah").innerHTML=response;break; case "kecamatan":document.getElementById("lokasicmbKecamatan").innerHTML=response;break; case "kelurahan":document.getElementById("lokasicmbKelurahan").innerHTML=response;break; } }//end if xmlhttp.readyState return false; } xmlhttp.send(null); }//end loadDataMaster function removeDataMaster(kode) { if(kode=="kecamatan") { if(document.frmCustomer.cmbKecamatan!=null)document.frmCustomer.cmbKecamatan.removeNode(true); if(document.frmCustomer.cmbKelurahan!=null)document.frmCustomer.cmbKelurahan.removeNode(true); }else if(kode=="kelurahan") { if(document.frmCustomer.cmbKelurahan!=null)document.frmCustomer.cmbKelurahan.removeNode(true); } } var arrAlamat=new Array(); function getAlamat() { try { arrAlamat["0"]=document.frmCustomer.Alamat.value; if((document.frmCustomer.cmbKelurahan!=null)&&(document.frmCustomer.cmbKelurahan.options.length>0)) arrAlamat["1"]=document.frmCustomer.cmbKelurahan.options[document.frmCustomer.cmbKelurahan.selectedIndex].text; else arrAlamat["1"]=""; if((document.frmCustomer.cmbKecamatan!=null)&&(document.frmCustomer.cmbKecamatan.options.length>0)) arrAlamat["2"]=document.frmCustomer.cmbKecamatan.options[document.frmCustomer.cmbKecamatan.selectedIndex].text; else arrAlamat["2"]=""; arrAlamat["3"]=document.frmCustomer.cmbWilayah.options[document.frmCustomer.cmbWilayah.selectedIndex].text; arrAlamat["4"]=document.frmCustomer.KodePos.value; arrAlamat["5"]=document.frmCustomer.Telp.value; arrAlamat["6"]=document.frmCustomer.HP.value; var s=""; var i; document.frmCustomer.AlamatLengkap.value=""; for(i=0;i<7;i++) { if(arrAlamat[i]!="") { switch(i) { case 4:s+="Kode Pos :"+arrAlamat[4]+" ";break; case 5:s+="Telp :"+arrAlamat[5]+" ";break; case 6:s+="HP :"+arrAlamat[6];break; default:s+=arrAlamat[i]+" ";break; } document.frmCustomer.AlamatLengkap.value=s; } } }catch(ex) { alert(ex.message); } } </script> </head> <body onload='javascript:loadDataMaster("wilayah","");'> <table border="1" width="100%" height="100%" id="table5" cellspacing="0" cellpadding="0" style="border-collapse: collapse"> <tr> <td background="../images/banner/BgTbHeader.gif" height="22" id="JenisEntry"> <b>Entry Data Customer</b></td> </tr> <tr> <td align="right" valign="top"> <form name="frmCustomer"> <table border="0" width="100%" id="table6"> <tr> <td width="20%" valign="top">Nama Customer</td> <td> <input id="Nama" type="text" name="txtNama" size="76"> </td> </tr> <tr> <td width="20%" valign="top">Alamat</td> <td><textarea id="Alamat" rows="2" name="txtAlamat" cols="76" onblur='javascript:getAlamat();'></textarea></td> </tr> <tr> <td valign="top" colspan="2"> <table border="0" width="100%" id="table7" cellspacing="0" cellpadding="0"> <tr> <td width="20%">Kab/Kodya</td> <td width="25%" id="lokasicmbWilayah"></td> <td><a href='javascript:removeDataMaster("kecamatan");loadDataMaster("kecamatan",document.frmCustomer.cmbWilayah.value);'>Tampilkan Data Kecamatan</a></td> </tr> <tr> <td width="20%">Kecamatan</td> <td width="25%" id="lokasicmbKecamatan"></td> <td><a href='javascript:loadDataMaster("kelurahan",document.frmCustomer.cmbKecamatan.value)'>Tampilkan Data Kelurahan</a></td> </tr> <tr> <td width="20%">Kelurahan</td> <td width="25%" id="lokasicmbKelurahan"></td> <td> </td> </tr> </table> </td> </tr> <tr> <td width="20%" valign="top">Kode Pos</td> <td> <input id="KodePos" type="text" name="txtKodePos" size="32" onblur='javascript:getAlamat();'></td> </tr> <tr> <td width="20%" valign="top">No.Telp</td> <td> <input id="Telp" type="text" name="txtTelp" size="32" onblur='javascript:getAlamat();'></td> </tr> <tr> <td width="20%" valign="top">HP</td> <td> <input id="HP" type="text" name="txtHP" size="32" onblur='javascript:getAlamat();'></td> </tr> <tr> <td width="20%" valign="top">Alamat Lengkap</td> <td> <textarea id="AlamatLengkap" rows="3" name="txtAlamatLengkap" cols="76"></textarea></td> </tr> <tr> <td width="20%" valign="top">  </td> <td><input type="reset" value="Clear" name="btnClear" onclick='javascript:removeDataMaster("kecamatan");'></td> </tr> </table> </form> </td> </tr> </table> </body> </html>

script asp:simpan dengan nama koneksi.asp

<% function SetDataSource(strSql) 'membuat koneksi ke database nortwind Dim oConn Set oConn = CreateObject("ADODB.Connection") Set oRs = CreateObject("ADODB.Recordset") oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("dbRegional.mdb") 'membuat dan menampung recordset Dim oRs oRs.CursorLocation = 3 oRs.Open strSql, oConn, 3, 2 If not (oRs.ActiveConnection Is Nothing) Then Set oRs.ActiveConnection = Nothing Set SetDataSource= oRs If not(oRs Is Nothing) Then Set oRs = Nothing If not(oConn Is Nothing) Then Set oConn = Nothing end function %>

script asp:simpan dengan nama LoadDataRegional.asp

 <% dim JenisRegional dim rs dim id dim clearRegional JenisRegional=Request.QueryString.Item(1) Select Case Ucase(JenisRegional) Case "WILAYAH" id="cmbWilayah":clearRegional="kecamatan" set rs=SetDataSource("SELECT KODE_WILAYAH, NAMA_WILAYAH FROM MS_REGIONAL_WILAYAH ORDER BY NAMA_WILAYAH") Case "KECAMATAN" id="cmbKecamatan":clearRegional="kelurahan" set rs=SetDataSource("SELECT KODE_KECAMATAN, NAMA_KECAMATAN FROM MS_REGIONAL_KECAMATAN WHERE (KODE_WILAYAH='" & Request.QueryString.Item(2) & "') ORDER BY NAMA_KECAMATAN") Case "KELURAHAN" id="cmbKelurahan":clearRegional="" set rs=SetDataSource("SELECT KODE_KELURAHAN, NAMA_KELURAHAN FROM MS_REGIONAL_KELURAHAN WHERE (KODE_KECAMATAN='" & Request.QueryString.Item(2) & "') ORDER BY NAMA_KELURAHAN") End Select if not rs.eof then if clearRegional <>"" then response.write _ "<select id="""& id & """ onblur='javascript:getAlamat();' onchange='javascript:removeDataMaster(""" & clearRegional & """);'>" else response.write _ "<select id="""& id & """ onblur='javascript:getAlamat();'>" end if while not rs.eof response.write "<option value='" & rs.fields(0) & "'>" & rs.fields(1) & "</option>" rs.movenext wend if (id="cmbKelurahan")then response.write "<option></option>" end if response.write "</select>" end if %>

Contoh selengkapnya silahkan Download di sini Form Customer . Selesai....

Eko Heri Susanto

IT Manager of PT. Catur Putra Jaya, HONDA Motorcycle Authorized Dealer

Head Office : Jl. Raya Perjuangan M17-19, Teluk Pucung, Wisma Asri, Bekasi Utara, Indonesia Telp:021-88966091

Branch Office : Jl. Raya Sawangan KM. 12, No.5 Pancoran Mas, Depok, Indonesia Telp :021-7751300-7751600

Branch Office : Jl. Raya Parung-Bogor KM.15, NO.5, Kemang, Bogor, Indonesia, Telp:0251-7540505

HP: 021-68755105, email:ekoheri@gmail.com

Daftar Komentar

Pandoe

pandu@... Jum'at Kliwon, 24 November 2006

wahhh pa'e ternyata main juga di ajax nich... bagi bagi elmunya ye....kekekeke :)

agus

ageys_04@... Jum'at Kliwon, 24 November 2006

terima kasih, dan terus semangat mencari sesuatu yang baru dengan program yang efektif.

Gauz

agus@... Senin Pon, 27 November 2006

Seru seru, lagi lagi

dhsdfgd

agsd@... Rabu Kliwon, 29 November 2006

hgfhdfhsdfdf

rahmad

nespa82@... Sabtu Kliwon, 9 Desember 2006

wah...wah, om makoto muncul lagi nich, sekarang dah jadi manager nich, om rokok e sek pancet walau jadi manager, he he

Ickokid

poltak_tulus@... Kamis Pahing, 21 Desember 2006

mas maen di ajax jg ya.. boleh nih saya tanya" biz sy pemula ajax.........!

Aryo:

Iya silakan ditanyakan di sini, kalau ada yang bisa kan bisa langsung njawab

rusman

rusman@... Jum'at Legi, 19 Januari 2007

siang mas........ gimana nya permulaan tuk mempelajari java?btw ada gak soft na yang bisa di down load?

agung

aslama_heart@... Minggu Wage, 11 Februari 2007

assalamualaikum mas aku mo nanya nih gimana sih carane bikin script dari ajax untuk autocomplete textbox. misale gini ada satu textbox untuk mencari kata, waktu kita masukkan huruf "a" maka muncul kata yang berawal "a" seperti list gitu lo mas.kemudian jika kita terus nulis "ad" maka muncul kata yang mempunyai awal "ad". tolong bantu aku ya mas, soale ini tugas dari bos ku. makasih sebelume.

Eko Heri Susanto

ekoheri@... Jum'at Pon, 11 Mei 2007

Saya ada satu pengalaman lumayan menarik walaupun sederhana mengenai AJAX. Ceritanya begini seperti biasa saya lagi coba-coba bikin web menggunakan AJAX dan seperti biasa saya menggunakan MySql dan PHP. Pada saat web saya tersebut saya coba ga ada masalah sih, kelihatannya fine-fine aja. Tapi saya curiga gara-gara datanya saya coba ganti dengan harapan data yang tampil di web juga akan berubah mengikuti perubahan data di MySql.Eh..ternyata setelah di-refresh yang tampil di web tetep data yang lama, ini artinya web tersebut masih tersimpan di cache.Cara pertama yang saya lakukan adalah menghapus semua cookies, history file dan offline file. Dengan cara itu emang beres sih web bisa tampil dengan data yang baru, tapi kan ga mungkin setiap mau melihat tampilan baru harus menghapus cookies, history terus. Akhirnya saya setelah coba-coba cari artikel sana-sini ketemu perintah seperti ini :
----------------------------------------------------
header("Cache-Control: no-cache, must-revalidate");
----------------------------------------------------
ya..udah perintah tadi coba saya pasang di PHP dan ternyata jadi deh..gak perlu lagi saya harus hapus-hapus history atau cookies setiap mau melihat tampilan web yang terbaru.

Sekian dulu komentar dari saya, mungkin ada temen-temen yang lain mempunyai pengalaman yang sama dengan saya bisa sedikit ada gambaran bagaimana menyelesaikan kasusnya.

Thank's banget

Eko Heri

Najib Athlon Minisini

najibathlonminisini@... Kamis Pahing, 14 Juni 2007

Assalamualaikum

Mas tolong bantu aku nich,gimana cara bikin script dari ajax untuk autocomplete textbox. Misal, ada satu textbox untuk memasukkan NPM guna mencari nama mahasiswa untuk di edit, waktu kita masukkan huruf "0" maka muncul nama-nama mahasiswa yang memiliki NPM berawal "0". Kemudian jika kita terus nulis "017051060" maka muncul kata satu nama mahasiswa yang meliki NPM tersebut. Tolong bantu aku ya mas, Trim's!.

URL: http://www.bengkelprogram.com/data-artikel-909.0.bps