COMP3322 MODERN TECHNOLOGIES ON WORLD WIDE WEB
Lab 3 PHP, JavaScript and AJAX
Overview
In this lab, we will develop a simple web-based course attendance system, with
which we can maintain an attendance list. As shown in Fig. 1, each attendance entry
includes the attendance status (PRESENT or ABSENT), student name, student major,
course code, and date. We will practice loading the list from the database and
toggling between the PRESENT status and the ABSENT status. We will also
implement a few buttons to decide the (selected) entries to be displayed. For
example, when “BBA” is typed into the textbox above “Filter by Major” button, the
page shows up as in Fig. 2; when “COMP3322” is typed into the textbox above “Filter
by Course” button, the page shows up as in Fig. 3. Note that a “Show All” button is
displayed in Fig. 2 and Fig. 3, and when it is clicked, the page view goes back to Fig. 1.
These functionalities will be implemented through server-side implementation (PHP)
and the client-side implementation (HTML, JavaScript, AJAX). We adopt MySQL as
the back-end database server to store the attendance information.
Fig. 1
Fig. 2
Fig. 3
Lab Exercise 1 – Prepare the database
Step1:
Get
your
MySQL
account,
if
you
do
not
have
one,
at
.
It
takes
up
to
one
working day for CS technical office to activate your account.
Step2:
Log in to MySQL using phpMyAdmin.
1.
Go to
.
2.
Log in using your MySQL account, and select the server, sophia. We will use the
MySQL database hosted in sophia.cs.hku.hk.
Step3:
Select your database. After login, select your database on the left column.
Your database should be named as your CSID.
Step4:
Create tables and records. Click the
SQL
tab and execute the SQL statements
for creating necessary tables and inserting data for this lab exercise.
create table attendanceList (
id int not null primary key auto_increment,
studentname varchar(256),
major varchar(256),
course varchar(256),
coursedate DATE,
attendOrNot varchar(7) not null default 'PRESENT'
);
insert into attendanceList values(1,'Alice', 'BEng', 'COMP3322', '2017-10-05', 'PRESENT');
You've reached the end of your free preview.
Want to read all 8 pages?
