Welcome to Anythingweb.org
You are not Logged in! Log in to check your messages.

Anythingweb.org

Resources for Webmasters.

Today's:
Popular Articles and Posts:

PHP CAPTCHA Tutorial

Submitted by: web_guy
Hits:14514

Captcha stands for "Completely Automated Public Turing test to tell Computers and Humans Apart" and is used for telling humans and computers apart. Many times, web sites will use Captcha on forms on forms to make sure the form is being filled out by a human. This tutorial will show you how to create a form with Captcha.

Step 1 - Creating a HTML Form

Lets start by creating a HTML form. Copy the code below into a php file called form.php.

The code above is a basic form in HTML. The form uses the POST method which doesn't allow the user to see the data entered. Then you will see a <img> tag which is where the CAPTCHA will actually appear. There is also two types of inputs. One is a text field which is where the user will enter the CAPTCHA text and the second is a submit button.

Step 2 - Creating the CAPTCHA Image

Now we will create the CAPTCHA image that will appear on our form that you just created. Copy the code below and put it in a php file called captcha.php

We are going to store the CAPTCHA text in the users session. To start a session, you will use the session_start() function. Next, you will set the width and height of the CAPTCHA image. Next, the imagecreate function returns an image identifier representing a blank image. We must pass two integers into the function, our width and height. We will assign this to the $image variable. The imagecolorallocate function will fill the background color of the image. We will make the background color black.

This next set of code will generate the random number that will appear in the CAPTCHA. The length of the string is stored in $length variable. The characters the will appear in the CAPTCHA will be stored in $chars. The for loop will create the random string that will appear in the CAPTCHA. It is stored in the $string variable.

Next, we will store the random string in our session. The string will be stored in md5 hash.

This next set of code will create a grid in the CAPTCHA. First we set the color of the grid. In this case, we will use red. The next two for loops will create the horizontal lines and the vertical lines. The first one will create the horizontal lines and will create a line every 20 pixels. The second for loop will create the vertical lines. These lines will be placed 10 pixels apart. Together, they will form your grid for the CAPTCHA image.

This next set of code will make random lines in our image. First we get a random number of lines that will appear in the image. That random number is stored in $randomNumber and will be between 10 and 40. We then set the color of the lines. Next, we will get the random points for the lines($randomX, $randomX2, $randomY, $randomY2) and then create the lines within the image in the imageline function.

We have generated the random string above, now we will put in on the CAPTCHA image. The text color will be red and it will print at a random location on the image. We will now need to tell the browser that an image is coming instead of the usual text/html and then show the image we have created.

Step 3 - Validate the CAPTCHA Text

Now we must validate the text that the user has entered into the text field. To do this, please return to the form.php file that we created earlier. In the top of that file, you can paste the following code.

The first thing that we must do is start the session. This way we can store the CAPTCHA value in the user's session. We start a session with session_save_path("/home/users/web/b786/d5.anythingweb/phpsessions"); session_start(); Next, we have an if statement that checks to see if the form was submitted (user clicked the submit button). We have another if statement that will validate that the user entered something in the text field and also that the CAPTCHA is stored in our session. If the user has entered something in the CAPTCHA textbox and the CAPTCHA is stored in the session, then we compare what the user entered and what the session has. If the user entered that correct information, we print our "The CAPTCHA code is correct. You can redirect the user here to a new page". If the user didn't enter the correct CAPTCHA, we display "The CAPTCHA code is not correct. You can redirect the user here to a new page." The last thing we must do is to check to see if the user doesn't enter anything at all or if the session doesn't have a CAPTCHA value at all. After this, you are done. You have completed the tutorial and have a working PHP CAPTCHA.

DEMO

Below you can find all the code in the form.php and the captcha.php

form.php

captcha.php

<?php 
 session_save_path("/home/users/web/b786/d5.anythingweb/phpsessions");
session_start(); 
$width = 160; 
$height = 80; 
$image = imagecreate($width, $height); 
$bgColor = imagecolorallocate($image, 0, 0, 0);

$length = 7; 
$chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; 
$string = ''; 
for ($i = 0; $i < $length; $i++) { 
    $pos = rand(0, strlen($chars)-1); 
    $string .= $chars{$pos}; 
} 
$_SESSION['captchaText'] = md5($string);

$gridColor = imagecolorallocate($image, 175, 0, 0); 
$lines = ceil($width / 20); 
for($i = 0; $i <$lines; $i++) { 
    $x = ($i + 1) * 20; 
    imageline($image, $x, 0, $x, $height, $gridColor); 
} 
$lines = ceil($height / 10); 
for($i = 0; $i < $lines; $i++) { 
    $y = ($i + 1) * 10; 
    imageline($image, 0, $y, $width, $y, $gridColor); 
}

$randomNumber = rand(5,40); 
$lineColor = imagecolorallocate($image, 130, 0, 0); 
for($i = 0; $i < $randomNumber; $i++) { 
    $randX = rand(0, $width - 1); 
    $randX2 = rand(0, $width - 1); 
    $randY = rand(0, $height - 1); 
    $randY2 = rand(0, $height - 1); 
    imageline($image, $randX, $randY, $randX2, $randY2, $lineColor); 
}

// write the text 
$textColor = imagecolorallocate($image, 255, 0, 0); 
$randX = rand(0, $width - 50); 
$randY = rand(0, $height - 15); 
imagestring($image, 10, $randX, $randY, $string, $textColor);

header ("Content-type: image/png"); 
imagepng($image); 
?>

AJAX

Java

Javascript

PHP

SEO

Articles & Books