Home arrow DHTML arrow Page 3 - A Basic Method for Building Noisy Images
DHTML

A Basic Method for Building Noisy Images


Noisy images (used for captchas) are one way to help insure the security of online forms and prevent them from being abused. In this article, the first part of a three-part series, you will learn how to build noisy images with a simple combination of CSS, (X)HTML and a friendly scripting language, such as PHP. This method offers less complexity than the more conventional methods of building noisy images.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
May 14, 2007
TABLE OF CONTENTS:
  1. · A Basic Method for Building Noisy Images
  2. · Creating a simple contact form
  3. · Defining a simple PHP script
  4. · Completing the creation of a noisy image

print this article
SEARCH DEVARTICLES

A Basic Method for Building Noisy Images - Defining a simple PHP script
(Page 3 of 4 )

As I explained earlier, the approach that I plan to use here to generate a simple noisy image relies upon two basic steps. These can be summarized by the following sequence: first, I must define a PHP function that will be capable of returning a four-digit random string to client code. Then we must also use the background picture that you saw previously to achieve the final appearance of the mentioned noisy image.

So, having said that, take a look at the signature of the following PHP function. It is tasked with generating four-digit random values. Here's how this brand new function looks:

function getChallengeValue($length=4){
  
$chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
   
if(!is_int($length)||$length<1||$length>strlen($chars)){
    
trigger_error('Invalid length for random
string',E_USER_ERROR);
  
}
  
$rndstr='';
  
$maxvalue=strlen($chars)-1;
  
for($i=0;$i<$length;$i++){
    
$rndstr.=substr($chars,rand(0,$maxvalue),1);
  
}
  
return $rndstr;
}

As you can see, the above "getChallengeValue()" PHP function implements the required logic to generate, by default, the aforementioned four-digit random string. Of course, there are many ways to achieve this, so if you want to use a different algorithm to obtain random values, don't hesitate to go for it.

All right, at this point I have created a simple PHP function that generates a randomized string comprised of four uppercase characters. The question is: what's the next step we need to take to build a simple noisy image that can also be verified properly on the web server?

Well, a simple approach for displaying the noisy image in the client, while keeping its value across different pages, is to use a PHP session variable. The following script demonstrates this concept very clearly, and also includes the definition of the "getChallengeValue()" function that you learned before:

<?php

// define 'getChallengeValue()' function
function getChallengeValue($length=4){
  
$chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  
if(!is_int($length)||$length<1||$length>strlen($chars)){
    
trigger_error('Invalid length for random
string',E_USER_ERROR);
  
}
  
$rndstr='';
  
$maxvalue=strlen($chars)-1;
  
for($i=0;$i<$length;$i++){
    
$rndstr.=substr($chars,rand(0,$maxvalue),1);
  
}
  
return $rndstr;
}
session_start();
// save challenge value to session variable
$_SESSION['challenge']=getChallengeValue();

?>

As shown above, the previous script first uses the "getChallengeValue()" function to generate the corresponding four-digit random string, and then saves this value to a "challenge" session variable, so it can be verified on the server after the contact form is submitted.

Of course, there's a missing piece in this schema. It's necessary to display the pertinent random value in front of the background pattern that was previously created. In this way we build a complete noisy image that can be included in the sample contact form.

All these tasks will be discussed in the following section, therefore click on the link that appears below and keep reading.


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