Creating Simple but Effective PHP Captcha for your forms

Hzp brings a tutorial on creating a simple PHP Captcha [Anti-Spam]

Today, I'll be explaining PHP Captcha in this tutorial. I am using some of the features available in PHP for creating an image. This is very simple, I have used custom fonts for generating captcha image. And we know that captcha code is used to avoid spam/abuse or auto-submission.

DOWNLOAD THE SCRIPT FROM HERE

captcha_code_file.php

<?php 
session_start();
//Settings: You can customize the captcha here
$image_width = 120;
$image_height = 40;
$characters_on_image = 6;
$font = './monofont.ttf'; 

//The characters that can be used in the CAPTCHA code. 
//avoid confusing characters (l 1 and i for example)
$possible_letters = '23456789bcdfghjkmnpqrstvwxyz';
$random_dots = 10;
$random_lines = 30;
$captcha_text_color="0x142864";
$captcha_noice_color = "0x142864"; 

$code = ''; 

$i = 0;
while ($i < $characters_on_image) { 
$code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
$i++;
}

$font_size = $image_height * 0.75; 
$image = @imagecreate($image_width, $image_height);

/* setting the background, text and noise colours here */ 
$background_color = imagecolorallocate($image, 255, 255, 255);

$arr_text_color = hexrgb($captcha_text_color); 
$text_color = imagecolorallocate($image, $arr_text_color['red'], 
$arr_text_color['green'], $arr_text_color['blue']);

$arr_noice_color = hexrgb($captcha_noice_color); 
$image_noise_color = imagecolorallocate($image, $arr_noice_color['red'], 
$arr_noice_color['green'], $arr_noice_color['blue']);

/* generating the dots randomly in background */ 
for( $i=0; $i<$random_dots; $i++ ) {
imagefilledellipse($image, mt_rand(0,$image_width),
mt_rand(0,$image_height), 2, 3, $image_noise_color);
}

/* generating lines randomly in background of image */ 
for( $i=0; $i<$random_lines; $i++ ) {
imageline($image, mt_rand(0,$image_width), mt_rand(0,$image_height),
mt_rand(0,$image_width), mt_rand(0,$image_height), $image_noise_color);
}

/* create a text box and add 6 letters code in it */ 
$textbox = imagettfbbox($font_size, 0, $font, $code); 
$x = ($image_width - $textbox[4])/2;
$y = ($image_height - $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $code);

/* Show captcha image in the page html page */ 
header('Content-Type: image/jpeg');// defining the image type to be shown in browser widow
imagejpeg($image);//showing the image
imagedestroy($image);//destroying the image instance
$_SESSION['6_letters_code'] = $code;

function hexrgb ($hexstr) 
{
$int = hexdec($hexstr);

return array( "red" => 0xFF & ($int >> 0x10),
"green" => 0xFF & ($int >> 0x8),
"blue" => 0xFF & $int);
}
?>

Verifying captcha code is equal or not

Here we are storing a captcha code in SESSION variable and while verifying we have to compare the session variable with user entered data.

$_SESSION[6_letters_code] - is having actual captcha code
$_POST[6_letters_code] - user entered captcha code

index.php

Contains HTML, CSS, Javascript and PHP code.

<?php session_start(); 

if(isset($_REQUEST['Submit'])){ 
// code for check server side validation
if(empty($_SESSION['6_letters_code'] ) ||
strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
{ 
$msg="The Validation code does not match!";
}else{
// Captcha verification is Correct. Final Code Execute here!
}
} 
?>
<style type="text/css">
.table {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background-color:#E4E4E4;
}
.table td {
background-color:#F8F8F8;
}
</style>

<form action="" method="post" name="form1" id="form1" >
<table width="400" border="0" align="center" cellpadding="5" cellspacing="1" class="table">
<?php if(isset($msg)){?>
<tr>
<td colspan="2" align="center" valign="top"><?php echo $msg;?></td>
</tr>
<?php } ?>
<tr>
<td align="right" valign="top"> Validation code:</td>
<td><img src="captcha_code_file.php?rand=<?php echo rand();?>" id='captchaimg'><br>
<label for='message'>Enter the code above here :</label>
<br>
<input id="6_letters_code" name="6_letters_code" type="text">
<br>
Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh
</p></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="Submit" type="submit" onclick="return validate();" value="Submit"></td>
</tr>
</table>
</form>
<script type='text/javascript'>
function refreshCaptcha()
{
var img = document.images['captchaimg'];
img.src = img.src.substring(0,img.src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}
</script>

Thank you for stopping by and taking your time to read this post :) Hope you got something out of it. At least a tiny bit of a thing. Now, I'd love to hear from you. I'm all ears here. Please add your comment below. Got questions? Do not hesitate to ask questions you have related to this post too. Let's join the conversation.