Click here to Skip to main content
15,346,368 members
Articles / Web Development / HTML
Posted 7 Apr 2015


5 bookmarked

Part 3: Create & Run CRUD JQuery Mobile Apps from your mobile device using JQM.Show (Patients)

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
7 Apr 2015CPOL7 min read
Demonstrates creation of web apps using JQM.Show, a RAD JQuery Mobile Development Platform: 3rd final installment.


This is the third and last installment of our articles in creating JQuery Mobile CRUD web apps using JQM.Show. This article will concentrate on the Hospital Management System Patient Module. The backend that has been used for the complete HMS (Hospital Management System) is LocalStorage.

Some silly assumptions: You have read article 1 and 2 of this series. You are familiar with how the CRUD applications are being developed by JQM.Show as discussed in article 1 and 2. This article will generate the same source code as before and include the Partient model with its fields. If you have been following our articles, we have discussed how the web app:

1. Create a new record

2. Update an existing record

3. Delete an existing record

4. Gets records and generates a table report including exporting to excel

5. Gets record relationships and draws a d3 chart etc.

Disclaimer: This article will not in anyway delve in explaining the source code generated as the previous articles did that in detail. Here, I will show you a step by step process of creating the Patient model within the HMS app you created as you were going through Part 1 - 2 and then you can generate the source code yourself using JQM.Show or just explorer the included source code.




Download JQM.Show 2 for your android device.


Article 1 of this series introduced you to JQM.Show and we created the Doctors Model with its characteristics. We also looked at the code generated by JQM.Show for the HMS application. Article 2 looked into the definition of the Hospitals Model and how we create it using the same RAD tool. As we have in detail discussed the code and the respective back operations with our models. We will now look at creating the Patient model using JQM.Show too, however we will not delve on the code much. The reason for that is merely avoidance of repetition.

The patients model is based on a Tab approach to developing the model. There are about 16 fields for each patient and we want to save space, thus we break out UI into different tabs, The tabs for each patient will be the following including their input controls:

1. Details (Patient Name, Street Address 1, Street Address 2, City, Postal Code, Mobile Phone, Email Address)

2. Sickness (Disease, Date Diagnosed, Condition)

3. Hospital (Hospital Name, Ward Number, Attending Doctor)

4. Next of Kin (Full Name, Mobile Phone, Email Address)

Figure 1 of this article, our Family Tree, speaks in detail how we create a tab navigation to split large forms into various sections, please refer to that article for more details.

Let's look at the Patient UI based on the information we will use to create it.

Figure 1: Patient Listing (this lists the captured patients in the web app as we have defined it)

Image 1

For each patient, we see the contact details, hospital name and attending doctor and then the condition on the count bubble on the right.

Figure 2: Patient Details (screen to be used to add a patient and other details)

Image 2

Figure 3: Patient Sickness (details of the sickness of the patient, eg disease, date diagnosed and condition)

Image 3

Figure 4: Patient Hospital (details of the hospital, ward number and attending doctor for this patient)

Image 4

As you can see, the hospital name and attending doctor are DropDownLists, these are based and loaded from existing hospitals and doctors captured. The system before the patient screen appears reads existing hospitals and doctors and loads them to the dropdown lists.

Figure 5: Patient Next of Kin (if we want to contact a family member about this patient)

Image 5

Figure 6: Patient Report (screen to report on all available patients and export to excel)

Image 6

Figure 7: Patient Hospital Relationships (Patients per Hospital)

Image 7

Figure 8: Patient Doctor Relationships (Patients per Doctor)

Image 8

Using the code

1. Fire up JQM.Show and open the HMS project you created. It should look something like this... (with your details of course)

Image 9Image 10

3. Create a Patient Model as depicted below. It should look something similar to...

Image 11Image 12

Note the Navigation Bar Items we have specified, being:

Details;Sickness;Hospital;Next of Kin. 

We will split our input controls to these various tabs to make screen input easy for users, as depicted in Figure 2 above.

4. Create the fields for this Model, after clicking Next, select New Fields and type these field names

Patient Name;Street Address 1;Street Address 2;City;Postal Code;Mobile Phone;Email Address;Disease;Date Diagnosed;Condition;Hospital Name;Ward Number;Attending Doctor;Nok Full Name;Nok Mobile Phone;Nok Email Address

The fields will be added to the model. We need to customize the fields, for example, the hospital name linking it to available hospitals and also linking doctors to the patient.

5. Let's look at each field definition, you should define each field similar to the following. In article 2 I showed you how to create each field for the model. You can type all the field names using the field wizard and then later customize each one.

5.1 Patient Name (this is the primary key of the Patient Model)

Image 13

5.2 Street Address 1

Image 14

5.3. Street Address 2

Image 15

5.4 City

Image 16

5.5 Postal Code

Image 17

5.6 Mobile Phone

Image 18

5.7. Email Address

Image 19

5.8. Disease

Image 20

5.9 Date Diagnosed

Image 21

5.10 Condition

Image 22

5.11 Hospital Name

Image 23Image 24

The hospital name is derived from hospitals as a drop down list, so on options specify the data source and data field to establish the relationship.

5.12 Ward Number

Image 25

5.13 Attending Doctor

Image 26Image 27

The attending doctor is also sourced from a list of available doctors, so define the data source and data field in the options field.

5.14 Nok Full Name

Image 28

5.15 Nok Mobile Phone

Image 29

5.16 Nok Email Address

Image 30

That's it. You are done defining the Patient Model for the HMS web app. Now its time to complile your application into a web app. In article 2 I showed you how to create your app quickly. Go, on, on the HMS app screen, click the create button and let JQM.Show create the source code for your and all the html definitions for your HMS web app.

Congratulations!!! You have just created your first CRUD JQM.Show JQuery Mobile Web app.

After you Sign in in your app, you should now be provided with this springboard.

Image 31

Clicking the Reports button will take you to access the various reports per model that you can generate and export to Excel.

Image 32

Please check complete HTML definition generated by JQM.Show for my HMS example based on my parameters from the attachments.

With all the application javascript source code, the notable differences will be with the CRUD operations depending on the backend otherwise everything else is basically the same.

Points of Interest

In my project to learn about JQuery Mobile, how one can use it for CRUD operations, I have ended up developing a RAD application that one can install on their android device and they can use it to develop basic CRUD apps. My aim has to have different backend frameworks working for all CRUD operations. Attached here are the three backends that I have managed to crack so far, WebSQL, LocalStorage and JSON via PHP. The next article will be XML and then followed by IndexedDB.

With this HMS, I decided to showcase all the elements of what JQM.Show can do in its entirety, however the previous articles have been a culmination of each exercise step by step into this process. The XML version of CRUD apps with JQuery Mobile will work almost identical to the JSON version but there are two javascript files that have been added to glue the magic that is JQuery Mobile in that instance. IndexedDB, whilst a very easy to follow framework has exposed some challenges for me. I just could not get the d3 chart working propertly and will delve more on that when I cross that bridge. Enjoy..

PS: I discovered that using the split function like this... does not work

PatientRec.PatientName = PatientRec.PatientName.split(' ').join('-');

and had to define a variable first and split it, then assign it back but, I'm still I'm not sure why not.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Anele 'Mashy' Mbanga
South Africa South Africa
I'm a Bachelor of Commerce graduate, fell inlove with ICT years back with VB5. Used Pick & System Builder to create a windows app. Very curious, developed my first web database app called Project.Show using ExtJS. Published on Google Play Store, learned JQuery Mobile, a project manager at best. My first intranet app eFas with MySQL.

Fear closes people to a lot of things and we hold ourselves back being held by it. Thus the sooner you believe you can't do something, the sooner everything will work towards that belief. Believe in yourself at all times because you can do anything you set your mind to it!

I have a very beautiful woman and four kids, the best joys in the world. East London, South Africa is currently home.


Best Mobile Article of February 2015 (First Prize)

Best Mobile Article of May 2015 (Second Prize)

Bible.Show (Android Store App)

JQM.Show (Android Store App)

CodeProject.Show (An offline CodeProject Article writer)

Comments and Discussions

QuestionWhy dump the code in the article? Pin
Chris Maunder13-Apr-15 10:05
cofounderChris Maunder13-Apr-15 10:05 
AnswerRe: Why dump the code in the article? Pin
Nelek13-Apr-15 10:52
protectorNelek13-Apr-15 10:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.