CRUD Firebase Realtime Database (4): Membuat Fungsi Read

Assalamualaikum Warahmatullahi Wabawarakatuh.

Sebelumnya kita sudah membahas menganai penggunaan fungsi Create untuk menambahkan data kedalam database, satelah data didalam firebase tersebut tersimpan, selanjutnya kita akan membuat fungsi Read untuk membaca dan mengambil data dari Database tersebut dan Menampilkannya pada RecyclerView.

Pada tutorial ini kita akan menggunakan RecyclerView untuk menampilkan datanya, jadi saya harap kalian sudah memehami penggunaan RecyclerView pada Android Studio, sebelumnya kita sudah menambahkan beberapa data kedalam Database.

Data yang tersimpan menggunakan format JSON yang meliputi key-value, data ini akan kita tampilkan pada RecyclerView secara Realtime, itu artinya jika kita ubah data tersebut langsung dari servernya, secara otomatis data yang ditampilkan pada aplikasi juga ikut berubah.

CRUD Firebase Realtime Database (4): Membuat Fungsi Read

1) Tambahkan beberapa library berikut ini kedalam dependencies kalian, disini kita menggunakan Library Material Design untuk RecyclerView.

implementation 'com.android.support:appcompat-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'
implementation 'com.android.support:recyclerview-v7:27.0.2'
implementation 'com.android.support:support-v4:27.0.2'

2) Karena menggunakan RecyclerView, pertama kita harus membuat layout untuk mengatur tampilan per-itemnya, klik kana pada direktori res/layout, buat layout baru, berinam nama view_design.xml.

<?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"
    android:id="@+id/list_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_weight="2.5"
        app:srcCompat="@drawable/graduation_cap" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginStart="6dp">

        <TextView
            android:id="@+id/nim"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="NIM"
            android:textSize="15sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/nama"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="Nama" />

        <TextView
            android:id="@+id/jurusan"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="Jurusan:" />

    </LinearLayout>

</LinearLayout>

View:

Didalam layout tersebut kita menggunakan 1 buah ImageView dan 3 Buah TextView, untuk gambar saya sudah mempersiapkannya sendiri, atau bisa disesuaikan dengan keinginan kalian. Pada linearLayout yang ber-id "list_item", nantinya layout tersebut digunakan untuk berinteraksi dengan user, saat klik.

3) Selanjutnya buat class bernama RecyclerViewAdapter, class ini gunakan untuk mengatur dan mengolah data yang inign ditampilkan pada RecyclerView.

package com.wildan.firebasecrud.adapter;

import android.annotation.SuppressLint;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.wildan.firebasecrud.R;
import com.wildan.firebasecrud.models.data_mahasiswa;

import java.util.ArrayList;

//Class Adapter ini Digunakan Untuk Mengatur Bagaimana Data akan Ditampilkan
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>{


    //Deklarasi Variable
    private ArrayList<data_mahasiswa> listMahasiswa;
    private Context context;

    //Membuat Konstruktor, untuk menerima input dari Database
    public RecyclerViewAdapter(ArrayList<data_mahasiswa> listMahasiswa, Context context) {
        this.listMahasiswa = listMahasiswa;
        this.context = context;
    }

    //ViewHolder Digunakan Untuk Menyimpan Referensi Dari View-View
    class ViewHolder extends RecyclerView.ViewHolder{

        private TextView NIM, Nama, Jurusan;
        private LinearLayout ListItem;

        ViewHolder(View itemView) {
            super(itemView);
            //Menginisialisasi View-View yang terpasang pada layout RecyclerView kita
            NIM = itemView.findViewById(R.id.nim);
            Nama = itemView.findViewById(R.id.nama);
            Jurusan = itemView.findViewById(R.id.jurusan);
            ListItem = itemView.findViewById(R.id.list_item);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //Membuat View untuk Menyiapkan dan Memasang Layout yang Akan digunakan pada RecyclerView
        View V = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_design, parent, false);
        return new ViewHolder(V);
    }

    @SuppressLint("SetTextI18n")
    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        //Mengambil Nilai/Value yenag terdapat pada RecyclerView berdasarkan Posisi Tertentu
        final String NIM = listMahasiswa.get(position).getNim();
        final String Nama = listMahasiswa.get(position).getNama();
        final String Jurusan = listMahasiswa.get(position).getJurusan();

        //Memasukan Nilai/Value kedalam View (TextView: NIM, Nama, Jurusan)
        holder.NIM.setText("NIM: "+NIM);
        holder.Nama.setText("Nama: "+Nama);
        holder.Jurusan.setText("Jurusan: "+Jurusan);
        
        holder.ListItem.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                /*
                  Kodingan untuk membuat fungsi Edit dan Delete,
                  yang akan dibahas pada Tutorial Berikutnya.
                 */
                return true;
            }
        });
    }

    @Override
    public int getItemCount() {
        //Menghitung Ukuran/Jumlah Data Yang Akan Ditampilkan Pada RecyclerView
        return listMahasiswa.size();
    }

}

