COMP519 Web Programming (2020-21)

Background

COMP519 is normally delivered via a combination of 3 lectures plus 2 practical session per week over about 10 weeks. Due to coronavirus pandemic, this form of delivery will not be possible in the academic year 2020-21. In particular, per University policy, module content not delivered via synchronous small-group teaching should be delivered asynchronously, that is, at a time of your choosing.

As this precludes synchronous online lectures, we will rely on self-guided study supported by on-campus and online practical sessions. The guide below indicates the order in which you should study the lecture material, watch the lecture videos, read the chapters in the recommended textbook and complete the practical exercises. Each week of self-study will require about 9 hours of your time.

It is assumed that you are already familar with the corresponding lecture material before you attempt to complete the practical worksheets, that is, you should follow the order of lectures and worksheet indicated in the guide below. In online and on-campus practical sessions you can ask questions about the practical worksheets for that week.

To access the videos you should first log in at https://stream.liv.ac.uk/ using your University/MWS account before following a link in the guide below. The content of the videos and PDF/HTML files may not always conincide 100% as corrections/improvements are sometimes made to those files after the delivery of a lecture and recording of the corresponding video.

The practical sessions assume familiarity with the departmental computer systems, in particular, the departmental Linux systems, basic concepts of access control, file transfer/synchronisation between a home PC and the departmental systems, and remote access to the departmental Linux systems. The first three practical sessions guide you through exercises that allow you to aquire or refresh related skills.

Study Guide

Below you find the study guide for COMP519. It's complete for Weeks 1 to 8, but Weeks 9 and 10 need a bit more work and will be updated later in the semester.

Lecture 1: Overview of COMP519
Lab Intro 1: Preparation for COMP519 Exercises, Labs, and Assignments
Lab Intro 2: Using the Departmental Linux Systems
Lab Intro 3: Access Control, Synchronisation and Remote Access
Lecture 2: HTML (Part 1): HTTP, HTML5, HTML Elements, HTML Characters
Practical 1: HTML (1)
Lecture 3: HTML (Part 2): Structure, Headings, Lists, Paragraphs, Div, Span, Hyperlinks
J. Niederst Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed). O'Reilly, 2018.
  • Chapter 4: Creating a Simple Web Page
  • Chapter 5: Marking Up Text
  • Chapter 6: Adding Links
Lecture 4: HTML (Part 3): Text, Images, Figures, Tables
Practical 2: HTML (2)
Lecture 5: Cascading Style Sheets (Part 1): Inline Styles
J. Niederst Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed). O'Reilly, 2018.
  • Chapter 11: Introducing Cascading Style Sheets
  • Chapter 12: Formatting Text
  • Chapter 13: Colors and Backgrounds
  • Chapter 14: Thinking Inside the Box
Lecture 6: Cascading Style Sheets (Part 2): Document Style Sheets
J. Niederst Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed). O'Reilly, 2018.
  • Chapter 11: Introducing Cascading Style Sheets
  • Chapter 12: Formatting Text
  • Chapter 13: Colors and Backgrounds
  • Chapter 19: More CSS Techniques (Styling Tables)
Practical 3: Cascading Style Sheets (1)
Lecture 7: Cascading Style Sheets (Part 3): Document and External Style Sheets
Lecture 8: Cascading Style Sheets (Part 4): Layout
J. Niederst Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed). O'Reilly, 2018.
  • Chapter 15: Floating and Positioning
  • Chapter 16: CSS Layout with Flexbox and Grid
  • Chapter 17: Responsive Web Design

Chris Coyier: A Complete Guide to Flexbox. CSS-Tricks. 28 September 2017. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (accessed 18 October 2017).

Chris House: A Complete Guide to Grid. CSS-Tricks. 13 September 2017. https://css-tricks.com/snippets/css/complete-guide-grid/ (accessed 18 October 2017).

Mozilla and individual contributors: CSS Grid Layout. MDN Web Docs. 5 October 2017. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout (accessed 19 October 2017).

Practical 4: Cascading Style Sheets (2)
Lecture 9: HTML (Part 4): Forms
Practical 5: HTML (3)
Lecture 10: JavaScript (Part 1): Introduction
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 13: Exploring JavaScript: JavaScript and HTML Text, Using Comments, Semicolons
N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, 2009.
  • Chapter 1: What is JavaScript?
  • Chapter 2: JavaScript in HTML
  • Chapter 3: Language Basics: Syntax
Lecture 11: JavaScript (Part 2): Primitive Datatypes, Variables, Constants, and Assignments
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 13: Exploring JavaScript: Variables, Operators, Variable Typing
N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, 2009.
  • Chapter 3: Language Basics: Variables, Data Types, Operators (except Relational and Equality)
  • Chapter 4: Variables, Scope and Memory
Practical 6: JavaScript (1)
Practical 7: JavaScript (2)
Lecture 12: JavaScript (Part 3): Type Conversion, Comparison Operators, and Control Structures
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 13: Exploring JavaScript
  • Chapter 14: Expressions and Control Flow in JavaScript
N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, 2009.
  • Chapter 3: Language Basics: Relational Operators, Equality
  • Chapter 4: Variables, Scope and Memory
Lecture 13: JavaScript (Part 4): Functions and Scope
Lecture 14: JavaScript (Part 5): Arrays and JavaScript Libraries
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 15: Arrays
N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, 2009.
  • Chapter 5: Reference Types: The Array Type

Flavio Copes: Efficiently load JavaScript with defer and async. 24 March 2018. https://flaviocopes.com/javascript-async-defer/ (accessed 3 October 2020)

Ravi Roshan: Async Defer: JavaScript Loading Strategies. Medium, 3 January 2019. https://medium.com/@raviroshan.talk/async-defer-javascript-loading-strategies-da489a0ba47e (accessed 3 October 2020)

Mozilla and individual contributors: Window: load event. MDN Web Docs, 15 April 2020. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event (accessed 3 October 2020)

Practical 8: JavaScript (3)
Lecture 15: JavaScript (Part 6): Objects
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 15: Objects
N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, 2009.
  • Chapter 5: Reference Types: The Object Type
  • Chapter 6: Object-Oriented Programming
  • Chapter 7: Anonymous Functions

Mozilla and individual contributors: JavaScript Reference: Classes. MDN Web Docs, 10 August 2020. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" (accessed 3 October 2020)

Mozilla and individual contributors: JavaScript Guide: Regular Expressions. MDN Web Docs, 17 August 2020. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions (accessed 3 October 2020)

Practical 9: JavaScript (4)
Lecture 16: JavaScript (Part 7): Dynamic Web Pages using JavaScript: Window Object
J. Niederst Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed). O'Reilly, 2018.
  • Chapter 21: Introduction to JavaScript: The Browser Object
  • Chapter 22: Using JavaScript: Meet the DOM
N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, 2009.
  • Chapter 8: The Browser Object Model
  • Chapter 9: Client Detection
Practical 10: JavaScript (5)
Lecture 17: JavaScript (Part 8): Dynamic Web Pages using JavaScript: DOM and Events
J. Niederst Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed). O'Reilly, 2018.
  • Chapter 21: Introduction to JavaScript: Events
  • Chapter 22: Using JavaScript: Meet the DOM
N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, 2009.
  • Chapter 10: The Document Object Model
  • Chapter 12: Events
Lecture 18: CGI Programming
Lecture 19: PHP (Part 1): Introduction, Primitive Datatypes, Variables, Constants, Assignments, Type Conversion
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 3: Introduction to PHP
  • Chapter 4: Expressions and Control Flow in PHP: Expressions
P. Cowburn (ed.): PHP Manual. The PHP Group, 3 Oct 2020.  http://uk.php.net/manual/en (accessed 26 Oct 2019)
Lecture 20: PHP (Part 2): Comparison Operators, Arrays
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 4: Expressions and Control Flow in PHP: Operators
  • Chapter 6: PHP Arrays
P. Cowburn (ed.): PHP Manual. The PHP Group, 25 Oct 2019.  http://uk.php.net/manual/en (accessed 3 Oct 2020)
Practical 11: PHP (1)
Lecture 21: PHP (Part 3): Specials, Printing, Control structures
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 4: Expressions and Control Flow in PHP: Conditionals, Looping
  • Chapter 7: Practical PHP: Using printf
  • Chapter 7: Practical PHP: File Handling
P. Cowburn (ed.): PHP Manual. The PHP Group, 3 Oct 2020.  http://uk.php.net/manual/en (accessed 3 Oct 2020)
Practical 12: PHP (2)
Lecture 22: PHP (Part 4): Functions and Libraries
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 5: PHP Functions and Objects: PHP Functions
P. Cowburn (ed.): PHP Manual. The PHP Group, 3 Oct 2020.  http://uk.php.net/manual/en (accessed 3 Oct 2020)
Practical 13: PHP (3)
Lecture 23: PHP (Part 5): Forms
Lecture 24: PHP (Part 6): Sessions
Practical 14: PHP (4)
Lecture 25: PHP (Part 7): Classes and PDO
P. Cowburn (ed.): PHP Manual. The PHP Group, 3 Oct 2020.  http://uk.php.net/manual/en (accessed 3 Oct 2020)
Practical 15: MySQL
Practical 16: PHP (5)
Lecture 26: Ajax
R. Nixon: Learning PHP, MySQL & JavaScript: with jQuery, CSS & HTML5. O'Reilly, 2018.
  • Chapter 18: Using Asynchronous Communication
P. Cowburn (ed.): PHP Manual. The PHP Group, 27 Dec 2020.  http://uk.php.net/manual/en (accessed 27 Dec 2020)

Mozilla and individual contributors: Document Object Model (DOM). MDN Web Docs, 15 Dec 2020. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" (accessed 27 Dec 2020)

Mozilla and individual contributors: JSON. MDN Web Docs, 18 Dec 2020. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON (accessed 27 Dec 2020)

Practical 17: Ajax
Lecture 27: REST (Part 1): Principles, Resources, Operations
Lecture 28: REST (Part 2): URIs and PHP Scripts
The Apache Software Foundation: Apache HTTP Server Version 2.4 Documentation. The Apache Software Foundation, 2020. http://httpd.apache.org/docs/current/ (accessed 25 Dec 2020)
Practical 18: REST (1)
Lecture 29: REST (Part 3): Implementation of a Web Service

Digamber Rawat: Create Simple PHP 7|8 CRUD REST API with MySQL & PHP PDO. positronx.io, 27 Nov 2020. https://www.positronx.io/create-simple-php-crud-rest-api-with-mysql-php-pdo/ (accessed 25 Dec 2020)

Mike Dalisay: How To Create A Simple REST API in PHP? Step By Step Guide! CodeOfaNinja, 29 Jun 2020. https://codeofaninja.com/2017/02/create-simple-rest-api-in-php.html (accessed 25 Dec 2020)

Brad Traversy: PHP REST API From Scratch. Traversy Media, 26 Jul 2018. https://www.youtube.com/playlist?list=PLillGF-RfqbZ3_Xr8do7Q2R752xYrDRAo (accessed 25 Dec 2020)

Practical 19: REST (2)
Lecture 30: Summary and Outlook