^ An Image Verification Tutorial

I'm sure many of you have logged on to Yahoo!, eBay or even here on Planet Source Code and have run across the verification image containing numbers and letters that you must plug into an input box for verification. And maybe you thought, "What the heck is this for?" or "I wish I knew how to do that."
You wanna know--then I will show you how.

A script like this is usually used for further security of the user's information--or, like on Planet Source Code, so that "unscrupulous people" cannot use "HTTP Post code in their submissions to trick people into unknowingly voting for them."

Okay, enough talk--let's get started.

First, I assume that you have PHP 4 with the GD library already installed. Also, we will use session functions in this code to pass a varaible from one page to the next.

To create our image, we need to send a header telling the connection that we are about to send an image, we do that with the header function:
--------------------------------------------

/*Send header*/
Header("Content-Type: image/png");

--------------------------------------------
We are going to be working with png images in this tutorial. But if you want to use "jpeg", just plug it in where "png" is in the header. (You can also call a "gif" image, but because of all the money stuff, most servers don't support it.)

I know your dying to get started building images, but first, we need to get a little more prep work out the way. So, let's put those session functions to work.
---------------------------------------------

/* initialize a session. */
session_start();

/*We'll set this variable later.*/
$new_string;

/*register the session variable. */
session_register('new_string');

-------------------------------------------------
All we did above was start a new session with the session start function. We will call this session on a different page that we will create later. Second, we created a variable called new_string that we will give a value to later. Lastly, we called the session register function: this function takes the variable we created as an argument minus the "$" sign, also, you must put it inside single quotes only. (An argument refers to the single or comma separated information inside the parenthesis of a function.)

With that out the way, we can now begin to create our image. We start this process by calling the create image function, which does exactly what it says: Creates an image.
---------------------------------------------

/* set up image*/
/*The first number is the width and the second is the height*/
$im = ImageCreate(200, 40);

----------------------------------------------
I set the image Create() function to the variable $im. The variable $im will be our pointer to the image we just created for the rest of the tutorial. The image Create function take only two arguments and the arguments can only be integers (numbers). The first argument is the width of the image in pixels, the second, you guessed it, is the height.

Let's give our image some color.
----------------------------------------------

/*creates two variable to store color*/
$white = ImageColorAllocate($im, 255, 255, 255);
$black = ImageColorAllocate($im, 0, 0, 0);

----------------------------------------------
I called the Image Color Allocate function twice. The first time is to set the color for white, the second to set the color for black. The function take 4 arguments: The image pointer variable $im, and the RGB (red, green, blue) components that are separated by commas.
(255, 255, 255, is the code for white, while 0, 0, 0, is the code for black. You can play with the numbers to produce any color you want.)
At this point we have a png image and two colors. Now we will create a random string generator to place as the verification code inside the image. I won't discuss how the random generator code works, but will only lay out the code with comments.
------------------------------------------------

/*random string generator.*/
/*The seed for the random number*/
srand((double)microtime()*1000000);

/*Runs the string through the md5 function--which is a function that encrypts a string, changing it into a 32 character string composed of numbers and lowercase letters*/

$string = md5(rand(0,9999));

/*Creates the new string. The first number is the point in the 32 character string where we will pull our string from. In other words, PHP will count (beginning at 0) 17 characters into the string. The 18th character in will be our beginning point (remember, PHP starts counting from 0). From there, PHP counts 5 characters from that point, and thus, we get our five character string. The second number is the length of our string--changing this number will give us different string lengths.*/
$new_string = substr($string, 17, 5);
-------------------------------------------------

Moving on--Now let's fill the image with color.
-------------------------------------------------

/*fill image with black*/
ImageFill($im, 0, 0, $black);

---------------------------------------------------
The Image Fill function is called first. It takes 4 arguments: Again we add the image pointer variable $im, the second and third are x, y coordinates in our image, 0, 0, being at the top left corner. Our image size is 200x40, therefore, the bottom right corner would be 200, 40. The fourth argument tell us with what color to fill the image with: In our case it is black.

Now, let's add the string we just created to our image.
----------------------------------------------------

/*write string at coordinates (70,10) in the color white. (70, 10) puts the string almost in the middle of the image.*/
ImageString($im, 4, 70, 10, $new_string, $white);

-----------------------------------------------------
We have yet another function: Image String, and yes, it adds a string to our image. It takes six arguments. The first is the image pointer variable, the second argument can be any number from 1 to 5,(which calls for one of the built in fonts). The next two arguments are the coordinates, first the x (width) then the y (height). This is for the placement of our string. The next argument calls for the string variable. In our case it is $new_string. The last argument is the variable containing the color, which is $white.

We end the image build by outputting our image using the code below:
-----------------------------------------------------

/*output to browser*/
ImagePNG($im, "verify.png");
ImageDestroy($im);

------------------------------------------------------
We have the imagePNG function with two arguments: again, like always the image pointer, the second argument names the image "verify.png" and saves the image in the current directory. If you want the image in a different directory, proceed "verify.png" with the path to the directory.

Hey, we're through building the image.

Finally, input the Image Destroy function, it has one argument: the pointer variable. Destroying the image frees up server memory. Your server administrator will like you for this. Your code should look like this:
-----------------------------------------------------

<?php
/*header*/
Header("Content-Type: image/png");

/* initialize a session. */
session_start();

/*We'll set this variable later.*/
$new_string;

/*register the session variable. */
session_register('new_string');

/*You will need these two lines below.*/
echo "<html><head><title>Verification</title></head>";
echo "<body>";

/* set up image, the first number is the width and the second is the height*/
$im = ImageCreate(200, 40);

/*creates two variables to store color*/
$white = ImageColorAllocate($im, 255, 255, 255);
$black = ImageColorAllocate($im, 0, 0, 0);

/*random string generator.*/
/*The seed for the random number*/
srand((double)microtime()*1000000);

/*Runs the string through the md5 function*/
$string = md5(rand(0,9999));

/*creates the new string. */
$new_string = substr($string, 17, 5);

/*fill image with black*/
ImageFill($im, 0, 0, $black);

/*writes string */
ImageString($im, 4, 96, 19, $new_string, $white);

/* output to browser*/
ImagePNG($im, "verify.png");
ImageDestroy($im);
?>
---------------------------------------------------
Now place a form input box below our image (see the code below), and ask the user to input the string they see in the image in the text box. Append this code to the bottom of the code above, before the "?>."
---------------------------------------------------

/*I plugged our image in like I would any other image.*/
echo "<img src=\"verify.png\">";
echo "<br><br>";
echo "Type the code you see in the image in the box below. (case sensitive)";
echo " <form action=\"formhandler.php\" method=post>";
echo "<input name=\"random\" type=\"text\" value=\"\">";
echo "<input type=\"submit\">";
echo "</form>";
echo "</body>";
echo "</html>";

---------------------------------------------------
With that done, we must now create a new file and name it formhandler.php. We will put the code below into it.
---------------------------------------------------

<?php
/*This starts the session that we created on the last page*/
session_start();

/*This trims the random variable of any white space that the user may have unknowingly put in.*/
$random = trim($random);

/*Below is a conditional statement: In English it reads, if the string that the user put into the text box is equal to what is in the image then print to the screen, "You are verified." If they are not equal it tells the user to go back and try again.*/

/*We can use the variable $new_string because we registered it into our session on the last page, it retains its value that it had on the first page.*/
if ($new_string == $random){
echo "You are verified";
}
else{
echo "Please go back and get verified.";
}
?>

There you are. Try it out. IF you have any trouble send me an e-mail. And that's that.

Thanks to comments left below, this article has been updated by the Author.
Please Rate this Tutorial!!!