CHAPTER 1

INTRODUCTION

“The Aesthetic Clinic System” is a web-based clinic management application. The aim
of the system is to assist the user to book the appointment of the clinic on online. The system is
especially designed for the users who want to book an appointment to the clinic by doing login.
The patients can register initially with the minimum details and will be allowed to make an
appointment. Moreover, there are two panels in this system. They are Admin and User.
The patients can make an appointment with the clinic and therefore the admin of the
system can select or reject it. Besides, the admin can easily calculate bill and view sale reports.
Besides, the patients can choose the treatment and date by using this system. Moreover, the
system is also provided details information of contacts in order that the user has no difficulty
in searching the clinic. Besides, the user can visit to clinic at a selected date and time because
the system has already been recorded the appointment made by them.

1.1 Objectives

The objectives of the system are as follow:

❖ To book an appointment on online easily
❖ To provide economic reports to the owner monthly, weekly and yearly
❖ To reduce the manual work for managing items, sale and bills
❖ To do the works more effectively
❖ To enquiry what the patients want to know

1
 CHAPTER 2
OVERVIEW OF THE SYSTEM

2.1 Overview of the system

The Aesthetic Clinic System is a web-based application developed by using HTML,

CSS, Bootstrap and JavaScript for the front-end design, PHP for coding, and My SQL XAMPP
server for the back-end database. The roles of Admin and Patients are included in this system.
In the admin role, an admin user must log in. The admin has full control of the system.
Admin can manage treatments information and cost, manage sale information, calculate bills,
view sales report, booking confirmed or rejected.
In the patient role, patient must log in. Patient can book an appointment, can read
treatments information, can enquiry about they want to know and get invoice for the cost they
made.

2.2 Bootstrap
Bootstrap is an HTML, CSS, and JavaScript Framework, and it is useful to develop
responsive websites without rewriting the code for each device or screen. If you code once, it
just works for any browser, device, and screen. Bootstrap has not only HTML/CSS components
but also JS components. With Bootstrap, you get to use common HTML elements but with a
beautiful representation of items. Finally, you can use your own theme on top of Bootstrap,
making your code the most customizable ever.

Bootstrap Advantages

If we use Bootstrap in our applications, we take advantage of the following:

❖ Not Reinventing the Wheel. We don’t have to write more code.
❖ Extensive UI with Bootstrap themes.
❖ Open Source. You get to know the source code and change it.

Bootstrap Features

❖ HTML and CSS based design templates for forms, buttons, navigation, and other
components. Re-usable code with CSS classes.
❖ Out of the box JavaScript components with additional features like tooltips, modal
windows, etc. Modularity. Change or remove components or component colors.

2
2.3 Hypertext Preprocessor PHP

PHP is an open-source, server-side programming language that can be used to create

websites, applications, customer relationship management systems and more.
❖ PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
❖ PHP is a server-side scripting language that is embedded in HTML. It is used to
manage dynamic content, databases, session tracking, even build entire e-
commerce sites.
❖ It is integrated with a number of popular databases, including MySQL,
PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.
❖ PHP is pleasingly zippy in its execution, especially when compiled as an Apache
module on the Unix side. The MySQL server, once started, executes even very
complex queries with huge result sets in record-setting time.
❖ PHP supports a large number of major protocols such as POP3, IMAP, and
LDAP. PHP4 added support for Java and distributed object architectures (COM
and CORBA), making n-tier development a possibility for the first time.
❖ PHP is forgiving: PHP language tries to be as forgiving as possible.
❖ PHP Syntax is C-Like.

Figure 2.1 Features of PHP

3
2.4 My SQL

MySQL is a fast, easy-to-use RDBMS being used for many small and big businesses.
MySQL is developed, marketed and supported by MySQL AB, which is a Swedish company.
MySQL is becoming so popular because of many good reasons -

❖ MySQL is released under an open-source license. So, you have nothing to pay to use
it.
❖ MySQL is a very powerful program in its own right. It handles a large subset of the
functionality of the most expensive and powerful database packages.
❖ MySQL uses a standard form of the well-known SQL data language.
❖ MySQL works on many operating systems and with many languages including PHP,
PERL, C, C++, JAVA, etc.
❖ MySQL works very quickly and works well even with large data sets.
❖ MySQL is very friendly to PHP, the most appreciated language for web development.
❖ MySQL supports large databases, up to 50 million rows or more in a table. The default
file size limit for a table is 4GB, but you can increase this (if your operating system can
handle it) to a theoretical limit of 8 million terabytes (TB).
❖ MySQL is customizable. The open-source GPL license allows programmers to modify
the MySQL software to fit their own specific environments.

Figure 2.2 My SQL

4
2.5 Xampp

XAMPP is a cross-platform web server that is free and open-source. XAMPP is a short
form for Cross-Platform, Apache, MySQL, PHP, and Perl. XAMPP is a popular cross-platform
web server that allows programmers to write and test their code on a local webserver. It was
created by Apache Friends, and the public can revise or modify its native source code. It
includes MariaDB, Apache HTTP Server, and interpreters for PHP and Perl, among other
computer languages. Because of XAMPP’s simplicity of deployment, a developer can quickly
and easily install a WAMP or LAMP stack on an operating system, with the added benefit that
common add-in apps like WordPress and Joomla can also be loaded.

Needs for a Xampp

❖ XAMPP is simply a local host or server.

❖ This local server runs on your personal computer, whether it’s a desktop or a laptop.
❖ It is used to test clients or websites before publishing them to a remote web server.
❖ On a local computer, the XAMPP server software provides a suitable environment for
testing MYSQL, PHP, Apache, and Perl projects. Because most real-world web server
deployments share the same components as XAMPP, moving from a local test server
to a live server is straightforward.
Advantages

❖ In comparison to other web servers such as WAMP, it is simple to set up.

❖ It is Multi Cross-Platform, which implies it works on both Windows and Linux.
❖ With a single command, you may start and stop the entire web server and database
stack.
❖ Both a full and a standard version of XAMPP are available.
❖ It has a control panel that you can see contains start and stop buttons for specific
mechanisms, such as Apache, which is running through its Control Panel.
❖ It also includes OpenSSL, phpMyAdmin, MediaWiki, Joomla, WordPress, and a lot of
additional modules.
Disadvantage

❖ In comparison to the WAMP server, configuration and setting are more difficult.

5
2.6 Visual Studio Code

Visual Studio Code combines the simplicity of a source code editor with powerful
developer tooling, like IntelliSense code completion and debugging.
First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-
build-debug cycle means less time fiddling with your environment, and more time executing
on your ideas.
At its heart, Visual Studio Code features a lightning fast source code editor, perfect for
day-to-day use. With support for hundreds of languages, VS Code helps you be instantly
productive with syntax highlighting, bracket-matching, auto-indentation, box-selection,
snippets, and more. Intuitive keyboard shortcuts, easy customization and community-
contributed keyboard shortcut mappings let you navigate your code with ease.
For serious coding, you'll often benefit from tools with more code understanding than
just blocks of text. Visual Studio Code includes built-in support for IntelliSense code
completion, rich semantic code understanding and navigation, and code refactoring.
And when the coding gets tough, the tough get debugging. Debugging is often the one
feature that developers miss most in a leaner coding experience, so we made it happen. Visual
Studio Code includes an interactive debugger, so you can step through source code, inspect
variables, view call stacks, and execute commands in the console.
VS Code also integrates with build and scripting tools to perform common tasks making
everyday workflows faster. VS Code has support for Git so you can work with source control
without leaving the editor including viewing pending changes diffs.

2.7 Detail Design of the System

This system is mainly focused on maintaining treatments and booking information and
generating sales reports. The user can view details information of treatments and can get an
appointment. The admin can insert, delete and update the system information. The admin can
manage treatments list, view home, manage sale information and view sale reports. And then
the admin can confirm or reject the booking by patients.
If the patient is successful login step, user will view the services and see the details
which is offer by clinic. Users can book the appointment and can enquiry to clinic. Users can
manage their profile and view the status of appointment and their invoices.

6
The following figure shows System Flow Diagram for user role.

Start

Patient in the Sign up

system? No

Yes
Log in

Enter user name

or phone no &
password
No

Valid?

Yes
View treatment & Page
Info

Book Appointment

Is Patient No Display Login

Login? Form

Yes
Perform login
Display Booking process
Form
No

Enter Booking Is Yes Correct booking

Information information information
correct?

Display Booking
confirm or reject

Database
End

Figure 2.3 System Flow Diagram for user role

7
The following figure shows System Flow Diagram for admin role.

Start

Log in

Enter user
name or phone
no & password

No

Valid?

Yes

Manage & Add Manage View sale Invoices

Treatment Appointment reports

Display
Display Display
Treatment List
reports invoices

Accept or Reject
Appointment

Database
View
Appointment

Display
Appointment

End

Figure 2.4 System Flow Diagram for admin role

8
2.8 Database Design of the system

There are seven tables for database. They are admin table, booking table, contact table,
invoices table, patient table, show page table and treatments table. They are labeled in Figure
3.

9
Figure 2.5 Database Design of The Aesthetic Clinic System

10
 CHAPTER 3
IMPLEMENTATION

3.1 Implementation of the System

The system is implemented for two types of users: admin and patient. The admin not
only can add treatment and other details information about page but also can view sale report.
Moreover, the admin can choose select or reject the patient’s booking and assign their invoices.
The patients can book appointment and they can view about page, treatment details and view
their invoices and they can change their profile. The detailed implementation of the system is
illustrated in the following section.

3.1.1 Main Page

The first part of the system is “Main Page”. All users and admin can see about of page
information and all type of treatment and cost of treatment and details video link of treatment
from you tube. If you are a new user, you must first register on the signup page. If you are a
old user, you enter directly login.

Figure 3.1 Main Page

11
3.1.2 Contact Form

All users can ask questions which they want to know in contact form. Anyone who
comes to the website, whether a new user or an old registered user can ask questions about they
want to know in contact page. Those who want to inquire should ask after filling in the name,
phone number and e-mail address.

Figure 3.2 Enquiry from patient

12
3.1.3 Signup Form for Patient

New user registration in signup page by filling first name, last name, mobile number,
email address and password and repeat confirm password. And then click the “Signup” button
to complete the registration.

Figure 3.3 Signup Form for Patient

13
3.1.4 Login Form for Patient

Patient login form is the first page for old user to login with email address or phone
number and password correctly. If the user forgot their password, they can click “forgot
password?” button. Left side of the login page can be seen about of clinic information.

Figure 3.4 Login Form for Patient

14
3.1.5 Main Page of Patient

If the email and password are entered correctly, patient main page will appear as shown
in below. In this page, patients will see their home page, about of clinic information, details
description and details video link of each treatment. And then patient booking page, booking
history, invoices history, patient profile and setting.

Figure 3.5 Main Page of Patient

15
3.1.6 Treatment Page

In treatment page, patients can view all treatments description, cost of treatments and
details video of each treatment. Click “Detail Video link”, patient can see each video of all
treatment from you tube channel. If the patients click the picture, they will reach the booking
page.

Figure 3.6 Viewing Treatment by Patient

16
3.1.7 Appointment Page for Patient

In this page, patient can see detail information of clinic and patient booking form.
Patient can book the appointment by choosing date and time and select treatment they want to
do it. And then click the “Send” button, booking completed.

Figure 3.7 Appointment Page

17
3.1.8 Booking History of Patient

The patient can view the booking history which is selected or rejected by admin. And
also can see appointment date and appointment time. When the patient click the view button,
they can see details booking history.

Figure 3.8 Booking History of Patient

18
3.1.9 Invoices History of Patient

In the invoice history, patient can view the total cost of their treatment and patient’s
details information such as patient name, phone number, email address and date of first
registration at the clinic.

Figure 3.9 Invoices History of Patient

19
3.1.10 Patient’s Profile

Patient can view their profile (name, phone number, email address, registration date)
and they can change their name in profile. Patients can see about of clinic information on the
left side of this page.

Figure 3.10 Patient’s Profile

20
3.1.11 Patient’s Setting

Patient can change their password in the setting page. If the patient wants to set a new
password, first enter the current password and enter the new password twice, then press the
“Save change” button.

Figure 3.11 Patient’s Setting

21
3.1.12 Login Form for Admin

The admin login form is the first page for admin to log in with username and password.
If the admin doesn’t log in, he/she can click “Back to home page” and exit the home page.
When he/she don’t remember his/her password, he/she can change his/her password by clicking
on the text “Forgot password?”

Figure 3.12 Admin Login Form

22
3.1.13 Main Page of Admin

If the username and password are correctly entered, admin main page will be appeared.
In this page, the admin can control information of page, manage treatment description and cost
of treatment, accept or reject appointment by patients, searching sale invoices, can read enquiry
from patient and also can slip cost of invoices.

Figure 3.13 Admin Main Page

23
3.1.14 Managing Treatment by Admin

Admin can add many treatments (services) and cost of their treatment into the list of
treatment. In addition, admin can add detailed descriptions of treatments detail description and
detailed videos link from you tube channel. Admin can update all treatments and can also
delete the things they don’t want to add.

Figure 3.14 Managing Treatment

24
3.1.15 Managing Page information by Admin

Admin can manage the content and contact information such as email address, mobile
number, clinic opening and closing hours they want to display on the page.

Figure 3.15 Managing Page Information

25
3.1.16 Managing Appointment by Admin

Admin can view not only all appointment but also the selected or rejected appointment.
Admin can view booking records in new appointment page and notification. If the admin wants
to select or reject the patient’s bookings, they can click on the “view” button and they can not
only select or reject the bookings, but also view the details of this booking.

Figure 3.16 Managing Appointment

26
3.1.17 Managing Enquiry by Admin

Admin can read questions asked by patients and delete the questions they want to delete.
Admin can read the questions and answer them by email address or phone number.

Figure 3.17 Viewing Enquiry

3.1.18 List of Patients

The admin can not only view the registered patients but also assign the cost of their
treatment. They can delete any patient records they no longer want to add.

Figure 3.18 Patient’s List

27
3.1.19 List of Patient invoices

Admin can view cost of patient’s treatment assigned by admin and admin can issue
invoices slip to patients. Includes in their invoices, cost of treatment, patient’s name, patient’s
phone number, patient’s email address and registration date first in clinic.

Figure 3.19 List of Invoices

3.1.20 Sales Reports

Admin can search amount of sales reports by weekly, monthly and yearly. If the admin
searching the sales list between two dates, he/she can see the invoices for each patient.

Figure 3.20 Sale Reports by between dates

28
 If the admin searches for sales by monthly, he/she will see the sale list for each monthly.

Figure 3.21 Monthly Sales Reports

If the admin search by yearly, he/she can see the sales of each yearly according to the
year.

Figure 3.22 Yearly Sales Reports

29
3.1.21 Searching Appointment

Admin can search appointment by appointment number, patient’s phone number,

patient name and the name of the treatment booked by patient and can view details
information of search list.

Figure 3.23 Searching Appointment by Treatment name

30
3.1.22 Searching invoices

Admin can search invoices by invoices number, billing number, mobile phone
number and can view details information of invoices.

Figure 3.24 Searching Invoices by Phone number

31
 CHAPTER4
CONCLUSIONS

Aesthetic Clinic web application is implemented by using HTML, CSS, Bootstrap,

JavaScript, PHP and MySQL XAMPP. Aesthetic Clinic System is a web application. The key
concept is to minimize the amount of paper and convert all forms of documentation to digital
form. It can be observed that the required information can be obtained easily and accurately in
the computerized system. The user with minimum knowledge about computer can be able to
operate the system easily. Aesthetic Clinic System is very easy to use from anywhere if the
internet is available.
The patients can contact and book an appointment and can receive invoices from the
admin. It is an effort to contribute to the development of the manual system. To conclude, this
is a simple aesthetic clinic web application in which the admin can manage treatments, page
information, and patients list and sale reports that have been stored in MySQL XAMPP Server
database. Admin can check the booking date of the patients and check if it is available or not.
Moreover, the admin can reply to the patients by examining the records of the system.

32
 REFERENCES

1. www.w3schools.com

2. www.bootstrap.com

3. https://m.youtube.com

4. http://github.com/manifestineractive/jqvmap

5. www.fontawesome.com

6. http://w3layouts.com

33