Pada video pendek sebelumnya saya memberitahukan bahwa kita bisa menggunakan tag optgroup untuk melakukan grup terhadap pilihan yang tersedia seperti ini. Namun banyak juga teman-teman yang bertanya bagaimana kalau pilihannya harus diambil dari database. Jawabannya adalah kita mesti membuat function yang kalau dalam framework kita taruh di bagian helper. Fungsinya adalah untuk membantu kita membangun tag select menggunakan data yang diambil dari database.

Pada video ini saya akan membahas bagaimana cara membuat function tersebut. Perhatikan bahwa sekarang kita memiliki database dengan tabel categori dan menu. Dan pilihan data yang tampil pada halaman diambil dari kedua tabel ini. Perhatikan juga kalau misalkan user memilih Kopi Hitam pada Menu, dan kemudian memilih Paket Pecel Lele pada Menu Dengan Grup, maka pada saat kita menekan tombol submit. Pilihan pada Menu harus tetap berada di Kopi Hitam, sedangkan pilihan pada Menu Dengan Grup harus tetap berada di Paket Pecel Lele.

Kita akan mempelajari mengenai bagaimana caranya untuk membuat function yang bisa membantu kita untuk membuat tag select dengan grup seperti ini, dengan menggunakan data yang diambil dari database.

Kita mulai coding. Kita buat file helper.php. Di dalamnya kita buat tag pembuka PHP. Lalu kita buat function inputSelect dengan parameter string $name dan array $options. Function ini mengembalikan tipe data string. Dalam video ini kita akan berfokus untuk membuat function ini dan kemudian kita upgrade agar bisa menggunakan grup.

Di dalam function, kita buat variable penampung hasil sementara $s dan kita isi dengan nilai awal tag select dengan attribute name. Perhatikan bahwa berhubung kita hendak memasukkan tanda kutip ganda ke dalam string, maka kita harus menggunakan escape sequence.

$s = "<select name=\"$name\">\n";

Setelah itu kita tambahkan variable $s dengan tag penutup select.

$s .= "</select>\n";

Dan bagian terakhir, jangan lupa kita kembalikan nilai dari $s.

Selanjutnya kita buat file baru yaitu test.php. Tujuannya adalah untuk melakukan tes terhadap function yang kita buat. Selalu ingat untuk melakukan tes di setiap tahapan coding kita, sehingga kalau ada error maka kita bisa dengan segera melihat dan memperbaikinya.

Pertama kita buka tag PHP. Kemudian kita panggil file helper.php yang kita buat barusan dengan menggunakan require_once. Kita panggil echo untuk menampilkan hasil dari function inputSelect dengan argument 'kategori' dan array kosong. Kita buka console. Lalu kita jalankan php test.php. Sebagai hasilnya kita mendapatkan tag pembuka dan penutup select, dengan menggunakan attribute name="kategori".

Oke, kita lanjutkan ke tahap berikutnya ya. Kita ingin mengisi tag select dengan tag option sesuai dengan parameter options yang dikirim ke dalam function. Namun sebelumnya kita harus mengatur dahulu format array yang akan digunakan. Kalau teman-teman masih ingat, tag option memiliki attribute value sebagai nilai yang akan dikirimkan ke backend. Kemudian tag option memiliki teks yang ditampilkan ke user. Nah, format array yang akan kita gunakan disini adalah kita menggunakan value sebagai index array, sedangkan teks adalah nilai yang disimpan oleh index tersebut.

Kita buat contoh array-nya ya. Misalkan kita buat variable $options yang isinya array dengan index '1' adalah 'flora', index '2' adalah 'fauna', dan index '3' adalah 'manusia'. Kemudian array ini kita kirim sebagai argument pada inputSelect.

$options = [
  '1' => 'flora',
  '2' => 'fauna',
  '3' => 'manusia',
];

Kita coba jalankan. Tidak ada error ya.

Selanjutnya kita buka kembali helper. Kita harus mengubah array $options yang dikirim sebagai parameter menjadi tag option ya. Jadi setelah kita membuat tag pembuka select, kita harus melakukan perulangan sebanyak jumlah data pada $options. Agar lebih mudah kita gunakan sintaks foreach($options as $value => $text). Di dalamnya kita tambahkan $s dengan tag Option dengan menggunakan attribute value.

  foreach($options as $value => $text)
    $s .= "<option value=\"$value\">$text</option>\n";

Kita simpan dan kita coba jalankan lagi test.php. Hasilnya sudah ada tag select yang di dalamnya ada tag option ya. Dan perhatikan lagi nilai dari tag option-nya sudah sesuai dengan array yang kita kirimkan sebagai argument. Artinya untuk tahap ini function inputSelect sudah sesuai dengan harapan ya.

Namun apabila teman-teman ingin agar pada tag option ada terdapat indent, maka kita bisa buka kembali file helper, lalu pada bagian tag option kita tambahkan 2 buah spasi di bagian depannya. Kalau kita simpan dan jalankan, sekarang penulisan tag option menggunakan indent. Lebih gampang untuk dibaca ya.

Kita buat file baru lagi dengan nama select.php. Kali ini adalah halaman yang benar-benar menggunakan function inputSelect dengan cara mengambil datanya dari database. Kita buka tag PHP dan pertama kita require_once dahulu file helper.php. Setelah itu kita buat objek $mysqli. Argument disini disesuaikan dengan kondisi pada komputer masing-masing ya. Kalau di saya, kebetulan mysql berada di localhost, dengan user 'root', password kosong, dan nama databasenya 'coba'.

$mysqli = new mysqli('localhost', 'root', '', 'coba');

Kemudian kita buat variable $sql untuk menuliskan perintah pengambilan data ke database. Kita lihat lagi table pada database kita. Kita buka tabel category dan kita lihat nama fieldnya id dan category ya. Jadi perintah sqlnya adalah:

$sql = 'select id, category from category';

Selanjutnya kita buat variable $result untuk menampung hasil query dari perintah $sql kita. Kita coba tes tampilkan hasilnya di layar.

$result = $mysqli->query($sql);
var_dump($result);

Nah, kalau kita lihat hasilnya jumlah field_count ada 2 dan jumlah num_rows ada 3. Artinya kita sudah berhasil mengambil data dari database ya. Hanya saja kita belum bisa melihat isi datanya. Kalau kita ingin melihat datanya, kita menuliskan var_dump di dalam perulangan. Kita tulis foreach($result as $row). Lalu kita var_dump nilai dari $row. Kita jalankan. Maka kita bisa melihat data yang berhasil kita ambil.

Namun sayangnya format array dari hasil database tidak sesuai dengan format array yang kita gunakan pada function. Jadi hasil dari query ini tidak bisa langsung kita gunakan untuk function inputSelect. Hasilnya harus kita proses dahulu agar formatnya sesuai. Jadi kita buat dahulu variable $categories yang nilai awalnya adalah array kosong. Lalu di dalam foreach kita isi nilai array-nya.

Kita buka kembali file test.php ya. Ingat format array yang kita inginkan. Field 'id' harus menjadi index array. Sedangkan field 'category' menjadi nilai yang disimpan oleh array tersebut. Maka kodenya menjadi:

$categories[$row['id']] = $row['category'];

Kita tes lagi. Kita var_dump nilai dari variable $categories. Hasilnya sudah sesuai dengan format array kita ya. Index 1 menyimpan nilai 'Makanan'. Index 2 menyimpan nilai 'Minuman'. Dan seterusnya.

Sekarang kita sudah bisa tes untuk menggunakan function inputSelect menggunakan data yang kita ambil dari database. Untuk melihat hasilnya, kita bukan menggunakan var_dump ya. Lebih cocok kalau kita menggunakan perintah echo. Lalu kita panggil functionnya inputSelect('category', $categories).

Kita sudah mendapatkan hasil tag HTML yang sesuai dengan yang diinginkan ya. Kita membuat tag select. Yang kemudian menggunakan tag option dengan nilai yang diambil dari database, tepatnya table category. Yang perlu kita lakukan selanjutnya adalah menulis kode HTML-nya.

Sampai disini mungkin teman-teman ada yang bertanya ya. Mengapa hasil dari query harus kita format ulang dahulu? Mengapa bukan function inputSelect saja yang kita ubah agar bisa menggunakan langsung hasil dari query?

Jawabannya adalah karena function inputSelect harus bisa digunakan untuk query dari tabel mana pun. Nantinya function ini akan kita gunakan ulang untuk tabel menu, sedangkan nama field pada tabel menu berbeda dari tabel category. Jadi lebih baik function inputSelect kita buat dengan menggunakan format array tersendiri. Semua tabel yang hendak menggunakan function tersebut harus menyesuaikan format array-nya dengan format yang digunakan di dalam function.

Sebelum kita lanjutkan, saya mau menekankan lagi bahwa kalau kita hendak menuliskan kode yang bersih menggunakan konsep MVC atau Model View Controller, maka kode pada file select.php ini seharusnya dipisahkan lagi ke beberapa file yang terpisah ya. Biasanya kode untuk membuka koneksi database ini ditaruh pada bagian library. Kode untuk melakukan query dan mengubah format hasilnya ini ditaruh pada bagian model. Sedangkan kode HTML yang akan kita tulis seharusnya ditaruh pada bagian view. Namun berhubung tujuan utama dari video ini adalah untuk membuat function inputSelect, maka yang kita tulis terpisah hanya file helper saja ya. Karena yang nantinya bisa kita gunakan secara berulang-ulang pada proyek lain hanyalah file helper-nya saja.

Sekarang kita lanjutkan kodenya tetap di file select.php ya. Kita hapus perintah echo inputSelect. Kita buat tag penutup PHP. Lalu kita tuliskan boilerplate dari HTML. Setelah tag pembuka body, kita tambahkan tag h1 dengan isi 'Cara Menggunakan Tag Select'. Kemudian kita buat tag form dengan method="post". Di dalam form kita buat tag paragraf dengan isi Kategori. Setelah itu kita buat tag php yang berupa shorthand ya, yaitu <?=. Artinya kita langsung echo hasil dari perintah yang berada di dalam tag ini.

<?= inputSelect('category', $categories) ?>

Untuk melihat hasilnya, kita harus menggunakan browser. Kita buka ke URL file select. Sekarang kita sudah bisa menampilkan tag select yang datanya diambil dari database, atau tepatnya dari tabel category. Namun kita masih belum memiliki tombol submit ya. Untuk menambahkan tombol submit, pertama kita tambahkan dahulu 2 buah tag br. Setelah itu kita tambahkan tag input dengan type="submit".

Sekarang kita sudah bisa memilih Kategori, kemudian menekan tombol submit untuk mengirimkannya ke server. Namun perhatikan lagi bahwa kalau kita memilih Minuman, setelah kita menekan tombol submit, maka pilihannya malah kembali ke Makanan. Hal seperti ini masih kurang bagus ya. Seharusnya kalau kita sudah memilih Minuman, maka pada saat kita kembali ke halaman ini pilihannya harus tetap berada pada Minuman.

Untuk melakukan hal ini, maka kita harus menambahkan kata 'selected' pada tag option yang dipilih oleh user. Bagaimana caranya? Nah, kita buka dahulu file test.php untuk membuat test case-nya ya.

Nah, misalkan kita mensimulasikan bahwa user memilih opsi nomor 2. Maka pada PHP akan muncul variable $_POST dengan index yang diambil dari attribute name tag select, yaitu 'kategori'. Dan nilai yang disimpannya adalah 2. Jadi untuk mensimulasikannya, kita tambahkan kode

$_POST['kategori'] = 2;

Kemudian kita buka kembali file helper. Di dalam perulangan foreach ini, kita harus menambahkan kode untuk menuliskan kata 'selected' pada tag option yang dipilih. Caranya?

