Project: Tourism Extension “Who’s Who”

The Project

The Tourism Extension website contains a section that lets visitors find contacts by county, as well as by specialty/area of expertise. A solution needed to be found that would allow searching or filtering of this profile information, while allowing the staff to easily manage each person’s profile.

The Problem:

The information was presented in a way that required a lot of scrolling, or at least a lot of clicking back and forth on the page. There was no search capability, and the navigation was using page anchors, which resulted in the page jumping around. Without a “back to top” link, the user had to scroll all the way back up if they didn’t find what they wanted on the first attempt.

The Solution:

It became obvious that a database needed to be employed to store the information about each person being profiled, so that a filter or search could be applied to the site. A quick and simple database was set up, and the OT Framework was used to gain user access controls, and speed up development. The information from the database was exposed via a few public methods in a structured format (JSON), which can then be displayed on any website.

After the database was operational, and all the information for each person was stored, a solution for how to display the information on the website became the focus. jQuery/javascript templates were the answer, as they provide an easy method of displaying dynamic data on the page in a structured way.

Two drop down menus trigger a fetch from the database containing the list of counties, the list of specialties, and the complete list of users. When the user selects an option from the drop-down menu, it triggers a specific search of the database, with only those results being returned (JSON). The results are displayed without the user being taken to another page on the site, making it easier for users to perform multiple searches without interruption or extra page loads. The only thing the users see is a loading graphic while the fetch is occurring (which takes less then 2 or 3 seconds, depending on how many results are retrieved).

The template solution was built using Garrison Locke’s (from Outreach Technology) example he posted on GitHub for the Triangle PHP User’s Group Meetup a couple of months ago.

Only the fields that contain values are displayed, which is important, as all of the fields are optional (and there’s no sense displaying a blank line for “Address Line 2” if that field is not filled in for the majority of people).

This solution was deployed to Tourism Extension’s AFS locker, using a database on CNR’s web hosting account.

Demonstration of Solution

Before…

After…

One Comment

Comments are closed.