Free Ebook Tutorial from Rosihan Ari's Blog

Tutorial Javascript | Tutorial PHP | Tutorial AJAX | Tutorial CSS | Tutorial FPDF | Tutorial Wordpress | Tutorial Java SE


Ebook yang direkomendasikan untuk Anda
Ebook Panduan Praktis OOP di PHP


Membuat Checkbox Dinamis dan Pemrosesannya


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


GampSMS SMS Gateway

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
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

<?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

<?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

<?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.




Share ke Facebook Share ke Twitter
Baca Juga Artikel Terkait
Memproses Input Komponen Check Box di PHP
Script PHP untuk Membuat Report Format MS. Excel
Membuat Script PHP untuk Rekap Data dari Data Mentah
Membuat Buku Tamu dengan Emoticons
Membuat Script Random Image dengan PHP

Kata kunci: checkbox - PHP - script -


Ada 62 komentar dalam artikel ini.



  1. Fajri says:

    Mas, saya mau nanya lagi. Seperti contoh diatas, jika kita tambahkan lagi field sks, tampilan checkbox matakuliahnya dinamis. yang ingin saya tanyakan
    Bagaimana menghitung jumlah sks hanya yang dicentang pada checkboxnya saja..

    Terima Kasih Sebelumnya

  2. proklamator says:

    ijin sebar link ini gan di proklamator.com

    trims

  3. nita says:

    Waduh.. kok code formnya jd sprti itu yh pak?? kok g mncl code2nya, mlh d eksekusi? sy krm codenya mlalui pesan fb sj yh pak.. Thnx b4..

  4. hang2303 says:

    qo gak buat search engine buat web ini c????(bukan google)

    pak saya mw tanya tetang framework udah di posting blm? jika blm tolong di posting dund,,,,

  5. eQ says:

    pak saya mau tanya cara untuk membuat pencarian menggunakan checkbox + combobox dinamis.
    contoh kita mau cari fakultas dan jurusan.

  6. iwan says:

    dear mas rosihan,,, ane selalu mengikuti postingan2 mas rosihan dan banyak sekali membantu saya, saya mo menanyakan,, kklo untuk chekbox secara dinamis, misalkan ada beberapa kolom chekbox, jika chekbox yg di atas belum di klik maka chekbox yg di bawahnya akan disable, berukut sebaliknya, klo di klik makan akan enable, kira2 seperti ap yah scriptnya.. :d

  7. irfan says:

    mengulang pertanyaan mas hari..

    kalo yang ingin kita tampilkan bukan cuma
    “Terimakasih sudah memilih matakuliah”, misalnya saya ingin mengubah pilihan tersebut gmn ya Pak?
    Jadi misal saya memilih Algoritma dan Pengantar Basis Data, gmn supaya saat submit yang keluar sebuah halaman yang isinya NIM serta daftar mata kuliah, dimana Algoritma dan Pengantar Basis Data dalam keadaan terpilih (tercentang), sehingga saya dapat mengubah pilihan tersebut
    gmn script php-nya.. terimakasih…

  8. ali says:

    Mas numpang nanya mas.. kalau misalkan data mata kuliahnya di pilih setelah di pilih lagi seharusnya dia tidak bisa di pilih lagi, scriptnya headling gimana itu mas.. makasi sebelunya y mas….

  9. wkim says:

    kak coba ada tampilan hasilnya.. kan lebih puas, hehe

    ini bisa buat sistem pakar kan kak? soalnya lg nyari coding buat milih checkbox

  10. cahya says:

    pak mau tanya gimana kalo misalnya memilih mata kuliahnya dibatasi, misal 1 mahasiswa hanya bisa memilih 2 mk. ? terima kasih

  11. Ali Shahab says:

    Assalammualaikum mas Rosihan, bagaimana bila kita ingin menampilkan data check box dinamis tidak menggunakan list, tetapi menggunakan tabel dengan beberapa kolom. semisal kita punya data checkbox dinamis sebanyak 15 data, maka nanti akan tampil menjadi 3 kolom dan 5 baris. syukran atas jawabannya.

  12. Randy says:

    Kalo mau insertkan yang tidak di “check” gimana Mas Rosihan? saya coba pakai “else if” kok ID nya 0? Terimakasih sebelumya



 

Komentar/pertanyaan Anda!

Mohon maaf, komentar/pertanyaan yang menggunakan email palsu atau komentar bernada negatif, cemooh, umpatan, cacian atau sejenisnya secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

Mohon maaf jika seandainya ada beberapa pertanyaan Anda yang tidak direspon atau ditanggapi mengingat banyaknya komentar yang masuk dan keterbatasan kemampuan/ilmu saya dalam menjawab pertanyaan satu persatu. Saya harap Anda bisa memahami dan memakluminya.

Semua komentar atau pertanyaan yg masuk tidak akan langsung tampil di halaman ini, karena akan dimoderasi dahulu.


*