Selasa Legi 07 Februari 2012 22:00

learn make rich

share make it perfect

Ayat Suci

Maka keluarlah Musa dari kota itu dengan rasa takut menunggu-nunggu dengan khawatir, dia berdoa: "Ya Tuhanku, selamatkanlah aku dari orang-orang zalim itu".
(QS. AL QASHASH:21)

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: 881
User login: 1

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 3 >

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

Minya

minya213@...

Kamis Pon, 6 November 2008

Yaahh.... kok pake ASP???

fg

erger@...

Jum'at Pon, 6 Maret 2009

dfasdf
sdfsdf

taofik muhammad

taofik.muhammad@...

Jum'at Pahing, 24 April 2009

iya nih, kok ASP sih??script-nya pake PHP dong.. Di tunggu yah postingan di PHP nya..

mutta

moh.muttaqin@...

Rabu Pahing, 29 April 2009

yang php ada g? saya punya script combobox yang bisa saling berkaitan gitu (combobox pertama akan memanggil combobox kedua), tapi pake php_self. pas di coba scriptnya saja jalan, tapi kalo dipanggil pake index.php?page="nama_scriptnya.php" kok nggak jalan ya? bingung nih, ada yang bisa bantu?

cika

che_cha@...

Senin Pahing, 4 Mei 2009

mko downloadan nya gak ada c.....tolong di upload dunk...pengen belajar..thx

widi

aguswidhi@...

Senin Pon, 25 Mei 2009

ribet amat yg sederhana dunk...!!!

Halaman Komentar: < 1 2 3 >

Mengisi Komentar

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 (675)

Senin Pon, 20 Februari 2006

Mengirim SMS dari PC (463)

Senin Wage, 28 November 2005

Membaca SMS dari PC (439)

Selasa Pahing, 14 Juni 2005

Source SMS Autorespond (342)

Senin Legi, 24 April 2006

Barcode Reader (163)

Sabtu Pahing, 20 Januari 2007

Bukutamu

» addin

addin2digit@...

Kamis Wage
30 Juli 2009

» shen

shen_maizuru@...

Senin Legi
27 Juli 2009

» iyha

zhamzhani@...

Rabu Wage
15 Juli 2009

» wawan

noewilda@...

Rabu Kliwon
1 Juli 2009

» fuad hasan

fuad86_blitar@...

Minggu Kliwon
21 Juni 2009

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