Nettuts+ » Tools & Tips

How to Create a Mashup by Combining 3 Different APIs

Chris Cagle — Mon, 13 Oct 2008 10:30:36 +0000

This tutorial will show you how to create a mashup of three different APIs including integration with Google Maps. This idea came about when I was searching through ProgrammableWeb’s API directory for a couple APIs that complimented each other enough that I could use one to provide the other with data. What I came up with will be known as the “Beer Mashup”.

Step 1. API Discovery

While looking through ProgrammableWeb’s directory, I found an IP geolocating tool called ipLoc. It simply accepts in an IP address and returns relevant location-specific data on it such as it’s state, city, country, postal code, etc.

I then found the very cool Beer Mapping Project, which has a huge directory of bars and pubs from not only across the US, but many other countries as well. Instantly I noticed that this was a perfect compliment to ipLoc because the BeerMapping API requires a city (which we can get from the ipLoc API) to return a list of local bars and pubs.

Lastly, I also wanted to integrate Google Maps into this mashup to plot out the addresses of the bars and pubs to add a bit of interactivity to the page instead of just displaying each bar in a simple HTML list.

Step 2. Variable Initialization

I usually find it best to start PHP documents off with some of the variables that I want to set globally within the script. Here I add a line that silences PHP warning messages (Google Maps spits out many of these if you happen to try to map an invalid address) and my BeerMashup and Google Maps API keys. We will end up using these API keys when we get to their respective steps below.


Step 3. IP Geolocation Setup
The ipLoc API allows you to either specify an IP address to get data on, or use the default IP address that the script finds.
Default Version: http://iploc.mwudka.com/iploc/json/

Static Version (IP address is hardcoded): http://iploc.mwudka.com/iploc/68.162.155.110/json/
//Set Location
	//Visitor IP Address
	$ip = getenv("REMOTE_ADDR");

	//via IPLoc
	$iploc = file_get_contents("http://iploc.mwudka.com/iploc/$ip/json/");  //Format: JSON
	$ipdata = json_decode($iploc, true);
After a little testing, I realized that the default version of the ipLoc API was finding the location (Scottsdale, AZ, USA) of my hosting provider’s server rather than my home computer’s IP location (Pittsburgh, PA, USA). To circumvent this, I decided to use the static IP version of the API (Line 2 above) and passed in the IP address that is detected by the getenv(”REMOTE_ADDR”) php variable.
After checking if the data has been successfully returned as a decoded json formatted string, we need to extract only the specific data we want to pass to the BeerMapping API, which is the city and state. 
	// Error checking
	if ($ipdata['city']) {
		$city = $ipdata['city'];
		$state = $ipdata['region'];
		$location = $city .", ". $state;
	} else {
		$err = "No location data returned for your IP address: ". $ip; 

	}
Step 4. Integrating Google Maps
This step needs to be done now because the next step will add the location points to Google Maps – and Google Maps has to be initialized before any of that can happen. 
To make the Google Maps integration as easy and painless as possible, I’ve enlisted the help of a great PHP class called Phoogle from System Seven Designs. This class takes care of all the Google Maps API heavy lifting for us while just allowing us to worry about the data. 
All we need to do to get this to work is to first include the class file we downloaded: phoogle.php, then set some basic map parameters such as the height, width, zoom level and your Google Maps API key. (Get one of those here). 
//Phoogle - GoogleMaps PHP Class
	require_once 'phoogle.php';
	$map = new PhoogleMap();
	$map->setAPIKey($gmaps_api); //Using the variable we set in Step 2
	$map->setHeight(450);
	$map->setWidth(750);
	$map->zoomLevel = 6;
	$map->showType = false;
Step 5. BeerMapping API
Since we have the combined city and state in the variable $location from Step 3, we have everything we need to pull data from the BeerMapping API. Of course we also need one of their API keys, which can be requested here (about a 30 seconds process, start to finish). 
A BeerMapping API call looks like this according to their examples:

Real Example: http://beermapping.com/webservice/loccity/71515667a86b8ec7f58cd22e3af86f6e/pittsburgh,pa
After substituting our variables in for the API Key (Step 2) and Location (Step 3), our BeerMapping API call now looks like this:

Our Example: http://beermapping.com/webservice/loccity/$beer_api/$location
After a little playing around with this API, I found that the location can’t have any spaces. So the below code first gets rid of the space bewtween the “city, state” format. Then it replaces all other spaces within the location with underscores “_”.
//Format Location for use with API
	$locationF = str_replace(", ", ",", $location); // Remove space before "State"
	$locationF = str_replace(" ", "_", $locationF); // Replace space with underscore in "City" name
Their data can only be returned in xml format, so we can easily extract the data returned by this call with the simplexml_load_file PHP function.
//BeerMapping - Format: XML
	$beerdata = simplexml_load_file ("http://beermapping.com/webservice/loccity/$beer_api/$locationF");

As the image shows, we first load the whole file into the variable $beerdata. After checking to see if we returned any results…
	// Error checking
	$beererr = $beerdata->location->id; //$beererr will be 0 if there were no locations returned
	if ($beererr == '0') {
		$err = "No breweries were found in ". $location;
	} else {
…the next step is to cycle through each bar/pub returned in the call, extracting all the data we need to pass into Google Maps (Step 4).  
		$breweries = $beerdata->location;
		$barcount = count($breweries); //How Many?

		foreach ($breweries as $brewery) {
			$name = $brewery->name;
			$link = $brewery->reviewlink;
			$street = $brewery->street;
			$city = $brewery->city;
			$state = $brewery->state;
			$zip = $brewery->zip;
			$phone = $brewery->phone;

			//Location Point set for the Google Maps API
			$map->addAddress("$street $city $state $zip", "$name
$street
$city, $state $zip
Phone: $phone");
		}
	}
?>

Line 1 above sets the structure location of the “locations”. Line 2 counts the amount of “locations” the API result returned. The remaining lines use a foreach loop to cycle though each “location” and pull out it’s address information. Line 14 sets a “point” for each brewery on our Google Map.
Step 6. HTML Generation
After finishing all the PHP code that we’ve created, we can now work on displaying it. The first few lines shown below are standard in any HTML document, but after that we get back to using PHP. We first check to see if the variable $err is FALSE – which would mean that the $err variable is empty, or that we never received an error. If we never got an error, we spit out the Google Map, otherwise we spit out an error message. 





Bars Near <?php echo $location; ?>

	
	
		
			

			Developed by Chris Cagle for NETTUTS

			
				";
					$map->printGoogleJS();
					$map->showMap();
					echo "". $location ." (". $barcount ." Bars)";
				} else {
					echo "". $err ."";;
				}
				?>
			
		
	
	

After adding in some text and CSS and you now have a great looking web page that displays all the bars and pubs within the vicinity of the location of whoever is viewing the web page. 
View the demo of the page as it stands now. The mashup is working great now, but we have one more improvement that will make all the difference when it comes to UI.
Step 7. Changing the Code to Allow Locations to be Input by the Visitor
At this point, our page works just fine but there is one small caveat: The visitor can only view bars from his or her current location. What if the visitor wants research bars in a different town rather than the one our IP API returned for him or her? Any visitor would want the ability to specify the location to research in. 
To allow this, we will have a simple form that will accept in a city and state from the visitor then reload the page for the given location and skip the ipLoc API call completely. We will insert this code right before our 
 line in Step 6. 

	location: (ex. New Orleans, LA)
	

	


In order to make this work, we will need to wrap the code we made in the ipLoc step (Step 3) in an if-statement that checks if the form was submitted or not. If the form *was not* submitted (which will happen each time the page is initially loaded), then it will use the ipLoc IP geolocation code. If the form *was* submitted, it will take what the user submitted and set our $location variable to that. 
//Set Location
	if ( isset($_POST['loc']) ) {
		//via user input
		$location = $_POST['loc'];
	} else {
		//Visitor IP Address
		$ip = getenv("REMOTE_ADDR");

		//via IPLoc
		$iploc = file_get_contents("http://iploc.mwudka.com/iploc/$ip/json/");  //Format: JSON
		$ipdata = json_decode($iploc, true);

		// Error checking
		if ($ipdata['city']) {
			$city = $ipdata['city'];
			$state = $ipdata['region'];
			$location = $city .", ". $state;
		} else {
			$err = "No location data returned for your IP address: ". $ip;
		}
Step 8. Putting it all Together
View the demo of the final application.
You can view the source code of the final project (which is pretty much just the steps above pushed together) and see how I ended up combining 3 separate APIs into one application. Take a stroll for yourself through the API directory over at ProgrammableWeb and see what you can come up with on your own. Working with APIs is my new obsession because it is exciting to be able to create something new and useful from someone else’s data. If this tutorial has helped you mashup a couple of APIs, post them here – I would love to see them.

Organize Your Team with Collabtive

Thord Hedengren — Fri, 10 Oct 2008 10:30:03 +0000

When you’re managing larger teams of writers, developers, artist, or whatever really, a collaboration software can come in handy. The most popular and most talked about in the blogosphere is without a doubt Basecamp, which is a hosted solution that will set you back $$ monthly. If you want to save in on that, or if you just want to have full control of your inside stuff, then open source solution Collabtive is for you.

“Collabtive is collaborative software to get your projects done!”

Step 1: Download and Install

Collabtive is still in beta, the current version is 0.4.8, but so far I’m very impressed. It is easy to use, and the install was simple enough.

First of all, download Collabtive from the website, and upload it to your server. I installed this for my company, and I’ll use that URL for the examples below. You’ll need PHP5, by the way, but if you don’t have that you really should be giving your host a hard time! Anyway, upload the files, and make the following writeable by the server:

the /templates_c folder
the /files folder
the file /config/standard/config.php

Then create a MySQL database for your install, keep the database name, user name, and password nearby, and point your browser to where you uploaded the files, for me that was http://team.cylinderlabs.net. You want to open the install.php file, so that would be http://team.cylinderlabs.net/install.php

From here on it’s easy. Just fill out the database details (you should probably keep “localhost”, which is filled out on beforehand, unless your database is on its own server) and click the Continue button.

Now, fill out the details for the admin account. You don’t want to loose these, so make sure you remember them. Here you can also import content from Basecamp, should you be a switcher, although this is a feature I haven’t been able to try since I haven’t used the service in a long time. Did you try it? Do share your experience in the comments!

Anyway, click Continue when you’re done.

And you know what, you’re done! Login, and you’ll arrive at the Dashboard, looking more or less like the one above. Now, let’s take this baby for a spin, shall we?

But wait! There’s one more thing, not mentioned in any readme file. Change the writing permissions of /config/standard/config.php back to read only. You don’t want people to dig out your database details, now do you? If you’re really anal about security, you might want to fiddle with the other write settings as well.

Now we’re done.

Step 2: Putting Collabtive to Good Use

The first thing I did was to go to Administration, using the four icons in the top right, and then choose System administration. Here you can change the name of your Collabtive install, the timezone, pick a template (just one included, I’m afraid), import from Basecamp yet again, and so on.

I then went to the user administration, again, using Administration in the top right and then User administration. Adding a user is simple and straight forward, but if you want a pretty user profile page like me, you’ll have to urge your users to click the edit button. It looks really bland and boring otherwise. I like the option to download a VCF card for each user, based on the details submitted, by the way. Very corporate-ish.

Since this is a collaborative software, you’ll work a lot with projects and tasks. The first thing you need to do is to create a new project. You do that in Administration, yet again, and then Project administration, where you’ll find a list of your current projects, and also an Add project button. I added a project for my Notes Blog WordPress theme, mostly to try stuff out, but also to keep track of the time spent on things.

Every task belongs to a task list, and that in turn belongs to a milestone, so your next step would be to add a suitable milestone. For me, that’s an alpha version of the theme. Then you add the task list associated with the milestone, and populate it with tasks. It is all very straight forward, and you can of course appoint everything to different persons working in the system.

If you’ve ever used Basecamp you probably recognize the work flow. While Collabtive is simple compared to Basecamp, at least so far, it does the basics very well. We’ll be running it in my company for now.

Step 3: Cool Little Things

There are some cool little things that I’d like to point out with Collabtive, the first being every date field in the system. When you click the field, a calendar just pops up, and when you’ve picked the date, it disappears. No icons or nonsense like that, just a simple and obvious functionality that I like.

Speaking of icons, here and there you’ll see a disk icon. Hover it to get further options for saving down the associated data, which could be your task list or whatever. Most stuff can be saved as an Excel or PDF file, which is cool. Sure, they could just have had small icons for each of these, but the hover functionality decreases clutter, even though it encumbers the functionality somewhat. Since this is something I won’t use on a daily basis, I think it is good as it is.

Another cool thing is the online list in the sidebar. If you’re online at the same time as another user, you can start at chat right then and there with him or her, just by clicking a speech bubble icon to the right of the username.

The Timetracker feature could prove useful as well, you access it on the various project dashboards, where you can easily add a time report for when you worked on the project. This is certainly a good thing, but as always it depends on you remembering to fill out the time tracker form each time, and to add even smaller edits to a project, otherwise it won’t be a truthful time report in the end. Still, easy to use and manage.

There is support for themes, and if you visit the Collabtive forums, you’ll find a few threads about it, but at this time the standard theme is the one you’ll build upon. Also, there’s no documentation on this, so that’s a limitation of course. That being said, just building from the standard theme should make it fairly easy to do some minor edits to fit your need, should you want to brand your install a little harder.

Wrapping It Up

I’m impressed by Collabtive so far. There are a few things I think it lacks, one being a choice of themes to style it. This, along with more localization files, is probably just a matter of time, since the system overall is responsive and easy to use, a true option to Basecamp for smaller organizations.

One thing it has to sort out, however, is a backup functionality. I want it to e-mail me database backups, and perhaps even do backups of uploaded files, so that I can restore my collaborative system should the server end up dying on me. Hopefully this is due in an upcoming version.

Give Collabtive a go if you need to manage your team, it’s worth a shot! Also, don’t forget to let us know how the Basecamp import feature works out for you.

The Best Ways to Fight Spam

Justin Shreve — Mon, 06 Oct 2008 10:30:32 +0000

Spam is one of the major pitfalls of the social web. According to sites such as Postini, 10 out of 12 email messages are spam. As if that weren’t already enough to make you cringe, 1 in 39 emails contain a virus. Spam is penetrating into other regions of the Internet as well. The creators of the blogging software Wordpress report that nearly 87% of all blog comments are also spam. As messaging and communication applications proliferate throughout the web, developers and site owners have to get creative in the fight against the thousands upon thousands of unwanted messages streaming in every day. Deciding on the best method of spam prevention on your blogs, forums, or even contact forms can be difficult. In this article we will take a look at a service called Akismet and how it can help. We will also look at why some other methods of fighting spam fail.

Methods of Fighting Spam

Disallowing multiple consecutive submissions. Spammers almost always post more than one SPAM comment or message at a time. A common method for fighting spam is to log the incoming message with the user’s IP address and a timestamp of the post. Then, when a user attempts to post multiple comments, you can check to see if the user has posted more than once within a specified window of time, for example 30 seconds, or if the current poster was also the last poster. This is not a bulletproof method because spammers can use proxies when they want to post multiple times, and robots have as much time in the world as they want to spam your site.

Keyword Blacklist. Another method of fighting spam is to build a blacklist of common spam keywords yourself and to disallow posts that contain the words. In its most simplest form, you can create an array of keywords and check to see if an incoming string contains them. Spammers have evolved defenses against this method by posting variations of the words. They replace letters with numbers, symbols, and other such characters to create a broad selection of keyword variations.

CAPTCHA. CAPTCHA (Completely Automated Public Turing Test) is one of the most common spam prevention techniques on the web today. The technique is very useful, and almost any site that allows you to register for an account or post information publicly uses CAPTCHA in one way or another. CAPTCHA tests can be audio files, but are more commonly images presenting a series of characters and numbers that you have to enter into a form. The technique is a useful tool for blocking robots that attempt to visit your site to post spam messages or create fake accounts with fake information.

CAPTCHA works well for its intended use, but there are minor drawbacks. A CAPTCHA requires (yet another) field for users to fill in after entering usernames, passwords, and security questions. There is understandably an annoyance factor accompanying their use. In addition, disabled users may not be able to use the CAPTCHA field. Finally, human spammers can also still spam your site because a CAPTCHA only blocks out robot spammers.

So What’s Left?

Having reviewed some of the current methods and their weak points, you may be wondering what else we can do to protect our blogging applications. I would like to introduce a new spam fighting tool from the creators of WordPress. The service is called Akismet and is described by its creators as a “… collaborative effort to make comment and trackback spam a non-issue and restore innocence to blogging, so you never have to worry about spam again.”

The tool can be implemented in any project as long as you have an API key, which can be used free for non-commercial use or purchased for commercial use for as little as $5 a month. There are several Akismet plugins for existing software, and these are identified later in this article. Alternatively, you can include the service in your own projects as we will demonstrate.

Implementing Akismet in your Own Projects

As of now the only way to receive an API key is to sign up for a free WordPress.com user account. Turn your browsers towards http://wordpress.com/signup/ and fill out the normal required fields: username, password, and email as seen below and then read and agree to the terms of service agreement. Make sure that you register for a blog as you can not receive an API key without the registration. Don’t worry about this detail, because the API key won’t be tied to a specific blog. Once you have finished the registration process you should receive an email with your new API key.

You will now need to download and unzip PHP5Akismet.0.4.zip (24K) from Achingbrain. Upload the single php file to an area accessible by your scripts. The other files and documentation are just for reference.

We will assume that you are working with an existing project. This could be anything that allows user contributions such as a forum or blog. We will also assume that the logic for creating and displaying content already exists. With that in mind, our first step is to load the file into our own project.

include "path/to/file/Akismet.class.php";

Next we will need to create a new instance of the Akismet class. Using the classes constructor, we can pass our API key and the URL of the site using it. Make sure to replace the following data with your own.

$akismet = new Akismet( "http://myblog.com", "API KEY HERE");

Now the service needs the actual comment data that we want to check. In the following instance I am using some example data, but in production the comment information would derive from POST data. The Akismet service will then compare the comment information to a database of more than 7,486,928,953 spam comments and return a result if the submitted post has been identified as a spam comment.

$akismet->setCommentAuthor("Justin Shreve");
$akismet->setCommentAuthorEmail("test@test.com");
$akismet->setCommentAuthorURL("http://serenelabs.com");
$akismet->setCommentType("forums");
$akismet->setCommentContent("I really agree with what  you are saying! I can't believe I never thought of that before!");

The functions presented here are quite straightforward. The only function that requires some further explanation is the setCommentType function. This is used by Akismet to help the service identify the origin of the comment (was it posted on a public newsgroup, forum, or blog?), and you can pass any argument you want. For example, if you are using the function to spam-proof a wiki, then use wiki as the type. If you are protecting a blog, then use a blog type.

Now we will use a function called isCommentSpam. This is the function that actually contacts the service. The boolean function will return true if the comment is identified as spam and false if the comment is verified as legitimate.

if( $akismet->isCommentSpam() )
{
	// Here we can store logic to deal with spam comments.
	// Usually we can store the comment internally for later reference just in case the service makes a mistake.
}
else
{
	// This is where you would insert the content into the database.
}

Using Akismet is as simple as these few lines of code! You have now integrated a spam-fighting service into your site. The service can be used in conjunction with the other forms of spam defense mentioned earlier. Keep in mind that Akismet is a service that grows each time you use it because the functions contribute your spam content to the database. There may be valid messages sometimes identified as spam and vice-versa. As a result, we may want to integrate a little more functionality to deal with potential misidentification.

If a message is wrongly identified as SPAM, then you can notify Akismet, and they will deal with it accordingly. Alternatively, you can mark a comment as SPAM if it happened to fall through the Akismet filter. When implementing the following functionality, make sure that the comment data in the variables is set in the same format as above.

The function

$akismet->submitHam();

can be used to notify the service that the comment they reported as spam is actually ok.

While the function

$akismet->submitSpam();

can be used to notify the service that a comment that was approved actually is a piece of spam.

Other Libraries

PHP5 isn’t for everyone. Akismet libraries have also been created in a slew of other languages. Below are a few of the most popular:

All of these can be easily integrated into your projects in much the same way as described above.

Popular implementations

Don’t feel the need to roll your own software but still want to take use of Akismet? Many solutions already exist for blog, CMS, or forum software:

Invision Power Board
phpBB
Drupal
vBulletin
Expression Engine
and of course WordPress by default!

Closing

I hope that this guide will serve as an introduction into some alternative forms of spam combat. A site without SPAM not only appears more professional to users, but is also much easier to manage for administrators and moderators.

Introduction to Adobe Air

Cesare Rocchi — Thu, 02 Oct 2008 10:30:21 +0000

This tutorial will introduce you to Adobe Air, a framework to build rich internet applications. This first introduction will show how to create a simple application using Html/Js technologies.

What is Adobe Air?

Adobe Air is a framework which allows building desktop applications.
Adobe Air applications are based on two technologies: Html/Js and Flash.
Developers can choose to build desktop application via Html/Js, Flash or Flex. After a brief overview of the architecture, we will build a simple application using Html/Js.

Step 1 – Architecture of an Air application

An Air application is executed by means of a runtime component, which executes the code contained in the air file. As you can see in the figure Adobe provides the runtime component for the three mayor operative systems, Mac OS X, Windows (XP/Vista) and Linux (note: the Linux version is still in beta). The figure might lead to think that the two approaches are exclusive, either you develop in HTML/JS or Flash. Since the air runtime allows “bridging” between Javascript and ActionScript engines, you can call javascript code from an swf, manipulate HTML/DOM via ActionScript, etc.

Step 2 – OS level functionalities

Adobe Air runtime is not simply an integration of HTML/JS and Flash technologies. The runtime provides a set of API which allows air applications to interact with OS functionalities like:

File read and write
Native Windows/Menus creation and management
Retrieval of internet resources

Adobe Air includes also SQLite, a database engine to locally store and retrieve data.

Step 3 – Installation

To repeat the steps described below you need to install the runtime and the sdk (Software Development Kit), which enables you to build air applications.

The runtime can be downloaded from http://www.adobe.com/go/getair. Just run the installer and follow the instructions.
The SDK can be downloaded from: http://www.adobe.com/go/getairsdk
Unzip the SDK and place the folders in the location you prefer (macosx users will have to mount a .dmg image). Remember the location of the SDK, we will refer to it as SDKPATH.
The directory of the SDK should look like this:

Step 4 – Configuration

The SDK has to be configured, otherwise the OS will not find the commands to be executed.
In fact, if you open a shell a type adl, your OS will say something like “command not found”. This will work only if you move to the bin directory of the SDK folder. Since we want to be able to run build and test commands from every folder we have to configure the SDK. It is important to type correctly the absolute path of the bin directory in the SDK folder.

On a Mac OS X follow this procedure:

Open the Terminal (/Applications/Utilities/Terminal)
Type cd to be sure you are in your home folder
look for a file named .profile. If it does not exist create it
Look for a line similar to this: export PATH=$PATH:/usr/bin
add another line like this: export PATH=$PATH:/airsdk/bin
if the path to the air SDK contains white spaces wrap it with a double quote (e.g. “/my pathtosdk/air”)
Close and reopen the terminal. Or type source .profile

On Windows follow these steps:

Right click on My Computer, choose Properties
Select the Advanced Tab and then click the Environment Variables button
Select PATH from the bottom list and add the path to the sdk folder at the end, as in figure.

To test whether the configuration is successful let’s open a shell and type the
adt command.
The result should be the following:

This response technically means that we have provided a wrong number of parameters to the command, but it also
means that the SDK has been correctly installed and configured.

Step 5 – Project creation

Let’s now create our project folder. We call it myTest and we create two files: myTest.html and myTest.xml.

The xml file is the configuration file, which enables setting up the air application. Open it with your preferred editor and insert the following code.

Evening Tip: 5 Time Saving Coda Features

Sean Nelson — Wed, 27 Aug 2008 22:00:11 +0000

Panic Inc.’s application “Coda” is, in my opinion, a terrific application for the Mac OS X platform. It’s single window interface keeps things organized and eliminates the cluttered desktop that typically plagues web designers and programmers. What I like most about Coda is all of it’s time saving features. Here are my top 5:

1. Built in reference guides.

Do you often find yourself pulling out your programming books for quick reference?
Coda helps save you a trip to the book shelf. Included are the HTML, CSS, Javascript,
and PHP “Web Programmer’s Desk Reference” reference guides. Even better, they are
searchable and integrated into the app’s Programming Hints banner.

Visit the Books section by clicking the Books button in the Toolbar or by pressing
Command+6.

2. Blockedit

This is probably my favorite feature. Hold down the Option key and select a block
of text (or an empty block) and start typing. Coda mimics the text you type to all
of the lines selected. This is perfect for adding a long list of links, lists, or
putting navs together.

There are a couple of different ways to do this. Select a block of text and go Text
> Blockedit Selection (Shift+Command+3), or just hold down Option while selecting
the text (the cursor will turn into a crosshairs).

3. Clips

Clips will store your favorite text clippings into an easy to reach widget. Coda
provides you with the famous Lorem Ipsum filler text and some Doctypes to start,
but you can easily add your own by pressing the Plus button at the bottom. Rather
than typing things over and over again, click and drag a clip to your document and
you’re done.

I use it to store my CSS document template and some common includes.

4. Built in Code Validation

Always visiting validator.w3.org to make
sure your HTML is good to go? Coda has HTML and XHTML code validation built in (sorry,
no CSS). Follow the warning triangles and read the balloons to get an idea of what’s
wrong. Coda will continue to re-validate your document as you edit it until it’s
turned off.

5. Split Editing

Split editing is great for when you need quick reference to other files without
needing to switch tabs. In your file browser on the left, Control+Click on a file
and choose Open in Split.

I like to have my CSS in one Split and my HTML in another. That way I always know
what elements I need to edit.

You can read more about Coda on Panic’s Website.

Build Your First Facebook App

Joe Casabona — Wed, 20 Aug 2008 12:37:25 +0000

So you want to build a Facebook application and reach literally millions of users. Well luckily, writing an application using the API isn’t too hard to learn (for the basics, anyway). In this tutorial we will write a Facebook app that generates a random quote to display on the user’s profile.

Getting Started

It’s worth noting that the Facebook API is available to a number of languages, all listed on the Facebook Developers Wiki. I will be using PHP 5 for this tut. You will also need to download the PHP 5 Client Library, which I’ve included in the SRC files. All code featured here will be in the index.php file.

Step 1: Initialize Your App

The first step to get a Facebook API key, which allows your app to retrieve information from Facebook. Go to the Facebook Developer Application and click the “Set Up a New Application” button. Pick a name, agree to the Terms & Conditions, and you’ve got your API. Now you need to set up your canvas page name and callback URL.

Your canvas page is the application area within Facebook; the name is added to the URL and will look like this: http://apps.new.facebook.com/[YOUR APP NAME]. The callback URL points to the server hosting the app files. To set these up, from the “My Applications” page click “Edit Settings” on the right hand side. You will see the fields to fill in both, as I did in the screen shot below. While there are lots of other options, none are necessary for this tutorial. Click ‘Save’ and you’re now ready to build your first Facebook app. Facebook even provides you with some start up code. I’ve cut out the extra stuff and gave you only what you need to initialize your app…

require_login();
$callbackurl = 'http://www.casabona.org/nettuts/';

?>

This is fairly straight-forward code. We create a Facebook object using our API key and app secret, which was given to us when we created the API key. The first thing we do after that is get the user id of the logged in user. This will be valuable to us if we were do things get the user’s name, the user’s friends, etc. I’ve also added the $callbackurl to make it easier to link to images or other files, as Facebook does not allow relative linking.

Step 2: Writing the Application

If we don’t make specific Facebook calls, this is just like writing a php application. Below is our code.

//initialize an array of quotes
$quotes= array("Only those who dare to fail greatly can ever achieve greatly.", "Take my wife. Please!", "I believe what doesn't kill you only makes you... STRANGER");

//Select a Random one.
$i= rand(0, sizeof($quotes)-1);

//print the CSS
print ('

');

print "Nettuts Quotes";
print "". $quotes[$i] ."";

This is all you need to do to print to the canvas page. One thing to note is the way we create CSS. We cannot call a file like style.css- we actually have to include the CSS in the HTML. This is so our CSS doesn’t interfere with Facebook’s. You should also know that when styling divs, you can only uses class, not id. The code we created will produce something like this:

Step 3: Creating the Profile Box

Finally, some Facebook specific stuff. The code below is necessary to add our quote to the user’s profile, granted they are displaying our app in their profile. In our app, I’ve added the follow code right below $i= rand(0, sizeof($quotes)-1);

//prepare string for profile box
$text= ('

');

$text.=(''. $quotes[$i] .'');

//set profile text
$facebook->api_client->profile_setFBML($text, $user_id);

Notice I’ve done two things here: reprinted the CSS and put everything in a string called $text. This is because the function that sets the profile box text, profile_setFBML, takes two arguments: the text that should go in the profile box, and the id of the user. Any CSS defined for the canvas page is not transferred to the profile, so we must also add that to our first argument. The end result is this:

That’s It!

We’ve obviously only scratched the surface as far as Facebook application development goes. However, with the Wiki and resources Facebook gives you when you get an API key, you should be well on your way to creating the next big app! If you want to check out this app in all its glory, you can go here, just so long as you have a Facebook account.

Learn How To Develop For The iPhone

James Black — Mon, 18 Aug 2008 14:47:24 +0000

Today I’m going to show you how to build an alternate page and style sheet for the iPhone and iTouch. We will cover how to detect if the user is using an iPhone to view your page as well as the orientation of the device – whether it be landscape or portrait. To accomplish this we will be using javascript, and some Safari mobile specific CSS tags.

Getting Started

We’re going to start off with 2 psd’s I made and get those working in an iPhone page. I am using images for the background and header although you could use just straight colors instead of images. The plus side to not using images is that it obviously loads faster but also when switching between landscape and portrait the images take a moment to load, depending on how large they are. You can find the source psd files here or you can make your own. Something to keep in mind is that we are building a page specifically for the iPhone or iTouch. If you do not have the device yourself you can download the iPhone SDK freely from Apple and it includes an iPhone simulator. if you would like to detect the iPhone on your standard browser page and either load the iPhone css and html through conditional statements or send the user to a different page entirely, use the following code:

The code above explained:

Line 2: Create a variable that holds the users type of browser ( among other things )
Line 3: Assign the browser type a value if the iPhone browser is present.
Line 4 – 8: An if statement that redirects the user to an “iPhone formated page” if the variable “users_browser” returns a value ( meaning the user is using an iPhone or iTouch to view the current page ).

Below the code will use html conditional statements to hide the code from a regular browser.

Step 1: The HTML

So we now know how to point the user to your iPhone page if they are on an iPhone or iTouch device. Now, we will start working on the iPhone HTML page; the code below has some key differences from a regular XHTML transitional document.

	

	
	
		

		My iPhone Page

The code above explained line by line:

Line 1 – 5: This is standard 1.0 XHTML Transitional Doctype. Nothing special yet.
Line 6: This line is iPhone and iTouch specific. It sets initial values for the viewport in the Device’s browser. width=device-width states the width of the page to be the same width of the device. initial-scale and maximum scale set the starting point for the zoom of the page, maximum-scale is how much the page cane be scaled up.
Line 9: This link element is pointing to the web pages icon. this is used when a user saves the page to their “Home Screen”.
Line 10: A link element points to the iPhone style sheet. This element has the id orient_css assigned to it. This is so that we can point to it with javascript to change the css file it points to when it comes to adjusting the layout for the orientation of the device.

Step 2: Laying Out The Divs

We now continue with the rest of the html before we add any javascript functions for orientation detection. Start with ending the head and then start the body. In the body element we add onorientationchange=orient();. So I just lied, that is a bit of javascript, but this is needed to call our “orient” function (we’ll go over this in a bit) when ever the device detects a different orientation.


	

	

		
			
			
			
			This is the main content area of the page. 
			Using css and javascript we can manipulate any of these divs using an alternate css file. The css files in this project are for landscape and portrait views.
			Some more filler text here to demonstrate the page.

Step 3: The Orientation Javascript

In the head of the page you will want to place the code seen below

switch(window.orientation) works off of the onorientationchange() method in the body element. This will check to see if the current rotation is equal to the “case value”, if it returns true it will execute what is after the colon. After an orientation has been matched it breaks out of orient();. window.onload() runs the orient function when the page first finishes loading.

After each case (value) : we have javascript pointing to the link elements id that our css file is attached to. Depending on the case value, 0, 90 or -90 ( there is also 180 but it is not supported on the iPhone at this time) the portrait or landscape css file is attached to the href tag in the link element. 0 is upright (portrait), 90 is landscape counter clockwise. -90 is landscape turned clockwise and 180 although not supported yet would represent the device being upside down.

Step 4: Implementing The CSS

Even with all of this code, the page doesn’t do much. That’s because we need to add background images and style it all. We will create 2 css files, one called iphone_portrait.css and another called iphone_landscape.css. We will place the portrait css file into the link element as the default css file to use.


	body
	{
		background-color:#333;
		margin-top:-0px;
		margin-left:-0px;
	}

	#wrap
	{
		overflow:auto;
		width:320px;
		height:480px;

	}

	#header
	{
		background:url(../images/header.jpg);
		background-repeat:no-repeat;
		height:149px;

	}

	#content
	{
		background:url(../images/middle.jpg);
		background-repeat:repeat-y;
		margin-top:-5px;

	}

	p
	{
		margin:5px;
		padding-left:25px;
		width:270px;
		font-size:10px;
		font-family:arial,"san serif";
	}

	#bottom
	{
		background:url(../images/bottom_corners.jpg);
		background-repeat:no-repeat;
		height:31px;
		margin-top:-5px;
	}

The above code is for the iphone_portrait.css file and is rather straight forward. Some things to note are:

in the wrap style description overflow:auto makes sure floated items are kept inside the wrap div to keep the page nice and tidy.
the dimensions for the page are 320px wide by 480px tall. be sure to state this in the wrap div.

Below is the code to be placed inside the iphone_landscape.css file. the only differences between portrait and landscape css files are the background images, the wrap dimensions are reversed and the margins are adjusted accordingly.

	body
	{
		background-color:#333;
		margin-top:-0px;
		margin-left:-0px;
	}

	#wrap
	{
		overflow:auto;
		width:480px;
		height:320px;

	}

	#header
	{
		background:url(../images/l_header.jpg);
		background-repeat:no-repeat;
		height:120px;

	}

	#content
	{
		background:url(../images/l_middle.jpg);
		background-repeat:repeat-y;
		margin-top:-5px;

	}

	p
	{
		margin:5px;
		padding-left:25px;
		width:370px;
		font-size:10px;
		font-family:arial,"san serif";
	}

	#bottom
	{
		background:url(../images/l_bottom_corners.jpg);
		background-repeat:no-repeat;
		height:37px;
		margin-top:-5px;
	}

If you are using my sliced background images your page should now look like the image below when in portrait mode.

Or, in landscape mode?

Where To Go From Here?

So now that you have a page formatted and styled for the iPhone and iTouch, what else can you do? Well, if your page is meant to be more of a web app you may want to check out the IUI by Joe Hewitt which is a framework that makes your pages look like native iPhone or iTouch apps. Also keep in mind that you can set 3 specific css files; so you can have one css file that styles the page if its turned clockwise to landscape and a different file again for when its turned counter clockwise to landscape. This will allow for some interesting outcomes. Good luck!

Integrating and Customizing Lijit for Your Site

Thord Hedengren — Mon, 04 Aug 2008 20:26:44 +0000

Search is an important part of any website, and a lacking search functionality will mean that your visitors won’t find what they’re looking for, never a good thing. If you’re a WordPress user, you know what it is like, because WordPress, like so many other online publishing platforms, just can’t be as good as Google is. However, there are solutions. You can swap your search solution with something else, be it Google Co-Op, or Lijit. In this tutorial, we’ll take a look at Lijit, which will let you search across several sites, as well as multiple social webapps out there.

Lijit sparked my attention as a serious option to the overall pretty excellent Google Co-Op
solution with their inclusion of the social sphere. I can easily add my YouTube, Flickr, Twitter
account, and a lot more above that, for inclusion in the search queries sent through the Lijit
search box on my site. That way, a user can search across all my presences online, bringing them
closer together. That is, of course, a good thing.

The Brief

I’ll use my own site, tdhedengren.com, as an example for this tutorial. It is in a sort of
redesign mode, far from finished, which means that it is OK to play with it. Actually, it would be anyway, it is mine after all, but that’s beside the point. I’m running WordPress, but there won’t be any WordPress specifics in this tutorial, since it doesn’t matter to Lijit. I’ve got the search functionality from WordPress already, but I’m removing it in favor of Lijit.

So let’s get started!

Step 1 – Getting Lijit

Signing up to Lijit is ridiculously easy. Just visit lijit.com and type your URL in the field, and you’ll be thrown into a guide where you can tell Lijit where you’ve got an online presence, add blogs and sites you want to be included in the search, beside your own of course, and things like that. In fact, you can even ask Lijit to pull the blogs from your blogroll into your search, a nifty feature if any.

The list of online services is easily edited. Just click tha checkbox and fill out your username (you’ll get a check link when done typing, to make sure it is the right user on that particular online service), and you’re done.

There are a lot of online services and places to choose from, including MyBlogLog, Digg, Viddler, Tumblr, Disqus, Reddit, Facebook, and a bunch others, beside the ones already mentioned. And should your online poison not be there, you can always submit an URL or RSS feed, and Lijit will add it to the network.

These things are pretty straight forward. When you’re done, you can get your Search Wijit, which is the search box we want to integrate on our site. If you get lost in all the account settings and other things, just click the link in the top top right called My Search Wijit and you’re good to move on to step 2.

Step 2 – Integrating the Search Wijit

It is easy enough to get the Lijit search box, called the Search Wijit, on your site. Just click My Search Wijit in the top right when logged in, choose a Wijit Style, color, and logo color, make some other pretty obvious picks (add/remove features like a popular searches keyword cloud, icons, and so on), and save the settings. Clicking Install the Wijit button will get you your code, and then you just need to copy-paste this to where on your site you want the Lijit search box to be. It is simple enough. When installed, you won’t have to install it again, you just change your settings and save, and it is there automatically on your site, since everything is fetched from the Lijit servers.

However, let’s not get ahead of ourselves. Back to my blog. I wanted the Lijit search box up right away, so I unchecked all the extra features (content icons and so on), picked the Big Rounded style, Grey color, and Grayscale for the logo color option. The preview shows how it’ll look, but I put it up anyway, setting the width of the Search Wijit to 280 which I know would fit my sidebar.

Simple enough, right. Clicking Install the Wijit gives me a page where I can do quick installs if I have a TypePad or Blogger blog, but since I’m a WordPress user, I get a simple JavaScript code snippet to include.


Lijit Search

Since I think that the Lijit logo is enough, I removed the link, and then pasted this code in my sidebar, where I previously had the WordPress native search box.

Simple as that, I’ve got an integrated search solution powered by Lijit. The great thing is that search results are served in a layer floating above my site, which means that visitors searching for something on my blog won’t have to leave, unless they get a hit from any of my other online presences (be it a story on Devlounge, a tweet, or something else from my network), which then will lead to this place, of course.

Simple as that, it took a few minutes playing around to get my very own Lijit search on my site.

Just for fun, let’s see how the search box would look with all extra bling-bling enabled, like keyword clouds, extra buttons and icons, and so on.

No, I don’t want that, it is too much for me. I like the more minimalistic approach, serving up content from all my online presences when people ask for it (ie search), rather than pushing it forward in this way. But that’s up to you, you might like it!

Step 3 – Customizing the Search Wijit for Your Design

While I do think that the Lijit search box looks OK with these basic settings, naturally, I’d like it a bit more customized for my design. This is done by adding some CSS to your stylesheet, which will control the design of the Lijit box just as it would when doing a traditional search form.

However, before you can do this, we’ll need to visit the My Search Wijit page again, and choose Style My Own from the Wijit Style dropdown menu, and save. This will change the Lijit search box to something we can style using CSS.

Not too pretty anymore, but we’ll fix that. For me, I want a clean and simple form just like the ones I have for posting comments and whatnot on my site. There is not many CSS elements we need to mess with.

#lwp_main is the main div container
#lwp_sfb is the form
#lwp_sfd is the input box
#lwp_2_searchbutton is the submit button
#lwp_ps is the container for the search cloud

By adding these to your stylesheet, you can easily style the Lijit search box to fit your design. I just did some minor edits:

#lwp_main { float:right; width: 130px; text-align:right; } /* main div */
#lwp_sbf { overflow:hidden; margin:0; padding:0; } /* the form */
#lwp_sfd { width: 110px !important; margin-bottom: 3px; padding: 2px; border: 1px solid #555; text-align:right; } /* the input box */
#lwp_2_searchbutton { background: #555; color: #fff; font-size: 12px; font-weight:bold; border: 0; text-transform: lowercase; } /* the submit button */
#lwp_2_searchbutton:hover { background:#0c1; }
#lwp_ps {} /* the container for the search cloud */
#lwp_f { width: 130px !important; }

The result is a floated little search box in my larger search box. Since #lwp_main is the containing div, I used that one for this, and put in my own code to float a div with the small informational type to the left. Naturally, you can do a lot more fancy stuff using the custom CSS, so find whatever fits your site and go with it. Most likely, all you’ll need to do is take your current code for your searchbox, and put this in the corresponding Lijit CSS element in your stylesheet.

Step 4 – Search Result Variations

Personally, I like the layered div that displays the search result above my design. However, if you want to really embed the search result on your site, this is possible to. It works pretty much like Google Co-Op, which means that you’ll create a page on your site containing a code snippet that will display your result.

Setting it up is a breeze. Just go to My Search Wijit and chose On my blog (advanced) in the Display search results dropdown. Then write the URL to your search result page, and paste the code listed in the box below on this page. That’s it, very simple, just don’t forget to save your settings.

Finished! That’s it! As you can see, the amount of work needed to get a working Lijit search on your site is minimal. If you want to customize it, you’ll need to mess around a bit more, but it is really more of an issue with your current site’s code and design, rather than something clunky in Lijit’s interface.

The pro and cons of going with Lijit rather than Google Co-Ops can be discussed, of course. The latter offer the option to include your very own Adsense code, which could generate some money, but Lijit has got the social web thing going in a cooler way. If you’ve made this choice, feel free to share your reasoning, as well as your verdict should you have one.

Happy searching!

Can You Hack Your Own Site? A Look at Some Essential Security Considerations

Ben Charnock — Thu, 17 Jul 2008 05:38:25 +0000

Version one goes gold! Visitors are landing from every corner of the globe. You know there are likely to be a few teething problems, I mean, this is 1.0.0.0… all those zeroes are meant to allow us a little grace right?

Maybe that dastardly style sheet just won’t cascade
elegantly on browser X. An incomplete comment chucks out some broken mark-up.
Maybe you should have persisted those database
connections after all. Hey, we all overlook things in the excitement of getting
our first version running – but how many of these oversights can we happily
stomach, and how many might just leave a bitter taste in ours, and more
painfully our client’s mouths…

This article walks through the brainstorming stage of
planning for what is in this instance, a hypothetical user-centric web
application. Although you won’t be left with a complete project – nor a market
ready framework, my hope is that each of you, when faced with future workloads,
may muse on the better practices described. So, without further ado…Are you sitting
comfortably?

The Example

We’ve been asked by our client to incorporate into an existing site, a book review system. The site already has user accounts, and
allows anonymous commentary.

After a quick chat with the client, we have the following
specification to implement, and only twenty four hours to do it:

Note: The client’s server is running PHP5, and MySQL
– but these details are not critical to understanding the bugbears outlined in
this article.

The Processes:

Our client has given us a PHP include to gain access to the database:

We don’t actually need the source to this file to use it. In fact, had the client merely told us where it lived we could have used it with
an include statement and the $db
variable.

On to authorisation… within the datatable schema we are concerned with the following column names:

username, varchar(128) – stored as plain text.
password, varchar(128) – stored as plain text.

Given that we’re working against the clock… let’s write a
PHP function as quickly as we can that we can re-use to authenticate our users:

$_REQUEST Variables

In the code above you will notice I’ve highlighted an area amber, and an area red.

Why did I highlight the not-so-dangerous $_REQUEST variables?

Although this doesn’t expose any real danger, what it does allow for is a lax approach when it comes to client side code. PHP has three arrays that most of us use to get our posted data from users, and more often than not we might be tempted to use $_REQUEST. This array conveniently gives our PHP access to the POST and GET variables, but herein lies a potential hang-up…

Consider the following scenario. You write your code client side to use POST requests, but you handover the project while you grab a break – and when you get back, your sidekick has written a couple of GET requests into the project. Everything runs okay – but it shouldn’t.

A little while later, an unsuspecting user types an external link into a comment box, and before you know it, that external site has a dozen username/password combinations in its referrer log.

By referencing the $_POST variables instead of $_REQUEST, we eliminate accidentally publishing any working code that might reveal a risky GET request.

The same principle applies to session identifiers. If you find you’re writing session variables into URLs, you’re either doing something wrong or you have a very good reason to do so.

SQL Injection

Referring again to the PHP code: the red highlighted line might have leaped out at some of you? For those who didn’t spot the problem, I’ll give you an example and from there see if something strikes you as risky…

This image makes clear the flaw in embedding variables directly into SQL statements. Although it can’t be said exactly what control a malicious user could have – it is guaranteed, if you use this method to string together an SQL statement, your server is barely protected. The example above is dangerous enough on a read-only account; the powers a read/write connection have are only limited by your imagination.

To protect against SQL injection is actually quite easy. Let’s first look at the case of quote enclosed string variables:

The quickest protection is to strip the enclosure characters or escape them. Since PHP 4.3.0 the function mysql_real_escape_string has been available to cleanse incoming strings. The function takes the raw string as a single parameter and returns the string with the volatile characters escaped. However mysql_real_escape_string doesn’t escape all the characters that are valid control characters in SQL… the highlighted elements in the image below shows the techniques I use to sanitise String, Number and Boolean values.

The first highlight, the line that sets $string_b uses a PHP function called addcslashes. This function has been part of PHP since version 4 and as is written in the above example, is my preferred method for SQL string health and safety.

A wealth of information is available in the PHP documentation, but I’ll briefly explain what addcslashes does and how to it differs to mysql_real_escape_string.

From the diagram above you can see that mysql_real_escape_string doesn’t add slashes to the (%) percent character.

The % is used in SQL LIKE clauses, as well as a few others. It behaves as a wildcard and not a literal character. So it should be escaped by a preceding backslash character in any cases where string literals make up an SQL statement.

The second parameter I pass to addcslashes, which in the image is bold; is the character group PHP will add slashes for. In most cases it will split the string you provide into characters, and then operate on each. It is worth noting, that this character group can also be fed a range of characters, although that is beyond the scope of this article – in the scenarios we’re discussing, we can use alphanumeric characters literally e.g. “abcd1234” and all other characters as either their C-style literal “\r\n\t”, or their ASCII index “\x0A\x0D\x09”.

The next highlight makes our number values safe for SQL statements.

This time we don’t want to escape anything, we just want to have nothing but a valid numerical value – be it an integer or floating point.

You might have noticed line
10, and perhaps wondered as to the purpose. A few years ago I worked on a
call centre logging system that was using variable
+= 0; to ensure numerical values. Why this was done, I cannot honestly say…
unless prior to PHP 4 that was how we did it?! Maybe somebody reading can
shed some light on the subject. Other than that, if you, like I did, come
across a line like that in the wild, you’ll know what it’s trying to do.

Moving forward then; lines
11 and 12 are all we need to prepare our numerical input values for SQL. I should say, had the input string $number_i contained any non-numerical characters in front or to the left of the numerical ones… our values $number_a, $number_b and $number_c would all equals 0.

We’ll use floatval to clean our input numbers; PHP only prints decimal places when they exist in the input value – so printing them into an SQL statement won’t cause any errors if no decimal was in the input. As long as our server code is safe, we can leave the more finicky validating to our client side code.

Before we move on to a final listing for our PHP, we’ll glance at the final code highlight, the Boolean boxing.

Like the C++ equivalent, a Boolean in PHP is really an integer. As in, True + True = Two. There are countless ways to translate an input string to a Boolean type, my personal favourite being: does the lower case string contain the word true?

You each may have you own preferred methods; does the input string explicitly equal “true” or is the input string “1” etcetera… what is important is that the value coming in, whatever it might look like, is represented by a Boolean (or integer) before we use it.

My personal philosophy is simply, if X is true or false, then X is a Boolean. I’ll blissfully write all the code I might need to review later with Booleans and not short, int, tinyint or anything that isn’t Boolean. What happens on the metal isn’t my concern, so what it looks like to a human is far more important.

So, as with numbers and strings, our Booleans are guaranteed safe from the moment we pull them into our script. Moreover our hygienic code doesn’t need additional lines.

Processing HTML

Now that we have our protected our SQL from injections, and we’ve made certain only a POST login can affably work with our script, we are ready to implement our review submission feature.

Our client wants to allow review enabled users to format their contributions as regular HTML. This would seem straightforward enough, but we also know that emails addresses are ten to the penny, and bookstore accounts are created programmatically – so in the better interests of everyone we’ll make sure only the tags we say pass.

Deciding how we check the incoming review might seem daunting. The HTML specification has a rather wholesome array of tags, many of which we’re happy to allow.

As longwinded the task might seem, I eagerly advise everyone – choose what to allow, and never what to deny. Browser and server mark-up languages all adhere to XML like structuring, so we can base our code on the fundamental fact that executable code must be surrounded by, or be part of, angle bracketed tags.

Granted, there are several ways we can achieve the same result. For this article I will describe one possible regular expression pipeline:

These regular expressions won’t produce a flawless output, but in the majority of cases – they should do a near elegant job.

Let’s take a look at the regular expression we’ll be using in our PHP. You’ll notice two arrays have been declared. $safelist_review and $safelist_comment – this is so we can use the same functions to validate reviews and later, comments:

…and here is the main function that we will call to sanitise the review and comment data:

The input parameters, I have highlighted red and blue. $input is the raw data as submitted by the user and $list is a reference to the expression array; $safelist_review or $safelist_comment depending of course on which type of submission we wish to validate.

The function returns the reformatted version of the submitted data – any tags that don’t pass any of the regular expressions in our chosen list are converted to HTML encoded equivalents. Which in the simplest terms makes < and > into < and > other characters are modified too, but none of these really pose a security threat to our client or the users.

Note: The functions: cleanWhitespace and getTags are included in the article’s source files.

You’d be correct to assume all we have really done is helped survive the aesthetics of our site’s pages, and not done everything to protect the user’s security. There still remains a rather enormous security hole even with the SQL safe, request spoofing cured and mark-up manipulated. The JavaScript injection;

This particular flaw could be fixed by a few more regular expressions, and/or modification to the ones we are already using. Our anchor regular expression only allows “/…”, “h…” and “#…” values as the href attribute – which is really only an example of a solution. Browsers across the board understand a huge variety of script visible attributes, such as onClick, onLoad and so forth.

We have in essence created a thorny problem for ourselves, we wanted to allow HTML – but now we have a near endless list of keywords to strip. There is of course, a less than perfect – but quite quickly written way to do this:

On reflection you’d be absolutely justified in asking, “Why didn’t we just use BBCode or Textile or…?”

Myself, if I were dealing with mark-up processing, I might even go for XML walking. After all the incoming data should be valid XML.

However, this article is not meant to teach us how to regex, how to PHP or how to write anything in one particular language. The rationale behind it simply being, don’t leave any doors ajar.

So let’s finish off then; with quick review of what we’ve looked at:

Although this article hasn’t equipped you with any off the shelf project. A primary purpose of my writing was not to scare away the designers who code, or nitpick the work of coders anywhere – but to encourage everyone to author robust code from the off. That said, I do plan to revisit certain elements of this article in more detail later.

Until then, safe coding!

Sample Code

You can grab the sample PHP code used in this article here