Menampilkan Data dalam Bentuk Tabel di Basic4Android

Chairruddin Arrasid | 11/05/2015 | Basic4Android | 45 Comments

Sebelumnya saya pernah share bagaimana cara Membuat Aplikasi CRUD dengan Basic4Android. Yang mana di dalamnya terdapat sebuah List Barang, yang menampilkan data barang dari database SQLite. Di situ saya menggunakan List View untuk menampilkan datanya. Nah, pada postingan kali ini saya ingin share bagaimana cara menampilkan data barang tersebut dalam bentuk tabel. Berikut ini langkah-langkahnya…

Tutorial ini menggunakan file project MyLogin.

Buka project MyLogin.
Lalu import Class Table. Caranya, klik menu Project – Add Existing Modules.

Pilih Table.bas. Lalu klik tombol Open.

Bisa kita lihat gambar di bawah, di situ terdapat module baru berupa Class Module yaitu: Table.

Kemudian beralih ke Activity BarangList. Pada Sub Globals, deklarasikan dua buah variabel lagi yang berupa object Table, dengan nama: Table1. Dan object Panel, dengan nama: PnlTable. Lengkapnya bisa dilihat code berikut:

Sub Globals
	'These global variables will be redeclared each time the activity is created.
	'These variables can only be accessed from this module.
	
	'ListView untuk menampilkan daftar barang
	Dim LvBarang As ListView
	'Button untuk membuat barang baru
	Dim BtnCreate As Button
	Dim Table1 As Table
	Dim PnlTable As Panel
End Sub

Sub Globals

'These global variables will be redeclared each time the activity is created.

'These variables can only be accessed from this module.

'ListView untuk menampilkan daftar barang

Dim LvBarang As ListView

'Button untuk membuat barang baru

Dim BtnCreate As Button

Dim Table1 As Table

Dim PnlTable As Panel

End Sub

Pada event Activity_Create ubah code yang sudah ada menjadi seperti ini:

Sub Activity_Create(FirstTime As Boolean)
	'Do not forget to load the layout file created with the visual designer. For example:
	'Activity.LoadLayout("Layout1")
	
	'Set judul untuk activity ini.
	Activity.Title = "List Barang"
	'Initialize ListView-nya.
	'LvBarang.Initialize("LvBarang")
	PnlTable.Initialize("")
	'Initialize Button-nya.
	BtnCreate.Initialize("BtnCreate")
	'Set text untuk Button.
	BtnCreate.Text = "Create Barang"
	'Tampilkan ListView di activity ini.
	'Activity.AddView(LvBarang, 0,0,100%x,85%y)
	Activity.AddView(PnlTable, 0,0,100%x,85%y)
	'Tampilkan Button di activity ini.
	Activity.AddView(BtnCreate, 0,85%y,100%x,15%y)
	
	'Initialize Table-nya
	PnlTable.Color = Colors.LightGray
	Table1.Initialize(Me, "Table1", 4, Gravity.CENTER_HORIZONTAL, True)
	Table1.CellAlignment = Bit.OR(Gravity.LEFT, Gravity.CENTER_VERTICAL)
	Table1.HeaderColor = Colors.Blue
	Table1.HeaderTextColor = Colors.Yellow
	Table1.TextColor = Colors.Blue
	Table1.TableColor = Colors.Red
	Table1.AddToActivity(PnlTable, 0, 0, PnlTable.Width, PnlTable.Height)
End Sub

Sub Activity_Create(FirstTime As Boolean)

'Do not forget to load the layout file created with the visual designer. For example:

'Activity.LoadLayout("Layout1")

'Set judul untuk activity ini.

Activity.Title = "List Barang"

'Initialize ListView-nya.

'LvBarang.Initialize("LvBarang")

PnlTable.Initialize("")

'Initialize Button-nya.

BtnCreate.Initialize("BtnCreate")

'Set text untuk Button.

BtnCreate.Text = "Create Barang"

'Tampilkan ListView di activity ini.

'Activity.AddView(LvBarang, 0,0,100%x,85%y)

Activity.AddView(PnlTable, 0,0,100%x,85%y)

'Tampilkan Button di activity ini.

Activity.AddView(BtnCreate, 0,85%y,100%x,15%y)

'Initialize Table-nya

PnlTable.Color = Colors.LightGray

