“What’s going to happen to the Tennis Club website after you graduate?”
April 18, 2012
By far the question I’ve been asked the most during my time as an officer of the Penn State Tennis Club has been: “What’s going to happen to the website after you graduate?” When asked, I would almost always avoid answering this question and not talk about it. Not because I didn’t have an answer, but because I’ve been waiting for today. Today, I’m excited to share the solution for the long term success of the website that I’ve been working on for the past year.
Background
Before I talk about the future, I want to talk about how the current Tennis Club website came about. When I joined the club as a freshman in Fall 2008, the club had an informational website that was not unlike many other Club Sports websites. At the end of my freshman year, in Spring 2009, I ran for Vice President of the club. One of my campaign promises was to “add an online sign-up on the club website for indoor hours that would let someone know instantaneously whether they would have one of the 16 spots available, instead of having to wait for an email with the list of people on it.” I had created several websites before this time, but they were rarely used, if at all. I could not resist the opportunity to work on a website that had the potential to be used consistently by hundreds of users. At this time, I was also finishing IST 210, a class about databases, and I was confident in my ability to create a sign-up system using a MySQL database.
On April 30, 2009, the same day I was elected Vice President, I registered the domain PSUtennisclub.com. Even though the club already had a website on the psu.edu domain, the requirements of this project called for third-party hosting. I also thought that this would be a good opportunity to brand the club with the “PSUtennisclub” moniker, which is now used for our email, Facebook, and Twitter accounts, and more.
Days later, I quickly started building a working prototype of the sign-up system. Here is the earliest screenshot I have of it:
The basic sign-up system was up and running relatively quickly. However, with my limited skill set at the time, and a lack of foresight, the sign-up system would only operate correctly if we were playing inside on Sundays at 8pm and Mondays at 9:30pm, and the sign-up time was on Wednesdays at 1:01am, all things that were destined to change.
Even though I was originally only planning to work on a sign-up system for Indoor Hours, I decided I wasn’t going to stop there. By the time the Fall 2009 semester came around, I had a fully operational website that included many of the basic pages and features that are present on the website today.
In October 2009, I redesigned the website for the first time. Here is the old/first design on the left, and the new one on the right:
This redesign was not just a change of colors in the banner and a new navigation bar, it represented a fundamental shift in the way I created websites. It involved an entire rewrite of the website using a CSS tableless layout. My brother, Adam, taught me the basics of creating a CSS tableless layout, and I took it from there. I think this was truly a turning point for the website, and it was not long until I was dreaming up new features to add to the site.
It would be impossible to go through all of the changes and features I have added over the years, so I’ll just mention a few. Two of my favorite features, avatars and text message notifications, are evident in the Indoor Hours sign-up system. Users can upload an avatar that is displayed throughout the website next to their name, and during Indoor Hours, users can sign up for a text message alert that lets them know when a spot becomes available.
While the general look and feel of the website has remained consistent over the years, the behind the scenes has not. I have made code more efficient, more reusable, and more maintainable. I have completely rewritten all interactions with the database to prevent SQL injections, added SSL support for secure logins, and created a dev site to thoroughly test all code before putting it into production.
Today, the entire club is run through the website. Whether it’s joining the club, checking the calendar or recent news updates, signing up for Indoor Hours, scheduling a Ladder match, looking up member information, checking THON dancer points, voting in the officer election, ordering apparel, participating in a contest, or anything else, I have spent countless hours centralizing all club-related activity for members to the website. At the same time, almost all administrative activity (outside of scheduling trips, etc.) has been centralized to the website, whether it’s validating members, sending out news updates, adding calendar entries, viewing club statistics, settings up Indoor Hours sessions, updating Ladder rankings, updating THON dancer points, and more.
The Problem
While I have no doubt that centralizing club activity to the website has been beneficial for both members and officers, it has also created the potential to become a huge problem if the website is not flexible enough to adapt to inevitable changes that affect the club.
And this is exactly where the problem lies. Over the past three years, whenever there was a change to anything that affected the club (such as court hours, rules, etc.), I was able to hardcode a solution or manually update the database. The problem was that this required too much work, as well as my direct involvement.
As hard as this is to say, after I graduate, I don’t want to be involved with the Tennis Club on a daily or weekly or even monthly basis (okay, monthly would be okay). I feel like I would be doing the club a disservice by staying too involved. The club will have new officers with new ideas, decisions, and changes to make. Meanwhile, I’ll be busy with a full-time job and starting my new life in Washington. I want the club to make its own decisions and not have to rely on me for technical support to implement those decisions.
Not the Obvious Solution
Perhaps the most obvious solution to this problem would be to just hand over the code to someone in the club and let them update the website. However, this is not ideal. Quite frankly, the website has reached a level of sophistication that it would be difficult to find someone in the club who could interpret and understand the code, let alone be qualified and confident enough to make changes to it. I quickly dismissed this as an option because even if there was someone who could take over, I would just be passing along the problem to someone else. The same problem would then exist for this person when they reach their graduation.
The ideal solution is something that a person with no knowledge of programming or databases can operate. The ideal solution is something that easily adapts to change.
The Solution
The solution is actually very simple: enable an officer to easily change almost anything on the website that has the potential to change through a series of settings. Here’s how it will work. At the beginning of each school year, I’ll take a few minutes to set up a clean database for that school year. After an officer (likely the president) creates their account on the website, I will set them as what I have dubbed the “acting admin.” From this point, the acting admin will have access to all of the admin pages needed to operate the website.
In total, there are over 100 settings that the acting admin can easily change using a visual interface on the website. The settings are broken up into nine categories: Main, Outdoor Hours, Indoor Hours, Ladder, Join, Contest, Apparel, Elections, and Layout. Here’s a look at the main settings page:
Now, it’s relatively simple to create a visual interface that allows different settings to be changed. In fact, this was the last step in the process. The difficult part is determining which settings need to be created in the first place, and integrating all of these settings throughout the website. For example, something that is guaranteed to change at least twice throughout the school year is the “current venue,” or which tennis facility the club is currently playing at. There are dozens of places throughout the site where the current venue is displayed to the user. Updating this manually in the code every time the club moved inside or outside would be a huge pain. The current venue is a perfect candidate for a setting because it’s something that will constantly be changed, or will have the potential to change. With the current venue setting, and its integration across the entire website, changing the venue throughout the website is as simple as changing a single dropdown box. The rest of the settings follow this same model.
The current venue is an example of what I would call a “display” setting, the type of setting that changes the information that is displayed to users. But these display settings are only half of the equation. The other half are what I call “logic” settings, or settings that control the logic of a system. Another way to think of these logic settings are variables in a math problem. The best example of where these logic settings are needed is with one of the most complicated systems I have ever worked on, the Indoor Hours sign-up system. The sign-up system has been reimagined over the past year to adapt to virtually any situation based on these logic settings. Here’s a look at the basic logic settings for Indoor Hours sign-ups that control how the system actually works.
Settings can also be changed for each day of the week:
There are 30 settings alone that are used to control the Indoor Hours sign-up system. Like I said before, there are a total of over 100 settings for the website. It would be impossible to go through all of them, but rest assured that these settings are complete enough to cover the different categories I outlined above.
Another extremely important part about this solution is the ability for the acting admin to be able to create, read, update, and delete all of the content that is added to the website. This includes news updates, calendar entries, officer information, indoor hours sessions, and more. For example, if an Indoor Hours time slot is created, and there was a mistake creating it (incorrect time or date), there should be an easy way to correct this mistake without manually updating the database. Or, if the time slot is cancelled for whatever reason, there should be an easy way to delete this time slot without having to delete the row in the database. And this is exactly what I have done. Included below is a look at an edit page for an Indoor Hours time slot. You can see that even who’s playing during an Indoor Hours session can be updated or deleted.
I’ve made it possible to create, read, update, and delete all content that is created on the website. I’ve also tried to be really smart about some of the most minor details. For example, most things having to do with dates on the website include a month, day, and year. Now, the month and days won’t change each year, but the year will obviously increase. So, I’ve designed each year dropdown box to contain the previous year, the current year, and the next year. This way, I don’t need to update these dropdown boxes each year.
I must be clear that not everything on the website can be changed by the acting admin. An example of this would be the opening paragraph on the home page about joining the club. Or many of the static pictures. There are some things on the website that will just not change over the years, or if they do, it will take just a few minutes for me to update it.
So, when will this solution be implemented and ready to be used? It already is. Right now. All of the settings and admin pages are already up and running on PSUtennisclub.com. You probably haven’t noticed a difference, but they’re there. To complete the process, I will transfer over the acting admin privileges from the dev site to the production site when the year is over and the new officers take over.
As for one last bit of housekeeping, I would also like to announce that I will continue to pay for the hosting and the domain name for the website out of my own pocket, as I have been doing since day one.
Wrap-up
Over the past three years, there have been a number of great improvements to the club, and I am very proud to have been a part of these improvements. This year, we added an extra day of indoor court hours, were more financially responsible, and implemented a competitive Ladder, among other things. We have grown to become the largest club (243 members in 2011-12) in the Penn State Club Sports program, the largest Club Sports program in the country. The website has played a big part in the success of the club over the past three years, and I want this success to continue. My plan was to create a platform for the club to have continued success well after my graduation, and I believe I have succeeded. Thank you.
———
Eric Papamarcos
The Pennsylvania State University
Tennis Club President, 2011-12
Tennis Club Vice President, 2009-11
Update 7/2016: I recently migrated this blog post to my new blog, and wanted to keep a memory of the original blog’s comments.
