Terakhir diperbarui: 2021-05-24

Penulis: Habibie Ed Dien, S.Kom., M.T.

CRUD dengan Firebase di ReactJS

Pada codelab ini Anda akan mempelajari tentang Create, Read, Update, dan Delete (CRUD) dengan Firebase di ReactJS.

Pengetahun yang Anda harus miliki

Sebelum memulai codelab ini, sebaiknya Anda memiliki pengetahuan dasar tentang:

• Pemrograman dasar dengan HTML, CSS, dan JavaScript
• Cara membuat project baru di ReactJS
• Konsep DOM (Document Object Model)
• Konsep ReactJS Bagian 1
• Konsep ReactJS Bagian 2
• API dan Router di ReactJS
• React Redux

Apa yang Anda akan pelajari

• Konsep dan implementasi CRUD dengan Firebase di ReactJS

Apa yang Anda perlu persiapkan

• Laptop/PC
• Koneksi internet yang stabil
• Node.js telah ter-install dan dikenali secara global dalam sistem
• VS Code sebagai editor
• Chrome browser

Memilih Database: Cloud Firestore atau Realtime Database ?

Pada codelab ini Anda akan mempelajari tentang Create, Read, Update, dan Delete (CRUD) dengan Firebase di ReactJS. Codelab 9 sebelumnya Anda telah membuat Global API untuk berinteraksi dengan database JSON secara lokal. Nah, codelab saat ini kita akan membuat interaksi dengan database yang disediakan oleh Firebase secara online.

Firebase menawarkan dua solusi database berbasis cloud yang mendukung sinkronisasi data secara realtime, yaitu sebagai berikut:

• Cloud Firestore adalah database terbaru dari Firebase untuk pengembangan aplikasi seluler. Database ini melanjutkan keberhasilan Realtime Database dengan model data baru yang lebih intuitif. Cloud Firestore juga memiliki fitur kueri yang lebih lengkap dan lebih cepat, serta penskalaan yang lebih mendalam dibandingkan dengan Realtime Database.
• Realtime Database adalah database asli Firebase. Solusi ini berlatensi rendah dan efisien untuk aplikasi seluler yang membutuhkan status sinkron lintas klien secara real-time.

Pilihan database yang kita akan gunakan tergantung oleh banyak faktor dan besarnya project aplikasi yang kita bangun. Namun jika berkaitan dengan fitur tertentu, maka Anda dapat menentukan memilih database dengan beberapa pertanyaan rekomendasi yang disediakan oleh Firebase di sini.

Beberapa keunggulan yang dimiliki oleh kedua database Firebase tersebut adalah:

• SDK yang mengutamakan klien, tidak ada server untuk di-deploy dan dipelihara.
• Update dilakukan secara real-time.
• Ada paket gratis atau berbayar jika melebihi batas penggunaan

Pada praktikum ini, kita dapat melanjutkan dari codelab sebelumnya (Codelab 11 - Redux Thunk). Karena konfigurasi firebase yang akan digunakan masih tetap sama, namun ada tambahan URL database yang akan dikonfigurasi di sini. Untuk melakukan konfigurasi database Firebase, silakan lakukan langkah-langkah praktikum berikut ini.

1. Silakan buka console Firebase Anda dengan melanjutkan project dari codelab 10 dan 11. Lalu pilih menu Realtime Database di sidebar kiri > klik Create Database.

2. Selanjutnya akan tampil untuk melakukan konfigurasi database seperti pada gambar berikut. Pilih lokasi server terdekat, yaitu Singapore. Karena lokasi kita berada di Indonesia, sehingga diharapkan dapat lebih cepat ketika mengakses data.

3. Lalu pada langkah kedua Security rules, kita pilih locked mode, artinya database kita masih dalam proteksi (tidak dapat dibaca dan ditulis). Nanti kita konfigurasi security rules ini agar dapat diakses oleh user yang terautentikasi saja.

4. Selanjutnya masuk ke Project settings pada menu sidebar.

5. Pilih Config pada bagian SDK setup and configuration untuk mendapatkan nilai konfigurasi Firebase yang akan kita gunakan pada aplikasi React.

6. Ubahlah isi kode firebase.config.js seperti berikut. Perbedaannya hanya penambahan variabel databaseURL pada firebaseConfig dan import firebase/database.

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";

export const firebaseConfig = {
  apiKey: "isikan sesuai value dari console firebase Anda",
  authDomain: "isikan sesuai value dari console firebase Anda",
  databaseURL: "isikan sesuai value dari console firebase Anda",
  projectId: "isikan sesuai value dari console firebase Anda",
  storageBucket: "isikan sesuai value dari console firebase Anda",
  messagingSenderId: "isikan sesuai value dari console firebase Anda",
  appId: "isikan sesuai value dari console firebase Anda",
  measurementId: "isikan sesuai value dari console firebase Anda"
};

