Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 5 : CRUD dengan Firebase Real-Time Database (Part 3 Update dan Delete Data)

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. Semoga dengan tutotrial kali ini kalian bisa untuk melakukan CRUD Android Kotlin dengan Firebase Real-Time Database.

SUMBER