Selamat buat kalian yang sudah menjadi member aktif di ILovePHPMaker.com, mulai hari ini sudah bisa mendapatkan beberapa file .xml berisi code Custom Template seperti yang Penulis uraikan pada artikel sebelumnya berjudul Generate Two Column Layout dalam Satu Detik dengan PHPMaker 2025.
Setelah melalui pertimbangan yang matang, Penulis memutuskan untuk memberikan secara cuma-cuma file-file .xml berisi kode Custom Template untuk men-generate Two Column Layout untuk halaman Add, Edit, View, Search, dan Extended Search, serta Master Record di halaman Master/Detail List, dengan satu syarat saja: sudah terdaftar sebagai member yang aktif di situs ILovePHPMaker.com.
Jadi, bisa dikatakan file-file .xml berisi kode untuk men-generate Two Column Layout melalui fitur Custom Template di PHPMaker 2025 sebagai bonus, karena sudah menggunakan Masino Extensions untuk PHPMaker 2025. Mengapa? Karena file-file .xml tersebut sengaja Penulis masukkan ke dalam file project Demo I Love PHPMaker, sekaligus untuk memudahkan mengetest-nya melalui project tadi.
Dibutuhkan waktu sekitar 25 hari sejak Penulis mencoba mengutak-atik kode Custom Template bawaan asli PHPMaker 2025, menjadi beberapa file .xml yang bisa dipilih oleh Web Developer dari dalam project PHPMaker 2025 untuk men-generate kode Two Column Layout.
Selama kurang lebih 25 hari tersebut, ada begitu banyak tantangan sekaligus pengalaman yang sangat berharga dalam mengeksplorasi fitur Custom Template, khususnya untuk PHPMaker 2025, versi terakhir saat ini. Tapi justru di situlah asyiknya menggunakan PHPMaker ini.
Hanya dari beberapa baris kode dan logic dasar yang disediakan oleh PHPMaker, akhirnya Penulis bisa kembangkan untuk menghasilkan Two Column Layout. Yang tadinya tidak mendukung Multi-Page, maka sekarang sudah mendukung Multi-Page.
Pertama, diawali dari Penulis melakukan improvisasi terhadap file-file .xml bawaan asli PHPMaker 2025 untuk men-generate Two Column Layout, agar dapat berfungsi sebagaimana mestinya, khususnya saat ditampilkan di perangkat dengan layar sempit seperti Mobile Phone atau Tablet, sehingga tetap mobile-friendly.
Kedua, selanjutnya Penulis menyediakan dua jenis direction (arah) layout, apakah ingin Top-Down atau Zig-Zag ke dalam file .xml yang terpisah. Kedua direction ini wajib disediakan, karena tidak semua mau menerapkan salah satunya saja, tergantung kondisi masing-masing. Mengenai kedua direction ini bisa kalian baca melalui artikel yang Penulis infokan pada alinea pertama di atas.
Ketiga, Penulis berhasil mengakomodir dua kebutuhan utama dalam mengimplementasikan Two Column Layout tadi, baik di table yang tidak menerapkan Multi-Page (Single Page), maupun di table yang menerapkan Multi-Page. Masing-masing dikombinasikan juga dengan kedua direction di atas, apakah Top-Down atau Zig-Zag.
Keempat, khusus untuk Multi-Page, ada dua kemungkinan yang Penulis tangani. Kemungkinan Pertama, jika ada field yang memiliki nilai 0 (nol) pada setting Page No. di bawah Fields setup -> General. Kemungkinan Kedua, jika tidak ada field yang memiliki nilai 0 pada setting tersebut. Nah, masing-masing kondisi tersebut memiliki karakteristik layout yang berbeda dan harus bisa ditangani oleh Custom Template yang Penulis buat.
Kelima, Penulis berhasil mengimplementasikan logic dasar untuk membagi dua bagian besar field-field yang akan dikelola, dimana jika jumlah field ganjil, maka jumlah field di sisi kiri harus lebih besar + 1 dibandingkan dengan jumlah field yang berada di sisi kanan.
Keenam, Penulis memisahkan logic antara halaman Add, Edit, View, dengan halaman Search dan List yang memiliki Extended Search. Artinya, untuk halaman Search dan Extended Search, tidak bisa mengimplementasikan layout yang persis sama dengan halaman Add, Edit dan View. Mengapa? Karena di halaman Search dan Extended Search tadi pasti memiliki elemen search operator yang harus menjadi satu kesatuan utuh yang tidak bisa dipisahkan antara kolom yang menampilkan label, dan kolom yang menampilkan data.
Ketujuh, semua poin-poin di atas tadi Penulis kembangkan, cukup dari kode Custom Template sederhana berikut yang sudah disediakan oleh PHPMaker 2025 seperti di bawah ini:
<div class="container">
<div class="row row-cols-<#= fieldsPerRow #>">
<# for (let f of fields) { #>
<div id="r_<#= f.FldParm #>" class="col">
<div class="row">
<label for="<#= f.FldVar #>" class="col-sm-3 col-form-label">{{{caption <#= f.FldParm #>}}}</label>
<div class="col-sm-9">{{{value <#= f.FldParm #>}}}</div>
</div>
</div>
<# } #>
</div>
</div>
Di balik kode sederhana tersebut, terdapat potensi besar yang akhirnya bisa Penulis kembangkan, sehingga dapat menghasilkan Two Column Layout yang sesuai dengan kebutuhan.
Sekarang kalian tidak perlu pusing-pusing memikirkan bagaimana caranya semua di atas tadi Penulis lakukan. Cukup gunakan file-file .xml berisi kode Custom Template tadi, yang dapat men-generate Two Column Layout, melalui antarmuka aplikasi PHPMaker 2025 dalam hitungan satu detik saja!
O iya, hanya ada satu keterbatasan (limitation), dan sangat penting untuk diketahui!
Sebelum menerapkan Two Column Layout untuk tabel-table yang mengaktifkan Multi-Page, maka pastikan semua field sudah disusun mulai dari urutan nomor paling rendah di bagian atas, sampai dengan field-field dengan urutan nomor halaman paling besar berada di bagian bawah, dari bagian Fields setup project PHPMaker 2025.
Mengapa? Karena logic kodenya menggunakan basis kode di atas, dengan cara melakukan looping mulai dari field pertama sampai terakhir di bagian Fields setup dari project PHPMaker 2025. Itu artinya, jika nomor halaman tidak urut, maka hasilnya menjadi tidak sesuai dengan yang diharapkan.
See? Betapa fleksibel dan powerful-nya PHPMaker 2025 kita gunakan sebagai tools Web Development yang bisa memangkas waktu development sampai 80 – 90%. Setelah Masino Extensions, sekarang ditambah lagi bonus untuk men-generate kode Custom Template untuk menghasilkan Two Column Layout pada form atau halaman tertentu.
Selebihnya, kita cukup fokus untuk mengimplementasikan business-logic di kisaran 20 – 10% saja. Coba bayangkan itu! Tidak menyesal rasanya menggunakan PHPMaker, apalagi di setiap versi terakhirnya yang semakin canggih.
Tinggalkan Balasan