Table1.Initialize(Me, "Table1", 4, Gravity.CENTER_HORIZONTAL, True)

Table1.CellAlignment = Bit.OR(Gravity.LEFT, Gravity.CENTER_VERTICAL)

Table1.HeaderColor = Colors.Blue

Table1.HeaderTextColor = Colors.Yellow

Table1.TextColor = Colors.Blue

Table1.TableColor = Colors.Red

Table1.AddToActivity(PnlTable, 0, 0, PnlTable.Width, PnlTable.Height)

End Sub

Masih di Activity BarangList, buat fungsi baru dengan nama FillTableBarang. Lalu masukkan code berikut:

Sub FillTableBarang
	Dim Query As String
	
	Table1.ClearAll

	Query = "SELECT * FROM " & Main.BarangTable	
	Table1.LoadSQLiteDB(Main.SQL, Query, True)
End Sub

Sub FillTableBarang

Dim Query As String

Table1.ClearAll

Query = "SELECT * FROM " & Main.BarangTable

Table1.LoadSQLiteDB(Main.SQL, Query, True)

End Sub

Panggil fungsi FillTableBarang pada event Activity_Resume.

Sub Activity_Resume
	'Refresh data
	'FillLvBarang
	FillTableBarang	
End Sub

Sub Activity_Resume

'Refresh data

'FillLvBarang

FillTableBarang

End Sub

Kemudian ada satu fungsi event lagi yang harus dibuat. Yaitu event CellClick pada Table1. Oke, silakan dibuat seperti code berikut ini:

Sub Table1_CellClick (Col As Int, Row As Int)
	'Saat Row Table diklik, set ID di BarangView dengan ID barang yg diklik/dipilih.
	BarangView.ID = Table1.GetValue(0, Row)
	StartActivity(BarangView)
End Sub

Sub Table1_CellClick (Col As Int, Row As Int)

'Saat Row Table diklik, set ID di BarangView dengan ID barang yg diklik/dipilih.

BarangView.ID = Table1.GetValue(0, Row)

StartActivity(BarangView)

End Sub

Save, kemudian Run/Compile project ini dalam versi Release.
Lalu lihat, apa yang terjadi…

Oke, demikian cara menampilkan data di database dalam bentuk tabel pada Basic4Android. Semoga bermanfaat. Dan tetap nantikan juga tutorial-tutorial menarik lainnya seputar Basic4Android.

Silakan download source code lengkapnya di sini.

About The Author

Chairruddin Arrasid

Orang yang suka belajar, juga suka membaca, juga suka menulis, dan juga suka makan kalau lapar. Dulu waktu kecil tidak punya cita-cita jadi programmer, tapi sekarang jadi programmer. Lah? Mungkin dulu masih belum tahu bahwa programming itu menyenangkan.

0 0 votes

Article Rating

This site uses Akismet to reduce spam. Learn how your comment data is processed.

45 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Othong

9 years ago

Terimakasih banyak, sudah mau berbagai ilmu nya bro (y)

Chairruddin Arrasid

Author

Reply to Othong

9 years ago

Oke, thanks juga sudah berkunjung.

Iswadi

9 years ago

maaf mas mau tanya Dim Table1 As Table yang tabelnya itu apakah ada di designernya basic 4 android???

Chairruddin Arrasid

Author

Reply to Iswadi

9 years ago

Tidak ada mas. Itu diset langsung via code editor-nya.

Anri Purba

8 years ago

Gan… Gimana caranya membuat supaya Multi Line dan tidak memanjang kesamping?

Chairruddin Arrasid

Author

Reply to Anri Purba

8 years ago

Di Initialize Table-nya tambahkan ini:

Table1.SingleLine = False

1	Table1.SingleLine = False

Chairruddin Arrasid

Author

Reply to Anri Purba

8 years ago

Nanti akan seperti ini:

multiline table

Anri Purba

Reply to Chairruddin Arrasid

8 years ago

Database yang mau di load memang satu baris gan tapi panjang, maksud saya bagaimana supaya lebar tabelnya kesamping selebar layar android kita dan teks tadi otomatis kebawah ataupun multi line.

Chairruddin Arrasid

Author

Reply to Anri Purba

8 years ago