4) Setelah pengaturan RecyclerView selesai, berikutnya kita buat activity baru, bernama "MyListData", lalu kita tambahkan RecyclerView kedalam activity tersebut, yang nantinya digunakan untuk menampilkan data yang terdapat pada Database.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_margin="8dp"
    android:background="#FFFFFF"
    tools:context="com.wildan.firebasecrud.ui.MyListData">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/datalist"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

</RelativeLayout>

5) Untuk menmpilkan Garis bawah (Underline) pada setiap item didalam RecyclerView, Buat resource baru bernama line.xml pada direktori res > drawable > New > Drawable resource file, jika sudah, masukan kode xml berikut ini.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFD8D8D8"/>
    <size android:height="0.5dp"/>
</shape>

6) Jangan lupa, didalam class MainActivity.java, pada method onClick(). tambahkan baris kode berikut ini, didalam case R.id.showdata.

case R.id.showdata:
    startActivity(new Intent(MainActivity.this, MyListData.class));
    break;

7) Buka class MyListData.java, pada class tersebut kita akan memasukan source code untuk menampilkan Data dari Firebase kedalam RecyclerView.

package com.wildan.firebasecrud.ui;

import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.widget.Toast;

import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
import com.wildan.firebasecrud.R;
import com.wildan.firebasecrud.adapter.RecyclerViewAdapter;
import com.wildan.firebasecrud.models.data_mahasiswa;

import java.util.ArrayList;

public class MyListData extends AppCompatActivity {

    //Deklarasi Variable untuk RecyclerView
    private RecyclerView recyclerView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;

    //Deklarasi Variable Database Reference dan ArrayList dengan Parameter Class Model kita.
    private DatabaseReference reference;
    private ArrayList<data_mahasiswa> dataMahasiswa;

    private FirebaseAuth auth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R .layout.activity_my_list_data);
        recyclerView = findViewById(R.id.datalist);
        getSupportActionBar().setTitle("Data Mahasiswa");
        auth = FirebaseAuth.getInstance();
        MyRecyclerView();
        GetData();
    }

    //Berisi baris kode untuk mengambil data dari Database dan menampilkannya kedalam Adapter
    private void GetData(){
        Toast.makeText(getApplicationContext(),"Mohon Tunggu Sebentar...", Toast.LENGTH_LONG).show();
        //Mendapatkan Referensi Database
        reference = FirebaseDatabase.getInstance().getReference();
        reference.child("Admin").child(auth.getUid()).child("Mahasiswa")
                 .addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                //Inisialisasi ArrayList
                dataMahasiswa = new ArrayList<>();

                for (DataSnapshot snapshot : dataSnapshot.getChildren()){
                    //Mapping data pada DataSnapshot ke dalam objek mahasiswa
                    data_mahasiswa mahasiswa = snapshot.getValue(data_mahasiswa.class);

                    //Mengambil Primary Key, digunakan untuk proses Update dan Delete
                    mahasiswa.setKey(snapshot.getKey());
                    dataMahasiswa.add(mahasiswa);
                }

                //Inisialisasi Adapter dan data Mahasiswa dalam bentuk Array
                adapter = new RecyclerViewAdapter(dataMahasiswa, MyListData.this);

                //Memasang Adapter pada RecyclerView
                recyclerView.setAdapter(adapter);

                Toast.makeText(getApplicationContext(),"Data Berhasil Dimuat", Toast.LENGTH_LONG).show();
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {
              /*
                Kode ini akan dijalankan ketika ada error dan
                pengambilan data error tersebut lalu memprint error nya
                ke LogCat
               */
                Toast.makeText(getApplicationContext(),"Data Gagal Dimuat", Toast.LENGTH_LONG).show();
                Log.e("MyListActivity", databaseError.getDetails()+" "+databaseError.getMessage());
            }
        });
    }

    //Methode yang berisi kumpulan baris kode untuk mengatur RecyclerView
    private void MyRecyclerView(){
        //Menggunakan Layout Manager, Dan Membuat List Secara Vertical
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);

        //Membuat Underline pada Setiap Item Didalam List
        DividerItemDecoration itemDecoration = new DividerItemDecoration(getApplicationContext(), DividerItemDecoration.VERTICAL);
        itemDecoration.setDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.line));
        recyclerView.addItemDecoration(itemDecoration);
    }
}

Dengan menggunakan for-each, akan me-mapping data kedalam objek mahasiswa, lalu pada fungsi setKey(), digunakan untuk mengambil semua key, berupa kode unik yang dihasilkan oleh push(), nantinya digunakan untuk proses Update dan Delete.

Semua data yang ter-mapping tersebut dimasukan kedalam ArrayList dataMahasiswa, dan terakhir dimasukan kedalam Adapter, untuk ditampilkan pada RecyclerView.

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua. Setelah kita membuat fungsi Read untuk membaca dan mengambil data, terakhir kita akan membuat fungsi Update untuk mengeditdata.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :