CIS 385 Programming for the Web

CIS 385-CN Programming for the Web

Course Description

In this project-based course, students gain an understanding of how to build a modern full-stack web
application using the MERN framework (MongoDB, Express, React and Node.js). Students also learn how
to deploy their web applications to Amazon AWS, a popular cloud hosting provider. Finally how the npm
package manager and third-party and open source modules can extend their web applications will be
covered. Collaboration is paramount to a successful product, website and/or mobile application. However,
students will be responsible for completing their own project/web application and submitting independent
assignments.

This hybrid course combines classroom and online sessions. In-class meeting dates will be announced.

This course was formerly CIS 395-CN Topics in Information Systems: Programming for the Web.

Recommended Textbooks
● Node.js, MongoDB and Angular Web Development: The Definitive Guide to Using the MEAN
Stack to Build Web Applications, Brad Daley, Caleb Daley and Brendan Daly, 2 nd Edition,
Addison-Wesley. [ISBN- 9780134655642]

Additional Reading
 Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node, 2 nd
Edition, APress. [ISBN- 9781484243916]
 http://speakingjs.com/es5/index.html
 https://exploringjs.com/es6/index.html

Software
 Visual Studio Code (https://code.visualstudio.com/)
 GitHub Desktop (https://desktop.github.com/ )

Prerequisites

 CIS 130-CN: Tools and Technologies of the Web

Learning Goals
The goals of this course are to:
 Understand the concepts behind HTML5, CSS and Javascript.
 Understand the concepts behind Bootstrap4.
 Understand the constructs of the latest version of Javascript - ES6.
 Understand the modules and templates in Javascript.
 Understand using the MongoDB database.
 Learn NodeJS and Express Frameworks.
 Learn ReactJS and React Routers.
 Build web applications using the MERN stack.
1
CIS 385 Programming for the Web

Evaluation
The student’s final grade will be determined as follows:
• 5 % Attendance
• 5 % Class Participation
• 60 % Assignments
• 30 % Final Project

Grading Scale
93%–100% = A
90%–92% = A-
85%–89% = B+
82%–84% = B
78%–81% = B-
75%–77% = C+
73%–74% = C
65%–72% = C-
0%–64% = F

Attendance
With few exceptions, classes will follow the same structure every week. Each three-hour class session
will typically include:
 Review/discussion of material from the previous week (10-20 minutes)
 Interactive lecture (1 hour): lectures will present content on each week’s topic and discussion of
assigned readings. Lecture slides will typically be posted the day before class
 A 10-15 minute break
 Small group discussion/ work time (1 hour): most weeks, you will be given time in class to discuss
course content and complete the assigned lab for the week

Late Work
Late assignments are not accepted without explicit permission from the instructor, and permission can
be granted only in the case of an emergency and in advance of the assignment due date. Late work
may be subject to a penalty in points.

Learning Groups
More information about learning groups will be provided by the instructor via the Canvas course site.

Academic Integrity at Northwestern

Students are required to comply with University regulations regarding academic integrity. If you are
in doubt about what constitutes academic dishonesty, speak with your instructor or graduate
coordinator before the assignment is due and/or examine the University Web site. Academic
dishonesty includes, but is not limited to, cheating on an exam, obtaining an unfair advantage, and
plagiarism (e.g., using material from readings without citing or copying another student's paper).
Failure to maintain academic integrity will result in a grade sanction, possibly as severe as failing
and being required to retake the course, and could lead to a suspension or expulsion from the
program. Further penalties may apply. For more information, visit
<www.sps.northwestern.edu/student/issues/academic_integrity.cfm>.
Plagiarism is one form of academic dishonesty. Students can familiarize themselves with the
definition and examples of plagiarism, by visiting <www.northwestern.edu/uacc/plagiar.html>. A
myriad of other sources can be found online.
Some assignments in this course may be required to be submitted through SafeAssign, a plagiarism
detection and education tool. You can find an explanation of the tool at

2
CIS 385 Programming for the Web

<http://wiki.safeassign.com/display/SAFE/How+Does+SafeAssign+Work>. In brief, SafeAssign

compares the submitted assignment to millions of documents in large databases. It then generates a
report showing the extent to which text within a paper is similar to pre-existing sources. The user can
see how or whether the flagged text is appropriately cited. SafeAssign also returns a percentage score,
indicating the percentage of the submitted paper that is similar or identical to pre-existing sources.
High scores are not necessarily bad, nor do they necessarily indicate plagiarism, since the score does
not take into account how or whether material is cited. If a paper consisted of one long quote that was
cited appropriately, it would score 100%. This would not be plagiarism, due to the appropriate
citation. However, submitting one long quote would probably be a poor paper. Low scores are not
necessarily good, nor do they necessarily indicate a lack of plagiarism. If a 50-page paper contained all
original material, except for one short quote that was not cited, it might score around 1%. But, not
citing a quotation is still plagiarism.
SafeAssign includes an option in which the student can submit a paper and see the resultant report
before submitting a final copy to the instructor. This ideally will help students better understand and
avoid plagiarism.

Other Processes and Policies

Please refer to your SPS student handbook at
<www.sps.northwestern.edu/grad/information/handbook.cfm> for additional course and program
processes and policies.

3
 Course Schedule

Important Note: Changes may occur to the syllabus at the instructor's discretion
.
Session 1 – Introduction to Web Development, Syllabus and HTML5 Basics
Learning Objectives
After this session, the student will be able to:
• Describe the foundation of web development.
• Describe the HTML5 elements, attributes and behaviors.

Course Content
Textbook Reading

Online Reading
 https://www.w3schools.com/html/html5_intro.asp

Lab 1 – Setting Environment

1. Set up various tools useful for web development (VS Code, GitHub, CodePen)

Assignment 1
See Assignment Section for details

Session 2 – Javascript Basics

Learning Objectives
After this session, the student will be able to:

• Describe the programming language of the web and html namely Javascript.
• Describe how Javascript can be used to change the html content.
• Describe how to use the Javascript console.

Course Content
Textbook Reading

Online Reading
 https://www.w3schools.com/js/default.asp

Assignment 2
See Assignment Section for details

Session 3 – Bootstrap4

Learning Objectives
After this session, the student will be able to:

 Describe the Bootstrap framework

 Describe the grids and containers concepts used by Bootstrap

4
  Describe the colors, buttons, badges, progress bars and other components

Course Content
Textbook Reading

Online Reading
 https://www.w3schools.com/bootstrap4/default.asp

Session 4 – Javascript Modules, Templates and JSON

Learning Objectives
After this session, the student will be able to:
• Explain JSON, data structures and validator.
• Explain the concepts of Javascript Modules.
• Explain the concepts of Templates, Lodash and Handlebars.
• Explain the concept of pure functions.

Course Content

Textbook Reading

Online Reading
 https://www.w3resource.com/JSON/introduction.php
 https://www.sitepoint.com/a-beginners-guide-to-handlebars/
 https://lodash.com/

Assignment 3
See Assignment Section for details

Session 5 – Advanced Javascript and ES6

Learning Objectives
After this session, the student will be able to:

 Describe the various concepts in advanced Javascript.

 Describe Asynchronous Javascript.
 Describe the changes in ES6.

Course Content

Textbook Reading

Online Reading
 http://exploringjs.com/es6/index.html
 https://www.pluralsight.com/guides/introduction-to-asynchronous-javascript

5
Session 6 – MongoDB and Web Authentication

Learning Objectives
After this session, the student will be able to:

 Describe the various types of NoSQL Databases.

 Describe a Document Oriented Database.
 Create, Read, Update and Delete documents from MongoDB.
 Describe building a data model using Mongoose.
 Describe authentication approaches for web applications.

Course Content
Textbook Reading

○ None

Lab 2 – Setting MongoDB on your laptop

1. Setup MongoDB on laptop

2. Use tools to load data into MongoDB

Session 7 – NodeJS and Express

Learning Objectives
After this session, the student will be able to:

 Describe NodeJS which is a Javascript runtime engine.

 Describe npmjs the package manager.
 Describe the built in modules in NodeJS.
 Describe Express web framework.

Course Content
Textbook Reading
○ None

● Assignment 4
See Assignment Section for details

Session 8 – ReactJS Fundamentals

Learning Objectives
After this session, the student will be able to:

 Describe ReactJS, a Javascript library to build User Interfaces.

 Describe ReactJS States and JSX.
 Describe ReactJS Components.

Course Content
Textbook Reading

6
 ○ None

● Assignment 5
See Assignment Section for details

Session 9 – Advanced ReactJS

Learning Objectives
After this session, the student will be able to:
• Describe the event handling in React.
• Describe React Hooks and API Handling.

Course Content
Online Reading

Session 10 –Design Patterns

Learning Objectives
After this session, the student will be able to:
• Describe the various Design patterns in Web Development.
• Course Wrap-up

Course Content
Online Reading

7
Assignment 1: HTML5 Web Page
Session # 1
Due date Week 3
Due time 11:55pm (central time)
Points possible 100
Create an HTML page called index.html

In the HTML page,

 Set the title of the page as your name. FirstName LastName
 Include a paragraph. You are free to write any content in this paragraph.
Detailed
 Include a hyperlink to www.google.com
assignment
 Include a table with 2 rows and 2 columns.
description
Total 100 points

Formatting pdf (preferred), doc, or docx

File Naming Convention: [lastname][firstinitial]_[Assignment1] dot [file extension].
Submission
Example for a PDF document submitted by Joe Brown: BrownJ_Assignment1.pdf
Assignment ● A user requirements document (this will change from quarter to quarter)
attachments ● Grading rubric
Turnitin Requires Turnitin.

8
Assignment 2: Javascript
Session # 2
Due date Week 4
Due time 11:55pm (central time)
Points possible 100
Create a JavaScript file called Reverse.js that will do the following.
Write a function called ReveseString() that takes one argument.

You may assume that the argument is a string.

Detailed o Return the a string with all of the characters in reverse order.
assignment o For example: the string "reverse" will return "esrever".
description
Work on Javascript

Work on the Javascript on jsbin.com

Formatting pdf (preferred), doc, or docx

File Naming Convention: [lastname][firstinitial]_[Assignment2] dot [file extension]. Example for a
PDF document submitted by Joe Brown: BrownJ_Assignment2.pdf
Submission
Either a file upload of Reverse.js or a CodePen (remember to fork once you are done to get the public
url) or a saved jsbin.
Assignment ● Grading rubric
attachments
Turnitin Requires Turnitin.

Assignment 3: Bootstrap4 Page

Session # 3
Due date Week 5
Due time 11:55pm (central time)
Points possible 100
Detailed This assignment is mainly to create an html page using Bootstrap4.
assignment
description The HTML Page should have the following Bootstrap features:

Import Bootstrap CSS and JS using the CDN links

Jumbotron
Grid with 3 rows:
Row1 has two columns that are of equal width.
Row2 has two columns with one column 4 wide and the other column 8 wide.
9
 Row3 has one column.
Three buttons. Each button should be in a different color.
Three badges. Each badge should be in a different color.
Navigation Bar with 3 links.
Total 100 points

Formatting pdf (preferred), doc, or docx

File Naming Convention: [lastname][firstinitial]_[Assignment3] dot [file extension]. Example for a
PDF document submitted by Joe Brown: BrownJ_Assignment3.pdf

You can submit by using one from this list:

Submission  Netlify URL
 codepen.io url
 jsbin.com url
 File upload of html page.

Assignment ● A sample relation instance (this will change from quarter to quarter)
attachments ● Grading rubric
Turnitin Requires Turnitin.

Assignment 4: Templates and Handlebars

Session # 4
Due date Week 6
Due time 11:55pm (central time)
Points possible 100

Please fork the codepen at

https://codepen.io/anilsaldanha/pen/WNbdWNZ

Modify the HTML and JS to display:

The display should show something like :

Detailed
assignment
description

Put your name instead of “Anil Saldanha”

Total 100 points

Formatting pdf (preferred), doc, or docx

File Naming Convention: [lastname][firstinitial]_[Assignment4] dot [file extension]. Example for a
Submission
PDF document submitted by Joe Brown: BrownJ_Assignment4.pdf
10
 ● A sample relation instance with functional dependencies defined (this will change from
Assignment
quarter to quarter)
attachments
● Grading rubric
Turnitin Requires Turnitin.

11
Final Group Project
Session # 10
Due date Week 10
Due time 11:55pm (central time)
Points possible 500
The final project is an opportunity for students to demonstrate their mastery of the course material by
applying Web Development to create a functional web application.

Expectations for the final project include:

● clearly defined goals and objectives.
● a well-executed, process-driven plan.
● the strength and depth of analysis that directly supports the goals and objectives.
● recommendations for future iterations of research based on findings.

Step 1:  Choose a project from the list below. This will be the topic for your final project.
- Bidding System
- Chat Application
- Web Application of your choice. (Get Instructor Approval)
Detailed Step 2: Develop the web application
assignment
description Bidding System
Create a web application that allows:
 Users to create items for bidding.
 Users to list items showing description and the highest bid.

Chat Application
Create an online web application that allows:
 Users to send messages in a chat room.
 Users to list chat rooms available.
Use ChatKit platform as the backend.

Total 500 points

Formatting pdf (preferred), doc, or docx

File Naming Convention: [lastname][firstinitial]_[FinalProject] dot [file extension]. Example for a
Submission
text document submitted by Joe Brown: BrownJ_FinalProject.pdf
Assignment ● Data Sources
attachments ● Grading rubric
Turnitin Requires Turnitin.

12