Free Code Collection

A good way to avoid automatic form submissions when creating a web form is to add some kind of verification. One of the best ways is to use an image verification, called also captcha. What it does is to dynamically create an image with a random string displayed on it. Then visitor is asked to type that string in a text field and once the form is submitted it checks if the string on the image matches the one inputted by the user. Because there is no easy way to read a text from an image (image recognition) this is a good way to protect your web forms from spammers.
For doing this CAPTCHA I would suggest using a session variable where you store the string generated and displayed on that dynamically generated image.

 MySQL | 
 copy code |
?
 
1
CREATE TABLE `comment` (
2
`name` varchar(50) collate latin1_general_ci NOT NULL,
3
`mail` varchar(50) collate latin1_general_ci NOT NULL,
4
`url` varchar(50) collate latin1_general_ci NOT NULL,
5
`comment` longtext collate latin1_general_ci NOT NULL
6
)

Create a page comment.php and create form for post comments:

 HTML | 
 copy code |
?
 
01
<form name=”commentform” action=”comments-post.php” method=”post” id=”commentform”>
02
<table width=”468? border=”0? cellspacing=”3? cellpadding=”3?>
03
<tr>
04
<td width=”103?>Name</td>
05
<td width=”344?><input name=”name” type=”text” id=”name” tabindex=”1? value=”" size=”18? /></td>
06
</tr>
07
<tr>
08
<td>Mail</td>
09
<td><input type=”text” name=”email” id=”email” value=”" size=”18? tabindex=”2? /></td>
10
</tr>
11
<tr>
12
<td>URL</td>
13
<td><input type=”text” name=”url” id=”url” value=”" size=”18? tabindex=”3? /></td>
14
</tr>
15
<tr>
16
<td>Enter Number </td>
17
<td><input name=”txtNumber” type=”text” id=”txtNumber” value=”" tabindex=”4?/>
18
<img src=”randImages.php”/></td>
19
</tr>
20
<tr>
21
<td>Comment</td>
22
<td><textarea name=”comment” id=”comment” cols=”45? rows=”9? tabindex=”5?></textarea></td>
23
</tr>
24
<tr>
25
<td>&nbsp;</td>
26
<td><input name=”save” type=”submit” class=”submitbutton” id=”save” tabindex=”5? onClick=”MM_validateForm(’name’,”,’R',’email’,”,’RisEmail’,'comment’,”,’R');return document.MM_returnValue” value=”Submit Comment”/></td>
27
</tr>
28
</table>
29
</form>

Now we will create a Image Verification Page which will show Random Images, Save this page as randImages.php.

 PHP | 
 copy code |
?
 
01
session_start();
02
// $Rand Function generate 5 digit random number starting 10000, 99999. You can Edit it as your required.
03
$rand = rand(10000, 99999);
04
// create the hash for the random number and put it in the session
05
$_SESSION['image_random_value'] = md5($rand);
06
// create the image
07
$image = imagecreate(60, 30);
08
// use white as the background image
09
$bgColor = imagecolorallocate ($image, 255, 255, 255);
10
// the text color is black
11
$textColor = imagecolorallocate ($image, 0, 0, 0);
12
// write the random number
13
imagestring ($image, 5, 5, 8, $rand, $textColor);
14
// send several headers to make sure the image is not cached
15
// taken directly from the PHP Manual
16
// Date in the past
17
header(”Expires: Mon, 10 April 2008 05:00:00 GMT”);
18
// always modified
19
header(”Last-Modified: ” . gmdate(”D, d M Y H:i:s”) . ” GMT”);
20
// HTTP/1.1
21
header(”Cache-Control: no-store, no-cache, must-revalidate”);
22
header(”Cache-Control: post-check=0, pre-check=0?, false);
23
// HTTP/1.0
24
header(”Pragma: no-cache”);
25
// send the content type header so the image is displayed properly
26
header(’Content-type: image/jpeg’);
27
// send the image to the browser
28
imagejpeg($image);
29
// destroy the image to free up the memory
30
imagedestroy($image);
31
?>
32
Now Create a page which insert the comment data.
33
session_start();
34
//Enter here your php mysql connection details
35
if(isset($_POST['save'])){
36
$name=$_POST['name'];
37
$email=$_POST['email'];
38
$url=$_POST['url'];
39
$comment=$_POST['comment'];
40
}
41
$number = $_POST['txtNumber'];
42
if (md5($number) == $_SESSION['image_random_value']) {
43
$sql=”INSERT into comment(name, mail, url, comment) values(’$name’, ‘$email’, ‘$url’,
44
‘$comment’)”;
45
$result=mysql_query($sql) or die(’Can not Add Your Comment’);
46
echo “Your Comment have been added. Returning To Write Return page here. Please wait…”;
47
$_SESSION['image_random_value'] = ”;
48
}
49
} else {
50
echo ‘Sorry, wrong Image Varification Number. Please try again’;
51
}
52
?>

The web continues to impress me when I stumble across things that are relatively simple, yet done in such an elegant manner I can’t help but notice. This was the case when I discovered the Javascript overlay techniques of Lightbox, Greybox, and Thickbox.

Lightbox
Lightbox provides functionality to overlay images (with effects) onto your website – without using Flash or other plugins. It is perfect for creating a beautiful image gallery, while still maintaining easy control over your images! Don’t take my word for it, see for yourself: Lightbox JS v2.0

Note: In the same session, I also found a ‘Lite’ version for anyone that wants the same functionality, but with less code (and presumably resources). It is called Litebox 1.0

Litebox is a modified version of Lightbox v2.0created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

Greybox
Greybox provides functionality to overlay HTML pages on your website – it describes itself as a “A pop-up window that doesn’t suck”. Greybox is very useful for providing visitors with additional information, a ‘focus area’ to input data, etc.Here is a demo page that shows the functionality of Greybox. Again, the smooth screen effects that are NOT using flash. SEO and Maintenance are still preserved (Flash experts, don’t flame me).

Thickbox
Last but not least, we have Thickbox. Thickbox combines both Lightbox and Greybox functionality, and still remains light weight – less than 50KB! It was actually the creator’s blog that introduced me to all three examples (Thank you Cody Lindley). You can view the demo to see the Thickbox in action – and notice that it can display overlays for the following extensions: .jpg .jpeg .png .gif .html .htm .cfm .php .asp .aspx .jsp .jst .rb .txt. It also supports AJAX/AXAH calls!



*Note: Inexperienced Javascript users may still consider Lightbox over Thickbox since it has some nice effects that Thickbox does not (example: Previous/Next tabs & hot keys)