Wis Chain

yap ini artikel pertama gue di tahun 2014.. sudah lama sekali gue ga posting artikel, ya ini emang gue lagi sibuk bikin skripsi, *OK jangan salahkan skripsi*, BTW udah lama gw ga posting terlebih posting artikel tentang hal yang bertema website. nah! kali ini gue bakal sharing gimana cara membuat Password Strength Meter / Pengukur Kekuatan Password,
nah! sebenere apa sih Password Strength Meter itu??

Kalian pasti pernah kan daftar email di yahoo atau gmail, atau mungkin buat akun di jejaring sosial disitu kan ada indikator untuk mengukur kekuatan password.. contoh ada disini nah pernah lihat kan??
Ok kita langsung kepokok cara buatnya..

Pertama Copy paste code css dibawah ke halaman css kamu.

<style>
  body
  {
  margin:0px;
  padding:0px;
  font-size:10px;
  font-family:Arial,Helvetica,sans-serif;
  }
  a:hover
  {
  color:#fff;
  }
#registrasi_user
  {
  padding: 5px;
  margin:auto auto;
  margin-top:100px;
  width:400px;
  box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 3px;
  border-radius: 5px;
  }

#registrasi_user label
  {
  display: block;  /* block float the labels to left column, set a width */
  float: left; 
  width: 70px;
  margin: 0px 10px 0px 5px; 
  text-align: right; 
  line-height:1em;
  font-weight:bold;
  }
#registrasi_user input
  {
  width:250px;
  }
#registrasi_user p
  {
  clear:both;
  }
#submit
  {
  border:1px solid #cccccc;
  width:100px !important;
  margin:10px;
  }
h1
  {
  text-align:center;
  }
#passwordmetter
  {
  height:10px;
  display:block;
  float:left;
  }
.metter0
  { padding: 6px 5px;
  width:250px;
  background:#cccccc;
  border-radius: 5px;
  }
.metter1
  { padding: 6px 5px;
  width:50px;
  background: rgb(255,48,25);
  border-radius: 5px;
  background: -moz-linear-gradient(left, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1)));
  background: -webkit-linear-gradient(left, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
  background: -o-linear-gradient(left, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
  background: -ms-linear-gradient(left, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
  background: linear-gradient(to right, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 );
  }
.metter2
  { padding: 6px 5px;
  width:100px; 
  background: rgb(255,95,95);
  border-radius: 5px;
  background: -moz-linear-gradient(left,  rgba(255,95,95,1) 0%, rgba(255,61,61,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,95,95,1)), color-stop(100%,rgba(255,61,61,1)));
  background: -webkit-linear-gradient(left,  rgba(255,95,95,1) 0%,rgba(255,61,61,1) 100%);
  background: -o-linear-gradient(left,  rgba(255,95,95,1) 0%,rgba(255,61,61,1) 100%);
  background: -ms-linear-gradient(left,  rgba(255,95,95,1) 0%,rgba(255,61,61,1) 100%);
  background: linear-gradient(to right,  rgba(255,95,95,1) 0%,rgba(255,61,61,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5f5f', endColorstr='#ff3d3d',GradientType=1 );
}
.metter3
  { padding: 6px 5px;
  width:150px;
  background: rgb(158,226,115);
  border-radius: 5px;
  background: -moz-linear-gradient(left,  rgba(158,226,115,1) 0%, rgba(86,229,0,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(158,226,115,1)), color-stop(100%,rgba(86,229,0,1)));
  background: -webkit-linear-gradient(left,  rgba(158,226,115,1) 0%,rgba(86,229,0,1) 100%);
  background: -o-linear-gradient(left,  rgba(158,226,115,1) 0%,rgba(86,229,0,1) 100%);
  background: -ms-linear-gradient(left,  rgba(158,226,115,1) 0%,rgba(86,229,0,1) 100%);
  background: linear-gradient(to right,  rgba(158,226,115,1) 0%,rgba(86,229,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ee273', endColorstr='#56e500',GradientType=1 );
}
.metter4
  { padding: 6px 5px;
  width:200px;
  background: rgb(77,205,0);
  border-radius: 5px;
  background: -moz-linear-gradient(left,  rgba(77,205,0,1) 0%, rgba(49,165,0,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(77,205,0,1)), color-stop(100%,rgba(49,165,0,1)));
  background: -webkit-linear-gradient(left,  rgba(77,205,0,1) 0%,rgba(49,165,0,1) 100%);
  background: -o-linear-gradient(left,  rgba(77,205,0,1) 0%,rgba(49,165,0,1) 100%);
  background: -ms-linear-gradient(left,  rgba(77,205,0,1) 0%,rgba(49,165,0,1) 100%);
  background: linear-gradient(to right,  rgba(77,205,0,1) 0%,rgba(49,165,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dcd00', endColorstr='#31a500',GradientType=1 );
}
.metter5
  { padding: 6px 5px;
  width:250px;
  background: rgb(77,205,0);
  border-radius: 5px;
  background: -moz-linear-gradient(left,  rgba(77,205,0,1) 0%, rgba(39,132,0,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(77,205,0,1)), color-stop(100%,rgba(39,132,0,1)));
  background: -webkit-linear-gradient(left,  rgba(77,205,0,1) 0%,rgba(39,132,0,1) 100%);
  background: -o-linear-gradient(left,  rgba(77,205,0,1) 0%,rgba(39,132,0,1) 100%);
  background: -ms-linear-gradient(left,  rgba(77,205,0,1) 0%,rgba(39,132,0,1) 100%);
  background: linear-gradient(to right,  rgba(77,205,0,1) 0%,rgba(39,132,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dcd00', endColorstr='#278400',GradientType=1 );
}

</style>

Copy paste code js dibawah ke halaman web kamu, ingat code js biasa'nya ada diatas tah </head>.

<script>
  function passwordmetter(password)
  {
  var desc = new Array();
  desc[0] = "Very Weak";
  desc[1] = "Weak";
  desc[2] = "Better";
  desc[3] = "Medium";
  desc[4] = "Strong";
  desc[5] = "Strongest";
 var score   = 0;

  if (password.length > 6) score++;

  if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;

  if (password.match(/\d+/)) score++;

  if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;

  if (password.length > 12) score++;
 document.getElementById("passwordDeskripsi").innerHTML = desc[score];
  document.getElementById("passwordmetter").className = "metter" + score;
  }
  </script>

selanjutnya, buat sebuah form input fields dengan id & class sebagai berikut:

id="passwordDescription"
id="passwordStrength" 
class="strength0"

kurang lebih jadinya kek dibawah

<p> 
<label for="pass">Password</label><input type="password" name="pass" id="pass" onkeyup="passwordmetter(this.value)"/>

</p><p>
  <label for="passwordmetter">Password metter</label>
  <div id="passwordmetter" class="metter0"><div id="passwordDeskripsi">Password not entered</div></div>
  </p>

untuk lihat demo dengan menggunakan php bisa lihat pada tombol demo. atau juga bisa mendownload dan mengeditnya.
Demo Download

OK.. sekian postingan gue, semoga bermanfaat..