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.
- Chapter 2: How the Web Works
- Chapter 4: Creating a Simple Web Page
- Chapter 4: Creating a Simple Web Page
- Chapter 5: Marking Up Text
- Chapter 6: Adding Links
- Chapter 7: Adding Images
- Chapter 8: Table Markup
- Chapter 11: Introducing Cascading Style Sheets
- Chapter 12: Formatting Text
- Chapter 13: Colors and Backgrounds
- Chapter 14: Thinking Inside the Box
- Chapter 11: Introducing Cascading Style Sheets
- Chapter 12: Formatting Text
- Chapter 13: Colors and Backgrounds
- Chapter 19: More CSS Techniques (Styling Tables)
- 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).
- Chapter 9: Forms
- Chapter 19: More CSS Techniques (Styling Forms)
- Chapter 13: Exploring JavaScript: JavaScript and HTML Text, Using Comments, Semicolons
- Chapter 1: What is JavaScript?
- Chapter 2: JavaScript in HTML
- Chapter 3: Language Basics: Syntax
- Chapter 13: Exploring JavaScript: Variables, Operators, Variable Typing
- Chapter 3: Language Basics: Variables, Data Types, Operators (except Relational and Equality)
- Chapter 4: Variables, Scope and Memory
- Chapter 13: Exploring JavaScript
- Chapter 14: Expressions and Control Flow in JavaScript
- Chapter 3: Language Basics: Relational Operators, Equality
- Chapter 4: Variables, Scope and Memory
- Chapter 15: JavaScript Functions
- Chapter 5: Reference Types: The Function Type
- Chapter 15: Arrays
- 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)
- Chapter 15: Objects
- 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)
- Chapter 21: Introduction to JavaScript: The Browser Object
- Chapter 22: Using JavaScript: Meet the DOM
- Chapter 8: The Browser Object Model
- Chapter 9: Client Detection
- Chapter 21: Introduction to JavaScript: Events
- Chapter 22: Using JavaScript: Meet the DOM
- Chapter 10: The Document Object Model
- Chapter 12: Events
- Chapter 3: Introduction to PHP
- Chapter 4: Expressions and Control Flow in PHP: Expressions
- Language Reference: Types: Booleans http://uk.php.net/manual/en/language.types.boolean.php
- Language Reference: Types: Integers http://uk.php.net/manual/en/language.types.integer.php
- Language Reference: Types: Floating Point Numbers http://uk.php.net/manual/en/language.types.float.php
- Language Reference: Types: Strings http://uk.php.net/manual/en/language.types.string.php
- Chapter 4: Expressions and Control Flow in PHP: Operators
- Chapter 6: PHP Arrays
- Language Reference: Types: Arrays http://uk.php.net/manual/en/language.types.array.php
- Language Reference: Types: Control Structures: foreach http://uk.php.net/manual/en/control-structures.foreach.php
- Chapter 4: Expressions and Control Flow in PHP: Conditionals, Looping
- Chapter 7: Practical PHP: Using printf
- Chapter 7: Practical PHP: File Handling
- Language Reference: Control Structures http://uk.php.net/manual/en/language.control-structures.php including if, else, elseif, while, do-while, for, foreach, break, continue, switch, return
- Language Reference: Errors https://www.php.net/manual/en/language.errors.php
- Language Reference: Exceptions https://www.php.net/manual/en/language.exceptions.php
- Chapter 5: PHP Functions and Objects: PHP Functions
- Language Reference: Functions http://uk.php.net/manual/en/language.functions.php
- Chapter 11: Form Handling
- Chapter 12: Cookies, Sessions, and Authentication
- Language Reference: Classes and Objects http://php.net/manual/en/language.oop5.php
- The PDO Class http://php.net/manual/en/class.pdo.php
- Chapter 18: Using Asynchronous Communication
- Function Reference: XML Manipulation https://www.php.net/manual/en/refs.xml.php
- Function Reference: JavaScript Object Notation https://www.php.net/manual/en/book.json.php
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)
- Apache HTTP Server Tutorial: .htaccess files https://httpd.apache.org/docs/2.4/howto/htaccess.html
- Apache Module mod_rewrite https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html
- RewriteRule Flags http://httpd.apache.org/docs/current/rewrite/flags.html
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)