The University of Southampton

PSYC3058 Project-Based Introduction to Web Programming for Behaviour Researchers

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.

Aims and Objectives

Module Aims

1. Demonstrate how to integrate the five technologies in web applications by building psychology-related research tasks (e.g., a survey, an experimental task). 2. Enable students to set up their own computer-based behaviour research using a local web server installed on their computers.

Learning Outcomes

Learning Outcomes

Having successfully completed this module you will be able to:

  • the relationships between a (research) task and web design
  • the basics of each of the five main technologies in web programing (i.e., HTML5, CSS, JavaScript, PHP, and MySQL)
  • how to apply and integrate the technologies in web applications


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(), 11. Basics of regular expression and validation; PHP -- preg_match() Project 3: An Experimental Task 12. Introduction of the task and planning 13. 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

• Lecture in class • e-tutorials via PowerPoint slides • Q&A workshops

Independent Study128
Total study time150



MethodPercentage contribution
Exam  (1.5 hours) 30%
Homework/Coursework 69%
Research Participation 1%


MethodPercentage contribution
Coursework assignment(s) %
Exam %

Repeat Information

Repeat type: Internal & External

Share this module Facebook Google+ Twitter Weibo

We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we will assume that you are happy to receive cookies on the University of Southampton website.