Buat Tabel Responsif yang Menakjubkan dengan wpDataTables

Membuat tabel di WordPress itu mudah. Ada cara tradisional untuk menambahkan tabel ke WordPress dengan kode, namun sejauh ini cara paling mudah untuk membuat tabel (atau bagan) adalah dengan plugin WordPress wpDataTables. Ini membuatnya sangat mudah untuk mengimpor tabel Anda dari berbagai sumber eksternal, menatanya sesuai keinginan Anda dan menambahkannya ke situs web Anda.

Tabel HTML Dasar

Anda dapat menambahkan tabel ke WordPress menggunakan tag tabel HTML standar. Mereka cukup mudah dan menggunakan struktur dasar berikut (ingatlah untuk memasukkannya ke dalam tab “teks” saat membuat postingan Anda):

<table style="width: 100%;">
<tbody>
<tr>
<th style="width: 33%;">First</th>
<th style="width: 34%;">Second</th>
<th style="width: 33%;">Third</th>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>Jenson</td>
<td>30</td>
</tr>
</tbody>
</table>

Yang akan menghasilkan tabel yang terlihat mirip dengan ini (catatan – gaya apa pun untuk sel header akan bergantung pada tema Anda):

Jack

Jackson

Jen

Jenson

Menggunakan HTML untuk membuat tabel akan berfungsi dan baik-baik saja jika Anda hanya ingin menambahkan satu atau dua tabel ke situs Anda. Namun jika Anda sering membuat tabel, ada beberapa masalah yang mungkin akan Anda temui.

  • Anda harus mempelajari pengkodean HTML untuk opsi lanjutan
  • Menambahkan HTML memakan waktu dan akan menghambat produktivitas Anda dalam jangka panjang jika membuat banyak tabel
  • Metode ini sangat terbatas dalam tata letak dan desain (kecuali Anda adalah pengembang tingkat lanjut)

Jika Anda menggunakan WordPress, kami dapat berasumsi bahwa 1) Anda menggunakan WordPress versi terbaru, dan 2) tema Anda responsif. Saat Anda menggunakan tag tabel HTML untuk menyisipkan tabel di situs WordPress Anda, Anda akan menghabiskan banyak waktu untuk menyesuaikan tata letak.

Situs Anda mungkin responsif, namun tabel Anda tidak.

Hal ini tentu saja akan merusak properti responsif situs Anda. Memasukkan data ke situs Anda juga bisa menjadi masalah. Perangkat lunak pengolah spreadsheet seperti Google Spreadsheets atau Microsoft Excel memiliki banyak alat impor untuk mengambil data dari database. Namun saat Anda mengetik setiap karakter – itu tidak terlalu produktif.

Sebelumnya kami mengidentifikasi tiga masalah utama saat memasukkan tabel dengan HTML di WordPress. Jangan khawatir – ada cara yang lebih baik untuk membuat tabel. Jadi izinkan saya memperkenalkan sebuah plugin yang akan menghilangkan semua masalah yang disebutkan di atas, dan menghadirkan sejumlah fitur berguna.

Buat Tabel Lebih Baik dengan wpDataTables

Untuk membuat tabel dengan WordPress kami sangat merekomendasikan wpDataTables. Plugin premium yang sepenuhnya responsif ini memudahkan pembuatan, penyesuaian, dan pengelolaan tabel dan bagan di WordPress – tidak memerlukan coding. Cukup instal dan mulai membuat tabel dan bagan! Dipercaya oleh lebih dari 14.300+ orang (dan sebelumnya menamakannya salah satu plugin WordPress kami bulan ini) ini hanyalah salah satu cara terbaik untuk menambahkan tabel ke situs web WordPress Anda menurut pendapat kami.

Selengkapnya Tentang wpDataTables   Lihat Demo Langsung

Anda dapat mempelajari lebih lanjut tentang wpDataTables di Themeforest dengan mengklik tombol di atas, atau terus membaca untuk mencari tahu mengapa menurut kami ini sangat mengagumkan.

Berbagai Sumber Data

Tergantung di mana Anda memilih untuk menyimpan data, wpDataTables memungkinkan Anda mengimpor dari berbagai sumber. Pilih dari Excel, CSV, Google Doc, XML, JSON, Serialized PHP Array atau kueri MySQL untuk mengimpor data. Ada juga opsi untuk membuat tabel baru secara manual, menautkan ke sumber data langsung (yang akan memperbarui tabel Anda secara dinamis saat Anda memuatnya di halaman) atau membuat kueri khusus menggunakan alat GUI (antarmuka pengguna grafis).

Kueri MySQL adalah favorit pribadi saya karena memungkinkan saya melihat dan memodifikasi data dari database yang tepat. wpDataTables mendukung koneksi database terpisah untuk database MS SQL dan PostgreSQL, dan opsi untuk menambahkan lebih dari satu koneksi database terpisah. Tabel dapat mengambil data dari beberapa database dan server. Jika Anda memiliki tim pengembang yang mengerjakan proyek tabel, ini akan membuat kolaborasi menjadi sangat sederhana (lebih lanjut tentang ini nanti)!

Kustomisasi yang Ditingkatkan dan Tata Letak Responsif

Mendesain meja Anda tidak pernah semudah ini. Dengan beberapa kotak centang dan beberapa pilihan warna, Anda dapat mendesain plugin untuk melengkapi tema situs Anda. Ada juga tampilan meja modern baru yang dapat dipilih, termasuk ungu, gelap, dan aqua. Lihatlah fitur desain luar biasa yang ditawarkan plugin ini:

Ada juga opsi bawaan untuk bahasa antarmuka, pemformatan waktu/tanggal, penyelarasan, JS/CSS khusus, dan banyak lagi. Oh dan apakah saya menyebutkan bahwa plugin ini juga responsif seluler? Anda dapat mengatur berapa banyak ruang yang akan digunakan meja, berapa pun ukuran layarnya!

Filter untuk Pencarian Efisien

Saat membuat tabel baru (atau mengedit tabel yang sudah ada), Anda memiliki opsi untuk mengaktifkan filter. Dengan filter, Anda dapat mengurangi kumpulan hasil hanya dengan item yang Anda inginkan. Ini sangat berguna untuk menanyakan database besar. Misalnya, jika Anda memiliki database perpustakaan, memfilter hasil berdasarkan subjek akan membantu Anda menemukan buku lebih cepat.

Namun, karena setiap kali Anda mengedit filter, hal ini meningkatkan jumlah komputasi yang harus dilakukan oleh database – sehingga meningkatkan tekanan server. Oleh karena itu, Anda memiliki opsi yang bagus untuk menonaktifkan filter sama sekali.

Edit Database MySQL dari Frontend

wpDataTables juga memungkinkan Anda mengedit database secara langsung dari frontend – yaitu dari situs WordPress langsung. Cukup aktifkan opsi di bawah tab “Editing” saat mengonfigurasi tabel Anda. Anda bahkan dapat mengatur pengguna mana yang dapat mengedit nilai dalam database – membiarkannya terbuka bagi semua pengguna untuk mengirimkan atau mendasarkan akses pada peran pengguna mereka.

Visualisasikan Data menggunakan Grafik

Visualisasi adalah penarik perhatian yang jauh lebih efektif dibandingkan teks biasa. Bagaimanapun, melihat berarti percaya. Ini meningkatkan tingkat asupan data, dibandingkan dengan membaca tradisional. Misalnya, saat Anda melihat diagram lingkaran laporan pendapatan tahunan, Anda hampir selalu menafsirkan data lebih cepat jika dibandingkan dengan membaca data selama dua belas bulan.

wpDataTables membantu Anda membuat grafik dinamis (melalui Google Charts, HighCharts atau Chart.js) untuk memvisualisasikan data tabel Anda. Ini khususnya berguna untuk tabel dengan banyak data numerik, misalnya blogger yang membagikan laporan pendapatan bulanan mereka.

Pembaruan Seumur Hidup

Sebagian besar pengembang plugin akan memberi Anda pembaruan dan dukungan selama satu tahun. Namun, pengembang ini telah menyertakan pembaruan seumur hidup dan dukungan enam bulan dengan biaya satu kali (catatan – untuk dukungan berkelanjutan, Anda perlu memperbarui lisensi Anda).

Dokumentasi Terperinci

Pengembang tidak meninggalkan kebutuhan bisnis yang terlewat ketika menjelaskan cara menggunakan wpDataTables. Ada dokumentasi online yang ekstensif ditambah tutorial video untuk membantu Anda memahami kemampuan penuh plugin!

Ini memberi tahu kita 2 hal:

  1. Pengembang peduli dengan pelanggannya – sehingga mereka kembali membeli produknya
  2. Pelanggan yang berpengetahuan=lebih sedikit cegukan=tiket dukungan yang lebih rendah=pelanggan yang senang

Selain itu, dengan tiket dukungan yang lebih sedikit, pengembang dapat mencurahkan lebih banyak waktu untuk meningkatkan plugin dan memperkenalkan fitur-fitur baru!

Cara Membuat Tabel Responsif dengan wpDataTables

Sekarang setelah Anda mengetahui mengapa menurut kami wpDataTables adalah plugin yang bagus, mari tunjukkan cara menggunakannya! Ada tiga langkah untuk membuat tabel baru menggunakan plugin wpDataTables.

1. Instal wpDataTables

Saya tahu ini seharusnya sudah jelas, tetapi Anda harus menginstal wpDataTables terlebih dahulu. Karena ini adalah plugin premium maka harus dibeli dan diunduh dari CodeCanyon (buka saja pembelian Anda dan unduh “Hanya file WordPress yang dapat diinstal”).

Kemudian ikuti saja petunjuk di layar untuk menyelesaikan instalasi dan aktivasi.

2. Buat Tabel Data Anda

Dengan plugin yang aktif, Anda akan memiliki item menu “wpDataTables” yang baru. Klik di atasnya, lalu klik tombol Tambah Baru berwarna biru besar untuk mulai membuat tabel baru.

Opsi pertama Anda adalah bagaimana Anda ingin membuat tabel. Seharusnya ada lima opsi yang disajikan. Kami memilih opsi untuk mengimpor dari CVS karena kami memiliki spreadsheet sederhana yang ingin kami gunakan. Kemudian setelah mengklik Berikutnya Anda akan diminta untuk memilih dan mengunggah file Anda.

Setelah mengunggah sumber data, Anda akan dapat memasukkan nama tabel khusus serta menggunakan opsi untuk mengedit, menambah, atau menghapus kolom dan baris. Kemudian klik tombol hijau untuk menyelesaikan pembuatan tabel Anda.

Anda berada di kandang sekarang! Dari halaman ini Anda dapat mengubah pengaturan tambahan untuk tabel Anda (opsional). Gunakan opsi “Tampilan” untuk mengaktifkan penciutan responsif pada perangkat yang lebih kecil, menambahkan scrollbar horizontal, membatasi lebar tabel, dll.  Buka tab “Pengeditan” untuk mengaktifkan pengeditan front-end, atau mengaktifkan alat tabel (cetak, salin, atau ekspor tautan langsung). Yang terbaik dari semuanya, Anda dapat melihat pratinjau hasil edit Anda secara langsung saat Anda melakukan penyesuaian. Ingatlah untuk mengeklik tanda centang Simpan (atau terapkan) jika Anda melakukan perubahan apa pun.

Setelah selesai, salin kode pendek tabel Anda dari bagian atas layar karena Anda memerlukannya untuk langkah ketiga dan terakhir.

3. Masukkan Tabel Anda ke dalam Postingan atau Halaman

Untuk menggunakan tabel Anda, Anda hanya perlu menempelkan shortcode ke konten pada postingan atau halaman (seperti pada gambar di atas). Kode pendek ini akan ditampilkan di bagian depan situs web Anda bergantung pada cara Anda menata tabel Anda:

Di kami, Anda dapat melihat bahwa kami telah mengaktifkan alat tabel (untuk mencetak, mengekspor, dll), memfilter, dan pengiriman front-end. Tapi itu saja – meja Anda siap disajikan!

Ingin membuat Bagan?

Anda juga dapat membuat bagan menggunakan wpDataTables. Setelah membuat tabel, klik “Buat Bagan” untuk memulai.

Dari sini beri nama pada bagan Anda, pilih gaya (ada banyak sekali yang bisa dipilih) dan lanjutkan ke layar berikutnya di mana Anda akan memilih tabel data yang ingin Anda gunakan untuk membuat bagan Anda.

Setelah memilih tabel yang akan digunakan sebagai sumber data, tetapkan kolom tabel Anda ke bagian bagan. Tergantung pada bagan yang Anda pilih, mungkin ada jumlah minimum nilai yang diperlukan. Dalam contoh kita, kita memilih diagram batang, yang memerlukan setidaknya dua kolom untuk diagram tersebut (untuk menjadi batang). Anda juga dapat menggunakan penggeser rentang angka untuk memfilter kolom float dan integer. Setelah Anda mengurutkan kolom, lanjutkan ke langkah berikutnya.

Sekarang untuk bagian yang menyenangkan. Gunakan opsi untuk menata gaya dan menambahkan fitur ke bagan Anda. Ada banyak sekali opsi untuk lebar responsif, tinggi, latar belakang, batas, font, label, warna, tampilkan/sembunyikan judul, keterangan alat saat mengarahkan kursor, dan banyak lagi.

