Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mengingat Kembali Posisi Item Menu di Sidebar Saat Halaman Dimuat Berikutnya
Mudahnya Mengubah CheckBox Menjadi Switch atau Toggle di PHPMaker 2019
Mudahnya Membuat API untuk Mengisi Field Lain Berdasarkan Field Tertentu di PHPMaker 2019

Mengingat Kembali Posisi Item Menu di Sidebar Saat Halaman Dimuat Berikutnya

Sen, 29 Juli 2019 oleh Masino Sinaga Tinggalkan Komentar

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.

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, PHPMaker 2019, PHPMaker Indonesia, Sidebar Menu, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com dan ilovephpmaker.com.

Mudahnya Mengubah CheckBox Menjadi Switch atau Toggle di PHPMaker 2019
Mudahnya Membuat API untuk Mengisi Field Lain Berdasarkan Field Tertentu di PHPMaker 2019

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Pos-pos Terbaru

  • Begini Mudahnya Mengubah Lebar Modal Dialog di PHPMaker 2022
  • Item Menu Tetap Aktif Meskipun Sedang Menampilkan Halaman Tambah, Ubah, Tampilkan, Cari di PHPMaker 2022
  • Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Alasan AlwaysUseEnglishUSLocale Sebaiknya Aktif di Masino Extensions untuk PHPMaker 2022
  • MasinoInputMask18 Extension, Autoformat Angka dengan Fitur Lebih Kaya di PHPMaker 2022

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Project Stock Inventory untuk PHPMaker 2022 Sekarang Sudah Bisa Didownload
  • Stanislaus Ariyanto pada Project Stock Inventory untuk PHPMaker 2022 Sekarang Sudah Bisa Didownload
  • Masino Sinaga pada Mudahnya Mendapatkan Info Pengguna Setelah Login di Aplikasi Web dari PHPMaker
  • irwan pada Mudahnya Mendapatkan Info Pengguna Setelah Login di Aplikasi Web dari PHPMaker
  • Masino Sinaga pada Ini Dia Fitur-Fitur yang Terdapat di Masino Extensions untuk PHPMaker 2022

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2021 | WordPress | Catat masuk | Kembali ke atas