Wednesday 1 April 2015

How To Create CAPTCHA in PHP

23:51 Posted by Unknown 4 comments

PHP Captcha Ajax Contact Form
CAPTCHA ("Completely Automated Public Turing test to tell Computers and Humans Apart") mostly used to block/ protecting you against common spam bots 
that try to automatically spamming your mails box or trying to automatically sign up in web sites, blogs and forums.
Below show how to create CAPTCHA in PHP for your web sites.

Let Get Started!!

1st Step: Create Captcha Image with Random String

button.png
  • Create an image with some background noise and name it as button.png show on above. This button.png is use to avoid the randon string readable.
  • To test Captcha image is readable or not go to http://www.onlineocr.net/
  • Create an image.php file, copy and paste below codes. This file is set as an image/png Content-Type to avoid user able to highlighted the random string as a text.
<?php

// Create random 5 characters string, taking out 'o' and 'q', 'I', 'T' to avoid confusion with '0', '2' and 'I' 'T' look familiar
$random_string = str_shuffle('abcdefghjkmnprsuvwxyz');
$characters = strtoupper(substr($random_string, 0, 5));

// Concatenate the random string onto the random numbers
// '0' is left out to avoid confusion with 'O'
$string = rand(1, 9). $characters . rand(1, 9);

// Start session to store $str in Session
session_start();
$_SESSION['captcha_id'] = $string;

// Set this php file into image content type
header('Content-Type: image/png');
header('Cache-Control: no-cache');

// Set the font type
$font = '../fonts/Lucida Calligraphy Italic.ttf';

// Create an image from button.png (http://php.net/manual/en/function.imagecreatefrompng.php). This button.png is an image with some background noise.
$image = imagecreatefrompng('button.png');

// Set the font colour (http://php.net/manual/en/function.imagecolorallocate.php)
$colour = imagecolorallocate($image, 183, 178, 152);

// Set the rotation between -10 and 10 degrees
$rotate = rand(-10, 10);

// Create an image with the random string, rotation, color, font and image (http://php.net/manual/en/function.imagettftext.php)
imagettftext($image, 14, $rotate, 18, 30, $colour, $font, $string);

// Output the image as a png (http://php.net/manual/en/function.imagepng.php)
imagepng($image);
?>
  • For changing the font type go to http://www.1001freefonts.com/ and make changes on below part of code in image.php
  • Below show the result of image.php file.
Captcha image

2nd Step : Create Captcha.html Form to Submit
  • Create an captcha.html file, copy and paste below codes.




CAPTCHA






 
  
  

CAPTCHA

Captcha image reload
  • Below show the result of captcha.html file
Result of captcha.html











  • After click Submit button will compare $_POST['text_captcha'] string is match with captcha string in Uppercase. 
3rd Step : Create validate.php to Compare the Input String is Match

  • Create validate.php file, copy and paste below codes.
<?php
// Start session 
session_start();

if(strtoupper($_POST['text_captcha']) == $_SESSION['captcha_id'])
 echo 'true';
else
 echo 'false';

?>
  • If match will return "true" else "false".
  • Please do not hesitate to comment if you have any problems.



Video of PHP, CAPTCHA & AJAX Contact Form


4 comments:

  1. Easy to implement, No other library used, Just implement some JQuery for AJAX posting and PHP for generated random characters, font rendering and validated input. Good job.
    Suggestion: reload validate code function combine with click event of generated image is better. It might enhance user experiences.

    ReplyDelete
  2. Thank you for tutorial, Keny.

    Best Regards,
    http://www.totomshop.com

    ReplyDelete