Setelah Anda selesai mengedit, klik berikutnya dan salin kode pendek grafik Anda. Cukup tempelkan ke postingan atau konten halaman Anda, simpan dan buka bagian depan situs web Anda untuk melihat grafik Anda!

Sebagai bonus tambahan, wpDataTables menyertakan opsi unik untuk memilih apakah Anda ingin menyimpan tabel meskipun Anda menghapus plugin (secara default tabel akan disimpan dalam database setelah menghapus plugin).

Tambahkan Lebih Banyak Fitur Tabel WordPress

Ingin lebih? Ada sejumlah ekstensi dan add-on untuk wpDataTables untuk menambahkan lebih banyak opsi tabel dan bagan untuk situs WordPress Anda.

Filter yang Kuat: Mengatur filter berjenjang (gabungan dari kiri ke kanan), pemfilteran bersegi (menerapkan beberapa filter untuk mempersempit hasil), menonaktifkan tampilan tabel hingga pengguna memilih filter, menambahkan fitur penelusuran langsung, dan banyak lagi . Cukup aktifkan dan konfigurasikan opsi saat menyiapkan meja Anda.

Pembuat Laporan: Buat laporan Word atau Excel kustom Anda sendiri berdasarkan tabel data. Hal ini sangat berguna ketika mengizinkan pengeditan front-end oleh pengguna (sehingga saat Anda mengumpulkan data, Anda dapat menjalankan kembali dan mencetak laporan) atau jika Anda perlu membuat ulang laporan secara rutin (seperti faktur bulanan atau kartu waktu).

Formidable Forms: Tambahkan dukungan untuk pembuat formulir Formidable Forms Pro yang populer. Gunakan Formulir yang Tangguh untuk membuat formulir pengumpulan data (seperti survei) lalu membuat tabel secara otomatis berdasarkan kiriman pengguna, dengan setiap bidang diubah menjadi kolom.

Gravity Forms: Integrasikan pengiriman Gravity Forms dengan wpDataTables untuk secara otomatis membuat tabel WordPress berdasarkan data pengguna. Ekstensi ini menambahkan sumber data baru saat membuat tabel sehingga mudah untuk ditautkan ke Formulir Gravitasi spesifik Anda dan memvisualisasikan data. Dan bahkan ada pengeditan front-end yang mudah untuk tabel berbasis Gravity Forms (dengan add-on integrasi Gravity Forms).

Coba wpDataTables sendiri

Sebagian besar pengembang memberi Anda demo langsung untuk memberi Anda gambaran tentang apa yang bisa dilakukan plugin. Namun mereka hanya menampilkan outputnya, yaitu tampilan “frontend ” – yang didasarkan pada input yang telah ditentukan sebelumnya. Di sinilah sebagian besar demo langsung plugin gagal – mereka tidak memberi Anda akses ke setelan dan alat plugin – yaitu backend .

Namun wpDataTables menawarkan sandbox lengkap pada demonya tempat Anda dapat mencoba sebelum membeli. Semua dealer mobil melakukan ini – test drive yang terkenal. Melalui sandbox Anda dapat menguji fitur plugin sepuasnya, dan melihat hasilnya secara realtime.

Lihat Demo wpDataTables

Ingin mengunduh salinannya untuk diuji pada instalasi Anda sendiri? wpDataTables memang menawarkan versi ringan yang bisa Anda ambil dari repositori WordPress.org. Plugin ini tidak memiliki semua fitur premium luar biasa yang kami bahas di atas, tetapi ini adalah cara yang bagus untuk melihat apakah plugin tersebut merupakan solusi yang tepat untuk kebutuhan Anda.

Dapatkan wpDataTables Lite

Dan jika Anda menyukainya, Anda dapat melanjutkan dan membelinya dengan pikiran tenang. Mengapa? Karena Anda sudah menguji dan menggunakan produk tersebut.

Kesimpulan

wpDataTables adalah salah satu plugin yang sangat diperlukan untuk situs WordPress yang menangani data dalam jumlah besar. Baik Anda membuat proyek sekolah atau laporan tahunan perusahaan, tabel dan visualisasinya memainkan peran penting dalam representasi data.

Dapatkan wpDataTables untuk WordPress

Sudahkah Anda mencoba wpDataTables? Atau apakah Anda memiliki pertanyaan tentang apa yang bisa dilakukan plugin ini? Tinggalkan komentar di bawah – kami ingin mendengar pendapat Anda!