Going Ape

Going Ape is this year's theme for Friends Seminary's annual "Spring Fair", a day of games / rummage sale / food / bands / special Raptor exhibit / photography, that will be held on May 8th. I'm the co-organizer of this event. The event is popular with kids, and helps raise (not very much :-) funds for Friends Seminary, a Quaker school that my daughter used to go to. I'm still involved with the school though.

In years past, our biggest challenge was to get people to volunteer for work that needs to be done before and during the event. For years we've been aching for an online system that will make it easy to keep tally of who volunteered for what, and to do so in a public enough fashion so that people will find it compelling to follow those that have gone before.

The course provided an opportunity to try to build something like this, and GoingApe.info is the result. I bought the domain name last Friday for $1.07 (that includes tax). Hosting of course was a little more expensive, but it's surprisingly cheap too! I followed Amos's example and put it up on dreamhost.com. While I'm no expert in commercial web hosting, I'm amazed by how feature-rich their solution is, while still costing in absolute terms, very little. As an ex-Unix system administrator I'm impressed by what they provide.

So GoingApe.info is about to go live, at which time it will be announced to 600 families. The objective is to get as many parent volunteers as possible, while minimizing the pain of signing up online.

The source code, and a working copy, are in http://onepotcooking.com/yanivhakohen/goingape/.

The two versions differ only in the contents of definitions.php - user IDs, names of databases etc; and mild editing I had to do to the CREATE.sql file which came from my own environment (it was created using the Export function on mysqlphpadmin) and was used to load database definitions in to the one on onepotcooking.com. Otherwise the apps are identical.

I think I'm the world's worst graphic designer, but I get by with a little help from my friends ... the background images (each page has its own) were given to me by Eli Kuslansky of Unified Field. He also did the poster which is on the front page. He doesn't like my using GIFs for the navigation - while you can make them transparent, they lack basic capabilities from a graphic designer's perspective. I never knew...

The "map" is something I did with powerpoint a year ago.

The guts of the system is the Volunteer page. It went through several iterations until I finally understood (I hope) the difference between margins and padding.

An important goal was to make this easy to use, and in particular, not to require that people open "accounts". The solution depends heavily on email. People who sign up are sent a confirmation request in email. They click a link in the email which takes them back to the site. Unconfirmed records represent spam-bot hits, which we ignore. In a future version I want to add CAPTCHA technology to make it much harder to be exposed to spam-bots.

Another feature that depends on mail is a "download" feature intended for use by the "business owner" of the site. When he goes to the download.php page, it does practically nothing except tell him to sit tight and wait for mail. The mail he receives contains a link back to the site which invokes download of a CSV file, which on goes straight in to Excel on his computer.

The app has some ugly PHP code that I now regret, specifically how I ab-use arrays. Initially I was excited about how flexible PHP's associative arrays can be, something I took advantage of when I did the original file-based version of the site a week ago. When I moved the site to SQL this week, I tried to make sure the SQL code was elegant (data.php), but I didn't give up some of the over-complicated use of arrays. That code isn't too readable unfortunately.

At Amos's suggestion, I'm using "jQuery validate" to do input validation before sending stuff to the server. It's so easy to use it in a basic fashion. But now that I want to add something trivial to a new page I'm trying to write - the ability to check that the email addresses that are entered all end with @friendseminary.org, I find I need to actually read the instructions, ah well. Anyhow, I realize there's a huge universe of interesting plug-ins out there. I want something that knows how to pop-up a small div with text when I hover over certain fields for instance. Any pointers?

A lot of the work had to do with giving it production and debugging features, such as logging; mails that get sent to me when people volunteer, and if they experience errors. I made a conscious decision to expose users to possibly ugly error messages if they happen in a true exception situation (e.g. database server refuses to be connected to). In an application intended for broader use I wouldn't do this, but this app targets no more than 600 families. The production version of the site actually pops up a Javascript alert with my name and number on it urging people to call in.

I also tried to code for error conditions - do something sane on the user interface when an expected error occurs on the server. I used database constraints to stop duplicates of records being created in one condition (when a user hits reload on the page that creates a record - signup.php), and made the system respond with a reasonable message to the user.

Everything seems to work reasonably well on Mac and PC, with EI, Firefox and Safari, but IE is the most irritating - the screen flickers when going from page to page, even after the background images are comfortably in cache. I don't know where it's coming from - a difference in jQuery implementation?


Would love to get feedback - all and any suggestions or criticisms welcome. Thanks.