File Javascript Berisi Client Side Event Sekarang Otomatis Dimuat di PHPMaker 2020

Seperti yang kita ketahui, aplikasi web yang dihasilkan oleh PHPMaker sampai dengan versi 2020 belum mendukung penggunaan versi yang ditambahkan di belakang file-file .css dan .js. Akibatnya, apabila ada kode style atau kode Javascript yang kita (sebagai Web Developer) tambahkan di file-file tersebut, maka Pengguna Akhir belum tentu dapat merasakan secara langsung perubahan tadi.

Sekalipun file-file .css dan .js tadi sudah kita upload ke web server, mereka harus terlebih dulu melakukan hard-refresh atau hard-reload dengan cara memuat ulang file-file .css dan/atau .js tersebut secara eksplisit. Mengapa? Karena file-file .css dan/atau .js yang kontennya sudah berubah tadi tidak bisa otomatis dimuat oleh browser.

Browser masih menggunakan versi yang lama. Browser tidak dapat mengenali apakah konten file tersebut berubah atau tidak, karena tidak ada penandanya. Biasanya, mereka harus melakukan View Page Source dari browser, lalu mengklik link ke file .css atau .js.

Sayangnya, tidak semua file-file .css dan .js tadi menampilkan link ke filenya. Ada juga kode seperti ini yang dihasilkan oleh PHPMaker:

// User event handlers
ew.ready(ew.bundleIds, "js/userevt.js", "load", function() {

	// Global startup script
	// Write your global startup script here
	// console.log("page loaded");

});

Perhatikan kode js/userevt.js. Di sana tidak ada link ketika kita melihatnya melalui menu View Page Source di browser. Untuk memuatnya, kita harus meng-copy paste alamat tersebut ke browser dengan menambahkan awalan berupa alamat domain ke aplikasi web-nya, sehingga menjadi kira-kira seperti ini:

http://localhost/demo2020/js/userevt.js

Bayangkan, ada berapa banyak file .css dan .js yang digunakan oleh aplikasi web yang dibangkitkan oleh PHPMaker tadi? Apakah wajar jika Pengguna Akhir harus melakukan hal-hal seperti itu? Atau paling tidak, apa iya kita harus selalu menginstruksikan mereka untuk melakukan hal tadi?

Untuk itulah sudah saatnya setiap file-file .css dan .js yang digunakan oleh Aplikasi Web harus menggunakan versi file. Caranya, cukup menambahkan versi file setelah nama filenya. Jadi, ketika konten file tersebut berubah, maka sistem akan otomatis mengganti versi file tersebut. Browser yang digunakan oleh Pengguna Akhir pun akan otomatis memuat ulang file-file dengan versi yang baru tadi.

Supaya Anda tidak bingung, mari kita lihat lagi salah satu contoh penggunaan file .css yang terdapat di bagian Header dari aplikasi web yang dihasilkan oleh PHPMaker 2020:

<link rel="stylesheet" type="text/css" href="css/demo2020.css">

Perhatikanlah kode di atas. Di sana tidak terdapat versi dari file demo2020.css.

Seharusnya, supaya browser yang digunakan oleh Pengguna Akhir dapat otomatis men-download ulang file .css yang baru yang berisi perubahan tadi, maka kita harus menambahkan versi setelah nama file tersebut, seperti di bawah ini:

<link rel="stylesheet" type="text/css" href="css/demo2020.css?v=1585131820">

Nah, sudah tahu sekarang perbedaannya? Di kode terakhir, sistem menambahkan versi setelah nama file-nya, dengan menambahkan parameter v (singkatan dari versi), lalu karakter = (sama dengan), dan diikuti dengan nomor versinya.

Untuk mengatasi permasalahan tersebut, penggunaan Extensions adalah solusi yang paling mudah dan cepat. Dengan membuat Extensions, kita dapat menambahkan fitur-fitur baru yang belum tersedia di PHPMaker. Tidak itu saja, lebih detail dan teknis lagi, kita bisa mengubah atau menyesuaikan kode yang ada di file template PHPMaker, melalui pemakaian Extensions di dalam project PHPMaker.

Beruntunglah Anda yang selama ini sudah menggunakan Masino Extensions untuk PHPMaker 2020. Mengapa? Karena Masino Extensions sudah memikirkan hal ini sejak di beberapa versi major PHPMaker sebelumnya. Termasuk pada Masino Extensions untuk PHPMaker 2020. Sebagian besar file-file .css dan .js sudah otomatis ditambahkan versi.

Dengan cara ini, maka Pengguna Akhir aplikasi web Anda tidak perlu lagi diperintahkan untuk memuat ulang file-file .css dan/atau .js tadi, supaya dapat merasakan perubahan kode yang sudah Anda tambahkan ke dalamnya. Mereka akan langsung merasakan perubahan tersebut ketika mereka mengakses kembali aplikasi web tersebut.

Meskipun Masino Extensions sudah otomatis menambahkan versi file pada sebagian besar file-file .css dan .js yang digunakan oleh Aplikasi Web yang dihasilkan oleh PHPMaker, sekitar dua hari yang lalu saya baru menyadari, bahwa ada satu file .js yang belum menggunakan versi file.

File apa itu? File userevt.js yang berada di dalam sub-folder js di bawah root folder aplikasi web Anda. Hal ini baru saya sadari, ketika saya menambahkan kode Javascript ke dalam property Client side events yang terdapat di Fields setup -> panel Edit Tag. Setelah semua file script saya generate ulang, kenapa aplikasi web-nya seolah tidak mengenali kode yang sudah saya tambahkan tadi ya?

Sebagai informasi buat Anda, kode Javascript yang kita tambahkan dari property Client side events tadi, akan ditempatkan oleh PHPMaker 2020 ke dalam file js/userevt.js. Jadi, file ini sebaiknya harus otomatis bisa dimuat oleh sistem ketika Pengguna Akhir mengakses aplikasi web yang dihasilkan oleh PHPMaker. Tapi sayangnya PHPMaker belum menangani hal ini.

Kembali ke topik. Setelah saya cek ulang link ke file tersebut dari kode HTML aplikasi web yang bertalian, ternyata di sana belum ada versi file-nya. Itulah penyebab mengapa browser belum secara otomatis mengenali kode Javascript yang sudah saya tambahkan tadi.

Melihat kondisi ini, maka tanpa perlu berlama-lama lagi, langsung saya menyesuaikan kode yang terkait dari Masino Extensions untuk PHPMaker 2020. Lalu, setelah saya generate ulang semua file script seperti biasa, saya mencoba kembali dari Aplikasi Web yang dihasilkannya. Tarraaaaa! Sekarang saya dapat langsung merasakan perubahannya.

Itu artinya, sekarang Masino Extensions sudah otomatis menambahkan versi file userevt.js. Versi tersebut akan dibaca dari tanggal dan jam dari file tersebut terakhir diubah.

Dari contoh di atas, maka kode untuk file userevt.js tadi menjadi seperti berikut ini:

// User event handlers
ew.ready(ew.bundleIds, "js/userevt.js?v=1585293460", "load", function() {

	// Global startup script
	// Write your global startup script here
	// console.log("page loaded");

});

Sekarang, Pengguna Akhir tidak perlu lagi melakukan hard-refresh atau hard-reload dari browser, supaya dapat merasakan perubahan kode di file userevt.js tadi. Browser akan otomatis memuat file userevt.js tersebut ketika mengenali versi file yang terbaru. Sudah saatnya kita memanjakan Pengguna Akhir aplikasi web.

Bagi Anda yang sudah berlangganan di situs ILovePHPMaker.com, silahkan download ulang file Masino Extensions untuk PHPMaker 2020. Setelah di-download, extract file-file .zip dan .xml yang ada di dalamnya, lalu copy paste ke dalam sub-folder extensions yang terdapat di bawah folder instalasi PHPMaker 2020 Anda.

Setelah itu, pastikan Anda sudah men-generate ulang semua file script dari PHPMaker 2020. Biarkan sistem yang bekerja untuk Anda saat ini. Saat proses generate berlangsung, kita sebagai Web Developer masih sempat ambil minum, ke toilet, atau gerak badan sejenak. Coba, kurang enak apa lagi bekerja menggunakan PHPMaker dan Masino Extensions?

Anda sebagai Web Developer tidak perlu lagi pusing-pusing untuk mengatasi permasalahan sepele, tapi dampaknya cukup besar tadi. Semuanya sudah ditangani oleh Masino Extensions untuk PHPMaker 2020. Tinggal generate ulang, dan semuanya sudah otomatis menyesuaikan.

Hehe, masih bertahan dengan cara-cara manual atau konvensional dalam membuat Aplikasi Web? Hohoho… 😀