Pada video ini kita akan membahas mengenai salah satu komponen yang akan sering kita gunakan untuk meminta input dari pemakai, yaitu Combo Box atau biasanya dikenal juga dengan nama Drop-Down. Contohnya bisa dilihat pada sebelah kiri layar. Bentuk awal dari Combo Box mirip dengan text biasa, namun di bagian paling kanannya ada tanda panah kebawah. Apabila combo box kita klik, maka dibagian bawahnya akan muncul semua pilihan yang tersedia.

Kalau dibandingkan dengan dua tipe input yang telah kita pelajari sebelumnya, Combo Box ini adalah alternatif dari Radio. Pemakai hanya boleh memilih salah satu dari semua pilihan yang tersedia. Hanya saja ada perbedaan dari sisi tampilan. Pada sebelah kanan layar, kita bisa melihat contoh dari radio, dimana kita harus langsung menampilkan semua pilihan yang tersedia di layar. Sedangkan kalau kita bandingkan dengan contoh di sebelah kiri, pada saat menggunakan combo box kita hanya perlu menampilkan satu baris saja. Nantinya kalau combo box diklik, barulah kita menampilkan semua pilihan yang ada.

Pada HTML, untuk membuat Combo Box, kita tidak menggunakan tag input, melainkan menggunakan tag Select. Di dalam tag select, kita bisa menambahkan attribute name untuk menentukan nama variable di server yang akan menerima nilai dari Combo Box tersebut. Sebagai contoh disini kita menggunakan name=”hobby”. Apabila kita menggunakan form dengan metode POST, maka nantinya di server akan menerima nilai combo box sebagai variable $_POST[‘hobby’].

Setelah itu kita bisa menambahkan tag option, untuk memberikan pilihan apa saja yang tersedia di dalam Combo Box. Sebagai contoh kita hendak menyediakan 4 buah pilihan hobi, maka kita membuat 4 buah tag option dengan teks Gaming, Coding, Kuliner dan Traveling. Untuk setiap option, kita bisa menambahkan attribute value untuk menentukan nilai apa yang akan diterima oleh server apabila opsi tersebut dipilih oleh pemakai. Sebagai contoh, bisa dilihat pada kode bahwa untuk opsi Coding, kita memberikan attribute value dengan nilai 1. Apabila pemakai memilih opsi Coding, maka server akan menerima nilai 1.

Pada saat pertama kali halaman dibuka, biasanya combo box akan secara otomatis memilih opsi yang berada di paling atas. Namun kita bisa mengubah opsi yang terpilih, dengan cara menambahkan attribute selected pada tag option.

Seperti biasa agar lebih jelas kita coba praktek. Kita buat file baru dan kita beri nama combo.php. Di dalamnya kita buat dahulu HTML Boilerplate. Dalam tag Title, kita beri judul Combo Box. Kemudian di dalam tag body, kita tambahkan lagi tag h1 untuk menambahkan judul Combo Box. Kita buat tag form dengan method=”post”.

Di dalam form, kita akan membuat contoh Combo Box. Pertama kita tambahkan dahulu tag div, yang di dalamnya ada tag label dengan attribute for=”hobby”. Kita beri teks Hobi. Setelah itu kita buat tag div lagi yang isinya adalah tag select. Kita tambahkan attribute name dan id dengan nilai hobby.

Kita simpan dan jalankan. Maka kita sudah memiliki halaman dengan judul Combo Box dan teks Hobi. Kemudian sudah ada combo box kosong ya. Belum ada pilihan pada isinya.

Untuk menambahkan pilihan, kita bisa menggunakan tag option dengan attribute value. Isi dari value adalah nilai yang akan diterima pada server. Nilai ini tidak harus sama dengan teks-nya ya. Jadi bisa saja misalkan kita membuat tag option dengan value 0, namun teksnya adalah “Gaming”. Setelah itu kita buat lagi option dengan value 1, namun teksnya adalah “Coding”. Kalau kita refresh browser, maka sekarang combo box-nya sudah memiliki 2 buah pilihan yaitu “Gaming” dan “Coding”.

