Fly-Guy Web Application: Features and Functionalities

This document explains the web application by pointing the features of the web application that have been applied in all the pages that make up the web application. The document discusses each feature and how it has been integrated to form the web application.

COVER PAGE

Contents
1 Introduction..............................................................................................................................................3
2 Fly-Guy Web application...........................................................................................................................3
2.1 Public web application.......................................................................................................................3
2.2 Administrator web application..........................................................................................................8
Table of figures
Figure 1: Home page (Landing page)...........................................................................................................4
Figure 2: Flights page...................................................................................................................................5
Figure 3: Booking page................................................................................................................................6
Figure 4: User bookings...............................................................................................................................7
Figure 5: User wish list page........................................................................................................................7
Figure 6: Login / register page.....................................................................................................................8
Figure 7: Administrator login page..............................................................................................................9
Figure 8: Admin view flights........................................................................................................................9
Figure 9: Add new flight page....................................................................................................................10

1 Introduction
This document explains the web application by pointing the features of the web application that have
been applied in all the pages that make up the web application. The document discusses each feature
and how it has been integrated to form the web application.
2 Fly-Guy Web application
Fly-guy web application is a web application that can be used by customers to book for flights provided
by the fly-guy. The application is made up of two parts;
 Public web application
 Administrator web application
2.1 Public web application
This part of the web application is the part that is accessible to existing and new customers who want to
book a flight. The first page the user sees on opening the link to the web application is the home page.
The home page is consisted of a header which has a logo and the navigation menu. What follows is a
banner of an attractive image to make the page more appealing since it is the landing page of the
application. The next section is a small section that shows just few of the flights that are offered by Fly-
Guy giving the user the option to view more of the available flights through a link. The last section of the
page is the footer which has the copyright information.

Figure 1: Home page (Landing page)
The rest of the pages making up the public web application use the same structure as the home page
whereby there is a header which has the logo and the navigation menu, the content section which has
content specific to the page and lastly the last section which is the footer that has copyright information.
The home page doesn’t have any special functionalities just that it has been designed to be attractive to
the user as it is the first page the user sees when they visit the web application.
Flights page
The flights page shows all the flights offered by fly-guys. The content section of this page has a search
form that the user uses to search for flights.

Figure 2: Flights page
To search for a flight the user has to select the criteria on which they want to use t search for flights. For
example the user can search for flights by type where by a flight can either be domestic or Europe. Upon
pressing the search button, the application searches for flights that meet the search criteria. The search
functionality has been designed to work asynchronously where by the page is updated by the server
without causing a page reload. This functionality has been achieved by use of Ajax.
Below the search field are all the flights offered by fly-guys. The user can browse through the list of
flights while choosing whether to book a flight or add it to their wish list. Adding the flight to the wish

list works asynchronously like the search functionality where by the flight is saved in the database by the
server without causing a page reload on the client side.
To book for a flight the user selects the book option and is redirected to the booking page. If the user
has not logged in, then they are asked to fill the form to complete the booking. Filing the form is
basically registering if the user is new to the system. If the user has already logged in the booking is done
automatically. An email is also sent to the email that the user has provided informing them that the
booking was successful.
Figure 3: Booking page
After doing one or more booking, the user can also view all the booking that he or she has made. The
bookings are arranged in a tabular format to make easier for the user to track their bookings.

Figure 4: User bookings
The user can also view flights that he or she has added to their wish list. The list of the flights is
tabulated to make more readable to the user. The user can also book the flights using the wish list.
Figure 5: User wish list page
When creating the wish list the user has to be logged in to their account because the wish list is saved in
the database. The login / register page is designed for users who already have accounts to login and for
users who are new to the system to create their accounts.

Figure 6: Login / register page
To log out, the user chooses the last menu item in the navigation menu of any page in the public web
application.
2.2 Administrator web application
This part of the web application can only be accessed by the administrator who is responsible
performing administrative tasks on the data recorded by the system.
The admin web application requires the administrator to login before accessing rest of the system. The
admin has to provide their username and password.

Figure 7: Administrator login page
Upon successful login by the admin, the web application redirects and opens flights page. The flights
page enables the administrator to view all the flights offered by fly-guy. The admin can either delete or
update details of a fight. The flights are arranged in a tabular format to make it easy for the user to view
the flights.
Figure 8: Admin view flights
The administrator can also add a new flight into the system by using the add flight page. The flight is
added by filling a form on which all required fields are filled.

Figure 9: Add new flight page
The administrator can also view all the bookings that have been made by different members. The data is
arranged in a tabular format thus this makes it easy for the admin to evaluate the bookings.
All the data used in this web application is saved in a MySQL database. By using MySQL database as the
only central database, this makes it easy for the application to be used by multiple users at the same
time and the data recorded by various actions accessible by one administrator.
The technique used for accessing the database is MySQLi and it has been used in all the pages where a
CRUD (Create, Read, Update, Delete) has been used.
The application has also implemented JSON through AJAX. This has been implemented in the flights
page where the user is supposed to search for flights. The search happens asynchronously and the
flights page is updated without causing a page reload. This makes it easier for the user to search through
different type of flights.
For client side scripting, pure JavaScript was used and no JQuery.