BPH Self Management Program

Front and Back End Programming

The Bladder & Prostate Health Self Management Program is a web application and part of a clinical study for patients with Lower Urinary Tract Symptoms, and is designed to replicate much of the in-person program that has already been in use by Kaiser Permanente. There are ten modules, each with an instructional video, and one or more forms for the patient to fill out. As the only developer on the project, I handled both the back-end and front-end development and testing. In a nutshell, the application has an AJAX front end, and uses jQuery extensively, as well as Bootstrap. The back end uses PHP to provide an API and abstract the database. There's a core UI layout done HTML5 and CSS3 (and Bootstrap), while most of the content is built dynamically by DOM manipulation using JSON returned from the server.

The client wanted to ensure that patients do the modules in order, and that they have watched the video before being allowed to proceed to the next module. The videos are hosted on Vimeo, and I used their Froogaloop library to track video playhead position, completion, and so on. This data is saved to the backend database for consistency across sessions, browsers, and devices.

The center piece of the application is Module 6, the "Bladder Diary." This allows patients to log all of their liquid intake, output, and any "incidents," throughout the day. Once a "diary" for the chosen day has been completed and submitted, the patient can choose to do a diary for another day, but once "submitted" a diary day becomes read-only. The content of the various pick lists is pulled from the server, and the UI controls are built dynamically using that data along with user entered data. Several graphs are produced on the "Graph My Diary" tab, using the Flot plotting library.

The visual design had a very specific look for entering the time of each diary entry. I couldn't find an open source, third party library that fit the bill, so I built a custom one in the form of a jQuery plug-in. It allows editing in-place (i.e. no drop-downs, pop-ups, etc.) using only HTML, CSS, and jQuery. It performs range checking, and handles keystrokes in a reasonable way, provides functions to get/set the time, convert to and from various formats, etc.