Lab 10: Practice WEB1201: Web Fundamentals: Rev 1.1 November, 2019
Lab 10: Practice WEB1201: Web Fundamentals: Rev 1.1 November, 2019
1
November, 2019
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:
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.
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.
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.
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.
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.
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).
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).
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