SE 3316A代做、代写Web Technologies、Java代做、Java程序语言调试

日期：2019-10-16 10:40

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.