Mengingat Kembali Posisi Item Menu di Sidebar Saat Halaman Dimuat Berikutnya

Sebagai Web Developer, pernahkah Anda mengalami kejadian yang sedikit menjengkelkan ketika melihat Aplikasi Web yang sudah Anda buat, tapi tidak dapat mengingat posisi item menu yang terakhir dipilih oleh Pengguna Akhir pada bagian Sidebar?

Masih bingung seperti apa maksudnya? Jadi begini, ya. Mari kita simak penjelasan berikut bersama-sama. 🙂

Dalam sebuah Aplikasi Web, biasanya menu ditampilkan di bagian Sidebar (terlepas dari apakah posisinya di sebelah kiri atau kanan). Jika item menu yang terdapat di Sidebar tadi jumlahnya banyak, maka kita akan mengelompokkan item menu tersebut sesuai dengan kategorinya. Ketika Pengguna Akhir mengklik suatu kategori, maka item menu yang terdapat di dalamnya akan ditampilkan (expanded). Sampai di sini paham ya?

Jika item menu yang terdapat di bawah suatu kategori jumlahnya relatif banyak, dan ketika Pengguna Akhir meng-expand atau membuka kategori tadi, maka Sidebar menu akan menampilkan vertical scrollbar. Jika vertical scrollbar tadi diseret ke bawah, maka item menu yang berada di bagian paling bawah dan sebelumnya tidak kelihatan, maka sekarang item menu tersebut menjadi terangkat ke atas dan kelihatan. Biasanya ini terjadi pada Sidebar menu yang lengket pada posisinya, atau istilah bakunya adalah fixed sidebar.

O iya, kategori menu di sini biasanya sering kita artikan sebagai Parent Menu Item. Ketika Parent Menu Item ini diklik, maka item menu – item menu yang terdapat di bawahnya akan ditampilkan (expanded).

Nah, katakanlah item menu yang sedang diakses oleh Pengguna Akhir dari Aplikasi Web kita itu letaknya relatif paling bawah, biasanya saat halaman dimuat kembali di browser, item menu yang awalnya tadi sudah dibuka dengan menggeser vertical scroll ke bawah, maka sekarang menjadi tidak kelihatan.

Tentu saja, kondisi ini sangat tidak nyaman bagi Pengguna Akhir. Mereka harus melakukan scroll ke bawah kembali untuk melihat item menu apa yang sedang terbuka saat itu. Lama kelamaan, pasti bisa membuat Pengguna Akhir jengkel. Sumpah! Saya pernah merasakan jadi Pengguna Akhir juga, lho! Gak nyaman banget, gitu lho!

Pertanyaannya, apakah kejadian yang cukup menjengkelkan ini bisa diatasi? Hehe, tentu saja bisa. Apalagi jika Anda membangun Aplikasi Web menggunakan Masino Extensions untuk PHPMaker 2019. Hari ini, Senin, 29 Juli 2019, solusinya baru saya tambahkan di Masino Extensions untuk PHPMaker 2019 dan juga untuk PHP Report Maker 12. Anda tentu saja juga sudah bisa menikmatinya.

Bayangkanlah, solusi dari permasalahan klasik ini membuat Pengguna Akhir akan menjadi merasa lebih nyaman. User Experiences mereka menjadi semakin meningkat lagi setelah Anda mengimplementasikan fitur ini. Aplikasi Web yang Anda bangun pun menjadi semakin terlihat profesional dan lebih user-friendly

Ingin melihat demo? Silahkan klik di sini. Login menggunakan username admin dan password master.

Setelah login berhasil, klik kategori First Level, maka Anda akan melihat vertical scroll muncul di Sidebar menu tersebut. Seret ke bawah vertical scroll tadi, sampai posisi item menu Suppliers berada di bagian paling atas dari Sidebar, lalu setelah itu klik menu Orders, lalu tunggulah beberapa detik.

Ketika sistem memuat ulang atau menampilkan halaman Orders List, perhatikanlah sekarang posisi item menu yang sebelumnya Anda atur tadi. Seharusnya, sekarang item menu Suppliers masih tetap berada di bagian paling atas dari Sidebar menu. Inilah yang saya maksud dengan Mengingat Kembali Posisi Item Menu di Sidebar Saat Halaman Dimuat Berikutnya seperti pada judul tulisan ini.

Tentu saja, Anda bisa bermain-main dengan fitur ini. Misalkan dengan mengatur posisi item menu yang Anda buka, akan berada di bagian tengah atau agak ke atas dari Sidebar menu.

Sudah mengerti sekarang apa maksudnya, kan? Hehehe… 🙂 😉

Sebenarnya, fitur yang mirip ini sudah pernah saya implementasikan pada Masino Extensions untuk PHPMaker 2017 dan PHPMaker 2018. Juga pada Masino Template untuk PHPMaker 2017. Tapi, template yang saya gunakan saat itu berbeda dengan yang saya gunakan untuk PHPMaker 2019. Selain itu, fitur tersebut masih menggunakan efek scroll yang otomatis menggulung, sehingga terkadang efeknya bisa membuat “sedikit pusing” Pengguna Akhir, karena terkesan bertele-tele dan tidak langsung kepada tujuannya.

Selain itu, di template pada versi 2017 dan 2018 tersebut, acuan sistem untuk melakukan scroll adalah Parent dari item menu yang sedang dibuka. Parent menu item akan diposisikan ke bagian paling atas Sidebar menu. Kelemahannya adalah, jika menu yang terdapat di bawah Parent menu item tadi posisinya berada paling bawah (dan tidak terlihat), maka setelah halaman dimuat berikutnya, item menu tersebut masih tetap tidak terlihat. Sungguh sangat tidak nyaman juga.

Sudah saatnya untuk memperbarui ke versi yang lebih baik. Itulah mengapa di versi terakhir selalu lebih baik dari versi-versi lama sebelumnya. Bukan karena hanya fitur baru saja yang tersedia, tapi penyempurnaan dari fitur-fitur sebelumnya biasanya dilakukan pada versi yang terakhir. Sama seperti solusi di atas.

Nah, di template beautiful yang saya gunakan pada Masino Extensions untuk PHPMaker 2019 dan PHP Report Maker 12 ini, efek scroll tadi tidak diperlihatkan. Aplikasi Web lebih terkesan simpel. Masih ingat, kan? Semakin simpel akan jauh lebih baik, dan yang paling penting, tidak membuat “pusing” si Pengguna Akhir karena menyita perhatiannya melihat efek menggulung pada bagian Sidebar Menu tersebut.

Pengalaman saya ketika membuat tampilan atau layout yang lebih nyaman untuk Pengguna Akhir, sering kali efek scroll pada Sidebar Menu tadi menyebabkan Aplikasi Web menjadi kelihatan lambat. Bahkan bisa membuat Pengguna Akhir menjadi “pusing” karena perhatiannya tersita pada efek pergerakan scroll tersebut. Jadi, sudah saatnya mengubahnya menjadi lebih sederhana dan langsung menampilkan posisi terakhir item menu yang terkait.

Jika Anda sudah menjadi member di situs ILovePHPMaker.com, silahkan login ke situs tersebut, lalu download ulang semua Masino Extensions masing-masing untuk PHPMaker 2019 dan PHP Report Maker 12. Setelah itu, timpa file Extension yang lama dengan versi yang terbaru ini.

Pastikan juga Anda sudah menggunakan versi minor terakhir dari PHPMaker 2019 dan PHP Report Maker 12, agar selalu mendapatkan keuntungan dari Masino Extensions yang selalu dimutahirkan untuk versi terakhir. Perlu diketahui, Masino Extensions selalu diperbarui sehingga selalu menggunakan PHPMaker dan PHP Report Maker versi terakhir.