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
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 :
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
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 :
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 :
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!
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)
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.
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!
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.
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.
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 :
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 :
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
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.
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 :
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).
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.
Selain penambahan fungsi pada file controller, Anda juga harus menambahkan kode berikut ini pada file Employee_model.php :
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 :
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.
Langkah terakhir dari konsep dasar tutorial CodeIgniter dengan CRUD adalah menghapus database. Bagaimana caranya?
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 :
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?
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.