Password
bukanlah merupakan kata yang asing lagi untuk didengar, karena sudah
banyak sekali orang-orang yang menggunakan password untuk menjaga
keamanan datanya. Contohnya jika anda melakukan registrasi untuk membuat
suatu akun, biasanya kita disuruh memasukkan passwordnya, termasuk
jejaring sosial terbesar didunia FACEBOOK. Mungkin selama ini anda asal
memasukkan kata dalam membuat password, padahal dalam pembuatan password
itu sendiri mempunyai tingkat kelemahan dan kekuatan.
Jika password
yang anda buat berlevel lemah, kemungkinan pencurian passsword bagi para
hacker akan sangat mudah. untuk itu dalam pembuatan password
usahakanlah berlevel tinggi. agar para penyusup cyber tidak bisa
mengambil alih akun kita. Untuk itulah disini saya membuat tutorial
aplikasi pengukur kekuatan password, Fungsinya agar kita bisa tau
password yang sudah kita buat apakah benar2 kuat ataukah masih sangat
lemah.
Buatlah program standar untuk menampilkan form username dan form password.
<html> <head> <title>Blog Tutorial - kekuatan Password</title> </head> <body id="k-password"> <center><div style="width: 300px;"> <h3>Mengukur Kekuatan Password</h3> <form> <fieldset> <p>Username : <input type="text" id="username"> </p> <p>Password : <input type="password" id="password"> </p> <input type="submit" value="Login"> <input type="reset" value="Reset"> </fieldset> </form> </body> </html>
jika anda jalankan program tersebut, akan menghasilkan output seperti ini:
setelah itu
anda harus memiliki 2 library jquery terlbih dahulu, yaitu jquer.js dan
pasroid.min.js yang dapat anda download disitus resmi jquery.
jika anda sudah memiliki library tersebut.
tambahkan skrip berikut didalam kode <head> MASUKKAN DISINI </head>
<script type="text/javascript" src="../jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ if ($('#k-password').size()) { $.getScript( '../jquery/jquery.passrword.js', function() { $('form').passroids({ main : "#password" }); } ); } }); </script>
sekarang coba anda jalankan program anda lagi, dan masukkan username + passwordnya,
jika berhasil akan tampil output seperti dibawah ini:
lihatlah kekuatan password anda sudah excellent,
untuk lebih memperjelas level password,
siapkanlah gambar seperti dibawah ini:
dan buatlah program baru bernama main.css
/* HadiKurniawan */
#psr_score {
background: transparent;
display: block;
margin: 0;
padding: 0;
width: 200px;
}
.psr_Weak, .psr_Medium, .psr_Strong, .psr_Excellent {
background: transparent url(../gambar/kekuatanpassword.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;
}
program tersebut berguna untuk memanggil gambar tadi dan menampilkan level password berdasarkan dari gambar tersebut.
sekarng kembali pada program standar yang pertama,
masukkan kode berikut tepat dibawah </title>
<link rel="stylesheet" href="main.css" type="text/css">
kode tersebut berfungsi memanggil program main.css
sekarang coba anda jalankan kembali program anda, dan masukkan username + passwordnya,
jika berhasil akan menghasilkan output seperti dibawah ini:
0 komentar:
Speak up your mind
Tell us what you're thinking... !