export const myFirebase = firebase.initializeApp(firebaseConfig);
export const DB = firebase.database();

7. Lalu pada menu Realtime Database > pilih tab Rules, kemudian Edit rules seperti pada gambar berikut.

Melanjutkan codelab 9 terdapat sebuah komponen bernama BlogPost.js. Nah, komponen ini kita akan modif sedikit untuk bisa terhubung dengan database firebase. Silakan lakukan langkah-langkah praktikum berikut ini.

1. Pertama, pastikan variabel DB sudah kita import dari file firebase.config. Karena Global API sudah digantikan dengan firebase, maka boleh kita hapus atau comment saja.

//import API from '../services/Artikel';
import React from 'react';
import { Button, Container, Form } from 'react-bootstrap';
import { DB } from '../firebase.config';

2. Kemudian fungsi ambilDataDariServerAPI diganti dengan kode berikut.

ambilDataDariServerAPI = () => {    
    let ref = DB.ref("articles/");
    ref.on("value", snapshot => {
      if (snapshot.val() !== null)
        this.setState({
          dataArtikel: snapshot.val()
        })
    });
  }

3. Kita tambahkan fungsi baru untuk menyimpan data artikel ke database firebase.

simpanDataKeServerAPI = () => {
    DB.ref("articles/").set(this.state.dataArtikel);
  }

4. Selanjutnya ganti isi fungsi handleTombolSimpan dengan kode berikut.

handleTombolSimpan = (e) => {
    e.preventDefault();

    const { dataArtikel, postArtikel } = this.state;

    if (postArtikel.id && postArtikel.title && postArtikel.body) {
      const indeksArtikel = dataArtikel.findIndex(data => {
        return data.id === postArtikel.id
      });

      dataArtikel[indeksArtikel].title = postArtikel.title;
      dataArtikel[indeksArtikel].body = postArtikel.body;
      this.setState({ dataArtikel });
    } else if (postArtikel.title && postArtikel.body) {
      console.log(dataArtikel);
      const id = new Date().getTime().toString();
      let userId = 1; // TODO: set to username/email
      let title = postArtikel.title;
      let body = postArtikel.body;
      dataArtikel.push({ id, userId, title, body });
      this.setState({ dataArtikel });
    }

    postArtikel.id = '';
    postArtikel.title = '';
    postArtikel.body = '';
    this.setState({ postArtikel });
  }

5. Lalu tambahkan fungsi componentDidUpdate seperti berikut.

componentDidUpdate (prevProps, prevState) {
    if (prevState !== this.state.dataArtikel) {
      this.simpanDataKeServerAPI();
    }
  }

6. Terakhir kita sesuaikan fungsi render seperti berikut dengan komponen dari react-bootstrap.

render () {
    const { dataArtikel } = this.state;

    return (
      <div>
        <Container>
          <Form onSubmit={this.handleTombolSimpan}>
            <Form.Group controlId="inputJudul">
              <Form.Label>Judul Artikel</Form.Label>
              <Form.Control required type="text" name="title" placeholder="judul artikel" onChange={this.handleOnChange} />
            </Form.Group>
            <Form.Group controlId="inputIsiArtikel">
              <Form.Label>Isi Artikel</Form.Label>
              <Form.Control required name="body" onChange={this.handleOnChange} as="textarea" rows={3} />
            </Form.Group>
            <Button variant="primary" type="submit">
              Simpan Artikel
            </Button>
          </Form>
        </Container>

        <hr />
        <h2>Daftar Artikel</h2>
        {
          (dataArtikel || []).map(artikel => {
            return (
              <div key={artikel.id}>
                <DaftarArtikel judul={artikel.title} isiArtikel={artikel.body} />
                <Button variant="danger" value={artikel.id} onClick={this.handleTombolHapus}>Hapus</Button>
                <hr></hr>
              </div>
            )
          })
        }
      </div>
    );
  }

Lalu kita import komponen BlogPost ke komponen Home (dari Codelabs 11), agar komponen artikel hanya dapat diakses oleh akun yang telah login seperti pada gambar berikut.

Save semua pekerjaan Anda, lalu run npm start. Seharusnya tampil seperti pada gambar berikut. Silakan coba isi data artikel, maka data berhasil tersimpan di database firebase. Namun, tombol Hapus belum kita sesuaikan.

Melanjutkan dari praktikum sebelumnya, kita sesuaikan tombol Hapus agar dapat menghapus data artikel dari database firebase. Silakan lakukan langkah-langkah praktikum berikut ini.

1. Kembali ke komponen BlogPost, ganti isi fungsi handleTombolHapus seperti berikut.

handleTombolHapus = (e) => {
    e.preventDefault();

    const { dataArtikel } = this.state;

    const newState = dataArtikel.filter(data => {
      return data.id !== e.target.value;
    });
    
    this.setState({ dataArtikel: newState });
    alert('Data berhasil dihapus!');
  }

2. Simpan hasil pekerjaan Anda, lalu lihat hasilnya di browser. Seharusnya artikel sudah bisa dihapus dengan menekan tombol Hapus. Kemudian cek data artikel di database pada console Firebase.

Melanjutkan dari praktikum sebelumnya, kita tambahkan tombol Edit untuk melakukan update pada data artikel. Silakan lakukan langkah-langkah praktikum berikut ini.

1. Kembali ke komponen BlogPost, kita buat form edit-nya terlebih dahulu di bagian fungsi render(). Bisa diletakkan dipaling bawah setelah daftar artikel. Di sini kita menggunakan Modal dari react-bootstrap. Jangan lupa untuk import Modal dari react-bootstrap.

       <Modal
          show={showEdit}
          onHide={() => this.setState({ showEdit: false })}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Edit Artikel
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Container>
              <Form onSubmit={this.handleTombolSimpan}>
                <Form.Group controlId="inputJudul">
                  <Form.Label>Judul Artikel</Form.Label>
                  <Form.Control required type="text" name="title" value={postArtikel.title} placeholder="judul artikel" onChange={this.handleOnChange} />
                </Form.Group>
                <Form.Group controlId="inputIsiArtikel">
                  <Form.Label>Isi Artikel</Form.Label>
                  <Form.Control required name="body" value={postArtikel.body} placeholder="isi artikel" onChange={this.handleOnChange} as="textarea" rows={3} />
                </Form.Group>
                <Button variant="primary" type="submit">
                  Update Artikel
            </Button>
              </Form>
            </Container>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="danger" onClick={() => this.setState({ showEdit: false })}>Batal</Button>
          </Modal.Footer>
        </Modal>

2. Lalu pada bagian state class BlogPost, kita perlu tambahkan showEdit seperti berikut.

    this.state = {
      showEdit: false,
      dataArtikel: [],
      postArtikel: {
        id: '',
        userId: 1,
        title: '',
        body: ''
      }
    };

3. Selanjutnya tambahkan tombol Edit pada Daftar Artikel sebelah tombol Hapus seperti berikut.

<Button variant="info" value={artikel.id} onClick={this.handleTombolEdit} >Edit</Button>

4. Save pekerjaan Anda, lalu lihat hasil tampilannya di browser. Seharusnya sudah tampil tombol Edit seperti berikut. Namun, tombol tersebut belum berfungsi.

5. Buat fungsi handleTombolEdit pada komponen BlogPost seperti berikut. Namun, Anda diminta untuk melengkapi kode program berikut agar artikel yang telah dilakukan update dapat berubah pada halaman maupun di database Firebase.

  handleTombolEdit = (e) => {
    e.preventDefault();

    const { dataArtikel, postArtikel } = this.state;

    // ... silakan lengkapi kode di sini ... 

    this.setState({ postArtikel, showEdit: true });
  }

1. Berdasarkan praktikum 1 yang telah Anda lakukan, jelaskan perbedaan fungsi locked mode dan test mode pada langkah 3 saat Anda konfigurasi database Firebase?
2. Buatlah variabel userId pada praktikum 2 langkah 4 agar dapat menyimpan email dari user yang sedang login, sehingga dapat tersimpan di database!
3. Jelaskan maksud kode ini (dataArtikel || []) pada praktikum 2 langkah 6! Mengapa berbeda dari codelabs sebelumnya untuk menampilkan daftar artikel?
4. Lengkapilah kode pada praktikum 4 langkah 5 agar dapat melakukan update artikel! Mengapa setelah klik tombol Update Artikel, form Modal tidak hilang? Bagaimana Anda mengatasi hal tersebut?
5. Ketika Anda menekan tombol Edit, lalu menekan tombol Batal pada form Modal update artikel. Kemudian coba tambah artikel baru, maka artikel yang tadi kita klik tombol Edit akan berubah jadi data yang artikel baru ditambahkan. Mengapa demikian? Silakan diperbaiki.

Selamat, Anda telah berhasil menyelesaikan codelab ini. Semoga mendapatkan ilmu yang bermanfaat.

Apa selanjutnya?

Silakan cek beberapa sumber belajar lainnya...

• Memahami Aturan Firabase Realtime Database
• React Firebase CRUD with Realtime Database

Referensi

• Ringkasan Firebase
• Realtime Database vs Cloud Firestore