Cara Membuat CRUD Codeigniter 4 dengan 10 Langkah Mudah Ini

Last Updated on April 28, 2022 by

Sama halnya dengan versi sebelumnya, Codeigniter 4 bisa digunakan untuk membuat sebuah program CRUD. CRUD Codeigniter 4 serta CRUD jenis lainnya berisikan empat fungsi yang dianggap perlu untuk mengimplementasikan aplikasi penyimpanan persisten: buat, baca, perbarui, dan hapus.

CRUD adalah penyimpanan persisten mengacu pada perangkat penyimpanan data apa pun yang mempertahankan daya setelah perangkat dimatikan, seperti hard disk atau solid-state drive. Sebaliknya, memori akses acak dan caching internal adalah dua contoh memori volatile, di mana mereka berisi data yang akan dihapus ketika kehilangan daya.

Bagaimana Cara Kerja CRUD?

crud-codeigniter-4.

CRUD adalah aplikasi yang cukup sederhana. Ia bekerja dengan melakukan pelacakan data pelanggan, akun, informasi pembayaran, data kesehatan, dan catatan lainnya memerlukan perangkat keras penyimpanan data dan aplikasi yang menyediakan penyimpanan persisten.

Data ini biasanya diatur ke dalam database, yang merupakan kumpulan data terorganisir yang dapat dilihat secara elektronik. Ada banyak jenis database : database hirarkis, database grafik dan database berorientasi objek untuk beberapa nama.

Jenis database yang paling sering terimplementasi adalah database relasional. Ini terdiri dari data yang dimasukkan ke dalam baris dan kolom dan dihubungkan ke tabel lain dengan informasi pelengkap oleh sistem kata kunci yang mencakup kunci utama dan kunci asing.

Cara Membuat CRUD Codeigniter 4

Membuat CRUD Codeigniter 4 tidaklah jauh berbeda dengan cara membuat CRUD pada framework lainnya. Berikut ini adalah cara membuat CRUD pada Codeigniter 4 dengan mudah.

Persiapan Membuat CRUD Codeigniter 4

Langkah 1: Membuat Model dan Tabel Contact

Dalam membuat CRUD adalah tentunya akan membuat model dan tabel contact. Pertama-tama, Anda harus membuat model contact pada Codeigniter 4. Anda bisa membuatnya dengan menjalankan perintah berikut.

php spark make:model Contact

Atau Anda bisa membuatnya secara manual seperti di bawah ini.

<?php

namespace App\Models;

use CodeIgniter\Model;

class Contact extends Model
{
    protected $table                = 'contacts';
    protected $primaryKey           = 'id';
    protected $useAutoIncrement     = true;
    protected $allowedFields        = ['nama','email','telepon','alamat'];
}

Selanjutnya, bukalah file models/Contact.php setelah itu Anda bisa menyesuaikan kode yang ada menjadi seperti kode yang tertera di atas. Perlu diperhatikan bahwa model contact ini adalah tabel dengan field seperti nama, email, telepon, dan alamat.

Langkah 2 : Membuat Migrasi

Setelah membuat tabel contact, langkah selanjutnya adalah membuat file migration. Jika Anda ingin membuat migration di Codeigniter 4, Anda bisa menjalankan perintah sederhana seperti di bawah ini.

php spark make:migration Contact

Anda juga bisa membuat migration secara manual dalam direktori app/Database/Migrations.

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Contact extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'id'          => [
                'type'           => 'INT',
                'constraint'     => 5,
                'unsigned'       => true,
                'auto_increment' => true
            ],
            'nama'       => [
                'type'           => 'VARCHAR',
                'constraint'     => '255'
            ],
            'email'      => [
                'type'           => 'VARCHAR',
                'constraint'     => 100,
            ],
            'telepon' => [
                'type'           => 'VARCHAR',
                'constraint'     => 100,
            ],
            'alamat'      => [
                'type'           => 'VARCHAR',
                'constraint'     => 255,
            ],
        ]);

        $this->forge->addKey('id', TRUE);

        $this->forge->createTable('contacts', TRUE);
    }

    public function down()
    {
        $this->forge->dropTable('contacts');
    }
}

Langkah selanjutnya, Anda bisa membuka file contact migration yang baru saja Anda buat lalu menyesuaikan kode di dalamnya menjadi seperti kode di atas. Jika sudah selesai, lanjutkan dengan menjalankan perintah berikut.

php spark migrate

Membuat Fitur CREATE

Jika Anda sudah membuat model dan tabel contact, selanjutnya adalah membuat fitur Create. Berikut adalah langkah demi langkah untuk membuat Create pada Codeigniter 4.

Langkah 1: Buatlah Route

Dalam membuat Create, hal pertama yang harus Anda buat adalah Route. Ini nantinya kan dipanggil ketika Anda berniat melihat data contact serta menambah contact. Cara membuatnya adalah dengan buka file app/Config/Routes.php. Tambahkan kode di bawah ini.

$routes->get('contact', 'ContactController::index');
$routes->add('contact', 'ContactController::create');

Route Group Anda pun akan terlihat seperti di bawah ini.

Langkah 2 : Buatlah Sebuah Controller

Selanjutnya, hal yang harus Anda buat adalah Controller. Dalam Codeigniter 4, jika Anda ingin membuat Controller, Anda bisa lakukan dengan cara menjalankan command berikut ini.

php spark make:controller ContactController

Anda juga bisa membuat controller secara manual, dengan menciptakan file baru dengan nama ContactController.php yang ada dalam direktori app/Controllers. Buka file tersebut seperti dengan yang ada di bawah ini. Perlu diingat bahwa dalam Controller ini kita punya 3 function seperti Constract, Create, dan Index.

Langkah 3 : Buat Contact View

Langkah selanjutnya adalah membuat folder baru di dalam file direktori app/Views dan beri nama contacts. Masuklah ke dalam folder contacts yang baru saja dibuat dan buatlah file baru dengan nama index.php. Copy lah semua kode di bawah ini, lalu paste pada file index.php yang barus saja Anda buat.

<?= $this->extend('layouts/admin') ?>
<?php $this->section('styles') ?>
<!-- Custom styles for this page -->
<link href="<?= base_url('assets/vendor/datatables/dataTables.bootstrap4.min.css') ?> " rel="stylesheet">
<?= $this->endSection() ?>
<?= $this->section('content') ?>
<div class="container-fluid">
    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Contacts</h1>
    <?php
        if(session()->getFlashData('success')){
        ?>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <?= session()->getFlashData('success') ?>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <?php
        }
        ?>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
            Add Contact
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Address</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($contacts as $key => $contact) : ?>
                        <tr>
                            <td><?= ++$key ?></td>
                            <td><?= $contact['name'] ?></td>
                            <td><?= $contact['email'] ?></td>
                            <td><?= $contact['phone'] ?></td>
                            <td><?= $contact['address'] ?></td>
                            <td>
                                NA
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Add Contact Modal -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Contact</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="<?= base_url('contact') ?>" method="post">
            <?= csrf_field(); ?>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" class="form-control" id="name" placeholder="Contact Name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="form-control" id="email" placeholder="Contact Email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input type="text" name="phone" class="form-control" id="phone" placeholder="Contact Number" required>
                    </div>
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" name="address" class="form-control" id="address" placeholder="Contact Address" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<?= $this->endSection() ?>
<?php $this->section('scripts')?>
<!-- Page level plugins -->
<script src="<?= base_url('assets/vendor/datatables/jquery.dataTables.min.js') ?>"></script>
<script src="<?= base_url('assets/vendor/datatables/dataTables.bootstrap4.min.js') ?>"></script>
<!-- Page level custom scripts -->
<script>
    // Call the dataTables jQuery plugin
    $(document).ready(function() {
      $('#dataTable').DataTable();
    });
</script>

Pada file ini, kita bisa menggunakan layout yang ada di file view admin.php.

<?= $this->extend('layouts/admin') ?>

Selanjutnya, Anda bisa menambahkan style pada database yang kita pakai untuk menunjukkan data-data dari table contact.

<?php $this->section('styles') ?>
<!-- Custom styles for this page -->
<link href="<?= base_url('assets/vendor/datatables/dataTables.bootstrap4.min.css') ?> " rel="stylesheet">
<?= $this->endSection() ?>

Berikutnya, kode seperti di bawah ini berguna dalam menunjukkan flash meassage yang akan ditampilkan begitu Anda sukses menambahkan data.

<?php
    if(session()->getFlashData('success')){
?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <?= session()->getFlashData('success') ?>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
<?php
    }
?>

Anda pun dapat menambah tombol Add contact dengan data target #addModal. Jika tombol tersebut diklik, maka akan menampilkan jendela pop up modal yang tertuliskan form untuk menambah data contact.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
Add Contact
</button>

Kode di bawah ini berguna untuk menciptakan tampilan table dengan menunjukkan data dari variable contacts yang sudah dibuat pada file ContactController.php.

<?php $this->section('scripts')?>
<!-- Page level plugins -->
<script src="<?= base_url('assets/vendor/datatables/jquery.dataTables.min.js') ?>"></script>
<script src="<?= base_url('assets/vendor/datatables/dataTables.bootstrap4.min.js') ?>"></script>
<!-- Page level custom scripts -->
<script>
    // Call the dataTables jQuery plugin
    $(document).ready(function() {
      $('#dataTable').DataTable();
    });
</script>
<?php $this->endSection()?>

Selanjutnya, pada file index.php tersebut Anda bisa menambah script untuk datatables yang kita gunakan pada contoh CRUD Codeigniter 4 ini.

Langkah 4: Lakukan Testing

Jika sudah mengikuti langkah-langkah di atas, Anda bisa melakukan testing pada fitur yang telah Anda buat. Jalankan file Codeigniter 4 dengan menjalankan perintah PHP spark serve, kemudian bukalah pada browser.

Lakukan login atau pun register akun dan apabila sudah berhasil menambahkan data, Anda akan diarahkan kembali ke halaman contact dengan tampilan pesan bahwa Anda sudah berhasil menambah data.

Membuat Fitur Update Data

Selanjutnya, Anda perlu membuat fitur Update pada Codeigniter 4 yaitu fitur update data. Berikut ini adalah langkah-langkahnya.

Langkah 1: Menambahkan Route

Buatlah sebuah route baru untuk mengedit serta mengupdate data. Buka file app/Config/Routes.php kemudian tambahkan kode seperti di bawah.

$routes->add('contact/edit/(:segment)', 'ContactController::edit/$1');

Maka route di dalam route group sekarang menjadi seperti kode di bawah ini.

$routes->group('', ['filter' => 'login'], function($routes){
    $routes->get('dashboard', 'Home::dashboard');
    $routes->get('contact', 'ContactController::index');
    $routes->add('contact', 'ContactController::create');
    $routes->add('contact/edit/(:segment)', 'ContactController::edit/$1');
});

Langkah 2 : Update Controller

Lakukan update file ContactController.php dengan menambahkan function edit seperti kode di bawah ini. Kegunaan dari function tersebut adalah untuk menangkap requesr serta melakukan update data berdasarkan id data yang diupdate.

public function edit($id)
    {
        
        $this->contact->update($id, [
                'name' => $this->request->getPost('name'),
                'email' => $this->request->getPost('email'),
                'phone' => $this->request->getPost('phone'),
                'address' => $this->request->getPost('address'),
            ]);

            return redirect('contact')->with('success', 'Data Updated Successfully');
    }

Langkah 3 : Setup View

Selanjutnya Anda bisa melakukan update file view index.php. Cari kode seperti ini.

<td>
      NA
</td>

Lalu ubah menjadi seperti ini.

<td>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal-<?= $contact['id'] ?>">
    Edit
    </button>
</td>

Di sini, tambahkan tombol edit menggunakan editMode data target {id}. Artinya, mengklik tombol ini akan menampilkan pop-up atau modal dengan detail kontak berdasarkan ID data yang dipilih.

<!-- Edit Contact Modal -->
<div class="modal fade" id="editModal-<?= $contact['id'] ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Contact</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="<?= base_url('contact/edit/'.$contact['id']) ?>" method="post">
                <?= csrf_field(); ?>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" class="form-control" id="name" value="<?= $contact['name'] ?>" placeholder="Contact Name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="form-control" id="email" value="<?= $contact['email'] ?>"  placeholder="Contact Email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input type="text" name="phone" class="form-control" id="phone" value="<?= $contact['phone'] ?>"  placeholder="Contact Number" required>
                    </div>
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" name="address" class="form-control" id="address" value="<?= $contact['address'] ?>"  placeholder="Contact Address" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

Kemudian tambahkan kode modal edit seperti di atas Letakkan di atas phpendforeach ;. ?>.

Langkah 4 : Lakukan Testing

Sekarang mari kita coba fitur pengeditan yang dibuat dalam proyek CRUDcodeigniter4 ini. Refresh halaman dan kemudian klik tombol Edit. Nantinya, Anda akan melihat modal yang berisi data berdasarkan ID data yang dipilih. Jika Anda mengubah data lalu klik Simpan, data akan diubah sesuai permintaan Anda dan Anda akan melihat pesan flash bahwa data berhasil diperbarui.

Membuat Fitur Delete

Delete data adalah fungsi terakhir yang akan kita buat dalam latihan proyek Codeigniter4 CRUD ini. Fitur ini memungkinkan Anda untuk kemudian menghapus data kontak berdasarkan ID data yang dipilih.

Langkah 1 : Tambah Route

Langkah pertama adalah membuat atau menambahkan rute baru untuk menghapus data. Buka file route.php di grup route dan tambahkan kode route seperti di atas.

$routes->get('contact/delete/(:segment)', 'ContactController::delete/$1');

Oleh karena itu, route group Anda sekarang akan menjadi seperti di bawah ini.

$routes->group('', ['filter' => 'login'], function($routes){
    $routes->get('dashboard', 'Home::dashboard');
    $routes->get('contact', 'ContactController::index');
    $routes->add('contact', 'ContactController::create');
    $routes->add('contact/edit/(:segment)', 'ContactController::edit/$1');
    $routes->get('contact/delete/(:segment)', 'ContactController::delete/$1');
});

Langkah 2 : Update Controller

Kemudian buka file ContactController.php dan tambahkan fungsi delete menggunakan kode di atas. Kode ini menghapus data kontak berdasarkan ID data yang dipilih. Jika data berhasil dihapus, Anda akan melihat pesan flash dengan pesan yang mengatakan bahwa data berhasil dihapus.

public function delete($id)
{
    $this->contact->delete($id);

    return redirect('contact')->with('success', 'Data Deleted Successfully');

Langkah 3 : Setup View

Selanjutnya, mari kita tambahkan tombol hapus menggunakan kode di atas. Rekatkan kode di atas di bawah tombol Edit. Klik tombol Hapus dan pesan konfirmasi akan ditampilkan. Klik OK untuk menghapus data untuk ID yang dipilih dari tabel kontak.

<a href="<?= base_url('contact/delete/'.$contact['id']) ?>" class="btn btn-danger" onclick="return confirm('Are you sure ?')">Delete</a>

Langkah 4 : Lakukan Testing

Selanjutnya, mari kita coba fungsi wipe data pada pembuatan CRUD Codeigniter 4 ini. Segarkan halaman, lalu klik tombol Hapus. Jika data berhasil dihapus, Anda akan kembali ke halaman kontak dengan pesan flash data berhasil di hapus.

Itulah langkah-langkah membuat CRUD Codeigniter 4. Jika Anda tertarik untuk tahu cara membuat CRUD pada bahasa pemrograman lainnya, janhan lupa kunjungi Web App di https://appkey.id/ dan pastikan Anda mendapat informasi terbaru seputar pembuatan CRUD di bahasa pemrograman lainnya.

Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.