Cara menggunakan firebase authentication php

Content dated before 2011-04-08 [UTC] is licensed under CC BY-SA 2.5. Content dated from 2011-04-08 up to but not including 2018-05-02 [UTC] is licensed under CC BY-SA 3.0. Content dated on or after 2018-05-02 [UTC] is licensed under CC BY-SA 4.0. | Privacy

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.

Firebase Realtime Database Demo

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

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

    /**
    * 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[];

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'] : 'no info'];
        var dirubah = [values.dirubah ? moment[values.dirubah].format['YYYY-MM-DD, HH:mm:ss'] : 'not yet'];
        var newEntry = '' + values.judul + '' + values.pesan + '' +
            '' + dibuat + '' + dirubah + '' +
            '
' +
            'UbahHapus' +
            '
';
        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['', ']'],
            pesan: pesan.val[].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['', ']'],
            pesan: pesan.val[].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:

1. Tambah data baru

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

3. Merubah data yang ada didalam Firebase

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.

Apa itu Firebase Authentication?

Bagaimana cara kerja Firebase?

Firebase digunakan untuk apa?

Jenis Database apakah yang digunakan oleh Firebase?