ILP Search Form Project

One of the projects I worked on at the Engineering IT Department of the University of Maryland (UMD), College Park was to develop a Search form for International & Leadership Programs (ILP) (See Figure I. below). Using this form, UMD students planning to study a term abroad could explore the various courses they could take up at the desired country of interest.

thumbnail-ilp
Figure I.

The form was developed using front-end technologies like HTML, CSS, JavaScript, jQuery and Bootstrap, and server-side technologies like PHP and AJAX.

The form fields provided for text auto-prediction (see Figure II.), and easy un-selection. The word prediction helps the users (UMD students), as they may not always know in advance what they would be looking for. And the easy un-selection (the ‘x’ at the end of the field selection) serves for a better user experience. A jQuery plugin was used to achieve these features.

screen-shot-2017-01-09-at-3-28-57-pm
Figure II.

The field ‘UMD Course#’ also allowed for multiple value selection. Most of the fields provided help (the ‘?’ glyphicon next to most fields) through tooltip pop-ups, that briefly explained what that respective field represented (see Figure III.).

screen-shot-2017-01-09-at-8-06-09-pm
Figure III.

Similar to figure II, the figures in the slideshow below depict the word-prediction feature in the other fields.

This slideshow requires JavaScript.

As mentioned above, the UMD Course# field allows for multiple field value selection (see Figure IV. below).

screen-shot-2017-01-09-at-3-31-15-pm
Figure IV.: Multiple field value selection

These field value selections can be easily un-selected by clicking on the ‘x’ next to each of the values as show below (Figure V.)

screen-shot-2017-01-09-at-3-31-55-pm
Figure V.: ‘x’ for easy deselection

On selecting the desired combination of fields, clicking the ‘Search’ button produces the corresponding search result (see Figure VI. below). The ‘Clear’ button clears the form field selections, if any.

screen-shot-2017-01-09-at-3-33-21-pm
Figure VI.

The search results display the respective University logos and a default logo (a grey circle with the University name across it) if no logo is available (see Figure VII. below).

Screen Shot 2017-01-09 at 9.02.43 PM.png
Figure VII.

On clicking the blue links in the search results, further details about the desired University abroad is provided through a modal pop-up as show below (Figure VIII.).

screen-shot-2017-01-09-at-3-33-48-pm
Figure VIII.