程序代写 COMP3322A Modern Technologies on World Wide Web Midterm Examination

COMP3322A Modern Technologies on World Wide Web Midterm Examination
Student Number: ____________________Name: _____________________
Date: October 29, 2019 Time: 10:40-11:40am
Total mark: 100

You are going to implement a simple Express web app as follows. When you load the web page at http://127.0.0.1:8081/index.html in a new browser session, you see a page view as in Fig. 1. While you are entering a product category into the input box, some predefined categories whose starting letters match what you are entering will be shown in a dropdown list, as shown in Fig. 2.
Fig. 1 Fig. 2
After you have finished entering the category and clicked the ¡°Submit¡± button, a list of products in the category will be retrieved from the server side and displayed underneath the category input on the page, as shown in Fig. 3.
In addition, suppose you have retrieved some products earlier in a browser session; in the same browser session, if you load the page again by entering http://127.0.0.1:8081/index.html in the address bar and pressing ¡°enter¡±, you will see a page as shown in Fig. 4 (assume products in the ¡°Clothing¡± category is what you last retrieved in this browser session), i.e., the ¡°Product Category¡± input box is empty, while the list of products are displayed underneath.

Complete index.html and App.js which are partially given below, to implement the above web app.
1 (40 marks). In index.html:
(1) Implement the input box following ¡°Product Category¡± using HTML5 and the corresponding element. Give the element an id of ¡°mycategory¡±; add four

element with id ¡°ProductList¡±. Use plain JavaScript.
(3) Implement the retrieveProductList() function, which is invoked when the ¡°Submit¡± button in the HTML form is clicked. In the function, disable the default form submission behavior; send an AJAX HTTP request to the server side according to the method and URL defined in the

element, sending the category entered in the input box; then display the response from the server side as content of the

element with id ¡°ProductList¡±. Hint: value entered in the element can be retrieved by document.getElementById(“mycategory”).value. Use plain JavaScript.
index.html

My Shopping Portal

Product Category:
//implement the and corresponding elements here

function getPreviousProducts() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
//to complete
xmlhttp.open(”
xmlhttp.send(); }
“, “previousproducts”,
); //to complete
function retrieveProductList() {
//to complete
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ //to complete

}

//to complete
2 (40 marks). On the server side, assume a MongoDB database ¡°productDB¡± has been set up in the MongoDB server running at localhost:27017. A productList collection has been created in the database; a number of documents have been inserted into the collection in the following format:
In App.js:
(1) Complete the middleware handling HTTP GET requests for ¡°previousproducts¡±. It checks if a session variable ¡°previouscategory¡± has been set: if so, find all documents in the productList collection in the database that belong to the category specified in this
db.productList.insert({“name”: “winter jackets”, “category”:”Clothing”}) db.productList.insert({“name”: “hats”, “category”:”Clothing”}) db.productList.insert({“name”: “scarfs”, “category”:”Clothing”})

session variable, construct HTML content according to information in the retrieved documents by calling the ResHTML(docs) function, and then send the HTML content in the response message; if the session variable has not been set, send an empty string ¡°¡± back.
(2) Complete the middleware handling HTTP POST requests for ¡°handleform¡±. It retrieves all documents from the produceList collection which belong to the category carried in the body of the POST request message, set a session variable ¡°previouscategory¡± to remember the category, construct HTML content with information in the retrieved documents by calling the ResHTML(docs) function, and then send the HTML content in the response message.
(3) Complete the ResHTML(docs) function, which constructs an unordered list according to ¡°name¡± field in the docs and return the HTML content string.
var express = require(‘express’);
var app = express();
var session = require(‘express-session’);
var monk = require(‘monk’);
var db = monk(‘localhost:27017/productDB’);
app.use(session({secret: ‘random_string_goes_here’}));
app.use(function(req,res,next){ req.db = db;
next(); })
app.get(‘/index.html’, function (req, res) {
res.sendFile( __dirname + “/public/” + “index.html” );
//complete the following middleware app.get(‘/previousproducts’, function (req, res) {

//complete the following middleware
app.post(‘/handleform’, , function (req, res) {

function ResHTML(docs) {
var response_string = “”;
return response_string; }
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log(“Example app listening at http://%s:%s”, host, port)
3 (20 marks). Answer the following questions related to the above web app:
(1) After you type the URL http://127.0.0.1:8081/index.html in the address bar of a web

browser and press ¡°enter¡±, how many HTTP requests are sent from your web browser to the server side in order to display the page as shown in Fig. 1 or Fig. 4? Assume HTTP 1.1 is used. For each of these HTTP requests, put down its request line and ¡°Host¡± header line.
(2) Put down the request line and ¡°Host¡± header line of the HTTP request sent from the web browser to the server side when the ¡°Submit¡± button is clicked.
(End of Questions)

程序代写 CS代考加微信: powcoder QQ: 1823890830 Email: powcoder@163.com

My Shopping Portal

Related Posts