Sebelum saya merilis Masino Extensions untuk PHPMaker 2019, saya harus merilis terlebih dulu contoh demo aplikasi web yang berisi fitur-fitur pada Masino Extensions. Hal ini perlu, untuk memberi gambaran kepada Anda, seperti apa sih tampilan aplikasi web yang dihasilkan oleh PHPMaker 2019 dan Masino Extensions.
Selain itu, saya juga ingin memastikan bahwa semua fitur-fitur baru yang saya tambahkan pada Masino Extensions memang berfungsi sebagaimana mestinya. Saya tidak ingin sekedar menambahkan suatu fitur, tanpa melalui proses pengujian pada Aplikasi Web itu sendiri.
Aplikasi Web Demo Masino Extensions dan PHPMaker 2019 bisa Anda akses melalui http://demo15.ilovephpmaker.com. Seperti demo di versi-versi sebelumnya, Anda bisa login menggunakan salah satu dari beberapa akun dengan level pengguna berbeda berikut ini:
User Level: Administrator
Username: admin
Password: master
User Level: Operator
Username: nancy
Password: 1234
User Level: Manager
Username: andrew
Password: 1234
Sebagai informasi, pada Masino Extensions untuk PHPMaker 2019 ini, saya masih mempertahankan AdminLTE 3 yang digunakan oleh PHPMaker 2019. Pertimbangan utamanya, karena theme aplikasi ini sangat ringan. Ukuran filenya kecil, tapi tetap dengan fitur yang bisa memenuhi kebutuhan Sidebar dan Layout sederhana untuk sebuah Aplikasi Web.
Kalau dulu saya tidak suka dengan AdminLTE 2 yang digunakan oleh PHPMaker 2018, tapi tidak untuk AdminLTE 3 yang digunakan oleh PHPMaker 2019. Saya melihat AdminLTE 3 ini ternyata sangat kecil ukuran file-nya, sehingga Aplikasi Web yang dihasilkan oleh PHPMaker 2019 ini relatif sangat cepat dimuat oleh browser.
Itulah alasan utama saya, mengapa saya tidak menggunakan admin theme yang pernah saya buat dan gunakan dulu pada Masino Extensions untuk PHPMaker v2018. Oke deh kalau begitu. Langsung saja, saya uraikan beberapa fitur-fitur pilihan yang bisa Anda gunakan jika menggunakan Masino Extensions untuk PHPMaker 2019.
1. Kebijakan Penggunaan Cookie Sungguh-Sungguh Ditangani oleh Cookie
Maksudnya bagaimana? Jadi begini. Anda akan melihat bahwa di bagian paling atas halaman, terdapat informasi kebijakan penggunaan Cookie aplikasi. Hal ini wajar, jika Anda memang baru pertama sekali mengakses Aplikasi Web Demo tersebut, dan selama Anda belum mengklik tombol Accept, maka informasi ini akan tetap muncul ketika Anda mengakses web demo tersebut selanjutnya.
Jika Anda mengklik tombol Accept, maka itu artinya bagian ini untuk selanjutnya tidak akan ditampilkan lagi. Yang terjadi di belakang layar adalah, sistem akan menyimpan setting yang akan menyembunyikan bagian ini, ke dalam sebuah Cookie; di mana masa berlaku Cookie tersebut secara standar (Default) adalah satu tahun atau 365 hari.
Itu artinya, jika Anda tidak pernah membersihkan Cookie di browser Anda, maka informasi setting Cookie tadi tidak akan pernah ditampilkan lagi sampai dengan 365 hari ke depan. Pada hari ke-366, maka informasi itu akan ditampilkan oleh sistem kembali. Kira-kira seperti itulah yang saya maksud dengan kalimat “Sungguh-Sungguh Ditangani oleh Cookie”.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, maka settingan Accept tadi hanya disimpan pada sesi browser yang sedang terbuka saja. Artinya, jika kita menekan tombol Accept, maka informasi kebijakan penggunaan Cookie aplikasi tadi hanya akan disembunyikan selama kita masih membuka aplikasi web tersebut pada browser yang sedang kita gunakan.
Jika seluruh jendela browser kita tutup, lalu kita buka kembali jendela browser tadi, kemudian kita akses kembali ke Aplikasi Web tersebut, maka bagian informasi Kebijakan Penggunaan Cokie tadi akan ditampilkan kembali. Aneh, bukan?
2. Fixed Layout dengan Sticky Navbar
Fitur ini masih berkaitan dengan fitur pada poin 1 di atas tadi. Jika kita sudah menerima Kebijakan Penggunaan Cookie tadi, maka bagian tadi akan disembunyikan oleh sistem. Ketika Anda membuka halaman lain atau melakukan refresh atau reload halaman, barulah Anda dapat menikmati fitur Fixed Layout ini.
Fixed Layout maksudnya adalah, bagian Sidebar dan Navbar akan selalu lengket pada posisinya meskipun bagian Content kita scroll ke atas maupun ke bawah. Dalam hal ini, Navbar menjadi selalu kelihatan di bagian paling atas dari jendela browser, meskipun kita scroll halaman ke bawah. Yang terakhir ini biasa disebut dengan istilah Sticky Header atau Sticky Navbar (karena dalam hal ini kita menggunakan Navbar dari Bootstrap 4).
Jadi, supaya kita bisa menggunakan fitur Fixed Layout tadi, maka syaratnya kita harus sudah menerima terlebih dulu Kebijakan Penggunaan Cookie seperti yang sudah dijelaskan pada fitur pertama di atas tadi.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, maka fitur Sticky Header ini tidak ada. Itu artinya, jika tinggi halaman lebih besar dari tinggi jendela browser, sehingga menyebabkan timbulnya vertical scrollbar di browser, ketika kita scroll ke bawah supaya konten bergeser ke atas, maka bagian Header tadi akan hilang, karena tidak lengket dan tidak kelihatan selamanya di bagian atas jendela browser.
3. Mini-Sidebar dan Sidebar-Off-Canvas
Fitur selanjutnya yang bisa Anda nikmati jika menggunakan Masino Extensions untuk PHPMaker 2019 adalah Mini-Sidebar. Jika Anda sedang mengakses Aplikasi Web demo dalam tampilan Desktop, lalu mengklik icon hamburger menu (tiga garis mendatar yang berada di sebelah kanan Sidebar), maka Sidebar akan disembunyikan sebagian, dan hanya menyisakan area yang menampilkan icon dari setiap item menu yang ada. Inilah yang disebut dengan Mini-Sidebar.
Ketika Sidebar sedang ditampilkan dalam status Mini-Sidebar, maka Anda masih tetap bisa melihat tulisan atau Caption setiap item menu yang tersedia, dengan cara menggeser kursor mouse ke bagian Sidebar tadi, atau istilahnya kita Hover mouse ke Sidebar. Ketika mouse meninggalkan area Sidebar tadi, maka akan kembali lagi kepada status Mini-Sidebar.
Mini-Sidebar ini juga akan otomatis ditampilkan jika Aplikasi Web Demo sedang ditampikan dalam mode Tablet, atau jika lebar browser sama dengan lebar layar tablet, atau jika Anda melakukan resize browser sampai lebarnya sama dengan lebar layar Tablet.
Sedangkan jika Aplikasi Web Demo ditampilkan dalam mode Phone, maka status Sidebar akan berubah menjadi Sidebar-Off-Canvas, yang artinya seluruh area Sidebar akan disembunyikan. Anda bisa membuktikannya dengan cara me-resize jendela browser sampai lebar browser sama dengan lebar layar Handphone.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, baru status Expanded Sidebar dan Sidebar-Off-Canvas saja yang bisa digunakan. Mini-Sidebar belum bisa digunakan secara standar atau Default.
4. Status Terakhir Sidebar Disimpan dan Digunakan Kembali
Fitur berikut yang masih terkait dengan Sidebar adalah kemampuan untuk menyimpan status terakhir Sidebar, apakah sedang Expanded, Mini-Sidebar, atau Sidebar-Off-Canvas. Contoh, status awal Sidebar adalah Expanded, lalu Anda mengklik icon hamburger menu, maka status Sidebar menjadi Mini-Sidebar. Nah, status Mini-Sidebar ini akan disimpan oleh Aplikasi, dan akan digunakan kembali ketika Anda mengakses atau berpindah ke halaman lainnya.
Dengan cara ini maka Anda tidak perlu lagi menulis kode untuk menangani setiap kemungkinan tadi. Dengan fitur ini, maka Aplikasi Web yang Anda kembangkan menggunakan PHPMaker 2019 dan Masino Extensions menjadi kelihatan lebih profesional dan semakin user-friendly lagi.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur ini sama sekali belum tersedia.
5. Auto Scroll Sidebar ke Item Menu yang Aktif
Fitur yang tak kalah menarik lainnya adalah kemampuan sistem untuk melakukan otomatis scroll ke bagian item menu yang sedang aktif, atau yang halamannya sedang terbuka. Fitur ini akan sangat terasa manfaatnya, jika jumlah item menu di Sidebar cukup banyak, sehingga muncul vertical scroll pada Sidebar.
Dengan fitur ini, maka Pengguna tidak perlu lagi mencari-cari item menu mana yang sedang aktif, apalagi jika item menu tersebut berada di bagian bawah dari Sidebar yang tidak kelihatan jika scroll otomatis tadi tidak dilakukan. Sistem akan berusaha melakukan scroll pada Sidebar ke bagian atas, sehingga menu yang sedang aktif akan kelihatan.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur ini sama sekali belum tersedia.
6. Slim Scroll Sidebar Bisa Diklik Bagian Atas dan Bawahnya
Pada demo aplikasi yang disediakan oleh PHPMaker 2019, kita hanya bisa melakukan scroll Sidebar dengan cara menyeret scrollbar, tapi tidak bisa mengklik di bagian atas atau bawah rel scrollbar jika ingin langsung menuju ke bagian paling atas atau paling bawah Sidebar.
Dengan menggunakan Masino Extensions untuk PHPMaker 2019, maka Anda dapat langsung scroll ke paling atas atau paling bawah Sidebar dengan cara mengklik di bagian paling atas atau paling bawah rel Scrollbar. Cara ini kadang-kadang dibutuhkan jika kita tidak ingin melakukan scroll Sidebar dengan cara menyeret Scrollbar-nya.
Hal-hal kecil seperti ini terkadang sering membuat jengkel Pengguna Akhir apabila tidak didukung oleh Aplikasi Web yang kita kembangkan.
7. Help Online di Setiap Halaman Menggunakan AJAX
Dengan fitur ini, maka Anda sekarang akan melihat icon tanda tanya dengan lingkaran berwarna latar biru di sebelah dari judul halamannya. Jika icon ini Anda klik, maka sistem akan menampilkan konten Bantuan atau Help pada jendela Modal Alertify. Konten Help ini bisa diatur hanya untuk menjelaskan halaman yang sedang terbuka atau aktif.
Yang menariknya adalah, jika pada Masino Extensions versi 2018 fitur ini mengambil konten Help dari Database pada saat sedang halaman dimuat, maka pada versi 2019, konten Help akan diambil dari Database hanya pada saat User mengklik icon Help tadi.
Jadi, mulai versi 2019 ini, konten Help akan dimuat menggunakan AJAX. Istilah ini sering disebut dengan lazy loading atau hanya akan dimuat saat dibutuhkan saja. Tentu saja, konten Help tadi bisa dikelola dengan sangat mudah pada halaman yang dibangkitkan oleh aplikasi PHPMaker 2019 itu sendiri.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur Help Online ini sama sekali belum tersedia.
8. Konten Syarat dan Ketentuan pada Footer Ditampilkan via AJAX
Fitur berikutnya yang mirip dengan fitur sebelumnya adalah Terms and Conditions atau Syarat dan Ketentuan. Anda akan melihat link Syarat dan Ketentuan ini dari bagian Footer, dan jika diklik, maka akan menampilkan jendela Dialog menggunakan Alertify yang berisi Syarat dan Ketentuan yang bisa Anda kelola dengan mudah berdasarkan bahasa atau Language tertentu yang digunakan oleh Pengguna Akhir Aplikasi.
Konten Syarat dan Ketentuan tadi pun akan ditampilkan pada halaman Pendaftaran Akun. Artinya, Pengguna harus menyetujui terlebih dulu Syarat dan Ketentuan ini sebelum dapat lanjut ke proses berikutnya untuk mendaftarkan akunnya. Tidak hanya itu saja, di halaman atau form Ganti Kata Sandi pun, kita dapat mengaktifkan untuk menampilkan link Syarat dan Ketentuan ini. Bahkan, tersedia juga link untuk mengekspor konten tersebut ke dalam file PDF supaya dapat dicetak.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur Syarat dan Ketentuan ini sama sekali belum tersedia.
9. Konten Tentang Kami pada Footer Ditampilkan via AJAX
Fitur berikutnya yang juga masih mirip dengan fitur sebelumnya adalah About Us atau Tentang Kami. Anda akan melihat link Tentang Kami ini dari bagian Footer, dan jika diklik, maka akan menampilkan jendela Dialog menggunakan Alertify yang berisi informasi Tentang Kami yang bisa Anda kelola dengan mudah berdasarkan bahasa atau Language tertentu yang digunakan oleh Pengguna Akhir Aplikasi.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur Tentang Kami ini sama sekali belum tersedia.
10. Status Terakhir Panel Pencarian Disimpan dan Digunakan Kembali
Untuk mencoba fitur ini, pastikan Anda sudah login terlebih dulu ke Aplikasi Web Demo menggunakan salah satu akun yang sudah saya cantumkan di atas. Setelah berhasil login, buka menu Orders yang terdapat di bawah OTHER TABLES.
Setelah halaman List yang menampilkan data Orders muncul, silahkan klik icon kaca pembesar yang ada tulisan tooltip Search Panel atau Panel Pencarian. Perhatikan dan ingatlah status panel pencarian yang Anda lihat terakhir tersebut.
Setelah itu, cobalah tekan tombol panah kanan dengan tooltip Next atau Maju pada panel sebelah atas dari tabel, untuk berpindah ke halaman berikutnya. Tunggu beberapa detik, dan setelah sistem memuat data pada halaman berikutnya tadi, maka perhatikan kembali status panel pencarian. Seharusnya sekarang masih sama dengan status terakhir panel pencarian yang Anda ingat.
Demikian seterusnya, Anda bisa mencoba lagi dengan mengklik icon kaca pembesar untuk mengubah status panel pencarian tersebut, lalu ulangi lagi langkah di atas untuk berpindah ke halaman lain. Status terakhir panel pencarian akan diingat oleh sistem, dan dimuat kembali pada kesempatan berikutnya.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur status terakhir panel pencarian yang disimpan ini sama sekali belum tersedia.
11. Hak Akses Dinamis untuk Export Data
Sama seperti di versi 2018 sebelumnya, fitur ini masih bisa Anda nikmati pada versi 2019. Untuk mencobanya, maka pastikan Anda sudah berhasil login menggunakan akun dengan level Pengguna Administrator. Kemudian, buka menu User Levels atau Level Pengguna yang terdapat di bawah menu Administrator.
Setelah itu, pada record level pengguna Sales, tekan tombol dropdown di sebelah kiri, lalu pilih Permissions atau Ijin. Di halaman Hak Akses Level Pengguna, Anda akan melihat tambahan beberapa kolom baru di sebelah kolom Admin, untuk memberi akses Export Data sesuai dengan jenisnya.
Untuk memastikan apakah hak akses Export Data yang dinamis ini berfungsi sebagaimana mestinya, silahkan Anda logout sebagai admin, lalu login kembali dengan user nancy. Setelah berhasil login, buka menu tabel yang yang sudah Anda ubah atau ingat hak akses Export Data. Pastikan bahwa hak akses Export Data yang diberikan oleh Administrator tadi sama dengan pilihan menu Export Data yang tersedia di sana.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur ini sama sekali belum tersedia.
12. Breadcrumb Links yang Dapat Ditentukan Sendiri Hirarkinya
Fitur yang terdapat pada Masino Extensions untuk PHPMaker v2018 ini masih digunakan pada Masino Extensions untuk PHPMaker v2019.
Seperti yang kita ketahui, sejak Breadcrumb Links pertama sekali diimplementasikan oleh PHPMaker, maka secara standar, hirarkinya akan berada satu level di bawah Home. Sedangkan untuk table Detail, maka akan berada di bawah level dari tabel masternya. Demikian seterusnya.
Sedangkan Breadcrumb Links yang saya buat pada Masino Extensions, tidak seperti itu. Fitur ini memberikan pilihan alternatif selain yang disediakan oleh PHPMaker tadi. Artinya, dengan menggunakan Masino Extensions, maka Breadcrumb Links bawaan PHPMaker tadi bisa diganti dengan Breadcrumb Links yang urutan hirarki-nya bisa kita tentukan sendiri. Biasanya, acuan yang kita gunakan adalah hirarki pada struktur item menu dari halaman tadi berada.
Enaknya lagi, Breadcrumb Links yang saya buat pada Masino Extensions ini pun sudah mendukung pemakaian multi-bahasa. Syaratnya, phrase untuk Breadcrumb Link tersebut harus sudah ditambahkan terlebih dulu secara manual ke dalam file bahasa .xml yang diigunakan untuk Aplikasi Web. Jika tidak, maka Breadcrumb Link tersebut tidak akan sempurna ketika ditampilkan. Seolah-olah seperti masih ada phrase yang belum didefinsikan di dalam file bahasa tadi.
Sekedar informasi, Breadcrumb Links yang digunakan pada Aplikasi Web Demo ini berasal dari Masino Extensions. Anda bisa mencocokkan hasilnya. Pastikan bahwa Breadcrumb Links yang ditampilkan di pojok kanan atas halaman, sama persis dengan urutan hirarki struktur menu yang ditampilkan pada Sidebar.
O iya, untuk halaman yang ditampilkan dengan jendela Modal, maka Breadcrumb Links pada jendela Modal tersebut tidak akan ditampilkan. Jadi, Breadcrumb Links-nya tetap mengacu kepada halaman List-nya. Tentu saja, karena halaman terakhir yang kita buka dalam hal itu adalah halaman List.
Nah, supaya Anda dapat mengelola sendiri data Breadcrumb Links tadi sesuai kebutuhan, maka saya telah menyediakan 4 (Empat) buah form untuk mengelola Breadcrumb Links tersebut. Anda dapat mencobanya dari bawah menu Administrator pada Aplikasi Web Demo, yaitu:
– Menambah data Breadcrumb Link yang baru,
– Memeriksa alamat atau hirarki dari sebuah Breacrumb Link,
– Memindahkan suatu Breadcrumb Link ke bawah induk Breadcrumb Link yang lain, dan
– Menghapus suatu Breadcrumb Link.
Uniknya lagi, jika sebuah Breadcrumb Link yang dihapus tadi adalah induk (Parent) dari beberapa Breadcrumb Links yang lain, maka seluruh anak atau (Child) Breadcrumb Links tadi akan otomatis dihapus oleh sistem. Oleh karena itu, berhati-hatilah sebelum menghapus sebuah Breadcrumb Links. Sistem akan selalu mengingatkan Anda ketika membuka form untuk menghapus Breadcrumb Links.
13. Alternatif Pilihan untuk Mereset Kata Sandi
Dengan fitur ini, maka Anda sebagai Web Developer dapat menyediakan beberapa pilihan lain, selain hanya mereset Kata Sandi menggunakan data Email saja. Tersedia pilihan Username saja, atau Username dan Email, atau bahkan ketiga pilihan tadi sekaligus.
Tentu saja fitur ini tergantung kebutuhan, karena di beberapa Aplikasi Web, ada yang mengijinkan satu Email bisa digunakan oleh beberapa akun Pengguna. Untuk itu, maka sudah seharusnya tersedia parameter Username dan Email sekaligus untuk mereset Kata Sandi.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur Reset Kata Sandi baru mendukung satu parameter saja, yaitu Email.
14. Hitung Mundur Session Pengguna di Footer
Untuk melihat fitur ini, pastikan Anda sudah login dengan menggunakan salah satu akun di atas. Selanjutnya, perhatikan di bagian Footer atau paling bawah Aplikasi Web Demo, Anda akan melihat hitung mundur dalam satuan detik, berapa lama lagi sesi pengguna akan berakhir.
Pada 60 detik terakhir, maka sistem akan menampilkan alert menggunakan Alertify Dialog, dan tulisan di bagian atas (title) browser akan berubah menjadi informasi yang memberitahukan hitungan munder tersebut.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur hitung mundur di Footer ini sama sekali belum tersedia.
15. Pesan Konfirmasi Sebelum Menyimpan Data Pakai Alertify Dialog
Untuk mencoba fitur ini, pastikan Anda sudah login ke Aplikasi Web Demo. Setelah itu, silahkan pilih salah satu menu, misalnya Orders yang berada di bawah OTHER TABLES. Ubah salah satu record, lalu cobalah untuk menyimpan data tersebut.
Anda akan melihat kotak pesan berisi pertanyaan apakah Anda yakin ingin menyimpan data tersebut. Dengan cara ini, maka Pengguna diingatkan oleh sistem untuk selalu memeriksa terlebih dulu data sebelum menyimpannya ke Database.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur ini sama sekali belum tersedia.
16. Scroll ke Paling Atas Halaman
Fitur ini kelihatan sepele, tapi kalau tidak disediakan, biasanya sering membuat “kesal” pengguna akhir Aplikasi Web Anda, karena mereka harus menyeret scroll atau menekan beberapa kali di bagian atas rell vertical scroll browser.
Untuk mencoba fitur ini, pastikan Anda sudah mengklik menu Home di bagian Navbar pada Aplikasi Web demo, lalu scroll halaman ke bawah. Anda akan melihat icon panah ke atas di bagian pojok kanan bawah halaman. Klik icon tersebut, maka sistem akan melakukan scroll otomatis ke bagian atas halaman.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur ini sama sekali belum tersedia.
17. Open Sans Font
Anda akan melihat bahwa font yang digunakan di Aplikasi Web Demo yang saya sediakan menggunakan Google Font yang tampilannya modern, bernama Open Sans. Yang enaknya lagi, Anda akan menggunakan font ini tanpa harus selalu terhubung ke Google, karena font ini sudah saya download dan bisa Anda gunakan secara lokal di Aplikasi Web Anda.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, fitur ini sama sekali belum tersedia.
18. Antar Muka yang Flat atau Square Corner
Perhatikan bahwa hampir semua elemen yang Anda lihat menggunakan style Flat atau Square Corner atau bagian ujungnya siku-siku. Tidak ada lagi elemen yang bagian ujungnya memiliki radius atau melingkar atau Rounded Corner. Biar bagaimanapun, antarmuka yang style-nya Square Corner lebih nyaman dilihat daripada style yang Rounded Corner.
Pada demo aplikasi web asli yang disediakan oleh PHPMaker 2019, style antar muka masih menggunakan bawaan Bootstrap 4 yang Rounded Corner.
Oke, itulah sedikit bocoran berisi fitur-fitur yang akan bisa Anda nikmati pada Aplikasi Web yang dihasilkan oleh PHPMaker 2019 dan Masino Extensions. Ada begitu banyak fitur lainnya yang bisa Anda nikmati. Namun karena keterbatasan waktu, belum semuanya sempat saya uraikan di sini.
Semoga bermanfaat ya. 🙂
Tinggalkan Balasan