Jika kita menggunakan extension Preview atau MasinoPreview17 di project PHPMaker 2021, maka Pengguna Akhir dapat menampilkan table Detail pada halaman yang memiliki relasi Master/Detail dengan cara meng-expand-nya. Cukup dengan mengklik tombol plus kecil (+) di sebelah kiri record Master-nya.

Kadang-kadang, kita sebagai Web Developer ingin supaya sistem otomatis meng-expand semua table Detail tersebut. Jadi, Pengguna Akhir tidak perlu lagi mengklik tombol + tadi, untuk meng-expand satu per satu di setiap record Master yang bertalian.

Pertanyaannya, bisakah kita melakukan hal itu? Bagaimana caranya?

Jawabannya, tentu bisa. Cukup dengan menambahkan satu baris kode jQuery berikut ke bagian Startup Script yang terdapat di bawah lokasi ini: Client Scripts -> Table-Specific -> List Page dari table Master yang bertalian:

    $('[class="ew-preview-row-btn ew-icon icon-expand"]').click();

Kemudian, pastikan untuk men-generate ulang semua file script dengan PHPMaker 2021 seperti biasa.

Untuk mencobanya, silahkan kunjungi halaman List milik table Master. Saat halaman tersebut dimuat, maka kita akan melihat semua table Detail dari setiap record Master akan otomatis di-expand oleh sistem.

Bayangkan! Hanya dengan satu baris kode jQuery itu saja, kita sudah bisa memerintahkan sistem supaya otomatis meng-expand table Detail di setiap baris record Master-nya.

Betapa mudah dan cepatnya, bukan?

Di artikel sebelumnya kita sudah membahas betapa mudahnya untuk meng-expand detail preview di semua record pada halaman List yang menampilkan table Master.

Jika jumlah record yang ditampilkan di halaman List Master tadi banyak (katakanlah lebih dari 10), maka akan dibutuhkan waktu yang lebih lama untuk menampilkan semua Detail Preview dari setiap record Master. Untuk itu, pastikan untuk tidak menggunakan kode pada artikel di atas tadi jika jumlah record di halaman List Master relatif banyak.

Sebagai gantinya, kita bisa saja hanya meng-expand salah satu record Master di halaman List yang menampilkan data dari table Master. Dengan cara ini, maka secara tidak langsung kita ingin memberitahukan bahwa data di table Detail dapat ditampilkan secara otomatis, saat halaman List milik table Master ditampilkan.

Katakanlah kita ingin meng-expand table Detail pada halaman List orders (data Master) dari project demo2021, maka cukup tambahkan kode di bawah ini ke lokasi berikut milik table orders: Client Scripts -> Table-Specific -> List Page -> Startup Script:

    $('span#el1_orders_preview > .ew-preview-row-btn.ew-icon.icon-expand').click();

Perhatikan bagian el1_orders_preview pada kode tersebut. Ini adalah id dari baris pertama dari record Master table orders.

Berdasarkan id selector ini, yang dikombinasikan dengan class ew-preview-row-btn ew-icon icon-expand, kita dapat men-trigger event click untuk menampilkan table Detail hanya pada baris pertama saja.

Memang gila ini PHPMaker 2021. Hanya dengan sebaris kode itu saja, kita sudah dapat memerintahkan sistem supaya otomatis meng-expand table Detail pada baris pertama di halaman List dari table orders pada Aplikasi Web yang dihasilkan oleh PHPMaker 2021.

Tidak perlu menulis kode berpuluh-puluh, beratus-ratus, atau bahkan beribu-ribu baris hanya untuk mengimplementasikan business-logic tersebut.

Gimana? Keren, kan PHPMaker 2021? Hohoho…

Hari ini kita akan membahas bagaimana cara mengetahui jumlah control Checkbox yang tercentang pada sebuah field di Aplikasi Web yang dihasilkan oleh PHPMaker 2021. Field ini menggunakan Lookup Table, dan dapat menerima multiple values.

Ketika Pengguna Akhir mengklik control Checbox di field tersebut, maka sistem akan menampilkn jumlah control Checkbox yang sedang tercentang.

Oke, langsung saja kita praktekkan bersama-sama.

Langkah pertama, buatlah sebuah database MySQL, lalu jalankan SQL berikut pada database tadi untuk membuat 2 table beserta data di dalamnya:

-- ----------------------------
-- Table structure for info
-- ----------------------------
DROP TABLE IF EXISTS `info`;
CREATE TABLE `info`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `info` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `multiple` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of info
-- ----------------------------
INSERT INTO `info` VALUES (1, 'Just the first sentence here', '1,3');
INSERT INTO `info` VALUES (2, 'Now this is the second sentence', '1,2,3');

-- ----------------------------
-- Table structure for lookup_one
-- ----------------------------
DROP TABLE IF EXISTS `lookup_one`;
CREATE TABLE `lookup_one`  (
  `Code` int(11) NOT NULL AUTO_INCREMENT,
  `Desc` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  PRIMARY KEY (`Code`) USING BTREE
) ENGINE = MyISAM AUTO_INCREMENT = 4 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of lookup_one
-- ----------------------------
INSERT INTO `lookup_one` VALUES (1, 'One');
INSERT INTO `lookup_one` VALUES (2, 'Two');
INSERT INTO `lookup_one` VALUES (3, 'Three');

Langkah kedua, buatlah sebuah project baru di PHPMaker 2021, lalu pastikan sudah connect ke database yang sudah kita buat pada langkah pertama di atas.

Langkah ketiga, klik table info, kemudian klik field multiple, lalu pada panel Edit Tag, pilih Checkbox. Selanjutnya aktifkan Use lookup table, lalu pada panel Lookup Table, pilih lookup_one untuk Table name, pilih Code untuk Link field, dan pilih Desc dari Display field #1.

Langkah keempat, copy paste kode jQuery berikut ke bagian Startup Script di bawah lokasi berikut: Client Scripts -> Table-Specific -> Add/Copy Page, dan juga Edit Page:

$('input[data-field=x_multiple]').on("change", function() {
    ew.alert("Checked count: " + $('input[type=checkbox]:checked').length);
});

Langkah kelima, generate ulang semua file script seperti biasa dari PHPMaker 2021.

Sekarang akses Aplikasi Web lewat browser, lalu cobalah tambah data baru atau ubah salah satu record di table info, kemudian klik Checkbox pada field multiple, maka Anda akan melihat kotak pesan yang menampilkan jumlah control Checkbox yang sedang terpilih.

Tidak perlu menulis banyak kode seperti yang mungkin selama ini masih kita lakukan jika membangun Aplikasi Web dengan cara-cara konvensional. Kita juga tidak perlu mengutak-atik kode di file script yang sudah dihasilkan oleh PHPMaker 2021. Semuanya cukup kita atur dari dalam project PHPMaker 2021.

Betapa mudah dan cepatnya, bukan? Bukan! Hohoho….

Hari ini kita belajar bagaimana cara menyembunyikan tombol Edit di halaman List berdasarkan nilai tertentu di suatu field, pada Aplikasi Web yang dihasilkan oleh PHPMaker 2021.

Katakanlah kita akan menyembunyikan tombol Edit di halaman List dari table Orders jika nilai pada kolom Order ID sama dengan 11085. Contoh project-nya dapat diunduh dan dicoba di localhost masing-masing.

Solusinya cukup dengan menambahkan 2 baris kode PHP berikut ke dalam server event ListOptions_Rendered pada lokasi berikut: Server Events -> Table-Specific -> List Page milik table orders:

if ($this->OrderID->CurrentValue == "11085")
    $this->ListOptions["edit"]->Body = "";

Pastikan untuk men-generat file script dari PHPMaker 2021 seperti biasa.

Kemudian, silahkan akses Aplikasi Web dari browser, login dengan menggunakan username admin dan password master, lalu buka menu Orders.

Perhatikan pada record yang memiliki Order ID = 11085, maka tidak ada tombol Edit di baris record tersebut.

Tentu saja data di Aplikasi Web Anda tidak selalu sama dengan data yang saya gunakan. Jika tidak ada Order ID 11085, Anda bisa menyesuaikan kode di atas dengan Order ID lainnya yang terdapat di halaman List tadi.

Hanya dengan dua baris kode itu saja, kita sudah bisa menyembunyikan tombol Edit sesuai dengan kebutuhan kita.

Tidak perlu lagi menulis kode sampai berpuluh-puluh, beratus-ratus, atau bahkan beribu-ribu baris, hanya untuk mengimplementasikannya. Kenapa? Karena sisanya sudah ditangani oleh PHPMaker 2021.

Betapa cepat dan mudahnya, bukan?

Ada satu pertanyaan yang cukup bagus terkait dengan artikel Menyembunyikan Tombol Edit Berdasarkan Kondisi Tertentu dari PHPMaker 2021.

Sekedar mengingatkan kembali, artikel di atas menjelaskan betapa mudahnya kita dapat menyembunyikan tombol atau link Edit yang menampilkan form Edit untuk mengubah data. Artinya, meskipun kita dapat menyembunyikan tombol Edit tadi, maka Pengguna Akhir masih tetap dapat mengakses halaman Edit melalui URL-nya. Cukup dengan menyalin link tersebut ke browser, maka form Edit akan terbuka.

Tentu saja kemungkinan-kemungkinan seperti itu harus bisa ditangani. Artinya, kita harus dapat mencegah Pengguna Akhir mengubah data hanya untuk kriteria tertentu sesuai dengan yang sudah kita bahas pada artikel di atas tadi. Jangan sampai Pengguna Akhir bisa mengakali dengan langsung akses lewat URL halaman Edit-nya.

Caranya bagaimana? Ternyata gampang sekali. Kita cukup menggunakan server event Row_Selected. Seperti namanya, server event ini akan dipanggil oleh sistem ketika Pengguna baru saja berhasil memilih suatu record tertentu.

Kita bisa menggunakan server event ini untuk menambahkan business-logic yang akan mencegah Pengguna Akhir mengakses record tertentu. Jadi, ketika halaman Edit untuk record tertentu diakses, maka kita bisa mencegahnya untuk mengakses halaman tersebut.

Katakanlah kita masih menggunakan contoh yang sama yang dibahas pada artikel di atas, maka kita cukup menambahkan sedikit kode PHP saja ke dalam server event Row_Selected yang lokasinya berada di bawah Server Events -> Table-Specific -> Common, milik table orders:

// Row Selected event
function Row_Selected(&$rs)
{
    //Log("Row Selected");
    if ($rs["OrderID"] != "11085" && CurrentPageID() == "edit") {
        $this->setFailureMessage("Anda tidak diijinkan mengubah data pesanan dengan ID = 11085");
        $this->terminate("orderslist");
    }
}

Kode di atas artinya, jika Pengguna Akhir mengakses langsung halaman Edit untuk record dengan OrderID = 11085, dengan cara menyalin URL yang bertalian ke browser, maka sistem akan mencegah, dengan menampilka pesan Anda tidak diijinkan mengubah data pesanan dengan ID = 11085. Setelah itu, sistem akan otomatis me-redirect ke halaman List milik table orders.

Betapa mudah dan cepat sekali, bukan? Tidak perlu menulis kode sampai berpuluh-puluh, beratus-ratus, atau bahkan beribu-ribu baris. Mengapa? Karena PHPMaker 2021 sudah menangani sisanya. Kita hanya cukup menambahkan sedikit kode PHP itu saja.

Lagi-lagi, ada pertanyaan bagus mengenai artikel Mengenal SEO-Friendly URL di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021. Apakah kita bisa membuat URL yang SEO-Friendly tanpa menggunakan nama Tabelnya?

Pertanyaan yang bagus, karena jawabannya semakin membuktikan betapa powerful dan flexible-nya PHPMaker 2021. Tentu saja, jawabannya bisa. Bagaimana caranya? Hehe… sabar… sabar… Sebelum mengetahui caranya, ada baiknya kita bahas dulu URL yang digunakan oleh PHPMaker 2021.

Seperti yang sudah kita ketahui melalui artikel di atas tadi, ada dua bentuk URL yang sudah disediakan oleh PHPMaker 2021, yaitu:

app/modelslist
app/models/list

Dalam contoh di atas, diasumsikan kita menggunakan satu table di database yang bernama models.

Cara pertama dan yang secara standar dipakai oleh PHPMaker 2021 adalah:

app/modelslist

Artinya, di cara pertama ini, nama table dan jenis halamannya digabung.

Sedangkan cara kedua, adalah dengan memisahkan nama table dengan jenis halamannya, seperti contoh berikut:

app/models/list

Mungkin ada yang bertanya-tanya, bagaimana cara PHPMaker 2021 mendefinisikan kedua bentuk URL di atas? Jawabannya bisa kita lihat kode yang sudah di-generate oleh PHPMaker 2021 di dalam file src/routes.php.

Perhatikan kode yang ini pada file tersebut:

    // models
    $app->any('/modelslist[/{ID}]', ModelsController::class . ':list')->add(PermissionMiddleware::class)->setName('modelslist-models-list'); // list
    ...
    $app->group(
        '/models',
        function (RouteCollectorProxy $group) {
            $group->any('/' . Config("LIST_ACTION") . '[/{ID}]', ModelsController::class . ':list')->add(PermissionMiddleware::class)->setName('models/list-models-list-2'); // list
            ...
        }
    );

Karena routes untuk membuat URL yang digunakan table models tadi banyak, dan supaya tidak bingung dengan kode lainnya, sengaja saya potong kode di atas, dengan memberi tanda tiga titik (…).

Kode di atas menjelaskan bahwa ada dua cara untuk membuat dua bentuk URL seperti yang sudah kita contohkan sebelumnya. Perhatikan kode yang $app->any dan seterusnya, itu adalah kode untuk membuat URL cara pertama.

Sedangkan untuk URL yang cara kedua, menggunakan kode yang $app->group dan seterusnya. Sudah tahu perbedaannya kan?

Kalau sudah tahu, berarti itu artinya kita bisa membuat URL yang cara ketiga, sesuai keinginan kita. Di sinilah sekaligus menjawab pertanyaan di awal artikel ini tadi.

Katakanlah kita ingin membuat URL yang mirip cara kedua, tapi nama table-nya kita samarkan (dalam hal ini kita ganti dari kata models menjadi data-model), sehingga bentuknya menjadi seperti ini:

app/data-model/list

maka cukup kita menambahkan kode berikut di bawah blok kode cara kedua di atas ke dalam file src/routes.php:

	$app->group(
        '/data-model',
        function (RouteCollectorProxy $group) {
            $group->any('/' . Config("LIST_ACTION") . '[/{ID}]', ModelsController::class . ':list')->add(PermissionMiddleware::class)->setName('models/list-models-list-2'); // list
            ...
        }
    );

Meskipun cara ini masih belum bisa menggunakan Server Events, tapi paling tidak, kita sudah menjawab pertanyaan di awal artikel ini. Sekarang kita sudah bisa membuat URL yang SEO-Friendly, tanpa selalu menggunakan nama table aslinya.

Betapa menyenangkannya menggunakan PHPMaker 2021, bukan?

Perasaan baru saja belajar PHPMaker 2021, eeeh, hari ini, Senin, 16 Agustus 2021, PHPMaker 2022 sudah dirilis, gaeeesss! Sambil menunggu email hasil purchase license PHPMaker 2022, ada baiknya nih kita review sekilas fitur-fitur di PHPMaker 2022.

PHPMaker 2022 is another huge upgrade from previous version, it includes a long list of new features. If you upgrade from v2021, there are no big changes.

Artinya, jika selama ini kita sudah menggunakan versi 2021, tidak ada perubahan besar. Syukurlah kalau begitu, ehm!

Salah satu fitur yang paling saya sukai adalah yang ini:
Remember folder of project file after opening a project (UI)

Artinya, PHPMaker 2022 dapat mengingat lokasi folder tempat file project yang terakhir dibuka. Selama ini, PHPMaker 2021 dan versi-versi sebelumnya hanya fokus ke folder projects saja, dan ini sangat menjengkelkan. Untunglah di versi 2022 ini sudah dibuat fleksibel. Mirip seperti kalau kita menggunakan Notepad++, yang dapat mengingat folder terakhir tempat file yang terakhir atau sedang kita buka.

Tapi tunggu dulu. Meskipun tidak terlalu ada perubahan besar, selalu saja ada fitur-fitur terbaru di versi terakhir.

Beberapa yang sudah saya lihat, adalah:

Bootstrap 5.1

PHPMaker 2022 resmi mulai menggunakan Bootstrap versi 5. Dimulai dari versi 5.1 yang dirilis saat ini.
– New Accordion component
– New Offcanvas component
– New File input
– Remove support for IE 11 and other older browsers, see Browsers and devices
– RTL (Right-To-Left)

Keren, yak… semakin up-to-date aja nih PHPMaker 2022!

Internationalization (i18n) by PHP and JavaScript

Fitur ini memungkinkan kita dapat menentukan pengaturan locale secara otomatis menggunakan extension native PHP Intl dan object JavaScript Intl. Selain itu, kita dapat memformat dan mem-parse angka ICU, angka dengan mata uang, dan memformat tanggal dan jam.

Web Push Notifications

Ini fitur yang sering diminta pada Forum Diskusinya. Dengan fitur ini, tersedia opsi untuk mengijinkan Pengguna dengan level Anonymous menerima pemberitahuan (notifications). Kita juga dapat men-generate server public/private keys. Pengguna Akhir juga dapat mengaktifkan atau menonaktifkan notifications. Sedangkan user dengan level Administrators dapat mengirim notifications ke beberapa Pengguna tertentu, atau bahkan ke semua Pengguna yang sudah terdaftar di Aplikasi Web. Wow, keren, ya?

Two Factor Authentication (Google Authenticator)

Ini merupakan fitur keamanan yang lagi ngetren sekarang. Otentikasi Dua Faktor. Tersedia Opt in/out atau forced 2FA. Ada juga Backup codes. Pengguna dengan level Administrator dapat me-reset user secret.

Column Visibility

Fitur ini juga termasuk yang sering diminta di Forum Diskusi, karena dapat menampilkan/menyembunyikan kolom table di halaman List saat Aplikasi Web dijalankan.

Multi-Column List Page – Table/Cards Views

Fitur ini memungkinkan kita untuk menggunakan multi-column di halaman List. Jadi, tidak selalu menampilkan data dalam format tabel. Kita bisa membuat beberapa kolom di halaman List, sehingga data ditampilkan lebih eye-catching.

Yang digunakan adalah Multi-column cards oleh Bootstrap Cards. Responsive multi-column layout juga. Kemudian adanya peningkatan fitur opsi button di List, tersedia 4 posisi (atas/bawah-kiri/kanan). Yang lebih kerennya lagi, kita dapat berpindah mode antara regular table, table view, dan cards view menggunakan Ajax. Mendukung Custom Template di kedua tampilan. Juga mendukung class Bootstrap card-*.

Custom Template Card

Fitur ini memungkinkan kita menggunakan Custom Template untuk Cards di halaman List dengan tampilan Multi-Column.

Preview Field

Fitur ini memungkinkan untuk melihat atau mem-preview field sebagai baris di table yang dapat di-expand.

TEXT Edit Tag Input Type

Fitur ini memungkinkan kita utnuk memilih tipe-tipe dari input text boxes. Pilihan yang tersedia adalah: text, color, email, month, number, range, search, tel, url, dan week. Tersedia juga fitur validator untuk New URL.

RTL (Right-To-Left)

Fitur ini dapat mendeteksi bahasa yang menggunakan layout RTL berdasarkan ID bahasanya. PHPMaker 2022 juga dapat otomatis men-generate dan menggunakan RTL stylesheets yang bertalian.

Chart.js 3.5

– With chartjs-adapter-luxon, chartjs-plugin-annotation and chartjs-plugin-datalabels
– Support formatting by locale
– Option to show percentage in Pie/Doughnut charts

Table Header Filter

Fitur ini memungkinkan kita dapat menggunakan Excel filter style. bisa berfungsi dengan field lainnya di bagian Extended Search. Tentu saja bersifat dapat dicari. Kemudian fitur Pagination juga mengalami peningkatan, dengan tersedianya fitur Infinite Scrolling. Sedangkan untuk Dropdown positioning, menggunakan Popper.

Improved File Upload

Tampilan baru default upload file menggunakan dropzone. Tersedia juga pilihan untuk tetap menggunakan Bootstrap File input.

Improved Modal Lookup

Fitur Modal dialog juga mengalami peningkatan. Tersedian pagination dengan gaya Infinite Scrolling. Wow, keren! Kemudian fitur Lookup cache juga semakin diperbaiki. Semoga saja lebih baik dari versi sebelumnya. Dan yang terakhir, Modal dialog dapat digeser alias draggable.

Improved Date/Time Picker (Extension)

Fitur ini memungkinkan Date/Time Picker menggunakan Dropdown yang posisinya menggunakan Popper. Juga mendukung ICU date format. Otomatis menggunakan setting internasionalisasi oleh object native JavaScript Intl.

Improved Detail Preview (Extension for Registerd Users Only)

Fitur Detail Preview juga mengalami penyempurnaan. Tersedia opsi level project. Detail table tabs juga dapat menggunakan dropdowns. Mendukung preview baris di tabel dengan teknis ekspand, Bootstrap Modal, Popover, atau Offcanvas. Semakin keren aja, nih!

Leaflet (Custom View Tag for Registerd Users Only)

Ini Custom View Tag untuk pengguna yang secara resmi membeli PHPMaker. Tersedia OpenStreetMap (OSM). Mapbox (requires Mapbox access token). Marker clustering, dan juga Geocoding.

npm Packages

PHPMaker 2022 dapat mencari npm packages dari npmjs.com di dalam antarmukanya. Juga dapat men-generate package.json untuk project. Memungkinkan untuk menjalankan npm install setelah proses generate.

Template and Extensions as npm Packages

Nah, kalau yang ini, artinya sejak PHPMaker 2022, Template dan Extensions akan diperlakukan sebagai npm Packages. Harus belajar ilmu baru lagi nih, hehehe… karena Masino Extensions juga harus diperbarui supaya kompatibel dengan PHPMaker 2022.

Auto-Focus

Fitur ini memungkinkan untuk focus pada field pertama di halaman yang telah selesai dimuat secara penuh. Juga dapat focus pada field yang pertama mengalami error setelah validasi yang dilakukan di sisi server. Keren juga nih.

Improved AutoSuggest

Fitur ini menyempurnakan AutoSuggest yang dapat menggunakan pagination dengan style Infinite Scrolling. Juga sudah menangani lebih baik lagi cache pada field yang menggunakan Lookup ke table lain. Dropdown positioning by Popper, dan mendukung RTL (Right-To-Left).

Selengkapnya, langsung saja deh baca-baca di sini ya: https://phpmaker.dev/docs/#/phpmaker2022.html.

Serbuuuuuuuu!!!

Dalam beberapa hari ke depan, saya akan merilis Masino Extensions untuk PHPMaker versi 2022. Sebelum saya rilis, ada baiknya kita mengetahui fitur-fitur apa saja yang bakal Anda nikmati, jika menggunakan Masino Extensions tersebut.

Sebagian besar fitur-fitur yang saya tambahkan ke Masino Extensions adalah karena belum terdapat pada fitur bawaan PHPMaker 2022. Artinya, fitur-fitur tersebut memang dibutuhkan, tapi sayangnya belum disediakan di PHPMaker 2022.

Fitur Extensions di PHPMaker adalah solusinya. Kabar baiknya, di versi 2022 ini, PHPMaker semakin menyederhanakan lagi teknik pembuatan Extension. Meskipun di awal-awal terjadi sedikit “drama” yang tidak dapat mengenali Extensions di project PHPMaker 2022, akhirnya fitur Extensions ini bisa juga digunakan pada PHPMaker 2022.

Penasaran fitur-fitur apa saja yang saya tambahkan di Masino Extensions untuk PHPMaker 2022?

1. Improvement AdminLTE 3

Mari kita mulai dengan theme atau layout yang digunakan. Kali ini saya memutuskan untuk tetap mempertahankan AdminLTE 3 bawaan asli PHPMaker 2022. Kalau dulu saya berusaha untuk menghindari pemakaian AdminLTE di beberapa versi Masino Extensions saya. Tapi kalau sekarang, sudah tidak lagi. Mengapa?

Ada dua alasan utama. Pertama, beberapa fitur di PHPMaker 2022 mengandalkan theme ini, yaitu: fitur search item menu di Sidebar, dan juga fitur search data di bagian Top Navbar. Kedua, dari Github-nya, saya melihat sang author akan merilis versi 3.2.0 dalam waktu dekat. Bahkan, versi major berikutnya yaitu 4.0.0 juga akan mereka rilis.

Tentu saja semua ini membuktikan bahwa AdminLTE yang sekarang sudah lebih baik dibandingkan versi-versi sebelumnya. Melihat progress development theme ini di Github semakin meyakinkan saya untuk tetap mempertahankannya pada Masino Extensions untuk PHPMaker 2022.

Meskipun saya tetap mempertahankan AdminLTE, bukan berarti saya tidak melakukan improvement pada theme atau layout bawaan PHPMaker 2022 ini. Beberapa peningkatan fitur saya lakukan.

Tersedia pengaturan FixedHeader, yang berfungsi untuk membuat bagian Header Aplikasi Web tetap lengket di bagian atas halaman, meskipun Pengguna Akhir melakukan scroll ke arah bawah. Hal ini sangat berguna jika halaman Aplikasi Web memiliki banyak record, sehingga membutuhkan scroll yang panjang sampai ke bagian paling bawah halaman.

Kemudian tersedia pengaturan SidebarMini. PHPMaker 2022 sebenarnya sudah memiliki pengaturan AdminLTE layout class di bawah menu Tools -> Advanced Settings, tapi sayangnya di sana tidak ada opsi sidebar-mini. Untuk itulah Masino Extensions menyediakan opsi SidebarMini tersebut.

Masih terkait dengan Sidebar, tersedia juga pengaturan ElevateSidebar, untuk menampilkan efek melayang (elevate) pada Sidebar. Tersedia 4 opsi, yaitu: elevation-1, elevation-2, elevation-3, atau elevation-4. Semakin tinggi nilainya, maka semakin terlihat tinggi melayang Sidebar-nya, ditandai dengan semakin tebalnya efek bayangan (shadow) di sisi kanan Sidebar yang bertalian.

Peningkatan fitur lainnya yang tidak kalah penting adalah 3 pengaturan berikut: NavPills, NavFlat, dan NavLegacy. Sengaja tidak saya uraikan di sini. Saya persilahkan Anda bermain-main melalui kombinasi pilihan yang Anda inginkan. Penasaran kan? Hehehe… yang jelas, pengaturan ini untuk memberikan tampilan yang berbeda pada item navigasi Sidebar.

2. Improvement RTL di CSS AdminLTE 3

Sampai dengan PHPMaker v2022.3 (saat artikel ini saya tulis), PHPMaker belum menyertakan kode CSS yang menangani penggunaan Sidebar Mini. Itu artinya PHPMaker 2022 belum mendukung pemakaian Sidebar Mini.

Untuk itu, maka saya harus melakukan penyesuaian kode CSS untuk mengatasi pemakaian Sidebar Mini. Karena kurang sreg rasanya jika Aplikasi Web kita tidak bisa menampilkan Sidebar Mini.

Hal ini ternyata berdampak juga pada kode CSS yang menangani layout RTL (Right-To-Left). Saya pun harus menyesuaikan kode untuk layout RTL khusus pada penanganan Sidebar Mini tersebut.

Penyesuaian ini sengaja saya tuliskan di sini, supaya tidak lupa jika PHPMaker masih belum menangani pemakaian Sidebar Mini untuk AdminLTE versi mendatang.

3. Scroll To Top

Peningkatan fitur lainnya untuk AdminLTE 3 meskipun tidak tersedia melalui pengaturan khusus di Masino Extensions adalah ScrollToTop. Fitur ini akan otomatis menampilkan button panah atas di sebelah kanan bawah halaman jika Pengguna Akhir melakukan scroll ke bawah sampai sekitar 40% dari tinggi halaman.

Jika diklik, maka sistem akan otomatis scroll ke atas menggunakan efek scroll smooth. Fitur sederhana, tapi sangat dibutuhkan demi kenyamanan Pengguna Akhir ketika mem-browse konten halaman. Khususnya untuk halaman yang tinggi halamannya relatif besar.

4. Local Google Fonts

Meskipun Masino Extensions untuk PHPMaker 2022 menggunakan AdminLTE3, bukan berarti jenis huruf yang digunakan masih menggunakan standar pengaturan bawaan PHPMaker. Di dalam Extension MasinoHeaderFooter18, saya menyediakan pengaturan FontFamily.

Tersedia 9 pilihan Google Font yang bisa Anda gunakan secara lokal. Itu artinya, Aplikasi Web tidak selalu harus terhubung ke Internet supaya dapat menggunakan kesembilan Google Font berikut: comfortaa, exo, montserrat, muli, opensans, poppins, quicksand, roboto, dan ubuntu.

5. Language Selector yang Dilengkapi Bendera

Masih pada Extension MasinoHeaderFooter18, sekarang tersedia pengaturan LanguageSelectorType, yang berisi 4 pilihan dan selama ini sudah disediakan PHPMaker. Tapi sayangnya, PHPMaker masih belum menyertakan icon bendera dari bahasa yang terkait.

Dengan menggunakan Masino Extensions, maka keempat pilihan berikut: LI (ditampilkan sejajar di bagian Header), DROPDOWN (ditampilkan dalam menu dropdown di Header), SELECT (ditampilkan melalui bantuan control Combobox di Header), dan RADIO (ditampilkan melalui control Radio Button di Header) sudah semakin ditingkatkan lagi.

Perubahan yang terjadi adalah dengan melengkapi icon bendera milik negara yang bertalian. Aplikasi Web pun menjadi kelihatan lebih profesional.

6. Otomatis Mengingat Status Terakhir Panel Pencarian

Hal pertama yang sering mengganggu kenyamanan Pengguna Akhir saat mem-browse data di halaman List adalah ketidakmampuan sistem untuk mengingat status terakhir Panel Pencarian. Sering kali Pengguna Akhir ingin meng-collapse atau menyembunyikan panel Pencarian ketika mem-browse data ke halaman lain.

Untuk itulah mengapa Extension MasinoSearchPanelStatus18 saya buat. Tersedia pengaturan di level Table, apakah akan mengaktifkan fitur ini atau tidak. Jika diaktifkan, maka ketika Pengguna Akhir terakhir meng-expand Panel Pencarian di halaman List tadi, maka ketika dia membuka kembali halaman tersebut di waktu mendatang, status expand tadi yang akan ditampilkan kembali.

Demikian juga sebaliknya. Jika status terakhir Panel Pencarian dalam keadaan collapsed, maka status terakhir tadi yang akan digunakan ketika Pengguna Akhir membuka kembali halaman List yang bertalian. Aplikasi Web akan semakin terlihat profesional dan nyaman digunakan jika fitur kita sediakan.

