CAPTCHA is a simple test to determine if a user is a computer or a human. It is used to prevent spam abuse on the websites. So if you use CAPTCHA on your web site forms, this can help in stopping some bots and making life harder for other bots in accessing or using your forms.
In brief the CAPTCHA protection works by generating a random string, writing it to an image, then storing the string inside of a session or by some other method. This is then checked when the form is submitted.
The goal of this tutorial is to demonstrate how to make your own simple CAPTCHA protection using PHP and AJAX technologies.
This tutorial is very simple, but if you are unfamiliar with PHP and AJAX this is a great place to start. The tutorial consists of a HTML page for presenting a simple form that will send the data, a JavaScript file for handling the Ajax functionality, and a simple PHP page that makes the actual comparison of the what is in the text box compared to what phrase was stored in the image.
- The AJAX HTML Page (the Front-end)
- The JavaScript
- The PHP Server Page (the Backend)
- The Ways to Make It More Secure
The AJAX HTML Page (the Front-end)
The front-end of this tutorial is straight forward. We are going to create a simple HTML form with a textbox for entering the security code, dynamically generated image holding this code, a button for submitting, and a DIV that we will display the CAPTCHA test result. The following example shows how you can do that. Create a new file named captcha_test.htm, and add this code to it.
<form id="frmCaptcha" name="frmCaptcha">
<table>
<tr>
<td align="left">
<label for="captcha">Captcha</label>
</td>
<td>
<input id="txtCaptcha" type="text" name="txtCaptcha" value="" maxlength="10" size="32" />
</td>
<td>
<img id="imgCaptcha" src="create_image.php" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input id="btnCaptcha" type="button" value="Captcha Test" name="btnCaptcha"
onclick="getParam(document.frmCaptcha)" />
</td>
</tr>
</table>
<div id="result"> </div>
</form>
