1

A Multimedia Based Hybrid System

For

Health Care Application

A Project Report

Presented to

The Faculty of the College of

Engineering

San Jose State University

In Partial Fulfillment

Of the Requirements for the Degree

Master of Science in General Engineering

By

Akash Panwar

Vikas Dahuja

Yogesh Goyal

May, 2012

2

Copyright © 2012

Akash Panwar , Vikas Dahuja , Yogesh Goyal

ALL RIGHTS RESERVED

3

APPROVED FOR THE COLLEGE OF ENGINEERING

Prof. Weider D. Yu, Project Advisor

Mr. Deepak Wadhwani, Industry Advisor, Cisco Systems

Dr. Leonard Wesley, Director, MSE

6

ABSTRACT

A Multimedia Based Hybrid System for Health Care Application

Healthcare refers to diagnosis and treatment of diseases. Healthcare field is one of the most

advanced fields today but it still needs some convergence. Primary health care and secondary

health care services are provided all over the world but the gap between doctors, patients,

medical staff and inter hospitals needs to be bridged. There is a big amount of information that

needs to be transferred and inculcated. This information which needs to be shared is not just

vocal and text today. With the advancement in technology, the other file types such as images,

videos, X-ray images, MRI results need to be shared as well. Today, the communication cannot

be done just by text or documentation. Multimedia plays an important role in such cases. Our

goal here is to design a multimedia hybrid system which will help converge all the

communication methods and file types for the better communication between hospitals, doctors

and patients. This website will provide a single platform for all communication for patients,

doctors and the hospital. Everything will be stored on a server and accessible only by authorized

users. This will include text, all consultation data, patient’s detail, patient’s images such as when

they reach the hospital after an accident, their results and surgery videos. This system will not

just be accessible through desktops and laptops but also through mobile devices. This will make

it a multimedia hybrid system. The idea is to bring different people and devices together through

multimedia for better communication to have a better healthcare system.

7

Acknowledgments

We would like to thank our Project Advisor Prof. Weider D. Yu for his guidance throughout this

year. We are highly indebted to him for all his support and time in completing this project. We

would also like to express our thanks to Prof. Leonard Wesley and Mr. Deepak Wadhwani for

their constant motivation and guidance.

8

Table of Contents

Chapter 1. Project Overview ............................................................................................1 Introduction .................................................................................................................1

Project goals and objectives ................................................................................1 Problem Statement ..............................................................................................2 Project Motivation ...............................................................................................2 Project application and impact ............................................................................2 Project results and expected deliverables ............................................................3 Economic Aspects, Social and Environment Impacts .........................................4

Proposed Areas of Study and Academic Contribution ................................................5 Current State of the Art ...............................................................................................7

Chapter 2. Project Architecture .....................................................................................13 Introduction ...............................................................................................................13 Architecture Subsystems ...........................................................................................14

Chapter 3. Technology Descriptions ..............................................................................19 Client Technologies ...................................................................................................19 Middle-Tier Technologies .........................................................................................21 Data-Tier Technologies .............................................................................................23

Chapter 4. Project Design ...............................................................................................25 Client Design .............................................................................................................25 Middle-Tier Design ...................................................................................................35 Data-Tier Design .......................................................................................................35

Chapter 5. Project Implementation................................................................................36 Client Implementation ...............................................................................................36 Middle-Tier Implementation .....................................................................................54 Data-Tier Implementation .........................................................................................58

Chapter 6. Performance and Benchmarks ....................................................................63 Benchmark .................................................................................................................63 Testing .......................................................................................................................65 Methodologies ...........................................................................................................65

White Box Testing: ...........................................................................................65 Black Box Testing: ............................................................................................66

Chapter 7. Deployment, Operations, Maintenance ......................................................67 Deployment ...............................................................................................................67 Operations ..................................................................................................................67 Maintenance ..............................................................................................................69

Chapter 8. Summary, Conclusions, and Recommendations ........................................70 Summary ....................................................................................................................70 Conclusions ...............................................................................................................70 Recommendations for Further Research ...................................................................71

9

References .........................................................................................................................72

10

List of Figures

Figure 1 Smartphone Market Share in US in March 2011 ................................................18 Figure 2 Kaiser Permanente ...............................................................................................20 Figure 3 Health Vault.........................................................................................................21

Figure 4 No More Clipboard..............................................................................................21 Figure 5 Curas EMR iPhone App ......................................................................................23 Figure 6 Haiku ...................................................................................................................24 Figure 7 System Architecture ............................................................................................25 Figure 8 Users of the System .............................................................................................26

Figure 9 Interfaces provided to the user ............................................................................26 Figure 10 Modes of communication ..................................................................................26

Figure 11 XAMPP Controller ............................................................................................35 Figure 12 Class Diagram ...................................................................................................36 Figure 13 Registration Activity Diagram ..........................................................................37 Figure 14 Login Activity Diagram ....................................................................................37

Figure 15 View appointment Activity Diagram ................................................................38 Figure 16 Update appointment Activity Diagram .............................................................38

Figure 17 Schedule appointment Activity Diagram ..........................................................39 Figure 18 View image Activity Diagram ...........................................................................39 Figure 19 Play video Activity Diagram .............................................................................40

Figure 20 Patient List retrieval Swim Lane Diagram ........................................................40

Figure 21 Prescribing tests Swim Lane Diagram ..............................................................41 Figure 22 Registration State Diagram ................................................................................42 Figure 23 View profile page State Diagram ......................................................................42

Figure 24 Schedule appointment State Diagram ...............................................................42 Figure 25 Update appointment State Diagram...................................................................43

Figure 26 Upload images State Diagram ...........................................................................43 Figure 27 Upload videos State Diagram ............................................................................44 Figure 28 Viewing image State Diagram ...........................................................................44

Figure 29 Play video State Diagram ..................................................................................45 Figure 30 Web Application UI Header ..............................................................................46

Figure 31 Dropdown menus...............................................................................................46 Figure 32 Progress bar .......................................................................................................47 Figure 33 Schedule appointment form ...............................................................................47 Figure 34 JavaScript based pop-up calendar .....................................................................48

Figure 35 Only available time slots are shown after a REST call is made to the server ...48 Figure 36 View all appointments .......................................................................................49 Figure 37 Modal - view selected appointment ...................................................................50 Figure 38 Update appointment modal................................................................................50 Figure 39 Delete appointment modal .................................................................................51

Figure 40 Update user profile ............................................................................................52

Figure 41 Confirmation box...............................................................................................52

Figure 42 Upload image.....................................................................................................53 Figure 43 Image gallery thumbnails ..................................................................................53 Figure 44 View image modal .............................................................................................54 Figure 45 Video upload form .............................................................................................54

11

Figure 46 Video gallery thumbnails ..................................................................................55 Figure 47 Pop-ups with message .......................................................................................55 Figure 48 WebUIHelper.java code snippet ........................................................................56 Figure 49 Mobile app home page ......................................................................................57

Figure 50 Dropdown menu in mobile interface .................................................................58 Figure 51 Schedule appointment .......................................................................................59 Figure 52 View all appointments .......................................................................................60 Figure 53 Tablet home page ..............................................................................................61 Figure 54 Tablet schedule an appointment ........................................................................61

Figure 55 Upload image through tablet .............................................................................62

Figure 56 Upload video through tablet ..............................................................................62

Figure 57 Libraries used ....................................................................................................63 Figure 58 web.xml code snippet ........................................................................................64 Figure 59 Ohconstants.java code snippet...........................................................................64 Figure 60 Packages structure .............................................................................................65

Figure 61 Appointment.java code snippet .........................................................................65 Figure 62 SessionHandle.java ............................................................................................66

Figure 63 Database classes ................................................................................................68 Figure 64 Appointment table .............................................................................................68 Figure 65 Doctor table .......................................................................................................68

Figure 66 Media box table .................................................................................................69

Figure 67 Patient table .......................................................................................................70 Figure 68 Timeslot table ....................................................................................................70 Figure 69 Userprofile table ................................................................................................71

Figure 70 JUnit Testcase snippet .......................................................................................75 Figure 71 Testing application - Selenium IDE ..................................................................76

12

List of Tables

Table 1 Resources and cost of the project .........................................................................78

13

Chapter 1 Project Overview

Introduction

Project Goals and Objectives

Today, there are many applications over the web that can be used to improve the appointment

system i.e. a patient can go online and take an appointment. But these systems just provide a

static interface which has only text and radio buttons and check boxes which can be used to take

an appointment and cancel an appointment. What if a patient wants to communicate more with a

doctor? What he wants to show an image of his burns or his swollen knee to a doctor? The goal

of our system is to bridge this gap between a doctor and a patient. Our goal is to provide a

system through which a doctor and a patient can communicate better and during different frames

of time and that too more frequently.

As per w3school’s definition [1], “Multimedia comes in many different formats. It can be almost

anything you can hear or see like text, pictures, music, sound, videos, records, films, animations,

and more.” Therefore, use of multimedia can be really useful for healthcare application because

it gives you a chance of interacting with more real time data. For example, in case of an

emergency, the doctor can instruct his assistants to provide some very critical first aid while he is

driving to the hospital. This can be done over phone of even a video call. This can future be

extended to the point where can get the surgery done by skilled sub ordinates, even without

being physically present on the spot.

Problem Statement

Health is the most important thing in a man’s life. If one has a million dollars to spend in a

month, he can buy anything but health. We have come a long way from the start of computers to

design and create world class medical equipments which can help cure people. A man is

14

connected to millions of other people through social networking sites. Half of man’s problems

can be solved through communicating well. In health care field, if the communication is done

better, the problem can be solved early for a patient. But in this hi-tech world, that gap is still

there between a patient and a doctor.

Project Motivation

The gap is not because of the lack of technology, it’s because of the lack of proper medium.

Millions of people are connected through facebook and other social networking sites but one of

the most important communications is still limited i.e. between a patient and a doctor. In

countries like India, China and Malaysia, a patient can walk-in a doctor’s place and can talk. But

in developed countries like the United States, a patient has to call up and take an appointment

and then he/she gets to meet the doctor in a couple of days. During this time, the patient’s

condition may get worse or better and the time at which the doctor sees the patient may not be

the best time.

Project Application and Impact

The project will be used in the Health Care industry. The level at which this project can be used

is from a small clinic to a big hospital. Since everyone has to communicate with a doctor, this

project’s application will be pervasive.

Academically, the project will help our team to learn mainly about two things. One is domain

and other is technology. The domain is the health care domain which is one of the most

important.

Project Results and Expected Deliverables

The project result will be a system which is accessible by the following kind of users

• Doctor

15

• Patient

• Guest

• Admin

These users will be provided with a system which can be deployed over any server and can be

accessed through a browser.

The project will provide an interface to a patient through which he can see all his details on one

application and communicate better with the doctor. The project will also provide the other side

of the interface to a doctor through which he can see a patient’s details and provide prescription,

more information to him through this medium.

The implementation will provide the support of text, images and videos through this interface.

Also, the mobile implementation will provide an easy access to the system through which a

