Salah satu fitur unggulan di PHPMaker adalah Custom Templates. Melalui fitur ini, kita dapat mengubah layout di suatu halaman tertentu sesuai dengan keinginan.
Hal ini sekaligus menjawab pertanyaan atau anggapan sebagian besar orang yang menganggap tools code generator seperti PHPMaker sifatnya kaku atau tidak fleksibel jika ingin mengubah layout di suatu halaman.
Katakanlah kita ingin mengubah layout form di halaman Add dan Edit dari yang selama ini hanya terdiri dari 1 kolom menjadi 2 kolom pada table orderdetails di project demo2022.
Cukup dengan memasukkan kode ini ke bagian CustomTemplate di bawah lokasi Custom Templates -> Table-Specific -> Add Page dan Custom Templates -> Table-Specific -> Edit Page.
<div class="row">
<div class="col-md-6">
<div id="r_OrderID" class="row">
<label id="elh_orderdetails_OrderID" for="x_OrderID" class="col-md-3 col-sm-3 col-form-label ew-label">
{{{caption OrderID}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
<div class="col-md-9 col-sm-9">{{{value OrderID}}}</div>
</div>
<div id="r_ProductID" class="row">
<label id="elh_orderdetails_ProductID" for="x_ProductID" class="col-md-3 col-sm-3 col-form-label ew-label">
{{{caption ProductID}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
<div class="col-md-9 col-sm-9">{{{value ProductID}}}</div>
</div>
<div id="r_UnitPrice" class="row">
<label id="elh_orderdetails_UnitPrice" for="x_UnitPrice" class="col-md-3 col-sm-3 col-form-label ew-label">
{{{caption UnitPrice}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
<div class="col-md-9 col-sm-9">{{{value UnitPrice}}}</div>
</div>
</div>
<div class="col-md-6">
<div id="r_Quantity" class="row">
<label id="elh_orderdetails_Quantity" for="x_Quantity" class="col-md-3 col-sm-3 col-form-label ew-label">
{{{caption Quantity}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
<div class="col-md-9 col-sm-9">{{{value Quantity}}}</div>
</div>
<div id="r_Discount" class="row">
<label id="elh_orderdetails_Discount" for="x_Discount" class="col-md-3 col-sm-3 col-form-label ew-label">
{{{caption Discount}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
<div class="col-md-9 col-sm-9">{{{value Discount}}}</div>
</div>
<div id="r_SubTotal" class="row">
<label id="elh_orderdetails_Discount" for="x_SubTotal" class="col-md-3 col-sm-3 col-form-label ew-label">
{{{caption SubTotal}}}</label>
<div class="col-md-9 col-sm-9">{{{value SubTotal}}}</div>
</div>
</div>
</div>
Kode di atas artinya kita membuat 3 field di kolom pertama (OrderID, ProductID, dan UnitPrice), dan 3 field selanjutnya di kolom kedua (Quantity, Discount, dan SubTotal).
Kita menggunakan class row untuk membuat baris baru, dan class col-md-6 untuk masing-masing kolom pertama dan kedua.
Dengan kode di atas, maka urutan entri data dimulai dari field teratas sampai terbawah pada kolom pertama, dilanjutkan dengan field teratas sampai terbawah pada kolom kedua.
Hanya dengan sedikit kode itu saja, kita sudah dapat mengubah layout di halaman Add dan Edit dari Aplikasi Web yang dihasilkan oleh PHPMaker 2022.
Tidak perlu menulis kode sampai beratus-ratus baris untuk membuat fungsi CRUD di halaman Add dan Edit, karena selain kode di atas tadi, sudah ditangani oleh PHPMaker 2022. Cukup generate ulang semua file script, lalu nikmati hasilnya dari browser.
Kurang apalagi coba kerennya PHPMaker itu? Hohoho… 😀
Horas Bang Naga.
Ya emang keren PHPMaker.
Mau nanya Bang, saya mau bikin jarak antar field saat Edit, tidak terlalu jauh.
Saya coba cari style class div di edit styles theme template, tidak ketemu.
Itu ada di bagian mana ya Bang?
Btw, saya mau coba yang 2 kolom 1 page, tapi nanti di mobile browser gimana Bang?
Terima kasih banyak Bang.
Tinggal sesuaikan kolom kiri dari 3 ke 4, dan kolom kanan dari 9 ke 8, misalnya.
Kalau ditampilkan di mobile browser, seharusnya otomatis menjadi satu kolom semuanya.
Maksih Bang.
Untuk yang div style gimana Bang?
Maksudnya div style apa ya? Kode di atas kan sudah pakai div, tapi tanpa style. Dia memanfaatkan css class yang sudah tersedia di Bootstrap 5.
Jadi gini Bang.
Ketika mode Edit, muncul field-field tersusun ke bawah.
Antar field itu ada jarak. Kalau diinspect, mereka dipisah menggunakan div.
Yang ingin saya tanyakan, adakah cara mengatur jarak field tersebut di template style?
Terima kasih.
Sepertinya ada, tapi saya belum eksplorasi sampai sejauh itu. Dicoba sendiri saja mas, semoga berhasil.