Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Tabel yang Selalu Muat dengan Lebar Layar di Aplikasi Web dari PHPMaker
Mudahnya Menambahkan Loading Status di Aplikasi Web dari PHPMaker
Mudahnya Membatasi Jumlah Karakter di TextArea Aplikasi Web dari PHPMaker

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

Sab, 13 September 2014 oleh Masino Sinaga 1 Komentar

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? 😀

Ditempatkan di bawah: PHPMaker Ditag dengan:gaya lebar tabel, PHPMaker Indonesia, Scrolling Table, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com dan ilovephpmaker.com.

Mudahnya Menambahkan Loading Status di Aplikasi Web dari PHPMaker
Mudahnya Membatasi Jumlah Karakter di TextArea Aplikasi Web dari PHPMaker

Trackbacks

  1. Asyiknya Bermain-main Table Width Style dari Masino Extensions di PHPMaker – Masino Sinaga berkata:
    Ming, 4 Januari 2015 pukul 11:05 am

    […] Setiap pilihan gaya lebar tabel tadi memiliki karakteristik sendiri. Informasi lebih lengkap mengenai ketiga pilihan lebar gaya tabel tersebut dapat Anda lihat melalui artikel ini. […]

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Pos-pos Terbaru

  • Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Alasan AlwaysUseEnglishUSLocale Sebaiknya Aktif di Masino Extensions untuk PHPMaker 2022
  • MasinoInputMask18 Extension, Autoformat Angka dengan Fitur Lebih Kaya di PHPMaker 2022
  • MasinoSignature18 Extension, Mudahnya Mengelola Tanda Tangan di PHPMaker 2022
  • MasinoFormWizard18 Extension, Mengubah Tampilan Multi-Page di PHPMaker 2022

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Thien Rudi pada Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2021 | WordPress | Catat masuk | Kembali ke atas