Three weeks ago I bought my main mode of transportation... a Trek 7100 bicycle. It’s a hybrid style bike, which means it has skinny tires like a street bike but has the shape and feel of a mountain bike. At $320, I thought it was reasonably priced and I’ve been VERY happy with it. Since that Thursday three weeks ago, I’ve ridden over 120 miles! I thought it might be fun to track all of my trips, so I spent some quality hours in the last week creating a webpage to enter and display my bike trips. I am quite excited about it, so unfortunately for you I am now going to describe it.
First off, here’s the webpage for displaying my trips (or here’s a version with more features, but it’s a beta version since I don’t like how it opens new windows). I’ve also added a permanent link to the ride log page on the right sidebar. Anyway, the very cool thing about that page is it’s generated on the fly from info in a MySQL database. The database contains a few tables that track rides (dates, routes, miles), places (place names, addresses or coordinates) and distances (a list of two locations and distances between them).
The pages are all written in Perl from scratch and access the database using the Perl Database Interface (DBI). I had never used the DBI before, so this was all new to me (in fact, I’ve not used Perl much since college, so this was quite a learning experience). So, you’ve seen the display page, but let me show a bit of the slick input pages. Here’s the initial page where I can put in trip data.
The date field is auto-filled with the current date using a nice piece of Javascript code that I found on a tutorial page. And here’s the same page with a sample trip put into it.
Routes are described using the pattern above, which was convenient for parsing while also making a decent amount of sense. Once the ‘Submit’ button is pressed, the first Perl script is run. First task on the list is to make sure all of the places entered are recognized. In this example, I had already entered trips that included ‘Home’ and ‘Bike shop’ previously, so their addresses are already in the database. Here is a screenshot before I have typed anything into the fields.
Since Safeway is a new location, I can type in the address and then the address will be remembered for any trip in the future that includes Safeway. Hitting ‘Continue’ brings me to the next page which deals with the trip distances for each leg of the trip.
A previous trip contained the ‘Bike shop to Home’ leg, so the distance for that portion of the trip is already known. For the other two legs of the trip, I need to look up the distances and enter them into the webpage. Fortunately for me, I was kind enough to automate the looking up of distances. Because the addresses are known for these places, I was able to automatically create driving direction links to local.live.com for each of these legs. For example, the ‘Home to Safeway’ link in the screenshot above would take me to this page. So, all I need to do is click these links and enter the mileage in the appropriate boxes.
With a click of the ‘Finish’ button, the mileage for the new trip legs are saved for future reference and the actual ride data is saved as well. I never have to touch messy URLs, the links to waypoint maps on the display page are generated using the place addresses or even latitude/longitude coordinates!
The only thing I haven’t spent much time on yet is the look and feel of the pages. I would prefer the ride log page to look a little nicer than just plain old HTML tables, but I’ll save that work for some other day. The important thing is that I can easily enter in ride data right now and it’ll instantly show up on the log page!