Fitur ini sangat bermanfaat jika kita tidak ingin menampilkan Panel Pencarian selalu dalam keadaan terbuka atau sebaliknya dalam keadaan tertutup terus-menerus. Kita bisa mengaturnya secara dinamis on-the-fly saat Aplikasi Web diakses oleh Pengguna Akhir.

Sekedar informasi, status terakhir Panel Pencarian tersebut disimpan oleh sistem ke dalam Cookies. Oleh karena itu, jika Anda ingin me-reset kembali semua status Panel Pencarian seperti semula ketika Aplikasi Web baru di-generate oleh PHPMaker, maka tinggal hapus saja Cookies yang bertalian.

7. Auto Numeric untuk Field yang Bertipe Angka

Fitur ini diimplementasikan melalui Extensions MasinoAutoNumeric18. Sistem akan otomatis menambahkan kemampuan untuk memisahkan angka ribuan menggunakan karakter separator ribuan. Demikian pula untuk angka desimal, akan otomatis dipisahkan menggunakan separator desimal. Setting karakter separator ribuan dan desimal tadi dapat ditentukan dari menu Tools -> Locale Settings.

Fitur ini sangat bermanfaat ketika Pengguna Akhir sedang menginput data numerik. Jika data yang diketik mencapai kelipatan ribuan, maka Pengguna Akhir merasa nyaman dan terbantu, karena sistem akan otomatis menambahkan sendiri karakter pemisah ribuannya.

Termasuk juga untuk angka desimal, maka Pengguna Akhir akan merasa terbantu untuk menentukan berapa digit angka di belakang karakter pemisah desimalnya.

Pengaturan jumlah angka di belakang desimal tadi dapat kita tentukan melalui pengaturan level Field pada Extension MasinoAutoNumeric18. Tersedia pengaturan NumberOfDecimal. Isikan 2 (misalnya), jika 2 digit angka setelah karakter pemisah desimal.

Pengaturan ini disediakan dari sisi Extension, karena sejak PHPMaker 2022, sudah tidak tersedia lagi pengaturan untuk menentukan jumlah digit di belakang desimal pada panel View Tag. Oleh karena itu, pastikan Anda menentukan setting ini dari Extension MasinoAutoNumeric18.

8. Improve Extension Preview

Extension Preview ini saya improve sehingga menghasilkan Extension MasinoPreview18. Perubahan yang saya lakukan adalah dengan menambakan dua pengaturan di level Table, yaitu masing-masing AskOnAddModal dan AskOnEditModal.

Kedua pengaturan tadi masing-masing berfungsi untuk menampilkan jendela dialog berisi pertanyaan melalui bantuan Sweet Alert 2, sebelum data yang akan ditambah atau diubah melalui jendela dialog Bootstrap Modal disimpan ke Database.

Secara standar pengaturan ini dalam posisi aktif. Itu artinya ketika Anda menggunakan Extension ini, Pengguna Akhir akan melihat kotak pertanyaan pada form Add maupun Edit yang ditampilkan dari table Detail yang dibuka melalui fitur Preview Row.

9. Optimalisasi Sweet Alert 2 dibandingkan Alertify

Kalau pada Masino Extensions di versi sebelumnya saya lebih banyak menggunakan Alertify, maka pada Masino Extensions untuk PHPMaker 2022 ini saya memutuskan untuk lebih banyak menggunakan (baca: mengoptimalkan) Sweet Alert 2 untuk menampilkan jendela dialog yang berisi informasi, peringatan, pertanyaan/konfirmasi, maupun masukan input sederhana dari Pengguna.

Lalu bagaimana dengan Alertify? Jangan khawatir. Masih tetap saya gunakan di Masino Extensions untuk PHPMaker 2022, tapi hanya untuk menampilkan menu Bantuan atau Help Online. Hal ini wajar, karena Sweet Alert masih memiliki beberapa keterbatasan untuk menampilkan data yang dimuat dengan AJAX, termasuk tampilannya yang kurang proporsional untuk menampilkan konten Help Online.

Dengan menggunakan Alertify, maka konten Help Online dapat ditampilkan dengan lebih rapi, seperti yang selama ini sudah kita gunakan pada Masino Extensions di versi-versi sebelumnya. Pengguna Akhir juga masih tetap dapat menyeret jendela dialog ke posisi yang diinginkan pada layar komputer. Nah, fitur ini tidak terdapat di Sweet Alert 2.

Sedangkan Sweet Alert 2 di Masino Extensions untuk PHPMaker 2022, dapat mengoptimalkan keuntungan fitur-fitur cantik di Sweet Alert 2, menampilkan icon yang mewakili tipe pesannya, (information, alert, error, maupun confirmation). Selain itu, efek animasi saat dialog Sweet Alert 2 ditampilkan ke layar juga saya tambahkan sehingga kelihatan lebih nyaman saat dilihat oleh Pengguna Akhir. Hal yang sama juga berlaku pada saat jendela dialog ditutup, maka efek closing juga ditambahkan melalui Masino Extensions.

Perlu diketahui, bahwa PHPMaker 2022 tidak menampilkan icon tipe pesan di Sweet Alert 2. Juga tidak tersedia efek saat jendela dialog dibuka maupun ditutup, sehingga terlihat sangat kaku. Itulah alasan utama mengapa peningkatan fitur tersebut sudah seharusnya saya tambahkan di Masino Extensions untuk PHPMaker 2022. Lagi-lagi terlihat sederhana, tapi jika tidak dilakukan akan membuat Aplikasi Web yang dihasilkan tidak terlalu kelihatan profesional.

10. Mode Pengumuman

Fitur ini dapat menampilkan informasi Pengumuman (Announcement) yang datanya dapat diambil dari table announcement. User Administrator dapat mengubah setting ini dari table settings atau menu Application Settings atau Pengaturan Aplikasi. Pengaturan nama table untuk data teks Pengumuman dapat diatur dari extension MasinoHeaderFooter18.

Teks pengumuman di table announcement juga sudah mendukung pemakaian multi bahasa. Artinya, sistem akan otomatis menampilkan teks pengumuman sesuai dengan bahasa yang sedang terpilih. Hal ini sangat bermanfaat jika aplikasi web kita mendukung pemakaian multi bahasa.

Tidak itu saja, pengumuman dapat ditampilkan pada durasi waktu tertentu. Artinya jika durasi waktu yang ditetapkan sudah tidak terpenuhi, pengumuman akan otomatis tidak ditampilkan lagi.

11. Mode Pemeliharaan

Fitur ini dapat menampilkan informasi Pemeliharaan (Maintenance) yang batas waktu pemeliharaan dapat ditentukan dari table settings. O iya, nama table ini bersifat dinamis, dan dapat ditentukan dari extension MasinoHeaderFooter18.

Tadi telah disebutkan bahwa batas waktu pemeliharaan dapat ditentukan. Artinya, jika tanggal dan jam batas waktu tadi sudah terlampaui, sistem dapat otomatis menghilangkan mode Pemeliharaan tadi, sehingga pesan pemeliharaan tersebut tidak ditampilkan lagi.

Ketika Mode Pemeliharaan sedang aktif, maka Pengguna Akhir yang bukan level Administrator tidak dapat login atau masuk ke dalam aplikasi web. Mereka hanya bisa menampilkan halaman depan atau halaman Login saja. Sedangkan untuk Pengguna Akhir yang level Administrator, bisa login ke dalam sistem.

Pengaturan Mode Pemeliharaan di table settings dibuat sesimpel mungkin. Artinya, di table ini tidak ada form untuk menginput teks khusus. Hanya teks standar dari sistem yang ditampilkan. Oleh karena itu, jika Anda ingin menampilkan pesan khusus, maka Anda dapat mengaktifkan mode Pengumuman di atas tadi, lalu mendefinisikan isi teks Pengumuman sesuai dengan penjelasan dari kondisi mode Pemeliharaan yang sedang berlangsung.

12. Bootstrap Card di Halaman yang Bukan List

Fitur ini bertujuan untuk menampilkan konten di halaman Add, Edit, Update, Search, View, Login, Reset Password, Registration, dan Change Password menjadi lebih eye-catching lagi. Disertai dengan perubahan warna background halaman yang awalnya putih, berubah menjadi sedikit agak gelap (abu-abu).

Dengan teknik ini, maka konten yang ditampilkan di halaman-halaman tadi menjadi lebih mudah untuk dilihat dan dibaca. Bahkan, lebar konten akan otomatis menyesuaikan dengan lebar maksimal area konten utama. Ketika Pengguna Akhir mengubah ukuran jendela browser, lebar maksimal konten pun akan otomatis menyesuaikan.

Tidak hanya itu saja. Pengguna Akhir bahkan dapat me-maximize jendela dari component Bootstrap Card tersebut sampai dalam posisi full screen. Fitur ini tentu saja dapat memberikan kenyamanan kepada Pengguna Akhir yang ingin menampilkan konten dari suatu halaman tanpa harus terpengaruh dengan area Header, Sidebar, dan Footer.

13. Opsi Terms and Conditions di Halaman Registrasi dan Ganti Kata Sandi

Fitur ini adalah fitur yang paling banyak dicari oleh Web Developer untuk halaman Registrasi atau pendaftaran akun pengguna. Sebelum mendaftarkan akun, sistem memaksa Pengguna Akhir untuk menyetujui Syarat dan Ketentuan yang isinya dapat ditentukan dari table languages.

Teks Syarat dan Ketentuan dapat ditampilkan melalui bantuan jendela dialog Alertify. Pengguna Akhir bahkan dapat mencetak konten Syarat dan Ketentuan tadi. Sistem akan menampilkannya dalam file PDF kepada Pengguna Akhir, sehingga dapat dicetak atau disimpan jika dibutuhkan.

Tidak hanya di halaman Registrasi akun pengguna saja. Fitur Syarat dan Ketentuan ini juga tersedia di halaman Ganti Kata Sandi. Pengguna Akhir harus memberi tanda centang yang menandakan setuju dengan Syarat dan Ketentuan yang sudah ditetapkan sebelumnya.

Bahkan, ada opsi untuk menampilkan link ke Syarat dan Ketentuan di bagian Footer dari Aplikasi Web juga. Jika diklik maka sistem akan menampilkan jendela dialog Alertify berisi konten Syarat dan Ketentuan tadi. Pengaturan ini dapat Anda lihat pada Extension MasinoHeaderFooter18 pada pengaturan ShowTermsConditionsLinkOnFooter.

14. Help Online di Semua Halaman

Tersedia opsi untuk menampilkan icon tanda tanya yang jika diklik akan menampilkan jendela dialog Alertify berisi Bantuan yang menjelaskan halaman yang sedang dibuka.

