Membuat Checkbox Dinamis dan Pemrosesannya March 7th, 2009 | by rosihanari |

Cetak Artikel Ini

Ingin beriklan di atas?

Pada artikel sebelumnya, sebelumnya, saya telah menjelaskan bagaimana membuat checkbox beserta  proses submitnya. Namun, checkbox yang dijelaskan tersebut bersifat statis, maksudnya item yang dituliskan pada checkbox kita sudah tentukan sendiri. Nah… bagaimana seandainya checkbox tersebut kita buat secara dinamis? Maksud dinamis di sini adalah list item akan diambil dari database. Wah kayaknya menarik tuh? Gimana yah cara membuatnya? Makanya.. simak terus artikel ini selanjutnya. Dalam artikel ini, selain kita bahas bagaimana membuat checkbox dinamis, saya juga akan bahas tuntas bagaimana pemrosesannya. Yang saya maksud pemrosesan di sini adalah cara mengambil value yang dipilih dari checkbox serta menyimpan valuenya ke dalam database. Untuk memudahkan pembahasan, kita ambil studi kasus saja ya. Studi kasus yang saya ambil di sini adalah pengambilan matakuliah oleh mahasiswa. Skenarionya adalah: daftar  matakuliah akan tersaji dalam bentuk checkbox. Daftar matakuliah ini diambil dari database. Selanjutnya mahasiswa dapat memilih beberapa matakuliah yang ada dalam checkbox. Setelah mahasiswa memilih matakuliah yang mau diambil, berikutnya data disubmit dan disimpan ke database. Berdasarkan skenario di atas, maka kita siapkan terlebih dahulu beberapa tabel  pendukungnya. Untuk contoh ini, kita perlu tabel untuk menyimpan data matakuliah yang diambil mahasiswa serta tabel untuk menyimpan semua matakuliah yang ditayangkan. Untuk tabel-tabel yang lain, misalkan tabel mahasiswa atau yang lain silakan dibuat sendiri ya. CREATE TABLE mk (

kodeMK varchar( varchar (10 10), ), namaMK varchar( varchar (20 20), ), kodeMK) PRIMARY KEY (kodeMK) ) CREATE TABLE ambilmk (

nim varchar(8), kodeMK varchar(10), nilai float, PRIMARY KEY (nim,kodeMK) )

Anda dapat menambahkan field-field yang lain pada tabel-tabel di atas bila diperlukan. Untuk tabel mk, misalkan kita sudah siapkan record-recordnya sebagai berikut: INSERT INTO mk  VALUES ('M001', 'Algoritma'); INSERT INTO mk  VALUES ('M002', 'Pengantar Basis Data' ); INSERT INTO mk  VALUES ('M003', 'Sistem Pakar');

 Now… let’s take action… terlebih dahulu kita buat form untuk menampilkan list matakuliah yang ditayangkan untuk dipilih mahasiswa. Dalam form ini, misalkan kita siapkan sebuah textbox untuk memasukkan nim mahasiswa yang akan mengambil matakuliah. Di bawah textbox tersebut, kita tampilkan daftar matakuliahnya menggunakan checkbox. form.php  
1 mysql_connect("dbhost", "dbuser", "dbpassword"); 2 mysql_select_db("dbname"); 3 ?>  4 5

Form Pengambilan Matakuliah

6 7

8 Masukkan NIM
9 Daftar Matakuliah
10   ".$data['namaMK']."
"; 18 $no++; 19 } 20 ?>  21 22

Catatan: Perintah pada baris ke-17 dalam script di atas akan menghasilkan tag-tag XHTML  berikut ini ketika dijalankan Algoritma Pengantar Basis Data

Sistem Pakar

Perhatikan pada atribut name untuk setiap komponen checkbox. Atribut ini kita buat name yang unik untuk setiap checkboxnya. Jangan memberi value name yang sama untuk  checkboxnya karena apabila diberikan name yang sama maka value yang disubmit adalah value dari checkbox terakhir yang dipilih. Oleh karena itu supaya namenya unik, kita  pakai bantuan increment $no, sehingga kita dapatkan name ‘mk1′, ‘mk2′, … dst. Selanjutnya kita buat script untuk memproses value yang disubmit via form di atas. Mungkin yang menjadi kesulitan kita adalah membaca value yang diinput melalui checkbox dinamis tersebut. Untuk data NIM saya kira tidak menjadi masalah untuk  dibaca. Untuk membaca value berasal dari checkbox dinamis, kita dapat menggunakan looping. Lho mengapa looping? bukankah kita bisa menuliskan perintah untuk pembacaan valuevalue checkboxnya secara langsung seperti ini: $mk1 = $_POST['mk1']; $mk2 = $_POST['mk2']; $mk3 = $_POST['mk3'];

Iya sih… tapi dalam contoh ini kan kita hanya punya 3 data matakuliah sehingga tidak  menjadi masalah ketika ketika menuliskan perintah pembacaan valuenya satu persatu. Tapi.. bagaimana bila terdapat 30 matakuliah yang tersedia untuk dipilih? He.. 3x repot  bukan? So.. solusinya adalah kita pakai looping. submit.php 1   

Catatan: Perintah pada baris ke-10 digunakan untuk membaca value untuk setiap komponen mk1, mk2, mk3. Apabila valuenya tidak kosong (empty), maka masukkan ke database. Eh… tunggu dulu, pada contoh ini jumlah matakuliahnya adalah fixed yaitu 3, sehingga kita bisa dengan mudah mengeset jumlah loopingnya ada 3 (for($i = 1; $i <= 3; $i++) ). Namun... bagaimana bila jumlah checkboxnya dinamis? Waduh... gimana nih? Ya.. kita terpaksa cari akal nih. Idenya adalah kita sisipkan sebuah komponen tersembunyi (hidden component) dalam form pemilihan matakuliah. Hidden component ini akan diisikan dengan jumlah matakuliah yang ditayangkan (muncul dalam daftar   pilihan). Jumlah matakuliah ini dapat diperoleh dengan memanfaatkan increment $no, yaitu nilai $no terakhir setelah looping berakhir dikurangi 1. Mengapa harus dikurangi 1? Pikirkan sendiri ya.. Begitu form ini disubmit maka jumlah matakuliah ini menjadi input yang akan digunakan dalam looping. So... kita perbaiki script formnya menjadi seperti di bawah ini: form.php  
1 mysql_connect("dbhost", "dbuser", "dbpassword"); 2 mysql_select_db("dbname"); 3 ?>  4 5

Form Pengambilan Matakuliah

6 7

8 Masukkan NIM
9 Daftar Matakuliah
10   ".$data['namaMK']."
"; 18 $no++; 19 } 20 ?>  21 22 23

Jangan lupa, kita juga ubah sedikit script pemrosesan formnya submit.php 1  
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

mysql_select_db("dbname"); $nim = $_POST['nim']; $jumMK = $_POST['jumMK']; for($i = 1; $i <= $jumMK; $i++) { $mk = $_POST['mk'.$i]; if (!empty($mk)) { $query = "INSERT INTO ambilMK VALUES(' $nim ', '$mk', 0)"; mysql_query($query); } } echo "Terimakasih sudah memilih matakuliah" ; ?> 

Udah selesai deh scriptnya. Mudah bukan cara membuat checkbox dinamis ini berserta  pemrosesannya? Tidak ada yang tak mungkin dengan programming. Semuanya pasti ada caranya, selama kita punya ide untuk menyelesaikannya. 'Ide' is the most important thing in programming. So.. inilah yang membuat mahalnya suatu program atau script, karena 'ide' sendiri adalah mahal Mudah-mudahan artikel ini ada manfaatnya. Selamat belajar dan mencoba.