What is a web application

A web application or web app is any application software that runs in a web browser or is created in a browser-supported programming language (such as the combination of JavaScript, HTML and CSS) and relies on a common web browser to render the application. Web applications are popular due to the ubiquity of web browsers, and the convenience of using a web browser as a client, sometimes called a thin client. The ability to update and maintain web applications without distributing and installing software on potentially thousands of client computers is a key reason for their popularity, as is the inherent support for cross-platform compatibility.

An hosting platform for web applications

Once a web application is written, in order to make it accessible via the World Wide Web, you need to host it in some server. There are open source and non-open source server software that can be used for this purpose[1]. For example:

Some companies provide web hosting service. People can host their web applications on the cloud service and are charged by hosted time period or how many times accessed, etc. Following are some of such cloud services:

In this article, let us see how WSO2 Application Server can be used to host a web application.

Writing a web application

WSO2 Developer Studio is the tooling application in the WSO2 platform, which you can download from here. It has Eclipse based IDE. Let us use WSO2 Developer Studio to implement the web application.

First navigate to File >> new >> other and select Dynamic web project.

Figure 01

Give a name for the project. Let us use the name “WSO2HealthWebApplication” and complete the wizard. This will create a folder structure for a typical web application as follows.

Figure 02

Designing front-end pages

We need to define some theme for the web application. Every page in the web application will bear this theme. Having a theme for a web application is good as the user then gets the feeling that he/she is inside the web application.

The theme is designed into the web pages inside the web application using CSS, images and javaScript. Let us first create a landing page for the web application with the theme. Inside WebContent folder, create a HTML page called landingPage.html. You can find the attached sources with the article.

In order to create the theme, we use an image called all-in-one.png. Create a folder called images inside WebContent folder and copy the image there.

Now we need to tell the web application the welcome page is the landingPage.html page we have designed. For this, insert the following entries to WEB-INF >> web.xml file.

As you might have noticed we have two links on the landing page. Those are for operations we are going to perform with the web application. As this is a simple patient management application, operations are:

Add a patient to a database filling details of a patient (addPatient.jsp)

Add a patient to a database filling details of a patient (addPatient.jsp)

To perform these operations users need to input data using forms. Let us create two individual pages for the above two operations and then link them to the landingPage.html page we have just created (if you are referring to the attached source files those links are already there). For this, you need to copy addPatient.jsp file and getPatientDetails.jsp files into WebContent folder of the web application. You will notice the common theme we are using for this web application is on those pages as well.

Following are the highlights of those two pages:

addPatient.jsp

Has the title “Register New Patient”

Has a form to input patient number, last name, first name, contact number, city, street and country

The action of this form is “Register”

addPatient.jsp

Has the title “Find Patient Details”

Has a form to input “patient ID” you want to query

The action of the form is “Search”

Now the front end pages are ready. As soon as the web application is accessed, the user will be in the landing.html page and then depending on the link he/she clicks the user will either be in addPatient.jsp or getPatientDetails.jsp. We have not still discussed how are we going to show the query results on the latter case. Let us see how we can implement that later and now let us implement the back-end of the web application.

Designing back-end

In order to implement add patient and query patient operations, we need a database to store patient information. Furthermore, instead of directly dealing with the database within the application let us expose the patient information via web services and call them from our web application. This is the SOA way of implementing this functionality. The advantage of this is business logic, which is in the web application and is completely isolated from data management aspect.

This article divides the implementation of the back end to the following steps:

Creating a database and a table to keep patient information

Exposing operations to above table as web services

Designing two servlets to call the above data services and do the necessary operations inside the web application

Formatting results from the data service and passing it to the front-end in a presentable way

Each step is discussed in detail below.

Creating databases and tables

First install MySQL for your machine. If you install MySQL WorkBench you can easily perform operations on MySQL via a UI.

We will offset the DSS server by 2. This will make all ports of the server to be offset by 2. Navigate to < DSS_Home >/repository/conf/carbon.xml file and edit < offset > tag to have 2.

Go to /bin folder and start the server using

Linux - sh wso2server.sh

&nbps; Windows - wso2server.bat

Login to the management console using default userName “admin” and default password “admin”.

Go to main >> data service >> create

Figure 03

and create a data service called “WSO2HealthIT”

Figure 04

Add a new data source and save

Figure 05

Click next and now add a query called “registerPatientQuery”. We need to give field value mappings as query parameters as in the image below. There are no output mappings to this query (fire and forget).

Figure 06

Add another query called “patientDetailsByNumberSQL”. There is one input mapping to this query which is the patient number.

Figure 07

We have to define output mappings to suit patient information we want to receive as patient details. For example, we can map values in the table column “patientLastName” to the xml tag “patient-last-name” in the output result.

Figure 08

Figure 09

Now click next and add the first operation called “registerPatient”. Select query ID “registerPatientQuery” as the query. Then it will automatically generate operation parameters. Operation parameter name will always be the xml tag name that DSS will be expecting on the payload. operation name will become the service name. Tick “Return Request Status” to get an output if the insert was a success or a failure.

Figure 10

Add another operation called “patientDetailsByNumber” and select “patientDetailsByNumberSQL” as the query ID.

Figure 11

Now click finish. Then after about 5 seconds refresh the services list and you should see WSO2HealthIT service deployed successfully.

Click on “WSO2HealthIT" link and under “Client Operations” section click on “try this service”. Invoke the service and verify that it is working correctly before proceeding.

Figure 12

Note: You can use WSO2HealthIT.dbs file to just perform all above steps. Go to data service >> upload and select the file and upload. Server will deploy the data service.

Implementing servlets to call data services

Now we have two working data services, namely “patientDetailsByNumber” and “registerPatient” services. From the web app we need to call these services and perform adding patients or querying patient information according to the input values to the forms. The way we do that is by submitting input values to a servlet and servlet carries out the java operations.

The servlet is a Java programming language class used to extend the capabilities of a server. They are commonly used to extend the applications hosted by web servers, so they can be thought of as Java applets that run on servers instead of in web browsers [2]. Servlets run in a servlet container that handles the networking side. In the example discussed in this article, WSO2 Application Server supplies the container for the web app.

We need to import libraries we need. Right click the WSO2HealthWebApplication project and select build path >> configure build path. Select “add external jars” under the libraries tab and import all the jar files attached under libs with this article.

Copy attached QueryPatientDetailServlet.java, RegisterPatientServlet.java and Patient.java classes into the package created. Make sure there are no compilation errors in servlet classes.

It is important to note the following points on servlets.

We grab the parameter values passes by jsp pages using request.getParameter("xxx”)

String patientNumber = request.getParameter("patientNumber");

We use axiom to create an OMElement to be set as the payload when calling the data service. The format of this payload should be identical to the payload template generated by “try it” functionality above. Please refer “createPayload()” methods of the servlets to understand how payload is created using Axiom.

To send the payload message to the data service we use Apache Axis2.

Set an endpoint to the message - opt.setTo(new EndpointReference(dataServiceEP));

Set action - opt.setAction("urn:patientDetailsByNumber");

Send the payload and return the result - result = serviceclient.sendReceive(payload);

Notice that if the HTTPS call succeeded, you get the response as an OMElement too. For example, when patient information is returned, they are returned to the servlet as a single OMElement. Using axiom we can extract needed information. If the HTTPS call was not successful, you will get an exception. In that case, information of the exception can be received and a custom message can be displayed on the same page as below.

Thus, JSTL tags are helpful when you are dealing with a lot of data. You can find a well written article on how to use JSTL tags here.

Finally with all ingredients web application should be organized as follows.

Figue 13

How to compile and create a .war file

Now as the implementation of the web application is done, we need to create a deployable archive. The standard format to distribute a web application is .WAR (or Web application ARchive) format. Using WSO2 developer studio it is possible to create a .war file with a few clicks.

Right click WSO2HealthWebApplication project and select Export>> WAR file. It will compile the project and create the .war file

How to deploy .WAR file on WSO2 Application Server

Download WSO2 application server from here and start it without a port offset (offset =0).

Wait a short while until it gets deployed. Now if you go to Applications >> List , web application should appear there.

Figue 15

How to test the web application

Click on Go To URL. It will take you to the landing page of the web application.

Figue 16

Click on Register new patient. You will be navigated to addPatient page.

Figue 17

Fill in some valid information and click on register. If registered successfully, following confirmation page will be displayed.

Figue 18

Click “Home” link. It will redirect to landing page again. Now click on “Search Patient Records”.

Figue 19

You will see the search results like below.

Figue 20

Conclusion and possible improvements

In this article we have discussed how to develop a simple web application that calls web services created using WSO2 middleware. Users can very easily develop the web application sitting on a single development platform provided by WSO2 Developer Studio rather than using an external IDE. Further, considering the steps discussed in the article, it is evident that the WSO2 middleware platform enables user to develop services and integrate them to custom applications with relatively a less number of steps compared to most other vendors.

The following improvements can be incorporated to the web application developed so far:

Before taking to landing page, do an authentication using WSO2 Identity Server.

Depending on role of the user allow registering patients and viewing patient information (authorization).

Proxy the data service using WSO2 ESB and handle security within the ESB.

Integrate WSO2 BAM for service monitoring.

In the next series of this article series we will see how to improve the web app including above improvements.