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:
Posting Komentar