Rosihan Ari`s Blog

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
mysql_connect("dbhost", "dbuser", "dbpassword");
mysql_select_db("dbname");
?>
 
<h1>Form Pengambilan Matakuliah</h1>
 
<form method="post" action="submit.php">
Masukkan NIM <input type="text" name="nim" /><br />
Daftar Matakuliah <br />
<?php
$query = "SELECT * FROM mk";
$hasil = mysql_query($query);
$no = 1;
while ($data = mysql_fetch_array($hasil))
{
  echo "<input type='checkbox' value='".$data['kodeMK']."' name='mk".$no."' /> ".$data['namaMK']."<br />";
  $no++;
}
?>
<input type="hidden" name="jumMK" value="<?php echo $no-1; ?>" />
<input type="submit" name="submit" value="Submit" />
</form>

Jangan lupa, kita juga ubah sedikit script pemrosesan formnya

submit.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
 
mysql_connect("dbhost", "dbuser", "dbpassword");
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.

Beberapa artikel terkait

• Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)
• Membuat Pilihan Combobox Dinamis Tanpa AJAX
• Memproses Input Komponen Check Box di PHP
• Script PHP Updating Data Secara Simultan (Studi Kasus Update Nilai Kuliah Mahasiswa)
• Membuat Script PHP untuk Hapus Data dengan Multi Selection
• Ide Membuat Script Grafik PHP Untuk Menampilkan Indeks Prestasi Mahasiswa (Studi Kasus)
• Script PHP untuk Membuat Report Format MS. Excel
• Ide Membuat Script PHP untuk Pencarian dengan Multi Kategori
• Script PHP Menampilkan Hasil Pencarian Multikategori dengan Advanced Paging
• Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan