Șef lucrări dr. ing. Stefan Udristoiu SEPTEMBRIE 2019 CRAIOVA ii UNIVERSITATEA DIN CRAIOVA FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ… [604784]

Licență

Șef lucrări dr. ing. Stefan Udristoiu SEPTEMBRIE 2019 CRAIOVA ii UNIVERSITATEA DIN CRAIOVA FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ… [604784]

Byadmin ianuarie 1, 2024

i

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI
ELECTRONICĂ

DEPARTAMENTUL DE CALCULATOARE ȘI TEHNOLOGIA
INFORMAȚIEI

LUCRARE DE DI SERTAȚIE
Cirjaliu Alina -Maria

COORDONATOR ȘTIINȚIFIC
Șef lucrări dr. ing. Stefan Udristoiu

SEPTEMBRIE 2019
CRAIOVA

ii

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI
ELECTRONICĂ

DEPARTAMENTUL DE CALCULATOARE ȘI TEHNOLOGIA
INFORMAȚIEI

HOSPITAL MANAGEMENT SYSTEM
Cirjaliu Alina -Maria

COORDONATOR ȘTIINȚIFI C
Șef lucrări dr. ing. Stefan Udristoiu

SEPTEMBRIE 2019
CRAIOVA

iii
„An investment in knowledge pays the best interest .”
Benjamin Franklin

iv
DECLARAȚIE DE ORIGINALITATE

Subsemnatul Cirja liu Alina -Maria , student: [anonimizat], Calculatoare și Electronică a Universit ății din Craiova, certific prin preze nta că am luat la
cunoșt ință de cele prezentate mai jos și că î mi asum, în acest context, originalita tea lucrării mele de
disertație :
 cu titlul Hospital Management System,
 coordonată de Șef lucrări dr. ing. Stefan -Cristinel Udristoiu ,
 prezentată în sesiun ea SEPTEMBRIE 2019 .
La elaborarea lucrării de disertație , se consideră plagiat una dintre următoarele acțiuni:
 reproducerea exactă a cuvintelor unui alt autor, dintr -o altă lucrare, în limba română sau prin
traducere dintr -o altă limbă, dacă se omit ghili mele și referința precisă,
 redarea cu alte cuvinte, reformularea prin cuvinte proprii sau rezumarea ideilor din alte
lucrări , dacă nu se indică sursa bibliografică,
 prezentarea unor date experimentale obținute sau a unor aplicații realizate de alți autor i fără
menționarea corectă a acestor surse,
 însușirea totală sau parțială a unei lucrări în care regulile de mai sus sunt respectate, dar care
are alt autor.
Pentru evitarea acest or situații neplăcute se recomandă:
 plasarea într e ghilimele a citatelor d irecte și indicarea referinței într -o listă corespunzătoare la
sfărșitul lucrării,
 indicarea în text a reformulării unei idei, opinii sau teorii și corespunzător în lista de referințe
a sursei originale de la care s -a făcut preluarea,
 precizarea sursei d e la care s -au preluat date experimentale, descrieri tehnice, figuri, imagini,
statistici, tabele et caetera ,
 precizarea referințelor poate fi omisă dacă se folosesc informații sau teorii arhicunoscute, a
căror paternitate este unanim cunoscută și accepta tă.
Data , Semnătura candidat: [anonimizat] ,

v

UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică

Departamentul de Calculatoare și Tehnologia Informației
Aprobat la data de
…………………
Șef de departament,
Prof. dr. ing.
Mari us BREZOVAN

LUCRARE DE DI SERTAȚIE

Numele și prenumele student: [anonimizat]/ -ei:
Cirjaliu Alina -Maria

Enunțul temei:

Hospital Management System

Datele de pornire:

Promovarea policlinicilor si a spitalelor prin posibilitatea
realizarii programarilor on line pe o singură platforma web,
accesibilă tuturor pacientilor.

Conținutul lucrării :

1. Introduction
2. Web application – Interface presentation
3. Web application – Implementation
4. Conclu sions
5. Bibliogra phy

Material grafic obligatoriu:
Capturi de ecran
Secvențe de cod

Consultații:
Periodice
Conducătorul științific
(titlul, nume și prenume, semnătura): Șef lucrări dr. ing. Stefan -Cristinel Udristoiu

Data eliberării temei :
01.12.201 8

Termenul estimat de predare a
lucrării :
01.06.2019

Data predări i lucrării de către student
și semnătura acestuia:
01.09.2019

vi

UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică

Departamentul de Calculatoare și Tehnologia Informației

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC

Numele ș i prenumele candida tului/ -ei: Cirjaliu Alina -Maria
Specializarea: Information Systems for e -Business
Titlul lucrării : Hospital management system
Locația în care s -a realizat practica de
documentare (se bifează una sau mai
multe din opțiunile din dreapt a): În facultate □
În producție □
În cercetare □
Altă locație:

În urma analizei lucrării candidatului au fost constatate următoarele:
Nivelul documentării Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine
□
Tipul proiectului Cercetare
□ Proiectare
□ Realizare
practică □ Altul

Aparatul matematic utilizat Simplu
□ Mediu
□ Complex
□ Absent
□
Utilitate Contract de
cercetare □ Cercetare
internă □ Utilare
□ Altul

Redactarea lucrării Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine
□
Partea grafică, desene Insuficient ă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Realizarea
practică Contribuția autorului Insuficientă
□ Satisfăcătoare
□ Mare
□ Foarte mare
□
Complexitatea
temei Simplă
□ Medie
□ Mare
□ Complexă
□
Analiz a cerințelor Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine
□
Arhitectura Simplă
□ Medie
□ Mare
□ Complexă
□

vii
Întocmirea
specificațiilor
funcționale Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Implementarea Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Testarea Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Funcționarea Da
□ Parțială
□ Nu
□
Rezultate experimentale Experiment propriu
□ Preluare din bibliografie
□
Bibliografie Cărți
Reviste
Articole
Referințe web

Comentarii
și
observații

În concluzie, se propune:

ADMITEREA LUCRĂRII
□ RESPINGEREA LUCRĂRII
□

Data, Semnătura conducăto rului științific,

viii
PAPER SUMMARY
This dissertation paper entitled “Hospital Management System ” presents a web application
created for the purpose of making the process of booking a doctor appoiment easy without any
formalities .
The webb application has 4 panels for three types of users. Each type of user has different
attributions: admin user, doctor user, patient user.
The first page that e very type of user will see is the main page of the web application, from
here the users can login with an ex istyng account or for the patient user that dose not have an account
registered he/she can create a new one.
The three users has different roles for example, the admin user has the most important role in
the web application, the admin use r can add new doctor specialization , add new doctors into the web
platform, set up the corect fees for the appointments, can edit or delete user accounts, d octors a nd
patients. The doctor user can login in the application with a given account that is already set up by the
admin user, can edit his own prof ile and view the appoiment history and schedule. From this screen he
can cancel an active appointment. The patien t user can register an acount if he/she dose not have an
existing one , after login the patient can book an appoiment by selecting first a doctor specialization
and aft er he/she can choose from a list of doctors that has the selected specialization.
The scope of developing this web application „Hospital management system ” was to simplyfy
the hospital pro cess of booking an appoint ment for both patients and doctors.

Termenii cheie : web application , admin , doctors , Technologies, Patients

ix
Table of contents
1 INTRODUCTION ………………………….. ………………………….. ………………………….. ………………………….. ……. 1
1.1 SCOPE ………………………….. ………………………….. ………………………….. ………………………….. …………… 1
1.2 MOTIVATION ………………………….. ………………………….. ………………………….. ………………………….. …… 1
1.3 APPLICATION WORKFLOW ………………………….. ………………………….. ………………………….. ………………….. 1
1.4 USED TECHNOLOGIES ………………………….. ………………………….. ………………………….. ……………………….. 2
1.4.1 PHP ………………………….. ………………………….. ………………………….. ………………………….. …………. 4
1.4.2 MySQL Database ………………………….. ………………………….. ………………………….. ……………………. 6
1.4.3 HTML ………………………….. ………………………….. ………………………….. ………………………….. ………. 7
1.4.4 CSS (Cascading Style Sheets) ………………………….. ………………………….. ………………………….. …….. 8
1.4.5 JavaScript ………………………….. ………………………….. ………………………….. ………………………….. .. 11
1.4.6 jQuery ………………………….. ………………………….. ………………………….. ………………………….. ……. 15
1.5 APPLICATION ARCHITECT URE ………………………….. ………………………….. ………………………….. …………….. 17
2 WEB APPLICATION – INTERFACE PRESENTATI ON………………………….. ………………………….. ………………. 24
2.1 HOME PAGE ………………………….. ………………………….. ………………………….. ………………………….. ….. 24
2.1.1 Register ………………………….. ………………………….. ………………………….. ………………………….. ….. 25
2.1.2 Login Screen for all tipes of users. ………………………….. ………………………….. ………………………… 27
2.1.3 Log out ………………………….. ………………………….. ………………………….. ………………………….. …… 29
2.1.4 Change Password ………………………….. ………………………….. ………………………….. …………………. 30
2.2 THE DASHBOARD PAGE ………………………….. ………………………….. ………………………….. …………………… 30
2.2.1 Dasboard Page functionalityes for the Admin user ………………………….. ………………………….. ….. 31
2.2.2 Dasboard Page Functionality -Doctor user ………………………….. ………………………….. ……………… 35
2.2.3 Dashboard Page Functionality – Patient user ………………………….. ………………………….. …………. 36
3 WEB APPLICATION – IMPLEMENTATION ………………………….. ………………………….. …………………………. 36
3.1 THE DATABASE ………………………….. ………………………….. ………………………….. ………………………….. … 37
3.2 LOGIN PAGE ………………………….. ………………………….. ………………………….. ………………………….. …… 39
3.2.1 Registe r ………………………….. ………………………….. ………………………….. ………………………….. ….. 41
3.2.2 Log out ………………………….. ………………………….. ………………………….. ………………………….. …… 44
3.3 CHANGE PASSWORD ………………………….. ………………………….. ………………………….. ……………………… 44
3.4 THE DASHBOARD PAGE – FUCTIONALITIES FOR TH E PATIENT USER ………………………….. ………………………….. .. 46
3.4.1 Book an appointment ………………………….. ………………………….. ………………………….. ……………. 47
3.4.2 Edit Profile ………………………….. ………………………….. ………………………….. ………………………….. . 51
3.4.3 The get doctor ………………………….. ………………………….. ………………………….. ……………………… 51
3.4.4 Get Fees ………………………….. ………………………….. ………………………….. ………………………….. …. 52

x
3.5 THE DASHBOARD PAGE – FUCTIONALITIES FOR TH E ADMIN USER ………………………….. ………………………….. … 52
3.5.1 Add Doctor ………………………….. ………………………….. ………………………….. ………………………….. 54
3.5.2 Doctor Specialization ………………………….. ………………………….. ………………………….. …………….. 58
3.5.3 Edit Doctor ………………………….. ………………………….. ………………………….. ………………………….. 61
3.5.4 Edit Specialization ………………………….. ………………………….. ………………………….. …………………. 62
3.6 THE DASHBOARD PAGE – FUCTIONALITIES FOR TH E DOCTOR USER ………………………….. ………………………….. . 63
3.6.1 Appointment History ………………………….. ………………………….. ………………………….. ……………… 64
4 CONCLUSIONS ………………………….. ………………………….. ………………………….. ………………………….. ……. 68
5 BIBLIOGRAPHY ………………………….. ………………………….. ………………………….. ………………………….. …… 69
A. SOURCE CODE ………………………….. ………………………….. ………………………….. ………………………….. ……. 70
B. CD / DVD ………………………….. ………………………….. ………………………….. ………………………….. …………… 76

xi
LIST OF FIGURES
FIGURE 1 JAVASCRIPT IN BROWSER ………………………….. ………………………….. ………………………….. ……………………. 14
FIGURE 2. THE ROOT COMPONENT ………………………….. ………………………….. ………………………….. …………………….. 18
FIGURE 3. ASSETS DIRECTORY ………………………….. ………………………….. ………………………….. ………………………….. . 21
FIGURE 4. APPLICATION DIRECTORY ………………………….. ………………………….. ………………………….. ……………………. 22
FIGURE 5. ADMIN DIRECTORY ………………………….. ………………………….. ………………………….. ………………………….. . 23

xii
LIST OF TABLES
TABLE 1. THE DATABASE ………………………….. ………………………….. ………………………….. ………………………….. ……. 38

1
1 INTRODU CTION
1.1 Scop e
The scope of this dissertation project is to ease the doctors appoitment procedure.
Promote interaction between patients and doctors by having a web plat form where as a doctor
you can post about the consultation fees, clinical examination, doctors specialization working
days and hours.
1.2 Motiva tion
Patiens has to do more actions for beeing able to book a doctor consultation. By
developing this web applicatio n the operations for booking a doctor appointmen are
simplyfied. The patients user has to register an account, login in the web application and
book an appoiment to the doctor they choose. Also for doctors the proces is simplyfied, the
doctors can view the appoiment history, set up the fees for the consultation and view the
schedule for the week, also they can cancel an appoiment if is necesarry.
1.3 Application workflow
The Hospital Management System Application is divided into three sections each
section fo r each type of user: admin section, doctors section and patients section.
The back -end is accessible to the Admin user . This does not mean, however, that the
same category of users have the same rights. Administrator, of course, has full rights over all
application data, starting with the approval of new doctors, doctor specialization or patients
wishing to join this web application and even deleting and editing existing accounts . On the
other hand, doctors only have editing / deleting rights on their own accounts and registered
appoiments .
The front -end is equally accessible to patients . Here, patients can book doctor
appointments posted by the admin user based on certain filters ( doctor specialization,
alavabile booking days and hours ).

2
1.4 Used technologi es
In the web domain, there are two great concepts – client and server. The client or web
browser is the terminal where the user receives the information served by the server through a
protocol. Most commonly used is the Hypertext Transfer Protocol (HTTP) protocol.
The application of this dissertation works on both the client and the server. Therefore, a
series of main and secondary technologies (somewhat complementing the main features) that
run on both the client and the server have been used.
For the cli ent side, the following technologies are used:

 HTML 5 – HTML or Hyper Text Markup Language is the standard language for
displaying web pages. It is a markup language because it uses bookmarks / tags to
store / organize / display the information to the cli ent / browser. Version 5 is
currently the latest language version, offering far more features for today's
technologies.
 CSS 3 – CSS or Cascade Style Sheet is the language that handles the design of
HTML elements / tags. The latest version, 3, offers many f eatures compared to the
previous version, most of which are found on the mobile market segment
(smartphone / tablet browsers).
 JavaScript – is the standard web scripting language. Scripts produce actions that
allow for better interaction of the user with t he website. Like HTML and CSS,
JavaScript runs directly into the browser so all three of these languages do not
require external libraries / dependencies.
 jQuery – jQuery is one of the most popular client -side JavaScript frameworks. With
this framework, the DOM Objects (Document Object Model) can be manipulated
very easily using the CSS syntax (# for id and class for classes). The version used is
1.11, this being the most stable at this time.
 Bootstrap – Bootstrap is another framework, but it is for desig n purposes. Using
CSS3 for design and jQuery for functionalities. It is one of the most popular
frameworks of its kind at this time, thanks to well -defined classes, easy -to-use
functionalities, and especially for responsive design (the elements of the web page
are folded so that they appear well both on a resolution computer and mobile
resolution – smartphone or tablet). Both the management panel and the teaching

3
staff panel are 100% accomplished within this framework. The source of the
administration panel is https://colorlib.com/polygon/elaadmin/index.html and the
front end is https://www.themeineed.com/downloads/bravana -lite-free-bootstrap –
business -template
 Other JavaScript plugins: jQuery nicescroll, jQuery timepicker, select2, jQuery
metisMenu, jQuery slimscroll, screenfull + related CSS files. These plug -ins are
related to the design of certain elements and a better user experience on the site.

For the server side, the following technologies were used:

 PHP – PHP: Hypertext Preprocessor is one of the most popular / popular scripting
languages on the server in the world. Why? Because it is open -source (anyone can
contribute to its development) so it's free, it has a very large and active community,
it runs directly on the server and its download and i nstallation is very fast. This
language is the primary rival of scripting language on ASP.net (Microsoft).

MySQL has been used as the DBMS (Database Management System). It is the most
popular open -source relational database DBMS, currently available.
To w ork with PHP and MySQL, the XAMPP environment (Apache + Maria DB + PHP
+ Perl) was installed. This is a popular platform for developing a project in the Windows
operating system, a project that uses PHP and MySQL. Practically, using this deployment
environ ment, an offline server is configured on its own computer with Apache (the most
popular / used open source HTTP server in the world). At the same time, PHP, MySQL and a
database management system called PHPMyAdmin are also installed in this environment.
This platform allows us to create and run a web application that uses PHP and MySQL.

As an integrated software development environment, PhpStorm was used. This is a
very powerful IDE on PHP but also on the other client -side technologies mentioned above.
Google Chrome (together with Developer Tools) and Mozilla Firefox (along with Firebug)
have been used to test the app.

4

1.4.1 PHP
PHP (Hypertext Preprocessor) started out as a small open source project that evolved as more
and more people found out how usef ul it was. Rasmus Lerdorf unleashed the first version of
PHP way back in 1994.
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 in tegrated 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 st arted, 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.
Common uses of PHP
PHP performs system functions, from files on a system it can create, open, read, write, and
close them.
PHP can handle forms, gather data from files, save data to a file, through email y ou can send
data, return data to the user.
 You add, delete and modify elements within your database through PHP.
 Access coo kies variables and set cookies.
 Using PHP, you can restrict users to acc ess some pages of your website.
 It can encrypt data.
Characte ristics of PHP
Five important characteristics make P HP's practical nature possible :

5
 Simplicity
 Efficiency
 Security
 Flexibility
 Familiarity
"Hello World" Script in PHP
To get a feel for PHP, first start with simple PHP scripts. Since "Hello, World!" is an
essential example, first we will create a friendly little "Hello, World!" script.
As mentioned earlier, PHP is embedded in HTML. That means that in amongst your normal
HTML (or XHTML if you're cutting -edge) you'll have PHP statements like this –
<html>

<head>
<title>Hello World </title>
</head>

</html>
It returns the following result −
Hello, World!

If you examine the HTML output of the above example, you'll notice that the PHP co de is not
present in the file sent from the server to your Web browser. All of the PHP present in the
Web page is processed and stripped from the page; the only thing returned to the client from
the Web server is pure HTML output.

All PHP code must be inc luded inside one of the three special markup tags ATE are
recognised by the PHP Parser.
<?php PHP code goes here ?>

6

<? PHP code goes here ?>

1.4.2 MySQL Database
MySQL is an Oracle -backed open source relational database management system (RDBMS)
based on Structured Query Language (SQL). MySQL runs on virtually all platforms,
including Linux, UNIX and Windows. Although it can be used in a wide range of
applications, MySQL is most often associated with web applications and online publishing.
MySQL is an important component of an open source enterprise stack called LAMP. LAMP
is a web development platform that uses Linux as the operating system, Apache as the web
server, MySQL as the relational database m anagement system and PHP as the object -oriented
scripting language. (Sometimes Perl or Python is used instead of PHP.)
Today, MySQL is the RDBMS behind many of the top websites in the world and countless
corporate and consumer -facing web -based applications , including Facebook, Twitter and
YouTube.
How MySQL works
MySQL is based on a client -server model. The core of MySQL is MySQL server, which
handles all of the database instructions (or commands). MySQL server is available as a
separate program for use in a client -server networked environment and as a library that can
be embedded (or linked) into seperate applications.
MySQL operates along with several utility programs which support the administration of
MySQL databases. Commands are sent to MySQLServer via the MySQL client, which is
installed on a computer.
MySQL was originally developed to handle large databases quickly. Although MySQL is
typically installed on only one machine, it is able to send the database to multiple locations,
as users are able to ac cess it via different MySQL client interfaces. These interfaces send
SQL statements to the server and then display the results.

7
Core MySQL features
MySQL enables data to be stored and accessed across multiple storage engines, including
InnoDB, CSV, and NDB . MySQL is also capable of replicating data and partitioning tables
for better performance and durability. MySQL users aren't required to learn new commands;
they can access their data using standard SQL commands.
MySQL is written in C and C++ and accessib le and available across over 20 platforms,
including Mac, Windows, Linux and Unix. The RDBMS supports large databases with
millions records and supports many data types including signed or unsigned integers 1, 2, 3,
4, and 8 bytes long; FLOAT; DOUBLE; CHAR ; VARCHAR; BINARY; VARBINARY;
TEXT; BLOB; DATE; TIME; DATETIME; TIMESTAMP; YEAR; SET; ENUM; and
OpenGIS spatial types. Fixed – and variable -length string types are also supported.
For security, MySQL uses an access privilege and encrypted password system th at enables
host-based verification. MySQL clients can connect to MySQL Server using several
protocols, including TCP/IP sockets on any platform. MySQL also supports a number of
client and utility programs, command -line programs and administration tools suc h as MySQL
Workbench.
Compatibility with other services
MySQL was designed to be compatible with other systems. It supports deployment in
virtualized environments, such as Amazon RDS for MySQL, Amazon RDS for MariaDB and
Amazon Aurora for MySQL. Users can transfer their data to a SQL Server database by using
database migration tools like AWS Schema Conversion Tool and the AWS Database
Migration Service.

1.4.3 HTML
HTML was first created by Tim Berners -Lee, Robert Cailliau, and others starting in 1989. It
stands for Hyper Text Markup Languag e.

8
Hypertext means that the document contains links that allow the reader to jump to other
places in the document or to another document altogether. The la test version is known as
HTML5.
A Markup Language is a way that computer s speak to each other to control how text is
processed and presented. To do this HTML uses t wo things: tags and attributes.
What are Tags and Attributes?
Tags and attributes are the basis of HTML.
They work together but perform different functions – it is worth investing 2 minutes in
differentiating the two.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and they are usually enclosed in
angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes take the form of an opening tag
and additional info is placed inside.
An example of an attribute is:
<img src="mydog .jpg" alt="A photo of my dog." >
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

1.4.4 CSS ( Cascading Style Sheets )
CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” While HTML is
used to structure a web document (defin ing things like headlines and paragraphs, and
allowing you to embed images, video, and other media), CSS comes through and specifies
your document’s style —page layouts, colors, and fonts are all determined with CSS. Think of

9
HTML as the foundation (every h ouse has one), and CSS as the aesthetic choices (there’s a
big difference between a Victorian mansion and a mid -century modern home).
How Does CSS Work?
CSS brings style to your web pages by interacting with HTML elements. Elements are the
individual HTML components of a web page —for instance a paragraph —which in HTML
might look like this:
<p>This is my paragraph!</p>

If you wanted to make this paragraph appear pink and bold to people viewing your web page
through a web browser, you’d use CSS code that loo ks like this:
p { color:pink; font-weight:bold; }

In this case, “p” (the paragraph) is called the “selector” —it’s the part of CSS code specifying
which HTML element the CSS styling will effect. In CSS, the selector is written to the left of
the first curly bracket. The information between curly brackets is called a declaration, and it
contains properties and values that are applied to the selector. Properties are things like font
size, color, and margins, while values are the settings for those propert ies. In the example
above, “color” and “font -weight” are both properties, and “pink” and “bold” are values. The
full bracketed set of
{ color:pink; font-weight:bold; }

is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. Th ese same
basic principles can be applied to change font sizes, background colors, margin indentations,
and more. For instance. . .
body { background -color:lightblue; }

10
. . .would make your page’s background light blue, or. . .
p { font-size:20px; color:red; }

. . .will create a 20 point font paragraph with red letters.
External, Internal, or Inline CSS?
You might be wondering how this CSS code is actually applied to HTML content, though.
Much like HTML, CSS is written in simple, plain text through a text editor or word processor
on your computer, and there are three main ways to add that CSS code to your HTML pages.
CSS code (or Style Sheets) can be external, internal, or inline. External style sheets are saved
as .css files and can be used to deter mine the appearance of an entire website through one file
(rather than adding individual instances of CSS code to every HTML element you want to
adjust). In order to use an external style sheet, your .html files need to include a header
section that links to the external style sheet and looks something like this:
<head>
<link rel=”stylesheet” type=”text/css” href=mysitestyle.css”>
</head>

This will link the .html file to your external style sheet (in this case, mysitestyle.css), and all
of the CSS instru ctions in that file will then apply to your linked .html pages.

Internal style sheets are CSS instructions written directly into the header of a specific .html
page. (This is especially useful if you have a single page on a site that has a unique look.) A n
internal style sheet looks something like this. . .
<head>
<style>
Body { background -color:thistle; }
P { font-size:20px; color:mediumblue; }
</style>
</head>

11
. . . a background color and paragraphs with 20 point, medium blue font will now be app lied
to this single .html page.

Finally, inline styles are snippets of CSS written directly into HTML code, and applicable
only to a single coding instance. For example:
<h1 style=”font -size:40px;color:violet;”>Check out this headline!</h1>

Would cause one specific headline on a single .html page to appear in violet, 40 point font.
Generally speaking, external style sheets are the most efficient method for implementing CSS
on a website (it’s easier to keep track of and implement a site’s style from a ded icated CSS
file), while internal style sheets and inline style can be used on a case by case basis when
individual style changes need to be made.
So if HTML is the foundation, frames, walls, and girders supporting your website, consider
CSS the paint color , window styles, and landscaping that comes on afterward. You can’t get
anywhere without putting that foundation up first, but —once you do —you’ll want to follow
up with some style, and CSS is the ticket to unleashing your inner decorator.

1.4.5 JavaScript
JavaScript was initially created to “make web pages alive”.
The programs in this language are called scripts. They can be written right in a web page’s
HTML and run automatically as the page loads.
Scripts are provided and executed as plain text. They don’t ne ed special preparation or
compilation to run.
In this aspect, JavaScript is very different from another language called Java.

12
Why JavaScript?
When JavaScript was created, it initially had another name: “LiveScript”. But Java was very
popular at that time, so it was decided that positioning a new language as a “younger brother”
of Java would help.
But as it evolved, JavaScript became a fully independent language with its own specification
called ECMAScript, and now it has no relation to Java at all.
Today, JavaScript can execute not only in the browser, but also on the server, or actually on
any device that has a special program called the JavaScript engine.
The browser has an embedded engine sometimes called a “JavaScript virtual machine”.
Different engines have different “codenames”. For example:
V8 – in Chrome and Opera.
SpiderMonkey – in Firefox. There are other codenames like “Trident” and “Chakra” for
different versions of IE, “ChakraCore” for Microsoft Edge, “Nitro” and “SquirrelFish” for
Safari, etc.
The terms above are good to remember because they are used in developer articles on the
internet. We’ll use them too. For instance, if “a feature X is supported by V8”, then it
probably works in Chrome and Opera.
How do engines work?
Engines are complicate d. But the basics are easy.
The engine (embedded if it’s a browser) reads (“parses”) the script.
Then it converts (“compiles”) the script to the machine language.
And then the machine code runs, pretty fast.
The engine applies optimizations at each step of the process. It even watches the compiled
script as it runs, analyzes the data that flows through it, and applies optimizations to the
machine code based on that knowledge. When it’ s done, scripts run quite fast.

13
What can in -browser JavaScript do?
Modern JavaScript is a “safe” programming language. It does not provide low -level access to
memory or CPU, because it was initially created for browsers which do not require it.
JavaScript’s capabilities greatly depend on the environment it’s running in. For inst ance,
Node.js supports functions that allow JavaScript to read/write arbitrary files, perform network
requests, etc.
In-browser JavaScript can do everything related to webpage manipulation, interaction with
the user, and the webserver.
For instance, in -browser JavaScript is able to:
 Add new HTML to the page, change the existing content, modify styles.
 React to user actions, run on mouse clicks, pointer movements, key presses.
 Send requests over the network to remote servers, download and upload files (so –
called AJAX and COMET technologies).
 Get and set cookies, ask questions to the visitor, show messages.
 Remember the data on the client -side (“local storage”).
What CAN’T in -browser JavaScript do?
JavaScript’s abilities in the browser are limited for the sake of the user’s safety. The aim is to
prevent an evil webpage from accessing private informat ion or harming the user’s data.
Examples of such restrictions include:
JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or
execute programs. It has no direct access to OS system functions.
Modern browsers allow it to work with files, but the access is limited and only provided if the
user does certain actions, like “dropping” a file into a browser window or selecting it via an
<input> tag.
There are ways to interact with camera/microphone and other devices, but they require a
user’s explicit permission. So a JavaScript -enabled page may not sneakily enable a web –
camera, observe the surroundings and send the information to the NSA.
Different tabs/windows generally do not know about each other. Sometimes they do, for
example when one window uses JavaScript to open the other one. But even in this case,
JavaScript from one page may not access the other if they come from different sites (from a
different domain, protocol or port).

14
This is called the “Same Origin Policy”. To work around that, both pages must agree for data
exchange and contain a special JavaScript code that handles it. We’ll cover that in the
tutorial.
This limitation is, again, for the user’s safety. A page from http://anysite.com which a user
has opened must not be able to access another browser tab with the URL http://gmail.com
and steal information from there.
JavaScript can easily communicate over the net to the server where the current page came
from. But its ability to receive data from other sites/domains is crippled. Though possible, it
requires explicit agreement (expressed in HTTP headers) from the remote side. Once again,
that’s a safety limitation.

Figure 1 JavaScript In Browser

What makes JavaScript unique?
There are at least three great things about JavaScript:
 Full integration with HTML/CSS.
 Simple things are done simply.
 Support by all major browsers and enabled by default.
JavaS cript is the only browser technology that combines these three things.

15
That’s what makes JavaScript unique. That’s why it’s the most widespread tool for creating
browser interfaces.
That said, JavaScript also allows to create servers, mobile applications, etc.
Languages “over” JavaScript
The syntax of JavaScript does not suit everyone’s needs. Different people want different
features.
That’s to be expected, because projects and requirements are different for everyone.
So recently a plethora of new languages appeared, which are transpiled (converted) to
JavaScript before they run in the browser.
Modern tools make the transpilation very fast and transparent, actually allowing developers
to code in another language and auto -converting it “under the hood”.
Examp les of such languages:
CoffeeScript is a “syntactic sugar” for JavaScript. It introduces shorter syntax, allowing us to
write clearer and more precise code. Usually, Ruby devs like it.
TypeScript is concentrated on adding “strict data typing” to simplify t he development and
support of complex systems. It is developed by Microsoft.
Flow also adds data typing, but in a different way. Developed by Facebook.
Dart is a standalone language that has its own engine that runs in non -browser environments
(like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
There are more. Of course, even if we use one of transpiled languages, we should also know
JavaScript to really understand what we’re doing.

1.4.6 jQuery

jQuery is a fast and concise JavaSc ript Library created by John Resig in 2006 with a nice
motto: Write less, do more . jQuery simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit
designed to simplify v arious tasks by writing less code. Here is the list of important core
features supported by jQuery −
 DOM manipulation − The jQuery made it easy to select DOM elements, negotiate
them and modifying their content by using cross -browser open source selector
engine called Sizzle .
 Event handling − The jQuery offers an elegant way to capture a wide variety of
events, such as a user clicking on a link, without the need to clutter the HTML code
itself with event handlers.

16
 AJAX Support − The jQuery helps you a lot t o develop a responsive and featurerich
site using AJAX technology.
 Animations − The jQuery comes with plenty of built -in animation effects which you
can use in your websites.
 Lightweight − The jQuery is very lightweight library – about 19KB in size (Minifi ed
and gzipped).
 Cross Browser Support − The jQuery has cross -browser support, and works well in
IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
 Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

How to use jQuery?
 Local I nstallation − You can download jQuery library on your local machine and
include it in your HTML code.
 CDN Based Version − You can include jQuery library into your HTML code
directly from Content Delivery Network (CDN).
Local Instalation
 In order to install jQuery on the local computer, the user have to access the following
link https://jquery.com/download/ in order to download the latest version available.
 After downloading the .js file the user has to move the .js file in the website directoy
Now the user can include jquery library in the HTML file as follows −
<html>
<head>
<title>The jQuery Example </title>
<script type = "text/javascript" src = "/jquery/jquery –
2.1.3.min.js" >
</script>

<body>
<h1>Hello</h1>
</body>
</html>
This will produce following result –
Hello, World!

17

1.5 Application architecture
The application uses MVC (Model View Co ntroller) as the programming style. MVC is
a model / type of architecture used in software engineering. It is used very often in
production, this being somewhat the standard for web programming but also standalone. The
most popular PHP frameworks (Symfony, Laravel, Zend, PHP Cake etc.).
This type of code approach enjoys this success due to the isolation of the main logic
(database interaction, more complex operations) from the user interface, and the data from it
is processed to another level. So each of t hese three levels has a well established role.
Generally, the view takes the user information and sends it to the controller. It delivers it to
the model, which processes it and resubmits to the controller the final processed information.
The latter delive rs it to the viewer / user. This logic separates by level, the controller being
the one delivering in the two parts while the model never communicates with the view.
The following figures will illustrate the composition of the root / main directory and
related subdirectories.

18

Figure 2. The root component

19
Bootstrap is a web framework that focuses on simplifying the development of
informative web pages (as opposed to web apps). The primary purpose of
adding it to a web project is t o apply Bootstrap's choices of color, size, font and
layout to that project. As such, the primary factor is whether the developers in
charge find those choices to their liking. Once added to a project, Bootstrap
provides basic style definitions for all HTM L elements. The end is a uniform
appearance for prose, tables and form elements across web browsers. In
addition, developers can take advantage of CSS classes defined in Bootstrap to
further customize the appearance of their contents. For example, Bootstra p has
provisioned for light – and dark -colored tables, page headings, more prominent
pull quotes, and text with a highlight.

Bootstrap also comes with several JavaScript components in the form of
jQuery plugins. They provide additional user interface eleme nts such as dialog
boxes, tooltips, and carousels. Each Bootstrap component consists of an HTML
structure, CSS declarations, and in some cases accompanying JavaScript code.
They also extend the functionality of some existing interface elements,
including f or example an auto -complete function for input fields.

Example of a webpage using Bootstrap framework
Example of a webpage using Bootstrap framework rendered in Firefox
The most prominent components of Bootstrap are its layout components, as
they affect a n entire web page. The basic layout component is called
"Container", as every other element in the page is placed in it. Developers can
choose between a fixed -width container and a fluid -width container. While the
latter always fills the width of the web p age, the former uses one of the four
predefined fixed widths, depending on the size of the screen showing the page:
 Smaller than 576 pixels

20
 576–768 pixels
 768–992 pixels
 992–1200 pixels
 Larger than 1200 pixels
Once a container is in place, other Bootstrap layout components implement
a CSS grid layout through defining rows and columns.

A precompiled version of Bootstrap is available in the form of one CSS file
and three JavaScript files that can be readily added to any project. The raw form
of Bootstrap, ho wever, enables developers to implement further customization
and size optimizations. This raw form is modular, meaning that the developer
can remove unneeded components, apply a theme and modify the uncompiled
Sass files.

21

Figure 3. Assets directory
In the hms directory, you find the entire code for this application. It is divided into
several subfolders, each of which has a certain importance in the economy of the entire
application (Figure 3).

22

Figure 4. Application directory

The directories that interested me in writing the application are: admin, doctor, and
include. As mentioned above, the architecture / design pattern of the application is MVC. But,
like all MVCs, this is also a custom one. Custom in the idea that the relationship between the
three components is not 1: 1: 1. I decided not to go on the idea of 1: 1: 1 because the
application is quite small and because much logic used on back -end is applied on the front
end and vice versa.

23

Figure 5. admin directory

24
2 WEB APPLICATION – INTERFACE PRESENTATI ON
In this section I will present the interface of each page and its sections as well as their
functionalities.

2.1 Home Page

Figure 6. Home Page
When first accessing the websi te via any link, if the user has not previously logged in, he/she
will be prompted to the home page .
From this page the user can make several actions. He/ she can click on the „Contact” button,
or, the user can login or register an account.
The web applic ation has three diferent types of users.

25
The Admin user, this user can add docto rs specialityes, add doctors to the webb application,
can manage doctors, appoiments, pacients. He/she can view the doctors and patiens session
logs, and the history of the app oiments.
The type of users Doctors can login with an existing account.
And the users patients that can login with an existing account or they can regi ster and create a
new account.
2.1.1 Register
If the user “Patients” does not have an account, he/she can clic k on the register button
“Register & Book Appointment ” and will be redirected to the following screen .

26

Figure 7. Register page
At the “Patient registration ” screen, the user has to ins ert a first name, last name, a valid
address , the current City, the G ender (Male or Female), a valid email address, a password, the
reconfirm the password, and also the user has to check a checkbox that he/she give us the
permission to create the account. Then the user has to click on the button “Submit”. After
submitting t he registration formular, the user can observe a pop up window browser with the
following message “Successfully Registered. You can login now”. And the user will be
redirected to the Login screen.

27

Figure 8. Login Screen

2.1.2 Login Screen for all tipes of use rs.
This web application was developed in order to facilitate the doctor’s appoiments.
The type of users, “Doctors” cannot create an account by themselves. The Admin user has the
role to add an account for the doctor. After the admin user crates the accoun t for the user type
doctor. The doctor can login in the application.

Figure 9. Doctors Login Screen

28
Here, the user type doctor asked to insert the username used when the account was
created and the password that was given in order to login.
After the Lo gin the user is redirected to the Doctor/ Dasboard

Figure 10. Doctor Dashbord
After the user insets the email address he/she will be redirect to the login page and a
notification will appear on screen saying that the email with instructions to reset the password
has been sent .
The Admin type user can login into the web application with an username and
password, that was given when the application was developed.

Figure 11. Admin Login screen

29
After the Admin user completes the required fields with the username and password,
he will be redirected to the Admin Dashboard screen.

Figure 12. Admin Dashboard screen

2.1.3 Log out
The log out button is included in the menu which appears on every page so the user can
log out at any given time by clicking it and then be redirected to the login screen.

Figure 13. Log out

30

2.1.4 Change Password
The “Change Password” button is included in the menu which appears on every page
so the user can change is password when he/she wants at any given time by clicking it and
then the user will be redirected to the change password screen.
Figure 14 . Change Password

On the “Change Password” screen the user have to write the old password, the new
password and the reconfirm the new password. After the fields are completed the u ser have to
click the “Submit” button .

2.2 The Dashboard Page
After a successful login, the user will be redirected to the dasboard page . The Dasboard
page is differnet for the user accouns.
From the Dasboard page the different types of users can make differ ent operations such
as, book an appoiment.
Update the user profile, cancel or approve an appoiment etc.. Since the dashboard page
has different functionalityes for all three users types, we will describe each dashboard page
for each type of users in the ne xt chapters.

31

Figure 15. Main page: Dashboard page

2.2.1 Dasboard Page functionalityes for the Admin user
The Admin Dashboard is the more complex, because the Admin user is the mos empowered
user that has all the permisions, to add, delete, approwe and cance l all the actions from the
web application.
This is how the Admin Dashboard looks, and now we will describe each action that the
Admin user can make in the web application.

Figure 16. Dashboard page – admin user
In the left menu we can observe 6 menu Ite ms: “Dasboard”, “Doctors” drop down list,
“Patients” – drop down list,” Appoiment History”, “Doctors session logs” and “User session
logs”.

32

Figure 17 Left Menu – Admin
The “Doctors” menu item – is a drop down list that has three sub -pages: “Doctor
Specia lization”, “Add Doctors” and “Manage Doctors”.

Figure 18 – Doctors drop down list
If the Admin users clicks on the “Doctor Specialization” menu Item, it will be redirected to
the Doctor specialization Screen. From this screen the Admin can add a new doc tor
specialization, update an existing doctor specialization or delete/remove an existing one.

33

Figure 19 – Doctor Specialization
Add doctors – menu item. If the Admin user click on the add doctors menu item it will be
redirected to the Add a doctor scre en. From here the Admin user can Add a doctor, link the
added doctor to a n existing specialization , add doctorsfirst and last name, contact
information, doctors email and set up a password for the new added user account.

Figure 20 – Add a doctor

34

From t he Manage Doctors menu item the admin user can, update the existing user accounts,
or it can delete existing user accounts.

Figure 21 – Manage Doctors
From the “Manage Patiens” menu item the Admin user can vew all the existing patients that
have registere d on the web application, and the admin user can remove/ delete the existing
accounts.

Figure 22 – Manage Patients

35

2.2.2 Dasboard Page Functionality -Doctor user
This is how the Doctors Dashboard looks, and now we will describe each action that the
Doctors user can make in the web application.

Figure 23 – Doctors Dashboard
The doctor user can click on the Appoiment History and a list of the appoiments it will be
displayed. Here the doctor can cancel an active appoiment.

Figure 24 – Appoiment Histor y

36

2.2.3 Dashboard Page Functionality – Patient user
After the Patient user is logged in, the user can see the Dasboard screen. From here the
patient user can book an appoiment, select a doctor specialization, select an avalabile doctor,
select a date and a hour. Also the patient user can see the cost of the consultation.

Figure 25 – Patient Dashboard

3 WEB APPLICATION – IMPLEMENTATION
In this section I will present how each page was implemented and explain the functionalities
alongside important snippets of code.

37
3.1 The database
The database is administrated through phpMyAdmin which is a database management
system installed in the XAMPP environment. This system allows us to create and run a web
application that uses PHP and MySQL. The database has the foll owing tables:

Figure 26. The database

Figure 27 – Database Design

38
Following is a list of the tables in the database alongside a description of each one:
Table name Description
Admin This table has the username and password
information for the admin u ser

appointment In this table we stored all the appoiments
made from the patient user.

doctors The table where we store doctor information
such as: doctor specialization, fees, doctors
id, name, username and password

doctorslog The table where we man age the logs from the
doctors login activity, it show us the ip, the
status of the login and the date and hour.

doctorspecialization The table where we store doctor
specialization information.

users The table where we store patients
information such a s: first name, last name,
email, password, user id, address

userlog The table where we manage the logs from the
patients login activity, it show us the ip, the
status of the login and the date and hour.

Table 1. The database

39

3.2 Login page
As stated at in the 2.1 section of this paper, every user must first login before gaining
access to the web application.
When the user inputs data in both the email form and the password form and it is
validated, the form will close and the u ser wi ll be redirected to the „Dashboard ” page (the
main page). The login page php code for the two forms (email and password) from the user-
login .php file is:

<body class="login" >
<div class="row">
<div class="main-login col -xs-10 col-xs-offset-1 col-sm-8 col-sm-
offset-2 col -md-4 col -md-offset-4">
<div class="logo margin -top-30">
<h2> HMS | Patient Login </h2>
</div>

<div class="box-login">
<form class="form-login" method="post">
<fieldset>
<legend>
Sign in to your account
</legend>
<p>
Please enter your name and password to log in. <br />
<span style="color:red;"><?php echo $_SESSION ['errmsg' ];
?><?php echo $_SESSION ['errmsg' ]="";?></span>
</p>
<div class="form-group">
<span class="input-icon">
<input type="text" class="form-control" name="username"
placeholder ="Username" >
<i class="fa fa -user"></i> </span>
</div>
<div class="form-group form -actions" >
<span class="input-icon">
<input type="password" class="form-control password"
name="password" placeholder ="Password" >
<i class="fa fa -lock"></i>
</span>
</div>
<div class="form-actions" >

40
Login <i class="fa fa -arrow-circle-right"></i>
</button>
</div>
<div class="new-account" >
Don't have an account yet?
<a href="registration.php" >
Create an account
</a>
</div>
</fieldset>
</form>

<div class="copyright" >
© <span class="current -year"></span><span class="text-bold
text-uppercase" > HMS</span>. <span>All rights reserved </span>
</div>

</div>

</div>
</div>

The session and val idation rules are in the user-login .php file:

<?php
session_start() ;
error_reporting( 0);
include("include/config.php" );
if(isset($_POST['submit' ]))
{
$ret=mysql_query( "SELECT * FROM users WHERE email='" .$_POST['username' ]."' and
password='" .md5($_POST['password'])."'");
$num=mysql_fetch_array( $ret);
if($num>0)
{
$extra="dashboard.php" ;//
$_SESSION ['login']=$_POST['username' ];
$_SESSION ['id']=$num['id'];
$host=$_SERVER ['HTTP_HOST' ];
$uip=$_SERVER ['REMOTE_ADDR' ];
$status=1;
$log=mysql_query( "insert into user log(uid,username,userip,status)
values('" .$_SESSION ['id']."','".$_SESSION ['login']."','$uip','$status')");
$uri=rtrim(dirname( $_SERVER ['PHP_SELF' ]),'/\\');
header("location:http:// $host$uri /$extra");
exit();
}
else
{
$_SESSION ['login']=$_POST['username' ];
$uip=$_SERVER ['REMOTE_ADDR' ];
$status=0;
mysql_query( "insert into userlog(username,userip,status)
values('" .$_SESSION ['login']."','$uip','$status')");
$_SESSION ['errmsg' ]="Invalid username or password" ;

41
$extra="user-login.php" ;
$host = $_SERVER ['HTTP_HOS T'];
$uri = rtrim(dirname( $_SERVER ['PHP_SELF' ]),'/\\');
header("location:http:// $host$uri /$extra");
exit();
}
}
?>

The check login is located in the check -login.php and the code that verify the
session id is:
<?php
function check_login ()
{
if(strlen( $_SESSION['login'])==0)
{
$host = $_SERVER ['HTTP_HOST' ];
$uri = rtrim(dirname( $_SERVER ['PHP_SELF' ]), '/\\');
$extra="../admin.php" ;
$_SESSION ["login"]="";
header("Location: http:// $host$uri /$extra");
}
}
?>

3.2.1 Register
At the login page, the registration link is right under the sign in form and the php code
is in the registration .php file:
</head>

<body class="login" >
<!– start: REGISTRATION –>
<div class="row">
<div class="main-login col -xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2
col-md-4 col -md-offset-4">
<div class="logo margin -top-30">
<h2>Patient Registration </h2>
</div>
<!– start: REGISTER BOX –>
<div class="box-register" >
<form name="registration" id="registration" method="post">
<fieldset>
<legend>
Sign Up
</legend>
<p>
Enter your personal details below:
</p>
<div class="form-group">

42
<input type="text" class="form-control" name="full_name"
placeholder ="Full Name" required >
</div>
<div class="form-group">
<input type="text" class="form-control" name="address"
placeholder ="Address" required >
</div>
<div class="form-group">
<input type="text" class="form-control" name="city"
placeholder ="City" required >
</div>
<div class="form-group">
<label class="block" >
Gender
</label>
<div class="clip-radio radio -primary" >
<input type="radio" id="rg-female" name="gender"
value="female" >
<label for="rg-female">
Female
</label>
<input type="radio" id="rg-male" name="gender"
value="male">
<label for="rg-male">
Male
</label>
</div>
</div>
<p>
Enter your account details below:
</p>
<div class="form-group">
<span class="input-icon">
<input type="email" class="form-control" name="email"
id="email" onBlur="userAvailability ()" placeholder ="Email" required >
<i class="fa fa -envelope" ></i> </span>
<span id="user-availability -status1" style="font-
size:12px;"></span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control" id="password"
name="password" placeholder ="Password" required >
<i class="fa fa -lock"></i> </span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control"
name="password_again" placeholder ="Password Again" required >
<i class="fa fa -lock"></i> </span>
</div>
<div class="form-group">
<div class="checkbox clip -check check -primary" >
<input type="checkbox" id="agree" value="agree" >
<label for="agree" >
I agree
</label>

43
</div>
</div>
<div class="form-actions" >
<p>
Already have an account?
<a href="user-login.php" >
Log-in
</a>
</p>
<button type="submit" class="btn btn -primary pull -right"
id="submit" name="submit" >
Submit <i class="fa f a-arrow-circle-right"></i>
</button>
</div>
</fieldset>
</form>

<div class="copyright" >
© <span class="current -year"></span><span class="text-bold
text-uppercase"> HMS</span>. <span>All rights reserved </span>
</div>

</div>

</div>
</div>
The block of code from above saves the user data and closes the form after the user
clicks the submit button (“ Submit ”) and then, in the registr ation. php file the data validation
occurs:
<?php
include_once ('include/config.php' );
if(isset($_POST['submit' ]))
{
$fname=$_POST['full_name' ];
$address =$_POST['address' ];
$city=$_POST['city'];
$gender=$_POST['gender' ];
$email=$_POST['email'];
$password =md5($_POST['password' ]);
$query=mysql_query( "insert into users(fullname,address,city,gender,email,password)
values(' $fname','$address ','$city','$gender','$email','$password ')");
if($query)
{
echo "<script> alert('Successfully Registered. You can login now') ;</script>" ;
//header('location:user -login.php');
}
}
?>

44
3.2.2 Log out
The log out button is included in the menu so it will be present on every page and the
php code is in the logout .php:
<?php
session_start() ;
include('include/config.php' );
$_SESSION ['login']=="";
date_default_timezone_set( 'Asia/Kolkata' );
$ldate=date( 'd-m-Y h:i:s A' , time () ) ;
mysql_query( "UPDATE userlog SET logout = ' $ldate' WHERE uid =
'".$_SESSION ['id']."' ORDER BY id DESC LIMIT 1" );
session_unset() ;
//session_destroy();
$_SESSION ['errmsg']="You have successfully logout" ;
?>
<script language ="javascript" >
document .location ="./user-login.php" ;
</script>

3.3 Change Password
The Change password functionaliy is applicable to any type of user. The buuton Change
password is located befor the Logout button.
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >User | Change Password </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>User</span>
</li>
<li class="active" >
<span>Change Password </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-md-12">

45
<div class="panel panel -white">
<div class="panel-heading" >
<h5 class="panel-title">Change
Password </h5>
</div>
<div class="panel-body">
<p style="color:red;"><?php echo
htmlentities( $_SESSION ['msg1']);?>
<?php echo htmlentities( $_SESSION ['msg1']="");?></p>
<form role="form" name="chngpwd"
method="post" onSubmit ="return valid();">
<div class="form-group">
<label for="exampleInputEmail1" >
Current Password
</label>
<input type="password" name="cpass" class="form-control"
placeholder ="Enter Current Password" >
</div>
<div class="form-group">
<label for="exampleInputPassword1" >
New Password
</label>
<input type="password" name="npass" class="form-control"
placeholder ="New Password" >
</div>

<div class="form-group">
<label for="exampleInputPassword1" >
Confirm Password
</label>
<input type="password" name="cfpass" class="form-
control" placeholder ="Confirm Password" >
</div>

<button type="submit" name="submit"
class="btn btn -o btn -primary" >
Submit
</button>
</form>
</div>
</div>
</div>
The block of code from above saves the user data and closes the form after the user
clicks the submit button (“Submit”) and then, in the change -password.php file the data
validation occurs:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
date_default_timezone_set( 'Asia/Kolkata' );// change according timezone

46
$currentTime = date( 'd-m-Y h:i:s A' , time () ) ;
if(isset($_POST['submit' ]))
{
$sql=mysql_query( "SELECT passwor d FROM users where
password='" .md5($_POST['cpass'])."' && email='" .$_SESSION ['login']."'");
$num=mysql_fetch_array( $sql);
if($num>0)
{
$con=mysql_query( "update users set password='" .md5($_POST['npass'])."',
updationDate=' $currentTime ' where email='" .$_SESSION['login']."'");
$_SESSION ['msg1']="Password Changed Successfully !!" ;
}
else
{
$_SESSION ['msg1']="Old Password not match !!" ;
}
}
?>

3.4 The Dashboard Page – Fuctionalities for the patient user
The main page also known as “ Dashboard ” page is the page th at users get redirected
after login and the main page that user will use in the web application:
<body>
<div id="app">
<?php include ('include/sidebar.php' );?>
<div class="app-content" >

<?php include ('include/header.php' );?>

<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >User | Dashboard </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>User</span>
</li>
<li class="active" >
<span>Dashboard </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">

47
<div class="row">
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa -stack-2x text -primary" ></i> <i class="fa fa -smile-o fa-stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" >My Profile </h2>

<p class="links cl -effect-1">
<a href="edit-profile.php" >
Update Profile
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa -stack-2x text-primary" ></i> <i class="fa fa-paperclip fa -stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" >My Appointments </h2>

<p class="cl-effect-1">
<a href="appointment -history.php" >
View Appointment Histor y
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa -stack-2x text -primary" ></i> <i class="fa fa -terminal fa -stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" > Book My Appointment </h2>

<p class="links cl -effect-1">
<a href="book-appointment.php" >
Book Appointment
</a>
</p>
</div>
</div>
</div>
</div>
</div>
3.4.1 Book an appointment
After the pacient user is logged in the web application, the user can book an appointment to a
doctor.

48
The code that verify and fetch data from the database in order to can make an appointment is:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;

if(isset($_POST['submit' ]))
{

$specilization =$_POST['Doctorspecialization' ];
$doctorid =$_POST['doctor' ];
$userid=$_SESSION ['id'];
$fees=$_POST['fees'];
$appdate =$_POST['appdate' ];
$time=$_POST['apptime' ];
$userstatus =1;
$docstatus =1;

$query=mysql_query( "insert into
appointment(doctorSpecialization,doctorId,userId,consultancyFees,appointmentDate,a
ppointmentTim e,userStatus,doctorStatus)
values(' $specilization ','$doctorid ','$userid','$fees','$appdate ','$time','$usersta
tus','$docstatus ')");
if($query)
{
echo "<script> alert('Your appointment successfully booked');</script>" ;
}

}
?>

The form that th e user will be able to complete in order to make an online appointment it is
also located in the book -appointment.php file:
</head>
<body>
<div id="app">
<?php include ('include/sidebar.php' );?>
<div class="app-content" >

<?php include ('include/header.php' );?>

<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITL E –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >User | Book Appointment </h1>
</div>

49
<ol class="breadcrumb" >
<li>
<span>User</span>
</li>
<li class="active" >
<span>Book Appointment </span>
</li>
</ol>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-md-12">

<div class="row margin -top-30">
<div class="col-lg-8 col -md-12">
<div class="panel panel -white">
<div class="panel-heading" >
<h5 class="panel-title">Book
Appointment </h5>
</div>
<div class="panel-body">
<p style="color:red;"><?php echo
htmlentities( $_SESSION ['msg1']);?>
<?php echo htmlentities( $_SESSION ['msg1']="");?></p>
<form role="form" name="book" method="post"
>

<div class="form-group">
<label for="DoctorSpecialization" >
Doctor Specialization
</label>
<select name="Doctorspecialization" class="form-control"
onChange ="getdoctor (this.value);" required ="required" >
<option value="">Select
Specialization </option>
<?php $ret=mysql_query( "select * from doctorspecilization" );
while($row=mysql_fetch_array( $ret))
{
?>
<option value="<?php echo
htmlentities( $row['specilization' ]);?>">
<?php echo
htmlentities( $row['specilization' ]);?>
</option>
<?php } ?>

</select>
</div>

50
<label for="doctor" >
Doctors
</label>
<select name="doctor" class="form-control" id="doctor"
onChange ="getfee(this.value);" required ="required" >
<option value="">Select Doctor </option>
</select>
</div>

<div class="form-group">
<label for="consultancyfees" >
Consultancy Fees
</label>
<select name="fees" class="form-control" id="fees" readonly >

</select>
</div>

Time

</label>
<input class="form-control datepicker" name="apptime"
type="time" required ="required" >
</div>

<button type="submit" name="submit"
class="btn btn -o btn -primary" >
Submit
</button>
</form>
</div>
</div>
</div>

</div>
</div>

51
3.4.2 Edit Profile
The edit profile section is placed near the Logout button, in the upper left corner on
the Dashboard page and has the following code:
The categori es are stored in the categories table:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
if(isset($_POST['submit' ]))
{
$fname=$_POST['fname'];
$address =$_POST['address' ];
$city=$_POST['city'];
$gender=$_POST['gender' ];

$sql=mysql_query( "Update users set
fullName=' $fname',address=' $address ',city=' $city',gender=' $gender' where
email='" .$_SESSION ['login']."'");
if($sql)
{
echo "<script> alert('Your Profile updated Successfully');</s cript>";

}
}
?>
3.4.3 The get doctor
The if a patient wants to make an appoiment, the user will have to choose
from a list of doctors alavabile, in this case the get_doctor.php file is used. This
file fetch data from the database with the alavabile doctors and has the
following code:
<?php
include('include/config.php' );
if(!empty($_POST["specilizationid" ]))
{

$sql=mysql_query( "select doctorName,id from doctors where
specilization='" .$_POST['specilizationid' ]."'");?>
<option selected ="selected" >Select Doctor </option>
<?php
while($row=mysql_fetch_array( $sql))
{?>
<option value="<?php echo htmlentities( $row['id']); ?>"><?php echo
htmlentities( $row['doctorName' ]); ?> </option>

52
<?php
}
}

if(!empty($_POST["doctor" ]))
{

$sql=mysql_query( "select docFees from doctors where id='" .$_POST['doctor' ]."'");
while($row=mysql_fetch_array( $sql))
{?>
<option value="<?php echo htmlentities( $row['docFees' ]); ?>"><?php echo
htmlentities( $row['docFees' ]); ?> </option>
<?php
}
}

?>

3.4.4 Get Fees

<?php $mysql_hostnam e = "localhost" ;
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "hms";
$bd = mysql_connect( $mysql_hostname , $mysql_user , $mysql_password ) or die("Could
not connect database" );
mysql_select_db( $mysql_database , $bd) or die("Could not select da tabase");
if($_GET['action' ]=='doctorid' ){
$docinfo =$_POST['docinfo' ];
$query= mysql_query( "select * from doctors where doctorName= $docinfo ");
$array=mysql_fetch_array( $query);
echo $array['docFees' ];

}
?>

3.5 The Dashboard Page – Fucti onalities for the Admin user
In this section we will describe each php file functionalities for the Dashboard when logged
in with the admin user .
Since the Admin user has access to all features of this web application, the main
functionalities are listed here.
The Dashboard Page – for the admin user has the following code:

53
<?php include ('include/sidebar.php' );?>
<div class="app-content" >

<?php include ('include/header.php' );?>

<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >Admin | Dashboard </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>Admin</span>
</li>
<li class="active" >
<span>Dashboard </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa-stack-2x text -primary" ></i> <i class="fa fa -smile-o fa-stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" >Manage Patients </h2>

<p class="links c l-effect-1">
<a href="manage -users.php" >
<?php $result = mysql_query( "SELECT * FROM
users " );
$num_rows = mysql_num_rows( $result);
{
?>
Total Patients :<?php echo
htmlentities( $num_rows ); } ?>
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa -stack-2x text-primary" ></i> <i class="fa fa -users fa -stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" >Manage Doctors </h2>

54

<p class="cl-effect-1">
<a href="manage -doctors.php" >
<?php $result1 = mysql_query( "SELECT * FROM
doctors " );
$num_rows1 = mysql_num_rows( $result1 );
{
?>
Total Doctors : <?php echo
htmlentities ($num_rows1 ); } ?>
</a>

</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa-stack-2x text -primary" ></i> <i class="fa fa -terminal fa -stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" > Appointments </h2>

<p class="links cl -effect-1">
<a href="book-appointment.php" >
<a href="appointment -history.php" >
<?php $sql= mysql_query( "SELECT * FROM
appointment" );
$num_rows2 = mys ql_num_rows( $sql);
{
?>
Total Appointments : <?php echo
htmlentities( $num_rows2 ); } ?>
</a>
</a>
</p>
</div>
</div>
</div>
</div>
</div>

3.5.1 Add Doctor
The Admin user can add a doctor into the web application. Ths operation is made from the
add-doctor.php file. The Admin user has to complete a add a doctor form in order to complete
all the necessary fields. The form has the following code:

55
</head>
<body>
<div id="app">
<?php include ('include/sidebar.php' );?>
<div class="app-content" >

<?php include ('include/header.php' );?>

<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >Admin | Add Doctor </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>Admin</span>
</li>
<li class="active" >
<span>Add Doctor </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-md-12">

<div class="row margin -top-30">
<div class="col-lg-8 col -md-12">
<div class="panel panel -white">
<div class="panel-heading" >
<h5 class="panel-title">Add Doctor </h5>
</div>
<div class="panel-body">

<form role="form" name="adddoc"
method="post" onSubmit ="return valid();">
<div class="form-group">
<label for="DoctorSpecialization" >
Doctor Specialization
</label>
<select name="Doctorspecialization" class="form-control"
required ="required" >
<option value="">Select
Specialization </option>
<?php $ret=mysql_query( "select * from doctorspeciliz ation");
while($row=mysql_fetch_array( $ret))
{
?>
<option value="<?php echo
htmlentities( $row['specilization' ]);?>">

56
<?php echo
htmlentities( $row['specilizat ion']);?>
</option>
<?php } ?>

</select>
</div>

<div class="form-group">
<label for="doctorname" >
Doctor Name
</label>
<input type="text" name="docname" class="form-control"
placeholder ="Enter Doctor Name" >
</div>

<div class="form-group">
<label for="address" >
Doctor Clinic Address
</label>
<textarea name="clinicaddress" class="form-control"
placeholder ="Enter Doctor Clinic Address" ></textarea>
</div>
<div class="form-group">
<label for="fess">
Doctor Consultancy Fees
</label>
<input type="text" name="docfees" class="form-control"
placeholder ="Enter Doctor Consultancy Fees" >
</div>

<div class="form-group">
<label for="fess">
Doctor Contact no
</label>
<input type="text" name="doccontact" class="form-control"
placeholder ="Enter Doctor Contact no" >
</div>

<div class="form-group">
<label for="fess">
Doctor Email
</label>
<input type="email" name="docemail" class="form-control"
placeholder ="Enter Doctor Email id" >
</div>

<div class="form-group">
<label for="exampleInputPa ssword1" >
Password
</label>
<input type="password" name="npass" class="form-control"
placeholder ="New Password" required ="required" >

57
</div>

<div class="form-group">
<label for="exampleInputPassword2" >
Confirm Password
</label>
<input type="password" name="cfpass" class="form-
control" placeholder ="Confirm Password" required ="required" >
</div>

<button type="submit" name="submit"
class="btn btn -o btn -primary" >
Submit
</button>
</form>
</div>
</div>
</div>

</div>
</div>
<div class="col-lg-12 col -md-12">
<div class="panel panel -white">

</div>
</div>
</div>
</div>
</div>
</div>

After the admin user complete s the form he/she has to click on the “Submit” button. After the
Submit button is clicked the information added is inserted in the database from the following
code:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;

if(isset($_POST['submit' ]))
{
$docspecialization =$_POST['Doctorspecialization' ];
$docname =$_POST['docname' ];
$docaddress =$_POST['clinicaddress' ];
$docfees =$_POST['docfees' ];
$doccontactno =$_POST['doccontact' ];
$docemail=$_POST['docemail' ];
$password =md5($_POST['npass']);

58
$sql=mysql_query( "insert into
doctors(specilization,doctorName,address,docFees,contactno,docEmail,password)
values(' $docspecialization ','$docname ','$docaddress ','$docfees ','$doccontactno ','$
docemail ','$password ')");
if($sql)
{
echo "<script> alert('Doctor info added Successfully');</script>" ;
echo "<script type='text/javascript'> document .location = 'location:Manage –
doctors.php'; </script>" ;

}
}
?>

3.5.2 Doctor Specialization
The Admin user can add doctor sp ecialization in the web application. These operation is
made from the doctor -specialization.php. The Admin user will have to complete a form and
then press the “Submit” button in order to insert the information in the database. The form
has the following c ode:
<?php include ('include/sidebar.php' );?>
<div class="app-content" >

<?php include ('include/header.php' );?>

<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >Admin | Add Doctor
Specialization </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>Admin</span>
</li>
<li class="active" >
<span>Add Doctor Specialization </span>
</li>
</ol>
</div>
</section>

59
<div class="col-lg-6 col -md-12">
<div class="panel panel -white">
<div class="panel-heading" >
<h5 class="panel-title">Doctor
Specialization </h5>
</div>
<div class="panel-body">
<p style="color:red;"><?php echo
htmlentities( $_SESSION ['msg']);?>
<?php echo htmlentities( $_SESSION ['msg']="");?></p>
<form role="form" name="dcotorspcl"
method="post" >
<div class="form-group">
<label for="exampleInputEmail1" >
Doctor Specialization
</label>
<input type="text" name="doctorspecilization" class="form-
control" placeholder ="Enter Doctor Specialization" >
</div>

<button type="submit" name="submit"
class="btn btn -o btn -primary" >
Submit
</button>
</form>
</div>
</div>
</div>

</div>
</div>
<div class="col-lg-12 col -md-12">
<div class="panel panel -white">

</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<h5 class="over-title margin -bottom-15">Manage <span
class="text-bold">Docter Specialization </span></h 5>

<table class="table table -hover" id="sample -table-1">
<thead>
<tr>
<th class="center" >#</th>
<th>Specialization </th>
<th class="hidden -xs">Creation Date </th>
<th>Updation Date </th>
<th>Action</th>

</tr>

60
</thead>
<tbody>
<?php
$sql=mysql_query( "select * from doctorSpecilization" );
$cnt=1;
while($row=mysql_fetch_array( $sql))
{
?>

<td >
<div class="visible -md visible -lg hidden -sm
hidden-xs">
<a href="edit-doctor-specialization.php?id= <?php echo
$row['id'];?>" class="btn btn -transparent btn -xs" tooltip-placement ="top"
tooltip="Edit"><i class="fa fa -pencil"></i></a>

<a href="doctor -specilization.php?id= <?php echo $row['id']?>&del=delete"
onClick="return confirm('Are you sure you want to delete?' )"class="btn btn –
transparent btn -xs tooltips" tooltip-placement ="top" tooltip="Remove" ><i class="fa
fa-times fa fa -white"></i></a>
</div>
<div class="visible -xs visible -sm hidden -md
hidden-lg">
<div class="btn-group" dropdown is –
open="status.isopen" >
<button type="button" class="btn btn –
primary btn -o btn -sm dropdown -toggle" dropdown -toggle>
<i class="fa fa-cog"></i> <span
class="caret"></span>
</button>
<ul class="dropdown -menu pull -right
dropdown -light" role="menu">
<li>
<a href="#">
Edit
</a>
</li>
<li>
<a href="#">
Share
</a>
</li>
<li>
<a href="#">
Remove
</a>
</li>
</ul>
</div>

61
</div></td>
</tr>

<?php
$cnt=$cnt+1;
}?>

</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!– end: BASIC EXAMPLE –>
<!– end: SELECT BOXES –>

</div>
</div>
</div>

After the Admin user hits the Submit button the information from the completed form is
inserted in the Database from the following code:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
if(isset($_POST['submit' ]))
{
$sql=mysql_query( "insert into doctorSpecilization(specilization)
values('" .$_POST['doctorspecilization' ]."')");
$_SESSION ['msg']="Doctor Specialization added successfully !!" ;
}

if(isset($_GET['del']))
{
mysql_query( "delete from doctorSp ecilization where id =
'".$_GET['id']."'");
$_SESSION ['msg']="data deleted !!" ;
}
?>

3.5.3 Edit Doctor
The Admin user can edit doctors information from the edit -doctor.php file, after he/she
completes the formular the Submit button wil l send the data into the Database from the
following code:

62
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
$did=intval( $_GET['id']);// get doctor id
if(isset($_POST['submit' ]))
{
$docspecialization =$_POST['Doctorspecialization' ];
$docname =$_POST['docname' ];
$docaddress =$_POST['clinicaddress' ];
$docfees =$_POST['docfees' ];
$doccontactno =$_POST['doccontact' ];
$docemail =$_POST['docemail' ];
$sql=mysql_query( "Update doctors set
specilization=' $docspecialization ',doctorName=' $docname ',address=' $docaddress ',doc
Fees='$docfees ',contactno=' $doccontactno ',docEmail=' $docemail ' where id=' $did'");
if($sql)
{
echo "<script> alert('Doctor Details updated Successfully');</script>" ;

}
}

3.5.4 Edit Spec ialization
The Admin user can edit a doctor specialization. From the edit -doctor -specialization.php file.
The data added from the database it’s fetched and after the data is modified after clicking the
Submit button the new data is updated in the database:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
$id=intval( $_GET['id']);// get value
date_default_timezone_set( 'Asia/Kolkata' );// change according timezone
$currentTime = date( 'd-m-Y h:i:s A' , time () ) ;
if(isset($_POST['submit' ]))
{
$sql=mysql_query( "update doctorSpecilization set
specilization='" .$_POST['doctorspecilization' ]."',
updationDate=' $currentTime 'where id=' $id'");
$_SESSION ['msg']="Doctor Specialization updated succ essfully !!" ;
}

?>

63
3.6 The Dashboard Page – Fuctionalities for the Doctor user
In this section we will describe the php file functionalities for the Dashboard when logged in
with the doctor user.
The Dashboard Page – for the doctor user has the following c ode:
</head>
<body>
<div id="app">
<?php include ('include/sidebar.php' );?>
<div class="app-content" >

<?php include ('include/header.php' );?>

<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >Doctor | Dashboard </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>User</span>
</li>
<li class="active" >
<span>Dashboard </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa -stack-2x text -primary"></i> <i class="fa fa -smile-o fa-stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" >My Profile </h2>

<p class="links cl -effect-1">
<a href="edit-profile.php" >
Update Profile
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">

64
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa –
square fa -stack-2x text-primary" ></i> <i class="fa fa-paperclip fa -stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" >My Appointments </h2>

<p class="cl-effect-1">
<a href="appointment -history.php" >
View Appointment History
</a>
</p>
</div>
</div>
</div>

</div>
</div>

3.6.1 Appointment History
The Doctor user can view th e appointment history and verify if a new record is listed and also
the days and hours when he/she has the appointments.
The doctor user can also cancel appoiments if it’s necessary. All of that is made from the
appointment -hostory.php file, and it has the following code:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
if(isset($_GET['cancel' ]))
{
mysql_query( "update appointment set doctorStatus='0' where i d =
'".$_GET['id']."'");
$_SESSION ['msg']="Appointment canceled !!" ;
}
?>

<?php include ('include/sidebar.php' );?>
<div class="app-content" >

<?php include ('include/header.php' );?>
<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >

65
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >Doctor | Appointment
History</h1>
</div>
<ol class="breadcrumb" >
<li>
<span>Doctor </span>
</li>
<li class="active" >
<span>Appointment History </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">

<p style="color:red;"><?php echo
htmlentities( $_SESSION ['msg']);?>
<?php echo htmlentities( $_SESSION ['msg']="");?></p>
<table class="table table -hover" id="sample -table-1">
<thead>
<tr>
<th class="center" >#</th>
<th class="hidden -xs">Patient Name </th>
<th>Specialization </th>
<th>Consultancy Fee </th>
<th>Appointment D ate / Time </th>
<th>Appointment Creation Date </th>
<th>Current Status </th>
<th>Action</th>

</tr>
</thead>
<tbody>
<?php
$sql=mysql_query( "select users.fullName as fname,appointment. * from appointment
join users on users.id=appointment.userId where
appointment.doctorId=' ".$_SESSION ['id']."'");
$cnt=1;
while($row=mysql_fetch_array( $sql))
{
?>

<tr>
<td class="center" ><?php echo $cnt;?>.</td>
<td class="hidden -xs"><?php echo
$row['fname'];?></td>
<td><?php echo

66
$row['doctorSpecialization' ];?></td>
<td><?php echo $row['consultancyFees' ];?></td>
<td><?php echo $row['appointmentDate' ];?> /
<?php echo
$row['appointmentTime' ];?>
</td>
<td><?php echo $row['postingDate' ];?></td>
<td>
<?php if (($row['userStatus' ]==1) && ( $row['doctorStatus' ]==1))
{
echo "Active" ;
}
if(($row['userStatus' ]==0) && ( $row['doctorStatus' ]==1))
{
echo "Cancel by Patient" ;
}

if(($row['userStatus' ]==1) && ( $row['doctorStatus' ]==0))
{
echo "Cancel by you" ;
}

?></td>
<td >
<div class="visible -md visible -lg hidden -sm
hidden-xs">
<?php if (($row['userStatus' ]==1) &&
($row['doctorStatus' ]==1))
{ ?>

<a href="appointment -history.php?id= <?php echo $row['id']?>&cancel=update"
onClick="return confirm('Are you sure you want to cancel this appointment
?')"class="btn btn -transparent b tn-xs tooltips" title="Cancel Appointment"
tooltip-placement ="top" tooltip="Remove" >Cancel</a>
<?php } else {

echo "Canceled" ;
} ?>
</div>
<div class="visible -xs visibl e-sm hidden -md
hidden-lg">
<div class="btn-group" dropdown is –
open="status.isopen" >
<button type="button" class="btn btn –
primary btn -o btn -sm dropdown -toggle" dropdown -toggle>
<i class="fa fa-cog"></i> <span
class="caret" ></span>
</button>
<ul class="dropdown -menu pull -right
dropdown -light" role="menu">
<li>
<a href="#">
Edit
</a>

67
</li>
<li>
<a href="#">
Share
</a>
</li>
<li>
<a href="#">
Remove
</a>
</li>
</ul>
</div>
</div></td>
</tr>

<?php
$cnt=$cnt+1;
}?>

</tbody>
</table>
</div>
</div>
</div>

68
4 CONCLU SIONS
The main goal was to initiate a minimal interaction between doctors and patients and I
firmly believe that I achieved that . Patients have the possibil ity to book an online doctor
appoiment with a minimal interaction with third par ty people.
Based on the appoiment history an d the appoiment schedule doctors know exactly when
a patien will come at the clinic and if they cannot h onor the appoiment they can simply
cancel it from the web application. Also the doctor work is simplyfied because the admin user
will set up the consulattion fees, doctor specialization, clinic addres and alavabile hours for
appoiments.
I tought this booking system is more easy to use for both doctor and patients and will
reduce many steps in the process of mak ing an appointment.
Altough this is a small web application it has the potential of growing and attract many
people, the application can be modified to use many different booking areas not only hospital
bookings related.

69
5 BIBLIOGRA PHY
During the planning and development of th is dissertation project the followi ng web resources were consulted:

 http://php.net/ – PHP
 https://codeigniter.com/ – CodeIgniter
 https://www.froala.com/wysiwyg -editor – Froala Editor
 http://phpmailer.worxware.com/index.php?pg=tutorial – PHPMailer
 https://en.wikipedia.org/wiki/MySQL – MySQL
 http://www.w3schools.com/html/default.asp – HTML
 http://www.w3schools.com/css/de fault.asp – CSS
 http://www.w3schools.com/js/default.asp – JavaScript
 https://jquery.com – jQuery
 http://www.w3schools.com/json/default.asp – JSON
 http://getbootstrap.com/ – Bootstrap
 https://ro.wikipedia.org/wiki/Model -view -controll er – MVC pattern
 http://www.w3schools.com/ajax/default.asp – AJAX
 https://www.apachefriends.org/index.html – XAMPP
 https://searchoracle.techtarget.com/definition/MySQL – MySQL
 https://www.tutorialspoint.com/php/php_introduction.htm – PHP
 https://skillcrush.com/2012/04/03/css/ – CSS
 https://javascript.info/intro – JavaScript
 https://en.wikipedia.org/wiki/Bootstrap_(front -end_framework) – Boot strap

70
A. SOURCE CODE

 appointment -history .php
<?php
session_start();
//error_reporting(0);
include('include/config.php');
include('include/checklogin.php');
check_login();
if(isset($_GET['cancel']))
{
mysql_query("update appointment set userStatus='0' where id =
'".$_GET['id']."'");
$_SESSION['msg']="Your appointment canceled !!";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>User | Appointment History</title>
<meta charset="utf -8" />
<meta name="viewport" content="width=device -width, initial -scale=1.0,
user-scalable=0, minimum -scale=1.0, maximum -scale=1.0">
<meta name="apple -mobile-web-app-capable" content="yes">
<meta nam e="apple -mobile-web-app-status-bar-style" content="black">
<meta content="" name="description" />
<meta content="" name="author" />
<link
href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,
700|Raleway:300,400,500,600,700|Crete+Ro und:400italic" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/fontawesome/css/font –
awesome.min.css">
<link rel="stylesheet" href="vendor/themify -icons/them ify-
icons.min.css">
<link href="vendor/animate.css/animate.min.css" rel="stylesheet"
media="screen">
<link href="vendor/perfect -scrollbar/perfect -scrollbar.min.css"
rel="stylesheet" media="screen">
<link href="vendor/switchery/switchery.min.css" rel="stylesheet"
media="screen">
<link href="vendor/bootstrap -touchspin/jquery.bootstrap –
touchspin.min.css" rel="stylesheet" media="screen">
<link href="vendor/select2/select2.min.css" rel="stylesheet"
media="screen">
<link href="vendor/bootstrap -datepicker/bootstrap –
datepicker3.standalone.min.css" rel="stylesheet" media="screen">
<link href="vendor/bootstrap -timepicker/bootstrap -timepicker.min.css"
rel="stylesheet" media="screen">
<link rel="style sheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/plugins.css">
<link rel="stylesheet" href="assets/css/themes/theme -1.css"
id="skin_color" />
</head>
<body>
<div id="app">
<?php include('include/sidebar.php');?>
<div class="app -content">

71
<?php include('include/header.php');?>
<!– end: TOP NAVBAR –>
<div class="main -content" >
<div class="wrap -content container" id="container">
<!– start: PAGE TITLE –>
<section id="page -title">
<div class="row">
<div class="col -sm-8">
<h1 class="mainTitle">User | Appointment History</h1>
</div>
<ol class="breadcrumb">
<li>
<span>User </span>
</li>
<li class="active">
<span>Appointment History</span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">

<p style="color:red;"><?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?></p>
<table class="table table -hover" id ="sample -table-1">
<thead>
<tr>
<th class="center">#</th>
<th class="hidden -xs">Doctor Name</th>
<th>Specialization</th>
<th>Consultancy Fee</th>
<th>Appointment Date / Time </th>
<th>Appointment Creation Date </th>
<th>Current Status</th>
<th>Action</th>

</tr>
</thead>
<tbody>
<?php
$sql=mysql_query("select doctors.doctorName as docname,appointment.*
from appointment join doctors on doctors.id=appointment.doctorId where
appointment.userId='".$_SESSION['id']."'");
$cnt=1;
while($row=mysql_fetch_array($sq l))
{
?>

<tr>
<td class="center"><?php echo $cnt;?>.</td>
<td class="hidden -xs"><?php echo $row['docname'];?></td>
<td><?php echo $row['doctorSpecialization'];?></td>
<td><?php echo $row['consultancyFees'];?></td>
<td><?php echo $row['appointmentDate'];?> / <?php echo
$row['appointmentTime'];?>
</td>
<td><?php echo $row['postingDate'];?></td>
<td>
<?php if(($row['userStatus']==1) && ($row['doctorStatus']==1))
{

72
echo "Active";
}
if(($row['userStatus']==0) && ($row['doctorStatus']==1))
{
echo "Cancel by You" ;
}

if(($row['userStatus']==1) && ($row['doctorStatus']==0))
{
echo "Cancel by Doctor";
}

?></td>
<td >
<div class="visible -md visible -lg hidden -sm hidden -xs">
<?php if(($row['userStatus']==1) && ($row['doctorStatus']==1))
{ ?>

<a href="appointment -history.php?id=<?php echo
$row['id']?>&cancel=update" onClick="return confirm('Are you sure you
want to cancel this appointment ?')"class="btn btn -transparent btn -xs
tooltips" title="Cancel Appointment" tooltip -placement="top"
tooltip="Remove">Cancel</a>
<?php } else {

echo "Canceled";
} ?>
</div>
<div class="visible -xs visible -sm hidden -md hidden -lg">
<div class="btn -group" dropdown is -open="status.isopen">
<button type="button" class="btn btn -primary btn -o btn-sm dropdown –
toggle" dropdown -toggle>
<i class ="fa fa-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown -menu pull -right dropdown -light" role="menu">
<li>
<a href="#">
Edit
</a>
</li>
<li>
<a href="#">
Share
</a>
</li>
<li>
<a href="#">
Remove
</a>
</li>
</ul>
</div>
</div></td>
</tr>

<?php
$cnt=$cnt+1;
}?>

</tbody>
</table>
</div>

73
</div>
</div>

<!– end: BASIC EXAMPLE –>
<!– end: SELECT BOXES –>

</div>
</div>
</div>
<!– start: FOOTER –>
<?php include('include/footer.php');?>
<!– end: FOOTER –>

<!– start: SETTINGS –>
<?php include('include/setting.php');?>

<!– end: SETTINGS –>
</div>
<!– start: MAIN JAVASCRIPTS –>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/modernizr/moderni zr.js"></script>
<script src="vendor/jquery -cookie/jquery.cookie.js"></script>
<script src="vendor/perfect -scrollbar/perfect –
scrollbar.min.js"></script>
<script src="vendor/switchery/switchery.min.js"></script>
<!– end: MAIN JAVASCRIPTS –>
<!– start: JA VASCRIPTS REQUIRED FOR THIS PAGE ONLY –>
<script src="vendor/maskedinput/jquery.maskedinput.min.js"></script>
<script src="vendor/bootstrap -touchspin/jquery.bootstrap –
touchspin.min.js"></script>
<script src="vendor/autosize/autosize.min.js"></script>
<script src="vendor/selectFx/classie.js"></script>
<script src="vendor/selectFx/selectFx.js"></script>
<script src="vendor/select2/select2.min.js"></script>
<script src="vendor/bootstrap -datepicker/bootstrap –
datepicker.min.js"></script>
<script src="vendor/boo tstrap-timepicker/bootstrap –
timepicker.min.js"></script>
<!– end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY –>
<!– start: CLIP -TWO JAVASCRIPTS –>
<script src="assets/js/main.js"></script>
<!– start: JavaScript Event Handlers for this page –>
<script sr c="assets/js/form -elements.js"></script>
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!– end: JavaScript Event Handlers for this page –>
<!– end: CLIP -TWO JAVASCRIPTS –>
</body>
</html>

check_availabili ty.php

<?php
require_once("include/config.php");
if(!empty($_POST["email"])) {
$email= $_POST["email"];

74
$result =mysql_query("SELECT email FROM users WHERE email='$email'");
$count=mysql_num_rows($result);
if($count>0)
{
echo "<span style='color:r ed'> Email already exists .</span>";
echo "<script>$('#submit').prop('disabled',true);</script>";
} else{

echo "<span style='color:green'> Email available for Registration .</span>";
echo "<script>$('#submit').prop('disabled',false);</script>";
}
}


 ?> application/controllers/dbcontroller.php
<?php
$DB_host = "localhost";
$DB_user = "root";
$DB_pass = "";
$DB_name = "ingram";
try
{
$DB_con = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass);
$DB_con->setAttribute(PDO::ATTR_ERRMODE , PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
$e->getMessage();
}
?>

 application/assets/form -elements.js
var FormElements = function() {"use strict";

//function to initiate jquery.maskedinput
var maskInputHandler = function() {
$.mask.defini tions['~'] = '[+ -]';
$('.input -mask -date').mask('99/99/9999');
$('.input -mask -phone').mask('(999) 999 -9999');
$('.input -mask -eyescript').mask('~9.99 ~9.99 999');
$(".input -mask -product").mask("a* -999-a999", {
placeholder: " ",
completed: func tion() {
alert("You typed the following: " + this.val());
}
});
};
//function to initiate bootstrap -touchspin

75
var touchSpinHandler = function() {
$("input[name='demo1']").TouchSpin({
min: 0,
max: 100,
step: 0.1,
decimals: 2,
boostat: 5,
maxboostedstep: 10,
postfix: '%'
});
$("input[name='demo2']").TouchSpin({
min: -1000000000,
max: 1000000000,
stepinterval: 50,
maxboostedstep: 10000000,
prefix: '$'
});
$("input[name='demo3']").TouchSpin({
vertical buttons: true
});
$("input[name='demo4']").TouchSpin({
verticalbuttons: true,
verticalupclass: 'fa fa -plus',
verticaldownclass: 'fa fa -minus'
});
$("input[name='demo5']").TouchSpin({
postfix: "a button",
postfix_extraclass: "btn btn -default"
});
$("input[name='demo6']").TouchSpin({
postfix: "a button",
postfix_extraclass: "btn btn -default"
});
$("input[name='demo7']").TouchSpin({
prefix: "pre",
postfix: "post"
});
};

76
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}];
$(".js -example -data-array -selecte d").select2({
data: data
});
$(".js -example -basic -hide-search").select2({
minimumResultsForSearch: Infinity
});
};
var datePickerHandler = function() {
$('.datepicker').datepicker({
autoclose: true,
todayHighlight: true
});
$('.fo rmat-datepicker').datepicker({
format: "M, d yyyy",
todayHighlight: true
});

};
var timePickerHandler = function() {
$('#timepicker -default').timepicker();
};
return {
//main function to initiate template pages
init: function() {
maskInputHandler();
touchSpinHandler();
autosizeHandler();
select2Handler();
datePickerHandler();
timePickerHandler();
}
};
}();
B. CD / DVD
A dvd with the presentation and dissertation paper has been included.

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Șef lucrări dr. ing. Stefan Udristoiu SEPTEMBRIE 2019 CRAIOVA ii UNIVERSITATEA DIN CRAIOVA FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ… [604784] (ID: 604784)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Șef lucrări dr. ing. Stefan Udristoiu SEPTEMBRIE 2019 CRAIOVA ii UNIVERSITATEA DIN CRAIOVA FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ… [604784]

Copyright Notice

HOTĂRÂRE Nr. 52 din 19 ianuarie 2011 [620890]

2.3.1. Bazele teoretico-metodice și reflectarea în domeniul studiat (antrenamentul sportiv) Performanta în jocul de tenis necesită o pregătire… [310705]

RESEARCH REGARDING THE IMPACT BEHAVIOR OF POLYMERIC BIO-COMPOSITES PRODUCTS [303009]

Lucrare de diplomă [631970]

Mod. Coala N.Document Semnat Data [630994]

Administrație publică [627679]

Copyright Notice

Similar Posts