Anda di halaman 1dari 33

Panduan Lengkap CodeIgniter 4

September 15, 2021  13 min read

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!

Daftar isi  tutup 
1 Apa Itu CodeIgniter 4?
2 Instalasi CodeIgniter 4
2.1 Instalasi CodeIgniter 4 secara Manual
2.2 Instalasi CodeIgniter 4 melalui Composer
3 Tutorial CodeIgniter 4 : Membuat Aplikasi CRUD Sederhana
3.1 1. Konfigurasi Environment
3.2 2. Menampilkan View pada CodeIgniter 4
3.3 3. Membuat Koneksi ke Database
3.4 4. Menambah dan Menampilkan Data (Create & Read)
3.5 5. Melakukan Update Data di Database (Update)
3.6 6. Menghapus Data di Database (Delete)
4 Kesimpulan

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. 

Apa yang dimaksud dengan open source?


Sumber terbuka (open source) adalah sistem pengembangan yang tidak dikoordinasi oleh suatu individu / lembaga
pusat, tetapi oleh para pelaku yang bekerja sama dengan memanfaatkan kode sumber (source-code) yang tersebar dan
tersedia bebas (biasanya menggunakan fasilitas komunikasi internet).
Apa yang dimaksud open source dan contoh?
Open source adalah suatu software atau kode pemrograman komputer yang dipublikasikan secara umum pada orang-
orang, sehingga bisa digunakan, diperbaiki, dimodifikasi, atau disebarkan untuk keperluan pribadi atau hobi, perusahaan
atau untuk komersil, tanpa harus membayar biaya sedikit pun.
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.

Baca Juga : Cara Menghilangkan index.php di CodeIgniter

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.
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.
Project CodeIgniter ini sudah bisa langsung dijalankan di web browser Anda dengan mengakses localhost/ci4/public. Tapi, jangan
lupa jalankan dulu XAMPP-nya, ya.
Baca juga: Cara Mengatasi A Database Error Occurred 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


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 :
Lalu, jalankan perintah di bawah ini untuk menginstall semua library yang dibutuhkan CodeIgniter 4 :

composer install -vvv


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

php spark serve

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 :
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 :

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.

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 :

1 <?php
2  
namespace App\Controllers;
3
4  
use CodeIgniter\Controller;
5
 
6 class Test_view extends Controller
7 {
8     public function index()
9     {
        $data['title']  = 'Niagahoster Tutorial';
10         $data['msg1']    = 'Selamat datang di Niagahoster Tutorial';
11         $data['msg2']    = 'Membuat aplikasi CRUD sederhana dengan CodeIgniter 4';
12         echo view('test_view', $data);
13     }
}
14
15
16

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 :

1
2 <!DOCTYPE html>
3 <html lang="en">
4  
<head>
5     <meta charset="UTF-8">
6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7     <title><?= $title; ?></title>
8 </head>
9  
<body style="text-align:center;">
10
    <h1><?= $msg1; ?></h1>
11     <h2><?= $msg2; ?></h2>
12 </body>
13  
14 </html>
15

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.
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.

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 :

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.

Jangan lupa untuk menyimpan perubahan yang telah Anda lakukan.

Baca juga: Mengenal File Default .htaccess di CodeIgniter dan Cara Membuatnya

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

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 :

1 <?php
2  
namespace App\Database\Migrations;
3
4  
use CodeIgniter\Database\Migration;
5
 
6 class Employees extends Migration
7 {
8     public function up()
9     {
        // Membuat kolom/field untuk tabel karyawan
10         $this->forge->addField([
11             'id'          => [
12                 'type'           => 'INT',
13
                'constraint'     => 5,
14
                'unsigned'       => true,
15                 'auto_increment' => true
16             ],
17             'nama_karyawan'       => [
18
19                 'type'           => 'VARCHAR',
20                 'constraint'     => '255'
21             ],
22             'usia'      => [
23                 'type'           => 'INT',
24                 'constraint'     => 2,
25             ],
26             'status_vaksin_1'      => [
27                 'type'           => 'ENUM',
28                 'constraint'     => ['sudah', 'belum'],
29                 'default'        => 'belum',
30             ],
31             'status_vaksin_2'      => [
32                 'type'           => 'ENUM',
33                 'constraint'     => ['sudah', 'belum'],
34                 'default'        => 'belum',
            ],
35
        ]);
36
 
37         // Membuat primary key
38         $this->forge->addKey('id', TRUE);
39  
40         // Membuat tabel karyawan
41         $this->forge->createTable('employees', TRUE);
    }
42
43  
    //-------------------------------------------------------
44  
45     public function down()
46     {
47         // menghapus tabel karyawan
48         $this->forge->dropTable('employees');
    }
49 }
50
51
52
53

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

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.

1 <?php
2  
namespace App\Models;
3
4  
use CodeIgniter\Model;
5
6
7
 
8 class Employee_model extends Model
9 {
10     protected $table = 'employees';
11  
12     public function getKaryawan($id = false)
    {
13         if ($id === false) {
14             return $this->findAll();
15         } else {
16             return $this->getWhere(['id' => $id]);
17         }
    }
18
 
19     public function saveKaryawan($data)
20     {
21         $builder = $this->db->table($this->table);
22         return $builder->insert($data);
    }
23
}
24
25

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 :

1 <?php
2  
namespace App\Controllers;
3
4  
use CodeIgniter\Controller;
5 use App\Models\Employee_model;
6
7
8
9  
class Employee extends Controller
10 {
11     public function index()
12     {
13         $model = new Employee_model;
        $data['title']     = 'Data Vaksin Karyawan';
14         $data['getKaryawan'] = $model->getKaryawan();
15  
16         echo view('header', $data);
17         echo view('employee_view', $data);
18         echo view('footer', $data);
    }
19
20  
    public function add()
21     {
22         $model = new Employee_model;
23         $data = array(
24             'nama_karyawan' => $this->request->getPost('nama_karyawan'),
25             'usia'         => $this->request->getPost('usia'),
26             'status_vaksin_1'  => $this->request->getPost('status_vaksin_1'),
27             'status_vaksin_2'  => $this->request->getPost('status_vaksin_2')
        );
28
        $model->saveKaryawan($data);
29         echo '<script>
30                 alert("Selamat! Berhasil Menambah Data Vaksinasi Karyawan");
31                 window.location="' . base_url('employee') . '"
32             </script>';
    }
33
34  
}
35
36
37
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.

1
2 <!doctype html>
<html lang="en">
3
4  
<head>
5     <title><?= $title; ?></title>
6     <!-- Required meta tags -->
7     <meta charset="utf-8">
8     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9  
    <!-- Bootstrap CSS -->
10     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrit
11 ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12     <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
13 </head>
14  
15 <body>
16     <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
        <div class="container">
17             <a class="navbar-brand" href="">Niagahoster Tutorial</a>
18         </div>
19     </nav>
20
Selanjutnya, buatlah file employee_view.php, file ini berisi body yang merupakan tampilan utama dari aplikasi. Salinlah kode berikut
ini :

1 <div class="container pt-5">


        <div class="text-right">
2
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whate
3 style="margin-bottom:10px;">Tambah Data</button>
4         </div>
5  
6         <div class="card">
7             <div class="card-header bg-primary text-white">
                <h4 class="card-title" style="text-align: center;">Data Vaksinasi Karyawan</h4>
8             </div>
9  
10             <div class="card-body">
11                 <div class="table-responsive">
12                     <table class="table table-bordered table-striped">
13                         <thead>
                            <tr>
14                                 <th>No.</th>
15                                 <th>Nama Karyawan</th>
16                                 <th>Usia</th>
17                                 <th>Status Vaksin 1</th>
                                <th>Status Vaksin 2</th>
18                                 <th>Aksi</th>
19                             </tr>
20                         </thead>
21                         <tbody>
22                             <?php $no = 1;
                            foreach ($getKaryawan as $krywn) { ?>
23                                 <tr>
24                                     <td><?= $no; ?></td>
25                                     <td><?= $krywn['nama_karyawan']; ?></td>
26                                     <td><?= $krywn['usia']; ?></td>
27                                     <td><?= $krywn['status_vaksin_1']; ?></td>
                                    <td><?= $krywn['status_vaksin_2']; ?></td>
28                                     <td>
29                                         <a href="<?= base_url('employee/edit/' . $krywn['id']); ?>" class="btn btn
30 target="#editModal">
                                            Edit</a>
31                                         <a href="<?= base_url('employee/hapus/' . $krywn['id']); ?>" onclick="java
32 Anda yakin ingin menghapus data karyawan?')" class="btn btn-danger">
33                                             Hapus</a>
                                    </td>
34                                 </tr>
35                             <?php $no++;
36                             } ?>
37                         </tbody>
38  
                    </table>
39                 </div>
40             </div>
41         </div>
42     </div>
43  
44     <!--   Modal Tambah Data-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-h
45         <div class="modal-dialog" role="document">
46             <div class="modal-content">
47                 <div class="modal-header">
48                     <h5 class="modal-title" id="exampleModalLabel">Tambah Data Karyawan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
49
                        <span aria-hidden="true">&times;</span>
50                     </button>
51                 </div>
52                 <div class="modal-body">
53                     <form method="post" action="<?= base_url('employee/add'); ?>">
                        <div class="form-group">
54                             <label for="nama_karyawan" class="col-form-label">Nama Karyawan</label>
55                             <input type="text" class="form-control" id="nama_karyawan" name="nama_karyawan">
56                         </div>
57                         <div class="form-group">
58                             <label for="usia" class="col-form-label">Usia</label>
                            <input type="text" class="form-control" id="usia" name="usia">
59                         </div>
60                         <div class="form-group">
61                             <label for="status_vaksin_1" class="col-form-label">Status Vaksin 1</label>
62                             <select class="form-control" name="status_vaksin_1">
                                <option value="">---Pilih Status Vaksin---</option>
63                                 <option value="Belum">Belum Vaksin</option>
64
65
66
67
68
69
70
71                                 <option value="Sudah">Sudah Vaksin</option>
72                             </select>
73                         </div>
                        <div class="form-group">
74
                            <label for="status_vaksin_2" class="col-form-label">Status Vaksin 2</label>
75                             <select class="form-control" name="status_vaksin_2">
76                                 <option value="">---Pilih Status Vaksin---</option>
77                                 <option value="Belum">Belum Vaksin</option>
78                                 <option value="Sudah">Sudah Vaksin</option>
                            </select>
79                         </div>
80  
81                 </div>
82                 <div class="modal-footer">
83                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
84                     <button type="submit" class="btn btn-primary">Submit</button>
                </div>
85                 </form>
86             </div>
87         </div>
88     </div>
    </body>
89
90
91
92
93
94
95
96
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 -->


1     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script
3     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-
4 UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
5     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
6 JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
7     </body>
8  
    </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 :
Klik Submit dan lihatlah perubahan yang terjadi pada tabel Anda. Harusnya, sekarang sudah ada data yang baru saja Anda
tambahkan, kan?

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

Baca Juga: Membuat REST API CodeIgniter

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.

1 public function edit($id)


    {
2         $model = new Employee_model;
3         $getKaryawan = $model->getKaryawan($id)->getRow();
4         if (isset($getKaryawan)) {
5             $data['employee'] = $getKaryawan;
6             $data['title']  = 'Niagahoster Tutorial';
7
8
9
 
10             echo view('header', $data);
11             echo view('edit_view', $data);
12             echo view('footer', $data);
13         } else {
14  
            echo '<script>
15                     alert("ID karyawan ' . $id . ' Tidak ditemukan");
16                     window.location="' . base_url('employee') . '"
17                 </script>';
18         }
19     }
20  
    public function update()
21     {
22         $model = new Employee_model;
23         $id = $this->request->getPost('id');
24         $data = array(
            'nama_karyawan' => $this->request->getPost('nama_karyawan'),
25
26             'usia'         => $this->request->getPost('usia'),
27             'status_vaksin_1'  => $this->request->getPost('status_vaksin_1'),
28             'status_vaksin_2'  => $this->request->getPost('status_vaksin_2')
        );
29         $model->editKaryawan($data, $id);
30         echo '<script>
31                 alert("Selamat! Anda berhasil melakukan update data.");
32                 window.location="' . base_url('employee') . '"
33             </script>';
    }
34
35
36
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 :

1 public function editKaryawan($data, $id)


2     {
3         $builder = $this->db->table($this->table);
4         $builder->where('id', $id);
        return $builder->update($data);
5
    }
6

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 :

1 <div class="container p-5">


    <a href="<?= base_url('employee'); ?>" class="btn btn-secondary mb-2"><i class="fas fa-home"></i></a>
2
    <div class="card">
3         <div class="card-header bg-primary text-white">
4             <h4 class="card-title">Edit Data Vaksinasi Karyawan</h4>
5         </div>
6         <div class="card-body">
            <form method="post" action="<?= base_url('employee/update'); ?>">
7                 <div class="form-group">
8                     <label for="">Nama Karyawan</label>
9                     <input type="text" value="<?= $employee->nama_karyawan; ?>" name="nama_karyawan" required class
10                 </div>
11                 <div class="form-group">
                    <label for="">Usia</label>
12                     <input type="text" value="<?= $employee->usia; ?>" name="usia" required class="form-control">
13                 </div>
14                 <div class="form-group">
15                     <label for="">Status Vaksin 1</label>
                    <select class="form-control" name="status_vaksin_1">
16                         <option value="<?= $employee->status_vaksin_1; ?>">---Pilih Status Vaksin--</option>
17
18
19
20
                        <option value="Belum">Belum Vaksin</option>
21                         <option value="Sudah">Sudah Vaksin</option>
22                     </select>
23                 </div>
24                 <div class="form-group">
25                     <label for="">Status Vaksin 2</label>
                    <select class="form-control" name="status_vaksin_2">
26                         <option value="">---Pilih Status Vaksin--</option>
27                         <option value="Belum">Belum Vaksin</option>
28                         <option value="Sudah">Sudah Vaksin</option>
29                     </select>
                </div>
30
31  
                <input type="hidden" value="<?= $employee->id; ?>" name="id">
32                 <div class="text-right">
33                     <button class="btn btn-success">Update</button>
34                 </div>
35             </form>
36  
        </div>
37     </div>
38 </div>
39
40
41
42

Sekarang, coba refresh aplikasi Anda, lalu cobalah untuk menekan tombol Edit. Nantinya, Anda akan masuk ke halaman edit seperti
ini :
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 :

1 public function hapus($id)


    {
2         $model = new Employee_model;
3         $getKaryawan = $model->getKaryawan($id)->getRow();
4
5
        if (isset($getKaryawan)) {
6             $model->hapusKaryawan($id);
7             echo '<script>
8                     alert("Selamat! Data berhasil terhapus.");
9                     window.location="' . base_url('employee') . '"
                </script>';
10         } else {
11  
12             echo '<script>
13                     alert("Gagal Menghapus !, ID karyawan ' . $id . ' Tidak ditemukan");
14                     window.location="' . base_url('employee') . '"
15                 </script>';
        }
16     }
17
18

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 :

1 public function hapusKaryawan($id)


2     {
3         $builder = $this->db->table($this->table);
4         return $builder->delete(['id' => $id]);
    }
5

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. 
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.

Anda mungkin juga menyukai