Summer 2021 — Schedule

Tentative class schedule (may be updated without prior notice) How are you feeling?   
Date Meet Topics and Handouts Content / Web Resources Assignments In-Class Exercises
Mon
05/24
 1 Class overview
Responsibilities
Intro to web app development
Wikipedia: Programming languages used in most popular websites

IEEE Spectrum: The 2020 Top Programming Languages
  Activity: The purposes of website
(no submission)

Activity: Check-in
(no submission)
2 Web software model MVC Overview   Activity: "Thing" in the world and "Object" in web app
(no submission)


To do:
  • Form a team of 2 (you may talk to your peers in class, during group activities, outside of class, via discussion board, or through Search for Teammates)
  • Decide on a project concept
Tue
05/25
 3 Web software model

(Read on your own; we'll discuss through activity)
Web app and usability
  • Principles
  • Mental models
  • Revenue and excise tasks
  • Usability evaluation criteria
UI-things-to-consider
GSA Section 508
CSIAC 508 Compliance and Accessibility Information
  Activity: "Thing" in the world and "Object" in web app
(no submission)

URLs for usability discussion
Usability evaluation checklist
4 (Read on your own; we'll discuss through activity)
Web design
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: For Summer 2021, there are two web server options. You may choose to host your app
  • Locally using XAMPP (simple but may limit your skill and experience)
  • Publicly on GCP (highly encouraged - this can help expand your skill and experience; please expect troubleshooting as it requires (a lot of) setting and configuration, support PHP and Angular)
Client-side software
(require: your laptop with code editor and a web server, every class meeting)
Wed
05/26
 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 05/26 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, Overview
Responsive design
    Example:
flex layout
grid layout

POTD 1: Static web page
There are two versions; please do only one, choose either "A" or "B" (submit to Collab by 05/27 10:30am, no late submission, no extension)
Thur
05/27
 7 More responsive design,
CSS and Bootstrap
CDN: CSS bootstrap
get bootstrap
  Activity: Style a page with CSS and bootstrap
(no submission)
[sample solution]
8 JavaScript: 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):
POTD 2:Get started with JS
(submit to Collab by 05/28 10:30am, no late submission, no extension)
Fri
05/28
 9 JavaScript:     Examples:
Object: BOM and DOM: Events: Activity: DOM manipulation
(no submission)
[sample solution 1, sample solution 2]
10  JavasScript:     Examples: Activity: Form handling
(no submission)
Mon
05/31
  Memorial Day Holiday, no class
Server-side software
(require: your laptop with code editor and a web server, every class meeting)
Tue
06/01
 11 JavasScript: (wrap-up)     Activity: Form handling
(no submission)
[sample solution]
12  Back end development and HTTP request handling

PHP: Overview, basic instructions, arrays, control structures, functions
PHP Editors
Debugging PHP
W3 PHP exercises
  Example: get-started.php (text version)

Activity: Get started with PHP
(no submission)
[sample solution]

PHP deployment (XAMPP)
PHP deployment (GCP)
Wed
06/02
 13 PHP: File processing (CSV, JSON, XML) W3C XML
XML Validator
Google XML API
JSON reference
W3 JSON
Assignment 2: Client-side components due 06/02 by 10:30am (no extension) Examples:
14  PHP: Form handling,
server-side input validation
    POTD 3: Form handling
(submit to Collab by 06/03 10:30am, no late submission, no extension)
[sample solution]
Thur
06/03
 15 PHP: State handling with form hidden inputs, URL rewriting     Activity: State maintenance with hidden input and URL rewriting (run) (no submission)
[sample solution]
16  PHP: State handling with cookies     POTD 4: State handling with cookies (run)
(submit to Collab by 06/04 10:30am, no late submission, no extension)
[sample solution]
Fri
06/04
Drop deadline 06/04
 17 PHP: State handling with Sessions     Activity: State handling with session (run)
(no submission)
[sample solution]
18  PHP: Mail service     Activity: Mail service
(no submission)
[Sample solutions: library notification (text version), contact us]

To do:
Sat
06/05
 19 PHP and database
additional note
Getting started with MySQL

Intro to SQL commands (Thanks to Professor Nada Basit)

Additional resources (borrowed from Fall 2020, CS 4750): Basic SQL, aggregates, joins, subqueries, quantifiers
  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     Prevent SQL injection: template [sample run: bad, good]

Activity: Database programming
(no submission)
[sample solutions: DB library notification, DB myTodo, DB basic]

To do:
Asynchronous programming and Front-end framework
(require: your laptop with code editor and a web server, every class meeting)
Mon
06/07
 21 Asynchronous programming

Angular: Overview, component, template
Node.js
Angular documentation
(we will use Angular 11)
  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: Module and component
(no submission)

Activity: Data model, data binding, and directive
(no submission)

[Combined activities: sample solution]
Tue
06/08
 23 Angular: Form and input validation      
24  Angular: Form and input validation     Activity: Angular form and input validation
(no submission)
[sample solution]
Wed
06/09
 25 Angular: HTTP and backend Dealing with CORS issue Assignment 3: Server-side components due 06/09 by 10:30am (no extension)  
26  Angular: HTTP, service, and backend     POTD 5: Angular and backend component
Please complete and submit at least one of the following options: (submit to Collab by 06/10, 10:30am, no late submission, no extension)
[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
06/10
 27 Ajax: Overview,
Loading data from HTML, XML, JSON
W3C XML
XML Validator
Google XML API
JSON reference
W3 JSON
W3 AJAX
  Example: Load static data
28  Ajax: Interacting with backend components Dealing with CORS issue   Activity: Ajax and backend component
(no submission)
[sample solution]
Wrap-up
Fri
06/11
 29 Course wrap-up and final exam guide
No class meeting, Q&A, Office hours on demand
30  Work on project
No class meeting, Q&A, Office hours on demand
Sat
06/12
 31 Work on project
No class meeting, Q&A, Office hours on demand


Final Exam (please refer to Course wrap-up and final exam guide for time and detail)
(please refer to the Summer Session for final exam schedule)
32 
Mon
06/14
 33 Work on project
No class meeting, Q&A, Office hours on demand
34 
Tue
06/15
 35 Work on project
No class meeting, Q&A, Office hours on demand
36 
Wed
06/16
 37 Showtime!!
No class meeting

To enter the competition, please submit the form https://forms.office.com/r/EgkDc6z0Fr. (see the Showtime page for details)


Best usable project: Coolest project:
Assignment 4: Final deliverable (frontend and backend) due 06/16 by 10:30am (no late submission, no extension) — remember to submit the reflection and peer evaluation Sample projects from Spring 2021 (consent received)
Best usable project: Coolest project:
38 
Thur
06/17
  Final Exam (please refer to Course wrap-up and final exam guide for time and detail)
(please refer to the Summer Session for final exam schedule)


Free day!! (please refer to our course discussion and final exam vote)

Top
Copyright © 2021 Upsorn Praphamontripong

Released under the Creative Commons License CC-BY-NC-SA 4.0 license.

Last updated 2021-06-12 14:34