Selasa Pahing 08 Juli 2008 22:12

learn make rich

share make it perfect

Ayat Suci

patau kapal-kapal itu dibinasakan-Nya karena perbuatan mereka atau Dia memberi maaf sebagian besar dari (mereka).
(QS. ASY SYUURA:34)

otomatis refresh

Javascript ayat

Proyek Saat Ini

Aplikasi SMS
Download aplikasi dan source

SMS Autorespond (VB)

Para Rekan

FlazX.com - Your Computer & IT Learning Center & eBook Directory

Link Exchange

Lain-lain

User online: 715
User login: 2

user/passwd: bpuser

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">&nbsp;<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>&nbsp;</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">
			&nbsp;</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

<!-- #include file = "koneksi.inc" -->
<%
	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

Kirim via Email :: Tampilkan Versi Cetak

Komentar

Halaman Komentar: < 1 2

aziz

siaz1z@...

Rabu Kliwon, 27 Juni 2007

file nya ga bisa di donlot ya?? reupload dunk.. send ke mail juga boleh thanks..

edan

fatma_poo@...

Jum'at Pahing, 16 November 2007

aku ga mudeng!!!!ajari donk

Alexxus

alex.dhika@...

Kamis Wage, 13 Desember 2007

Sayangnya asp

Joko Prasetya

joko_po@...

Kamis Wage, 13 Desember 2007

Kok script untuk koneksi.inc belum ada ??

herizal

rizal_ver79@...

Minggu Wage, 27 Januari 2008

kalo php nya gimana mas? makasih ya... aku banyak download tutorial nya di ilmu komputer

Halaman Komentar: < 1 2

Mengisi Komentar

Daftar Artikel ASP

» SQL Server Online Manager (63)

Minggu Kliwon, 12 Juni 2005

Membahas tentang SQL-DMO (SQL-Distributed Management Objects) dan beberapa langkah untuk mengimplementasikannya.

Halaman: 1

Pencarian Situs

Account Data

Anda belum login.

Status Y!M

Saya sedang Offline. Silakan gunakan menu Kontak atau tinggalkan pesan di Yahoo! Messenger pada Id: aryo_sanjaya

Artikel Rame

Aplikasi Handphone (576)

Senin Pon, 20 Februari 2006

Mengirim SMS dari PC (408)

Senin Wage, 28 November 2005

Membaca SMS dari PC (358)

Selasa Pahing, 14 Juni 2005

Source SMS Autorespond (284)

Senin Legi, 24 April 2006

Barcode Reader (95)

Sabtu Pahing, 20 Januari 2007

Bukutamu

» oRiDo™

oridmail@...

Minggu Kliwon
6 Juli 2008

» vick

vick@...

Selasa Kliwon
1 Juli 2008

» herri indrayana

1717bmu@...

Selasa Kliwon
1 Juli 2008

» Swasasi

kesit_grahito@...

Sabtu Pahing
28 Juni 2008

» Randa

cayozie@...

Jum'at Legi
27 Juni 2008

Halaman Bukutamu

Daftar Fungsi

pasaran
Mencari nama hari dan nama pasaran

pdu2sms
Konversi dari PDU ke Teks SMS

bacarss
Membaca RSS dari beberapa situs

Jejak Halaman

Depan :: Berita :: Artikel :: Sharing :: Download :: Bookmark :: Kontak :: Bukutamu :: Sitemap :: RSS Feed