Tutorial Manipulasi Combobox dan Textbox dengan Ajax

Sebenarnya menampilkan data dalam PHP bisa menggunakan bahasa pemrograman PHP saja. Namun kali ini saya akan membahas bagaimana cara menampilkan data dengan PHP dan AJAX. Dalam tutorial kali ini kita akan menyediakan combobox dan textbox sebagai alat yang kita gunakan untuk memanipulasi data. Ketika kita memilih data di combobox maka dengan otomatis textbox akan terisi. Keunggulan menggunakan AJAX untuk menampilkan data adala kecepatan dan interaktif sehingga kita tidak perlu berpindah halaman.

Misalnya saja kita akan menginputkan data nama dan alamat, ketika kita memilih nama seseorang dalam combobox maka dengan otomatis alamat orang tersebut akan terisi pada textbox. Sehingga penggunaan tersebut dapat meningkatkan interaktivitas, kecepatan, dan usability. Oke langsung saja ikuti langkah-langkah berikut:

Langkah 1: Siapkan terlebih dahulu database yang kita gunakan sebagai sumber data kita dengan memberi nama db_test. Kemudian kita buat tabel dengan nama tbl_dataKaryawan.

CREATE TABLE IF NOT EXISTS `tbl_dataKaryawan` (
  `NIP` int(10) NOT NULL,
  `Nama` varchar(50) NOT NULL,
  `Email` varchar(50) NOT NULL,
  `Alamat` tinytext NOT NULL,
  PRIMARY KEY (`NIP`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `tabeldatakaryawan` (`NIP`, `Nama`, `Email`, `Alamat`) VALUES
(889456, 'Desrizal', 'drz@fmi.com', 'Street 11C no. 332, Tembagapura, Papua'),
(889457, 'Nurmi Yulita', 'nurmi@fmi.com', 'Teras Estate No. 234, Tembagapura, Papua'),
(894545, 'Ratra Adya Airawan', 'ratra1990@gmail.com', 'Jln. Brigjend Slamet Riadi 18/11 Malang'),
(896543, 'Budi Hartono', 'budi@fmi.com', 'Barak Q Ridge Camp');

Langkah 2: Setelah database dan tabel terbentuk, kita akan membuat koneksi dengan menggunakah PHP. Oleh karena itu kita simpan kode dibawah ini dan beri nama dengan nama koneksi.php


<?php 

mysql_connect("localhost","root",""); 

mysql_select_db("tbl_dataKaryawan"); 

$nip = $_GET['q']; 

if($nip){ 

 $query = mysql_query("select alamat from tbl_dataKaryawan where nip=$nip"); 

  while($d = mysql_fetch_array($query)){ 

                echo $d['alamat']; 

        }

} 

?>

Koneksi tersebut dapat diartikan sebagai sebuah code sebagai komunikasi dengan databasesehingga kita dapat mengakses data pada database tersebut.

Langkah 3: Setelah kita membuat halaman koneksi, selanjutnya kita akan membuat halaman form yang berisikan combobox dan textbox yang kita gunakan sebagai manipulasi data. Buat file dengan nama datakaryawan.html dan masukkan code berikut ini:

<html> 
<head> 
<script> 
var ajaxku; 
function koneksi(nip){ 
 ajaxku = buatajax();
 var url="koneksi.php"; 
 url=url+"?q="+nip; 
 url=url+"&sid="+Math.random(); 
 ajaxku.onreadystatechange=stateChanged; 
 ajaxku.open("GET",url,true); 
 ajaxku.send(null); 
} 
function buatajax(){ 
 if (window.XMLHttpRequest){  
  return new XMLHttpRequest(); 
 } 
 if (window.ActiveXObject){  
  return new ActiveXObject("Microsoft.XMLHTTP"); 
 } 
 return null; 
} 

function stateChanged(){ 
var data; 
 if (ajaxku.readyState==4){ 
  data=ajaxku.responseText; 
  if(data.length>0){ 
   document.getElementById("alamat").value= data 
  }else{ 
   document.getElementById("alamat").value= ""; 
  } 
 } 
} 
</script> 
</head> 
<body>

Nama :
<select size="1" name="karyawan" id="karyawan" 
onchange=ambildata(this.value)> 
<option selected>--Pilih Karyawan--</option> 
<option value="889456">Desrizal</option> 
<option value="889457">Nurmi Yulita</option> 
<option value="896543">Budi Hartono</option> 
</select> 

</p> 
<p> 
Alamat : <textarea rows="4" id="alamat" name="alamat" 
cols="42"></textarea> 
</p> 
Pada contoh berikut anda akan memilih nama dan mengambil data alamat di 
database<br> 
berdasarkan nama tersebut dan menampilkannya di halaman ini tanpa harus 
me-reload<br> 
keseluruhan halaman 
</body> 
</html>

Oke sekarang bisa dicoba bagimana hasilnya. Lebih interaktif dan cepat, itulah keunggulan Ajax sehingga kita tidak perlu repot-repot melakukan refresh dan pindah halaman.

Sekian dulu artikel dari saya, semoga dapat memberikan banyak manfaat. Terus bersama-sama kita belajar dan bereksperimen :)

Tutorial Manipulasi Combobox dan Textbox dengan Ajax

Artikel Terkait