patient can inform a doctor about details about his health condition, injuries or other personal

details along with the basic appointment system.

The main results of the project will be:

• A web application supporting multimedia. This will enable the patients to upload

videos, send videos to doctors, share images related to surgery, injury and talk to the

doctor over the same web application.

• A mobile application will enable the user to access the same application over a mobile

phone.

The main deliverables of the project will be:

• Project Demo which will give the visual presentation of the whole project explaining

how the whole system works.

• Project Code will include all the source files and property files.

16

• Project Report will include the explanation of each part of the project specifying things

like how it was coded, how to configure and the function of each component.

Economic Aspects, Social and Environment Impacts

As the project is a software application and hence will have economic aspects for different

organizations. We are planning to give this application to different organizations free of cost.

This will help the smaller organizations who do not have any online system setup to have a

platform for their doctors and patients.

The social impacts will be beneficial for everyone because rather than putting efforts to go to a

doctor and take an appointment. Rather patients and doctors can keep in touch through this

application online and through mobile devices.

Proposed Areas of Study and Academic Contributions

Why Healthcare?

As per an article published in New York Times in Aug 15th, 2009[6], Barack Obama said, there

is a big debate on future of healthcare in United States. He suggested number of ways by which

we can have health care reforms to ensure people get better healthcare services. In this address,

he suggested four steps for healthcare reforms, which are being implemented over last two years.

After conducting a lot of research on different HealthCare applications present in the market, we

realized that there is no one application which provides the complete solution to doctors and

patients. Also we realized the main mode of communication between doctors and patients is text

or phone.

How Multimedia Can Be Useful in Healthcare

Several medical schools in United States require students to use iPhone or iPod touch. Joseph

Kim [7] is an advocate of using some tablets like iPad and Kindle for educating medical

17

students. For the very simple reason, medical books are usually filled with photos and color rich

images and use of these multimedia equipments can add another dimension to their learning.

As a conclusion, we can say that if we are developing software for healthcare, it should be

compatible on mobile platforms also.

Which Mobile Platform to Use

Now that we understand the importance of multimedia for healthcare professionals, the million-

dolor question is, which mobile platform should our application be developed for? Let’s have a

look at some numbers, which will help us take the right decision.

Nielsen Company conducted a survey [8] of US mobile customers and found out as of march

2011, 37 percent of the Smartphone owners had an Android OS device, 27 percent had an Apple

iOS device and BlackBerry claimed 22 percent of market share. The complete breakdown is

indicated in the chart below.

18

Figure 1 Smartphone Market Share in US in March 2011

[Source: http://blog.nielsen.com/nielsenwire/online_mobile/u-s-smartphone-market-whos-the-most-wanted/]

How We Are Different

Based on our research, there are Web EHR (Electronic Health Record) systems and there are

mobile EHR systems, which run only on one platform (mostly iPhone). Our product will be

different from the existing on following points:

1. We will be developing our system as web-services. These web-services can be used by

both web and mobile devices. The business logic has to be written once and it can be

consumed by different platforms and languages.

19

2. Also these web-services can be used in a new system as well as a system which has

already been deployed. The advantage of using these web-services is more in case a

hospital or clinic already has a system and wants to integrate some new functionality

from our application.

3. In case of mobile devices, our focus will be on Android devices as the market of Android

devices is flourishing as shown in Fig. 6.

4. Except few web applications, almost all EHR systems are very expensive. Especially

mobile applications cost as high as $50 for download and $20 per month [9]. However,

our application will available for free.

Current State of the Art

There are two types of applications, which are already being developed in this field: first web

applications and second mobile applications. We will look at them one by one.

Top 3 Web Applications in Healthcare [2]:

1. Kaiser Permanente: Kaiser Permanente offers a good interface for the patients. A

patient can login to his accounts and see his information. He can book an appointment

and also can send an email to his doctor.

20

Figure 2 Kaiser Permanente

[Source:https://members.kaiserpermanente.org/kpweb/securedClusterQuery.do?cluster=mydoctor ]

2. HealthVault: It’s a Microsoft company. You get a free account, which includes sharing

of personal health records with many Web applications, EMR Systems, fitness devices,

physicians, family members or other you choose [2].

21

Figure 3 Health Vault

[Source:http://www.microsoft.com/presspass/emea/presscentre/pressreleases/MSHealthVault.mspx]

3. NoMoreClipboard: This tool helps you in compiling, managing and sharing our medical

records easily, which eliminate the doctor’s clipboard.

Figure 4 No More Clipboards

[Source: http://www.phrstoday.com/nomoreclipboard.html ]

Top 3 Mobile Applications in Healthcare

There are around 7000 [4] iPhone and Android healthcare applications. However, there are very

few, which are similar to the one we are trying to create. Based on our discussion with Dr

22

Mukesh Goyal, who is an expert in healthcare systems, here is products which are close to our

product.

1. Curas EMR Mobile for iPhone:

This app is used to connect you to patient information anywhere on cellular network. It’s a

native iPhone application.

With Curas EMR Mobile, you can [5]:

• View your schedule

• View and update patient medications

• Respond to telephone encounters

• Fax prescriptions

• Order and view labs/imaging tests

• Enter Out of Office charges

• View progress notes

23

Figure 5 Curas EMR iPhone App

[Source: http://www.curas.net/PRODUCTS_EMRMOB.htm]

2. Haiku from Epic Systems

It provides the users the Electronic Health Records, clinical schedules, health summaries, test

results and notes through secure access.

24

Figure 6 Haiku

[Source: http://mobihealthnews.com/6030/epic-systems-launches-iphone-ehr-app-haiku/4/]

25

Chapter 2 Project Architecture

Introduction

The system is an N-Tier application and multi-layer application. The important logical layers of

the application are:

• Client: Sends requests to the Server and expects a return value depending on the result of

the operations.

• Server: All the operations are performed in this layer. The requests received from the

Client side are identified and processed. Depending upon the request, calls are made to

the functions on the server side. The database is updated according to the function

requirement and the reply is sent back to the client with the required results.

• Database: All the data is saved in this layer. Tables and fields are updated according to

the client calls and server operations.

Figure 7 System Architecture

26

Figure 8 Users of the System

Figure 9 Interfaces provided to the user

Figure 10 Modes of communication

Architecture Subsystems

The Online Health Care web and mobile application is divided into three subsystems:

1. Front End – User subsystem

2. Middleware – Web Services

3. Database Subsystem

27

Frontend subsystem

This subsystem consists of the user interface that a user sees. A user can access the system in

various ways i.e. through web app on desktops and laptops, or through the mobile app on her

smart phone or tablet. It provides the user access to the whole system through which he can

view, edit, update, and delete the desired information. This interface provides user access to his

profile, appointments, medical history and multimedia files. It interacts with the underlying

business logic to get that information from the back end database system.

When a user logs into the system, his privilege is set depending upon the type of user he is. A

doctor can access a lot more information about all the patients under him where as a patient can

access only his records. Depending upon the privilege level, a user is shown the information.

The following kind of users can access the system:

1. Admin

Admin can add new doctors and patients to the system. Doctors and patients need to request

admin for the system access. Admin provides doctors and patients with the username and

password. Admin needs to make sure that the users are provided privileges accordingly to the

doctors and patients.

Administrator can perform following functions:

• Admin can add new patients and doctors in the system.

• Admin can delete a doctor or patient from the system in case they unsubscribe from

the system.

2. Doctor

Doctor can perform the following functions:

• Doctor can access all the appointments for the current day and manage them.

28

• Doctor can update or change an appointment i.e. time, date of an appointment.

• Doctor can view images and videos uploaded by all the patients who have uploaded

their images for him.

• Doctor can view/update his profile and change the information except his username.

• Doctor can view, update the test results of patients.

3. Patient

Patient can perform the following functions:

• Patient can see all his appointments from the very first appointment to last

appointment.

• Patient can add an appointment according to the time slots available for a particular

doctor.

• Patient can update his appointment for a new time slot according to the time slots

available for a particular doctor.

• Patient can add comments to his appointments.

• Patient can upload new images and tag an image by a doctor’s name so that it is

visible in that particular doctor’s gallery.

• Patient can upload new videos and tag a video by doctor’s name so that it is visible in

that particular doctor’s gallery.

• Patient can view his image gallery.

• Patient can view his video gallery.

• Patient can view his results and reports.

• Patient can view and update his profile. He can change all the fields except the non-

editable fields like username.

29

Middle ware subsystem

This subsystem consists of all the business logic. Middleware provides the front end with the

services which are used to provide all the functions to the user at the front end. When a user

clicks a button on the front end i.e. the user interface, fires an event which interacts with the

business logic. This business logic has the programming logic which takes the input from the

front end and returns the output to the front end. Front end has the capability to catch the results

from the middleware.

The middle ware provides the functional algorithms that exchanges information between front

end and the back end i.e. the database. Business logic comprises of different objects to represent

different entities in the application. These entities interact with each other and the database

through methods. In single tiered applications, where everything is coupled together it becomes

problematic sometimes. If the system will be growing in future, it is better to have a multi-tiered

architecture which is easy to maintain.

Database Subsystem

Database or the back end subsystem of the application is where all the data is persisted. In multi-

tier applications, the business logic stores and reads the data from the database only. When a user

(patient or a doctor) wants to see all the appointments, this data is fetched from the database by

the business logic. All the data and states are stored in the database and are accessed by the user

at the front end. The middleware acts as the interface between the front end and the database.

30

Chapter 3 Technology Descriptions

The technologies used for this project are chosen in a way such that that they are really

compatible with each other. All these technologies used are open source.

Client Technologies

For this project, the user can access the system through two application interfaces:

1. Web interface

2. Mobile interface

Web Interface

Web interface is the interface that a user sees on a desktop or laptop screen when he goes to the

specific URL. Since this is a online health care application and will be accessed by doctors as

well as patients who are not very good with computers, the interface has to be very user friendly

as well easy to use.

The following technologies were used to create the client side of the project

• Web Client : HTML , CSS , AJAX , JavaScript, JQuery

• HyperText Markup Language (HTML) is the main markup language for web pages.

HTML elements are the basic building-blocks of web pages. CSS is used to provide the

better look and style to the markup language.

• AJAX is used to create asynchronous web applications. The benefit of using AJAX is

that when a user sends a request to the server and when the server replies, the whole web-

page is not loaded; only the required div of the page is loaded. This helps in very smooth

transition of data from server.

• The client side of the application interacts with the web-services through JQuery and

JavaScript. JQuery is a cross-browser JavaScript library. JQuery is open source and free

31

to use. It is designed to make it easier to navigate, create animations, handle events and

develop AJAX applications.

Twitter Bootstrap

Twitter Bootstrap is a collection of tools for creating web pages and application. It provides a

certain style sheets and JavaScript files. To use the CSS styling in the web pages we need to use

its classes in our application in the HTML. Including these classes gets the information from the

CSS and JavaScript files and hence let us has that look in our web page.

The advantages of Twitter Bootstrap

• It is very light

• It is easy to use

• It provides a good and user friendly interface

• It is easy to deploy. Only certain files are needed to be included.

Mobile Interface

We made this application such as it could be accessed from a desktops, laptops as well as mobile

devices such a mobile phone running Android OS or a tablet running the Android OS.

The user interface on the mobile devices can be accessed in two ways:

• Mobile App

• On the browser

A user can access the application on a mobile device in two ways. He can click on the browser

icon and put the URL in the address bar which will take him to the website. The other way is that

he can install the app for Online Health Care System on his mobile device and just click on the

icon on the mobile interface.

32

The technologies used for the mobile interface are:

Android Development Tools (ADT)

It is a plugin that is installed in the Eclipse IDE to provide an integrated environment. Using this

we can deploy and test the mobile apps on the emulator provided by ADT.

WebView

WebView class is an extension of Android’s view class that helps make the already created web

app to be compatible with the mobile devices.

ADT and WebView are used to give a very good user interface to the users. Moreover the CSS is

changed according to different size of devices so as to give the best experience to the users. For a

mobile device, the front page for example has only limited but sufficient number of buttons so as

to guide them to next pages, whereas for tablets that have bigger display than a mobile phone, a

full page with all the controls is viewed.

Middle-Tier Technologies

Following technologies were used to implement the middle-tier of the application. We tried to

work on the latest technologies for both the purpose of learning and making a good stable

project.

Java EE

RESTful web Services

Frame: Eclipse Helios/Indigo for Java EE

Connector: JDBC in case of MySQL

Junit

33

Xuggle APIs for uploading videos

JAX-WS – Java programming language API

For middle-tier we selected RESTful technologies because our application is more about

resources such as a patient’s profile, his results, reports, images and videos. RESTful works on

HTTP protocol where everything can be considered as a resource. The benefits of RESTful APIs

are:

REST is simple yet really powerful

Provides HTTP caching and help handle high load.

A very complex application can be organized as resources.

The same APIs can be used by web client as well as a mobile client

Eclipse

We used Indigo Version (Build id: 20110615-0604) of Eclipse. Using this we could do all the

development of the project at one place only.

JUnit

To test the web-services before we moved to the front end of the application, we used JUnit. We

wrote test cases in JUnit and verified if the data in the JSON format was being returned correctly

by the web-services or not.

Version - junit-dep-4.10.jar

Android Development Toolkit

34

To develop the interface between the web services and mobile client, we had to use the ADT

integrated with eclipse to write the code for the mobile application

Version - 17.0.0.v201203161636-291853

Xuggle

Xuggle is a free open-source library for Java developers to uncompress, manipulate, and

compress recorded or live video in real time. We used this library to compress and encode the

video and uncompress it for streaming. This library helps in compressing the video from higher

resolution to lower resolution so as to save bandwidth as well. http://www.xuggle.com/

Other tools and libraries used in the middle-tier are

apache-tomcat-6.0.33 – This will be used as the web-server for the application

apache-ant-1.8.2 – To make the process of building the .war files easier and also for

configuration, we will be using apache-ant

apache-wink-1.1.3-incubating – This is the container for RESTful services that we will be

coding

Data-Tier Technologies

MySQL

As we know MySQL is world’s mostly used relational database management system, we used it

for our project to store text and images.

JDBC Connector

35

JDBC connector was used to connect the database with the Java code in the middle-tier.

The database tables in MySQL store all the information about doctors, patients, profiles, test

results, reports and appointments. The images are stored as byte code in the tables only. We are

storing the videos as compressed videos on our server machine only. To store the videos in

MySQL table was not possible because of the size and other technical issues.

PHPMyAdmin

To have a good user interface to the database, we used XAMPP’s PHPMyAdmin. This gives us a

very easy to use user interface through which we can make and edit tables in no time.

Figure 11 XAMPP Controller

36

Chapter 4 Project Design

The following class diagram illustrates the project design. In the class diagram, different entities

are shown interacting with each other.

Figure 12 Class Diagram

Also the whole project is shown in the form of activity diagrams. We divided the whole project

in graphical representations of workflows of activities. These activity diagrams really helped

each of us to understand the project better before implementation.

37

Activity Diagrams

Figure 13 Registration Activity Diagram

Figure 14 Login Activity Diagram

38

Figure 15 View appointment Activity Diagram

Figure 16 Update appointment Activity Diagram

39

Figure 17 Schedule appointment Activity Diagram

Figure 18 View image Activity Diagram

40

Figure 19 Play video Activity Diagram

Swim Lane Diagrams

Swim Lane Diagrams show the flow of information between various entities in the system and

let user understand the flow more clearly.

Figure 20 Patient List retrieval Swim Lane Diagram

41

Figure 21 Prescribing tests Swim Lane Diagram

State Diagrams

The state diagrams describe the behavior of a system. In a state diagram, a system is shown as

composed of a finite number of states. The behavior is represented in series of events that are

called states. Every action or event leads to another state. Since in the web-applications, the state

can be changed to any other state from any page, there is no exit state in the following state

diagrams.

42

Figure 22 Registration State Diagram

Figure 23 View profile page State Diagram

Figure 24 Schedule appointment State Diagram

43

Figure 25 Update appointment State Diagram

Figure 26 Upload images State Diagram

44

Figure 27 Upload videos State Diagram

Figure 28 Viewing image State Diagram

45

Figure 29 Play video State Diagram

46

Chapter 5 Project Implementation

Following sections cover the project implementation of different tiers.

Client Implementation

As mentioned in the technologies used and the project design, we used Twitter Bootstrap,

HTML, CSS, JavaScript and JQuery for our front end. Through JQuery and AJAX calls, the

front end sends request to the server and receives response from the server.

Here are some of the screenshots of the code and the UI.

Figure 30 Web Application UI Header

We have a very clean and light top bar for all the pages. This top bar is made using Twitter

Bootstrap libraries.

Figure 31 Dropdown menus

We have dropdown menus for all the links. We can add or remove more links in these drop-

down menus very easily.

For wait time, when the data is being loaded, we show the progress bar. This helps the user know

that the data is being processed.

47

Figure 32 Progress bar

Figure 33 Schedule appointment form

48

Figure 34 JavaScript based pop-up calendar

Figure 35 Only available time slots are shown after a REST call is made to the server

49

For every doctor, the visible slots are only those which are visible. To check this, when a doctor

is selected by a patient, a GET call goes to the server again to get all the available slots so that

there is no conflict in two appointments.

Figure 36 View all appointments

A user can view an appointment in the form of a table with the provision of viewing, updating

and deleting a particular appointment with the easy buttons at the bottom.

Modals

To view, update or delete an appointment, we are not taking a user to a new page. Everything is

done through AJAX; only the required content is loaded.

Also rather than loading the content on the same page, we are using Modals. This gives the

required information in the highlighted pop-up. CSS and JavaScript are used for its look and feel.

50

Figure 37 Modal - view selected appointment

Figure 38 Update appointment modal

51

Figure 39 Delete appointment modal

Once view all appointments link is clicked, an HTTP GET (get all appointments) call goes to the

server. When the server sends the JSON object back to the client, JQuery handler takes the JSON

object and puts it into an HTML Table.

When a particular appointment is selected for view, update or delete intention, a GET call goes

to the server to load the appointment in the Modal.

Once the appointment is loaded in a modal, and a person clicks either Update or Delete button,

the PUT or DELETE call goes to the server to update the data in the database.

User profile

A user can update his profile at anytime. He can update all the details except the username that is

provided by the admin.

52

Figure 40 Update user profile

Alert boxes

Different CSS styling has been used to give a user feeling of an error or a success.

Figure 41 Confirmation box

53

Multimedia

Figure 42 Upload image

Thumbnails

Images are viewed not as links but as thumbnails.

Figure 43 Image gallery thumbnails

If a particular image is selected, it opens in a modal

54

Figure 44 View image modal

Figure 45: Video upload form

55

Figure 46 Video gallery thumbnails

When a video is clicked upon, it plays in a new modal window similar to images.

Pop-ups on hovering over

We have used hover on pop messages to give user a very good experience. When a user hovers

over an image or a video, a pop-up with a relevant message appears on the screen.

Figure 47 Pop-ups with message

WebUIHelper Class

One of the most important Java classes we used was WebUIHelper. This class returns the

common html code to all the JSP files. This way the maintenance of html and jsp files is easier.

56

Figure 48: WebUIHelper.java code snippet

This class has the common code for top bar, drop down menus and side bar.

57

Mobile front-end

Figure 49: Mobile app home page

58

Figure 50: Dropdown menu in mobile interface

59

Figure 51 Schedule appointment

60

Figure 52 View all appointments

61

Tablet front-end

Figure 53: Tablet home page

Figure 54 Tablet schedule an appointment

62

Figure 55 Upload image through tablet

Figure 56 Upload video through tablet

63

Middle-Tier Implementation

Middle-tier is pure RESTful web-services implemented in J2EE. We used Eclipse as the IDE.

All the web-services were coded first with dummy data to make end to end connections first.

Once we were able to get the JSON response from the web-services, we connected the web-

services to the database.

Figure 57 Libraries used

64

Figure 58: web.xml code snippet

Constants

The constants that were to be used a lot many times, we used final variables. It is a good

programming practice.

Figure 59: Ohconstants.java code snippet

65

Packages

Middle-tier is the most complex part of our project and we tried our best to keep everything

structured. Everything was kept in a different package so that if want to add a new module it is

very easy to add.

Figure 60 Packages structure

Figure 61: Appointment.java code snippet

66

Security

Figure 62 SessionHandle.java

Assumption: our system should be running on https because we are using personal/sensitive data

over the internet.

Hash table

We use hash table to store the session of a user. The advantage of storing a session and

validating before any request is catered is that it makes the application much more secure. But

security comes with a cost. To store all the sessions for every user means, we are storing a lot of

data in memory. To reduce memory usage, we store only userId, privilege, and sessionId. By

sessionId we identify the sessions. Every client needs one session so to reduce storage, we store

the least information required. Moreover, sessionId is encrypted. So every time a user comes

and logs in, we maintain session for all the logged on users on the server side and we use cookies

as a method for the user to send his sessionId. The sessionId is encrypted integer from which we

retrieve session of the user from the hash table.

How it works

When the web-server starts, it generates the random number as a base for generating session Ids.

It secures the application in a way such that nobody can guess a session Id. When the user

provides username and password (we store MD5 hash of the password in the database), we

calculate md5 hash of the password, and compare it with the stored password hash in the table in

67

database. Then we create a new session and add that to the session table and generate a

corresponding session Id as a key in the hash table. Then that key is encrypted which is an

integer value and sent to the user as a cookie.

Whenever a user sends a request, the browser automatically sends that cookie to that server. For

each HTTP request, the cookie is checked in the hash table. If the session Id in that cookie is

valid, then we extract the user’s information from the session and then on the basis of userId and

privilege of that user, corresponding actions such as extracting data from database, are done.

If the session Id is invalid, the server returns “401-Unauthorised” error. This way only authorized

user can log in and request for resources.

Data-Tier Implementation

We used MySQL database for our project. There are total of 6 tables in the database

1. appointment

2. doctors

3. mediabox

4. patients

5. timeslots

6. userprofile

The images are being stored in the MySQL database only. The videos are being stored on the

server and their thumbnails are fetched and shown in the video gallery.

68

Figure 63 Database classes

Figure 64 Appointment table

Figure 65 Doctor table

69

Figure 66 Media box table

70

Figure 67 Patient table

Figure 68 Timeslot table

71

Figure 69 Userprofile table

72

Chapter 6 Performance and Benchmarks

Benchmark

This application is built for web interface as well as mobile interface. So it is expected that a lot

of people will be accessing this application from desktops as well as mobile devices. Also one of

the major concerns is the UI and ease of using the application.

We have kept our focus on the following benchmarks

1. What functions or operations does the application offer to the user?

We have worked very well towards this aspect of the project. From scheduling an appointment

for a patient to updating his profile, from uploading a photo and video to see the gallery of

images and videos are the main components of this project.

From text, appointments and multimedia, everything is provided to the patient in their profile.

2. How can a user access the application?

Since most of the users like to access their system on the go, we have made this application a

hybrid application. This application can be accessed through desktops and laptops with internet

connection. Users with android mobile devices such as smart phone and tablets can access it on

the go, in the web browser as well as though the mobile app.

3. How user friendly is the application?

We have used a very good UI for both the web app and the mobile app. We have used Twitter

Bootstrap libraries which are being used by most of the new start ups. It is very to use and

73

provides a 12 grid layout which when used on different devices with the responsive CSS and

JavaScript can automatically adjust its size depending upon the type of device.

Also the pop-ups, thumbnails, and drop-down menus provide a very easy to navigate interface.

4. How secure is the application?

As discussed in the technical implementation, we are using encryption of password and session

authentication at the server side at every HTTP request made by the user. The passwords are

encoded and then stored in the table. When a user logs in, a new session is generated and the user

is provided with the key. At the server side, a hash table is maintained for the session Id and the

session. The session comprises of only 3 elements which makes it very light and hence reduces

memory consumption when large number of users access the website at the same time.

5. Accuracy?

The web-services written are very solid in the term that all the error handling is done pretty well.

Since every time a user sends an HTTP request, the session Id is verified and depending upon the

user Id and his privilege, the response i.e. the requested data is sent. Also at every logout, the

session is destroyed at the server side. Moreover, the algorithm used for the appointment module

is written very well. For example, a user cannot select a time slot before he selects a doctor

because selecting a doctor will invoke the database and then only the available slots will be

viewable at the user end for that doctor.

74

Testing

The main goal of the testing activity for our project was to come up with such a test plan that we

can fix as many bugs as we could in the initial phases only.

We performed both white box and black box testing for our project. Since our project has

RESTful web services that require a good white box testing so we needed to cover all the

branches and paths using white-box testing

Black box testing was needed to test the output on the GUI for a particular input or a request.

GUI testing was a very important part of our testing plan because we will have both web-based

and mobile-based system.

We did the unit testing while developing these web-services. This includes using JUnit test cases

and testing methodologies to cover all paths and loops.

Functional Testing

Functional testing refers to validating the requirements. If the system is not doing what it is

supposed to, functional testing captures all the bugs. The behavior of the system should match

the requirements and specifications.

Non-functional Testing

Non-functional testing focuses on aspects like reliability, scalability and availability.

Methodologies

To test the system end to end, we used the below mentioned methodologies:

White Box Testing

In white box testing, the UI is bypassed. Inputs and outputs are tested directly by test drivers and

stubs, and the results are compared against specifications. This form of testing ignores the

75

function of the program under test and will focus only on its code and the structure of that code.

The test cases that have been generated shall cause each condition to be executed at least once.

We used JUnit to write all our test cases for white box testing.

Figure 70 JUnit test case snippet

Black Box Testing

Black box testing typically involves running through every possible input to verify that it results

in the right outputs using the software as an end-user would. We used Selenium to do the UI

testing for our web application.

Selenium IDE is an integrated development environment for Selenium scripts. It is implemented

as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE includes

the entire Selenium Core, allowing you too easily and quickly record and play back tests in the

actual environment that they will run.

76

Figure 71 Testing application - Selenium IDE

77

Chapter 7 Deployment, Operations, and Maintenance

Deployment

The Online Health Care System will be deployed on the following system

Server requirements

Operating System: Windows 7 Professional Edition / Mac Snow Leopard

Processor: Pentium IV or above

RAM: 4GB for Demo

Hard Disk: Minimum 80GB

Client requirements

Web App

Client: Mozilla Firefox 11.0, Chrome for WebApp

Mobile App

Operating System: Ice Cream Sandwich

Client: Chrome or the direct mobile App

Operations

The application is made using Java, Eclipse, MySQL, JavaScript, HTML, CSS, Android

WebView, JQuery, and Twitter Bootstrap. All these technologies and tools are open source and

do not need any expenses.

Basis resource requirements for this project would be:

a. The basic requirement is that that Doctor and the doctor should have internet connection.

b. The main database will be on a central server.

78

c. The client (both doctor and Doctor) needs to have a computer and/or a mobile device to

access the system.

d. The system should be up and running 24X7.

e. The Doctor and doctor should have camera enabled mobile device, webcam for video

communication.

Resource and Cost

Table 1 Resources and cost of the project

Resource Cost Quantity Total Cost

Laptop $800 3 $2400

Windows 7 $5 (for students

from department)

3 $15

Eclipse, Android

SDK, Tomcat,

MySQL, JUnit,

Simulator

Free 3 $0

Android Mobile

phone

$200 1 (we can do testing

on one device only)

$200

Total Cost $2615

79

Technology requirements

The required resources for this project are mainly open source tools. We will be using

technologies like Java EE, Web Services, SOAP, RESTful APIs, MySQL, all of which are

available without any cost.

Maintenance

There is no cost to maintain the site except that the server needs to be running 24x7. If a

hardware device fails, then only there will be a maintenance cost.

Following are the mandatory maintenance tasks:

1. Availability: The server and website should be available 24*7. It should always be up and

running.

2. Performance: Every web page should correspond within the latency rate of three seconds.

3. Capacity: MySQL server’s capacity of storing data depends on the free space on the server’s

hard disk. As the number of users increase, the disk space will need to be increased on the server.

4. Data Backup: The data needs to be backed up periodically so in case of a major catastrophe

like flood, earthquake etc, the data should not be lost. And the site can be brought up quickly and

data can be restored.

5. Code Backup: The revision history of the code should be saved so that in case of a problem,

the website can be reverted back to last good state.

80

Chapter 8 Summary, Conclusions, and Recommendations

Summary

Online Health Care is an application which helps patients and doctors interact without meeting

each other. Apart from scheduling appointment online, this application provides the provision of

sharing multimedia files such as .jpg images and .mp4 videos. This is very useful for patients and

doctors as the doctor can see a patient’s photo online and can judge his condition. This way a

doctor can see the progress a patient is making and prescribe him the medicines accordingly.

The application can be accessed on both desktops/laptops as well mobile devices. Looking at the

market, Android is one of the fastest growing mobile device OS. We have made this application

for Android mobile devices such as Smart phones and tablets. This helps the patients and doctors

look at the records, schedule/update an appointment on the go.

Since this application lets users share very sensitive information, we have done a good job in

securing the data through password encryption and session management on the server side.

One of the best things about the project is its UI which is very user friendly and easy to navigate.

Conclusions

As San Jose State University students, this project has given us a lot of exposure in the latest

technologies like RESTful APIs, Twitter Bootstrap, JQuery. Our horizon has definitely

broadened. We have done this project from end to end and taken care of the testing as well.

Also this project gave us a chance to build an application that runs on both desktops as well as

mobile devices. Looking at the market today, there are great opportunities in the market if one

know mobile applications development. So along with learning, this project will definitely help

us get a good job as software engineer.

81

Recommendations for Further Research

This project has been built in module. This approach helps in adding modules in future. There

are some features that can be added.

1. Prescription module: A new module which keeps track of all the prescriptions can be included

in the application.

2. General Health Guide: A new module which informs the patients about what to and what not

to do when they are ill can also be added.

3. News: A news module/page where the patients are informed about the ongoing flu shots

camps, free eye care etc, can also be added.

4. Security: Right now we have password encryption and session management in the application.

We can add the provision of it running on HTTPS which will make it even more secure.

82

References

[1] HTML Multimedia. Retrieved Oct, 2011, from

http://www.w3schools.com/html/html_media.asp

[2] Erin Johansson. (May 10, 2010) Top 25 Free & Freemium Web Apps to Manage Your

Healthcare and Medical Data. Retrieved Oct, 2011, from

http://nursepractitionerdegree.org/top-25-free-freemium-web-apps-to-manage-your-

healthcare-and-medical-data.html

[3] Kaiser Permanente website [Oct 2011]. Retrieved Oct 2011 from

https://members.kaiserpermanente.org/kpweb/securedClusterQuery.do?cluster=mydoctor

[4] Brian Dolan. (March 11, 2010) 3 million downloads for Android health apps. Retrieved Oct,

2011, from http://mobihealthnews.com/6908/3-million-downloads-for-android-health-

apps/

[5] Curas website. (Oct, 2011) Curas EMR Mobile for iPhone Available Now! Retrieved Oct,

2011, from http://www.curas.net/PRODUCTS_EMRMOB.htm

[6] Barack Obama. (Aug 15, 2009) Why we need healthcare reforms. Retrieved Oct, 2011, from

http://www.nytimes.com/2009/08/16/opinion/16obama.html?pagewanted=all

[7] Joseph Kim. An iPad should be mandatory in medical school. Retrieved Oct, 2011, from

http://www.kevinmd.com/blog/2010/04/ipad-mandatory-medical-school.html

[8] NielsenWire (April 26, 2011) U.S. Smartphone Market: Who’s the Most Wanted? Retrieved

Oct, 2011, from http://blog.nielsen.com/nielsenwire/online_mobile/u-s-smartphone-

market-whos-the-most-wanted/

[9] Curas website. (Oct, 2011) Curas EMR Mobile for iPhone Available Now! Retrieved Oct,

2011, from http://www.curas.net/PRODUCTS_EMRMOB.htm

83

[10] Web Standards Project website. Retrieved Jan, 2012, from

http://www.webstandards.org/learn/faq/

[11] Rodriquez Alex (Nov 6, 2008) RESTful Web services: The Basics. Retrieved Feb,2012

from http://www.ibm.com/developerworks/webservices/library/ws-restful/

[13] Android Developers. Retrieved March, 2012 from

http://developer.android.com/sdk/index.html

[14] Android WebView, Retrieved March, 2012 from

http://developer.android.com/reference/android/webkit/WebView.html

[15] Selenium HQ projects. Retrieved April, 2012 from http://seleniumhq.org/projects/ide/

84

Appendices

Appendix A. Description of CDROM Contents