Pada tutorial kali ini kita akan belajar bareng bikin fungsi CRUD menggunakan Framework CodeIgniter 4, agar tampilan CRUD yang kita buat ini lebih menarik kita akan mengintegrasikan dengan Bootstrap 4 dan juga salah satu plugins jQuery yang paling populer yaitu DataTables.
Pada tutorial ini kita akan membahas beberapa bagian, yaitu:
1. Menginstall CodeIgniter menggunakan composer.
2. Membuat View untuk CRUD
3. Integrasikan Bootstrap 4 dengan CodeIgniter
4. Implementasi DataTables dengan CodeIgniter.
5. Insert data ke dalam MySQL table.
6. Membaca data dari MySQL table.
7. Update data ke MySQL table.
8. Menghapus data dari MySQL table.
Tutorial CodeIgniter 4 CRUD dengan Bootstrap dan MySQL
Langkah 1: Download dan Install Codeigniter 4
Pertama kali kita lakukan adalah download Framework CodeIgniter 4 menggunakan composer.
composer create-project codeigniter4/appstarter codeigniter-crudSelain menggunakan composer untuk download CodeIgniter 4 kita juga bisa download secara manual CodeIgniter 4 lalu extract zip file yang telah kita download.
Langkah 2: Enable Codeigniter Errors
Langkah ini cukup penting, karena ketika kita pertama kali belajar CodeIgniter kita akan menemukan masalah ketika akan melakukan debug pada aplikasi yang sedang kita buat, setelah saya riset mengenai hal ini ternyata kita hanya perlu mengaktifkan error reporting sehingga kita akan lebih mudah dalam melakukan proses debugging.
Mari kita buka file app/Config/Boot/development.php lalu cari bagian "display_error" rubah dari 0 menjadi 1. Jangan lupa untuk merubah pada file app/Config/Boot/production.php juga ya.
ini_set('display_errors', '1');Langkah 3: Set Up Database
Secara umum langkah ini tidak berhubungan dengan CodeIgniter namun ini sangat dibutuhkan dalam proses pembuatannya, pertama kita akan membuat database dengan nama "crud", untuk membuat database ini harus dilakukan melalui phpmyadmin ya.
Selanjutnya kita harus merubah file konfigurasi koneksi database agar aplikasi kita bisa terhubung dengan database. Sebelum itu kita harus merubah nama file "env" menjadi ".env" lalu rubah baris 34, 35, 36 menjadi seperti dibawah ini
database.default.database = crud
database.default.username = root
database.default.password = rootUntuk database adalah nama database yang akan kita gunakan, username adalah user yang bisa mengakses ke database (biasanya adalah root, tergantung dengan web server yang kalian gunakan), sedangkan password adalah password dari user yang mengakses ke database kalian.
Langkah 4: Create New Model
Langkah keempat kita akan membuat sebuah file model yang fungsinya sebagai interface ke database, caranya cukup mudah kita buat sebuah file baru dengan nama UserModel.php pada directory app/Models/ lalu kalian ketik code dibawah ini pada file UserModel.php yang kita buat tadi.
<?php
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
protected $table = 'users';
protected $primaryKey = 'id';
protected $allowedFields = ['name', 'email'];
}Langkah 5: Create CRUD Controller
Pada langkah kelima pada tutorial membuat CRUD menggunakan CodeIgniter ini yaitu kita akan membuat sebuah file Controller dengan nama UserCrud.php. File controller ini berisikan fungsi untuk handle CRUD seperti operasi untuk Create, Read, Update dan Delete data.
File UserCrud.php ini kalian letakan di folder app/Controllers/UserCrud.php ya
<?php
namespace App\Controllers;
use App\Models\UserModel;
use CodeIgniter\Controller;
class UserCrud extends Controller
{
// show users list
public function index(){
$userModel = new UserModel();
$data['users'] = $userModel->orderBy('id', 'DESC')->findAll();
return view('user_view', $data);
}
// add user form
public function create(){
return view('add_user');
}
// insert data
public function store() {
$userModel = new UserModel();
$data = [
'name' => $this->request->getVar('name'),
'email' => $this->request->getVar('email'),
];
$userModel->insert($data);
return $this->response->redirect(site_url('/users-list'));
}
// show single user
public function singleUser($id = null){
$userModel = new UserModel();
$data['user_obj'] = $userModel->where('id', $id)->first();
return view('edit_user', $data);
}
// update user data
public function update(){
$userModel = new UserModel();
$id = $this->request->getVar('id');
$data = [
'name' => $this->request->getVar('name'),
'email' => $this->request->getVar('email'),
];
$userModel->update($id, $data);
return $this->response->redirect(site_url('/users-list'));
}
// delete user
public function delete($id = null){
$userModel = new UserModel();
$data['user'] = $userModel->where('id', $id)->delete($id);
return $this->response->redirect(site_url('/users-list'));
}
}Langkah 6: Create Routes
Berikutnya kita akan melakukan modifikasi pada file app/Config/Routes.php agar fungsi CRUD yang kita buat pada Controller bisa berjalan dengan baik.
Silahkan kalian taruh didalam file app/Config/Routes.php kode yang ada dibawah
// CRUD RESTful Routes
$routes->get('users-list', 'UserCrud::index');
$routes->get('user-form', 'UserCrud::create');
$routes->post('submit-form', 'UserCrud::store');
$routes->get('edit-view/(:num)', 'UserCrud::singleUser/$1');
$routes->post('update', 'UserCrud::update');
$routes->get('delete/(:num)', 'UserCrud::delete/$1');Langkah 7: Insert Data into Database
Langkah berikutnya kita akan membuat view yang isinya adalah form dengan fungsi untuk create atau insert kedalam tabel yang ada didalam database. Buatlah file dengan nama add_user.php didalam folder app/Views/ lalu kalian ketik kode dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 Add User With Validation Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
.container {
max-width: 500px;
}
.error {
display: block;
padding-top: 5px;
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div class="container mt-5">
<form method="post" id="add_create" name="add_create"
action="<?= site_url('/submit-form') ?>">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Update Data</button>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<script>
if ($("#add_create").length > 0) {
$("#add_create").validate({
rules: {
name: {
required: true,
},
email: {
required: true,
maxlength: 60,
email: true,
},
},
messages: {
name: {
required: "Name is required.",
},
email: {
required: "Email is required.",
email: "It does not seem to be a valid email.",
maxlength: "The email should be or equal to 60 chars.",
},
},
})
}
</script>
</body>
</html>Langkah 8: Show Data List & Delete
Berikutnya kita akan membuat view untuk menampilkan data dari tabel kedalam tabel, oh iya tabelnya kita menggunakan plugins DataTables ya jadi hasilnya lebih bagus daripada menggunakan tabel biasa. dan didalam view ini juga terdapat link untuk memanggil fungsi hapus data.
Silahkan kalian buat file user_view.php didalam folder app/Views/ lalu kalian ketik kode dibawah ini.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Codeigniter 4 CRUD App Example - positronx.io</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="d-flex justify-content-end">
<a href="<?php echo site_url('/user-form') ?>" class="btn btn-success mb-2">Add User</a>
</div>
<?php
if(isset($_SESSION['msg'])){
echo $_SESSION['msg'];
}
?>
<div class="mt-3">
<table class="table table-bordered" id="users-list">
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if($users): ?>
<?php foreach($users as $user): ?>
<tr>
<td><?php echo $user['id']; ?></td>
<td><?php echo $user['name']; ?></td>
<td><?php echo $user['email']; ?></td>
<td>
<a href="<?php echo base_url('edit-view/'.$user['id']);?>" class="btn btn-primary btn-sm">Edit</a>
<a href="<?php echo base_url('delete/'.$user['id']);?>" class="btn btn-danger btn-sm">Delete</a>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#users-list').DataTable();
} );
</script>
</body>
</html>Langkah 9: Edit and Update Data
Berikutnya kita buat file dengan nama edit_view.php pada folder app/Views/ lalu kalian isi dengan kode yang ada dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 CRUD - Edit User Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
.container {
max-width: 500px;
}
.error {
display: block;
padding-top: 5px;
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div class="container mt-5">
<form method="post" id="update_user" name="update_user"
action="<?= site_url('/update') ?>">
<input type="hidden" name="id" id="id" value="<?php echo $user_obj['id']; ?>">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" value="<?php echo $user_obj['name']; ?>">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" value="<?php echo $user_obj['email']; ?>">
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger btn-block">Save Data</button>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<script>
if ($("#update_user").length > 0) {
$("#update_user").validate({
rules: {
name: {
required: true,
},
email: {
required: true,
maxlength: 60,
email: true,
},
},
messages: {
name: {
required: "Name is required.",
},
email: {
required: "Email is required.",
email: "It does not seem to be a valid email.",
maxlength: "The email should be or equal to 60 chars.",
},
},
})
}
</script>
</body>
</html>Start the Application
Silahkan kalian eksekusi perintah dibawah ini untuk menjalankan aplikasi CRUD yang telah kita buat.
php spark serveHere is the URL that you have to enter in the browser’s address bar to initiate the CRUD application:
http://localhost:8080/index.php/users-listAkhirnya, kita telah sampai pada akhir dari Tutorial Membuat CRUD menggunakan CodeIgniter 4, pada tutorial ini kita telah belajar banyak hal.
Oh iya kamu bisa download source code tutorial CRUD CodeIgniter 4 ini langsung dari GitHub
Semoga bermanfaat ya