Summer 2020 — Schedule

Tentative class schedule (may be updated without prior notice)
Date Meet Topics and Handouts Content / Web Resources Assignments In-Class Exercises
Mon
07/13
 1 Class overview
Responsibilities
Intro to web app development
Wikipedia: Programming languages used in most popular websites   Activity: The purposes of website
(no submission)

Activity: Check-in
(no submission)

Activity: "Thing" in the world and "Object" in web app
(no submission)
2 Web software model MVC Overview   To do:
  • Form a team of 2
  • Decide on a project concept
Tue
07/14
 3 Web software model (continue)
Web app and usability (Read on your own; we'll discuss through activity)
  • Principles
  • Mental models
  • Revenue and excise tasks
  • Usability evaluation criteria
UI-things-to-consider
GSA Section 508
CSIAC 508 Compliance and Accessibility Information
  URLs for usability discussion
4 Web design (Read on your own; we'll discuss through activity) Tips for taglines
Example taglines

IDE: Eclipse WTP, Aptana IDE, NetBeans, IntelliJ, Sublime
FTP: Firezilla , Cyberduck
Wireframes: balsamiq
  Activity: Planning website, design web page
(no submission)

To do:
Client-side software
(require: your laptop with code editor and a web server, every class meeting)
Wed
07/15
 5 Intro to HTML and CSS

Additional resources:
W3 Web Schools
HTML Validator

Color names
CSS Validator
CSS Properties
Assignment 1: Project proposal and UI design due 07/15 by 10:30am (no extension) XAMPP setup
Basic web deployment (local and public) (Please try to set up development and deployment environment before class. The class discussion will be more effective and enjoyable if your environment is readily available.)
6 More CSS,
Responsive design
    In-class1: Static web page (HTML and CSS)
There are two versions; please do only one, choose either "A" or "B") (submit to Collab by 11:59pm) —extended to 16-July 11:59pm
Thur
07/16
 7 More responsive design,
CSS and Bootstrap
CDN: CSS bootstrap
get bootstrap
  Example: Flex layout

Activity: Style a page with CSS and bootstrap
(no submission)
[sample solution]
8 JavaScript: Basic instructions, arrays, control structures,
functions, methods and objects
W3 JS Reference
MDN JS Reference
JS Visualizer (useful for tracing)
CDN: JS bootstrap
JS cheat sheet (by Nick Schäferhoff)
  Examples (please view page source): Activity: Get started with JS
(no submission)
Fri
07/17
 9 JavaScript: BOM and DOM,
Event
    Examples:
BOM and DOM: Events: Activity: DOM manipulation
(no submission)
10  JavasScript: Form enhancement,
input validation
    Examples: in-class2: Dynamic web page
(submit to Collab by 11:59pm)
Server-side software
(require: your laptop with code editor and a web server, every class meeting)
Mon
07/20
 11 Back end development and HTTP request handling

PHP: Overview, basic instructions, arrays, control structures, functions
PHP Editors
Debugging PHP
W3 PHP exercises
  in-class3: Get started with PHP
(submit to Collab by 11:59pm) (submit to Collab by 07/21, 10:30am)
[sample solution]

PHP deployment (XAMPP)
PHP deployment (GCP)
12  PHP: File processing (CSV, JSON, XML) W3C XML
XML Validator
Google XML API
JSON reference
W3 JSON
   
Tue
07/21
 13 PHP: File processing (CSV, JSON, XML) Additional resources:     Examples: Sample code (text version):
14  PHP: Form handling,
server-side input validation
    Activity: Form handling
(no submission)
[sample solution]

Activity: Form handling and file processing
(no submission)
[sample solution]
Wed
07/22
 15 PHP: State handling with form hidden inputs, URL rewriting   Assignment 2: Client-side components due 07/22 by 10:30am (no extension) template for hidden-input-and-URL-rewriting
16  PHP: State handling with cookies (from slide 12)     Examples: Activity: State handling with cookies (run) (no submission)
[sample solution]
Thur
07/23
 17 PHP: State handling with Sessions     Activity:State handling with session (run) (no submission)
[sample solution]
18  PHP: Mail service     Activity: Contact us
(no submission)
[sample solution]

To do:
Fri
07/24
 19 PHP and database Getting started with MySQL

Intro to SQL commands (Thanks to Professor Nada Basit)

Additional resources (borrowed from CS 4750): Basic SQL, aggregates, joins
  in-class4: Form and database
(submit to Collab by 07/25, 10:30pm)
Note: You are not required to use PDO. You may use PDO, MySQLi, or MySQL (of course, the syntax and implementation will be slightly different). MySQLi is a replacement for the MySQL functions, with object-oriented and procedural versions. PDO (PHP Data Objects) is a database abstraction layer providing flexibility for many database engines (and thus is recommended over MySQLi).

DB setup (XAMPP)
DB setup (GCP)
Connecting PHP and DB
20  PHP and database with MVC pattern (note)     Activity: Form and database with MVC pattern
[sample solution]

To do:
Asynchronous programming and Front-end framework
(require: your laptop with code editor and a web server, every class meeting)
Mon
07/27
 21 Asynchronous programming
Angular: Overview, component, template
Node.js
Angular documentation
(we will use Angular 10)
  Angular setup
(Please try to setup environment for Angular and deploy an Angular default example before class. The class discussion will be more effective and enjoyable if your environment is readily available.)

Angular app deployment
22  Angular: Data binding, directive     Activity: Get started with Angular
(no submission)
[sample solution]
Tue
07/28
 23 Angular: Data binding and directive (continue), Applying MVC     Form example
24  Angular: Form and validation,     Activity: Angular form
(no submission)
[sample solution]
Wed
07/29
 25 Angular: HTTP and backend Dealing with CORS issue Assignment 3: Server-side components due 07/29 by 10:30am (no extension)  
26  Angular: HTTP, service, and backend     in-class5: Angular and backend component
(submit to Collab by 07/30, 10:30am)
[sample solution: ng-http, ng-http-service]
(Note: the template and sample solution contain only the files we modified/wrote. Put the Angular code in your Angular project/app — you still need the other files in your Angular project; put the PHP code in your PHP web server -- e.g., XAMPP/htdocs)
Thur
07/30
 27 Ajax: Overview,
Loading data from HTML, XML, JSON
W3C XML
XML Validator
Google XML API
JSON reference
W3 JSON
W3 AJAX
  Activity: Get started with Ajax
(no submission)
[sample solution]
28  Ajax: Interacting with backend components Dealing with CORS issue   Activity: Ajax and backend component
(no submission)
[sample solution]
Wrap-up
Fri
07/31
 29 Course wrap-up and final exam guide
Q&A, Office hours on demand
     
30  Work on project
Q&A, Office hours on demand
     
Mon
08/03
 31 Final Exam (please refer to Course wrap-up and final exam guide for time and detail)
32 
Tue
08/04
 33 Work on project
Q&A, Office hours on demand
34 
Wed
08/05
 35 Work on project
Q&A, Office hours on demand
36 
Thur
08/06
 37 Showtime!! (time and detail: TBD)
Best usable project:
  • Prollab, by Katie Fogarty and Manana Metreveli
Coolest project:
  • Jeopardy online, by Ben Barrett and Thomas Kehoe
Assignment 4: Final deliverable (frontend and backend) due 08/06 by 10:30am (no late submission, no extension)  
38 

Top