As promised, here are some screenshots from my new staff directory apps, with some commentary. Click a screenshot to view full size.
Administrative Backend
Though this may look a bit complicated, the administrative backend was the easiest to setup of the three apps I built for the staff directory. Using the Adobe Dreamweaver Developer Toolbox, the application setup is Wizard-based, once you’ve setup your SQL database query. I’ve found that the ADDT widgets do not scale well for large databases, but the speed is acceptable for databases with a few thousand records.
The above screenshot shows the update page for a staff member.
Intranet Staff Directory
The staff directory for the Intranet took some time to code due to using new AJAX and XML techniques on the SCOCA web.
First, the staff information is obtained from an XML page. This means that the directory page is not PHP, but a standard HTML page. This has the advantage of using much less overhead when the page displays. The disadvantage is that again, it won’t scale well with a large database.Look for an upcoming post about how this works.
Second, you’ll notice the use of a hover action. When a staff member hovers over an entry in the directory, a small window opens that includes the staff member’s picture, along with office/home phone numbers, and home address.
Before I move to the next screenshot, notice the link in the above screenshot for a staff member to update their information.
After clicking the update link, the form to update information appears on the same page as the directory, rather than opening on a new page. This is one of the advantages of using AJAX interactivity.
SCOCA Web Staff Directory
This is the version of the staff directory that will be seen by public visitors to the SCOCA web. Again, the data is being obtained from an XML page. The tabbed interface for each department is another use of AJAX.
My goal for our public web is to make applications intuitive to use. Here, the user simply clicks a department tab to view the members of the department. Clicking the staff member’s name will send an email, and the icon beside the name will allow a user to download a vCard for that person.
You may notice that there is no banner or menu system at the top of the page. Those two items, along with the SCOCA home page, are the last aspects of the site that will be coded.
