Membuat hierarki kategori dengan combobox dan JQuery

Banyak cara untuk membuat pengolahan combobox lebih dinamis, diantaranya dengan metode hierarki misalnya kategori. Biasanya untuk menyediakan berbagai produk dalam web shopping online atau sistem informasi penjualan barang diperlukan kategori yang lebih detail agar lebih mudah untuk penyortiran data. Dengan fitur - fitur yang di sediakan oleh JQuery, untuk mengcoding bisa lebih mudah dilakukan terlebih lagi dengan fitur AJAX ($.ajax) oleh JQuery. Namun perlu ditekankan untuk pembuatan tabel - tabel databasenya agar jangan sampai salah karena akan mempengaruhi tampilan data karena hierarki dalam tampilan data memerlukan ketelitian dalam menyusun nya.
Okelah kalau begitu saya punya tutor untuk menampilkan data secara hierarki. Disini saya mencontohkan kategori produk dan sub kategori nya

Pertama dibuat dulu databasenya dan tabel - tabelnya

1:  CREATE DATABASE IF NOT EXISTS `produk` /*!40100 DEFAULT CHARACTER SET latin1 */;  
2:  USE `produk`;  
3:  -- Dumping structure for table produk.detail_sub_kategori_produk  
4:  CREATE TABLE IF NOT EXISTS `detail_sub_kategori_produk` (  
5:   `id_detail_sub_kategori_produk` int(10) NOT NULL auto_increment,  
6:   `detail_sub_kategori_produk` varchar(50) default NULL,  
7:   `id_sub_kategori_produk` int(11) default NULL,  
8:   PRIMARY KEY (`id_detail_sub_kategori_produk`)  
9:  ) ENGINE=MyISAM AUTO_INCREMENT=16 DEFAULT CHARSET=latin1;  
10:  -- Dumping data for table produk.detail_sub_kategori_produk: 9 rows  
11:  DELETE FROM `detail_sub_kategori_produk`;  
12:  /*!40000 ALTER TABLE `detail_sub_kategori_produk` DISABLE KEYS */;  
13:  INSERT INTO `detail_sub_kategori_produk` (`id_detail_sub_kategori_produk`, `detail_sub_kategori_produk`, `id_sub_kategori_produk`) VALUES  
14:       (1, 'LCD', 1),  
15:       (2, 'Plasma', 1),  
16:       (3, 'CRT', 1),  
17:       (4, 'Blueberry', 5),  
18:       (5, 'Android', 5),  
19:       (6, 'I Phone', 5),  
20:       (7, 'Nokiem', 7),  
21:       (8, 'Ericssen', 7),  
22:       (9, 'samsuit', 7),  
23:       (10, 'z series', 6),  
24:       (11, '21 speed series', 6),  
25:       (12, '27 speed series', 6),  
26:       (13, 'Marfell figure', 12),  
27:       (14, 'CD figure', 12),  
28:       (15, 'xx series', 8);  
29:  /*!40000 ALTER TABLE `detail_sub_kategori_produk` ENABLE KEYS */;  
30:  -- Dumping structure for table produk.kategori_produk  
31:  CREATE TABLE IF NOT EXISTS `kategori_produk` (  
32:   `id_kategori_produk` int(10) NOT NULL auto_increment,  
33:   `kategori_produk` varchar(50) default NULL,  
34:   PRIMARY KEY (`id_kategori_produk`)  
35:  ) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;  
36:  -- Dumping data for table produk.kategori_produk: 4 rows  
37:  DELETE FROM `kategori_produk`;  
38:  /*!40000 ALTER TABLE `kategori_produk` DISABLE KEYS */;  
39:  INSERT INTO `kategori_produk` (`id_kategori_produk`, `kategori_produk`) VALUES  
40:       (1, 'elektronik'),  
41:       (2, 'handphone'),  
42:       (3, 'sepeda'),  
43:       (4, 'mainan');  
44:  /*!40000 ALTER TABLE `kategori_produk` ENABLE KEYS */;  
45:  -- Dumping structure for table produk.produk  
46:  CREATE TABLE IF NOT EXISTS `produk` (  
47:   `id_produk` int(10) NOT NULL auto_increment,  
48:   `produk` varchar(50) default NULL,  
49:   `id_detail_sub_kategori_produk` int(11) default NULL,  
50:   PRIMARY KEY (`id_produk`)  
51:  ) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;  
52:  -- Dumping data for table produk.produk: 1 rows  
53:  DELETE FROM `produk`;  
54:  /*!40000 ALTER TABLE `produk` DISABLE KEYS */;  
55:  INSERT INTO `produk` (`id_produk`, `produk`, `id_detail_sub_kategori_produk`) VALUES  
56:       (1, 'Blueberry 2134', 4),  
57:       (2, 'Samsuit 29"', 1),  
58:       (3, 'LGH 32"', 1),  
59:       (4, 'Blueberry 8931', 4),  
60:       (5, 'Samsuit galaksi xxx', 4),  
61:       (6, 'Samsuit galaksi s10', 4),  
62:       (7, 'Win cycle 26"', 10),  
63:       (8, 'United cycle 26"', 10);  
64:  /*!40000 ALTER TABLE `produk` ENABLE KEYS */;  
65:  -- Dumping structure for table produk.sub_kategori_produk  
66:  CREATE TABLE IF NOT EXISTS `sub_kategori_produk` (  
67:   `id_sub_kategori_produk` int(10) NOT NULL auto_increment,  
68:   `id_kategori_produk` int(10) default NULL,  
69:   `sub_kategori_produk` varchar(50) default NULL,  
70:   PRIMARY KEY (`id_sub_kategori_produk`)  
71:  ) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;  
72:  -- Dumping data for table produk.sub_kategori_produk: 9 rows  
73:  DELETE FROM `sub_kategori_produk`;  
74:  /*!40000 ALTER TABLE `sub_kategori_produk` DISABLE KEYS */;  
75:  INSERT INTO `sub_kategori_produk` (`id_sub_kategori_produk`, `id_kategori_produk`, `sub_kategori_produk`) VALUES  
76:       (1, 1, 'TV'),  
77:       (2, 1, 'DVD player'),  
78:       (3, 1, 'Komputer'),  
79:       (4, 1, 'Kamera'),  
80:       (5, 2, 'Smartphone'),  
81:       (6, 3, 'Mountain bike'),  
82:       (7, 2, 'Handphone'),  
83:       (8, 3, 'Fixie bike'),  
84:       (9, 3, 'aksesoris sepeda'),  
85:       (10, 4, 'Mini 4WD'),  
86:       (11, 4, 'Action figure'),  
87:       (12, 4, 'Remote control');  

lalu dibuat file koneksi.php disesuaikan dengan server masing - masing

1:  <?  
2:  mysql_connect("localhost","root","");  
3:  mysql_select_db("produk");  
4:  ?>  

untuk halaman halaman index nya disini saya sisipkan langsung javascript & css berhubung codingya ga banyak

1:  <?  
2:  include_once('koneksi.php');  
3:  ?>  
4:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
5:  <html xmlns="http://www.w3.org/1999/xhtml">  
6:  <head>  
7:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
8:  <title>Untitled Document</title>  
9:  <script type="text/javascript" src="jquery-1.6.min.js"></script>  
10:  <script type="text/javascript">  
11:  function load_sub_kategori_produk(id,action,div)  
12:  {  
13:  $.ajax({  
14:       url:"load_sub_kategori_produk.php",  
15:       type:"POST",  
16:       data:"action="+action+"&id="+id,  
17:       complete:function(data)  
18:       {  
19:       $('#'+div).html(data.responseText);  
20:       }  
21:  })  
22:  }  
23:  </script>  
24:  <style>  
25:  body{font-family:Tahoma, Geneva, sans-serif; font-size:12px;color:#666;}  
26:  table{border-collapse:collapse;color:#666;}  
27:  th{background-color:#333;color:#fff;}  
28:  </style>  
29:  </head>  
30:  <body>  
31:  <select name="kategori_produk" id="kategori_produk" onchange="load_sub_kategori_produk(this.value,'load_sub_kategori_produk','sub_kategori_produk')">  
32:  <?  
33:  $query_kategori_produk=mysql_query("select * from kategori_produk order by id_kategori_produk asc");  
34:  ?> <option>-Kategori Produk-</option>  
35:  <?  
36:  while($row_kategori_produk=mysql_fetch_array($query_kategori_produk))  
37:  {  
38:  ?>   
39:  <option value="<? echo $row_kategori_produk['id_kategori_produk'];?>"><? echo $row_kategori_produk['kategori_produk'];?></option>   
40:  <?  
41:  }  
42:  ?>  
43:  </select>  
44:  <br />  
45:  <br />  
46:  <select name="sub_kategori_produk" id="sub_kategori_produk" onchange="load_sub_kategori_produk(this.value,'load_detail_sub_kategori_produk','detail_sub_kategori_produk')">  
47:  </select>  
48:  <br />  
49:  <br />  
50:  <select name="detail_sub_kategori_produk" id="detail_sub_kategori_produk" onchange="load_sub_kategori_produk(this.value,'load_tabel','load_tabel');">  
51:  </select>  
52:  <br />  
53:  <br />  
54:  <div id="load_tabel"></div>  
55:  </body>  
56:  </html> 
 

untuk meload data combobox nya saya pisahkan load_sub_kategori_produk.php

1:  <?  
2:  include_once('koneksi.php');  
3:  $action=$_POST['action'];  
4:  if($action=="load_sub_kategori_produk")  
5:  {  
6:  $id_kategori_produk=$_POST['id'];  
7:  $query_kategori_produk=mysql_query("select * from sub_kategori_produk where id_kategori_produk='$id_kategori_produk'");  
8:  $total_kategori_produk=mysql_num_rows($query_kategori_produk);  
9:  if($total_kategori_produk > 0)  
10:  {  
11:  ?> <option>-Sub kategori Produk-</option> <?  
12:  while($row_sub_kategori_produk=mysql_fetch_array($query_kategori_produk))  
13:  {  
14:  ?>  
15:  <option value="<? echo $row_sub_kategori_produk['id_sub_kategori_produk'];?>"><? echo $row_sub_kategori_produk['sub_kategori_produk'];?></option>  
16:  <?       
17:  }  
18:  }  
19:  else  
20:  {  
21:  ?> <option>-sub kategori tidak ada-</option><?  
22:  }  
23:  }  
24:  else if($action=="load_detail_sub_kategori_produk")  
25:  {  
26:  $id_sub_kategori_produk=$_POST['id'];       
27:  $query=mysql_query("select * from detail_sub_kategori_produk where id_sub_kategori_produk='$id_sub_kategori_produk'");  
28:  $total_detail_sub_kategori=mysql_num_rows($query);  
29:  if($total_detail_sub_kategori > 0 )  
30:  {  
31:  ?>  
32:  <option>-Detail sub kategori-</option>  
33:  <?  
34:  while($row_detail_sub_kategori_produk=mysql_fetch_array($query))  
35:  {  
36:  ?>  
37:  <option value="<? echo $row_detail_sub_kategori_produk['id_detail_sub_kategori_produk'];?>"><? echo $row_detail_sub_kategori_produk['detail_sub_kategori_produk'];?></option>  
38:  <?       
39:  }       
40:  }  
41:  else  
42:  {  
43:  ?><option>-detail sub kategori tidak ada</option>  
44:  <?       
45:  }  
46:  }  
47:  else if($action=="load_tabel")  
48:  {  
49:       $id=$_POST['id'];  
50:       $query=mysql_query("select a.produk,b.detail_sub_kategori_produk,c.sub_kategori_produk,d.kategori_produk from detail_sub_kategori_produk b join sub_kategori_produk c on b.id_sub_kategori_produk=c.id_sub_kategori_produk join kategori_produk d on c.id_kategori_produk=d.id_kategori_produk join produk a on a.id_detail_sub_kategori_produk=b.id_detail_sub_kategori_produk where a.id_detail_sub_kategori_produk='$id'");  
51:       $total_row=mysql_num_rows($query);  
52:  ?>  
53:  <table width="743" border="1">  
54:   <tr>  
55:    <th width="158">Produk</th>  
56:    <th width="219">detail sub kategori produk</th>  
57:    <th width="178">sub kategori produk</th>  
58:    <th width="160">kategori produk</th>  
59:   </tr>  
60:   <?  
61:   if($total_row)  
62:   {  
63:   while($row_table=mysql_fetch_array($query))  
64:   {  
65:        ?>  
66:   <tr>  
67:    <td><? echo $row_table['produk'];?></td>  
68:    <td><? echo $row_table['detail_sub_kategori_produk'];?></td>  
69:    <td><? echo $row_table['sub_kategori_produk'];?></td>  
70:    <td><? echo $row_table['kategori_produk'];?></td>  
71:   </tr>  
72:   <?  
73:   }  
74:   }  
75:   else  
76:   {  
77:       ?>  
78:    <tr>  
79:    <td colspan="4">Produk tidak tersedia</td>  
80:    </tr>  
81:    <?   
82:   }  
83:   ?>  
84:  </table>  
85:  <?       
86:  }  

untuk file sourcecodenya bisa di download disini