Kamis, 20 Oktober 2011

Simple AJAX-PHP With ComboBox

AJAX yang merupakan singkatan dari Asynchronous JavaScript And XMLHTTP, merupakan sebuah teknik pemrograman berbasis web dengan tujuan untuk menciptakan aplikasi yang lebih interaktif. Proses pertukaran data server dilakukan dibelakang layar, sehingga halaman web tidak perlu di load ulang untuk mendapatkan data yang user inginkan.
Dengan kata lain, AJAX ini proses pemilihan data yang diinginkan user tanpa harus me-load ulang atau membaca ulang halaman web. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Kali ini saya akan memberikan tutorial tentang penggunaan AJAX dalam menampilkan data.

Study Kasus
Terdapat data kecamatan dan desa. Dalam kecamatan terdapat beberapa desa, maka jika user ingin melihat daftar desa pada suatu kecamatan, tinggal memilih combobox data kecamatan, maka akan ditampilkan data desa pada kecamatan tersebut.

Buatlah database dengan nama kecamatan, kemudian buatlah tabel-tabelnya seperti berikut:
CREATE TABLE kecamatan ( id_kecamatan int(5) NOT NULL AUTO_INCREMENT, kecamatan varchar(50) NOT NULL, PRIMARY KEY (id_kecamatan));INSERT INTO kecamatan (id_kecamatan, kecamatan) VALUES(1, 'Jenggawah'),(2, 'Gumuk Mas'),(3, 'Ambulu'),(4, 'Ajung'),(5, 'Arjasa');
CREATE TABLE desa ( id_desa int(5) NOT NULL AUTO_INCREMENT, desa varchar(50) NOT NULL, id_kecamatan int(5) NOT NULL, PRIMARY KEY (id_desa))INSERT INTO desa (id_desa, desa, id_kecamatan) VALUES(1, 'Cangkring', 1),(2, 'Seruni', 1),(3, 'Jatisari', 1),(4, 'Kemuningsari', 1),(5, 'Kertonegoro', 1),(6, 'Bagorejo', 2),(7, 'Karang Rejo', 2),(8, 'Mayangan', 2),(9, 'Menampu', 2),(10, 'Tembokrejo', 2),(11, 'Karang Anyar', 3),(12, 'Andongsari', 3),(13, 'Pontang', 3),(14, 'Sabrang', 3),(15, 'Tegalsari', 3),(16, 'Klompangan', 4),(17, 'Mangaran', 4),(18, 'Pancakarya', 4),(19, 'Sukamakmur', 4),(20, 'Wirowongso', 4),(21, 'Biting', 5),(22, 'Candijati', 5),(23, 'Darsono', 5),(24, 'Kamal', 5),(25, 'Kemuninglor', 5);

Gambar Tabel Kecamatan









Gambar Tabel Desa






















Setelah itu kita buat koneksi ke databasenya, koneksi.php


Buatlah script AJAX, selectdesa.js
var xmlHttpfunction showDesa(str){xmlHttp=GetXmlHttpObject()if(xmlHttp==null){alert("Browser anda tidak support")return}var url="get_desa.php"url=url+"?q="+strxmlHttp.onreadystatechange=stateChangedxmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged(){if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}}function GetXmlHttpObject(){var xmlHttp=null;try{xmlHttp=new XMLHttpRequest();}catch(e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}return xmlHttp;}
Perhatikan fungsi showDesa() di atas, fungsi tersebutlah yang akan dipasang di fungsi combobox-nya agar ketika combobox di pilih, maka akan menjalankan fungsi showDesa yang disediakan oleh AJAX tersebut.

Buatlah file php untuk menampilkan data berdasarkan fungsi AJAX yang dipanggil, get_desa.php
Kecamatan:  ID DesaNama Desa";while($row = mysql_fetch_array($result)){echo "";echo "" . $row['id_desa'] . "";echo "" . $row['desa'] . "";echo "";}echo "";?>


Kemudian buatlah file index.php sebagai form untuk pemilihan data
Sampel Project AjaxPilih Kecamatan: 



Silahkan download project ajaxcombobox.zip

Simple AJAX-PHP With ComboBox Rating: 4.5 Diposkan Oleh: dragon
Terima kasih sudah berkomentar