Home arrow DHTML arrow Page 2 - An Object-Based Approach to Building Noisy Images

An Object-Based Approach to Building Noisy Images

Noisy images can be a useful technique for preventing automated submissions of online forms. If you want to learn how to put this approach to work for you, this article provides you with distilled material on the topic. Welcome to the second installment of the series "Building Noisy Images." Over the course of this educational journey, you'll see how to build simple - yet effective -- noisy images, by using a combination of basic structural markup, CSS styles and a tiny bit of PHP.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
May 15, 2007
  1. · An Object-Based Approach to Building Noisy Images
  2. · Creating noisy images with a procedural approach
  3. · Building a noisy image with an object-based approach
  4. · Listing the complete source code of the noisy image script

print this article

An Object-Based Approach to Building Noisy Images - Creating noisy images with a procedural approach
(Page 2 of 4 )

Before I proceed to demonstrate how to create noisy images by using an object-oriented approach, first let me show you the procedural version of this application. It will help you spot more clearly the differences between both techniques, and eventually choose the one that best suits your personal needs.

Okay, having said that, here is the definition of the PHP file created in the previous article. As you'll remember, it is responsible for generating four-digit random values, as well as for displaying a simple contact form:

// define 'getChallengeValue()' function
function getChallengeValue($length=4){
     trigger_error('Invalid length for random
   return $rndstr;
// save challenge value to session variable
<!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_image.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"><?php echo $_SESSION
<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>

Believe or not, the above PHP file is all the source code that you need to implement a basic noisy image in any online form, including the one shown previously. However, as you may have noticed, the file in question first uses a PHP function to generate the random value, and then saves this string to a session variable.

Logically, the purpose of doing this is merely to maintain the value of the aforementioned random string across different web pages. This allows for the verification of this value on the web server after the online form has been submitted. As you can see, this process is mostly ruled by common sense rather than a complex technique, and it shouldn't be hard to understand at all.

All right, at this stage I believe that building noisy images by using a procedural approach is already a familiar concept to you. Therefore, the next step consists of replacing the "getChallenge()" PHP function with a simple class that performs the same task, but obviously using the object-oriented paradigm.

Do you want to see how this brand new PHP class will be built? 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