Cara Buat Password Strength Meter / Pengukur Kekuatan Password dengan PHP

password-strength-metter
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..
thumbnail Dipost oleh : Wisnu Priambodo
Judul : Cara Buat Password Strength Meter / Pengukur Kekuatan Password dengan PHP
Terbit :2014-02-15T11:41:00+07:00


Anda sedang membaca artikel Cara Buat Password Strength Meter / Pengukur Kekuatan Password dengan PHP. Jika ingin mengutip, harap memberikan link aktif dofollow ke URL http://wischain.blogspot.com/2014/02/cara-buat-password-strength-meter.html. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih sudah singgah di blog ini.

4.5 401 Cara Buat Password Strength Meter / Pengukur Kekuatan Password dengan PHP

3 komentar

Anonim Admin delete 3 November 2014 22.48

:iloveindonesia

Anonim Admin delete 4 November 2014 12.22

:cendol

Anonim Admin delete 7 November 2014 09.17
Komentar ini telah dihapus oleh administrator blog.

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Mati, Promo, dll.
boleh dikasih emoticon biar kelihatan unyu-unyu
Emoticon Kode Konversi

Terjemahkan



Mengenai Saya

Foto Saya

The great pleasure in life is doing what people say you cannot do.

Kategori

Back-to-top