Cara Membuat Spinner Dinamis di Basic4Android
|Awal-awal menggunakan Basic4Android (B4A), saya sempat bingung bagaimana caranya membuat ComboBox atau DropDown List di aplikasi android yang saya buat. Tapi, setelah saya cari sana dan cari sini, akhirnya bingung tersebut hilang setelah saya bertemu dengan Spinner. Ya, karena sudah ketemu cara membuatnya. Jika Anda juga bingung, maka jangan bersedih, karena saya akan share cara membuatnya di sini.
Biasanya data yang saya tampilkan di Spinner ini adalah data dari database local atau SQLite. Tapi, kali ini data yang saya tampilkan di Spinner adalah data dari database server, yaitu MySQL. Dan cara menghubungkan ke database server-nya masih menggunakan Remote Database Connector (RDC).
Agar tutorial ini lebih mudah dimengerti, silakan pahami dulu tutorial pada postingan-postingan di bawah ini:
Cara Menghubungkan Aplikasi Android ke Database MySQL
Karena file project yang akan digunakan adalah dari postingan-postingan tersebut. Sehingga akan saling berkaitan antara yang satu dengan yang lainnya.
Oke, sebelumnya sudah ada database dengan nama delheru-penjualan, yang pada postingan sebelumnya sudah dibuat. Dan di dalamnya ada tabel dengan nama: barang. Sekarang tambahkan satu tabel lagi dengan nama: kategori. Dengan field-field sebagai berikut:
Jika tabel kategori sudah dibuat, maka insert-lah beberapa data. Misalnya seperti ini:
Dan, silakan ikuti langkah-langkah berikut…
- Buka folder RDC Server-nya.
- Kemudian buka config.properties. Tambahkan satu command lagi seperti di bawah ini:
1 |
sql.select_kategori_spinner=SELECT id, nama FROM kategori |
- Buka project MyConnectDB.
- Pada Class DBRequestManager buat fungsi baru dengan nama: LoadRDCSpinner. Fungsi ini digunakan untuk menampilkan data hasil dari request ke server via RDC ke Spinner.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Public Sub LoadRDCSpinner(Table As DBResult, Spinner1 As Spinner, SpinnerMap As Map, new As Boolean, id As String) Spinner1.Clear Spinner1.Add("") For row = 0 To Table.Rows.Size-1 Dim Record() As Object = Table.Rows.Get(row) Spinner1.Add(Record(1)) 'Tampung ID-nya di map. SpinnerMap.Put(Record(1), Record(0)) Next 'Jika bukan create barang baru, maka select kategori susuai kategori_id barangnya. If new = False Then For i = 0 To Table.Rows.Size-1 Dim Record() As Object = Table.Rows.Get(i) Dim s As String = Record(0) If s = id Then Spinner1.SelectedIndex = i+1 End If Next End If End Sub |
- Beralih ke activity BarangView, pada Sub Globals deklarasikan object-object baru seperti di bawah ini:
1 2 3 4 |
Dim LblKategori As Label Dim SpnKategori As Spinner Dim MapKategori As Map Dim KategoriId As Int |
- Karena terdapat tambahan beberapa object baru seperti Label dan Spinner yang akan ditampilkan di activity, maka fungsi-fungsi (seperti InitObject, SetLabel, GetDataBarang, dan SetObjectView) yang terpanggil pada event Activity_Create harus dirombak lagi. Silakan ubah menjadi seperti code berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
Sub InitObject LblKode.Initialize("") LblNama.Initialize("") LblKategori.Initialize("") LblHarga.Initialize("") LblKeterangan.Initialize("") EdtKode.Initialize("EdtKode") EdtNama.Initialize("EdtNama") SpnKategori.Initialize("SpnKategori") MapKategori.Initialize EdtHarga.Initialize("EdtHarga") EdtKeterangan.Initialize("EdtKeterangan") BtnSave.Initialize("BtnSave") BtnDelete.Initialize("BtnDelete") PnlBarang.Initialize("PnlBarang") 'Set keyboard menjadi number. EdtHarga.InputType = EdtHarga.INPUT_TYPE_NUMBERS End Sub Sub SetLabel LblKode.Text = "Kode" LblNama.Text = "Nama" LblKategori.Text = "Kategori" LblHarga.Text = "Harga" LblKeterangan.Text = "Keterangan" 'Disable kode, karena ini akan terisi otomatis. EdtKode.Enabled = False 'Jika create barang baru, Button-nya beri nama: Save. Dan disable Button delete. 'Selain itu, Button-nya beri nama: Update. Dan enable Button delete. If NewData Then BtnSave.Text = "Save" BtnDelete.Enabled = False Else BtnSave.Text = "Update" BtnDelete.Text = True End If BtnDelete.Text = "Delete" End Sub Sub GetDataBarang 'Jika create baru, maka set kode otomatis dan kosongkan form-form yg lain. 'Selain itu, maka request data barang dari database server sesuai ID-nya. If NewData Then Dim kode As String = GenerateKode EdtKode.Text = kode EdtNama.Text = "" SpnKategori.SelectedIndex = 0 EdtHarga.Text = 0 EdtKeterangan.Text = "" 'Request data kategori ke server GetDataKategori Else ProgressDialogShow2("Loading data from server... Please wait!", False) Dim cmd As DBCommand cmd.Initialize cmd.Name = "select_barang_by_id" cmd.Parameters = Array As Object(ID) reqManager.ExecuteQuery(cmd, 0, "select_barang_by_id") End If End Sub Sub SetObjectView Dim ctop As Int = 20dip Dim labelHeight As Int = 30dip Dim textHeight As Int = 40dip 'Taruh Label dan EditText di Panel. PnlBarang.AddView(LblKode, 20dip, ctop, 100%x-40dip, 30dip) : ctop = ctop + labelHeight PnlBarang.AddView(EdtKode, 20dip, ctop, 100%x-40dip, 40dip) : ctop = ctop + textHeight PnlBarang.AddView(LblNama, 20dip, ctop, 100%x-40dip, 30dip) : ctop = ctop + labelHeight PnlBarang.AddView(EdtNama, 20dip, ctop, 100%x-40dip, 40dip) : ctop = ctop + textHeight PnlBarang.AddView(LblKategori, 20dip, ctop, 100%x-40dip, 30dip) : ctop = ctop + labelHeight PnlBarang.AddView(SpnKategori, 20dip, ctop, 100%x-40dip, 40dip) : ctop = ctop + textHeight PnlBarang.AddView(LblHarga, 20dip, ctop, 100%x-40dip, 30dip) : ctop = ctop + labelHeight PnlBarang.AddView(EdtHarga, 20dip, ctop, 100%x-40dip, 40dip) : ctop = ctop + textHeight PnlBarang.AddView(LblKeterangan, 20dip, ctop, 100%x-40dip, 30dip) : ctop = ctop + labelHeight PnlBarang.AddView(EdtKeterangan, 20dip, ctop, 100%x-40dip, 40dip) : ctop = ctop + textHeight 'Taruh Panel dan Button di activity. Activity.AddView(PnlBarang, 0,0,100%x, 85%y) Activity.AddView(BtnSave, 0, 85%y, 50%x, 15%y) Activity.AddView(BtnDelete, 50%x, 85%y, 50%x, 15%y) End Sub |
- Sebelumnya di fungsi event BtnSave_Click parameter yang dikirimkan ke server untuk kategori_id langsung ditulis: 1. Maka, kali ini ubah menjadi KategoriId. Sebuah variabel integer yang menampung kategori_id. Perhatikan code baris ke 10 dan 18.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Sub BtnSave_Click() 'Jika create baru, maka save. 'Selain itu, maka update. If NewData Then ProgressDialogShow2("Inserting data to server... Please wait!", False) Dim cmd As DBCommand cmd.Initialize cmd.Name = "insert_barang" 'parameters: kode, nama, harga, keterangan, kategori_id cmd.Parameters = Array As Object(EdtKode.Text, EdtNama.Text, EdtHarga.Text, EdtKeterangan.Text, KategoriId) reqManager.ExecuteCommand(cmd, "insert_barang") Else ProgressDialogShow2("Updating data to server... Please wait!", False) Dim cmd As DBCommand cmd.Initialize cmd.Name = "update_barang" 'parameters: nama, harga, keterangan, kategori_id, id cmd.Parameters = Array As Object(EdtNama.Text, EdtHarga.Text, EdtKeterangan.Text, KategoriId, ID) reqManager.ExecuteCommand(cmd, "update_barang") End If End Sub |
- Kemudian pada event JobDone, ubah code yang sudah ada menjadi seperti berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
Sub JobDone(Job As HttpJob) If Job.Success = False Then Log("Error: " & Job.ErrorMessage) ProgressDialogHide Else If Job.JobName = "DBRequest" Then Dim result As DBResult = reqManager.HandleJob(Job) Select result.Tag Case "select_barang_by_id" 'Load data barang dara database server. Dim m As Map = reqManager.GetRecsTable(result) LoadDataBarang(m) 'Request data kategori ke server GetDataKategori Case "insert_barang" 'Saat data barang sukses di-insert, munculkan notif. ToastMessageShow("Barang has been created.", True) 'Balik lagi ke List Barang Activity.Finish Case "update_barang" 'Saat data barang sukses di-update, munculkan notif. ToastMessageShow("Barang has been updated.", True) 'Refresh data barang GetDataBarang Case "delete_barang" 'Saat data barang sukses di-delete, munculkan notif. ToastMessageShow("Barang has been deleted.", True) 'Balik lagi ke List Barang Activity.Finish Case "select_ketegori_spinner" 'Tampilkan data ketegori ke dalam Spinner. reqManager.LoadRDCSpinner(result, SpnKategori, MapKategori, NewData, KategoriId) End Select End If ProgressDialogHide End If Job.Release End Sub |
- Pada fungsi LoadDataBarang set value variabel KategoriId dengan kategori_id barang tsb. Perhatikan code baris ke 10.
1 2 3 4 5 6 7 8 9 10 11 12 |
Sub LoadDataBarang(MapRDC As Map) Dim m As Map : m.Initialize For i = 0 To MapRDC.Size-1 m = MapRDC.GetValueAt(i) Activity.Title = "View: " & m.Get("nama") EdtKode.Text = m.Get("kode") EdtNama.Text = m.Get("nama") EdtHarga.Text = m.Get("harga") EdtKeterangan.Text = m.Get("keterangan") KategoriId = m.Get("kategori_id") Next End Sub |
- Buat fungsi baru dengan nama: GetDataKategori. Fungsi ini digunakan untuk melakukan request data kategori ke server.
1 2 3 4 5 6 |
Sub GetDataKategori Dim cmd As DBCommand cmd.Initialize cmd.Name = "select_kategori_spinner" reqManager.ExecuteQuery(cmd, 0, "select_ketegori_spinner") End Sub |
- Dan yang terakhir, buat satu fungsi event lagi, kali ini event ItemClick untuk Spinner kategorinya.
1 2 3 4 5 6 7 8 9 |
Sub SpnKategori_ItemClick(Position As Int, Value As Object) 'Set kategori_id sesuai kategori yang dipilih. 'Jika kategori tidak dipilih set jadi -1. If MapKategori.Get(Value) <> Null Then KategoriId = MapKategori.Get(Value) Else KategoriId = -1 End If End Sub |
- Save, kemudian Run/Compile project ini dalam versi Release.
- Lalu lihat, apa yang terjadi…
- Saat Create Barang, pada gambar di bawah terlihat data kategorinya sudah muncul di Spinner-nya.
- Saat detail barang dibuka, kategorinya diset otomatis sesuai kategori barangnya.
- Apakah bisa mengubah kategori dari barang tersebut? Tentu bisa, tinggal pilih kategorinya, lalu tekan tombol Update.
Oke, demikian cara membuat Spinner dinamis yang datanya dari database MySQL di B4A. Semoga bermanfaat. Jika masih ada kesulitan atau problem jangan ragu untuk bertanya di form komentar. Dan… Tetap nantikan juga tutorial-tutorial menarik lainnya seputar Basic4Android.
Happy Coding! 🙂
Mantap gan….
Thanks gan 🙂
hajar bray 😀
Siap bray 😎
nanya lagi ah gan…ane dah buat sampe activity transaksi nih …mohon petunjuk dong kalo generate kode transaksi berdasarkan nomer urut + tanggal…gimana yah…?? hhehehe 🙂
1. Cari dulu count data di tabel transaksinya, caranya bisa liat di postingan ini No 6, code baris ke 11. Lalu tampung count transaksinya di variabel integer misal: OrderCount.
2. Terus buat fungsi generate-nya:
3. Waktu insert transaksi tinggal panggil aja:
oke..masih blm solved gan …nanya lagi ah …hehehe…sorri ye gan kalo keseringan…gini ane punya 2 activity…login_act..dan welcome_act…..gini alurnya ..begitu login sukses kemudian buka welcome act…nah di welcome act itu ada label kodeorder yang tergenerate otomatis begitu login sukses…mohon pencerahan..udah utak atik dari pagi…hehehe..thx gan
Kalo generate-nya gitu, apa gak takut bentrok ntar kodenya? Bisa jadi nanti ada dua kode ORD-06150001 misalnya 😀
Hhmm…kalo loginnya berbarengan sih mungkin bisa bentrok…apa pada saat insert data aja gitu gan…kalo menurut agan gimana enaknya..?? Mohon Pencerahannya gan…
Biar login gak berbarengan bisa juga loh kejadian kayak itu. Soalnya itu kan generate-nya gak sekaligus nge-save/insert.
Gini, misal sekarang si A login. Sementara count transaksi bulan ini: 249, berarti generate kodenya: ORD-06150250. Lalu beberapa saat kemudian si B login nih, dan masih belum di-save/insert tuh transaksi si A. Yang berarti count transaksinya masih: 249. Apa yang terjadi? Ya hasil generate kodenya sama kayak si A, yaitu: ORD-06150250. Hayooo.. 😀
Jadi mending generate kodenya waktu insert transaksi aja. Kayak yang di Master Barang itu.
Nah..iya gan…kalo ane tambahin button mulai order gimana..?? Jadi setelah login sukses – generate kode di welcome – button_click di activity welcome = insert data order..karena kan di db ane ada table order sama orderdetail….
Oke, mending gitu aja. Biar aman.
Nah…itu dia gan…mohon pencerahan dah…bingung pas login sukses kemudian buka welcome langsung generate kode…hehehehe
Tinggal bikin fungsi baru buat insert order gan. Contohnya kayak insert barang itu. Panggil fungsinya waktu login sukses.
masih belum solved juga gan…bingung banget…ini kode jobdone di login activity
====trus ini fungsi getkode di welcome activity….
====gimana lagi yah gan..? help me please…:)
Coba saya mau liat command untuk insert order di RDC config-nya.
Btw, salah nih penempatannya:
Itu count data user. Seharusnya count order. Jadi kudu buat fungsi GetDataOrder dulu. Tangkep di JobDone dia count order-nya. Contoh buat cari count dari suatu tabel udah saya jabarin di master barang (CRUD MYSQL).
Kalau untuk komponen kyk datepicker pake apa ya? boleh di sharekah?
Ini keren nih datepicker-nya. Dicoba aja dulu.
gan. ga bias ada akses untuk download link datepicker
bisa dibantu ga gan?
Harus punya akun lisensi di sana biar bisa download. Kalau mau bikin datepicker bisa juga pakai ini.
thanks ya mas heru
gan kalo misalnya membuat dengan db sqlite, syntak no 2 ditaruh dimana ? dan apa tidak perlu foreign key ?
Fungsi GetDataKategori (poin 10) ganti seperti poin 4. Konsepnya hampir sama. Bedanya, kalau yg di postingan ini kan datanya ngambil dari server, lalu ditampung di Table As DBResult. Nah, kalau pakai sqlite datanya ambil dari query ke sqlite-nya, lalu tampung di sebuah List.
Misalnya:
Nanti pada poin 6 kode baris 57 dan poin 8 kode baris 15, ubah kayak gini:
mas untuk poin 8 saya agak kurang paham, apa juga harus buat sub job done, atau “GetDataKategori” nya ditaruh di sub GetDataKategori
Oh, kalau cuma pakai db local gak usah bikin jobdone. Berarti skip aja yang poin 8. Jadi fungsi GetDataKategori cuma dipanggil di GetDataBarang, baik yang create baru atau bukan.
Terus yang fungsi GetDataBarang harus diubah juga, contohnya bisa liat fungsi LoadBarang yang ada di poin 16 di artikel ini.
gan saya nemuin kendala (“Pada SubGetKategori keluar notice : parameter name cannot hide global variable name”), ss erornya saya upload di facebook
Mas, kalo saya juga mau munculin “field keterangan” ditambah apalagi ?, jadi ketika pilih kategori (ex: Elektronik —> nanti ada satu text box keisi keterangan di setiap kategori), Terimakasih
Mas kalo saya mau munculin “field keterangan” juga gimana caranya. Ex: Ketika memilih kategori “elektronik” —–> nanti ada textbox terisi dengan keterangan elektronik, Dan seterusnya (Setiap pilih kategori otomatis muncul keterangannya juga) Terimakasih
o iya mas saya juga mau tannya misalnya, kita mau masukin kategori lain (jadi ada dua tabel yang dipanggil), apa yang perlu ditambahkan, saya sudah coba menambah variabel “KategoriId2”, terus ikutin langkah diaatas tapi tetep ndak mau muncul untuk KategoriId2. Terimakasih
Mas kalo cara bikin sub kategori bagaimana ? misalnya spn1 pilih printer, kemudian spn 2 ilih jenis printer (dua-duanya pada satu tabel). Mohon pencerahan terimakasih
Nanti dah saya buat tutorialnya.
Mas waktu spinernya saya kelompokkan (ex: tampilkan kode berdasarkan komputer), ketika di save id spiner yang dipilih tidak sesuai kalo tidak di kelompokkan. (ex : waktu tidak dikelompokkan id komputer no=6 dan waktu dikelompokkan id komputer no=1) Ketika di save/dalam database
ga ada link source nya
klo mau nambah file foto gimana min?