Last Updated on 7 years by Mas Herdi
Hi semua, melanjutkan tutorial saya tentang Firebase Realtime Database dimana sebelumnya kita sudah belajar cara create dan read data, maka kali ini kita akan belajar tentang bagaimana cara update data yang ada pada Firebase Realtime Database. Jadi simpelnya, pada aplikasi inventaris ini kita akan mengedit data yang sudah dimasukkan ada Firebase Realtime DB, dan mengganti isinya.
Pre-Requisites
Tentu saja tutorial ini berhubungan erat dengan tutorial-tutorial sebelumnya, jadi sebelum melanjutkan coding tutorial ini. Sangat saya sarankan untuk membaca tutorial-tutorial sebelumnya. Indeks lengkap dari tutorial tentang Firebase Realtime Database bisa kalian baca di sini. Atau kalian bisa juga membaca dari link pre-requisites di bawah ini :
- Tutorial Menambahkan Firebase Realtime Database di aplikasi
- Tutorial Membuat Fitur Create / Insert Data pada Firebase Realtime DB
- Tutorial Membuat Fitur Read Data pada Firebase Realtime DB
Jika sudah, mari kita langsung down to code…
Membuat Fitur Update / Edit Data pada Firebase Realtime Database menggunakan Android Studio
Oke, jadi sebagai gambaran saja, mari kita langsung lihat code yang digunakan untuk update data di Firebase Realtime Database. Gambaran kodenya adalah seperti di bawah ini :
private void updateBarang(Barang barang) {
/**
* Baris kode yang digunakan untuk mengupdate data barang
* yang sudah dimasukkan di Firebase Realtime Database
*/
database.child("barang") //akses parent index, ibaratnya seperti nama tabel
.child(barang.getKey()) //select barang berdasarkan key
.setValue(barang) //set value barang yang baru
.addOnSuccessListener(this, new OnSuccessListener<Void>() {
@Override
public void onSuccess(Void aVoid) {
/**
* Baris kode yang akan dipanggil apabila proses update barang sukses
*/
Snackbar.make(findViewById(R.id.bt_submit), "Data berhasil diupdatekan", Snackbar.LENGTH_LONG).setAction("Oke", new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
}).show();
}
});
}
Jadi bisa dilihat pada kodingan di atas, cara update data pada Firebase Realtime DB secara garis besar terdiri dari; 1) kita menyiapkan data baru yang akan diupdate sebagai parameter inputan, 2) kemudian kita cari key dari data barang baru tersebut, 3) jika key nya sudah ketemu, maka langsung saja kita setValue pada key tersebut ke data barang yang sudah diupdate. Nah kemudian jika muncul pertanyaan, darimana kita mendapatkan key yang menjadi id barang itu? Jawabannya adalah ketika kita melakukan Read Data, kita juga sekalian mengambil data key tersebut dan memasukkannya ke dalam object barang.
Karena Firebase Realtime DB bersifat NoSQL, maka hal ini termasuk lumayan tricky, tidak seperti database SQLite yang mempunyai index dan primary key, pada NoSQL datanya tidak mempunyai index sehingga satu2nya parameter yang bisa kita gunakan sebagai id adalah key tersebut.
Kemudian, dimana kodingan update data di atas perlu ditambahkan? Kalian bisa membuka project aplikasi inventaris yang sudah kalian buat sesuai dengan tutorial-tutorial sebelumnya di Android Studio. Selanjutnya buka kelas FirebaseDBCreateActivity.java, dan copy-paste kan kode di bawah ini :
FirebaseDBCreateActivity.java
package id.web.twoh.twohfirebase;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import id.web.twoh.twohfirebase.model.Barang;
/**
* Created by Herdi_WORK on 08.08.17.
*/
public class FirebaseDBCreateActivity extends AppCompatActivity {
// variable yang merefers ke Firebase Realtime Database
private DatabaseReference database;
// variable fields EditText dan Button
private Button btSubmit;
private EditText etNama;
private EditText etMerk;
private EditText etHarga;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_db_create);
// inisialisasi fields EditText dan Button
etNama = (EditText) findViewById(R.id.et_namabarang);
etMerk = (EditText) findViewById(R.id.et_merkbarang);
etHarga = (EditText) findViewById(R.id.et_hargabarang);
btSubmit = (Button) findViewById(R.id.bt_submit);
// mengambil referensi ke Firebase Database
database = FirebaseDatabase.getInstance().getReference();
final Barang barang = (Barang) getIntent().getSerializableExtra("data");
if (barang != null) {
etNama.setText(barang.getNama());
etMerk.setText(barang.getMerk());
etHarga.setText(barang.getHarga());
btSubmit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
barang.setNama(etNama.getText().toString());
barang.setMerk(etMerk.getText().toString());
barang.setHarga(etHarga.getText().toString());
updateBarang(barang);
}
});
} else {
btSubmit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(!isEmpty(etNama.getText().toString()) && !isEmpty(etMerk.getText().toString()) && !isEmpty(etHarga.getText().toString()))
submitBarang(new Barang(etNama.getText().toString(), etMerk.getText().toString(), etHarga.getText().toString()));
else
Snackbar.make(findViewById(R.id.bt_submit), "Data barang tidak boleh kosong", Snackbar.LENGTH_LONG).show();
InputMethodManager imm = (InputMethodManager)
getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(
etNama.getWindowToken(), 0);
}
});
}
}
private boolean isEmpty(String s){
// Cek apakah ada fields yang kosong, sebelum disubmit
return TextUtils.isEmpty(s);
}
private void updateBarang(Barang barang) {
/**
* Baris kode yang digunakan untuk mengupdate data barang
* yang sudah dimasukkan di Firebase Realtime Database
*/
database.child("barang") //akses parent index, ibaratnya seperti nama tabel
.child(barang.getKey()) //select barang berdasarkan key
.setValue(barang) //set value barang yang baru
.addOnSuccessListener(this, new OnSuccessListener<Void>() {
@Override
public void onSuccess(Void aVoid) {
/**
* Baris kode yang akan dipanggil apabila proses update barang sukses
*/
Snackbar.make(findViewById(R.id.bt_submit), "Data berhasil diupdatekan", Snackbar.LENGTH_LONG).setAction("Oke", new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
}).show();
}
});
}
private void submitBarang(Barang barang) {
/**
* Ini adalah kode yang digunakan untuk mengirimkan data ke Firebase Realtime Database
* dan juga kita set onSuccessListener yang berisi kode yang akan dijalankan
* ketika data berhasil ditambahkan
*/
database.child("barang").push().setValue(barang).addOnSuccessListener(this, new OnSuccessListener<Void>() {
@Override
public void onSuccess(Void aVoid) {
etNama.setText("");
etMerk.setText("");
etHarga.setText("");
Snackbar.make(findViewById(R.id.bt_submit), "Data berhasil ditambahkan", Snackbar.LENGTH_LONG).show();
}
});
}
public static Intent getActIntent(Activity activity) {
// kode untuk pengambilan Intent
return new Intent(activity, FirebaseDBCreateActivity.class);
}
}
Untuk fitur update data ini, kita akan menggunakan activity yang sudah ada, yaitu activity FirebaseDBCreateActivity yang juga digunakan untuk proses Insert/Create data. Bedanya, pada update data kita akan mengirim bundle berisi data barang yang akan diupdate, kemudian kita menggunakan form yang sama untuk mengganti data barang, seperti nama barang, harga dan sebagainya. Kemudian ketika kita klik tombol “Submit”, aplikasi akan memanggil fungsi updateBarang() dan bukan submitBarang() seperti pada saat Insert Data. Saat user mengklik tombol “Submit” itulah kode untuk update barang di atas akan dipanggil.
Membuat Interface Dialog untuk Akses Fitur Update Barang
Lantas bagaimana cara kita mengakses activity update barang? Di sini kita akan mengakses fitur update barang dari activity Read Data. Jadi pada activity Read Data yang sudah kita buat di tutorial sebelumnya, ada sebuah list RecyclerView yang berguna untuk menampilkan daftar barang. Di sana kita akan tambahkan OnLongClickListener pada item RecyclerView. Ketika kita melakukan long click pada item yang ingin kita update akan muncul sebuah dialog menu.
Oke, mari kita buat dialog menu-nya terlebih dahulu. Caranya cukup buat satu file xml layout baru bernama dialog_view.xml dan isikan kode berikut ini :
dialog_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="10dp"
android:gravity="center"
>
<Button
android:layout_margin="5dp"
android:id="@+id/bt_edit_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit Data"
/>
<Button
android:layout_margin="5dp"
android:id="@+id/bt_delete_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Delete"
/>
</LinearLayout>
Jika sudah, selanjutnya kita akan implement fungsi onLongClickListener pada RecyclerView di activity Read Data. Buka class adapter RecyclerView yang bernama AdapterBarangRecyclerView dan ganti kode pada fungsi onBindViewHolder() menjadi seperti di bawah ini :
@Override
public void onBindViewHolder(ViewHolder holder, final int position) {
/**
* Menampilkan data pada view
*/
final String name = daftarBarang.get(position).getNama();
holder.tvTitle.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
/**
* Kodingan untuk tutorial Selanjutnya :p Read detail data
*/
}
});
holder.tvTitle.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View view) {
/**
* Kodingan untuk tutorial Selanjutnya :p Delete dan update data
*/
final Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.dialog_view);
dialog.setTitle("Pilih Aksi");
dialog.show();
Button editButton = (Button) dialog.findViewById(R.id.bt_edit_data);
Button delButton = (Button) dialog.findViewById(R.id.bt_delete_data);
//apabila tombol edit diklik
editButton.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
dialog.dismiss();
context.startActivity(FirebaseDBCreateActivity.getActIntent((Activity) context).putExtra("data", daftarBarang.get(position)));
}
}
);
//apabila tombol delete diklik
delButton.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
/**
* Kodingan untuk tutorial Selanjutnya :p Delete data
*/
}
}
);
return true;
}
});
holder.tvTitle.setText(name);
}
Penjelasan lengkapnya bisa dilihat pada komentar yang ada di kodingan di atas. Gambaran besar cara kerjanya sebagai berikut, apabila user melakukan long click pada RecyclerView item, nanti akan muncul alert dialog yang memberikan pilihan kepada kita. Apakah ingin delete data, atau edit data. Apabila kita mengklik tombol edit data, maka kita akan dibawa ke activity untuk update data.
Basically hanya itu hal-hal yang perlu kalian lakukan untuk membuat fitur Edit Data pada Firebase Realtime Database. Sekarang saatnya demo !
Demo
Dari main menu, kita akan menuju ke Read Data untuk memilih data mana yang akan diupdate :
Firebase AppInventory Read Data
Pilih salah satu data yang ingin diupdate, kemudian lakukan long click pada data tersebut, maka akan muncul dialog seperti di bawah ini :
Dialog Menu pada AppInventory
Di situ kita pilih menu “Edit Data”, karena menu “Delete Data” untuk tutorial selanjutnya hehe. Setelah memilih menu tersebut, maka kita akan dibawa ke flow update data seperti gambar di bawah :
Firebase Realtime DB Update Flow
Bisa dilihat pada flow di atas, kita ubah data barang sepeda motor dan ketika klik submit, muncul snackbar yang memberitahukan bahwa update berhasil. Coba kembali ke activity Read Data, maka seharusnya data sepeda motor disitu juga sudah terupdate. 🙂
Conclusion
Postingan ini adalah bagian ketiga dari fitur CRUD(Create, Read, Update, Delete) yang akan kita implementasikan pada Firebase Realtime Database. Semoga berguna, baca juga tutorial selanjutnya tentang Delete Data. Bagaimana kita menghapus data yang sudah kita masukkan ke Fireabase Realtime Database dari aplikasi inventaris kita.😀
Untuk source code-nya, kalian bisa download di GitHub saya. Jangan lupa untuk follow dan star ya. 😀
Jangan sungkan untuk bertanya apabila ada yang kurang mengerti, silahkan tulis lewat komentar di bawah. 😉