Help Online ini bahkan tersedia juga jika halaman ditampilkan dalam jendela dialog Modal Bootstrap. Sistem akan mengenali halaman yang sedang ditampilkan, meskipun dalam jendela dialog Modal Bootstrap tadi.

Pengelolaan konten Help Online ini pun bisa dilakukan dari UI (User Interface) halaman Aplikasi Web yang sudah di-generate oleh PHPMaker. Artinya, konten Help Online dapat dikelola secara dinamis sesuai kebutuhan.

15. Opsi Menampilkan Pertanyaan Sebelum Data Disimpan atau Dihapus

Seperti yang sudah diuraikan di atas mengenai pengoptimalisasian Sweet Alert 2 untuk menampilkan jendela dialog berisi pertanyaan (menggantikan fitur Alertify), tersedia opsi untuk menampilkan pesan berisi konfirmasi atau pertanyaan sebelum Pengguna Akhir menyimpan data. Pengaturan ini dapat Anda lihat melalui Extension MasinoFixedWidthSite18.

Terdapat opsi AskOnAdd, AskOnEdit, AskOnUpdate, AskOnDelete, AskOnDeleteFromView, dan AskOnSaveGrid. Sesuai dengan namanya, masing-masing opsi ini jika diaktifkan dapat menampilkan jendela dialog berisi pertanyaan apakah data ingin disimpan (Add, Edit, Update, SaveGrid) atau ingin dihapus (Delete).

Secara standar (Default), semua opsi ini dalam keadaan aktif (Enabled). Itu artinya Pengguna Akhir akan otomatis melihat pertanyaan menggunakan Sweet Alert 2, sebelum dapat melanjutkan ke proses berikutnya (apakah data disimpan, atau apakah data ingin dihapus; tentu saja sesuai kondisi di halaman yang bertalian).

Tidak itu saja. Fitur ini juga akan otomatis diimplementasikan jika halaman Add, Edit, atau Update tersebut ditampilkan melalui jendela dialog Bootstrap Modal. Masino Extensions akan menangani hal tersebut dengan membaca pengaturan level Table di Extension MasinoFixedWidthSite18 tadi.

16. Count Down Session Akan Time Out di Footer

Fitur ini menampilkan hitungan count down sesi Pengguna yang sedang login akan berakhir dalam format Menit:Detik pada bagian Footer dari Aplikasi Web yang dihasilkan oleh PHPMaker.

Jika sekian waktu terakhir yang bisa ditentukan dari Advanced Settings akan berakhir, maka jendela dialog Sweet Alert 2 tadi akan ditampilkan ke hadapan Pengguna Akhir. Mereka harus mengklik tombol OK supaya dapat melanjutkan session-nya kembali.

Jika dibiarkan terus sampai waktu session berakhir, maka sistem akan otomatis logout. Pengguna Akhir harus login lagi jika ingin melanjutkan session-nya kembali.

17. Calendar Scheduler

Fitur ini diimplementasikan melalui Extension MasinoCalendarScheduler18. Sama seperti di versi-versi Masino Extensions sebelumnya, fitur ini dapat menampilkan data melalui penggunaan Javascript Library FullCalendar.

Pengguna Akhir dapat menampilkan data di suatu tanggal atau durasi tanggal awal dan akhir tertentu melalui jendela dialog Bootstrap Modal. Mereka juga dapat menambah, mengubah, atau menghapus data melalui antara muka Kalender. Semuanya itu tetap menggunakan jendela dialog Bootstrap Modal.

Tentu saja dilengkapi dengan backend yang sudah teruji dan terbukti kehandalannya melalui Masino Extensions untuk beberapa versi major PHPMaker sebelumnya.

Pengguna Akhir bahkan dapat menggeser event di Kalender ke posisi tanggal yang baru. Sistem akan otomatis memperbarui di belakang layar, dan menampilkan pesan berhasil jika proses update telah berhasil dilakukan.

Yang masih menjadi PR untuk Extension MasinoCalendarScheduler18 ini adalah, bagaimana cara menghilangkan ketergantungan pada Javascript library Moment.js. Sampai saat ini saya masih belum menemukan cara untuk tidak menggunakan library tersebut.

Jika Anda berhasil menemukan caranya, tinggalkan komentar di bawah artikel ini ya.

18. Dynamic Permission untuk Export Data

Seperti yang kita ketahui selama ini, sampai dengan versi 2022, PHPMaker masih mendefinisikan fitur Export Data melalui level pengaturan di aplikasi PHPMaker. Itu artinya, fitur ini baru bisa dinikmati setelah kita men-generate ulang semua file script. Dengan kata lain, fitur Export Data ini masih bersifat statis dan belum bisa ditentukan hanya untuk Level Pengguna tertentu.

Untuk mengatasi keterbatasan tadi, makanya fitur Dynamic Permission untuk Export Data tersebut saya buat melalui Extension MasinoHeaderFooter18. Cukup dengan mengaktifkan pengaturan EnablePermissionsForExportData.

Fitur ini memungkinkan sistem untuk memberi permission Export Data ke media tertentu (Print, Excel, Word, HTML, CSV, XML, PDF, atau Email) pada halaman yang mendukung Export Data, seperti List dan View. Permission ini dapat ditentukan secara dinamis oleh Pengguna Akhir level Administrator.

Cukup dengan mengakses halaman User Levels atau Level Pengguna, lalu mengklik icon user bertuliskan Permissions, lalu mengaktifkan apakah Permission untuk satu dan atau beberapa Export Data di atas. Setelah data disimpan, maka ketika Pengguna Akhir yang sesuai dengan Level Pengguna yang bertalian tadi dapat mengakses fitur Export Data.

Fitur yang terkait dengan Export Data ini adalah, untuk Export to Print atau Printer Friendly, maka output data yang ditampilkan murni menggunakan style yang sangat minim (tanpa warna dan style lain). Jenis hurufnya pun sudah dibuat khusus supaya mudah terbaca. Sayangnya, fitur ini belum mendukung object Reports di project PHPMaker.

19. Breacrumb Links yang Dinamis

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.

20. 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.

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 2022, fitur Reset Kata Sandi baru mendukung satu parameter saja, yaitu Email.

21. Visitor Statistics

Fitur ini diimplementasikan melalui extension MasinoVisitorStatistics18. Untuk mengimplementasikannya, maka pastikan kita sudah mengaktifkan opsi Enabled dari pengaturan Advanced extension tersebut.

Sistem akan otomatis merekam statistik pengunjung Aplikasi Web yang akan dibagi ke dalam beberapa table, yaitu stats_counter (Statistik Browser dan OS), stats_counterlog (Statistik per IP Address), stats_date (Statistik per Tanggal), stats_hour (Statistik per Jam), stats_month (Statistik per Bulan), dan stats_year (Statistik per Tahun).

Anda bisa menampilkan langsung hasilnya melalui object Table yang di-generate oleh PHPMaker terhadap keenam table di atas tadi.

22. Menghilangkan Outline Tebal berwarna Biru

Satu hal yang cukup mengganggu saya ketika menggunakan Bootstrap 5 di PHPMaker 2022 ini adalah outline tebal berwarna biru di sekeliling control yang sedang focus di sebuah Form.

Saya menghilangkan outline tebal tadi, dengan menggantikan outline biru tipis saja. Dengan cara ini, maka form akan kelihatan lebih bersih dan nyaman dilihat.

Modifikasi kecil yang dampaknya membawa perubahan besar, karena diimplementasikan di semua halaman yang dihasilkan oleh PHPMaker.

23. Highlight Parent-Menu di Bagian Top Navbar

Hal lain yang membuat tidak nyaman saat mengakses Aplikasi Web yang sudah di-generate oleh PHPMaker 2022 adalah ketika kita memilih salah satu item Sub-Menu di bagian Navbar atas, maka item Parent-Menu-nya tidak otomatis ter-highlight. Akibatnya, Pengguna Akhir tidak dapat mengetahui dengan cepat, item Parent-Menu yang mana yang seharusnya aktif.

Dengan menggunakan Masino Extensions, maka hal itu tidak terjadi lagi. Sekarang Anda akan melihat item Parent-Menu otomatis ter-highlight jika item Sub-Menu di bawahnya sedang terpilih. Pengguna Akhir pun menjadi nyaman dan mudah mengetahui Parent-Menu mana yang sedang aktif di bagian Navbar.

Hanya sedikit perubahan saja yang saya lakukan dari dalam Masino Extensions, tapi membawa dampak untuk item Sub-Menu yang berada di bawah beberapa item Parent-Menu, maka semua item Parent-Menu tersebut akan otomatis ikut ter-highlight.

Kemarin saya merilis Masino Extensions untuk PHPMaker 2022.

Bagi Anda yang sudah terdaftar menjadi member di situs ILovePHPMaker.com, silahkan download ya.

Tersedia juga file project yang bisa Anda gunakan untuk mencoba fitur-fitur di Masino Extensions untuk PHPMaker 2022.

Untuk melihat demo aplikasi webnya, silahkan klik di sini.

Untuk melihat fitur-fitur apa saja yang terdapat di Masino Extensions, silahkan baca artikel Ini Dia Fitur-Fitur yang Terdapat di Masino Extensions untuk PHPMaker 2022.

Semoga bermanfaat!

Waktu memutuskan tetap mempertahankan AdminLTE 3 pada Masino Extensions untuk PHPMaker 2022, masih ada satu hal yang mengganjal dalam hati saya. Apakah itu? Bagaimana cara mengimplementasikan posisi item menu terakhir yang diingat di Sidebar.

Seperti yang kita ketahui, AdminLTE 3 masih belum bisa mengingat posisi item menu yang sedang terpilih supaya kelihatan pada Sidebar. Mulai hari ini, hal itu sudah tidak menjadi ganjalan lagi.

Masino Extensions untuk PHPMaker 2022 sudah mendukung fitur ini. Untuk melihat hasilnya, silahkan klik di sini, lalu login menggunakan username admin dan password master.

Setelah berhasil login, klik menu OTHER TABLES -> Orders, lalu geser kursor mouse ke atas Sidebar, sampai muncul Vertical Scrollbar di sebelah kanan Sidebar. Kemudian seret Vertical Scrollbar ke bawa sampai mentok ke bawah.

Sampai di sini, kita memastikan bahwa item menu Orders terlihat dan dalam posisi aktif, ditandai dengan warna putih atau lebih terang dari item menu yang tidak aktif. Sekarang coba browse ke halaman berikutnya dengan mengklik tombol Next pada halaman List.

