Case Study: Net 20 Voting Site

This tutorial outlines how to implement the DynaTable API using a case study: The Net20 Song Voting site.

This application allows visitors to cast votes for popular songs, either by choosing from a pre-defined list or entering their own custom choices. It then allows the Vote records to be repositioned to enable the user to establish an order of voting preference.

DynaTable maintains an XMLDocument object in the background, recording the user's choices. Upon submission by the user, the XMLDocument object can be serialized into XML for server-side processing.

This tutorial assumes an intermediate knowledge of HTML, XML, and JavaScript.

The most important first step is to establish what data you want to capture and/or display to the user. In this case, we have seven items: "id" (the unique identifier for the record), "songId" (the unique identifier for a song record), "prefNo" (indicates the preference of the vote cast in relation to other votes), "whenCode" (indicates when the voter first head the song; a field with four possible values), and "comments" (a free-form text field). There are also two fields used for caching: the "songTitle" and "artistName" values associated with a particular Song item are also captured in the dataset.

Next, establish where in your schema you would like these values stored. In our example, we're going to simply set each field as an attribute of each Vote node, with the exception of the "comments" and "whenCode" fields, which will be child element nodes. i.e.:

<vote 	id="555"
	songId="101" 
	artistName="The Eagles" 
	songTitle="Hotel California" 
	prefNo="1">

		<when code="TDAY">Today</when>
		<comments>The Eagles at their best.</comments>
</vote>

The reason we want to store the "artistName" and "songTitle" fields in addition to its related key value, "songId", is because we want to allow the user to vote for songs that aren't already in the predefined list (and thus, won't have a songId value).

The "when" node gets it's own XMLElement under the "vote" XMLElement because we want to use it to store a code and text pair. This is useful when you have a <select> box with options that have a "value" attribute which is different to the display text, but you want to capture both. Tricks like this help avoid unnecessary trips back to the server/database, say if you wanted to later transform the XMLDocument into a different format on the client.