Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos

Home » Php » How to create custom captcha using php with ajax

How to create custom captcha using php with ajax

How to create custom captcha using php with ajax

Posted on May 1, 2019April 10, 2020 By XpertPhp 3 Comments on How to create custom captcha using php with ajax

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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 class="container">
  <h2>Custom Captcha form using php with ajax</h2>
  <form action="" class="col-lg-4">
<div class="form-group">
<span id="error"></span><br>
</div>
    <div class="form-group">
      <img src="captcha.php" id="captcha">
  <input type="hidden" id="wver" value="<?php echo $ver;?>">
    </div>
    <div class="form-group">
  <label for="captcha">Enter The Above Code Here:</label>
  <input type="text" id="ver" class="form-control">
    </div>
<input type="button" value="I Accept" class="btn btn-default btnSubmit">
  </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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

Recommended Posts:

  • Laravel 6 jquery form validation example tutorial
  • Login with Facebook using PHP
  • How to create Pagination with PHP and MySql
  • CodeIgniter Upload Image File with preview using Jquery Ajax
  • delete a multiple selected rows in PHP without Ajax
Ajax, Jquery, Php Tags:best captcha, captcha, captcha typing, captcha website, custom captcha, jquery tutorial, my captcha

Post navigation

Previous Post: Create a calculator using the jquery
Next Post: How to install and download nodejs and npm for window os

Latest Posts

  • Laravel Check If Foreach is Empty Example
  • Laravel Check Array Empty in Blade
  • PHP Datatables CRUD Example
  • How to Convert Date and Time from one timezone to another in php
  • how to get current date and time in php
  • Drag and Drop Reorder Items with jQuery, PHP & MySQL
  • Laravel 9 Toastr Notifications Example Tutorial
  • Laravel 9 CRUD Operation Example Using Google Firebase
  • Laravel 9 CKeditor Image Upload With Example
  • Laravel 9 Summernote Image Upload With Example

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Birthday Calculator
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tricks jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch Laravel Socialite laravel social login nodejs pagination payment gateway php with mysql react js tutorial rewrite rule send mail validation wysiwyg editor

Copyright © 2018 - 2022,

All Rights Reserved Powered by XpertPhp.com