Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Math Captcha Image Validation
slacware
post Mar 2 2007, 06:05 PM
Post #1


Newbie
*

Group: Members
Posts: 3
Joined: 2-March 07
Member No.: 39,447



This tutorial will show you how to make a basic math CAPTCHA validtion form.

This requires that you have the GD library for PHP installed to work.

This tutorial requires 2 files, login.php and action.php.

The first step is to create a sub-folder to store the temporary images, for the purposes of this tutorial,this folder should be called images. Now upload a image in there called verify.php and chmod just that image(not the folder) to 777 so that image can change as our functions generate new images.

Ok, after you've done that, we can get to the code:

in login.php:

Code:
CODE
<?php

//the first number

$im = ImageCreate(200, 40);  //create image

$white = ImageColorAllocate($im, 0,0, 0);

$black = ImageColorAllocate($im, 120, 200, 68);

srand((double)microtime()*1000000);

$string = rand(1,10); //the first number

$string2=rand(1,10); //the second number

$string3="$string + $string2";

$verification = $string3;

$thevalue=$string+$string2;

ImageFill($im, 0, 0, $black);

ImageString($im, 4, 70, 10, $verification, $white);

Imagejpeg($im, "images/verify.jpeg");

ImageDestroy($im);

print "<form action='action.php' method='post'>";

print "Please enter the answer to the math question below to verify your not an evil bot:<br>";

print "<input type='hidden' value='$thevalue' name='hiddenvalue'>";

print "<input type='text' name='yourcode' size='20'><br>";

print "<img src='images/verify.jpeg' border='0'><br><br>";

print "<input type='submit' name='submit' value='submit'></form>";

?>


The first step is to create the image, the ImageCreate function in php does just that. The 200 and the 40 are the dimensions of the image created. The image created is stored in $img. $white and $black define the text color of the numbers and the background color of the image respectively. In this tutorial, the background color is greenish and the text is black for easy contrast.

Next we set the random seed with the srand function. We do this by time so when we do call the random function, we get a different number each time.

Then we generated two numbers between one and ten with the rand() function and store them in $string and $string2. In $string3, we combine them to make the actual text on the image. $string3 is not actually the sum of the numbers, it is just the text string and is not numeric. $thevalue is the actual sum of the two numbers when they are added. There's no real reason to set $verification equal to $string3 because we can just directly use $string3 but I do it by habit.

Then these lines of code:

Code:
CODE
ImageFill($im, 0, 0, $black);

ImageString($im, 4, 70, 10, $verification, $white);

Imagejpeg($im, "images/verify.jpeg");



Fill the image with our defined ours and stores the image into images/verify.jpeg.

Now we have to write the form. Its a pretty basic form. We store the actual value of the answer in the form field 'hidden value', which is a non-visible hidden field. The answer to the math question the user types in is $yourcode. Of couse we have to display images/verify.php so people can actually see what the math question really is.

Now we move to action.php:

Code:
CODE
<?php

if(isset($_POST['submit']))

{

   $yourcode=$_POST['yourcode'];

   $hiddenvalue=$_POST['hiddenvalue'];

   if($yourcode==$hiddenvalue)

   {

       print "Correct, put your content here";

   }

   else

   {

      print "You verification code is not right. Please go back and try again.";

   }



}

?>


This is a very simple file that basically gets the two variables from the two input fields from login.php and compares them to see if they are equal. If they are equal, it goes to the "You are correct" case, if they are not equal, it goes to the "your code is incorrect case". In a real application, you would put your actual content in the "You are correct" case and a redirect back to some other page in the "You are incorrect" case.

Notice from BuffaloHELP:
It is imperative that you use the proper BBcode when listing a programming language. Copied from source Warning.
Go to the top of the page
 
+Quote Post
jeffny01
post May 22 2007, 04:36 PM
Post #2


Newbie
*

Group: Members
Posts: 2
Joined: 22-May 07
Member No.: 43,494



Hello,
I've been looking for a way to add this type of image validation to a form on my company's website.
I'm kinda new to this type of advanced code, so I don't know how to go about adding the code to the
existing form and there's some things you have in your tutorial that I don't quite understand.

"Now upload an image in there called verify.php and chmod just that image(not the folder) to 777 so
that image can change as our functions generate new images."

How do I create a .php image and what do you mean by "chmod" just that image?

Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. A Little Introduction To 3d Studio Max(11)
  2. Roll-over Image Links With Css(2)
  3. Image Preloader With Progress Bar Status(23)
  4. Extending The Image Preloader With Php4(3)
  5. How To: Change An Image When A User Clicks On It(11)
  6. Image Rollovers In Javascript(11)
  7. How To Stop Image Hot Linking(17)
  8. Creating A Simple Image Viewer(4)
  9. Image Shack Mod(2)
  10. How To Make Image To Highlight When It`s Mouseovered(8)
  11. Image Gallery Tutorial Using Hoverbox(15)
  12. A Simple Php Captcha - Image Validation(22)
  13. Image Rotator Script (another One)(0)
  14. Background Image Swap Script(15)


 



- Lo-Fi Version Time is now: 22nd November 2008 - 11:50 PM