How to create custom captcha using php with ajax – onlinecode
In this post we will give you information about How to create custom captcha using php with ajax – onlinecode. Hear we will give you detail about How to create custom captcha using php with ajax – onlinecodeAnd how to use it also give you demo for it if it is necessary.
We will learn how to create custom captcha using PHP with ajax. normally captcha is used for security purpose and only human users can pass through. computers or bots are not solving a captcha. so we will learn about captcha that how to create captcha in PHP.
We will create a jpeg image and add that image on font-family, font-color, and font-size. in last we will pass the random character in the jpg image to create jpg image. so whenever we will refresh the page that time generates new captcha code. you can see below code.
captcha.php
<?php
session_start();
$img=imagecreate(185,50);
$green=imagecolorallocate($img,0,200,0);
$gray=imagecolorallocate($img,230,230,230);
$gray1=imagecolorallocate($img,150,150,150);
imagefill($img,0,0,$gray);
imageline($img,3,3,7,23,$gray);
$str='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
$ver="";
for($i=1;$i<=6;$i++)
{
$ver=$ver.substr($str,rand(0,61),1);
}
$font="captcha.ttf";
$_SESSION['cap']=$ver;
imagettftext($img,30,2,25,40,$green,$font,$ver);
header("content-type:image/jpeg");
imagejpeg($img);
imagedestroy($img);
?>Now, we will create a form using bootstrap and pass the “captcha.php” file in the image src attribute. so captcha image will be shown. we will use the ajax on click button and pass the captcha code. you can see below code.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to create custom captcha using php with ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$(".btnSubmit").click(function(e){
var ver = $("#ver").val();
var wver = $("#wver").val();
$.ajax({
type:'POST',
url:'match.php',
data:{ver:ver, wver:wver},
success:function(data){
//alert(data.success);
$("#error").html(data);
}
});
});
});
</script>
</head>
<body>
<div >
<h2>Custom Captcha form using php with ajax</h2>
<form action="" >
<div >
<span id="error"></span><br>
</div>
<div >
<img src="captcha.php" id="captcha">
<input type="hidden" id="wver" value="<?php echo $ver;?>">
</div>
<div >
<label for="captcha">Enter The Above Code Here:</label>
<input type="text" id="ver" >
</div>
<input type="button" value="I Accept" >
</form>
</div>
</body>
</html>We will call “match.php” file using ajax and we will check the captcha code is true or false by using session. finally, it will return the true or false message. you can see below code.
match.php
<?php session_start();
$msg=array();
if($_SESSION['cap']!=$_POST['ver'])
{
$msg[]="Dont't match word verification";
}
if(!empty($msg))
{
foreach($msg as $k)
{
echo '<font color="red"><li>'.$k.'</font>';
}
}
else
{
echo '<font color="Green">Done ! Sucessfully Matched</font><br>';
}
?>We have shared demo Url. So you can see below Url.
Show Demo
Hope this code and post will helped you for implement How to create custom captcha using php with ajax – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs