MLHU DineSafe

Dinesafe 2

DineSafe is a web application created for the Middlesex-London Health Unit in London, Ontario. This is a large-scale application, responsible for processing and storing over 300,000 data points on a daily basis. I was a core member of the development team, and as such, was responsible for a majority of the back-end data processing, search functionality logic, dynamically-generated front-end presentation logic, and many other features of this application. I was also solely responsible for the maintenance and upgrades to the application since it’s initial release. Any features discussed here were my sole or shared responsibility.

Click here to check out MLHU DineSafe in action!

DineSafe was created on a custom CMS developed by ResIM, of which I was a contributor. The DineSafe back-end is built in PHP and MySQL, and the front-end is built in HTML5, CSS/LESS, Javascript and JQuery. It also relies heavily on the Google Maps API to create custom maps displaying locations. Using a Linux cron and PHP, the DineSafe application interfaces with a proprietary MLHU system (Grasshopper) to obtain inspection data. On a nightly basis, DineSafe automatically collects over 300,000 data points from Grasshopper, runs a selection of checks and corrections to normalize the data, and re-processes it into a MySQL database for efficient and organized storage. A completion report is emailed to the system administrator when all data has been processed. At the request of MLHU, all data storage is completely cleared and re-built each night.

When first accessing the DineSafe system as a public user, you are greeted with a site disclosure. You must agree to this disclosure before you are allowed to use the application. Agreement is stored in the form of a client-side cookie and is valid until the user clears their cookies.

Dinesafe 1

Upon agreement to the terms, users are presented with a list of inspections, displayed in paginated table format, starting with the most recently completed. In addition, users are able to search by keyword, current standing, location, first letter of the premises name, or they may view other types of inspected facilities (pool, spas, tattoo studios). For example, searching “Pita” will only return premises with the word Pita in their name.

Dinesafe 3

Users have the option of displaying the results of the current search in either table view or map view

Dinesafe 4

The map is built using the Google Maps API, which has been heavily altered and customized to include the most recent inspection data and current standing along with each location result.

Dinesafe 5

In table view, results of any search can be sorted by column, allowing a user to quickly find premises with the most (or least) recent inspection, or the most/least infractions of each type. These results can be further filtered by using the options in the top bar.

Dinesafe 6

Premises details are displayed on a dynamically-generated results page, with information collected from the Groundhog data transfer.

The banner of this page is generated using a Google Maps API call to dynamically create the background image. Name of the premises, address, and phone number are also included; the phone number is configured so that clicking will initiate a phone call to the premises (assuming the user has compatible software installed). The sign displayed in the header is obtained from the results of the most recent premises inspection.

Dinesafe 7

Each inspection on a premises includes a date and type (inspection or re-inspection). This information is displayed along with the number of infractions found in the given inspection. Clicking an inspection will dynamically load details about the inspection’s infractions on the right, including the infraction topic and any specific infringements related to the infraction.

Dinesafe 8Any corrections or observations required are also dynamically loaded at the bottom of the screen.

Dinesafe 9

DineSafe is a large, complex application, responsible for presenting a massive amount of data to the public in a friendly in readable way. For more information about my responsibilities on this project, or any other site features you may encounter, please feel free to contact me.

Click here to check out MLHU DineSafe in action!

Leave a Reply

Your email address will not be published. Required fields are marked *