Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Make Your Own Captcha System On User SignUp Using PHP And Ajax.

Tuesday, Apr 4, 2017

Tags:- Ajax PHP


Captcha is the best way to avoid spamming your SignUp, Comments, Email and many other things that takes user input. What is Captcha? It is a simple text combination of some uppercase and lowercase letters with some numbers generated randomly with some special kind of text type font. It is mainly used for Human Verification whether the user is human or any computer script. In this tutorial we will teach you how to make your own captcha system with the help of PHP and Ajax.You may also like add google recaptcha in signup form using PHP.


See Demo
Scrollbar


To Make Your Own Captcha System On User SignUp it takes only three steps:-

  1. Make a HTML form for User SignUp
  2. Generate Captcha
  3. Connect to the database and insert data


Step 1.Make a HTML form for User SignUp

We make a HTML form with post method and save it with a name dosignup.html

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

function getcaptcha()
{
 $.ajax({
 type: 'post',
 url: 'captcha.php',
 success: function (response) {
  $('#captcha').attr('src','captcha.php')
 }
 });
}	
</script>

</head>
<body>
		
<form method="POST" action="insertdata.php" >
 <input type="text" name="username" >
 <input type="text" name="useremail" >
 <input type="password" name="userpass" >
 <img src="captcha.php" width="150" height="100" id="captcha">
 <input type="button" value="Reload Captcha" onclick="getcaptcha();" >
 <input type="text" name="captcha_text">
 <input type="submit" name="submit_form" value="SignUp">
</form>

</body>
</html>

In this there is nothing new except one thing a image tag this image tag is display the captcha image we made in captcha.php page.The user also can request for another Captcha by clicking on Reload Captcha Button .You can do validation to make your code more secure or you can view our How to do validation before and after submitting the form tutorial.



Step 2.Generate Captcha

In this step we generate Captcha with the help of PHP GD functions. We load a image and make that image as a background for Captcha text and 7 random generated characters with numbers as a Captcha text.We use larabiefont.ttf for captcha font you ca download any font file for captcha font without font file the captcha will not display.

// captcha.php

<?php

session_start();
header ('Content-type: image/png');

$chars = "012345678901234567abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ";

$captcha_text = '';
 
for ($i = 0; $i < 6; $i++) 
{
    $captcha_text .= $chars[rand(0, strlen($chars)-1)];
}	

$captcha_bg = @imagecreatefrompng("captcha.png"); 
	
imagettftext( $captcha_bg, 30, 0, 0, 40, imagecolorallocate ($captcha_bg, 0, 0, 0),
 'larabiefont.ttf', $captcha_text );

$_SESSION['captcha'] = $captcha_text;

imagepng($captcha_bg, NULL, 0);
imagedestroy($captcha_bg);

?>

First we start a session and generate some random character you can increase the length of the captcha text as many as you want. Then we load captcha.png image for captcha background and with the help of a PHP GD function imagettftext(); we write our captcha text over the captcha background image the syntax of function is this.

array imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text );

If you want to get Complete information of PHP GD functions you can check from this site and then we put our captcha text in session variable.



Step 3.Connect to the database and insert data

Before we insert the data into database we check if the user captcha text is same as we store the captcha value in session if yes we insert the data and if no we do not signup and display a message for wrong captcha. You may also like jQuery form validation.

// insertdata.php

<?php

session_start();

if( isset( $_POST['submit_form'] ) )
{

$user_captcha = $_POST['captcha_text'];

if($user_captcha==$_SESSION['captcha'])
{
$name = $_POST['username'];
$email = $_POST['useremail'];
$password = $_POST['userpass'];

$host = 'localhost';
$user = 'root';
$pass = ' ';

mysql_connect($host, $user, $pass);

mysql_select_db('demo');

$insertdata=" INSERT INTO user VALUES( '$name','$email','$password' ) ";
mysql_query($insertdata);
}
else
{
echo "Wrong Captcha Please Try Again";
}
}
?>

That's all, this is how to make your own captcha system using PHP and Ajax.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH