Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 4 : CRUD dengan Firebase Real-Time Database (Part 2 Read 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 1 Insert Data). kali ini kita akan melanjutkan ke bagian read/menampilkan 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. Baiklah langsung saja kita mulai ke tahap yang pertama.

1. Buka Project CRUD

Baiklah sekarang kita buka Android Studio dan buka project yang sebelumnya sudah kita buat.

Oke kurang lebih tampilan project kita sebelumnya itu seperti ini.setelah berhasil membuka project kita ke tahap selanjutnya

2. Buatlah Kelas Adapter

Klik kanan > New > Kotlin File.

3. Buatlah Activity baru bernama show

Jika sudah, maka tambahkan ListView kedalam activity_show.xml dan berikan ID listView

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".show">

    <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/listView" 
            app:layout_constraintBottom_toTopOf="parent"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

4. Buatlah layout xml baru bernama users

berikan orientasi vertical pada LinearLayout lalu masukan 2 buah TextView dan berikan ID textNama dan textStatus

<?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">
    <TextView
            android:text="TextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textNama"
            android:textSize="24sp"
            android:layout_margin="40dp"/>
    <TextView
            android:text="TextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textStatus"
            android:textSize="24sp"
            android:layout_marginBottom="40dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:layout_marginTop="15dp"/>
</LinearLayout>

5. Isi Adapter Class

Sekarang kita akan mengisi Adapter Class yang sudah kita buat tadi jadi silahkan masuk ke Adapter Class dan buatlah Adapter class kalian menjadi seperti kode berikut:

class Adapter(val mCtx: Context, val layoutResId: Int, val list: List<Users> )
    : ArrayAdapter<Users>(mCtx,layoutResId,list){

    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 user = list[position]

        textNama.text = user.nama
        textStatus.text = user.status

        return view

    }
}

6. Menampilkan data pada show activity

Untuk menampilkan data di show activity coba kalian buat code pada show activity kalian menjadi seperti ini.

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()){

                    for (h in p0.children){
                        val user = h.getValue(Users::class.java)
                        list.add(user!!)
                    }
                    val adapter = Adapter(applicationContext,R.layout.users,list)
                    listView.adapter = adapter
                }
            }
        })
    }
}

Jika terjadi error atau ada code yang merah jangan panik cukup klik kode itu dan tekan Alt + Enter.
Dan langkah terakhir yaitu hubungkan MainActivity ke show Activity.caranya pergi ke MainActivity. Lalu tambahkan kode berikut kedalam btnSave.setOnClickListener

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

sehingga kode keseluruhan seperti ini

btnSave.setOnClickListener {
            savedata()
            val intent = Intent (this, show::class.java)
            startActivity(intent)
        }

ini bertujuan agar ketika tombol save di tekan data yang di input akan tersimpan ke database dan pindah ke halaman show Activity untuk menampilkan data yang tadi telah di input.
Oke sekarang aplikasi siap untuk di jalankan.

Penutup

Demikian tutorial CRUD menggunakan Firebase kali ini. Selanjutnya kita akan melanjutkan CRUD untuk mengupdate data dengan Firebase Realtime Database. Semoga bisa dipahami oleh pembaca sekalian. 

SUMBER