دوشنبه ۰۷ خرداد ۱۴۰۳

Monday, May 27, 2024 GMT +3:30

تعویض کد امنیتی Captcha با Ajax و MySQL

mysql-ajax-captcha-refresh

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

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


برای تعویض کد امنیتی یا captcha، قبل از هر چیز نیاز به یک موتور آژاکسی است تا درخواست کاربر را بدون رفرش شدن صفحه و در پس زمینه به سرور ارسال کرده و پاسخ آن را در یک بلاک div یا span نشان دهد، اما قبل از این کار باید یادآور شویم که آموزش حاضر مبتنی بر مطلب قبلی است که در بخش آموزش های کاربردی mysql با عنوان آموزش ساخت فرم تماس با php و mysql مطرح کرده ایم، لذا قبل از بررسی آن باید مطلب قبلی را مطالعه کرده باشید.
برای ایجاد موتور آژاکسی از توابع زیر استفاده می کنیم.
<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.onreadystatechangefunction(){
        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


پس از ارسال درخواست آژاکسی، در سرور و در واقع در فایل 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;
?>
نکته: روشی که در بالا برای تعویض کد امنیتی توضیح داده ایم تنها یک نمونه و جهت مثال بود، شما می توانید با الگو قرار دادن این روش و با کمی تجربه، ایده های ذهنی خود را پیاده کنید و از این نظر هیچ محدودیتی نیست.
دسته بندی: آموزش کاربردی » MySQL
related مطالب بیشتر:
ساخت فید آر اس اس (RSS Feed) با استفاده از PHP و MySQL
ایجاد لینک دانلود مدت دار با PHP و MySQL
نحوه رسم چارت و نمودار آماری با PHP و MySQL
هوشمند سازی پنل ورود و خروج سایت با PHP و MySQL
آموزش ساخت پنل ورود و خروج سایت با PHP و MySQL
دیدگاه
more ۲۰ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
۲۰:۲۰ ۱۳۹۳/۰۵/۰۴
لطفا اگه واستون زحمت نمیشه کد کپچای که تو این بخش یعنی بخش نظرات گذاشتید لطفا کدش رو هم میزارین
آموزش در همین خصوص است!
پرویز
۱۹:۱۱ ۱۳۹۳/۰۸/۱۹
سلام دستور
$user_exist = mysql_num_rows($result);
چه کاری انجام می دهد.
سلام
تابع mysql_num_rows برای بدست آوردن تعداد نتایج یک پرس و جوی MySQL است، لذا این خط کد تعداد ردیف های انتخاب شده ناشی از پرس و جوی مربوط به متغیر result را به متغیر user_exist نسبت می دهد.
da6 3ami
۱۹:۲۴ ۱۳۹۳/۱۰/۰۵
سلام چه طور میتونم یه کد کپچا ضرب بنویسم مثل همین کد کپچای که توی قسمت نظر دهی هست؟
با تشکر
سلام
در آموزش حاضر ایجاد این سیستم به صورت جمع توضیح داده شده، کافی است مشابه همین روند را به صورت ضرب ایجاد کنید!
علی
۱۵:۰۴ ۱۳۹۴/۱۲/۱۵
سلام من کدهای آموزشی شمار رو عینا استفاده کردم اما با اجراش از حالت loading خارج نمی شه.
در صورتی که همه چیز درست انجام شده باشد، دلیلی برای عمل نکردن صحیح کدها وجود ندارد، لطفا جهت بررسی فایل های خود را در قالب فرمت zip به آدرس ایمیل ما (موجود در بخش تماس) ارسال نمائید.
مهدی
۲۳:۱۱ ۱۴۰۱/۱۲/۱۲
من یک سایت سر و کار دارم در هر 24 ساعت فقط یک بار برای 5 دقیقه باز میشود اما وقتیکه تمام مراحل را تمام میکنم کد امنیتی چهار رقم هست را برایم بالا نمی‌اورد خیلی کم مثلن در هفته 6 روزش را موفق نمیشوم اما یکی شاید بتوانم موفق شوم تا کد امنیتی را بگیرم و مرحله به پایان برسد اگر برای بالا اورد کد امنیتی با کمک کنید ممنون میشم یعنی چگونه می‌توانم این کد عاجل برایم بالا بیاورد سپاس.
در صورتی که ایراد از سایت مورد نظر باشد متاسفانه امکان کمک خاصی میسر نیست، اما برای اطمینان از اینکه اشکال از سمت سیستم شما نیست در مرورگرهای مختلف تست کنید و با و بدون استفاده از برنامه های تغییر IP به سایت مورد نظر متصل شوید.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
6 × 5
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پرتو
سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...
۱۴۰۳/۰۳/۰۱

سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲

سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱

سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹

سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹

پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸

پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶

vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵

vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲

هادی عبداله زاده
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...
۱۴۰۳/۰۱/۲۲

هادی عبداله زاده
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟
۱۴۰۳/۰۱/۲۲

هادی عبداله زاده
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...
۱۴۰۳/۰۱/۲۰

پـــرتو
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...
۱۴۰۳/۰۱/۱۹

حسین بلاگ
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...
۱۴۰۳/۰۱/۱۹

شریفی
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...
۱۴۰۳/۰۱/۱۵

فرهادی
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...
۱۴۰۳/۰۱/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.