Cara Menghubungkan Firebase Realtime Database Dengan JavaScript

Firebase Realtime database adalah sebuah layanan yang memungkinkan kalian dapat menyimpan data se...
Penulis
Admin
Kategori
Tutorial
Estimasi
3 menit baca
Dilihat
1.7K
Posting
31 Mar 2022
Cara Menghubungkan Firebase Realtime Database Dengan JavaScript Firebase Realtime database adalah sebuah layanan yang memungkinkan kalian dapat menyimpan data secara cloud tanpa SQL untuk melakukan sinkronisasi dengan user secara realtime. Cara Menghubungkan Firebase Realtime Database Dengan JavaScript
2022-11-25

Apakah kamu sudah mengenal dengan layanan Google yang keren satu ini yaitu Firebase? bagi yang belum tahu, firebase merupakan layanan penyedia database online dari Google untuk para developer dengan dukungan real-time atau secara otomatis.

Saat ini, firebase sering kali menjadi opsi lain untuk mengelola data secara online dan juga sering kali digunakan untuk menyimpan file-file penting yang disediakan oleh layanan ini seperti Cloud Storage. Selain itu, firebase juga menyediakan authentication dalam melakukan otentikasi kepada user.

Yang kerennya, meskipun hanya dengan dokumen HTML dan JavaScript saja, kalian sudah bisa mengelola data secara real-time. Kali ini kami akan memberikan sebuah tutorial mengenal cara membuat CRUD dengan firebase hanya dengan dokumen HTML, JQuery dan Bootstrap. Sebelum masuk kedalam pembahasan tutorialnya, kita kenali dulu apa itu Firebase.

 

Tutorial membuat CRUD realtime database dengan FIrebase - Firebase logo

 

 

1. Apa itu Firebase

Firebase merupakan sebuah layanan cloud dari Google untuk para pemilik website atau developer yang bisa digunakan untuk mengembangkan aplikasi mereka secara cepat dan fokus. Pertama kali Firebase diperkenalkan pada tahun 2011 sebagai realtime database yang dapat menyimpan dan menghubungkan ke beberapa user.

Terdapat 2 layanan pada Firebase diantaranya Spark dan Blaze. Spark sendiri merupakan layanan gratis namun dengan batasan yang sudah ditetapkan, sedangkan Blaze merupakan layanan premium dari Firebase yang akan dikenakan biaya sesuai dengan pemakaian.

Setelah mengetahui apa itu FIrebase, langsung saja kita masuk kedalam topik utama.

 

2. Persiapan

Sebelum kita mendaftarkan kedalam layanan Firebase, kita buat terlebih dahulu beberapa file yang dibutuhkan diantaranya: index.html dan app.js.

Folder
|__ index.html
|__ app.js

 

3. Daftar akun di Firebase

Sebelum ketahap koding, silahkan kalian daftar dan buat project baru terlebih dahulu di Firebase Console lalu klik tombol create project, ikuti step demi stepnya dan tunggu hingga project sudah selesai dibuat. Jika sudah selesai maka akan tampil seperti gambar dibawah ini:

 

Tutorial membuat CRUD realtime database dengan FIrebase - membuat project baru

 

4. Membuat Web App baru

Setelah kalian sudah berhasil masuk kedalam dashboard Firebase, silahkan pilih icon yang dilingkari dibawah ini:

 

Tutorial membuat CRUD realtime database dengan FIrebase - membuat web app baru

 

Pada bagian Register app isi nama project yang akan diisi, terserah kalian dengan nama apapun.

 

Tutorial membuat CRUD realtime database dengan FIrebase - membuat project baru tahap dua

 

Jika berhasil maka akan langsung ketahap berikutnya yaitu Add Firebase SDK.

Pada tahap ini, kalian pilih pada opsi kedua yaitu use a script tag, lalu cari pada bagian firebase config seperti apiKey, authDomain, projectId dan lain-lain copy paste hingga appId kedalam notepad kalian. Baris kode ini bertujuan untuk mengauthentikasi koneksi antara Firebase dengan website kalian nantinya.

 

Tutorial membuat CRUD realtime database dengan FIrebase - authentication code

 

Setelah itu lanjutkan dengan menekan tombol Continue to console dan membuat database baru untuk menampung data dan menampilkannya secara realtime kepada user.

 

Tutorial membuat CRUD realtime database dengan FIrebase - membuat database baru

 

5. Buat database baru

Pada tahap ini, silahkan pilih Realtime Database pada sidebar lalu pilih create database, untuk lokasi dan security rules, kalian bisa pilih sesuai dengan keinginan kalian, namun pada contoh kali ini kita akan menggunakan Lokasi United States (us-central1) dan start in test mode pada security rules, lalu klik tombol enable.

 

6. Membuat index.html

Tahap selanjutnya adalah kita mengcoding untuk tampilan dan beberapa komponen yang dibutuhkan, untuk tampilan kita menggunakan Bootstrap, moment.js dan JQuery, dengan tujuan untuk mempercepat proses developmentnya dan mempercantik tampilan.

Untuk memulainya silahkan buka file index.html lalu buat struktur standar HTMLnya, didalam tag head silahkan simpan beberapa kode dibawah ini untuk mengaktifkan bootstrap dan beberapa style tambahan.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
    body {
        padding-top: 64px;
    }
  
    .table-col-action {
        text-align: right;
    }
  
    .message {
        white-space: pre;
    }
</style>

 

Setelah itu, untuk bagian isi dari body yang terdiri dari beberapa elemen yang digunakan diantaranya: table, table ini sendiri akan digunakan sebagai wadah untuk menampilkan data dari database. Selanjutnya adalah Modal, modal merupakan popup untuk menampilkan suatu action seperti tambah pesan dan edit pesan. Dan yang terakhir adalah menambahkan beberapa JavaScript untuk mengaktifkan JQuery, Bootstrap dan moment.js sebagai pelengkap.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="/">Firebase Realtime Database Demo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
    </span>
  </button>
</nav>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h2>Pesan anda
        <button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#modal-add-message">Tambah pesan baru</button>
      </h2>
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">Judul</th>
            <th scope="col">Pesan</th>
            <th scope="col">Dibuat</th>
            <th scope="col">Dirubah</th>
            <th scope="col" class="table-col-action">
            </th>
          </tr>
        </thead>
        <tbody id="table-messages">
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="modal-add-message">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Tambah pesan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="form-add">
          <div class="form-group">
            <label for="form-add-title">Judul</label>
            <input type="text" class="form-control" id="form-add-title" placeholder="Masukan judul pesan ...">
          </div>
          <div class="form-group">
            <label for="form-add-message">Pesan</label>
            <textarea id="form-add-message" class="form-control" placeholder="Masukan pesan anda ...">
            </textarea>
          </div>
          <button type="submit" class="btn btn-primary" id="form-add-save">Save</button>
          <button type="button" class="btn btn-secondary" id="form-add-abort">Abort</button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="modal-edit-message">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Ubah pesan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="form-edit">
          <input type="hidden" id="form-edit-key">
          <div class="form-group">
            <label for="form-edit-title">Judul</label>
            <input type="text" class="form-control" id="form-edit-title" placeholder="Masukan judul ...">
          </div>
          <div class="form-group">
            <label for="form-edit-message">Pesan</label>
            <textarea id="form-edit-message" class="form-control" placeholder="Masukan pesan anda ...">
            </textarea>
          </div>
          <button type="submit" class="btn btn-primary" id="form-edit-save">Save</button>
          <button type="button" class="btn btn-secondary" id="form-edit-abort">Abort</button>
        </form>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

 

Setelah selesai, coba save dan tampilkan dibrowser maka akan muncul seperti ini:

 

Tutorial membuat CRUD realtime database dengan FIrebase - Tampilan utama aplikasi CRUD dengan firebase

 

Untuk mengaktifkan fungsi dari Firebase itu sendiri, tambahkan baris script berikut kedalam kode HTML, letakan sebelum tag penutup body

<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>
<script>
    /**
    * ganti config dibawah ini dengan SDK yang sudah kalian copy pastekan sebelumnya
    */
    var firebaseConfig = {
        apiKey: "",
        authDomain: "",
        databaseURL: "", 
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: ""
    };
    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();
</script>
<script src="app.js"></script>

 

7. Membuat file App.js

Langkah selanjutnya adalah membuat file JavaScript baru yaitu App.js, file ini akan mengatur fungsionalitas dari aplikasi firebase yang telah dibuat seperti menghubungkan aplikasi dengan FIrebase dalam membaca, mengedit maupun menghapus data yang disimpan.

$(document).ready(function(){

    // tambah pesan baru kedalam table
    var tableShowMessage = function (key, values) {
        var table = $('#table-messages');
        var dibuat = (values.dibuat ? moment(values.dibuat).format('YYYY-MM-DD, HH:mm:ss') : '<em>no info</em>');
        var dirubah = (values.dirubah ? moment(values.dirubah).format('YYYY-MM-DD, HH:mm:ss') : '<em>not yet</em>');
        var newEntry = '<tr id="' + key + '"><td class="title">' + values.judul + '</td><td class="message">' + values.pesan + '</td>' +
            '<td class="created">' + dibuat + '</td><td class="created">' + dirubah + '</td>' +
            '<td class="table-col-action"><div class="btn-group">' +
            '<button class="btn btn-primary button-edit">Ubah</button><button class="btn btn-danger button-delete">Hapus</button>' +
            '</div></td></tr>';
        table.html(table.html() + newEntry);
    };

    // tampilkan pesan yang dimodifikasi kedalam table
    var tableModifyMessage = function(key, values) {
        $('#' + key + ' .title').text(values.judul);
        $('#' + key + ' .message').text(values.pesan);
    };

    // hapus pesan didalam table dan database
    var tableDeleteMessage = function (key) {
        $('#' + key).remove();
    };

    // menghubungkan kedalam firebase untuk pesan baru
    firebase.database().ref('messages').on('child_added', function(snapshot) {
        tableShowMessage(snapshot.key, snapshot.val());
    });

    // menghubungkan kedalam firebase untuk pesan yang dimodifikasi
    firebase.database().ref('messages').on('child_changed', function(snapshot) {
        tableModifyMessage(snapshot.key, snapshot.val());
    });

    // menghubungkan kedalam firebase untuk pesan yang dihapus
    firebase.database().ref('messages').on('child_removed', function(snapshot) {
        tableDeleteMessage(snapshot.key);
    });

    // function dari jquery untuk menampilkan modal dalam menambahkan pesan baru
    $('#form-add').submit(function (event) {
        var judul = $('#form-add-title');
        var pesan = $('#form-add-message');
        var button = $('#form-add-save');
        if(judul.val().length === 0 || pesan.val().length === 0) {
            alert('Silahkan masukan judul atau pesan terlebih dahulu.');
            return false;
        }
        button.prop('disabled', true);
        // simpan data baru kedalam database
        var newMessageKey = firebase.database().ref().child('messages').push({
            judul: judul.val().replace('<', '[').replace('>', ']'),
            pesan: pesan.val().replace('<', '[').replace('>', ']'),
            dibuat: firebase.database.ServerValue.TIMESTAMP
        }, function(error) {
            if (error) {
                alert('Pesan tidak dapat disimpan!');
            } else {
                judul.val('');
                pesan.val('');
                button.prop('disabled', false);
                $('#modal-add-message').modal('hide');
            }
        });
        return false;
    });

    // edit pesan
    $('#form-edit').submit(function (event) {
        var judul = $('#form-edit-title');
        var pesan = $('#form-edit-message');
        var key = $('#form-edit-key').val();
        var button = $('#form-edit-save');
        if(judul.val().length === 0 || pesan.val().length === 0) {
            alert('Silahkan masukan judul dan pesan anda.');
            return false;
        }
        button.prop('disabled', true);
        // simpan perubahan kedalam database
        var newMessageKey = firebase.database().ref().child('messages/' + key).set({
            judul: judul.val().replace('<', '[').replace('>', ']'),
            pesan: pesan.val().replace('<', '[').replace('>', ']'),
            dirubah: firebase.database.ServerValue.TIMESTAMP
        }, function(error) {
            if (error) {
                alert('Pesan tidak dapat disimpan!');
            } else {
                judul.val('');
                pesan.val('');
                button.prop('disabled', false);
                $('#modal-edit-message').modal('hide');
            }
        });
        return false;
    });

    // modal untuk tambah pesan
    $('#form-add-abort').click(function() {
        $('#modal-add-message').modal('hide');
    });

    // modal untuk edit pesan
    $('#form-edit-abort').click(function() {
        $('#modal-edit-message').modal('hide');
    });

    // tombol edit untuk pesan
    $(document).on('click', '.button-edit', function(event){
        var key = this.parentNode.parentNode.parentNode.id;
        $('#form-edit-key').val(key);
        $('#form-edit-title').val($('#' + key + ' .title').text());
        $('#form-edit-message').val($('#' + key + ' .message').text());
        $('#modal-edit-message').modal('show');
    });

    // tombol delete untuk pesan
    $(document).on('click', '.button-delete', function(event){
        if(window.confirm('Apakah anda yakin akan menghapus pesan ini?')) {
            var key = this.parentNode.parentNode.parentNode.id;
            firebase.database().ref().child('messages/' + key).remove();
        }
    });
});

 

Aplikasi CRUD sederhana dengan firebase sudah selesai, hasil akhir kalian bisa lihat screenshot dibawah ini:

 

Tutorial membuat CRUD realtime database dengan FIrebase - Modal Tambah data

1. Tambah data baru

 

Tutorial membuat CRUD realtime database dengan FIrebase - Data berhasil disimpan kedalam firebase

Tutorial membuat CRUD realtime database dengan FIrebase - Data berhasil disimpan

2. Data berhasil disimpan kedalam Firebase dan ditampilkan secara realtime ke user

 

Tutorial membuat CRUD realtime database dengan FIrebase - Merubah data yang terdapat didalam Firebase

3. Merubah data yang ada didalam Firebase

 

Tutorial membuat CRUD realtime database dengan FIrebase - Data berhasil dirubah

4. Data sudah berhasil dirubah

 

Penutup

Dengan adanya layanan dari Google ini, kalian sebenarnya bisa tidak menggunakan database seperti MySQL dan lainnya untuk menyimpan dan mengelola data anda, Firebase bisa menjadi solusi untuk mengatasi hal tersebut. Beberapa kemudahan dan fitur yang disediakan tentu bisa membuat kalian menjadi nyaman dan menggunakan layanan ini untuk jangka panjang.

Share