HTML, perl

Generating a School Yearbook or Staff Directory Web Page

We were recently contracted to build a simple yearbook web page for an educational institution. The website was to be in the usual yearbook format of a grid of photos, with the name of the student above the photo, and some brief details of the student below each photo.

The yearbook needed to be responsive so it would work on phones, tablets, and desktops, so we chose Twitter Bootstrap as it was the responsive framework we have the most expertise with, and our clients have been most happy with the results of Twitter Bootstrap over the years.

Because there were so many students it would be impractical and tedious to hand build a web page with hundreds of photos, and the educational institution had already collected all headshot photos and text files containing the details of each student. So we decided to build a small perl script that would generate the yearbook web page from the files the institution had collected.

Each student had a directory on a shared drive, and the each student’s folder contained a headshot photo and a text file containing the details. The perl script read each directory in turn, resized the photo into a web friendly size, copied the photo into the output directory, and pushed the student’s info into a data structure, which a Template::Toolkit template then turned into a HTML page formatted with Bootstrap.

Advertisements
HTML, PHP, Reporting, Uncategorized, User Interface

Editing Report URL Parameters

One of the best features of graphical user interfaces is discoverablity, for a user recognition is easier than recall. Users don’t have to look up the available parameters, the GUI controls and widgets themselves tell the user how to control the application. A GUI application is at least partly self documenting.

Design must convey the essence of a device’s operation; the way it works; the possible actions that can be taken; and, through feedback, just what it is doing at any particular moment. Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.

Don Norman, The Design of Everyday Things

I have been building a standard report page in PHP that automatically determines the date range that is sent to MySQL, queries MySQL and then displays the results.

In certain rare cases though the user needs to override the date range and supply their own dates. The user could directly edit the querystring, but that can be error prone for novices, so I used the old web page technique of creating a small HTML form in the page containing HTML input controls which are populated by the parameters in the querystring. The form also contains an update button, which causes the form with method=”get” to reload the page with the update querystring parameters. Any required parameters that shouldn’t be editable can populate hidden controls, which will form part of the querystring, but won’t be displayed in the form.

2018-01-17 14_48_02-Mozilla Firefox

<form>
 <input type='hidden' name='site' value='site'>
 <table>
 <tr>
 <th>From</th>
 <td><input type='text' name='FromUtc' value='$FromUtc'></td>
 </tr>
 <tr>
 <th>To</th>
 <td><input type='text' name='ToUtc' value='$ToUtc'></td>
 </tr>
 </table>
 <input type='submit' value='Import'>
</form>

Security note: when setting the value of anything in a HTML page be sure to escape any variables set from outside of the page such as querystrings to avoid your page being vulnerable to XSS attacks.