Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Panduan Lengkap CodeIgniter 4

12 min read

[FI] Panduan Lengkap CodeIgniter 4

Dibanding pendahulunya, CodeIgniter 4 menawarkan berbagai kelebihan, terutama pada peningkatan performa yang telah didukung PHP versi 7. CodeIgniter 4 juga memiliki struktur kode yang lebih terorganisir sehingga membuat proses pengembangan aplikasi web menjadi lebih efektif.

Bagi Anda yang ingin mencoba menggunakan CodeIgniter 4, Anda berada di halaman yang tepat! 

Pada tutorial Code Igniter 4 ini, kami akan mengajak Anda belajar membuat sebuah aplikasi sederhana dengan fitur  untuk menambah, menampilkan, mengedit dan menghapus data. 

Bagaimana caranya? Yuk, langsung saja simak tutorial CodeIgniter 4 berikut ini!

Apa Itu CodeIgniter 4?

CodeIgniter adalah salah satu framework PHP yang ringan dan bersifat open-source. Framework ini memungkinkan Anda untuk mengembangkan aplikasi web dengan fitur lengkap secara lebih cepat. Hal itu berkat dukungan library yang beragam. 

CodeIgniter 4 merupakan pengembangan dari versi sebelumnya, yaitu CodeIgniter 3. Versi terbaru ini hanya mendukung PHP versi 7.3 ke atas. Jadi, Anda perlu menggunakan versi PHP yang sesuai sebelum mencoba CodeIgniter 4.

Masih dengan konsep Model-View-Controller (MVC) , CodeIgniter 4 menawarkan antarmuka dan struktur project yang sederhana. Sehingga, penulisan kode pemrograman bisa lebih konsisten dan terstruktur.

Selain itu, performanya yang cepat dan konfigurasi yang minim juga menjadi alasan CodeIgniter 4 populer di kalangan web developer. 

Nah, semakin tertarik untuk mencoba Code igniter 4 untuk project Anda? Mari mulai menggunakannya dengan melakukan instalasi terlebih dahulu.

Instalasi CodeIgniter 4

Sebelum melakukan instalasi CodeIgniter 4, ada beberapa hal yang perlu Anda persiapkan, yaitu :

  • XAMPP : aplikasi server yang mendukung proses pengembangan aplikasi website pada server lokal (localhost) sebelum di hosting.
  • Composer : tool pengelola package library PHP yang memudahkan Anda untuk menginstall dan melakukan update library yang digunakan.
  • Code Editor : aplikasi yang digunakan untuk menulis kode pemrograman. Di tutorial ini, kami menggunakan Visual Studio Code (VS Code).

Selanjutnya, Anda dapat menginstall CodeIgniter 4 dengan 2 cara, yaitu : instalasi manual atau instalasi melalui Composer. Berikut penjelasan lengkapnya :

Instalasi CodeIgniter 4 secara Manual  

Untuk melakukan instalasi manual, download file zip dari CodeIgniter 4 melalui website resminya.

download CodeIgniter 4 dari website resmi CodeIgniter

Setelah file CodeIgniter 4 berhasil terdownload, pindahkan file ke folder C:/xampp/htdocs. Kemudian, extract file zip tersebut dan ubah namanya sesuai dengan nama project yang Anda inginkan. Di tutorial ini, kami menggunakan nama ci4.

ekstrak file zip CodeIgniter di htdocs

Project CodeIgniter ini sudah bisa langsung dijalankan di web browser Anda dengan mengakses localhost/ci4/public. Tapi, jangan lupa jalankan dulu XAMPP-nya, ya.

tampilan awal CodeIgniter

Instalasi CodeIgniter 4 melalui Composer

Cara kedua untuk menginstall CodeIgniter 4 adalah menggunakan Composer. Kelebihannya, path folder project Anda bisa dibuat dimana saja, tidak perlu di folder htdocs. Dan yang paling penting, proses install mudah hanya dengan satu baris perintah saja, yaitu :

composer create-project codeigniter4/appstarter nama_folder
membuat project codeigniter 4 melalui composer

Pada tutorial ini, kami membuat folder project di Desktop dengan nama ci4

Setelah folder berhasil terbuat, buka folder tersebut dengan Visual Studio Code. Jika project telah terbuka, bukalah terminal di VS Code :

membuka terminal di VS Code

Lalu, jalankan perintah di bawah ini untuk menginstall semua library yang dibutuhkan CodeIgniter 4 :

composer install -vvv
menginstall library yang dibutuhkan codeIgniter 4

Jika proses instalasi sudah selesai dilakukan, Anda dapat mengakses CodeIgniter 4 dengan menjalankan perintah :

php spark serve
menjalankan codeigniter 4

Gambar di atas menunjukkan bahwa local development server sudah berjalan. 

Selanjutnya, bukalah web browser Anda dan akses localhost:8080. Halaman awal CodeIgniter akan tampil seperti pada gambar di bawah ini :

halama awal codeigniter 4

Nah, sekarang Anda sudah mempunyai project CodeIgniter 4. 

Setelah instalasi selesai, lanjutkan tutorial CodeIgniter 4 ini dengan membuat aplikasi website pertama Anda!

Baca Juga : Tutorial Composer untuk Project PHP Anda

Tutorial CodeIgniter 4 : Membuat Aplikasi CRUD Sederhana

Konsep dasar tutorial CodeIgniter yang akan Anda praktikkan adalah membuat aplikasi CRUD (Create, Read, Update dan Delete). Pada contoh ini kami akan membuat aplikasi data vaksinasi karyawan.

Inilah 6 langkah tutorial CodeIgniter 4 untuk membuat sebuah aplikasi:

  1. Konfigurasi Environment
  2. Menampilkan View pada CodeIgniter 4
  3. Membuat Koneksi ke Database
  4. Menambah dan Menampilkan Data (Create & Read)
  5. Melakukan Update Data di Database (Update)
  6. Menghapus Data di Database (Delete)

Baca Juga : Panduan CodeIgniter PHPMailer

1. Konfigurasi Environment

Pada tahap ini, Anda perlu mengubah environment pengembangan CodeIgniter menjadi development. Hal ini dilakukan agar jika terjadi error, CodeIgniter 4 dapat memberi warning error apa yang sedang terjadi saat itu.

Jika tidak diaktifkan, setiap kali ada error, CodeIgniter 4 hanya akan menampilkan pesan error seperti berikut :

Tampilan error tanpa mode development

Bagi seorang developer, Anda pasti kebingungan harus memperbaiki yang mana jika semua pesan error ditampilkan seperti gambar di atas kan?

Untuk mengubah konfigurasi environment, bukalah file env, lalu carilah baris kode CI_ENVIRONMENT. Kemudian, ubah nilainya yang semula production menjadi development. Jangan lupa juga hapus tanda # pada baris kodenya.

Mengubah konfigurasi environment menjadi mode development

Simpan perubahan, lalu ubah nama file env menjadi .env, ya.

2. Menampilkan View pada CodeIgniter 4

Sekarang, mari coba membuat view dan menampilkannya pada web browser. Pertama-tama, buatlah file controller dengan nama Test_view.php pada direktori app/Controllers. Kemudian, salinlah kode berikut ini :

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class Test_view extends Controller
{
    public function index()
    {
        $data['title']  = 'Niagahoster Tutorial';
        $data['msg1']    = 'Selamat datang di Niagahoster Tutorial';
        $data['msg2']    = 'Membuat aplikasi CRUD sederhana dengan CodeIgniter 4';
        echo view('test_view', $data);
    }
}

Pada kode tersebut, kami membuat beberapa data yang akan ditampilkan di website berupa title dan message. Nantinya, data tersebut akan dikirimkan ke view yang akan dibuat selanjutnya.

Untuk membuat file view, masuklah ke direktori app/Views dan buatlah file dengan nama test_view.php. Salinlah kode berikut ini :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title; ?></title>
</head>

<body style="text-align:center;">
    <h1><?= $msg1; ?></h1>
    <h2><?= $msg2; ?></h2>
</body>

</html>

Baris kode di atas akan menampilkan data title dan message yang dibuat di file controller sebelumnya. 

Simpan perubahan file, lalu jalankan tampilan yang telah dibuat dengan mengakses controller di localhost:8080/test_view.

menampilkan view di codeigniter 4

Bagaimana, view yang Anda buat sudah bisa ditampilkan, kan? Kalau begitu, mari lanjutkan ke tahap utama untuk membuat aplikasi CRUD!

3. Membuat Koneksi ke Database

Agar dapat mengelola database, langkah selanjutnya dalam tutorial CodeIgniter 4 adalah membuat koneksi dari CodeIgniter 4 ke database. 

Caranya, pertama-tama buatlah database baru di localhost/phpmyadmin. Namun, untuk mengakses phpMyAdmin, Anda harus menjalankan XAMPP dulu, ya.
Setelah tampilan phpMyAdmin terbuka, buatlah database baru pada kolom yang tersedia. Disini, kami membuat database dengan nama ci4, kemudian klik Create untuk membuat database.

membuat database baru di phpMyAdmin

Setelah database berhasil dibuat, koneksikan dengan CodeIgniter 4. Ada dua cara yang dapat Anda lakukan, yaitu: 

  • mengedit file app/Config/database.php 
  • mengedit file .env di bagian Database.

Pada tutorial kali ini, kami akan membuat koneksi dengan mengedit file .env pada bagian Database. 

Jadi, bukalah file .env dan temukan baris kode berikut ini :

baris kode database di file .env

Hapuslah semua tanda pagar pada baris kode database.default, kemudian ubah nama database sesuai nama database yang Anda buat sebelumnya. Kosongkan juga password databasenya, jika Anda tidak menggunakan password untuk akses database Anda.

membuat koneksi CodeIgniter 4 dengan database

Jangan lupa untuk menyimpan perubahan yang telah Anda lakukan.

4. Menambah dan Menampilkan Data (Create & Read)

Pada tahap sebelumnya, Anda sudah membuat database baru di phpMyAdmin. Namun, database tersebut masih kosong, belum ada tabel apapun untuk menyimpan data. 

Anda dapat membuat tabel langsung di phpMyAdmin ataupun menggunakan perintah migrate database. Namun, sebelumnya Anda harus membuat file migrasi terlebih dulu dengan menjalankan perintah berikut ini :

php spark migrate:create employees
Membuat tabel file migrasi database

Perintah di atas akan membuat file migrasi di dalam folder app/Database/Migration. Pada file ini, Anda dapat mendefinisikan atribut pada tabel employees dan juga tipe datanya. Untuk lebih jelasnya, salinlah kode di bawah ini :

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Employees extends Migration
{
    public function up()
    {
        // Membuat kolom/field untuk tabel karyawan
        $this->forge->addField([
            'id'          => [
                'type'           => 'INT',
                'constraint'     => 5,
                'unsigned'       => true,
                'auto_increment' => true
            ],
            'nama_karyawan'       => [
                'type'           => 'VARCHAR',
                'constraint'     => '255'
            ],
            'usia'      => [
                'type'           => 'INT',
                'constraint'     => 2,
            ],
            'status_vaksin_1'      => [
                'type'           => 'ENUM',
                'constraint'     => ['sudah', 'belum'],
                'default'        => 'belum',
            ],
            'status_vaksin_2'      => [
                'type'           => 'ENUM',
                'constraint'     => ['sudah', 'belum'],
                'default'        => 'belum',
            ],
        ]);

        // Membuat primary key
        $this->forge->addKey('id', TRUE);

        // Membuat tabel karyawan
        $this->forge->createTable('employees', TRUE);
    }

    //-------------------------------------------------------

    public function down()
    {
        // menghapus tabel karyawan
        $this->forge->dropTable('employees');
    }
}

Fungsi up() akan dijalankan saat melakukan migrasi, fungsi ini akan membuat field dengan 5 atribut, yaitu : id, nama_karyawan, usia, status_vaksin_1 dan status_vaksin_2.

Sedangkan fungsi down() akan dipanggil ketika melakukan rollback. Fungsi ini akan menghapus tabel employees di database.

Jika file migrasi sudah diisi dengan benar, jalankan perintah di bawah ini untuk melakukan migrasi :

php spark migrate 
melakukan migrasi untuk membuat tabel di database

Setelah muncul pesan Done migrations itu artinya migrasi berhasil dilakukan. Sekarang, coba cek database melalui phpmyadmin. Pasti ada 2 tabel baru kan? Tabel migrations dan employees.

Tabel migrations merupakan tabel yang otomatis terbuat untuk menyimpan versi migrasi yang sudah dilakukan. Sedangkan tabel employees adalah tabel yang dibuat berdasarkan file migrasi.

Nah, jika tabel sudah siap, saatnya membuat kode untuk insert data di CodeIgniter 4. 
Pertama-tama, buatlah file model dengan nama Employee_model.php. File model ini merupakan file yang berhubungan langsung dengan database.

<?php

namespace App\Models;

use CodeIgniter\Model;

class Employee_model extends Model
{
    protected $table = 'employees';

    public function getKaryawan($id = false)
    {
        if ($id === false) {
            return $this->findAll();
        } else {
            return $this->getWhere(['id' => $id]);
        }
    }

    public function saveKaryawan($data)
    {
        $builder = $this->db->table($this->table);
        return $builder->insert($data);
    }
}

Pada kode di atas, ada 2 fungsi yang dibuat, yaitu fungsi getKaryawan() dan saveKaryawan(). Fungsi getKaryawan() memanggil semua data yang akan ditampilkan di view. Sedangkan saveKaryawan() adalah fungsi untuk menyimpan data baru ke database.


Selanjutnya, buatlah file controller dengan nama Employee.php, lalu salinlah kode di bawah ini :

<?php

namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\Employee_model;

class Employee extends Controller
{
    public function index()
    {
        $model = new Employee_model;
        $data['title']     = 'Data Vaksin Karyawan';
        $data['getKaryawan'] = $model->getKaryawan();

        echo view('header', $data);
        echo view('employee_view', $data);
        echo view('footer', $data);
    }

    public function add()
    {
        $model = new Employee_model;
        $data = array(
            'nama_karyawan' => $this->request->getPost('nama_karyawan'),
            'usia'         => $this->request->getPost('usia'),
            'status_vaksin_1'  => $this->request->getPost('status_vaksin_1'),
            'status_vaksin_2'  => $this->request->getPost('status_vaksin_2')
        );
        $model->saveKaryawan($data);
        echo '<script>
                alert("Selamat! Berhasil Menambah Data Vaksinasi Karyawan");
                window.location="' . base_url('employee') . '"
            </script>';
    }

}

Fungsi index() adalah fungsi yang dibuat untuk tampilan awal aplikasi ketika dibuka. Fungsi ini akan memanggil fungsi getKaryawan() yang telah dibuat pada file model untuk menampilkan semua data karyawan yang ada di database.

Fungsi add() adalah fungsi untuk mengambil data yang diinputkan melalui form view tambah data yang akan dijelaskan selanjutnya.

Berikutnya, Anda harus membuat file view yang merupakan tampilan antarmuka aplikasi CRUD sederhana ini. Jika Anda lihat pada fungsi index() di file controller sebelumnya, ada tiga view yang dipanggil, yaitu : header, employee_view dan footer.

Kami membuat tiga file dengan header dan footer terpisah agar nantinya file tersebut dapat dipanggil kembali pada fitur update data dengan tampilan halaman yang berbeda.

Nah sekarang, mari mulai dari membuat file header.php di direktori app/Views terlebih dulu.

<!doctype html>
<html lang="en">

<head>
    <title><?= $title; ?></title>
    <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>

<body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="">Niagahoster Tutorial</a>
        </div>
    </nav>

Selanjutnya, buatlah file employee_view.php, file ini berisi body yang merupakan tampilan utama dari aplikasi. Salinlah kode berikut ini :

<div class="container pt-5">
        <div class="text-right">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap" style="margin-bottom:10px;">Tambah Data</button>
        </div>

        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title" style="text-align: center;">Data Vaksinasi Karyawan</h4>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Nama Karyawan</th>
                                <th>Usia</th>
                                <th>Status Vaksin 1</th>
                                <th>Status Vaksin 2</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $no = 1;
                            foreach ($getKaryawan as $krywn) { ?>
                                <tr>
                                    <td><?= $no; ?></td>
                                    <td><?= $krywn['nama_karyawan']; ?></td>
                                    <td><?= $krywn['usia']; ?></td>
                                    <td><?= $krywn['status_vaksin_1']; ?></td>
                                    <td><?= $krywn['status_vaksin_2']; ?></td>
                                    <td>
                                        <a href="<?= base_url('employee/edit/' . $krywn['id']); ?>" class="btn btn-success" data-target="#editModal">
                                            Edit</a>
                                        <a href="<?= base_url('employee/hapus/' . $krywn['id']); ?>" onclick="javascript:return confirm('Apakah Anda yakin ingin menghapus data karyawan?')" class="btn btn-danger">
                                            Hapus</a>
                                    </td>
                                </tr>
                            <?php $no++;
                            } ?>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--   Modal Tambah Data-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tambah Data Karyawan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="<?= base_url('employee/add'); ?>">
                        <div class="form-group">
                            <label for="nama_karyawan" class="col-form-label">Nama Karyawan</label>
                            <input type="text" class="form-control" id="nama_karyawan" name="nama_karyawan">
                        </div>
                        <div class="form-group">
                            <label for="usia" class="col-form-label">Usia</label>
                            <input type="text" class="form-control" id="usia" name="usia">
                        </div>
                        <div class="form-group">
                            <label for="status_vaksin_1" class="col-form-label">Status Vaksin 1</label>
                            <select class="form-control" name="status_vaksin_1">
                                <option value="">---Pilih Status Vaksin---</option>
                                <option value="Belum">Belum Vaksin</option>
                                <option value="Sudah">Sudah Vaksin</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="status_vaksin_2" class="col-form-label">Status Vaksin 2</label>
                            <select class="form-control" name="status_vaksin_2">
                                <option value="">---Pilih Status Vaksin---</option>
                                <option value="Belum">Belum Vaksin</option>
                                <option value="Sudah">Sudah Vaksin</option>
                            </select>
                        </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">Submit</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    </body>

Pada kode di atas, Anda akan membuat tabel yang berisi data vaksinasi karyawan. Tabel tersebut memuat semua data dari database. Selain itu, ada button Tambah Data  yang jika di klik akan menampilkan modal yang berupa form untuk input data.

Terakhir, buatlah file footer.php dan salinlah kode berikut ini : 

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>

    </html>

Simpan semua file, lalu akses melalui localhost/employee pada web browser Anda. Cobalah untuk menambahkan data dengan klik tombol Tambah Data, nantinya akan ada form modal yang tampil seperti ini :

modal untuk menambahkan data

Klik Submit dan lihatlah perubahan yang terjadi pada tabel Anda. Harusnya, sekarang sudah ada data yang baru saja Anda tambahkan, kan?

menampilkan data dari database

Nah, sampai sini Anda sudah bisa menambah data ke database (create) dan menampilkan data dari database (read).

5. Melakukan Update Data di Database (Update)

Pada kode di file employee_view.php, Anda sudah membuat button untuk menuju halaman edit data. Namun, jika tombol edit Anda klik, masih akan menunjukkan pesan error. Karena, Anda belum membuat fungsi edit di dalam controller.

Untuk membuat fungsi untuk mengupdate data, salin dan tambahkan kode berikut pada file Employee.php di direktori app/Controllers.

public function edit($id)
    {
        $model = new Employee_model;
        $getKaryawan = $model->getKaryawan($id)->getRow();
        if (isset($getKaryawan)) {
            $data['employee'] = $getKaryawan;
            $data['title']  = 'Niagahoster Tutorial';

            echo view('header', $data);
            echo view('edit_view', $data);
            echo view('footer', $data);
        } else {

            echo '<script>
                    alert("ID karyawan ' . $id . ' Tidak ditemukan");
                    window.location="' . base_url('employee') . '"
                </script>';
        }
    }

    public function update()
    {
        $model = new Employee_model;
        $id = $this->request->getPost('id');
        $data = array(
            'nama_karyawan' => $this->request->getPost('nama_karyawan'),
            'usia'         => $this->request->getPost('usia'),
            'status_vaksin_1'  => $this->request->getPost('status_vaksin_1'),
            'status_vaksin_2'  => $this->request->getPost('status_vaksin_2')
        );
        $model->editKaryawan($data, $id);
        echo '<script>
                alert("Selamat! Anda berhasil melakukan update data.");
                window.location="' . base_url('employee') . '"
            </script>';
    }

Kode di atas menambahkan dua fungsi ke file controller Anda, yaitu fungsi edit() dan fungsi update(). Fungsi edit() akan menampilkan form edit dari data yang dipilih. Sedangkan fungsi update() akan dipanggil untuk mengupdate data di database ketika Anda mengklik tombol Update.

Selain penambahan fungsi pada file controller, Anda juga harus menambahkan kode berikut ini pada file Employee_model.php :

public function editKaryawan($data, $id)
    {
        $builder = $this->db->table($this->table);
        $builder->where('id', $id);
        return $builder->update($data);
    }

Fungsi di atas akan melakukan update data sesuai dengan id yang terpilih. Jangan lupa, simpan perubahannya, ya.

Selanjutnya, buatlah view baru dengan nama edit_view.php, lalu salinlah kode di bawah ini :

<div class="container p-5">
    <a href="<?= base_url('employee'); ?>" class="btn btn-secondary mb-2"><i class="fas fa-home"></i></a>
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h4 class="card-title">Edit Data Vaksinasi Karyawan</h4>
        </div>
        <div class="card-body">
            <form method="post" action="<?= base_url('employee/update'); ?>">
                <div class="form-group">
                    <label for="">Nama Karyawan</label>
                    <input type="text" value="<?= $employee->nama_karyawan; ?>" name="nama_karyawan" required class="form-control">
                </div>
                <div class="form-group">
                    <label for="">Usia</label>
                    <input type="text" value="<?= $employee->usia; ?>" name="usia" required class="form-control">
                </div>
                <div class="form-group">
                    <label for="">Status Vaksin 1</label>
                    <select class="form-control" name="status_vaksin_1">
                        <option value="<?= $employee->status_vaksin_1; ?>">---Pilih Status Vaksin--</option>
                        <option value="Belum">Belum Vaksin</option>
                        <option value="Sudah">Sudah Vaksin</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="">Status Vaksin 2</label>
                    <select class="form-control" name="status_vaksin_2">
                        <option value="">---Pilih Status Vaksin--</option>
                        <option value="Belum">Belum Vaksin</option>
                        <option value="Sudah">Sudah Vaksin</option>
                    </select>
                </div>

                <input type="hidden" value="<?= $employee->id; ?>" name="id">
                <div class="text-right">
                    <button class="btn btn-success">Update</button>
                </div>
            </form>

        </div>
    </div>
</div>

Sekarang, coba refresh aplikasi Anda, lalu cobalah untuk menekan tombol Edit. Nantinya, Anda akan masuk ke halaman edit seperti ini :

halaman edit data

Halaman tersebut akan menampilkan data lama dari id yang dipilih pada database. Coba ubahlah data tersebut dan tekan tombol Update

Bagaimana, data Anda sudah terupdate, kan?

6. Menghapus Data di Database (Delete)

Langkah terakhir dari konsep dasar tutorial CodeIgniter dengan CRUD adalah menghapus database. Bagaimana caranya?


Pertama-tama, tambahkan fungsi berikut ini pada file controller Employee.php :

public function hapus($id)
    {
        $model = new Employee_model;
        $getKaryawan = $model->getKaryawan($id)->getRow();
        if (isset($getKaryawan)) {
            $model->hapusKaryawan($id);
            echo '<script>
                    alert("Selamat! Data berhasil terhapus.");
                    window.location="' . base_url('employee') . '"
                </script>';
        } else {

            echo '<script>
                    alert("Gagal Menghapus !, ID karyawan ' . $id . ' Tidak ditemukan");
                    window.location="' . base_url('employee') . '"
                </script>';
        }
    }

Fungsi hapus() akan menghapus data sesuai dengan id yang dipilih ketika tombol Hapus di klik. Pada file model Employee_model.php, tambahkan kode berikut ini :

public function hapusKaryawan($id)
    {
        $builder = $this->db->table($this->table);
        return $builder->delete(['id' => $id]);
    }

Simpan perubahan dan cobalah untuk menghapus data Anda dengan mengklik tombol Hapus pada data yang Anda pilih. Lalu, klik OK pada dialog konfirmasi yang muncul seperti pada gambar di bawah. 

menghapus data

Bagaimana, data Anda sudah terhapus, kan? 

Baca Juga : Tutorial Upload File CodeIgniter

Kesimpulan

CodeIgniter 4 memiliki kelebihan dari segi performa dan peningkatan produktivitas dibanding versi sebelumnya. Menerapkan konsep dasar tutorial CodeIgniter 4 juga cukup mudah. 

Anda sudah belajar cara membuat sebuah aplikasi CRUD sederhana menggunakan CodeIgniter 4 dengan enam langkah. Namun, yang utama adalah

  1. Konfigurasi Environment : penting untuk mengubah environment menjadi development, agar proses pengembangan lebih mudah dilakukan.
  2. Membuat Koneksi ke Database : pastikan nama database yang Anda tulis di file .env sudah sesuai dengan database Anda di phpmyadmin
  3. Create, Read, Update dan Delete Data : pastikan penamaan file dan fungsi sesuai. Jika Anda memakai nama yang berbeda dengan tutorial ini, cek dengan teliti untuk mengganti semua nama file dan nama fungsi terkait.

Kalau aplikasi yang Anda sudah jadi, upload aplikasi Anda ke layanan hosting agar bisa diakses secara online oleh banyak orang. Namun, pastikan layanan hosting yang digunakan mendukung CodeIgniter, ya.

Layanan Unlimited Hosting Niagahoster sudah mendukung CodeIgniter dan menggunakan server LiteSpeed Enterprise untuk kecepatan website yang optimal. Kalau Anda berlangganan, Anda akan mendapat jaminan uptime 99.99% sehingga website Anda akan selalu online selama 24 jam penuh. 

Selain itu, fitur Advance untuk Web Developer seperti akses SSH, git, phpMyAdmin akan memudahkan Anda untuk mengembangkan aplikasi CodeIgniter 4.

Menariknya, Anda dapat menikmati semua fitur tersebut dengan harga  Rp27rb/bulan saja, loh! Ingin berlangganan hosting Niagahoster sekarang juga?

Demikianlah artikel tutorial CodeIgniter 4, semoga bermanfaat bagi Anda, ya 🙂

Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Leave a Reply

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