Tutorial Codeigniter 4 : Mempercantik Tampilan Tabel Dengan Bootstrap Dan DataTables
 |
| Mempercantik Tampilan Tabel Dengan Bootstrap Dan DataTables Codeigniter |
Bootstrap adalah framework CSS gratis dan open-source yang ditujukan untuk pengembangan web front-end yang responsive dan mobile-friendly (dapat menyesuaikan tampilan sesuai layar device). Berisikan template desain berbasis CSS dan Javascript untuk typography, form, tombol, navigasi dan komponen antarmuka lainnya.
DataTables merupakan plug-in penambah tabel untuk library Javascript jQuery. DataTables mempunyai kemampuan untuk mengurutkan data (sorting), pagination, dan pemfilteran data ke tabel HTML hanya dengan sedikit usaha.
Pada tutorial kali ini, kita akan melanjutkan dari tutorial sebelumnya yakni pembuatan CRUD di Codeigniter 4 yang mana pada tutorial tersebut kita belum memberikan sentuhan Bootstrap dan DataTables agar tampilan form dan tabel menjadi lebih cantik.
Apabila anda ingin menanamkan file-file Bootstrap dan DataTables pada folder Codeigniter secara offline, maka anda dapat mengunduhnya di getbootstrap.com untuk Bootstrap dan datatables.net untuk DataTables. Akan tetapi pada tutorial ini kita hanya perlu memanggil file CDN Bootstrap dan DataTables yang telah disediakan oleh situs mereka.
Karena kita hanya ingin merubah tampilan tabel dan form saja, maka hanya file view yang akan kita tambahkan url untuk pemanggilan file CDN. Yang pertama, silahkan buka Kembali file view user_view.php dan tambahkan script menjadi sebagai berikut.
<!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</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>
Kemudian berikutnya tambahkan script pada file view add_user.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 Add User With Validation</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="email" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Insert 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>
Kemudian berikutnya tambahkan script pada file view edit_view.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 CRUD - Edit User</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>
Langkah terakhir, jalankan aplikasi pada browser dan pastikan komputer yang digunakan dapat terhubung dengan internet. Apabila berhasil, maka anda dapat menemui tampilan seperti berikut.
Jika materi di tutorial ini dirasa kurang, anda dapat membeli buku Codeigniter saya. Silahkan klik link di bawah ini untuk mendapatkannya.
1. Membangun Aplikasi dengan Codeigniter dan Database SQL Server
2. Kolaborasi CodeIgniter dan Ajax dalam Perancangan CMS
3. Panduan Praktis dan Jitu Menguasai Framework Codeigniter 3
Terimakasih