Nah, pada awal perulangan, kita tambahkan dahulu variable $selected dengan nilai awal string kosong. Kemudian kita periksa apakah ada variable $_POST dengan index yang diambil dari parameter $name. Kita bisa menggunakan fungsi isset. Kemudian kita test lagi apakah nilai yang dikandung oleh $_POST tersebut sama dengan $value yang dikandung oleh option. Apabila benar, maka variable $selected kita isi dengan string 'selected'. Jadi perintah yang kita tulis adalah:

    if(isset($_POST[$name]) && $_POST[$name] == $value)
      $selected = 'selected';

Kemudian pada baris berikutnya, pada tag option kita tambahkan variable $selected setelah attribute $value. Kita jalankan kembali file test.php. Perhatikan sekarang pada option 2 terdapat attribute tambahan selected.

Kita kembali ke file test.php. Kalau nilai $_POST['kategori'] kita ubah menjadi 1. Maka selected-nya pindah ke option 1. Sedangkan kalau kita komentari, maka tidak ada yang selected.

Kita buka kembali di browser ya. Kita harus baca ulang halaman select.php. Kemudian kita coba pilih Minuman. Kita tekan tombol submit. Maka pilihannya tetap berada di minuman ya. Kalau kita coba cek source-nya. Kita bisa melihat pada option 2 terdapat attribute tambahan selected.

Selanjutnya kita akan membuat tag select kedua yang datanya diambil dari tabel menu. Kita buka dahulu phpmyadmin. Lihat ke tabel menu. Field yang hendak kita gunakan adalah id dan menu.

Kita buka kembali file select.php. Kita copy paste saja ya kode yang menggunakan tabel category. Nantinya tinggal kita sesuaikan saja menjadi tabel menu. Pertama perintah sql-nya kita ganti dahulu menjadi 'select id, menu from menu'. Kemudian nama variable $categories harus diganti menjadi $menus agar kode kita tidak menimpa hasil dari tabel category. Sedangkan isi dari foreach harus kita ganti menjadi variable $menus. Kemudian mengambil nilai dari $row['menu'].

Kita coba tes dahulu kode kita. Kita var_dump nilai dari $menus. Kita coba jalankan file select.php di console. Ternyata hasilnya banyak keluar kode HTML ya. Karena kode html kita juga berada pada file yang sama. Jadi agar kita bisa konsentrasi hanya melihat isi dari variable $menus saja, kita tambahkan kode die setelah var_dump. Kita jalankan lagi. Dan isi dari variable $menus sudah sesuai harapan ya.

Jadi kita hapus lagi kode var_dump dan die. Kemudian kita lanjutkan ke kode HTML. Kita tambahkan paragraf baru dengan nilai Menu. Setelah itu kita panggil lagi function inputMenu dengan argument 'menu' dan variable $menus.

Kita buka kembali file select.php pada browser. Dan sekarang kita sudah punya combo box menu yang nilainya diambil dari tabel Menu. Kalau kita coba pilih kategori Minuman dan menu Kopi Susu, dan tekan tombol Submit. Maka pilihan pada kategori tetap berada pada Minuman dan pilihan menu tetap pada Kopi Susu. Jadi disini kita bisa melihat bahwa function inputSelect yang telah kita buat bisa dengan mudah kita gunakan untuk menampilkan data dari table lain.

Kita lanjutkan ke materi yang lebih rumit, yaitu membuat select yang ada grupnya. Misalkan seperti menu yang banyak pilihan ini, bisa kita grup berdasarkan kategorinya. Kita mulai cari contoh kasusnya dahulu ya, jadi kita buka file test.php. Kita copy paste dahulu kode sebelumnya. Namun kode awalnya kita komentari.

Pertama kita harus mengatur dahulu format array yang akan kita gunakan. Kita lihat lagi misalkan pada array dengan index 1. Disini kita hanya perlu mengirim teks yang akan ditampilkan saja. Sedangkan untuk kebutuhan sekarang, array harus bisa menyimpan 2 buah nilai, yaitu teks dan grup. Oleh karena itu kita harus menggunakan format array 2 dimensi. Array akan kita gunakan untuk menyimpan array lagi.

Kita ubah array contohnya. Untuk index '1', kita menyimpan array lagi. Dengan index 'text' berisi 'Ayam Goreng', sedangkan index 'group' berisi 'Makanan'. Kemudian index kedua kita ubah ya. Teksnya adalah Ikan Bakar, dengan grup Makanan. Lalu index ketiga teksnya adalah Kopi Hitam dengan grup Minuman. Kita tambahkan index keempat dengan teks Es Teh Manis dan group Minuman.

Kita simpan dan jalankan test.php. Tidak ada error ya. Hanya saja hasilnya tidak sesuai harapan. Teks yang keluar pada option adalah tulisan 'Array'.

Kita ubah nama function yang dipanggil ya. Nama functionnya menjadi inputSelectWithGroup. Sedangkan argument pertama adalah menu.

Sekarang kita buka file helper.php. Kita copy paste function inputSelect. Namun nama function yang baru kita ganti menjadi inputSelectWithGroup. Kita akan modifikasi function ini agar bisa membuat select yang menggunakan grup.

Yang pertama perlu kita ubah adalah sintaks foreach. Karena disini kita bukan menerima $text ya, melainkan kita menerima array yang berisi 'text' dan 'group'-nya. Jadi nama variable-nya kita ubah menjadi $arr. Kemudian di dalam perulangan, kita buat lagi variable $text yang diambil dari $arr['text']. Lalu ada variable $group yang diambil dari nilai $arr['group']. Kita coba jalankan. Option sudah berjalan dengan benar ya. Hanya saja masih belum ada group-nya.

Ingat ya, tag optgroup hanya dibuat kalau nilai group-nya berubah. Oleh karena itu kita harus membuat satu variable untuk memeriksa apakah nilai group-nya berubah. Untuk itu sebelum perulangan kita buat variable currentGroup dengan nilai awal string kosong.

Di dalam perulangan, setelah kita mengambil nilai $text dan $group. Kita periksa apakah nilai $currentGroup berbeda dari $group. Apabila berbeda, maka pertama kita simpan dahulu nilai $group ke dalam $currentGroup. Kemudian kita buat tag optgroup dengan attribute labelnya.

      $currentGroup = $group;
      $s .= "<optgroup label=\"$group\">\n";

Kita coba jalankan. Nah, mungkin kode hasilnya kurang jelas karena tidak ada inden ya. Kita bisa tambahkan inden 2 spasi pada tag optgroup. Kemudian 4 spasi pada tag option. Sekarang kode sudah berjalan dan bisa dilihat dengan jelas, namun sayangnya tidak ada tag penutup optgroup.

Logikanya adalah, pada saat kita hendak membuka tag optgroup kedua dan seterusnya, maka kita harus mendahuluinya dengan tag penutup optgroup. Jadi kita harus membuat kondisi dimana grup yang sekarang bukan grup yang pertama. Caranya? Kita periksa apakah nilai $currentGroup != ''. Ingat lagi ya, nilai awal $currentGroup adalah string kosong. Jadi pada grup pertama, nilai $currentGroup masih string kosong. Di dalam if kita tambahkan tag penutup optgroup.

Kita coba jalankan. Sekarang kita sudah memiliki tag penutup optgroup pertama. Namun pada bagian akhir tidak ada tag penutup optgroup ya. Artinya diluar perulangan kita mesti tambahkan tag penutup optgroup.

Function sudah berjalan sesuai harapan ya. Sekarang kita coba ganti test case-nya. Kita coba ganti grup 'Makanan' menjadi grup string kosong. Kita coba jalankan. Maka pada 2 opsi pertama tidak ada grupnya. Kode berjalan dengan benar.

Selanjutnya kita coba hapus lagi grup minuman menjadi grup string kosong. Kita jalankan. Ternyata pada bagian akhir ada tag penutup optgroup. Padahal tidak ada tag pembukanya. Jadi disini mesti kita modifikasi lagi ya. Pada bagian akhir function. Apabila nilai $currentGroup bukan string kosong, barulah kita tambahkan tag penutup optgroup.

Sekarang kalau semua grup adalah string kosong, maka kode berjalan dengan benar. Kita tambahkan lagi grup Makanan dan Minuman.

Kita lanjutkan tes. Misalkan user memilih opsi ketiga. Jadi kita buka lagi komentar pada $_POST. Kita ganti index-nya menjadi menu. Dan nilainya menjadi 3. Kita coba jalankan. Maka pada opsi dengan nilai 3 terdapat tambahan attribute selected. Artinya function sudah berjalan dengan benar ya. Tinggal kita gunakan saja pada halaman select.php.

Kita buka kembali halaman select.php. Kita akan buat query untuk mengambil data menu yang digabungkan dengan category. Kita copy paste dahulu kode menu.

Pertama kita mesti ubah query-nya terlebih dahulu ya. Berhubung kedua tabel sama-sama menggunakan field id, maka kita mesti jelaskan bahwa id yang kita ambil adalah menu.id. Kemudian kita tambahkan field ketiga yaitu category.

Di baris berikutnya kita lakukan join dengan table category, dimana field yang menggabungkannya adalah category.id = categorykey.

$sql .= '  inner join category on category.id = categorykey ';

Dan yang terakhir kita harus menambahkan order by. Agar menu-menu yang menggunakan kategori yang sama harus berurutan. Kalau tidak berurutan, nantinya malah menjadi grup yang berbeda.

Kita lanjutkan. Nama variable array-nya kita ubah menjadi $menusGroup. Sedangkan perintah foreach untuk mengisi array-nya menjadi lebih rumit ya. Karena disini kita menggunakan array 2 dimensi. Kita ubah dahulu nama variable-nya menjadi $menusGroup. Lalu yang disimpan di dalam array adalah array lagi. Dimana index 'text' berisikan $row['menu']. Kemudian index 'group' berisi $row['category'].

Seperti biasa kita tes dahulu var_dump nilai dari $menusGroup. Setelah itu langsung die. Kita jalankan file select.php. Lihat disini array dengan index "14", isinya adalah array dimana 'text' bernilai 'Paket Ikan Nila Goreng', sedangkan 'group' bernilai 'paket'. Mestinya sudah oke ya. Tinggal kita tambahkan ke HTML.

Kita tambahkan tag paragraf baru dengan teks Menu Group. Lalu kita panggil function inputSelectWithGroup dengan argument 'menuGroup' dan variable $menusGroup.

Kita coba jalankan di browser ya. Sekarang kita sudah memiliki menu yang pilihannya sudah ada gruping berdasarkan kategorinya, dengan menggunakan data yang diambil dari database. Kalau kita coba pilih Paket Ayam Bakar dan tekan tombol Submit, maka yang terpilih tetap Paket Ayam Bakar.

Oke, jadi di video ini kita sudah belajar bagaimana proses membuat function inputSelect dan inputSelectWithGroup yang berada pada file helper. Dan tentunya kita sekalian belajar ya, di setiap tahapan coding, kita tes dahulu apakah kode yang kita tulis tersebut sudah berjalan sesuai harapan atau belum. Saya harapkan sebagai hasil dari pembelajaran kali ini, teman-teman bisa menggunakan kedua function yang berada pada file helper ini untuk membantu teman-teman dalam mengerjakan proyek yang menggunakan tag select. Tentunya function masih bisa dimodifikasi lagi apabila teman-teman butuh menggunakan attribute HTML lainnya. Bagi teman-teman yang ingin mendapatkan source code dari video ini, bisa melihat deskripsi pada video. Semoga membantu dan sampai bertemu lagi di video berikutnya.

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.