Menambah Form Edit Password
Artikel ini merupakan kelanjutan dari artikel tentang Password Hash, jadi bila anda baru membaca artikel ini, saya sarankan untuk membaca artikel lainnya sebelum artikel ini.
Kita sudah berhasil menambahkan Password Hash pada proyek web dan menyimpannya ke database, ternyata setelah berhasil kita simpan dan hendak mengubah data user pada kolom password menjadi panjang banget ya isiannya seperti pada gambar berikut ini:
Berdasarkan gambar tersebut kita perlu merubah metode edit pada Controller User dan view edit, sehingga perlu ditambahkan satu form lagi yaitu form edit password, yang khusus untuk mengedit password.
Daftar Isi
Hal Pertama
Sebelum menambahkan form edit password, kita akan menghapus beberapa bagian pada proyek web, ini merupakan sebagai bentuk penyesuaian supaya proyek yang kita bangun kode sumbernya rapi dan bersih, lalu bagian mana yang akan dihapus?, yang pertama yaitu bagian pada Controller User, fungsi updatedata(), kita akan hapus pada bagian password-nya saja. kedua, bagian view modaledit.php, hapus pada password-nya saja, perhatikan baris kode berikut:
php
//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|valid_email',
'errors' => [
'required' => '{field} tidak boleh kosong',
'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'
]
],
]);
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');
}
}
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>
Silahkan dihapus pada bagian yang berlatar kuning, jika sudah selesai dihapus kita akan lanjut pada pembuatan form edit password, ini adalah hasil setelah dihapus kolom password pada form edit user.
Tambah Form Edit Password
Untuk menambah form edit password, ada beberapa langkah yang harus kita lewati sebelum akhirnya sampai ke tujuan akhir yaitu form itu sendiri, seperti: membuat fungsi edit password, menambah ikon edit password pada halaman index user, menambahkan routes, tambah fungsi edit password pada file data user, lalu terakhir membuat form edit password
Membuat Fungsi Edit Password
Perhatikan kode sumber berikut lalu salin pada Controller User.php.
php
......
//Data bahan edit password
public function editpassword()
{
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);
$msg = [
'sukses' => view('user/modaleditpassword', $data)
];
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
//update password
public function updatepassword()
{
if ($this->request->isAJAX()) {
$validation = \Config\Services::validation();
$valid = $this->validate([
'password' => [
'label' => 'Password',
'rules' => 'required|min_length[6]',
'errors' => [
'required' => '{field} tidak boleh kosong',
'min_length' => '{field} minimal 6 digit',
]
],
'password2' => [
'label' => 'Password',
'rules' => 'required|min_length[6]|matches[password]',
'errors' => [
'required' => '{field} tidak boleh kosong',
'min_length' => '{field} minimal 6 digit',
'matches' => '{field} tidak sama',
]
],
]);
if (!$valid) {
$msg = [
'error' => [
'password' => $validation->getError('password'),
'password2' => $validation->getError('password2'),
]
];
} else {
$simpandata = [
'password' =>password_hash($this->request->getVar('password'),PASSWORD_BCRYPT)
];
$request = Services::request();
$user = new Modeluser($request);
//update data user
$id_user = $this->request->getVar('id_user');
$user->update($id_user, $simpandata);
$msg = [
'sukses' => 'Password telah diupdate'
];
}
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
......
Silahkan tambahkan sebelum fungsi hapus.
Tambah Tombol Edit Password
Masih pada file Controller User.php, tambahkan pada bagian ini - fungsi ajax_list(), perhatikan baris kode berikut:
php
...
$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;
$row[] = $tomboledit . " ".$tombolpassword." ". $tombolhapus;
$data[] = $row;
...
Silahkan tambahkan seperti pada bagian yang berlatar kuning.
Tambah Routes Edit Password
Saatnya kita tambahkan route pada file Routes.php supaya sistem Codeigniter dapat membaca fungsi-fungsi dari Controller User.php, perhatikan baris kode berikut:
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/editpassword','User::editpassword');
$routes->post('/user/updatepassword','User::updatepassword');
$routes->post('/user/hapus','User::hapus');
Tambahkan seperti pada bagian latar yang berwarna kuning.
Tambah Fungsi Edit Passsword pada File datauser.php
Buka file datauser.php pada folder view/user/, lalu tambahkan fungsi Ajax berikut:
javascript
//edit page
function edit_password(id_user) {
$.ajax({
type: "post",
url: "<?= site_url('user/editpassword') ?>",
data: {
id_user: id_user
},
dataType: "json",
success: function(response) {
if (response.sukses) {
$('.viewmodal').html(response.sukses).show();
$('#modaleditpassword').modal('show');
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
}
</script>
Silahkan copy sebelum tag </script>
Membuat Form Edit Password (modaleditpassword.php)
Selanjutnya adalah membuat form modal edit password kita beri nama modaleditpassword.php pada folder view/user/, perhatikan dan salin baris kode berikut:
php-template
<!-- Modal -->
<div class="modal fade" id="modaleditpassword" 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-warning text-white">
<h5 class="modal-title" id="modaleditLabel">Edit Password <?= $user['nama']; ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<?= form_open('user/updatepassword', ['class' => 'formuser']); ?>
<?= csrf_field(); ?>
<div class="modal-body">
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label">Password</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="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">Ulangi Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password2" name="password2">
<div class="invalid-feedback errorPassword2">
</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 password
if (response.error.password) {
$('#password').addClass('is-invalid');
$('.errorPassword').html(response.error.password);
} else {
$('#password').removeClass('is-invalid');
$('.errorPassword').html('');
}
//error password 2
if (response.error.password2) {
$('#password2').addClass('is-invalid');
$('.errorPassword2').html(response.error.password2);
} else {
$('#password2').removeClass('is-invalid');
$('.errorPassword2').html('');
}
} //sukses
else {
//pesan sukses bro
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: response.sukses
});
//hide modal tambah edit
$('#modaleditpassword').modal('hide');
//load data user
datauser();
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
return false;
});
});
</script>
Hasilnya seperti berikut ini:
Tidak ada komentar untuk "Menambah Form Edit Password "
Posting Komentar
Komentarnya dong cuuuy :D