Programming Learning

Free IT e-learning

[PHP] Membuat Combobox dinamis dengan JQuery

Kali ini saya akan membuat tutorial mengenai cara pembuatan combobox dinamis dengan menggunakan jquery, seperti yang kita ketahui bahwa suatu sistem yang baik adalah sistem yang dapat memberikan data yang efisien bagi penggunanya. hal ini sangat erat berkaitan dengan penyajian data.data yang disajikan hendaknya adalah data yang diperlukan oleh user saja.penyajian seluruh data malah tidak akan efektif bagi sistem itu sendiri dan terkesan “boros”.

Di tutorial ini saya akan membuat suatu penyajian data yang sering kita lihat pada form input data, kita akan buat skema sebagai berikut :

Seperti yang terlihat pada skema diatas, skema yang satu dengan yang lainnya mempunyai keterkaitan data dimana dalam kasus ini kita akan menampilkan data “anak” dimana sesuai dengan yang data “induk”.

Pertama-tama kita akan membuat database yang bernama “plearning” dan membuat 3 table yaitu “kendaraan,model,merk”. berikut adalah struktur tablenya :

CREATE TABLE IF NOT EXISTS `kendaraan` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(35) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

-- --------------------------------------------------------

--
-- Struktur dari tabel `merk`
--

CREATE TABLE IF NOT EXISTS `merk` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(35) NOT NULL,
`model_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=19 ;

-- --------------------------------------------------------

--
-- Struktur dari tabel `model`
--

CREATE TABLE IF NOT EXISTS `model` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(35) NOT NULL,
`kendaraan_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

lalu kita akan membuat file html dimana akan menampilkan 3 buah combobox (<select>) yang bernama “combodinamis.html”. berikut ini adalah scriptnya :

<html>
<head>
<title>Combobox Dinamis</title>
</head>
<body>
<table>
<tr>
<td>Kendaraan </td><td><select id="cbkendaraan"></select></td><td><div id="loadingkendaraan"></div></td>
</tr>
<tr>
<td>Model</td><td><select id="cbmodel"></select></td><td><div id="loadingmodel"></div></td>
</tr>
<tr>
<td>Merk</td><td><select id="cbmerk"></select></td>    <td><div id="loadingmerk"></div></td>
</tr>
</table>
</body>
</html>

nah setelah itu kita akan membuat file php yang bernama “data.php” yang berfungsi untuk mengambil data dari database, berikut adalah scriptnya :

<?php
/*
CREATED BY TIGOR MANURUNG
*/
//setup koneksi db
$conn=mysql_connect('localhost','root','');
mysql_select_db('plearning',$conn);

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$tipedata=$_POST['tipe'];
$id=$_POST['id'];

switch($tipedata){
case 'model':
$sql='SELECT id,nama FROM '.$tipedata.' WHERE kendaraan_id = "'.$id.'" ORDER BY nama ASC';break;
case 'merk':
$sql='SELECT id,nama FROM '.$tipedata.' WHERE model_id = "'.$id.'" ORDER BY nama ASC';break;
case 'kendaraan':
$sql='SELECT id,nama FROM '.$tipedata.' ORDER BY nama ASC';break;
}

$res = array(); //reson variable yang akan digunakan

$kueri=mysql_query($sql);
if($kueri){
if(mysql_num_rows($kueri) > 0){
while($row=mysql_fetch_object($kueri)){
$res[]=$row;
}
}else{
$res['error']='Data tidak ditemukan';
}
}else{
$res['error']='error server : '.mysql_error();
}
}
die(json_encode($res));
?>

Dari kode diatas akan kita bahas beberapa point penting sebagai berikut :

$conn=mysql_connect('localhost','root','');
mysql_select_db('plearning',$conn);

adalah script untuk mengkoneksikan dengan database,silahkan ubah sesuai dengan konfigurasi database anda.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//kode
}

script diatas memastikan bahwa file php ini tidak dapat dipanggil secara langsung melalui browser.

$tipedata=$_POST['tipe'];
$id=$_POST['id'];

switch($tipedata){
case 'model':
$sql='SELECT id,nama FROM '.$tipedata.' WHERE kendaraan_id = "'.$id.'" ORDER BY nama ASC';break;
case 'merk':
$sql='SELECT id,nama FROM '.$tipedata.' WHERE model_id = "'.$id.'" ORDER BY nama ASC';break;
case 'kendaraan':
$sql='SELECT id,nama FROM '.$tipedata.' ORDER BY nama ASC';break;
}

Script diatas adalah mendeklarasikan data-data yang didapat dari hasil input data,ada 2 data yang harus dipenuhi yaitu “id” dan “tipe”, data “tipe” adalah menyimpan data yang harus diambil (kendaraan,model atau merk) sedangkan data “id” menyimpan data induk sebagai patokan untuk pengambilan data anak.

$res = array();

Karena kita akan menggunakan json, maka kita deklarasikan variable untuk responsenya.

$kueri=mysql_query($sql);
if($kueri){
if(mysql_num_rows($kueri) > 0){
while($row=mysql_fetch_object($kueri)){
$res[]=$row;
}
}else{
$res['error']='Data tidak ditemukan';
}
}else{
$res['error']='error server : '.mysql_error();
}
}
die(json_encode($res));

Script diatas adalah untuk pengambilan data dari database dan menampilkannya dalam format json. apabila berhasil mengambil data akan ada 2 field di struktur json yaitu “id” dan “nama” sedangkan apabila gagal akan ada 1 field di struktur json yaitu “error”.

nah setelah itu untuk menghubungkan antara “combodinamis.html” dengan “data.php” kita akan memanfaatkan jquery supaya penampilan data menjadi interaktif, pertama-tama kita import jquery pada combodinamis.html di tag <head> sebagai berikut :

<script language="javascript" src="js/jquery-1.7.2.min.js"></script>

bagi anda yang belum memiliki jquery silahkan download disini.

Setelah itu kita akan membuat fungsi utama dimana akan mengambil data yang dihasilkan dari “data.php” dan menampilkannya di combobox target, berikut adalah scriptnya :

<script>
function Load(data,primid){
$('#loading'+data).empty().append('<img src="img/ajax-loader.gif"/>'); //tampilkan gambar untuk load data
$.post("data.php",{tipe:data,id:primid},
function(result){
$('#cb'+data).empty();
if(result.error==undefined){ //cek ada error atau ngga,klo ga ada lanjut
$('#cb'+data).append('<option>---Pilih Data---</option>');
for(var i=0;i<=result.length;i++){
$('#cb'+data).append($('<option></option>').val(result[i].id).text(result[i].nama));
}
}else{
$('#loading'+data).empty().append('Data tidak ditemukan');

}
},'json'
);
$('#loading'+data).empty();
}
</script>

Pada script diatas dapat kita lihat bahwa terdapat request http post di script berikut :

$.post("data.php",{tipe:data,id:primid},...

dan  terdapat option “json”yang berarti data yang didapat akan dikembalikan ke format json. pengisian data pada combobox sendiri terdapat pada script berikut :

function(result){
$('#cb'+data).empty();
if(result.error==undefined){ //cek ada error atau ngga,klo ga ada lanjut
$('#cb'+data).append('<option>---Pilih Data---</option>');
for(var i=0;i<=result.length;i++){
$('#cb'+data).append($('<option></option>').val(result[i].id).text(result[i].nama));
}
}else{
$('#loading'+data).empty().append('Data tidak ditemukan');

}
}

nah terdapat 2 pengisian data,yaitu value dan text karena format data pada combobox sendiri adalah sebagai berikut :

<option value="ini_value">ini_text</option>

untuk event handler kita hanya letakkan pada combobox “cbkendaraan” dan “cbmodel”, dengan script sebagai berikut (tempelkan pada tag script yang telah dibuat) :

Load('kendaraan',0);

$('#cbkendaraan').change(
function(){
if($('#cbkendaraan option:selected').val() !=''){
$('#cbmodel').empty();
$('#cbmerk').empty();
Load('model',$('#cbkendaraan option:selected').val());
}
}
);

$('#cbmodel').change(
function(){
if($('#cbmodel option:selected').val() !=''){
$('#cbmerk').empty();
Load('merk',$('#cbmodel option:selected').val());
}
}
);
});

Berikut ini adalah kode selengkapnya :

combodinamis.html

<html>
<head>
<title>Combobox Dinamis</title>
<script language="javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript">
function Load(data,primid){
$('#loading'+data).empty().append('Loading..<img src="img/ajax-loader.gif"></img>');
$.post("data.php",{tipe:data,id:primid},
function(result){
$('#cb'+data).empty();
if(result.error==undefined){ //cek ada error atau ngga,klo ga ada lanjut
$('#cb'+data).append('<option>---Pilih Data---</option>');
for(var i=0;i<=result.length;i++){
$('#cb'+data).append($('<option></option>').val(result[i].id).text(result[i].nama));
}
}else{
$('#loading'+data).empty().append('Data tidak ditemukan');
//alert(result.error);
}
},'json'
);
$('#loading'+data).empty();
}

$(function(){
Load('kendaraan',0);

$('#cbkendaraan').change(
function(){
if($('#cbkendaraan option:selected').val() !=''){
$('#cbmodel').empty();
$('#cbmerk').empty();
Load('model',$('#cbkendaraan option:selected').val());
}
}
);

$('#cbmodel').change(
function(){
if($('#cbmodel option:selected').val() !=''){
$('#cbmerk').empty();
Load('merk',$('#cbmodel option:selected').val());
}
}
);
});
</script>
</head>
<body>
<table>
<tr>
<td>Kendaraan </td><td><select id="cbkendaraan"></select></td><td><div id="loadingkendaraan"></div></td>
</tr>
<tr>
<td>Model</td><td><select id="cbmodel"></select></td><td><div id="loadingmodel"></div></td>
</tr>
<tr>
<td>Merk</td><td><select id="cbmerk"></select></td>    <td><div id="loadingmerk"></div></td>
</tr>
</table>

</body>
</html>

data.php

<?php
/*
CREATED BY TIGOR MANURUNG
*/
//setup koneksi db
$conn=mysql_connect('localhost','tigorwor_site','Pass@Word1');
mysql_select_db('tigorwor_site',$conn);

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$tipedata=$_POST['tipe'];
$id=$_POST['id'];

switch($tipedata){
case 'model':
$sql='SELECT id,nama FROM '.$tipedata.' WHERE kendaraan_id = "'.$id.'" ORDER BY nama ASC';break;
case 'merk':
$sql='SELECT id,nama FROM '.$tipedata.' WHERE model_id = "'.$id.'" ORDER BY nama ASC';break;
case 'kendaraan':
$sql='SELECT id,nama FROM '.$tipedata.' ORDER BY nama ASC';break;
}

$res = array(); //respon variable yang akan digunakan

$kueri=mysql_query($sql);
if($kueri){
if(mysql_num_rows($kueri) > 0){
while($row=mysql_fetch_object($kueri)){
$res[]=$row;
}
}else{
$res['error']='Data tidak ditemukan';
}
}else{
$res['error']='error server : '.mysql_error();
}
}
die(json_encode($res));
?>

dapat kita lihat pada script diatas akan memanggil method “Load” yang telah dibuat. nah apabila script yang kita buat sudah sama,silahkan coba maka hasilnya adalah sebagai berikut :

Nah dari data diatas terlihat bahwa data yang ditampilkan hanyalah data yang berkaitan/dipilih dari data induk saja. apabila anda masih belum mengerti silahkan download project disini atau silahkan mencoba hasil project disini.

Demikian tutorial ini semoga berguna bagi teman-teman sekalian.🙂

34 responses to “[PHP] Membuat Combobox dinamis dengan JQuery

  1. aa Juni 11, 2012 pukul 5:15 am

    kalo tanpa database gimana??
    misal
    combobox A
    terus keluar A1 ,A2 dst……

  2. zaitunhakimiah Juni 12, 2012 pukul 7:53 am

    belum ada,,

  3. zaitunhakimiah Juni 12, 2012 pukul 3:42 pm

    kalau nilai dari model yang dipilih ingin disimpan, bagaimana ya query nya??
    terima kasih..

    • Tigor Manurung Juni 16, 2012 pukul 5:19 am

      query apa ya?sql?

    • Manik Juli 5, 2012 pukul 12:18 pm

      Ini juga mewakili pertanyaan saya. Saat dijalankan tanpa modifikasi maka semuanya normal. Tapi pas di-insert pada database mysql maka yang ditampung di database hanya angka-angka dari ID. Mohon pencerahannya🙂

  4. hari Juni 18, 2012 pukul 5:41 am

    maaf mas mau nanya kalo kita mau menampilkan tabel data dari database sesuai bulan dan tahun menggunakan ajax gmn ya?

  5. Syahrul Juni 25, 2012 pukul 4:02 am

    ga bisa om…data nya ga keluar…

  6. bho Juni 28, 2012 pukul 12:57 pm

    sudah saya coba di localhost, tp kok ga jalan y ? (cman kluar combobox nya aja tp datax ga keluar padhal sudah saya import databasex).. mohon bantuannya..

    • Tigor Manurung Juni 28, 2012 pukul 4:20 pm

      apakah sudah anda pasang databasenya?🙂

      • bho Juli 1, 2012 pukul 10:58 am

        udah gan..
        udah ane edit connectionx tp tetep ga mau keluar (cuman muncul comboboxnya tp isinya kosong)..
        trus wakt ane buka file yg data.php ada tulisannya undefined variable res, itu knp y gan ?
        mohon pencerahannya…😉

  7. Manik Juli 5, 2012 pukul 12:12 pm

    Saya mencoba menggabungkannya pada insert form php untuk mengisi database. Tapi kenapa ya yang muncul di databasenya bukan nama kendaraan, merk, dan model, melainkan angka-angka yang berasal dari ID.

  8. Chandra Juli 27, 2012 pukul 4:59 am

    mas mau tanya, kalo misal pas dipilih data di combobox, trs muncul data lainnya di 2 textfield, gmn ya mas ?
    misal kabupaten dipilih,trs data kecamatan muncul, setelah kecamatan dipilih, kelurahan muncul di textfield pertama dan nama pak lurah juga muncul di textfield kedua.. itu gmn mas ? ini asumsinya tabel kelurahan ada id, nama kelurahan, nama pak lurah..

  9. dedek Juli 27, 2012 pukul 7:20 am

    mas kok g’ muncul terus cara downlod jsnya g mana???

  10. lily Juli 30, 2012 pukul 8:17 am

    jika kendaraan, merk dan model telah dsimpan kedalam tabel yang sama dan ingin mengedit kembali data yg sudah dsimpan ke database dengan combobox dinamis ini bagaimana ya??

  11. Gultom Juli 31, 2012 pukul 1:49 am

    Hebat gan, thanks for your info *dua jemphol
    btw hasil downloadnya ada jquery-ui tapi ga dipake gan?

  12. jizral Agustus 7, 2012 pukul 11:39 am

    mas klo sy insert ke database masuknya cuma id pilihan, gmn klo sy mau simpan nama pilihannya bukan idnya?
    mohon bantuannya..

    • Syahrir Desember 8, 2012 pukul 12:33 pm

      ubah baris berikut :
      $(‘#cb’+data).append($(”).val(result[i].id).text(result[i].nama));
      menjadi :
      $(‘#cb’+data).append($(”).val(result[i].nama).text(result[i].nama));

      Moga membantu

  13. sadartasinuraya Agustus 27, 2012 pukul 5:41 am

    Mantap gan. Tambahin dong gimana kalo pake tombol submit trus menampilkan berdasarkan hasil pilihannya. Misalnya kalo pilih mobil, honda, jazz akan menampilkan data atau gambar dari pilihan tersebut (maklum newbee hehehehe….) Trims sebelumnya

  14. Perdana Situmorang November 19, 2012 pukul 7:38 am

    Bang, kalau saya ingin menggabungkan kenderaan, model, merk jadi satu tabel,,, gimana solusinya bang?
    mohon bantuannya…

  15. waranugraha Desember 11, 2012 pukul 6:58 am

    Mas, mau nanya misalkan itu pada tabel saya tambahkan field harga, untuk pemanggilannya supaya harganya tampil di script gmn ya? saya kurang paham dengan javascript soalnya. terimakasih

  16. afon Januari 8, 2013 pukul 1:22 pm

    klw membuat field terisi otomatis di textbox / combobox pada saat kita pilih opsi di combo box itu gmn gan? misal: combo1 kita pilih kode barang maka otomatis pada combo2 muncul nama barang nya yg sesuai dengan kode barang terpilih pada combo1. itu gmn cara buat nya gan?
    liissoy@gmail.com

  17. vera Januari 28, 2013 pukul 8:00 am

    mas kalau combonya udah kepilih nilainya terus nyimpannya gimana ya buat submitnya, terima kasih..

  18. vera Januari 30, 2013 pukul 2:43 pm

    udah bisa insert ke databasenya, tapi yg keluar koq cuma idnya
    $(‘#cb’+data).append($(”).val(result[i].id).text(result[i].nama));
    padahal udah diganti
    $(‘#cb’+data).append($(”).val(result[i].nama).text(result[i].nama));
    gimana ya mas, bisa dibantu ? trims ^^

  19. Rj reynolds winston coupons Maret 16, 2013 pukul 11:54 pm

    This is very interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more of your fantastic
    post. Also, I have shared your site in my social networks!

  20. discount vouchers Maret 20, 2013 pukul 2:55 pm

    Helpful information. Fortunate me I found your site
    accidentally, and I am shocked why this coincidence didn’t happened earlier! I bookmarked it.

  21. Mr.X Juni 16, 2013 pukul 6:23 pm

    um, tambahin submit dan cara nampilin data yang terpilihnya dunk,
    misal minibus=honda=freed, naah nampilinnya gmn noh….thnks

  22. mahdi Juli 10, 2014 pukul 1:09 pm

    Salam bang,
    Mau tanya, bagaimana saya menambahkan field harga yg akan keluar secara otomatis.
    Misalnya saya sudah pilih jazz dan nanti di bawahnya langsung keluar harga 200jt di text kosong yg telah saya sediakan pada baris paling akhir?
    Trimakasih atas jawabannya, web anda sangat membantu

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: