Constructing the CPUT staff search directory with Twitter Bootstrap

App is at:

A few months ago I set about the daunting task of finding out which data source to use for an update to the inaccurate Staff Directory search app pictured below.

Old Staff Directory made by Oarabile Selekisho

Oarabile Selekisho (, the former Assistant Web Developer here at MIS, put this Staff Search together from scratch as a new idea to help staff and students. However, the source data (database for contact details) was rather unreliable.

When our new Assistant Web Developer, Ashley Jones, joined me he brought with him a tonne of knowledge on PHP. With his crazy skills on hand we embarked on creating the new directory. With him, we discovered that the best data source is CPUT’s ITS installation. With that in mind, we started an Object Oriented Agile programming plan for the new directory (mid July). Our blue print was this UML diagram below:

Ashley finished the PHP API back-end in a couple of weeks. Thereafter, the front end had to be done.

The idea was to use proper RESTful techniques that I acquired while at the University of Cape Town working on Vula (powered by Sakai). However design-wise, I was uninspired. Until went to JoomlaDay and discovered a jQuery powered toolkit made by Twitter called Twitter Bootstrap. It is cutting-edge and awesome! I was now inspired.

This past Wednesday, I started reading up on the toolkit and trying out a few things. In a couple of days I had written the UI to the directory using the toolkit’s Fluid layout, Tooltip and Modal plugins. This is the final accessible design:

New UI using JSON and Twitter Bootstrap

The nerdy stuff:

This is a RESTful implementation using Ajax to ask the PHP API for a a jSON object with staff members. Simple stuff. The HTML/JSON code is not available on this blog since it will change frequently with new features put onto the app.

Upcoming features

This is fun stuff we think you will like (in no order of priority);

  • Pictures per each staff member’s profile,
  • Short CVs for academics. This is so that they can be found online for supervising, external marking, collaborative activities…,
  • Forward contact details to email or cellphone,
  • Social network links per staff member,
  • Integration to the upcoming CPUT Mobile App for Blackberries, iPhones, iPads and Android devices,
  • more to come…..

Most of these features are optional to each member of staff.

I hope you enjoy this app, and leave feedback or requests below!


– Lovemore





  • Joselline Felix-Minnaar says:

    This is brilliant!!!! I have been bemoaning the lack of a PROPER user friendly staff search facility since forever!!!! Thanx so much.

    • Lovemore Nalube says:

      Thanks for the great feedback. We do want to make more cool and useful apps like this! Let us know if you have more ideas πŸ™‚

  • Groenewald says:

    Had a look at the new staff search function and ask is it really necessary to put all the names for the staff member. In an industry context that would be regarded as disrespectful.

    • Lovemore Nalube says:

      @Groenewald Thanks for highlighting this. We shall look at attempting to abbreviate names that occur after the first name ie:
      “Lovemore Mastermind Nalube” becomes:
      “Lovemore M. Nalube”

      Would this be more acceptable?

      • Lovemore Nalube says:

        @Groenewald we have abbreviated the middle names of the staff on the seatch directory app. Kindly have a look and tell us what you think now.

        Thanks for your most valuable feedback.

    • Lovemore Nalube says:

      Hi! It would be great to here from you what you think of the updates we have done to the Staff Search directory. We implemented name abbreviation based on your recommendation. Thanks!

  • Snyman Ohlhoff says:

    The staff search function is very usefull. What I do think will also be nice is to be able to find the contact number for a department, for example the part-time office for the Facultty of Business or contact details of the admin assistant for an academic department. One does not always have a name to search with and not all units and departments have a page on the website, so it is sometime quite a mission to find the correct number.

    • Lovemore Nalube says:


      We are working on adding that functionality as our way of evolving the Staff search.

      Thanks for the input. It is a great idea. We may have a tough time finding one number for a faculty/department but we will try.


  • Johan says:

    Staff search doesn’t work

    • Lovemore Nalube says:

      Hi Johan

      It seems to be working when we test it. Maybe if you gave us more information it will help use recreate the issue you are having. Kindly tell us;
      1. What you typed into the search box,
      2. What browser you are using eg: Internet Explorer version 8
      3. What error/response you got.

      We are here to help.


  • Lindie says:

    Well done this is very helpful!

  • Nthabiseng Khauoe says:

    Like this stuff search engine, though most of ext number are either incorrect or outdated….
    would also be nice to see pictures of stuff and be able to search by department

    good work….

  • Shanaaz Frier says:

    The staff search is really useful. It could be enhanced by adding a feature where if you don’t have the person’s name or email address but you know the designation – that it is the Faculty Officer for Engineering, for example, then the system could give you the faculty’s number or the relevant department. Often we receive calls from outside erroneously and it becomes a mission to try to get the person through to the correct extension since they don’t have a contact name. I know that it is easiest to put the person through to the switchboard but somehow switchboard is almost always busy at these times.

  • Franco Springveldt says:

    Search results are slow…but overall I like the simplicity.

  • Sinalo Sanda says:

    Hi the staff search is very use full, is it possible for you to put the alternative number like if you don’t find that person on his direct number then you phone the secretary of PA

    • Lovemore Nalube says:

      Hi Sinalo. Thanks for your suggestion. It is very tough to have such a feature since there is no central database of departmental phone numbers. However we shall try have that πŸ™‚

Leave a Comment