INDIVIDUAL ASSIGNMENT

TECHNOLOGY PARK MALAYSIA

CT081-3-3-MWM

MOBILE AND WEB MULTIMEDIA

NP3F1801IT

HAND OUT DATE: 15 Feb 2018

HAND IN DATE: 15 May 2018

WEIGHTAGE: 50%

INSTRUCTIONS TO CANDIDATES:

1 Submit your assignment at the administrative counter

2 Students are advised to underpin their answers with the use of

references (cited using the Harvard Name System of Referencing)

3 Late submission will be awarded zero (0) unless Extenuating

Circumstances (EC) are upheld

4 Cases of plagiarism will be penalized

5 The assignment should be bound in an appropriate style (comb bound or

stapled).

6 Where the assignment should be submitted in both hardcopy and softcopy,

the softcopy of the written assignment and source code (where appropria te )
should be on a CD in an envelope / CD cover and attached to the hardcopy7
You must obtain 50% overall to pass this module.
 MOBILE & WEB MULTIMEDIA (CT081-3-3)
Assessment Mode: INDIVIDUAL

Instructions:

 The project is to be carried out individually

 Complete this cover sheet and attach it to your project
Student declaration:

I declare that:

 I understand what is meant by plagiarism

 The implications of plagiarism have been explained to us by our lecturer
 This project is all my work and I have acknowledged any use of the published or
unpublished works of other people.

Student Name: Rubi Raj Shrestha

Student ID: NP000056

Lecturer Name: Puspa Bahadur Sunar

Acknowledgement
This project has been prepared to satisfy partial fulfillment of the projects requireme nts
for our BscIT Fourth Semester from Asia Pacific University (APU). I extend my special
gratitude to my teacher Mr. Puspa Sunar for his valuable guidance, suggestion, timely
supervision and kind treatment as well as cooperation in completing this project. I am
also grateful towards all the teachers and resource person for supporting and
encouraging me. I would also like to express my thankfulness towards people who
continuously encouraged and supported me throughout the project. Furthermore, I
would like to thank Asia Pacific University (APU) for providing this excellent project.
Above all, I glorify the almighty god for the strength, courage, wisdom and inspiratio n
throughout the project and throughout period of my study. Last but not the least; I would
like to acknowledge the support, direct/indirect, of all the members of LBEF family.
Table of Contents
1. Introduction............................................................................................................. 1
1.1 Background Problem ....................................................................................... 1
1.2 Adoption of mobile technology....................................................................... 2
1.3 Aim of the system ........................................................................................... 4
1.4 Problem during Development ......................................................................... 4
2. Hardware and Software Requirements ................................................................... 5
3. Data validation ........................................................................................................ 6
4. Customization ....................................................................................................... 10
5. Diagrams ............................................................................................................... 12
5.1 DFD 0 Diagram ............................................................................................. 12
6. Multiple device View ........................................................................................... 13
1.5 Desktop View ................................................................................................ 13
1.6 Mobile view................................................................................................... 15
7. Effective use of User interface ............................................................................. 18
8. Features and Functionality of the System............................................................. 20
9. Testing .................................................................................................................. 21
10. Factors Affecting User Interface....................................................................... 22
11. User Manual ...................................................................................................... 23
12. Conclusion ........................................................................................................ 24
13. Reference .......................................................................................................... 25
List of Figure
Figure 1: flyeasy............................................................................................................. 1
Figure 2: Traffic by devices ........................................................................................... 2
Figure 3: Passenger using technology............................................................................ 3
Figure 4: required user ................................................................................................... 6
Figure 5: login required code ......................................................................................... 6
Figure 6: passenger required .......................................................................................... 7
Figure 7: Name validation.............................................................................................. 7
Figure 8: digit validation................................................................................................ 7
Figure 9: Email validation.............................................................................................. 7
Figure 10: Passenger validate code ................................................................................ 8
Figure 11:select seat validation...................................................................................... 8
Figure 12: Bording point validation............................................................................... 8
Figure 13: Booking processed validation code .............................................................. 9
Figure 14: seat booked validation .................................................................................. 9
Figure 15: seat booked code validation ......................................................................... 9
Figure 16: select seat...................................................................................................... 9
Figure 17: Booking Complete........................................................................................ 9
Figure 18: bootstrap class ............................................................................................ 10
Figure 19: css class ...................................................................................................... 10
Figure 20: use of CSS .................................................................................................. 10
Figure 21:ajax code ...................................................................................................... 11
Figure 22: DFD 0 Level ............................................................................................... 12
Figure 23: Home Page.................................................................................................. 13
Figure 24:Search Flight................................................................................................ 13
Figure 25: Search result ............................................................................................... 14
Figure 26: View Seat.................................................................................................... 14
Figure 27: Passenger Form .......................................................................................... 14
Figure 28: Home mobile .............................................................................................. 15
Figure 29: Search list mobile ....................................................................................... 15
Figure 30: Seat view Mobile ........................................................................................ 16
Figure 31: passenger mobile ........................................................................................ 16
Figure 32: Booking Complete...................................................................................... 17
Figure 33:Booked seat ................................................................................................. 17
Figure 34: Search Flight............................................................................................... 18
Figure 35: Search Result .............................................................................................. 18
Figure 36: seat view ..................................................................................................... 19
Figure 37:Select seat .................................................................................................... 19
Figure 38:Passenger detail ........................................................................................... 19
Figure 39:Booked seat ................................................................................................. 19
Figure 40: sign up ........................................................................................................ 20
1. Introduction

Figure 1: flyeasy

Fly-Easy is a leading low cost budget airline group based in Malaysia, with a fleet size
of 190 aircrafts and operating in 134 destinations throughout Asia. The extensive
network spans across Asia, Europe and the Middle East with Fly-Easy operating in
Bangladesh, Brunei, Cambodia, China, India, Indonesia, Malaysia, Mongolia,
Myanmar, Pakistan, the Philippines, Russia, Saudi Arabia, Sri Lanka, Ukraine, United
Arab Emirates and Vietnam. It is a mobile web application so that this system can be
used in multiple devices and this system is developed by using php language. The major
services offered by Fly-Easy is the ability to perform flight bookings, manage bookings,
perform an online check-in and view both departure and arrival schedules.

1.1 Background Problem

The existing website is solely designed for a desktop experience; however when the
same website is viewed in a mobile version of a browser, the page appears to be
compressed to fit all the contents within the viewable area of the mobile device.

I have been appointed to redesign and implement the new system for fly easy which
will allow customers to book tickets from their mobile phone with following features:

 Perform booking
 Able to select seats
 Manage bookings
 Purchase access baggage

1
 Online check-in (Mobile check-in)
 Check arrivals & departures
 Create user profile
 Manage user profile

1.2 Adoption of mobile technology

Nowadays, advancement has made unbelievable achievement in each fragment. Mobile
phones are moreover one of the gigantic achievement in the field of informa tio n
advancement. In consent to time the features and the use of phones has changed
certainly. Most of the overall public used android phone for their standard use. They
use web access for different reason. People feel extraordinary using phones rather than
PC. Push notification and advising presently pass on substance to us from the setting of
our most adored applications, and at a reliably extending rate. (forbes, 2018)

There is an idiom, "If your business isn't on the web, you are bankrupt". The
measurement underneath best depicts the movement on the web separated by the
gadgets that individuals are utilizing.

Figure 2: Traffic by devices

The above figure demonstrates that the utilization of versatile innovation has change
with time. In the early day's kin utilizes work area for web, there was no utilization of
android gadgets in the more established days. The utilization of cell phones has come
about 15 years prior. Presently day's the things have changed massively individuals are
moving web propensity frame utilizing PCs and work areas to cell phone. As the

2
insights of 2018, 7.593 billion is the aggregate total populace. Out of aggregate
populace of world 4.021 Billion individuals with an infiltration rate of 52%. Individ ua ls
are utilizing different kinds of cell phones to surf the web and additionally they are
utilizing diverse medium PCs and work areas for web get to. The above figure
demonstrates that as every year the measure of client who are utilizing web from
workstation and work area is diminishing while, the quantity of individuals utilizing
web who are utilizing web from their cell phone is expanding step by step. As there has
been 4% expansion in portable client which makes it to the aggregate of 52%. Though
the general population utilizing web through work area and PC is diminishing.

The information demonstrates that the computerized time is heading towards the
achievement. The vast majority of the general population are utilizing cell phones to
surf the web. It is important to give them the satisfying perusing background over
various gadgets. Since an ever increasing number of individuals are dynamic in web.
In this way, it is essential for any business and association to be dynamic also with a
specific end goal to advertise their business. This is the main way where organizatio ns
or an association can draw the consideration of the client. (wearesocial, 2018)

Figure 3: Passenger using technology

This is the statistics of a 2017. This is the study of travelers who utilizes web based
ticketing for booking carriers by utilizing innovation. Just about 85% of individ ua ls

3
utilizes versatile or web innovation for booking flights or aircraft reservation
framework. Additionally, around 55% of individuals used to do online registration for
their flights. Enormous number of individuals utilize online administration for on
boarding. Maybe a couple of the general population utilize web administrations for pack
collection, (statista, 2018)

From the he above statics information of 2017, the information demonstrates that the
selection of versatile innovation inside the air travel industry is expanding quickly. By
the utilization of innovation, it re-characterizes travel involvement for clients, for
example, checking travel tickets, looking at costs, gathering data, flights plan and soon.
All the carrier bunches are moving on the web in light of the fact that the "world" is on
the web as are your rivals.

1.3 Aim of the system

The aim of the system is to make the passenger easy to booking air tickets for their
destination and make the user more compatible with the system so that they can book
the air tickets from any places at any time.

1.4 Problem during Development

Lots of problem I faced during development of the system like: managing seats, making
the system responsive and able to fit in multiple devices, difficult to manage search
according to the flight and destination path. Also difficult to maintain all back in code
and difficult to maintain database connection.

4
2. Hardware and Software Requirements

Hardware:

Ram: 4 GB

Hard disk: 250 GB

Processor: Intel Core i5

Software:

Front end: PHP, CSS and Html

Back end: MySQL

Text editors: Sublime

Operating system: Windows

Server: Apache

5
3. Data validation

Figure 4: required user

From the above figure we can know the username and password is required to log in
into the system. Other wise it will show the error shown in picture above.

Figure 5: login required code

6
Figure 6: passenger required

The above picture shows that all the information of the passenger is required.

Figure 7: Name validation

The picture shows that the name should be in string otherwise it will show the above
error.

Figure 8: digit validation

In mobile number field data should be digit

Figure 9: Email validation

There should be proper email to work.

7
Figure 10: Passenger validate code

Figure 11:select seat validation

We should select at least 1 seat to processed booking.

Figure 12: Bording point validation

We also need to select boarding point to processed booking.

8
Figure 13: Booking processed validation code

Figure 14: seat booked validation

If two people select same seat at a time then the person who is quick will get the seat
other will get the error.

Figure 15: seat booked code validation

Figure 16: select seat

Figure 17: Booking Complete

9
4. Customization
To make the website attractive and user friendly we have used various method. Some
of the features/ method that has been used in the system are:

1. Bootstrap
2. CSS
3. ajax

1. Bootstrap: Bootstrap is one of the template which help us to make the

webpages responsive. With the help of the bootstrap which is availab le
online in open source we can make the system which will be viewed in
multiple device.
Use of bootstrap class in my project

Figure 18: bootstrap class

2. CSS: Cascading Style sheet(CSS) is also one of the tool which will help us
to design the webpage. With the help of CSS we can give design to each and
every text, button, images etc.
Use of CSS in my Sytem

Figure 19: css class

Figure 20: use of CS S

10
3. Ajax: AJAX remains for Asynchronous JavaScript And XML. More or less,
it is the utilization of the XMLHttpRequest question speak with servers. It
can send and get data in different configurations, including JSON, XML,
HTML, and content records. AJAX's most engaging trademark is its
"nonconcurrent" nature, which implies it can speak with the server, trade
information, and refresh the page without refreshing the page. (mozilla,
2017)

Use of Ajax in my system

Figure 21:ajax code

11
5. Diagrams
5.1 DFD 0 Diagram

Figure 22: DFD 0 Level

A data flow diagram (DFD) outlines how data is handled by a framework regarding
sources of inputs and outputs. As its name shows its attention is on the flow of data,
where data originates from, where it goes and how it gets put away. (smartdraw, 2017)

DFD Level 0 is likewise called a Context Diagram. It's an essential outline of the entire
framework or process being examined or displayed. It's intended to be an initially see,
demonstrating the framework as a solitary abnormal state process, with its relations hip
to outer substances. It ought to be effectively comprehended by a wide crowd, includ ing
partners, business investigators, information examiners and engineers. (lucidcha rt,
2017)

12
6. Multiple device View
I have previewed the view of the two different devices here below:

1.5 Desktop View

Figure 23: Home Page

Figure 24:S earch Flight

13
Figure 25: S earch result

Figure 26: View S eat

Figure 27: Passenger Form

14
1.6 Mobile view

Figure 28: Home mobile

Figure 29: S earch list mobile

15
Figure 30: S eat view Mobile

Figure 31: passenger mobile

16
Figure 32: Booking Complete

Figure 33:Booked seat

17
7. Effective use of User interface

Figure 34: S earch Flight

From the above picture, we can see that the interface is use to search the flight , we
have to enter source, destination and date in the input box and search flight.

Figure 35: S earch Result

Then we will get the search result from where we can view seat of the flight we choose.

18
Figure 36: seat view

After clicking views seat we will the the seat layout of the flight which is shown in
above figure.

Figure 37:S elect seat

Here we can select the seat of our choice and proceed our booking shown in above
figure.

Figure 38:Passenger detail

Then we need to enter the details of the passenger and book the seat.

Figure 39:Booked seat

Then the seat will be reserved for the passenger and no any user will be able to book
that seat.

19
8. Features and Functionality of the System
The Flight management system I had made various features which will help the flyeasy
to manage their plane and also the customer will be able to search the flght according
to their choice.

Some of them are mentioned here:

 Perform booking: Client can perform booking by searching their required flight and
entering passenger details shown as figure 38 and book it.
 Able to select seats: Passenger can select the seat according to their choice as shown
in figure 36 and 37 respectively.
 Check arrivals & departures: we can also check arrivals & departure of the flight in
search result which is shown in figure 35.
 Create user profile: we can also create the profile of the passenger by using sign up
option shown in figure below:

Figure 40: sign up

20
9. Testing
Unit Testing

In this testing I have check one by one flow of the system whether it is working or not.
For example I had checked the login panel after the logging with registered name and
password then only we go to next page.

Integration Testing

In this testing I had taken a group of components and combined to produce output and
check whole performance of the system whether it working well or not.

Performance Testing

In this testing I had check the speed and effectiveness of the system and to make sure
it is generating results within a specified time as in performance requirements.

21
10. Factors Affecting User Interface
Clear

Clarity is the most important element of user interface design. Indeed, the whole
purpose of user interface design is to enable people to interact with your system by
communicating meaning and function.

Familiar

It refers that can be naturally and instinctively understood and comprehended, it means
design must be familiar to the user so that any user can use it.

Responsive

Responsive means the interface provides some form of feedback and the interface
should talk back to the user to inform them about what’s happening.

Attractive

Attractive in a sense that it makes the use of that interface enjoyable it mean you can
make your UI simple, easy to use, efficient and responsive.

(Anon., 2017)

22
11. User Manual
For Users

Step 1: First of all the open the link of the reservation system.

Step 2: After that search the flight by entering the destination.

Step 2: After that login the system, if you already have your account or you have to
register for login.

Step 3: After that book the seats as per user destination.

Step 4: Confirm the booked tickets by providing required information details

Step 5: If you need to cancel the ticket go for cancel menu provide required informa tio n
details and click on cancel bottom.

Step 6: Log Out from the system by clicking on log out bottom.

23
12. Conclusion
The main objective of the project is to developed website which is able to overcome the
problems, issues and the present challenges of Fly-Easy Airline reservation system.
This project is very challenging for me. I have done hard-work and much effort to meet
all the project requirement and able to make this project in a given timeframe. The users
can easily make booking for their flights in their respective destination from this
website.
We came through various existing system that is available in the market while
developing the system, The existing systems that is applied by different airlines for
managing customer flights, flight details, online bookings and so on.
Though the system still needs a lot of scope of improvement inside the website. Overall
the Fly-Easy Airline reservation system look and feel gives rough picture of on existing
automation system.

24
13. Reference
Anon., 2017. usabilitypost.com. [Online]
Available at: http://usabilitypost.com/2009/04/15/8-characteristics-of-successful- user-
interfaces/
[Accessed 10 may 2017].

forbes, 2018. forbes. [Online]

Available at: https://www.forbes.com/sites/valleyvoices/2016/02/22/why-we-dont-
surf-the-web-anymore-%C2%ADand-why-that- matters/#3cb6ef207ac2

lucidchart, 2017. lucidchart. [Online]

Available at: https://www.lucidchart.com/pages/data- flow-diagram

mozilla, 2017. ajax. [Online]

Available at: https://developer.mozilla.org/en-
US/docs/Web/Guide/AJAX/Getting_Started

smartdraw, 2017. smartdraw. [Online]

Available at: https://www.smartdraw.com/data-flow-diagram/

statista, 2018. statista. [Online]

Available at: https://www.statista.com/statistics/572440/passengers- usage-of-
technology-during-air-travel/

wearesocial, 2018. wearesocial. [Online]

Available at: https://wearesocial.com/blog/2018/01/global-digital-report-2018

25
Appendix
Workload Matrix
S.N. Task Percentage Signature
1. Mobile Web 100%
Application

Marking Scheme

Individual Assignment Evaluation Mark sheet

Subject: Mobile & Web Multimedia
Marks:
Student Name: Rubi Raj Shrestha Grade:

Criteria Allocated Marks Marks Obtained

APPLICATION 1 (100%)
Introduction 5
Data validation 10
Customization 10
Ability To View In Multiple Devices 15
Documentation Report 30
Effective Design Of User Interfaces 15
Features & Functionality 15
Total 100

Grand Total

26
Appendix

Gantt chart