Summer 2022 — 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/23
 1 Get familiar with our course
Let's set expectations
Wikipedia: Programming languages used in most popular websites

IEEE Spectrum: The 2021 Top Programming Languages
  Activity: The purposes of website

(no submission)

Activity: Check-in

(no submission)


Complete the get to know you form by 24-May-2022, 11:59pm EST
2 Intro to web app development     To do:
  • Form a team of 2 (max size = 3 members) [updated 23-May]

    (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/24
 3 Web software model MVC Overview   Activity: "Thing" in the world and "Object" in web app

(no submission)

4 (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

(Read on your own; we'll discuss through activity)
Web design
Top 10 web design mistakes
GSA Section 508
CSIAC 508 Compliance and Accessibility Information
Tips for taglines
Example taglines

Wireframes: balsamiq
  URLs for usability discussion
Usability evaluation checklist

Activity: Planning website, design web page

(no submission)


To do: For Summer 2022, there are three 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)

  • Publicly on https://cs4640.cs.virginia.edu

    Refer to https://cs4640.cs.virginia.edu/resources/cs-server.html for connection information

    Thanks to Prof. Hott for giving us access to cs4640.cs.virginia.edu server.

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

Additional resources:
W3 Web Schools
HTML Validator

Color names
CSS Validator
CSS Properties

IDE: Eclipse WTP, Aptana IDE, NetBeans, IntelliJ, Sublime
FTP: Firezilla , Cyberduck
Assignment 1: Project proposal and UI design due 05/25, 1pm EST (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
  POTD 1: Static web page (HTML and CSS)
(due 05/26, 1pm EST, no late submission, no extension)

Example: Static page (B)
[sample solution]
Thur
05/26
 7 More responsive design,
CSS and 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)
JS cheat sheet (by Nick Schäferhoff)
  Examples (please view page source):
POTD 2:Get started with JS
(due 05/27, 1pm EST, no late submission, no extension)
Fri
05/27
 9 JavaScript:     Examples:
Object: BOM and DOM: Events: Activity: DOM manipulation

(no submission)

[sample solution 1, sample solution 2]
10  JavaScript:     Examples:
Mon
05/30
  Memorial Day Holiday, no class
Server-side software
(require: your laptop with code editor and a web server, every class meeting)
Tue
05/31
 11 JavaScript:     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
  Activity: Get started with PHP

(no submission)
(require: PHP-enabled web server)


XAMPP setup
PHP deployment (XAMPP)
PHP deployment (GCP)
Wed
06/01
 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/01, 1pm EST (no extension) Activity: Get started with PHP

(no submission, wrap up)

[sample solution]


Examples:
14  PHP: Form handling,
server-side input validation
    POTD 3:Form handling
(due 06/02, 1pm, no late submission, no extension)
[sample solution]
Thur
06/02
(Class meets virtually; Zoom link in Collab/Online meetings)
 15 PHP: State handling with form hidden inputs, URL rewriting     Activity: State maintenance (hidden input and URL rewriting) (sample run)

(no submission)

[sample solution]
16  PHP: State handling with cookies     POTD 4: State maintenance (cookies) (sample run)
(due 06/03, 1pm EST, no late submission, no extension)
[sample solution]
Fri
06/03
Drop deadline 06/03
(Class meets virtually; Zoom link in Collab/Online meetings)
 17 PHP: State handling with Sessions     Activity: State maintenance (session) (sample run)

(no submission)

[sample solution]
18  PHP: State handling with Sessions

Get started with database (if time allows)
    To do:
Mon
06/06
(Class meets virtually; Zoom link in Collab/Online meetings)
 19 PHP and database
additional note
Getting started with MySQL

Intro to SQL commands (Thanks to Professor Nada Basit)

Additional resources (borrowed from Spring 2022, 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

Prevent SQL injection: template [sample run: bad, good]

Activity: Get started with DB programming

(no submission)

Activity: Database programming

(no submission) — [our work in progress]

[sample solution]

To do:
20  PHP and database    
Asynchronous programming and Front-end framework
(require: your laptop with code editor and a web server, every class meeting)
Tue
06/07
(Class meets virtually; Zoom link in Collab/Online meetings)
 21 Asynchronous programming

Angular: Overview, component, template
Node.js
Angular documentation

(we will use Angular 13; if you choose to use Angular 14 which was released 2-June-2022, please remember to check the update)

TypeScript
  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.) We will also discuss issues/concerns and potential solutions in class.

Angular app deployment
22  Angular: Data binding, directive     Activity: Module and component

(no submission)

Activity: Data model, data binding, and directive

(no submission)


[work in progress]
[Combined activities: sample solution]
Wed
06/08
(Class meets in-person & virtually; Zoom link in Collab/Online meetings)
 23 Angular: Data binding, directive (continue), Form and input validation     Activity: Angular form and input validation
(no submission)
[sample solution]
24  Angular: Form and input validation    
Thur
06/09
(Class meets in-person & virtually; Zoom link in Collab/Online meetings)
 25 Angular: HTTP and backend Dealing with CORS issue Assignment 3: Server-side components due 06/09 06/11 1pm EST (no extension) POTD 5: Angular and backend component

Please complete and submit at least one of the following options:

(due 06/10, 1pm EST, no late submission, no extension)
[sample solution]
26  Angular: HTTP, service, and backend    
Fri
06/10 Withdrawal deadline 06/10
(Class meets in-person & virtually; Zoom link in Collab/Online meetings)
 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
Mon
06/13
 29 Course wrap-up and final exam guide
Course wrap-up, no new content — class meets virtually; Zoom link in Collab/Online meetings
30  Work on project
No class meeting, Q&A, Office hours on demand — drop by to discuss, use Zoom link in Collab
Tue
06/14
 31 Work on project
No class meeting, Q&A, Office hours on demand — drop by to discuss, use Zoom link in Collab
32 
Wed
06/15
 33 Work on project
No class meeting, Q&A, Office hours on demand — drop by to discuss, use Zoom link in Collab
34 
Thur
06/16
 35 Work on project
No class meeting, Q&A, Office hours on demand — drop by to discuss, use Zoom link in Collab
36 
Fri
06/17
 37 Showtime!!
No class meeting, Q&A, Office hours on demand — drop by to discuss, use Zoom link in Collab

Best usable project: Coolest project:
Assignment 4: Final deliverable (frontend and backend) due 06/17 by 1pm EST (no late submission, no extension) — remember to submit the reflection and peer evaluation
38 
Sat
06/18
FE 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)

Top
Copyright © 2022 Upsorn Praphamontripong

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

Last updated 2022-06-20 12:32