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.


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

  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.


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.


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).

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.


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 260Indian PastsHill 13
ARTS 130Digital ArtCowper-Smith 0
BIOL 112Natural HistoryMoran 0
CSCI 135RoboticsFerrer 22
ENGF 390Love RulesJellenik 2
ENGL 271Crime Literature and FilmWest 1
FREN 460French StoryJellenik 1
PHIL 200Envir AestheticsDow 13
POLI 273Contemp Global IssuesKolev 1
PSYC 185Sleep & DreamingPeszka 0
PSYC 190Social Psych in FilmZorwick 12

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>

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.