یادداشت کن لذت ببر

تعویض کد امنیتی captcha با ajax و mysql

در آموزش قبلی از بخش آموزش های کاربردی mysql با شیوه ساخت فرم تماس و ارسال نظرات به همراه کد امنیتی آشنا شدیم، همان طور که دیدیم برای ایجاد این گونه قابلیت ها باید از php ، html و mysql در یک ارتباط منطقی استفاده کنیم و در یک ساختار نسبتا ساده اطلاعات را از فرم html به کد php ارسال کرده و بعد از پردازش در جداول و ستون های mysql ذخیره کنیم، حال می خواهیم یک امکان دیگر نیز به برنامه خود اضافه کنیم، این امکان، قابلیت تعویض کد امنیتی (کد captcha) است که برای ایجاد آن باید از جاوا اسکریپت و آژاکس (ajax) نیز در کنار سایر کدهای خود بهره ببریم.

تابع آژاکس برای تعویض کد امنیتی

<script type="text/javascript">
//<![CDATA[
function Ajaxrequest(){
    var xmlHttp;
    try{
        //Firefox, Opera 8.0+, Safari    
        xmlHttp=new XMLHttpRequest();
        return xmlHttp;
    }
    catch (e){
        try{
            //Internet Explorer    
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            return xmlHttp;
    }
    catch (e){
        try{
            //ActiveX
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            return xmlHttp;
            }
            catch (e){
                alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
                return false;
            }
        }
    }
}
var codediv = 'code-box';
var loadingdiv = 'loading';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> لطفا کمی صبر کنید...';
var empty = '';
var url = 'captcha.php';
function changecode(){
    var xmlHttp = Ajaxrequest();
    xmlHttp.onreadystatechange =  function(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            document.getElementById(loadingdiv).innerHTML=loadingmessage;
            }
            if (xmlHttp.readyState == 4) {
                document.getElementById(codediv).innerHTML=xmlHttp.responseText;
                document.getElementById(loadingdiv).innerHTML=empty;
                }
                }
                xmlHttp.open("GET", url, true);
                xmlHttp.send();
}
//]]>
</script>

توضیح:
- کد بالا دو تابع اصلی دارد، تابع changecode که درون خود از تابع دیگری به نام Ajaxrequest استفاده می کند، با فراخوانی تابع changecode (که در ادامه خواهیم دید)، تابع Ajaxrequest درخواست را به فایل captcha.php و با متد GET ارسال می کند، سپس پاسخ سرور که در واقع همان کد امنیتی است، توسط تابع changecode پردازش شده و نتیجه در بلاک با id فرضی code-box نشان داده می شود.
- همان طور که در آموزش های مقدماتی آژاکس (ajax) گفته ایم، پس از ارسال یک درخواست آژاکسی، وضعیت درخواست با readyState قابل دریافت است و این وضعیت با اعدادی از صفر تا 4 دریافت می شود، عدد 4 حالت کامل و در واقع نشانه پایان عملیات است، لذا در این بین (بین حالت صفر تا 4) می توان یک تصویر به عنوان در حال پردازش یا loading نمایش داد، این کار در کد بالا با دستورات شرطی if و خاصیت document.getElementById انجام شده است.
- با ترکیب متد document.getElementById و دستور innerHTML می توان مقادیری به بلاک های html نسب داد، به طور مثال یک تصویر و پیام را در آنها به نمایش درآورد.
- قسمت مربوط به responseText در واقع پاسخ سرور را در خود دارد، وقتی حالت آماده یا همان readyState برابر 4 می شود، پاسخ سرور در بلاک فرضی codediv به نمایش در می آید.
نکته 1: در کد بالا از یک تصویر کوچک با فرمت gif جهت نمایش حالت در حال پردازش (loading) استفاده شده است، برای اینکه این تصویر به درستی نمایش داده شود، باید آن را در کنار سایر فایل ها قرار دهید یا اینکه در قسمت img src در متغیر loadingmessage، آدرس دقیق تصویر را تنظیم کنید.
نکته 2: کد بالا را باید بین تگ های head قرار دهید یا اینکه به صورت یک فایل خارجی در صفحه به اصطلاح ایمپورت نمائید.