Iya, itu juga sama gan. Kalau jumlah karakternya sudah mencapai lebar kolom, pasti akan pindah baris sendiri.

Secara default, lebar kolomnya adalah otomatis sesuai data yang ada di field2 table-nya. Coba set ke manual aja. Set False, AutomaticWidths-nya:

Table1.LoadSQLiteDB(Main.SQL, Query, False)

1	Table1.LoadSQLiteDB(Main.SQL, Query, False)

Chairruddin Arrasid

Author

Reply to Chairruddin Arrasid

8 years ago

Nanti akan seperti ini:

multiline table

Tinggal disesuaikan aja width-nya.
Modif aja Class Table-nya gan, sesuai selera 😀

Anri Purba

Reply to Chairruddin Arrasid

8 years ago

Tapi yang saya buat tidak bisa otomatis gan…. Kalau manual, kolomnya jadi kecil.

Chairruddin Arrasid

Author

Reply to Anri Purba

8 years ago

Kalau pada saat load table (LoadSQLiteDB), parameter AutomaticWidths di-set True, itu udah pasti otomatis lebar kolomnya gan.

Table1.LoadSQLiteDB(Main.SQL, Query, True)

1	Table1.LoadSQLiteDB(Main.SQL, Query, True)

Sebaliknya, kalau di-set False, maka lebar kolomnya tidak otomatis alias manual.

Table1.LoadSQLiteDB(Main.SQL, Query, False)

1	Table1.LoadSQLiteDB(Main.SQL, Query, False)

Kalau lebarnya manual, lalu kekecilan, tinggal dimodif aja di Class Table-nya gan.

wks

8 years ago

gimana kalau mengambil data yang ada di form1 ke modul lain tanpa database? misal di module form1 ada nama : (edittext1), nanti edittext1 yang ada di module form1 mau dipanggil ke modul form2 otomatis seperti ini, nama : (label1). Jadi ketika form1 edittext1 berisi “budi” secara otomatis label1 pada form2 tertulis “budi”. Mohon pencerahannya.

Chairruddin Arrasid

Author

Reply to wks

8 years ago

Oke, begini…

1. Di module form2 (Activity2), buat variabel string untuk menampung data nama (EditText1) yang ada di module form1 (Activity1). Deklarasikan di Process_Globals.

Sub Process_Globals
	'These global variables will be declared once when the application starts.
	'These variables can be accessed from all modules.
	Dim nama As String
End Sub

Sub Process_Globals

'These global variables will be declared once when the application starts.

'These variables can be accessed from all modules.

Dim nama As String

End Sub

2. Di Activity1, saat memanggil Activity2 kirim juga value dari EditText1 dan tampung di variabel string tadi, yaitu nama.

Activity2.nama = EditText1.Text
StartActivity(Activity2)

1 2	Activity2.nama = EditText1.Text StartActivity(Activity2)

3. Lalu di Activity2, pada Activity_Create isi Label1 dengan variabel nama tadi.

Sub Activity_Create(FirstTime As Boolean)
	'Do not forget to load the layout file created with the visual designer. For example:
	'Activity.LoadLayout("Layout1")
	Label1.Text = nama
End Sub

Sub Activity_Create(FirstTime As Boolean)

'Do not forget to load the layout file created with the visual designer. For example:

'Activity.LoadLayout("Layout1")

Label1.Text = nama

End Sub

MUbin

8 years ago

MAS, kalo mau buat tabel di androidnya gmn. cara dari awal pembuatan tabel kalo boleh mas

Chairruddin Arrasid

Author

Reply to MUbin

8 years ago

Ini tabel apa? Tabel di database atau tabel seperti di atas? Kalau tabel di database bisa cek postingan saya yang ini.

david

8 years ago

mas saya kok gak ada table.bas ya

Chairruddin Arrasid

Author

Reply to david

8 years ago

Itu ada di poin 2.

david

Reply to Chairruddin Arrasid

8 years ago

poin 2 bisa mas, tapi pas milih table.bas gak ada

Chairruddin Arrasid

Author

Reply to david

8 years ago

ya di-download dulu dong.

khairunnas

Reply to Chairruddin Arrasid

8 years ago

downloadnya dimana mas.?

Chairruddin Arrasid

Author

Reply to khairunnas

8 years ago

Di poin 2 mas.

Reno

Reply to Chairruddin Arrasid

8 years ago

Terima kasih tutorialnya, cuma ada kendala pas di run/compile ada error java.lang.RuntimeException: Object should first be initializedsetelah login, salahnya dimana ya. Ditunggu jawabannya, terimakasih

Chairruddin Arrasid

Author

Reply to Reno

8 years ago

Bisa lihat screenshot error-nya?

Reno

Reply to Chairruddin Arrasid

8 years ago

Sudah ketemu mas, terimakasih respondnya yang cepat, satu lagi mas waktu datanya didelete, ada error confirm.png, itu file confirm.png disimpan dimana ya? maaf ngerepotin, maklum newbie

Reno

Reply to Reno

8 years ago

Maaf mas, nambah ngerepotin lagi, kalau ingin membuat penjumlahan automatis gimana ya? misal di tabel kan ada kolom-A dan kolom-B nah di kolom C adalah jumlah dari ke 2 kolom tersebut, sebelumnya terimakasih, terus berkarya dan sehat selalu

Chairruddin Arrasid

Author

Reply to Reno

8 years ago

Untuk yang error waktu delete, itu karena tidak ada file confirm.png. Jadi, coba taruh ini di folder Files yang ada di folder Project-nya.

Untuk hasil penjumlahan, sebaiknya dibuatkan kolom/field tersendiri di table-nya. Misal field total. Field ini diisi otomatis saat melakukan insert data ke table ybs. Jadi, nanti tinggal select seperti contoh di atas ketika ingin menampilkan datanya.

Nissa

Reply to Chairruddin Arrasid

8 years ago

Kalau rumus di field totalnya gimana mas..

Chairruddin Arrasid

Author

Reply to Nissa

8 years ago

Tinggal tambahkan aja. field3 = field1 + field2.

Dim listOfMaps As List : listOfMaps.Initialize
Dim m As Map : m.Initialize
m.put("field1", edtField1.Text)
m.put("field2", edtField2.Text)
m.put("field3", edtField1.Text + edtField2.Text)
listOfMaps.Add(m)

DBUtils.InsertMaps(SQL, "barang", listOfMaps)
ToastMessageShow("Barang has been created.", True)

Dim listOfMaps As List : listOfMaps.Initialize

Dim m As Map : m.Initialize

m.put("field1", edtField1.Text)

m.put("field2", edtField2.Text)

m.put("field3", edtField1.Text + edtField2.Text)

listOfMaps.Add(m)

DBUtils.InsertMaps(SQL, "barang", listOfMaps)

ToastMessageShow("Barang has been created.", True)

Nissa

Reply to Chairruddin Arrasid

8 years ago

Terimakasih banyak mas, you are is the best, makasih, hebat cepat sekali respondnya.

Chairruddin Arrasid

Author

Reply to Nissa

8 years ago

Oke, sama-sama 🙂

Nissa

Reply to Chairruddin Arrasid

8 years ago

Aduh mas, sebetulnya saya malu, bertanya terus, tapi sudah mentok mas, sudah mencoba tapi buntu, ceritanya begini mas,saya masukin data harian,untuk menampilkan jumlah total data harian tersebut gimana ya, kalau di sqlite nya saya menggunakan fungsi sum bisa, tapi tidak tampil di androidnya, maaf mas banyak tanya dan dah ngerepotin, saya newbie banget, tapi setelah ketemu blog ini sedikit-sedikit saya bisa ngerti. Makasih banget tutornya Mas…..

Chairruddin Arrasid

Author

Reply to Nissa

8 years ago

Coba upload source code-nya, ke google drive atau dropbox. Nanti saya cek.

taufik

8 years ago

mas,kok muncul error kaya gini ya ?

