CRUD TinyDB App Inventor, Kodular

Pada tutorial App Inventor dan Kodular kali ini saya akan memberikan totorial CRUD dengan App Inventor dan Kodular menggunakan TinyDB sebagai database pada aplikasi android. CRUD adalah singkatan dari Create, Read, Update, dan Delete. Aplikasi yang akan dibuat kali ini akan menggunakan konsep CRUD yang dapat menyimpan data (Save), merubah data (Update), dan menghapus data (Delete).

TinyDB adalah komponen yang digunakan untuk menyimpan data aplikasi pada App Inventor ke dalam perangkat smartphone android. Yang mana penyimpanan data ini bersifat offline dan data yang disimpan tidak dapat dibagikan ke smartphone lain, data hanya bisa diakses pada satu smartphone saja. Data yang disimpan pada TinyDB akan tersedia dan terlihat pada saat aplikasi berjalan. Berbeda dengan sistem CRUD yang menggunakan MySQL yang datanya dapat dilihat oleh banyak perangkat.

Pada tutorial kali ini aplikasi yang dibuat akan menggunakan komponen Listview untuk menampilkan data yang sudah tersimpan di TinyDB. Tutorial kali ini juga bisa digunakan di Kodular karena bahasa pemograman pada Kodular sama dengan App Inventor.

Membuat aplikasi CRUD TinyDB App Inventor dan Kodular

Aplikasi yang dibuat yaitu aplikasi biodata masyarakat Indonesia berbasis android yang mana pada aplikasi ini dapat menyimpan, merubah, dan menghapus biodata seseorang. Disini saya akan memberikan contoh dengan menggunakan App Inventor.

Buka App Inventor

Pertama yang dilakukan adalah masuk terlebih dahulu ke App Inventor, kamu bisa menggunakan App Inventor Offline ataupun Online. Jika menggunakan App Inventor online lakukan login terlebih dahulu untuk melanjutkan ke halaman untuk membuat aplikasi android.

Create Project

Buat project baru dan berikan nama sesuai dengan keinginan kamu, atau kamu bisa memberikan nama projectnya dengan TinyDB. Sesuai dengan tutorial kali ini yaitu membuat aplikasi CRUD dengan TinyDB di App Inventor atau Kodular.

Desain Aplikasi

Setelah membuat project, sekarang saatnya membuat desain tampilan pada aplikasi dan sekaligus mengumpulkan komponen yang akan digunakan pada apllikasi CRUD TinyDB.

Kamu dapat mengikuti desain aplikasinya seperti gambar dibawah ini

untuk komponen “Layout” yang digunakan pada aplikasi ini saya menggunakan komponen Table Arrangement untuk membuat layout form input data.

selanjutnya komponen pada “User Interface” yang digunakan yaitu Label, TextBox, Button, ListView, dan Notifier. Untuk komponen Label pada aplikasi ini ada 3 yaitu Label NIK, Label Nama, dan Label Umur.

Kemudian untuk komponen Button ada 3 yang digunakan, masing-masing Button digunakan untuk Button Save, Button Update, Button Delete. Untuk komponen Notifier digunakan sebagai notifikasi ketika pengguna Save data maka akan muncul notifikasi, begitupun juga ketika pengguna melakukan Update data dan Delete data.

Komponen ListView yang digunakan pada aplikasi ini hanya 1, ListView digunakan untuk menampilkan data yang sudah tersimpan di TinyDB.

Komponen TinyDB dapat ditemukan pada bagian “Storage” kamu dapat memilih komponen TinyDB kemudian drag and drop ke layar smartphone. Komponen TinyDB digunakan untuk menyimpan data sementara, dengan memanfaatkan memory pada smartphone.

Kode Program Aplikasi

Inisialisasi

program awalan ketika aplikasi dibuka, berikut adalah programnya.

Blok berwarna ungu adalah prosedur atau kita bisa menyebutnya fungsi dalam program. Prosedur “clear” digunakan untuk membersihkan text input yang ada pada TextBox NIK, Nama, dan Umur. Ini digunakan pada saat selesai menyimpan data ataupun merubah data sehingga jika ingin melalukan input data lagi tidak perlu menghapus secara manual.

selanjutnya untuk “when screen1 initialize” merupakan perintah yang digunakan untuk apa yang akan dilakukan pertama kali pada saat aplikasi pada screen1 terbuka, seperti yang dilihat pada gambar diatas diisi dengan prosedur yang memanggil data yang akan ditampilkan pada ListView.

Kode Program Save

Berikut adalah kode program untuk menyimpan data ke TinyDB.

Prosedur Save berisi perintah untuk menyimpan data yang didapat dari TextBox ke TinyDB. Dengan parameter tag yang di isi dari TextBox NIK.

Kemudian untuk perintah “when Save click” merupakan perintah ketika button save di klik apa yang akan dilakukan. Pada gambar diatas pada saat button save di klik pertama kali yang dilakukan yaitu mengecek apakah panjang dari NIK kurang dari 10 angka jika ya maka akan muncul pesan notifikasi yang berisi pesan bahwa NIK yang dimasukkan belum lengkap.

selain itu juga akan mengecek apakah TextBox nama dan umur telah di isi oleh pengguna atau tidak. Jika ini dikosongkan maka akan muncul peringatan dari notifikasi untuk melengkapi TextBoX tersebut.

Kemudian juga akan mengecek apakah data yang dimasukkan sudah ada pada database TinyDB atau tidak, jika ada data yang sama maka data tidak akan tersimpan dan sistem akan menyarankan untuk merubah data.

Jika semua syarat telah terpenuhi maka data akan tersimpan di TinyDB.

Kode Program Update dan Delete

Berikut adalah kode program untuk merubah data dan menghapus data pada aplikasi.

Penjelasan program dari gambar diatas yaitu ketika Button Update di klik maka akan menyimpan data yang telah dirubah dan kemudian akan menampilkan hasil data yang telah dirubah ke ListView.

untuk Button Delete ketika di klik akan menghapus data pada TinyDB dengan parameter TextBox NIK

Kode Program ListView

Berikut adalah kode program ListView

kode program ini digunakan untuk mengambil data yang ada pada ListView kemudian ditampilkan di form input TextBox NIK, Nama, dan Umur.

Kode Program View Data ListView

Berikut adalah kode program untuk menampilkan data yang tersimpan di TinyDB ke ListView

Kode program ini akan menampilkan data yang ada di TinyDB ke ListView.

Setelah ini selesai kamu dapat menjalankan aplikasinya dengan membuild aplikasinya secara langsung atau jika ingin mengujinya bisa dilakukan dengan emulator dari App Inventor. Kode program pada tutorial ini juga bisa digunakan di kodular kamu bisa mencobanya sendiri.

Bagaimana mudah bukan? jika ada yang ingin ditanyakan kamu dapat memberikan komentar dibawah ini!