Exercises & Project for Web Programming

On-campus and Online

Discussions: Due Week 12 | Week 14

Quizzes: Due Week 2 | Week 4 | Week 6 | Week 8 => 9 | 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 (Virtual) MeetUp or Webinar(5% of Course Grade) - Week 14
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 9
Quiz 5: Single Page Application using Back-End Framework to Exchange Data - Week 12
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 “Left Sidebar” Layout:
Click on “Left Sidebar” button will create “left 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
Make sure to use import the Google Map Libraries in a dynamic way, called Dynamic Library Import.
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 5
The provided step-by-step files and resources linked to are using Bootstrap 4 and you will need to "port them" to Bootstrap 5 using the resources listed in the Readings in Week 4 and 5 on the Lectures page.
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 or After:
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.
Add support for xxl display option in your responsive layout using Bootstrap 5.
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 LinkedIn Learning course Learning React in Week 8 that uses React v17. In Week 8, React v18 and its key concepts are reviewed and the LinkedIn Learning Ex4 starter files have been "ported" to React v18 and are discussed in detail in Week 8 and Week 9 Lecture / Labs. You need to study in detail the code provided in Canvas > Files > week 8 / week 9 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 in ex4 folder in terminal: npx create-react-app bulletin-board
Previously in 2021 and will not use in 2022: npm install -g create-react-app
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 which contains useful reminders and hints.
Building on the exercise files provided by the LinkedIn Learning course and "ported" to React v18 can be accessed in Canvas > Files > week 8 > start are our 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
Secify state for nextCommentId
Add comment obj to comments array, which is state of Note
Create Comment component:
The text that appears based on 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 using {comments.map(eachComment)}
To be able to specify input to addComment
Remove comments from a note
Add Delete button to Comment component
Specify remove function: onRemoveComment(id)
comments.filter(comment => comment.id !== id)
Need to update state of comments array
Recap: Comment.remove calls
Note props "onRemoveComment" and it calls
In Note component:
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 (as single files and NOT as ZIP file)
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 created in Chapter 4 and Step 8 (Download ZIP file) in the LinkedIn Learning course Building a Website with Node.js and Express.js (2020) in Week 11 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.
Create ex5 folder and extract Chapter 4 and Step 8 (Download ZIP file) into this folder.
In ex5 folder, make sure to install the needed code plugins using Node Manager in the Terminal:
$ npm install express
$ npm install -D eslint
$ npm init @eslint/config (or previously: $ npx eslint --init)
Check syntax + Find + Enforce | CommonJS | None (no react) | No Typescript | Deselect Browser + Select Node | Follow Guide Style: AirBnb | JSON config file
$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier
$ npm install -D nodemon
$ npm install ejs
$ npm install cookie-session
Customize Files
Building on the LinkedIn Learning files, you will need to customize all the relevant files (.js and .ejs 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.
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 .ejs file that controls individual item page, use YOUR Google Maps API Key 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 you can embed 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 files (i.e. package.json and server.js etc) and folders (except node_modules folder) in ex5 folder.
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 :)
Extra Credit: Create functionality so that one can display highlights grouped by category and/or specific category.

Term Project (host on Google Cloud)

Full Stack Development – Create Web Application using React.js, Node.js and Expess.js to Connect to MongoDB Database (20% of Course Grade)

We will create a web application that uses React.js, Node.js and Express.js to connect to a MongoBD Database, first on your computer and then by hosting the application online using Google Cloud. We will use the LinkedIn Learning course React: Creating and Hosting a Full-Stack Site in Week 12 and study its code in detail so that we can host such an application on Google Cloud server.
Host on Your Local Computer:
Create React Front End.
Create Node / Express Back End.
Set Up MongoDB.
Before running the project app (Ch4_07), make sure to initialize "my-blog" database as covered in the LinkedIn course we are using to create the project: Installing MongoDB.
Initialize my-blog database using 2nd terminal: 1) $ mongo 2) $ use my-blog 3) insert articles 4) db.articles.find({})
Connect Front and Back Ends.
Before running the project app (Ch4_07), make sure to have in the "package.json" file in "my-blog" folder the following statement after "private": true, "proxy": "http://localhost:8000/", as covered in: Adding Fetch to pages.
Add Firebase Authentication
Host MongoDB database:
Create Project on MongoDB Atlas.
Build Database (Free) and Initialize it.
Network Access: make sure to access from anywhere enabled
Project > Data Services > Security > Network Access > Add IP Address > Add "Allow access from anywhere (0.0.0.0/0)" to your Network Permission List.
Host on Google Cloud Server:
Prepare app for release.
Create Your Google Cloud project and upload files.
Submit: URL of your application on Google Cloud.