Set up the database

For storing poll questions, options and votes, we’ll be using a MySQL database. Here is the database structure required.

There are three tables:

• questions table stores the poll questions.
• options table stores the options of a particular question.
• votes table stores information about each vote cast by the user.

The required SQL code with sample data is provided in source code(below).

The PHP Code

Displaying the poll form

We’ll display the most recent poll question from the database and allow the user to vote for it. Here’s the required PHP code to generate poll form for latest poll question.

$conn=mysql_connect('localhost', 'root', 'password') or die("Can't connect to mysql host");
mysql_select_db("polls");
$query=mysql_query("SELECT id, ques FROM questions ORDER BY id DESC LIMIT 1");
while($row=mysql_fetch_assoc($query)){
	//display question
	echo "<p class=\"pollques\" >".$row["ques"]."</p>";
	$poll_id=$row["id"];
}
//display options with radio buttons
$query=mysql_query("SELECT id, value FROM options WHERE ques_id=$poll_id");
if(mysql_num_rows($query)){
		echo '<div id="formcontainer" ><form method="post" id="pollform" action="'.$_SERVER['PHP_SELF'].'" >';
		echo '<input type="hidden" name="pollid" value="'.$poll_id.'" />';
		while($row=mysql_fetch_assoc($query)){
			echo '<p><input type="radio" name="poll" value="'.$row['id'].'" id="option-'.$row['id'].'" />
			<label for="option-'.$row['id'].'" >'.$row['value'].'</label></p>';
		}
		echo '<p><input type="submit"  value="Submit" /></p></form>';
}

Processing the Submitted Vote

When user selects an answer and submits the form, we add the information to the votes table about the option selected and also set a cookie in user’s browser to identify that he has voted for the poll.

$query=mysql_query("SELECT * FROM options WHERE id='".intval($_POST["poll"])."'");
if(mysql_num_rows($query)){
	$query="INSERT INTO votes(option_id, voted_on, ip) VALUES('".$_POST["poll"]."', '".date('Y-m-d H:i:s')."', '".$_SERVER['REMOTE_ADDR']."')";
	if(mysql_query($query))
	{
		//Vote added to database
		setcookie("voted".$_POST['pollid'], 'yes', time()+86400*300);
	}
	else
		echo "There was some error processing the query: ".mysql_error();
}

In this case we first check to see if the answer to poll question has been provided and whether the user hasnot already voted(code omitted for simplicity) the selected option is there in database or not. Also here we are using intval() function to make sure only integer value for selected option passes through. After checking the information, the user vote is added to the votes table.

Displaying the Results

Once the user has voted, it’s time to display the results to him. We’ll be using the easy way out to display the result using CSS. Here’s the code for that.

$query=mysql_query("SELECT COUNT(*) as totalvotes FROM votes WHERE option_id IN(SELECT id FROM options WHERE ques_id='$poll_id')");
while($row=mysql_fetch_assoc($query))
	$total=$row['totalvotes'];
$query=mysql_query("SELECT options.id, options.value, COUNT(*) as votes FROM votes, options WHERE votes.option_id=options.id AND votes.option_id IN(SELECT id FROM options WHERE ques_id='$poll_id') GROUP BY votes.option_id");
while($row=mysql_fetch_assoc($query)){
	$percent=round(($row['votes']*100)/$total);
	echo '<div class="option" ><p>'.$row['value'].' (<em>'.$percent.'%, '.$row['votes'].' votes</em>)</p>';
	echo '<div class="bar ';
	if($_POST['poll']==$row['id']) echo ' yourvote';
	echo '" style="width: '.$percent.'%; " ></div></div>';
}
echo '<p>Total Votes: '.$total.'</p>';

To display the results from the information we have in votes table, we will use a GROUP BY query to find out votes per option and then set the width of display bar based on percentage of votes each option received.

All the PHP code is in poll.php file.

HTML Structure

HTML structure is quite simple as jQuery will do the heavy lifting. We only need to define a container that will hold the poll form or display the results.

<div id="container" >
	<h1>User Poll</h1>
	<div id="pollcontainer" >
	</div>
	<p id="loader" >Loading...</p>
