Front-End

4.4.2.1 Front-End and user Interface

Several different technologies were employed to construct the front-end. Each tech-nology was used to better enhance the usability of CoccoExpress and achieve great user satisfaction.

Fig. 4.1 Entity Relationship Diagram

Front-end is primarily built on Hyper Text Markup Language, commonly known asHTML. SinceHTMLis the common standard used for constructing web pages, there seemed to be no better solution for presentation layer. However,HTMLis sta-tic and doesn’t reflect dynamic changes or factors such as time, user, query, etc.

In order to overcome this limitation, we used a server side scripting language to generate and streamHTMLdynamically to user’s browser. For better client experi-ence we employed different client side techniques such asCascading Style Sheets (CSS), JavaScript and Asynchronous JavaScript and XML also known as AJAX.

OnceHTMLcontent is sent over to user’s browser, user will be required to navigate to other pages from that page. This is usually the expected method of navigation.

However, this can become time consuming when dealing with search results page, in which client is forced to navigate back and forth between search form and search result to find the desired information. We employedAJAXto dynamically change the search result upon users request for faster and more user friendly search experience.

Front-end was developed primarily with one objective in mind. (Dynamic manip-ulation of pages). With that in mind, all menus for different species were constructed by dynamically querying database. Species home pages were also pulled from data-base to provide constant information across the platform. This would provide robust

Fig. 4.2 CoccoExpress menu page

yet scalable system that could grow to house more species with minimal develop-ment efforts.

Figure 4.2 demonstrates the front-page of CoccoExpress. Sections 4.1 and 4.2 in Fig. 4.2 are dynamically built using data pulled from database, based on requested page. Section 4.1 is list of species in database and will dynamically grow/shrink when new specie is added or existing specie is deleted. Section 4.2 is also dynam-ically generated based on information regarding selected specie. This will allow anybody even with minimum knowledge of web designing, maintain front-end of CoccoExpress.

Figure 4.3 demonstrates the home page of Emiliana Huxleyi. Sections marked as 1 thru 4 in Fig. 4.3 are dynamically built using data pulled from database.

Section 4.1 demonstrates user friendly/search engine friendly naming conventions of CoccoExpress pages. This well-formatted URL is picked by search engines and is easy to parse by search engine’s back-end parser. It is important to remember that

“/Coccolithophorids/Emiliana-Huxleyi/” is not an existing folder on web server, in-stead it is a dynamically built URL for better structure and search engine optimiza-tion. In back-end implementation we will discuss this in more details. Section 4.2 of Fig. 4.3 demonstrates the dynamically built menu for the given specie. Section 4.3 and 4 are also pulled dynamically from database based on selected specie.

4.4.2.2 Quick Search

As the name describes, Quick Search was implemented to provide a fast method of searching the database for different records of specie.

Fig. 4.3 Emiliania Huxleyi menu page

Figure 4.4 demonstrates the quick search tool for Emiliana Huxleyi (this tool is also available for all other species in the database). Users can search by different criteria as shown in the figure. Help button is also provided to show help documen-tation on data type of any given criteria.

Figure 4.5 demonstrates the results of a quick search submitted with “F2” as criteria for library name. Once this result is sent to client’s browser, client can easily sort the result by desired column in desired order. As it is demonstrated in the figure, client can click on the record to see more detail about any given column. This request for more details is sent to backend system using Ajax, once the answer to request is available, results page is updated accordingly. This will allow fast access to several records in different tables without leaving the page.

4.4.2.3 Advance Search

Figure 4.6 demonstrates the interface for advance search. As shown in Section 4.1 in this figure, fields for selected tables are pulled dynamically from database to construct series of windows with fields of each table. If a field is added/removed from a table in database, this form is updated automatically to reflect the changes.

By using advance search, user is capable of selecting desired fields to be pulled from

Fig. 4.4 Quick search interface for Emiliania Huxleyi

Fig. 4.5 Result of quick search for Emiliania Huxleyi

database (Section 4.2 in the figure). In addition, users can specify desired criteria for any given field. (Sections 4.3 and 4.4 in the figure). The query behind quick search is constructed automatically using back-end engine written in PHP.

Quick search was implemented with a very straight forward sequence flow in mind. While it can provide a fast and easy access to records, it has several limitations by design. These limitations (i.e. lack of ability to select other fields or criteria versus predefined options) led to implementation of a more sophisticated search system.

Fig. 4.6 Advanced search interface for Emiliania Huxleyi

Once again, the challenge was to build a system that can satisfy advance queries with an easy to use interface that could be used not just by computer scientists but also by scholars of other fields, mainly biologists.

In addition to previously mentioned benefits of advance search, following con-cerns are also addressed and solved in design of advance search:

• Manually writing of queries similar to the one produced by advance search could be very time consuming and requires in-depth knowledge of our backend data-base.

• User written queries are usually written and tweaked several times before desired results is achieved, wasting both user’s time and server’s resources.

• User created queries are often not well-optimized and do not use proper indices, therefore they are slow and take up a lot of resources to run.

• To write such queries, knowledge of database and SQL is required.

• Returning results in manually written queries are in a text format and are hard to manipulate, where in advance search results are returned as spread sheet.

Each window in advance search represents a table of CoccoExpress database. These windows are constructed with ability to shrink or grow in size based on available

Fig. 4.7 Dynamic feature of advanced search

Fig. 4.8 Result of advance search for Emiliania Huxleyi

screen size and total number of tables and fields. As demonstrated in Fig. 4.7, for user comfort, these windows can be moved around and resized manually to achieve desired length and width just like any other window based desktop application.

Figure 4.8 demonstrates the results returned by an advance search. Results are provided in spreadsheet format so they are easier to modify and work with for end users. Columns in spreadsheet are built based on selected fields by user.

A centralized help system was an absolute necessity since CoccoExpress con-sists of several technical terms and has a unique structure. After some research, we decided to adopt an already developed platform rather than reinventing the wheel.

Fig. 4.9 CoccoPedia help integrated with CoccoExpress

This help system was created by taking advantage of open-source software also used by Wikipedia. This help system was to be linked to from different places of Coc-coExpress to provide definition and help on different technical terms. Figure 4.9 is snapshot of CoccoPedia entry for Emiliana Huxleyi.

While we could manually link to CoccoPedia’s articles and definitions from any-where in front-end website of CoccoExpress, it seemed too much of a hassle to check CoccoPedia for existence of a page and manually linking all occurrences of that term within the entire site. It was even more hassle to manually go back and update all occurrences of a term every time a page was added, deleted or modified in CoccoPedia. CoccoPediaLinker was born to overcome this problem.

CoccoPediaLinker is a parser system that is enabled by default for all the pages in CoccoExpress website; it can be turned off manually per page. It is responsible for parsing the page content and examining the content against available articles of Coc-coPedia. If a term is found in CoccoPedia engine, CoccoPediaLinker will link the term to CoccoPedia entry automatically. This will provide a well documented front-end for CoccoExpress. More importantly, documentation of CoccoExpress pages will get richer as more articles are added to CoccoPedia. Figure 4.10 Demonstrates the term “Coccolithophorids” that was picked up by CoccoPediaLinker and was linked to proper CoccoPedia article page.

The links built by CoccoPediaLinker are underlined with dashed line to be ex-tinguished from normal links of the site. CoccoPediaLinker was built with some intelligence to avoid un-wanted link creations such as modifying an already linked keyword or modifying keywords within html tags and attributes.

Fig. 4.10 CoccoPedia linker feature of CoccoExpress