1.

Chapter One

1.0 INTRODUCTION
A doctor appointment web application is a website that is used by patients and doctors for the
purpose of booking and scheduling appointments between them at their convenience.
The main aim of this doctor appointment system is to make patients meet doctors on ' 'one-on-
one' ' basis and at their convenience, without any delay or obstruction with the help of the
system administrator.
A user (patient, doctor or admin) only needs to create an account to be able to book an appointment.
The user is also capable of seeing his/her appointments.

Appointments are scheduled by the admin. All users require internet connection to access this system.
The framework used to realize this system is Angular cli, together with languages such as HTML,
CSS, are used for the User Interface design PHP for server-side scripting, Typescript and
JavaScript for client-side scripting and the MySQL database management system for data storage
and management.

1.1 Background of the Project

There are many patients around the city and villages who go hospitals and spend some time or days
without being attended to. Because of this, some get worse or even die waiting.
This delay might be as a result of the fact that doctors travel to attend to other critical situations
elsewhere.
This problem leaves the health sector with no choice than to seek for technical help. Thus the Doctor

Appointment Web App was designed to help out.

1.1.1 Examples of appointment systems and how they are used

The appointment system is not used only in the health sector but also in domains such as:

Teaching
Picktime is a free online appointment scheduling system which help teachers schedule classes,
meetings and events with students so that they can meet you when you are available. One only
needs to sign up, make his available time slots visible in his booking page and simply share the
link with the students. For more information about picktime visit [1].

Flight booking
FlightsLogic is an online international travel software used for booking flights and selling
tickets across Africa, America, Asia, and Europe. For more information about flightslogic refer
to [21.
 For identification
passcam (Cameroon Passport) booking system is used to apply for passport processing in Cameroon.
Simply create an account, fill necessary information, make payments and select any available day for
an appointment. Download and print your information sheet, wait until the appointment date reaches,
go to the specified regional immigration office, snap, sign and provide finger prints and wait for
some days to receive your passport. For more information about passcam visit [3].

1.2 Purpose of the study

The purpose of this study is to help hospitals and doctors attend to their patients at the patients'
and doctors' conveniences, thus reducing population queuing for doctors' services, which can
cause the death of many unattended patients.

1.3 Objectives
Save patients' lives
• Make doctors readily available to patients
Create timely appointments
Decongest hospitals except for emergence cases.

1.4 Aim of the project

This project aims at creating a web application that will permit and facilitate client registration
and booking of appointments.

1.5 Scope of the project

This project is limited to the facilities required to link a patient and a doctor via a web app for
the sole purpose of booking appointments.
1.6 Structure of the project
Chapter One focuses on general introduction, Chapter Two on the analysis and design, Chapter
Three on results and discussion. Lastly, Chapter Four dwells on conclusion of the project.
 2. Chapter Two

2.0 ANALYSIS AND DESIGN

2.1 Problem statement

There is a need for booking appointment online with a doctor, before meeting the said doctor.

2.2 Research aims/questions

What is the average number of patients visiting the hospital per day?
How many doctors are available on daily basis?
How many patients are attended to on daily basis?

Is every patient satisfied based on how long it takes before they are being attended
to? Is every doctor satisfied too?
Are there any solutions or suggestions proposed by any parties (doctor, patient or both)?
What do you think can be done to remedy this predicament?

2.3 Methodology
Research methods such as questionnaire, interview and others were used to gather necessary
requirements and data (answers) for the research questions above.

2.3.1 Why Angular cli?

Angular is my first ever framework to work with. I chose it because of its self-contained units
called components which are easy to style and add functionality to, using services invoked from
Angular Services. Angular is used in many companies today for the production of large scale
software.
It has many built-in libraries, provides a two way data binding and it is very verbose as it has a
bette boiler plate. Visit [4] and [51 for more information on the Angular framework.
Programming in Angular cli is done using components. A component contains four important
files:
+ [Link] for the web page content.
[Link] for styling and display properties.
[Link] for the definition of variables and functions.
[Link] for testing.
 The doctor appointment web problem statement was decomposed into loosely coupled but

tightly cohesive components and each designed and implemented. These subsystems were

integrated givi rise to the doctor web application. Various components included:

The admin
Doctor
Patient
Registration
Login
Schedule
Appointment
The Angular [Link] was used to handle navigation between different pages of the
application.
Folders named models and services are used to contain class and service files respectively for various
components.

2.3.2 Database
A database was created with five tables to store user data. The database was created using MySQL
database management system in Xampp windows version.

2.3.3 System logic

Users (admin, doctors and patients) are expected to create an account each for the purpose of
authentication. User data are stored in sessions in the database. Doctors' availabilities are posted in time
slots by the admin. Available slots have a blue background whereas unavailable or already booked slots
have red. Users are not permitted to interact with one another. Users see doctors' schedule in the "Book
Appointments" page and select a doctor according to their needs (disease and time). Patients can
modify their appointments. There is no need for appointments to be approved by doctor or admin.

2.4 User requirements

2.4.1 Admin
He/she requires the system to permit them to:
Create an account.
Login to such account.

•• Register all types of users.

 Have access to all system data.

•e Schedule doctors.
Book appointments.
Logout.

2.4.2 Doctor
He/she requires the system to permit them to:
Create an account.
Login to such account.
See their appointments.
Logout.

2.4.3 Patient
He/she requires the system to permit them to:
Create an account.
Login to such account.
Book appointments.
See their appointments.
Update their appointments.
Logout.

2.5 System Design

2.5.1 User interface design

The web framework used for this project is angular cli (for client side). It is used to design user
interfaces for the three types of users: admin, doctor, and patient.
Bootstrap and some inline, internal, and external style sheets are used to define various styles
for various pages.
Forms and computer dialogues will be used for data input and tables for data output.
Reports might only be on-screen but could also be printed.
All types of users are expected to have an account in the
system.

[Link] The admin interface

This interface is designed such that all admins can:
Register patients, doctors, and admins in case of them facing difficulties in registering.
See all patients, doctors, and admins.
Schedule doctors' availabilities for appointments.
 Book appointments for patients with booking difficulties.
View and modify daily/weekly/monthly/yearly generated reports.
The admin has access to all tables in the database. And there is only one type of admin.

[Link] The doctor interface

It is laid out such that, the doctor sees:
Only his/her appointment.
Update his/her profile, Logout.

[Link] The patient interface Patients

can:
Book appointments
Update appointments
Delete appointments
Update profile.
Logout.

2.6 Data Design

2.6.1 Database design

This is done in MySQL. A database is created with the name ang_appointment with five
tables named: admin, doctor, patient, schedule_doctor, and appointment, storing data for the
admin, doctor, patient, doctor schedule, and appointments respectively. The various entities,
their attributes, and their data integrity rules can be seen on the picture below:
oj .me Vdocto
.[Link] n
id : int(20) id : int(20) atien
u dname : varchar(60) O pname : varchar(50) id : int(20)
email : varchar(40) pphone : int(12) pname : varchar(50)
C) passwd : varchar(255) dname : varchar(60) email : varchar(40)
 phone : int(12) dspecialty : varchar(60) passwd : varchar(20)
specialty : varchar(60) C) reason : varchar(255) phone : int(12)
6) hospital : varchar(60) hospital : varchar(50) gender : varchar(10)
experience : int(3) aday : varchar(10) age : int(3)
priv_level : int(l) adate : date priv_level : int(l)
reg_date : datetime atime : time tor_status : enum('Active','lnactive') ae reg_date : datetime
&schedule doctor
_applied : timestamp id : int(20)
doctor_id : int(20) e tad i s e admin_id : int(4)id : int(20) day : varchar(10) 0
adname : varchar(50) date : date email : varchar(40) time : time passwd :
varchar(255)

schedule status : enum('Active','lnactive') gender : enum('Female',' Male')

phone : int(12)
priv_level : int(l)
reg_date : timestamp
2.6.2 Block diagram
This diagram shows the general flow of data and instructions in the system.
 Figure2:

2.6.3 Flowchart
This describes the flow and execution of instructions as the program code runs.
Figure3: Flowchart
 3. Chapter Three

3.0 RESULTS AND DISCUSSION

3.1 Results

3.1.1 Implcmcntation/findings
Framework used for project implementation is angular cli which is a component based web
development framework. It uses HTML, CSS, and TYPESCRIPT OR JAVASCRIPT for the clientside and in
this project, PHP and MY SQL are used for the server-side.
Xampp server has been used since it is effective for a few number of records and it is free too.
Microsoft VS Code has been my favorite source code editor, so it has been used for this project.

It has really facilitated the coding with its numerous useful extensions.

Google Chrome is also my favorite web browser and has been used in this project for running
the app at client-side.

3.1.2 Some important screenshots

Email
Login To Your
Account
Login Register Instead
If you are a doctor wanting to work with us kindly contact the central
administration through +237683667994 Or
romienmboulaye@[Link]

Figure4: login page

 Create Account With DAC
Name

Email
Email
Password
Password
Phone
Phone
Gender
Gender
Age
Age

Register
Login Instead
If you are a doctor wanting to work with us kindly contact the central
administration through +237683667994 or
ienrnboulaye@[Link]

Figure5: Patient registration page

Doctor Appointment Channel

Patients Admins Doctors Appointments Schedule Doctors Register
Patients
Name Phone

Email Gender

•assword Age

Registered Patient
ID
3 Name Email Phone Gender Age Registration Date Operations
3 nina 234421 male 16 2022-05-09 Edit Delete
32 mina mina@[Link] 3562 Male 29 2022-05-09 Edit Delete

Figure6: Admin's view of Patient registration page and list of patients

Register Adrnins
Pa ssvvord
Ern a il Gender ratzo@[Link]

Create/Update Adrnin
Reg i stered Ad no ins
D Narne En•ail Phone Gende Reg
Date
1 V1erveille 43643 1 2022-05-23
7 20 08:1 s
16 rorvtienrnboulaye7@grnaiI- 68366799 2022-05-1 6 Dei ete
con•
Figure7: Admin's view of Admin registration page and list of admins

Register Doctors

Registered Doctors
6 2022
•so
P
S? •sa2 sy•cmatrv n.H eue. 2022-05-23 opa
as 3672' [Link]-23 0'.
9
Figure7: Admin's view of Doctor Registration page and list of doctors

Patient Patient Doctor Doctor Appointment

Phone Reason Hospital Day Date Time Operations
Name Name Specialty
2022-
pl 65673 raizo cardiology reasoning poorly undem tuesday 0531 2-3pm Edit Delete

2022- 2-
S nina 453485645 mboulaye reasoning poorly yaounde tuesday 0531 Edit Delete
surgery 3pm
General D.H 2022-05- 7-8
4 mimi 909090 trgfgfgfghf Monday 23 Edit Delete
manyong Medicine Kumba am

Appointments

Figure8: Admin's view of Appointment page and list of appointments

 Schedule Available Doctors
Doctor ID Doctor Specialty Date
12 Psychiatry 05/25/2022
Doctor Narne Month Tirrte
Ratzo 5-6pm
Day Doctor
Status
Wed nesd ay Available

Scheduled Doctors
Doctor Doctor Doctor Day Doctor
Date Schedule Date Operations
Specialty Status
Mboulaye surgery May tuesday 2022- 23 Available 2022-05-21 Delete
3 10 Edit
0524 pro
Mboulaye surgery May tuesday 2022 -os- 3apr Available 2022-05-23
10 Edit Delete
n
s Mboulaye surgery May tuesday 2022- 5 Available 2022-05-23 Delete
10 0524 Edit
pm

11
 Figure9: Admin's view of Schedule page and list of scheduled doctors

Available Slots.
Unavailable slots.

Figurel 0: Patients' view of available doctors on their 'book appointment' page

3.2 Discussion
It was expected that patients and doctors would complain about the congestion in hospitals
especiall) in this COVID-19 era where there is need for social distance and the use of face-masks
which could suffocate them and they did just so.
It was equally expected that patients and doctors would be conscious of COVID-19 and maintain
stringent measures to prevent it, but it is not the case.

It is expected that people who have a problem will have at least a proposed solution to remedy
it. But due to the lack of knowledge of technology could help, no one has a proposed solution.

Notwithstanding, as it has always been the case, the above paragraphs depend only on the few
places visited and so global conclusions cannot be made.

For the implementation, angular cli has been fun to develop with, thanks to its component
based system, the ability to connect to MySQL and perform the CRUD operations easily and
its simple routing technique.
For server-side scripting, PHP was used to connect database and front end.
There are several back-end technologies used with Angular among which are Ruby on Rails, PHP,
[Link] — a JavaScript back-end and then use HTTP requests to gain access to the database.
The application frontend uses HTTP techniques such as GET and POST for data transfer (in JSON
format between the UI and the database. For more information visit [5].

1
I decided to use PHP because several big technology companies such WordPress, Joomla, Drupal,
Salesforce, Facebook, Canva and many others.

3.2.1 Limitations
The only difficulty I have faced so far is logging in to the system using registered user credentials. The
possible source of error has not yet been pinpointed. Because of this limitation, no sessions or cookies
are stored for users for this system for as of now. But I will continue troubleshooting to find the login
bug and fix it as soon as possible.
 4. Chapter Four

4.0 DISCUSSION AND RECOMMENDATIONS

4.1 Recommendation

4.1.1 Recommendation to hospitals

I recommend that stringent measures be taken and reinforced in hospitals for the prevention of
COVID-19.
Patients should be reminded of the deadliness of diseases like COVID-19 and cholera.
Proper hygiene should be maintained in hospitals.
Suggestion boxes should be provided in hospitals.

4.1.2 Recommendations to the University of Buea

I recommend that research topics be given to students as early as possible so that they can have
ample time to complete it.
Again, students should be given the responsibility to propose their own projects/research topics —
three in number of which one will be approved.

4.2 Conclusion
I want to thank everyone who has contributed in one way or the other to assist me get to this level of
education.
 I say thanks to my HOD for giving me the opportunity to this project 'doctor appointment app, using
a framework—angular cli'. The angular cli framework is renown in the job market, so this is really a
good start for my full stack web development career.

I have really learned a lot from this activity.

References
[1] "Picktime is a free online appointment scheduling software." Teaching Scheduling
Software. [Link]. [Link]/scheduling-software/teaching (accessed Mar. 25,
2022).
[2] "FlightsLogic is an international travel technology and travel software used for booking
flights." FlightsLogic Global Airfare APIs. [Link]/flight-
[Link] (accessed Apr. 1, 2022).
[3] "Applicants must connect to the pre-enrolment site." New Passport Application Process.
[Link]. [Link] (accessed Apr. 2, 2022).
[4] J. Reis. "Angular vs. react: which one to learn." [Link].
[Link]/blog/angular-vs-react/amp/(accessed Mar. 17, 2022).
[5] D.P. Acharya. "PHP vs. angular." [Link]. [Link]/blog/php-vs-
angular/(accessed Mar. 20, 2022).