Mudah Membuat Chained Drop Down Combo Box

Chained Dropdown List, atau Chained Combo Box, atau Chained Select, atau jika di Indonesiakan menjadi Select Bertingkat atau Combo Box Bertingkat

Belajar Programming | Chained Dropdown List, atau Chained Combo Box, atau Chained Select, atau jika di Indonesiakan menjadi Select Bertingkat atau Combo Box Bertingkat, adalah salah satu teknik yang sering ditanyakan di forum-forum pemrograman. Dengan teknik ini, kita membuat seolah-olah beberapa dropdown list atau combobox saling berhubungan, misalkan combobox nama-nama kota akan terisi otomatis sesuai dengan pilihan negara di combobox lainnya. Atau combobox list pegawai akan berubah sesuai dengan departemen yang dipilih. Teknik ini sebenarnya sangatlah sederhana, namun memerlukan pemahaman yang cukup komprehensif mengenai mengenai beberapa hal, seperti

  • cara mengambil data dari database
  • cara mengisi data ke combobox atau dropdown list
  • cara mengambil pilihan pengguna sebagai referensi untuk mengisi combobox lainnya.

Berikut ini saya coba jabarkan implementasi Teknik Combo Box Bertingkat menggunakan query ADO.NET sederhana saja. Untuk studi kasus ini, kita akan coba menghubungkan 3 (tiga) buah combobox yang berisikan daftar benua - negara - kota. Combobox Negara akan terisi sesuai dengan Benua yang dipilih, dan Combobox Kota akan terisi sesuai dengan Negara yang dipilih. Sedangkan bahasa pemrograman yang dipakai adalah C# dan VB.net untuk memudahkan teman-teman memahaminya. 

Devide and Conquer

Dengan sedikit analisa sederhana terhadap kasus ini, kita coba pecah kasus ini menjadi beberapa kasus kecil untuk mempermudah kita menyelesaikannya, antara lain,

  • bagaimana desain yang pas untuk kasus seperti ini
  • bagaimana cara mengisi combobox benua
  • bagaimana cara mengisi combobox negara
  • bagaimana cara mengisi combobox kota
  • bagaimana cara menangkap perubahan pilihan benua
  • bagaimana cara menangkap perubahan pilihan negara

Teknik "memecah problem besar menjadi beberapa problem-problem kecil" adalah salah satu teknik untuk membangun algoritma, yaitu teknik devide and conquer. Dengan memecah problem besar menjadi sejumlah problem kecil, kelihatannya memang seolah problem yang dihadapi menjadi semakin banyak, namun... walaupun kelihatan banyak, sejumlah problem kecil ini justru jauh lebih mudah kita selesaikan sehingga problem besar utama kita otomatis ikut terpecahkan.

Mari Kita Mulai...!

Pertama-tama, desain database harus kita buat dengan hati-hati agar mudah dalam proses retrieval atau pengambilan datanya. Cara paling efektif adalah denga membuat 3 (tiga) buah table yang saling berelasi, yaitu table Continents, table Countries dengan foreign key yang berelasi ke table Continents. dan terakhir, table Cities dengan foreign key yang berelasi dengan table Countries. Seperti terlihat pada gambar di bawah ini.

Sedangkan untuk desain Form, kita buat desain sederhana saja seperti  yang ada di gambar ini.

Mengisi Combobox dari Database

Untuk mengisi Combo Box, algoritma-nya adalah seperti ini,

  • Siapkan koneksi database
  • Ambil data dari database 
  • Binding data ke combobox

Dengan mengetahui langkah-langkah dasar di atas, maka kita bisa dengan mudah menterjemahkannya ke bahasa pemrograman apapun. Untuk keperluan ini, kita membuat tiga buah fungsi FillComboContinents, FillComboCountries, dan FillComboCities, masing-masing untuk mengisi data benua, negara, dan kota. Dalam bahasa pemrograman VB.net seperti ini.

Sedangkan versi C# nya adalah sebagai berikut

Menangkap Perubahan Pilihan Combo Box

Untuk menangkap perubahan pilihan pengguna, maka kita perlu mendeklarasikan beberapa event handler untuk menangani event SelectedValueChanged. Setiap kali ada perubahan di Combo Box yang berisikan data benua, maka otomatis event handler ini akan mengambil ID dari benua bersangkutan, kemudian memanggil fungsi FillCOmboCounteries yang sudah kita buat sebelumnya untuk mengisi combobox negara sesuai dengan pilihan benuanya. Logika yang sama diterapkan untuk combobox yang berisi data negara, otomatis fungsi FillComboCities akan dipanggil setiap kali ada perubahan pilihan negara. Implementasi pengambilan data dalam VB.net menjadi seperti ini,

Dan implementasi pengambilan data dalam bahasa C# menjadi seperti ini,

Hasil Akhir

Begini tampilan untuk pilihan negara sesuai benua

Chained Dropdown List, atau Chained Combo Box, atau Chained Select, atau jika di Indonesiakan menjadi Select Bertingkat atau Combo Box Bertingkat

Dan ini tampilan kota sesuai dengan pilihan negara

Chained Dropdown List, atau Chained Combo Box, atau Chained Select, atau jika di Indonesiakan menjadi Select Bertingkat atau Combo Box Bertingkat

Source code silakan download di sini.

 

Category: