Berikut saya contohkan edit password di CodeIgniter, menggunakan fancybox dan sedikit javascript.
Link
<a href="<?php echo base_url('login/ganti_password'); ?>" class="fancyframe fancybox.ajax"><i class="fa fa-gears"></i> Ganti Password</a>
Controllers Login
<?php
function ganti_password() {
$this->load->view('login/form_ganti_password');
}
function simpan_password() {
$username = $this->session->userdata['username'];
$data['keyEnc'] = $this->config_model->getKey('key');
$keyEncnya = $data['keyEnc'][0]->value;
$pass_baru_enc = crypt($this->input->post('password_baru'), $keyEncnya);
$data['update_user'] = array(
"password" => $pass_baru_enc
);
$update = $this->login_model->update('user', $data['update_user'], array('name' => $username));
if ($update) {
echo 'berhasil update';
$this->session->set_flashdata('message_success', $success);
} else {
$this->session->set_flashdata('message_failed', $failed);
echo 'gagal update';
}
}
?>
Models
Views
<div class="panel panel-default" style="min-width: 600px;">
<div class="panel-heading">
<h3 class="panel-title"><b>FORM GANTI PASSWORD</b></h3>
</div>
<div class="panel-body">
<div class="row">
<form method="POST" action="<?php echo base_url('login/simpan_password'); ?>">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Password Lama</label>
<div class="col-md-8">
<img src="<?php echo base_url('assets/images'); ?>/loading.gif" id="loading" style="display:none" />
<input type="password" id="password_lama" name="password_lama" class="form-control" value="" placeholder="Masukkan password lama" />
<label class="alert-error" id="message_password_lama" style="display:none" required="">Password lama salah</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Password Baru</label>
<div class="col-md-8">
<input type="text" required="" name="password_baru" class="form-control" id="password_baru" placeholder="Masukkan password baru">
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Password Konfirmasi</label>
<div class="col-md-8">
<input type="text" required="" name="password_lagi" class="form-control" id="password_lagi" placeholder="Masukkan lagi password baru">
<label class="alert-error" id="message_password_lagi" style="display:none" required=""></label>
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group" style="margin-top: 20px; text-align: center;">
<div class="col-md-12 pull-right">
<button class="btn btn-success" id="add" type="submit" disabled="">Simpan</button>
<button class="btn btn-danger" type="button" onclick="$.fancybox.close()">Batal</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// make loader hidden in start
$('#loading').hide();
$('#password_lama').on('blur', function () {
var password_lama_val = $("#password_lama").val();
// show loader
$('#loading').show().delay(300).fadeOut();
$.post("<?php echo base_url('login/password_lama_check') ?>", {
password_lama: password_lama_val
}, function (data) {
if (data.message == false) {
$('#message_password_lama').fadeIn(200).delay(2000).fadeOut(200);
$('#add').prop('disabled', true);
} else {
$('#message_password_lama').hide();
}
}, 'json');
return false;
});
$('#password_lagi').on('keyup', function () {
var pass_baru = document.getElementById("password_baru").value;
if ($('#password_baru').val() != $(this).val()) {//password baru != lama
$('#add').val('Lengkapi Data').removeClass('btn-primary').addClass('btn-warning');
$('#add').prop('disabled', true);
$('#message_password_lagi').html("Password tidak sama!").fadeIn(200).delay(2000);
} else {
$('#add').val('Lengkapi Data').removeClass('btn-warning').addClass('btn-primary');
$('#add').prop('disabled', false);
}
});
//submit
$("form").submit(function (event) {
$("#add").text("menyimpan..");
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: 'POST',
data: $(this).serialize(),
success: function () {
setTimeout(function () {
$.fancybox.close();
setTimeout(function () {
window.location.reload();
}, 500);
}, 500);
}
});
});
});
</script>
Note: Kekurangannya lengkapi sesuai kebutuhan, budayakan tidak copy paste sepenuhnya.
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon