Update Form User # Final
Ini merupakan artikel pamungkas sebelum menuju pembahasan tentang Sistem Login, teman-teman yang membaca dari awal artikel pada blog ini mungkin sudah melewati beberapa tahap hingga sampai pada bagian ini. artikel kali ini masih membahas tentang user dan bahkan ada beberapa bagian yang menurut sebagian pembaca kok muter-muter aja pembahasannya...OK..OK..nanti akan saya jelaskan kenapa bisa seperti itu, karena memang ini adalah dokumentasi tentang membangun sebuah sistem berbasis web menggunakan Framework CodeIgniter 4, saya yakin ketika membangun sebuah aplikasi apapun bahasa pemrogramannya atau framework-nya ada tahapan coba-coba dulu.
Baik teman-teman semua kita langsung ke inti pembahasannya, lagi-lagi kita akan membahas user, karena untuk sistem login ini semua bergantung pada Controller User dan Role, jadi memang awal-awal membangun sistem login faktor ini yang harus kita gali sebanyak mungkin informasi dari client kita. selain kita dapat menentukan arah proyek web nantinya, terus juga berhubungan dengan sistem keamanan yang memang penting untuk diperhatikan.
Awal pembahasan kita akan menghapus data pada tabel user, mengubah tabel user menggunakan phpMyAdmin, model user, controller user dan view user.
Delete Data pada Tabel User
Pada langkah yang pertama ini kita akan menghapus semua data yang berada pada tabel user, datanya dihapus karena kita akan menambahkan kolom baru dan yang paling berpengaruh adalah karena kita akan merubah metode Controller User pada saat menyimpan, jadi data tersebut harus dihapus terlebih dahulu. Untuk menghapus silahkan buka phpMyAdmin lalu pilih database ci4_db, pilih tab SQL dan jalankan perintah truncate table user, lalu tekan tombol Go pada bagian kanan bawah, perhatikan gambar berikut:
Edit Tabel user
Kita akan menambahkan kolom baru dan merubah type data dari kolom id_user yang tadinya integer menjadi varchar, perhatikan gambar berikut:
Silahkan sesuaikan setiap kolom pada tabel user, baik nama kolomnya maupun type datanya, seperti pada gambar berikut ini:
Edit Model User
Jalankan Teks Editor, lalu cari folder Models dan buka file Modeluser.php, lalu ubah pada bagian protected $allowedFields dan bagian function __construct(RequestInterface $request) yang berlatar kuning, perhatikan potongan baris kode berikut:
Modeluser.php
php
....
class Modeluser extends Model
{
protected $table = "user";
protected $primaryKey = "id_user";
protected $column_order = array('', 'nama', 'email','role','aktif', '');
protected $column_search = array('nama', 'email');
protected $order = array('nama' => 'asc');
protected $allowedFields = array('id_user', 'id_role', 'nama','nama_slug', 'email', 'password','foto','aktif','date_created','date_update');
protected $request;
protected $db;
protected $dt;
function __construct(RequestInterface $request)
{
$request = Services::request();
parent::__construct();
$this->db = db_connect();
$this->request = $request;
//bagian yang telah diubah
$this->dt = $this->db->table($this->table)->select('id_user,nama,email,aktif,role')->join('role', 'role.id_role=user.id_role');
}
....
Silahkan tambahkan sesuai dengan perubahan pada tabel user.
Edit Controller User
Ini merupakan pembahasan puncak, karena pada Controller User inilah semua alur data pada operasi CRUD user. ada beberapa bagian yang akan kita ubah pada file Controller User.php, pada bagian fungsi ajax_list(), simpandata() dan updatedata()Edit Fungsi ajax_list()
Pada bagian ini kita akan menambahkan isi dari kolom aktif, yang memberikan informasi apakah user tersebut aktif atau tidak, nantinya ketika user tidak aktif maka user tersebut tidak dapat login ke sistem. Nah, yang jadi pertanyaan adalah apakah tombol hapus user masih perlu digunakan, jawabannya yah tergantung dari kebutuhan sistem, seandainya kalau dihapus data user tersebut dapat menimbulkan hilangnya data atau error pada aplikasi saya sarankan tombol hapus user tidak usah dimunculkan. Silahkan perhatikan potongan baris kode berikut:
Kode fungsi ajax_list()
php
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 edit password
$tombolpassword = "<button type=\"button\" title=\"Edit Password\" class=\"btn btn-warning btn-sm\" onclick=\"edit_password('" . $list->id_user . "')\">
<i class=\"fa fa-lock\"></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[] = $list->role;
if ($list->aktif == 'Y') {
$row[] = '<div class="text-primary">Aktif</div>';
} else {
$row[] = '<div class="text-danger">Tidak</div>';
$row[] = $tomboledit . " ".$tombolpassword." ". $tombolhapus;
$data[] = $row;
}
$output = [
"draw" => $request->getPost('draw'),
"recordsTotal" => $m_data->count_all(),
"recordsFiltered" => $m_data->count_filtered(),
"data" => $data
];
echo json_encode($output);
}
}
Pada bagian yang berlatar kuning jika user aktif "Y", maka akan menampilkan tulisan Aktif dengan warna biru dan sebaliknya jika tidak akan menampilkan tulisan Tidak dengan warna merah.
Edit Fungsi simpandata()
Pada fungsi ini, kita akan menambahkan validasi pada id_role dan selanjutnya ditambahkan kode acak dan dikombinasikan dengan email user untuk membuat id_user, silahkan tambahkan sesuai dengan baris kode yang berlatar kuning.
Kode fungsi simpandata()
php
//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]|valid_email',
'errors' => [
'required' => '{field} tidak boleh kosong',
'is_unique' => '{field} sudah ada di database',
'valid_email'=> '{field} tidak valid',
]
],
'password' => [
'label' => 'Password',
'rules' => 'required|min_length[6]',
'errors' => [
'required' => '{field} tidak boleh kosong',
'min_length' => '{field} minimal 6 digit',
]
],
'id_role' => [
'label' => 'Role',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong',
]
],
]);
if (!$valid) {
$msg = [
'error' => [
'nama' => $validation->getError('nama'),
'email' => $validation->getError('email'),
'password' => $validation->getError('password'),
'id_role' => $validation->getError('id_role')
]
];
} else {
//nama slug
$slug = url_title($this->request->getVar('nama'), '-', true);
// membuat id_user
$token = base64_encode(random_bytes(32));
$id_user = $this->request->getVar('email') . $token;
$simpandata = [
'id_user' => $id_user,
'nama' => $this->request->getVar('nama'),
'nama_slug' => $slug,
'email' => $this->request->getVar('email'),
'password' => password_hash($this->request->getVar('password'), PASSWORD_BCRYPT),
'id_role' => $this->request->getVar('id_role'),
'aktif' => 'Y',
'foto' => "default.png",
'date_created' => time(),
];
//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');
}
}
Edit Fungsi updatedata()
Silahkan copy semua kode atau tambahkan sesuai dengan bagian yang berlatar kuning, saya jelaskan sedikit pada potongan baris kode ketika menyimpan kalau user tidak aktif sistem akan menambahkan $aktif dengan keterangan "T".
Kode fungsi updatedata()
php
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',
]
],
'id_role' => [
'label' => 'Role',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong'
]
],
]);
if (!$valid) {
$msg = [
'error' => [
'nama' => $validation->getError('nama'),
'id_role' => $validation->getError('id_role'),
]
];
} else {
//nama slug
$slug = url_title($this->request->getVar('nama'), '-', true);
// untuk user yang aktif
$aktif = $this->request->getVar('aktif');
// ini yang tidak aktif
if ($aktif != "Y") {
$aktif = "T";
}
$simpandata = [
'nama' => $this->request->getVar('nama'),
'nama_slug' => $slug,
'id_role' => $this->request->getVar('id_role'),
'aktif' => $aktif,
'date_update' => time(),
];
$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');
}
}
Edit View User
Pada view user kita menambahkan beberapa penyesuaian pada file Data User, Modal Tambah dan Modal Edit.
Edit Data User
Perhatikan potongan baris kode berikut:
Potongan kode datauser.php
html
<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>Role</td>
<th>Aktif</th>
<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, 5],//kolo yang tidak disort 0 dan 5
"orderable": false,
}, ],
});
});
....
Pada bagian ini tidak terlalu banyak perubahan hanya menambahkan kolom aktif.
Edit Modal Tambah
Perhatikan potongan baris kode berikut ini:
Potongan kode 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 class="invalid-feedback errorRole">
</div>
</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');
$('.errorNama').html('');
}
//error password
if (response.error.password) {
$('#password').addClass('is-invalid');
$('.errorPassword').html(response.error.password);
} else {
$('#password').removeClass('is-invalid');
$('.errorPassword').html('');
}
//error role
if (response.error.id_role) {
$('#id_role').addClass('is-invalid');
$('.errorRole').html(response.error.id_role);
} else {
$('#id_role').removeClass('is-invalid');
$('.errorRole').html('');
}
} //sukses
.........
Pada kode tersebut, kita hanya menambahkan validasi role, sehingga kalau kolom role belum dipilih, maka sistem akan menampilkan pesan tidak boleh kosong
Edit Modal Edit
Silahkan perhatikan kode berikut:
Kode 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">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" name="email" value="<?= $user['email']; ?>" readonly>
<div class="invalid-feedback errorEmail">
</div>
</div>
</div>
<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">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 class="invalid-feedback errorRole">
</div>
</div>
</div>
<!-- akif dan tidak -->
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Aktif</label>
<div class="col-sm-4">
<div class="custom-control custom-switch mt-2">
<!-- aktif -->
<input type="checkbox" class="custom-control-input" value="Y" name="aktif" id="customSwitch1" <?php if ($user['aktif'] == 'Y') echo "checked"; ?>>
<label class="custom-control-label" for="customSwitch1">Ya</label>
</div>
</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 role
if (response.error.id_role) {
$('#id_role').addClass('is-invalid');
$('.errorRole').html(response.error.id_role);
} else {
$('#id_role').removeClass('is-invalid');
$('.errorRole').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>
Pada bagian ini kita menambahkan kolom isian untuk mengaktifkan dan menonaktifkan user.
Hasil Perubahan
Hasilnya seperti gambar berikut ini:
Tidak ada komentar untuk "Update Form User # Final"
Posting Komentar
Komentarnya dong cuuuy :D