Exercises & Project for Web Programming

On-campus and Online

Discussions: Due Week 11 | Week 14

Quizzes: Due Week 2 | Week 4 | Week 6 | Week 8 | Week 11 | Week 14

Exercise 1 | Due Week 3 | Revision Due Week 6
Exercise 2 | Due Week 5 | Revision Due Week 8
Exercise 3 | Due Week 7 | Revision Due Week 10
Exercise 4 | Due Week 9 | Revision Due Week 12
Exercise 5 | Due Week 12 | Revision Due Week 15

Term Project | Due Week 15

Discussions (7.5% of Course Grade)

Discussions will be conducted online, either using Sakai, because the online format leads to everybody contributing and better comprehension of the content. There will be two graded discussions and detailed instructions will be provided in the discussion introduction.

Topic 1: Learning How to Interact with Other Developers, using Online Resources AND Meeting with Local Developers by joining a MeetUp (5% of Course Grade) - Week 11
Topic 2: Reflections on Learning How to Create Web Applications (2.5% of Course Grade) – Week 14

Quizzes (7.5% of Course Grade)

There will be six quizzes that are related to content to be learned to create the exercises and project.

The quizzes will be "open book" and due on Sunday and one week before the due date of the related exercise or project.

The five quizzes with highest scores will contribute to the quiz grade and each quiz will have a bonus question.

Quizzes will be accessible via the Sakai course site.

Quiz 1: HTML and CSS - Week 2
Quiz 2: JavaScript Essentials - Week 4
Quiz 3: Responsive Design using JavaScript Front-End Framework - Week 6
Quiz 4: Modular, Reusable User Interface Components using JavaScript Front-End Framework - Week 8
Quiz 5: Single Page Application using Back-End Framework to Exchange Data - Week 11
Quiz 6: MEAN Stack Development - Week 14

Exercise 1: HTML, CSS and JavaScript Basics – Style Web Page using CSS and Add Interactivity using JavaScript (7.5% of Course Grade)

Create HTML5 Layout and Internal CSS
Header | navigation | content | sidebar | footer
Image and content flows around it and image has a rollover effect (images to use)
Sidebar right floated and other content flows around it
Constrain overall page width to 800px
Layout Sketch
Add Buttons
Linear | Left Sidebar | Center Sidebar | Right Sidebar (assign unique ids)
Layout Sketch
Add Interactivity to Buttons (onclick) using JavaScript
Create function “changeDisplay” and specify parameter = button name
Create Global Array and increment array when specific button is pressed
Button displays Counter by updating button text to show how many times it has been pressed
Only increment counter if different button has been pressed
Control Layout using JavaScript
Create “Linear Flow” Layout:
Click on “Linear” button will create “linear flow” layout by assigning CSS rules to specific elements so that the page elements are displayed in the order listed in the actual code.
Create “Right Sidebar” Layout:
Click on “Right Sidebar” button will create “right sidebar” next to 2nd content by assigning CSS rules to specific elements
Sidebar needs to be 25% of page width
Create “Center Sidebar” Layout:
Click on “Center Sidebar” button will create “center sidebar” that floats next to 1st content and 2nd content flows around sidebar by assigning CSS rules to specific elements
1st content needs to be 30% of page width and needs an appropriate right margin
Sidebar needs to be 25% of page width
Create “Right Sidebar” Layout:
click on “Right Sidebar” button will create “right sidebar” next to 2nd content by assigning CSS rules to specific elements
Sidebar needs to be 25% of page width
Screencast of how page layout can be controlled and needs to appear
Extra credit: make sure that images in content areas do not "stick out" in "Center Sidebar" layout

Exercise 2: JavaScript Essentials – Control Appearance and Interactivity of Web Page using JavaScript (15% of Course Grade)

Google Maps API
Insert two map objects using the Google Maps API: a) Rutgers College Ave, b) Hometown or Favorite City.
Center map and set zoom level so that all the location markers are visible.
Make sure maps can not be dragged and zoomed (hint: set min and max zoom to zoom setting).
Create Data to map
Identify at least 8 locations to map for each map and at least 2 locations for each category and at least 4 location categories.
Specify location object that stores: location name, category, short info, address, lat, lng, map to use.
Create function that computes geocode (lat, lng) for an address using Google Maps Geocoder
and call this function generate needed geocodes and then place markers.
Create array that contains location objects for each map.
Add Markers
Place locations on their respective maps and take into account settings of form controls.
Use different marker shapes or icons for different categories.
Create Info Windows
Format location info as follows: a) h2 element used for location name, b) p element for category and floated to left;
c) p element for short info; d) 2px border surrounds info presented, with the left border 10px (hint: best to place h2 and p elements inside of div and apply border property to div).
Add Form to control map appearance
Radio buttons: control whether category info is shown in Info window.
Checkboxes: control which marker categories are shown in both maps.
Create JS function to check the status of the form elements and updates what is shown in the maps.
Screencast of how the maps can be controlled via the form elements
Code Walkthrough Screencast: examine working Ex2 code that uses a recursive function AND setTimeout to geocode locations so that we don't trigger the OVER_QUERY_LIMIT and shows to radio and checkboxes that control the appearance of the two maps.
setTimeout functiion: https://www.w3schools.com/jsref/met_win_settimeout.asp
Extra Credit: Add Map Feature of your choice
You decide what else to display or what kind of effects to add in the two maps.

Exercise 3: Responsive Design using JavaScript Front-End Framework – Create Responsive Web Page using Bootstrap.js (12.5% of Course Grade)

Create Responsive Grid Layout using Bootstrap 4
Create responsive column layout as outlined in these wireframes for large, medium, small displays.
Create first needed structure of fluid containers and rows that contains sufficient number of columns.
Next, apply need col-SIZE-SPAN to the columns.
Resources
bootstrap_grid_basic | grid_examples
Learn from: w3Schools Band Page v3 bootstrap_theme_band | bootstrap/tryit
Create Collapsible Navigation with Dropdown
Place navigation in 1st row inside of nav element
Home | Theme 1 |Theme 2 | Theme 3 | Theme 4 + Dropdown (Theme 4.1, Theme 4.2, Theme 4.3)
Resources
Navigation navbar
Dropdowns dropdowns
Collapse collapse
Add Slideshow - images to use
Place slideshow with at least four images and title & captions in 2nd row.
Resources
Carousel carousel
Control image size: .carousel-inner img { width: 100%; height: 100%;}
Add Text Content
In 3rd row, add content for two nested column and sidebar (see wireframes)
Add Cards and Circle Images images to use
Place 6 Thumbnails in 4th row and 4 Circle Images in 5th row.
Resources
Cards bootstrap_cards
Images images | class="img-fluid"
Add Toggleable / Dynamic Tabs
In 1st nested column of 3rd row, place tabbed panels.
Resources
Tabs nav_with_tabs
Add Table
In 1st nested column of 3rd row, place table inside 2nd tab of tabbed panel.
Resources
Table tables
Link Collapsible Content to Images
Resources
Collapse collapse
Screencast of responsive grid layout and placement of slideshow, images, tabbed panel and table and collapsible content linked to images.
Extra Credit: Add Bootstrap Feature of your choice
You decide what other Bootstrap feature to incorporate (mention when submitting exercise which extra feature you added).

Exercise 4: Design of Modular, Reusable User Interface Components using JavaScript Front-End Framework – Create Web Page Components using React.js (15% of Course Grade)

We will build on the noteboard application created in the Lynda course Learn React.js in Week 8 and you need to view the videos marked in green and study its code in detail to see how subcomponents are added and use these code patterns to extend the noteboard application so that comments can be added to a note.
If have not yet installed Node.js, you need to install npm from https://nodejs.org/en/.
We will use create react app to create react.js application: npm install -g create-react-ap
Make sure you are in ex4 folder inside of terminal: create-react-app bulletin-board
cd into the bulletin-board folder to launch application: npm start
Make sure to consult the Week 9 Handout (in Sakai > Resources) which contains useful reminders and hints.
Building on the exercise files provided by the Lynda course: make sure to use the Exercise Files > Ch05 > 05_03> completed> bulletin-board > src as your starting point.
There is a bug in the Board.js file where you need to use {note.id} instead of the current {i} to specify key and index when you create the Note component: <Note key={note.id} index={note.id} etc >
You will add the new functionality to the note application and using coding approaches and patterns already used in the note application and so it is worth reading through the code to make sure you understand what is being done where :)
Change note appearance when clicking on “Done” checkbox
Add checkbox in Note and onChange, default and state functionality
To change appearance of note, create function that returns style object with the needed CSS properties
and then use styleToUse variable to specify style property in <div className="note" style={styleToUse}>.
Add comments to a note
Add “Add Comment” button in Note.
Specify onClick and addComment function:
Create object with id and comment properties
Create nextCommentId function
Add comment obj to comments array, which is state of Note
Create NoteComment component:
Need to specify render function
Add Comment component to Note:
eachComment function: create JSX for Comment component
Add current comments to note uisng {this.state.comments.map(this.eachComment)}
To be able to specify input to addComment(“Comment”),
use onClick={() => this.addComment("Comment")}
Remove comments from a note
Add Delete button to Comment component: <button onClick={this.removeComment}>X</button>
Specify remove function: this.props.onRemoveComment(this.props.id)
Specify onRemoveComment(id)
this.state.comments.filter(comment => comment.id !== id)
Need to update state of comments array
Recap: Comment.remove calls
Note.props.onRemoveComment (id) and it calls
In Note component:
<Comment onRemoveComment> calls
removeComment function
Hint: study and emulate the code that adds and removes a note component from the board component.
Submit
Board.js + Note.js + Comment.js + index.js + index.css
Extra Credit: Responsive layout of notes in columns
Add links to needed external bootstrap files and/or install bootstrap via node.js.
Notes Layout : 6 columns for xl | 4 columns for lg | 3 columns for md | 2 columns for sm.

Exercise 5: Design Single Page Application using Back-End Framework to Exchange Data – Create Single Page Application using JSON, Node.js and Express.js (15% of Course Grade)

We will build on the site using Node.js and Express.js that is create in Chapter 3 and Step 6 in the Lynda course Building a Website with Node.js and Express.js in Week 10 and study its code in detail to see how it needs to be customized so that a JSON file with a different structure and properties can used to create the routes and templates.
Make sure to consult the Week 11 Handout (in Sakai > Resources) which contains useful reminders and hints.
Create GitHub account (view videos in Week 2 Up and Running with Git and GitHub)
Create 599_ex5 repository
Make a clone of the Git respository at https://github.com/aspoerri/599_ex5
$ git clone https://github.com/aspoerri/599_ex5.git
Initialize local Git respository and to commit changes
$ git init (initialize git and begin tracking)
$ git add . (add change to staging index)
$ git commit -m "Commit" (commit staging index to repository)
Make sure to install the needed code plugins using Node Manager in the Terminal:
$ npm install
$ npm install express -save
$ npm install -g nodemon $ npm install -g reload
$ npm install --save ejs
Customize Files
Building on this Git resposity, you will need to customize all the relevant files (.ejs and .js files) so that a new JSON file can be used and also make it possible to incorporate video and map features on certain pages. Again we will build on the existing code and so it is worth reading through the code to make sure you understand what is being done where :)
Examine data.json structure and in general replace “speaker” with “highlight”, yet you need to understand the code before making the substitution, and update specified parameters.
Use id property in JSON file to specify which specific highlight to show on the individual Highlight page.
Responsive layout
Use Bootstrap 4: you need to convert the provided Bootstarp 3 code to Bootstrap.
On the index page, the portion of the page that displays the highlight images and their site text, needs to have the following layout: 4 columns for lg | 3 columns for md | 2 columns for sm.
On the highlights page that shows all highlights, the image and video are shown in two column layout for display sizes greater than sm.
On the highlight page for a specific highlight, as specified by the id, the image needs to be at least 800px wide and the text info needs to be below the images.
Below the image and text, the video and map need to be in a two column layout for display sizes greater than sm.
Embed Video on Highlights pages
Option 1
Add property "videoEmbed" to data JSON file for each highlight and the value is based on the value for the "video" property by replacing "watch?v=" with "embed/".
Access YouTube embed info in data JSON file and use in <iframe width="TBS" height="TBS" src="TBS"></iframe>
Option 2
Install embed-video plugin at https://www.npmjs.com/package/embed-video
npm install embed-video
In relevant .js and .ejs files, make sure embed-code is accessible
var embed = require("embed-video");
Access YouTube info in data JSON file and generate embed code using embed-video plugin
embed(youtubeURL);
Specify parameter(s) in relevant routes so that YouTube video can be embedded on Highlight pages.
Embed Google Map with Marker
In .ejs file that controls individual highlight page, add Google Maps API Key and callback toa div element with id that is expected by code that embeds the Google Map.
The lat and long info is included in the data JSON file (and the Google Geocoder does not need to be used :) and needs to be incorporated in code that emdeds the Google Map, which is appropriately centered and a marker is placed at the location of the highlight.
The zoom level needs to be set so that the whole area covered by highlights is visible.
How to Submit
Commit changes in local code repository
$ git add . (add change to staging index)
$ git commit -m "Commit" (commit staging index to repository)
Push repository online (view videos in Week 2 Up and Running with Git and GitHub)
$ git remote add origin URL_of_your_repository
$ git push -u origin master (push to remote origin the branch = master)
Submit URL of your GitHub 599_ex5 repository.
Screencast of the responsive layout of the site using Node.js and Express.js to display the contents of JSON data file.
Extra Credit: Create functionality so that one can display highlights grouped by category and/or specific category.

Term Project: MEAN Stack Development – Create Web Application using Angular.js, Node.js and Expess.js to Connect to MongoDB Database (20% of Course Grade)

We will build a web application using Angular.js, Node.js, Express.js and MongoDB that enables users to post messages and display all of the posts currently stored in a database. We will build the code developed in Chapter 2 & 3 in the Lynda course MEAN Stack and MongoDB Development Techniques in Week 14.
Make sure to consult the Week 13 + 14 Handouts (in Sakai > Resources) which contains useful reminders of all the plugins that need to be installed and which order.
Install
MongoDB – https://www.mongodb.com/
Download | Port 27017
Mac Users: please consult these instructions and make sure that the data/db folder is inside of folder that you will save/copy MongoDB into and set up path to it when you install MongoDB (see instructions).
Use Terminal to navigate to bin folder
$ cd .. (until at C:\)
$ cd Program Files/MongoDB/Server/3.6/bin
Create data/db folder in C:\
$ mongod
New Terminal: navigate to C:\Program Files\MongoDB\Server\3.6\bin
$ mongo (see connection established)
Yeoman.io – http://yeoman.io/ - easily generate starter templates
npm install -g yo
Install generator http://yeoman.io/generators/
gulp-angular https://github.com/swiip/generator-gulp-angular
$ npm install -g yo gulp bower
$ npm install -g generator-gulp-angular
$ mkdir my-new-project && cd $_
$ yo gulp-angular (select desired technologies (i.e. UI Router, Bootstrap, Angular UI BS, CSS - NO Saas, Babel)
Create "front-end" folder
Install Generator in front-end folder
yo gulp-angular my-message-front (Make initialization selections)
$ gulp
$ gulp serve (should launch browser)
Set Git Repository to create snapshots
$ git init
https://help.github.com/articles/setting-your-username-in-git/
$ git config user.name "YOUR_USERNAME"
https://help.github.com/articles/setting-your-email-in-git/#platform-windows
$ git config user.email "email@example.com"
Create first commit
$ git add .
$ git commit -m "Initial Commit"
Create "back-end" folder
$ npm init
name: (back-end) my-message-backend
$ npm install express –save
Set Git Repository
$ git init | $ git config user.name "USERNAME“ | $ git config user.email "email"
$ git add . | $ git commit –m "Initial Commit"
Develop Message Board App in front-end folder
Explore Folders & Files in app folder
Make Angular Post Form
Edit main.html (just keep navigation)
Add bootstrap panel panel-default | panel-heading | panel-body
Add textarea and span with button
Add button click functionality using Angular controller in main.controller.js
Controller: bind variables and function to view  separate script from layout
Add function postMessage () {}
Button: <span ng-click="main.postMessage()"> Post </span>
Create Post Endpoint with Express.js in back-end folder
Create server.js
var express | var app | var server
$ node server.js
Create app.post
Install in Chrome: Postman (so that we can easily test)
http://localhost:5000/api/message  undefined
Install body parser plug-in
$ npm install body-parser -save
var bodyParser = require('body-parser'); | app.use(bodyParser.json());
$ node server.js
Send post from Angular to Endpoint
Inject $http
CORES = Cross-Origin Resource Sharing with Express … custom middleware
ng-model angular directive
Save to Mongo to Endpoint using official MongoDb driver
Using Terminal in back-end folder
$ npm install mongodb
Using Terminal in bin folder of MongoDB C:\Program Files\MongoDB\Server\3.4\bin
$ mongod
Using Terminal in back-end folder
$ node server.js
Write to MongoDB
database.collection('messages').insertOne(req.body); // most likely will get error ... use mongoose (see below)
Using Terminal in bin folder of MongoDB
$ mongo (to get access to mongo shell)
$ db.messages.find()
Display Messages
Switch to Mongoose with NPM in back-end folder
$ npm install mongoose -save
Update server.js code
Need to create model to save message using JS object
Create message list endpoint with Express.js
Create message list view in Angular.js in main.controller.js in front-folder
Use ng-repeat main.html to display individual message posts
Add "Refresh Messages" functionality in main.html
How to Submit
Create a screecast that shows that new posts are added to the Mongo Database and that clicking on the "Refresh Messages" button displays all of the messages stored in the database on the front-end page below the Post element.
(Optional) Submit zip file of "front-end" and "back-end" folders and their respective files.
Project Option ONLY for students who can not install the needed initial project code libraries (check in with me and get okay to make use of this option :)
- Extend Ex5 (Node + Express) to Add Live Chat
  - Review Lynda videos in Week 10: http://aspoerri.comminfo.rutgers.edu/Teaching/WebProg/Lectures.html#week10
    - Chapters: Using APIs and HTTP Verbs + Creating a Live Chat
  - Make sure to use Bootstrap 4
  - Post project to GitHub and submit URL
  - Create screencast (using screencast.com) of Live Chat functionality and submit URL