• A web server other that that on which the website is hosted
• Cron (if you do not have this, you can use an online service)
• PHP with libcurl support
• PHP with mail support (optional)

Setting up PHP and libcurl

In case you don’t know, libcurl (and it’s cousin cURL) are tools for working with URLs and web pages. Provided that you have libcurl support and PHP, you can check if a site is active by using the following function:

function checkURL($url) {
	$return = array();
	$curl = curl_init(); // Initialize libcurl
	// set options:
	curl_setopt ($curl, CURLOPT_URL, $url ); // URL to visit
	curl_setopt ($curl, CURLOPT_RETURNTRANSFER, TRUE); // returns a string instead of echoing to screen
	curl_setopt($curl, CURLOPT_FOLLOWLOCATION, TRUE); // follows redirects (recursive)
	curl_setopt($curl, CURLOPT_NOBODY, TRUE); // Only get headers, not content (saves on time)
	$result = curl_exec($curl);
	$errno = curl_errno($curl);
	if ( $errno != 0 ) { // curl_errno returns 0 if no error, otherwise returns the error code
		$return['message'] = "An error occurred while trying to $url! ".curl_err($curl); // If there was an error, return the error message
		$return['success'] = false;
	} else {
		$http = curl_getinfo($curl, CURLINFO_HTTP_CODE); // Get the HTTP return code
		$return['code'] = $http;
		if ( $http >= 200 && $http < 300 ) { // An HTTP code greater than 200 and less than 300 means a successful load
			$return['message'] = "$url is up! ($http)";
			$return['success'] = true;
		} else {
			$return['message'] = "$url is down! ($http)";
			$return['success'] = false;
		}
	}
	curl_close($curl);
        return $return;
}

This function returns an array containing a success boolean (true, your site is up or false, your site is down) and a corresponding message string. Now that our checking works as specified, let’s move on to the notifications.

Notifications

In this section, we will present two ways to receive notifications.

Notification by E-mail/SMS

After checking the URL, you can use the PHP mail function to send the status to your e-mail account. On the other hand, you can find out the address for your SMS by sending a text to your own e-mail. For example, Verizon phones have the e-mail address <phone number>@vtext.com

The code:

$result = checkURL($your_url);
if ( $result['success'] == true; )
	$subject = "Your site is still up!";
else
	$subject = "Oh no! Your site is down."
mail($your_email, $subject, $result['message']);

As you can see, this is a fairly easy method with minimal code.

Push notifications for your iDevice

If you have an iDevice, such as an iPhone or iPod Touch, you can use push notifications as an alternative to e-mail or SMS.

First, download the app pushme.to and make and account. Take note of your username. This app will allow you to send pushed messages to your iDevice.

Then, you will need the following function:

function pushmeto($username, $message) {
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, "http://pushme.to/$username/");
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
	curl_setopt($curl, CURLOPT_POST, TRUE);
	curl_setopt($curl, CURLOPT_POSTFIELDS, "message=".urlencode($message);
	curl_exec($ch);
	curl_close($ch);
}

Usage is simple:

$result = checkURL($your_url);
pushmeto($your_username, $result['message']);

Automation

Cron can be used to automate the checking uptime process. If you don’t have cron on your server (which is rare), you can use an online service such as Online Cron Jobs.

Cron jobs are set using the following format:

[min] [hour] [date] [month] [day_of_week] [command]

A cron job set to run at 7am every Tuesday would look like this:

0 7 * * 2 [command]

For more information on how to use cron, see this quick reference.

As for the command, you can use the following (which assumes you saved the uptime verification code to a file called uptime.php):

php /path/to/uptime.php > /dev/null 2>&1

Remember, of course, to change the path.

Once activated by the automated command, the code in the PHP file will check if your site is up and notify you. You can set this to occur as often as you want.

Conclusion

Do you have any other ways to monitor uptime? If so, please join the discussion below!

View the Demo Download the Files

To begin our mad science, we’ll first need to include the API itself (note the HTML 5 that omits the type attribute of the script tag):

<!-- sensor=false tells google images we aren't trying to sense the user's location -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Moving forward, we’ll create a function which, when given an address, will display a dynamic map centered on it. Dutifully called setMapAddress, the function will have the following container:

function setMapAddress( address )
{
	// code goes here
}

To specify a location, Google Maps requires a latitude and longitude. As a result, our first task will be to convert the given address into the necessary format. Of course, this process has it’s own scientific term: geocoding. Being both scientifically and technologically-savvy, Google does the work for us in their Geocoder object. All we need to do is instantiate one and subsequently call its geocode method:

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { address : address }, function( results, status ) {

} );

The geocode method requires, as arguments, an object as well as a callback function. Looking at the first parameter, { address : address }, may strike initial confusion. The first use of the word address refers to a property of the object. On the contrary, the second use refers to the variable passed into the setMapAddress function, which we are trying to geocode.

Once the geocoding finishes, the callback function is invoked with a results array and status that is used to determine success. If the status notes a successful geocode, we’ll have to get the location (latitude/longitude) from the results array, setup options (similar to the options for the static images in the previous article), and finally construct the map. In its completed form, the callback function is:

if( status == google.maps.GeocoderStatus.OK ) {
	var latlng = results[0].geometry.location;
	var options = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	new google.maps.Map( document.getElementById( 'map' ), options );
}

The options object specifies the zoom, center, and type of the resultant map. In this case, these have been set to 8, the given address converted to a latitude/longitude, and road map respectively.

In addition, note that the constructor requires a DOM element and the aforementioned options. This means we’ll have to create the element, which has an id of map.

<div id="map"></div>

#map also needs a defined width and height:

#map {
	width: 512px;
	height: 512px;
}

Last, but certainly not least, we have to call the setMapAddress function we recently finished:

setMapAddress( "Chicago, IL" );

Voila! That’s all we need for a functioning dynamic map. You can view the demo or download the files.

With the new technology age, maps have moved from tangible paper to the virtual world, allowing anyone to access them with a simple visit to Google Maps. More importantly, with the new Google Maps API Version 3, it’s simple to integrate these maps into any website.

In the following article, I’ll be explaining how to get started with the new API and embrace the technology from the folks at Google.

Focus

We’re going to focus on creating a static map, which is just an image of a location. This is in contrast to a dynamic map, which enables the user to move and zoom. In a follow-up article, which will be posted later this week, we’ll tackle a dynamic map using JavaScript.

Static Map

The static map only requires an image tag and a few configuration options:

<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false" alt="Static Map of Chicago, Illinois"></img>

It looks a bit daunting at first, but, when broken down, it’s much easier to understand. Note that all the magic happens in the src attribute:

• http://maps.google.com/maps/api/staticmap? – the base URL which we pass configuration options to.
• center=Chicago,IL – the center of the map, which, in this case, is Chicago, Illinois. Note that this can be any address.
• zoom=8 – the amount to zoom in. This value was determined purely by experimentation.
• size=512x512 – the size of the map in pixels. In this case, it’s 512px by 512px.
• maptype=roadmap – the type of the map. Possible values are roadmap, terrain, satellite, and hybrid.
• sensor=false – tells Google Maps whether we are trying to sense the user’s location. In this case, we aren’t.

The above code produces the following image:

We can play around with the options a bit to produce a much different map:

<img alt="Static Map of New York City, New York" src="http://maps.google.com/maps/api/staticmap?center=New+York+City,NY&zoom=4&size=512x512&maptype=hybrid&sensor=false"></img>

These new configuration options yield the following map:

When creating maps, it’s also necessary to mark important locations, whether they be destinations or areas to avoid. To do so, we can use the markers parameter:

<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false&markers=Chicago,IL" alt="Static, Marked Map of Chicago, Illinois"></img>

Notice the new parameter:

markers=Chicago,IL

This will create the following marked map:

We can add in more configuration options to the marker parameter, including a color and a label. For example:

markers=color:blue|Chicago,IL

Notice the pipe operator (|) which separates the color from the location. This change will edit the marker color, yielding the following map:

As you can see, the blue marker still has a dot representing the location. When working with multiple locations, you might want to change this dot to a number or letter in order to differentiate between locations:

markers=color:blue|label:A|Chicago,IL

Instead of the dot, the image now has the letter A:

To add multiple markers, just add in another markers parameter:

<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false&markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN" alt="Static, Marked Map of Chicago, Illinois and Hammond, Indiana"></img>

Now there are two markers: one for Chicago, Illinois and another for Hammond, Indiana:

This is accomplished using the following marker code:

markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN

Finally, when specifying the markers attribute, note that the center and zoom parameters are no longer required. If we omit these, we get the following code:

<img src="http://maps.google.com/maps/api/staticmap?size=512x512&maptype=roadmap&sensor=false&markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN" alt="Static, Marked Map of Chicago, Illinois and Hammond, Indiana with no Center and Zoom"></img>

And the corresponding map:

As shown in the image, Google Maps will automatically use a fitting center and zoom in order to display the two locations.

Conclusion

As you can see, we’ve created multiple static maps all through the new Google Maps API. With no needed API key (which was previously required) and some simple URL manipulation, Google makes it near effortless to integrate a map into any website.

Are you interested in the Google Maps API? Do you have any questions or comments? Did you stumble upon more useful features for static maps? Leave a comment below and a share your thoughts!

Don’t forget that we’ll be creating dynamic maps with the JavaScript API later this week!

Slider – The easiest known way to showcase your images and photos on the web in style.

Who can deny it? This is the generation of web 2.0 sliders. A few JavaScript files, some CSS, and a bit of markup is all you need to generate an elegant showcase of your images. Best part? 99% of it is done for you.

Well, that’s the ideal situation. Unfortunately, it’s often times much more complicated. That’s why I created Lateral Slider.

View the DemoPurchase it from CodeCanyon

Lateral Slider is a jQuery slideshow plugin that I recently released on CodeCanyon. How does it work? Simple.

1. Include the CSS/JavaScript

CSS:

<link rel="stylesheet" href="slider.css" type="text/css" media="screen" />

JavaScript:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Lateral Slider -->
<script src="slider.jquery.js"></script>

2. Write the Markup

All you’ll need is a div and a few images:

<div id="slider">
	<img src="image1.jpg" alt="Image 1" />
	<img src="image2.jpg" alt="Image 2" />
	<img src="image3.jpg" alt="Image 3" />
</div>

3. Activate Lateral Slider

<!-- no need for type="text/javascript" in HTML 5 -->
<script>$( '#slider' ).lateralSlider();</script>

4. Celebrate

Lateral Slider is ready to be displayed.

5. Oops, was there supposed to be a fifth step?

Nope. You’re done.

Features

Simple setup is great, but I’m sure you’re also looking for features. Fear not:

• 13 different transitions
• Support for all major browsers (including IE6)
• Image linking
• Many configurable options
• Controls (forward, back, pick a slide)
• Comprehensive documentation
• Much more…

Want to know more? Check out the description at CodeCanyon. Better yet, why don’t you take a look at the live preview and see Lateral Slider for yourself.

Purchase It!

Interested? It’s only $10. Why not purchase it from CodeCanyon?

Do you use the DZone button on your website? If not, you should definitely consider it. Unfortunately, each one of these buttons requires the inclusion of a JavaScript file, which adds an HTTP request (and thus slows down the page). With some quick studying of the included JavaScript, it’s possible (not to mention quite easy) to generate this same button with only PHP, thus saving a request.

Here’s the function to do so:

function dzone_button( $style, $url, $title, $description = false )
{
	$html = '<iframe src="http://widgets.dzone.com/links/widgets/zoneit.html?t=' . $style;
	$html .= '&url=' . urlencode( $url ) . '&title=' . urlencode( $title );

	if( $description !== false )
		$html .= '&description=' . $description;

	if( $style == 1 )
		$html .= '" height="70" width="50" scrolling="no" frameborder="0"></iframe>';
	else
		$html .= '" height="25" width="155" scrolling="no" frameborder="0"></iframe>';

	return $html;
}

It requires the same parameters are the JavaScript file: the type of button (1 for tall, 2 for wide), URL, title, and description (optional).

To use it, just plug, chug, and echo:

echo dzone_button( 1, 'http://example.com', 'Example', 'Example description' );

If you’re using WordPress, consider the following snippet:

echo dzone_button( 1, get_permalink(), get_the_title() );

If you want a description, use get_the_excerpt:

echo dzone_button( 1, get_permalink(), get_the_title(), get_the_excerpt() );

That’s all there is to it; you’ve generated the same button without the JavaScript. The only real difference is that you’ll have an iframe directly in the HTML page rather than one generated by JavaScript. Happy DZoning!

Have you ever lost important files? If you have, you know the importance of keeping backups.

Backups could mean the difference between life and death for your site. It’s vital to constantly generate backups and even store them on a remote machine in order to ensure full protection. All it takes is a determined attacker to possibly corrupt all of your files. As a result, this simple snippet is focused on getting you started with the backup process.

Generating backups through secure-shell (SSH) can be quite a simple task. The tar command is all you’ll need:

$ tar czvf backup.tar.gz path/to/directory

Let’s break down this snippet into it’s constituents:

tar - the command to create a tar file

c - the option that creates a tar ball
z - add gzip compression
v - verbose option to display files that are added to the tar ball
f - used to specify the archive file (in this case backup.tar.gz)

backup.tar.gz - the name of the archive file for the f option
path/to/directory - recursively search this directory for files to place in the tar ball

After running this command on the directory of your choice (generally the public or public_html directory for a full backup), you should have an archive of files which you can easily download to your own computer (or keep on your web server).

You can read more about the tar command here.

In these past few days, I’ve been writing a jQuery slider plugin with various transition effects. To make the code succinct, I decided to use a base Transition object that other objects, which define a specific type of transition, inherit from. This led me to the question of JavaScript inheritance.

Inheritance in JavaScript has been a controversial subject. Should a standard be set to use classical inheritance or should the base prototypal system be favored? Both paths have their own advantages and disadvantages. The readings listed below will hopefully give you enough information to choose which method you want to use.

1. Private Members in JavaScript

This reading isn’t really about inheritance, but it’s an important primer on object-oriented programming in JavaScript which will help give you a deeper understand of what is to come.

2. Simple JavaScript Inheritance

John Resig, the creator of the jQuery JavaScript library, presents his own take on inheritance. Using his utility, it’s possible to change JavaScript into more of a classical inheritance scheme.

3. JavaScript Inheritance via Prototypes and Closures

Steffen Rusitschka explains the advantages and disadvantages of prototype-based and closure-based (more classical) inheritance. He also presents his own derivative of Resig’s script.

4. Classical Inheritance in JavaScript

This reading, by Douglas Crockford, a well-known JavaScript developer, is yet another way to achieve the classical inheritance scheme in JavaScript. In addition to presenting his extension, Crockford also explains the added functionality that JavaScript can provide.

5. Prototypal Inheritance in JavaScript

In this reading, Crockford analyzes his old classical inheritance and realizes the benefits of sticking with the prototypal structure. This last article expresses the flip side of the controversy, explaining why there is no need for a classical inheritance scheme.

Hopefully, these links have shed light on the debate between prototypal inheritance and classical inheritance. Although I used Resig’s script in my slider plugin, I recently came across Crockford’s prototypal inheritance article (#5) and am now rethinking my ways for future projects.

So, what’s your take on JavaScript inheritance? Leave a comment below. I would be glad to hear more arguments for either side!

We’re going to go through the process of creating a simple color manager with object-oriented PHP. Rather than focusing on multiple forms of modification, our color manager will perform one basic function: fading. Given a base color (hexadecimal) and a fade percentage, we will calculate a new, faded color.

View the color manager Download the files

Fading, when taken from a red-green-blue (RGB) color perspective, only involves linear interpolation. In other words, to fade a color from blue rgb( 0, 0, 255 ) to white rgb( 255, 255, 255 ), each color component must be increased by a percentage of the difference to the target component.

To elucidate this statement, consider the following example: if you wanted to fade 10% from blue to white, you would calculate the components as such:

original color (blue) = rgb( 0, 0, 255 )
target color (white)  = rgb( 255, 255, 255 )
fade percent          = 10%

original color's red component = 0
target color's red component   = 255
difference in components       = 255 - 0
                               = 255

new red component = original red component + difference in components * fade percent
new red component = 0 + 255 * .10
                  = 25.5

This process would be repeated with the two other components. The new color (after all calculations) would be:

rgb( 25.5, 25.5, 255 );

If you were to look at this color, it would be a faded blue.

Since we are working with a hexadecimal color, it would be beneficial to convert it to RGB, fade it, and then convert back. Although there are ways to fade directly in hexadecimal format, this path begs the use of object-oriented PHP and does not require a knowledge of bit manipulation.

Before starting to code, you must first understand how to convert from hexadecimal to RGB and back. The first two letters/digits in a hex color represent the red component in an RGB color. In like manner, the third and fourth letters/digits represent the green component. Finally, the last two digits represent the blue component. After splitting the hex color into these three sets, each one must be converted from base 16 to base 10 to get the final RGB color:

hex color (white) = FFFFFF

red component = FF (base 16)
              = 255 (base 10)

green component = FF (base 16)
                = 255 (base 10)

blue component = FF (base 16)
               = 255 (base 10)

hex color (white) = rgb( 255, 255, 255 )

To go from RGB to hexadecimal, convert each component to base 16 and concatenate them:

rgb color (white) = ( 255, 255, 255 )

red component = 255 (base 10)
              = FF (base 16)

green component = 255 (base 10)
                = FF (base 16)

blue component = 255 (base 10)
               = FF (base 16)

rgb color (white) = hex FFFFFF

Now we can move on to the implementation. To begin, we will first write a HexColor class, which will hold a $hex variable representing the hex string. This class will provide a function to convert to an RGB color:

class HexColor {
	private $hex;

	public function HexColor( $hex )
	{
		if( strpos( $hex, '#' ) === 0 )
			$this->hex = substr( $hex, 1 );
		else
			$this->hex = $hex;
	}

	public function getHexString()
	{
		return $this->hex;
	}

	public function convertToRGB()
	{
		// first two digits represent red, next two blue, and the last two green
		$red = substr( $this->hex, 0, 2 );
		$green = substr( $this->hex, 2, 2 );
		$blue = substr( $this->hex, 4, 2 );

		// convert from hexadecimal to base 10
		$red = (int) base_convert( $red, 16, 10 );
		$green = (int) base_convert( $green, 16, 10 );
		$blue = (int) base_convert( $blue, 16, 10 );

		return new RGBColor( $red, $green, $blue );
	}

	public static function isValid( $hex )
	{
		return (bool) preg_match( '/^(#)?[a-zA-Z0-9]{6}$/', $hex );
	}

	public function __toString()
	{
		return $this->hex;
	}
}

Note that the isValid function is used to check whether a given string is a valid hex color.

Next is the RGBColor class, which contains similar functionality and a fadeTo function based off of the calculations explained at the beginning of this article:

class RGBColor {
	private $red, $green, $blue;

	public function RGBColor( $red, $green, $blue )
	{
		$this->red = $this->clamp( $red );
		$this->green = $this->clamp( $green );
		$this->blue = $this->clamp( $blue );
	}

	public function getRed()
	{
		return $this->red;
	}

	public function getGreen()
	{
		return $this->green;
	}

	public function getBlue()
	{
		return $this->blue;
	}

	public function fadeTo( $rgbColor, $percent )
	{
		$newRed = ( 1 - $percent ) * $this->red + $percent * $rgbColor->getRed();
		$newGreen = ( 1 - $percent ) * $this->green + $percent * $rgbColor->getGreen();
		$newBlue = ( 1 - $percent ) * $this->blue + $percent * $rgbColor->getBlue();

		return new RGBColor( (int) $newRed, (int) $newGreen, (int) $newBlue );
	}

	public function convertToHex()
	{
		$newRed = base_convert( $this->red, 10, 16 );
		$newGreen = base_convert( $this->green, 10, 16 );
		$newBlue = base_convert( $this->blue, 10, 16 );

		$newRed = $this->addZero( $newRed );
		$newGreen = $this->addZero( $newGreen );
		$newBlue = $this->addZero( $newBlue );

		return new HexColor( $newRed . $newGreen . $newBlue );
	}

	private function addZero( $colorValue )
	{
		if( strlen( $colorValue ) == 1 )
			$colorValue = '0' . $colorValue;
		return $colorValue;
	}

	private function clamp( $colorValue )
	{
		// clamp colorValue in interval [0, 255]
		return max( 0, min( 255, $colorValue ) );
	}

	public function __toString()
	{
		return '(' . $this->red . ', ' . $this->green . ', ' . $this->blue . ')';
	}
}

Since RGB color values can only be in the 0-255 range, the clamp function is used to ensure this is true. In addition, the addZero function makes sure the hex color is six digits long by prepending the necessary 0s.

Given these classes, a $hex string, and a $fade percentage, the process to fade a hex color is as follows:

1. Instantiate a HexColor object with the $hex string
2. Convert it to an RGBColor
3. Call the fadeTo function with the given $fade percentage and the color white
4. Convert the RGBColor back to a HexColor and display it

In addition, to make this more flexible, we can change the third step to darken the color (fade to black) if the fade percentage is negative. These instructions lead to the following code:

$hexColor = new HexColor( $hex );

// target color is white by default
$targetColor = new RGBColor( 255, 255, 255 );

// want to darken the color--target is black
if( $fade < 0 ) {
	$targetColor = new RGBColor( 0, 0, 0 );
	$fade = -$fade; // make fade positive
}

$rgbColor = $hexColor->convertToRGB();

// fade / 100 is the percentage
$fadedColor = $rgbColor->fadeTo( $targetColor, $fade / 100 );
echo $fadedColor->convertToHex();

Combined with some AJAX, form handling, and CSS (which I won’t be going over, as this was a lesson in object-oriented PHP), this code ultimately results in a simple color manager, which you may view/download using the buttons below:

View the color manager Download the files

To convert any array (or any object) into a string using PHP, call the serialize function:

$array = array( 1, 2, 3 );
$string = serialize( $array );
echo $string;

$string will now hold a string version of the array. The output of the above code is as follows:

a:3:{i:0;i:1;i:1;i:2;i:2;i:3;}

To convert back from the string to the array, use unserialize:

// $array will contain ( 1, 2, 3 )
$array = unserialize( $string );

Now let’s try serializing an array of 200 randomly generated integers from 1 to 1000:

$array = array();
for( $i = 0; $i < 200; $i++ )
	$array[] = mt_rand( 1, 1000 );

$string = serialize( $array );
echo $string;

This outputs something like:

a:200:{i:0;i:465;i:1;i:202;i:2;i:9;i:3;i:448;i:4;i:887;i:5;i:844;i:6;i:230;i:7;i:785;i:8;i:892;i:9;i:949;i:10;i:864;i:11;i:29;i:12;i:239;i:13;i:521;i:14;i:632;i:15;i:115;i:16;i:903;i:17;i:331;i:18;i:732;i:19;i:192;i:20;i:487;i:21;i:297;i:22;i:1000;i:23;i:674;i:24;i:301;i:25;i:208;i:26;i:819;i:27;i:690;i:28;i:906;i:29;i:544;i:30;i:316;i:31;i:932;i:32;i:458;i:33;i:64;i:34;i:268;i:35;i:590;i:36;i:80;i:37;i:375;i:38;i:837;i:39;i:928;i:40;i:209;i:41;i:880;i:42;i:60;i:43;i:98;i:44;i:395;i:45;i:880;i:46;i:336;i:47;i:183;i:48;i:321;i:49;i:167;i:50;i:917;i:51;i:423;i:52;i:882;i:53;i:768;i:54;i:415;i:55;i:728;i:56;i:431;i:57;i:540;i:58;i:72;i:59;i:338;i:60;i:431;i:61;i:669;i:62;i:234;i:63;i:699;i:64;i:983;i:65;i:602;i:66;i:348;i:67;i:995;i:68;i:772;i:69;i:337;i:70;i:113;i:71;i:644;i:72;i:209;i:73;i:587;i:74;i:822;i:75;i:135;i:76;i:269;i:77;i:111;i:78;i:406;i:79;i:364;i:80;i:613;i:81;i:522;i:82;i:621;i:83;i:789;i:84;i:195;i:85;i:15;i:86;i:674;i:87;i:916;i:88;i:186;i:89;i:70;i:90;i:59;i:91;i:911;i:92;i:242;i:93;i:270;i:94;i:903;i:95;i:553;i:96;i:166;i:97;i:201;i:98;i:250;i:99;i:683;i:100;i:801;i:101;i:691;i:102;i:602;i:103;i:862;i:104;i:357;i:105;i:872;i:106;i:105;i:107;i:86;i:108;i:496;i:109;i:208;i:110;i:349;i:111;i:69;i:112;i:938;i:113;i:500;i:114;i:961;i:115;i:437;i:116;i:446;i:117;i:16;i:118;i:782;i:119;i:268;i:120;i:296;i:121;i:341;i:122;i:343;i:123;i:160;i:124;i:247;i:125;i:610;i:126;i:600;i:127;i:962;i:128;i:224;i:129;i:659;i:130;i:951;i:131;i:124;i:132;i:937;i:133;i:819;i:134;i:684;i:135;i:930;i:136;i:104;i:137;i:493;i:138;i:568;i:139;i:290;i:140;i:333;i:141;i:626;i:142;i:160;i:143;i:80;i:144;i:278;i:145;i:840;i:146;i:942;i:147;i:141;i:148;i:28;i:149;i:69;i:150;i:241;i:151;i:724;i:152;i:386;i:153;i:209;i:154;i:933;i:155;i:281;i:156;i:410;i:157;i:397;i:158;i:360;i:159;i:337;i:160;i:29;i:161;i:321;i:162;i:543;i:163;i:642;i:164;i:943;i:165;i:273;i:166;i:505;i:167;i:856;i:168;i:860;i:169;i:67;i:170;i:879;i:171;i:735;i:172;i:964;i:173;i:858;i:174;i:965;i:175;i:984;i:176;i:821;i:177;i:540;i:178;i:857;i:179;i:363;i:180;i:588;i:181;i:707;i:182;i:588;i:183;i:540;i:184;i:380;i:185;i:35;i:186;i:52;i:187;i:926;i:188;i:686;i:189;i:833;i:190;i:941;i:191;i:385;i:192;i:730;i:193;i:743;i:194;i:815;i:195;i:497;i:196;i:567;i:197;i:811;i:198;i:339;i:199;i:144;}

These strings can easily be stored in a database and unserialized when the data is accessed. Often times, base64_encode is used in conjunction with serialize when storing arrays:

$string = base64_encode( serialize( $array ) );

The encrypted string can then be restored to an array by using base64_decode:

$array = unserialize( base64_decode( $string ) );

Unfortunately, these strings can grow to be quite large. To counter the size, you may want to use gzcompress to apply gzip compression and significantly reduce the size:

$smallString = gzcompress( $string );

Note that gzip compression can be undone with gzuncompress.

That’s really all there is to it. Now you can easily store an array of information in a database!

In this article, we’re going to create a PHP class to help secure forms with basic math questions. This class will generate two random numbers that must be added by the user in order to ensure a human is submitting the form. Taken as a whole, this class only takes about 10 minutes to write. This begs the question: are you willing to secure your forms for a few minutes of work?

View a Demo Download the Files

This PHP class, which will be called BasicMathSecurity, will have three main functions:

• generateNumbers – generates two random numbers from 1-9 that the user must add
• getField – returns the label and input tags that will be displayed
• isCorrect – checks whether the user input is correct

Before we begin with these functions, let’s write a simple constructor:

public function BasicMathSecurity( $name = 'math' )
{
	$this->name = $name;
	$this->generateNumbers();
}

$name will be the name of the user input field. Note that generate numbers is called during instantiation to eliminate the need for an extra call.

generateNumbers is trivial through the use of PHP’s mt_rand function:

public function generateNumbers()
{
	$this->operand1 = mt_rand( 1, 9 );
	$this->operand2 = mt_rand( 1, 9 );
}

getField will create three HTML tags:

• A label for the math field with the question (ex. “1 + 1 =”)
• The math field, which is a text input
• A hidden input field for the answer to the math question

Using the $name paramater asked for in the constructor, the following function can be produced:

public function getField()
{
	$label = '<label for="' . $this->name . '">' . $this->operand1 . ' + ' . $this->operand2 . ' = </label>';
	$math = '<input type="text" name="' . $this->name . '" value="" id="' . $this->name . '"></input>';

	$answer = '<input type="hidden" name="' . $this->name . '-answer" value="' . ( $this->operand1 + $this->operand2 ) . '"></input>';
	$string = $label . "\n" . $math . "\n" . $answer;

	return $string;
}

An id is added to the math field for styling purposes. In addition, note that the answer field uses the same name as the math field with a “-answer” appended to it. This is important for the next function.

Finally, the isCorrect function will use the global $_REQUEST array to check whether the user input matches the answer:

public function isCorrect()
{
	$answer = $this->name . '-answer';
	if( !isset( $_REQUEST[ $this->name ] ) || !isset( $_REQUEST[ $answer ] ) )
		return false;

	return (int) $_REQUEST[ $this->name ] == (int) $_REQUEST[ $answer ];
}

The $answer index is based off the code in the getField function.

As a whole, the class is as follows:

class BasicMathSecurity {

	private $name;
	private $operand1, $operand2;

	public function BasicMathSecurity( $name = 'math' )
	{
		$this->name = $name;
		$this->generateNumbers();
	}

	public function generateNumbers()
	{
		$this->operand1 = mt_rand( 1, 9 );
		$this->operand2 = mt_rand( 1, 9 );
	}

	public function getField()
	{
		$label = '<label for="' . $this->name . '">' . $this->operand1 . ' + ' . $this->operand2 . ' = </label>';
		$math = '<input type="text" name="' . $this->name . '" value="" id="' . $this->name . '"></input>';

		$answer = '<input type="hidden" name="' . $this->name . '-answer" value="' . ( $this->operand1 + $this->operand2 ) . '"></input>';
		$string = $label . "\n" . $math . "\n" . $answer;

		return $string;
	}

	public function isCorrect()
	{
		$answer = $this->name . '-answer';
		if( !isset( $_REQUEST[ $this->name ] ) || !isset( $_REQUEST[ $answer ] ) )
			return false;

		return (int) $_REQUEST[ $this->name ] == (int) $_REQUEST[ $answer ];
	}

}

To use it, construct a BasicMathSecurity object and display the field:

$math = new BasicMathSecurity( 'math' );
echo $math->getField();

Subsequently, in your form handler, check if the input is correct. Remember to construct the object with the same name parameter:

// construct the object with the same parameter
$math = new BasicMathSecurity( 'math' );
if( $math->isCorrect() ) {
	// process the form
}

And that’s it! You may view the demo and download the files used to create it.