CRUD dan Validasi Data di CodeIgniter 4 #4
Pada artikel sebelumnya kita sudah belajar bagaimana membagi layout template sesuai dengan kebutuhan (artikel lengkapnya dapat dibaca di sini), pada artikel kali ini kita akan belajar operasi CRUD (Create, Read, Update dan Delete), validasi data dan menambahkan Sweet Alert untuk mempercantik notifikasi pada proyek web kita. namun, sebelum pada pembahasan inti, seperti biasa kita harus mempersiapkan beberapa hal: seperti menyesuaikan posisi link jquery.js, membuat database untuk menampung data dari hasil operasi CRUD, menambahkan datatable (link file js dan css) dan tentu saja Sweet Alert.
Pada pembahasan kali ini anda harus sedikit berpikir keras, untuk memahami setiap bagian pada artikel ini, namun jika anda dapat memahami bagian ini dengan baik, untuk pembahasan selanjutnya anda akan merasakan kemudahan, silahkan buka teks editor untuk memulai mengedit proyek web kita.
Daftar Isi
Mengatur ulang layout main.php
Pada artikel ini kita akan menggunakan Datatable dan Sweet Alert, maka ada beberapa bagian template yang harus disesuaikan, seperti memindahkan file jquery.min.js ke bagaian atas (tag head) dan menambahkan link js dan css Datatable juga Sweet Alert, seperti pada kode berikut ini:
php-template
<!DOCTYPE html>
<html lang="en">s
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="<?= base_url() ?>/assets/img/logo/logo.png" rel="icon">
<title>RuangAdmin - Blank Page</title>
<link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets/css/ruang-admin.min.css" rel="stylesheet">
<!-- Datatable css -->
<link href="<?= base_url() ?>/assets/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
<!-- jquery -->
<script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
</head>
<body id="page-top">
<div id="wrapper">
<!-- Sidebar - Menu -->
<?= $this->renderSection('menu') ?>
<!-- Sidebar - Menu -->
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<!-- Navbar - Main-->
<nav class="navbar navbar-expand navbar-light bg-navbar topbar mb-4 static-top">
<button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="img-profile rounded-circle" src="<?= base_url() ?>/assets/img/boy.png" style="max-width: 60px">
<span class="ml-2 d-none d-lg-inline text-white small">Maman Ketoprak</span>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- Navbar - Main -->
<div class="container-fluid" id="container-wrapper">
<!-- Konten - Isi -->
<?= $this->renderSection('konten') ?>
<!-- Konten - Isi -->
<!-- Modal Logout -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Ohh No!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to logout?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
<a href="login.html" class="btn btn-primary">Logout</a>
</div>
</div>
</div>
</div>
</div>
<!---Container Fluid-->
</div>
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>copyright © <script>
document.write(new Date().getFullYear());
</script> - developed by
<b><a href="https://indrijunanda.gitlab.io/" target="_blank">indrijunanda</a></b>
</span>
</div>
</div>
</footer>
<!-- Footer -->
</div>
</div>
<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="<?= base_url() ?>/assets/js/ruang-admin.min.js"></script>
<!-- Page level plugins -->
<!-- Datatable -->
<script src="<?= base_url() ?>/assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Sweet Alert 2-->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>
Penjelasan untuk kode di atas, susunan kodenya masih sama (silahkan Copy kode di atas dan paste pada Views template/main.php), hanya saja posisi link jquery.min.js dipindah pada bagian tag /head, karena jquery.min.js merupakan library utama untuk menjalankan setiap plugin pada template ini, maka ditempatkan dibagian atas. sisanya untuk link file css masih ditempatkan di atas dan untuk link js di tempatkan pada bagian sebelum /body. untuk plugin Datatable sudah tersedia di dalam folder Ruang Admin, jadi kita hanya perlu menambahkan link-nya saja, sedangkan untuk Sweet Alert anda dapat membacanya di sini.
Membuat Database
- Buka phpMyAdmin (http://localhost/phpmyadmin)
- Buat database ci4_db, dengan tabel seperti berikut
Tabel User
Tabel Role
- Lalu isi kedua tabel tersebut seperti berikut:
Isi Tabel User
Isi Tabel Role
Konfigurasi Database
Setelah database berhasil dibuat dan diinput, saatnya kita menghubungkan proyek website kita dengan database yang sudah kita buat, caranya dapat kita atur via file .env atau Database.php yang terdapat pada folder app/Config. Nah, kali ini kita akan mengkonfigurasi database yang sudah dibuat via file Database.php, silahkan buka file tersebut. kita cukup menambahkan username : root dan database: ci4_db, seandainya database anda menggunakan password silahkan isi password-nya, kalau tidak ada password-nya, kosongkan saja. Seperti berikut ini:
Database.php
php
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ci4_db',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
.....
....
...
Membuat Model
Buatlah dua file model yaitu model user dan user role, misal saya beri nama Modeluser.php dan Modelrole.php, silahkan salin atau copy kode berikut ini:
Modeluser.php
php
<?php
namespace App\Models;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\Model;
use Config\Services;
class Modeluser extends Model
{
protected $table = "user";
protected $primaryKey = "id_user";
protected $column_order = array('', 'nama', 'email', '');
protected $column_search = array('nama', 'email');
protected $order = array('nama' => 'asc');
protected $allowedFields = array('id_user', 'id_role', 'nama', 'email', 'password');
protected $request;
protected $db;
protected $dt;
function __construct(RequestInterface $request)
{
$request = Services::request();
parent::__construct();
$this->db = db_connect();
$this->request = $request;
$this->dt = $this->db->table($this->table);
}
private function _get_datatables_query()
{
$i = 0;
foreach ($this->column_search as $item) {
if ($this->request->getPost('search')['value']) {
if ($i === 0) {
$this->dt->groupStart();
$this->dt->like($item, $this->request->getPost('search')['value']);
} else {
$this->dt->orLike($item, $this->request->getPost('search')['value']);
}
if (count($this->column_search) - 1 == $i)
$this->dt->groupEnd();
}
$i++;
}
if ($this->request->getPost('order')) {
$this->dt->orderBy($this->column_order[$this->request->getPost('order')['0']['column']], $this->request->getPost('order')['0']['dir']);
} else if (isset($this->order)) {
$order = $this->order;
$this->dt->orderBy(key($order), $order[key($order)]);
}
}
function get_datatables()
{
$this->_get_datatables_query();
if ($this->request->getPost('length') != -1)
$this->dt->limit($this->request->getPost('length'), $this->request->getPost('start'));
$query = $this->dt->get();
return $query->getResult();
}
function count_filtered()
{
$this->_get_datatables_query();
return $this->dt->countAllResults();
}
public function count_all()
{
$tbl_storage = $this->db->table($this->table);
return $tbl_storage->countAllResults();
}
}
Modelrole.php
php
<?php
namespace App\Models;
use CodeIgniter\Model;
class Modelrole extends Model
{
protected $table = "role";
protected $primaryKey = "id_role";
//field yang dapat diisi
protected $allowedFields = array('id_role', 'role');
}
Membuat Controller
Pada contoh kali ini kita akan menampilkan data user, maka untuk menampilkan data user maka kita harus membuat controller user, buat sebuah file pada folder controller, misal nama filenya User.php, silahkan salin atau copy kode berikut ini:
User.php
php
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use App\Models\Modeluser;
use App\Models\Modelrole;
use Config\Services;
class User extends BaseController
{
public function index()
{
return view('user/index');
}
public function tampildata()
{
if ($this->request->isAJAX()) {
$msg = [
'data' => view('user/datauser')
];
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
public function ajax_list()
{
$request = Services::request();
$m_data = new Modeluser($request);
if ($request->getPost()) {
$lists = $m_data->get_datatables();
$data = [];
$no = $request->getPost("start");
foreach ($lists as $list) {
$no++;
$row = [];
//tombol edit
$tomboledit = "<button type=\"button\" title=\"Edit Data\" class=\"btn btn-info btn-sm\" onclick=\"edit('" . $list->id_user . "')\">
<i class=\"fa fa-tasks\"></i></button>";
//tombol hapus
$tombolhapus = "<button type=\"button\" title=\"Hapus Data\" class=\"btn btn-danger btn-sm\" onclick=\"hapus('" . $list->id_user . "')\">
<i class=\"fa fa-trash\"></i></button>";
$row[] = $no;
$row[] = $list->nama;
$row[] = $list->email;
$row[] = $tomboledit . " " . $tombolhapus;
$data[] = $row;
}
$output = [
"draw" => $request->getPost('draw'),
"recordsTotal" => $m_data->count_all(),
"recordsFiltered" => $m_data->count_filtered(),
"data" => $data
];
echo json_encode($output);
}
}
//tampil modal tambah
public function tambahdata()
{
if ($this->request->isAJAX()) {
$role = new Modelrole;
$data['role'] = $role->findAll();
$msg = [
'data' => view('user/modaltambah', $data)
];
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
//proses simpan data
public function simpandata()
{
if ($this->request->isAJAX()) {
$validation = \Config\Services::validation();
$valid = $this->validate([
'nama' => [
'label' => 'Nama',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong',
]
],
'email' => [
'label' => 'Email',
'rules' => 'required|is_unique[user.email]',
'errors' => [
'required' => '{field} tidak boleh kosong',
'is_unique' => '{field} sudah ada di database',
]
],
'password' => [
'label' => 'Password',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong',
]
],
]);
if (!$valid) {
$msg = [
'error' => [
'nama' => $validation->getError('nama'),
'email' => $validation->getError('email'),
'password' => $validation->getError('password'),
]
];
} else {
$simpandata = [
'nama' => $this->request->getVar('nama'),
'email' => $this->request->getVar('email'),
'password' => $this->request->getVar('password'),
'id_role' => $this->request->getVar('id_role'),
];
//simpan ke tabel user
$request = Services::request();
$user = new Modeluser($request);
$user->insert($simpandata);
$msg = [
'sukses' => 'Data user telah tersimpan'
];
}
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
//tampil edit data
public function editdata()
{
if ($this->request->isAJAX()) {
$id_user = $this->request->getVar('id_user');
//data user
$request = Services::request();
$user = new Modeluser($request);
$data['user'] = $user->find($id_user);
//data role
$role = new Modelrole;
$data['role'] = $role->findAll();
$msg = [
'sukses' => view('user/modaledit', $data)
];
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
//update data
public function updatedata()
{
if ($this->request->isAJAX()) {
$validation = \Config\Services::validation();
$valid = $this->validate([
'nama' => [
'label' => 'Nama',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong',
]
],
'email' => [
'label' => 'Email',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong',
]
],
'password' => [
'label' => 'Password',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong',
]
],
]);
if (!$valid) {
$msg = [
'error' => [
'nama' => $validation->getError('nama'),
'email' => $validation->getError('email'),
'password' => $validation->getError('password'),
]
];
} else {
$simpandata = [
'nama' => $this->request->getVar('nama'),
'email' => $this->request->getVar('email'),
'password' => $this->request->getVar('password'),
'id_role' => $this->request->getVar('id_role'),
];
$request = Services::request();
$user = new Modeluser($request);
//update data user
$id_user = $this->request->getVar('id_user');
$user->update($id_user, $simpandata);
$msg = [
'sukses' => 'Data user telah diupdate'
];
}
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
//hapus data
public function hapus()
{
if ($this->request->isAJAX()) {
$id_user = $this->request->getVar('id_user');
$request = Services::request();
$user = new Modeluser($request);
$user->delete($id_user);
$msg = [
'sukses' => "Data user telah dihapus"
];
echo json_encode($msg);
}
}
}
Pada kode controller User.php di atas, dibagi menjadi beberapa bagian fungsi:
- Index
- Simpan data
- Update data
- Hapus data
Fungsi-fungsi tersebut merupakan bagian dari operasi CRUD, di mana Index untuk menampilkan data awal, Simpan data untuk menambah data user, Update data untuk mengubah data dan Hapus data untuk menghapus data user.
Pada bagian fungsi Simpan dan Update data, terdapat bagian validasi data dimana ketika data tidak sesuai format, maka sistem akan memberikan sebuah pesan pada form (bagian view) kalau data yang diinput tidak sesuai atau data harus diisi, jika data sudah sesuai format maka data tersebut dapat disimpan atau diupdate. ada juga tambahan seperti:tampildata, ajax_list, yang merupakan fungsi yang dipanggil ketika menggunakan ajax.
Membuat view
View akan menampilkan front end dari aplikasi yang kita bangun, dimana view ini akan berinteraksi langsung dengan pengguna atau user, dalam penggunaannya view akan menampilkan data dari controller dan mengembalikan permintaan pengguna ke controller untuk selanjutnya akan diproses menjadi sebuah alur data dalam sistem website yang kita bangun, misal ketika pengguna menyimpan data, maka data yang berasal dari view akan disimpan ke tabel yang terdapat pada database, controller akan mengisi data tersebut sesuai dengan permintaan dengan bantuan model, sehingga data tersebut dapat disimpan pada tabel yang sesuai yang ada di database.
Dengan menambahkan sentuhan Ajax, saat operasi CRUD tidak perlu me-refresh semua halaman web, sehingga akses halaman website terasa lebih ringan.
index.php
php
<?= $this->extend('template/main'); ?>
<?= $this->extend('template/menu'); ?>
<?= $this->section('konten'); ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Halaman User</h1>
</div>
<div class="container">
<button type="button" class="btn btn-primary btn-sm tomboltambah">
<i class="fa fa-plus-circle"></i> Tambah Data
</button>
<div class="mt-3 card-text viewdata">
</div>
<div class="viewmodal" style="display:none;"></div>
<script>
//tampil data
function datauser() {
$.ajax({
url: "<?= site_url('user/tampildata') ?>",
dataType: "json",
success: function(response) {
$('.viewdata').html(response.data);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
}
$(document).ready(function() {
datauser();
});
//tambah data
$('.tomboltambah').click(function(e) {
e.preventDefault();
$.ajax({
url: "<?= site_url('user/tambahdata') ?>",
dataType: "json",
success: function(response) {
$('.viewmodal').html(response.data).show();
$('#modaltambah').modal('show');
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
});
</script>
<?= $this->endsection(''); ?>
datauser.php
php
<div class="table-responsive b-0" data-pattern="priority-columns">
<table id="myTable" class="table table-striped table-bordered table-hover">
<thead class="bg-primary text-white">
<tr>
<td>No</td>
<td>Nama</td>
<td>Email</td>
<td>Aksi</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
//datatable
$(document).ready(function() {
var table = $('#myTable').DataTable({
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
"url": "<?php echo base_url('user/ajax_list') ?>",
"type": "POST"
},
//optional
"lengthMenu": [
[5, 10, 25, 50, 100],
[5, 10, 25, 50, 100]
],
"columnDefs": [{
"targets": [0,3], //kolom yang tidak disort yaitu 0 dan 3
"orderable": false,
}, ],
});
});
//
//edit page
function edit(id_user) {
$.ajax({
type: "post",
url: "<?= site_url('user/editdata') ?>",
data: {
id_user: id_user
},
dataType: "json",
success: function(response) {
if (response.sukses) {
$('.viewmodal').html(response.sukses).show();
$('#modaledit').modal('show');
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
}
//hapus konfirmasi
function hapus(id_user) {
Swal.fire({
title: 'Hapus Data',
text: 'Yakin menghapus user?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#dc3545',
cancelButtonColor: '#6c757d',
confirmButtonText: 'Ya',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: "post",
url: "<?= site_url('user/hapus') ?>",
data: {
id_user: id_user
},
dataType: "json",
success: function(response) {
if (response.sukses) {
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: response.sukses,
})
datauser();
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
}
})
}
</script>
modaltambah.php
html
<!-- Modal -->
<div class="modal fade" id="modaltambah" tabindex="-1" aria-labelledby="modaltambahLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title" id="modaltambahLabel">Tambah User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<?= form_open('user/simpandata', ['class' => 'formuser']); ?>
<?= csrf_field(); ?>
<div class="modal-body">
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nama" name="nama">
<div class="invalid-feedback errorNama">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" name="email">
<div class="invalid-feedback errorEmail">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" name="password">
<div class="invalid-feedback errorPassword">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Role</label>
<div class="col-sm-4">
<select name="id_role" id="id_role" class="form-control">
<option value="">--Pilih--</option>
<?php foreach ($role as $c) : ?>
<option value="<?= $c['id_role'] ?>"><?= $c['role'] ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btnsimpan">Simpan</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
<script>
$(document).ready(function() {
//focus pada input
$('body').on('shown.bs.modal', '#modaltambah', function() {
$('input:visible:enabled:first', this).focus();
})
$('.formuser').submit(function(e) {
e.preventDefault();
$.ajax({
type: "post",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
$('.btnsimpan').attr('disabled', 'disabled');
$('.btnsimpan').html('<i class="fa fa-spin fa-spinner"></i> Proses');
},
complete: function() {
$('.btnsimpan').removeAttr('disabled');
$('.btnsimpan').html('Simpan');
},
success: function(response) {
//klo ada error
if (response.error) {
//error nama
if (response.error.nama) {
$('#nama').addClass('is-invalid');
$('.errorNama').html(response.error.nama);
} else {
$('#nama').removeClass('is-invalid');
$('.errorNama').html('');
}
//error email
if (response.error.email) {
$('#email').addClass('is-invalid');
$('.errorEmail').html(response.error.email);
} else {
$('#email').removeClass('is-invalid');
$('.errorEmail').html('');
}
//error password
if (response.error.password) {
$('#password').addClass('is-invalid');
$('.errorPassword').html(response.error.password);
} else {
$('#password').removeClass('is-invalid');
$('.errorPassword').html('');
}
} //sukses
else {
//pesan sukses bro
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: response.sukses
});
//hide modal tambah data
$('#modaltambah').modal('hide');
//load data menu
datauser();
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
return false;
});
});
</script>
modaledit.php
html
<!-- Modal -->
<div class="modal fade" id="modaledit" tabindex="-1" aria-labelledby="modaleditLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title" id="modaleditLabel">Edit User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<?= form_open('user/updatedata', ['class' => 'formuser']); ?>
<?= csrf_field(); ?>
<div class="modal-body">
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="id_user" name="id_user" value="<?= $user['id_user']; ?>" hidden>
<input type="text" class="form-control" id="nama" name="nama" value="<?= $user['nama']; ?>">
<div class="invalid-feedback errorNama">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" name="email" value="<?= $user['email']; ?>">
<div class="invalid-feedback errorEmail">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" name="password" value="<?= $user['password']; ?>">
<div class="invalid-feedback errorPassword">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Role</label>
<div class="col-sm-4">
<select name="id_role" id="id_role" class="form-control">
<option value="">--Pilih--</option>
<?php foreach ($role as $c) : ?>
<?php if ($c['id_role'] == $user['id_role']) { ?>
<option value="<?= $c['id_role'] ?>" selected><?= $c['role'] ?></option>
<?php } else { ?>
<option value="<?= $c['id_role'] ?>"><?= $c['role'] ?></option>
<?php
}
endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btnsimpan">Update</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.formuser').submit(function(e) {
e.preventDefault();
$.ajax({
type: "post",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
$('.btnsimpan').attr('disabled', 'disabled');
$('.btnsimpan').html('<i class="fa fa-spin fa-spinner"></i> Proses');
},
complete: function() {
$('.btnsimpan').removeAttr('disabled');
$('.btnsimpan').html('Update');
},
success: function(response) {
//klo ada error
if (response.error) {
//error nama
if (response.error.nama) {
$('#nama').addClass('is-invalid');
$('.errorNama').html(response.error.nama);
} else {
$('#Nama').removeClass('is-invalid');
$('.errorNama').html('');
}
//error email
if (response.error.email) {
$('#email').addClass('is-invalid');
$('.errorEmail').html(response.error.email);
} else {
$('#email').removeClass('is-invalid');
$('.errorEmail').html('');
}
//error password
if (response.error.password) {
$('#password').addClass('is-invalid');
$('.errorPassword').html(response.error.password);
} else {
$('#password').removeClass('is-invalid');
$('.errorPassword').html('');
}
} //sukses
else {
//pesan sukses bro
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: response.sukses
});
//hide modal tambah edit
$('#modaledit').modal('hide');
//load data user
datauser();
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
return false;
});
});
</script>
Tambahkan Alur Controller User pada File Routes.php
Pada Controller User terdapat beberapa bagian seperti:index, ajax_list, tambahdata, simpandata, editdata, updatedata dan hapus, maka kita perlu menambahkan bagian-bagian tersebut pada file Routes.php supaya masing-masing operasi pada Controller User dapat dideteksi atau terbaca oleh sistem CodeIgniter 4, seperti pada baris kode berikut:
Routes.php
php
// users
$routes->get('/user', 'User::index');
$routes->get('/user/tampildata','User::tampildata');
$routes->post('/user/ajax_list','User::ajax_list');
$routes->get('/user/tambahdata','User::tambahdata');
$routes->post('/user/simpandata','User::simpandata');
$routes->post('/user/editdata','User::editdata');
$routes->post('/user/updatedata','User::updatedata');
$routes->post('/user/hapus','User::hapus');
Silahkan salin kode tersebut, lalu paste pada bagian bawah di file Config/Routes.php
Menampilkan Hasil Akhir
Buka http://localhost:8080/user, pada web browser, seandainya tidak ada yang error akan menampilkan halaman sebagai berikut:
- Ketika tombol Tambah Data diklik maka akan muncul modal yang berisi form isian data user dan ketika tombol Simpan diklik maka akan muncul sebuah pesan data berhasil disimpan
- Ketika tombol Edit diklik maka akan muncul modal yang berisi form data user dan ketika tombol Update diklik maka akan muncul sebuah pesan data berhasil diupdate
- Pada saat tombol Hapus diklik akan muncul konfirmasi, datanya akan dihapus atau tidak
- Pesan dan konfirmasi tersebut merupakan tampilan dari Sweet Alert.
Apa selanjutnya?
Pada artikel ini belum dijelaskan secara rinci bagaimana menampilkan select option Role (Admin dan Member) pada form, menampilkan Role pada Datatable, pada artikel selanjutnya akan dibahas. Jika ada pertanyaan atau saran silahkan kirim komentar.
Artikel perbaikan pada fitur validasi dapat anda baca pada link ini
Tidak ada komentar untuk "CRUD dan Validasi Data di CodeIgniter 4 #4"
Posting Komentar
Komentarnya dong cuuuy :D