lab3_handout_COMP3322_s2018.pdf - COMP3322 MODERN TECHNOLOGIES ON WORLD WIDE WEB Lab 3 PHP JavaScript and AJAX Overview In this lab we will develop a

lab3_handout_COMP3322_s2018.pdf - COMP3322 MODERN...

This preview shows page 1 - 4 out of 8 pages.

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
Image of page 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.
Image of page 2
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');
Image of page 3
Image of page 4

You've reached the end of your free preview.

Want to read all 8 pages?

  • Fall '13
  • Dr. C. Wu
  • MYSQL , Ajax, World Wide Web, event handler

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture