CRUD OFFLINE - 2 (Form)

Membuat Form Utama.

Buat project baru B4A .

Simpan dengan nama main

Pindahkan Database.db kedalam folder Files

Masukkan Database.db kedalam project, Pilih Files Manager dan Klik Add Files. Pilih Database.db

Database.db sudah masuk kedalam Files Manager

Buka Designer dengan pilih menu Designer dan Open Designer.

Tampilan Designer

Pilih Menu Add View dan Button

Masukkan 4 Button kedalam Form / Activity

Beri nama pada Button1, Text : Create

Beri nama pada Button2, Text : Read

Beri nama pada Button3, Text : Update

Beri nama pada Button4, Text : Delete

Simpan Form kita dengan nama main

Kemudian kita Generate Button dengan klik kanan Pilih Generate (Target: Main) , Dim Button1 As Button, lakukan hal yang sama kepada ke 4 button.

Button kita sudah dideklarasikan di sub Global

Kemudian kita loadlayout pada activity_create, Activity.LoadLayout("main")

Buat Module baru, Pilih menu Project -> Add New Module -> Pilih Code Module.

Simpan Module dengan nama MdMain

Aktifkan Library SQL, Pilih Tab Libraries dan Centang SQL, jika anda tidak punya library SQL, silahkan Download Disini

Pada MdMain Ketikkan pada Sub Process_Global

Dim SQL1 As SQL

Dim CRS1 As Cursor

Pada pertama kali Aplikasi berjalan kita akan memindahkan Database.db pada direktori Asset ke dalam Direktori Internal. Ketikkan Script Diatas.

Kemudian Inisialisasi File Database.db atau kita koneksikan.

Oh iya, sebaiknya kita beri nama Aplikasi kita dengan Mengganti nama di #ApplicationLabel : CRUD Offline

Kita desain tombol yang kita buat dengan script Diatas, sebagaimana waktu kita buat tombol untuk Login.

Kita Jalankan Aplikasi Kita

Inilah Tampilan Aplikasi kita..

Selanjutnya kita akan benar benar melakukan CRUD pada tutorial selanjutnya.

Tetap Pantau Blog ini.

Terima Kasih. AJKL

CRUD OFFLINE - 1 (Database)

PERSIAPAN DATABASE

1. Kali ini kita akan membuat aplikasi CRUD didalam basic4android, kita akan menggunakan database offline. Database yang akan kita gunakan adalah SQLite yang bisa anda download di https://sqlitebrowser.org/ atau anda bisa mendownload disini SQLite-3.11.2-win32 atau SQLite-3.11.2-win64.
     Jalankan Setup nya untuk menginstall aplikasi pada komputer anda.

Setelah Selesai Menginstall anda bisa jalankan DB Browser for SQLite untuk membuat database  baru.

Ikon SQLite

Inilah tampilan awal SQLite.

Untuk membuat Database baru. Klik New Database

Simpan DiFolder yang anda tentukan, sebaiknya disimpan difolder File didalam Folder Project B4A anda.

Tampilan Edit table definition.

Pada Kolom Tabel anda bisa membuat nama table yang ingin dibuat, saat ini saya akan membuat table Barang, kita akan coba menggunakan database yang simple saja dulu.

Kemudian anda bisa membuat field field apa saja yang dibuat dalam Table Barang. Klik Add Field.

Pada name field 1 ganti menjadi id, Type tetap INTEGER jangan lupa karena ini field unique centang PK (Primary Key) dan AI (Auto Increment) untuk membuat nomor unique.

Selanjutnya anda bisa mengisikan beberapa field berikut pada gambar.

Selesailah membuat Database, database siap digunakan.

Selanjutnya kita akan terus melanjutkan pelajaran CRUD pada B4A. Tetap pantau blog ini.

Terima Kasih, AJKL.

IKON DI EDITTEXT LOGIN

     Kali ini saya ingin memerikan tutorial sambungan dari tutorial sebelumnya yaitu Desain Login, disini saya hanya ingin menambahkan ikon didalam EditText pada form Login biar tambah cantik form login kita.

Sebelumnya tampilan Login seperti ini.

1. Siapkan gambar ikon dalam format PNG yang akan kita masukkan di Edittext. Tidak usah terlalu besar dalam hal ini saya membuat gambar png dengan ukuran 40px X 40px saja.

     Simpan dalam Folder File didalam Project kita.

2. Dua file png ini tidak kita masukkan kedalam Form Designer ya. Tapi kita masukkan ke Asset. 

Pilih Tab File di Kanan Bawah kemudian klik Add Files, Pilih kedua File png kita.

