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.
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
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
selanjutnya adalah blok 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.
Oke mungkin sampai sini saja tutorial kali ini, semoga bermanfaat dan juga berikut adalah file aia table yang bisa kamu gunakan untuk belajar.
kalau membuat tabel yang isinya diambil dari spreadsheet gmn ya>>
Tinggal disesuaikan aja mas di tabelnya, kan kalo data yang didapat dari spreadsheet itu keluarnya dalam bentuk csv. Nah tinggal atur delimiter di tabelnya disesuain sama format csv
delimiter csv ini msktunya gmna bang,,masih blm paham
saya tidak bisa menemuka Or di gambar 2
cari aja di komponen logic
mhn infonya utk global db dapat dari mana ya gan?
global db itu dari variabel global block db, coba cek di block terakhir
Bagaimana ya untuk menampilkan tabel yang isinya terkoneksi dengan google spreadsheet? Dan dimana meletakkan blok program untuk memanggil link google spreadsheet?
untuk memanggil link google spreadsheet bisa menggunakan komponen web
tableView1 pilihan dataString kok tidak ada ya?
Bagaimana mengatur lebar kolom atau membuatnya otomatis (shrink to fit)? Sehingga semua kolom tabel berada dalam 1 screen full.
Pada kasus anda, coba masukkan alamat lengkap yang lebih panjang.
Extension table ini masih sangat terbatas, karena secara default lebar kolom akan mengikuti banyaknya isi data. Belum ada cara agar bisa menampilkan secara responsive. Saran saya jika ingin menampilkan data cukup beberapa saja yang ingin ditampilkan pada listview ataupun tabel, namun ketika data tersebut diklik maka akan menampilkan detail lengkap mengenai data tersebut.
Mantap bang.
Tapi file AIA nya kok tidak bisa di unduh ya?
sudah bisa silahkan dicoba lagi
tutor nambahin button carinya dong bang.
tell me how can I save in Tiny DB ?
you can check my another post, i have been post about this