Selama dua minggu terakhir, saya bersemangat sekali melakukan eksperimen untuk mengubah Template asli yang digunakan oleh PHPMaker. Apakah karena bosan melihat tampilan Aplikasi Web yang itu-itu saja, atau karena pernah melihat tampilan template Aplikasi Web yang “wah” dari Internet, atau bahkan apakah karena merasa tertantang untuk menerapkan tampilan yang “wah” tadi ke Aplikasi Web yang dihasilkan oleh PHPMaker.
Entahlah. Bisa jadi memang karena ketiga faktor tadi. Yang jelas, hal inilah yang membuat saya selalu antusias untuk bereksperimen saat menggunakan PHPMaker. Semata-mata bukan untuk menghasilkan Aplikasi Web saja, tapi bagaimana supaya PHPMaker dapat digunakan dengan lebih menyenangkan. Buktinya, bisa membuat hidup seorang Web Developer menjadi lebih bergairah dan semangat, hehehe…
Seperti yang kita ketahui, tampilan Aplikasi Web asli yang dihasilkan oleh PHPMaker sangatlah standar. Sebagian besar masih menggunakan komponen asli bawaan framework Twitter Bootstrap. Tampilan menu pun standar. Kalau tidak Vertical, ya Horizontal. Itu pun untuk menghasilkan menu Horizontal, maka kita harus menggunakan extension HorizontalMenu atau MasinoHorizontalVertical.
Dulu alasan saya membuat Masino Extensions adalah untuk menambahkan fitur-fitur baru, sekaligus mengubah fitur yang sudah ada. Selain itu, juga karena ingin mengubah tampilan standar Aplikasi Web yang dihasilkan oleh PHPMaker.
Seiring berjalannya waktu, banyak sekali fitur yang sudah ditambahkan ke dalam Masino Extensions. Jumlah extensions yang saya buat pun menjadi semakin banyak, dan cukup merepotkan juga untuk memperbarui extension yang menggunakan file yang sama yang terdapat di extension yang lain.
Aplikasi Web yang dihasilkan dengan menggunakan Masino Extensions menjadi lebih powerful, itu sudah jelas. Tapi, yang tidak dapat dipungkiri adalah, untuk mengubah pengaturan atau setting Aplikasi Web, seperti misalnya tema/warna, posisi menu, gaya lebar tabel, dan sebagainya, jumlah item pengaturan yang harus saya kelola pun menjadi semakin banyak.
Kondisi ini jugalah yang mengakibatkan di beberapa Aplikasi Web yang saya buat dengan PHPMaker menjadi kurang begitu bagus performansinya. Mengapa? Karena jika Aplikasi Web tersebut diakses oleh ratusan atau ribuan user pada waktu relatif bersamaan, maka akibatnya menjadi terasa lambat.
Setelah dianalisis ulang, ternyata karena sebagian besar item pengaturan tadi disimpan ke variabel session. Akibatnya, beban web server menjadi lumayan berat untuk mengelola nilai-nilai variabel session yang digunakan oleh ratusan atau ribuan End-User sekaligus.
Selain itu, di Masino Extensions tersedia juga pilihan untuk menyimpan nilai dari item pengaturan tadi ke dalam Database. Ini juga yang menyebabkan akses ke Database menjadi relatif besar. Meskipun di Masino Extensions juga memiliki pilihan untuk mengabaikan pemakaian nilai setting yang diambil dari Database, tapi hal ini sering tidak digunakan.
Berangkat dari semua kondisi itulah, membuat saya berpikir untuk mengubah konsep Aplikasi Web yang dihasilkan oleh PHPMaker. Dari yang tadinya terlalu banyak menggunakan variabel session, menjadi menggunakan sebagian besar Cookies di sisi browser Client.
Tidak itu saja. Ternyata perubahan ini pun membawa dampak baik yang sangat signifikan. Selain karena mengurangi pemakaian variabel session, tampilan Aplikasi Web-nya pun menjadi semakin bagus, modern, dan lebih eye-catching. Seperti keuntungan yang saling melengkapi. Sudah ringan, cantik pula tampilannya. Wah!
Pasti Anda penasaran kan? Oke kita mulai saja untuk me-review hal-hal apa saja yang baru atau berubah.
Pertama, yang paling beda adalah dari sisi Layout. Di konsep yang baru ini, sekarang Layout lebih disederhanakan menjadi hanya 2; yaitu apakah Fluid (layout dengan lebar layar penuh, di mana sisi-sisinya lengket ke paling kiri dan kanan layar), atau Boxed (layout yang mengecil dan fokus ke tengah layar). Jika di konsep yang lama, Fluid sama artinya dengan Auto dan 100%, sedangkan Boxed sama dengan Scrolling Table.
Selanjutnya, di bagian layout Sidebar Menu juga terjadi perubahan. Di konsep yang baru ini, semua item menu yang dihasilkan atau di-generate oleh PHPMaker akan selalu berada di posisi Sidebar. Bisa di sebelah kiri atau sebelah kanan (bisa dipindahkan dengan mudah).
Dalam hal ini kita tidak lagi menggunakan Menu Horizontal untuk menempatkan item menu yang di-generate oleh PHPMaker, karena cenderung tidak efektif apalagi jika jumlah Root Menu relatif banyak. Bisa Anda bayangkan jika item Root Menu semakin banyak, maka menu bar menjadi terdiri dari beberapa baris, sehingga akan memakan space di bagian atas, dan yang jelas, tidak begitu bagus dipandang.
Di konsep yang lama, meskipun posisi menu bisa dipindahkan ke atas (Horizontal) atau samping kiri/kanan (Vertical), tapi konsep ini belakangan tidaklah begitu menarik. Mengapa? Selain karena kita hanya bisa memilih salah satu posisi saja, juga karena alasan yang baru saya sebutkan di atas tadi.
Di konsep yang lama, jika menu tidak di atas, ya di samping. Harus pilih salah satu. Tidak bisa menggunakan kedua posisi sekaligus.
Nah, di konsep yang baru ini, menu Vertical dan Horizontal bisa sama-sama digunakan dalam satu kesempatan. Artinya, semua Item Menu yang dihasilkan oleh PHPMaker, akan selalu berada di samping kiri ATAU kanan sebagai Vertical Menu. Tergantung pengaturan yang dilakukan oleh End-User nantinya. Bahkan, Sidebar Menu bisa diperkecil lebarnya, sampai hanya menampilkan icon-nya saja. Mirip seperti Sidebar pada WordPress, atau persis seperti gaya Sidebar pada Visual Studio yang bisa di-pin atau unpin… Wow, keren kan? 🙂
Selain itu, posisi Menu di bagian bar atas atau yang tepat di bawah posisi Header, di konsep yang baru ini sekarang bisa diisi dengan menu yang dapat dikostumisasi sendiri oleh Web Developer. Contoh, kita sekarang bisa menampilkan icon foto End-User yang berhasil login, dan juga menampilkan sub-menu dropdown yang berisi link ke halaman Profil Pengguna dan link Logout.
Itu artinya, optimalisasi Menu di konsep yang baru ini bisa menggunakan menu Horizontal dan Vertical sekaligus, secara proporsional. Wow, mantap sekali, kan?
Khusus untuk Sidebar, di konsep yang baru ini tersedia beberapa item pengaturan. Pertama adalah Sidebar Mode, apakah Fixed atau Default. Fixed artinya, Sidebar akan lengket, tidak peduli dengan seberapa besar tinggi konten di sebelah kanannya. Sebaliknya, jika Default, maka Sidebar tidak akan lengket.
Lalu ada lagi Sidebar Menu, apakah ingin bergaya Hover atau Accordion. Jika Hover, maka kita dapat melihat item sub-menu yang berada di bawah suatu item menu induknya. Hal ini sangat berguna jika item menu parent juga memiliki link ke halaman tertentu. Sedangkan gaya Accordion efektif digunakan jika parent menu tidak memiliki link ke halaman apapun, sehingga End-User harus mengklik untuk dapat melihat item sub-menu di bawahnya.
Selanjutnya, Sidebar Style, apakah Default atau Light. Jika dipilih Default, maka item menu yang sedang terpilih akan tersorot (highlight) seluruhnya dengan warna yang berbeda dari item menu lainnya. Sedangkan jika dipilih Light, maka efek sorot hanya berada tipis di sebelah paling kiri.
Dan terakhir, Sidebar Position, apakah ingin di sebelah kiri atau kanan. Posisi Sidebar ini bisa dipindahkan dengan sangat mudah.
Selain itu, di konsep yang baru ini, End-User bisa mengatur atau menghasilkan Layout sesuai yang dia inginkan. Cukup dengan menggunakan beberapa kombinasi item setting yang melibatkan Header dengan nilai pengaturan Fixed atau Default, Footer dengan nilai Fixed atau Default, lalu dikombinasikan lagi dengan Sidebar Mode, Sidebar Menu, Sidebar Style, dan Sidebar Position.
Yang dimaksud dengan Header dan Footer Fixed maksudnya adalah, mereka bisa lengket di posisi mereka masing-masing. Kalau di konsep yang lama, hal ini dikenal masing-masing dengan Sticky Header dan Sticky Footer. Sebaliknya, jika pengaturan tersebut bernilai Default, maka Layout-nya tidak lengket di posisi atas dan bawah.
Untuk Theme/Warna di konsep yang baru, meskipun pilihannya tidak sebanyak di konsep yang lama, tapi sudah cukup mewakili selera End-User. Tersedia 6 (Enam) pilihan; dengan perbandingan 50:50 masing-masing untuk warna yang mewakili gelap dan terang. Setiap kali Pengguna Aplikasi Web memilih salah satu tema/warna, maka perubahan itu langsung diterapkan tanpa harus menghubungi server terlebih dulu.
Tidak hanya berhenti di situ saja, tersedia juga pilihan untuk mengubah tampilan sudut elemen. Mirip dengan konsep yang lama; yaitu apakah ingin menggunakan Rounded (Bootstrap Normal) atau Square (Bootstrap Flat). Cukup sekali klik, maka semua perubahan elemen langsung terjadi, lagi-lagi tanpa harus menghubungi server.
Kesimpulannya, semua perubahan setting tadi bisa dilakukan on-the-fly oleh End-User. Bahkan sebelum mereka login sekalipun! Hasilnya pun akan langsung kelihatan seketika itu juga. Sistem tidak perlu menghubungi server setiap kali ingin melihat perubahannya.
Hal ini bisa terjadi, karena di konsep yang baru ini semua nilai item pengaturan disimpan ke dalam Cookies pada sisi browser Client. Inilah alasan utama yang menyebabkan Aplikasi Web bisa menjadi lebih ringan dan terlihat menjadi lebih profesional. Bayangkan, berapa banyak variabel session yang bisa kita hilangkan!
Akhirnya, semua konsep baru ini saya bungkus ke dalam sebuah file Template PHPMaker yang super keren. Saya namakan dengan MasinoTemplate. Itu artinya, konsep pengembangan Aplikasi Web yang sebelumnya mengandalkan Masino Extensions, kini menjadi beralih dengan menggunakan hanya sebuah file Template PHPMaker. Di dalam Template ini sudah menyertakan hampir semua fitur-fitur yang terdapat pada Masino Extensions.
Alasan utama saya menggunakan konsep baru melalui Template daripada Extensions, adalah untuk memudahkan sekaligus menyederhanakan proses pengembangan saja. Apalagi selama ini jika ingin mengubah kode di suatu file yang digunakan oleh beberapa extension bikinan saya sekaligus, saya harus mengubah di beberapa extension lainnya. Jika konsep ini saya gunakan untuk bereksperimen dengan konsep template yang baru ini, maka hal itu sangat tidak efektif.
Tentu saja, ada beberapa extension yang saya buat masih kompatibel dengan MasinoTemplate. Sampai sejauh ini, Masino Extensions yang sudah saya coba kompatibel untuk Template PHPMaker baru ada dua, yaitu MasinoPreviewRow12 dan MasinoCaptcha12. Jadi, Anda tidak perlu menggunakan Masino Extensions yang lainnya jika menggunakan MasinoTemplate untuk PHPMaker ini, karena fitur-fitur di extension lainnya sudah saya masukkan ke dalam MasinoTemplate tersebut.
Anda juga tidak perlu lagi menggunakan extension ScrollingTable, CAPTCHA, HorizontalMenu, karena semua fitur yang terdapat di Extensions ini sudah saya masukkan secara standar ke dalam Template tadi.
Bahkan, saya juga sedang akan merencanakan untuk membuat sebuah extension tambahan untuk menyimpan nilai setting default konstanta terkait fitur-fitur baru yang saya tambahkan ke MasinoTemplate ini. Hal ini sangat bermanfaat untuk menyimpan nilai setting default, khususnya jika Anda memiliki beberapa project PHPMaker, dan nilai default untuk setiap project tadi berbeda-beda.
Sedangkan untuk extension bawaan PHPMaker lainnya yang masih bisa Anda gunakan bersama dengan Template ini adalah JSCalendar, DHTML Editor, PDF Export, Time Picker, PHPExcel, dan PHPWord.
Bayangkanlah sekarang konsep yang baru ini akan Anda gunakan untuk Aplikasi Web yang dihasilkan oleh PHPMaker. Di samping bisa membuat performansi Aplikasi Web menjadi lebih ringan, cepat, juga bisa mempercantik tampilan Aplikasi Web yang Anda bikin, sehingga tidak membosankan bagi Pengguna Akhir. Dan yang paling penting dari semuanya itu, proses pengembangan Aplikasi Web pun menjadi semakin lebih sederhana, mudah, cepat, dan lagi-lagi… menyenangkan!
Terakhir, Template PHPMaker yang super keren ini tidak saya share secara gratis kepada Anda. Ada begitu banyak pengorbanan waktu, tenaga, dan juga materi di dalamnya, ehm.
Pertama, bagaimana saya harus bisa mengintegrasikan menu yang dihasilkan oleh PHPMaker supaya dapat ditampilkan sebagaimana mestinya di Template ini. Bagaimana saya harus memindahkan sedemikian banyaknya fitur-fitur dari Masino Extensions ke dalam Masino Template. Bagaimana saya harus memilah-milah Masino Extension yang harus kompatibel dengan MasinoTemplate. Bagaimana saya harus mencoba dan memastikan segala sesuatunya berjalan dengan lancar.
Sebagai bocoran, Template PHPMaker ini akan saya jual hanya kepada Anda yang berminat saja. Cukup dengan USD 450, Anda bisa memiliki Template PHPMaker ini. Jangan katakan harga ini terlalu mahal kalau Anda sendiri tidak bisa membuatnya.
Sedikit tips dari saya, jika Anda menilai sesuatu itu apakah mahal atau wajar, cukup bertanya kepada diri sendiri, seperti ini: “Jika saya dikasih duit segitu, bisa nggak saya membuatnya?” Jadi, harap maklum ya. Bersiap-siaplah menabung dari sekarang jika Anda benar-benar serius dan berminat menggunakannya.
Penasaran ingin lihat demo Aplikasi Web yang dihasilkan oleh Masino Template? Klik di sini!.
Lihat videonya di bawah ini bagaimana mudah, cepat, dan menyenangkannya Anda bisa menghasilkan Aplikasi Web menggunakan PHPMaker dan MasinoTemplate12.
Bagus mas…template nya….saya tertarik dengan template tsb….bagaimana cara mendapatkannya mas….bisa kontak langsung kah mas
Terima kasih. Bisa, ke email masino [dot] sinaga [at] gmail [dot] com.
Adakah template yg free Pak?
Sepertinya tidak ada, kecuali template bawaan PHPMaker.
Saya pemula, bisakah tampilan bawaan php maker dirubah? Misalkan ditambahkan gambar di header/footer, bagaimana caranya? Terimakasih.
Bisa. Caranya, Anda bisa menggunakan Masino Extensions jika ingin menambahkan gambar di bagian Header. Kalau di bagian Footer, Anda bisa menggunakan kode jQuery dan taruh di bagian Startup Script di bawah Client Scripts -> Global -> Pages with header/footer.