Touch of Hope: A Technical Colophon
The architecture is like this:
- 1 blog for the site's basic content: welcome page, about page, Art for Hope page, request a site page, make a donation page, contact us page and the news and updates content. All of this is in the same blog. The page content is separated into a category (1 per page). Separate index templates filter out the content by category and render it as needed.
- Another blog is set up for defining each of the hosted sites. Thomas and Carly both have 1 entry in this blog. The entry contains details about them such as the first and last name, date of birth (used to calculate the age on the 'Touch a Life' directory) and the name of the directory their content is saved under.
- Each hosted site has 4 blogs. These blogs are generated using a special script that builds out their initial site, ready to be filled in by the parent/guardian who will be maintaining the site. There is a blog for their 'story' page, another for their journal, their guestbook and finally the photo album. The parent or guardian has limited, but appropriate access to each of these (they can't change the blog configuration for example for security reasons). They have their own login to Movable Type and maintain their entire site through the Movable Type interface. Additional authors can be created and assigned to any of the 4 blogs for the hosted site.
While it would be possible to do pretty much everything in Movable Type, a few corners were cut with the help of PHP. The hurdle that Movable Type couldn't clear was paging the guestbook entries. A dated archive could have been used instead, but we felt the paged display looked best. Movable Type does not currently have a way to paginate entries across multiple pages like we were needing. So instead, we use PHP and connect to the MySQL database and gather the entries from there on the fly.
The site also uses PHP for templating. The headers and footers for the pages and the panels are all generated by PHP functions. The look and feel of the pages can be changed quite easily, even without the need to rebuild the site since the design is separated from the content.
The guestbook itself was an interesting challenge. When you sign the guestbook, you are actually creating a new Movable Type blog entry into the guestbook blog. We created a new Movable Type application class called Guestbook.pm that handles the guestbook data as it is posted from the form. It uses an account called 'guest' (who only has post privileges for the 'Guestbook' blog) as the author of the guestbook entries. Metadata such as address, city, state, etc., are stored in the additional entry text field in a "field=value" form. The message itself is stored in the entry text field. And by utilizing Movable Type for handling Guestbook entries, we were able to leverage the IP banning and notification features that a Movable Type blog supports already. An index template is used to build the sidebar navigation for the 'Guestbook' panel at left.
The journal part of a Touch of Hope site is your basic blog. Nothing special to write about there. A separate index is used to build the sidebar navigation for the 'Journal' panel at left.
The 'Story' page is also built using a blog. For Thomas's story page, there are 3 entries: "Who is Thomas", "Mesenchymal Chondrosarcoma", and "All About Thomas". The entries are all simply output to the page. A separate index is used to build the sidebar navigation for the 'Story' panel at left.
The fun blog for the site was the photo album. To make it easy for people to upload pictures to this blog, we had to extend the Movable Type interface a bit. The "Upload Files" link was there, but it offered too many options. And we wanted to restrict the user to just images. So we added a new button called "Upload Image" and created a new template for Movable Type to use in the interface:
When the image is uploaded, it's checked to make sure it's one of the valid image types. It is stored in an 'upload' directory underneath the site's index directory. Details about the uploaded image are pre-populated into a new entry (which is displayed upon completing the upload). The image's filename, size, type, etc., are all stored in the 'additional entry text' field in the format "field=value". A plugin was written (MTEmbedImage) for use in the photo blog templates to take the images and automatically generate the thumbnail versions you see in the sidebar and 'Photo Album Index' page.
That's about it-- it was a great project to work on. Using Movable Type as a basis for the site saved a lot of development time. And the end users have a capable and professional interface for maintaining their child's web site.