Membuat tabel di App Inventor Kodular

Baiklah pada postingan kali ini masih membahas seputar interface aplikasi, tentang bagaimana cara membuat tabel di App Inventor Kodular. Ketika membuat aplikasi yang banyak menampilkan data, tentunya sebagai developer harus bisa membuat sebuah tampilan yang dapat menyajikan data secara rapih dan mudah dibaca.

Ada banyak cara untuk menyajikan data pada aplikasi android, bisa dalam bentuk list view, card view ataupun tabel. Nah umumnya saat ini yang paling sering digunakan untuk menyajikan data yaitu menggunakan list view dan card view, selain karena bentuk dan tampilan UI-nya yang enak dipandang.

Membuat tabel di App Inventor Kodular
Membuat tabel di App Inventor Kodular

Lantas bagaimana dengan tabel? ya tabel biasanya digunakan untuk menampilkan banyak data sekaligus dan juga lebih spesifik. Selain karena bisa memuat banyak data dalam satu komponen, tabel juga bisa membuat tampilan data menjadi rapi dan mudah untuk dibaca.

Pada App Inventor ataupun Kodular, masing-masing memiliki komponen tabel. Namun komponen tersebut hanya dapat digunakan sebagai layout saja dan juga komponennya bersifat statis. Karena sifatnya statis jadi tidak bisa memasukkan data secara terus menerus, karena hanya bisa memuat data yang banyaknya ditentukan berdasarkan baris dan kolom yang telah dibuat.

Untuk mengatasi ini, kita bisa menggunakan extension table view. Ya extension ini dapat membantu kita untuk membuat tabel dengan mudah dan juga komponen ini bersifat dinamis yang mana bisa juga dihubungkan dengan data yang ada di list maupun yang ada di database.

Sehingga dapat melakukan penambahan data atau merubah data secara terus menerus, tanpa harus khawatir dengan adanya batasan pada baris ataupun kolom pada tabel.

Cara membuat tabel di App Inventor dan Kodular

Untuk membuat tabel yang dapat memuat data tulisan yang diambil dari list atau database, kita bisa menggunakan extension table view yang dibuat oleh ken. Salah satu anggota di komunitas appybuilder yang dengan senang hati membuat extension table view ini secara gratis, sehingga semua orang dapat menggunakannya.

Silahkan kamu unduh extension tersebut dan kemudian import ke dalam project aplikasi yang dibuat baik di App Inventor atau Kodular. Extension memiliki format “.aix” jadi jangan sampai salah unduh, karena ada juga format “.aia” yang merupakan format project aplikasi yang diekspor ke penyimpanan komputer ataupun lainnya.

Pada tutorial kali ini, saya membuat aplikasinya di Kodular. Masuk terlebih dahulu ke kodular dan kemudian buat project baru dan beri nama “Tabel”.

Setelah itu buat desain aplikasinya.

Desain tampilan untuk membuat tabel di App Inventor Kodular

berikut di bawah ini adalah desain sederhana yang saya buat

Desain tabel di App Inventor Kodular
Desain tabel di App Inventor Kodular

pada saat proses desain, jangan lupa juga untuk melakukan import extension Table View milik ken ke project aplikasi, caranya klik menu “extension” di bagian pallet, kemudian klik import extension dan pilih import melalui file yang ada di komputer.

kemudian klik import dan tunggu hingga nanti akan muncul sendiri extensionnya di list menu extension. Setelah selesai import extension jangan lupa seret komponen table view ke layar smartphone agar komponen table view bisa digunakan. Lihat gambar di atas.

Oh iya jangan lupa untuk men-setting row delimiter dan isi dengan dengan “;” (titik koma) lihat gambar di atas, fungsinya ialah sebagai patokan untuk membuat baris baru pada tabel secara otomatis ketika ada data lebih dari 1. Ini sangat berguna ketika ingin menampilkan data yang bentuknya csv atau dari google spredsheet.

Baca juga Cara membuat animasi loading di kodular

Apabila proses desainnya sudah selesai, selanjutnya adalah

Blok program untuk membuat tabel

sebenarnya untuk membuat tabel di app inventor atau kodular blok programnya hanya sedikit, namun karena aplikasi yang saya buat ini sekaligus menggunakan konsep crud, yang mana data yang berhasil disimpan pada list akan ditampilkan di tabel. Jadi blok programnya agak sedikit banyak.

tapi tenang saja ini tujuannya untuk memudahkan pemahan kamu pada saat membuat aplikasinya.

baiklah berikut ini adalah blok program awalan yang berisi prosedur dan program tabel ketika di klik

block program untuk prosedur dan tabel
block program untuk prosedur dan tabel

selanjutnya adalah blok program untuk button

block program untuk button
block program untuk button

Setelah selesai membuat block programnya kamu dapat langsung mem-build projectnya menjadi sebuah aplikasi android. Berikut dibawah ini adalah dokumentasi hasil dari project pada tutorial ini.

dokumentasi video

Oke mungkin sampai sini saja tutorial kali ini, semoga bermanfaat.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *