CS 351 Fall 2019 Homework 8

Servers, Templates, Forms with Express

Dr. Greg M. Bernstein

Due Wednesday, October 23rd, 2019 by 11:59PM, 50 points.

General Instructions

In this homework we will continue work on the server-side. Also you can leave your tourProject from the previous homework intact, as we will want some of those files for use in later homework.

Create and Use a new Branch hw8

We will create a new git branch called hw8 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 7. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw8. Review the section on submission for using push with a new branch.

New tourServer directory

Create a tourServer directory at the top level of your repo.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Questions

Question 1. (10 pts) Server Rendering

In this homework we are going to work with a somewhat traditional server rendered site. However, we will use template features to make updating the site with new pages pretty easy.

(a) Set up directories

Within your tourServer directory create a public directory and a templates directory. Use the “output/build” files from your tour project site from either homework #5 or #6 as a starting point. Take static assets such as CSS files and images and put them into the public directory. Take all your HTML files and put them into the templates directory.

(b) Create “base.njk” template

Make a copy of your index.html file and call it base.njk. Make Nunjucks blocks for holding metadata and the main content.

Show your base.njk code here. I get something like, yours should be different in at least the menu:

(b) Convert HTML files to Templates

We are going to convert each of our HTML files into a corresponding template file and use template inheritance so we don’t need to repeat boiler plate HTML and can insert titles. Show me the template you created for your about page. I get something like the following (note block names need to correspond to what’s in the base.njk):

(c) Create Server

Create a file called tourServer.js in the tourServer directory. Have a GET path for each of your template pages, have the ‘/’ path render your index.njk template. Get all your pages and links working! Show your code here. I get something like (yours will be different, depending on your page names):

Question 2. (10 pts) Newsletter Signup GET Form

(a) Create Newsletter Signup Form

You previously had a page with inputs for newsletter sign up. Turn this into a functioning HTML form that uses a GET method and sends the data to the /newsSignup path. You will need to add name attributes to any inputs/controls and add a submit button. Take a screen shot of your updated newsletter signup page with the dev tools showing the form element. I get something like:

Newsletter signup page/form
Newsletter signup page/form

(b) Signup Handler on Server

Create a handler on the to listen for the GET form on the /newsSignup path. You should create a global newsSubscribers variable initialized to an empty array. Get the subscriber information and add it to the array. Send back something (for now) to the client. On the server print out (console.log) the current list of newsletter subscribers after each addition.

Take a screen show of your server log messages after a couple of people sign up. I get something like:

Server logging to check on subscriber addition
Server logging to check on subscriber addition

(c) Supply Feedback to Subscriber

We really should let the user know that they are signed up. Create a simple template to provide a customized thanks to your new subscriber. Hint: create a ThanksSub.njk template in the templates directory, supply it with the subscribers information you just got to render a custom message.

Take a screen shot and show your server side form handling code here.

My screenshot looks like:

Thanks subscriber
Thanks subscriber

Question 3. (10 pts) Tours Page from Template

(a) Tour Info into JSON

Based on the tours on your tour page create a JSON file with the essential information. My situation is a bit more complicated since I have both virtual and physical tours, but yours can be as simple as a single array of objects. Show (part) your tours in JSON format here and save them into a file called tours.json. Mine looks like:

(b) Render Tours from Data

On the server read in the tours.json into a global variable, in problem 4 we will add tours to that variable as a temporary substitute for a database of tours. Update your tour template to render tour information from the tours information. Show your template code, show your updated handler code. Hint: see Nunjucks template docs.

Question 4 (10 pts) Add Tour POST Form

(a) Create Add Tour via POST Form

Create a form page/template for adding a tour to your collection of tours. Use the POST method and a action URL of your choosing. Add a link to this page to your main menu (base.njk template). Take a screenshot showing this page with the updated menu. I get something like:

Add Tour Form Screenshot
Add Tour Form Screenshot

Note my screen may be more complicated than yours since I have two types of tours.

(b) Handle form submission

Write server side code to handle the tour submission from part (a). Add the submitted tour to your tour collection variable, and return/render the updated page of tours to the user.

Show updated handling code here (both the GET for part (a) and POST for part (b)). Show screenshots before and after your have added a couple tours.

My screen shots look like:

Before Adding Tours
Before Adding Tours

and

After Adding Tours
After Adding Tours

Question 5 (10 pts) Securing User Passwords

For this question you will need the mock user data I generated: usersTours.json. Put all work in your tourServer directory.

(a) Hash user passwords

To emulate server side storage of user information including passwords, write a Node.js program that reads in the userTours data from JSON, hashes the password field with bcrypt, and saves the data to a new file userTourHash.json.

Hint you can use the following code to get you started if you like.

Show your code here along with a couple of entries from the userTourHash.json file.

(b) bcrypt work

By changing the “rounds” parameter to bcrypt we can make it harder (in terms of computation) to compute the password hash and thus increase our defenses a bit. Using the program from part (a) increase the number rounds (default is 10) parameter to bcrypt until it takes at least 15 seconds to run. Take a screen shot of the timing results. I get something like:

bcryptjs timing for 40 users
bcryptjs timing for 40 users