1

1. Pendahuluan
1.1 Tujuan Pembelajaran
Setelah menyelesaikan modul ini, peserta didik diharapkan mampu:
➢ Memahami konsep dasar sistem register, login, dan CRUD dalam pengembangan
aplikasi web.
➢ Menguasai dasar-dasar penggunaan framework CodeIgniter 4 untuk membangun
aplikasi berbasis web.
➢ Membuat sistem manajemen pengguna dengan berbagai level akses (seperti admin
dan user biasa).
➢ Mengintegrasikan template Bootstrap untuk menciptakan antarmuka pengguna
yang modern dan responsif.
➢ Membuat aplikasi berbasis web dengan struktur kode yang terorganisir, aman, dan
dapat diandalkan.
Dalam modul ini, peserta tidak hanya belajar cara membuat sistem login dan CRUD,
tetapi juga memahami konsep pengelolaan data pengguna, implementasi validasi
keamanan, dan penggunaan teknologi web modern untuk mendukung pengembangan
aplikasi berbasis CodeIgniter 4.
1.2 Sasaran Pembelajaran
Modul ini dirancang untuk peserta dengan latar belakang sebagai berikut:
➢ Pemahaman Dasar tentang PHP
Peserta perlu memahami sintaks dasar PHP, seperti penggunaan variabel, fungsi,
kondisi, dan loop.
➢ Pengetahuan tentang Pemrograman Berorientasi Objek (OOP)
Karena CodeIgniter 4 sangat bergantung pada prinsip OOP, peserta perlu memahami
konsep dasar seperti class, objek, inheritance, dan encapsulation.
➢ Pemahaman Konsep MVC (Model-View-Controller)
CodeIgniter 4 menggunakan pola MVC sebagai dasar arsitektur. Peserta diharapkan
memahami alur kerja pola ini.
➢ Dasar-Dasar HTML, CSS, dan Bootstrap
Pengetahuan tentang HTML dan CSS diperlukan untuk membangun antarmuka
web, sementara Bootstrap digunakan untuk meningkatkan responsivitas tampilan.
➢ Pengetahuan Dasar tentang Database
Peserta diharapkan memahami konsep dasar database relasional, seperti cara
membuat tabel, dan menjalankan query SQL dasar seperti SELECT, INSERT,
UPDATE, dan DELETE.
1.3 Prasyarat

2
 Sebelum memulai modul ini, peserta perlu menyiapkan alat-alat berikut:
➢ Code Editor: Disarankan menggunakan Visual Studio Code atau Sublime Text untuk
menulis kode.
➢ Web Server Lokal: Gunakan XAMPP, WAMP, atau Laragon untuk pengujian
aplikasi di lingkungan lokal.
➢ Web Browser: Gunakan Google Chrome atau Mozilla Firefox untuk menguji hasil
pengembangan.
➢ Framework CodeIgniter 4: Unduh versi terbaru dari CodeIgniter 4 dari situs resmi
CodeIgniter.
➢ Bootstrap: Unduh Bootstrap dari situs resminya atau gunakan CDN untuk
mempermudah integrasi.
➢ Template Admin (Opsional): Untuk manajemen pengguna, gunakan template admin
seperti AdminLTE atau Nice Admin, yang tersedia secara gratis di platform seperti
bootstrapmade.com.

2. Materi Pembelajaran
2.1 Pengenalan Framework CodeIgniter 4
A. Pengertian Codeigniter 4
CodeIgniter 4 adalah framework PHP berbasis Model-View-Controller (MVC)
yang dirancang untuk mempermudah pengembangan aplikasi web. Framework ini
dikenal karena kecepatan, ringan, dan kesederhanaannya, sehingga cocok untuk
pengembang pemula maupun profesional. CodeIgniter menyediakan struktur yang
rapi untuk membangun aplikasi, dengan fitur-fitur keamanan bawaan dan
kompatibilitas tinggi terhadap berbagai teknologi web.
B. Keunggulan CodeIgniter 4
a) Ringan dan Cepat
CodeIgniter 4 memiliki ukuran yang kecil dan waktu muat yang cepat,
menjadikannya ideal untuk aplikasi dengan kebutuhan performa tinggi.
b) Dokumentasi Lengkap
Dokumentasi resmi CodeIgniter sangat terperinci dan mudah dipahami,
membantu pengembang dalam mempelajari dan mengimplementasikan fitur-
fitur yang tersedia.
c) Kompatibilitas Tinggi
Mendukung berbagai versi PHP (7.4 ke atas) dan database seperti MySQL,
PostgreSQL, dan SQLite.
d) Keamanan Bawaan

3
 CodeIgniter menyediakan perlindungan terhadap ancaman umum seperti SQL
Injection, Cross-Site Scripting (XSS), dan Cross-Site Request Forgery (CSRF).
e) Pola MVC yang Terstruktur
Memisahkan logika aplikasi (Model), kontrol alur kerja (Controller), dan
antarmuka pengguna (View), sehingga mempermudah pemeliharaan dan
pengembangan aplikasi.
f) Mudah Dipelajari
Sintaksis sederhana dan fleksibilitas yang tinggi memudahkan pengembang
pemula untuk menguasainya.
C. Pola Arsitektur MVC (Model-View-Controller)
Pola arsitektur MVC (Model-View-Controller) adalah pendekatan desain yang
memisahkan aplikasi menjadi tiga komponen utama, yaitu Model, View, dan
Controller. Pemisahan ini bertujuan untuk meningkatkan struktur aplikasi, membuat
kode lebih mudah dipelihara, dan mendukung pengembangan yang efisien.
Di dalam MVC sendiri terdapat beberapa komponen diantaranya:
1) Model
Model memiliki tugas utama dalam mengelola data aplikasi dan logika
bisnis. Dalam menjalankan fungsinya, model berinteraksi langsung dengan
database untuk melakukan berbagai operasi seperti mengambil, menyimpan,
memperbarui, dan menghapus data. Salah satu keunggulan dari pendekatan ini
adalah pemusatan logika bisnis di satu tempat, sehingga memudahkan proses
pembaruan jika terjadi perubahan pada aturan bisnis yang berlaku. Contoh
Tugas:
a. Validasi data sebelum disimpan ke database.
b. Menyediakan data yang diolah dari database untuk Controller.

2) View
View memiliki tugas utama dalam menampilkan data kepada pengguna
melalui antarmuka yang dirancang khusus. Dalam menjalankan perannya,
View menerima data dari Controller dan menyajikannya dengan cara yang
mudah dipahami oleh pengguna. Salah satu keunggulan dari pendekatan ini
adalah pemisahan antara tampilan dan logika bisnis, memungkinkan
perubahan desain antarmuka dilakukan tanpa memengaruhi fungsionalitas
aplikasi. Contoh Tugas:
a. Menampilkan daftar produk dalam format HTML.
b. Mengatur tata letak dan gaya antarmuka menggunakan CSS.

4
3) Controller
Controller berfungsi sebagai penghubung antara Model dan View dalam
sebuah aplikasi. Ketika pengguna mengajukan permintaan, Controller akan
menerimanya, memprosesnya, dan menentukan tindakan yang harus
dilakukan. Data yang dibutuhkan akan diambil dari Model, lalu hasil
pemrosesan dikirimkan ke View untuk ditampilkan kepada pengguna.
Pendekatan ini memiliki keunggulan dalam memisahkan logika kontrol dari
logika bisnis dan tampilan, sehingga pengelolaan aplikasi menjadi lebih
terstruktur dan mudah dilakukan. Contoh Tugas:
a. Mengambil data produk dari Model dan meneruskannya ke View.
b. Memproses input pengguna, seperti data yang diisi pada formulir.

Dalam menggunakan MVC terdapat beberapa manfaat yang akan dirasakan

oleh para pengguna atau programmer yaitu:

1) Pemisahan Tanggung Jawab. Setiap komponen memiliki tanggung jawab

