How to create captcha in PHP using class object?

Introduction

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. It is used for prevention of automated script from spammers. Normally it contains some random alphabets and number in image. User has to write same in text box provided.

Pre-requisite

It requires PHP GD library, ie. GD library should be enabled in php.ini

Features

Background images
Random string
Case Sensitive
Random lines for security features

Scripts

Following script file helps to create it

Create index.php to show captcha in form

Use following code into it

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Create Captcha in PHP</title>
<meta charset="utf-8">
<script src="//www.fbchandra.com/include/js/jquery-2.2.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="//www.fbchandra.com/include/styles/bootstrap.min.css" />
<script src="//www.fbchandra.com/include/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//www.fbchandra.com/demo/captcha/captcha.js"></script>
<link rel="stylesheet" type="text/css" href="//www.fbchandra.com/demo/captcha/captcha.css" />
</head>
<body>
<?php
$msg='';
if(isset($_POST['btnSubmit'])) {
	if($_POST['txtSWord']==$_SESSION['CAPTCHAVALUE']) {
		$msg="<span class='success'>Validated successfully</span>";
	}
	else {
		$msg="<span class='failure'>Enter correct security word</span>";
	}
}

?>
<div class="container">
	<div class="row captcha_heading">CAPTCHA</div>
	<div class="row">
		<div class="msg"><?php echo $msg ?></div>
	</div>
	<form name="frmCaptcha" method="POST">
		<div class="row">
			<div class="col-sm-3"><b>Security Word:</b></div>
			<div class="col-sm-9" style="height:35px;">
				<img id="imgCaptcha" src="//www.fbchandra.com/demo/captcha/captcha.php" alt="Loading" />
				<a href="javascript:void(0)" onclick="reloadCaptcha()">Reload</a>
			</div>
		</div>
		<div class="row" style="margin-top:10px;">
			<div class="col-sm-3"><b>Enter Security Word:</b></div>
			<div class="col-sm-9">
				<input type="text" name="txtSWord" class="txtSWord">
			</div>
		</div>
		<div class="row btn">
			<input type="submit" name="btnSubmit" value="Submit" onclick="return validate()" />
		</div>
	</form>
</div>
</body>
</html>

Create class.captcha.php to create captcha

Use following content in it

<?php
class createcaptcha
{
	public function captcha()
	{
		$captRandVal=substr(md5(rand()),4,5);
		$width=70;
		$height=35;
		$img=imagecreatetruecolor($width, $height);

		// Image color allocation
		$white=ImageColorAllocate($img, 255,255,255);
		$white=ImageColorAllocate($img, 255,255,255);
		$black=ImageColorAllocate($img, 0,0,0);
		$grey=ImagecolorAllocate($img, 204,204,204);
		imagecolortransparent($img, $black);

		// Fill color
		ImageFill($img, 0, 0, $grey);
		imagearc($img, 100, 100, 200, 200,  0, 360, $white);
		imagestring($img, 20, 10, 10, $captRandVal, $black);

		$_SESSION['CAPTCHAVALUE']=$captRandVal;

		header('Content-type: image/jpeg');
		imagejpeg($img);

		imagedestroy($img);
	}
}	
?>

Create a file captcha.php to call class file

<?php
session_start();
require_once('class.captcha.php');
$objCaptcha=new createcaptcha();
$objCaptcha->captcha();
?>

Create captcha.js for validation and reload call

function reloadCaptcha()
{
	document.getElementById('imgCaptcha').src='';
	document.getElementById('imgCaptcha').src="//www.fbchandra.com/demo/captcha/captcha.php";
}

function validate()
{
	var txtSWord = $('.txtSWord').val();
	if(txtSWord=="") {
		$('.msg').html('Enter security word');
		$('.msg').css('color','red');
		return false;
	}
	return true;
}

Create captcha.css for style

.captcha_heading { padding:20px;background-color:#d4b385; margin:10px 0;}
.btn { margin-top:10px; text-align:center;}
.success { color:green;}
.failure { color:red;}
.msg { margin:17px;}

Live Demo & Download

Live Demo | Download Script

Conclusion

CAPTCHA is used in form where data gets inserted into database. We store Alphabets and numbers shown in CAPTCHA image into session variable and compare it to the text provided by user in textbox.

Back

Funding

We need your support to operate it properly. We have lots of ideas but less fund, so help us with your funding.

Contribute

Thoughts of the day

A perfection of means, and confusion of aims, seems to be our main problem
Albert Einstein

Read more

Sell your product online

Do you want to sell products online with no extra cost?

Send your details, our executive will contact you

Polls

What you like most in facebook?

Tutorial On Request

Q. Ask us for any tutorial or any thing which helps to build your career better.

Email:

Query: