Ini Dia Perubahan pada Masino Extensions Sampai Dengan PHPMaker 2022.10

Hari ini PHPMaker 2022.10 baru saja dirilis. Tidak terlalu banyak perubahan yang terjadi pada versi minor tersebut. Meskipun demikian, ada beberapa perubahan pada Masino Extensions yang perlu Anda ketahui, sekaligus penyesuaian yang harus saya lakukan untuk mensinkronkan dengan versi 2022.10 tadi.

Oke, langsung saja.

Menampilkan Status Progress/Loading dari Halaman yang Sedang Dimuat oleh Browser

Perubahan pertama yang bisa Anda rasakan sendiri melalui demo project adalah kemampuan untuk menampilkan pesan sedang proses atau mohon tunggu (loading), ketika Anda sedang berpindah dari satu halaman ke halaman lain. Setelah itu, dilanjutkan dengan menampilkan angka persentase ketika halaman baru sedang dimuat oleh browser.

Meskipun tidak 100 persen perubahan ini terjadi dari sisi Masino Extensions, karena sebagian kode harus ditambahkan dari sisi project PHPMaker, perubahan yang paling fundamental adalah menyesuaikan sebagian besar link untuk membuka halaman baru pada Masino Extensions.

Saya menambahkan property data-ew-action=”redirect” untuk menandai link yang patut untuk menampilkan pesan loading tadi. Dengan cara ini, kita bisa membedakan mana link yang seharusnya menampilkan pesan loading ketika diklik, dan mana link yang tidak perlu menampilkan pesan loading tadi.

Contoh, jika kita membuka halaman dalam Modal dialog, maka tidak perlu menampilkan pesan loading, supaya kita tidak perlu menangani kode untuk menyembunyikan pesan loading saat Modal dialog berhasil ditampilkan. Demikian juga untuk beberapa tombol yang jika diklik memiliki kemungkinan akan menampilkan pesan error hasil balikan dari validasi data pada form yang bertalian, maka kita tidak perlu menampilkan pesan loading tadi.

Jadi, pesan loading ini ditampilkan semata-mata untuk memberitahukan kepada Pengguna Akhir dari Aplikasi Web yang kita hasilkan dari PHPMaker, bahwa proses sedang berlangsung ketika akan menampilkan halaman lain, sehingga mereka tidak bingung sekaligus lebih yakin lagi, bahwa Aplikasi Web sedang merespon aksi yang baru saja dilakukan oleh Pengguna Akhir tadi.

Ketika halaman baru dimuat sebagai hasil lanjutan dari proses loading tersebut, maka sistem akan menampilkan angka persentase dari status halaman yang sedang ditampilkan di browser. Pada tahap ini, maka halaman baru sedang di-render oleh sistem ke browser Pengguna Akhir.

Tentu saja, kedua tahap proses tadi merupakan satu kesatuan yang tidak bisa dipisahkan, sehingga Aplikasi Web yang kita bangun menjadi kelihatan lebih profesional lagi. Tahap pertama menampilkan pesan sedang proses mohon tunggu, dilanjutkan dengan tahap kedua yaitu menampilkan angka persentase dari status halaman baru yang sedang dimuat.

Khusus tahap kedua, persentase status halaman yang sedang dimuat saya tampilkan karena template AdminLTE yang digunakan PHPMaker 2022 tidak menyembunyikan proses render halaman. Semuanya terlihat jelas dan transparan di browser. Untuk itulah dibutuhkan status progress yang menandakan bahwa halaman sedang dimuat, sampai dengan ketika semua konten halaman selesai dimuat oleh browser.

Persentase dari status halaman yang sedang dimuat akan mencapai 100% dan seketika akan hilang bersamaan dengan selesainya seluruh halaman dimuat. Hal ini sangat penting, khususnya pada halaman Add/Edit/Search yang memilik form dengan data di satu atau beberapa field yang lookup ke table tertentu.

O iya, pada alinea ketiga artikel ini saya mengatakan bahwa tidak semua perubahan dilakukan di sisi Masino Extensinos. Itu artinya, ada kode yang harus kita tambahkan di sisi project PHPMaker 2022. Tepatnya di lokasi ini: Client Scripts -> Global -> Pages with header/footer -> Startup Script.

