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.
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.
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.
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.
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.
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'
<?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:
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>
<?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>
case R.id.showdata:
startActivity(new Intent(MainActivity.this, MyListData.class));
break;
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);
}
}
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.
: Membuat Fungsi Read){kind=link}