Anda di halaman 1dari 5

Membuat Checkbox Dinamis dan Pemrosesannya

March 7th, 2009 | by rosihanari | Cetak Artikel Ini

Ingin beriklan di atas?

Pada artikel 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(10),
namaMK varchar(20),
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

<?php
1
mysql_connect("dbhost", "dbuser", "dbpassword");
2
mysql_select_db("dbname");
3
?>
4
5
<h1>Form Pengambilan Matakuliah</h1>
6
7
<form method="post" action="submit.php">
8
Masukkan NIM <input type="text" name="nim" /><br />
9
Daftar Matakuliah <br />
10
<?php
11
$query = "SELECT * FROM mk";
12
$hasil = mysql_query($query);
13
$no = 1;
14
while ($data = mysql_fetch_array($hasil))
15
{
16
echo "<input type='checkbox' value='".$data['kodeMK']."' name='mk".
17
$no."' /> ".$data['namaMK']."<br />";
18
$no++;
19
}
20
?>
21
<input type="submit" name="submit" value="Submit" />
22
</form>

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

<input type='checkbox' value='M001' name='mk1' /> Algoritma


<input type='checkbox' value='M002' name='mk2' /> Pengantar Basis Data
<input type='checkbox' value='M003' name='mk3' /> 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 value-
value 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 <?php
2
3 mysql_connect("dbhost", "dbuser", "dbpassword");
4 mysql_select_db("dbname");
5
6 $nim = $_POST['nim'];
7
8 for($i = 1; $i <= 3; $i++)
9 {
10 $mk = $_POST['mk'.$i];
11 if (!empty($mk))
12 {
13 $query = "INSERT INTO ambilMK VALUES('$nim', '$mk', 0)";
14 mysql_query($query);
15 }
16 }
17
18 echo "Terimakasih sudah memilih matakuliah";
19
20 ?>
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

<?php
1
mysql_connect("dbhost", "dbuser", "dbpassword");
2
mysql_select_db("dbname");
3
?>
4
5
<h1>Form Pengambilan Matakuliah</h1>
6
7
<form method="post" action="submit.php">
8
Masukkan NIM <input type="text" name="nim" /><br />
9
Daftar Matakuliah <br />
10
<?php
11
$query = "SELECT * FROM mk";
12
$hasil = mysql_query($query);
13
$no = 1;
14
while ($data = mysql_fetch_array($hasil))
15
{
16
echo "<input type='checkbox' value='".$data['kodeMK']."' name='mk".
17
$no."' /> ".$data['namaMK']."<br />";
18
$no++;
19
}
20
?>
21
<input type="hidden" name="jumMK" value="<?php echo $no-1; ?>" />
22
<input type="submit" name="submit" value="Submit" />
23
</form>

Jangan lupa, kita juga ubah sedikit script pemrosesan formnya

submit.php

1 <?php
2
3 mysql_connect("dbhost", "dbuser", "dbpassword");
4 mysql_select_db("dbname");
5
6 $nim = $_POST['nim'];
7 $jumMK = $_POST['jumMK'];
8
9 for($i = 1; $i <= $jumMK; $i++)
10 {
11 $mk = $_POST['mk'.$i];
12 if (!empty($mk))
13 {
14 $query = "INSERT INTO ambilMK VALUES('$nim', '$mk', 0)";
15 mysql_query($query);
16 }
17 }
18
19 echo "Terimakasih sudah memilih matakuliah";
20
21 ?>

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.