Membuat Modal Form & Membuat Halaman Not Found

Pada praktikum kali ini kita akan mencoba membuat Form berbentuk modal serta mengatur halaman default ketika terjadi Missing File (Kode 404 File Not
Found). Form berbentuk modal memiliki keunggulan yaitu menghemat tempat dikarenakan berupa PopUp sehingga layout halaman dapat digunakan sebagai
interface data. CodeIgniter 4 telah memiliki halaman khusus jika terjadi Missing File seperti contoh berikut

Akan tetapi kita akan mendesain sendiri secara Custom halaman tersebut. Setelah memahami skenario yang akan dilakukan, maka langkah-langkahnya sebagai
berikut
1. Project yang digunakan adalah project yang ada di folder pw5.
2. Modal Form yang dimaksud pada skenario adalah Form yang digunakan untuk menambah data. Form berbentuk modal ini ditempatkan pada view buku yang
ada di app/views. Agar Form berbentuk modal ini bisa muncul maka kita gunakan tombol sebagai pemicunya. Silahkan buat tombol Tambah Data pada view
buku. Ubah syntax berikut
Menjadi
3. Jika view buku diakses maka akan menghasilkan tampilan seperti berikut
4. Langkah berikutnya adalah membuat layout Form berbentuk modal. Syntax untuk membuatnya ditempatkan dibaris 41 seperti gambar berikut
Berikut syntax yang digunakan untuk membuat form berbentuk modal
5. Setelah berhasil membuat form modal-nya, maka langkah berikutnya adalah menghubungkan Modal dengan tombol tambah data agar jika tombol ditekan
akan memunculkan form berbentuk modal. Ubah syntax berikut

Menjadi

6. Silahkan diujicoba. Jika tombol Tambah Data ditekan, maka akan memunculkan Form Berbentuk Modal yang telah dirancang sebelumnya. Jika berhasil maka
seperti gambar berikut
7. Setelah langkah sebelumnya berhasil dilakukan, sebenarnya ada yang masih belum sesuai yaitu mengenai Accidental Click. Jika kita tidak sengaja meng-klik
diluar layout modal, maka modal akan menutup secara otomatis karena dianggap cancel. Hal ini akan merepotkan ketika proses pengisian data pada form.
Sehingga solusi yang dapat dilakukan adalah memberikan pengaturan untuk men-disable klik diluar modal. Ubah syntax berikut yang berada di view buku

Menjadi
8. Silahkan diujicoba. Jika tombol Tambah Data ditekan, maka akan memunculkan Form Berbentuk Modal yang jika diklik diluar layout Modal-nya, tidak akan
tertutup. Untuk menutup modal, silahkan tekan tombol x yang ada di pojok kanan atas modal.
9. Langkah berikutnya adalah membuat view yang bernama hal404. View ini digunakan untuk menggantikan halaman peringatan Not Found milik CodeIgniter
4. Buat sebuah file bernama hal404.php yang ditempatkan di app/views. Syntaxnya sebagai berikut
10. Langkah berikutnya adalah mengkonfigurasi pengaturan CodeIgniter 4 pada mekanisme File Not Found. Modifikasi file Routes.php pada syntax berikut

Menjadi

11. Silahkan uji dengan url localhost/pw5/ujicoba. Url ini memiliki maksud untuk men-skenariokan Routing yang salah. Harapannya jika sistem medeteksi Routing
yang salah maka akan menjalankan pengaturan 404Override. Jika pengaturan benar, maka akan menghasilkan tampilan sebagai berikut
12. Sampai langkah diatas disimpulkan bahwa praktikum telah berhasil dilakukan.