Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial CRUD Codeigniter 4 dengan Firebase dan Bootstrap

9 min read

Tutorial Lengkap CRUD Codeigniter 4 (CI4) dengan Firebase dan Bootstrap

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:

hasil akhir crud codeigniter 4 firebase

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.

Logo Firebase

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.

membuat nama project crud codeigniter 4 di firebase

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:

memilih menu website untuk project crud codeigniter 4 di firebase

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.

mendapatkan sdk untuk project crud codeigniter 4 di firebase

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.

membuat database baru untuk project crud codeigniter 4 di firebase

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:

  1. Kunjungi situs resminya di Codeigniter.com
  2. Pindahkan hasil download ke folder xampp/htdocs (pengguna XAMPP), laragon/www (pengguna Laragon) dan yang lain tinggal menyesuaikan.
  3. Extract hasil download.
  4. 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:

hasil akhir crud codeigniter 4 firebase

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.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

2 Replies to “Tutorial CRUD Codeigniter 4 dengan Firebase dan Bootstrap”

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.