However, an idea I picked up from ASP.NET MVC is their . . . → Read More: PHP Routing]]> Routing in terms of a web application is the selection of content based on the user’s request URI. Typically, routing is very intuitive for PHP, as with most web languages; the user asks for /foo.php and the server executes and serves up /foo.php.

However, an idea I picked up from ASP.NET MVC is their notion of routing. In this way, urls actually look a bit more human-readable, and you can get rid of all the file extensions. Not all the concepts of MVC may translate over to PHP, but the basic idea is to have all requests go first to a routing script which will determine which code to execute from there.

For example, if you had a website which had a forum, you might not want to have the url look like /post.php?postid=12345678. You could instead, make the url /post/12345678/this-is-the-posts-title. This looks a lot better and is very easy to route.

So to set up routing for PHP, first you must get all traffic to get to your routing script. To do this, add the following to your .htaccess file:

# Turn on the RewriteEngine
RewriteEngine On

# Rules
RewriteCond %{REQUEST_FILENAME} !/content/*
RewriteRule .? routing.php

Now let’s analyze each line of the file:

RewriteEngine On

This turns the rewrite engine on in Apache. The mod_rewrite engine needs to be enabled for this to work, but this should come installed and enabled with most PHP installations.

RewriteCond %{REQUEST_FILENAME} !/content/*
RewriteRule .? routing.php

The first line is a condition for rewriting. In the example, I have that the request filename NOT be /content/*. The reason for this is that I do not like static content to need to go through routing. So I would put all images, CSS, and JS somewhere in /content/.

The second line basically just makes all other requests now point to routing.php. This file is the one which will do the routing and which every request will end up going through.

So now let’s take a look at routing.php

session_start(); // if you are using PHP sessions on your site

// put all common included here like connecting to databases, class includes, etc.
// ...

$requestUri = $_SERVER['REQUEST_URI'];

// get rid of query params
$i = strpos($requestUri, '?');
if($i !== false)
{
	$requestUri = substr($requestUri, 0, $i);
}

$urlParts = explode('/', $requestUri);

// do your routing logic here! Here's a trivial example
$script = $urlParts[1] . 'page.php';

// execute routed script
require_once('header.php');
require_once($script);
require_once('footer.php');

The above code should be fairly self explanatory. It assumes that you want your url structure to be /{pageName} mapping to the file /{pageName}/page.php. You can put whatever you want though. Also, the above code puts the header and footer includes in so you don’t need to have them in each of your page scripts (or session_start(), or those common includes you put in the routing script!).

Here is an example of just the routing logic for the forum example earlier:

// ...

// url structure was /post/{postId}/{postTitleEncoded}
if($urlParts[1] == 'post')
{
	$postId = $urlParts[2]; // $postId should be available to the included script file
	// we're ignoring the post title part of the url. It's for human-readability and SEO
	$script = 'post.php';
}
// more routing logic if needed
// ...

// ...

Now post.php can use $postId for its logic. This allows it not to have to worry about the header, footer, or any other common scripts, or sanitizing any input as the routing logic should be able to handle all that.

One immediate concern I had was for performance. I thought about it for a while, and I think there is minimal to no impact on performance, as long as you have that !/content/* exception. If PHP routing is used for anything but PHP files, that’s where the problem would lie. The routing script will probably always be in memory since it’s used for every page call and the implementation of Apache and PHP should (famous last words) be able to handle a single page being hit over and over just as well as several different pages being hit, if not better.

Some people prefer mod_rewrite for handling all of their routing, but sometimes you may need some logic beyond basic string matching. For example, if the user is logged in or has a certain right access, they might be routed to a different page than others. Also, some kinds or basic validation and sanitation can be done in routing that you wouldn’t be able to do in mod_rewrite.

Luckily, there are ways to recover the HTML at least by using Bing and the site: modifier. So with the HTML content recovered, I . . . → Read More: We’re Back!]]> So for the past week or so the site has been down. I had some problems with my old hosting company; they ended up deleting the website with no backup.

Luckily, there are ways to recover the HTML at least by using Bing and the site: modifier. So with the HTML content recovered, I manually copy and pasted all the posts back into the site. Phew! Then came the task of actually re-styling the site, which I won’t even go into here, but rest assured that my weekend has pretty much been dominated by this.

The moral of the story, back your websites up. Even though your hosting company may claim to backup your files, experience has shown me that they don’t always.

On a lighter note, I have changed hosting to landonwisser.com. I know the guy personally, and I know there won’t be any problems with his hosting.

Source: sortableTable.js Example: Example

To declare a column . . . → Read More: Sortable Table… Updated!]]> After using my original Sortable Table for some time now, I’ve noticed something that could be better. Namely, type-awareness! I added the ability to declare each column as containing common type of data like numbers and dates as well as giving the functionality to enable writing custom sort functions.

Source: sortableTable.js
Example: Example

To declare a column as containing numbers, give the associated th, class="number". As you may guess, it basically just parses the string as a float (using parseFloat) before comparing, so “11″ will come after “2″. To sort dates, add class="date" to the th. This simply uses the Date.parse function before comparing.

Now that the “easy” ones were out of the way, I thought about how to give the developer a way to define their own sorting function, since strings, numbers, and dates won’t be the only things that should exist in a sortable table, for example, move ratings.

To do this, add class="custom_sortFunc" to your th where sortFunc is the JavaScript function you want to use to sort. This function should take two arguments and return an integer. The return value should be less than 0 if the first argument should be before the second, 0 if they’re equal sort-wise, and greater than 0 if the first should go after the second.

In the example, you see the following:

var movieRatings = new Array('G', 'PG', 'PG-13', 'R', 'NR');
function movieRatingSort(str1, str2)
{
	return movieRatings.indexOf(str1) - movieRatings.indexOf(str2);
}

My movie ratings th has class="custom_movieRatingSort". That’s all!

Note that there is no error checking in the way of checking to see that the custom sort function takes two arguments nor that the return type is an int, so funky things may happen if you give it an invalid function.

Update: Thanks to a comment to this post, I corrected a problem with Firefox. I am now using textContext for non-IE browsers as it’s more widely supported.

Update 2: I’ve written a follow up to this article adding additional . . . → Read More: Sortable Table]]> This article will describe a javascript which will make any <table> sortable on all columns.

Update: Thanks to a comment to this post, I corrected a problem with Firefox. I am now using textContext for non-IE browsers as it’s more widely supported.

Update 2: I’ve written a follow up to this article adding additional functionality not mentioned in this article.

Source: sortableTable.js

Example: Example

Here is an example (the above link will be better for looking at the HTML source):

With the javascript included, the table needs to have class sortableTable, exactly one <thead> with exactly one row, and exactly one <tbody>.

To make a particular column the default sorted column (it’s be sorted upon the initial page load), add the class defaultSort to the particular <th> in the one row in <thead>.

The javascript also automatically adds the classes even and odd to the even and odd numbered rows for ease of styling.

The sorting is done based off of the innerText textContent of each cell, so if the cell contains HTML and you are expecting it to sort in that way, it may be sorted differently. For example, if one cell had <a href="federmanscripts.com">Z</a> and another had <b>A</b>, the cell containing “Z” would be before the one containing “A” if innerText textContent was used, but with innerText textContent the “A” would come first, as expected by the user. In short, the displayed text in the cell is what the column is sorted by.

So no matter how much you may hate tables in HTML, sometimes it . . . → Read More: Form and Table Row Nesting Workaround]]> Have you ever tried to nest elements in a way that is valid as far as XML is concerned, but isn’t “valid”? For example, have a table containing a different form per table row? This article describes a workaround for that.

So no matter how much you may hate tables in HTML, sometimes it just makes life much easier. Now I don’t want to get into a Div vs Table discussion, but I think we can at least agree that tables have a place and most of us use them at some point.

To set the stage, basically I was making a content management system for a client, and so I had several items with several editable properties. The most straightforward way I thought to implement this is to have a table, with one item per row, one property per column. For example:

The only real problem is that structurally we’d have <table><form><tr>…</tr></form></table>, which is not valid, and actually doesn’t work in Google Chrome.

Now, before anyone suggests just surrounding the table with one huge form, the table was dynamic (using php in my case) and could have arbitrarily many rows. Thus the entire form, including fields that weren’t even being used, would be sent every time a row was to be updated by the user. This greatly increases the amount POSTed. Not only that, but fields would need to be named something akin to name1, email1, name2, email2, etc. and that’s just a huge mess on the back-end.

My solution uses an invisible form outside of the table and javascript. The gist is once the submit button is pressed, move all input, select, and textarea elements from the desired “virtual form” to the invisible form and submit that invisible form.

Example: Here

In my example, which is basically identical to the above table, I’ve added the invisible form, the necessary javascript function, the class “form” to the table rows, and onclick="submitForm(this);" to the submit buttons.

You can add the “form” class to whichever container you want which defines your “form” as the javascript just takes the submit button and keeps going up the node tree until it hits a node with class="form".

Do note that because the submit button isn’t actually being clicked as far as the invisible form is concerned, the javascript converts the button into a hidden field so that the button name-value pair still appear in the POST.

Also note that since elements are being shuffled around, there is a slight “flicker” after the submit button is pressed, but before the page reloads. There are workarounds to this if absolutely necessary, but most users won’t care or even notice.

While all the code is very straightforward and easy to understand, it can be pretty powerful and hopefully prevent a lot of headaches and/or code rearrangement/hacks.

The notion of AJAX is very simple to understand. Your browser just makes a request to the . . . → Read More: AJAX Made Easy]]> While AJAX may seem scary to a novice programmer, all it really does is connect Javascript to a server-side scripting language of choice. In this article, I’ll show how to easily make use of AJAX with PHP.

The notion of AJAX is very simple to understand. Your browser just makes a request to the web server, just like any other request like as if you were navigating to a page, but instead of reload the page and displaying it, it just returns the markup to a specified Javascript function.

Example: Here
JS Source: ajax.js
PHP Source (as text): ajaxHandler.php

Now the example definitely doesn’t make use of best practices for AJAX (I may write a post about that later, but the gist is that you shouldn’t return HTML or “pretty” stuff, but data that needs parsing or even better, a JSON object to be parsed), but it should give you the basics of how to pass data to PHP and then how to get the response back to Javascript. Now anything you’ll want to do, you just need to know how to do it in either Javascript or PHP.

If you take a look into the ajax.js file, there is a class called ajax. Even though AJAX is quite easy, this class exists so that only one call is needed to make and return an AJAX call. While I won’t go through the details of how the function works, to make an AJAX call with this code, just call ajax.call and pass it three things: the URL to request, the parameters to pass, and the callback function.

The URL should be the URL of the PHP (or whatever) code you wish to request. Note that this code uses POST to request the URL. This can fairly easily be changed to GET if needed. The main different between POST and GET is that POST requires two actual requests to be made per request, while GET has a limited size due to URL length restrictions. When sending form data, POST is recommended while when simply requesting data, GET should be used. Here I use POST to cover all bases.

The parameters should be an object with the property names being the parameter name and their values being the value to pass. Passing null is perfectly acceptable if no parameters are needed.

The callback function is a function that the response from PHP (or whatever) will be given to. This function should have one parameter which will be a String containing the response. Note that this function needs to be passed as an object.

Do note that there will be a slight delay from the time you click on the button to the time when the response is displayed. This is because of the latency of making requests over the internet. It is recommended to disabling buttons while the request is unanswered.

Something to note about AJAX is that it is entirely asynchronous. The ajax.call function is non-blocking, meaning that the code that follows will continue to run even before the request comes back. If you are familiar with event driven programming, this should be an easy thing to understand. If not, be cautious with how your code is set up so that it works no matter when the callback happens. Depending on latency and computer speed, the callback could fire immediately after the ajax.call function is called, well after the rest of the Javascript is run, or anywhere in between. Most browsers implement Javascript as single-threaded, but with AJAX it should be treated as multi-threaded and so good practices for shared objects should be used. While there are no locks in Javascript, a careful programmer can make sure the code works as intended.

While the example does absolutely nothing interesting, it should provide the building blocks for creating your own AJAX code for tying your Javascript and PHP knowledge together.

The main purpose is to artificially extend the PHP session beyond its normal lifetime, as you see on most sites using a cookie. However, cookies are inherently insecure as . . . → Read More: “Secure” Remember Me]]> To quickly explain the “Secure” part, it is as secure as it can be without using SSL. I’ll expand on explaining the security more below.

The main purpose is to artificially extend the PHP session beyond its normal lifetime, as you see on most sites using a cookie. However, cookies are inherently insecure as they are stored on insecure medium. I’ll explain how to make this quite a bit more secure. Again, if you REALLY need security, for example if you’re running an e-commerce site, you really should fork over the money for SSL. I only recommend the following method if you’re running some sort of forum or some other sort of non-sensitive information-accessing website.

First off, lets set up the database. You’ll need a table (I call mine userAuthentication) with three columns: userId:int, lastUsed:datetime, and authString:varchar(32). The below will create this table for you:

CREATE TABLE IF NOT EXISTS `userAuthentication`
(
	`userId` int(11) NOT NULL,
	`lastUsed` datetime NOT NULL,
	`authString` varchar(32) NOT NULL
)
ENGINE=MyISAM DEFAULT CHARSET=latin1;

The three fields should be pretty self-explanitory, except the authString, which I will explain later.

Next let’s set up the code for logging in. I’m assuming the use on the HTML side of 3 fields: userName, password, and remember. The below is generally how your php login script should look:

session_start();
include_once('userAuth.php'); // We'll show this later
// other includes, dbconnect, etc...

// get variables
$userName = strtolower(mysql_real_escape_string($_REQUEST['userName']));
$password = md5($_REQUEST['password']);
$remember = $_REQUEST['remember'] == '1';

// check if the credentials are correct and get the userId

// if user logged in successfully
if($userIsCorrect)
{
	if($remember)
		generateAuthString($userId); // this function will exist in userAuth.php

	$_SESSION['userId'] = $userId;
	// do whatever else you need
}

Before I go on, do note that it is HIGHLY recommended to hash any password you store (I used md5 in my example). That way if your database is compromised somehow, the attacker will never be able to read your users’ passwords as plain text. This doesn’t have anything to do with the rest of this post, but is very good practice.

So the above code is also pretty self-explanatory. Get the credentials, checks the credentials, set the session, then call this mysterious generateAuthString function, which I’ll explain below.

So far everything we’ve done is fairly straightforward, and if you already had a login system set up, you’ve written probably almost no code so far. Now I’ll get into this userAuth.php code file.

Here is the PHP Source (as text file).

There are three functions in this file: checkLogIn, generateAuthString, and clearAuthString.

checkLogIn first checks to see if the PHP session is still active to save time. This code is assuming the security of PHP sessions, so if it still is valid, it just immediately returns true. If, however, the session has expired, it checks if the userAuth cookie is set. If it is not, it returns false as the “remember” cookie doesn’t exist.

If the userAuth cookie does exist, the function takes the cookie, appends the user’s IP address and user agent (browser’s identification string), hashes it all together, and checks it against the authString string in the database. Currently, I don’t check for how long the authString lasts, but it is pretty straightforward to make it expire after a certain time after lastUsed.

After this is all done and everything checks out, the old authStringis cleared and generateAuthString is called to create a new authentication cookie string and the session is set for the user.

generateAuthString just generates the authString for the database using a hash of a random number, the user’s IP, and their user agent, and then sets the user’s cookie to the hash of the same random number. My example sets the cookie expiration to one month in the future.

clearAuthString just clears the user’s authString entry in the database that corresponds to the authString cookie they have. This is to be used when the user logs out.

checkLogIn should be used any time the user’s credentials should be checked (usually the top of every page that requires the user to be logged in).

So now that the code is all explained, I can further discuss why this is secure.

First off, the cookie that the user stores contains absolutely no identification information. All that’s stored is a hash of a random number.

Next, each authString is unique to a particular user, so if one user’s authString is somehow compromised, it doesn’t compromise the entire system.

Each authString is also a hash of the user’s cookie, IP, and user agent, so having the correct cookie alone is not enough to gain access.

Finally, each authString is deleted after it’s use and another generated, so although they may last a long time if not used, they are only able to be used once. I must admit, that I got this “one-use” idea from Blizzard’s Blizzard Authenticator. Obviously I haven’t seen their code for that nor is this really anything like that, but I just thought I’d give them credit nevertheless =P.

So for an attacker to gain access using the authString of a legitimate user, they must:

• Steal the user’s userAuth cookie.
• Know the particular user’s IP address.
• Spoof the particular user’s IP address
• Know the particular user’s exact browser and version (user agent)
• Spoof the particular user’s user agent
• Do all this before the particular user’s PHP session expires and tries to access the site again

Generally, all of that will be much harder than just scanning outgoing packets for the user’s plain-text username and password when they actually do have to type in their username and password. In fact, since the user will most likely have to log in less, they will be sending their credentials in plain-text less, and thus this “remember me” functionality actually increases the security for that user.

To conclude, this is NOT meant to replace SSL, but can add some security to your log in scripts as well as adding some convenience for your users.

The Request Script page is a form you can fill out to request that I develop some script. Payment is optional, but the work I do for free will definitely be slower and I’m unlikely to . . . → Read More: Requests and Donations]]> Two new menu items have been added to the left sidebar: the Request Script page and Donations page.

The Request Script page is a form you can fill out to request that I develop some script. Payment is optional, but the work I do for free will definitely be slower and I’m unlikely to make specific tweaks once I’m done. Basically, it’s a way for me to get some input on what I should be posting next since right now I’m just posting stuff that I develop for other projects I’m working on and not just arbitrarily.

The Donations page is pretty straightforward. Websites cost money to host, and I do put a lot of time into the posts I make. So if you like what I do or find a particular post very helpful, feel free to contribute. Obviously though, since the source is all posted publicly and considering the whole notion of “donation,” it’s completely optional, but of course, greatly appreciated.