Membuat Aplikasi Android Kotlin CRUD Toko Komputer dengan SQLite

Membuat Aplikasi Android Kotlin CRUD Toko Komputer dengan SQLite - Assalamualaikum, pada artikel kali ini kita akan belajar bagaimana cara membuat aplikasi android crud dengan sqlite menggunakan bahasa pemrograman kotlin. Setelah mungkin di artikel lama saya yang berjudul Membuat Aplikasi CRUD Android dengan MySQL Database, kita menggunakan bahasa pemrograman java dan menggunakan REST API PHP.

Aplikasi Toko Komputer dengan SQLite kali ini kita akan menggunakan material design dari google. Material design merupakan sebuah librari yang menjadi standar design dari google yang belakangan ini sedang trend penggunaannya untuk aplikasi modern / kekinian.

SQLite merupakan sebuah librari database lokal. Letak file penyimpanan data dari SQLite berada di direktori lokai dari perangkat terinstall. Maka dari itu, penggunaan SQLite sebatas untuk data lokal yang tidak perlu diakses dari internet. Nah pada artikel kali ini kita akan menggunakan itu.

Mari langsung ke pembahasannya.

Membuat Aplikasi Android Kotlin CRUD Toko Komputer dengan SQLite

Dalam pembuatan aplikasi ini akan terdapat beberapa tahap mulai dari tahap instalasi projek sampai ke tahap pengujian.

Di aplikasi ini akan terdapat 2 activity, yaitu MainActivity untuk penambahan data dan GudangActivity untuk menampilkan data yang ada

Buat Projek Baru

Buatlah sebuah projek baru, pilih Empty Activity kemudian beri nama projek terserah kalian.

Buat Activity Gudang

Buatlah sebuah activity baru, beri nama GudangActivity. Klik kanan pada nama package -> new -> activity. Pilih yang empty activity.

Membuat Layout

Pertama kita bisa memulai dengan membuat layout dari activity yang ada.

MainActivity Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="@color/cream">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/tb_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/prm"
app:titleTextColor="@color/white"
app:title="Alfan Comp Store"
app:logo="@drawable/ic_baseline_computer_24"
app:titleCentered="false"
app:titleMarginStart="20dp"
>
</com.google.android.material.appbar.MaterialToolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="16dp"
>
<com.google.android.material.textview.MaterialTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Input Data Laptop"
app:fontFamily="@font/poppins"
android:textSize="25sp"
android:textAlignment="center"
android:textColor="@color/prm"
android:textStyle="bold"
app:autoSizeTextType="uniform"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="30dp"
>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textBrand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Merek Laptop"
app:errorEnabled="true"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"

>
<AutoCompleteTextView
android:id="@+id/tv_brand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"
/>
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textSeri"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Seri Laptop"
app:errorEnabled="true"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/tv_seri"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
/>

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textHarga"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:hint="Harga"
app:prefixText="Rp">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/tv_harga"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
/>

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textview.MaterialTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textAlignment="center"
android:textColor="@color/prm"
android:fontFamily="@font/poppins"
android:textStyle="bold"
android:text="Status Jual"
/>
<RadioGroup
android:id="@+id/rg_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checkedButton="@id/rb_available"
android:orientation="horizontal"
android:gravity="center"
>

<com.google.android.material.radiobutton.MaterialRadioButton
android:id="@+id/rb_available"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
/>
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="@+id/rb_po"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pre-Order"
/>
</RadioGroup>

<com.google.android.material.textview.MaterialTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textAlignment="center"
android:textColor="@color/prm"
android:fontFamily="@font/poppins"
android:textStyle="bold"
android:text="Tag"
/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:selectionRequired="true"
>
<com.google.android.material.chip.Chip
android:id="@+id/c_ram4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:text="Ram 4GB"
/>
<com.google.android.material.chip.Chip
android:id="@+id/c_ram2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:text="Ram 2GB"
/>
<com.google.android.material.chip.Chip
android:id="@+id/c_intel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:text="Intel"
/>
<com.google.android.material.chip.Chip
android:id="@+id/c_amd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:text="AMD"
/>
</com.google.android.material.chip.ChipGroup>

</LinearLayout>

