Custom Templates: Cara Mudah Mengubah Layout Field di Aplikasi Web yang Dibuat dengan PHPMaker

Di sebuah aplikasi yang berbasis web, adalah hal yang wajar jika Fields ditampilkan dalam bentuk tabular. Artinya, Label yang berisi penjelasan dari suatu field akan ditempatkan pada posisi sebelah kiri, sedangkan Data atau Elemen yang terdapat di sebuah form (seperti TextBox, ComboBox, Radio Button, dan sebagainya) untuk menginput data ke field tersebut berada di sebelah kanannya. Nah, kadang-kadang kita ingin mengubah layout field yang standar tadi dan biasa ditampilkan pada halaman View, Add, dan Edit agar sesuai dengan kebutuhan kita. Katakanlah kita ingin agar posisi Label berada di atas dari posisi Data atau Elemen di sebuah form. Nah, pertanyaannya adalah, apakah hal ini bisa diterapkan di aplikasi web yang dibangkitkan oleh PHPMaker?

Sejak versi 9, PHPMaker memperkenalkan sebuah fitur baru bernama Custom Templates. Fitur ini memungkinkan Web Developer untuk mengubah layout tampilan field di ketiga halaman tadi dengan cepat. Web Developer tidak perlu melakukan kostumisasi file Template. Web Developer juga tidak perlu mengubah kode di file skrip yang sudah dibangkitkan oleh PHPMaker. Semuanya dapat dilakukan dengan sangat mudah dari dalam project PHPMaker. Artinya, kode yang digunakan di Custom Templates akan disimpan ke dalam file PHPMaker project (.pmp), dan dapat dimuat kembali ketika Anda menjalankan file project tadi jika ingin mengubahnya lagi di waktu mendatang.

Penting untuk diingat, bahwa istilah Custom Templates yang kita gunakan di artikel ini berbeda dengan istilah Customizing Templates. Istilah yang kedua mengacu kepada kegiatan untuk melakukan kostumisasi file Template yang digunakan oleh PHPMaker. Sedangkan istilah pertama mengacu kepada Template yang bisa dikostumisasi, tanpa harus menyentuh atau mengubah file Template. Bisa dikatakan, bahwa Custom Templates mirip sekali dengan salah satu fitur utama di sebuah PHP Framework, yaitu: View dari konsep MVC (Model-View-Controller). Jadi, dengan menaruh kode Anda di bagian Custom Templates dari PHPMaker, Anda bisa mengubah tampilan (View) dari layout Field dan Data yang berada di suatu form atau halaman.

Jika Anda mendefiniskan kode di bagian Custom Template di file project Anda, maka PHPMaker akan memisahkan kode asli dalam banyak Template kecil di sisi klien. Template yang berada di sisi klien adalah kode HTML yang diapit dengan tag <script type=”text/html”> dan </script>. Karena browser tidak tahu bagaimana mengeksekusi skrip “text/html”, maka browser akan mengabaikannya. Jadi hal ini memungkinkan untuk menyusun kembali HTML dari Template-template kecil di sisi klien menggunakan JavaScript berdasarkan Custom Template yang Anda sediakan. Dengan kata lain, dia cukup mengatur ulang bagian HTML yang sudah ada di browser.

Selama proses pembangkitan skrip berlangsung, PHPMaker mengkonversi Custom Template Anda ke Template yang berada di sisi klien dan menggunakan JavaScript untuk melakukan render pada Template. Template yang berada di sisi klien di-rendered oleh JsRender (lihat topik Third-Party Tools dari file Bantuan di PHPMaker) yang merupakan mesin template JavaScript pihak ketiga yang dioptimasi untuk melakukan proses render string dengan performansi tinggi. Skrip yang dibangkitkan hanya menggunakan fitur Template Composition untuk me-render HTML dari Template eksternal lainnya. Custom Template Anda meskipun demikian dapat membuat penggunaan fitur JsRender lainnya jika Anda membutuhkannya. (Catatan: JsRender saat ini masih dalam status Beta, jika Anda menggunakan fitur-fiturnya secara langsung, Anda harus memperhatikan adanya beberapa perubahan yang terjadi di waktu mendatang.).

Custom Templates mengijinkan Web Developer untuk mengkostumisasi layout Fields yang awalnya ditempatkan di kode HTML tabel utama dari sebuah halaman. Custom Templates tidak dapat mengkostumisasi HTML yang berada di luar area tersebut. Adapun area-area yang dapat dikostumisasi dengan menggunakan Custom Templates adalah sebagai berikut:

1. CustomTemplateSearch, area panel Cari yang berada di bagian atas dari halaman List
2. CustomTemplateHeader, area header atau judul kolom dari tabel utama yang berada di halaman List. Area ini juga termasuk yang terdapat di halaman konfirmasi sebelum melakukan penghapusan record (Delete).
3. CustomTemplateBody, area badan (Body) dari tabel utama yang berada di halaman List. Area ini juga termasuk yang terdapat di halaman konfirmasi sebelum melakukan penghapusan record (Delete).
4. CustomTemplateFooter, area kaki (Footer) dari tabel utama yang berada di halaman List. Area ini biasanya berisi nilai jumlah (SUM) dari data angka di suatu kolom. Area ini juga termasuk yang terdapat di halaman konfirmasi sebelum melakukan penghapusan record (Delete).
5. CustomTemplate, area utama yang berada di halaman Add, Copy, Edit, Search, dan View

Supaya kode yang terdapat di dalam Custom Templates bisa dikenali oleh PHPMaker sebagai kode yang berasal dari Custom Templates, maka harus ada penanda atau Tag khusus yang digunakan. PHPMaker mendukung Tag khusus yang dibuat untuk kode di Custom Template. Karena JsRender menggunakan Tag yang diapit dengan {{ dan }} (kurung kurawal ganda), supaya Anda dapat menggunakannya juga di Custom Templates, maka Tag di Custom Template menggunakan {{{ dan }}} (tiga buah kurung kurawal) untuk membedakannya. Tag Custom Template akan dikonversi menjadi tag JsRender selama proses pembangkitan skrip, dan mereka hanya dapat digunakan di antarmuka PHPMaker. Mereka tidak dapat digunakan di tempat lainnya seperti di file Template (ZIP) atau di file skrip yang sudah dibangkitkan oleh PHPMaker.