Berawal dari topik Custom Template – Two Column Add Page (v2025) yang Penulis buat di Forum Diskusi PHPMaker, ada satu permintaan agar code yang Penulis modifikasi di topik tersebut bisa juga untuk Multi-Page. Hmmm, tantangan yang cukup menarik!
Akhirnya tantangan tersebut bisa dipenuhi, dengan menghasilkan beberapa code dalam file .xml baru, yang dapat dipilih dari fitur Code Repository dalam project PHPMaker 2025. Fitur generate code Custom Template pada table yang memiliki fitur Multi-Page pun sudah bisa.
Daripada menulis code dari awal, sekarang kita sudah dapat membangkitkan code Custom Template dengan memilih Code Repository. Hanya sekali klik saja, maka code untuk Custom Template dengan Two Column Layout dibangkitkan hanya dalam satu detik! Keren, kan?
Ketika kita membahas Two Column Layout, maka ada dua kemungkinan arah yang akan kita dapatkan, ketika end-users sedang memindahkan kursor mouse dari satu control ke control berikutnya dalam sebuah form atau halaman. Pertama arah Zig-Zag, dan yang kedua arah Top-Down.
Kedua kemungkinan arah tersebut akhirnya harus dipisahkan masing-masing ke dalam dua file .xml. Akhiran angka 2 pada nama file menunjukkan arah Zig-Zag, sedangkan akhiran angka 3 pada nama file menunjukkan arah Top-Down. Beberapa file .xml tersebut adalah:
- addpage2.xml: Two Column Layout for Add Page (Zig-Zag Direction)
- addpage3.xml: Two Column Layout for Add Page (Top-Down Direction)
- editpage2.xml: Two Column Layout for Edit Page (Zig-Zag Direction)
- editpage3.xml: Two Column Layout for Edit Page (Top-Down Direction)
- masterpage2.xml: Two Column Layout for Master Page (Zig-Zag Direction)
- masterpage3.xml: Two Column Layout for Master Page (Top-Down Direction)
- searchpage2.xml: Two Column Layout for Search Page (Zig-Zag Direction)
- searchpage3.xml: Two Column Layout for Search Page (Top-Down Direction)
- tablesearchpage2.xml: Two Column Layout for Extended Search in List Page (Zig-Zag Direction)
- tablesearchpage3.xml: Two Column Layout for Extended Search in List Page (Top-Down Direction)
- viewpage2.xml: Two Column Layout for View Page (Zig-Zag Direction)
- viewpage3.xml: Two Column Layout for View Page (Top-Down Direction)
Kita bisa mengimplementasikannya dengan sangat mudah di halaman Add, Edit, View, Search, maupun bagian Master dari halaman Master/Detail. Demikian juga di bagian Extended Search yang berada di bagian atas dari halaman List.
Itu artinya, sekarang Penulis dengan mudah dapat men-generate code Custom Template untuk mengubah layout form 1 kolom yang secara default dibangkitkan oleh PHPMaker 2025, menjadi 2 kolom, atau sering disebut dengan Two Column Layout.
Nah, sebagai bonus, Penulis juga sempat bereksperimen untuk menambahkan Custom Template yang mengubah tampilan tabel di halaman List yang aslinya memiliki border, menjadi tidak menggunakan border (borderless):
- tableheader2.xml: Borderless table header (List page)
- tablebody2.xml: Borderless table body (List page)
- tablefooter2.xml: Borderless table footer (List page)
Kembali ke topik Two Column Layout… buat yang masih bingung apa yang dimaksud dengan Zig-Zag, dan apa yang dimaksud dengan Top-Down, maka berikut ini penjelasannya.
Zig-Zag artinya arah pergerakan berasal dari control di sisi kiri berpindah ke control berikutnya pada baris yang sama di sebelah kanan, kemudian berpindah ke control berikutnya di sisi kiri pada baris berikutnya, lalu pindah lagi ke control berikutnya di sisi kanan pada baris yang sama, dan demikianlah seterusnya berakhir sampai ke control terakhir di sisi kanan.
Top-Down artinya arah pergerakan berasal dari control di sisi kiri lalu berpindah ke control tepat di bawahnya yang masih di sisi kiri juga, dan seterusnya sampai control pada baris terakhir di sisi kiri, kemudian berpindah ke atas pada sisi kanan di baris pertama, dan setelah itu berpindah lagi ke control berikutnya di baris kedua masih di sisi kanan, demikian seterusnya sampai control baris terakhir di sisi kanan juga.
Supaya lebih jelas dan ada gambaran, perhatikan layout form sederhana di bawah ini:
A …. F
B …. G
C …. H
D …. I
E ….
Seperti yang kalian lihat, ada 5 field di sisi kiri (A, B, C, D, dan E), dan 4 fields di sisi kanan (F, G, H, dan I).
Zig-Zag: A -> F -> B -> G -> C -> H -> D -> I -> E
Top-Down: A -> B -> C -> D -> E -> F -> G -> H -> I
Nah, munculnya ide untuk bisa mengakomodir dua arah pergerakan cursor mouse tersebut setelah Penulis meminta feedback di Forum Diskusi PHPMaker melalui topik Cursor Movement Direction in 2 Column Form.
Ingin lihat demo dari hasil generate aplikasi webnya? Silahkan klik di sini.
Ingin lihat demo video saat generate code Custom Template-nya? Tonton video berikut:
[…] Anda di sini: Beranda / PHPMaker / Custom Template Code + Masino Extensions for PHPMaker 2025 Generate Two Column Layout dalam Satu Detik dengan PHPMaker 2025 […]