File sudah masuk ke Asset kita.

3. Setelah itu masukkan Library JavaObject. Pada kanan bawah pilih Tab Libraries Manager. Cari JavaObject dan Centang.

4. Buat Sub baru dengan script berikut ini

Sub ikonpengguna(EditTxt As EditText)
Dim ETxt As JavaObject = EditTxt
Dim icon As BitmapDrawable
icon.Initialize(LoadBitmap(File.DirAssets,"pengguna.png"))
ETxt.RunMethod("setCompoundDrawablesWithIntrinsicBounds",Array As Object(icon,Null,Null,Null))
End Sub

Sub ikonpassword(EditTxt As EditText)
Dim ETxt As JavaObject = EditTxt
Dim icon As BitmapDrawable
icon.Initialize(LoadBitmap(File.DirAssets,"password.png"))
ETxt.RunMethod("setCompoundDrawablesWithIntrinsicBounds",Array As Object(icon,Null,Null,Null))

End Sub

5. Terakhir kita load Sub ikonpengguna dan ikonpassword kedalam Edittext kita.
     Pada Activity_Create tambah dua script ini seperti dibawah.

ikonpengguna(EditText1)

ikonpassword(EditText2)

Ketika Kita Compile Run / F5, seperti ini tampilan pada emulator.
Ikon sudah muncul pada kedua EditText Penguna dan Password.

     Demikianlah Tutorial Kali ini. Pantau terus blog ini untuk terus belajar membuat aplikasi android dengan ringan dan mudah.

Terima Kasih. AJKL.

DESAIN LOGIN

     Kali ini kita akan belajar membuat tampilan Login.

1. Langsung saja buka aplikasi B4A anda.

     Ketikan pada Activity_Create

     Activity.LoadLayout("login")

2. Berhubung kita hanya akan membuat desain saja, langsung kita buka Designer -> open Designer (Jangan lupa disimpan dulu)

3. Kita atur seperti pada tutorial splash screen.

        a. Add View -> ImageView

        b. Add Files -> login.png

        c. Rubah Horizontal dan Vertical Anchor ImageView

Pada Drawable ImageView -> Image File pilih dropdown login.png

Kemudian Simpan

4. Ketika kita Compile dan dijalankan pada Emulator Klik Run / F5.

     Inilah tampilan pada emulator, hanya saja saya tidak suka terdapat Tittle Activity diatas, untuk menghilangkan nya. 

     Edit pada Activity Attributes #IncludeTittle menjadi False yang awal True.

Maka sudah tidak ada Title diatas.

5. Selanjutnya kita akan masukkan 2 EditText dan 1 Button pada form login kita.

Jika sudah maka tampilan pada emulator seperti ini.

6. Selanjutnya kita akan atur tinggi dan lebar edittext dan button serta posisi nya.

     Pada Script General ketikkan script berikut

     EditText1.Height = 50

     EditText2.Height = 50

     Button1.Height = 50

     EditText1.SetLeftAndRight(10%x,90%x)

     EditText2.SetLeftAndRight(10%x,90%x)

     Button1.SetLeftAndRight(10%x,90%x)

     EditText1.SetTopAndBottom(60%y,60%y+EditText1.Height)

     EditText2.SetTopAndBottom(70%y,70%y+EditText2.Height)

     Button1.SetTopAndBottom(80%y,80%y+Button1.Height)

Pada emulator akan tampak seperti ini.

7. Selanjutnya kita akan membuat Hint pada EditText dan merubah tipe EditText2 menjadi Password

     Properties pada EditText1 

     Properties ada EditText2

 

     Properties ada Button1

Pada emulator akan tampak seperti ini

8. TAmpilan Edittext dan button saya rasa kurang memikat, saya ingin Edittext dan button memiliki sudut yang bundar dan berbentuk flat.

Ketikkan Script berikut pada Globals dan Activity_Create

Sub Globals

Dim EditText1 As EditText

Dim EditText2 As EditText

Dim Button1 As Button

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("login")

Dim cdText As ColorDrawable

cdText.Initialize2(Colors.ARGB(200,255,255,255),40dip,1,Colors.Black)

EditText1.Background = cdText

EditText2.Background = cdText

Dim cdButton As ColorDrawable

cdButton.Initialize2(Colors.ARGB(150,60,64,184),40dip,1,Colors.White) 

Button1.Background = cdButton

End Sub

Pada emulator akan tampak seperti ini

     Demikianlah tutorial kali ini, untuk mendesain form login, pantau terus Blog ini dan nantikan Tutorial selanjutnya.

Terima Kasih. AJKL