MasinoFormWizard18 Extension, Mengubah Tampilan Multi-Page di PHPMaker 2022

Kemarin PHPMaker 2022.11 dirilis. Bersamaan dengan dirilisnya versi tersebut, saya sedang menyelesaikan sebuah Extension baru lagi, yang merupakan bagian dari Masino Extensions. Namanya MasinoFormWizard18.

Seperti namanya, Extension ini berfungsi untuk mengubah tampilan Multi-Page pada halaman Add, Edit, View, Search, dan juga Registration menggunakan style Form Wizard. Tersedia tombol Maju (Next) dan Mundur (Prev) untuk berpindah dari satu halaman ke halaman lain.

Dengan menggunakan Extension tersebut, aplikasi web yang kita hasilkan dengan PHPMaker 2022 and Masino Extensions pun sekarang menjadi lebih eye-catching dan profesional lagi. Mengapa? Karena judul setiap halaman pada fitur Multi-Page kelihatan lebih jelas terbaca, dan nyaman ketika mengeksplorasi antar halaman.

Hari ini, Selasa, 1 Maret 2022, saya secara resmi merilis Extension MasinoFormWizard18 tersebut. Jika Anda sudah menjadi member, silahkan download dari situs I Love PHPMaker.

Tidak hanya Masino Extensions yang saya perbarui, tapi juga project demonya. Pastikan Anda mendownload file demo project tersebut sebagai referensi sebelum menggunakannya di project PHPMaker 2022 Anda.

Sekarang mari kita bahas, opsi apa saja yang tersedia di Extension MasinoFormWizard18. Pertama, pengaturan level project yang akan berlaku untuk semua Form Wizard, yaitu:

– WizardTheme, tersedia 4 pilihan theme yang bisa Anda pilih: arrows, default, dots, dan progress.

– WizardAnimation, tersedia 5 pilihan animasi saat berpindah antar halaman: none, fade, slide-horizontal, slide-vertical, dan slide-swing.

– WizardJustified, jika diaktifkan maka baris judul Multi-Page menjadi rata kiri kanan. Sebaliknya, menjadi rata kiri.

– WizardAutoAdjustHeight, jika diaktifkan maka tinggi maksimal dari setiap halaman yang dimuat akan otomatis menyesuaikan dengan tinggi halaman yang aktif. Sebaliknya, tinggi halaman menjadi statis (tidak disarankan).

– WizardToolbarPosition, tersedia 3 pilihan posisi toolbar, apakah top (atas), bottom (bawah), atau both (keduanya, yaitu atas dan bawah).

– WizardToolbarButtonPosition, tersedia 3 pilihan posisi tombol pada toolbar, apakah left (kiri), right (kanan), atau center (tengah).

– WizardRegistrationPage, jika diaktifkan maka akan berlaku juga pada halaman Registrasi (register).

Selain pengaturan level project, tersedia juga pengaturan level table, sehingga Anda dapat menerapkan Form Wizard tersebut hanya pada satu atau beberapa, atau bahkan semua table (defaultnya aktif untuk semua table), yaitu:

– WizardAddPage, jika diaktifkan maka akan diterapkan pada halaman Add.

– WizardEditPage, jika diaktifkan maka akan diterapkan pada halaman Edit.

– WizardViewPage, jika diaktifkan maka akan diterapkan pada halaman View.

– WizardSearchPage, jika diaktifkan maka akan diterapkan pada halaman Search.

Syarat utama supaya Form Wizard ini dapat diterapkan pada kelima halaman tadi (Add, Edit, View, Search, dan Registration) adalah kita harus mengaktifkan opsi Multi-Page dari level Table project PHPMaker 2022.

Sedangkan untuk opsi Multi-Page Type boleh dikosongkan saja.

Kemudian jangan lupa juga untuk mengaktifkan opsi Add page, Edit page, View page dan Search page di bawahnya.

Khusus untuk halaman Registrasi, maka pastikan kita sudah mengaktifkan pilihan Registration page dari table yang digunakan untuk Login Security.

Untuk mengetahui table mana yang digunakan untuk fitur Login Security tadi, kita bisa melihatnya dari menu Security -> Use Existing Table -> Table pada project PHPMaker 2022.

Secara umum, Extension MasinoFormWizard18 menggunakan fitur validasi form bawaan asli PHPMaker 2022. Untuk keperluan ini, maka khusus di halaman Registration (register), setiap judul halaman yang terkait dapat bebas diklik, dan dibuka halamannya kapan pun. Itu artinya, antara satu step dengan step berikutnya tidak harus berurutan.

Jadi, tidak seperti Form Wizard pada umumnya, yang biasanya mempersyaratkan untuk mengikuti urutan langkah demi langkah dari awal sampai akhir dengan mengklik tombol Next, maka Form Wizard pada Extension MasinoFormWizard18 bersifat dinamis.

Anda bisa membuka suatu halaman dengan mengklik judul halamannya tanpa harus berurutan dari awal sampai akhir. Jadi, tidak harus menggunakan tombol Next untuk maju ke halaman berikutnya.

Tentu saja ada beberapa alasan/pertimbangannya, mengapa hal ini terjadi.

Pertama, karena logic Form Wizard pada halaman Registration ini juga diterapkan pada halaman View dan Search yang tidak harus mempersyaratkan untuk mengakses halaman pada fitur Multi-Page secara berurutan.

Kedua, karena validasi form menggunakan fitur bawaan asli PHPMaker 2022, yang memungkinkan untuk melakukan validasi data tanpa dibatasi hanya pada satu halaman tertentu di Multi-Page tadi. Ketika Pengguna Akhir mengklik tombol submit untuk menyimpan data (misalnya), maka PHPMaker akan memvalidasi semua field pada satu kesempatan.

Ketiga, dengan perilaku ini, maka Form Wizard terlihat lebih dinamis dan nyaman mengeksplorasi halaman di dalamnya. Pada akhirnya Pengguna Akhir tidak merasa dibatasi pergerakannya ketika ingin melihat data di halaman yang satu dan halaman lainnya.

Sedangkan khusus untuk halaman Add dan Edit, Wizard akan otomatis memvalidasi control input pada halaman di tab yang sedang aktif/terbuka. Jadi, sistem akan memaksa Pengguna Akhir untuk mengisi data pada field yang mandatory sebelum pindah ke tab lainnya.

Contoh, jika misalnya Pengguna Akhir sedang berada pada halaman/tab pertama, lalu ada field yang mandatory (Required) belum diisi datanya, maka ketika Pengguna Akhir mengklik tombol Next atau Maju untuk ke halaman/tab berikutnya, sistem akan mencegah, dan menampilkan pesan error di bawah field yang mandatory tadi.

Yang menariknya, fitur Form Wizard ini juga dapat diterapkan pada halaman-halaman di atas tadi pada jendela Modal. Tentu saja kita harus mempertimbangkan sebelum menerapkannya di form Modal. Pastikan jumlah maksimal halaman tidak terlalu banyak. Disarankan maksimal 3 Halaman saja pada Multi-Page tadi untuk form Modal.

Jika lebih dari 3 halaman, maka pastikan untuk menggunakan halaman yang normal (bukan form Modal), supaya lebar halaman bisa lebih luas lagi dan semua judul halaman tidak terpotong.

Dan yang lebih menariknya lagi, tampilan Form Wizard ini sudah responsive-design. Itu artinya, jika ditampilkan pada layar HandPhone, maka layoutnya akan otomatis menyesuaikan dengan lebar layar. Demikian pula dengan judul dari setiap halaman pada Multi-Page tadi.

Jika ingin melihat demonya secara live, silahkan klik link ini. Anda bisa melihat Form Wizard in action pada halaman Registrasi sebelum login.

Jika ingin melihat Form Wizard pada halaman lainnya, pastikan sudah login dengan username admin dan password master. Anda bisa melihatnya dari menu Cars, Cars 2, Orders, Products, Suppliers, Employees, dan User Profiles.

Satu lagi bukti nyata, mengapa Anda sudah saatnya menggunakan Masino Extensions pada project PHPMaker 2022.