Lokomedia : Trik Mengukur Kekuatan Password Pada PHP

Pada kesempatan kali ini saya ingin berbagi bagaimana cara membuat indikasi kekuatan password yang di inputkan oleh user, hasilnya terlihat seperti gambar di atas, tanpa tunggu lama langsung kita praktikkan yuk

Pertama download dulu jQuery nya dihttp://code.jquery.com/jquery-1.7.js, copy dan simpan dengan namajquery-1.7.js. Kemudian downlod juga library jQuery password streangth meter dihttp://plugins.jquery.com/files/jquery.passroids.js.txt, copy dan simpan dengan nama jquery.passroids.js.

Penerapannya seperti code berikut ini

$(document).ready(function(){
   if ($('#login').size()) {
      $.getScript(
        'jquery.passroids.js',
        function() {
           $('#form1').passroids({
              main : "#pass"
           });
        }
      );
    }
});

 



Password :

Berikut ini adalah penjelasan dari code di atas

Untuk Mempercantik saya juga memberikan Code CSSnya, Copy dan pastekan di bawah dan sebelum

table.gridtable {
  font-family: verdana,arial,sans-serif;
  font-size:11px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  }
  table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
  }
#psr_score {
  background: transparent;
  display: block;
  margin: 0;
  padding: 0;
  width: 200px;
  }

  .psr_Weak,
  .psr_Medium,
  .psr_Strong,
  .psr_Excellent {
  background: transparent url(bg-password-strength.png) no-repeat 0 0;
  display: block;
  margin: 0.5em 0 0.2em 5px;
  padding: 10px 0 0;
  }

  .psr_Medium {
  background-position: 0 -50px;
  }

  .psr_Strong {
  background-position: 0 -100px;
  }

  .psr_Excellent {
  background-position: 0 -150px;
  }

Selamat Mencoba.. : )

Referensi : http://ekosuhartono.blogdetik.com/?p=6576

Posted in: JQuery,PHP