Tony Bhimani's Blog » howto

AJAX: Learn The Basics Without Using Toolkit Libraries

Tony Bhimani — Mon, 24 Oct 2011 05:00:28 +0000

AJAX is one of the popular acronym buzzwords in the world of web development technologies. It stands for Asynchronous JavaScript and XML. What it does is allow you to make your website far more dynamic by updating portions in realtime without page reloads (refreshes). This beginners AJAX tutorial will teach you how to write JavaScript code to do some simple screen updates. It’ll focus on a low-level AJAX implementation meaning JavaScript toolkits like jQuery and script.aculo.us will not be used (future tutorials will make use of these high-level time-saving tools). In my opinion, learning AJAX in this manner is far better because you’ll grasp the concept and it will help you move in the direction of using toolkits to simplify your coding (you must crawl before you can walk…). Also, this AJAX tutorial will be the first post in a series I plan on publishing regarding this subject.

Phase 1: Writing the AJAX JavaScript Code – Making the Call

I first learned AJAX from the W3Schools website and will be using their code base as the foundation for this AJAX tutorial. The first step in working with AJAX is to create an object of XMLHttpRequest. The Firefox, Opera, Safari, and Internet Explorer browsers all handle this differently, however code wise the first three are the same. Internet Explorer (yes, Microsoft) has to take a unique approach (putting it nicely) which is different than the other mainstream web browsers. Getting back on point now, the code below is a modified version of what you can find from the W3Schools AJAX Guide for creating a object for XMLHttpRequest (the interface to make AJAX music).

function GetXmlHttpObject() {
  var xmlHttp = null;
  try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}

The code starts with creating a variable handle for the XMLHttpRequest object and making it null. Within a try and catch block the XMLHttpRequest() method is called. If an object is created then exit the function and return the object. If the object can’t be created then the ActiveX (Microsoft) route is taken by using Msxml2.XMLHTTP and Microsoft.XMLHTTP. If this part fails as well, AJAX isn’t possible with the browser for whatever reason, otherwise after having called this GetXmlHttpObject() function we’ll have an AJAX object to work with. Next we’ll build an AJAX request.

// create xml http object
var objXmlHttp = GetXmlHttpObject();
// open a connection and send the ajax request
objXmlHttp.open("GET", "http://www.domain.com/ajaxresponder.php", true);
objXmlHttp.send();

The AJAX request is composed of a call to the open and send methods of the XmlHttpRequest object. The open method takes three parameters (type of request [GET or POST], URL of the file on the server, and boolean true [asynchronous] or false [synchronous]).

Type of Request: GET or POST? Well, it depends on your requirements but most of the time you will be using GET for your AJAX calls. AJAX is information dependent meaning that what you give it will determine what it gives back to you. For example, say you’re providing a weather service and want to get the temperature for a specific zip code. That zip code would be passed as part of the URL in the query string. The file on the server would accept that input and give the temperature as output.
URL of file on the server: This URL is where the processing of your data happens. The type of file will be a dynamic server-side scripting language such as PHP that can take your input (via GET or POST), process it, and send back formatted output that you will present to the user’s browser. Using the weather example from above, this script would take the zip code and possibly do a database lookup to get the temperature and pass it back to the AJAX caller.
Asynchronous or Synchronous: Once again, depending on your requirements you may choose one option over the other. A high percentage of the time your calls will be asynchronous, which means that once the AJAX call is issued your browser won’t be held up waiting on the response; it can continue doing other tasks and once the response does come in it can be processed. One instance when a synchronous call would be necessary is when the response of a first AJAX call is required by a second call. If you keep it asynchronous then once the first AJAX call is done the second would run right away. There is no guarantee that the first call would be fast enough to get the result to pass to the second call, hence keeping it synchronous forces the order of operations to follow through. Be careful though! If the synchronous call takes a long time processing it can appear that your browser window has locked up!

Phase 2: Crafting a Server-Side PHP Script to Process AJAX Requests

With the JavaScript code in place for invoking the AJAX call the server-side script to handle that call needs to be written. The sole purpose of this script will be to listen for the AJAX call, process the request, and send back output. Because this is AJAX tutorial is being written in a manner with beginners in mind, the server-side script is going to be extremely basic. What it will do is send back a random quote from a famous author. In the next tutorial I’ll take it up a notch by showing you how to integrate a database and fetching data.

I’ll be using PHP to write this server-side script because that is my preferred language, however you can use Perl CGI, Cold Fusion, Microsoft’s Active Server Pages, ASP.NET or another language as long as the server that will be hosting the script can support it. If you don’t know PHP then try and follow along and I’ll explain the code as I go.

This is a very simple PHP script. All it does is define a six string array with the variable name of $quotes_arr. One of those six quotes is chosen at random using the PHP rand() function. What rand() will do is pick a random number between 0 and the size of the array less one (6 – 1 = 5) to serve as an index for choosing a string from the array. Note: PHP arrays are zero-based indexing meaning the first element begins at zero, not one. Finally, using PHP’s echo the chosen quote string is printed out to the browser.

Phase 3: Putting All This AJAX & PHP Coding Stuff Together

The pieces to this AJAX puzzle are on the table, it’s time to fit them together. We’ve learned how to build an AJAX request and what an AJAX processing script can look like, the last step is to build the HTML page that makes use of them. The mechanics will be once the page loads the AJAX request will be made, the famous quote will be received from the server-side script, and the quote will be written to the HTML page. I’ve also included a button that can be clicked to load a new quote when clicked.

AJAX Tutorial: Random Famous Quotes

Random Quote of the Day

You may notice I’ve added some extra code to the AJAX JavaScript section. Because this is an asynchronous call we have to declare an event handler. An event handler is a code block that sits around and waits for an event to occur before it executes its code. Our event handler (JavaScript function) is attached to the onreadystatechange event of the XMLHttpRequest object. It will get executed when the ready state changes. We check two XMLHttpRequest properties readyState and status for specific values. Once these values are attained (readyState of 4 meaning all data has been received and HTTP status of 200) we then use getElementById and change the HTML code between the start and end tags of the P with the id of quotes using this innerHTML property.

Okay, we’ve reached the end of this beginner’s AJAX tutorial. I’ve been talking about AJAX this whole time and I’m sure you’re eager to finally see the AJAX code in action. Below is a link to the sample page where you will see a randomly pulled quote from the PHP AJAX script. Click the Reload Page button to see another quote from the PHP array.

AJAX Tutorial for Beginners: Random Famous Author Quotes

Source Code Download: AJAX Tutorial for Beginners 1 [ No Toolkits ] (Zip)

JavaScript: Controlling a Popup Window’s Parent Window

Tony Bhimani — Mon, 17 Oct 2011 06:47:33 +0000

You may find it useful to control a parent window from a generated popup window, such as being able to manipulate its look, content, etc. One example being a web application I wrote for work. In the portion for entering a new sales order, products are added from a popup search window. When the product being added is selected, a button is clicked and the parent window’s line item table is modified to include the selected product. This is only one example as many others exist. This tutorial will discuss how to launch a popup window and change properties of the parent (colors, fonts, sizes, and styles).

We begin with creating the parent window. There won’t anything fancy with it, just a H1 title, a couple paragraphs of text, and a link to launch the popup window controller. To the left is a screenshot of what our parent window will look like when the HTML has been added. In the code some elements have been added to allow us to use JavaScript to control (manipulate) the contents of the parent window. Namely id attributes for the H1 and P tags for use the the Document Object Method getElementById.

Parent Window HTML + JavaScript Code ( parent-window.html ):

The Parent Window [ JavaScript: Controlling a Popup Window's Parent Window ]

The Parent Window

This is the window that will be controlled by the popup window.

Click the link below to open the popup window controller.

Launch Popup Window

Note: Please disable any popup blocker software if you don't see the popup window.

You’ll see that the code for opening the popup window is located in the href onclick. The JavaScript window.open is called and the popup window filename is passed as the first parameter, followed by a name for the window, and lastly the specs for the window appearance (width, height, hide the menu and status bars).

With the parent window created the next step is to create the popup window. The purpose of the popup window is to control its parent window. For this demonstration it’s accomplished through a series of buttons that call JavaScript functions that alter the parent window’s properties (as seen on the left). I have created buttons that change the window’s background color, the font family for the H1 title, the font size for the first paragraph, the font style for the second paragraph, and to reload the parent window page. Obviously I’m only scratching the surface here as much more can be done with JavaScript to alter the parent window.

Popup Window HTML + JavaScript Code ( popup-window.html ):





The Popup Window [ JavaScript: Controlling a Popup Window's Parent Window ]



The Popup Window

I’m not going to go over all the code. The key to making the popup control the parent is the Window object’s opener property ala window.opener. In my code I assign it to a variable called parent_window which I use throughout my functions. By referencing it in front of the document object you can hook into the window properties of the parent much like you would for any foreground window. Having done so you now have access to getElementById and other Document Object Methods to get a handle to the object. Add some creative JavaScript and you can build some pretty interesting web applications with popup windows.

That’s it in a nutshell so enough talk. I’m sure you want see it in action, so try out the Controlling a Popup Window’s Parent Window Demonstration.

Source Code Download: Control a Parent Window by Popup using JavaScript (Zip)

PHP: Checkbox Arrays with Javascript Usage

Tony Bhimani — Sat, 15 Oct 2011 10:12:22 +0000

If you’ve created HTML forms then you’ll have used checkboxes and radio buttons for gathering user input. Taking it a step further you would link your form with a server-side scripting language such as PHP to capture the user input and process it. Things get a little tricky when you have groups of checkboxes or radio buttons in your form. Once you create a group of these same control types you form what is known as an array. An array is simply an integer-indexed collection of objects. When defining a checkbox or radio button you need to give it a name. This naming convention allows you to access the value of the control object and use it for whatever purpose you need (store it, email it, etc).


 I speak English

 I speak French

Above is an example of two checkboxes for choosing a spoken language. Notice how they both share the same name language to create an array (more precisely a nodelist of elements).

Next I have created a simple function called showMyChoices1 that loops through the checkboxes, creates a message, and displays it using an alert. The variable objCBarray is a handle for the checkbox nodelist acquired by using getElementsByName Document Object Method. Using a for loop to iterate through each checkbox (the loop count is determined by the length property), the checked ones get added to a string called strChoices. After the for loop is finished the length of the string is tested for a value greater than zero. If it tests positive then an alert is shown with the checked values, otherwise a message prompting the user to select a language is shown.

Let’s put it all together (including a button) and see it in action. Try it below.

Here is the code for the JavaScript only version.



 I speak English

 I speak French

If you plan on using PHP to process your form data then the way the checkboxes were named isn’t going to work. PHP requires you to name the variable in an array manner. It’s basically the same as before but you have to add trailing square brackets []. For example, I used language for the name of my checkboxes. To make this work with PHP I’ll need to use language[]. Having made this change the JavaScript function I’ve created won’t work because of the variable name in getElementsByName (be it with or without the brackets, no bueno). Square brackets in JavaScript have a special meaning so two changes need to be made to my code.

The first change is to add an id to the

tag so it can be accessed via getElementById (now I’ll be using this HTML DOM method in place of getElementsByName). The second change is in how I call the getElementById. Notice the notation of how I reference the id of my form and then my checkboxes (BTW, this second function version uses food[] checkboxes). The rest of the function remains the same.

My favorite food is?

Burgers
Pizza
Spaghetti
Tamales

Here is the code for the PHP + JavaScript version.



My favorite food is?
 Burgers

 Pizza

 Spaghetti

 Tamales

All that would be left to do is build a PHP script to process the form submission data and set the script’s file name as the action in the

Guide to Installing Ogre3D on Mac OS X (Xcode + Ogre SDK 1.7.3)

Tony Bhimani — Sun, 26 Jun 2011 01:20:12 +0000

This guide serves as an introduction to getting started with Ogre3D on Mac OS X, namely setting up the development environment and building a basic application. It’ll serve as the first in several series of blog posts I intend to write on the subject. Let me say this first. I am not an expert on Ogre, 3D graphics development or theory, or Macs. I may get the jargon wrong and my instructions may not work for very system, so contacting me for help may not the best thing to do, however I’ll do what I can to assist if you do.

There is a lot of information on Ogre in general on the Internet, but not too much on configuring it on Mac or Linux. I will write a document for installing Ogre on Linux at a later date, but for now it’s OSX time. Also, you should definitely visit the Ogre Wiki after reading this tutorial for even more information.

Step 1 – Download & Install Apple Xcode IDE

To get started, you should first get the Xcode IDE if you don’t already have it. Apple makes it available as a free download after you create an account on their website (the 3.x version is free at the time of this writing). Visit the Apple Developer Website to download a copy of the Xcode 3 IDE. After you download Xcode, then install it. I’m not going into detail for this step as it’s very straightforward to install the Xcode IDE.

Step 2 – Download & Install NVIDIA Cg Toolkit

The NVIDIA CG Toolkit isn’t required but is needed for the Ogre Cg Program Manager. To install the toolkit, you’ll need to go to the NVIDIA developer website, create a login if you don’t already have one, then download the Mac OS X DMG image. To do this, visit the NVIDIA Developer Cg Toolkit Page and scroll to the bottom of the page. Click on the download link. On the Access Denied page, click on the Login link. Proceed to create an account by clicking on the Create new account tab. Go back to the download page and fetch the Mac OS X file image. Install the NVIDIA Cg Toolkit it like you would any other Mac setup package.

Step 3 – Download & Install Ogre SDK 1.7.3 & OSX Dependencies

At the time of this article the current version of Ogre3D is 1.7.3. To keep things simple we’ll be installing the prebuilt release of Ogre SDK for OS X instead of compiling from source. To get started, we have to visit the Ogre3D website and download the Ogre 1.7.3 SDK for Mac OS X. On that page there is a link to the latest Mac OS X Ogre3D release. Download the Ogre SDK to your computer (it’ll be a .DMG Apple Disk Image File). Double-click the Ogre SDK DMG to mount the disk image.

You’ll be greeted with an Ogre SDK window (as shown on the left). There is a blue folder called OgreSDK in that window, ctrl-click (aka right-click) on that folder and select the Copy “OgreSDK” menu option. Paste the folder to your hard drive (I recommend the root, that being /OgreSDK). Open a Finder window, select your hard drive under Devices, ctrl-click and Paste the OgreSDK folder.

As you can see from the image to the right, the OgreSDK folder is quite large so the copy process may take a moment. When it’s done we move on to the next step, that being installing the Ogre dependency files. There is a zip file containing dependencies we’ll need to be able to build our own Ogre Mac OSX applications, and these dependencies are boost, FreeImage, freetype, OIS, and zzip.

The Ogre Mac OSX dependencies zip file is located on SourceForge. When you get there, follow the ogre-dependencies-mac -> 1.7 folder path. Download the file OgreDependencies_OSX_20110208.zip and extract its contents. You’ll get a folder called Dependencies. Move that folder into the /OgreSDK folder (or wherever you put yours).

Step 4 – Download & Install Ogre Xcode Templates

Xcode templates are available for creating minimal Ogre3D Mac Projects. The Mac OS X Universal Precompiled Dependencies for OSX and iOS can be found of the SourceForge website. There are two installer versions available: the one that has Ogre templates for Xcode 3 and the other for Xcode 4. My directions are made for Xcode 3 so that is the Ogre template installer I’ll be using. I can’t tell you if my directions will work for Xcode 4 since I don’t have it to test against.

Okay, so first thing is to download the Ogre Xcode template installer package. Visit the Ogre SourceForge Files website. Download the Ogre_Xcode_Templates_20101211.pkg.zip file to your Desktop or some other location on your Mac, extract the Ogre Xcode Templates Package from the zip file, and launch the installer by double-clicking on the package.

On Step 5 of the installer you’ll be asked for the paths to the OSX and iOS Ogre SDK locations. I haven’t discussed the iOS iPhone SDK release of Ogre and we’ve only installed the OSX version, so for now choose the Find Ogre button for the OSX option. Point to the /OgreSDK path (or to the location where you decided to install the Ogre SDK). Wrap up the rest of the installation by clicking Continue and finally Close.

Step 5 – Create a Mac OSX Ogre Project From The Xcode Template

Fire up Xcode and create a new Ogre3D project. You’ll notice on the left side there is now an Ogre section under User Templates. Click on Ogre and there are two template to choose from: iPhone OS and Mac OS X. I’m going to save the iPhone stuff for my next Ogre tutorial, so for now pick Mac OS X and click the Choose button. When the Xcode popup dialog appears point it to the location where you’d like to save your Ogre project and give it a name (e.g. OgreDemo).

You should now be looking at your Ogre Xcode Project. You may notice that there is some text in red (it indicates a problem). Basically, these files are broken, the paths don’t resolve. This is caused by a bug in the Ogre Xcode Templates. Step 6 below will resolve this issue. If you attempt to build the project, you’ll receive over 200 errors.

I recommend you familiarize with Xcode if you’ve never used it before. You can find documentation on the Apple Developer Website. Follow this link for the User Guide – Xcode 4 User Guide: About Xcode 4.

Step 6 – Resolving the Ogre Xcode Template Bugs

This next phase deals with fixing some bugs that exist within the Ogre Xcode Templates. What we need to do is correct some Framework and .dylib paths, change the Mac Base SDK, Xcode project format, GCC compiler version, alter the header and library search paths, and make these changes permanent for future projects. Let’s get started.

1) Correct the Framework and .dylib paths – We’ll start with Cg.framework. Ctrl-click it and select Get Info. When the info box displays you’ll see the path is red. There is a Choose button to the far right of the window, click that and navigate to this file system path /Library/Frameworks and select Cg.framework then click the Choose button. On the info screen the path is now black. Hit the close button in the upper left of the window.

Follow this same procedure for the following files:

Ogre.framework – /OgreSDK/lib/release/Ogre.framework
libOIS.a – /OgreSDK/lib/release/libOIS.a
Plugin_CgProgramManager.dylib – /OgreSDK/lib/Plugin_CgProgramManager.dylib
Plugin_OctreeSceneManager.dylib – /OgreSDK/lib/Plugin_OctreeSceneManager.dylib
RenderSystem_GL.dylib – /OgreSDK/lib/RenderSystem_GL.dylib

2) Change the Mac Base SDK, Xcode project format, and GCC compiler version – Go to the Project menu and select Edit Project Settings option. On the info screen’s General tab, change the Xcode Project Format to Xcode 3.1-compatible and Base SDK for All Configurations to Mac OS X 10.6. Click on the Build tab, All Configurations, scroll down to the Compiler Version section, and for C/C++ Compiler Version change the value to System default (GCC 4.2). Close the info window.

3) Alter the Header and Library Search Paths – Go back to the Project menu and select the Edit Active Target “Project Name” option (Project Name will be what you chose to name your project when you created it). Click on the Build tab, All Configurations, and scroll down to the Search Paths section. There are three lines we’re interested in: Framework Search Paths, Header Search Paths, and Library Search Paths. You’ll see that the paths prefix with _OGRESDK_ROOT_. This was supposed to be replaced with the Ogre SDK install location (aka /OgreSDK) you selected during the Xcode Template installation. To correct this we’ll edit each entry and replace _OGRESDK_ROOT_ with /OgreSDK. Close the window when you’re done.

Amendment – July 4, 2011

Change the boost headers directory from boost_1_42 to boost_1_46_1 in the header Search Paths. Thanks to Guido for pointing this out.

That’s it for the changes. Build your project (Build menu -> Build and Run option). You shouldn’t receive any build errors (if you did, check all the setting changes from above and make sure you didn’t miss something). When the demo launches there will be a settings window, accept the defaults and click the OK button. Tada! It’s an Ogre!

Press the Escape key to exit the Ogre3D program. There is still one last thing to do.

4) Make the Changes Permanent for Future Projects – The changes we’ve made are for this project only, so how do we apply them to any future projects created from the Ogre Xcode template? Luckily the solution is rather simple. Our modified project contains a settings file called project.pbxproj that holds the paths of all the frameworks, headers, libraries, and etc we applied as well as more information that isn’t relevant to our topic. ~~All we have to do is copy the project.pbxproj file and overwrite the version that came with the Ogre Xcode Templates.~~

Open your Ogre project folder. Inside there is an item called PROJECT.xcodeproj (where PROJECT is the name of the project you created). Ctrl-click the xcodeproj and select Show Package Contents. Next copy the project.pbxproj file (ctrl-click, copy) and open a new Finder window. Navigate to the Ogre Xcode Templates file system path shown below.

~~/Library/Application Support/Developer/Shared/Xcode/Project Templates/Ogre/Mac OS X~~

Here you’ll find the project template files that Xcode uses to create your Ogre3D projects. Move into the xcodeproj folder (ctrl-click, Show Package Contents) and paste the project.pbxproj you copied earlier. Replace the existing version. Technically we are done but we should change the file’s permissions to match.

Open a Terminal window (Applications -> Utilities -> Terminal). Navigate to the same Ogre Xcode Templates path from above. Change ownership of the project.pbxproj using the chown command. The full list of commands are show in the image.

computer:~ tony$ cd /Library/Application\ Support/Developer/Shared/Xcode/Project\ Templates/Ogre/Mac\ OS\ X/
computer:~ tony$ cd ___PROJECTNAME___.xcodeproj/
computer:~ tony$ sudo chown root:admin project.pbxproj

Amendment – July 4, 2011

In my haste of making this tutorial I didn’t completely test every aspect. The stricken out text above was for copying the OgreDemo project’s project.pbxproj settings file on top of the Ogre Xcode Project template’s version. The problem is that some settings then become hard-coded to use a file name of OgreDemo and the project won’t build unless it has the same exact name. Obviously that won’t work. You could rename but that defeats the purpose of a template. So we’ll be making modifications to the Ogre Xcode project template project.pbxproj directly this time around. We’re also going to bypass the copy, paste, ownership stuff, and use nano for editing to make the changes. Open a Terminal and issue the commands below.

computer:~ tony$ cd /Library/Application\ Support/Developer/Shared/Xcode/Project\ Templates/Ogre/Mac\ OS\ X/
computer:~ tony$ cd ___PROJECTNAME___.xcodeproj/
computer:~ tony$ sudo nano project.pbxproj

Make the following changes to the Ogre Xcode Template project.pbxproj settings file. I’ve included the line numbers for your information. To see what line number you’re on in nano, press ctrl-c. [ Control-C ]

Replace libois.a with libOIS.a
[ Lines 16, 73, 98, 126 ]

Replace boost_1_42 with boost_1_46_1
[ Lines 311, 342 ]

Replace the path to Cg.framework _OGRESDK_ROOT_/Dependencies with /Library/Frameworks
[ Line 71 ]

Replace all _OGRESDK_ROOT_ with your Ogre SDK path /OgreSDK
[ Lines 72-73, 76-78, 299-300, 309-312, 318-320, 333-334, 340-343, 349-351 ]

Fix the Build Configurations (Debug & Release)
Change ARCHS = “$(ONLY_ACTIVE_ARCH_PRE_XCODE_3_1)”; to ARCHS = “$(ARCHS_STANDARD_32_BIT)”;
Change GCC_VERSION = 4.0; to GCC_VERSION = “”;
Change ONLY_ACTIVE_ARCH_PRE_XCODE_3_1 = “$(NATIVE_ARCH)”; to ONLY_ACTIVE_ARCH = YES;
Change SDKROOT = /Developer/SDKs/MacOSX10.4u.sdk; to SDKROOT = /Developer/SDKs/MacOSX10.6.sdk;
[ Lines 360, 363, 366, 368 ] and [ Lines 375, 377, 380, 382 ]

Once you’ve made all the changes to the Ogre Xcode Template project.pbxproj, save the file by pressing ctrl-o. [ Control-O ] and ctrl-x [ Control-X ] to exit nano. Now any project created from the Ogre Xcode Templates will compile and from any name you save your project as.

That concludes this tutorial on installing the Ogre SDK 1.7.3 on a Mac OS X system. Any future Xcode projects you create using the Ogre Xcode Template won’t need changes to compile out the door. Stay tuned for more Ogre3D Mac articles from me.

Creating Captcha Images with PHP and the GD Library

Tony Bhimani — Sat, 02 Feb 2008 06:34:01 +0000

A long time ago I wrote some code to create captcha images using PHP. The goal was to create similar or exact representations of the captcha’s used on Yahoo’s Overture. I really don’t have an answer why I chose their style except that it’s possible I liked the way they looked. I am sharing this code for creating the images but it’s up to you to create some logic in applying their use with HTML forms (I’ll give some hints at the end of this post).

This is the code to create the image. It returns an image resource identifier. Note the use of a custom TrueType font — you’ll need to change that line to the path of a font on your system.

 1=black, 2=white, 3=grey (more colors can be added)
  // lines -> black bg (1=white or 2=grey), white bg (1=black or 2=grey), grey bg (black only)
  $randval = rand(1, 3);
  if ($randval == 1) {
    $bgcolor = $black;
    $fontcolor = $white;
    $linecolor = ((rand(0, 1) == 0) ? $black : $white);
  } elseif ($randval == 2) {
    $bgcolor = $white;
    $fontcolor = $black;
    $linecolor = ((rand(0, 1) == 0) ? $black : $white);
  } else {
    $bgcolor = $grey;
    $fontcolor = $black;
    $linecolor = ((rand(0, 1) == 0) ? $black : $grey);
  }

  // line positioning and increment
  $x_start = rand(0, 10);
  $x_size = rand(5, 10);
  $y_start = rand(0, 10);
  $y_size = rand(5, 10);

  // fill with background color
  imagefill($im, 0, 0, $bgcolor);

  // initial x position
  $font_x = 10;

  // write text
  for ($i = 0; $i < strlen($security_code); $i++) {
    // font size -> 20 to 35
    $font_size = rand(25, 35);
    // font angle -> -20 to +20
    $font_angle = rand(0, 20);
    if ($font_angle != 0) { if (rand(0, 1) == 0) { $font_angle = -$fone_angle; } }
    // font y position -> if font_size <= 27 then 30 to 35, if font_size > 27 then 30 to 35
    if ($font_size <= 27) { $font_y = rand(25, 30); } else { $font_y = rand(30, 35); }
    // write the text
    imagettftext($im, $font_size, $font_angle, $font_x, $font_y, $fontcolor, $font, $security_code{$i});
    // one more time to make it bolder
    imagettftext($im, $font_size, $font_angle, $font_x+1, $font_y+1, $fontcolor, $font, $security_code{$i});
    // next font x position
    $font_x += ($font_size + 5);
  }

  // draw horizontal lines
  for ($y = $y_start; $y < $img_height; $y += $y_size) {
    imageline($im, 0, $y, $img_width, $y, $linecolor);
  }
  // draw vertical lines
  for ($x = $x_start; $x < $img_width; $x += $x_size) {
    imageline($im, $x, 0, $x, $img_height, $linecolor);
  }

  // return captcha image handle
  return $im;
}
?>

We need a method for generating random four character strings when the captcha is created and displayed to the user. This function will do the trick.

With everything in place, we can generate the secret key, create the captcha, and finally display it to the user using this code.

Here is an example of the code in action. The style looks very similar to the images used on Yahoo’s Overture.

Captcha Demo »

Now you know how to create a captcha, so what about verifying the input against the captcha value? This can be accomplished a variety of ways and everyone tends to have their preference.

One method is to save the secret key in a session variable. As the image is created, store the key in a session variable and once the form is submitted, check the user’s value against the one stored in the session. If they match, proceed but if they fail, return an error and don’t process the form data.
If you don’t want to use sessions, you could try using temp files. Store the key in a temp file and pass some value as a query string identifying to the script that the key is in that file. Read in the key and MD5 or SHA1 crypt the key and save it in a hidden form field. When the form is submitted, compare the hashed key against the user input (which you will also hash). Process the form data if the keys match.

You can download the provided source file. Use the PHP file as an image source in your HTML IMG tag.

http://www.yourdomain.com/captcha.php">

Don’t forget to edit the path to the TrueType font you want to use in the captcha_image function. Failure to do so will lead to missing image characters.

Source Files: captcha.zip