Tutorial Lengkap CRUD Codeigniter 4 menggunakan Firebase. Step by step membuat fitur Create, Read, Update dan Delete dengan Codeigniter 4 dan Firebase.
Tutorial kali ini disertai contoh program dan studi kasus.
Dijelaskan step by step mulai dari membuat project di Firebase, penggunaannya dan bagaimana mengintegrasikan ke Codeigniter 4.
Baca Juga: Tutorial Codeigniter 4 untuk Pemula
Berikut hasil akhir yang akan kita dapatkan setelah mempelajari tutorial ini:
Mari kita mulai…
Apa Itu Firebase?
Menurut Wikipedia Firebase adalah salah satu layanan dari Google yang memudahkan para app developer untuk mengembangkan aplikasi yang mereka buat.
Firebase termasuk ke dalam kategori Baas (Backend as a Service). Jadi ketika menggunakan Firebase, developer bisa fokus merancang aplikasinya saja tanpa harus susah payah berurusan dengan backend.
Awal mulanya, pada tahun 2011 Firebase dibantuk oleh Andrew Lee dan James Tamplin dengan nama perusahaan Envolve.
Salah satu produk mereka berdua yang pertama kali mereka kembangkan adalah realtime database .
Sebagai perusahaan raksasa, Google menganggap layanan ini sangat bagus dan potensial sehingga pada tahun 2014 akhirnya mereka mengakuisisi Firebase.
Akhirnya, Google mengenalkan Firebase pada tahun 2016 tepatnya bulan Mei di acara tahunan Google I/O.
Sampai saat ini, layanan Firebase terus dikembangkan oleh Google. Bahkan, sudah cukup banyak digunakan untuk berbagai jenis kebutuhan pembuatan aplikasi Android, iOS, bahkan website.
Karena mendukung kebutuhan website, kita akan mencoba integrasikan Firebase dengan Codeigniter 4.
Siap?
Cara Integrasi Codeigniter 4 dan Firebase
Ada beberapa syarat yang mesti dipenuhi sebelum melanjutkan step ini.
Step #1 – Periksan Koneksi Internet
Ya, karena menggunakan layanan dari Google, otomatis harus terhubung ke internet. Jika tidak, Firebase tidak akan dapat terhubung dengan website.
Step #2 – Memiliki Akun Firebase
Cukup mudah mendaftarkan akun Gmail kamu di Firebase. Silahkan kunjungi link https://console.firebase.google.com, login dengan akun Gmail mu. Simsalabim. Akun Firebasemu sudah bisa dikelola.
Step #3 – Membuat Project Baru di Firebase
Silahkan buat project baru dengan klik menu "Buat Project".
Perhatikan gambar di bawah ini:
Kemudian beri nama project sesuai yang kamu inginkan.
… di sini saya memberi nama dengan crud codeigniter4.
Kemudian non aktifkan fitur deteksi Google Analytic karena kita tidak membutuhkannya. Jika project kamu sudah besar dan membutuhkannya, silahkan diaktifkan. Namun sementara ini kita tidak menggunakannya.
Lalu klik tombol Buat Project dan tunggu sampai proses selesai.
Bila sudah selesai, klik Lanjutkan.
Nah, sekarang mari kita pilih integrasi web seperti pada gambar di bawah ini:
Sekarang beri nama lagi pada aplikasi yang akan kita buat. Oh iya, kita tidak perlu centang Firebase Hosting karena kita tidak membutuhkannya. Langsung saja klik Daftarkan Aplikasi.
Terakhir, kita akan mendapatkan SDK Firebase yang bersifat rahasia.
Kemudian klik tombol Lanjut ke Console.
Step #4 – Membuat Database Baru di Firebase
Kita sudah berhasil membuat project baru, sekarang saatnya membuat database step by step.
Pertama, di halaman dahsboard, pilih menu Realtime Database.
Kedua, pilih Buat Database.
Ketiga, centang mode terkunci (kita bisa mengubahnya nanti) dan klik menu aktifkan.
Violaaaa! Database sudah berhasil dibuat.
Eh tunggu dulu, yuk kita ubah pengaturannya agar bisa mengelola databasenya.
Penting!Karena ini sekedar uji coba. Jadi jangan terlalu bermasalah dengan keamanan. Jika aplikasi kamu production, silahkan atur keamanannya.
Step #5 – Download Framework Codeigniter 4 untuk Firebase
Sekarang saatnya kita download Codeigniter 4 dan melakukan installasi di web server local kita. Berikut cara install Codeigniter 4 dengan jelas:
- Kunjungi situs resminya di Codeigniter.com
- Pindahkan hasil download ke folder
xampp/htdocs(pengguna XAMPP),laragon/www(pengguna Laragon) dan yang lain tinggal menyesuaikan. - Extract hasil download.
- Jika sudah selesai, rename folder dengan nama
crud_ci4_firebase.
… untuk tutorial cara install Codeigniter 4 yang lebih lengkap (disertai penjelasan dan tambahan melalui composer) bisa membaca tutorial berikut ini:
Baca Juga: Tutorial Install Codeigniter 4 dengan Composer dan Manual
Step #6 – Modifikasi Controller Home
Saat pertama kali download, Codiegniter 4 sudah menyediakan controller Home.php yang bisa langsung kita modifikasi.
Silahkan buka file Home.php yang ada di direktori app/Controllers.
Modifikasi bagian menampilkan halaman view:
<?php namespace App\Controllers;
class Home extends BaseController
{
public function index()
{
return view('v_index');
}
}
Sebelumnya terisi dengan welcome_message, kita ganti dengan v_index.
Step #7 – Konfigurasi Environment untuk Firebase di Codeigniter 4
Silahkan ubah nama file env menjadi .env (ada titiknya).
Kemudian ubah ENVIRONMENT production menjadi development agar apabila terjadi error, kita bisa membaca pesan errornya.
CI_ENVIRONMENT = development
Kemudian ini hal yang sangat penting, tambahkan beberapa baris di bawah ini pada file .env
#-------------------------------------------------------------------- # FIREBASE #-------------------------------------------------------------------- apiKey = "api key mu", authDomain = "auth domain mu", databaseURL = "database url mu", projectId = "project id mu", storageBucket = "storage bucket mu", messagingSenderId = "id message sendermu", appId = "app id mu"
Kenapa saya taro di .env?
Sebab dengan meletakannya di sini pemanggilannya akan jauh lebih mudah ketimbang harus bikin helper atau library lagi yang pastinya memakan waktu dan makin panjang tutorial ini.
Lanjut ya …
Step #8 – Membuat Halaman View
Buat file baru bernama v_index.php dan simpan ke dalam direktori app/Views.
Ketik kode lengkap berikut ini:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Tutorial Lengkap CRUD Codeigniter 4 dengan Firebase + Bootstrap</title>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h4 class="text-center">Tutorial Lengkap CRUD Codeigniter 4 dengan Firebase + Bootstrap</h4><br>
<h5># Tambah Siswa</h5>
<div class="card card-default">
<div class="card-body">
<form id="addStudent" class="form-inline" method="POST" action="">
<div class="form-group mb-2">
<label for="nis" class="sr-only">Nomor Induk Siswa</label>
<input id="nis" type="text" class="form-control" name="nis" placeholder="Nomor Induk Siswa" required autofocus>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="name" class="sr-only">Nama Siswa</label>
<input id="name" type="text" class="form-control" name="name" placeholder="Nama Siswa" required autofocus>
</div>
<div class="form-group mb-2">
<label for="age" class="sr-only">Usia</label>
<input id="age" type="text" class="form-control" name="age" placeholder="Usia" required autofocus>
</div>
<button id="submitStudent" type="button" class="btn btn-primary mx-sm-3 mb-2">Tambah</button>
</form>
</div>
</div>
<br>
<h5># Data Siswa</h5>
<table class="table table-bordered">
<tr>
<th>NIS</th>
<th>Nama Siswa</th>
<th>Usia</th>
<th width="180" class="text-center">Action</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
</div>
<!-- Update Model -->
<form action="" method="POST" class="users-update-record-model form-horizontal">
<div id="update-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content" style="overflow: hidden;">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">Update</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
</div>
<div class="modal-body" id="updateBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-success updateStudent">Update
</button>
</div>
</div>
</div>
</div>
</form>
<!-- Delete Model -->
<form action="" method="POST" class="users-remove-record-model">
<div id="remove-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">Delete</h4>
<button type="button" class="close remove-data-from-delete-form" data-dismiss="modal" aria-hidden="true">×
</button>
</div>
<div class="modal-body">
<p>Apakah Anda yakin ingin menghapus data siswa ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect remove-data-from-delete-form" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-danger waves-effect waves-light deleteStudent">Delete
</button>
</div>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
<script>
// Initialize Firebase
var firebaseConfig = {
apiKey: "<?= ENV('apiKey') ?>",
authDomain: "<?= ENV('authDomain') ?>",
databaseURL: "<?= ENV('databaseURL') ?>",
storageBucket: "<?= ENV('storageBucket') ?>",
messagingSenderId: "<?= ENV('messagingSenderId') ?>",
appId: "<?= ENV('appId') ?>",
measurementId: "<?= ENV('measurementId') ?>",
appId: "<?= ENV('appId') ?>"
};
firebase.initializeApp(firebaseConfig);
var database = firebase.database();
var lastIndex = 0;
// Get Data
firebase.database().ref('students/').on('value', function (snapshot) {
var value = snapshot.val();
var htmls = [];
$.each(value, function (index, value) {
if (value) {
htmls.push('<tr>\
<td>' + value.nis + '</td>\
<td>' + value.name + '</td>\
<td>' + value.age + '</td>\
<td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateStudent" data-id="' + index + '">Update</button>\
<button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeStudent" data-id="' + index + '">Delete</button></td>\
</tr>');
}
lastIndex = index;
});
$('#tbody').html(htmls);
$("#submitStudent").removeClass('disabled');
});
// Add Data
$('#submitStudent').on('click', function () {
var values = $("#addStudent").serializeArray();
var nis = values[0].value;
var name = values[1].value;
var age = values[2].value;
var userID = lastIndex + 1;
firebase.database().ref('students/' + userID).set({
nis: nis,
name: name,
age: age,
});
// Reassign lastID value
lastIndex = userID;
$("#addStudent input").val("");
// menampilkan alert
alert("Berhasil menambah data");
});
// Update Data
var updateID = 0;
$('body').on('click', '.updateStudent', function () {
updateID = $(this).attr('data-id');
firebase.database().ref('students/' + updateID).on('value', function (snapshot) {
var values = snapshot.val();
var updateData = '<div class="form-group">\
<label for="edit_nis" class="col-md-12 col-form-label">Nomor Induk Siswa</label>\
<div class="col-md-12">\
<input id="edit_nis" type="text" class="form-control" name="edit_nis" value="' + values.nis + '" placeholder="Nomor Induk Siswa" required autofocus>\
</div>\
</div>\
<div class="form-group">\
<label for="edit_name" class="col-md-12 col-form-label">Nama Lengkap</label>\
<div class="col-md-12">\
<input id="edit_name" type="text" class="form-control" name="edit_name" value="' + values.name + '" placeholder="Nama Siswa" required autofocus>\
</div>\
</div>\
<div class="form-group">\
<label for="edit_age" class="col-md-12 col-form-label">Usia</label>\
<div class="col-md-12">\
<input id="edit_age" type="text" class="form-control" name="edit_age" value="' + values.age + '" placeholder="Usia" required autofocus>\
</div>\
</div>';
$('#updateBody').html(updateData);
});
});
$('.updateStudent').on('click', function () {
var values = $(".users-update-record-model").serializeArray();
var postData = {
nis: values[0].value,
name: values[1].value,
age: values[2].value,
};
var updates = {};
updates['/students/' + updateID] = postData;
firebase.database().ref().update(updates);
// menyembunyikan modal
$("#update-modal").modal('hide');
// menampilkan alert
alert("Berhasil mengubah data");
});
// Remove Data
$("body").on('click', '.removeStudent', function () {
var id = $(this).attr('data-id');
$('body').find('.users-remove-record-model').append('<input name="id" type="hidden" value="' + id + '">');
});
$('.deleteStudent').on('click', function () {
var values = $(".users-remove-record-model").serializeArray();
var id = values[0].value;
firebase.database().ref('students/' + id).remove();
$('body').find('.users-remove-record-model').find("input").remove();
// menyembunyikan modal
$("#remove-modal").modal('hide');
// menampilkan alert
alert("Berhasil menghapus data");
});
$('.remove-data-from-delete-form').click(function () {
$('body').find('.users-remove-record-model').find("input").remove();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Penjelasannya donk?
Oke. Pertama-tama kita perlu paham dulu bahwa proses edit, update dan delete dilakukan menggunakan modal bootstrap.
So, di awal kita cukup membuat table dengan atribut id yang ditargetkan oleh jQuery dan Firebase.
<tbody id="tbody"></tbody>
… dengan kode seperti ini kita membuat id bernama tbody.
Nantinya id ini akan kita panggil di jQuery untuk generate data dari Firebase berdasarkan kode baris 128 sd 146.
// Get Data
firebase.database().ref('students/').on('value', function (snapshot) {
var value = snapshot.val();
var htmls = [];
$.each(value, function (index, value) {
if (value) {
htmls.push('<tr>\
<td>' + value.nis + '</td>\
<td>' + value.name + '</td>\
<td>' + value.age + '</td>\
<td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateStudent" data-id="' + index + '">Update</button>\
<button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeStudent" data-id="' + index + '">Delete</button></td>\
</tr>');
}
lastIndex = index;
});
$('#tbody').html(htmls);
$("#submitStudent").removeClass('disabled');
});
… tetapi jangan lupa kalau kita memerlukan konfigurasi sebelumnya.
Perhatikan baris kode ke 111 sd 122.
// Initialize Firebase
var firebaseConfig = {
apiKey: "<?= ENV('apiKey') ?>",
authDomain: "<?= ENV('authDomain') ?>",
databaseURL: "<?= ENV('databaseURL') ?>",
storageBucket: "<?= ENV('storageBucket') ?>",
messagingSenderId: "<?= ENV('messagingSenderId') ?>",
appId: "<?= ENV('appId') ?>",
measurementId: "<?= ENV('measurementId') ?>",
appId: "<?= ENV('appId') ?>"
};
firebas
Saya tidak mau repot-repot membuat helper dan library untuk menangani ini. Toh, database saja bisa diletakan di .env kan?
Jadi saya cukup menggunakan function ENV('key') saja untuk mengambil value data dari .env.
Pada beris ke 148 sd 147 kita membuat suatu function untuk push hasil input form ke dalam Firebase.
Saat melakukan insert kita menggunakan function set().
// Add Data
$('#submitStudent').on('click', function () {
var values = $("#addStudent").serializeArray();
var nis = values[0].value;
var name = values[1].value;
var age = values[2].value;
var userID = lastIndex + 1;
firebase.database().ref('students/' + userID).set({
nis: nis,
name: name,
age: age,
});
// Reassign lastID value
lastIndex = userID;
$("#addStudent input").val("");
// menampilkan alert
alert("Berhasil menambah data");
});
… Baris ke 169 sd 212 kita melakukan 2 hal, yaitu proses mengirim data ke modal edit dan menyimpan data hasil edit.
Perhatikan kode berikut ini:
// Update Data
var updateID = 0;
$('body').on('click', '.updateStudent', function () {
updateID = $(this).attr('data-id');
firebase.database().ref('students/' + updateID).on('value', function (snapshot) {
var values = snapshot.val();
var updateData = '<div class="form-group">\
<label for="edit_nis" class="col-md-12 col-form-label">Nomor Induk Siswa</label>\
<div class="col-md-12">\
<input id="edit_nis" type="text" class="form-control" name="edit_nis" value="' + values.nis + '" placeholder="Nomor Induk Siswa" required autofocus>\
</div>\
</div>\
<div class="form-group">\
<label for="edit_name" class="col-md-12 col-form-label">Nama Lengkap</label>\
<div class="col-md-12">\
<input id="edit_name" type="text" class="form-control" name="edit_name" value="' + values.name + '" placeholder="Nama Siswa" required autofocus>\
</div>\
</div>\
<div class="form-group">\
<label for="edit_age" class="col-md-12 col-form-label">Usia</label>\
<div class="col-md-12">\
<input id="edit_age" type="text" class="form-control" name="edit_age" value="' + values.age + '" placeholder="Usia" required autofocus>\
</div>\
</div>';
$('#updateBody').html(updateData);
});
});
$('.updateStudent').on('click', function () {
var values = $(".users-update-record-model").serializeArray();
var postData = {
nis: values[0].value,
name: values[1].value,
age: values[2].value,
};
var updates = {};
updates['/students/' + updateID] = postData;
firebase.database().ref().update(updates);
// menyembunyikan modal
$("#update-modal").modal('hide');
// menampilkan alert
alert("Berhasil mengubah data");
});
Kita bisa memanfaatkan snapshot untuk mengambil data dan melakukan update dengan function update().
Terakhir, pada baris ke 214 sd 232 kita akan memanggil modal delete dan melakukan proses delete data ke Firebase.
Kodenya terletak pada bagian ini:
// Remove Data
$("body").on('click', '.removeStudent', function () {
var id = $(this).attr('data-id');
$('body').find('.users-remove-record-model').append('<input name="id" type="hidden" value="' + id + '">');
});
$('.deleteStudent').on('click', function () {
var values = $(".users-remove-record-model").serializeArray();
var id = values[0].value;
firebase.database().ref('students/' + id).remove();
$('body').find('.users-remove-record-model').find("input").remove();
// menyembunyikan modal
$("#remove-modal").modal('hide');
// menampilkan alert
alert("Berhasil menghapus data");
});
$('.remove-data-from-delete-form').click(function () {
$('body').find('.users-remove-record-model').find("input").remove();
});
Gimana sudah jelas kan?
Kalau belum coba baca ulang lagi. Pelan-pelan. Pahami setiap kata per kata lagi. Tidak perlu buru-buru ya.
Kita lanjut …
Step #9 – Uji Coba Testing CRUD Codeigniter 4 dengan Firebase
Simpan semua file yang kita sudah buat sebelumnya.
Cek lagi dengan teliti jangan sampai ada yang terlewatkan.
Bila sudah tidak ada yang ketinggalan, jalankan dengan mengetikan perintah php spark serve.
… lalu buka browser dan ketik URL berikut ini:
localhost:8080
Jika berjalan dengan lancar, maka hasilnya akan seperti ini:
Penutup
Akhirnya telah selesai Tutorial Lengkap Sistem CRUD (Create Read Update Delete) Data dengan Codeigniter 4, Firebase dan Bootstrap.
Saya menyadari mungkin masih banyak kekurangan atau tambahan ilmu yang lebih luas lagi.
Tetapi mudah-mudahan ilmu yang sederhana ini bisa bermanfaat luas untuk semua pembaca.
Jika merasa tutorial ini bermanfaat share ya.
Klo cara di atas itu berarti dataya realtimey
Betul