Tutorial CRUD Firebase Realtime Database Android (I) : Membuat Fungsi Create Data

Last Updated on 7 years by Mas Herdi

Halo semua, sekarang kita akan melanjutkan membuat aplikasi inventory sederhana untuk mendemokan fungsi CRUD pada Firebase Realtime Database. Di postingan sebelumnya kita sudah belajar tentang bagaimana men-setting Firebase Realtime DB pada aplikasi kita. Jadi kali ini kita akan belajar membuat fungsi pertama pada aplikasi inventory ini, yaitu fungsi create / insert data untuk memasukkan data baru pada Firebase Realtime Database. Kita akan membuat aplikasi ini menggunakan Android Studio. 🙂

Tutorial ini berhubungan dengan tutorial-tutorial tentang Firebase Realtime DB, karena itu sebelum melanjutkan saya sarankan untuk melakukan tutorial-tutorial sebelumnya di bawah ini :

Pre-requisites

• Men-setting Firebase menggunakan Firebase Assistant
• Menambahkan Firebase Realtime Database pada aplikasi Android

Membuat Fitur Create Data pada Firebase Realtime Database

Di tutorial sebelumnya, kita sudah belajar tentang menambahkan Firebase Realtime Database pada aplikasi inventory sederhana kita. Dan sekaligus membuat aturan siapa saja yang boleh mengakses database kita. Sekarang kita akan belajar membuat fitur create/insert data yang berguna untuk memasukkan data baru ke Firebase Realtime DB. Karena database pada Firebase Realtime DB disimpan di cloud/online, maka kita membutuhkan koneksi internet saat ingin meng-create data baru. Dan karena tipe database pada Firebase Realtime DB adalah NoSQL, maka kita tidak perlu membuat susunan tabel seperti di SQLite. Karena pada database NoSQL data yang kita masukkan adalah berbentuk key-value pairs.

Pada tutorial Create Data ini, kita akan membuat formulir sederhana yang bisa diisi pada aplikasi kita, dan begitu kita tekan tombol submit, maka datanya akan langsung dikirimkan ke Firebase Realtime Database secara online.

Pertama-tama, kita akan membuat halaman menu aplikasi-nya terlebih dahulu. Buka layout activity_main.xml kalian dan isikan kode di bawah ini :

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical">

    <TextView
        android:layout_margin="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TWOH.Co Realtime Database"/>

    <Button
        android:layout_margin="5dp"
        android:id="@+id/bt_createdata"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Tambah Data" />

    <Button
        android:layout_margin="5dp"
        android:id="@+id/bt_viewdata"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Lihat Data" />

</LinearLayout>

Jika sudah, maka kita akan ganti isi dari MainActivity.java, menjadi seperti di bawah ini :

MainActivity.java

package id.web.twoh.twohfirebase;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;

import id.web.twoh.twohfirebase.model.Barang;

/**
 * Created by Herdi_WORK on 07.05.17.
 */

public class MainActivity extends AppCompatActivity {

    private Button btCreateDB;
    private Button btViewDB;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crud);

        btCreateDB = (Button) findViewById(R.id.bt_createdata);
        btViewDB = (Button) findViewById(R.id.bt_viewdata);

        btCreateDB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // kelas yang akan dijalankan ketika tombol Create/Insert Data diklik
                startActivity(FirebaseDBCreateActivity.getActIntent(MainActivity.this));
            }
        });

        btViewDB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // kode untuk tutorial selanjutnya
            }
        });
    }

}

Oke, jadi pada menu aplikasi kita akan ada dua buah tombol, yaitu tombol “Tambah Data” dan tombol “Lihat Data”. Apabila tombol “Tambah Data” diklik, maka aplikasi akan berpindah ke activity Create Data. Karena activity Create Data tersebut belum ada, maka langkah selanjutnya kita akan membuat activity tersebut, namun kita akan membuat file xml layout-nya terlebih dahulu, yang bernama activity_db_create.xml :

activity_db_create.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="Tambah Data" />

    <EditText
        android:id="@+id/et_namabarang"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Nama Barang"
        android:inputType="text" />

    <EditText
        android:id="@+id/et_merkbarang"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Merk Barang"
        android:inputType="text" />

    <EditText
        android:id="@+id/et_hargabarang"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Harga Barang"
        android:inputType="number" />

    <Button
        android:id="@+id/bt_submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit" />

</LinearLayout>