spesifik, sehingga mempermudah pengembangan dan pemeliharaan.
2) Kemudahan Pengembangan Paralel. Pengembang dapat bekerja pada Model,
View, atau Controller secara terpisah tanpa saling mengganggu.
3) Kode yang Lebih Terstruktur. Pemisahan kode berdasarkan fungsi membuat
aplikasi lebih mudah dibaca dan diperbarui.
4) Mendukung Reusability. Komponen seperti Model atau View dapat
digunakan kembali di berbagai bagian aplikasi atau proyek lain.
5) Skalabilitas. Pola MVC mempermudah penambahan fitur baru tanpa
mengganggu komponen yang sudah ada.

Kemudian, dalam MVC juga terdapat diagram alur atau alur kerja dari MVC
sendiri. Berikut adalah diagram alur dari MVC:

Adapun rincian alur kerja MVC sebagai berikut:

1. User Interaction (Interaksi Pengguna)

Pengguna memulai dengan memberikan input atau permintaan melalui
antarmuka aplikasi.

5
 2. Controller
Permintaan dari pengguna diterima oleh Controller, yang bertugas memproses
permintaan tersebut dan menentukan tindakan yang harus dilakukan.
3. Model
Controller berinteraksi dengan Model untuk mengambil atau memanipulasi
data yang diminta. Model kemudian menghubungkan data ke database jika
diperlukan.
4. Database
Model mengambil atau menyimpan data yang diminta pada database sesuai
kebutuhan.
5. Processes Data
Data yang diperoleh dari Model diolah lebih lanjut oleh Controller.
6. View
Hasil akhir dikirim oleh Controller ke View, yang bertugas menampilkan data
tersebut kepada pengguna dalam format yang mudah dipahami.

2.2 Persiapan Awal

Sebelum memulai kerja dengan codeigniter, sangat penting untuk mempersiapkan
tools yang akan digunakan terlebih dahulu diantaranya:

A. Instalasi XAMPP/WAMP
Langkah pertama adalah memasang server lokal yang mencakup Apache (web
server), MySQL (database), dan PHP (bahasa pemrograman).
a) Unduh dan Instal:
• XAMPP: Download XAMPP

b) Konfigurasi:
• Pastikan Apache dan MySQL berjalan setelah instalasi.
6
 • Akses melalui http://localhost/ pada browser.
c) Cek Versi PHP: Pastikan versi PHP yang terinstal adalah 7.4 atau lebih tinggi,
karena CodeIgniter 4 membutuhkan PHP versi tersebut.
B. Install dan Konfigurasi CodeIgniter
Setelah server lokal terpasang, unduh CodeIgniter 4 dan siapkan proyek yang akan
dibuat.
a) Unduh composer dan CodeIgniter:
1. Unduh melalui link berikut;
https://drive.google.com/drive/folders/187UJ28s1vtpefXvyMffyAtFKAzm
mc8pR?usp=sharing
2. Install composer
3. Extract codeigniter framework 4, pindahkan file ke dalam folder
C:\xampp\htdocs
4. Buka command prompt, masuk ke dalam direktori
C:\xampp\htdocs\codeigniter4-framework-2849e7f jalankan kode dibawah
ini.

composer create-project codeigniter4/appstarter nama-proyek -vvv

Adapun penjelasan kode tersebut sebagai berikut:

a) create-project adalah perintah untuk membuat proyek baru dengan

composer;
b) codeigniter4/appstarter adalah file CI yang akan di-download;
c) ci-news adalah nama proyek yang akan kita buat;
d) -vvv berfungsi untuk melihat proses install lebih detail.

Setelah prosesnya selesai, kita akan mendapatkan folder baru dengan

nama ci-news.

5. Pindahkan folder ci-news ke dalam C:\xampp\htdocs

6. Buka folder ci-news dengan teks editor VS Code.
7. Setelah itu buka terminal dengan menekan Ctrl+` dan jalankan perintah:
composer install -vvv
Perintah ini akan menginstal semua library yang dibutuhkan CI 4
8. Buka command promp dan masuk ke direktori folder kalian lalu jalankan
kode berikut
php spark serve
Perintah ini akan menjalankan server CI 4 pada port 8080.

7
 9. Coba buka web browser dan arahkan ke alamat http://localhost:8080, maka
hasilnya:

b) Menyiapkan Database
Database diperlukan untuk menyimpan data aplikasi, seperti pengguna, artikel,
atau produk.
1. Buka phpMyAdmin: Akses melalui http://localhost/phpmyadmin.
2. Buat Database Baru: Klik tombol New di sidebar.
Masukkan nama database (contoh: ci_app) dan klik Create.
3. Konfigurasi Database di CodeIgniter: Buka file app/Config/Database.php.
Atur koneksi database sesuai dengan yang telah dibuat:
php
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ci_app',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !==
'production'),
'cacheOn' => false,
'cacheDir' => '',

8
 'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];

4. Uji Koneksi Database: Jalankan perintah migrasi atau buat koneksi awal
untuk memastikan konfigurasi database berhasil.
2.3 Membuat Sistem Login dan Registrasi
A. Desain Database untuk Sistem Login
Untuk mendukung sistem login yang aman dan efisien, berikut adalah desain tabel
users yang dapat digunakan:
a) Struktur tabel

b) Query SQL untuk membuat tabel

CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
ON UPDATE CURRENT_TIMESTAMP
);

B. Membuat Model untuk User

9
 Model adalah komponen yang bertanggung jawab untuk berinteraksi dengan
database, termasuk pengelolaan data pengguna. Dalam CodeIgniter 4, model dibuat
dengan memperluas kelas CodeIgniter\Model. Langkah Membuat Model
UserModel
a) Buat file UserModel.php di direktori app/Models/. Dengam menjalankan kode
berikut:
php spark make:model UsersModel

Jika berhasil akan membuat models baru seperti ini

b) Tambahkan kode berikut untuk mendefinisikan model:

<?php
namespace App\Models;
use CodeIgniter\Model;
class UsersModel extends Model
{
protected $table = 'users';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $returnType = 'array';
protected $useSoftDeletes = false;
protected $protectFields = true;
protected $allowedFields = ['username', 'password', 'email',
'created_at', 'updated_at'];

protected bool $allowEmptyInserts = false;

protected bool $updateOnlyChanged = true;

protected array $casts = [];

protected array $castHandlers = [];

// Dates

10
 protected $useTimestamps = true;
protected $dateFormat = 'datetime';
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $deletedField = 'deleted_at';

// Validation
protected $validationRules = [];
protected $validationMessages = [];
protected $skipValidation = false;
protected $cleanValidationRules = true;

// Callbacks
protected $allowCallbacks = true;
protected $beforeInsert = [];
protected $afterInsert = [];
protected $beforeUpdate = [];
protected $afterUpdate = [];
protected $beforeFind = [];
protected $afterFind = [];
protected $beforeDelete = [];
protected $afterDelete = [];
}
C. Membuat Controller untuk Autentikasi
Controller adalah bagian dari pola Model-View-Controller (MVC) yang
berfungsi untuk menangani logika aplikasi. Pada modul ini, kita akan belajar cara
membuat Controller untuk Autentikasi pengguna, meliputi proses login, registrasi,
dan logout. Controller yang akan dibuat akan mencakup tiga metode utama:
• register(): Untuk mendaftarkan pengguna baru.
• login(): Untuk menangani proses login.
• logout(): Untuk mengakhiri sesi pengguna.
a) Membuat Controller
Buat controller bernama Register dan Login menggunakan perintah berikut di
terminal:
php spark make:controller Register
php spark make:controller Login
File ini akan otomatis dibuat di direktori app/Controllers/

11
b) Implementasi Metode register()
Metode ini digunakan untuk menangani pendaftaran pengguna baru:
<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\UsersModel;

class Register extends Controller

{
public function index()
{
//include helper form
helper(['form']);
$data = [];
echo view('register', $data);
}
public function save()
{
//include helper form
helper(['form']);
//set rules validation form
$rules = [
'name' => 'required|min_length[3]|max_length[20]',
'email' =>
'required|min_length[6]|max_length[50]|valid_email|is_unique[user
s.email]',
'password' => 'required|min_length[6]|max_length[200]',
'confpassword' => 'matches[password]'
];
if($this->validate($rules)){
$model = new UsersModel();
$data = [
'username' => $this->request->getVar('name'),
'email' => $this->request->getVar('email'),
'password' => password_hash($this->request-
>getVar('password'), PASSWORD_DEFAULT)
];

12
 $model->save($data);
return redirect()->to('/login');
}else{
$data['validation'] = $this->validator;
echo view('register', $data);
}
}
}
c) Implementasi Metode login()
Metode ini digunakan untuk memvalidasi kredensial login dan menyimpan
data pengguna ke dalam sesi:
<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\UsersModel;

class Login extends Controller

{
public function index()
{
helper(['form']);
echo view('login');
}

public function auth()

{
$session = session();
$model = new UsersModel();
$email = $this->request->getVar('email');
$password = $this->request->getVar('password');
$data = $model->where('email', $email)->first();
if($data){
$pass = $data['password'];
$verify_pass = password_verify($password, $pass);
if($verify_pass){
$ses_data = [
'id' => $data['id'],

13
 'username' => $data['username'],
'email' => $data['email'],
'logged_in' => TRUE
];
$session->set($ses_data);
return redirect()->to('/dashboard');
}else{
$session->setFlashdata('msg', 'Wrong Password');
return redirect()->to('/login');
}
}else{
$session->setFlashdata('msg', 'Email not Found');
return redirect()->to('/login');
}
}

public function logout()

{
$session = session();
$session->destroy();
return redirect()->to('/login');
}
}
d) Implementasi Metode logout() dalam controller login
Metode ini digunakan untuk menghapus sesi pengguna dan mengarahkan
mereka kembali ke halaman login:
public function logout()
{
$session = session();
$session->destroy();
return redirect()->to('/login');
}
e) Membuat Auth Filter
Untuk mencegah pengguna yang belum login mengakses halaman tertentu,
kita akan membuat filter Authentication. membuat file pada
app/Filters/Auth.php kemudian tambahkan kode berikut:
<?php

14
 namespace App\Filters;

use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

class Auth implements FilterInterface

{
public function before(RequestInterface $request, $arguments =
null)
{
// jika user belum login
if (! session()->get('logged_in')) {
// maka redirct ke halaman login
return redirect()->to('/login');
}
}

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

public function after(RequestInterface $request,

ResponseInterface $response, $arguments = null)
{
// Do something here
}
}
Pada app/Config/Filters.php sesuaikan dengan kode ini:
public array $aliases = [
'csrf' => \CodeIgniter\Filters\CSRF::class,
'toolbar' => \CodeIgniter\Filters\DebugToolbar::class,
'honeypot' => \CodeIgniter\Filters\Honeypot::class,
'invalidchars' => InvalidChars::class,
'secureheaders' => SecureHeaders::class,
'cors' => Cors::class,
'forcehttps' => ForceHTTPS::class,
'pagecache' => PageCache::class,

15
 'performance' => PerformanceMetrics::class,
'auth'=> \App\Filters\Auth::class
];
f) Membuat routes untuk login, register dan logout
Dalam CodeIgniter, routes (rute) adalah cara untuk mengarahkan URL yang
diminta oleh pengguna ke controller dan metode yang sesuai dalam aplikasi.
Routing membantu dalam menangani permintaan URL, dan menentukan
bagaimana aplikasi merespons URL tersebut dengan menjalankan controller
dan metode yang tepat. Untuk mengatur routes di CodeIgniter dapat dilakukan
dalam folder app/config/routes.php. Buat routes yang ingin dipakai seperti di
bawah ini:

D. Membuat View untuk Login dan Registrasi

View adalah komponen dalam framework CodeIgniter yang berfungsi untuk
menangani tampilan antarmuka pengguna (UI). View bertanggung jawab
menyajikan data atau formulir yang dapat dilihat dan diakses oleh pengguna, seperti
halaman login, registrasi, atau dashboard. View bekerja secara terpisah dari logika
bisnis dan akses data, yang biasanya dikelola di controller dan model, sehingga
menciptakan pemisahan tugas yang jelas dan memudahkan pengelolaan aplikasi.
View sering kali berisi elemen HTML, CSS, dan JavaScript untuk membangun
antarmuka yang interaktif dan ramah pengguna. Dalam CodeIgniter, view dapat
digunakan untuk menampilkan data yang dikirim dari controller atau menerima
input yang dimasukkan pengguna.
Komponen dalam view biasanya terdiri dari elemen-elemen seperti formulir
(form), tabel, atau elemen visual lainnya yang dirancang untuk kebutuhan aplikasi.
Selain itu, terdapat fitur seperti validasi form untuk memastikan data yang
dimasukkan pengguna sesuai dengan aturan yang ditetapkan, misalnya memastikan
email valid atau password memiliki panjang tertentu. Komponen penting lainnya

16
adalah pemberian umpan balik (feedback) kepada pengguna, seperti menampilkan
pesan sukses setelah registrasi berhasil atau pesan kesalahan saat login gagal. View
dalam CodeIgniter dirancang untuk terintegrasi dengan sistem templating
framework, mempermudah pengembang menyusun struktur UI yang konsisten di
seluruh halaman aplikasi.
a) Membuat View untuk Registrasi
Buat file register.php di folder app/Views.
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-
alpha1/css/bootstrap.min.css"
integrity="sha384-
r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK
2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<title>Register</title>
</head>

<body>
<div class="container">
<div class="row justify-content-md-center">

<div class="col-6">
<h1>Sign Up</h1>
<?php if(isset($validation)):?>
<div class="alert alert-danger"><?= $validation-
>listErrors() ?></div>
<?php endif;?>
<form action="/register/save" method="post">

17
 <div class="mb-3">
<label for="InputForName" class="form-
label">Name</label>
<input type="text" name="name" class="form-control"
id="InputForName"
value="<?= set_value('name') ?>">
</div>
<div class="mb-3">
<label for="InputForEmail" class="form-label">Email
address</label>
<input type="email" name="email" class="form-
control" id="InputForEmail"
value="<?= set_value('email') ?>">
</div>
<div class="mb-3">
<label for="InputForPassword" class="form-
label">Password</label>
<input type="password" name="password"
class="form-control" id="InputForPassword">
</div>
<div class="mb-3">
<label for="InputForConfPassword" class="form-
label">Confirm Password</label>
<input type="password" name="confpassword"
class="form-control" id="InputForConfPassword">
</div>
<button type="submit" class="btn btn-
primary">Register</button>
</form>
</div>
</div>
</div>

<!-- Popper.js first, then Bootstrap JS -->

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/poppe
r.min.js"

18
 integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3Uksd
QRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-
alpha1/js/bootstrap.min.js"
integrity="sha384-
oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIE
HpNyvvDShgf/" crossorigin="anonymous">
</script>
</body>
</html>
b) Membuat View untuk Login
Buat file login.php di folder app/Views.
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-
alpha1/css/bootstrap.min.css"
integrity="sha384-
r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK
2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<title>Login</title>
</head>

<body>
<div class="container">
<div class="row justify-content-md-center">

19
 <div class="col-6">
<h1>Sign In</h1>
<?php if(session()->getFlashdata('msg')):?>
<div class="alert alert-danger"><?= session()-
>getFlashdata('msg') ?></div>
<?php endif;?>
<form action="/login/auth" method="post">
<div class="mb-3">
<label for="InputForEmail" class="form-label">Email
address</label>
<input type="email" name="email" class="form-
control" id="InputForEmail"
value="<?= set_value('email') ?>">
</div>
<div class="mb-3">
<label for="InputForPassword" class="form-
label">Password</label>
<input type="password" name="password"
class="form-control" id="InputForPassword">
</div>
<button type="submit" class="btn btn-
primary">Login</button>
</form>
<div class="mt-3">
<p>Belum punya akun? <a href="/register">Daftar
sekarang</a></p>
</div>
</div>

</div>
</div>

<!-- Popper.js first, then Bootstrap JS -->

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/poppe
r.min.js"

20
 integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3Uksd
QRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-
alpha1/js/bootstrap.min.js"
integrity="sha384-
oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIE
HpNyvvDShgf/" crossorigin="anonymous">
</script>
</body>
</html>

E. Membuat View untuk layout dan dashboard

View di CodeIgniter digunakan untuk menampilkan halaman kepada pengguna dan
memisahkan logika dari tampilan. Semua file view disimpan di dalam folder
app/Views. Kita akan membuat beberapa folder untuk mengorganisir tampilan kita.
1. app/Views/layouts/: Untuk layout utama seperti header, footer, dan template.
2. app/Views/dashboard/: Untuk halaman dashboard yang akan ditampilkan
setelah login.

Hasil akan seperti ini:

a) Kode program dalam layout/header.php

<!doctype html>
<html lang="en" class="h-100">

<head>
<meta charset="utf-8">

21
 <meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and
Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Halaman Admin</title>

<link rel="canonical"
href="https://getbootstrap.com/docs/4.5/examples/sticky-footer-
navbar/">

<!-- Bootstrap core CSS -->

<link
href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPv
g6uqKI2xXr2" crossorigin="anonymous">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media (min-width: 768px) {

.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->

22
 <link href="https://getbootstrap.com/docs/4.5/examples/sticky-
footer-navbar/sticky-footer-navbar.css"
rel="stylesheet">
</head>

<body class="d-flex flex-column h-100">

<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top
bg-dark">
<a class="navbar-brand"
href="https://warungbelajar.com">CV. MADURA
TECHNOVATION</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/dashboard">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/slide">Slide</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/profil">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/berita">Berita</a>
</li>

<li class="nav-item">
<a class="nav-link" href="/galeri">Galeri</a>

23
 </li>
<li class="nav-item">
<a class="nav-link" href="/pegawai">Pegawai</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/alumni">Testimoni</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login/logout">Logout</a>
</li>
</ul>
</div>
</nav>
</header>
b) Kode program dalam layout/footer.php
<footer class="footer mt-auto py-3">
<div class="footer-bottom"
style="text-align: center; background-color: rgba(200, 200, 200,
0.8); color: #000; padding: 10px; border-top: 1px solid rgba(150, 150,
150, 0.8); margin-top: 10px;">
<p>&copy; 2024 CV. MADURA TECHNOVATION.
</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVY
Uew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script
src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js
"
integrity="sha384-
ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/
tE3MoK7ZeZDyx" crossorigin="anonymous">
</script>
</body>

24
 </html>
c) Kode program dalam layout/template.php
<!-- Begin page content -->
<?php include 'header.php'; ?>
<main role="main" class="flex-shrink-0">
<?= $this->renderSection('content') ?>
</main>
<?php include 'footer.php'; ?>
d) Kode program dalam dashboard/index.php
<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>
<div class="container">
<div class="card">
<div class="card-header">
<h3>Selamat Datang Di Halaman Admin</h3>
</div>
<div class="card-body">
<h3>Hello, <?= session()->get('username'); ?></h3>
</div>
</div>
</div>
<?= $this->endSection('content'); ?>
e) Membuat fungsi untuk menampilkan dashboar pada controller, kode yang
digunakan adalah sebagai berikut:
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\PegawaiModel;
class Dashboard extends Controller
{
protected $pegawai;
function __construct()
{
$this->pegawai = new PegawaiModel();
}
public function index(): string
{

25
 $session = session();
$data['pegawai'] = $this->pegawai->findAll();
return view('Dashboard/index', $data);
}
}
f) Membuat routes untuk dashboard

g) Tampilan hasil login ke dashboard

2.4 Membuat CRUD (Create, Read, Update, Delete)

A. Pengertian CRUD
CRUD adalah singkatan dari Create, Read, Update, dan Delete, yaitu operasi
dasar dalam pengolahan data di database khususnya pada database yang relasional.
CRUD dapat diterapkan secara luas di berbagai jenis database seperti MySQL,
PostgreeSQL, MongoDB, dan sejenisnya. Selain itu, CRUD adalah fondasi dasar
dalam pengembangan sistem atau aplikasi yang berhubungan dengan pengolahan
data. Ini karena hampir semua aplikasi yang menggunakan database melibatkan
operasi CRUD dalam penggunaannya.
Berdasarkan pemaparan di atas, CRUD memiliki 4 fungsi utama yaitu sebagai
berikut:
a) Create
Fungsi dari create dalam CRUD adalah pembuatan database dan juga aktivitas
memasukkan data baru ke dalam database.
b) Read
Fungsi dari read adalah untuk mengambil dan menampilkan data atau record
yang tersimpan dalam database.

26
 c) Update
Sesuai dengan namanya, fungsi dari update adalah untuk mengupdate atau
memperbaharui data yang sudah ada dalam database.
d) Delete
Fungsi yang terakhir adalah fungsi delete. Fungsi delete dalam CRUD yaitu
untuk menghapus database maupun data atau record yang berada di database.
B. Persiapan CRUD
1. Membuat Migration
Migration digunakan untuk membuat dan memodifikasi tabel dalam
database. Untuk membuat migration pada CodeIgniter 4, kita bisa membuat file
migration yang nantinya disimpan di folder app/Database/Migrations. Kita
dapat membuat file migration menggunakan perintah pada CLI CodeIgniter:
php spark make:migration Pegawai
Perintah di atas akan membuat file migration baru di folder
app/Database/Migrations. Nama file migration akan mengikuti format
timestamp, seperti 2024-12-11-093818_Pegawai.php
Untuk mengedit file migration, buka file migration yang baru dibuat dan
tentukan skema tabelnya. Misalnya, kita ingin membuat tabel pegawai dengan
beberapa kolom seperti id_pegawai, nama, email, dll. Tambahkan kode
dibawah ini:
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class Pegawai extends Migration
{
public function up()
{
$this->forge->addField([
'id_pegawai' => [
'type' => 'INT',
'constraint' => 11,
'unsigned' => true,
'auto_increment' => true,
],
'nama' => [
'type' => 'VARCHAR',
'constraint' => '255',

27
 ],
'jabatan' => [
'type' => 'VARCHAR',
'constraint' => '255',
],
'jenis_kelamin' => [
'type' => 'VARCHAR',
'constraint' => '255',
],
'no_telp' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'email' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'alamat' => [
'type' => 'TEXT',
'constraint' => '255',
],
'foto' => [
'type' => 'VARCHAR',
'constraint' => '255',
],
'created_at' => [
'type' => 'DATETIME',
'null' => true, // CodeIgniter mengisi nilai ini
],
'updated_at' => [
'type' => 'DATETIME',
'null' => true, // CodeIgniter mengisi nilai ini
]
]);
$this->forge->addPrimaryKey('id_pegawai');
$this->forge->createTable('pegawai');
}

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

Pada contoh di atas:

up(): Digunakan untuk mendefinisikan struktur tabel yang baru.
down(): Digunakan untuk rollback (menghapus) tabel jika diperlukan.
Jalankan Migration
Setelah membuat file migration, jalankan migration untuk membuat tabel di
database dengan perintah:
php spark migrate
Ini akan menjalankan semua migration yang belum dijalankan dan membuat
tabel di database sesuai dengan struktur yang ditentukan.
Jika ingin membatalkan migration atau menghapus tabel, dapat menjalankan
rollback:
php spark migrate:rollback
Ini akan memanggil metode down() pada migration yang telah dibuat,
menghapus tabel yang sudah ada.
2. Membuat Seeder
Seeder digunakan untuk mengisi tabel dengan data dummy atau data awal
setelah tabel dibuat. Untuk membuat file seeder dapat menggunakan perintah
make:seeder:
php spark make:seeder PegawaiSeeder
Ini akan membuat file seeder baru di folder app/Database/Seeds dengan nama
PegawaiSeeder.php. setelah file dibuat, buka file seeder dan isi dengan data
yang ingin dimasukkan ke dalam tabel. Misalnya, kita ingin menambahkan
beberapa data pengguna ke tabel pegawai menggunakan kode seperti dibawah
ini:
<?php
namespace App\Database\Seeds;
use CodeIgniter\Database\Seeder;
class PegawaiSeeder extends Seeder

29
 {
public function run()
{
$data = [
[
'nama' => 'Anton',
'jabatan' => 'Manager',
'jenis_kelamin' => 'pria',
'no_telp' => '081234555678',
'email' => '[email protected]',
'alamat' => 'Jl. Mawar Putih No. 190, Waru Sidoarjo',
'foto' => 'anton.jpg',
],
[
'nama' => 'Budi',
'jabatan' => 'Staff',
'jenis_kelamin' => 'pria',
'no_telp' => '081234555679',
'email' => '[email protected]',
'alamat' => 'Jl. Anggrek No. 50, Surabaya',
'foto' => 'budi.jpg',
],
[
'nama' => 'Siti',
'jabatan' => 'Sekretaris',
'jenis_kelamin' => 'wanita',
'no_telp' => '081234555680',
'email' => '[email protected]',
'alamat' => 'Jl. Kenanga No. 123, Gubeng Surabaya',
'foto' => 'siti.jpg',
]
];
$this->db->table('pegawai')->insertBatch($data);
}
}

Pada contoh di atas:

30
 run(): Digunakan untuk menentukan data yang akan dimasukkan ke dalam
tabel.
insertBatch(): Digunakan untuk memasukkan data secara massal (bulk insert).

Setelah membuat file seeder, jalankan seeder untuk mengisi tabel users
dengan data:
php spark db:seed PegawaiSeeder
Ini akan memasukkan data yang sudah ditentukan ke dalam tabel users.
Kita juga dapat menjalankan beberapa seeder secara bersamaan jika diperlukan:
php spark db:seed UserSeeder,AnotherSeeder
Dengan mengikuti langkah-langkah di atas, kita dapat membuat dan
mengelola Migration dan Seeder di CodeIgniter 4. Migration membantu kita
mengelola struktur tabel database, sementara Seeder memungkinkan kita untuk
mengisi tabel dengan data awal atau dummy data.

3. Membuat Fitur CREATE data

1. Mempersiapkan database
Pastikan sudah memiliki koneksi database yang sudah dikonfigurasi dengan
benar di app/config/Database.php. pastikan nama database sesuai dengan
yang akan digunakan dan dalam database sudah memiliki tabel yang dibuat
melalui migration, seperti tabel pegawai tadi.
2. Membuat model untuk data
Model di CodeIgniter 4 berfungsi untuk berinteraksi dengan database.
Untuk membuat model, buat file PegawaiModel.php di direktori
app/Models/. Dengan menjalankan kode berikut:
php spark make:model PegawaiModel
Selanjutnya tambahkan kode berikut untuk mendefinisikan model:
<?php
namespace App\Models;
use CodeIgniter\Model;

class UsersModel extends Model

{
protected $table = 'users';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $returnType = 'object';

31
 protected $useSoftDeletes = false;
protected $protectFields = true;
protected $allowedFields = ['username', 'password',
'email', 'created_at', 'updated_at'];

protected bool $allowEmptyInserts = false;

protected bool $updateOnlyChanged = true;

protected array $casts = [];

protected array $castHandlers = [];

// Dates
protected $useTimestamps = true;
protected $dateFormat = 'datetime';
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $deletedField = 'deleted_at';

// Validation
protected $validationRules = [];
protected $validationMessages = [];
protected $skipValidation = false;
protected $cleanValidationRules = true;

// Callbacks
protected $allowCallbacks = true;
protected $beforeInsert = [];
protected $afterInsert = [];
protected $beforeUpdate = [];
protected $afterUpdate = [];
protected $beforeFind = [];
protected $afterFind = [];
protected $beforeDelete = [];
protected $afterDelete = [];
}

Untuk migration tabel secara keseluruhan dapat menggunakan perintah :

32
 Php spark migrate
Perintah php spark migrate berfungsi untuk menjalankan semua migration
yang belum dijalankan pada aplikasi CodeIgniter 4. Artinya, jika Anda telah
menulis beberapa file migration dan ada yang belum dieksekusi (misalnya,
tabel baru atau perubahan struktur tabel), perintah ini akan menjalankannya
untuk Anda.

3. Membuat Controller untuk Menangani Permintaan

Controller akan menangani permintaan untuk menampilkan form input
dan menyimpan data yang dimasukkan oleh pengguna ke database.
Conntroller dibuat pada direktori app/Controllers/Pegawai.php. pada
controller pegawai akan dibuat beberapa fungsi yaotu sebagai berikut:
1. Fungsi konstruktor
Dalam konstruktor ini, sebuah instance dari PegawaiModel dibuat dan
disimpan dalam properti $pegawai, yang digunakan untuk berinteraksi
dengan database, khususnya tabel pegawai.
function __construct()
{
$this->pegawai = new PegawaiModel();
}
2. Fungsi index untuk menampilkan daftar pegawai
public function index()
{
$data['pegawai'] = $this->pegawai->findAll();
echo view('pegawai/index', $data);
}
3. Fungsi tambah_data untuk menampilkan form tambah pegawai
public function tambah_data()
{
$data = [
'title' => 'Form Tambah Pegawai',
];
echo view('pegawai/tambah', $data);
}

33
4. Fungsi code_tambah untuk menyimpan data pegawai dan mengupload foto
public function code_tambah()
{
$validationRule = [
'foto' => [
'label' => 'Image File',
'rules' => 'uploaded[foto]'
. '|is_image[foto]'
.
'|mime_in[foto,image/jpg,image/jpeg,image/gif,image/png,i
mage/webp]'
. '|max_size[foto,1000]'
. '|max_dims[foto,4000,4000]',
],
];

$validated = $this->validate($validationRule);

if ($validated) {
$ambil_file = $this->request->getFile('foto');
$ambil_file->move('img');
$namafile = $ambil_file->getName();

$this->pegawai->save([
'nama' => $this->request->getVar('nama'),
'jenis_kelamin' => $this->request-
>getVar('jenis_kelamin'),
'no_telp' => $this->request->getVar('no_telp'),
'email' => $this->request->getVar('email'),
'alamat' => $this->request->getVar('alamat'),
'jabatan' => $this->request->getVar('jabatan'),
'foto' => $namafile, // Simpan nama file foto
]);

echo '<script>
alert("Proses Input Data Berhasil");
window.location="' . base_url('pegawai') . '"

34
 </script>';
return redirect()->to('/pegawai');
} else {
echo '<script>
alert("File Tidak Sesuai");
window.location="' . base_url('pegawai') . '"
</script>';
}
}
Sehingga tampilan keseluruhan kode pada controller pegawai sebagai
berikut;
<?php
namespace App\Controllers;
use App\Models\PegawaiModel;

class Pegawai extends BaseController

{
protected $pegawai;
function __construct()
{
$this->pegawai = new PegawaiModel();
}

// Menampilkan daftar pegawai

public function index()
{
$data['pegawai'] = $this->pegawai->findAll();
echo view('pegawai/index', $data);
}

// Menampilkan form tambah pegawai

public function tambah_data()
{
$data = [
'title' => 'Form Tambah Pegawai',
];
echo view('pegawai/tambah', $data);

35
 }

//menyimpan data pegawai dan mengupload foto

public function code_tambah()
{
$validationRule = [
'foto' => [
'label' => 'Image File',
'rules' => 'uploaded[foto]'
. '|is_image[foto]'
.
'|mime_in[foto,image/jpg,image/jpeg,image/gif,image/png
,image/webp]'
. '|max_size[foto,1000]'
. '|max_dims[foto,4000,4000]',
],
];

$validated = $this->validate($validationRule);

if ($validated) {
$ambil_file = $this->request->getFile('foto');
$ambil_file->move('img');
$namafile = $ambil_file->getName();

$this->pegawai->save([
'nama' => $this->request->getVar('nama'),
'jenis_kelamin' => $this->request-
>getVar('jenis_kelamin'),
'no_telp' => $this->request->getVar('no_telp'),
'email' => $this->request->getVar('email'),
'alamat' => $this->request->getVar('alamat'),
'jabatan' => $this->request->getVar('jabatan'),
'foto' => $namafile, // Simpan nama file foto
]);

echo '<script>

36
 alert("Proses Input Data Berhasil");
window.location="' . base_url('pegawai') . '"
</script>';
return redirect()->to('/pegawai');
} else {
echo '<script>
alert("File Tidak Sesuai");
window.location="' . base_url('pegawai') . '"
</script>';
}
}
}

4. Membuat Tampilan View

View digunakan untuk menampilkan form kepada pengguna. Form ini akan
mengirimkan data yang diisi oleh pengguna ke controller. Buat terlebih
dahulu folder pegawai kemudian buat file index dan tambah.
Kode program pada file index yaitu sebagai berikut:
<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>

<div class="container">
<div class="card">
<div class="card-header">
<h3>Data Pegawai</h3>
</div>
<div class="card-body">

<!-- Flash Message -->

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

37
 </div>
<?php endif; ?>

<!-- Button Tambah -->

<a href="<?= base_url('/pegawai/tambah'); ?>" class="btn
btn-primary mb-3">Tambah</a>

<!-- Tabel Data Pegawai -->

<?php if (isset($pegawai) && count($pegawai) > 0) : ?>
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center">
<th>No</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>No Telp</th>
<th>Email</th>
<th>Alamat</th>
<th>Jabatan</th>
<th>Foto</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($pegawai as $row) : ?>
<tr>
<td class="text-center"><?= $no++; ?></td>
<td><?= esc($row->nama); ?></td>
<td><?= esc($row->jenis_kelamin); ?></td>
<td><?= esc($row->no_telp); ?></td>
<td><?= esc($row->email); ?></td>
<td><?= esc($row->alamat); ?></td>
<td><?= esc($row->jabatan); ?></td>
<td>
<img src="<?= base_url('img/' . esc($row->foto));
?>" alt="Foto Alumni" width="100"

38
 height="100">
</td>
<td class="text-center">
<a title="Edit" href="<?=
base_url("pegawai/update/$row->id_pegawai"); ?>"
class="btn btn-sm btn-info">
<i class="fas fa-edit"></i> Edit
</a>
<a title="Delete" href="<?=
base_url("pegawai/delete/$row->id_pegawai"); ?>"
class="btn btn-sm btn-danger"
onclick="return confirm('Apakah Anda yakin
ingin menghapus data ini?')">
<i class="fas fa-trash"></i> Delete
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else : ?>
<div class="text-center">
Tidak ada data pegawai.
</div>
<?php endif; ?>
</div>
</div>
</div>

<?= $this->endSection('content'); ?>

Kode program pada file tambah yaitu sebagai berikut:

<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>

<div class="container">
<div class="card">

39
 <div class="card-header">
<h3><?= $title; ?></h3>
</div>
<div class="card-body">
<form action="<?= base_url('/pegawai/code_tambah');
?>" method="post" enctype="multipart/form-data">
<?= csrf_field(); ?>

<!-- Input Nama Pegawai -->

<div class="form-group">
<label for="nama">Nama Pegawai</label>
<input type="text" name="nama" class="form-
control" id="nama" placeholder="Masukkan Nama">
</div>
<!-- Input Jenis Kelamin -->
<div class="form-group">
<label for="jenis_kelamin" class="form-
label">Jenis Kelamin</label>
<select name="jenis_kelamin" id="jenis_kelamin"
class="form-control" required>
<option value="Laki-Laki">Laki-Laki</option>
<option
value="Perempuan">Perempuan</option>
</select>
</div>

<!-- Input No. Telp -->

<div class="form-group">
<label for="no_telp">No. Telp</label>
<input type="text" name="no_telp" class="form-
control" id="no_telp" placeholder="Masukkan No Telp">
</div>

<!-- Input Email -->

<div class="form-group">
<label for="email">Email</label>

40
 <input type="text" name="email" class="form-
control" id="email" placeholder="Masukkan Email">
</div>

<!-- Input Alamat -->

<div class="form-group">
<label
for="exampleFormControlInput1">Alamat</label>
<textarea class="form-control" name="alamat"
placeholder="Masukkan Alamat"></textarea>
</div>

<!-- Input Jabatan -->

<div class="form-group">
<label for="jabatan">Jabatan</label>
<input type="text" name="jabatan" class="form-
control" id="jabatan" placeholder="Masukkan Jabatan">
</div>

<!-- Input Foto -->

<div class="form-group">
<label for="exampleFormControlInput1">Pilih
Foto</label>
<input type="file" name="foto" class="form-
control" id="exampleFormControlInput1"
placeholder="Masukkan Foto">
</div>

<!-- Tombol Submit -->

<button type="submit" class="btn btn-
primary">Simpan</button>
<a href="<?= base_url('/pegawai'); ?>" class="btn
btn-secondary">Batal</a>
</form>
</div>
</div>
</div>

41
 <?= $this->endSection('content'); ?>

5. Menambahkan Routes
Jangan lupa menambahkan rute (route) di app/config/Routes.php untuk
menghubungkan URL dengan controller dan metode yang tepat.

6. Tampilan hasil read data pegawai

7. Tampilan hasil create data pegawai

4. Membuat Fitur UPDATE data

1. Menambahkan fungsi untuk update data di controller

42
Untuk fitur update data kita bisa menambahkan method edit() untuk
menampilkan data pegawai yang ingin diedit, dan method update() untuk
menangani proses update pada file controller yang sudah ada. Kode yang
perlu ditambahkan yaitu sebagai berikut:
a). Fungsi edit
// Menampilkan form edit data pegawai
public function edit($id)
{
$pegawai = $this->pegawai->find($id);
if (!$pegawai) {
echo '<script>
alert("Data tidak ditemukan!");
window.location="' . base_url('pegawai') . '"
</script>';
return redirect()->to('/pegawai');
}

$data = [
'pegawai' => $pegawai,
'title' => 'Form Edit Pegawai'
];

echo view('layout/header', $data);

echo view('pegawai/edit', $data);
echo view('layout/footer', $data);
}

b). Fungsi update

// Menangani update data pegawai
public function update($id)
{
// Validasi input, nama tidak boleh kosong
$this->validate([
'nama' => 'required'
]);
// Ambil data pegawai berdasarkan ID
$pegawai = $this->pegawai->find($id);

43
 if (!$pegawai) {
echo '<script>
alert("Data tidak ditemukan!");
window.location="' . base_url('pegawai') . '";
</script>';
return redirect()->to('/pegawai');
}

$ambil_file = $this->request->getFile('foto');
$namafile = $pegawai->foto;

if ($ambil_file && $ambil_file->isValid() && !$ambil_file-

>hasMoved()) {
// Hapus foto lama jika ada
if ($pegawai->foto && file_exists('img/' . $pegawai-
>foto)) {
unlink('img/' . $pegawai->foto);
}

$ambil_file->move('img');
$namafile = $ambil_file->getName();
}

// Update data pegawai

$data = [
'nama' => $this->request->getVar('nama'),
'jenis_kelamin' => $this->request-
>getVar('jenis_kelamin'),
'no_telp' => $this->request->getVar('no_telp'),
'email' => $this->request->getVar('email'),
'alamat' => $this->request->getVar('alamat'),
'jabatan' => $this->request->getVar('jabatan'),
'foto' => $namafile, // Tetap gunakan foto lama jika tidak
ada foto baru
];
$this->pegawai->update($id, $data);
echo '<script>

44
 alert("Proses Update Data Berhasil");
window.location="' . base_url('pegawai') . '";
</script>';
return redirect()->to('/pegawai');
}

2. Membuat view untuk update data

Setelah menambahkan controller, langkah selanjutnya adalah membuat
form untuk mengedit data. Form ini akan menampilkan data yang ada dan
memungkinkan pengguna untuk memperbarui data tersebut.
<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>
<div class="container">
<div class="card">
<div class="card-header">
<h2>Edit Data Pegawai</h2>
</div>
<div class="card-body">
<form action="<?= base_url('pegawai/code_edit/' .
$pegawai->id_pegawai); ?>" method="post"
enctype="multipart/form-data">
<?= csrf_field(); ?>
<!-- Input Nama -->
<div class="mb-3">
<label for="nama" class="form-label">Nama
Pegawai</label>
<input type="text" class="form-control" id="nama"
name="nama" value="<?= esc($pegawai->nama); ?>"
required>
</div>
<!-- Input Jenis Kelamin -->
<div class="mb-3">
<label for="jenis_kelamin" class="form-label">Jenis
Kelamin</label>
<select class="form-select" id="jenis_kelamin"
name="jenis_kelamin" required>

45
 <option value="Laki-Laki" <?= $pegawai-
>jenis_kelamin == 'Laki-Laki' ? 'selected' : ''; ?>>
Laki-Laki
</option>
<option value="Perempuan" <?= $pegawai-
>jenis_kelamin == 'Perempuan' ? 'selected' : ''; ?>>
Perempuan
</option>
</select>
</div>
<!-- Input No Telepon -->
<div class="mb-3">
<label for="no_telp" class="form-label">No
Telepon</label>
<input type="text" class="form-control" id="no_telp"
name="no_telp"
value="<?= esc($pegawai->no_telp); ?>" required>
</div>
<!-- Input Email -->
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email"
name="email"
value="<?= esc($pegawai->email); ?>" required>
</div>
<!-- Input Alamat -->
<div class="mb-3">
<label for="alamat" class="form-
label">Alamat</label>
<textarea class="form-control" id="alamat"
name="alamat" rows="3"
required><?= esc($pegawai->alamat);
?></textarea>
</div>
<!-- Input Jabatan -->
<div class="mb-3">

46
 <label for="jabatan" class="form-
label">Jabatan</label>
<input type="text" class="form-control" id="jabatan"
name="jabatan"
value="<?= esc($pegawai->jabatan); ?>" required>
</div>
<!-- Input Foto -->
<div class="mb-3">
<label for="foto" class="form-label">Foto</label>
<input type="file" name="foto" class="form-control"
id="foto">
<?php if ($pegawai->foto) : ?>
<small>Foto saat ini: <strong><?= $pegawai->foto;
?></strong></small>
<br>
<img src="/img/<?= $pegawai->foto; ?>" alt="Foto
Saat Ini" width="100" class="img-thumbnail mt-2">
<?php endif; ?>
</div>
<!-- Tombol Simpan -->
<button type="submit" class="btn btn-
primary">Simpan Perubahan</button>
<a href="<?= base_url('pegawai'); ?>" class="btn btn-
secondary">Batal</a>
</form>
</div>
</div>
</div>
<?= $this->endSection('content'); ?>

3. Membuat Routes untuk Edit dan Update

Jangan lupa menambahkan rute (route) di app/config/Routes.php untuk
menghubungkan URL dengan controller dan metode yang tepat.

47
 4. Tampilan hasil edit data pegawai

5. Membuat Fitur DELETE data

1. Menambahkan fungsi untuk delete data di controller
Untuk fitur delete data kita bisa menambahkan method delete() untuk
menghapus data pada file controller yang sudah ada. Kode yang perlu
ditambahkan yaitu sebagai berikut:
// Menangani penghapusan data pegawai
public function code_delete($id = null)
{
$pegawai = $this->pegawai->find($id);
if ($pegawai && !empty($pegawai->foto)) {
$filePath = 'img/' . $pegawai->foto; // Ubah
$pegawai['foto'] menjadi $pegawai->foto

// Hapus foto jika ada

if (file_exists($filePath)) {
unlink($filePath);
}
}
$this->pegawai->delete($id);
return redirect()->to(base_url('pegawai'));
}

2. Membuat Routes untuk delete

48
 Jangan lupa menambahkan rute (route) di app/config/Routes.php untuk
menghubungkan URL dengan controller dan metode yang tepat

3. Tampilan hasil delete data pegawai

2.5 Integrasi dengan Bootstrap untuk Antarmuka Pengguna

A. Pengertian Bootstrap
Bootstrap adalah framework web development berbasis HTML, CSS, dan
JavaScript yang dirancang untuk mempercepat proses pengembangan web
responsive dan mobile-first (memprioritaskan perangkat seluler). Selain bisa
digunakan untuk mengembangkan website dengan lebih cepat, Bootstrap juga
merupakan framework gratis yang bersifat open-source. Skrip dan syntax yang
disediakan Bootstrap bisa diterapkan untuk berbagai komponen dalam desain web.
B. Menggunakan Template Bootstrap
Untuk menciptakan tampilan antarmuka pengguna yang profesional dan menarik,
Anda dapat memanfaatkan template Bootstrap. Salah satu contoh template populer
adalah Nice Admin. Integrasi template ini ke dalam aplikasi CodeIgniter 4 bertujuan
untuk meningkatkan estetika dan keteraturan tampilan aplikasi. Berikut langkah-
langkah integrasi template Bootstrap dengan aplikasi CodeIgniter:
1. Mengunduh Template
Cari template yang diinginkan di situs penyedia seperti BootstrapMade.
Kemudia unduh template yang sesuai dengan kebutuhan proyek Anda.
Misalnya, Nice Admin.
2. Menempatkan File Template
Ekstrak file template yang sudah diunduh dan Pindahkan file-file berikut dari
hasil ekstraksi ke folder proyek CodeIgniter Anda:
• File CSS: Tempatkan di public/assets/css.

49
 • File JavaScript: Tempatkan di public/assets/js.
• File Font: Tempatkan di public/assets/fonts (jika ada).
• File Gambar: Tempatkan di public/assets/images (jika ada).
• Pastikan struktur folder public/assets terlihat seperti ini:
public/assets/
├── css/
├── js/
├── fonts/
└── images/
3. Menghubungkan Template ke View
Integrasikan file CSS dan JavaScript ke dalam view CodeIgniter. Ikuti langkah
berikut:
• Buka file view utama Anda, misalnya app/Views/layout/main.php.
• Tambahkan link ke file CSS dan JS di dalam file tersebut.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Dashboard</title>
<!-- Tambahkan CSS -->
<link rel="stylesheet" href="<?=
base_url('assets/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/css/style.css');
?>">
</head>
<body>
<!-- Konten -->
<?= $this->renderSection('content'); ?>
<!-- Tambahkan JavaScript -->
<script src="<?= base_url('assets/js/bootstrap.bundle.min.js');
?>"></script>
<script src="<?= base_url('assets/js/main.js'); ?>"></script>
</body>

50
 </html>

• Buat file view spesifik untuk setiap halaman, misalnya:

app/Views/auth/login.php untuk halaman login. Atau
app/Views/dashboard/index.php untuk halaman dashboard. Serta gunakan
renderSection untuk menyisipkan konten dinamis pada main.php.
4. Memanfaatkan Template Bootstrap
• Salin elemen-elemen HTML dari template seperti header, sidebar, dan footer
ke view layout (main.php).
• Sesuaikan konten halaman dengan fitur aplikasi Anda.
• Manfaatkan komponen Bootstrap untuk membuat formulir register, login,
dan fitur CRUD.
a) Menggunakan CDN Bootstrap
Langkah pertama adalah menambahkan Bootstrap ke dalam proyek Anda
melalui CDN. Buka file app/Views/layouts/header.php (atau buat jika belum
ada), lalu masukkan link CDN Bootstrap di bagian <head>:
b) Menggunakan Bootstrap JS dan Popper (Opsional)
Tambahkan juga Bootstrap JS dan Popper.js (untuk fitur interaktif seperti
dropdown, modal, dll.) di bagian bawah footer sebelum tag </body>:
c) Menggunakan Layout Template dengan Bootstrap
Dalam proyek CodeIgniter, kita dapat menggunakan layout terpisah seperti
header, footer, dan sidebar untuk memudahkan pengelolaan tampilan antar
halaman. Mari kita buat layout dasar menggunakan Bootstrap.
d) Menggunakan Layout pada Halaman Lain
Di halaman lain, kita bisa menyertakan header dan footer ini, dan hanya fokus
pada bagian konten utama. Misalnya, di app/Views/pegawai/index.php, kita
dapat memuat template layout dengan cara seperti ini:
e) Menambahkan Komponen Bootstrap
Selain layout dasar, Anda bisa memanfaatkan komponen-komponen Bootstrap
yang sudah tersedia, seperti:
• Form (input, select, textarea)
• Alert (untuk pesan sukses/gagal)
• Modal (untuk dialog interaktif)
• Table (untuk menampilkan data dalam bentuk tabel)
• Card (untuk menampilkan informasi dalam card)
• Navbar (untuk navigasi yang responsif)
Sebagai contoh adalah penggunaan alert untuk menampilkan pesan sukses.

51
f) Mengatur Responsif dan Mobile-Friendly
Bootstrap secara otomatis membuat halaman Anda menjadi responsif. Anda
hanya perlu memastikan Anda menggunakan kelas-kelas yang disediakan oleh
Bootstrap seperti container, row, dan col- untuk mengatur layout yang
fleksibel.
g) Menyesuaikan Tampilan Login dan Dashboard
Pada tahap ini, setelah template berhasil terintegrasi dengan proyek CodeIgniter
4, langkah selanjutnya adalah menyesuaikan tampilan halaman login, registrasi,
dan dashboard agar selaras dengan desain dan pengalaman pengguna yang
diinginkan. Penyesuaian ini meliputi perubahan elemen UI, penggunaan
komponen interaktif, dan pengaturan layout agar tampilan lebih profesional dan
mudah digunakan.
1. Menyiapkan File View
File view adalah tempat di mana template HTML ditempatkan untuk masing-
masing halaman, seperti login, registrasi, dan dashboard. Sesuaikan file
berikut:

• Login: app/Views/auth/login.php
• Registrasi: app/Views/auth/register.php
• Dashboard: app/Views/dashboard.php
Contoh struktur folder:
app/
├── Views/
│ ├── auth/
│ │ ├── login.php
│ │ └── register.php
│ ├── dashboard.php
2. Menghubungkan View dengan Template
Gunakan fungsi extend() dan section() untuk mengintegrasikan halaman dengan
template utama yang sudah Anda buat, misalnya app/Views/layout/main.php.
Contoh login.php:
<?= $this->extend('layout/main'); ?>

<?= $this->section('content'); ?>

<div class="login-container">
<h1>Login</h1>

52
 <form action="<?= base_url('auth/login') ?>" method="post">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" class="form-
control" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<?= $this->endSection(); ?>
3. Menambahkan Komponen UI
Untuk meningkatkan interaksi pengguna, gunakan komponen UI seperti modal,
alert, dan validasi form. Anda dapat menggunakan framework CSS seperti
Bootstrap.
Contoh Alert pada Login:
<?php if (session()->getFlashdata('error')): ?>
<div class="alert alert-danger">
<?= session()->getFlashdata('error'); ?>
</div>
<?php endif; ?>
Contoh Modal pada Dashboard:
<button type="button" class="btn btn-success" data-bs-
toggle="modal" data-bs-target="#addDataModal">
Tambah Data
</button>

<div class="modal fade" id="addDataModal" tabindex="-1" aria-

labelledby="addDataModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

53
 <h5 class="modal-title" id="addDataModalLabel">Tambah
Data</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="dataField" class="form-
label">Data:</label>
<input type="text" class="form-control"
id="dataField">
</div>
<button type="submit" class="btn btn-
primary">Simpan</button>
</form>
</div>
</div>
</div>
</div>
4. Mengatur Dashboard
Halaman dashboard adalah pusat dari aplikasi. Sesuaikan dengan menampilkan
data dinamis dari database menggunakan model dan controller.
Controller:Halaman dashboard adalah pusat dari aplikasi. Sesuaikan dengan
menampilkan data dinamis dari database menggunakan model dan controller.
Controller:
public function index()
{
$dataModel = new DataModel();
$data['items'] = $dataModel->findAll();

return view('dashboard', $data);

}
View (dashboard.php):
<table class="table">
<thead>
<tr>

54
 <th>ID</th>
<th>Nama</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($items as $item): ?>
<tr>
<td><?= $item['id']; ?></td>
<td><?= $item['name']; ?></td>
<td>
<a href="<?= base_url('edit/'.$item['id']); ?>" class="btn
btn-warning">Edit</a>
<a href="<?= base_url('delete/'.$item['id']); ?>" class="btn
btn-danger">Delete</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>

55
3. Kesimpulan
3.1 Ringkasan
Melalui modul ini, peserta telah diajak untuk mempelajari dan menerapkan
langkah-langkah penting dalam membangun sistem register, login, dan CRUD
menggunakan framework CodeIgniter 4. Proses ini mencakup pemahaman mendalam
mengenai berbagai komponen pengembangan web, mulai dari desain struktur aplikasi
yang baik, pengelolaan database, hingga implementasi fitur keamanan.
Tidak hanya berfokus pada aspek teknis, modul ini juga menekankan pentingnya
menerapkan prinsip user experience (UX) yang baik, seperti membangun antarmuka
yang responsif dan mudah digunakan dengan integrasi Bootstrap. Peserta juga diajarkan
cara mengelola berbagai level akses pengguna untuk memastikan aplikasi tetap aman
dan sesuai kebutuhan.
Selain itu, konsep-konsep penting seperti arsitektur MVC (Model-View-
Controller), prinsip pemrograman berorientasi objek (OOP), dan penerapan validasi
data menjadi bagian integral dari pembelajaran ini. Semua hal tersebut dirancang untuk
membantu peserta menguasai tidak hanya kemampuan teknis tetapi juga pola pikir
pengembangan aplikasi yang terorganisir dan efisien. Dengan menyelesaikan modul ini,
peserta diharapkan mampu:
• Membangun aplikasi berbasis web yang aman, efisien, dan responsif
menggunakan CodeIgniter 4.
• Mengintegrasikan komponen modern seperti template Bootstrap untuk
meningkatkan estetika dan pengalaman pengguna.
• Menerapkan prinsip keamanan aplikasi web, seperti proteksi terhadap SQL
Injection dan validasi data input pengguna.
• Mengelola proyek pengembangan web dari awal hingga implementasi dengan
struktur yang terorganisir dan sesuai standar industri.
Melalui pembelajaran ini, peserta tidak hanya memperoleh keterampilan teknis
tetapi juga wawasan mengenai pengelolaan aplikasi yang siap diimplementasikan dalam
skenario nyata. Harapannya, pengetahuan yang telah didapatkan dapat menjadi fondasi
kuat untuk melangkah lebih jauh dalam dunia pengembangan web, menciptakan aplikasi
yang memberikan nilai tambah bagi pengguna, serta terus berinovasi dalam
memanfaatkan teknologi terkini.

56