res\values\styles_herustyle.xml:22: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Theme.Holo.Light’.
res\values\styles_herustyle.xml:23: error: Error: No resource found that matches the given name: attr ‘android:actionBarItemBackground’.
res\values\styles_herustyle.xml:28: error: Error: No resource found that matches the given name: attr ‘android:actionBarStyle’.
res\values\styles_herustyle.xml:26: error: Error: No resource found that matches the given name: attr ‘android:actionBarTabStyle’.
res\values\styles_herustyle.xml:27: error: Error: No resource found that matches the given name: attr ‘android:actionDropDownStyle’.
res\values\styles_herustyle.xml:29: error: Error: No resource found that matches the given name: attr ‘android:actionModeBackground’.
res\values\styles_herustyle.xml:31: error: Error: No resource found that matches the given name: attr ‘android:actionModeCloseButtonStyle’.
res\values\styles_herustyle.xml:30: error: Error: No resource found that matches the given name: attr ‘android:actionModeSplitBackground’.
res\values\styles_herustyle.xml:24: error: Error: No resource found that matches the given name: attr ‘android:popupMenuStyle’.
res\values\styles_herustyle.xml:36: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.ActionBar.Solid’.
res\values\styles_herustyle.xml:39: error: Error: No resource found that matches the given name: attr ‘android:backgroundSplit’.
res\values\styles_herustyle.xml:38: error: Error: No resource found that matches the given name: attr ‘android:backgroundStacked’.
res\values\styles_herustyle.xml:43: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.ActionBar’.
res\values\styles_herustyle.xml:48: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.ListPopupWindow’.
res\values\styles_herustyle.xml:52: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.ListView.DropDown’.
res\values\styles_herustyle.xml:56: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.ActionBar.TabView’.
res\values\styles_herustyle.xml:60: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.Spinner’.
res\values\styles_herustyle.xml:66: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.ProgressBar.Horizontal’.
res\values\styles_herustyle.xml:70: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Widget.Holo.Light.ActionButton.CloseMode’.
res\values\styles_herustyle.xml:75: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Theme.Holo’.
res\values\styles_herustyle.xml:76: error: Error: No resource found that matches the given name: attr ‘android:popupMenuStyle’.

Donny

8 years ago

Mas. Numpang tanya. mengapa saya menampilkan data mysql ke dalam bentuk table. Lebar kolom nya tdk bisa otomatis berubah ya? Pdhal AutomaticWidths sudah di set true. Mohon Bantuannya. Thx

Rudi

8 years ago

Salam, mas sy udah coba
1. tpi ketika di run (debug) selalu kosong baik di HP atau via emulator
2. yang muncul hanya tulisan “list barang” dan 0 rows di bawah
3. menu activity nya tidak muncul. (yang dibuat via activity.addmenuitem)

Chairruddin Arrasid

Author

Reply to Rudi

8 years ago

Database-nya sudah ada isinya mas?
Kalau menu, di post ini kan memang tidak ada menunya mas.

Membuat Spinner Bertingkat di Basic4Android | Always Del Heru

7 years ago

[…] Cara import Class atau Code Module bisa lihat postingan ini. […]

heri

6 years ago

Mas Chairruddin Arrasid, kalau menampilkan sub total pada colom harga, gimana scrpit yg harus ditambahin

semprul

6 years ago

gan kalo yang rata kanan per sel nya ada

Akhmad Fajar

5 years ago

Saya sejujurnya mencoba pakai b4a versi 8.30 full bajakan. Saya coba sourcode penuh dari anda saya buka di b4a saya. Terus tanda kesalahanny sangat banyak. Jangan kan tampilan gris keluar, pesannya variabel banyak yang error. Bisa di jelaskan apa factor bajakan dan ori itu jadi pembeda?

Chairruddin Arrasid

Author

Reply to Akhmad Fajar

5 years ago

Bisa jadi karena itu. Bisa jadi juga karena ada libary atau kode yang sudah tidak support lagi di B4A versi terbaru.

puang

5 years ago

Mudah2an mimin blog ini msh aktif ya… commen yg ane liat2 terakhir/terbaru udah 3 tahunan..

Cara merubah data field di table (listview) type number ke currency. di database.db sudah berubah, tp di table(listview) msh number.
Contoh :
Field Harga = 100000 (Tampilan table(listview) type number)
Field Harga = 100000 (Tampilan table(listview) type currency)

Ekspektasi :
Field Harga = Rp 100.000 (Tampilan table(listview) type number/currency

akuuka

5 years ago

library scrollview2d tidak ada, bisa download dimana yaa?… terimakasih

leemizu

Reply to akuuka

4 years ago

https://www.b4x.com/android/forum/threads/lib-scrollview2d.19268/

Dadang

4 years ago

mas, kalau ingin download library-library nya yang free dan lengkap dimana ya?

Related Posts

About The Author

Chairruddin Arrasid