Module overview
This module adopts a project-based approach. Through building the first project, the basic rules and syntax of the five web technologies (HTML5, CSS, PHP, MySQL, and JavaScript) are gradually introduced as they are used in the project. Subsequent projects will consolidate acquired skills and develop more advanced skills.
Linked modules
Pre-requisite: PSYC2020
Aims and Objectives
Learning Outcomes
Learning Outcomes
Having successfully completed this module you will be able to:
- the relationships between a (research) task and web design
- how to apply and integrate the technologies in web applications
- the basics of each of the five main technologies in web programing (i.e., HTML5, CSS, JavaScript, PHP, and MySQL)
Syllabus
1. Introduction and preparations (A1 - A3)
Project 1: Server-based MUQ Web Application
2. Index page; HTML -- mandatory and text tags/elements, entities, form and input, box model, comments, validation; CSS -- style sheets, style declarations (e.g., font, size, alignment, color, margin, padding, border), comments, validator.
3. Welcome page and modularisation; HTML -- item lists, id; CSS -- height/width, containing block, position, margin, min-height; PHP -- basics, echo, print, functions (e.g., include, require), variables, if-else construct, mingling with HTML, comments, validator.
4. Visible Part 1 of MUQ; HTML -- table, drop-down list, div; CSS -- pseudo-class; PHP -- arrays, $_GET[], $_POST[], for loops, comparison operators, concatenating assignment operator, user defined functions, comments, validator
5. Invisible Part 1 of MUQ; web security (validation and sanitisation); PHP -- $_SERVER['REQUEST_METHOD'], isset(), filter_var(), filter_var_array(), pre-defined filters, var_dump(), array_push(), session_start(), $_SESSION[], array_fill()
6. Part 2 of MUQ; data handling; HTML -- radio button; PHP -- foreach construct, header()
7. Data storage; MySQL -- create a database, create a table, define variables, data types, validation; PHP -- mysqli_connect(), mysqli_close(), error control operator, constants, mysqli_query(),define(),
8. Record and debriefing page; PHP -- implode(), date(), time(), mysqli_insert_id(); MySQL -- INSERT query; phpMyAdmin
Project 2: JavaScript-enabled MUQ Web Application
9. JavaScript -- DOM and objects, methods and properties, DOM events and event handlers, comments, validator, functions, variables, arrays, length property, fill(), join(), push(), control structures (for, if-else), operators, alert(), write(), innerHTML, getElementById()
10. MUQ Parts 1 and 2; clent-side validation, getElementsByName(), value property, toString(), submit(),
Project 3: An Experimental Task
11. Introduction of the task and planning
12. Scripting the task; JavaScript -- custom-defined shuffle(), timing methods and events, measuring response times, onkeydown event, key property, search()
Learning and Teaching
Teaching and learning methods
- Online, individual, supervisory meetings
- e-tutorials via PowerPoint slides
- Q&A workshops
Type | Hours |
---|---|
Independent Study | 128 |
Teaching | 22 |
Total study time | 150 |
Assessment
Assessment strategy
For the referral assessments, unless the Special Considerations and/or Exams Boards recommend otherwise, the module will be redeemed by completing all required coursework assignments and a supplementary assessment. Component marks for coursework and research participation will be carried forward.
Summative
This is how we’ll formally assess what you have learned in this module.
Method | Percentage contribution |
---|---|
Research Participation | 1% |
Assignment | 49% |
Quizzes | 50% |
Referral
This is how we’ll assess you if you don’t meet the criteria to pass this module.
Method | Percentage contribution |
---|---|
Assignment | 50% |
Quizzes | 50% |
Repeat Information
Repeat type: Internal & External