Captcha

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.

Name
Email
Comments
Back
Funding

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

Thoughts for the day

If a country is to be corruption free and become a nation of beautiful minds, I strongly feel there are three key societal members who can make a difference. They are the father, the mother and the teacher.

Dr. A.P.J. Abdul Kalam
Polls
Which device you use most for facebook application?
Laptop/PC
18%

 


Android
56%

 


IOS
12%

 


Blackberry
14%

 


Tutorial On Request
Q. Ask us for any tutorial or any thing which helps to build your career better.
Email:
Query: