If you're searching for an approachable guide on how to build noisy images to help prevent automated submission of online forms, then look no further. Welcome to the final article of the series "Building Noisy Images." Over the course of this instructive series, you'll learn different approaches for including this kind of image quickly into your own web sites by using only a simple combination of basic markup and CSS styles, along with the assistance of PHP.
Completing a Noisy Image Application - Reviewing the partial source code of the noisy image application (Page 2 of 4 )
Before I proceed to show you how to develop a specific module that stores the random strings onto a session variable, I'd first like to list the partial source code that corresponds to this noisy image application as it was defined in the preceding article of the series.
As you'll certainly remember, the script to create the respective noisy images required only one basic PHP file. Here is the definition for the file in question:
(definition for noisy_image.php file)
<?php class RandomGenerator{ var $length; var $chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; function RandomGenerator($length=4){ if(!is_int($length)||$length<1||$length>strlen($this- >chars)){ trigger_error('Invalid length for random string',E_USER_ERROR); } $this->length=$length; } function getRandomValue(){ $rndstr='';$maxvalue=strlen($this->chars)-1; for($i=0;$i<$this->length;$i++){ $rndstr.=substr($this->chars,rand(0,$maxvalue),1); } return $rndstr; } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <title>Example using simple noisy image</title> <style type="text/css"> body{ padding: 0; margin: 0; background: #fff; }
.formbutton{ width: 80px; padding: 3px 0 3px 0; font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #000; </style> </head> <body> <h1>Example using simple noisy image</h1> <div id="formcontainer"> <form action="check_data.php" method="post"> <p>First Name <input type="text" name="fname" title="Enter your first name" class="inputbox" /></p> <p>Last Name <input type="text" name="lname" title="Enter your last name" class="inputbox" /></p> <p>Email <input type="text" name="email" title="Enter your email address" class="inputbox" /></p> <p>Enter the four-digit code shown below:</p> <p><span class="challengevalue">Random string goes here</span></p> <p><input type="text" name="challenge" title="Enter the code shown above" class="inputbox" /></p> <p>Enter the text of your message:</p> <p><textarea name="message" title="Enter the text of your message here" rows="10" cols="10"></textarea></p> <p><input type="submit" name="send" value="Send Data" class="formbutton" /></p> </form> </div> </body> </html>
As you can see, the above "noisy_image.php" PHP file includes the definition of the "RandomGenerator" class that was built in the previous article of the series. It generates the corresponding four-digit random strings that are displayed within the sample contact form.
However, as I stated in the introduction, the noisy image application in its current incarnation is pretty useless. It can't save the corresponding randomized value to a session variable to be properly verified on the web server. So, what's the next step?
Well, considering that the application's server-side programming is coded by using an object-based approach, I'm going to utilize this technique to define another basic PHP class. This class will be capable of saving the aforementioned four-digit random strings to a session variable, in this way incorporating the missing piece of the previous noisy image-related script.
Logically, this brand new PHP class will be built in the next section. So if you want to see how it will look, click on the link that appears below and keep reading.
DHTML 
A Basic Method for Building Noisy Images
