SIPEA: Web Application for Celia Sánchez Manduley Hospital in Manzanillo

Antonio Mustelier Hechavarría1*; Fidel Enrique Castro Dieguez1; Alberto Verdecia Cabrera1; Adriel Alejandro Aliaga Benavides1; Julio Hechavarría Figueredo2

1. Universidad de Granma. Manzanillo. Cuba. , Universidad de Granma, Universidad de Granma,

<state>Manzanillo</state>
, Cuba , 2. Hospital Celia Sánchez Manduley. Manzanillo. Cuba., Hospital Celia Sánchez Manduley,
<state>Manzanillo</state>
, Cuba

Correspondence: *. Autor para la correspondencia: E-mail:
* The authors declare that there are no conflicts of interests.
Contributed by footnote: MSc. Antonio Mustelier Hechavarría: drafting, revising and editing of the paper.
Contributed by footnote: MSc. Fidel Enrique Castro Dieguez: development of the web application.
Contributed by footnote: DrC. Alberto Verdecia Cabrera: significant contributions to the management of the bibliographic references for the paper.
Contributed by footnote: MSc. Adriel A. Aliaga Benavides: significant contributions to the development of the application.
Contributed by footnote: Dr. Julio Hechavarría Figueredo: significant contributions to the idea of the research.
Contributed by footnote: All the signing authors were involved in the elaboration of the theoretical framework and development of the software. The authors made a critical checking of the paper and approved the final version for publishing.


ABSTRACT

Anemia is the most common blood disorder in the world, affecting millions of people yearly. It has multiple causes and jeopardizes development, growth and learning. Current tools provide non-hematologist doctors with just numbers. The present paper proposes a web application intended to provide doctors at Celia Sánchez Manduley Hospital in Manzanillo with a tool for determining the morphologic type of anemia, creating a list of possible causes, and also storing patient data in a database for future researches. As an information system, the website constitutes a powerful tool for the decision-making process, in particular, the diagnostic process, intended to provide more detailed information on anemia as well as to foster the information management at the hospital. For the application, HTML, CSS, JavaScript and PHP were used as languages; Apache as a web server; CodeIgniter as a PHP framework; MariaDB as a database management system; and Visual Studio Code as a development environment.

Received: 2021 May 20; Accepted: 2022 April 30

rcim. 2022 Dec 1; 14(2): e480

Keywords: Key words: anemia, hematology, web site.
Keywords: Palabras clave: anemia, hematología, sitio web.

Introduction

Anemia is the most common blood disorder in the world. It affects millions of people yearly and is distinguished by low quantities of hemoglobin (HB) and hematocrits (HTO).1 It has multiple causes and jeopardizes development, growth and learning in children. It is due to hereditary changes, which may cause serious complications in childhood and adulthood; and malignant blood diseases, such as leukemia and others that are likely to emerge at any age, mainly in adulthood, due to non-hematological diseases such as cancer. 2) In order to diagnose the source of anemia on a daily basis, doctors use tools or algorithms. The most used algorithm is the morphologic classification of anemia based on the size of red blood cells and their HB content which can be determined by direct observation of the morphology of the red blood cells with an optical microscope, but this practice is kept for cases under suspicion of having serious diseases such as leukemia. 3 Another way is by means of calculations, using variables such as HB, 4 HTO, 5 and the absolute count of red blood cells per liter of blood. This last one was firstly determined by direct count with an optical microscope, 6) but it turned out to be very hard-working and a bit accurate.

Since the 1960s, automatic devices (hematological analyzers) began to appear, being capable of carrying out precise calculations. Their current generations provide doctors with many variables, guiding them so that they are able to diagnose different types of anemia. 7 Recently, mobile applications capable of determining the presence of anemia that are also useful for research, have begun to appear. These tools provide non-hematologist doctors just numbers they have to interpret, which might lead to the misdiagnosis of some possible infrequent illnesses. Besides, a specialist in clinical laboratory and a hematologist are not always available immediately for the general doctor who is always facing the ill person for the first time. On the other hand, the Cuban state is immersed in a project by which information technologies are applied to different areas and sectors of society to achieve higher efficiency and efficacy, including healthcare.

The general objective of the present paper is to develop an informatics system that could foster a better information management and decision-making process, in particular the diagnostic process of anemia at the hematology unit of Celia Sánchez Manduley Hospital in Manzanillo.

Method

For the development of the informatics system, a state-of-the-art study was made of the most used worldwide and most feasible languages, tools, technologies, and platforms for software development for the team. A responsive web application was selected. HTML5, CSS3, JavaScript, and PHP were used as languages; Apache as the web server; CodeIgniter v3.1.10 as a framework PHP; MariaDB as the database management system; and Microsoft Visual Studio Code (MVSC) v1.51.0 as the integrated development environment (IDE). XAMPP version 7.2.4 was used. Implemented classes in framework Bootstrap 4 were used for flexbox and responsive web design. 8), (9

The informatics system implements a decision-tree-based algorithm using variables such as HB, HTO, mean corpuscular volume (MCV), mean corpuscular hemoglobin concentration (MCHC) and mean corpuscular hemoglobin (MCH), determined by the hematologic analyzer, reticulocyte count supravital staining and reticulocyte production index (RPI), calculated by a formula. 10), (11

Results and Discussion

State-of-the-art of Languages, Tools, Technologies and Platforms for Software Development

The growth of the Internet has recast the role of information systems in management. An organization must have accurate and reliable information for effective decision making. Information is the backbone and most critical resource of an organization that enables managers and organizations to gain a competitive edge. In this age of information explosion, getting the right information, in the right amount, at the right time, is not an easy task. So, only those organizations that successfully manage information will survive. A database system simplifies the tasks of managing the data and extracting useful information in a timely fashion.12

An information system (IS) can be defined technically as a set of interrelated components that collect (or retrieve), process, store, and distribute information to support decision making, coordination, and control in an organization. IS may also help managers and workers analyze problems and visualize complex subjects. 13) In general, every data-intensive IS realized in a way that users can access it via web browsers will be called a web IS.14

A text editor is needed to create a website. Although it is possible to use a plain one, most developers use a fancier one, a web authoring tool (WAT). Different WATs have different features intended to make the web development process easier. WATs enable developers to create not just web pages, but other software as well. Such general-purpose WATs are referred to as IDEs. 15) MVSC is one of them.

Microsoft Visual Studio Code

One of the most common requirements in software development is building applications and services that run on multiple systems and devices. Developers have many options, from languages to development platforms and tools. However, in most cases such tools rely on proprietary systems. Moreover, most development tools target specific platforms and development scenarios. MVSC provides a fully featured development environment for Windows that not only offers advanced coding features but also integrated tools that span across the entire application lifecycle from coding to debugging to team collaboration.

MVSC is a very powerful code-focused environment expressly designed to make it easier to write web, mobile, and cloud applications using languages that are available to different development platforms, with a built-in debugger and integrated support to the popular Git version control engine. It is free, open source (https://github.com/Microsoft/vscode), and makes it easier to edit code files and folder-based project systems as well as writing applications over the most popular platforms, such as Node.js, with rich editing features such as IntelliSense.

MVSC is based on Electron, a framework for creating cross-platform applications with native technologies. In order to properly combine all these features into one tool, MVSC provides a coding environment based on folders, making it easy to work with code files not organized within projects, offering a unified way to work with different languages. It offers an advanced editing experience with features common to any supported languages, plus some features available to specific languages.

MVSC also makes it easy to extend its built-in features by supplying custom languages, syntax coloring, automatic indentation, and much more via a number of extensibility points. It is a general purpose tool.16

PHP

The millions of websites powered by PHP, an open source scripting language primarily designed for generating HTML content, are a testament to its popularity and ease of use. Everyday people can learn PHP and build powerful dynamic websites with it. Since its inception in 1994, PHP has swept the web and continues its phenomenal growth today.17

PHP, usually installed as a module inside the web server, is a language in which applications are written to communicate with database systems on the backend and browsers on the frontend. The acronym has evolved from Personal Home Page to Professional Home Page to its current recursive definition, PHP: Hypertext Preprocessor. It powers famous sites such as Facebook and it is one of the most popular languages used for web application development, which has evolved to allow to quickly developing well-formed error-free programs. It provides the ability to use many preexisting libraries. The ease with which additional libraries can be added to the environment is one of the many driving forces in its popularity. With the release of the PHP 7 environment, great improvements took place, including major security upgrades and major performance improvements.18

PHP7 is the only PHP currently supported version. One of its great advantages, apart from greatly improved speed, is that it is almost completely backward compatible with PHP5. It is deployed on more than four in every five web sites that use a server-side language. 19) PHP is by far the most ubiquitous and accessible mature web language. With PHP7+ came some improvements that make it harder to make mistakes, and 7.2 is making things even safer, even more structured. 20) A dynamic website is linked with at least one database. User interface is another essential part of a dynamic website.21

MySQL

Many of the world's largest and fastest-growing organizations, including Google, rely on MySQL. MySQL is the most popular, trusted and widely used open source database management system (DBMS). MySQL software delivers a very fast, multithreaded, multi-user, and robust SQL database server. It is developed, distributed, and supported by Oracle Corporation.22

MySQL is a combination of a proper name and an acronym. SQL is structured query language. My part is not a possessive form, it is a name. In this case, My is the name of the founder’s daughter. Online reference manual can be consulted for a complete list of the new, updated, and removed features.23

After MySQL was acquired by Oracle, a “fork” named MariaDB was created. It is very compatible with the original product and offers better performance in some cases. 24) The newest version, MySQL 8, includes features dedicated to high availability, greater reliability, and sophistication as well as a completely new user experience and revolutionary way to work with data.25

Apache

Web servers are powerful computers that run special programs and are permanently connected to the Internet. 26) There are many choices of web servers that will work with PHP and MySQL/MariaDB databases. Apache is the most commonly used to host and handle PHP web page requests. It can be hosted on both UNIX and Windows. Apache can also accept and return requests for other types of files, including HTML and JavaScript. It is an open source product. 18 Apache is the web server used by the great majority of hosts and for web development on local hosts.27

By the end of February 1995, the foundation of the original Apache Group was formed. In April, the first official public release of the Apache server was made. Apache 1.0 was released in December, 1995. Less than a year after the group was formed, the Apache server passed NCSA's httpd as the #1 server on the Internet, currently holding that position.28

PHP, Apache, and MySQL/MariaDB

PHP can access information from many types of DBMS systems, including Oracle and SQL Server. However, the most popular combination is to pair PHP with MySQL or MariaDB. Both have free versions and are also one of the easier DBMS to use. PHP, Apache, and MySQL/MariaDB need to run seamlessly together to successfully create dynamic web pages. That combination is the most convenient approach to dynamic, database-driven web design. And, combined with JavaScript, CSS, and HTML5, any developer would be able to create websites like Facebook and Twitter.29

Well supported by their respective home sites http://www.php.net and http://www.mysql.com, PHP/MySQL combination has enabled developers to build a lot of ready-made open source web applications, and most importantly, enabled in-house developers to quickly put in place solid web solutions.18

XAMPP

There are numerous server stack packages available that provide a combination of these products, along with other tools such as phpMyAdmin. There are lots of choices when selecting a package. Some work only on a particular operating system while some have lots of additional tools one can add, when chosen. These open source packages allow for easy installation of multiple products at the same time.18

Graphical user interfaces (GUIs) have been developed to facilitate the task of developing and maintaining databases. These administration tools are part of development packages. One of the most popular packages is XAMPP. Databases need a server, a DBMS, and a PHP processor. These can be downloaded as an all-in-one, already configured package. XAMPP includes packages for Windows (WAMP). Its most recent version is version 7.2.4. It has component versions as follows: Apache 2.4.33, MariaDB 10.1.25, PHP 7.2.4, and phpMyAdmin 4.8.0, along with other tools. XAMPP needs minimal configuring 27). It uses MariaDB instead of MySQL. The basics of MariaDB and MySQL are very similar. In some settings it still refers to MySQL when it is actually MariaDB.18

phpMyAdmin

phpMyAdmin is a GUI-based administration tool for creating and maintaining databases and their tables. If XAMPP is installed and the servers have been started, phpMyAdmin can be accessed directly by entering the following URL in any browser: http://localhost/phpMyAdmin/ or http://127.0.0.1/phpMyAdmin/.27 A web-based MySQL administration application, phpMyAdmin has been actively developed since 1998. It offers a number of compelling features: it is browser-based, allowing to easily manage remote MySQL databases from anywhere you have access to the Web; administrators can exercise complete control over user privileges, passwords, and resource usage, as well as create, delete, and even copy user accounts.24

phpMyAdmin is a free software tool written in PHP. It supports a wide range of operations on MySQL and MariaDB. Frequently used operations can be performed via the user interface, while still having the ability to directly execute any SQL statement.30

HTML

Although HTML was intended to be used strictly for meaning and structure since its creation, that mission was somewhat thwarted in the early years of the web. With no style sheet system in place, HTML was extended to give authors ways to change the appearance of fonts, colors, and alignment using markup alone.31

Markup languages provide instructions to specify how data should be rendered for a particular document or purpose. The appearance of Web pages is also defined by markup instructions. The standard markup language used is HTML, or Hypertext Markup Language. Now that the Web is being used as an interface for an increasing range of software applications, programmers are learning to combine HTML instructions (to render the interface) with programming language instructions (to process the data)32.A markup language “marks up” a document by surrounding parts of its content with tags. The “hyper” in “Hypertext” refers to HTML’s ability to implement hyperlinks. So HTML is a language that supports markup tags for formatting and the ability to jump to other web pages. With HTML5’s approval as a “stable recommendation” in 2014, web programmers and browsers appear to have embraced it fully. HTML5, CSS, and JavaScript are the technologies known to be the pillars of client-side web programming.15

The term HTML5 encompasses a broad spectrum of technologies that together provide a compelling platform for building great web applications. These can be organized into three areas: HTML, CSS and JavaScript. HTML5 is a relatively mature standard, or more accurately, a set of standards that is managed by the World Wide Web Consortium (W3C)33.The HTML5 standard includes quite a few new constructs. Some of them are: structural organization elements; web storage functionality; and geolocation functionality.15

Cascading Style Sheets Language

CSS (Cascading Style Sheets) is a stylistic language that defines how web pages are presented. It complements HTML, the language used for describing the structure of web site content. One of its main features is that it enables the complete separation of a web site’s presentation from its content. Furthermore, it makes it easy to enforce site-wide consistency in the presentation of a web site because the entire look and feel of a site can be controlled from a single style sheet document (SSD). CSS is used today by almost all web sites to enhance the web experience.

The CSS language is under ongoing development by the W3C, the international standards organization for the Internet. The W3C writes the specifications web browsers implement to display web pages consistently in compliance with those specifications. Since 1998, W3C has been working on CSS 3. CSS is commonly used within a SSD, which consists of a list of rules. There are three ways to insert CSS into an HTML document: by using an internal style sheet, inline styles, or an external style sheet. 34) CSS has grown from a language for formatting documents into a robust language for designing web applications. Its syntax is easy to learn. Indeed, it’s often the second language developers learn, right behind HTML. 35) CSS was proposed in 1994 and first implemented by Internet Explorer 3 in 1996. It is not a programming language and it is not purely a design tool. 36)

JavaScript

JavaScript is considered the most crucial part of a website. It is the most popular language of 2019. Most visited websites are created using JavaScript. It is used on client-side as well as server-side. Earlier, it could only run in a browser, but with the introduction of Node.js, it can run outside, too. Web frameworks and libraries such as Angular are built using it. It plays a vital role in developing dynamic websites. It is used for user interaction, content management, manipulating databases, etc.21

User interfaces are increasingly web-based, and JavaScript is the lingua franca of the web browser. There are multiple solutions for producing mobile JavaScript app. JavaScript has shown itself to be well-suited for user-interface programming and many server-side tasks37.JavaScript is the primary programming language used to deliver user experiences on the most ubiquitous platform that exists: the web. JavaScript has had to grow up very quickly in a period of shifting demands. Nowadays, the sheer number of frameworks and libraries available is overwhelming.38

The overwhelming majority of modern websites use JavaScript, and all modern web browsers include JavaScript interpreters, making it the most ubiquitous programming language in history. It is now also the most-used programming language among software developers. It is a high-level, dynamic, interpreted programming language, well-suited to object-oriented and functional programming styles.39

There is a JavaScript library for just about anything to build. JavaScript lives both on the client and the server, on the desktop and on mobile devices. JavaScript is essential in modern web development; single page applications make up the majority of sites being created. Understanding JavaScript lets you add interactivity to your website and lowers the learning curve for things like frameworks. It is an interpreted scripting language. The interpreter is embedded into a web browser which has made JavaScript a language easily accessible. This makes the demand for JavaScript developers very high.40

JavaScript has grown into an important feature of every major web browser on the market. No longer bound to simple data validation, it now interacts with nearly all aspects of the browser window and its contents. It is recognized as a full programming language, capable of complex calculations and interactions, including closures, and even metaprogramming. Even alternative browsers, including those on mobile phones and those designed for users with disabilities, support it. Even Microsoft ended up including its own JavaScript implementation in Internet Explorer from its earliest version. JavaScript is made up of three distinct parts: ECMAScript; the Document Object Model; and the Browser Object Model. 41) What we think of as “JavaScript” is standardized as “ECMAScript” by Ecma International, a standards organization responsible for multiple computing standards. The ECMAScript standard is ECMA-262. 42) The organization’s former name was the European Computer Manufacturers Association (ECMA), but they changed their name to Ecma International (with Ecma no longer being an acronym). JavaScript is just one of several ECMAScript implementations. JavaScript is the implementation used in Mozilla’s Firefox.W3C, the Web Hypertext Application Technology Working Group (WHATWG) are the standards organizations for HTML5, CSS, and the DOM. Ecma International is the standards organization for JavaScript.15

In the beginning, people created HTML pages by typing them in. They quickly realized that a lot of pages share a lot of content: navigation menus, and so on. The nearly universal response was to create template and embed commands to include other snippets of HTML (like headers) and loop over data structures to create lists and tables. This is called server-side page generation: the HTML is generated on the server, and it was popular because that’s where the data was, and that was the only place complex code could be run. Server-side generation can be done statically or dynamically, i.e., pages can be compiled once, stored on disk, and served thereafter, or each page can be recompiled whenever needed, which makes it easy to include dynamic elements like today’s top news story. As browsers and JavaScript became more powerful, the balance shifted toward client-side page generation. In this model, the browser fetches data from one or more servers and feeds that data to a JavaScript library that generates HTML in the browser for display. This allows the client to decide how best to render data, which is increasingly important as phones and tablets take over from desktop computers. It also moves the computational burden off the server and onto the client device, lowering the cost of providing data. Many JavaScript frameworks for client-side page generation have been created, and more are probably being developed now.43

JavaScript has not only changed the way to write frontend, it has also changed the backend programming experience. Code for frontend and backend can be written in JavaScript. It has also modernized, and possibly even popularized, the event-driven system with Node.js. There is no extra runtime needed, and there is no compilation process required to run an application in JavaScript. Google's Chrome browser uses the famous V8 JavaScript runtime, which is used inside Node.js.44

JavaScript is not robust at error handling in general. It has the Error object, which is flexible enough. But catching errors with try-catch lacks features found in other languages. 45) The oldest of the three core technologies, JavaScript, was created to enable scripting access to all the elements of an HTML document. It provides a means for dynamic user interaction. Combined with CSS, JavaScript is the power behind dynamic web pages. However, JavaScript can also be tricky to use, due to some major differences in the ways different browser designers have chosen to implement it. Some manufacturers tried to put additional functionality into their browsers at the expense of compatibility with their rivals. Developers have realized the need for full compatibility with one another. However, there remain legacy browsers that will be in use for many years to come. Luckily, there are solutions for the incompatibility problems, such as libraries and techniques that enable developers to safely ignore these differences.15

CodeIgniter

CodeIgniter is an Application Development Framework, a toolkit, for building web sites using PHP. It enables to develop projects much faster, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and logical structure to access these libraries. It lets a programmer creatively focus on a project by minimizing the amount of code needed for a given task46. It is based on the Model-View-Controller (MVC) development pattern, a software approach that separates application logic from presentation, permitting web pages to contain minimal scripting.47

Design

In object-oriented programming, design patterns are useful organizations of state and behavior that make your code more readable, testable, and extensible. MVC is possibly the most popular software design pattern. It consists of three major parts: model, data or information being shown and manipulated; view, what actually defines how the model is shown to the user; and controller, which defines how actions can manipulate the model.48

A responsive web design (RWD)49, built with HTML and CSS allows a website to "just work" across multiple devices and screens. It enables layout and capabilities of a website to respond to their environment (screen size, input type, and device/browser capabilities). The term was coined by Ethan Marcotte in 2010. He consolidated three existing techniques (flexible grid layout, flexible images/media, and media queries) into one unified approach and named it RWD.50

Flexbox is a simple and powerful way to lay out web applications by dictating how space is distributed, content is aligned, and displays are visually ordered, enabling the appearance of stretching, shrinking, reversing, and even rearranging the appearance of content without altering the underlying markup. It is a declarative way to calculate and distribute space. With flexible box module layouts, elements can be made to behave predictably for different screen sizes and different display devices. Flexbox works well for responsive sites, as content can increase and decrease in size when the space provided is increased or decreased. Flexbox can be used to map out an entire document through block layouts or used inline to better position text.51

Web application SIPEA for the determination and classification of anemia

There are some mobile apps to diagnose anemia. HemaApp52 measures hemoglobin in the finger non-invasively by using the phone’s flash and screens for anemia. AnemoCheck 53) screens for anemia by analyzing fingernail bed photos. mHematology54 detects signs of anemia via a smartphone snap of the eyelid. They all provide just numbers.

The proposed application, SIPEA (spanish acronym for Sistema Informático Para el Estudio de la Anemia, informatics system for the study of anemia), not only detects anemia, but determines its morphologic type as well, creating a list of possible causes. It also allows managing users, roles and privileges, in order to assure information security and integrity, carry out database backup, enter and search for a patient’s data in a database, retrieve data and create a report in pdf format, among other options. The batabase paciente.sql and its tables for patients’ data were created with phpMyAdmin. Hematological analyzers available at the hospital have a computer included, where XAMPP can be installed to manage the database and “publish” SIPEA.

With a responsive application more portability is achieved among platforms, as there is no dependency of the operating system on the computer, cellphone or tablet. This application will allow not only specialists to access information from any place, but patients as well.

Figure 1 and figure 2 show patient input interface and patient output interface, respectively. SIPEA architecture is shown in Figure 3. It is based on the MVC development pattern. jQuery, Bootstrap, Toastr and some others interact in the view layer. Codeigniter rules the backend, mainly in the controller layer, and the model has its support on MariaDB.


[Figure ID: f1] Fig. 1.

-Patient’s input interface.



[Figure ID: f2] Fig. 2.

-Patient’s output interface.



[Figure ID: f3] Fig. 3.

-SIPEA architecture


Conclusions

A web application was developed for Celia Sánchez Manduley Hospital in Manzanillo, Granma which, based on a patient’s analysis results, provides doctors with not only the morphologic type of anemia but possible causes, and stores a patient’s data in a database.

The website constitutes a powerful tool for the diagnostic process, providing doctors with more detailed information on anemia and fostering the information management and the decision-making process at the hospital. SIPEA takes advantage of open-source languages, tools and technologies.


References
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.


Licencia de Creative Commons
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.