Team Tutorials

What’s new in HTML 5

John Ward — Tue, 27 Dec 2011 18:58:24 +0000

It’s been way too long since we’ve posted anything. With all the news around HTML5 and CSS3 that continues to come out, I thought now might be a good time to talk about some things we will see in the upcoming HTML5 standard.

HTML5 Doctype

The doctype has been simplified in HTML5. Now all you have to do is add the following doctype and your page is HTML5 ready.

HTML Structure Tags

The HTML5 standard recognized that most web pages have several type of elements in common. It added more semantic tags to handle these elements. In the previous standard we would use the div tag, but now there are several more descriptive tags available:

header – this tag is commonly used to identify the header of the page. However, from what I see in the specification, there is no reason this tag could not be used to denote the header of other content, such as a blog post.
footer – the footer tag can be used to define the footer of the html page or the footer of another element.
nav – the nav tag is short for navigation. The intention of this tag is to be used for major intersite navigation. Therefore I think it is best used for your site naviagtion (home,contact,about us, etc) but not for use to link to outside side such as you would see in a blogroll.
section – used to divide your page into sections. You may see this tag used in a blog to contain several blog posts.
article – defines a particular article in a page. I see this tag being used to contain individual blog posts within the seciton tag.
aside – right now aside is to be used to define other content on your pages that are not apart of the main content. The only real use I’ve seen is for side bars
figure – defines an element that is related to your article. Something like an image or diagram. This also allows for use of the figcaption element to add a caption to the parent figure.
mark – used to define an inline content that marked in some way. Could possible replace strong in some cases.
time – used to indicate a time value
meter – used to indicate a portion of a range. Such as a percentage of free space.
progress – can be used to indicate the completion of a task

Dynamic Pages in HTML5?

HTML5 has added some elements that take care of commonly used dynamic functions that would commonly be created using javascript.

details – provides details about an element. This would be like tooltips in non-Web applications.
datagrid – creates a table that is built from a database or other dynamic source
menu – an old tag brought back and given new life allowing you to create a menu system on your Web pages
command – defines actions that should happen when a dynamic element is activated

New Multimedia Tags

canvas – allows you to create dynamic graphics within your page.
video – tag used to add video
audio – add sound or music using the audio tag

We’ve just barely scratched the surface of the upcoming standard. In the future we’ll take a deeper look into HTML5 and CSS3. Also I hope to post some examples of how to use these new tags.

8 Must Have iPhone Cheat Sheets for Web Developers

John Ward — Mon, 08 Aug 2011 17:56:11 +0000

When it comes to development, there are always simple things that we as developers forget. Ever get into a situation where you know how to do something in one language, but can’t quite figure out the correct syntax in another? I’ve put together a list of iOS “cheat sheet” apps that is sure to help with web development. If you are a developer than you must download these apps. You never know when you are going to need them!

HTML 5 Pro Quick Guide

It’s the new thing and you better keep up with the standards or you’ll be left in the dust. More than just a cheat sheet or reference, the HTML5 Pro Quick Guide provides beginners with a simple introduction to the basics, and experts will find the advanced details they need. Loads of extras are included: HTML5 elements, HTML5 attributes, HTML5 events, syntax, document structure, DOCTYPE declarations, colors, font styles, HTML5 version information, and browser compatibility tables for the most popular browsers.

JavaScript Cheat Sheet

Even seasoned web developers need a quick refresher course in JavaScript methods, properties and syntax from time to time. The JavaScript Cheat Sheet for iPhone and iPod Touch is designed to address that need. Use it as a quick reference for topics you’ve already learned but need a few reminders on, or if you’re still a beginner to JavaScript, use it to better understand what JavaScript is capable of.

HTML Cheat Sheet

This is a native app, not just a link out to internet references. It’s searchable and has an easy to use interface that helps you quickly find what you’re looking for. The categories are useful and well defined. The cheatsheet includes examples and quick reference lists for Tags, Attributes, Events, Colors, Character Sets, ASCII, ISO 8859-1 Symbols, ISO 8859-1 Characters, Math Symbols, Greek Letters, URL Encoding, Language Codes, HTTP Status Messages, and more.

Google Cheat Sheet

The Google Cheat Sheet for iPhone and iPod Touch is a quick reference to many of Google’s most popular tools and search techniques. It also covers the powerful, but lesser known tools Google provides to successfully search the web.

CSS Cheat Sheet

Unlike apps that cobble together random references from the web, this cheatsheet is written and reviewed by professional web developers that use CSS on a daily basis. We keep up with changing specifications and provide free updates in the same simple, easy to use format.

php Cheat Sheet

This is a native app, not just a link out to internet references. It’s searchable and has an easy to use interface that helps you quickly find what you’re looking for. The categories are useful and well defined. The cheatsheet includes functions and descriptions for Date & Time, File Handling, Errors, File System, Filter, FTP, HTTP, Libxml, Mail, Math, MySQL, SimpleXML, String, XML Zip, and many more.

RegEx Cheat Sheet

The cheatsheet includes:

* Matching: Normal Classes [...] and [^...]
* Matching: Any Character dot (.)
* Class Shorthands (\w, \d, \s, \W, \D, \S)
* POSIX Character Classes (about POSIX, [:alnum:], [:alpha:], [:blank:], etc.)
* Unicode Properties
* Unicode Combining Sequences (\X, and the standard properties list – properties and meanings)
* Anchors and Zero-width Assertions (start and end of line/string, start of match, would boundary, look ahead and look behind)
* Comments and mode modifiers
* Grouping and Conditionals
* and many more

Python Cheat Sheet

Unlike apps that cobble together random references from the web, this cheat sheet is written and reviewed by professional web developers that use Python on a daily basis. We keep up with changing specifications and provide free updates in the same simple, easy to use format.

Fix the timthumb.php WordPress exploit

John Ward — Tue, 02 Aug 2011 13:30:02 +0000

There was a recent exploit found in a common file used to generate thumbnails. I found out about the exploit from Mark Maunder’s site. If you have a server running several wordpress blogs, like us, here is a way to fix all the exploits.

If you don’t want to copy and paste skip to the bottom of the post to download the fix.

First, upload a fixed version of the tim thumb file names timthumb-fix.php

 array (IMG_FILTER_NEGATE, 0),
		2 => array (IMG_FILTER_GRAYSCALE, 0),
		3 => array (IMG_FILTER_BRIGHTNESS, 1),
		4 => array (IMG_FILTER_CONTRAST, 1),
		5 => array (IMG_FILTER_COLORIZE, 4),
		6 => array (IMG_FILTER_EDGEDETECT, 0),
		7 => array (IMG_FILTER_EMBOSS, 0),
		8 => array (IMG_FILTER_GAUSSIAN_BLUR, 0),
		9 => array (IMG_FILTER_SELECTIVE_BLUR, 0),
		10 => array (IMG_FILTER_MEAN_REMOVAL, 0),
		11 => array (IMG_FILTER_SMOOTH, 0),
	);
}

// get standard input properties
$new_width =  (int) abs (get_request ('w', 0));
$new_height = (int) abs (get_request ('h', 0));
$zoom_crop = (int) get_request ('zc', 1);
$quality = (int) abs (get_request ('q', 90));
$align = get_request ('a', 'c');
$filters = get_request ('f', '');
$sharpen = (bool) get_request ('s', 0);

// set default width and height if neither are set already
if ($new_width == 0 && $new_height == 0) {
    $new_width = 100;
    $new_height = 100;
}

// ensure size limits can not be abused
$new_width = min ($new_width, MAX_WIDTH);
$new_height = min ($new_height, MAX_HEIGHT);

// set memory limit to be able to have enough space to resize larger images
ini_set ('memory_limit', MEMORY_LIMIT);

if (file_exists ($src)) {

    // open the existing image
    $image = open_image ($mime_type, $src);
    if ($image === false) {
        display_error ('Unable to open image : ' . $src);
    }

    // Get original width and height
    $width = imagesx ($image);
    $height = imagesy ($image);
	$origin_x = 0;
	$origin_y = 0;

    // generate new w/h if not provided
    if ($new_width && !$new_height) {
        $new_height = floor ($height * ($new_width / $width));
    } else if ($new_height && !$new_width) {
        $new_width = floor ($width * ($new_height / $height));
    }

	// scale down and add borders
	if ($zoom_crop == 3) {

		$final_height = $height * ($new_width / $width);

		if ($final_height > $new_height) {
			$new_width = $width * ($new_height / $height);
		} else {
			$new_height = $final_height;
		}

	}

	// create a new true color image
	$canvas = imagecreatetruecolor ($new_width, $new_height);
	imagealphablending ($canvas, false);

	// Create a new transparent color for image
	$color = imagecolorallocatealpha ($canvas, 0, 0, 0, 127);

	// Completely fill the background of the new image with allocated color.
	imagefill ($canvas, 0, 0, $color);

	// scale down and add borders
	if ($zoom_crop == 2) {

		$final_height = $height * ($new_width / $width);

		if ($final_height > $new_height) {

			$origin_x = $new_width / 2;
			$new_width = $width * ($new_height / $height);
			$origin_x = round ($origin_x - ($new_width / 2));

		} else {

			$origin_y = $new_height / 2;
			$new_height = $final_height;
			$origin_y = round ($origin_y - ($new_height / 2));

		}

	}

	// Restore transparency blending
	imagesavealpha ($canvas, true);

	if ($zoom_crop > 0) {

		$src_x = $src_y = 0;
		$src_w = $width;
		$src_h = $height;

		$cmp_x = $width / $new_width;
		$cmp_y = $height / $new_height;

		// calculate x or y coordinate and width or height of source
		if ($cmp_x > $cmp_y) {

			$src_w = round ($width / $cmp_x * $cmp_y);
			$src_x = round (($width - ($width / $cmp_x * $cmp_y)) / 2);

		} else if ($cmp_y > $cmp_x) {

			$src_h = round ($height / $cmp_y * $cmp_x);
			$src_y = round (($height - ($height / $cmp_y * $cmp_x)) / 2);

		}

		// positional cropping!
		if ($align) {
			if (strpos ($align, 't') !== false) {
				$src_y = 0;
			}
			if (strpos ($align, 'b') !== false) {
				$src_y = $height - $src_h;
			}
			if (strpos ($align, 'l') !== false) {
				$src_x = 0;
			}
			if (strpos ($align, 'r') !== false) {
				$src_x = $width - $src_w;
			}
		}

		imagecopyresampled ($canvas, $image, $origin_x, $origin_y, $src_x, $src_y, $new_width, $new_height, $src_w, $src_h);

    } else {

        // copy and resize part of an image with resampling
        imagecopyresampled ($canvas, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

    }

    if ($filters != '' && function_exists ('imagefilter') && defined ('IMG_FILTER_NEGATE')) {
        // apply filters to image
        $filterList = explode ('|', $filters);
        foreach ($filterList as $fl) {

            $filterSettings = explode (',', $fl);
            if (isset ($imageFilters[$filterSettings[0]])) {

                for ($i = 0; $i < 4; $i ++) {
                    if (!isset ($filterSettings[$i])) {
						$filterSettings[$i] = null;
                    } else {
						$filterSettings[$i] = (int) $filterSettings[$i];
					}
                }

                switch ($imageFilters[$filterSettings[0]][1]) {

                    case 1:

                        imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1]);
                        break;

                    case 2:

                        imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2]);
                        break;

                    case 3:

                        imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2], $filterSettings[3]);
                        break;

                    case 4:

                        imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2], $filterSettings[3], $filterSettings[4]);
                        break;

                    default:

                        imagefilter ($canvas, $imageFilters[$filterSettings[0]][0]);
                        break;

                }
            }
        }
    }

	// sharpen image
	if ($sharpen && function_exists ('imageconvolution')) {

		$sharpenMatrix = array (
			array (-1,-1,-1),
			array (-1,16,-1),
			array (-1,-1,-1),
		);

		$divisor = 8;
		$offset = 0;

		imageconvolution ($canvas, $sharpenMatrix, $divisor, $offset);

	}

    // output image to browser based on mime type
    show_image ($mime_type, $canvas);

    // remove image from memory
    imagedestroy ($canvas);

	// if not in cache then clear some space and generate a new file
	clean_cache ();

	die ();

} else {

    if (strlen ($src)) {
        display_error ('image ' . $src . ' not found');
    } else {
        display_error ('no source specified');
    }

}

/**
 *
 * @global  $quality
 * @param  $mime_type
 * @param  $image_resized
 */
function show_image ($mime_type, $image_resized) {

    global $quality;

    $cache_file = get_cache_file ($mime_type);

	switch ($mime_type) {
		case 'jpg':
			imagejpeg ($image_resized, $cache_file, $quality);
			break;

		default:
		case 'png':
			imagepng ($image_resized, $cache_file, floor ($quality * 0.09));
			break;

	}

	show_cache_file ($mime_type);

}

/**
 *
 * @param  $property
 * @param  $default
 * @return 
 */
function get_request ($property, $default = 0) {

    if (isset ($_GET[$property])) {
        return $_GET[$property];
    } else {
        return $default;
    }

}

/**
 *
 * @param  $mime_type
 * @param  $src
 * @return 
 */
function open_image ($mime_type, $src) {

	switch ($mime_type) {
		case 'jpg':
			$image = imagecreatefromjpeg ($src);
			break;

		case 'png':
			$image = imagecreatefrompng ($src);
			break;

		case 'gif':
			$image = imagecreatefromgif ($src);
			break;
	}

    return $image;

}

/**
 * clean out old files from the cache
 * you can change the number of files to store and to delete per loop in the defines at the top of the code
 *
 * @return 
 */
function clean_cache () {

	// add an escape
	// Reduces the amount of cache clearing to save some processor speed
	if (rand (1, 50) > 10) {
		return true;
	}

	flush ();

    $files = glob (DIRECTORY_CACHE . '/*', GLOB_BRACE);

	if (count ($files) > CACHE_SIZE) {

        $yesterday = time () - (24 * 60 * 60);

        usort ($files, 'filemtime_compare');
        $i = 0;

		foreach ($files as $file) {

			$i ++;

			if ($i >= CACHE_CLEAR) {
				return;
			}

			if (@filemtime ($file) > $yesterday) {
				return;
			}

			if (file_exists ($file)) {
				unlink ($file);
			}

		}

    }

}

/**
 * compare the file time of two files
 *
 * @param  $a
 * @param  $b
 * @return 
 */
function filemtime_compare ($a, $b) {

	$break = explode ('/', $_SERVER['SCRIPT_FILENAME']);
	$filename = $break[count ($break) - 1];
	$filepath = str_replace ($filename, '', $_SERVER['SCRIPT_FILENAME']);

	$file_a = realpath ($filepath . $a);
	$file_b = realpath ($filepath . $b);

    return filemtime ($file_a) - filemtime ($file_b);

}

/**
 * determine the file mime type
 *
 * @param  $file
 * @return 
 */
function mime_type ($file) {

	$file_infos = getimagesize ($file);
	$mime_type = $file_infos['mime'];

	// no mime type
	if (empty ($mime_type)) {
		display_error ('no mime type specified');
	}

    // use mime_type to determine mime type
    if (!preg_match ("/jpg|jpeg|gif|png/i", $mime_type)) {
		display_error ('Invalid src mime type: ' . $mime_type);
    }

	$mime_type = strtolower ($mime_type);
	$mime_type = str_replace ('image/', '', $mime_type);

	if ($mime_type == 'jpeg') {
		$mime_type = 'jpg';
	}

    return $mime_type;

}

/**
 *
 * @param  $mime_type
 */
function check_cache ($mime_type) {

	if (CACHE_USE) {

		if (!show_cache_file ($mime_type)) {
			// make sure cache dir exists
			if (!file_exists (DIRECTORY_CACHE)) {
				// give 777 permissions so that developer can overwrite
				// files created by web server user
				mkdir (DIRECTORY_CACHE);
				chmod (DIRECTORY_CACHE, 0777);
			}
		}

	}

}

/**
 *
 * @param  $mime_type
 * @return 
 */
function show_cache_file ($mime_type) {

	// use browser cache if available to speed up page load
	if (!empty ($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
		if (strtotime ($_SERVER['HTTP_IF_MODIFIED_SINCE']) < strtotime ('now')) {
			header ('HTTP/1.1 304 Not Modified');
			die ();
		}
	}

	$cache_file = get_cache_file ($mime_type);

	if (file_exists ($cache_file)) {

		// change the modified headers
		$gmdate_expires = gmdate ('D, d M Y H:i:s', strtotime ('now +10 days')) . ' GMT';
		$gmdate_modified = gmdate ('D, d M Y H:i:s') . ' GMT';

		// send content headers then display image
		header ('Content-Type: ' . $mime_type);
		header ('Accept-Ranges: bytes');
		header ('Last-Modified: ' . $gmdate_modified);
		header ('Content-Length: ' . filesize ($cache_file));
		header ('Cache-Control: max-age=' . CACHE_MAX_AGE . ', must-revalidate');
		header ('Expires: ' . $gmdate_expires);

		if (!@readfile ($cache_file)) {
			$content = file_get_contents ($cache_file);
			if ($content != FALSE) {
				echo $content;
			} else {
				display_error ('cache file could not be loaded');
			}
		}

		die ();

    }

	return FALSE;

}

/**
 *
 * @staticvar string $cache_file
 * @param  $mime_type
 * @return string
 */
function get_cache_file ($mime_type) {

    static $cache_file;
	global $src;

	$file_type = '.png';

	if ($mime_type == 'jpg') {
		$file_type = '.jpg';
    }

    if (!$cache_file) {
		// filemtime is used to make sure updated files get recached
        $cache_file = DIRECTORY_CACHE . '/' . md5 ($_SERVER ['QUERY_STRING'] . VERSION . filemtime ($src)) . $file_type;
    }

    return $cache_file;

}

/**
 *
 * @param  $url
 * @return 
 */
function validate_url ($url) {
	$pattern = "/\b(?:(?:https?):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i";
	return preg_match ($pattern, $url);
}

/**
 *
 * @global array $allowedSites
 * @param string $src
 * @return string
 */
function check_external ($src) {

	global $allowedSites;

	// work out file details
	$fileDetails = pathinfo ($src);
	$filename = 'external_' . md5 ($src);
	$local_filepath = DIRECTORY_CACHE . '/' . $filename . '.' . strtolower ($fileDetails['extension']);

	// only do this stuff the file doesn't already exist
	if (!file_exists ($local_filepath)) {

		if (strpos (strtolower ($src), 'http://') !== false || strpos (strtolower ($src), 'https://') !== false) {

			if (!validate_url ($src)) {
				display_error ('invalid url');
			}

			$url_info = parse_url ($src);

			// convert youtube video urls
			// need to tidy up the code

			if ($url_info['host'] == 'www.youtube.com' || $url_info['host'] == 'youtube.com') {
				parse_str ($url_info['query']);

				if (isset ($v)) {
					$src = 'http://img.youtube.com/vi/' . $v . '/0.jpg';
					$url_info['host'] = 'img.youtube.com';
				}
			}

			// check allowed sites (if required)
			if (ALLOW_EXTERNAL) {

				$isAllowedSite = true;

			} else {

				$isAllowedSite = false;
				foreach ($allowedSites as $site) {
					if (strpos (strtolower ($url_info['host']), $site) !== false) {
						$isAllowedSite = true;
					}
				}

			}

			// if allowed
			if ($isAllowedSite) {

				if (function_exists ('curl_init')) {

					global $fh;

					$fh = fopen ($local_filepath, 'w');
					$ch = curl_init ($src);

					curl_setopt ($ch, CURLOPT_TIMEOUT, CURL_TIMEOUT);
					curl_setopt ($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0');
					curl_setopt ($ch, CURLOPT_URL, $src);
					curl_setopt ($ch, CURLOPT_RETURNTRANSFER, TRUE);
					curl_setopt ($ch, CURLOPT_HEADER, 0);
					curl_setopt ($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
					curl_setopt ($ch, CURLOPT_FILE, $fh);
					curl_setopt ($ch, CURLOPT_WRITEFUNCTION, 'curl_write');

					// error so die
					if (curl_exec ($ch) === FALSE) {
						unlink ($local_filepath);
						touch ($local_filepath);
						display_error ('error reading file ' . $src . ' from remote host: ' . curl_error ($ch));
					}

					curl_close ($ch);
					fclose ($fh);

                } else {

					if (!$img = file_get_contents ($src)) {
						display_error ('remote file for ' . $src . ' can not be accessed. It is likely that the file permissions are restricted');
					}

					if (file_put_contents ($local_filepath, $img) == FALSE) {
						display_error ('error writing temporary file');
					}

				}

				if (!file_exists ($local_filepath)) {
					display_error ('local file for ' . $src . ' can not be created');
				}

				$src = $local_filepath;

			} else {

				display_error ('remote host "' . $url_info['host'] . '" not allowed');

			}

		}

    } else {

		$src = $local_filepath;

	}

    return $src;

}

/**
 * callback for curl command to receive external images
 * limit the amount of data downloaded from external servers
 *
 * @global  $data_string
 * @param  $handle
 * @param  $data
 * @return 
 */
function curl_write ($handle, $data) {

	global $external_data_string, $fh;

	fwrite ($fh, $data);
	$external_data_string .= $data;

	if (strlen ($external_data_string) > MAX_FILE_SIZE) {
		return 0;
	} else {
		return strlen ($data);
	}

}

/**
 * tidy up the image source url
 *
 * @param  $src
 * @return string
 */
function clean_source ($src) {

	$host = str_replace ('www.', '', $_SERVER['HTTP_HOST']);
	$regex = "/^(http(s|):\/\/)(www\.|)" . $host . "\//i";

	$src = preg_replace ($regex, '', $src);
	$src = strip_tags ($src);
    $src = check_external ($src);

    // remove slash from start of string
    if (strpos ($src, '/') === 0) {
        $src = substr ($src, -(strlen ($src) - 1));
    }

    // don't allow users the ability to use '../'
    // in order to gain access to files below document root
    $src = preg_replace ("/\.\.+\//", "", $src);

    // get path to image on file system
    $src = get_document_root ($src) . '/' . $src;

	if (!is_file ($src)) {
		display_error ('source is not a valid file');
	}

	if (filesize ($src) > MAX_FILE_SIZE) {
		display_error ('source file is too big (filesize > MAX_FILE_SIZE)');
	}

	if (filesize ($src) <= 0) {
		display_error ('source file <= 0 bytes. Possible external file download error (file is too large)');
	}

    return realpath ($src);

}

/**
 *
 * @param  $src
 * @return string
 */
function get_document_root ($src) {

    // check for unix servers
    if (file_exists ($_SERVER['DOCUMENT_ROOT'] . '/' . $src)) {
        return $_SERVER['DOCUMENT_ROOT'];
    }

    // check from script filename (to get all directories to timthumb location)
    $parts = array_diff (explode ('/', $_SERVER['SCRIPT_FILENAME']), explode ('/', $_SERVER['DOCUMENT_ROOT']));

	$path = './';

	foreach ($parts as $part) {
		if (file_exists ($path . '/' . $src)) {
			return realpath ($path);
		}
		$path .= '../';
	}

    // special check for microsoft servers
    if (!isset ($_SERVER['DOCUMENT_ROOT'])) {
        $path = str_replace ("/", "\\", $_SERVER['ORIG_PATH_INFO']);
        $path = str_replace ($path, '', $_SERVER['SCRIPT_FILENAME']);

        if (file_exists ($path . '/' . $src)) {
            return realpath ($path);
        }
    }

    display_error ('file not found');

}

/**
 * generic error message
 *
 * @param  $errorString
 */
function display_error ($errorString = '') {

    header ('HTTP/1.1 400 Bad Request');
	echo '' . htmlentities ($errorString);
	echo '
Query String : ' . htmlentities ($_SERVER['QUERY_STRING']);
	echo '
TimThumb version : ' . VERSION . '';
    die ();

}

Then upload our shell script as fix_timthumb.sh:

#!/bin/bash
find /home/ -name 'timthumb.php' -type f -printf '%h\n' | while read line
do
#Remove the old thumb
rm -rf $line/timthumb.php

#Copy fixed thumb
cp timthumb-fix.php $line/timthumb.php

echo $line " done";
done

The all you have to do is execute this command:

sh -x fix_timthumb.sh

The script will find any timthumb.php file and replace it with your fixed file. You will probably need root access to do this.

[tweet2download file="timthum_fix.zip" tweet="Replace all timthumb.php files on your server http://su.pr/1Libna" follow="@teamtutorials" /]

Creating a Pill Icon in Photoshop

John Ward — Fri, 29 Jul 2011 23:09:56 +0000

In this tutorial you will be learning basic techniques in Photoshop, such as using layer styles, brush and pen tool and effects. The end product will be a glossy pill icon, useful as a logo or an illustration. The tutorial is suitable for absolute beginners.

1. Create a new document
Create a new document by hitting Ctrl+N or Cmd+N on Mac with following values.

For easier workflow make sure you have Auto-Select Layer and Show Transform Controls ticked.

2. Place and trace
Drag and drop the sketch.jpg file into the canvas and resize it with transformation tool to fit. Hit enter.

Lock the sketch bitmap layer by selecting it and clicking on the padlock icon.

Select the pen tool and click on ‘Shape Layer’ in the toolbar.

Start tracing by clicking on any edge of sketch and adding points. Photoshop will create a new shape layer. Try to follow sketch lines to fill one part of the pill icon.

After closing the shape by clicking on the first point, select Direct Selection Tool (Ctrl+Shift+A) to manipulate any misplaced points. You can move them around by clicking twice.

When you’re happy with the shape, click on the layer and name it something descriptive by double clicking on name and click on eye icon to hide it.

Do same with the other part of the pill and get them aligned. Move the right part layer on top of the other by dragging and dropping. Hide the sketch layer.

Now select colors you’ll be using and fill shapes with them by double-clicking layer thumbnail. Colors used in tutorial are RGB(221, 62, 62) and RGB(224, 220, 220).

Select both layers and click ‘Duplicate layers’ in right-click menu. Merge duplicates into one rasterized layer by selecting ‘Merge’ from same menu.

Double click on created layer and click on Color overlay. Select white color and hit OK.

Resize and rotate the shape so it covers a little less than half of the pill.

Ctrl click on one layer’s vector mask thumbnail and hold Ctrl+Shift while clicking on another. This will select both layers’ pixels. Hit Ctrl+Shift+I to inverse selection and hit Delete with ‘highlight’ layer selected. Set layer’s opacity to 25%.

3. Effects
Select the Brush tool and apply the following settings in right-click menu:

Now select pill layer’s pixels once again and paint a highlight on a new layer. Set its opacity to 50%.

With same selection create another layer, set brush size to 200px and select black color. Paint on the bottom of the pill.

Apply following settings:

Paint on the end of the pill. Then set brush size to 400px and touch for highlight. Then paint another line of highlight on top edge of the pill.

Double click on the Right part and Left part layers and apply these layer styles:

Time to sort out our layers. Name them, group them, and let’s move on to final touch.

4. Drop shadow
Duplicate and merge Right and Left part’s layers once again and move it behind them. Overlay it with black color with layer styles.

Choose Edit -> Transform -> Perspective and modify layer according to perspective.

Then fo under Filter -> Blur -> Gaussian Blur and type in 40px. Take layer’s opacity down to 80% and you’re done.

Get the PSD

[tweet2download file="files.zip" tweet="Creating a Pill Icon in Photoshop http://su.pr/4004am on @teamtutorials" follow="@teamtutorials" /]

This tutorial was written by Heidi Pungartnik, web and graphic designer. You can follow her on twitter (@ashocka18) or visit her website at aShocka.com.

Recreate the Digg.com Header

Parsing XML Feed to an Array with XPath

Mike Maguire — Sun, 16 Jan 2011 00:17:36 +0000

Recently while working on a project, I found myself needed to parse several different types of files through the same mechanism (CSV, pipe delimited, XML, and more). I decided that it would be best to get each time of feed to a identical object that could then be run through the same methods regardless of the input type. This tutorial will walk you through using PHP and XPath to parse the values from an XML file and store them into array for later manipulation.

To start, for those that are unfamiliar with XPath. It is a mechanism which will allow you to easily navigate and retrieve elements and attributes from XML and HTML. It’s preety simple to understand and can make life a lot easier when dealing with these languages.
Let’s take a look at the following XML example. An XPath is literally just a path to whatever attribute or element you are looking to get.



   
      Gambardella, Matthew
      XML Developer's Guide
      Computer
      44.95
      2000-10-01
      An in-depth look at creating applications
      with XML.
   
   
      Ralls, Kim
      Midnight Rain
      Fantasy
      5.95
      2000-12-16
      A former architect battles corporate zombies,
      an evil sorceress, and her own childhood to become queen
      of the world.

//catalog/book/title would return the nodes that match that. In this case, there would be 2.

This is the basic idea behind XPath. If you are interested in learning more or need more information please review the information that they have over at w3schools on the subject. They will be able to provide everything you need to get started.

First lets create our method that will do the actually data collection for us:

   function parseXML($feed_url,$field_xpaths)
    {
        //Get file from url
        $file_contents = file_get_contents($feed_url);

        //create xml object
        $xml = new SimpleXMLElement($file_contents);

        //Work through all fields we need to collect
        foreach($field_xpaths[0] as $key=>$field_xpath)
        {
            $count = 0;

            //Get an array of fields that match the current xpath
            $xpath_returns = $xml->xpath($field_xpath);
            //Iterate through the array and assign values to the coupon array
            while(list( , $node) = each($xpath_returns))
            {
                $rows[$count][$key] = $node;
                $count++;
            }
        }

        return $rows;
    }

When you break this down, you see how simple this really is to achieve. The way this function is written, it will accept an array for the $field_xpaths variable. Then it will iterate the through the array treating each as it’s own xpath. Each value will use it’s key in the array as it’s name (in my example, these values are pulled from a database, so the column name is the name of the key for that value in the array).

It first grabs the entire contents of the file and associates a SimpleXMLElements object to them. This object will allow us to use XPath operators to navigate through our nodes. For each set in the array (key and value) we get all values that match the XPath provided. We then iterate through each value in the returned array and store it in a master array (in this case it’s just called rows). When this is done processing, all values for each xpath will be stored in an multi dimensional array that you can call by name. For example, I said that mine were from a database and one of my column names (which would then become a key in the array of results) was named store_name. I would then be able to access the stores at $rows[intCount]['store_name'].

$field_locations = getFieldLocations($result['feed_id']); //Method to query the database and get the XPath values from it.
$feed_array = parseXML($result['feed_url'],$field_locations); //Calls the parser method.

The above code just calls the function and store the result into the array. You can now take this array and do what you need to with it. That concludes this tutorial. I hope it was easy to follow, and as always, feel free to comment or ask questions. Thanks for reading.

Combine Text Files into One File in Windows, Mac, and Linux

John Ward — Sun, 26 Dec 2010 23:47:34 +0000

I ran into a problem where I had a zip file that had a document I wanted to copy split into 100 different .txt files. I needed to combine all of the text files into one large file so I could copy all the data.

Windows

You can combine text files in Windows using copy’s binary mode. From the command prompt navigate to the folder with the .txt files and run the following command:

copy /b filename* all.txt /b

Where filename* matches the pattern of your file names and all.txt is the output file.

Mac / Linux / Unix

You can combine files in the unix shell using cat and appending the output to a file:

cat filename* > all.txt

Where filename* matches the pattern of your file names and all.txt is the output file.

This should help save someone a lot of copy and pasting time.

Access a MySQL Database Using PDO

John Ward — Tue, 02 Nov 2010 12:56:48 +0000

This tutorial will show you how to access a mysql database using the PHP Data Objects interface, also known simply as PDO. One big advantage of using PDO versus other methods is the use of prepared statements which offers much better security than the mysql or mysqli libraries. Also PDO can connect to several different database systems by specifying another driver. It is almost as easy as switching the driver to change from one database system to another (except for DB specific SQL syntax).

This tutorial requires that you already have a mysql database to connect to or know how to create a mysql database and will set one up. If you do not know how to setup a MySQL database then you will want to check out some of our other tutorials.

As I mentioned above PDO supports multiple database systems. If you would like to see which drivers you have available on your server you can print the array of drivers using:

print_r(PDO::getAvailableDrivers());

To connect to a MySQL database using PDO you simply need to create a new PDO object and provide the database information:

//Database Credentials
$host = 'localhost';
$database = 'DatabaseName';
$username = 'dbuser';
$password = 'dbpassword';

try {
  $DBH = new PDO("mysql:host=$host;dbname=$database", $username, $password);

}
catch(PDOException $e) {
    echo $e->getMessage();
}

echo "it works";

In the sample above you need to specify the correct information to connect to your database. The $host variable is the system that the database is hosted on. If the database is on the same server that you are executing PHP on then you can simply use localhost. The $database variable is the name of the specific database on the server. $username and $password are just that, the username and password of the database user.

Save the page with a .php extension and execute it. If the database connection works properly than you should simply see a message that says “it works” if not you will see some sort of error that should point you in the right direction to start debugging. Common errors are: wrong user/pass, not allowing a user to connect from other hosts, and syntax errors. If you are having trouble getting this connection to work feel free to ask in the comments.

Now that you have the database connection what do you do with it? I will show you that in future posts.

Function – Splitting a string

Mike Maguire — Tue, 19 Oct 2010 03:59:50 +0000

Splitting a String on a Character

There are a lot of functions out there that are very simple and easy to understand but are absolutely necessary to make fully functional applications. This week, we are going to begin with a simple string function: split. The split function (explode in PHP) allow the programmer to take a string and split that string into an array of strings on a character. For example, you could split a sentence into words by splitting on a space. As I said, this is a very simple function to use and understand.

Visual Basic

'Build the string we want to split
Dim stringToSplit As String = "this,is,a,string,that,needs,split"

'Array of strings to store the split values in
Dim stringArray As String()

'Split the sting based on a character value
stringArray = stringToSplit.Split(","C)

'Iterate through the results from the split
For Each splitString As String In stringArray
	'add each string to a listbox
	lstStrings.Items.Add(splitString)
Next

We take a string and split it on a comma and add it to a list box control named lstStrings.

            //Build the string we want to split
            string stringToSplit = "this,is,a,string,that,needs,split";

            //Array of strings to store the split values in
            string[] stringArray;

            //Split the sting based on a character value
            stringArray = stringToSplit.Split(',');

            //Iterate through the results from the split
            foreach (string splitString in stringArray)
            {
                //add each string to a listbox
                lstStrings.Items.Add(splitString);
            }

We take a string and split it on a comma and add it to a list box control named lstStrings.

PHP

//Create a string to split
$stringToSplit = "this,is,a,string,that,needs,split";

//Just showing this value is an array (not neccessary with PHP)
$stringArray = array();

//Split the string on a character (explode in PHP is a split function)
$stringArray = explode($stringToSplit,',');

//Start table HTML
$html = "";
//Iterate through the array
foreach($stringArray as $stringSingle)
{
    //Build the rows for the table
   $html .= "".$stringSingle."";
}

//End table HTML
$html .= "";

//Output the table
echo $html;

We take a string and split it into an array. Then we iterate through the array and put the values into a table.

Java

        //Create a string to split
        String stringToSplit = "this,is,a,string,that,needs,split";

        //Create array for string to be split into and run split on it
        final String stringArray[] = stringToSplit.split(",");

        //Iterate through the array
        for(int r=0;r
Split the string and then add the values to a jList control. 
As you can see, each language has it’s unique way of using this function but I think we can all agree that this is simple to understand and can be very helpful in our applications. Nice thing about this function is that if the string doesn’t contain the character you want to split on, it will still work as you will just get one string since there is nothing to split. It won’t throw an error. 
That concludes this week’s tutorial. Hopefully it was easy to follow and understand and we’ll see you next week. Thanks for viewing.  
Related Posts
Configuring and Creating a Database in MS SQL 2008
Create MySQL Databse with cPanel and phpMyAdmin
Show Hidden Files and Folders in Windows XP
Simple VB Code with Command Buttons
Get Free Answers from Experts-Exchange

Forums and Posts

Mike Maguire — Mon, 18 Oct 2010 19:24:56 +0000

There have been a lot of changes going on recently and the site has been getting pushed to the side. We are going to start trying to get some new content posted regularly again. The forums that we added back a while ago are now functional again (never noticed they weren’t working). Feel free to post anything on there and we will do our best to help you out.

We have also seen some requests to go over some basic programming functions that are available in several different languages so starting this week we will be posting general function tutorials that will explain what a function does and what it can most commonly be used for as well as an example in PHP, .NET (C# and VB), and Java. Hopefully these will come in handy to those of you looking to get started in programming. As always, let us know if there is anything you can think of that you would like to see and we will do our best to give it to you.

Simple XML to XHTML Transformation

John Ward — Mon, 03 May 2010 21:38:37 +0000

In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML. In order to complete this tutorial you should have a basic understanding of XML documents, HTML/XHTML, and CSS.

First off you need some sample XML. I made a quick list of cars I have owned.



	
		1995
		Eagle
		Talon
		ESi
	
	
		1998
		Mitsubishi
		Eclipse
		GS-T Spyder
	
	
		2004
		Cadillac
		CTS
		Sport

We are going to add an XML stylesheet to the document, similar to a CSS file with HTML. In order to add the file we need to add the xml-stylesheet tag to our root document.

Which should give you this.




	
		1995
		Eagle
		Talon
		ESi
	
	
		1998
		Mitsubishi
		Eclipse
		GS-T Spyder
	
	
		2004
		Cadillac
		CTS
		Sport

Next you will need to create a new document that I called output.xsl. This file will be used to tell the browser how to display our XML. Here is a pretty standard starting template.

Now we need to create a typical HTML table to display our results in.

Now we are going to determine which fields we want to display in the rest of the table rows. We will do this by using the xsl:for-each tag. This will pretty much create a for each loop and loop through which ever values you specify. We want whatever data is container withing the car tag within the autos tag. So you would do something like this:

Then we simple tell XSLT how to display the values (in tables and cells in this case) and what values we want.

Then to finish it off you can style your table with some CSS.

Its that simple. We started a simple XSL file and output an XHTML page using XSL.

Download the Source Code

[tweet2download file="source.zip" tweet="Simple XML to XHTML Transformation http://su.pr/1ci3ZU @teamtutorials" follow="@teamtutorials" /]