<RelativeLayout
android:id="@+id/btn_submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/button_1"
android:paddingVertical="15dp"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
>
<TextView
android:id="@+id/tv_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:textColor="@color/white"
android:fontFamily="@font/poppins"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_arrow_right_alt_24"
android:layout_toRightOf="@id/tv_submit"
android:layout_marginLeft="10dp"
/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>

Layout Item Recycler View

Selanjutnya kita bisa memulai dengan membuat layout item untuk recyclerview kita. Layout ini nantinya akan menjadi layout yang ditampilkan di gudang activity untuk menampilkan daftar laptop / komputer yang ada di database SQLite kita.

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="16dp"
app:cardCornerRadius="15dp"
app:cardElevation="10dp"
app:rippleColor="@color/cream"
android:id="@+id/cv_item">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_margin="15dp"
android:weightSum="2"
>
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:src="@drawable/laptop"
/>

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:orientation="vertical"
android:layout_margin="15dp"
>
<com.google.android.material.textview.MaterialTextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Asus GX-150 Nvidia"
android:fontFamily="@font/poppins"
android:textStyle="bold"
android:textColor="@color/prm"
android:textSize="15sp"
/>
<com.google.android.material.textview.MaterialTextView
android:id="@+id/tv_harga"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Rp 10.000.000"
android:fontFamily="@font/poppins"
android:textColor="@color/stone"
android:layout_marginTop="5dp"
/>
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg_tags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
>
</com.google.android.material.chip.ChipGroup>
</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="match_parent"
android:gravity="center"
>
<LinearLayout
android:id="@+id/ll_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@drawable/button_2"
>
<com.google.android.material.textview.MaterialTextView
android:id="@+id/tv_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Available"
android:fontFamily="@font/poppins"
android:textSize="12sp"
android:textColor="@color/white"
android:paddingVertical="3dp"
android:paddingHorizontal="5dp"
android:textAlignment="center"
/>

</LinearLayout>
</LinearLayout>
</LinearLayout>

</com.google.android.material.card.MaterialCardView>

Gudang Activity Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".GudangActivity">

<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/prm"
app:titleTextColor="@color/white"
app:title="Alfan Comp Store"
app:logo="@drawable/ic_baseline_computer_24"
app:titleCentered="false"
app:titleMarginStart="20dp"
>

</com.google.android.material.appbar.MaterialToolbar>

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_gudang"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:listitem="@layout/gudang_items">

</androidx.recyclerview.widget.RecyclerView>

</LinearLayout>

Membuat Data Class Model

Data Class Model merupakan sebuah data class yang berfungsi sebagai model dari data yang ada di database kita. Sama seperti getter dan setter pada java, tetapi di kotlin lebih simple dan clean.

Buatlah sebuah class baru beri nama, LaptopModel.kt

Isi dengan kode berikut :

data class LaptopModel(val id: Int? , val brand: String?, val seri: String?, val harga: Int?, val status: String?, val tags: String?) {
}

Membuat Class SQLiteHelper

SQLite helper / DB helper merupakan sebuah class yang nantinya kita gunakan untuk segala urusan / transaksi data dengan sqlite.

Sesuaikan variabel di kode bawah ini dengan kondisi aplikasi mu,

val DATABASENAME = "tokokompalfan"
val TABLENAME = "laptop"
val COL_ID = "id"
val COL_BRAND = "brand"
val COL_SERI = "seri"
val COL_HARGA = "harga"
val COL_STATUS = "status"
val COL_TAGS = "tags"

class DBHelper(val context: Context): SQLiteOpenHelper(context, DATABASENAME,null,1) {
override fun onCreate(p0: SQLiteDatabase?) {
val createTable = "CREATE TABLE " + TABLENAME + " (" + COL_ID + " INTEGER PRIMARY KEY AUTOINCREMENT," + COL_BRAND + " VARCHAR(20)," + COL_SERI + " VARCHAR(30), " +
COL_HARGA + " INTEGER, " + COL_STATUS + " VARCHAR(20), " + COL_TAGS + " VARCHAR(50) )"
p0?.execSQL(createTable)
}

override fun onUpgrade(p0: SQLiteDatabase?, p1: Int, p2: Int) {
TODO("Not yet implemented")
}

fun insertData(laptop: LaptopModel) {
val database = this.writableDatabase
val contentValues = ContentValues()
contentValues.put(COL_BRAND, laptop.brand)
contentValues.put(COL_SERI, laptop.seri)
contentValues.put(COL_HARGA, laptop.harga)
contentValues.put(COL_STATUS, laptop.status)
contentValues.put(COL_TAGS, laptop.tags)
val result = database.insert(TABLENAME, null, contentValues)
if (result == (0).toLong()) {
Toast.makeText(context, "Failed", Toast.LENGTH_SHORT).show()
}
else {
Toast.makeText(context, "Success", Toast.LENGTH_SHORT).show()
}
}

@SuppressLint("Range")
fun readData(): ArrayList<LaptopModel> {
val list: ArrayList<LaptopModel> = ArrayList()
val db = this.readableDatabase
val query = "Select * from $TABLENAME"
val result = db.rawQuery(query, null)
if (result.moveToFirst()) {
do {
val id = result.getString(result.getColumnIndex(COL_ID)).toInt()
val brand = result.getString(result.getColumnIndex(COL_BRAND))
val seri = result.getString(result.getColumnIndex(COL_SERI))
val harga = result.getString(result.getColumnIndex(COL_HARGA)).toInt()
val status = result.getString(result.getColumnIndex(COL_STATUS))
val tags = result.getString(result.getColumnIndex(COL_TAGS))
val laptop = LaptopModel(id,brand,seri,harga,status,tags)
list.add(laptop)
}
while (result.moveToNext())
}
return list
}

fun deleteData(id: Int?){
val db = this.readableDatabase
db.execSQL("delete from ${TABLENAME} where ${COL_ID} = '"+id+"'")
}

}

Bisa diliat di kode atas tadi, ada fungsi read data, insertData dan deleteData. Fungsi nantinya yang akan kita panggil ketika proses CRUD di aplikasi.

Membuat RecyclerView Adapter

RecyclerView Adapter merupakan sebuah class yang berfungsi untuk menjembatani data dengan view / layout.

Buat sebuah class baru beri nama GudangAdapter.

class GudangAdapter(private var laptopList: ArrayList<LaptopModel>,private val context: Context):
RecyclerView.Adapter<GudangAdapter.MyViewHolder>() {
class MyViewHolder(view: View): RecyclerView.ViewHolder(view){
val binding = GudangItemsBinding.bind(view)
val cv_item = binding.cvItem
val tv_title = binding.tvTitle
val tv_harga = binding.tvHarga
val cg_tags = binding.cgTags
val ll_status = binding.llStatus
val tv_status = binding.tvStatus

}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GudangAdapter.MyViewHolder {
val itemView = LayoutInflater.from(parent.context).
inflate(R.layout.gudang_items,parent,false)
return MyViewHolder(itemView)
}

override fun onBindViewHolder(holder: GudangAdapter.MyViewHolder, position: Int) {
holder.tv_title.text = laptopList.get(position).brand + " " + laptopList.get(position).seri
holder.tv_harga.text = "Rp. ${laptopList.get(position).harga.toString()}"
holder.tv_status.text = laptopList.get(position).status

var status = laptopList.get(position).status
if(status == "Available"){
holder.ll_status.setBackgroundResource(R.drawable.button_2)
}else{
holder.ll_status.setBackgroundResource(R.drawable.button_3)
}

val arrTags = laptopList.get(position).tags?.split(",")?.toTypedArray()
if (arrTags != null) {
for (tags in arrTags){
val chip: Chip = Chip(context)
chip.text = tags
chip.ensureAccessibleTouchTarget(50)
holder.cg_tags.addView(chip)
}
}

holder.cv_item.setOnLongClickListener {
val mBuilder = AlertDialog.Builder(context)

mBuilder.setMessage("Ingin Menghapus Data?")
.setCancelable(false)
.setPositiveButton("Ya",DialogInterface.OnClickListener{
dialogInterface, i ->
val dbHelper = DBHelper(context)
dbHelper.deleteData(laptopList.get(position).id)

laptopList.removeAt(position)
notifyDataSetChanged()

mBuilder.show().dismiss()
})
.setNegativeButton("Tidak", DialogInterface.OnClickListener { dialogInterface, i ->
dialogInterface.cancel()
})

mBuilder.setOnDismissListener {
notifyDataSetChanged()
}

mBuilder.setTitle("Hapus Data")
mBuilder.show()

return@setOnLongClickListener true
}

}

override fun getItemCount(): Int {
return laptopList.size
}

}

