Assignment #2

Schedule Management Website

KAIST
CS360

1
 Service requirements
• User management
• User registration
• User authentication

• Personal schedule management

• Add a new schedule
• Delete an existing schedule
• Find schedules whose names start with a given name

Myoung Ho Kim, KAIST

2
Database for Assignment 2
• Database scheme
• Do not modify scheme
user user_id user_password
cskim supersecurepassword
yjlee 1q2w3e4r!
jyjang 1q2w3e4r2!
…

• user_id: id of user (must not be duplicated)

• user_password: password of the user

schedule code user_id name start end dow

1 cskim name1 1 3 Tue
2 yjlee name2 6 11 Thu
…

• code: code of schedule

• user_id: id of the user
• name: name of the schedule
• start: start time of schedule
• end: the value of schedule
• dow: day of the week Myoung Ho Kim, KAIST
3
 Assignment #2
• Q1. Registration page (register.jsp)
• Ask for an id and password for the user using the form.
• When the user clicks the register button, the client requests user registration to the server
• The server inserts a user record into the ‘user’ table in the database
• If the registration is successful, redirect the client to the login page (login.jsp)
• If the registration failed (e.g., user id duplicated), redirect the client to the register page (register.jsp)

• Please notice the following rules

• The name of the registration page must be ‘register.jsp’
• Make the server not store plaintext passwords in the database

• Hint
• Consider ‘SHA1’ SQL function

Myoung Ho Kim, KAIST

4
 Assignment #2
• Q2. Login page (login.jsp)
• Ask for an id and password for the user using the form.
• When a user clicks the login button, the client requests login into the server
• The server compares the received data with the records in the user table
• If the login is successful, redirect the client to the schedule management page (index.jsp)
• If the login failed(e.g., no user id, incorrect password), redirect the client to the login page (login.jsp)

• Please notice the following rules

• The name of the login page must be ‘login.jsp’.
• You must implement this function using session

• Hint
• Consider ‘session.setAttribute’ and ‘session.getAttribute’ JSP function

Myoung Ho Kim, KAIST

5
Assignment #2
• Q1 and Q2 Example

registration
failed

registration
success

login
success
login
failed

Myoung Ho Kim, KAIST

6
 Assignment #2
• Q3 ~ 5. Schedule management page (index.jsp)
• The user must be logged in from the 'login.jsp' page to use ‘index.jsp’ page
• If the client access 'index.jsp' page without being logged in, redirect the client to the 'login.jsp' page

• When the index.jsp page loads, it shows all the schedules the user has added

• On this page, the user can delete or search for only user-added schedules
• This means the user can’t see or delete schedules added by other users

• Users add, delete, and search for schedules using the user id they used to log in
• The user id used to log in is utilized to identify schedules added by the user
• This means that when a user adds a schedule to the database schedule table, the user_id column should
store the user id that the user used to log in.

Myoung Ho Kim, KAIST

7
 Assignment #2
• Q3. Schedule management page (index.jsp) – add a new schedule
• The client receives the name, start time, end time, and day of the week of the schedule using a form
• The server inserts the schedule data which the client sends into the ‘schedule’ table in the database
• If an addition is successful, the schedule is displayed in the HTML schedule table of the page
• The code for the schedule displayed in the HTML schedule table must be identical to the one stored in the database
• These codes are globally serialized
• If the addition is failed (e.g., time overlapping), do nothing

• Please notice the following rules

• If you refresh the ‘index.jsp’ page to modify the html table, the score will be deducted
• You must utilize Ajax to communicate with the server
• The user should still be able to interact with the webpage after clicking the submit button to addition

• Hint
• Consider the ‘$.post’ jQuery function
• Utilize the ‘append_tr()’ JavaScript function in the ‘index.jsp’ to append schedule information on the HTML table

Myoung Ho Kim, KAIST

8
 Assignment #2
• Example for Q3 (In case of success)

1. if the submit button is clicked,

send the form data to the server using ajax

sche_insert.jsp

2. Response addition results to the client

(code of inserted schedule)

3. if addition is successful,
add schedule information
clicked to the HTML table using
JavaScript

Myoung Ho Kim, KAIST

9
Assignment #2
• Example for Q3 (In case of failure)

1. if the submit button is clicked,

send the form data to the server using ajax

sche_insert.jsp

2. Response addition results to the client

(Insertion is failed)

3. The addition is failed,

Time overlapped do nothing

clicked

Myoung Ho Kim, KAIST

10
 Assignment #2
• Q4. Schedule management page (index.jsp) – delete an existing schedule
• If the user clicks the code of a schedule in the HTML schedule table, it is deleted
• The client deletes the information from the HTML schedule table and sends a deletion request to the server
• The server deletes the schedule from the database

• Please notice the following rules

• If you refresh the ‘index.jsp’ page to modify the html table, the score will be deducted
• You must utilize Ajax to communicate with the server
• The user should still be able to interact with the webpage after clicking the code to deletion
• Hint
• Consider the ‘$.post’ jQuery function
• Add the ‘onclick’ event handler to the code table cell of the schedule
• Utilize ‘delete_tr()’, ‘clear_table()’ javascript function to delete schedule information from table

Myoung Ho Kim, KAIST

11
Assignment #2
• Example for Q4

1. if the code cell in the table is

clicked, send a deletion request to
the server using AJAX sche_delete.jsp

clicked

2. delete schedule information

from the HTML table using
JavaScript

Myoung Ho Kim, KAIST

12
 Assignment #2
• Q5. Schedule management page (index.jsp) – find existing schedules
• If the user change search term of the search box, the content of the HTML schedule table must change
• The names of the schedules in the HTML schedule table must start with the search term
• The schedule should appear in ascending order of code

• Please notice the following rules

• If you refresh the ‘index.jsp’ page to modify the html table, the score will be deducted
• You must utilize Ajax to communicate with the server
• The user should still be able to interact with the webpage after changing search term in the search box to find
• The contents of the table should change whenever the user changes search term in the search box

• Hint
• Consider the ‘$.post’ jQuery function
• Consider the ‘change’ jQuery function

Myoung Ho Kim, KAIST

13
 Assignment #2
• Example for Q5

2. Send search term to the server and get

schedules whose names start with search term

sche_select.jsp

1. Type search term in the

search box

Changed

3. Render results
on the html table
Myoung Ho Kim, KAIST
14
 Rules
• Due
• 2023. 05. 24. (~23:59) (Do not accept late submission)

• Submission Standard
• You should submit a file named [Student ID].zip which consists of .jsp files only
• Upload the .zip file to the course homepage

• Evaluation
• Do not cheat or plagiarize others. Both will get no points.

• Additional Notices
• You will be given a skeleton code for the assignment
• You can initialize database using db_init.jsp page
• Please test your codes using test_mycode.jsp page

Myoung Ho Kim, KAIST

15