The projects on this part of the site are also discussed in the blog. To see the source code in your browser, click on the file name; to download the file, click on the arrow.

Ajax and The Studio

This example contains one page from the web-based incident tracking system I wrote, along with the supporting files. The team I work with often use SQL queries to fix problems, and the page code below creates a directory of those queries, allowing us to update entries and create new ones.

Language	Source	Notes
JavaScript	queries.js	The script here supports all of interactions on the page, but you want to pay attention to the Ajax calls. I use the prototype JavaScript library which makes the whole process incrediby simple. There's a lot to say about JavaScript, but I'll save that for another example.
ASPX	Queries.aspx	This is the HTML for the page. I use a few runat=server lines in the page, as I found this the simplest way to write the user's name and the page links.
ASPX	Queries.aspx.cs	This is the C# code that sits behind the HTML. It doesn't do much except to ensure that the user is logged in, and write the user's name and some standard links to the page.
ASHX	QueryData.ashx	This is the C# code that powers the Ajax calls. When I make an Ajax call, I don't want all the overhead associated with a ASPX page, and the ASHX format seemed the way to go.
C#	PostData.cs	Variables come into the ashx routine as POST variables, and I wrote this class to handle standard processing for those variables.
	UserSession.cs	Opens the database, logs the user in, other session level tasks.
	Utility.cs	A collection of utility routines used throughout the site. The relevant one here is encodeJson, which the ashx code uses to return the results as a JSON string.

Grade Book

Grade Book provides online grades to students. The data is stored in an Excel file in XML format, and the display software is written primarily in PHP.

My working gradebook is online at Washtenaw Community College. To see an example, enter this user id: New Student @99999999

A few notes on the code:

Both the login script and the grade display are combined in the same PHP page. If the student makes an error in entering his ID, the page will just redisplay the login and an error message; otherwise it can go ahead and give the grades. If the login were a gateway to multiple pages of information, I would need to save a cookie to keep track of who was browsing, but since there's just one page, I can dispense with that.
SimpleXML makes it easy to access the data inside the spreadsheet. Load the data wih one call -- simplexml_load_file('../data/Grades.xml') -- and get the contents of the cell at (row, column) like this:
$xml->Worksheet[0]->Table[0]->Row[row]->Cell[column]->Data
The "Show User ID" checkbox turns the input field from type="password" to type="input". Unfortunately, Explorer doesn't allow you to change the type of an input field on the fly (everybody else does), but you can use the DOM getElementById().innerHTML to replace the whole input field.

Language	Source	Notes
XML	Grades.xml	This gradebook is specific to the course I am teaching, but the general idea is fairly extensible. The first worksheet contains summary data that I give to the students. Supporting this, there is a separate worksheet for each of the 16 weeks in the course.
PHP	grades.php	A single (short) file that accepts a student login and displays their grades.

Age Gauge

Age Gauge is a Google gadget, written primarily in JavaScript, which calculates a person's age.

The main file -- AgeGauge.xml -- doesn't do much except set gadget parameters. The little bit of html that you see there, one <div>, is empty. Since there are three possible displays -- the birthday boy and his age, data entry and editing, and the help display -- it's necessary for the JavaScript functions to generate the html on the fly.

These functions use the DOM getElementById (which Google shortens to _gel). This was my first experience with the DOM (document object model), and it is very cool, a huge step above static html. Since the JavaScript is operating on the client side (your browser), everything is very quick; the browser doesn't have to go back to the server to refresh your display.

Most of the code is pretty straightforward. I only mention that long experience has made me prefer relatively short source files. When I'm looking at a file, I like it to be conceptually coherent and small enough to be taken in at a glance (maybe 100 to 200 lines). So the whole project consists of six files, but I delivered a single file using jsMerge.pl.

Google provides a detailed developer's guide, which gives you almost everything you need to know to make a gadget.

Language	Source	Notes
XML	AgeGauge.xml	This is the wrapper around the JavaScript files. The XML primarily sets gadget parameters.
JavaScript	Actions.js	Handles reponses to button clicks and text entry.
	FormatAge.js	This does all of the arithmetic required to determine one's age, accounting for leap years.
	JSON.js	This code (provided by JSON.org) converts JavaScript objects to strings and back again. This provides a convenient way to store structured gadget data, without the overhead of XML.
	Main.js	Gadget initialization. It also loads and saves the JSON data.
	PrintHTML.js	What you see in the gadget is HTML. These routines generate it.
Perl	jsMerge.pl	Since the gadget source code is accessible to users, I wanted to provide a single source file (even though I didn't develop the gadget that way). I also learned that I could halve the size of the gadget by removing comments, so jsMerge does that, too.
Perl	upload.pl	This uploads a single file or a whole directory to a web site. By including this in a shell script, I don't forget to transfer everything.
Unix shell	make.sh	This script invokes the Perl routines to assemble the source code into a single file, then upload everthing to the site.