Tunggu beberapa saat, lalu perhatikan bahwa setelah halaman dimuat, scroll pada Vertical Scrollbar di Sidebar akan kembali ke bagian bawah, pada posisi dimana item menu Orders tadi kelihatan. Terasa sekali manfaatnya jika item menu yang kita klik berada tersembunyi di bagian paling bawah Sidebar.

Dengan cara ini, maka Pengguna Akhir akan merasa nyaman saat menggunakan Aplikasi Web kita. Mereka menjadi terbantu mengetahui item menu yang mana yang sedang terpilih, apalagi jika jumlah item menu di Sidebar relatif banyak.

Ditambah lagi kalau item menu tersebut dikelompokkan dalam satu menu induk yang harus dibuka dulu supaya ter-expanded. Satu hal yang dari dulu selalu saya inginkan akhirnya terwujud juga.

Banyak sekali keuntungan yang kita dapatkan ketika menggunakan versi major terakhir dari PHPMaker. Salah satu dari sekian banyaknya keuntungan tersebut (yang juga akan kita bahas di artikel-artikel selanjutnya), adalah betapa mudahnya kita menampilkan halaman yang sudah dibangkitkan oleh PHPMaker dalam Modal Dialog.

Kalau di versi-versi major sebelumnya kita harus memanggil fungsi Javascript yang bernama ew.modalDialogShow untuk menampilkan suatu halaman dalam Modal Dialog, maka sejak versi 2022, kita tidak perlu lagi memanggil fungsi tersebut. PHPMaker lebih menyederhanakan lagi kode maupun sintaks untuk menampilkan Modal Dialog tadi.

Katakanlah di sebuah Custom File yang kita buat dari PHPMaker 2022 (pastikan untuk mengaktifkan Include common files pada Custom File tersebut), kita akan menampilkan halaman Edit milik table orders dengan OrderID = 11076, maka cukup dengan kode di bawah ini kita sudah dapat melakukannya:

<?php if (IsAdmin()) { ?>
    <a href='#' class='btn btn-primary ew-row-link ew-edit' data-caption='Edit' data-url="ordersedit/11076" data-ew-action="modal">Edit Order 11076</a><br><br>
<?php } ?>

Dalam contoh kode di atas, kita memastikan hanya user dengan level pengguna Administrator saja yang dapat mengubah data di table orders tadi. Perhatikan juga bahwa di sana tidak ada lagi pemanggilan fungsi ew.modalDialogShow seperti di versi-versi major PHPMaker sebelumnya.

Hanya dengan mengoptimalkan property dari tag hyperlink HTML, yaitu dengan menambahkan data-ew-action=”modal”, dan memasukkan link halaman yang kita inginkan pada property data-url, maka kita sudah dapat menyediakan link kepada Pengguna Akhir aplikasi web untuk menampilkan suatu halaman dalam Modal Dialog.

Dengan cara ini, maka ketika Pengguna Akhir mencoba menampilkan kembali halaman Edit dalam Modal Dialog tadi, sementara di tab yang lain Pengguna Akhir sudah pernah mengklik link Logout, maka sistem akan otomatis me-redirect kembali ke halaman Login. Tidak seperti versi major sebelumnya, dimana sistem akan menampilkan Modal Dialog dengan konten yang berantakan di dalamnya.

Keren, kan PHPMaker 2022?

Alasan berikutnya mengapa sudah saatnya kita menggunakan PHPMaker versi terakhir (2022.5 saat artikel ini ditulis), adalah karena adanya peningkatan fitur Code Editor. Sekarang menulis kode di dalam project PHPMaker menjadi semakin mudah dan nyaman. Sejak versi 2022, PHPMaker menggunakan WebView2 Runtime.

Syaratnya, kita harus menginstall terlebih dulu WebView2 Runtime tersebut di komputer kita. Untuk memastikan apakah WebView2 Runtime tersebut sudah terinstall di komputer Anda, coba buka Control Panel, lalu lihat di bagian Program -> Uninstall a program, lalu di bagian Search Programs and Features di pojok kanan atas, ketikkan: WebView2 Runtime.

Jika hasil pencarian menampilkan Microsoft Edge WebView2 Runtime, itu artinya WebView2 Runtime sudah terinstall di komputer Anda. Jika belum, cukup install dari link pada alinea pertama di artikel ini.

Beberapa keuntungan yang akan kita dapatkan setelah menginstall WebView2 Runtime ini dan menggunakannya di bagian Code Editor dari PHPMaker 2022 adalah, kita bisa dengan cepat mengetahui nama-nama field yang terdapat di table yang sedang kita pilih. Contoh, ketika kita memilih table orders dari panel Database di sebelah kiri, ketika kita menekan tombol [Ctrl] + [Space] di keyboard, maka akan ditampilkan list dari nama-nama field yang tersedia.

Sekilas hal ini terlihat biasa saja. Tapi kalau kita teliti lagi lebih dalam, fitur ini sangat berguna jika suatu saat kita menggunakan nama field yang sama dengan reserved word di PHPMaker. Contoh, kita menggunakan nama field Message, maka karena kata ini merupakan reserver word di PHPMaker, ketika kita menekan tombol [Ctrl] + [Space] tadi, maka PHPMaker akan mengubahnya menjadi _Message (ada karakter garis bawah di awalnya).

Keuntungan lainnya dengan menggunakan WebView2 Runtime di Code Editor PHPMaker 2022 ini adalah, kita dapat lebih mengoptimalkan fitur Find and Replace. Meskipun di versi major sebelumnya PHPMaker sudah menyediakan fitur tersebut, tapi di versi 2022 ini, fitur Find and Replace di-claim oleh PHPMaker 2022 lebih bagus lagi.

Ketika kita mengetikkan satu karakter saja di bagian Find, maka kita dapat mengetahui ada di berapa lokasi karakter tersebut berada. Tentu saja ini sangat membantu, apakah kode yang harus diubah atau ditimpa terletak di berapa lokasi, sehingga kita dapat memeriksa terlebih dulu sebelum memutuskan untuk menggunakan Replace satu per satu atau Replace All.

Selanjutnya, dengan menggunakan WebView2 Runtime, kita sekarang dapat melakukan proses Indentation kode dengan sangat mudah dan cepat. Cukup dengan menekan tombol Tab, baik untuk satu baris ataupun beberapa baris kode sekaligus. Ini yang paling terasa sekali membantu, karena di versi-versi major PHPMaker sebelumnya, fitur Indentation dengan Tab tadi masih belum mendukung.

Tidak berhenti di situ saja. Kita juga dapat menggunakan beberapa perintah (Command) yang disediakan oleh WebView2 Runtime ini. Cukup dengan menekan tombol F1 dari keyboard saat kita sedang membuka Code Editor di PHPMaker 2022, maka sistem akan menampilkan daftar Command tadi.

Gunakan panah atas atau panah bawah untuk melihat daftar menu atau fitur lainnya yang tersedia.

Sangkin banyaknya, kita bahkan bisa mencari Command tertentu dengan mengetik nama command-nya. Contoh, kita ingin menambahkan cursor, maka ketikkan: Add Cursor, maka sistem akan menampilkan pilihan Command yang tersedia.

Jika kita ingin menambahkan cursor ke atas baris kode, tekan tombol [Ctrl] + [Alt] + [UpArrow]. Untuk menambahkan cursor ke bawah baris kode, tekan tombo [Ctrl] + [Alt] + [DownArrow]. Untuk menghapus baris code yang sedang aktif, tekan tombol [Ctrl] + [Shift] + [K], dan masih banyak lagi.

Silahkan langsung Anda coba sendiri. Dijamin puas!

Gile bener nih, PHPMaker 2022.

Seperti yang sudah kita ketahui, sejak versi 2021, PHPMaker mulai menggunakan control Select2 menggantikan control Combobox yang biasa. Banyak keuntungan yang kita dapatkan setelah PHPMaker menggunakan Select2, seperti yang diuraikan pada website Select2 tadi.

Keuntungan yang sangat dirasakan oleh Pengguna Akhir adalah kemampuan mencari data dengan cara mengetik satu atau beberapa karakter di dalamnya. Jika sebelumnya kita menggunakan control Select atau Combobox biasa, maka fitur pencarian data dengan cara mengetik langsung di dalam control ini belum dapat dilakukan.

Sayangnya, jika control Select2 hanya dapat memilih satu pilihan (bukan multi-select), maka kita harus mengklik terlebih dulu control Select2 tersebut, kemudian barulah kita dapat mengetikkan data yang ingin dicari pada control Select2 tadi. Sementara untuk multi-select, maka control Select2 dapat langsung menerima input berupa event keypress tanpa harus mengkliknya terlebih dulu.

Pertanyaan selanjutnya, apakah kita bisa membuat supaya control Select2 yang bukan multi-select tadi dapat menerima input berupa event keypres, sama seperti jika kita menggunakannya untuk multi-select? Jawabannya tentu saja bisa. Hehe, penasaran bagaimana caranya?

Ternyata mudah sekali. Langsung saja kita terapkan pada project demo2022 yang bisa Anda coba sendiri di localhost.

Buka project tersebut dengan PHPMaker 2022, lalu klik table orders dari panel Database di sebelah kiri. Selanjutnya klik field EmployeeID dari Fields setup, dan beri tanda centang pada kolom Ext. Search di bawah kolom List Page.

Berikutnya, klik tab Code (Server Events, Client Scripts and Custom Templates), lalu langsung lompat ke lokasi berikut: Client Scripts -> Table-Specific -> List Page -> Client Script, dan copy-kan kode berikut ke kode editor di sebelah kanan:

loadjs.ready("forderssrch", function() {
    // EmployeeID
    var optionsEmpID = { name: "x_EmployeeID", selectId: "forderssrch_x_EmployeeID" },
        elEI = document.querySelector("select[data-select2-id='" + optionsEmpID.selectId + "']");
    optionsEmpID.dropdownParent = elEI.closest("#ew-modal-dialog, #ew-add-opt-dialog");
    if (forderssrch.lists.EmployeeID.lookupOptions.length) {
        optionsEmpID.data = { id: "x_EmployeeID", form: "forderssrch" };
    } else {
        optionsEmpID.ajax = { id: "x_EmployeeID", form: "forderssrch", limit: ew.LOOKUP_PAGE_SIZE };
    }
    optionsEmpID.allowClear = true;
    optionsEmpID.multiple = true;
    optionsEmpID.maximumSelectionLength = 1;
    optionsEmpID = Object.assign({}, ew.selectOptions, optionsEmpID, ew.vars.tables.orders.fields.EmployeeID.selectOptions);
    ew.createSelect(optionsEmpID);
});

