• 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!

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.

Generating Spreadsheets

Since computers and automation have become second nature, spreadsheet generation isn’t out of the ordinary. With MySQL databases, it becomes even more imperative, as spreadsheets are perfect to represent the data located in these structures.

Upon searching for how to create excel spreadsheets using PHP, most of the results came back with libraries that do the job. This seemed to be too much of a hassle. That’s why I’ve created 3 easy steps to create excel spreadsheets without any libraries.

Download the Files

Step 1: The Content-Type

The first thing you have to do is add an application/vnd.ms-excel content-type to your PHP file:

header("Content-Type: application/vnd.ms-excel");

Easy enough? Let’s move on to the actual data.

Step 2: Adding the Data

Data is just as simple. Separate cells/columns with tabs (“\t” in PHP) and move to the next row with a newline (“\n” in PHP).

Here are a few PHP echo statements that will do the trick:

echo 'First Name' . "\t" . 'Last Name' . "\t" . 'Phone' . "\n";
echo 'John' . "\t" . 'Doe' . "\t" . '555-5555' . "\n";

I’ve separated the tabs (\t) and the new lines (\n) so you can easily see the structure. The above would create a spreadsheet that looks like this:

First Name     Last Name     Phone
John           Doe           555-5555

Step 3: Downloading the Spreadsheet

Now that you’ve set the content-type and created the data, just open up the PHP file in a browser. You’ll be asked to download the spreadsheet. If you would like to give a name to the spreadsheet, just add the following:

header("Content-disposition: attachment; filename=spreadsheet.xls");

All you need to do is change spreadsheet.xls to the name of your spreadsheet. Note that the above header also ensures that Internet Explorer will ask you to download the file rather than trying to display it.

Conclusion

That’s really all there is to create a spreadsheet. For those of you who are using Microsoft Excel 2007, you might see the following message when opening the spreadsheet:

The file you are trying to open, ‘filename.xls’, is in a different format than specified by the file extension… [message condensed]

If so, just hit the “Yes” button and you’re good to go!

Comments? Questions? Concerns?

It’s your time now. If you have any comments, questions, or concerns, please post them below!

However, certain filetypes, thanks to modern web browsers, are rendered as an in-browser page, such as images, PDFs, and MP3s. While this may be a convenience, at times we may wish to force the user to download the files, not just view them in their browser.

In this article I will show two easy ways to do this. The first is using .htaccess, and the second is using PHP.

.htaccess

In your .htaccess file, add the following line for each extension you wish to force download:

AddType application/octet-stream extension

For example, if I wanted to force PDFs and MP3s to download, I would do this:

AddType application/octet-stream .pdf
AddType application/octet-stream .mp3

It’s really quite simple, and can be done quickly.

PHP

The PHP version is a bit more complicated, but can be useful if you want to have a bit more control. For example, you can use download IDs instead of the filename to prevent direct hotlinking. For example, you can assign the ID “3148″ to “BusinessPlan.pdf” and do a forced download.

The basic code looks like this:

<?php
header('Content-Disposition:inline;filename="'.$file.'"');
header('Content-Transfer-Encoding:Binary');
header('Content-length:'.filesize($file));
header('Content-Type:application/octet-stream');
header('Content-Disposition: attachment; filename="'.$file.'"');
readfile("$file");
?>

Of course, this is a huge security hole if you use the structure download.php?file=BusinessPlan.pdf, as anyone can access any file on your webserver. Thus, steps should be taken to secure the user input, or use a database of IDs.

Of course, if you’re just forcing download and don’t need extra control over the download process, you should use the .htaccess version, as it is much simpler and easier to use.

Although the Lateral Cache system works well and is great for general purposes, the CSS minifier can be aided by a more intelligent caching system. Well, what do I mean by that? That’s what you are going to find out.

View a Demo Download the Files

Please note that the demo link above directs you to Lateral Code’s own CSS file, where intelligent caching is used.

Re-caching for no reason? Say whaaat…?

Any general caching system normally allows you to provide a time interval to cache. This interval is used in a simple manner:

1. Store an initial cache of the data in a file.
2. Check if the time of the last cache is greater than the specified time interval.
3. If so, re-cache a new set of updated data and deliver it.
4. Otherwise, deliver the data in the cache
5. Repeat steps 2 – 4 indefinitely.

This system is a basic standard and has been used with much success. By re-caching at a specified interval, data will eventually be updated and the user won’t have to wait excessively after each request to the website. Essentially, if this system is used, a website will not have to check for new data at each user request; rather, it will check only after the specified time interval.

Note that the above works very well for data that is updated at a specific time interval. For example, if new data arrives every 30 minutes, a cache is ideal because it can be configured to update only when new information is available.

Returning back to the CSS minifier, it’s important to realize that the need for re-minifying only occurs when the original CSS file has been modified. Only under this circumstance will the cache have to be updated. In essence, keeping a cache with a specified interval such as one day will produce excessive re-caching that is not useful. On the flip side, if you were to use a very large cache interval, such as 30 days, updating the CSS file would be a pain, as you would have two main choices:

• Wait 30 days until the cache refreshes
• Change the code to temporarily stop caching

The first option is much worse than the second, but both are still a pain.

How can you check if a file is modified?

Now there’s the golden question you were all waiting for. If you know that the cache should only be updated when the original CSS file is modified, how would you adapt the code to meet this criterion? Luckily, the answer is simple due to magic filemtime PHP function, which can tell you the last time the file was modified.

The algorithm to accomplish the task now becomes quite trivial:

1. When caching, store both the last modified time and the minified CSS. This can be done by using two files or just one.
2. When checking what to deliver to the user, compare the stored time to the last modified time. If they are the same, return what is in the cache. Otherwise, re-cache and re-minify the CSS. Consequently, deliver the new data to the user.

Writing code using the algorithm

From the algorithm comes the following code:

header( "Content-type: text/css" );

// config --->
$dataFile = 'cache/styles'; // Make sure a cache directory exists
$timeFile = 'cache/styles-time';
$origFile = '/path/to/css/file'; // Change this
// < --- end config

$lastTime = -1;
if( file_exists( $timeFile ) )
	$lastTime = (int) file_get_contents( $timeFile );

$cache = false;
if( file_exists( $dataFile ) && file_exists( $origFile ) && $lastTime == filemtime( $origFile ) ) {
	$css = file_get_contents( $dataFile );
	$cache = true;
}
else {
	$css = file_get_contents( $origFile );
	$css = minify( $css );

	file_put_contents( $dataFile, $css );
	file_put_contents( $timeFile, filemtime( $origFile ) );
}

echo $css;

Remember to change $origFile to point to your CSS file and also ensure that a cache/ directory exists (you may change the name/placement of this directory by editing the $dataFile and $timeFile variables).

Note that the minify function used in the above code is present in the original article.

As a quick overview:

1. The configuration options set the location of the original CSS file. They also point to the data files for storing minified CSS and the last modified time.
2. The time file is loaded into a variable and compared with the filemtime of the original CSS file.
3. If the two differ, minification is applied and the data is re-cached. It is then delivered.
4. Otherwise, the cached file with minifed CSS is delivered.

Conclusion

So, with some simple analysis and one useful PHP function, caching can become much more intelligent for the CSS minifier.

Do you have any thoughts about the minifier? Do you know some way to make it better? It’s now your time to talk, so feel free to do so in a comment below!

WordPress Options

For those of you who aren’t familiar with WordPress’ options system, it acts in a simple way:

// an option is stored with the specified $name and $value
add_option( $name, $value );

// an option is retrieved using the $name
get_option( $name );

// updates an option with $name, or creates a new one if it doesn't exist
// this is generally used more than add_option due to its flexibility
update_option( $name, $value );

The ability of these functions stems from their storage of data. Even through multiple requests, the data that is passed as options will stay in-tact. This is because options are stored in a database.

Your Own Options

Today’s article will focus on how to implement an options system very similar to WordPress through PHP and MySQL. We will be going through:

• Creating the Table
• Connecting to the Database
• clean Function
• hasOption Function
• addOption Function
• updateOption Function
• getOption Function
• delOption Function
• Wrapping Up

You may download the source code if you wish:

Download the Files

Creating the Table

To begin, you will have to create a table called ‘options’ in your MySQL database with the following fields:

id - unsigned int(10), NOT NULL, auto_increment, primary key
name - varchar(255), NOT NULL
value - longtext, NOT NULL

If you just want to run a MySQL command to produce the database, use this:

CREATE TABLE `options` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `name` varchar(255) NOT NULL,
  `value` longtext NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4;

Connecting to the Database

To connect to your database, you will need a server, username, and password. On my local server, I use the following:

function connect() {
	mysql_connect( 'localhost:8888', 'root', 'root' );
	mysql_select_db( 'custom' );
}

Note that you will have to change the three parameters of mysql_connect( $server, $username, $password ) to suit your own database. In addition, pass in the name of your database to mysql_select_db (custom is the name of the database I am using).

clean Function

Before you start running MySQL queries, it’s always necessary to have a function that makes the input safe. Consider the following:

function clean( $input ) {
	if( get_magic_quotes_gpc() )
		$input = stripslashes( $input );

	return mysql_real_escape_string( $input );
}

This function first removes any unnecessary slashes if they exist and then cleans the input through mysql_real_escape_string.

hasOption Function

Before you start writing the majority of PHP, it’s nice to have a helper function. In this case, you can create a hasOption function that will check if an option with a given name exists:

function hasOption( $name ) {
	$query = sprintf( "SELECT id FROM options WHERE name = '%s'", clean( $name ) );
	$result = mysql_query( $query );

	if( !$result )
		return false;
	return (bool) mysql_fetch_assoc( $result );
}

$query holds the MySQL query, which tries to select an id from the database that corresponds with the option name. mysql_query is then used to run this query. Subsequently, the result is obtained and a boolean is returned that determines whether a row in the database corresponds with the parameter $name.

addOption Function

The addOption function will be used to store an option which can be retrieved at a later time. To implement this, you can use the hasOption function which you just created:

function addOption( $name, $value ) {
	if( hasOption( $name ) )
		return false;

	$query = sprintf( "INSERT INTO options( name, value ) VALUES( '%s', '%s' )", clean( $name ), clean( serialize( $value ) ) );
	$result = mysql_query( $query );

	return (bool) $result;
}

This function will try to add an option to the database and return true or false depending on its success. Note that this function is able to store data of any type. This is because it uses the PHP function serialize to generate a string representation of any value.

From the code perspective, it does the following:

1. If the option already exists, it returns false, as it only adds options (does not update them).
2. It then produces a MySQL query to insert a new option.
3. Using mysql_query, the query is run and, if successful, true is returned. Otherwise, the function returns false.

updateOption Function

updateOption is very similar to addOption, but with a few changes:

function updateOption( $name, $value ) {
	if( !hasOption( $name ) )
		return addOption( $name, $value );

	$query = sprintf( "UPDATE options SET value = '%s' WHERE name = '%s'", clean( serialize( $value ) ), clean( $name ) );
	$result = mysql_query( $query );

	return (bool) $result;
}

If the option does not already exist, updateOption will create it by calling addOption. Otherwise, it will run a MySQL update command to change the value inside the database. It then returns whether it was successful or not.

getOption Function

The getOption function is almost the exact same as addOption, except that it will retrieve the value of the option and then unserialize it.

function getOption( $name ) {
	if( !hasOption( $name ) )
		return false;

	$query = sprintf( "SELECT value FROM options WHERE name = '%s'", clean( $name ) );
	$result = mysql_query( $query );

	if( $result && ( $row = mysql_fetch_assoc( $result ) ) )
		return unserialize( $row[ 'value' ] );
	return false;
}

If the option does not exist, this function returns false. It then creates a select query and executes it. When returning the value, note that getOption uses unserialize to undo the storage that was used by addOption.

delOption Function

delOption is used to delete an option. It runs a MySQL delete command to accomplish its job:

function delOption( $name ) {
	if( !hasOption( $name ) )
		return false;

	$query = sprintf( "DELETE FROM options WHERE name = '%s'", $name );
	$result = mysql_query( $query );

	return (bool) $result;
}

Note how this function returns false if the option doesn’t exist. Otherwise, it’ll run the delete command and then return true or false depending on its success.

Wrapping Up

With a MySQL table and a few functions, you have produced a working options system. You may now use the functions like so:

// connect to the database
connect();

// add an option that corresponds $name to $value
addOption( $name, $value );

// get an option with a specified name
getOption( $name );

// update an option to correspond $name to $value
updateOption( $name, $value );

// delete an option with a given $name
delOption( $name );

// check whether an option with a given $name exists
hasOption( $name );

Questions? Comments? Please post them below and tell us what you think!

For those of you who aren’t familiar with Subversion, it’s a version control system. You can read more about it here.

The Invasion of .svn

Upon reinstalling WordPress with a few simple SVN commands, we noticed many .svn directories. These were located in every single section of our site’s files. Not only that, but we had also read about the dangers of keeping .svn directories in our file system earlier through Smashing Magazine.

The Exterminator: PHP

To solve this problem, we decided to write a simple PHP script that recursively removes all .svn directories. I’ll first present the complete script and then explain the details. You may also download it below if you like:

Download the Files

// preconditon: $dir ends with a forward slash (/) and is a valid directory
// postcondition: $dir and all it's sub-directories are recursively
// searched through for .svn directories. If a .svn directory is found,
// it is deleted to remove any security holes.
function removeSVN( $dir ) {
	echo "Searching: $dir\n\t";

	$flag = false; // haven't found .svn directory
	$svn = $dir . '.svn';

	if( is_dir( $svn ) ) {
		if( !chmod( $svn, 777 ) )
			echo "File permissions could not be changed (this may or may not be a problem--check the statement below).\n\t"; // if the permissions were already 777, this is not a problem

		delTree( $svn ); // remove the .svn directory with a helper function

		if( is_dir( $svn ) ) // deleting failed
			echo "Failed to delete $svn due to file permissions.";
		else
			echo "Successfully deleted $svn from the file system.";

		$flag = true; // found directory
	}

	if( !$flag ) // no .svn directory
		echo 'No .svn directory found.';
	echo "\n\n";

	$handle = opendir( $dir );
	while( false !== ( $file = readdir( $handle ) ) ) {
		if( $file == '.' || $file == '..' ) // don't get lost by recursively going through the current or top directory
			continue;

		if( is_dir( $dir . $file ) )
			removeSVN( $dir . $file . '/' ); // apply the SVN removal for sub directories
	}
}

This is a recursive function that requires a directory name as a parameter. It first checks if a .svn directory exists in the given directory. If so, it will attempt to modify its permissions and subsequently delete it. During this whole process, it will notify the user of any errors/successes.

After the deletion, the script searches through the directory for any sub-directories. If it finds some, it will recursively call itself to remove more .svn directories. Note that there is a helper function, delTree(), which is called here. It looks like this:

// precondition: $dir is a valid directory
// postcondition: $dir and all it's contents are removed
// simple function found at http://www.php.net/manual/en/function.rmdir.php#93836
function delTree( $dir ) {
	$files = glob( $dir . '*', GLOB_MARK ); // find all files in the directory

	foreach( $files as $file ) {
		if( substr( $file, -1 ) == '/' )
			delTree( $file ); // recursively apply this to sub directories
		else
			unlink( $file );
	}

	if ( is_dir( $dir ) )
		rmdir( $dir ); // remove the directory itself (rmdir only removes a directory once it is empty)
}

delTree is yet another recursive function. It deletes all files in a directory and recursively calls itself with sub-directories. Consequently, it will remove the directory itself with rmdir().

Now that the function is complete, you can easily call it using the following:

header( 'Content-type: text/plain' ); // plain text for easy display

// remove all .svn directories in the
// current directory and sub directories
// (recursively applied)
removeSVN( './' );

If this file is not in the root of your server, then you can easily just change the directory that is fed to removeSVN(). Good luck! You may download the script here.

With the rise of this new beast comes a few issues. The biggest libraries out there aren’t too small in terms of code size. Each one can add significantly to load time even when minified. Another problem resides with extra HTTP requests; each new file is accompanied by an extra request. Ultimately, this once again leads directly to a larger wait for users.

Although the first problem can’t be solved simply, reducing HTTP requests is a trivial task; just combine all of your JavaScript into one file. Unfortunately, sometimes it might be difficult or just annoying to do so. That’s why we created JMerge.

JMerge is a simple web application that combines JavaScript files for you. Using it is very simple. When you first enter the page, you’ll see a URL form field:

Type in the URL of your website and hit continue. After a second or two of loading, you’ll see an unordered list of JavaScript files that are used in the specified URL:

Click on any of the files you don’t want to merge. This will make them disappear from the list:

Now just click “combine them” and copy/paste the new code into one, merged file! That’s all it takes to combine JavaScript files with JMerge.

What do you think about JMerge? Was it useful for your site? Did you have any issues using it? Tell us in a comment below.