Script Ganti Password Menggunakan AJAX dan jQuery | KafeinKode

Kursus bahasa arab berkualitas

Script Ganti Password Menggunakan AJAX dan jQuery

Anonim 7 Comments



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.






<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>





Kemudian step kedua, kita styling formnya biar terlihat keren.

Script-Ganti-Password-Menggunakan-AJAX-dan-jQuery
.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;}

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

<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>

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 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; ?>

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
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";
    }
}
?>

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

Kursus bahasa arab berkualitas

[shareaholic app="recommendations" id="20730868]

7 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. intanaulia700@yahoo.com'

    file jquery-1.4.js dan jquery.validate.js nya bisa didapat dimana ?

    Reply
  2. adenamukty@yahoo.com'

    Bingung nih.. minta file yang udh jadi donk… thx

    Reply
  3. ariyantojaya456@gmail.com'

    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

    Reply