Setelah itu silahkan generate ulang semua file script dengan menggunakan PHPMaker 2022 seperti biasa, lalu cobalah login ke aplikasi web dengan username admin dan password master.

Buka menu OTHER TABLES -> Orders, lalu pastikan panel pencarian sudah terbuka (expanded).

Cobalah untuk membuat agar kursor mouse focus pada field Employee pada panel pencarian; bisa dengan klik field lain lalu pindahkan ke field Employee tadi, atau bisa juga langsung klik pada field Employee.

Perhatikanlah sekarang, kita dapat langsung mengetikkan satu atau beberapa karakter pada field Employee tadi. Karena field Employee ini hanya bisa memilih satu pilihan saja, maka ketika Anda ingin mencoba memilih pilihan yang lain, akan muncul tulisan bahwa Anda hanya dapat memilih satu item saja.

Mungkin ada yang bertanya, kok bisa? Kuncinya ada pada potongan kode berikut:

optionsEmpID.maximumSelectionLength = 1;

Cukup dengan meng-assign opsi maximumSelectionLength dengan nilai 1, yang artinya hanya boleh memilih satu pilihan saja.

Selain kode itu, cobalah perhatikan kode yang ini yang berada di atas kode tadi:

optionsEmpID.multiple = true;

Inilah kode penentu, mengapa akhirnya field Employee pada panel pencarian tadi bisa langsung menerima event keypress tanpa harus mengklik field tersebut terlebih dulu untuk menampilkan dropdown berisi textbox untuk mengetikkan pencarian sekaligus menampilkan hasilnya.

Betapa mudahnya bukan? Sedikit tricky memang, tapi benar-benar berfungsi.

Sebagai Web Developer, pernahkah Anda mengalami kesulitan ketika membuat Aplikasi Web yang mengharuskan Pengguna Akhir dapat mengentri data Pembelian atau Penjualan pada bagian Detail yang terdiri dari beberapa baris, kemudian sistem akan otomatis menghitung Jumlah Total dan menampilkan hasilnya di bagian Master?

Tidak hanya itu saja, sistem harus bisa otomatis menambahkan separator Ribuan dan separator Desimal saat Pengguna Akhir sedang menginput data. Bahkan, item Stock yang sudah dipilih pada baris sebelumnya, seharusnya tidak ditampilkan lagi pada baris-baris berikutnya.

Jika Anda pernah mengalami kesulitan seperti itu, maka mulai hari ini Anda seharusnya tidak mengalami kesulitan lagi jika membangun Aplikasi Web menggunakan PHPMaker 2022 dan Masino Extensions. Kabar gembira buat Anda yang sudah menggunakan PHPMaker 2022 dan Masino Extensions.

Sejak versi 2022.7; lebih tepatnya sejak versi minor 2022.7.3, PHPMaker sudah meningkatkan fitur Javascript Framework yang digunakan, sehingga memungkinkan kita sebagai Web Developer untuk membuat fitur penghitungan otomatis saat data diketik di bagian Detail, sekalipun separator Ribuan tidak menggunakan karakter koma, atau separator Desimal tidak menggunakan karakter titik.

Seperti yang kita ketahui, sebelum versi 2022.7.3 tersebut, Javascript Framework yang digunakan PHPMaker hanya dapat menggunakan karakter koma untuk separator Ribuan atau karakter titik untuk separator Desimal untuk operasi matematika seperti penjumlahan, pengurangan, pembagian, maupun perkalian.

Sejak versi 2022.7.3, kita dapat menggunakan karakter titik untuk separator Ribuan, dan karakter koma untuk separator Desimal. Itu artinya, jika kita menggunakan locale Indonesia, proses perhitungan saat Pengguna Akhir mengetik data di bagian Detail, sudah mendukung.

Bagi Anda yang sudah menjadi member di situs ILovePHPMaker.com, maka Anda sudah dapat mendownload project Stock Inventory Management untuk PHPMaker 2022.

Untuk melihat demo-nya, silahkan klik di sini. Anda bisa memilih bahasa Indonesia lalu cobalah untuk menambahkan data Pemesanan atau Penjualan dan detailnya masing-masing.

Saat data diketik di bagian detail, saat data Jumlah Pemesanan atau Jumlah Penjualan diketik di bagian Detail, sistem akan otomatis menghitung on-the-fly dan menampilkan hasilnya di bagian Master, sekalipun separator Ribuan adalah titik, dan separator Desimal adalah koma.

Buat yang sudah pernah menyembunyikan Data Label di Chart pada PHPMaker 2021, seperti yang sudah dibahas pada artikel Seperti Ini Mudahnya Menyembunyikan Data Label di Chart dari PHPMaker 2021, maka hal itu tidak berlaku lagi pada PHPMaker 2022.

Sejak versi 2022, PHPMaker menambahkan kemampuan untuk dapat mengkostumisasi tampilan pada Chart dengan menggunakan kode Javascript. Itu artinya, PHPMaker sudah duluan menambahkan kode untuk membuat Chart pada file views/layout.php. Untuk membuktikannya, Anda akan menemukan kode berikut di file tersebut:

// Create chart
ew.createChart = function (args) {
    loadjs.ready(["head", "chart"], function () {
    ...
};

Sengaja saya potong kode di atas dengan menggantinya dengan karakter tiga titik (…), karena panjangnya kode untuk membuat Chart tersebut.

Dengan cara tersebut, maka itu artinya kita sebagai Web Developer dapat mengubah tampilan Chart dengan menggunakan kode Javascript pada bagian Client Script. Termasuk untuk menyembunyikan Data Label di Chart, maka kita cukup menambahkan kode Javascript berikut:

    // this will remove/hide datalabels from the chart
    // change "report_summary_history_chart_summary_history" to the id of your chart
    ew.charts["report_summary_history_chart_summary_history"] = { 
        plugins: [ChartDataLabels],
        options: {
            plugins: {
            datalabels: true
            }
        }
    };

Pastikan untuk menyesuaikan ID dari Chart pada halaman Report yang kita inginkan. Dalam contoh di atas, ID Chart yang kita gunakan adalah report_summary_history_chart_summary_history.

Hanya dengan beberapa baris kode itu saja, kita sudah dapat menyembunyikan Data Labels pada Chart pada PHPMaker 2022. Jadi, kita tidak lagi menggunakan server event Chart_Rendered seperti yang dulu kita gunakan pada PHPMaker 2021.

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 dimut 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 PHPMaker template AdminLTE yang digunakan oleh PHPMaker 2022 tidak menyembunyikan proses render halaman. Semuanya terlihat jelas dan transparan. Untuk itulah dibutuhkan ada progress yang menandakan bahwa halaman sedang dimuat.

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 beberapa halaman yang memilik form yang harus memuat data pada 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 dari bagian Client Scripts -> Global -> Pages with header/footer -> Startup Script. Kode ini bisa Anda lihat 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 tadi. Di sana ada dua phrase baru, 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 menanggap ketiga data di ketiga bagian tadi sudah memenuhi kebutuhan kita di Aplikasi Web yang dihasilkan oleh PHPMaker 2022, maka kita tidak perlu lagi mengganti datanya.

Tapi, jika kita sebagai Web Developer ingin menyesuaikan data di ketiga bagian tadi, maka kita masih diberikan kesempatean untuk 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 di database 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.

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.

Tulisan ini sebenarnya hanya sekedar mengingatkan saja, khususnya buat Penulis, yang baru saja menerima laporan error dari Pengguna Akhir, saat insert data menggunakan function ExecuteStatement.

Biasanya, tanpa kita sadari, sering kali data String yang akan kita masukkan ke Database menggunakan function ExecuteStatement tadi, mengandung karakter petik tunggal (‘) atau apostrof. Jika tidak ditangani secara khusus, maka karakter ini bisa menyebabkan error saat proses penyimpanan data.

Untuk mengatasi isu ini, maka pastikan untuk selalu menggunakan function AdjustSql di setiap parameter yang diperkirakan mengandung karakter petik tunggal tadi. PHPMaker sebenarnya sudah lama menyediakan function tersebut, dan ini cara paling aman dan efektif, untuk mengatasi permasalahan klasik di atas tadi.

Cara menggunakannya bisa dilihat lewat contoh kode di bawah ini:

ExecuteStatement("INSERT INTO catatan_referan(Nama, Catatan, Tanggal) VALUES ('" . AdjustSql($newRow["Nama"]) . "', '" . AdjustSql($newRow["Catatan"]) . "', '" . CurrentDateTime() . "'");

Dari kode tersebut, maka terdapat 2 Field yang perlu mendapat perhatian khusus, yaitu Nama dan Catatan. Kedua Field ini tentu saja memiliki kemungkinan menerima data yang mengandung karakter apostrof yang sering menyebabkan error.

Tidak itu saja. Selain menangani data yang mengandung karakter petik tunggal, function AdjustSql juga sudah menangani kemungkinan data mengandung karakter petik ganda (“), karakter \0, karakter \n, karakter \r, karakter \t, karakter chr 26 atau Substitute, karakter chr 8 atau Backspace, dan karakter Backslash.

Kalau tidak menggunakan function AdjustSql, maka kita harus menangani satu per satu kemungkinan karakter yang sudah disebutkan tersebut, dan tentu saja ini cukup merepotkan karena harus menulis kode baris per baris untuk menangani karakter-karakter yang sudah disebutkan tadi.

Jadi, jangan pernah lupa atau menyepelekan function AdjustSql tersebut, kalau tidak ingin mengalami permasalahan klasik error saat menyimpan data ke Database!

Sejak versi 2022, PHPMaker sudah menyediakan dua opsi layout di halaman List pada aplikasi web yang dihasilkan olehnya. Layout pertama atau default dan paling sering digunakan adalah Table. Sedangkan layout kedua adalah Cards.

Pada PHPMaker 2025, untuk mengaktifkan fitur ini, maka ada beberapa langkah yang harus dilakukan.

Pertama, pastikan untuk menonaktifkan opsi Use global settings dari menu Table -> Table-specific Options, lalu jika ada pertanyaan apakah ingin menyalin pengaturan global sebagai pengaturan table, pilih Yes.

Kedua, scroll agak ke bawah, lalu lihat di bagian List Page, di sana ada pengaturan Multi-Column (Records per row). Masukkan nilai yang lebih besar dari 0, misalnya 3. Itu artinya, akan ada 3 kolom atau Card per baris yang ditampilkan di halaman List jika mode Layoutnya adalah Cards.

Ketiga, generate ulang semua file script sampai selesai. Selanjutnya, di halaman List dari aplikasi web yang dihasilkan PHPMaker, terdapat dua opsi, yaitu Cards View dan Table View. Kita bisa berpindah antar Layout, cukup dengan mengklik salah satu dari kedua opsi tersebut.

Contoh penerapan fitur ini bisa kalian lihat dari project demo2025 pada table cars. Di halaman List tersebut terdapat dua opsi Layout tadi.

Enaknya lagi, PHPMaker memberi kemudahan kepada Web Developer untuk mengeset Layout tersebut secara dinamis lewat kode PHP di bagian Server Events.

Contoh, kita bisa mengeset Layout default adalah Cards, dengan cara menaruh kode berikut di server event Page_Load di halaman List dari table yang kita inginkan:

$this->MultiColumnLayout = $this->getSessionLayout() ?? "card";

Hanya dengan sebaris kode PHP itu saja, maka kita bisa menentukan Layout default adalah Cards.

Meskipun kita sudah menentukan default-nya adalah Cards, kode di atas bersifat dinamis. Artinya, system akan tetap memuat setting terakhir yang kita pilih dari method getSessionLayout, jika halaman List tersebut dimuat ulang atau di-refresh/reload.

Penting untuk diketahui, jika table di halaman List tersebut memiliki relasi Master/Detail ke table lain, maka mode Preview Row tidak berlaku saat mode Cards sedang aktif. Hanya saat mode Table saja fitur Preview Row tersebut berlaku.

Untuk itu, maka kita sebaiknya mengubah pengaturan dari opsi row menjadi opsi modal atau popover atau offcanvas dari menu Tools -> Extensions -> Type: Detail Preview -> Preview -> Advanced -> Tables, apabila di halaman List itu kita mengaktifkan mode Cards.

Selain itu, setelah berpindah dari mode Table ke Cards maupun sebaliknya, maka kita harus me-refresh/reload halaman List tadi, supaya fitur Preview yang menampilkan table Detail bisa digunakan.

Keterbatasan ini harus kita maklumi sejak awal, siapa tahu Pengguna Akhir dari aplikasi web yang kalian bikin bingung, mengapa mereka tidak bisa melihat Preview Row table detail setelah berpindah antar Layout.

Betapa mudah dan fleksibelnya PHPMaker 2025 untuk berpindah antar Layout di halaman List, apakah ingin mode Table atau mode Cards. Meskipun masih ada keterbatasan di sana, setidaknya fitur ini menjawab pertanyaan Web Developer yang sering kali menginginkan fitur Cards di halaman List.

Berawal dari topik SuccessMessage display time di Forum Diskusi PHPMaker, Penulis merasa perlu untuk menyesuaikan logic yang mengotomatiskan pesan sukses auto hide selama 5 detik, di salah satu Masino Extensions yang bernama MasinoHeaderFooter25.

Seperti yang kalian lihat di topik tadi, untuk mengubah nilai delay auto hide SuccessMessage, maka kita cukup menambahkan kode Javascript berikut pada bagian Startup Script pada halaman tertentu yang kita inginkan saja:

    ew.autoHideSuccessMessageDelay = 7000; // set to 7 seconds to autohide

Atau, bisa juga melalui server event Page_Head jika ingin menerapkannya untuk semua halaman, cukup dengan kode berikut:

<script>
    ew.autoHideSuccessMessageDelay = 7000; // set to 7 seconds to autohide
</script>

Karena kita menempatkan kode Javascript tersebut ke dalam server event Page_Head, maka jangan lupa untuk menyertakan tags <script> ... </script>.

Dari contoh kode di atas, maka kita mengisi nilai 7000 kepada variable global Javascript yang bernama ew.autoHideSuccessMessageDelay. Nilai tersebut dalam satuan milidetik, yang artinya pesan sukses akan otomatis tertutup setelah 7 detik.

Perlu untuk diketahui, bahwa PHPMaker menggunakan Bootstrap Toast untuk menampilkan kotak pesan yang dapat otomatis tertutup setelah sekian detik. Nah, nilai delay tersebut harus dalam satuan milidetik.

Jadi, buat kalian yang mengaktifkan opsi UseMessageBoxInsteadOfToast pada Extension MasinoHeaderFooter25, maka pastikan untuk men-download ulang Masino Extensions for PHPMaker 2025, lalu timpa yang lama dengan versi terbaru ini, dan jangan lupa untuk men-generate ulang semua file script seperti biasa.

Mengapa kalian wajib men-download ulang Masino Extensions for PHPMaker 2025? Karena selama ini Penulis masih menggunakan nilai statis 5 detik untuk menutup otomatis pesan sukses yang menggunakan Alertify Javascript Library.

Sekarang kalian sudah bisa menggunakan kode di atas untuk mengubah nilai statis 5 detik tersebut, menjadi nilai berapa pun yang kalian inginkan. Itu artinya, sekarang Masino Extensions for PHPMaker 2025 pun sudah menggunakan nilai variable ew.autoHideSuccessMessageDelay.

O iya, jangan lupa, nilai di atas harus dalam satuan milidetik ya. Artinya, pastikan untuk mengalikan nilai detik dengan 1000, sebelum menugaskannya ke dalam variable ew.autoHideSuccessMessageDelay.

Satu perubahan kecil yang membawa dampak yang cukup signifikan.

Seperti yang sudah diketahui bersama, sampai dengan versi 2025, PHPMaker memberikan keleluasaan bagi Web Developer untuk memutuskan apakah ingin menggunakan control Combobox dengan tipe Select2 atau Native Select pada Field yang menampilkan beberapa opsi. Masing-masing jenis control tersebut memiliki kelebihan dan keterbatasan masing-masing.

Control Select2 sangat cocok untuk Field yang harus menampilkan data opsi yang berasal dari Lookup Table, dimana jumlah opsinya relatif banyak, serta memiliki potensi bertambah atau berkurang di masa yang akan datang. Dengan kata lain, data opsi di dalamnya bersifat dinamis.

Mengapa demikian? Karena control Select2 memiliki fitur Search yang memungkinkan Pengguna Akhir mengetikkan satu atau beberapa karakter, dan control tersebut akan otomatis menyaring dan menampilkan beberapa opsi yang mendekati karakter yang diketik tadi. Nah, fitur ini tidak ada di control Native Select.

Selain itu, karena data opsi yang berasal dari Lookup Table di Database tadi, maka control Select2 ini memiliki kemungkinan menampilkan data yang lebarnya sangat bervariasi. Mulai dari yang sangat kecil, sampai dengan yang sangat besar. Nah, karakteristik data dengan lebar dinamis seperti ini sangat cocok menggunakan control Select2.

Kebalikannya pada control Native Select. Control yang satu ini sangat cocok untuk Field yang hanya menampilkan sedikit opsi data yang biasanya tidak berasal dari Lookup Table, tapi cukup didefinisikan melalui fitur User Values di bagian Fields Setup dari project PHPMaker.

Karena sifatnya yang statis dan memiliki potensi data yang lebarnya tidak terlalu besar atau relatif kecil, maka control Native Select sangat cocok untuk kebutuhan ini.

Contoh kasus untuk control Native Select yang menampilkan sedikit data opsi statis, yang biasanya jumlahnya kurang dari 5, seperti Yes dan No, Pria dan Wanita, Bidding dan Winner, dan sejenis lainnya yang mirip dengan data tadi.

Karena jumlah opsi tersebut relatif sedikit, dan sekali lagi, memiliki kemungkinan bahwa lebar data tersebut tidak terlalu besar, maka kita perlu mengurangi lebar control Native Select tadi. Lantas, bagaimana cara mengurangi lebar control Combobox dengan tipe Native Select tersebut?

Jawabannya sangat mudah dan cepat, apalagi jika kita menggunakan PHPMaker 2025 untuk membuat aplikasi web.

Katakanlah di suatu table, kita memiliki field yang bernama Tipe_CBA, yang memiliki 2 opsi saja, yaitu BIDDING dan WINNER, dan kedua opsi ini telah kita definisikan lewat fitur User Values pada Fields setup di project PHPMaker 2025.

Maka, langkah pertama yang harus kita lakukan adalah cukup dengan menambahkan kode berikut ke dalam server event Page_Load pada halaman yang kita inginkan, seperti List Page, Search Page, Add Page, dan/atau Edit Page (sesuaikan dengan kebutuhan kalian):

$this->Tipe_CBA->setNativeSelect(true);

Arti dari kode di atas, kita mengubah jenis control yang digunakan field Tipe_CBA dari Select2 (yang default di-generate oleh PHPMaker), menjadi jenis control Native Select. Bayangkan, dengan satu baris kode itu saja, kita bisa memerintahkan PHPMaker untuk mengubah jenis control Combobox yang kita inginkan!

Langkah kedua, tambahkan kode ini ke bagian Custom attributes yang terdapat di Fields setup -> panel Edit Tag -> SELECT Tag untuk field Tipe_CBA tadi:

"style='min-width: 6em !important'"

Arti dari kode di atas, kita menambahkan CSS kode yang membatasi lebar minimal sebanyak 6em pada field Tipe_CBA. Dengan kata lain, hal ini akan mengurangi lebar control Native Select tadi menjadi lebih optimal, dan tidak mengikuti lebar minimal control Combobox dengan tipe Select2 yang secara default oleh PHPMaker menggunakan nilai 20em.

Langkah ketiga, generate ulang semua file script seperti biasa menggunakan PHPMaker 2025, lalu silahkan nikmati hasilnya dari aplikasi web yang dihasilkan tersebut.

Betapa mudah dan cepatnya, bukan? Bukan!

Hanya dengan dua langkah itu saja, kita sudah bisa mengurangi lebar control Combobox yang kita inginkan. Tidak hanya itu saja, kita menjadi bisa memilah-milah, mana saja Field yang cocok menggunakan tipe Native Select, dan mana yang perlu menggunakan tipe Select2.

Kesimpulannya: tidak semua field yang menampilkan beberapa opsi harus menggunakan control Combobox dengan tipe Select2. Ada kalanya kita harus mengubahnya ke control Combobox dengan tipe Native Select. Dengan menggunakan control Combobox tipe Native Select, maka kita bisa menghemat space pada Form di halaman yang bertalian, karena kita bisa mengatur lebar minimum melalui fitur Custom attributes untuk masing-masing Field yang bertalian.