Realtime Database termasuk dalam kategori basis data NoSQL, sehingga memiliki optimalisasi dan fitur yang berbeda dibanding dengan basis data relasional.
Firebase memiliki produk yaitu Realtime Database dimana data disimpan dan diterapkan dalam format JSON, dan sinkronisasi data dilakukan secara langsung ke stiap pengguna yang terhubung.
Adapun keunggulan lainnya yaitu mendukung berbagai platform seperti Android, IOS, dan web. Hal ini dapat memudahkan kita untuk membuat aplikasi seragam di berbagai perangkat.
Firebase Realtime Database juga tersedia untuk mode offline, jadi data akan disinkronkan secara otomatis saat koneksi tersedia kembali.
Oke, sekarang kita langsung ke langkah-langkah membuat CRUD dengan PHP dan Firebase Realtime Database.
Buat Proyek Firebase
Silahkan buat proyek baru di Firebase Console, kemudian disini saya akan memberi nama blogs untuk proyeknya karena kita akan membuat CRUD blog sederhana. Setelah membuat nama proyek silahkan anda ikut langkah-langkah selanjutnya untuk menyelesaikan proses pembuatan proyek.
Aktifkan Firebase Realtime Database
Setelah berhasil membuat proyek Firebase silahkan anda masuk ke dashboard proyek yang telah anda buat. Pada menu sebelah kiri silahkan pilih “Build > Realtime Database”.
Setelah membuka halaman “Realtime Database” sekarang silahkan anda klik Create Database, silahkan pilih location realtime database kemudian klik Next. Setelah itu anda bisa pilih Test Mode dan klik Enable. Sekarang kita berhasil membuat dan mengaktifkan Realtime Database.
Instalasi Firebase Admin SDK untuk PHP
Oke kita lanjut ke langkah berikutnya. Kita buat dulu folder proyek PHP kalian bisa jalankan kode berikut di terminal anda
mkdir rdb-firebase
Kemudian kita masuk ke folder yang baru dibuat dengan perintah berikut
cd rdb-firebase
Sekarang terminal kita berada di proyek PHP yang baru dibuat dengan nama rdb-firebase, untuk namanya kalian bisa ganti sesuai keinginan.
Langkah selanjutnya kita perlu menginstall Firebase Admin SDK, silahkan jalankan kode berikut di terminal anda.
composer require kreait/firebase-php
Konfigurasi Firebase di PHP
Setelah berhasil menginstall Firebase Admin SDK, Langkah selanjutnya buat konfigurasi Firebase di PHP. Silahkan kalian buat file dengan nama “db.php”. Kemudian copy kode berikut di file “db.php” anda.
<?php
require __DIR__ . '/vendor/autoload.php';
use Kreait\Firebase\Factory;
$factory = (new Factory())
->withServiceAccount('your-key.json')
->withDatabaseUri('https://your-db.app/');
/*
withServiceAccount dari config API Firebase
withDatabaseUri dari utl database Firebase
*/
$database = $factory->createDatabase();Dapatkan Konfigurasi API Firebase
Selanjutnya kita perlu mendapatkan API Firebase. Silahkan anda buka kembali tampilan Firebase kemudian pilih “Project Setting” seperti gambar berikut ini.
Setelah membuka halaman Project Setting silahkan anda klik bagian “Service accounts”, kemudian scroll ke bawah klik “Genereate new private key” dan klik “Generate key” maka secara otomatis akan mendownload file json yang merupakan konfigurasi API Firebase.
Langkah selanjutnya pindahkan file json tersebut ke dalam proyek PHP kalian. Kemudian buka kembali file db.php dan ubah pada bagian config api key firebase dengan nama file Konfigurasi API Firebase yang baru didapat.
Oke langkah selanjutnya kita salin database url Firebase. Buka kembali website Firebase, kemudian anda buka halaman “Realtime Database” seperti gambar berikut.
Setelah itu buka kembali file db.php anda dan paste url tersebut dibagian “’https://your-db.app/”.
Implementasi PHP CRUD dengan Firebase Realtime Database
Sekarang kita buat terlebih dahulu tampilannya. Silahkan kalian buat folder dengan nama layouts kemudian didalam folder layouts silahkan kalian buat file dengan nama app.php dan paste kode berikut ini di file app.php anda.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Blog Leravio</title>
</head>
<body>
<?php include('layouts/navbar.php'); ?>
Selanjutnya kita buat navbarnya. Silahkan kalian buat file dengan nama navbar.php dan paste kode berikut di file navbar.php anda.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://leravio.com/wp-content/uploads/2021/07/logo1-e1663067784966.png" alt="" width="300">
</a>
</div>
</nav>
Dan terakhir kita buat footernya. Silahkan buat file dengan nama footer.php dan copy kode berikut ini.
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Sekarang kita buat beberapa file sehingga struktur file anda akan seperti berikut ini.
Silahkan buka file create-blog.php kemudian copy kode berikut ini ke file anda.
<?php include('layouts/app.php'); ?>
<div class="container mb-3">
<h3 class="text-center">Form Tambah Blog</h3>
<form action="action-store.php" method="POST">
<div class="mb-3">
<label for="title" class="form-label">Judul</label>
<input type="text" name="title" class="form-control" id="title">
</div>
<div class="mb-3">
<label for="image" class="form-label">Url Gambar</label>
<input type="text" name="image" class="form-control" id="image">
</div>
<div class="mb-3">
<label for="category" class="form-label">Kategori</label>
<input type="text" name="category" class="form-control" id="category">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Deskripsi</label>
<textarea class="form-control" name="description" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<a href="index.php"><button type="button" class="btn btn-secondary">Kembali</button></a>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
</div>
<?php include('layouts/footer.php'); ?>Kode diatas untuk membuat form tambah data blog. Setelah itu kita buat backendnya untuk menyimpan database di Firebase. Silahkan buka file action-stroe.php dan copy kode berikut ini ke file anda.
<?php
session_start();
include('db.php');
// Ambil data dari formulir POST
$title = $_POST['title'];
$image = $_POST['image'];
$category = $_POST['category'];
$description = $_POST['description'];
// Susun data formulir ke dalam bentuk array
$formData = [
'title' => $title,
'image' => $image,
'category' => $category,
'description' => $description,
];
// Tentukan tabel dalam Firebase Realtime Database
$table = "blogs";
// Simpan data baru ke dalam Firebase Realtime Database
$storeData = $database->getReference($table)->push($formData);
// Periksa apakah penyimpanan data berhasil atau tidak
if ($storeData) {
// Jika berhasil, atur notifikasi dan arahkan kembali ke halaman utama
$_SESSION['notif'] = 'Data berhasil ditambah';
header('Location: index.php');
} else {
// Jika gagal, atur notifikasi dan arahkan kembali ke halaman utama
$_SESSION['notif'] = 'Data gagal ditambah';
header('Location: index.php');
}
Kode diatas berfungsi untuk menyimpan data yang kita kirim ke dalam Firebase Realtime Database.
Kemudian untuk menampilkan data yang berhasil di simpan ke dalam database Firebase, silahkan buka file index.php dan copy kode berikut ini.
<?php
session_start();
include('layouts/app.php');
?>
<div class="container mb-3">
<h3 class="text-center">Data Blog</h3>
<a href="create-blog.php"><button type="button" class="btn btn-primary">Tambah Blog</button></a>
<?php
if (isset($_SESSION['notif'])) {
echo "<div class='alert alert-primary mt-3' role='alert'>" . $_SESSION['notif'] . "</div>";
unset($_SESSION['notif']);
}
?>
<table class="table">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Gambar</th>
<th scope="col">Judul</th>
<th scope="col">Kategori</th>
<th scope="col">Deskripsi</th>
<th scope="col">Opsi</th>
</tr>
</thead>
<tbody>
<?php
include('db.php');
$table = "blogs";
$data = $database->getReference($table)->getValue();
if ($data > 0) {
$i = 1;
foreach ($data as $key => $value) {
?>
<tr>
<th scope="row"><?= $i++; ?></th>
<td>
<img src="<?= $value['image']; ?>" alt="<?= $value['title']; ?>">
</td>
<td><?= $value['title']; ?></td>
<td><?= $value['category']; ?></td>
<td><?= $value['description']; ?></td>
<td>
<div class="d-flex">
<a href="edit-blog.php?id=<?= $key; ?>" class="me-2"><button type="button" class="btn btn-success">Edit</button></a>
<form action="action-destroy.php" method="post">
<button type="submit" name="delete_key" value="<?= $key; ?>" class="btn btn-danger">Delete</button>
</form>
</div>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
<?php include('layouts/footer.php'); ?>Silahkan buka proyek PHP anda di browser, maka akan menampilkan table dari data yang sudah anda tambahkan.
Selanjutnya kita buat fitur untuk mengedit data. Silahkan buka file edit-blog.php dan copy kode berikut.
<?php include('layouts/app.php'); ?>
<div class="container mb-3">
<h3 class="text-center">Form Edit Blog</h3>
<?php
include('db.php');
if (isset($_GET['id'])) {
$index = $_GET['id'];
$table = "blogs";
$data = $database->getReference($table)->getChild($index)->getValue();
if ($data > 0) {
?>
<form action="action-update.php" method="POST">
<input type="hidden" name="key" value="<?= $index; ?>">
<div class="mb-3">
<label for="title" class="form-label">Judul</label>
<input type="text" name="title" class="form-control" id="title" value="<?= $data['title']; ?>">
</div>
<div class="mb-3">
<label for="image" class="form-label">Url Gambar</label>
<input type="text" name="image" class="form-control" id="image" value="<?= $data['image']; ?>">
</div>
<div class="mb-3">
<label for="category" class="form-label">Kategori</label>
<input type="text" name="category" class="form-control" id="category" value="<?= $data['category']; ?>">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Deskripsi</label>
<textarea class="form-control" name="description" id="exampleFormControlTextarea1" rows="3"><?= $data['description']; ?></textarea>
</div>
<a href="index.php"><button type="button" class="btn btn-secondary">Kembali</button></a>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
<?php
}
}
?>
</div>
<?php include('layouts/footer.php'); ?>Kode diatas merupakan tampilan untuk form edit data blog. Naahh, sekarang kita perlu tambahkan backend untuk menyimpan perubahan ke dalam database Firebase.
Silahkan anda buka file action-update.php kemudian copy kode berikut ini.
<?php
session_start();
include('db.php');
// Ambil data dari formulir POST
$key = $_POST['key'];
$title = $_POST['title'];
$image = $_POST['image'];
$category = $_POST['category'];
$description = $_POST['description'];
// Susun data formulir ke dalam bentuk array
$formData = [
'title' => $title,
'image' => $image,
'category' => $category,
'description' => $description,
];
// Tentukan jalur ke tabel yang akan diubah dalam Firebase Realtime Database
$table = "blogs/" . $key;
// Perbarui data dalam Firebase Realtime Database
$updateData = $database->getReference($table)->update($formData);
// Periksa apakah pembaruan data berhasil atau tidak
if ($updateData) {
// Jika berhasil, atur notifikasi dan arahkan kembali ke halaman utama
$_SESSION['notif'] = 'Data berhasil diubah';
header('Location: index.php');
} else {
// Jika gagal, atur notifikasi dan arahkan kembali ke halaman utama
$_SESSION['notif'] = 'Data gagal diubah';
header('Location: index.php');
}
Kode diatas berfungsi untuk menyimpan perubahan pada Firebase Realtime Database. Oke sekarang kita perlu tambahkan fitur terakhir yaitu delete data.
Silahkan kalian buka file dengan nama action-destroy.php kemudian anda copy kode berikut ini.
<?php
session_start();
include('db.php');
// Ambil key data yang akan dihapus dari formulir POST
$key = $_POST['delete_key'];
// Tentukan jalur ke tabel yang akan dihapus
$table = "blogs/" . $key;
// Hapus data dari database Firebase Realtime
$deleteData = $database->getReference($table)->remove();
// Periksa apakah penghapusan berhasil atau tidak
if ($deleteData) {
// Jika berhasil, atur notifikasi dan arahkan kembali ke halaman utama
$_SESSION['notif'] = 'Data berhasil dihapus';
header('Location: index.php');
} else {
// Jika gagal, atur notifikasi dan arahkan kembali ke halaman utama
$_SESSION['notif'] = 'Data gagal dihapus';
header('Location: index.php');
}
Dengan mengikuti langkah-langkah tersebut, Anda dapat membuat CRUD sederhana yang memanfaatkan Firebase Realtime Database untuk menyimpan dan memanipulasi data secara realtime. Tutorial ini memberikan dasar untuk memahami integrasi antara PHP dan Firebase, dan Anda dapat memodifikasinya sesuai dengan kebutuhan proyek Anda yang lebih kompleks.