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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Completing a Noisy Image Application - Completing the noisy image application
(Page 4 of 4 )

As I promised in the previous section, here you have the complete source code of this noisy image application, which is now comprised of two PHP files. As you'll see in a moment, the first file is responsible for including a noisy image into a sample contact form, while the second one is tasked with verifying on the web server whether the four-digit random value entered by a user matches the one generated by the program.

Here are the PHP files: 

(definition for ‘noisy_image.php' file)

<?php

// define ‘RandomGenerator' class
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;
   }
}

// define ‘SessionHandler' class 

class SessionHandler{
   function SessionHandler(){
     session_start();
   }
   function setVariable($value='default',$varname='challenge'){
     $_SESSION[$varname]=$value;
   }
   function getVariable($varname='challenge'){
     if(!$_SESSION[$varname]){
       trigger_error('Error getting session
variable',E_USER_ERROR);
     }
     return $_SESSION[$varname];
   }
   function destroy(){
     session_start();
     session_unset();
     session_destroy();
   }
}
$ses=&new SessionHandler();
$rnd=&new RandomGenerator();
$ses->setVariable($rnd->getRandomValue());
?>
<!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;
}

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

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

#formcontainer{
   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;
}

.challengevalue{
   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;
}

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

.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"><?php echo $ses-
>getVariable();?></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>

(definition for ‘check_data.php' file)

<?php 

// include ‘SessionHandler' class

class SessionHandler{
   function SessionHandler(){
     session_start();
   }
   function setVariable($value='default',$varname='challenge'){
     $_SESSION[$varname]=$value;
   }
   function getVariable($varname='challenge'){
    if(!$_SESSION[$varname]){
      trigger_error('Error getting session
variable',E_USER_ERROR);
    }
    return $_SESSION[$varname];
  }
  function destroy(){
    session_start();
    session_unset();
    session_destroy();
  }
}
$ses=&new SessionHandler();
$challenge=$ses->getVariable();
// check if user entered the correct challenge value
if(trim($_POST['challenge'])==$challenge){
  echo '<h1>Congratulations! You entered the correct challenge
value!</h1>';
}
else{
  echo '<h1>Sorry, but the challenge valued you entered is incorrect.</h1>';
}
?>

As you can see, that's all the client and server-side code required to implement this simple noisy image application. Naturally, you can introduce your own modifications to the original source code to suit the requirements of your personal web projects.

Final thoughts

Finally, we've come to the end of this series. In these three educational articles I showed you how to develop a simple application that is capable of including noisy images into any online form without having to use a rather complex server-side image library.

Of course, this simplicity comes at a cost, since in this case a combination of CSS styles and plain text is utilized to simulate the image in question. But this approach can be quite useful, particularly if your web forms don't require a high level of security.

See you in the next web development tutorial!  


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
DHTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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