Figure 1: Main Page

Header The header contains a banner that randomly displays an advertisement. The header also contains four navigational tabs, labeled Home, Category, Venue, and Date. The Home tab directs you back to the main page. The Category tab takes you to the ‘View events by category’ page, the Venue tab takes you to the ‘View events by venue’ page, and the Date tab takes you to the ‘View events by date’ page. Underneath the navigational tabs, there is a search function that allows users of any type to search for events containing the keyword entered into the search field. The header also contains links to register to the site and become a member or login, if the visitor is a member already.

Left-side navigational links The links in this area dynamically change depending on the navigational tab that was clicked in the header or footer. If the Category tab is selected, the left-side menu will contain a set of links corresponding to the categories in the database. If the Venue tab is clicked, the left-side menu will contain a set of links corresponding to the venues in the database. If the Date tab is clicked, the left-side menu will contain a set of links corresponding to the each date that an event is occurring on. If there are more than 15 links, then only the first 15 will be displayed, and access to the other links will be available via paging. Clicking on one of the links in the left-side navigation will display events occurring in the selected category, venue, or date.

Main content area The main content area displays a full list of events, or a filtered list of events based on user selection. The list contains the columns: date and time of the event, the name of the event, the venue that the event is occurring at, and the category of the event. The event name column contains link to more detailed information about the event, the venue name column contains more detailed information about the venue, and category column link filters the list of events to those that are in that category. By default the list is sorted by date, but the list can be sorted by each column. If the list of events contains more than 15 entries, then the list will only contain the first 15 events, and the rest can be accessed via paging, as shown in Figure 1.

Footer The footer contains four links, labeled Home, Category, Venue, and Date. Those links have the same functionality when clicked as the navigational tabs in the header. The footer also contains links to the terms of use and information about how to contact the developers of the website.

Figure 2: Events by Category

The ‘View events by category’ page, as shown in Figure 3, is accessed when the user clicks on the Category tab in the header or link in the footer. To let users know that they are in the ‘View events by category’ page, the background colour of the Category tab changes. The left-side menu is also populated with links corresponding to the categories in the database. The main content area, by default, contains a list of all events in the database. However, clicking on one of the links in the left-side menu will filter the list to events that are in that category, as shown in Figure 2.

Figure 3: Events by Venue

View events by venue The ‘View events by venue’ page, as shown in Figure 5, is accessed when the user clicks on the Venue tab in the header or link in the footer. To let users know that they are in the ‘View events by venue’ page, the background colour of the Venue tab changes. The left-side menu is also populated with links corresponding to the venues in the database. The main content area, by default, contains a list of all events in the database. However, clicking on one of the links in the left-side menu will filter the list to events that are occurring at that venue, as shown in Figure 3.

Figure 4: Events by Date

View events by date The ‘View events by date’ page, as shown in Figure 7, is accessed when the user clicks on the Date tab in the header or link in the footer. To let users know that they are in the ‘View events by date’ page, the background colour of the Date tab changes. The left-side menu is also populated with links corresponding to the dates of every event in the database. The main content area, by default, contains a list of all events in the database. However, clicking on one of the links in the left-side menu will filter the list to events that are occurring on that date, as shown in Figure 4.

Figure 5: Search Events

The search function can be used to search for events that contain the keyword entered in the search field. When a search is executed, the exact keyword is looked for in the event, and the events corresponding category and venue. If the keyword is found for that event, then the event is added to the search results. The search results displays the date and time of the event, the event name and the venue that the event is occurring at. Figure 5, shown below, displays the search results when searching for events that contain the keyword ‘hip-hop.’

Figure 6: Event Details

The ‘Event details’ page, as shown in Figure 6, is accessed when a user clicks on the linked event name and contains expanded information about an event, not displayed in the list of events. In addition to the date and time of the event, and the event name, the event details page will display extra information about the event. In addition to the event category, the event details page displays the description of the category. The event details page will also display more information about the venue, besides its name. In addition to the venue name, the event details page displays the address of the venue, a description of the venue, the city that the venue is located in, and directions to the venue. If there is media associated with the event, such as images or audio files, then links to those files will also be displayed.

Figure 7: Contact Us

As shown in Figure 7, the ‘Contact us’ page contains information on how to contact the developers of the site.

Figure 8: Register

Register as a new member and login pages The ‘Register as a new member’ page contains a form that can be filled out to become a member of the website. There are required fields to enter the user’s desired username that will be used to login in the login page, password, confirm the password, email address, first name, and last name. There are also optional fields for the user to select its favourite category, its favourite venue, and whether or not the user would like to receive email notifications of new events in the selected favourite category or venue. Each required field in the form must contain valid data before the user is registered. If there is invalid data in any of the fields, a list of errors will be displayed, as shown in Figure 8.

The ‘Login’ page, allows members to enter their credentials to gain access to special member functionality, such as profile editing and changing their password.

Figure 9: Editor Main Page

When editors of this site logs in, additional features and functionality appear like when a member logs in, plus a new tab labeled Editor appears in the header, as shown in Figure 9. This tab directs editors to a special area that allows them to add, update, or delete events, categories, venues, and event media, as well as upload media files.

Figure 10: Editor Edit Events

The ‘Edit events’ page, shown in Figure 10, contains a form that can be used to add events. This form has fields to enter the date of the event, the venue the event is occurring at, the name of the event, the category of the event, and any extra information. All of these fields are required and must be valid before the event is added. If any of the fields are invalid, then error messages will appear. After an event is successfully added, the list of events will be updated.

To update or delete an existing event, the editor has to select an event from the event list, the form will be filled with the existing data corresponding to the event, and the update and delete button will be enabled while the add button will be disabled. The editor can then modify the data and click on the update button, or click on the delete button to delete the event.

Figure 11: Editor Edit Files

The ‘Upload media files’’, page is accessed by clicking on the edit media files link in the left-side menu. This page contains a field that allows editors to browse for files to upload to the server. This page also contains a list of media files that have already been uploaded to the server. Selecting one of the files in the list will display information about the file, such as the file name, size, and creation time. There will also be a preview of the file, if the file is an image, and a link to the file, as seen in Figure 11.