Layout di atas berisi tiga buah EditText yang digunakan sebagai wadah inputan tiga jenis informasi dasar yang digunakan di aplikasi inventaris ini, yaitu nama barang, merk barang, dan harga barang, dan sebuah tombol Submit di bawahnya. Jika layout sudah dibuat, sekarang kita akan buat Activity Create Data. Karena kita tidak menggunakan paradigma MVC, ataupun MVP, maka activity Create Data ini tidak hanya berfungsi sebagai view/interface untuk menambahkan barang, namun juga mempunyai logic untuk mengirimkan data ke Firebase Realtime Database setiap ada barang baru ditambahkan.

Oh iya, sebelumnya kita buat model Barang-nya terlebih dahulu ya, kelas ini bernama Barang.java. Fungsi kelas ini adalah untuk menyimpan atribut-atribut dari data Barang yang akan kita masukkan, dan juga beberapa method getter dan setter.

Barang.java

package id.web.twoh.twohfirebase.model;

import com.google.firebase.database.IgnoreExtraProperties;

import java.io.Serializable;

/**
 * Created by Herdi_WORK on 18.06.17.
 */

@IgnoreExtraProperties
public class Barang implements Serializable{

    private String nama;
    private String merk;
    private String harga;
    private String key;

    public Barang(){

    }

    public String getKey() {
        return key;
    }

    public void setKey(String key) {
        this.key = key;
    }

    public String getNama() {
        return nama;
    }

    public void setNama(String nama) {
        this.nama = nama;
    }

    public String getMerk() {
        return merk;
    }

    public void setMerk(String merk) {
        this.merk = merk;
    }

    public String getHarga() {
        return harga;
    }

    public void setHarga(String harga) {
        this.harga = harga;
    }

    @Override
    public String toString() {
        return " "+nama+"\n" +
                " "+merk +"\n" +
                " "+harga;
    }

    public Barang(String nm, String mrk, String hrg){
        nama = nm;
        merk = mrk;
        harga = hrg;
    }
}

Simpel bukan? Sekarang kita lanjut ke Activity Create Data, buat activity baru bernama FirebaseDBCreateActivity.java dan masukkan 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 packagemu.untuk.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();

        // kode yang dipanggil ketika tombol Submit diklik
        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) {
        // kodingan untuk next tutorial ya :p
    }

    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 penjelasan tiap baris codingannya, bisa kalian baca pada komentar yang ada di kode tersebut. Sedangkan untuk cara kerjanya, bisa dibilang cukup simpel. Pengguna pertama-tama menginputkan data barang yaitu, nama barang, merk barang dan harga barang pada aplikasi. Dan kemudian meng-klik tombol Submit. Setelah tombol Submit ditekan, maka akan dilakukan pengecekan apakah ada data yang kosong, jika ada data yang kosong, misal nama barang kosong, maka akan muncul pesan error.

Namun jika data barang sudah lengkap, maka data akan langsung di-push ke reference database dari Firebase Realtime Database yang sudah kita inisialisasi di atas. Jika kalian lihat kodingan di bagian ini, kita set nama child nya sebagai “barang”, itu ibaratnya seperti nama tabel pada database SQLite, jadi semua data barang yang kita masukkan akan berada di dalam child “barang” tersebut.

Yang terakhir adalah fungsi onSuccessListener yang akan dipanggil apabila data berhasil dimasukkan ke Firebase database. Jika proses create data baru berhasil, maka akan muncul snackbar dan field2 EditText akan dikosongkan kembali.

Finally, jangan lupa tambahkan FirebaseDBCreateActivity.java pada AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="id.web.twoh.twohfirebase">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".FirebaseDBCreateActivity"/>
    </application>

</manifest>

That’s all.

Demo Program

Sekarang kita coba demokan program-nya ya.

Ini adalah tampilan activity Main Menu dari aplikasi inventaris kita :

Firebase AppInventory Menu

Kemudian, inilah flow dari kita input barang > submit > hingga berhasil

Firebase AppInventory Flow (1) Halaman tambah data (2) masukkan data (3) berhasil

Pada gambar ketiga akan muncul notifikasi SnackBar jika barang berhasil ditambahkan.

Sedangkan ini adalah notifikasi error yang muncul ketika data yang diinputkan ada yang kosong.

Firebase AppInventory Error

Conclusion

Postingan ini adalah bagian pertama dari fitur CRUD(Create, Read, Update, Delete) yang akan kita implementasikan pada Firebase Realtime Database. Semoga berguna, nantikan tutorial selanjutnya tentang Read/Lihat Data. Bagaimana cara mengambil data yang sudah kita masukkan ke Firebase database dan menampilkannya di aplikasi inventaris sederhana 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. 😉