Assignment 7: Flag shop

You may work with one other student on this assignment if you wish. Due: 5pm, Friday, May 2. Value: 50 pts.

In this assignment, we'll return to developing a browser-side program, akin to your work with Assignment 2 except that you'll also be using Dust, and the Web site developed will be somewhat more realistic. This assignment description is broken into the following parts.

Your job
Setting up the assignment
Server AJAX documentation
Useful documentation

Your job

Your job is to develop a simple Web site for a e-commerce site selling state flags. In this shop, users will only order one flag at a time.

I am providing you a complete server implementation using Node.js. (By the way, this server implementation includes two modules that you may find particularly useful for the team project: dyn_dust.js and db_session.js.) Your job will be to develop the browser-side implementation. The handout code already includes implementation of the portions involving registering new accounts, logging in under an account, and logging out.

The distributed code includes a large number of files. However, you will likely find the following files most important:

static/core.html: the Dust templates that your solution uses.
static/core.js: the JavaScript that your solution uses.
static/style.css: CSS style rules. While it is not absolutely necessary to change this, I suggest that you might.
static/index.html: “main” HTML that your program uses. I do not think you will want to modify this.
server/build_db.sql: SQL statements for creating the initial SQLite database (described in “Setting up” below).
server/main.js: the main Node.js program (described in “Setting up” below).

Your job is to modify the browser-side code to do the following:

When the user completes the search form, the program should display a table of the products matching that query. Please note:
- If there are no matching products, a message to that effect should be displayed.
- If there are more than 10 matching products, the server will send back only 10, and you should display a message that there are additional search results.
- This search feature should work whether or not a user has logged in. If no user is logged in, each row of the table should end with a message “Log in to order.” But if a user is logged in, each row should include an “Order” button.
- However, if the item in the row has no more available, then rather than display “Log in no order” or the “Order” button, the site should display “Out of stock.&rduo;
Also note that this table must be generated using a Dust template.
When the user clicks an Order button, a form should be displayed where the user will enter a shipping address and then submit the form. (There will be no communication with the server as it displays the form.)
Upon submitting the order form, the order should be sent to the server. If the order is unsuccessful (for example, if the address is empty or has an invalid symbol like ‘{’), then the order form should display a message to that effect. But if the order is successful, the order form should disappear and be replaced with a short message like “Thank you for your order.”
At any time, the user may click the “Order History” link, and the program should display a list of prior orders in a reasonably nice format (perhaps as a table). If there are no prior orders by that user, then a message to that effect should be displayed.

Note that this list must be generated using a Dust template.

By the way, about the flags in the store. The initial database created will place an inventory of five of each type of flag in the store. The price associated with the flag happens to come from a 2001 poll on flag quality by the North American Vexillological Association. However, once the inventory decreases to 1, the price on the flag goes up by $1.

Setting up the assignment

If you are not on a Linux lab computer, you will need to download and install Node.js if you haven't already. (See Assignment 2.)
In your home directory, execute the commands “npm install bcrypt-nodejs” and “npm install dustjs-linkedin”. (You should have already executed “npm install async”, “npm install express”, and “npm install sqlite3” from before.)
Download flagshop.zip.
Unpack the ZIP file. On the Linux computers, you can do this using the command “unzip flagshop.zip”. Note that the command places all file under a subdirectory named flagshop, which itself has two subdirectories: server containing all server-side code and static containing all browser-side code.
Change into the flagshop/server directory: “cd flagshop/server”.
Create the initial database using “sqlite3 flags.db < build_db.sql”.
Start the server using “node main.js”.

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 AJAX documentation

Your server supports the following AJAX requests. All responses are in JSON format, with an ok field that is true or false depending on whether the request is successful. Possible causes of unsuccessful responses include problems in SQL as reported by SQLite, or the failure conditions listed below. If ok is false, an additional attribute message provides more details about the problem, formatted to be appropriate for display to the user. If ok is true, most AJAX responses (such as search) will include additional data as specified below.

/login [Note: already used in handout code]

HTTP request type: POST

HTTP request parameters: login, password

Failure condition: Login ID/password combination not found in database, could not find available session ID.

Action: Create a session for the user, sending session ID back as a cookie.

HTTP response data: userid, the number associated with the user.

/logout [Note: already used in handout code]

HTTP request type: POST

HTTP request parameters: none

Failure condition: none

Action: Deletes the session.

HTTP response data: none

/order

HTTP request type: POST

HTTP request parameters: productid, price, address

Failure condition: Address is empty or has invalid characters (like ‘{’), product ID is invalid, product is out of inventory, price does not match current price in database.

Action: Saves the order in the database.

HTTP response data: none

/orders

HTTP request type: GET

HTTP request parameters: none

Failure condition: none

Action: Retrieves all orders placed by the user.

HTTP response data: results, a list of objects each having the properties ordertime, name, price, and address.

/register [Note: already used in handout code]

HTTP request type: POST

HTTP request parameters: login, password, firstname, lastname

Failure condition: Login ID already exists in database, invalid login ID, empty password, invalid first or last name, could not find available user ID or session ID.

Action: Creates a new user with the provided information and creates a session for that user, sending session ID back as a cookie.

HTTP response data: userid, the number associated with the user.

/search

HTTP request type: GET

HTTP request parameters: query

Failure condition: none (if none are found, success is true with an empty results list)

Action: Searches the product list for up to 10 products whose name contains the letter sequence found in query.

HTTP response data: results, a list of up to 10 objects each having properties named productid, name, price, and avail. The avail property is true if any of that product are still in inventory. Also, the response includes a property more if there were more than 10 matches found in the database.

Useful documentation

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