Cek Kekuatan dan Validasi Password dengan PHP dan AJAX
Anda tentu pernah membuat email, baik di yahoomail ato gmail kan? Anda tentu mengetahui bahwa pada saat Anda diminta memasukkan password, maka akan ada pemberitahuan apakah kekuatan password Anda kuat, sedang, atau lemah kan? Password yang kuat dapat dikatakan password yang memiliki kombinasi antara huruf atau angka, dan simbol.
Selain itu, dengan menggunakan PHP, dan AJAX, maka kita dapat membuat form untuk mencocokkan apakah password yang telah diisi telah sesuai dengan konfirmasi password tanpa harus user menginput keseluruhan form terlebih dahulu, dan menekan tombol Submit, kemudian memberi peringatan.
Pada artikel ini, saya akan mencoba membuat form tersebut dengan menggunakan PHP dan AJAX. Pada dasarnya, prinsip kerjanya hampir sama dengan artikel saya yang sebelumnya yaitu Validasi Email dengan PHP dan AJAX.
Pertama, kita membuat form untuk memasukkan password, dan konfirmasi password dengan nama inputpass.html
<head>
<title>Cek Kekuatan Password dengan PHP-AJAX by Erick Lisangan</title>
</head>
<script language=’JavaScript’>
var ajaxRequest;
function getAjax() //mengecek apakah web browser support AJAX atau tidak
{
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
// Something went wrong
alert(“Your browser broke!”);
return false;
}
}
}
}
function validasi (keyEvent,pilihan) //fungsi untuk mengambil nilai setiap huruf yang dimasukkan
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target: keyEvent.srcElement;
if (input.value) //jika input dimasukkan, masuk ke fungsi cekEmail
{
if (pilihan == 1)
{
cekPass(“cekpass.php?password=1&input=” + input.value,1); //mengirim inputan ke file cekpass.php
}
else if (pilihan == 2)
{
pass = document.getElementById(“pass”).value; //mengambil nilai dari form password yang telah dicek
cekPass(“cekpass.php?password=2&pass=” + pass + “&input=” + input.value,2); //mengirim inputan konfirmasi password
}
}
}
function cekPass(fileCek,keterangan) //fungsi untuk menampilkan hasil pengecekan
{
getAjax();
ajaxRequest.open(“GET”,fileCek);
ajaxRequest.onreadystatechange = function()
{
if (keterangan == 1)
{
document.getElementById(“hasil”).innerHTML = ajaxRequest.responseText; //hasil cek kekuatan password
}
else if (keterangan == 2)
{
document.getElementById(“cocok”).innerHTML = ajaxRequest.responseText; //hasil cek konfirmasi password
}
}
ajaxRequest.send(null);
}
</script>
</head>
<body>
<table>
<tr>
<!– Form untuk mengisi password –>
<td>Masukkan password Anda : <input type=’password’ onkeyup=”validasi(event,1)” id=’pass’></td>
<!– Menampilkan hasil validasi password –>
<td><div id=’hasil’></div></td>
</tr>
<tr>
<!– Form untuk mengisi konfirmasi password –>
<td>Masukkan kembali password Anda : <input type=’password’ onkeyup=”validasi(event,2)”></td>
<!– Menampilkan hasil validasi konfirmasi password –>
<td><div id=’cocok’></div></td>
</tr>
</table>
</body>
</html>
Setelah itu, kita membuat file untuk pengecekan, yaitu cekpass.php
$input = $_GET['input']; //menangkap password yang diinput oleh user
$cek = $_GET['password']; //menangkap nilai apakah untuk input password atau konfirmasi
$pass = $_GET['pass']; //menangkap nilai dari form password yang diisi
if ( $cek == 1 ) //untuk melakukan pengecekan kekuatan password
{
if (ereg(“^[[:punct:]]+[[:alnum:]]”,$input) || ereg(“^[[:alnum:]]+[[:punct:]]”,$input) )
{
echo “Kuat”;
}
else if (ereg(“^[[:alnum:]]”,$input))
{
echo “Sedang”;
}
else
{
echo “Lemah”;
}
}
else if ( $cek == 2 ) //untuk melakukan pengecekan konfirmasi password
{
if ($pass == $input) echo “Cocok”;
else echo “Tidak Cocok”;
}
?>
Apabila Anda menjalankan program tersebut, maka akan muncul tampilan seperti di bawah ini :
Apabila Anda memasukkan password dengan kombinasi huruf, atau angka, dan simbol, maka akan diberi keterangan “Kuat”, yang berarti password yang Anda masukkan kuat, sehingga aman dari segi keamanan.
Setelah Anda memasukkan password, maka Anda akan diminta untuk memasukkan konfirmasi password. Apabila Anda memasukkan konfirmasi password, dan konfirmasi yang Anda masukkan sama dengan password yang Anda masukkan sebelumnya, maka akan ditampilkan tulisan Cocok, seperti di bawah ini :
Bagaimana?? Dengan menggunakan PHP dan AJAX, maka kita dapat membuat form yang tidak merepotkan user, dan membantu user dalam memperlihatkan kuat atau lemah password yang dimasukkan. Selain itu, validasi password dapat dilakukan dengan cepat.
Semoga artikel ini bermanfaat bagi Anda. Terima kasih. Gbu.
wah kayaknya tidak support di IE om…
Thanx infonya….Maaf baru membalas…Gbu
izin pelajari om buat di kembangkan!! ^^
Saya dowmload scriptnya gih mas…
mau saya pelajari.. hee…
hehehe…thanx…semoga berguna…Gbu…