COMP2115 Web Design and Development

BSc in Computing / BSc in Artificial Intelligence

COMP2115 Web Design and Development

2024/2025, 2nd semester 

Assignment 1 - Due date via Canvas: April 20, 2025 (Sunday)

Note:

1. This assignment continues from assignment 1 and carries 7.5% of the total mark of this 

module.

2. Late submission will NOT be marked.

3. To deal with plagiarism, zero mark will be given if you copy someone else's work or 

you let someone copy your work.

4. For submission details via Canvas, refer to Question 9.

 Make sure that I can login as a doctor as well as login as a patient successfully using 

the username and password information given in assignment 1 in order to do testing. 

Otherwise, all marks assigned to testing will be lost.

Note that P2312345 refers to your student ID.

Design and implement a web application for Clinic Management System

Your client would like you to build a web application that can manage the doctor, patient, and 

appointment details of the clinic, with URL of P2312345.pythonanywhere.com/clinic/ being

the homepage of the web application.

This assignment is a continuation of Assignment 1. Tasks to be added to your clinic 

management application for Assignment 2 are as follows:

 All users, even without 代写COMP2115 Web Design and Developmentlogin, can browse the list of AVAILABLE appointments in the 

homepage. 

 To TAKE an appointment (i.e. to change the status from available to taken), the user 

must have successfully login with a patient account.

 To add an appointment, the user must have successfully login with a doctor account.

 Permission details refer to point 3 below.

 There is a hyperlink for “My appointment”, where

o When accessed by a successfully login patient, list ONLY the appointments taken by 

him/her. 

o When accessed by a successfully login doctor, list ONLY the taken appointments

associated with this login doctor.

o When accessed by a user NOT yet login, redirect to login page.

The major steps for building this web application are stated as follows.

1. Update the homepage P2312345.pythonanywhere.com/clinic/ with the line “Welcome to 

the CMS clinic” to include the list of AVAILABLE appointments. This page is accessible 

to everyone, with or without login.

1.1. Add pagination to the template to display the list of AVAILABLE appointments, 

with 2 appointments on each page.

2. Create the login, and logout functions, to be accessible via 

P2312345.pythonanywhere.com/accounts/. 

2.1. For users already login, display their name and provide a logout link.

2.2. For users not yet login, simply display the login link.

2.3. Add the login / logout hyperlinks accordingly to base.html.

1

3. Assign permission to doctors to add his/her available appointments.

3.1. In Django Admin, create a group called ‘ClinicStaff’ and assign the “Can add 

appointment” permission to this group. 

3.2. Assign all the 4 doctors created in Assignment 1 to this group.

4. Create the function for a successfully login doctor to ADD his/her available 

appointments. URL path for this is as follows:

4.1. clinic/newappoint/ — A form to input details of an appointment which will 

automatically save the logged in doctor’s information into the new appointment.

4.1.1. Only logged in doctors can access this page. Otherwise, it will either display 

403 forbidden error (for logged-in patient), or redirect to login page for users 

without login accordingly.

4.1.2. Upon successful adding an appointment, redirect to the detail view of that

doctor, i.e. clinic/doctors/-

4.1.3. Provide a hyperlink to this URL path (clinic/newappoint/) in base.html to be 

displayed only for a logged in doctor.

5. Update the page for clinic/doctors/- — The detail view of a particular doctor. 

5.1. This detail view includes the specified doctor’s details as well as the details of his/her

list of AVAILABLE appointments, 

5.1.1. to be displayed in a radio button list if the user accessing this page has login as 

a patient; 

5.1.2. for users not logged in, or login as doctor, display as an unordered list.

5.2. Handle the logic to update the status from “available” to “taken” after a logged in 

patient submits the request to take the appointment, which will automatically update 

the logged in patient’s information into the chosen appointment to be taken.

5.2.1. Upon successfully updating the appointment record from “available” to “taken”, 

redirect to the page referred to by the URL path clinic/myappoint/

6. Create the necessary view, URLconf, and template file for clinic/myappoint/ — to list 

the TAKEN appointments of a logged-in patient or logged-in doctor. 

6.1. Each appointment should show all the necessary information. 

6.1.1. When accessed by a login patient, list ONLY the appointments taken by 

him/her. 

6.1.2. When accessed by a login doctor, list ONLY the taken appointments associated 

with this login doctor.

6.2. It will display a proper message for logged-in patients or logged-in doctors without 

any taken appointments yet.

6.3. Provide a hyperlink to this URL path (clinic/myappoint/) in base.html to be 

displayed only for a logged in user.

6.4. For users who have not logged in and directly accessing the above URL, the user will 

be redirected to the login page. 

6.4.1.1. Upon successful login, the logged in patient or doctor will be redirected 

back to the page that redirects to login page for user-friendliness.

2

7. Update base.html so that the link for “Patient’s Page” is displayed only for a logged in 

doctor. 

 Only logged in doctors can access this page (clinic/patients/). Otherwise, it will 

either display 403 forbidden error (for logged-in patient), or redirect to login page 

for users without login accordingly.

8. Update the page for clinic/patients/ with the following requirement:

 Only logged in doctors can access this page. Otherwise, it will either display 403 

forbidden error (for logged-in patient), or redirect to login page for users without 

login accordingly.

9. Submit a Word document to Canvas with the answers of the following questions for 

marking.

 Include your student ID in the Word document, which is named using your 

student ID.

 Do NOT include the description of questions 1 to 8 in the Word document.

 Every answer must include the GIVEN question number and the question 

description, following the sequential ordering. 

 Submit only what is being required. Failure to follow the 3 requirements above 

will result in a maximum of 10 marks being deducted!

9.1. Write your base.html (Submitting screen capture will NOT be marked). 

9.1.1. Properly handle Login link with username / logout link. [5 marks]

9.1.2. Properly handle hyperlink for “New appointment” and “Patient’s page” only 

shown to logged-in doctors. [5 marks]

9.1.3. Properly handle hyperlink for “My appointments” only shown to logged-in 

users. [5 marks]

9.2. Screen captures submission: Note that the screen captures should clearly show the 

URL as well. Screen captures without the URL will get ZERO mark. Testing 

will be done only when correct screen capture is provided.

9.2.1. Regarding Django Admin, submit the screen captures to show that the 

doctors have been added to the “ClinicStaff” group with the permission 

“Can add appointment” assigned accordingly. [5 marks]

9.2.2. Paste the screen capture of the homepage showing only the AVAILABLE 

appointments with pagination. The LOGIN link is shown in the screen 

capture as well, but without the hyperlinks for “My appointment”, “New

appointment” and “Patient’s page”. [10 marks]

9.2.2.1. Test that pagination works as requested. [5 marks]

9.2.3. Paste the screen capture showing the list of AVAILABLE appointments of a 

particular doctor’s detail page displayed in radio button list, with the login 

patient’s name and logout link shown on the page as well. [5 marks + 25 

marks (testing that it works as listed below)]

9.2.3.1. Test that if not login, cannot take an available appointment, and 

login link is shown on the page. [5 marks]

9.2.3.2. Test that can login and logout successfully. [5 marks]

3

4

9.2.3.3. Test that an appointment can be taken successfully after login as a 

patient, with the patient’s name and logout link shown on the page.

[10 marks]

9.2.3.4. Test that upon successful request to take an appointment, the page 

for the URL path clinic/myappoint/ is redirected to. [5 marks]

9.2.4. Paste the screen capture showing the form for a successfully login doctor to 

add an available appointment, with the login doctor’s name and logout link 

shown on the page as well. [5 marks + 20 marks (testing that it works as 

listed below)]

9.2.4.1. Test that if login as a patient to access this page, will have the 403 

forbidden error. [5 marks]

9.2.4.2. Test that an appointment can be added successfully after login as a 

doctor, with the doctor’s name and logout link shown on the page. 

[10 marks]

9.2.4.3. Test that upon successful added an appointment, the page for the 

URL path clinic/doctors/- is redirected to. [5 marks]

9.2.5. Paste two screen captures, one showing the “My appointment” page of a 

successfully login patient with the taken appointments, and one showing the 

“My appointment” page of a successfully login doctor with the taken 

appointments. [5 marks]

9.2.5.1. Test that directly accessing the URL of “My appointment” page 

when not login will be redirected to login page. [5 marks]