Home arrow DHTML arrow Page 2 - Completing a Noisy Image Application

Completing a Noisy Image Application

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
May 16, 2007
  1. · Completing a Noisy Image Application
  2. · Reviewing the partial source code of the noisy image application
  3. · Defining a basic session handling PHP class
  4. · Completing the noisy image application

print this article

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)

class RandomGenerator{
   var $length;
   var $chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
   function RandomGenerator($length=4){
       trigger_error('Invalid length for random
   function getRandomValue(){
     return $rndstr;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example using simple noisy image</title>
<style type="text/css">
   padding: 0;
   margin: 0;
   background: #fff;

   font: bold 16px Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;

   width: 250px;
   padding: 2px 0 2px 0;
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
   border: 1px solid #999;

   width: 35%;
   padding: 10px 100px 10px 10px; 
   margin-left: auto;
   margin-right: auto;
   background: #eee;
   border: 1px solid #999;

#formcontainer p{
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   text-align: right;

   display: block;
   float: right;
   width: 230px;
   padding: 7px 9px 7px 10px;
   margin: 10px 0 20px 0;
   background: #fff url(noisy_image1.gif) left center repeat-x;
   font: bold 20px Arial, Helvetica, sans-serif;
   color: #039;
   text-align: center;
   border: 1px solid #999;

   width: 250px;
   padding: 3px 0 3px 0;
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;    
   color: #000;
   border: 1px solid #999;

   width: 80px;
   padding: 3px 0 3px 0;
   font: bold 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
<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
<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>

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.

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials