CS 351 Fall 2019 Homework 5

Templates, JSON and Networking

Dr. Greg M. Bernstein

Due Wednesday, October 9th, 2019 by 11:59PM, 50 points.

General Instructions

In this homework we will use Templates, JSON and Node.js to help us automate the creation of the website for the fictitious tour company that you started in Homework #4. In addition we are going to get a bit hands on with networking!

Create and Use a new Branch hw5

We will create a new git branch called hw5 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 4. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw5. Review the section on submission for using push with a new branch.

Use README.md for Answers

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


Question 1. (10 pts)

Node.js, package.json, installing nunjucks, directory layout. Directory structure is important.

(a) Install node.js. Report the version number here.

(b) Create package.json

Within your tourProject directory create a package.json file by one of the methods recommended in in the course slides. Be sure to commit this file to Git. Write the approach that you used to create the package.json file here.

(c) Directory Structure

Within the tourProject directory create the following directories and move your previous content to them as instructed (or just make up new content):

  • content directory: You will move your raw HTML files here.

  • output directory: You will move web site assets such as CSS files and images to this directory. These may be put in subdirectories within the output directory. Our template code will also place generated files here.

  • views directory: We will put our newly designed templates here.

My project directory structure looks like this:

Commit your changes.

(d) Adjust .gitignore

Add/modify the following lines in your .gitignore file:

# Ignore generated html from the template engine

# dependencies, change to ignore all node_modules dirs

(e) Install nunjucks.

In the tourProject directory use the command npm install --save nunjucks. Do not commit until you have adjusted the .gitignore file in the previous step. You should never commit the node_modules directory to git.

(e) Example Template and Run

Create a simple starting views/base.njk template like that shown in the course slides, e.g.,

(f) Strip boilerplate from content HTML files

Remove all the tags and such from your content HTML files that are already in the base.njk file, e.g., <html>, <head>, <main>.

(g) Create a program to run the template engine

Create a runIt.js file in your tourProject directory to read in one of the content files and render it with the template engine. My code looks like:

(h) Example Page and Directory Structure

Get a single file to render and take a screen shot of it. Commit all the files except node_modules and others to be ignored. I get something like:

Example page
Example page

Question 2. (20 pts)

Extend program to process all your content files (remember to remove the HTML boilerplate from those files), use `include mechanism for navigation menu and add meta-data (title).

(a) Create a List of Content and corresponding meta data.

My list of files in the content directory along with their corresponding meta data looks like: (put your list here)

I put this in a file renderList.json for processing.

(b) Create a file with just the basic navigation information.

For my site I created the following and put it in the views\nav.html file.

(c) Update your template

Your template should now include the navigation menu and use the title meta data. see the course slides.

(d) Update your runIt.js to process all files and create your site.

Make sure your site works locally at this point. There should be no broken links. You must have your own content on each page, at least an <h2>! Take a screen shot of your output directory. I get something like:

Question 3. (10 pts) {.Question} News Letter Signup

We need to work on the news letter signup page so we can start gathering potential customers for our tour company.

(a) Add widgets

Our the news letter sign up page add HTML widgets to get customer inputs. You need at least inputs for first and last names, email, and an <select> element for the user to select from a list of option about how they heard about your company. Add these take a screen shot and show (just) the new HTML you added here.

Prior to styling my page (after rerunning the template program from problem 2) looks like:

(b) Style form with Grid

The screen shot above looks pretty bad. Clean up your form using CSS grid and other enhancements as you see fit. Show the added CSS code here and a screen shot.

Question 4. (10 pts) {.Question} Deployment and JSON

(a) Deploy your new site

Put a nicely formatted link to your new site here. Make this link and all links on the site work!

(b) JSON

What does the acronym JSON stand for?

(c) JSON Syntax

Which of the following are valid JSON?

  1. {name: "Dr. B", course: "Web stuff"}
  2. {"name": "Dr. B", "course": "Web stuff"}
  3. {name: "Dr. B", course: "Web stuff", fun: true}
  4. {name: "Dr. B", course: "Web stuff", fun: "true"}
  5. [1, 2, 3, "A", "B", "C"]

(d) JSON Usage

Where might you want to use JSON? Give an example.

Question 5. (10 pts) Addresses

(a) Your Network Interfaces

We can use Node.js to find out about how your computer accesses the Internet. Put code like the following into a file and run it with Node.js

You may get a lot or a little output depending on your machine. Scroll through the list looking for the name of the interface that you are currently using, most likely Wi-Fi or Eth0, but not an interface associated with a virtual machine manager such as VirtualBox or VMWare. Within that interface find the entry that has a family of IPv4. Show me the IPv4 address and the MAC (Ethernet) address and take a screen shot.

My screenshot looks like:

(b) Ethernet Address of your machine(s)

Go to the Wireshark OUI lookup page and enter the Ethernet address from part (a). Who made your Ethernet adapter?

Take a screenshot. I get something like this for my laptop:

(b) Type of IP Addresses of your machine

Go to Wikipedia:IPv4 special use addresses and see if your IPv4 address from part (a) falls into one of the special use address categories, if so, which one?

(c) IP Address of a public website

Now let’s use the Domain Name Service (DNS) to look up an address of a website of your choosing (you cannot use mine!). This can be done with a Node.js program like the following:

Write the IP addresses returned here. For my site I get: [ '' ].

(d) Where is the server?

Using the IP address you got from part (c) use an “IP location finder” website to give you information about the physical location of the computer with the IP address. I used KeyCDN but you can try any of the sites. Take a screen shot of the location information they give you.

I for my website’s IP address I get: