University of Baghdad

Al-Khwarizmi College of Engineering

Information and Communication Dept.

APPLICATION OF HEALTH
NOTIFICATIONS OF CORONAVIRUS CASES

STUDENTS NAMES
Hussein Ali Mohammed
Batool Jaafar Bashar

Third class

(2020-2021)
The Coronavirus Disease 2019 (COVID-19) pandemic has sparked
attention in many countries, especially those that have experienced a
steep spike in the number of identified cases. The continued spread of
the coronavirus suggests that this situation may be here to stay for a
while. cases tracing is a time-consuming and resource-intensive process.
Certain countries. Furthermore, the massive info emic on COVID-19 on
the Internet has also resulted in the widespread circulation of
misinformation online. This outbreak has evoked irrational fear and
anxiety from the public, which has resulted in destabilizing of societal
norms, such as panic buying and hoarding of daily necessities, and can
potentially pose serious health risks to the public. The main idea of this
web application is a web application for Health notifications of
Coronavirus cases is a web application belonging to the Ministry of
Health that includes all hospitals, which provide a daily report to the
Ministry of Health on about the number of coronavirus infections for
today, The number of cases of recovery, Number of deaths, Number of
beds available for infected persons, The number of oxygen bottles
available and Availability or non-availability Vaccine doses

i
Abstract ……………………………………………………….……………….………………( i )

Introduction …………………………………………………………………...……..……( iii )

Chapter One ………………………………………………………………….…...…………( 1 )

Front - End ……………………………………………………………………….…( 2 )

Back - End .…………………………………………………..………………………( 3 )

Database ……………………………………………………………………….….…( 4 )

Chapter Two …………………………………………………………..……..….…………( 5 )

Part One : Home Page …………………………………………………………( 6 )

Part Two : Hospital Page ………………………………………..…………( 12 )

Part Three : Ministry Of Health Page.…………………..……………( 21 )

Entity Relationship ………………………………………………….....……( 27 )

Chapter Three …………………………………………………………...…………….…( 28 )

Conclusion ………………………………………………………………....……( 29 )

Future Work …………………………………………….….………….....……( 30 )

Reference ……………………………….…………………...…………….…..…( 31 )

ii
COVID-19 is an infectious disease that causes severe acute respiratory
syndrome virus 2 (SARS-CoV-2), a global list.

High transmission rate, case fatality rate greater than 1%, and lack of an
effective antiviral treatment or vaccine, the mainstay of the award is
containment and operationalization.

Success scores in managing the burden of COVID-19. The spread of the

COVID-19 virus, the spread of information contained in the virus itself,
spread. Technological advances in social communication create
opportunities to work safely, informed, and connected yet this type of
work perpetuates and amplifies the current epidemic, which continues to
work and amplify the epidemic

iii
 CHAPTER ONE
PREREQUISITES

1
 Front – End

The part of a website that the user interacts with directly is termed the
front end. It is also referred to as the ‘client side’ of the application. It
includes everything that users experience directly: text colors and styles,
images, graphs and tables, buttons, colors, and navigation menu. HTML,
CSS, and JavaScript are the languages used for Front End development

❖ Front end Languages: The front-end part is built by using

some languages which are discussed below:

HTML : stands for Hypertext Markup Language. It is used to design

the front-end portion of web pages using a markup language. HTML is
the combination of Hypertext and Markup language. Hypertext defines
the link between the web pages. The markup language is used to define
the text documentation within the tag which defines the structure of web
pages.

CSS : Cascading Style Sheets fondly referred to as CSS is a simply

designed language intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that
makes up each web page.

JavaScript: JavaScript is a famous scripting language used to create

magic on the sites to make the site interactive for the user. It is used to
enhancing the functionality of a website to running cool games and web-
based software

2
 Front-end Framework: we use bootstrap [1]:
Bootstrap is a free and open-source CSS framework directed at
responsive, mobile-first front-end web development. It contains CSS-
and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other interface
components.
jQuery [2] is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works
across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write
JavaScript.

Back – End
Backend is the server-side of the website. It stores and arranges data,
and also makes sure everything on the client-side of the website works
fine. It is the part of the website that you cannot see and interact with. It
is the portion of software that does not come in direct contact with the
users. The parts and characteristics developed by backend designers are
indirectly accessed by users through a front-end application. Activities,
like writing APIs, creating libraries, and working with system
components without user interfaces or even systems of scientific
programming, are also included in the backend.
❖ Back end Languages: The back end part is built by using php
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-
used open-source general-purpose scripting language that is especially
suited for web development and can be embedded into HTML.

