Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 5 : CRUD dengan Firebase Real-Time Database (Part 3 Update dan Delete Data)
baytech 7 Februari 2019
Beberapa waktu yang lalu di Codepolitan, kita telah membahas Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 4 : CRUD dengan Firebase Real-Time Database (Part 2 Read Data).kali ini kita akan melanjutkan ke bagian Update & Delete data. Oke sebelum kita lanjut bagi kalian yang baru bergabung alangkah lebih baiknya mengikuti tutorial sebelumnya agar bisa mengerti apa yang sedang kita lakukan sekarang.Sebelumnya mari kita buat sedikit perubahan pada code kita sebelumnya.
1. Buka Project CRUD
Baiklah sekarang kita buka Android Studio dan buka project yang sebelumnya sudah kita buat.
2. Gantilah applicationContext pada show activity
Ganti menjadi kode berikut.
this@show
Lalu tambahkan list.clear() di dalam override fun onDataChange. Sehingga kode keseluruhan menjadi seperi berikut.
class show : AppCompatActivity() {
lateinit var ref : DatabaseReference
lateinit var list : MutableList<Users>
lateinit var listView: ListView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_show)
ref = FirebaseDatabase.getInstance().getReference("USERS")
list = mutableListOf()
listView = findViewById(R.id.listView)
ref.addValueEventListener(object : ValueEventListener{
override fun onCancelled(p0: DatabaseError) {
TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
}
override fun onDataChange(p0: DataSnapshot) {
if (p0!!.exists()){
list.clear()
for (h in p0.children){
val user = h.getValue(Users::class.java)
list.add(user!!)
}
val adapter = Adapter(this@show,R.layout.users,list)
listView.adapter = adapter
}
}
})
}
}
3. Tambahkan variabel id pada Class Users
class Users (var id: String, var nama : String, var status: String) {
constructor() : this("", "","") {
}
}
Cocokkan kode fungsi savedata pada MainActivity kalian dengan kode beriku:
private fun savedata() {
val nama = inputNama.text.toString()
val status = inputStatus.text.toString()
val userId = ref.push().key.toString()
val user = Users(userId,nama,status)
ref.child(userId).setValue(user).addOnCompleteListener {
Toast.makeText(this, "Successs",Toast.LENGTH_SHORT).show()
inputNama.setText("")
inputStatus.setText("")
}
}
3. Buatlah TextView pada users.xml
setelah itu kita tambahkan 2 buah TextView pada users.xml dan berikan id TextUpdate dan TextDelete.
4. Buat layout xml baru untuk update
sekarang buatlah layout xml baru dan berinama update dan copy inputLayout pada activity_main.xml kedalam update.xml sehingga menjadi seperti ini.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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.support.design.widget.TextInputLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_marginBottom="100dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Nama"
android:id="@+id/inputNama"
android:inputType="text"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:id="@+id/textInputLayout"
android:layout_marginTop="90dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Status"
android:id="@+id/inputStatus"
android:inputType="text"/>
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
5. Isi Adapter Class
Sekarang kita deklarasikan TextUpdate dan TextDelete tadi kedalam kelas adapter di fungsi getView
val textUpdate = view.findViewById<TextView>(R.id.TextUpdate)
val textDelete = view.findViewById<TextView>(R.id.TextDelete)
Buat juga onClickListener untuk TextUpdate dan TextDelete.
textUpdate.setOnClickListener {
showUpdateDialog(user)
}
textDelete.setOnClickListener {
Deleteinfo(user)
}
Berikut adalah tampilan keseluruhan isi fungsi getView kita.
override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
val layoutInflater: LayoutInflater = LayoutInflater.from(mCtx)
val view: View = layoutInflater.inflate(layoutResId,null)
val textNama = view.findViewById<TextView>(R.id.textNama)
val textStatus = view.findViewById<TextView>(R.id. textStatus)
val textUpdate = view.findViewById<TextView>(R.id.TextUpdate)
val textDelete = view.findViewById<TextView>(R.id.TextDelete)
val user = list[position]
textNama.text = user.nama
textStatus.text = user.status
textUpdate.setOnClickListener {
showUpdateDialog(user)
}
textDelete.setOnClickListener {
Deleteinfo(user)
}
return view
}
Setelah itu buatlah fungsi showUpdateDialog dengan cara arahkan kursor ke showUpdateDialog(user) lalu tekan Alt+Enter lalu pilih Create Function 'showUpdateDialog'. Kemudian isi lah fungsi tersebut dengan kode berikut.
val builder = AlertDialog.Builder(mCtx)
builder.setTitle("Update")
val inflater = LayoutInflater.from(mCtx)
val view = inflater.inflate(R.layout.update, null)
val textNama = view.findViewById<EditText>(R.id.inputNama)
val textStatus = view.findViewById<EditText>(R.id.inputStatus)
textNama.setText(user.nama)
textStatus.setText(user.status)
builder.setView(view)
builder.setPositiveButton("Update") { dialog, which ->
val dbUsers = FirebaseDatabase.getInstance().getReference("USERS")
val nama = textNama.text.toString().trim()
val status = textStatus.text.toString().trim()
if (nama.isEmpty()){
textNama.error = "please enter name"
textNama.requestFocus()
return@setPositiveButton
}
if (status.isEmpty()){
textStatus.error = "please enter status"
textStatus.requestFocus()
return@setPositiveButton
}
val user = Users(user.id,nama,status)
dbUsers.child(user.id).setValue(user).addOnCompleteListener {
Toast.makeText(mCtx,"Updated",Toast.LENGTH_SHORT).show()
}
}
builder.setNegativeButton("No") { dialog, which ->
}
val alert = builder.create()
alert.show()
}
```
Sekarang buatlah fungsi `Deleteinfo` caranya sama dengan membuat fungsi `showUpdateDialog` tadi. Kemudian isilah dengan kode berikut.
val progressDialog = ProgressDialog(context, R.style.Theme_MaterialComponents_Light_Dialog) progressDialog.isIndeterminate = true progressDialog.setMessage("Deleting...") progressDialog.show() val mydatabase = FirebaseDatabase.getInstance().getReference("USERS") mydatabase.child(user.id).removeValue() Toast.makeText(mCtx,"Deleted!!",Toast.LENGTH_SHORT).show() val intent = Intent(context, show::class.java) context.startActivity(intent)
Sekarang hasil keseluruhan kode pada fungsi `showUpdateDialog` dan `Deleteinfo` seperti berikut:
private fun showUpdateDialog(user: Users) { val builder = AlertDialog.Builder(mCtx)
builder.setTitle("Update")
val inflater = LayoutInflater.from(mCtx)
val view = inflater.inflate(R.layout.update, null)
val textNama = view.findViewById<EditText>(R.id.inputNama)
val textStatus = view.findViewById<EditText>(R.id.inputStatus)
textNama.setText(user.nama)
textStatus.setText(user.status)
builder.setView(view)
builder.setPositiveButton("Update") { dialog, which ->
val dbUsers = FirebaseDatabase.getInstance().getReference("USERS")
val nama = textNama.text.toString().trim()
val status = textStatus.text.toString().trim()
if (nama.isEmpty()){
textNama.error = "please enter name"
textNama.requestFocus()
return@setPositiveButton
}
if (status.isEmpty()){
textStatus.error = "please enter status"
textStatus.requestFocus()
return@setPositiveButton
}
val user = Users(user.id,nama,status)
dbUsers.child(user.id).setValue(user).addOnCompleteListener {
Toast.makeText(mCtx,"Updated",Toast.LENGTH_SHORT).show()
}
}
builder.setNegativeButton("No") { dialog, which ->
}
val alert = builder.create()
alert.show()
}
private fun Deleteinfo(user: Users) { val progressDialog = ProgressDialog(context, R.style.Theme_MaterialComponents_Light_Dialog) progressDialog.isIndeterminate = true progressDialog.setMessage("Deleting...") progressDialog.show() val mydatabase = FirebaseDatabase.getInstance().getReference("USERS") mydatabase.child(user.id).removeValue() Toast.makeText(mCtx,"Deleted!!",Toast.LENGTH_SHORT).show() val intent = Intent(context, show::class.java) context.startActivity(intent) }
Oke sekarang aplikasi siap untuk di jalankan.
## Penutup
Demikian tutorial CRUD menggunakan Firebase kali ini. Jika ingin melihat project lebih jelasnya, silahkan mengunjungi laman Github [berikut](https://github.com/bayuafriyadi5/CRUDAndroidKotlinFirebase). Semoga dengan tutotrial kali ini kalian bisa untuk melakukan CRUD Android Kotlin dengan Firebase Real-Time Database.
**#WAJIBNGULIK!**