Music Venue Management Essay - Evented And Shortened To 70 Characters.

Problem Specification – Music Venue Management Specification

A new company (whose name you can come up with) has decided to develop a business centred on booking out music venues. The company owns four music venues around Merseyside, three in Cheshire and three in North Wales. Each of these venues has a maximum standing capacity and a maximum seated capacity which is the maximum number of people it can accommodate in the venue for a concert. Venues have concerts (with a single band) on certain evenings throughout the year, but venues do not have a concert on every night . Each venue is classified as licensed or unlicensed, according to whether they are allowed to sell alcohol on the evening of a concert. The company manages 18 individual bands, each of which signs up to play certain venues on a set of dates. Users can then book to attend these concerts.

Each band performs in one or more of the following genres – pop, rock, metal, folk, classical, jazz or big-band. Each band earns a fee for performing a concert, which can be different for each band, and which is usually increased for a weekend gig.

The company would like a dynamic web application for the music venue management company, which will allow users to search for concerts (according to various search criteria) and then book one or more tickets on specific dates, if there are spaces available (either standing or seating, depending on their choice and availability). The company would like the search functionality to be as flexible as possible so that users can easily find an appropriate concert. The web app should allow users to register and log in and provide them with an account page with their relevant details, which will also detail any bookings that they have made (together with relevant prices). The web app is not required to take payment from the user, attendees pay at the door of the venue. The development should be carried out with reasonable sample data when necessary (for example the venue names, pricing structures etc., as well as location details and images). You should not use the details of real venues, or use any copyright images. Any assumptions made over those detailed above should be discussed in the report.

1. Competitor analysis: You should choosetwo contrasting commercial ‘concert booking’-type websites and perform a comparison between them, highlighting any positive or negative aspects. The websites do not need to provide identical functionality to that outlined above, but simply be roughly in the area of event booking. Your comparison should focus on the functionality provided by the website, the design of the site, and the how responsive and accessible it is. You should identify the degree to which you feel the web app is “mobile first” and consider which framework it uses. You must ensure that youMobile first responsive design: You should document the design of a web application for the music venuebooking company, using the principle of mobile-first progressive enhancement. Your web application should meet the specification given in the Music Venue Management Specification (above). This task should include various design models, such as wire-frame models, site-maps and UML models such as use-case diagrams and activity models, as appropriate in order to fully document your design. You should show how the user can search for appropriate concerts, based on their criteria and how the results would be displayed (using a high-fidelity prototype or wireframe model for example, together with justification for any decisions made in your design).
   
   
2. Comparison of web frameworks: Identify which web frameworks and technologies you woulduse as part of the implementation of your web application and justify why you would choose to use those frameworks/technologies. You should focus on the advantage that each framework or technology would provide. You may also briefly contrast with any alternatives that you identify in order to justify your choice.
   
   
3. Entity-Relationship Diagram: You should design an ER diagram to meet the data needs of the fictional MusicVenue Management company. Your ER diagram should clearly identify primary keys, foreign keys, attribute types and associativity between tables and should use relevant and appropriate database design principles. You should also include an explanation about the design of your database.
   
   
4. Accessibility: Explain how your web application would be made accessible to a wide varietyof users. You should identify a web technology / framework or design style that would help each type of user to successfully utilise your web application. You can also refer back to your solution to Task B) to explain why certain design decisions were made.
   
   
5. Thin and thick clients and servers: Explain how data is processed by your web applicationand where the processing of data is carried out (either client-side or server side). You should use a UML sequence diagram for this task to help with your explanation.
   
   
6. Validation: Clearly explain where the validation of all user input occurs in your webapplication and what kind of validation checks would be carried out. You should justify your decisions.

Problem Specification

Overview

This section analyses two contrasting commercial concert booking websites similar to the proposed web application. A discussion on the positive and negative aspects of each of the website based on the functionality provided by each website and the design of each website is presented. The design and the frameworks used to develop each of the websites will help to arrive at a recommendation on whether the design is “mobile first” or not.

In order to do this analysis two websites must be selected. The two websites are;

• Eventbrite (available at https://www.eventbrite.com/)
• Ticketsource (available at https://www.ticketsource.co.uk/)

Eventbrite

Eventbrite is an event booking web application that is used by a lot of event organizers and event attendees all over the world. For event organizers, Eventbrite provides a platform that they can use to create an event and make it available so that people who are interested in attending the event can book the event using Eventbrite. Eventbrite allows event organizers to create free events i.e. events which do not require any entrance fee at the gate or paid for events that requires to pay an attendance fee. It enables the interested persons to purchase tickets through the application and still make payments through the application.

Evaluation of the website is done based on two aspects;

• Functionality

The functionality of Eventbrite can be evaluated from two point of views; event organizers and the audience targeted by the event. For event organizers Eventbrite provides a platform where the event organizers can build, manage and grow their events. The first step for a first time event organizer is to register and create an account with Eventbrite. The event organizer chooses from three different packages; essentials, professional and premium package. The event organizer can then proceed to create an event within the system and it will be available to any audience who visit the website or search for it using their search feature.

For audience, Eventbrite provides a platform where they can search for events and buy tickets. Perhaps one of the most distinguishing feature with Eventbrite is that since it is used all over the world, when a user opens the website, a list of events near the customer are shown. This happens automatically as the web application automatically determines the location of the user and filters events based on that location. Users can also search for events by category, name, location and date of the event. The search feature enables users to quickly find the event they are looking for without having to go through all the other events. The figure below shows the search feature of the website.

Search functionality and booking

Event audience can also create an account with Eventbrite. Registration is simple and easy as it only requires the user to provide an email address, first name and last name and the password they want to use to login. Registration has been made easier by use of password strength meter that shows the strength of the password as the user is filling the password field. For users who have registered an account with Eventbrite, they can be able to add free events to calendars or purchase tickets for paid events. A ticket is purchased using the normal check out method. Eventbrite has incorporated common payment merchants like PayPal, Visa, MasterCard, Discover and American Express.

When the user identifies and selects an event the application holds a reservation for the user meaning that the user is guaranteed the ticket for the eight minutes after viewing an event.

• Design

The design of the website is evaluated against the following principles of effective web design;

• Purpose- A good designed website should always put the needs of the user first by making sure the user is able to accomplish a given need thus every page should have a clear purpose. The question to ask here is whether the design used for Eventbrite meets its purpose (Langer, 2007). According to my analysis the design meets its purpose because every page has a clear purpose thus users are able to use the website to achieve different needs. For example the design used for the search feature is easy and straight forward to use for any user
• Navigation- A navigation is one of the most critical requirement in any website design. Users are able to use the website by navigating through different pages making up the website. Based on my evaluation, the website has adopted a good navigation menu as the navigation has a logical page hierarchy. Users are able to navigate through the pages because the menu is available in all pages with optional quick links at the footer of each page.

• Mobile first responsive design- With the growing trend in use of mobile devices, its now a normality to design mobile friendly website. The design of the website should be able to respond and adapt to different screen sizes. The question to ask here is whether Eventbrite is mobile friendly. The answer for this question is yes and no because some pages of the website are mobile friendly and respond very properly to all types of devices while some pages are not mobile friendly. To illustrate this the screenshots below shows a sample of a page that is mobile friendly opened using a mobile device.

The navigation responds and adapts to a mobile device view thus making it easier to use for the user. The search bar has also responded and is different with the desktop version.

However some of the pages are not mobile friendly. For example for some event page, the design does not respond to a change from one display device to another. The screenshot below shows a page which is not user friendly

According to figure 5 above this page of the website is not mobile friendly thus the user would experience a hard time accessing that page on a small screen device.

A lot of frameworks have been used to develop Eventbrite web application. These frameworks are;

• Zurb Foundation
• Gravatar
• Fingerprintjs
• Google Tag Manager
• Mustache
• js
• Mixpanel
• Varnish
• Lo-dash
• Wordpress
• Webpack
• MySQL
• Python
• Twitter typeahead.js
• YUI
• amCharts
• js
• Modernizr
• Prototype
• Handlebars
• RequireJS
• PHP
• Optimizely
• Swifty[e
• JQuery Migrate
• Twemoji
• BugSnag
• Hotjar
• Crazy Egg
• js
• React
• Lightbox
• js
• Django
• JQuery

A combination of these frameworks have been used to design and develop Eventbrite web application and the overall design achieves a high degree of mobile friendliness.

Ticketsource is an event booking website that provides a platform to both event organizers and its intended audience. Event organizers can use the website to create events and the audience can use the website to purchase tickets to the event. The evaluation of the website can be done based on two aspects;

• Functionality- Analysis of the functionality of the website is done based on the two type of users; event organizers and event audience. For event organizers, Ticketsource provides a platform for them to create events which are then booked for by the interest attendees. To create an event the event organizer has to register with Ticketsource and then they can proceed to create the events. The sign up process has been made easy because the user is only supposed to provide their email address and password. After registration is complete the user can create an event. One of the most interesting features with Ticketsource is the seating plan designer which allows the user to create an accurate onscreen presentation of the venue to make it easy for users to book specific sets in the venue depending on the availability.

For target audience Ticketsource enables users to search for events based on the event name, city, location and the date of the event. The website does not offer automatic quick suggestions to the user based on the current location. However, the search feature is easy to use and users can search for an event very easily by filling the form.

Two contrasting commercial concert booking websites

To buy a ticket, the user is not required to have an account. Buying involves a checkout process where the user provides their email address and physical address and then proceeds to payment. Ticketsource has integrated third party payment services like PayPal, Visa and MasterCard so it’s very easy to make payment. Ticketsource reserves the ticket for the user for 20 minutes thus the user is assured that the ticket is available as they he or she is performing the checkout process

• Design

The design of the website is evaluated against the following core principles of good website design;

• Purpose- The design of the website should not comprise on the user needs of the website. A good design should make sure that all user needs are catered for. Each page has to have a clear purpose and should fulfill a user’s specific need. For Ticketsource the design meets its purpose because the users are able to fulfill different user needs using the website. The overall design thus making it easy for the user to use. For example searching for an event is easy as it requires the user to fill the form and all the results are returned based on the search criteria.

• Navigation

The navigation menu of a website is a crucial part of the design. The navigation menu for Ticketsource is efficient and usable. However some parts of the web application do not have a good navigation system. For example when checking out the user users a series of next and previous links without any other menu thus the user has no access to the main navigation menu or a quick links section thus going back to the last page before booking requires the user to navigate using the previous button.

• Mobile first responsive design- a good website design is supposed to be mobile friendly and should be designed with mobile first in mind. The design should be able to respond across various devices while giving the user the same experience. Ticketsource can be considered to be mobile friendly because the design is able to respond to different screen sizes. The navigation menu responds and is easily accessible in mobile view.

According to figure 9 above, elements making up the page have been arranged to mobile view because the website is responsive.

The following frameworks have been used to design and develop Tickersource;

• JQuery
• JQuery UI
• CloudFlare
• MooTools
• Google Font API

By using a combination of these frameworks, the design achieved for the website is mobile friendly and meets its purpose.

This section presents the documentation the of the music venue booking company called Evented. To help document the design wire-frame models, site-maps and UML models are used and from these models a high fidelity prototype is designed to illustrate the working of the web application.

The mobile-first design principle is a content and design strategy that involves designing a website or web application for mobile devices first and then moving on to larger screen devices like desktops, laptops and tablets (Coyle, 2014). The design process from mobile devices to large screen devices like desktops should be done in a progressive fashion. The reason for starting with mobile devices first is because most browsers ran by mobile devices are not as capable as desktop computer browsers.

By following the mobile-first progressive enhancement principle, the design process involves the following stages (Korkishko, 2017);

• UML Modelling
• Sitemap
• Wire framing
• High fidelity prototype design

Based on the analysis done on the case study for the proposed web application, various UML models can be used to model the design of the web application. These UML models are;

• Use case diagram
• Activity diagram
• Sequence diagram

Eventbrite

Use case diagram

Use case diagram is a behavioral diagram that is used to show the relationship between the user or actor and the system (Lucidchart, n.d.). The use case diagram shows the interactions of the user with the system and shows the boundary of interaction. For the proposed event booking web application the system comprises of the Evented system and a user who is the actor (Nishadha, 2015). The user is anyone who using the application to view events or to book tickets. The following diagram shows the interaction of the user with the Evented system;

According to the use case diagram shown in figure 10 above, the user or member interaction with the evented system is limited to the use cases defined on the figure. These use cases are;

• Sign up- the sign up use case involves registering as a member in the evented system. This use case includes sending a confirmation email to the user after registration to make sure that the email used by the user is correct. The actual confirmation of the email sent to the user’s email is not done within the system because that is external to the system and that is why the process of confirming the link is not included as a use case in the system.
• Sign-in – the sign up use case involves logging in for users who already have an account with the system. The user uses their email and password to login.
• Search event- Search event use case involves the search of events based on a certain search criteria specified by the user.
• View event- The view event use case involves viewing an event obtained after searching for events or even events recommended by the system.
• Book event- The book event use case involves booking tickets for a certain event. This use case includes sending an email notification to the user with the number of tickets that the user has booked.
• Logout- this use case is used by users who are already logged in to the system and would like to logout.
• Update profile- Update profile use case is used by users who are already registered in the system to update their personal details.

Activity diagram

Activity diagram is a UML diagram that is used to describe the dynamic nature of a system. Activity diagram shows the dynamic aspects of a system and the flow of the activities within a system. For the evented web application, activities of a user within the system can be denoted using the activity diagram shown on the figure below;

Figure: Activity diagram

Sequence diagram

Sequence diagrams are UML diagrams that are used to show interactions between different classes making up the system. The interactions are in form of messages which are sent from one class to another or within a class. Sequence diagrams are also commonly referred to as event diagrams.

Sequence diagrams are used to show the flow of logic for a certain process. For the proposed web application, the process of searching for an event has been modelled using a sequence diagram. This process has been selected because it is a crucial process and will be used frequently by many users.

A sitemap a diagram showing the list of pages making up a website. The diagram shows from where each page can be accessed from by showing root pages and subsequent children pages.

Design of a website or web application at the structural level is done using wire framing. Wire frames are commonly used to lay out the functionality of a page and its contents depending on the user needs and requirements (experienceux, 2018). For the Evented event booking application, the core principle to be followed is mobile-first progressive enhancement thus the wireframes designed show the design of the application for mobile. These wireframes can then be progressively designed for other devices like desktops and laptops.

Ticketsource

The proposed web application will consist of the following pages;

• Landing page

This is the first page that the user will see when they open the web application. The figure below shows the wireframe of Evented landing page.

• Registration page

The registration page will be used by the user to register by filling a form. The diagram below shows the wire frame of the registration page.

• Member login page

The member login page will be used to login. The diagram below shows the wireframe of the evented login page.

• Event booking page

The event booking page is used to book and is accessed when an event is viewed. The following diagram shows the event booking wireframe.

• Profile page

This page shows personal details of a user together with a history of their previous bookings for different events. The diagram shows the wireframe for the profile page.

A high fidelity prototype can be designed from the wireframe modelled in section 3.2 above. The prototype is designed using the mobile first progressive approach where by the web application is designed for mobile devices and then progressively designed for large screen devices like laptops and desktops. Based on the wireframes, the following are the pages designed for mobile version of the proposed web application;

• Landing page

The Design of the landing page should be very eye catching for every visitor because it is the first page that the user will see when they visit the website. The design of this page should give a good impression to the user and make them want to view the website. Thus this proposed design includes use of images as backgrounds to make the page more attractive and use of a consistent color throughout the page thus creating a theme to be used all over the website. The following diagram shows the mobile version of the landing page.

This page can be progressively developed for the mobile version. Both designs should have consistency to create a seamless transition when using the web application from one device to another. The following prototype shows the desktop version of the design of the landing page.

In both designs, the user can search for an event by use of the search form at the top of the page. The results are displayed on the search results page if any events were found. The search results page also has a search form to enable the user to search for more events. The following diagrams shows the mobile version of the search results page.

Documentation of the Evented design

The same search results page is progressively designed for desktop or laptop devices. The design achieved in the design is consistent with the mobile version as shown in the figure below.

Figure: Search results page prototype (Desktop version)

• Registration page

The registration page is used for registration. The design of the registration form should be simple and easy to use to make it easier for the user. Registration should be straight forward and should not require too many details as shown in the mobile version of this page.

The same page is progressively designed for the desktop version and achieves consistency with the mobile version as shown in the figure below.

Figure: Registration page prototype (Desktop version)

• Login page

The login page is used by users who have an account in the system to login into their accounts. The login form is simple and requires the user to fill an email field and password filed which are verified before the user is granted a session.

The login page is progressively developed as the desktop version resulting to the following design.

Figure: Login page prototype (Desktop version)

• Event booking page

The event booking page shows the full details of an event and provides the user with a booking form to book seated or standing tickets. The booking form is simply designed to make the process of booking a ticket easy for the user. Once the confirm booking is pressed the system first checks whether the user is logged in or not and then proceeds to complete the booking. The diagram below the design of the page for mobile devices.

The same page is designed progressively for desktop devices while still maintaining consistency in the design with the mobile version.

• Profile page

The profile page contains the personal information of the user. The profile page allows the user to update their personal information and to view the history of events that they have previously booked. The figure below shows the mobile version of the profile page.

The same page is progressively designed for the desktop version resulting to the following design.

Figure : Profile page prototype (Desktop version)

The overall design of the application achieved for both the mobile version and the desktop version has followed all the principles of good design.

Overview

This section describes the frameworks to be used to design and develop the event booking web application.

Web Frameworks

To design and develop the evented web application different frameworks or technologies have to be used interchangeably so as to achieve the best design and functionality of the application for both the mobile and the desktop version of the proposed web application. To define the frameworks or technologies, there is need to define the architecture of the proposed application. The proposed web application will consist of two sides;

• Front end (Client side)
• Back end (Server side)

Mobile-first design principle

The client side of the application will run on the user’s browser. This is part of the web application that the user will see and interact with to achieve various user goals. The design of the client side has to use the mobile-first progressive design principle thus the frameworks or technologies to be selected should be able to work with this principle.

The following frameworks or technologies will be used for the client side;

• Bootstrap
• JQuery
• JQuery UI
• Font Awesome
• Modernizr

Bootstrap

Bootstrap is a mobile-first, responsive front-end framework which is developed using HTML, JavaScript and CSS. Twitter was built by a developer from Twitter as a Twitter Blueprint before it became open source. Bootstrap found a lot of usages after becoming open-source due the vast amount of resources available for it. For the proposed Evented event management web application Bootstrap is ideal because of the following reasons;

• Very easy to use- Bootstrap is very to start and use in any web design project because of its high adaptability. Bootstrap can be used along with other frameworks easily thus making a good option for the proposed web application (Alex, 2015).
• Responsiveness

With the current growth in use of mobile devices to view and open websites it’s a requirement that every website should be responsive enough to be viewed and accessed from mobile devices. Bootstrap has a fluid grid layout that amends properly to the device’s screen resolution thus a website designed using Bootstrap is always mobile ready. Thus bootstrap is the most ideal framework for use to design the proposed web application because the main principle to be followed is mobile-first progressive design. Thus by using Bootstrap the proposed web application will be mobile ready and this will not require design for both the mobile version and desktop version as the website will be mobile ready from the go.

• Speed of development

Bootstrap increases the speed of development because of its existing building locks that come with the framework. Instead of starting from scratch, the design team can use existing coding blocks to design the proposed web application. This will reduce the amount of time that would have been used in coding the whole design from scratch if Bootstrap was not used. The existing building blocks can be used with existing designs thus making it easy to integrate into the design of the web application.

• Its highly customizable

Bootstrap is highly customizable and can be customized to suit the design of the proposed web application thus not all features that comes with the framework has to be utilized. The design team can decide on which features of Bootstrap are necessary for the project and which features are not needed and these features are excluded during the download of the framework. This will leave the design team with a custom Bootstrap framework suited for their project.

• Consistency

UML models

Bootstrap provides consistency in the design of the website thus the end user will be able to get a consistency in the design when using the proposed web application in either the mobile version or the desktop version of the web application.

• Simple integration

Bootstrap is easy to integrate with other frameworks and platforms thus it will be suitable for this project because other frameworks have been proposed for use.

There are other frameworks which can be used in place of Bootstrap like Skeleton and Foundation. However Bootstrap is the most suited framework for this web application because Bootstrap is the best as it treats all type of devices equally thus developing using Bootstrap does not require the design team to design two different versions of the same website. Bootstrap also has a lot of free templates which can be customized thus making it easy for the design team.

JQuery is a JavaScript library invented to make front-end development easy. JQuery simplifies things like Ajax operations, animations, event handling and DOM manipulation just to mention a few (LearningJQuery, 2018). For developers it helps them fewer lines of code within a short period while still doing a lot. JQuery is considered to be very fast, flexible and concise as compared to using JavaScript. There are various reasons for using JQuery for the proposed event booking web application. These reasons are;

• JQuery is open source- JQuery is open source thus does not require any cost to setup and use for the proposed solution. Because it’s used by a lot of developers there is a large community of users thus making availability of many plugins for use in development.
• JQuery is easy to use- JQuery has a lot of content and support from it’s the JS foundation and the JQuery community thus developers will be assured of support in case of any problems when using the framework.
• Huge library- JQuery has a lot of resources like plugins needed for making the design of the proposed web application to meet all its requirements. Using the plugins is very easy.
• Cross platform- JQuery is cross-platform dues to its ability to work in most web browsers. Because the proposed web application should be mobile ready, using JQuery will not limit the functionalities of the web application in some devices rather than all the functionalities will be used across all devices.
• SEO- Use of JQuery results to very small files as compared to using JavaScript. Google’s SEO algorithm works best with fast loading web pages thus using JQuery helps facilitate better SEO as it results to smaller files which can easily be optimized for site speed.

There are other JavaScript like vanilla JS but JQuery is the best suited for use for the design of the proposed web application because of its ease in use and availability of plugins and resources that will make the development of the front end easy for the design team (Olawale, 2017).

JQuery is a curated set of user interface effects, interactions, themes and widgets that are built on top of the JQuery library. JQuery UI makes design of websites and web applications by giving front end developers a quick and easy way to add various components of a design for example a date picker to a form control. The reason for using this library is because JQuery will be used for the proposed web application thus using this library on top of JQuery will help improve the design of the web application and make it very easy for the development team to develop the front-end of the proposed web application.

Font awesome is a icon and font toolkit based on LESS and CSS. Its currently incorporated into Bootstrap thus it will be used together with bootstrap in the design of the front-end part of the proposed web application. Font awesome will provide icons and fonts to the development team thus making it easy to design elements like buttons and links thus improving the overall design of the proposed web application.

Modernzir is a JavaScript library which is used to detect CSS3 and HTML5 features in different browsers. It helps JavaScript to avoid use of unimplemented features. Although most features have already been implemented in most browsers some features are missing in some browsers especially the older versions of the browsers. Modernzir help determines whether the browser being used by a user has implemented a certain feature. The main reason for using this library is to provide the same functionality for all type of users regardless of whether they are using modern browsers or old browsers by providing feature detection and allowing older browsers to run HTML5.

The back-end part of the proposed web application will be used to process the data that users send using the client side. There are two technologies that will be used for the back end development. These technologies are PHP and MySQL. PHP will be used for server side scripting while MySQL will run the database of the proposed web application.

PHP is a server side scripting languages. This is the most suitable language for use for developing the back-end part of the proposed web application because of the following reasons;

• Its open source- PHP is open source thus will not result to any costs when it is used for the proposed web application.
• Easy to use- Because PHP is a scripting language, it is easy to use thus this will give the development team an easier time while using it to develop the backend of the proposed web application (Bradley, 2017).
• Compatibility with databases- PHP supports a many databases and since the back end part of the proposed web application will use MySQL thus PHP comes in handy as it will be very compatible with MySQL.
• Cross-platform- PHP is cross platform and will run on any browser thus making it mobile ready. Due to its large usage, there is a lot of documentation and support from different communities meaning that the development team will have an easy time solving any problems that they might encounter during the development process.

There are other languages for example ASP.NET which can be used for the development of the server side but do not qualify for the proposed application. ASP.NET does not qualify mainly because it is not open source thus will add an extra cost to the development of the proposed web application.

Figure: Entity relationship diagram

The ERD shown on the figure below shows the entities and their attributes and relationships existing between them. The entity relationship diagram has been modelled using Crow’s Foot Notation. Each entity represents a possible table and its attributes. Each entity is in Third Normal Form (3NF). The following steps were followed to achieve 3NF in every table;

• Normalization to 1NF- This involves taking the relations identified from the case study and eliminating all the repeating groups.
• Normalization to 2NF- This involves taking the relations achieved in 1NF and eliminating any partial dependencies to make sure that the relation has only one candidate key on which all the other attributes depend on.
• Normalization to 3NF- This involves taking the relations achieved in 2NF and eliminating any transitive dependency to make sure that every relation has only one key attribute which determines all the other attributes.

At 3NF, the relations can be turned into tables for implementation to form a MySQL database.

Overview

This section discusses the accessibility of the proposed web application across different devices to enable access by a variety of users using different type of devices. The section discusses the core technology or framework that will be used to develop the front end to facilitate cross-platform operability.

Discussion

Accessibility is a core and very important principle for every web application. The proposed event booking web application is a public web application meaning that it is expected to be used by the public thus the design team has to take a lot of time when designing the application to make sure that any user out there can open the web application and perform any of the user defined goals within the application.

According to www.statista.com in 2018 alone, 52.2 percent of all website traffic was generated through mobile devices all over the world. This statistic shows that many users are using mobile devices to access websites thus in this day and age every website should be mobile ready or cross-platform meaning that it can be open and used using both mobile devices and desktop devices. Websites which are not cross platform cannot be conveniently from mobile devices thus limiting their accessibility and usability when it comes to devices. This eliminates a class of users who are using mobile devices to access the website leaving only those that are accessing it using desktop devices.

To achieve mobile friendly website, the deign team has to select the right frameworks that will make it easy to develop the front end part of the website otherwise the development team will have to develop two versions of the web application; desktop version and mobile version to for accessibility for both mobile and desktop devices.

For the proposed web application a number of frameworks have been selected to develop the front end part of the web application. These frameworks are;

• Bootstrap- Bootstrap is a modern-first framework that will be used as the core framework for designing the web application. Bootstrap creates a responsive website by using a grid system that integrates the development of the front end for all devices into one. This means that the design team will only design the web application once for all devices and this will be capable by using Bootstrap. Bootstrap will significantly reduce the development team because its very to use and thus the development team will take less time compared to the time it would have taken to design two versions of the proposed web application.
• Modernzir- Modernzir is feature detection library that is used to determine which features the user’s browser can support thus help the designer to provide the end user with an alternative implementation of a certain feature. This library will help the design team to target older browsers in both mobile devices and desktop devices that do not have certain features meaning that these users will still be able to access the application and use it like other users.
• JQuery – JQuery is a JavaScript library that will help the development team write fewer lines of code while achieving more compared to using raw JavaScript while implementing the client side of the application. Due to the availability of plugins already implemented, the development team will find it easy to implement many features of the web application using JQuery.
• JQuery UI- This library will be used together with JQuery to provide access to widgets, UI effects and interactions.
• Font awesome- This library will be used together with bootstrap to provide fonts and icons to improve the overall design of the web application.

By using these frameworks interchangeably to develop the front end part of the web application the end design achieved by the design team will be guaranteed a high level of mobile friendliness and accessibility will be assured across a range of many devices.

The prototype shown in section B above shows the expected design that will be achieved by using the frameworks discussed above. Every page will be accessible both on mobile devices and desktop devices.  The design will use images as background pictures to create an appealing design to the users. For example for the landing page the header section of the website has a background image on which all the contents of the header sit on. The header section is the same for both mobile devices and desktop devices with the grid system used to design the web application restructuring the elements differently as shown between the two interfaces in section b above.

After completion of the front end part of the web application, the design will be evaluated against the following principles;

• Purpose- The end design will be evaluated against its purpose to determine whether or not the design meets is purpose. This will be done by conducting tests by the development team and later on using subjects to do further analysis on the design. This version of the web application will be like a beta version where test subjects will interact with it and then give feedback. The feedback provided by the test subjects will be useful in determining which part of the design are a success and which part of the design are a failure. The parts of the design of the design that are not a success will be rectified appropriately and then released as another version for review.
• Mobile friendliness- The end design will be evaluated against its mobile friendliness to determine whether or not the whole website is fully responsive or not. All the pages of the web application should be mobile friendly for the web application to be used in ether mobile devices or desktop devices.
• Navigation- The end design of the proposed web application will be evaluated on its navigation because navigation will enable the end users to get things done using the web application. TO accomplish various tasks within the web application, the design should provide a good navigation menu that is easy to use, readily available and is usable in all platforms.

The best level of accessibility for the website will be achieved by using a combination of all the frameworks specified and ensuring that the front end development team follows all the design principles. Testing of the end design should also be done thoroughly to ensure the final product is accessible.

This section discusses how the data generated by the web application will be processed and where the processing will be done.

Data processing

Data processing of the proposed web application will take place in two places;

• Client side
• Server side

Client side

The client side of the application is the part of the application that the end user will interact with while using the application. This side of the application will run purely on the user’s browsers. A part of data processing will be done on the client side of the application. This type of data processing will be done for data that does not require reference to the server. For example when the user is booking a ticket and he or she selects two tickets, the system will calculate the cost of the two tickets and display the results to the user before the user presses the confirm booking button. This will happen instantaneously after the user selects the number of tickets without the application making any reference to the server. Other data processing will be done for example during client side form validation, the application will not make any reference to the server but will process the data on the client side. When all the necessary processing at the client side is completed data will then be sent to the server side using Ajax and this will be made easier by use of JQuery.

The server side part of the application will run on the web server on which the application will be deployed. The server side will include two types of processing; processing of data using a server side scripting language which is PHP and processing of data by the database management system through use of MySQL queries.

When the user fills a form in the client side, data will be sent from the client side to the server side for processing. For example when the user wants to search for an event, the user will fill the search form and the data filled on the search form will be sent to the server side. The server side part of the application will filter all the events based on the search criteria and then return the results to the client side. The client side will then be updated with the relevant search results. The sequence diagram below better illustrates this process.

Validation of all user inputs will be done at different levels of processing the data as discussed in section F above. These levels are;

• Client side
• Server side

On the server side part of the application data validation will be done using existing methods and plugins available in JQuery to make sure that the right type of data is submitted from a form. For example a form consisting a field with required attributes will not allow the user to submit the data unless the field is filled with something. The same case on the data type specified for every field. If the data type is email, the form will not submit the data unless the data is in the correct email format, or for a number the form will not submit the data unless a number is entered. Other form of validation will be done on the client side since data will be asynchronously using an Ajax JQuery plugin.

On the server side, extra validation on top of the validation done on the client side will have to be performed to make sure data is correct. Validation measures like removing HTML special characters to prevent SQL injection will be done. Validation on the server side will be the type of validation that is not possible on the client side or is need both on the client and server side. On the server side, validation will be very crucial to make sure malicious users cannot launch attacks on the server by use of scripts in the data.

Conclusion

The evented web application can be a success if the development team follows all the laid out principles and use the combination of frameworks specified.

References

Alex (2015). 10 Best Reasons to Use Bootstrap for Amazing Web Designs. [online] devsaran. Available at: https://www.devsaran.com/blog/10-best-reasons-use-bootstrap-amazing-web-designs [Accessed 12 Jul. 2018].

Bradley, A. (2017). Why Use PHP?. [online] Though Co. Available at: https://www.thoughtco.com/why-use-php-2694006 [Accessed 12 Jul. 2018].

Coyle, J. (2014). How Does Progressive Enhancement Relate to Mobile-First Strategy?. [online] Medialoot. Available at: https://medialoot.com/blog/progressive-enhancement-web-design/ [Accessed 12 Jul. 2018].

Experienceux (n.d). What is wireframing?. [online] experienceux. Available at: https://www.experienceux.co.uk/faqs/what-is-wireframing/ [Accessed 12 Jul. 2018].

Korkishko, I. (2017). Mobile app development timeline and stages. [online] syndicode. Available at: https://syndicode.com/2017/10/25/mobile-app-development-timeline-and-stages/ [Accessed 12 Jul. 2018].

Langer, A.M., 2007. Analysis and Design of Information Systems Third Edition., New York: Springer.

LearningJQuery (2018). 5 Reasons to Use jQuery. [online] Learning JQuery. Available at: https://www.learningjquery.com/2015/02/5-reasons-to-use-jquery [Accessed 12 Jul. 2018].

Lucidchart (n.d.). UML Use Case Diagram Tutoria. [online] lucidchard. Available at: https://www.lucidchart.com/pages/uml-use-case-diagram [Accessed 12 Jul. 2018].

Nishadha, 2015. Use Case Diagram Tutorial ( Guide with Examples ). Creately. Available at: https://creately.com/blog/diagrams/use-case-diagram-tutorial/ [Accessed 12 Jul. 2018].

Olawale (2017). jQuery vs Vanilla JavaScript - Deciding on What to Use. [online] Codementor community. Available at: https://www.codementor.io/brainyfarm/jquery-vs-vanilla-javascript-deciding-on-what-to-use-6b79xdmrv [Accessed 12 Jul. 2018].