Rewriting your urls to clean permanent looking links

There are several articles out there on using mod_rewrite and .htaccess to convert from dynamic pages with query strings in the urls, to a cleaner more permanent looking link. But even after reading the documentation on RewriteCond and RewriteRule it took me a few hours of experimentation to get the desired effect. So I thought I would share my settings to help serve as examples for others trying to do something similar.

Using PHP and MySQL I have pages that are dynamically created from a database. The URLs for those pages look like:
http://budgetweb.com/budgetweb/details.php?id=2825&provider=CravisHostFive
I wanted to use mod_rewrite so that the links in my feed would look like
http://budgetweb.com/service/2825/CravisHostFive/
Here's what I added to the .htaccess in the root of my web site
RewriteEngine on
RewriteRule ^service/([0-9]+)/([^/]*)/$ /budgetweb/details.php?id=$1&provider=$2
I also wanted to handle links typed in which did not have the trailing slash. Here's what I added for that.
RewriteEngine on
RewriteRule ^service/([0-9]+)/([^/]*)$ /service/$1/$2/ [R]
RewriteRule ^service/([0-9]+)/([^/]*)/$ /budgetweb/details.php?id=$1&provider=$2
This rewrite rule has [R] which results in a round trip to the browser, so that the link in the browser bar is corrected as well. Then on the subsequent request back to the server the path matches the second pattern.

Lastly I wanted to redirect all the existing links to this new URL structure, so that all the previously indexed pages would get updated. This proves to be more tricky than at first I understood. The path provided to the RewriteRule does not include the query string - i.e. everything after the question mark (?) in the url. So you need to use RewriteCond. Here's what I added.
RewriteCond %{QUERY_STRING} id=([0-9]+)\&provider=(.*)
RewriteRule ^budgetweb/details.php$ /service/%1/%2/? [R=301]
This works great. The %1 and %2 in the RewriteRule match the portions of the regular expression in the RewriteCond surrounded by (). The other trick here was to have the trailing question mark in the RewriteRule. Without that, the original query string is re-appended to the rewritten URL, resulting in an infinite recursion. Lastly, the [R=301] sends a 301 Permanent Redirect back to the browser.

Now one problem combining all the rules above, is that even with the trailing question mark I've still got an infinite recursion. The details.php URL is rewritten to the /service/ URL which is then rewritten back. I couldn't work out how to block this in the rewriten rule, so instead I just created a copy of my PHP from details.php to service.php and ended up with these rules in my .htaccess
RewriteEngine on
RewriteCond %{QUERY_STRING} id=([0-9]+)\&provider=(.*)
RewriteRule ^budgetweb/details.php$ /service/%1/%2/? [R=301]
RewriteRule ^service/([0-9]+)/([^/]*)$ /service/$1/$2/ [R]
RewriteRule ^service/([0-9]+)/([^/]*)/$ /budgetweb/service.php?id=$1&provider=$2
The end result is
http://budgetweb.com/budgetweb/details.php?id=2825&provider=CravisHostFive
Permanently Redirects to http://budgetweb.com/service/2825/CravisHostFive/
http://budgetweb.com/service/2825/CravisHostFive
Temporarily Redirects to http://budgetweb.com/service/2825/CravisHostFive/
http://budgetweb.com/service/2825/CravisHostFive/
Rewrites to...
http://budgetweb.com/budgetweb/service.php?id=2825&provider=CravisHostFive

Tracking subdomains in Google Analytics in one profile


Google Analytics lets you track subdomains in multiple profiles or a single profile. This article describes how to set it up in a single profile.


If you follow the first steps in the article then visitors to the following pages
  • http://www.budgetweb.com/
  • http://www.budgetweb.com/whatsnew.php
  • http://blog.budgetweb.com/
  • http://blog.budgetweb.com/1997/12/some-history-of-budgetwebcom.html
Show up in Google Analytics as
  • /
  • /whatsnew.php
  • /1997/12/some-history-of-budgetwebcom.html

How to build a Self Scoring Quiz

About 10 years ago Heather published a Pathfinder on James Grover Thurber, which continues to receive a lot of traffic to this day. I recently migrated the site to a new domain hosted on Google Sites. The move was pretty simple, except for one page which was a quiz on James Thurber. It's a fairly simple multiple choice quiz with 6 questions but it is implemented in an html form with JavaScript. Google Sites doesn't allow JavaScript.

So I started looking for web sites where I could build a quiz online. First, I found gotoquiz.com, and began to build the quiz. After entering the 6th question I discovered that the quiz had to have a minimum of 10 questions. So I abandoned that and found quibblo.com, and setup an account. This seemed much more involved than what I was looking for.

So I decided to implement the quiz as a Google Gadget. If you want to checkout the quiz, visit the Pathfinder on James Grover Thurber. If you want to build a similar google gadget, then feel free to copy this one. Go to the Google Gadget Editor, pick File / Open from URL... and enter:
http://hosting.gmodules.com/ig/gadgets/file/102686402241653641902/thurber-quiz-gadget.xml

Which Flickr Google Gadget to use on your Blog

When I was moving my blog to its new location I decided I wanted some of my recent photos from my Flickr account to be shown. In the Layout style of Blogger it seemed that the way to do this was to add a Gadget. I clicked Add Gadget and searched for Flickr and back came 151 gadgets. The first page was things like photos of Christmas, Cannes, France, Italy. Not what I was looking for.

I googled for "which is the best google gadget for flickr" and found a zdnet article on 10 essential google gadgets. It recommended Flickr Nugget which I tried, but it didn't let me do exactly what I wanted which was to show a particular label out of my photostream. I also found that when added to my blog it didn't look good and had scrollbars and things.

This was the problem with the next 2 or 3 gadgets that I tried as well. Either they didn't fit well on the page, or they didn't do what I wanted. It seemed that I - like 151 people before me - was going to have to build my own google gadget. I plan to write more about my experiences writing my first google gadgets another time, but the short version is that it was not the simplest way to go.

What turned out to be much simpler was the following
  1. Go to the Flickr Badge Generator and follow the steps to create an html badge. I entered a label from my photostream, and a random selection of 3 in a vertical orientation of thumbnails
  2. Select All the HTML shown in the text box and copy to clipboard
  3. In Blogger from the Page Elements tab of the Layout tab click Add a Gadget
  4. Scroll down and pick the HTML/JavaScript Gadget in the Basics category
  5. Give a Title like "My Photos", paste in the code, and save
After the fact I went back and tweaked a few things like removed the flickr_badge_uber_wrapper table with the link to flickr.com, as well as changed the text in the source link to just "more...". But that was really about it. I had spent more time searching and trying out flickr google gadgets than I did in implementing the final solution.