Assignment 2: Bid points

Due: 5pm, Thursday, February 13. Value: 40 pts. You may work with one other student on this assignment if you wish.

In this assignment, you'll develop a Web page (as described under “Browser-side” below) for allowing students to “bid” for courses. We'll suppose that each student enrolling in the course has 10 “points” to allocate between courses that the student would like to take; whenever the student wishes to enroll in the course, a bid of at least one must be placed onto the course.

Preparing

First a bit of work with configuring your setup.

1. If you are not on a Linux lab computer, you will need to download and install Node.js from www.nodejs.org.

2. In your home directory, execute the commands “npm install sqlite3”, “npm install express”, and “npm install async”.

3. Into the directory where you will do your work for this assignment, download the following files:

   bids-server.js	Runs the HTTP server with which your page will interact
   jquery-1.10.2.js	The jQuery library, which you will want to load in your page.

4. At the command line in that same directory, execute the command “node bids-server.js” to start the server on port 8888 on your local computer. You will need to do this each time you start work on this assignment.

   Since you won't be modifying the server, you usually won't need to restart it while you develop and debug your program. You'll just save the files and then reload in your browser, and the server will serve up the modified files. That said, typing Control-C will stop the server running.

Server-side

The file bids-server.js is a Node.js program that runs a Web server using an SQLite database. When first executed with “node bids-server.js”, the program creates a database named bids.db in that same directory. This databases includes 11 courses (as it happens, those offered for Maymester 2014), along with bids for three students (named bugs, daffy, and elmer).

For most requests coming from the browser, the HTTP server bids-server.js assumes that the path requested represents a filename, and it looks in the current directory to find the data it should send in response. However, there are three “special” paths that the server treats specially: /, /fetch, and /set_bid.

/

Requests to http://localhost:8888 with no filename are redirected to load the file bids-page.html. The HTML file that you develop should be given this name, in the same directory as bids-server.js. Please note that you should develop your JavaScript in a separate file; that is, no JavaScript should appear in the HTML file.

/fetch

This should be sent as a GET request, with a parameter named user (technically optional). The server returns a JSON object containing a ok property that is true or false. If ok is false, then the JSON object has a message property whose value is a string denoting the problem with the request. If ok is true, then the JSON object has a results property whose value is an array of objects representing each course in the database. Each of these course objects has the following properties (all with string values):

course	The course identifier (e.g., “CSCI 135”)
title	The course title (e.g., “Robotics Explorations Studio”)
instructor	The instructor (e.g., “Ferrer”)
enroll	The number of students who have bid for the course.
bid	The number of points bid by the indicated user. (This is omitted if the GET request omits a user parameter).

/set_bid

This should be sent as a POST request, with three parameters: user specifying the student's user ID, course specifying the course ID (e.g., “CSCI 135”), and bid specifying the requested bid that the indicated user wishes to place on the requested course. The server returns a JSON object containing a ok property whose value is true or false. If ok is false, then the JSON object has a message property whose value is a string denoting the problem with the request. Some potential problems are a user ID with nonalphanumeric characters, a user ID whose length is not between 1 and 40, an unrecognized course ID, a bid that is identical to the current bid in the database, or a bid that will push the user's total bids over 10.

Browser-side

The Web page should work as follows: The page will initially display a “log in” form consisting of a blank requesting the user ID and a button for logging in. Upon submitting this login form, the page should remember the user ID and send a /fetch request to the server; if successful, the log-in form should disappear, replaced with the information sent by /fetch in a table such as the following.

ANTH 260	Indian Pasts	Hill	1	3	Change
ARTS 130	Digital Art	Cowper-Smith	0	—	Change
BIOL 112	Natural History	Moran	0	—	Change
CSCI 135	Robotics	Ferrer	2	2	Change
ENGF 390	Love Rules	Jellenik	2	—	Change
ENGL 271	Crime Literature and Film	West	1	—	Change
FREN 460	French Story	Jellenik	1	—	Change
PHIL 200	Envir Aesthetics	Dow	1	3	Change
POLI 273	Contemp Global Issues	Kolev	1	—	Change
PSYC 185	Sleep & Dreaming	Peszka	0	—	Change
PSYC 190	Social Psych in Film	Zorwick	1	2	Change

By the, the following HTML table created the above table (only the first two rows shown):

<table id="bids">
<tr><td class="cnum">ANTH 260</td><td>Indian Pasts</td><td>Hill</td>
    <td class="num">1</td><td class="oldBid num">3</td>
    <td><input type="number" class="newBid"></input><button class="change">Change</button></tr>
<tr><td class="cnum">ARTS 130</td><td>Digital Art</td><td>Cowper-Smith</td>
    <td class="num">0</td><td class="oldBid num">&mdash;</td>
    <td><input type="number" class="newBid"></input><button class="change">Change</button></tr>
</table>

From here, the user should be able to enter an integer into any blank and click Change. This should result in a /set_bid request sent to the server for the corresponding course. Upon the completion of the /set_bid request, if ok is false, the message should be displayed for the user to see; and if ok is true, the page should refresh the table to reflect the updated value. (The surest way would be to refresh the table entirely, but you could conceivably do it by updating the appropriate tables cells based on what was sent to the server.)

Note: Additionally, after logging in, the page should include a link for refreshing the table (which would get updated information in case another user has registered for a course since the current information was entered) and a link for logging out (which would return the screen to its initial login state).

While the above description describes the basic behavior of your Web page fairly thoroughly, there is quite a bit of flexibility about how exactly it is presented. You should strive to make your page as “usable” as possible. As always, feel free to talk with me regarding any questions about how to do something specific.

Your submission should include just two files, the HTML file and the browser-side JavaScript file you develop.

JavaScript/jQuery tidbits

Some notes concerning JavaScript/jQuery that you may find helpful.

• Two useful resources on browser-side JavaScript:

  Core JavaScript API (from MDN)
  jQuery API
  JSHint (On the Linux lab computers, you can run this from the command line: “jshint filename.js”.)

• You will want to navigate around the DOM some. For example, when the user clicks a button, you'll want to find the cell in the same row that has the course number in it. To do this, jQuery's closest method is helpful for going up the DOM to the nearest ancestor matching a CSS selector, and jQuery's find method is helpful for going down the DOM to find descendents matching a CSS selector.

• You will want to associate an event handler with every button. In our classroom examples, we did this by using the click method on a wrapped set of buttons. This works but requires that you do this anew as new buttons are created. Alternatively, you can tell jQuery to associate an event for all current and future buttons matching some CSS selector using this:

  $(document).on('click', buttonCssSelector, function (evnt) {
    // handler code here
});