CS 952 Database and Web Systems Development

Lab Exercises: HTML, PHP, CSS and JavaScript

The aim of these exercises is for you to build some simple web pages and to make sure you know
how to use our systems for web development. The following tasks should be done in a plain text
editor and saved as .html, .php, .css, or .js files where appropriate. You should then copy these files
to DEVWEB. If you use Linux or Unix, go to the DEVWEB directory and then to the 2019 directory (if
you do not have a 2019 directory you will have to create one). If you put a file called ex.html in that
directory you can view it in your web browser from any internet connected computer using the URL:

https://devweb2019.cis.strath.ac.uk/~yourusername/ex.html

If you use Windows on any of the Departmental machines you will find the DEVWEB folder mapped
to your Q: drive.

These exercises are worth up to 10% of the overall mark for CS 952 Database and Web Systems
Development. Each question is worth 5 marks.

Submission
Please note that the later questions ask you to build on your solutions to earlier questions. You
should therefore make sure that you save your solution to each question in separate files and that
you do not overwrite your earlier solutions. For example, the solution file for question one could be
named q1.html, the solution files for question 2 could be named q2.html (this will be a modified
version of q1.html) and q2.php, the solution files for question 3 could be named q3.html (this will be
a modified version q2.html) and q3.php (this will be a modified version of q2.php), etc. The files that
you create for each question should be placed in a directory or folder which you should zip and
upload via Myplace. The deadline for submission is 18:00 Monday 30th March 2020.

This is an individual exercise: any copying of code (except from the lecture notes or the W3Schools
website which you should acknowledge) may result in disciplinary measures. No late submissions
will be accepted without medical certification – this should be provided at the earliest opportunity.

References
http://www.w3schools.com/ has online tutorials for HTML, CSS, PHP and JavaScript. The tutorial on
PHP includes sections on form handling and validation as well as MySQL. The tutorial on JavaScript
also includes sections on form validation.
Q1 HTML Simple form example
Using the following script
https://personal.cis.strath.ac.uk/mark.dunlop/teaching/topic/showallparameters.php as your server
action (and using the POST method), code the following form using HTML form elements and check
the correct data is sent to the server:

The Job Categories are "Marketing", "Human Resources" and "Technical Support". Don't worry about
the right alignment of the textual labels, but after you have a simple form working you should
embed it in a table so that the form entry elements are nicely aligned.

You should use http://validator.w3.org/ to make sure that your file conforms to W3 open standards.

Q2: PHP
Write a decent form handler for the form in Q1 which shows the data nicely formatted back to the
user.

Add code to this PHP script to send a fixed email to you whenever the form is submitted. See http://
uk3.php.net/function.mail for mail manual and Google for examples.

Change this code so that the email contains the same information that is echoed back to the user.

Q3: MySQL
Design a single table database to store the values from the form in Q1.

Create this database in phpMyAdmin on devweb2019 and then update your PHP from Q2 to save
into the database rather than emailing you.
Test your submissions using your form and phpMyAdmin to view the submissions.

Q4: JavaScript Error Checking

Add JavaScript code, using regular expressions where appropriate, to your answers to Q1..3 to
check:
 The Name is completed.
 The Telephone number is completed.
 The E-mail field is completed.
 One of “Male”, or “Female” is selected.
 At least one of the five “Days Available” is selected.

Q5: CSS
Add CSS styling to make the form in Q1 look better. For example you could add colour, make the text
and pull-down menu boxes the same size, and include appropriate images.

Add a horizontal navigation menu at the top of the page with links to sections on "Home”,
Marketing”, "Human Resources”, “Technical Support” and "About us”.

Q6: Extensions
Recode the checks in Q4 in PHP.

Add an administrator interface for your database in Q3 that allows the user to view all submissions
and delete rows – use phpMyAdmin to create the SQL for deletion and then copy that into PHP.