Creating the Sign-up Demo -- Signupdemo.php - PHP

Learn how to create a sign-up form for a website with a security image. The image prevents fake sign-ups and spam. In this tutorial, we will learn how to create a security image template, then put it to use.

TABLE OF CONTENTS:

By: Nathan Rohler

Poor Best

Rating:

/ 113

September 08, 2004

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Now we are ready to create the sign-up demo. To begin, start with the following PHP file:

</body>
</html>

Now, we need to create two functions in a PHP block at the top of the file -- insertSecurityImage, a function to insert a unique security image, and checkSecurityImage, a function to check the user entered value.

In this function, we have one parameter, $inputname. We first of all create a unique reference ID by hashing the current UTC time times a random number. Then, we generate a string that will insert an image with the reference ID passed in the querystring. It also inserts a hidden input named whatever was passed in $inputname, and a value of the reference ID. Finally, we write it to the browser.

<?php
//Define function to insert security image
function insertSecurityImage($inputname) {
   $refid = md5(mktime()*rand());
   $insertstr = "<img src=\"securityimage.php?refid=".$refid."\" alt=\"Security Image\">\n
   <input type=\"hidden\" name=\"".$inputname."\" value=\"".$refid."\">";
   echo($insertstr);
}

In checkSecurityImage, we have two parameters -- the reference ID ($referenceid), and the value the user entered ($enteredvalue). First, we prepare the two strings by escaping them for database use. Then, we select the record(s) containing the reference ID and the hiddentext that were passed to the function. Finally, we return true (indicating valid) if there are more than zero records, and otherwise return false (indicating invalid) if there are zero records. You must have already opened a MySQL connection to use this function.

//Define function to check security image confirmation
function checkSecurityImage($referenceid, $enteredvalue) {
   $referenceid = mysql_escape_string($referenceid);
   $enteredvalue = mysql_escape_string($enteredvalue);
   $tempQuery = mysql_query("SELECT ID FROM security_images WHERE
   referenceid='".$referenceid."' AND hiddentext='".$enteredvalue."'");
   if (mysql_num_rows($tempQuery)!=0) {
      return true;
   } else {
      return false;
   }
}
?>

Now, we are ready to create the signup form within the <body> tags. The form will post to itself. Because this is a demonstration, we will only have one field (name) in addition to the security image. Then, we simply call the insertSecurityImage function, specifying the hidden form field name to be security_refid. Finally we add a confirmation field named security_try, and a submit button.

<form name="signupform" method="post" action="<?=$_SERVER["PHP_SELF"]?>">
Please sign up for our website:
<br>
<br>
Name:
<input name="name" type="text" id="name">
<br>
<? insertSecurityImage("security_refid") ?>
<br>
Enter what you see:
<input name="security_try" type="text" id="security_try" size="20" maxlength="10">
(can't see? try reloading page)
<br>
<br>
<input type="submit" name="Submit" value="Signup!">
</form>

Open signupdemo.php in a browser. If you view the source, you should see something like the code listing below. Note the hidden field and the security image reference ID.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Signup Demo</title>
</head>
<body>
<form name="signupform" method="post" action="/php/signupdemo.php">
Please sign up for our website:<br>
<br>
Name:
<input name="name" type="text" id="name">
<br>
<img src="securityimage.php?refid=0ed393101d240092186f47c3dc80c84e" alt="Security Image">
<input type="hidden" name="security_refid" value="0ed393101d240092186f47c3dc80c84e"> <br>
Enter what you see:
<input name="security_try" type="text" id="security_try" size="20" maxlength="10">
(can't see? try reloading page)
<br>
<br>
<input type="submit" name="Submit" value="Signup!">
</form>
</body>
</html>