Pada video ini kita akan membahas mengenai beberapa tipe input yang bisa kita gunakan agar user dapat memilih dari opsi yang telah kita sediakan. Ada 2 tipe input yang bisa kita gunakan disini yaitu radio dan checkbox. Pada tipe radio, kita hanya bisa memilih salah satu dari pilihan yang tersedia. Sedangkan pada tipe checkbox, kita bisa memilih banyak pilihan sekaligus.

Kita mulai dari radio terlebih dahulu ya. Dengan menggunakan input bertipe radio, maka kita bisa meminta agar user memilih salah satu opsi dari semua input yang menggunakan attribute name dengan nilai yang sama. Pada server, kita akan menerima nilai dari attribute value yang dipilih oleh user. Kalau kita hendak mengubah status radio menjadi terpilih, misalkan untuk memberikan default value pada saat form baru dibuka, maka kita bisa menambahkan attribute checked pada input.

Agar lebih jelas kita coba praktek. Namun kali ini saya menggunakan file yang sudah disiapkan. Pada file radio.php, kita sudah menggunakan boilerplate HTML5. Dan sudah memiliki judul, form dan button submit. Tujuannya agar video kita menjadi lebih singkat ya, secara semua isi source pada file ini sudah pernah kita bahas pada video sebelumnya.

Sekarang kita tambahkan radio di dalam form. Pertama kita buat dahulu sebuah div sebagai kontainernya. Di dalamnya kita buat div lagi untuk menampung nama data, sebagai contoh nama datanya adalah jenis kelamin.

Kemudian kita buat tag label. Di dalamnya kita tambahkan tag input dengan type=”radio” dan teksnya adalah Pria. Kita copy paste. Kita ganti input kedua dengan teks Wanita.

Kita simpan dan jalankan di browser. Sekarang kita memiliki 2 buah radio yaitu Pria dan Wanita. Berhubung kita menggunakan label, maka kita lebih mudah dalam mengklik radio. Kita tidak harus mengklik tempat pada lingkaran radio, namun bisa juga dengan cara mengklik teks Pria atau Wanita. Namun disini masih error ya, karena kita masih bisa memilih kedua radio sekaligus. Seharusnya kita hanya boleh memilih salah satu saja.

Agar radio dapat berfungsi dengan benar, maka kita harus menambahkan attribute name yang sama pada kedua input. Pada visual studio code, kita bisa menulis kode di 2 baris sekaligus. Pertama kita klik dahulu pada input pertama. Kemudian kita tekan dan tahan tombol alt. Kita klik ke input yang kedua. Sekarang kita memiliki 2 buah kursor. Kita tambahkan kode attribute name=”gender”.

Kita simpan dan jalankan di browser. Maka sekarang kita hanya bisa memilih salah satu dari pria atau wanita.

Pertanyaan berikutnya adalah nilai apa yang akan kita terima di server? Pada slide sebelumnya menjelaskan bahwa nilai yang dikirim ke server adalah nilai attribute value dari radio yang dipilih oleh user. Untuk itu kita perlu menambahkan attribute value ke kedua input. Namun nilai value-nya mesti berbeda ya, untuk menunjukkan radio mana yang dipilih oleh user. Misalkan untuk radio pria kita beri nilai 0, sedangkan untuk wanita kita beri nilai 1.

Kemudian pada bagian paling atas, kita tambahkan kode PHP untuk menerima nilai yang dikirimkan oleh form. Kita tambahkan if dahulu untuk memeriksa apakah REQUEST_METHOD bernilai ‘POST’. Apabila benar, maka kita tampilkan ‘Jenis Kelamin ‘. Ditambah dengan nilai yang dikirimkan oleh radio. Kita bisa mengaksesnya dari variable $_POST dengan index ‘gender’.

Kita simpan dan coba. Pertama kita coba pilih Pria dahulu. Maka kita menerima nilai 0. Kemudian kita coba pilih Wanita, maka kita menerima nilai 1.

Kita boleh bebas menentukan nilai apa yang dikirim ke server, melalui attribute value. Tidak harus berupa angka 0 dan 1. Bisa saja kita mengirimkan string yang sesuai dengan teks-nya. Sebagai contoh kita ubah nilai value menjadi Pria dan Wanita. Pada saat kita memilih pria, maka kita mendapatkan string pria. Sedangkan pada saat kita memilih wanita, maka kita mendapatkan string wanita.

Namun untuk alasan optimasi, biasanya saya lebih sering menggunakan nilai yang berupa angka. Karena kalau kita menyimpan nilai tersebut ke database, proses untuk menyimpan dan mengambil nilai yang berupa angka lebih cepat, dan membutuhkan ukuran storage yang lebih kecil.

Hanya saja kita perlu menambahkan kode validasi apabila kita menggunakan angka sebagai value. Sebagai contoh kita kembalikan lagi value menjadi 0 dan 1. Walaupun kita hanya menyediakan pilihan angka 0 dan 1, namun perlu diingat kembali bahwa front end bisa dengan gampang diganti oleh user yang berpengalaman. User bisa melakukan inspect, mencari bagian radio dan mengganti value menjadi huruf ‘a’. Maka nilai yang dikirim ke server menjadi huruf ‘a’. Oleh sebab itu kita mesti berhati-hati dan memastikan dahulu bahwa nilai yang dikirim adalah berupa angka. Karena kalau angka-nya ditukar menjadi huruf, bisa saja menyebabkan kode kita di baris berikutnya mengalami fatal error.

