Script Ganti Password Menggunakan AJAX dan jQuery

Diposting pada

pada postingan Saya yang ke 11 ini, saya akan berbagi script ganti password menggunakan AJAX dan jQuery yang saya buat seminggu yang lalu. script ini menggunakan AJAX dan jQuery.kita langsung menuju ke langkah pertama dalam membuat script ganti password menggunakan AJAX dan jQuery, yaitu kita buat form ganti passwordnya terlebih dahulu.

[php]

<h3>Ganti Password</h3>

<div class="inputpass">

<form action="<?php $_SERVER[‘PHP_SELF’]; ?>" method="POST" id="formpass">
<label class="label">Berlaku *</label> <input type="password" name="berlaku" id="berlaku" placeHolder="Password lama"><span id="msgberlaku"></span>
<label class="label">Baru *</label> <input type="password" name="baru" id="baru" placeHolder="Password baru"><span class="label"></span>
<label class="label">Konfirmasi ulang yang baru *</label> <input type="password" name="ulang" id="ulang" placeHolder="Ulangi password"><span class="label"></span>
<input type="submit" id="simpan" name="submit" value="Simpan Perubahan"/><input id="batal" type="reset" value="Batal"/>
</form>

</div>

</div>

[/php]

Kemudian step kedua, kita styling formnya biar terlihat keren.

[css].label{color: black;}
     #gantipass{background: url(h600.png); border: 1px solid #ccc; width: 650px; margin-bottom: 30px;}
.inputpass label, .inputpass input{margin-bottom: 20px; width: 150px; float: left;}
#berlaku, #baru, #ulang{padding: 2px; border: 1px solid #ccc;}
.inputpass br{clear: both;}
.inputpass label{width: 250px; text-align: right; padding-right: 12px; margin-left: 12px; font-size: 15px;}
h3{padding-bottom: 10px; padding-left: 250px;}
#simpan{margin-left: 120px; background: #3399CC; padding: 4px; border: 1px solid #ccc; color: white; cursor: pointer;}
#batal{margin-left: 5px; background: #3399CC; padding: 4px; border: 1px solid #ccc; color: white; cursor: pointer;}
.inputpass input.error{background: #FFEBE8;}
.inputpass label.error{width: 190px; display: block; float: left; color: red; padding-left: 20px; background: url(unvalid.gif) no-repeat; text-align: left; margin-top: 5px; margin-left: 2px; font-size: 12px;}
.inputpass label.valid{width: 24px; background: url(valid.gif) center no-repeat; display: inline-block; text-indent: -9999px; margin-top: 5px; margin-left: -18px;}
#berlaku:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
#baru:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
#ulang:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}   
.msgberlaku{margin-left: 3px; margin-top: 2px; color: red;}
.teks{color: red; font-size: 12px; padding-left: 5px;}
.benar{margin-left: 3px; margin-top: 3px;}
.valid {
  width: 24px;
  background: url(valid.gif) center no-repeat;
  display: inline-block;
  text-indent: -9999px;
}
.peringatan{background: #FFEBE8;}[/css]

Kemudian langkah ketiga, kita bikin script AJAX dan jQuerynya untuk validasi dan cek password yang berlaku.

[php]<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<script>
$(document).ready(function()
{
$("#berlaku").change(function()
{
var berlaku = $("#berlaku").val();
$("#berlaku").html("<img src=’loading.gif’>Cek password …");

if(berlaku==”)
{
$("#msgberlaku").html(‘<img src="unvalid.gif" class="msgberlaku"><span class="teks">Password harus diisi</span>’);
$("#berlaku").css(‘background’, ‘#FFEBE8’);
}
else
$.ajax({type: "POST", url: "cekpassword.php", data: "berlaku="+berlaku, success:function(data)
{
if(data==0)
{
$("#msgberlaku").html(‘<img src="unvalid.gif" class="msgberlaku"><span class="teks">Password tidak cocok</span>’);
$("#berlaku").css(‘background’, ‘#FFEBE8’);
}
else
{
$("#msgberlaku").html(‘<img src="valid.gif" class="benar">’);
$("#berlaku").css(‘background’, ‘white’);
}

} });
})

$("#simpan").click(function()
{
var berlaku = $("#berlaku").val();
$("#berlaku").html("<img src=’loading.gif’>Cek password …");

if(berlaku==”)
{
$("#msgberlaku").html(‘<img src="unvalid.gif" class="msgberlaku"><span class="teks">Password harus diisi</span>’);
$("#berlaku").css(‘background’, ‘#FFEBE8’);
}

})

$("#formpass").validate({

rules:{
baru:{required: true, minlength: 5},
ulang:{required: true, equalTo: "#baru"}
},

messages:{
baru:{required: ‘Password harus diisi’, minlength: ‘Password minimal 5 karakter’},
ulang:{required: ‘Tidak boleh kosong’, equalTo: ‘Isi harus sama dengan Password’}
},

success: function(label)
{
label.text(‘OK’).addClass(‘valid’);
}

});
});
</script>[/php]

Pada langkah ke empat script ganti password menggunakan AJAX dan jQuery, karena pada kode AJAX tadi kita arahkan ke cekpassword.php, maka kita sekarang buat file cekpassword.php nya, lalu kita isikan script ini untuk cek password yang berlaku, disini saya menggunakan session login untuk mengambil datanya.

[php]<?php session_start(); require_once("include.php"); if(!isset($_SESSION[‘nis’])) { header(‘location: login.php’); } else { $nis = $_SESSION[‘nis’]; } $inputpwd = $_POST[‘berlaku’]; $sql = mysql_query("select*from login where nis = ‘$nis’ and password = ‘$inputpwd’;"); $cocok = mysql_num_rows($sql); echo $cocok; ?>[/php]

Lalu pada langkah terakhir pembuatan script ganti password menggunakan AJAX dan jQuery, jika semua form telah diisi sesuai aturan yang telah kita buat, maka kita lakukan update passowordnya, berikut scriptnya:

[php]<?php
if(isset($_POST[‘submit’]))
{
$berlaku = $_POST[‘berlaku’];
$ulang = $_POST[‘ulang’];

$cekpassword = mysql_num_rows(mysql_query("select*from login where nis = ‘$nis’ and password = ‘$berlaku’;"));

if(empty($berlaku))
{
echo "

<div class=’peringatan’><b>ERROR:</b>

Password yang berlaku harus diisi!
</div>

";
}
else

if($cekpassword>0)
{
mysql_query("update login set password = ‘$ulang’ where nis = ‘$nis’");
echo "<script type=’text/javascript’>alert(‘Password berhasil diganti’);</script>";
}
else
{
echo "Password tidak terdaftar";
}
}
?>[/php]

Finish.

Untuk demonya, saya belum bisa menyediakan halaman demo secara khusus. sebagai gantinya, Anda bisa lihat gambar di bawah ini untuk sementara waktu.
 

 

 

 

 

 

 

 

 

 

Itulah mungkin script ganti password menggunakan AJAX dan jQuery yang berhasil saya buat

7 thoughts on “Script Ganti Password Menggunakan AJAX dan jQuery

  1. mas punya saya gk bisa terhubung ke data base nya pas di klik ganti pasword langsung pindah ke halaman yang ada tulisannya acces forbiden. itu kenapa ya mas, mohon solusinya thanks

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *