Dapatkan potongan 25% untuk pembelian kelas online selama Ramadhan. Lihat Detail Promo

Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 4 : CRUD dengan Firebase Real-Time Database (Part 2 Read Data)

Ditulis oleh baytech, dipublikasi pada 06 Feb 2019 dalam kategori Tutorial
Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 4 : CRUD dengan Firebase Real-Time Database (Part 2 Read Data) - CodePolitan.com

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.

open

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.

create adapter

3. Buatlah Activity baru bernama show

show activity

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>

show design

4. Buatlah layout xml baru bernama users

users create

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. Jika ada kritik, saran, pertanyaan atau request silahkan melalui kolom komentar saja ya.



Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.

Banner foot-promo-update is not found.