Activity Kotlin

Setelah tadi kita membangun fondasi aplikasi nya, mari kita lanjut di bagian activity nya.

MainActivity

class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private val tagList = ArrayList<String>()
private val TAG: String = "Main"

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

//Database
val db = DBHelper(applicationContext)

//Text Input Layout
val textBrand = binding.textBrand
val textHarga = binding.textHarga
val textSeri = binding.textSeri

val items = listOf("Asus", "Acer", "Lenovo", "Dell", "Zyrex")
val adapter = ArrayAdapter(applicationContext, R.layout.list_brand, items)
(textBrand.editText as? AutoCompleteTextView)?.setAdapter(adapter)

//TextView
val tv_brand = binding.tvBrand
val tv_seri = binding.tvSeri
val tv_harga = binding.tvHarga

//Radio
val rg_status = binding.rgStatus
val rb_available = binding.rbAvailable
val rb_po = binding.rbPo

//Chip
val cg_tag = binding.cgTag

//Button
val btn_submit = binding.btnSubmit

btn_submit.setOnClickListener {
val brand = tv_brand.text.toString()
val seri = tv_seri.text.toString()
val price = tv_harga.text.toString()

if (brand.isEmpty()){
textBrand.error = "Missing Brand Value"
return@setOnClickListener
}
if(seri.isEmpty()){
textSeri.error = "Missing Seri Value"
return@setOnClickListener
}
if(price == null){
textHarga.error = "Missing Harga Value"
return@setOnClickListener
}

val harga = Integer.parseInt(tv_harga.text.toString())

binding.tvBrand.setText("")
binding.tvSeri.setText("")
binding.tvHarga.setText("")
tagList.clear()

val id_status = rg_status.checkedRadioButtonId
val status = findViewById<RadioButton>(id_status).text.toString()
val chips = cg_tag.checkedChipIds

var string_tags = ""
for(chip in chips){
tagList.add(findViewById<Chip>(chip).text.toString())
string_tags += findViewById<Chip>(chip).text.toString() + ","
}
string_tags = string_tags.toString().dropLast(1)
db.insertData(LaptopModel(null,brand,seri,harga,status,string_tags))

val intent = Intent(this,GudangActivity::class.java)
startActivity(intent)

}

setupMenu()
}

fun setupMenu(){
val tb_main = binding.tbMain
tb_main.inflateMenu(R.menu.menu_1)

tb_main.setOnMenuItemClickListener {
when(it.itemId){
R.id.menu_pindah -> {
val intent = Intent(this,GudangActivity::class.java)
startActivity(intent)
}
}

return@setOnMenuItemClickListener false
}
}

}

GudangActivity

class GudangActivity : AppCompatActivity() {
private lateinit var binding: ActivityGudangBinding
private val laptopList = ArrayList<LaptopModel>()
private val TAG = "Gudang"

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityGudangBinding.inflate(layoutInflater)
setContentView(binding.root)

//Database
val db = DBHelper(this)

for(laptops in db.readData()){
laptopList.add(laptops)
}
val rv_gudang = binding.rvGudang

val gudangAdapter = GudangAdapter(laptopList, this)
val layoutManager = LinearLayoutManager(this)
with(rv_gudang) {
setLayoutManager(layoutManager)
adapter = gudangAdapter
itemAnimator = DefaultItemAnimator()
setHasFixedSize(true)
}
gudangAdapter.notifyDataSetChanged()
}
}

Yak, selesai bisa dicoba build dan diperiksa pasti ada error hehe.

Test

Selesai, semoga artikel Membuat Aplikasi Android Kotlin CRUD Toko Komputer dengan SQLite kali ini bisa membantu kalian untuk belajar android lebih giat lagi ya. Tetap pantengin funtechsy ya supaya bisa dapat tutorial seputar pemrograman terbaru.

Terima kasih sudah membaca. Wassalamualaikum :)

Membuat Aplikasi Android Kotlin CRUD Toko Komputer dengan SQLite