Pada video sebelumnya kita telah belajar mengenai tipe input radio, dimana kita bisa meminta user untuk memilih salah satu dari pilihan yang kita sediakan. Pada video ini, kita akan belajar mengenai tipe input checkbox, dimana kita memberi kebebasan kepada user untuk memilih lebih dari satu pilihan yang tersedia, atau boleh juga tidak memilih sama sekali.

Di layar, kita bisa melihat contoh form yang menggunakan checkbox untuk memilih Hobi. Checkbox berbentuk kotak, berbeda dari radio yang berbentuk lingkaran. Apabila user memilih checkbox, maka di dalam kotak ada centangan. User diperbolehkan untuk memilih lebih dari satu checkbox. Pada contoh disini user memilih semua checkbox yang ada.

Untuk membuat checkbox, kita bisa menggunakan tag input dengan attribute type=”checkbox”. Kita bisa menambahkan attribute name untuk menentukan nilai index dari variable $_POST yang akan menyimpan nilai checkbox. Kemudian kita bisa menambahkan attribute value untuk menentukan nilai yang akan dikirim ke server apabila checkbox dicentang.

Pada contoh disini kita menggunakan name=”coding” dan value=”1”. Apabila user mencentang checkbox coding, maka nantinya diserver kita akan mendapatkan variable $_POST dengan index ‘coding’ dan bernilai 1. Namun apabila user tidak mencentang checkbox coding, maka di server kita tidak mendapatkan variable $_POST dengan index ‘coding’.

Seperti biasa, agar lebih jelas kita coba praktek. Kita buat file baru dan kita beri nama checkbox.php. Agar lebih cepat, kita copy paste kode dari file sebelumnya yaitu radio.php. Kemudian kita modifikasi sedikit untuk belajar mengenai checkbox.

Pertama untuk judulnya kita ubah dari Jenis Kelamin menjadi Hobi. Sedangkan pilihan yang tersedia adalah Coding dan Gaming. Kita buat dua pilihan dulu ya. Kita pisahkan antara tag dan teks-nya.

Dan untuk function make_input_radio, kita ubah menjadi tag input untuk checkbox. Untuk belajar, pertama kita gunakan cara manual terlebih dahulu ya. Kita buat tag input dengan attribute type bernilai checkbox. Kemudian kita tambahkan attribute name untuk menentukan nama index dari nilai yang akan dikirim ke server. Untuk saat ini kita gunakan nama “Coding”. Setelah itu kita tambahkan lagi attribute value untuk menentukan nilai yang dikirim ke server apabila checkbox ini dicentang. Kita isikan dengan nilai angka 1.

Kita copy paste tag input untuk membuat checkbox kedua. Kita ubah namanya menjadi “Gaming”.

Kita pindah ke kode di paling atas. Di dalam if $_SERVER[‘REQUEST_METHOD’] == ‘POST’, kita ubah. Nilai yang hendak kita tampilkan ke layar diubah menjadi ‘Coding: ‘ . $_POST[‘coding’]. Kita copy paste lagi untuk menampilkan juga nilai Gaming. Sedangkan pada bagian else digunakan untuk memberikan nilai default pada checkbox, untuk saat ini kita kosongkan dahulu.

Kita simpan dan kita coba jalankan di browser. Kita coba zoom in ke 150% agar tulisannya lebih besar. Pertama kita coba kirim data tanpa centang sama sekali dahulu ya. Kita mendapatkan hasil warning bahwa variable $_POST tidak memiliki index ‘coding’ maupun index ‘gaming’.

Error seperti ini memang wajar terjadi karena cara browser memproses checkbox. Apabila checkbox tidak dicentang, maka browser tidak mengirimkan nilai sama sekali. Sebagai akibatnya, pada server tidak ada nilai pada variable $_POST dengan index coding dan variable $_POST dengan index gaming. Sedangkan kalau kita tes mencentang checkbox coding, maka pada server akan mendapatkan variable $_POST dengan index coding, dengan nilai 1. Nilai 1 ini diambil dari nilai pada attribute value.

Untuk mencegah agar tidak terjadi warning, sejak PHP 7 kita bisa menggunakan null coalescing operator. Bagaimana caranya? Pertama kita taruh dahulu variable $_POST[‘coding’] di dalam tanda kurung. Kemudian kita tambahkan dua buah tanda tanya, diikuti dengan nilai default yang akan digunakan apabila variable $_POST[‘coding’] bernilai kosong atau null. Sebagai contoh disini kita gunakan nilai default 0. Kita gunakan juga kode ini untuk checkbox gaming.

Sekarang kita coba. Kalau misalkan kita mencentang checkbox coding dan tidak mencentang checkbox gaming. Maka kita tidak mendapatkan warning sama sekali. Untuk checkbox coding kita mendapatkan nilai 1 yang diambil dari nilai pada attribute value. Sedangkan untuk checkbox gaming, kita mendapatkan nilai 0 yang diambil dari nilai pada null coalescing operator. Agar lebih jelas, kita bisa tambahkan tag
pada echo agar keduanya pisah baris.

Selanjutnya kita bahas mengenai repopulate nilai pada form. Apabila kita mencentang checkbox coding dan mengirimkannya ke server. Maka pada form, checkbox coding harus tetap dicentang. Sedangkan kalau kita lihat disini checkbox coding tidak dicentang.

Untuk mengembalikan checkbox ke kondisi tercentang, maka kita harus menambahkan attribute checked. Namun sebelumnya kita harus periksa dahulu apakah nilai variable $_POST[‘coding’] adalah 1.

Disini kita bisa menggunakan ternary operator pada bagian akhir dari tag input. Kondisi awalnya adalah nilai dari variable $_POST[‘coding’] ditambahkan dengan null coalescing operator untuk memberikan nilai default-nya. Kalau pada kode diatas, kita menggunakan nilai default ‘0’. Nilai default disini biasanya adalah nilai yang akan dimasukkan ke database, biasanya 0. Namun teman-teman bisa mengubah nilai default sesuai dengan kebutuhan proyeknya.

Sedangkan pada tag input, kita memberikan nilai default yang berupa nilai yang tidak akan pernah digunakan sebagai nilai di dalam attribute value. Sebagai contoh disini kita gunakan nilai default string kosong. Kemudian kita periksa dengan operator perbandingan, apakah nilainya sama dengan nilai pada attribute value, yaitu angka 1. Apabila benar, maka kita kembalikan kata ‘checked’. Sedangkan apabila salah, maka kita kembalikan string kosong.

Kita tes dari awal ya. Pertama kali form-nya kosong, tidak ada yang dicentang. Pertama kita kirim checkbox kosong dulu ke server. Maka hasilnya checkbox-nya tetap kosong ya. Kemudian kita centang checkbox coding. Kemudian hasilnya checkbox coding tetap dicentang.

Kode kita sudah berjalan sesuai harapan ya. Namun sayangnya kalau kita perhatikan lagi, cara menulis tag input-nya menjadi rumit karena bagian attribute checked. Untuk menyederhanakannya, kita bisa membuat function helper.

Kita buka kembali file form_helper.php. Kita tambahkan function baru dengan nama make_input_checkbox. Parameter pertama adalah string $name dan parameter kedua string $value. Mengembalikan tipe data string.

Pada isi functionnya, pertama kita buat variable checked untuk menuliskan attribute checked. Isi kodenya sama dengan kode html tadi ya. Kita gunakan ternary operator. Sebagai kondisi, pertamanya adalah variable $_POST dengan index $name. Kita gunakan null coalescing operator dengan nilai default string kosong. Kemudian kita periksa apakah nilainya sama dengan $value. Apabila iya maka kita kembalikan string ‘checked’. Apabila tidak maka kita kembalikan string kosong.

Setelah itu kita buat tag input dengan attribute name=”$name”. Kemudian attribute type=”checkbox” dan attribute value=”$value”. Dan terakhir kita tambahkan nilai dari variable $checked.

Kita kembali ke file checkbox.php. Kita ganti kedua input checkbox ini menjadi menggunakan function helper. Kita panggil make_input_checkbox(‘coding’, ‘1’). Dan kemudian kita panggil lagi make_input_checkbox(‘gaming’, ‘1’).

Kita simpan dan coba jalankan. Kita coba centang gaming dan tekan tombol submit. Maka di server akan mendapatkan variable $_POST[‘coding’] dengan nilai 0 dan $_POST[‘gaming’] dengan nilai 1. Sedangkan kondisi checkbox sekarang coding tidak dicentang dan gaming sedang dicentang. Artinya function make_input_checkbox sudah berfungsi sesuai harapan kita ya.

Kita lanjutkan materi mengenai checkbox. Kita bisa mengirimkan nilai checkbox ke server dalam bentuk array. Bagaimana caranya? Kita dapat menggunakan nama yang sama di semua checkbox, namun pada bagian paling belakang namanya kita tambahkan simbol [], untuk menandakan bahwa nilainya menggunakan tipe data array.

Sebagai contoh, kita bisa melihat di slide sebelah kiri adalah kode kita yang terakhir. Disini kita masih menggunakan checkbox dengan nilai masing-masing. Apabila kedua checkbox kita centang dan kita kirim ke server, maka server akan menerima $_POST dengan index coding dan nilai 1. Kemudian server juga menerima $_POST dengan index gaming dan nilai 1.

Pada sebelah kanan, kita bisa melihat cara mengirimkan nilai checkbox sebagai array. Disini semua checkbox menggunakan nama yang sama, yaitu hobbies. Namun di bagian paling belakangnya kita tambahkan tanda [] sebagai penanda bahwa kita akan menggunakan tipe data array. Kemudian pada attribute value, kita memberikan nilai unik untuk masing-masing hobi. Sebagai contoh kita menggunakan string ‘coding’ dan string ‘gaming’. Kalau kode di sebelah kanan kita jalankan dan kita centang kedua checkbox, maka pada server kita akan menerima $_POST dengan index hobbies, yang nilainya adalah sebuah array yang berisi string ‘coding’ dan string ‘gaming’.

Kita coba praktek ya. Kita buat file baru dengan nama checkbox_array. Lalu kita copy paste isinya dari kode checkbox yang barusan. Namun disini kita mesti modifikasi sedikit ya.

Apabila kita ingin mengirimkan nilai dalam bentuk array, maka kita mesti menggunakan nama yang sama pada semua checkbox. Jadi kita ganti nilai argument dari kedua checkbox-nya menjadi hobbies. Jangan lupa menggunakan simbol [] pada bagian akhir nama. Disini teman-teman mesti ingat menggunakan tanda kurung siku ya. Karena kalau sampai kita lupa, maka data dikirim ke server menggunakan tipe data string biasa, dimana data yang paling akhir akan menimpa nilai dari semua data sebelumnya.

Kemudian pada bagian value, kita ganti menjadi nilai unik dari masing-masing hobi. Disini kita menggunakan tipe data string saja. Yaitu string ‘coding’ untuk hobi coding dan string ‘gaming’ untuk hobi ‘gaming’.

Kita kembali ke bagian paling atas kode. Berhubung nilai yang dikirim ke server sudah bukan masing-masing coding dan gaming lagi, maka kita hapus kedua baris echo ini. Kita ganti menjadi var_dump untuk satu nilai saja yaitu $_POST[‘hobbies’].

Kita simpan dan coba jalankan di server. Apabila kita tidak mencentang checkbox mana pun, maka kita mendapatkan warning karena server tidak menemukan variable $_POST dengan index hobbies.

Apabila kita hanya mencentang checkbox coding, maka kita mendapatkan sebuah array yang isinya string ‘Coding’. Sedangkan kalau kita hanya mencentang checkbox gaming, maka kita mendapatkan sebuah array yang isinya string ‘Gaming’. Kalau kita coba untuk mencentang kedua hobi, maka kita mendapatkan array yang isinya dua buah string ‘Coding’ dan ‘Gaming’.

Agar tidak terjadi warning pada saat tidak ada hobi yang dipilih, maka kita bisa menambahkan null coalescing operator, dengan nilai default array kosong. Sekarang sudah tidak error. Namun perhatikan bahwa bagian repopulate-nya gagal untuk mencentang kembali checkbox yang telah dipilih. Untuk memperbaiki hal ini, kita mesti mengubah helper agar melakukan pemeriksaan checked menggunakan tipe data array.

Kita buka kembali file helper. Disini kita mesti membuat function baru ya. Misalkan kita copy paste make_input_checkbox dan kita ganti namanya menjadi make_input_checkbox_array. Untuk variable $checked-nya mesti kita ubah kondisinya menjadi memanggil function in_array. Argument pertama adalah nilai yang hendak dicari yaitu parameter $value. Sedangkan argument kedua adalah nama array-nya yaitu $_POST[$name] ditambah dengan null coalescing operator dengan nilai default array kosong. Jadi disini kita melakukan pemeriksaan, apabila nilai parameter $value ada di dalam array $_POST, maka kita berikan tanda centang pada checkbox.

Perhatikan disini nilai dari parameter $name sudah tidak boleh mengandung simbol tanda kurung siku ya. Karena kita menggunakan nilai $name untuk mengakses variable $_POST. Jadi pada saat hendak menulis nilai attribute name pada tag input, kita tambahkan tanda kurung sikunya. Agar kode nilai parameter $name tidak tercampur dengan tanda kurung siku, maka kita pisahkan dalam tanda kurung kurawal.

Kita kembali ke file checkbox_array.php. Untuk membuat checkbox, kita ubah nama functionnya menjadi make_input_checkbox_array. Sedangkan untuk argument namanya sudah tidak menggunakan simbol tanda kurung siku.

Kita simpan dan coba jalankan. Kita coba dahulu mengirimkan checkbox kosong ke server. Dan hasilnya kedua checkbox tetap kosong ya.

Selanjutnya kita coba untuk mencentang checkbox coding dan mengirimkannya ke server. Hasilnya checkbox coding dicentang, sedangkan checkbox gaming tidak dicentang. Artinya kita sudah berhasil melakukan repopulate nilai dari form yang dikirim ke server.

Sebagai bahan latihan dari video ini, teman-teman bisa kembangkan lagi kode yang ada. Misalkan dengan menambahkan parameter baru pada function make_input_checkbox untuk menuliskan attribute lain seperti class. Dan teman-teman bisa menambahkan kode untuk menyimpan nilai tersebut ke dalam file pada server. Selain itu, kalau teman-teman perhatikan kode make_input_radio masih belum menggunakan null coalescing operator ya. Jadi teman-teman bisa memperbaharui kode ini dengan menggunakan fitur baru dari PHP 7.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.