SurfiOnline

Where have I been lately? The lack of updates here, my lack of activity on the MyBB forums, MSN Messenger and IRC can all now be explained. Pretty much for the past two weeks, as well as working full-time at Target, I have been developing the Yearbook CD-ROM for my grade, Port Hacking High School Class of 2004. The project itself ended up becoming bigger than I first imagined which is pretty much why I have been so hectically working on it and not pacing myself out. Here i’m going to outline the development, share with you some secrets about the development, as well as provide the first screenshots that school students may see of the CD before it is released to them on Friday 17th December.

The CD, being one to hold student profiles, photos, and other memorabilia submitted by the students in my form (year) had to be something that was simple and easy to use, as well as compatible with as many different setups as possible without many requirements. This ruled out some fancy DirectX idea’s I had and even the idea of building it all in to an executable. I also decided to rule out using Macromedia Flash as there is another requirement for something that I feel is a bit unnecessary. In the end it came down to using XHTML and CSS, along with plain images just saved directly on to the contents of the CD. Why? Because all (most) computers these days have a web browser, the CD will be able to run on different architectures easily, and it should theoretically display correctly on all different setups.

After deciding that the CD was to be using CSS/XHTML, along came the big decision of how to lay out he pages. Frames at one point were an idea, then I came to my senses. Next was fixed width versus liquid width. I ended up choosing to use a fixed with layout that way I could resize all of the submitted photos to a specific resolution and lay them out knowing that they should look the same for once again, all different kinds of machine configurations. A simple layout was designed with a header image at the top, menu below it and the navigation and content following that (as you can see in the screenshot on the right).

To assist with the implementation of student profiles on the CD a series of PHP scripts were developed which were to store the student’s details in a database allowing them to be updated easily then eventually exported to their HTML format for inclusion on the CD. As you can see in the screenshots below, the student listing was grouped by surfname in series of letters, and the actual view profile page contains the profile, phot and links to the next and previous profiles.

The photo albums were another feature generated by the use of PHP scripts to export the HTML, design the thumbnails and thumbnail pages and arrange everything how it should be. Scripts were designed to read the contents (images) of a specific directory then create the necessary thumbnail listing pages and the images for each image in each album. The PHP scripts were also used to resize images larger than 720px down, and generate the thumbnails at a height of 120px.

Deciding what and how to export HTML was another thing. I decided to use the Smarty template engine as it meant I were able to create a few templates containing logic (if, elseif, foreach) code instead of compiling a whole series of templates for little things which could, for example, change from one student’s profile to another. Smarty was used to generate the code for each of the pages, and then using PHP’s file system functions write them to their specific files.
[code]$smarty = new Smarty;
…
$theimage = $smarty->fetch(”gallery_image.tpl”);
$file = fopen(”./photos/$dir/$ext[0].html”, “w”);
fwrite($file, $theimage);
fclose($file);
echo “–Done - wrote $dir/$ext[0].htmln”;
}
unset($smarty);
[/code]

After the pages were exported it only left a few pages such as the Messages and Audio pages to be created by hand which were no large task as they both only contained a few elements and area’s of text within the pages. For the Audio page, I didn’t go over the top - once again pushing the requirements of the CD, instead I just linked each of the songs (which were recorded by students) to their specific MP3 file and provided instructions on what to do if they do not automatically play.

The next step, after cleaning things up was to make the actual CD automatically run in Microsoft Windows. This was very simply done by using the autorun.inf, and a start.bat (which opens the main index page).

autorun.inf
[code]
[autorun]
open=start.bat
[/code]

start.bat
[code]
@echo Loading PHHS Class of 2004 Yearbook CD
@start index.html
@cls
@exit
[/code]

As long as the user has autorun enabled, and a web browser installed they should have no problems starting the CD. However if for some reason it doesn’t automatically start a read me file was included on the CD as well as printed and will be placed in to the plastic sleeves of the CD’s before they’re distributed.

This project to me has been fairly large and a fair amount of time and effort has gone in to it especially dealing with all of the profiles (153) as well as the images (over 400!). It totals to 2,472 files in 30 directories and will occupy about 140mb of space on the CD-ROM - that’s pretty good if you ask me!

Hopefully now that this project is cleared up I will have a bit more time before Christmas to get some of the things done which are on my ever growing list and becoming a bit more active around here again.