PHP Captcha Code

In this tutorial I want explain how to create a Captcha in PHP. We are using some of the features available in PHP for creating an image. This is very simple and basic tutorial and we are not using any custom fonts for generating captcha image. And we know that captcha code used to avoid spam/abuse or auto-submission.
Captcha.php
<?php
session_start();
$ranStr = md5(microtime());
$ranStr = substr($ranStr, 0, 6);
$_SESSION[‘cap_code’] = $ranStr;
$newImage = imagecreatefromjpeg(“cap_bg.jpg”);
$txtColor = imagecolorallocate($newImage, 0, 0, 0);
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
header(“Content-type: image/jpeg”);
imagejpeg($newImage);
?>
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[‘cap_code’] – is having actual captcha code
$_POST[‘captcha’] – user entered captcha code
<?php
if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’)
{
if ($_POST[‘captcha’] == $_SESSION[‘cap_code’])
{
// Captcha verification is Correct. Do something here!
}
else
{
// Captcha verification is wrong. Take other action
}
}
?>

Read This

The below html/CSS/Jquery code I used is just for an extra enhancement only and all the code is not needed actually. The above code is enough to check whether Human Verification is correct or wrong.

index.php
Contains HTML and PHP code. Image scr=’captcha.php

<?php
session_start();
$cap = ‘notEq’; // This php variable is passed to jquery variable to show alert
if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’)
{
if ($_POST[‘captcha’] == $_SESSION[‘cap_code’])
{
// Captcha verification is Correct. Do something here!
$cap = ‘Eq’;
}
else
{
// Captcha verification is wrong. Take other action
$cap = ”;
}
}
?>
<html>
<body>
<form action=”” method=”post”>
<label>Name:</label><br/>
<input type=”text” name=”name” id=”name”/>
<label>Message:</label><br/>
<textarea name=”msg” id=”msg”></textarea>
<label>Enter the contents of image</label>
<input type=”text” name=”captcha” id=”captcha” />
<img src=’captcha.php‘ />
<input type=”submit” value=”Submit” id=”submit”/>
</form>
<div></div>
</body>
</html>

Javascript

<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(‘#submit’).click(function()
{
var name = $(‘#name’).val();
var msg = $(‘#msg’).val();
var captcha = $(‘#captcha’).val();
if( name.length == 0)
{
$(‘#name’).addClass(‘error’);
}
else
{
$(‘#name’).removeClass(‘error’);
}
if( msg.length == 0)
{
$(‘#msg’).addClass(‘error’);
}
else
{
$(‘#msg’).removeClass(‘error’);
}
if( captcha.length == 0)
{
$(‘#captcha’).addClass(‘error’);
}
else
{
$(‘#captcha’).removeClass(‘error’);
}
if(name.length != 0 && msg.length != 0 && captcha.length != 0)
{
return true;
}
return false;
});
var capch = ‘<?php echo $cap; ?>‘;
if(capch != ‘notEq’)
{
if(capch == ‘Eq’)
{
$(‘.cap_status’).html(“Your form is successfully Submitted “).fadeIn(‘slow’).delay(3000).fadeOut(‘slow’);
}
else
{
$(‘.cap_status’).html(“Human verification Wrong!”).addClass(‘cap_status_error’).fadeIn(‘slow’);
}
}
});
</script>

CSS

body{
width: 600px;
margin: 0 auto;
padding: 0;
}

#form{
margin-top: 100px;
width: 350px;
outline: 5px solid #d0ebfe;
border: 1px solid #bae0fb;
padding: 10px;
}

#form label
{
font:bold 11px arial;
color: #565656;
padding-left: 1px;
}

#form label.mandat
{
color: #f00;
}

#form input[type=”text“]
{
height: 30px;
margin-bottom: 8px;
padding: 5px;
font: 12px arial;
color: #0060a3;
}

#form textarea
{
width: 340px;
height: 80px;
resize: none;
margin: 0 0 8px 1px;
padding: 5px;
font: 12px arial;
color: #0060a3;
}

#form img
{
margin-bottom: 8px;
}

#form input[type=”submit“]
{
background-color: #0064aa;
border: none;
color: #fff;
padding: 5px 8px;
cursor: pointer;
font:bold 12px arial;
}

.error
{
border: 1px solid red;
}

.cap_status
{
width: 350px;
padding: 10px;
font: 14px arial;
color: #fff;
background-color: #10853f;
display: none;
}

.cap_status_error
{
background-color: #bd0808;
}

Advertisements

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