Rev 1.

1
November, 2019

Lab 10: Practice

WEB1201: Web Fundamentals

1 Introduction
This lab aims to help you revisit some of the things that you have done in the labs prior to this.

2 Objectives
At the end of this lab (or practice), you should be able to:

1. Create a web page using HTML and CSS.

2. Get data from a user using forms.
3. Write scripts in PHP and JavaScript.

3 Pre-requisites
Before you attempt this lab, it is important that you have completed ALL the earlier labs. From
this practice session, please refer to the earlier labs to better understand what is happening. The
amount of time this lab is going to take will depend on your current skill set.

Note

For this lab, you will required to know some basic programming, including the understand-
ing of variables, functions, etc. If you need refreshing on this, please consult any additional
lab sheets or your instructor.

4 Materials and Equipment

1. A computer with a web browser and text editor (VS Code preferred)
NOTE:
If you are using the computers in the lab, you will need to use a portable browser which
is available from eLearn.

5 General instruction
1. For these tasks, you will be given instructions on what you need to accomplish or produce;
NOT how you are supposed to do it.
2. The purpose of this practice is for you to be able to figure out how you can get some of
these tasks done. If you try to “look for the answer online” or “from friends” you will
have defeated the purpose of this lab and you will not learn the most important thing from
any lab sheet: to be able to figure things out yourself and determine the best course of
action.

1
Task 1: Create a form and display the entered data to the user
What you need to accomplish
Create a HTML form which collects the following REQUIRED data:

• Name
• E-mail address
• Course registration date
• Course (as a dropdown menu)
• Gender (as a radio button)
• Completed semesters (as checkboxes)
Note: In total, you should have nine semesters. If you are a direct entry student, consider
the first three semesters as complete.

When the user clicks on the “Submit” button, send the data to the server and display a summary
of the data to the user using a PHP script. Your summary must contain all the data above
INCLUDING the expected month and year of completion (assuming the student passes all
subjects).

Once the data is displayed, allow the user to click on another button that will save the data to a
database.

What you need to do (or produce)

1. Rewrite the task as a list of requirements. Note the wordings in the given task.
2. Draw a flowchart of the sequence of steps for the program.
Note: Think of a flowchart as the sequence of events that must occur. Although this is not
strictly what it is, for the purposes of this task, it is sufficient.
3. How many files is needed for this task? List them out with their names and what they do
(i.e. what function they perform)
4. Draw visual layouts for the different files (i.e. draw how they should look like)
5. Write out the program.

What you should have learnt at the end of this task

1. The ability to determine a set of requirements based on a given description.

2. The ability to determine the functions that are required and how these functions are
grouped into different files.
3. To be able to determine the logic of the program.
4. To be able to visualize the layout of the web pages and to code/style them accordingly
using CSS.
5. To be able to create a HTML form with different input types using the <label> and <in-

2
 put> elements with the necessary attributes.
6. The ability to use PHP:
(a) To access an array (either $_POST or $_GET).
(b) To use a conditional statement.
(c) To perform some basic calculations with dates.
(d) To save data to a database.

Task 2: Add validation to the form using JavaScript

What you need to accomplish
Add validation using JavaScript to the form from Task 1

What you need to do

1. Determine what kind of validation you need to add to your form.

2. Add the validation to your form.

What you should have learnt at the end of this task

1. To be able to determine what validation is required for the data that is being collected.
2. To be able to add the required validation using JavaScript to the form.

Task 3: Display the collected data as a table

What you need to accomplish
Display the collected data from your form created in Task 1 in a table. This assumes that
multiple users have entered data that has been saved in the database. Your code must be able to
support an arbitrary number of data entries (i.e. must be able to display any number of rows).

What you need to do

1. Fill in the form multiple times to populate your database.

2. Display the data as a table.

What you should have learnt at the end of this task

1. To be able to retrieve data from a database using the SELECT statement.

2. To be able to display the data using HTML tables.

3
Task 4: Display the collected data as a list
What you need to accomplish
Display the collected data from your form created in Task 1 as a list. This assumes that multiple
users have entered data that has been saved in the database. Your codes should be able to
generate lists for an arbitrary number of data entries (or table rows).

What you need to do

1. Fill in the form multiple times to populate your database.

2. Display the data as a list. The choice of what type of list is suited to this data is left to
you.

What you should have learnt at the end of this task

1. To be able to retrieve data from a database using the SELECT statement.

2. To be able to choose an appropriate type of list (or lists) to display the data.

4
Submission
In your submission archive, you should have the following files/folders:

1. All the files in this lab. To be able to understand what the files are for, please include a
“readme.txt” to give a brief description or overview of what each file does.
2. Exported copies of your database table in any importable format (e.g. CSV).

Ensure the following:

1. The file is correctly named and in the correct format. The naming convention is found on
eLearn but for the sake of completeness, for this lab it will be:
<ID>_<labNum>.zip, where:
• <ID> is your student ID, and
• <labNum> is the number of this lab.
2. Do not use any other archive type. The file you submit must be the zip format. If you
are using your laptop and do not have that software, you can download a free zip archive
creator from the 7zip download page. If you are using 7zip, remember to change the
archive format to ZIP. For Mac users, you can use Keka.

The submission link will be found on eLearn. Adhere to the guidelines and instructions on
eLearn.

5
Changelog
• Version: 1.1
Date: 18 Nov 2019
1. Added additional tasks on constructing tables and lists.

• Version: 1.0
Date: 18 Nov 2019
1. First version