پس از اضافه کردن موتور آژاکسی به صفحه خود، لازم است که توابع مبتنی بر جاوا اسکریپت را با رویداد onclick (یا سایر رویدادها در جاوا اسکریپت) فراخوانی کنیم، از طرفی برای مدیریت صحیح نمایش پیام در حال پردازش (loading) نیاز به بلاک div یا span با آی دی مشخص داریم، لذا فرم html را که در آموزش قبلی ساخته ایم، به صورت زیر ویرایش می کنیم.

<form action="contact.php" method="post">
<label for="name">نام:</label>
<input name="name" id="name" type="text" maxlength="255" /><br />
<label for="mail">ایمیل:</label>
<input name="mail" id="mail" type="text" maxlength="255" dir="ltr" /><br />
<label for="message">یادداشت:</label>
<textarea name="message" id="message" cols="35" rows="8">
</textarea><br />
<label for="code">کد امنیتی:</label>
<input name="code" id="code" type="text" class="code" />
<div class="code-box" id="code-box"><?php echo $code_1.' + '.$code_2 ?></div>&nbsp;<a href="#" onclick="changecode();">تعویض کد</a><span id="loading"></span><br />
<input type="hidden" name="check" value="1" />
<input type="submit" value="ارسال" />
</form>

ملاحظه می کنید که علاوه بر آی دی code-box، قسمت زیر نیز به فرم افزوده شده است.

<a href="#" onclick="changecode();">تعویض کد</a><span id="loading"></span>

پس از ارسال درخواست آژاکسی، در سرور و در واقع در فایل captcha.php (که آدرس آن را پیش تر در متغیر url تنظیم کرده ایم)، با بررسی ip کاربر، ضمن اینکه کد امنیتی را در دیتابیس به روز رسانی می کنیم، یک نسخه از پاسخ سرور را به عنوان responseText به درخواست آژاکسی تحویل می دهیم (با خروجی گرفتن توسط دستور echo در php)، سپس تابع changecode، پاسخ را تجزیه تحلیل کرده و در بلاک span با آی دی code-box نمایش می دهد (این کار با استفاده از متد document.getElementById و دستور innerHTML صورت می گیرد).

<?php
//اطلاعات اتصال به دیتابیس
$con = mysql_connect("localhost","root","")
or die(mysql_error());
//نام پایگاه داده
mysql_select_db("contact")
or die(mysql_error());
//ساخت کد امنیتی
$code_1 = rand(1,9);
$code_2 = rand(1,9);
$code = $code_1 + $code_2;
//دریافت آی پی کاربر
$ip = $_SERVER['REMOTE_ADDR'];
//بررسی وضعیت کاربر در سرور
$result = mysql_query("SELECT * FROM form WHERE userip = '$ip' AND status = 'temp' LIMIT 1")
or die(mysql_error());
$user_exist = mysql_num_rows($result);
if ($user_exist > 0){
    //به روز رسانی کد برای آی پی کاربر در دیتابیس
    mysql_query("UPDATE form SET code='$code' WHERE userip = '$ip' AND status = 'temp'" )
    or die(mysql_error());    
}
else{
    //ذخیره کد و آی پی کاربر در دیتابیس
    mysql_query("INSERT INTO form (code,userip,status) VALUES ('$code','$ip','temp')")
    or die(mysql_error());
}
//خروجی
echo $code_1.' + '.$code_2;
?>

نکته: روشی که در بالا برای تعویض کد امنیتی توضیح داده ایم تنها یک نمونه و جهت مثال بود، شما می توانید با الگو قرار دادن این روش و با کمی تجربه، ایده های ذهنی خود را پیاده کنید و از این نظر هیچ محدودیتی نیست.