559 WebProg Course Site

Exercises & Project for Web Programming

On-campus and Online

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

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 and shows how radio and checkboxes can control which categorical markers are shown and what is shown in a marker's info window in the two maps.
  • setTimeout function: 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 Requirement for Students who took MI 550 InfoTech in Fall 2018:
  • Create Second Responsive Page that has a (very) different responsive layout than the first page and describe in the opening paragraph the layout requirements.
  • Add Three Bootstrap Features of your choice that have not been required so far and list them in the second paragraph.
  • 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
  • The text that appears based this.props.children needs to include id of comment, which is stored in comment object in comments array.
  • 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 5 and Step 11 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 & 12 Handouts which contains useful reminders and hints.
  • Make sure to install the needed code plugins using Node Manager in the Terminal:
  • $ npm install --save express
  • Customize Files
  • Building on the Lynda files, you will need to customize all the relevant files (.js and .pug 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 items.json structure and in general replace “speaker” with “item”, 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 Item page.
  • Responsive layout
  • Use Bootstrap 4: you need to convert the provided Bootstrap 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 items page that shows all items, the image and video are shown in two column layout for display sizes greater than sm. Further, title / location is shown above the image & video pair and the "category" of the item below image & video pair (as shown in the screencast mentioned below).
  • On the item page for a specific item, as specified by the id, the image needs to be at least 800px wide and the title / location above image and the text info needs to be below it.
  • 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 All Items / Individual Item pages
  • Add property "videoEmbed" to data JSON file for each item 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>, which needs to specify in format used by Pug.
  • Embed Google Map with Marker and Specified Zoom level
  • In .pug file that controls individual item page, use YOUR Google Maps API Key and the Pug Google Map mixin to embed a map with a marker related to location of item and set a zoom level.
  • The lat and long / location info needs to be included in the data JSON file (and the Google Geocoder does not need to be used :) so that it can be incorporated in the Pug mixin that emdeds the Google Map.
  • The zoom level needs to be set so that the whole area covered by items is visible.
  • How to Submit
  • Create ZIP file that contains the "public" and "server" folders and their subfolders.
  • Submit ZIP file.
  • Screencast of the responsive layout of the site using Node.js and Express.js to display the contents of JSON data file ("highlight(s)" mentioned are equivalent to "item(s)" and you can ignore reference to GitHub :)

    • Term Project

    Option 1 - Extend Ex5 (Node + Express) - Show items grouped by category or specific category.

    • Week 14 Lecture covers the key steps of creating the routes, ItemsService methods, the views and its PUG files so that items can be shown based on categories.
    • Requirements:
    • Add Categories Dropdown to Boostrap 4 navigation structure: All Categories | Listing of unique categories.
    • Create All Categories page that displays the items grouped by category and the categories are alphabetically sorted.
    • The categories are displayed as headings and then below and visually indented the related items, showing a title and below the image and summary information, which flows around the image.
    • Create Individual Category page that displays the items associated with the selected category.
    • The selected category is displayed as heading and then below and visually indented the related items, showing a title and below the image and related map with marker & specified zoom. The image and map are part of a two column responsive layout for display sizes greater than sm.
    • Detailed Instructions and Tips:
    • header.pug
    • Add pulldown for All Categories | Individual Categories
      Use a(href=`/categories/${item.category}`)
      => Use each item in categoryNames to iterate through categories
      => Need to define categoryNames in index.js as local variable.
    • server/index.js
    • res.locals.categoryNames = categories;
        => Need to compute categories => itemService.getCategories();
    • routes/index.js
    • const categoriesRoute = require('./categories');
      router.use('/categories', categoriesRoute(param));
      => Need to create “categories” folder in “routes” folder
    • routes/categories/index.js
    • Copy index.js from “items” folder and customize: item(s) => categories
    • router.get('/' … promises.push(itemService.getCategories());
      return res.render('categories'
      itemslist => categorieslist
    • router.get('/:category' …
      promises.push(itemService.getCategory(req.params.category));
      return res.render('categories/category',
      itemslist => categoryitemslist
    • services/ItemService.js
    • Create getCategories and getCategory methods.
    • getCategories want unique and sorted categories
    • Define categories array and Iterate through data
    • const foundCategory = categories.find((itemCategory) => {
         return itemCategory.category === data[i].category; });
    • if (!foundCategory) { … categories.push(obj with category & categoryItems)
      else { … foundCategory.categoryItems.push
    • categories.sort((a, b) => (a.category > b.category) ? 1 : -1);
    • getCategory want all items with specified category
    • const categoryItems = data.filter((item) => {
         return item.category === category });
    • views and PUG files: need to create “categories” folder and “category” subfolder
    • Copy & paste index.pug files from “items” / “detail” folders and customize.
    • views/categories/index.pug iterate through categories and their items
    • each categoryObj in categorieslist
         each categoryItem in categoryObj.categoryItems
    • views/categories/category/ index.pug iterate through items
    • each item in categoryitemslist
    • Want to show first category name … how?
    • Need to modify what is returned by getCategory … want categoryObj
    • Need to modify index.pug file (hint: similar approach as for All Categories)
    • How to Submit
    • Create ZIP file that contains the "public" and "server" folders and their subfolders.
    • Submit ZIP file.

    Option 2 - 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.