CS4640 - WebPL

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
Mon 05/23	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)
Tue 05/24	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 Planning website Creating website content Layout and design Designing navigation Data entry selection Promoting website	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: Set up development and deployment environment. Refer to XAMPP setup and Basic web deployment (local and public) for guidelines. Work on your project proposal and UI design 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: HTML: Overview, slides CSS: Overview	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.)
Wed 05/25	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]
Thur 05/26	8	JavaScript: Basic instructions, arrays, control structures Functions, methods and objects	W3 JS Reference MDN JS Reference JS Visualizer (useful for tracing) JS cheat sheet (by Nick Schäferhoff)		Examples (please view page source): js-array.html js-decision.html js-loop.html js-var.html js-ex.html function.html arrow-function.html function-object.html POTD 2:Get started with JS (due 05/27, 1pm EST, no late submission, no extension)
Fri 05/27	9	JavaScript: Functions, methods and objects BOM and DOM Event			Examples: Object: js-object.js BOM and DOM: fob-ex.html add-rows-to-table.html Events: bind-event-lazy.html bind-event-tradition.html bind-event-modern.html bind-event-with-param.html bind-event-support-multiple-browsers.html event-propagation.html Activity: DOM manipulation (no submission) [sample solution 1, sample solution 2]
Fri 05/27	10	JavaScript: Form enhancement Client-side input validation			Examples: show-password.html disable-button.html validate-int.html validate-form-1.html validate-form-2.html validate-form-3.html
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: Form enhancement Client-side input validation			Activity: Form handling (no submission) [sample solution]
Tue 05/31	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: sample-data.txt php-file-processing.php (text version) read-write-csv-file.php (text version), sample-data.csv work-with-xml.php (text version), friends.xml, friends-2.xml work-with-json.php (text version) read-write-json.php (text version), friends.json
Wed 06/01	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: Set up a database environment either locally (DB setup (XAMPP)) or on the cloud (DB setup (GCP))
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: Angular setup
	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: Option 1: Angular HTTP (use the standard Angular HTTP service) Option 2: Angular service and HTTP (implement your own service that utilizes Angular HTTP service) (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
Mon 06/13	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
Tue 06/14	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
Wed 06/15	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
Thur 06/16	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: Moti Quest by Jason Lee and Christian Ro Coolest project: SecretPortal by Franklin Glance		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
Fri 06/17	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)

Summer 2022 — Schedule