Home > AJAX, PHP > Cek Kekuatan dan Validasi Password dengan PHP dan AJAX

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

<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

<?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 :

download script

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.

About these ads
Categories: AJAX, PHP
  1. Young Cool
    31 May 2012 at 06:24 | #1

    thank you om.

  2. 16 September 2011 at 21:52 | #2

    vir0e5 :
    izin pelajari om buat di kembangkan!! ^^

    wah kayaknya tidak support di IE om…

  3. 16 September 2011 at 21:44 | #4

    izin pelajari om buat di kembangkan!! ^^

  4. 24 November 2010 at 17:55 | #5

    Saya dowmload scriptnya gih mas…
    mau saya pelajari.. hee…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: