Tabel yang Selalu Muat dengan Lebar Layar di Aplikasi Web dari PHPMaker

Era layout Aplikasi Web saat ini sudah mulai berubah. Dari yang sebelumnya statis, sekarang berubah menjadi dinamis. Dari yang sebelumnya lebar layout tidak bisa menyesuaikan dengan lebar layar, sekarang berubah menjadi lebar layout yang otomatis menyesuaikan dengan lebar layar dari perangkat yang digunakan.

Sayangnya, masih banyak Aplikasi Web yang dibuat layoutnya masih bersifat statis. Ketika Aplikasi Web tersebut ditampilkan di perangkat mobile seperti HandPhone atau Tablet, maka lebar maksimal dari layout Aplikasi Web tadi tidak ikut menyesuaikan. Pengguna harus melakukan scroll ke kiri untuk melihat tampilan yang tersisa di sebelah kanan dari Aplikasi Web, supaya bisa kelihatan secara keseluruhan.

Beberapa Aplikasi Web lainnya bahkan harus dibuat dengan dua versi. Yang satu untuk versi Desktop dengan lebar layout yang hanya mendukung untuk ditampilkan di layar yang relatif lebar, dan yang satunya lagi untuk versi Mobile supaya bisa ditampilkan khusus di layar yang layarnya relatif sangat sempit. Sayang sekali jika hal ini masih harus dilakukan, karena cukup menyita waktu yang tidak sedikit dalam fase development.

Beruntunglah Anda jika menggunakan PHPMaker, karena Aplikasi Web yang dihasilkan olehnya sudah langsung mendukung ditampilkan di layar Desktop dan Mobile. Bahkan dengan menggunakan Extension MasinoFixedWidthSite11 yang saya buat untuk PHPMaker versi 11, Anda sebagai Web Developer dapat berpindah gaya (style) layout. Tersedia tiga style layout, yaitu: Scroll, Auto, dan 100%.

Ketiga layout ini dikenal juga dengan istilah gaya lebar tabel atau table width style Hehehe, ini istilah yang saya ciptakan sendiri lho, ya! Jadi, bukan dari PHPMaker.

Layout Scroll memiliki karakteristik lebar layout yang fixed di mana Tabel yang terdapat di dalam halaman List akan otomatis memiliki efek scroll ke samping kiri dan kanan, serta ke atas dan bawah. Efek scroll di Tabel baru akan muncul jika lebar total Tabel lebih besar dari lebar layar. Style layout ini cocok hanya untuk Aplikasi Web yang memang dijalankan hanya dari komputer atau versi Desktop. Orientasi letak Tabel persis di tengah layar (tidak mobile-responsive).

Layout Auto memiliki karakteristik lebar layout yang otomatis menyesuaikan dengan lebar total Tabel yang terdapat di halaman List. Dengan kata lain, Tabel tidak memiliki efek scroll di lebar layar komputer Desktop. Meskipun demikian, layout ini akan tetap menyesuaikan dengan lebar layar di perangkat mobile seperti Handphone, Tablet, dan sebagainya. Style layout ini cocok digunakan jika Tabel di halaman List hanya memiliki sedikit field saja. Orientasi letak Tabel rapat ke kiri layar (mobile-responsive).

Layout 100% memiliki karakteristik lebar layout yang otomatis menyesuaikan dengan lebar layar Desktop maupun Mobile. Selain itu, Tabel yang terdapat di halaman List juga memiliki efek scroll ke kanan/kiri serta atas/bawah. Efek scroll di Tabel baru akan muncul jika lebar total Tabel lebih besar dari lebar layar. Style layout ini sangat cocok digunakan di Aplikasi Web yang umumnya di halaman List memiliki Tabel dengan jumlah Field/kolom yang relatif banyak. Orientasi letak Tabel lengket ke masing-masing pinggir kiri dan kanan layar (mobile-responsive).

Penasaran ingin melihat demo-nya? Silahkan klik di sini, login dengan menggunakan ID Pengguna admin dan Kata Sandi master. Selanjutnya, sorot menu Settings, sorot sub-menu Table Width Style, dan klik salah satu pilihan layout yang Anda inginkan.

Anda suka/pilih style yang mana? 😀