Satu lagi fitur yang membuktikan betapa fleksibelnya PHPMaker untuk membangun Aplikasi Web adalah Custom Templates. Melalui fitur ini, kita sebagai Web Developer dapat mengubah layout standar di sebuah halaman yang dihasilkan oleh PHPMaker sesuai kebutuhan.
Fitur ini juga sekaligus menjawab pertanyaan yang sering kali dilontarkan oleh mereka yang men-judge PHPMaker adalah tools yang kaku. Masih banyak Web Developer yang menyimpulkan sendiri bahwa tampilan atau layout Field yang telah dihasilkan tidak dapat diubah. Ini merupakan salah satu mitos tools code generator.
Untuk membuktikan bahwa mitos tersebut adalah salah, maka berikut ini kita akan mengubah layout Form yang secara standar hanya terdiri dari satu kolom, menjadi dua kolom. Perubahan bisa kita lakukan tanpa harus mengubah kode di file script yang telah dihasilkan oleh PHPMaker. Perubahan cukup kita lakukan dari dalam project PHPMaker, dengan cara hanya menambahkan sedikit kode HTML saja.
Katakanlah kita akan mengubah layout Field di form atau halaman Add dari table sample, yang tadinya hanya satu kolom menjadi dua kolom. Kita asumsikan bahwa ada 5 Field (Field_One, Field_Two, Field_Three, Field_Four, dan Field_Five) yang tadinya berada di satu kolom yang sama, akan kita ubah menjadi 3 Field (Field_One, Field_Two, dan Field_Three) di kolom kiri, dan 2 Field sisanya (Field_Four dan Field_Five) di kolom kanan.
Untuk itu, pastikan Anda memilih salah satu object Table atau View sample tersebut di panel Database, lalu klik tab Code (Server Events, Client Scripts and Custom Templates), kemudian salin kode berikut ke dalam lokasi Custom Templates -> Table-Specific -> Add/Copy Page -> Custom Template:
<div id="ct_sample_add">
<div class="ewRow">
<div class="panel panel-default">
<div class="panel-heading"><strong>Form</strong></div>
<div class="panel-body">
<div class="col-lg-6 col-md-6 col-sm-6">
<div id="r_Field_One" class="form-group">
<label id="elh_sample_Field_One" for="x_Field_One" class="col-sm-2 control-label ewLabel">
{{{caption Field_One}}}</label>
<div class="col-sm-4">{{{value Field_One}}}</div>
</div>
<div id="r_Field_Two" class="form-group">
<label id="elh_sample_Field_Two" for="x_Field_Two" class="col-sm-2 control-label ewLabel">
{{{caption Field_Two}}}</label>
<div class="col-sm-4">{{{value Field_Two}}}</div>
</div>
<div id="r_Field_Three" class="form-group">
<label id="elh_sample_Field_Three" for="x_Field_Three" class="col-sm-2 control-label ewLabel">
{{{caption Field_Three}}}</label>
<div class="col-sm-4">{{{value Field_Three}}}</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div id="r_Field_Four" class="form-group">
<label id="elh_sample_Field_Four" for="x_Field_Four" class="col-sm-2 control-label ewLabel">
{{{caption Field_Four}}}</label>
<div class="col-sm-4">{{{value Field_Four}}}</div>
</div>
<div id="r_Field_Five" class="form-group">
<label id="elh_sample_Field_Five" for="x_Field_Five" class="col-sm-2 control-label ewLabel">
{{{caption Field_Five}}}</label>
<div class="col-sm-4">{{{value Field_Five}}}</div>
</div>
</div>
</div>
</div>
</div>
Perhatikanlah kode di atas. Kita menggunakan panel bawaan Twitter Bootstrap 3 untuk membungkus semua elemen di Form Add tersebut. Untuk menampilkan caption atau label setiap elemen, maka kita menggunakan {{{caption <NamaField>}}}, sedangkan untuk menampilkan control input yang bertalian, maka kita cukup menggunakan {{{value <NamaField>}}}.
Karena kode di atas dicoba di PHPMaker 11 yang sudah mendukung Twitter Bootstrap 3 dengan jargonnya mobile first itu, maka layout dua kolom ini akan otomatis berubah menjadi satu kolom di perangkat mobile yang memiliki lebar layar relatif sempit. Itu artinya, kode di atas mendukung mobile responsive design.
Enaknya lagi, kode tersebut ditaruh di dalam project PHPMaker. Artinya, perubahan ini bisa disesuaikan kembali di masa mendatang cukup dengan cara memuat terlebih dulu file project tersebut dari PHPMaker. Sebagai Web Developer kita juga dapat mempelajari hanya beberapa baris kode itu saja, tanpa harus menulis kode yang demikian panjang sampai beratus-ratus atau bahkan beribu-ribu baris seperti yang selama ini masih Anda lakukan.
Satu hal yang bisa kita simpulkan dari fitur ini adalah, bahwa PHPMaker sebenarnya sudah mendukung konsep View pada MVC; dengan caranya sendiri. Sedangkan untuk Model, PHPMaker mengekstrak object Tables dan Views dari Database, dan untuk Controller, PHPMaker menyediakan fitur Server Events dan Client Scripts.
Betapa mudah, cepat, dan keren sekali, bukan? Diam-diam ternyata PHPMaker sudah menyediakan fitur yang luar biasa flexible sekaligus powerful-nya ini! 😀
Keren om, tapi tombol simpannya terlalu ke tengah, ditambahin kode apa ya biar ke pinggir ?
Cukup tambahkan kode ini ke dalam Startup Script di bawah Client Scripts -> Table-Specific -> Add/Copy Page:
$(document).ready(function() { $("div.col-sm-offset-2").removeClass("col-sm-offset-2 col-sm-10"); });Oke thank u om..
Sama-sama.
saya sudah coba artikel diatas, tapi kok di Kolom ‘Label’ / teks malah menjadi dua baris ya.(bahkan kalo label nya tiga kata menjadi tiga baris)
jadi misal Label NIM Mahasiswa : berubah menjadi :
NIM :
Mahasiswa
bagaimana cara merubah size ‘Kolom pertama’ pada label.
o, iya fitur Multi Tab nya juga tidaj berfungsi,
Perbesar nilai class col-sm-2 misalnya menjadi col-sm-5.
Selalu gunakan karakter titik dua tanpa dipisahkan spasi dengan kata sebelumnya.
Contoh yang benar: Nama Mahasiswa:
Contoh yang salah: Nama Mahasiswa :
Untuk Multi-Tab atau Multi-Page, lihat kode pada Example 2 di dalam topik Custom Templates dari menu Help PHPMaker.
Oke Pak Masino Trimakasih… untuk lebar kolom sudah berhasil.
untuk Multi Tab lagi saya Pelajari dulu Pak, Trimakasih…
kok tutorial diatas saya coba di PHP Maker 12 tidak muncul apa-apa ya… (kosong) hanya muncul tombol SAVE dan CANCEl.
apa ada perubahan jika di PHP Maker 12 ya Pak ?
Bisa kok, barusan saya coba di versi 12.0.7, lancar jaya tuh. 🙂
Mantap pak..
..trus Bila nama field diatas kolom gimana caranya pak
Tinggal disesuaikan saja class-nya. Silahkan dicoba sendiri ya.
Sebenarnya kode di atas akan menyebabkan nama field berada di atas field-nya jika ukuran lebar jendela browser diperkecil, atau jika ditampilkan di perangkat mobile yang layarnya sempit, seperti handphone.
Trims. pak……sy coba sempitkan layar nya jd mengecil dan diatas nama fieldnya….mantap jg php maker ya…
Hehehe… baru tau ya? 😉
saya mencoba di mode EDIT… Gak jalan pak… layarnya cm kosong hanya ada breadcrumb dan Save/Cancel
Barusan saya test ulang untuk Edit Page, dan hasilnya berfungsi sebagaimana mestinya.
Pak saya mau tanya. saya ingin membuat project untuk latihan. jadi dalam satu tabel ada field total jam kerja. Asumsinya, saya sudah memasukan data data jam kerja saya. dan saya ingin terdapat tombol yang bisa menghitung total jam kerja yang telah saya inputkan. kira2 bisa tidak?
Bisa.
selamat pagi pak masino, saya mau bertanya : sya mencoba membuat layout 2 kolom menggunakan custom template tetatpi ggal ketika generate script .. pesan error nya seperti ini:
“ReferenceError: sSpanId is not defined
at Object.GetCustomViewTemplate (C:\Program Files (x86)\PHPMaker 2017\node\node_modules\phpmaker\phpmaker.js:9:10274)
at Object.FieldViewCall (C:\Program Files (x86)\PHPMaker 2017\node\node_modules\phpmaker\phpmaker.js:12:5716)
at Object.FieldEditCall (C:\Program Files (x86)\PHPMaker 2017\node\node_modules\phpmaker\phpmaker.js:12:26331)
at Object.FieldEdit (C:\Program Files (x86)\PHPMaker 2017\node\node_modules\phpmaker\phpmaker.js:12:15267)
at ewExedit (C:\Users\Administrator\Documents\PHPMaker\Templates\phpv20170\cache\edit_table.js:7995:29)
at generateFile (C:\Users\Administrator\Documents\PHPMaker\Templates\phpv20170\cache\eklaim.js:46:52)
at Object. (C:\Users\Administrator\Documents\PHPMaker\Templates\phpv20170\cache\eklaim.js:226:1)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
” ini kenapa dan solusinya apa ya pak,mhon pencerahan terimakash
phpmaker versi yang saya gunakan versi 12.0.7
Bagaimana saya tahu solusinya, kalau saya tidak tahu kode yang Anda tulis seperti apa? 😛
ini scrip saya pak masino 🙂 : “http://textuploader.com/dra1m”.
mohon bantunnya,
ralat phpmaker saya yang v2017.0.7 bukan 12.07
Karena Anda menggunakan script yang menggunakan tag
, maka pastikan di bagian CustomTemplateHeader and CustomTemplateFooter sudah memiliki
dan
masing-masing, dan pastikan juga ada tag
and
di template tersebut.
oke pak masino, sangat membantu,
saya membuat custom tempalate di edit Client Event CutomTemplate–>TableSpecifik–> Editpage–>customtemplate
sedangkan pilihan CustomTemplateHeader dan CustomTemplatefooter hanya ada di delete page dan list page,
dimanakah saya harus menuliskan CustomTemplateHeader dan CustomTemplateFooternya?
Kalau di halaman Edit, memang tidak ada CustomTemplateHeader dan CustomTemplateFooter.
Itu artinya, Anda tidak bisa menggunakan tag table, tr, dan td. Sebagai gantinya, gunakan tag div untuk membuat elemen di Custom Template-nya.
Wah bagus sekali pak, saya puas dengan tampilannya.. Cuma sayangnya saat menambahkan foto pada dua kolom seperti ini menyebabkan tombol “delete” nya tumpang tindih dengan kolom di sebelahnya sehingga kita tidak bisa mengklik tombol delete tersebut. Apakah bisa tombol deletenya di pindahkan kebawah image previewnya, atau ada cara lain untuk mengakalinya?
Tombol Delete? Di artikel ini tidak membahas adanya tombol Delete di form Add.
Pak admin, boleh saya minta email dan nomer telepon / WA kah?
Sudah saya kirim ke email Anda.
Malam Pak Masino,
Mau nanya, saya masih belajar dengan PHPMaker Pak, saya sudah mempraktekkan apa yang bapak tulis diatas, dan hasilnya WWWWOOOOWWWW EMEZING!!!
lalu saya mencoba menerapkan custom tempate pada project saya dan berhasil pula.
tapi….
waktu saya coba export project saya ke Word & Excel itu loadingnya lama seolah2 tidak ada proses apapun cuma loading…
tapi untuk export yang lain (pdf, html, dll) tidak ada masalah.
maslah yang kedua adalah untuk ecport print, kok tapilan Print Preview tidak sama dengan tapilan di project saya.
yang saya tanyakan:
1. apa custom template tidak mendukung export to Word & Excel Pak?
2. apa tampilan View yang menggunakan custom template, bila mau diprint tampilannya berubah?
3. bila pertanyaan 1 & 2 memang seperti itu apa ada trik solusinya?
4. bila pertanyaan 1 & 2 itu tidak terjadi (yang berarti yang terjadi pada project saya adalah kesalahan saya) kira-kira kemungkinan terbesar saya melakukan kesalahan dimana Pak?
Mohon solusinya Pak Masino, terimakasih sebelumnya.
1. Iya, Custom Template memang tidak mendukung Export to Word dan Export to Excel.
2. Belum pernah coba, langsung aja coba.
3. Tidak ada.
4. Sudah terjawab di 1, 2, dan 3.
Gimana Mas saya pakai PHPMaker2020 tidak jalan…
Untuk versi 2020, ganti ewRow menjadi ew-row dan ewLabel menjadi ew-label.