AACS2043 Web Systems and Technologies

Practical 4

Practical 4:
Q1.

The Student Table (creating MySQL database)

(a)

By using NetBeans IDE (or other tools), create a new MySQL

database and name the database as practical_4.

(b)

Create a new table named Student with the following fields:

Ke
y

Ind
ex

Nu
ll

Uniq
ue

Column Name

Data
Type
CHAR
VARCHA
R
CHAR
CHAR

StudentID
StudentName
Gender
Program

Siz
e
10
30
1
2

NOTE:
Gender field holds F (Female) or M (Male).
Program field holds IA (Information Systems
Engineering), IB (Business Information Systems) or IT
(Internet Technology).
(c)
Q2.

Insert some records into the Student table.

List Student Version 1 (selecting records)

Common
navigation links.
Field names.
Display
records in
HTML table.

Number of
records
returned.
Academic Year 2016/2017

Link to insertstudent.php, which

you will create later.
Page 1 of 5

AACS2043 Web Systems and Technologies

Practical 4

Figure 2: list-student.php (version 1)

With reference to Figure 2, create the PHP page list-student.php.

Select and display all Student records in an HTML table. In addition,
display the number of records returned at the last row.
Q3.

List Student Version 2 (selecting records)

Display
Display program
full
code and program
gender.
name.
Figure 3: list-student.php (version 2)

Modify list-student.php so that Gender and Program field will be

displayed as full descriptions rather than code (refer to Figure 3).
You may create lookup tables (arrays that hold the codes and full
descriptions) to achieve the purpose.
Q4.

Insert Student (inserting records)

Insert the
record to the
database.

Academic Year 2016/2017

Navigate back
to liststudent.php.
Page 2 of 5

AACS2043 Web Systems and Technologies

Practical 4

Figure 4.1: insert-student.php

IF INPUT ERROR DETECTED!
Display error
messages.
Check for duplicated
Student ID.

IF EVERYTHING OK!

Display message to
indicate successful
insertion.
Clear all
fields.

Figure 4.2: insert-student.php

Create the sticky form insert-student.php (as shown at Figure

4.1) so that users can insert new records to the Student table. You
should perform the necessary input validations (including checking
for duplicated Student ID) before the insertion taken place. Display
meaningful message in case of input error as well as successful
insertion (refer to Figure 4.2).

NOTE:
We will cover updating and deletion at Practical 4. For now, please
manually update and delete the records by using NetBeans IDE (or other
tools) if needed.

Academic Year 2016/2017

Page 3 of 5

AACS2043 Web Systems and Technologies

Practical 4

Additional Self Review Questions:

Q5.

List Student Version 3 (sorting)

Use image to indicate
if the field is sorted in
ascending or
descending order.

Click the header to

sort by the
particular field.
Click again to
alternate between
ascending and
descending orders.

Figure 5: list-student.php (version 3)

Modify list-student.php so that users can click on the column

header to sort the records by the respective field (refer to Figure
5). Enhance it further by allowing the records to be sorted in
ascending or descending order by clicking the column header
alternately. In addition, display an image to indicate if a field is
sorted in ascending or descending order.
Q6.

List Student Version 4 (filtering)

Click on the filter
options to display only
Student records from
the particular program.

Figure 6.1: list-student.php (version 4)

Academic Year 2016/2017

Page 4 of 5

AACS2043 Web Systems and Technologies

Practical 4

E.g. when the

IT option is
clicked.
Only Student
records from IT
program are
displayed.

Previously selected
sorted field still
retained.

Any further sorting

will not reset the
filter.

Figure 6.2: list-student.php (version 4)

Modify list-student.php so that users are allowed to filter the

records by Program field (i.e. display only records from IA, IB or IT
program). You should also ensure that the filtering will not reset the
current sorting option. Any further sorting should not reset the
current filtering option too.

Academic Year 2016/2017

Page 5 of 5