</div>

The JavaScript Code

Loading the Poll Form

On page load, we will load and display the poll form to user and if user has already voted, then results will be displayed.

var loader=$('#loader');
	var pollcontainer=$('#pollcontainer');
	loader.fadeIn();
	//Load the poll form
	$.get('poll.php', '', function(data, status){
		pollcontainer.html(data);
		animateResults(pollcontainer);
		pollcontainer.find('#viewresult').click(function(){
			//if user wants to see result
			loader.fadeIn();
			$.get('poll.php', 'result=1', function(data,status){
				pollcontainer.fadeOut(1000, function(){
					$(this).html(data);
					animateResults(this);
				});
				loader.fadeOut();
			});
			//prevent default behavior
			return false;
		})

Processing User Vote

To process the user vote, we first check to see if user has selected one of the options and then post the form data to poll.php and then display the results to the user in a nice animated way using the function animateResults.

('#pollform').submit(function(){
			var selected_val=$(this).find('input[name=poll]:checked').val();
			if(selected_val!=''){
				//post data only if a value is selected
				loader.fadeIn();
				$.post('poll.php', $(this).serialize(), function(data, status){
					$('#formcontainer').fadeOut(100, function(){
						$(this).html(data);
						animateResults(this);
						loader.fadeOut();
					});
				});
			}
			//prevent form default behavior
			return false;
		});

Download the complete source code and try it out for yourself.

Remember to set up database and tables using polls.sql file provided in source code and update database information in the poll.php file before trying out.

Note: In this tutorial, i have only covered the user interface part of the user poll script. You’ll have to code the user interface for creating new polls or manually have to add questions and options in the tables. The sample database file provided with the source code contains a sample poll question along with some sample data.

Related Posts

1. AJAX Multiple File Upload Form Using jQuery
2. Integrate Customized reCaptcha in your PHP Application

1. Facebook type image rotation and more using PHP and Javascript

How does facebook rotate images in gallery. Here’s a nice solution using the inbuilt imagerotate functionality in PHP. View Demo »

2. Retrieve Google Analytics Visits and Pageviews with PHP

Learn how to integrate Google Analytics data into your website using an easy to use PHP API
View Demo »

3. Caching Dynamic PHP pages easily

Learn how to cache database intensive heavy pages and serve the static html cached files utilizing the output buffering in PHP

4. Reading Excel Sheet in PHP

In this article you will learn, how you can read Microsoft Excel Sheet in PHP using Open Source Tool PHPExcelReader.

5. XML Parsing in PHP/XPath Way

If you are a PHP developer, you surely must have done XML parsing at some stage or the other. Parsing XML using XPath is far more better than other techniques, not only because it’s quite simple but also because it’s extendable.

6. Retrieve Your Gmail Emails Using PHP and IMAP

Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time.
View Demo »

7. Directory Trees With PHP and jQuery

A simple way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for.

8. Send Hassle Free and dependable HTML emails with PHP

A simple straightforward function that sends HTML e-mails with a plain text counterpart for those over 80 and still using AOL 2.5.

9. How To Use Custom ini Files With PHP

The config file typically holds information that will be used over and over again, such as database info. Today, we will have a look at a simple example of using a custom ini file to set our preferences.

10. From MySQL to jQuery, via PHP, XML & Ajax

This article will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

11. Create a Basic Web Service Using PHP, MySQL, XML, and JSON

Here’s how to create a basic web service that provides an XML or JSON response using some PHP and MySQL.

12. How URL shortner scripts work?

Ever thought of how those URL Shortening services work. Have a look at a nice technique to create your own URL shortening service.

13. Automatic Face Detection in Photos with PHP

Find out how to automatically detect and tag a face in an image.

14. Update Twitter using Command Line, Javascript, Or PHP.

Everyone seems to be all about Twitter so here’s some simple examples of how to update your Twitter status from a command line prompt, web server or simple html web site.

15. Making RESTful Requests in PHP

APIs have become a very commonplace part of many popular web sites and services, especially REST APIs. This article discusses how to get, post, put and delete with a REST API in PHP.

16. PHP Multithreading using CURL

Simultaneously fetch data from multiple websites using CURL’s multithreading option.

17. PHP HTTP Authentication

At times, you may wish to make certain pages of your site only viewable to a select few, you can do this by using PHP’s built in HTTP Authentication.

18. PHP copy directory from source to destination

To copy a directory source to a destination directory you will need to scan the source directory with all files and directory and copy to the destination. To accomplish this we should make a recursive function that will copy the files from source to target dir.

19. File Upload in PHP – Securing the things

Secure your file upload forms and prevent malicious users from attacking your web app.

20. HTML Scraper in PHP

Sometimes we want to extract the HTML content of the remote website page, this technique is called as HTML scraper. This article will discuss on how we can extract the HTML content of the remote webpage.

21. PHP Secure Login Tips and Tricks

In this article, you will get a list of PHP secure login tips and tricks that will definitely help you decide on your secure rating of your login page.

22. Use PHP To Gzip CSS Files

This technique is a powerful and simple way to reduce page download size and speed up your site that will work with most PHP installations

23. Backup Your Database into an XML File Using PHP

The database is the most important part of a web application. Imagine losing all of the data in your database — it would be tragic. Here’s a PHP snippet that outputs your database as XML.

24. How To Debug in PHP

This article breaks down the fundamentals of debugging in PHP, helps you understand PHP’s error messages and introduces you to some useful tools to help make the process a little less painful.

25. Optimizing a php application in 5 minutes

Optimizing means reducing loading and execution times, improving the user experience by making the application reacting more responsively. If your language of choice is php, fortunately this process takes only 5 minutes.

Related Posts

1. 21 Really Useful & Handy PHP Code Snippets

1. Human Readable Random String

This code will create a human readable string that will look more close to dictionary words, useful for captchas.

/**************
*@length - length of random string (must be a multiple of 2)
**************/
function readable_random_string($length = 6){
    $conso=array("b","c","d","f","g","h","j","k","l",
    "m","n","p","r","s","t","v","w","x","y","z");
    $vocal=array("a","e","i","o","u");
    $password="";
    srand ((double)microtime()*1000000);
    $max = $length/2;
    for($i=1; $i<=$max; $i++)
    {
    $password.=$conso[rand(0,19)];
    $password.=$vocal[rand(0,4)];
    }
    return $password;
}

2. Generate a Random String

If you don’t need human readable string, then use this function instead, which will create a random string you can use for user id’s etc.

/*************
*@l - length of random string
*/
function generate_rand($l){
  $c= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  srand((double)microtime()*1000000);
  for($i=0; $i<$l; $i++) {
	  $rand.= $c[rand()%strlen($c)];
  }
  return $rand;
 }

3. Encode Email Address

With this snippet, you can encode any email address into HTML entities so that spam bots do not find it.

function encode_email($email='info@domain.com', $linkText='Contact Us', $attrs ='class="emailencoder"' )
{
	// remplazar aroba y puntos
	$email = str_replace('@', '@', $email);
	$email = str_replace('.', '.', $email);
	$email = str_split($email, 5);

	$linkText = str_replace('@', '@', $linkText);
	$linkText = str_replace('.', '.', $linkText);
	$linkText = str_split($linkText, 5);

	$part1 = '<a href="ma';
	$part2 = 'ilto&#58;';
	$part3 = '" '. $attrs .' >';
	$part4 = '</a>';

	$encoded = '<script type="text/javascript">';
	$encoded .= "document.write('$part1');";
	$encoded .= "document.write('$part2');";
	foreach($email as $e)
	{
			$encoded .= "document.write('$e');";
	}
	$encoded .= "document.write('$part3');";
	foreach($linkText as $l)
	{
			$encoded .= "document.write('$l');";
	}
	$encoded .= "document.write('$part4');";
	$encoded .= '</script>';

	return $encoded;
}

4. Validate email Address

E-mail validation is perhaps the most used validation in web forms, this code will validate email address and also optionally check the MX records of the domain provided in email address to make email validation more robust.

function is_valid_email($email, $test_mx = false)
{
	if(eregi("^([_a-z0-9-]+)(\.[_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,4})$", $email))
		if($test_mx)
		{
			list($username, $domain) = split("@", $email);
			return getmxrr($domain, $mxrecords);
		}
		else
			return true;
	else
		return false;
}

5. List Directory Contents

function list_files($dir)
{
	if(is_dir($dir))
  	{
  		if($handle = opendir($dir))
  		{
  			while(($file = readdir($handle)) !== false)
  			{
  				if($file != "." && $file != ".." && $file != "Thumbs.db")
  				{
  					echo '<a target="_blank" href="'.$dir.$file.'">'.$file.'</a><br>'."\n";
  				}
  			}
  			closedir($handle);
  		}
	}
}

6. Destroy Directory

Delete a directory including its contents.

/*****
*@dir - Directory to destroy
*@virtual[optional]- whether a virtual directory
*/
function destroyDir($dir, $virtual = false)
{
	$ds = DIRECTORY_SEPARATOR;
	$dir = $virtual ? realpath($dir) : $dir;
	$dir = substr($dir, -1) == $ds ? substr($dir, 0, -1) : $dir;
	if (is_dir($dir) && $handle = opendir($dir))
	{
		while ($file = readdir($handle))
		{
			if ($file == '.' || $file == '..')
			{
				continue;
			}
			elseif (is_dir($dir.$ds.$file))
			{
				destroyDir($dir.$ds.$file);
			}
			else
			{
				unlink($dir.$ds.$file);
			}
		}
		closedir($handle);
		rmdir($dir);
		return true;
	}
	else
	{
		return false;
	}
}

7. Parse JSON Data

With most of the popular web services like Twitter providing their data through APIs, it is always helpful to know how to parse API data which is sent in various formats including JSON, XML etc.

$json_string='{"id":1,"name":"foo","email":"foo@foobar.com","interest":["wordpress","php"]} ';
$obj=json_decode($json_string);
echo $obj->name; //prints foo
echo $obj->interest[1]; //prints php

8. Parse XML Data

//xml string
$xml_string="<?xml version='1.0'?>
<users>
   <user id='398'>
      <name>Foo</name>
      <email>foo@bar.com</name>
   </user>
   <user id='867'>
      <name>Foobar</name>
      <email>foobar@foo.com</name>
   </user>
</users>";

//load the xml string using simplexml
$xml = simplexml_load_string($xml_string);

//loop through the each node of user
foreach ($xml->user as $user)
{
   //access attribute
   echo $user['id'], '  ';
   //subnodes are accessed by -> operator
   echo $user->name, '  ';
   echo $user->email, '<br />';
}

9. Create Post Slugs

Create user friendly post slugs from title string to use within URLs.

function create_slug($string){
	$slug=preg_replace('/[^A-Za-z0-9-]+/', '-', $string);
	return $slug;
}

10. Get Real IP Address of Client

This function will fetch the real IP address of the user even if he is behind a proxy server.

function getRealIpAddr()
{
	if (!empty($_SERVER['HTTP_CLIENT_IP']))
	{
		$ip=$_SERVER['HTTP_CLIENT_IP'];
	}
	elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))
	//to check ip is pass from proxy
	{
		$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
	}
	else
	{
		$ip=$_SERVER['REMOTE_ADDR'];
	}
	return $ip;
}

11. Force file Download

Provide files to the user by forcing them to download.

/********************
*@file - path to file
*/
function force_download($file)
{
    if ((isset($file))&&(file_exists($file))) {
       header("Content-length: ".filesize($file));
       header('Content-Type: application/octet-stream');
       header('Content-Disposition: attachment; filename="' . $file . '"');
       readfile("$file");
    } else {
       echo "No file selected";
    }
}

12. Creating a Tag Cloud

function getCloud( $data = array(), $minFontSize = 12, $maxFontSize = 30 )
{
	$minimumCount = min($data);
	$maximumCount = max($data);
	$spread       = $maximumCount - $minimumCount;
	$cloudHTML    = '';
	$cloudTags    = array();

	$spread == 0 && $spread = 1;

	foreach( $data as $tag => $count )
	{
		$size = $minFontSize + ( $count - $minimumCount )
			* ( $maxFontSize - $minFontSize ) / $spread;
		$cloudTags[] = '<a style="font-size: ' . floor( $size ) . 'px'
		. '" class="tag_cloud" href="#" title="\'' . $tag  .
		'\' returned a count of ' . $count . '">'
		. htmlspecialchars( stripslashes( $tag ) ) . '</a>';
	}

	return join( "\n", $cloudTags ) . "\n";
}
/**************************
****   Sample usage    ***/
$arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43,
	'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42,
	'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30,
	'Extract' => 28, 'Filters' => 42);
echo getCloud($arr, 12, 36);

13. Find Similarity Between Two Strings

PHP includes a function similar_text very rarely used but quite useful that compares two strings and returns the percentage of similarity between two.

similar_text($string1, $string2, $percent);
//$percent will have the percentage of similarity

14. Use Gravatars in Your Application

With ever increasing popularity of WordPress, Gravatars have become quite popular. It is very easy to integrate them into your application as they provide a very easy to use API.

/******************
*@email - Email address to show gravatar for
*@size - size of gravatar
*@default - URL of default gravatar to use
*@rating - rating of Gravatar(G, PG, R, X)
*/
function show_gravatar($email, $size, $default, $rating)
{
	echo '<img src="http://www.gravatar.com/avatar.php?gravatar_id='.md5($email).
		'&default='.$default.'&size='.$size.'&rating='.$rating.'" width="'.$size.'px"
		height="'.$size.'px" />';
}

15. Truncate Text at Word Break

This function will truncate strings only at word breaks which can be used to show a teaser for complete article without breaking words.

// Original PHP code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
function myTruncate($string, $limit, $break=".", $pad="...") {
	// return with no change if string is shorter than $limit
	if(strlen($string) <= $limit)
		return $string; 

	// is $break present between $limit and the end of the string?
	if(false !== ($breakpoint = strpos($string, $break, $limit))) {
		if($breakpoint < strlen($string) - 1) {
			$string = substr($string, 0, $breakpoint) . $pad;
		}
	}
	return $string;
}
/***** Example ****/
$short_string=myTruncate($long_string, 100, ' ');

16. Zip Files on the Fly

/* creates a compressed zip file */
function create_zip($files = array(),$destination = '',$overwrite = false) {
	//if the zip file already exists and overwrite is false, return false
	if(file_exists($destination) && !$overwrite) { return false; }
	//vars
	$valid_files = array();
	//if files were passed in...
	if(is_array($files)) {
		//cycle through each file
		foreach($files as $file) {
			//make sure the file exists
			if(file_exists($file)) {
				$valid_files[] = $file;
			}
		}
	}
	//if we have good files...
	if(count($valid_files)) {
		//create the archive
		$zip = new ZipArchive();
		if($zip->open($destination,$overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) {
			return false;
		}
		//add the files
		foreach($valid_files as $file) {
			$zip->addFile($file,$file);
		}
		//debug
		//echo 'The zip archive contains ',$zip->numFiles,' files with a status of ',$zip->status;

		//close the zip -- done!
		$zip->close();

		//check to make sure the file exists
		return file_exists($destination);
	}
	else
	{
		return false;
	}
}
/***** Example Usage ***/
$files=array('file1.jpg', 'file2.jpg', 'file3.gif');
create_zip($files, 'myzipfile.zip', true);

Source: David Walsh

17. Unzip Zip File

/**********************
*@file - path to zip file
*@destination - destination directory for unzipped files
*/
function unzip_file($file, $destination){
	// create object
	$zip = new ZipArchive() ;
	// open archive
	if ($zip->open($file) !== TRUE) {
		die (’Could not open archive’);
	}
	// extract contents to destination directory
	$zip->extractTo($destination);
	// close archive
	$zip->close();
	echo 'Archive extracted to directory';
}

18. Prepend http to a URL

Some times you need to accept some url as input but users seldom add http:// to it, this code will add http:// to the URL if it’s not there.

if (!preg_match("/^(http|ftp):/", $_POST['url'])) {
   $_POST['url'] = 'http://'.$_POST['url'];
}

19. Convert URLs within String into hyperlinks

This function converts URLs and e-mail addresses within a string into clickable hyperlinks.

function makeClickableLinks($text) {
 $text = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_+.~#?&//=]+)',
 '<a href="\1">\1</a>', $text);
 $text = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_+.~#?&//=]+)',
 '\1<a href="http://\2">\2</a>', $text);
 $text = eregi_replace('([_.0-9a-z-]+@([0-9a-z][0-9a-z-]+.)+[a-z]{2,3})',
 '<a href="mailto:\1">\1</a>', $text);

return $text;
}

20. Resize Images on the fly

Creating thumbnails of the images is required many a times, this code will be useful to know about the logic of thumbnail generation.

/**********************
*@filename - path to the image
*@tmpname - temporary path to thumbnail
*@xmax - max width
*@ymax - max height
*/
function resize_image($filename, $tmpname, $xmax, $ymax)
{
	$ext = explode(".", $filename);
	$ext = $ext[count($ext)-1];

	if($ext == "jpg" || $ext == "jpeg")
		$im = imagecreatefromjpeg($tmpname);
	elseif($ext == "png")
		$im = imagecreatefrompng($tmpname);
	elseif($ext == "gif")
		$im = imagecreatefromgif($tmpname);

	$x = imagesx($im);
	$y = imagesy($im);

	if($x <= $xmax && $y <= $ymax)
		return $im;

	if($x >= $y) {
		$newx = $xmax;
		$newy = $newx * $y / $x;
	}
	else {
		$newy = $ymax;
		$newx = $x / $y * $newy;
	}

	$im2 = imagecreatetruecolor($newx, $newy);
	imagecopyresized($im2, $im, 0, 0, 0, 0, floor($newx), floor($newy), $x, $y);
	return $im2;
}

21. Detect AJAX Request

Most of the JavaScript frameworks like jQuery, mootools send and additional HTTP_X_REQUESTED_WITH header when they make an AJAX request, so that you can detect AJAX request on server side.(source)

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
	//If AJAX Request Then
}else{
//something else
}

If you would like to recommend a snippet to include in this list to make this list a more useful resource, tell us about it in comments below.

Related Posts

1. 25 New & Useful PHP Techniques & Tutorials
2. AJAX User Poll Using jQuery and PHP
3. Integrate Customized reCaptcha in your PHP Application

We’ll be using phpThumb, the open source PHP script to generate thumbnails on the fly.

Download and extract phpThumb to somewhere in your website folder. Now to use a rounded corner thumbnail of an image, simply use the img tag of HTML with src as

<img src=”phpThumb.php?src=test.jpg&w=200&h=150&fltr[]=ric|20|20&f=png” />

Adjust the path to phpThumb according to where you place the phpThumb files. Now we have passed 5 parameters to phpThumb.php namely,

1. src is the path to image file relative to phpThumb.php

2. w & h are width and height of the resulting thumbnail

3. fltr is used to tell phpThumb to generate rounded corner thumbnail with first numeric value as horizontal radius of the rounded corner and second as vertical radius in pixels.

4. The last parameter f is used to control the output image format of the thumbnail, namely png, jpg or gif. We are using png as it can render images with transparent corners which can be used on any background.

That’s it, you have cool looking thumbnails with rounded corners.

Related Posts

1. How To Use Thumbnails Generated By WordPress In Your Theme

Captchas are an essential part of an online web form to prevent automated spam bots accessing your application. Though creating captchas is not a rocket science in PHP and can be easily integrated into web based forms but creating a more usable and accesible captcha which can even read out captchas on the fly is a tough job.

But with reCaptcha this won’t be a big task. reCaptcha is a free captcha service that lets you integrate more accessible and friendly captchas into your web application, it shows words from various digitized books rather than creating a cryptic code generated from a random string and can read out captchas to the user.

Here’s how to integrate a customized reCaptcha into your PHP based web application.

1. Get reCaptcha API Key

First of all, you’ll need to sign up with reCaptcha for an API key to use the captchas in your application. You can get an API key fo either a single domain or if you have multiple websites, you can sign up for a global key that’ll work across domains.

After signing up, you’ll have two keys one Public an other Private.

2. Download reCaptcha Library

You don’t have to mess around with fsock functions to talk to reCaptcha service, they provide a library that’ll let you access reCaptcha service easily. Just downloa the latest reCaptcha library and place it in your application folder.

3. Add Captcha to your Form

Now to include captcha in your form, you need to include the recaptcha library you downloaded earlier into your form page and output the recaptcha widget. You’ll need your Public API key to display the captcha. Here’s the sample code that you should add to Form page, make sure it is compiled by php.

//Include anywhere within the form tag of your page
<?php
require_once('recaptchalib.php');//change path to where you placed the library
$publickey = "..."; // your public reCaptcha Key
echo recaptcha_get_html($publickey);
?>

4. Process the captcha

Now when the form is submitted, you’ll need to check the validity of the captcha and if it is ok then proceed to process rest of the form. In order to check the captcha, you’ll need the private API key and then use the recaptcha_check_answer function to check the validity.  Here’s the sample code to be include on the php page that processes the submitted form.

require_once('recaptchalib.php');
$privatekey = "...";//Your Private Key
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);
if (!$resp->is_valid)
        echo "<p style=\"color:red; \">The entered value doesn't match that of the shown string ".$rep->error."</p>";
else
        echo "<p style=\"color:green; font-weight:bold;\" >Form OK</p>";

With this, your captcha is ready to roll, but wait there is more to look for.

5. Customizing the reCaptcha widget

By default, the reCaptcha widget shows up in red theme. There are other themes you can use namely white, blackglass and clean. To use a different theme, add this into the head section of the page on which form is displayed.

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : '<theme name here>'
 };
 </script>

And if you’d like to have your own custom theme, you can certainly do that.

6. Creating your own Custom Theme

The captcha image and textbox in which value is to be entered is mandatory to use recaptcha, other elements like refresh, switch to audio are optional. Now in your form tag create a div element with id as recaptcha_image and a text input box with name and id set to recaptcha_response_field.

And to avoid screen flickering while recaptcha loads, you can include all the widget elements within a div having an inline style of display:none.

Here’s the code to include within the form tag. Code is self-explanatory.

<div id="divrecaptcha" style="display:none;">

    <div id="controls"><a href="#" onclick="Recaptcha.reload(); " >Get another Captcha</a> <br />
       <a href="#" onclick="javascript:Recaptcha.switch_type('audio');" class="recaptcha_only_if_image" >Get Audio Captcha</a>
       <a href="#" onclick="Recaptcha.switch_type('image'); " class="recaptcha_only_if_audio" >Get Text Captcha</a> <br />
       <a href="#" onclick="Recaptcha.showhelp();" >Help</a>
     </div>

       <div id="recaptcha_image"></div><!--Important-->
    <p>
 <input type="text" name="recaptcha_response_field" id="recaptcha_response_field"  /><!--Important-->
<span class="recaptcha_only_if_image">Enter the words shown above separated by space</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear</span></p>

     </div>
     <?php
    require_once('recaptchalib.php');
    $publickey = "..."; // your public API key
    echo recaptcha_get_html($publickey);
    ?>

And in the head section of the form page, add this code.

<script type="text/javascript" >
 var RecaptchaOptions = {
    theme : 'custom',
    lang: 'en',
    custom_theme_widget: 'divrecaptcha' //div enclosing widget elements
 };
</script>

I added some styles to the widget elements in order to give an idea. You can apply any style to the elements you want.

<style type="text/css" >
#divrecaptcha{
    width:500px;
    font-size:12px; font-family:Arial, Helvetica, sans-serif;
}
#controls{ width:180px; float:right; }
#recaptcha_image{
    padding:2px; background:#f9f9f9;
    border:1px solid #e0e0e0;
}
#recaptcha_response_field {
   border: 1px solid #999 !important; //Text input field border color
   background-color:#ccc !important; //Text input field background color
   width:120px !important;
   padding:5px;
}
#divrecaptcha a{
     font-size:11px;    font-family:Verdana;
    text-decoration:none; color:#3366ff;
}
#divrecaptcha a:hover{
     color:113399; text-decoration:underline;
}
</style>

This completes the customizing of reCaptcha widget and here’s how it looked.