SE 3316A Web Technologies Lab #3: Due Sunday, Oct. 27, 11:55 pm
Deadlines:
1. Submission deadline: Sunday, Oct 27, 11:55 pm
2. Demonstration deadline: Tuesday, Nov. 5, 12:30 pm
Objectives:
A. Design and implement a ReST API for basic Create/Read/Update/Delete (CRUD) operations to
maintain a database of key/value pairs on the server-side (back-end).
B. Create a client (front-end) interface for interacting with the above API (pure JavaScript only).
C. Use asynchronous operations for showing a live view of the database.
D. Using a single web-server for both static content as well as ReST API.
E. Apply input sanitization techniques
F. Learn about the basics of using Node.js, Express and MongoDB to create a ReST API
In this lab, you will implement some server-side functionality for the library checkout application in lab 2.
Accessing the application using a public URL is mandatory. You may use Amazon EC2, Cloud9 or your own
server for a public URL. You may use a local installation of Node.js for development purposes.
Workflow:
1. Create a new private Git repository on Github called “se3316-xxx-lab3” (all lowercase) where “xxx”
is your Western email ID.
2. Clone that repository on your workstation/laptop to create a local working directory.
3. Make frequent commits and push your project to Github at the end of your work session.
Submission Instructions:
Please carefully read the instructions and strictly follow them. Your grade depends on it.
1. Use a proper “.gitignore” file so that only the files that you edit are in your repository.
2. Make frequent commits with an appropriate commit message.
3. Ensure that you understand the principles behind your code.
4. Ensure that Github contains the latest version of your code.
5. Copy the output of command “git log” and paste that onto the submission page (Assignments
section) on Owl.
6. Download your repository as a zip file from Github and submit as an attachment. Please do not zip
the folder on your computer as it contains a large amount of extraneous files
7. Ensure that your Github repository is shared with TAs.
8. Demonstrate your lab before the demonstration deadline.
Penalties will apply for not following the naming convention or any of the submission steps.
Schedule:
You may complete it at home. TAs will be available in 3C+ 4435/4440 during lab hours (Mondays
8:30am-10:30am, Tuesdays 8:30am-10:30am and 10:30am-12:30am) to answer any questions that you
may have.
Preparation - Software Stack
On your computer: Install Node.js and follow the “Writing a CRUD app with Node.js and MongoDB” guide
on Owl.
On Amazon AWS: Follow the guides on Owl to set up a AWS EC2 or Cloud9 instance with latest version of
Node.js
1. Create a new workspace
a) Create a new Github repository
b) Initialize the Node package manager with command npm init. Enter ‘lab3‘ for name,
‘server.js‘ for entry point. For other values, you may just press ‘Enter’ key to accept the default
value or enter anything you like. This creates a file called ‘package.json’. You may inspect this file,
edit it by hand or remove it and re-do this step if you make a mistake.
c) Install dependencies using npm install express mongoose body-parser --save. This will
install the supporting libraries ‘express’, ‘mongoose’ and ‘body-parser’ as well as add these to
‘package.json‘ file as dependencies. Feel free to read more about these libraries using your
favorite search engine.
d) Make frequent commits as you progress through the assignment.
2. Install MongoDB
You will be using MongoDB, which is a simple key-value database. You may use a 3rd party provider for this
and use their web API for your application (see “Using 3rd party service for MongoDB” section below).
While this may ease your workload, it offers fewer opportunities to gain experience.
To install, type sudo apt-get install -y mongodb-org on the terminal window. This will download
MongoDB v2.6 and install it on your workspace.
Create the server start script using following three commands (please note the use of spaces, single and
double quotation marks and type them exactly as shown):
1. mkdir data
2. echo 'mongod --bind_ip=$IP --dbpath=data --nojournal --rest "$@"' > rundb
3. chmod a+x rundb
3. Start MongoDB server
In a new terminal, type ./rundb. This will start the database server. Pay attention to the log messages for
any errors or warnings.
Create another new terminal and test the database by running the command mongo. To start the
interactive shell for MongoDB. Type exit to exit the interactive mongo shell.
Problems with MongoDB not starting
To properly shut down the mongodb server, type Ctrl-c in the terminal that started the mongodb server
(e.g. via rundb script). If the database server is not properly shut down (e.g. logging out or closing the
terminal), it may not start the next time and requires repairing the database.
To repair the mongoDb type ./rundb --repair in the terminal and then type ./rundb again to restart
the database.
Preparation - Creating a Basic ReST API with Node.js and Express
Follow the tutorial at scotch.io on getting started with Node.js and Express. Since you have already
performed some if the initial steps in this tutorial, please start from the step: “Setting Up Our Server
server.js”. At the end of this tutorial, you will have created a working ReST API to create, read, update and
delete data records in a MongoDB database.
Important:
1. On C9, mark the application url as public. Otherwise your network endpoints will not be accessible to the
front-end code.
2. Use the correct URL in the ‘mongoose.connect’ method to connect to your own database that was
setup in the preparation step above.
This connect URL follows standard URL notation (scheme://host:port/path). In this case scheme is
‘mongodb’, host is ‘localhost’, port is ‘27017’ (standard port for mongodb) and path is the name of the
database. Let's call it ‘bears’. If the database doesn’t exist, mongodb will create it for you. So, the full URL
is: ‘mongodb://localhost:27017/bears’.
Avoid copy+paste since quotation marks are not the ones expected by Node.js (or any programming
language).
Main Activity - Creating a database back-end for the shopping cart
The back-end functionality must provide URLs (nouns) and appropriate HTTP verbs following actions:
1. Create a new item with name (required), type (“book” or “CD”, required) and loan period (optional).
2. Update the quantity of items.
3. Update loan period of an item.
4. Delete an item.
5. Get all available items (name and type), quantity and loan period.
6. Get the quantity, type and loan period of a given item.
You are required to design the proper noun+verb combinations using ReST paradigm. Data may be entered
in any language supported by UTF-8 and the web service must preserve the language encoding.
The front-end functionality must provide:
1. A minimal user interface to test all back-end functions.
2. Use asynchronous functionality (e.g. polling every 2s) to periodically update the available items and
quantities.
1. Sanitize all user input so that the display must not interpret any HTML or JavaScript that might be
typed on to the text area.
2. Allow any language as item name and display items in the language it is entered.
Optional reading: http://xkcd.com/327/
Code will be checked for similarity. Please work independently. Please frequently check the FAQ below for
clarifications, tips and tricks.
FAQ
1. Unable to access the REST endpoints from Postman.
If you could not able to access the REST endpoints from Postman (students report that they get the C9 login
page in the response), follow these steps to solve the problem.
1. Click the ‘Share’ button on top right corner
2. Mark the application URL as Public
2. Using 3rd party service for MongoDB
You may use a 3rd party web service such as mlab.com instead of installing your own server. While this may
ease your workload, it offers fewer opportunities to gain experience.
3. Input sanitization
Main ideas is to prevent any text input field from being used in injection attacks (HTML injection, SQL
injection, JS injection etc). This happens if you store user input and then send that input back to client to be
displayed. E.g. If a user enters malicious JavaScript in to a text box and that gets stored and sent back later
without any filtering, it allows injecting JavaScript to your front-end.
It is very hard to sanitize user input that applies to all situations and requires a layered approach. First layer
is input validation. If a field requires a number, input validation must ensure that only a number is accepted.
Next layer is filtering. You may use a third-party library to strip HTML, CSS and JavaScript from user input.
Third layer is how data is added to the DOM. Always ensure that you use createTextNode() method to
show user entered data.