Sebagai latihan pada video ini, coba teman-teman tambahkan lagi pilihan berikutnya dalam combo box. Tambahkan 2 buah tag option untuk pilihan Kuliner dan Traveling, dengan value 2 dan 3. Pause sebentar video ini dan kerjakan pada komputer masing-masing.

Kita lanjutkan ya. Kita buat tag option dengan value=”2”, isinya adalah Kuliner. Setelah itu kita buat lagi tag option dengan value=”3”, dengan isi Traveling. Kita simpan dan refresh browser. Sekarang combo box kita sudah memiliki 4 buah pilihan. Namun kita masih belum bisa mengirimkan isi form ke server ya.

Secara kita masih kurang tombol submit. Untuk itu kita tambahkan lagi tag div. Lalu kita tambahkan tag button dengan type=”submit”. Untuk teksnya, kita ketik Kirim Data. Jadi sekarang form kita sudah memiliki tombol Kirim Data, dan kalau tombol ini ditekan, maka nilai dari combo box yang dipilih oleh pemakai akan dikirim ke server.

Nah, berhubung pada form kita tidak mengisi attribute action, maka nilai dikirimkan ke server pada halaman yang sama. Jadi kode untuk menerima nilai bisa kita tuliskan pada file ini juga. Kita ke bagian paling atas, kita tambahkan kode PHP.

Pertama kita periksa dahulu apakah metode yang digunakan adalah post. Kita gunakan percabangan if dengan kondisi nilai dari variable $_SERVER[‘REQUEST_METHOD’] apakah sama dengan ‘POST’. Apabila iya, maka kita tampilkan tulisan ‘Hobi : ‘. Ditambahkan dengan nilai dari Combo Box yang dipilih oleh user. Nilai bisa kita akses dari variable $_POST dengan index-nya adalah attribute name pada tag select, yaitu ‘hobby’.

Kita simpan dan coba jalankan ya. Kalau misalkan kita memilih hobi Coding, maka server akan menerima nilai 1, yaitu nilai value pada tag optionnya. Sebagai contoh lain, kalau kita memilih Traveling maka nilainya adalah 3.

Nah, berhubung combo box dan tombol kirimnya terlalu dekat, maka kita tambahkan tag br ya. Untuk memberikan jarak antara keduanya.

Kita lanjutkan ke masalah berikutnya. Perhatikan kalau kita memilih combo box Traveling dan menekan tombol Kirim. Maka server menerima nilai 3 yang merupakan traveling. Namun perhatikan bahwa nilai combo box kembali ke Gaming. Kita harus mengembalikan nilai combo box ke pilihan terakhir pemakai, yaitu Traveling.

Hal ini bisa kita lakukan dengan menambahkan attribute selected pada tag option yang terpilih. Namun kita mesti tau terlebih dahulu apakah option yang bersangkutan dipilih oleh user. Caranya adalah kita mesti memeriksa nilai dari variable $_POST dengan index ‘Hobby’. Namun disini kita mesti ingat bahwa pada saat pertama kali kita membuka form, kita menggunakan method get, sehingga tidak ada variable $_POST. Oleh karena itu, agar tidak terjadi error, maka kita mesti menggunakan null coalescing operator untuk memberikan nilai default string kosong.

Setelah itu kita gunakan ternary operator ya. Pertama kita cek dahulu kondisinya apakah nilainya sama dengan nilai pada value, yaitu string 0. Apabila iya, maka kita tambahkan attribute selected. Sedangkan kalau tidak maka kita tulis saja string kosong. Nah, kode ini mesti kita copy paste ke 3 option berikutnya. Kita sesuaikan nilai pada kondisinya yaitu ‘1’, ‘2’, ‘3’.

Kita simpan dan coba jalankan di server. Kita coba pilih Coding. Maka server menerima nilai 1, dan combo box kembali memilih Coding. Sedangkan kalau kita ganti menjadi Kuliner, maka server menerima nilai 2 dan combo box tetap bernilai Kuliner.

Kode kita sudah berjalan dengan benar. Namun perhatikan bahwa cara menuliskan kode HTML-nya menjadi lebih rumit. Terutama pada tag option, dimana kita mesti memastikan bahwa nilai pada attribute value harus sama dengan nilai pada ternary operator. Kalau kita lupa mengganti nilainya, maka combo box akan gagal dalam memilih kembali nilai terakhir. Oleh karena itu lebih baik kita membuat function helper untuk membantu kita menulis kode Combo Box.

Kita buka kembali file form_helper.php. Disini kita sudah pernah membuat helper untuk radio dan checkbox. Sekarang kita tambahkan fungsi baru untuk combo box.

Untuk nama functionnya, berhubung kita menggunakan tag select. Maka kita beri nama function make_select. Parameternya adalah string $name dan array $options. Function ini mengembalikan tipe data string.

Di dalam function, kita buat dahulu variable $result untuk menampung hasil string sementara, karena kode kita terdiri dari banyak baris. Baris pertama adalah tag select, dengan attribute name=\”$name\” dan attribute id=\”$id\”. Sedangkan pada baris terakhir adalah tag penutup select. Setelah itu kita kembalikan variable result.

Di dalam tag select, kita harus menambahkan tag option sebanyak pilihan yang ada. Disini kita bisa menggunakan perulangan foreach dengan argument $options as $key => $value. Jadi array yang kita gunakan pada parameter options ini harus berupa assosiative array, dimana $key adalah nilai yang akan dikirim ke server. Sedangkan $value adalah teks yang akan dilihat oleh pemakai. Di dalam perulangan, kita tambahkan nilai pada string $result yaitu tag pembuka option dengan attribute value yang nilainya diambil dari variable $key. Kemudian isi tag adalah variable $value. Dan diakhiri dengan tag penutup option.

Function helper sudah jadi. Sekarang tinggal kita coba untuk gunakan pada file combo.php. Kita ke bagian paling atas dahulu. Pertama kita tambahkan dahulu require_once menuju file helper. Pertama kita pakai dahulu konstanta __DIR__ diikuti oleh nama folder ‘/helper/form_helper.php’. Setelah itu kita tambahkan dahulu array $hobbyOptions yang berupa assosiative array, dengan isi 0 => ‘Gaming’, 1 => ‘Coding’, 2 => ‘Kuliner’ dan 3 => ‘Traveling’. Setelah itu semua tag select bisa kita hapus. Kita ganti menjadi memanggil fungsi make_select dengan argument namanya ‘hobby’, dan options-nya adalah variable $hobbyOptions yang baru saja kita siapkan.

Kalau kita coba, sekarang halaman sudah bisa menampilkan combo box ya. Dan keempat pilihan sudah tampil dengan baik. Kalau misalkan kita pilih Kuliner. Maka server menerima nilai 2. Namun perhatikan bahwa pilihannya kembali ke Gaming. Hal ini disebabkan karena kita belum mengimplementasikan attribute selected.

Kita buka kembali file form_helper. Di dalam foreach, kita harus menambahkan kode untuk memeriksa apakah kita perlu menambahkan attribute selected atau tidak. Agar lebih gampang kita bisa membuat variable $selected dan menggunakan ternary operator. Kita periksa apakah nilai dari variable $_POST[$name] ditambahkan dengan null coalescing operator dengan nilai default string kosong. Kondisinya adalah apakah nilainya sama dengan $key. Apabila benar maka kita isi dengan string ‘selected’, sedangkan kalau salah kita isi dengan string kosong. Kemudian pada bagian akhir dari tag option, kita tambahkan variable $selected.

Kita simpan dan kita coba lagi. Misalkan kita lagi pilih Kuliner. Server menerima nilai 2. Dan combo box tetap memilih Kuliner. Artinya kode kita sudah berjalan dengan benar ya.

Kita lihat kembali ke kode combo.php. Kita sudah belajar mengenai cara membuat combo box menggunakan tag select. Dan kemudian kodenya kita ringkas dengan cara membuat function helper. Jadi sekarang kita sudah bisa membuat combo box hanya dengan cara memanggil satu function make_select.

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.