Kode tersebut bisa dilihat melalui demo project yang sudah saya sediakan di situs ILovePHPMaker.com dan bisa Anda download sebagai referensi untuk project Anda.

$("a[data-ew-action='redirect'], [href='index'], .ew-table-header-caption, a.dropdown-item.nav-link, .ew-desktop-button #btn-submit, .ew-row-link.ew-user-permission.dropdown-item").on("click", function() {
    Swal.fire({
        title: ew.language.phrase("MessageProcessing"),
        html: ew.language.phrase("MessagePleaseWait"),
        showConfirmButton: false
    });
});

Perhatikanlah kode di atas. Ada beberapa CSS selector atau class yang kita sertakan untuk men-trigger event click supaya sistem menampilkan kotak dialog berisi pesan sedang proses dan mohon tunggu. Tentu saja kita bisa menambahkan lainnya jika dibutuhkan.

Selain itu, di sana juga ada dua phrase yang digunakan untuk menampilkan kata-kata sedang proses dan mohon tunggu. Masing-masing MessageProcessing dan MessagePleaseWait. Nah, salah satu dari phrase tadi sebelumnya sudah kita definisikan pada server event Language_Load seperti berikut:

if (CurrentLanguageID() == "id-ID") {
        $this->setPhrase("MessagePleaseWait", "Mohon Ditunggu ...", true);
    } else {
        $this->setPhrase("MessagePleaseWait", "Please Wait ...", true);
    }

Phrase MessageProcessing sudah tersedia pada file .xml language bawaan PHPMaker 2022. Jadi, dalam hal ini kita tidak perlu lagi mendefinisikannya pada server event Language_Load tadi.

Kode Startup Script tadi kemungkinan besar berfungsi jika Anda jalankan pada project yang tidak menggunakan Masino Extensions, tapi tidak semua. Mengapa? Karena sebagian besar link yang saya sesuaikan pada Masino Extensions berada pada bagian Menu di Sidebar dan Navbar, termasuk juga link pada bagian Breadcrumb Links.

Kostumisasi pada User Profile Dropdown di Pojok Kanan Atas dari Aplikasi Web

Perubahan besar kedua terletak pada bagian User Profile yang lokasinya ada di pojok kanan atas dari Aplikasi Web, khususnya jika user berhasil login ke dalam Aplikasi Web.

Anda akan melihat adanya tiga bagian utama yang mengalami perubahan tampilan, sehingga Aplikasi Web kita menjadi lebih profesional lagi.

Bagian Pertama adalah pada bagian awal atau depan, yaitu di pojok kanan atas dari Navbar ketika user sudah berhasil login. Anda akan melihat adanya data Profil Pengguna berupa Username dan Foto dari Pengguna yang sudah login. Foto akan tampak hanya jika foto Pengguna tersebut sudah di-upload dari menu yang menampilkan data users; table yang digunakan untuk login ke Aplikasi Web.

Bagian Kedua adalah ketika Pengguna Akhir mengklik bagian User Profile tadi, makan sistem akan menampilkan menu dropdown yang berisi data milik Pengguna yang sedang login, berupa Foto, Nama Awal dan Nama Akhir, dan Nama Level Pengguna yang bersangkutan. Khusus di bagian kedua ini, maka kita fokus pada Nama Awal dan Nama Akhir.

Sedangkan di Bagian Ketiga, masih pada menu dropdown yang muncul pada poin Bagian Kedua tadi, adalah Nama Level Pengguna dari Pengguna yang sedang login tadi.

Nah, Masino Extensions sudah menangani data pada ketiga bagian tersebut. Itu artinya jika kita menganggap ketika data di ketiga bagian tadi sudah memenuhi kebutuhan di Aplikasi Web yang dihasilkan oleh PHPMaker 2022, maka kita tidak perlu lagi menggantinya.

Tapi, jika sebagai Web Developer ingin mengganti dengan data pilihan kita sendiri pada ketiga bagian tadi, maka masih ada cara mudah dan cepat, yaitu dengan menggunakan server event Page_Rendering. Seperti kita ketahui, server event ini akan dimuat oleh semua halaman yang terdapat pada Aplikasi Web kita.

Itu artinya, kita dapat mengganti data yang ditampilkan pada ketiga bagian tadi secara dinamis sesuai kebutuhan. Masino Extensions sudah membantu menyediakan kerangka kerjanya, sedangkan Anda sebagai Web Developer tinggal menyesuaikan saja jika ingin menggantinya sesuai kebutuhan dari Aplikasi Web tersebut pada server event Page_Rendering:

    if (IsLoggedIn()) {
        if (!IsAdmin()) {
            Config("MS_USER_CARD_USER_NAME", CurrentUserName());
            Config("MS_USER_CARD_COMPLETE_NAME", CurrentUserInfo("FirstName") . " " . CurrentUserInfo("LastName"));            
            Config("MS_USER_CARD_POSITION", Security()->currentUserLevelName());
        } else {
            Config("MS_USER_CARD_USER_NAME", CurrentUserName());
            Config("MS_USER_CARD_COMPLETE_NAME", "Administrator");
            Config("MS_USER_CARD_POSITION", Security()->currentUserLevelName());
        }
    }

Perlu diingat, bahwa FirstName dan LastName pada kode tersebut masing-masing adalah field yang menyimpan nama awal dan nama akhir dari Pengguna. Pastikan Anda sudah menyesuaikan nama field tersebut sesuai dengan yang terdapat di table users pada database yang digunakan oleh project PHPMaker 2022 Anda.

Kabar baiknya adalah, kedua nama field tadi bisa Anda tentukan secara dinamis dari sisi Masino Extensions. Lihat Advanced Settings milik extension MasinoHeaderFooter18, masing-masing: UserFirstNameField dan UserLastNameField.

Tentu saja kode PHP tadi tidak wajib kita tambahkan di server event Page_Rendering, jika kita merasa bahwa di bagian pertama kita ingin menampilkan data CurrentUsername, di bagian kedua kita ingin menampilkan data FirstName dan LastName dari data Pengguna, dan di bagian ketiga kita ingin menampilkan data CurrentUserLevelName.

Gunakan server event Page_Rendering dengan mengacu pada contoh kode tersebut jika Anda ingin mengganti data pada ketiga bagian tersebut. Jadi, sudah tahu kapan Anda ingin mengganti data tersebut, ya?

Perlu untuk diketahui, mengapa saya melakukan perubahan pada bagian User Profile Dropdown ini, adalah karena saya tidak terlalu suka melihat User Profile di bagian Sidebar, seperti yang selama ini bawaan fitur asli dari PHPMaker 2022.

Mengapa? Pertama, karena terlalu menyita ruang di bagian Sidebar. Kedua, informasi tadi tidak terlalu bermanfaat, karena hanya sekedar menampilkan foto dan data username-nya saja. Ketiga, tidak ada fitur link di bagian tersebut, sehingga semakin menyimpulkan tidak ada manfaatnya. Sudah memakan space, juga tidak terlalu bermanfaat.

Bandingkan dengan jika User Profile tadi kita tempatkan di bagian pojok kanan atas di Navbar dari Aplikasi Web. Itu lebih kelihatan afdol sekaligus profesional. Apalagi jika bagian User Profile tadi diklik, maka sistem dapat menampilkan dropdown menu yang berisi beberapa sub menu yang terkait dengan data Pengguna tadi, seperti misalnya menu profil pengguna, data user untuk fitur GDPR, menu ganti kata sandi, dan link untuk logout.

Meksipun demikian, Masino Extensions tetap menghargai Web Developer yang tetap ngotot ingin menampilkan foto dan username di bagian Sidebar. Cukup hapus tanda centang di pengaturan HideUserOnSidebar pada extension MasinoHeaderFooter18.

Jangan lupa, pastikan Anda sudah men-generate ulang semua file script seperti biasa, untuk menikmati hasilnya.

See? Betapa mengasyikkannya menggunakan Masino Extensions untuk project PHPMaker 2022 Anda. Hanya dengan klak klik di beberapa pengaturan pada sisi Masino Extensions, lalu menambahkan sedikit kode itu saja, kita sudah bisa menyesuaikan beberapa bagian yang selama ini paling sering dibutuhkan oleh Web Developer.

Mengapa? Karena di semua Aplikasi Web, fitur-fitur tadi wajib ada, dan yang paling penting, harus mudah dan cepat disesuaikan. Tidak pakai ribet, tidak perlu menulis kode yang panjangnya sampai berpuluh-puluh, beratus-ratus, atau bahkan beribu-ribu barisnya.