MasinoLoader11, Free Extension PHPMaker 11 untuk Status Loading Halaman

Seperti yang sudah kita ketahui bersama, PHPMaker sangatlah fleksibel digunakan untuk membangun Aplikasi Web. Anda sebagai Web Developer diberi kesempatan untuk membuat Extension sendiri, lalu menggunakannya di project PHPMaker. Biasanya sebuah Extension dibuat jika ada kebutuhan untuk mengimplementasikan fitur yang bersifat umum, dan sering digunakan secara berulang-ulang pada hampir semua Aplikasi Web.

Meskipun sebenarnya kebutuhan tadi bisa diatasi dengan hanya menulis sedikit kode saja pada bagian Server Events dan Client Scripts, membuat Extension di PHPMaker adalah salah satu kegiatan yang sangat mengasyikkan sekaligus menantang. Betapa tidak, karena dengan mulai membiasakan diri membuat Extension, Anda akan dilatih untuk memahami dan mempelajari bagaimana konsep dan cara kerja PHPMaker dalam men-generate file script untuk Aplikasi Web Anda.

Salah satu Extension PHPMaker (dari sekian banyaknya Extension yang sudah berhasil saya buat) adalah MasinoLoader11. Dari namanya saja, mungkin di antara Anda ada yang sudah tahu apa fungsinya. Iya betul! Extension ini berfungsi untuk menampilkan status loading ketika sebuah halaman sedang dimuat dan ditampilkan pada Aplikasi Web. O iya, Extension ini juga dibuat khusus untuk PHPMaker versi major 11. Jadi, jangan coba-coba menggunakannya untuk PHPMaker versi major lainnya.

Extension MasinoLoader11 saya buat karena dilatarbelakangi sekaligus terinspirasi oleh website demo PHPMaker dari Cak Sobri. Ketika sebuah halaman sedang ditampilkan, maka akan muncul indikator proses dalam bentuk lingkaran yang berputar searah jarum jam, dan indikator ini akan hilang dengan efek fadeOut dalam waktu 1 detik dan pada saat yang sama konten halaman akan ditampilkan dengan efek fadeIn. Simpel sekali memang, tapi cukup elegan.

Tapi sayangnya di website demo tadi ada sedikit kekurangan. Jika halaman yang sedang ditampilkan dibungkus dalam jendela Modal, yang dalam hal ini salah satu contoh pengimplementasiannya adalah halaman Pencarian Lanjutan (Advanced Search), maka indikator tadi tidak akan pernah berhenti alias berjalan terus. Penyebabnya karena kode untuk menghentikan loader setelah sebuah halaman selesai dimuat ditempatkan di bagian footer yang sifatnya global. Sementara jika ingin menghentikan per halaman tertentu, harus menempatkan kode di halaman tersebut.

Melihat kondisi tersebut, mendorong saya untuk melakukan improvisasi, sekaligus mengemasnya ke dalam bentuk Extension. Solusi yang saya lakukan untuk saat ini memang sangatlah sederhana, yaitu dengan melakukan pemeriksaan ID Halaman yang ditampilkan. Jika ID Halaman adalah search yang berarti halaman Advanced Search, maka loader akan langsung dihentikan alias tidak dimunculkan. Itulah mengapa di setiap proses saat menampilkan halaman Pencarian Lanjutan, Anda tidak akan melihat status loader tadi.

Hal lain mengenai Extension MasinoLoader11 yang perlu Anda ketahui adalah, tersedia beberapa item pengaturan untuk menentukan posisi atas (Top) dan kiri (Left) dari jendela yang menampilkan status loader tadi; baik untuk menu Horizontal (TopPositionHorizontalMenu dan LeftPositionHorizontalMenu) maupun untuk menu Vertical (TopPositionVerticalMenu dan LeftPositionVerticalMenu).

Masing-masing nilai default dari keempat item pengaturan ini adalah 0, yang artinya seluruh area jendela Aplikasi Web Anda akan terlihat tertutup/menghilang saat indikator loader ditampilkan. Meskipun demikian, Anda bisa menentukan nilai lainnya, sehingga area Header dan/atau Menu di sebelah kiri (jika menggunakan Menu Vertical) tidak akan ikut tertutup. Dengan cara ini, maka seolah-olah hanya area yang menampilkan Data saja yang akan terlihat dimuat ulang (mirip efek pemunculan AJAX).

Selain itu, Anda juga bisa menentukan warna latar belakang tempat loader tadi ditampilkan dalam tiga item pengaturan RGB, masing BackgroundRedColor, BackgroundGreenColor, dan BackgroundBlueColor. Nilai default ketiga item ini masing-masing 255, yang artinya warna background adalah putih. Tentu saja Anda pun bisa mengganti nilai tersebut sesuai keinginan Anda.

Baiklah, jika Anda sudah tidak sabar untuk menggunakan Extension ini di project PHPMaker Anda, silahkan download dengan mengklik tombol berikut:

Setelah berhasil Anda download, extract file .zip tersebut. Di dalamnya ada dua file, yaitu file masino-loader-11.xml dan file masino-loader-11.zip. Copy-kan kedua file tersebut ke dalam sub-folder C:\Program Files\PHPMaker 11\extensions, lalu buka project PHPMaker Anda dengan menggunakan PHPMaker, dan aktifkan Extension yang bernama MasinoLoader11 dari menu Tools -> Extensions -> Type: Loading Status -> MasinoLoader11.

Anda bisa melihat beberapa item pengaturan yang sudah dijelaskan di atas tadi dari tab Advanced dari jendela Extensions – MasinoLoader11. Jika Anda ingin langsung men-generate file script, klik tombol OK, lalu generate file script dengan menggunakan PHPMaker seperti biasa.

Mudah sekali menggunakan Extension di PHPMaker, bukan? Tinggal mengaktifkannya saja, lalu pastikan Anda men-generate ulang file script dari PHPMaker.

Semoga bermanfaat, ya! 😀