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.

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:

4. Membuat Web App baru

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

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

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.

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

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.

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.

  

    

      
Pesan anda
        Tambah pesan baru
      
      

        

          

            
Judul
            
Pesan
            
Dibuat
            
Dirubah
            

            
          
        
        

        
      
    
  


  

    

      

        
Tambah pesan
        
          ×
        
      
      

        

          

            Judul
            
          
          

            Pesan
                        
          
          Save
          Abort
        
      
    
  


  

    

      

        
Ubah pesan
        
          ×
        
      
      

        

          
          

            Judul
            
          
          

            Pesan
                        
          
          Save
          Abort
        
      
    
  

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

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 = '