3
 Database
A database is a systematic collection of data. They support electronic
storage and manipulation of data. Databases make data management
easy.
Let us discuss a database example: An online telephone directory uses a
database to store data of people, phone numbers, and other contact
details. Your electricity service provider uses a database to manage
billing, client-related issues, handle fault data, etc.
Let us also consider Facebook. It needs to store, manipulate, and present
data related to members, their friends, member activities, messages,
advertisements, and a lot more. We can provide a countless number of
examples for the usage of databases.

❖ For database we use MYSQL [3] language

MySQL is an Oracle-backed open-source relational database
management system (RDBMS) based on Structured Query Language
And the reason that we choses MySQL is Many of the world's largest
and fastest-growing organizations including Facebook, Google, Adobe,
Alcatel Lucent and Zappos rely on MySQL to save time and money
powering their high-volume Web sites, business-critical systems and
packaged software.

4
 CHAPTER TWO
PRACTICAL

5
 PART ONE – HOME PAGE

The home page consists of three parts

• Header of page
• Total statistics of injuries, deaths, recovery cases and number of
hospital in application
• A special table for each hospital found within the application

6
 it is the top part of a website containing the title and button when click
on it going to login and signup page
in this section of page, we use (CSS wave animation using SVG).
Animation is very important part of any website because it improves
user experience and makes it visually appealing.

Content of header
▪ Title: Page titles help to understand what web page is about
▪ button when click on it going to show popup log in and sign up
page
▪
Using Bootstrap’s JavaScript modal plugin to add dialogue
to the site

7
 ➢ signup
when click on the Button go to sign up section with simple animation
(using CSS and JS to do this animation) and this section to register a
new hospital or any dispensary
In sign up user should enter
1- name hospital
2- location of hospital
3- email
4- emergence phone number
5- password

8
 ➢ Sign in
when click on the Button go to the login section with simple animation
(using CSS and JS to do this animation) after registration the user of the
hospital or dispensary can use the email and password that he has
entered to log in
in sign in user should enter
1- Email of hospital
2- password

9
 Flowchart Of Registration

If enter information is
existed in database go to
admin page of hospital

Click on the
Sign in Click on the
Button in
header of slider Button in sign
home page in slider

If enter information is didn’t

existed in database a
message appears (Invalid
Username or Password)

Sign up
slider

If enter information is true, a

message appears (User
registration successfully) in
home page

If enter password is didn’t

match, a message appears
(Password did not match) in
home page

If enter email is existed in

database a message appears
(Email already exists in
database)

10
 ❖ Total statistics of injuries, deaths, recovery cases and
number of hospitals in application

these boxes are content the total number of injuries, deaths, recovery and
number of hospitals in application cases (using Bootstrap’s grid)
➢ Bootstrap’s grid system uses a series of containers, rows, and
columns to layout and align content.

We made this part of the page are refresh every 10 seconds

Which mean that the information will be updated every 10 second and
get the data from database and showing it in those boxes

11
 ❖ A special table for each hospital found within the
application

In this part of the page a table is displayed for each hospital added to the
application, and this table displays some information about the hospital,
as well as information about the availability of vaccine doses, the
availability or unavailability of a bed, the availability or unavailability of
oxygen bottles. This saves people time and effort instead of coming to
the hospital.

PART TWO – HOSPITAL PAGE

12
 If the user log in by his email and password the following page will
appear

13
 The right part has tables of names that must the user enter it. The same
table for each section of the right part

As we see there is button under each table. After the user press on any
button the following popup window will appear

14
 Here the user must enter the name and age sex of the case “deaths,
recovered ad injured” and press the case will be saved in the
database “each case saved in the place assigned to it in database”
The following picture from database shows the three tables of cases that
user can enter it.

Another things that we have in the tables of cases after fill it

As we notice that we have two buttons in the table for each

name “row” first one the edit button, this allow for us to edit the
information’s of any wrong case. When the user press on this button the
below popup window will appear:

15
 The above popup window content the information of the case that we
need to correct and after press Add jthe information will update
automatically in that table .
The second button we have in the table after fill it is the
delete button that allow user to delete this name ”row” from table and
database.
After press on delete the following popup window will appear

If user click on confirm the name of case will be deleted from table and
database

16
 In the left part as we see there are daily numerical stats in boxes and
above each table their label tells us what this box points for

This box refers to number of

deaths in tis hospital

This box refers to number of

injured in tis hospital

This box refers to number of

recovered in tis hospital

This box refers to number of

vaccines in tis hospital

17
 This box refers to number of beds
in tis hospital

This box refers to number of

oxygen bottles in tis hospital

And the last thing in this page is the requirements.

18
 This text box has the requirement that the hospital need “any things “and
the admin will decide if wont to response this requirement or not
And we can see the button below the requirement box if the user click
on it the following popup window will appear

This for is very important to fill the above boxes “ just for beds, oxygen
and vaccines ”

19
 The following flowchart show how the admin will response these
requirements or not and how to send the number of beds, oxygen and
vaccine to database and showing it in the third page

After click Add

The requirement “beds, oxygen

Save “beds, oxygen and vaccines”
goes to the table and vaccines” go
and requirement in
in the below of to sidebar for
Database
admin page showing it

The admin The label will be like this

will confirm Confirm
the
requirement
or not

Ignore

The label will be like this

20
 PART THREE – MINISTRY OF HEALTH PAGE
After the log in by his email and password of the ministry of health the
following page will appear

21
 This page consists of six parts
1- header of page
2- Total statistics of injuries, deaths and recovery case
3- chart to display injuries, deaths and recovery case today in each
governorate
4- chart to display monthly injuries
5- table to display the requirements of each hospital
6- slider of hospital

➢ header of page

It content [log out] when user click on it return to home page

➢ These boxes are content the total number of injuries, deaths,

recovery and number of hospitals in application cases

We made this part of the page are refresh every 10 seconds

22
 ➢ Chart to display injuries, deaths and recovery case today in each
governorate

we Used a pie chart to compare number of injuries, deaths and recovery

case today in each governorate (google charts) by select all hospital in
each governorate from database and count the number of injuries, deaths
and recovery case for this day

➢ Chart to display monthly injuries

23
 This chart is made in (CSS and JS)
This chart displays the number of injuries in each month. The number of
injuries is counted from table of injuries in database for each month

➢ Table to display the requirements of each hospital

Each hospital within the application has its own record in this table. If
the hospital needs some requirement, the hospital records the
requirement on its own page (admin page of hospital).
From the table requirements in database data are fetch and displays in
this table
If the ministry of health is response these requirements or not
This response will appear in admin page of hospital

24
 The following flowchart show how the admin in hospital page will
response these requirements or

25
 ➢ Slider of hospital
In the left side of page there is slider contain all hospital in application
when
click on the name of hospital dropdown menu will appear this dropdown
menu contents:
• The number of injuries for this day.
• The number of cases of recovery for this day.
• Number of deaths for this day.
• Number of beds available for infected persons for this day.
• The number of oxygen bottles available for this day.
• The number of oxygen Vaccine available for this day.
•
We made this part of the page are refresh every 10 seconds

Slider before click Slider after click on

on name of any name of any
hospital hospital

26
 THE ENTITY RELATIONSHIP (E-R)
MODEL FOR DATABASE THAT USED
IN THIS APPLICATION.

27
 CHAPTER THREE
CONCLUSION AND
FUTURE WORK

28
 CONCLUSION

1-Preparing daily statistics about injuries, deaths and recovery

from the Corona virus

2-it is a way to monitor medical supplies in every hospital to

provide them in hospitals

3-It is considered a monitoring application to follow up on

hospitals and to note the level of efficiency of each hospital

4-discover the endemic areas by monitoring infections in each

area to limit the spread of the virus

29
 FUTURE WORK

1. Contact points for help: The hospital number is contacted

to book an appointment or request assistance for Corona

patients

2. Booking an appointment to receive the (Corona) vaccine

3. The service of booking an appointment to take a swab

test for the patient Also, received a swab test result by e-

mail

4. Increase the safety of the site -

5. Make a comprehensive website for all diseases, not just

Corona

6. Add fields to support the blood plasma -

7. Add data placement charts according to ages

30
 1-https://getbootstrap.com/docs/5.0/getting-

started/introduction/

2-https://jquery.com/

3-https://www.mysql.com/

31