Nah, kalau kita perhatikan lagi. Misalkan kita memilih pria dan kita tekan tombol Kirim Data. Makanya radio Pria yang tadinya terpilih, sekarang berubah menjadi tidak terpilih. Padahal seharusnya kita menampilkan kembali form menggunakan pilihan terakhir.

Kita bisa membuat Pria menjadi terpilih dengan cara menambahkan attribute checked. Hanya saja masalahnya, apabila kita memilih Wanita, maka di halaman berikutnya pilihan kembali ke Pria. Sehingga form menjadi salah. Untuk memperbaiki hal ini, maka kita harus menambahkan kode PHP untuk memeriksa apakah nilai $_POST[‘gender’] sesuai dengan nilai value pada radio. Apabila iya, barulah kita menambahkan kata ‘checked’.

Untuk melakukan hal ini, kita menggunakan ternary operator. Pertama kita gunakan dahulu fungsi isset untuk memeriksa apakah ada variable $_POST dengan index ‘gender’. Kemudian kita tambahkan operator logika dan. Lalu kita periksa apakah nilai $_POST[‘gender’] adalah 0. Apabila iya, maka kita tulis kata ‘checked’. Sedangkan kalau tidak maka kita tulis string kosong. Kita copy paste kode ini untuk radio Wanita dengan nilai gender 1.

Kalau kita coba di browser, kode sudah berjalan dengan benar ya. Hanya saja kode seperti ini menyebabkan kode HTML yang harus kita tulis menjadi panjang. Ada baiknya kita membuat function helper untuk membantu kita menuliskan kode seperti ini.

Kita tambahkan folder baru dengan nama helper dan kita tambahkan file untuk menuliskan helper. Untuk helper, biasanya kita menggunakan notasi snake case. Semua kata menggunakan huruf kecil dan dipisahkan oleh tanda underscore. Untuk nama file-nya biasanya diakhiri dengan _helper. Berhubung kita hendak membuat helper yang berhubungan dengan form, maka kita beri nama file form_helper.php.

Di dalamnya kita buka tag PHP. Berhubung kita hendak menulis function yang bertujuan untuk membantu kita membuat input radio, maka kita beri nama make_input_radio. Parameter yang dibutuhkan adalah string $name dan string $value. Function mengembalikan string.

Pertama kita tentukan dahulu apakah kita perlu menambahkan attribute checked atau tidak. Kita buat variable $checked yang isinya adalah operator ternari. Kalau misalkan isset($_POST[$name]), dan nilai dari $_POST[$name] == $value, maka kita kembalikan string ‘checked’. Selain itu kita kembalikan string kosong.

Setelah itu kita kembalikan string yang menuliskan kode HTML tag input. Perhatikan pada waktu kita hendak menuliskan nilai attribute, kita harus menggunakan escape character untuk menuliskan lambang petik ganda.

  return "";

Kita kembali ke radio.php. Pada bagian paling atas kita tambahkan dahulu require_once dengan argument __DIR__ . ‘/helper/form_helper.php’. Kemudian kode tag input yang terlalu panjang ini, bisa kita ganti dengan kode php yang memanggil function make_input_radio dengan argument $name ‘gender’ dan $value 0 untuk Pria. Kita ganti lagi yang untuk wanitanya memanggil function make_input_radio dengan argument $name yang sama ‘gender’ namun $value-nya adalah 1.

Kita simpan dan jalankan di browser. Hasilnya tetap sama ya. Kode berjalan dengan baik seperti sebelumnya. Hanya saja di kode bagian form-nya jauh lebih ringkas. Kita bisa dengan mudah membuat input radio.

Nah, sebagai penyempurnaan dari file ini. Kalau kita coba buka kembali form-nya. Sama sekali belum ada salah satu dari pria atau wanita yang terpilih. Kita bisa menambahkan default value dari jenis kelamin yang terpilih dengan cara menambahkan kode pada bagian if ini. Kita tambahkan else. Artinya kalau request method-nya selain post ya. Alias pada saat form pertama kali dibuka. Kita tambahkan nilai $_POST[‘gender’] yang pertama. Misalkan kita isi dengan nilai 0. Maka secara otomatis yang terpilih adalah pria. Atau kalau kita ubah menjadi nilai 1, maka pada saat form dibuka yang terpilih adalah wanita.

Sebagai bahan latihan dari video ini, teman-teman bisa kembangkan lagi kode yang ada. Misalkan dengan menambahkan parameter baru pada function make_input_radio untuk menuliskan attribute lain seperti class. Teman-teman juga bisa menambahkan kode validasi untuk memastikan bahwa nilai yang dikirim berupa integer, dan kemudian menyimpannya ke dalam file seperti yang sudah dipelajari pada video sebelumnya.

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.