Implementation of Responsive Online Food Ordering Application With Social Media Integration

See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/340479626
Implementation of Responsive Online Food Ordering Application with Social

Media Integration
Thesis · January 2018

DOI: 10.13140/RG.2.2.32716.36486
CITATIONS READS
2 131,442
1 author:
Md. Muminur Rahman

UCB Fintech Company Ltd.
4 PUBLICATIONS 9 CITATIONS
SEE PROFILE
All content following this page was uploaded by Md. Muminur Rahman on 07 April 2020.
The user has requested enhancement of the downloaded file.

Implementation of Responsive Online
Food Ordering Application with Social
Media Integration
A Project Submitted to University of Derby for the Degree of BSc (Hons) in

Information Technology in the Department of Electronics, Computing and Maths
By
Md. Muminur Rahman
Year 2017
Abstract
The aim of the project was to build a responsive online application for restaurant
which helps customers to order foods online. Along with this, the application needs to
be responsive as the application can be accessed through devices with different size of
screens. One of big problem while ordering online is trust. Social media websites play
a vital role to attract customers and make trust on their mind. Hence, Facebook API is
integrated to the application. So, customers trust the quality and attract to order online
when they see the reviews and likes of their friends and relatives who used the service
earlier. To address this functionalities, a deep research has been made on the earlier
works for automating the food ordering processes. Laravel 5.4 PHP framework has
been used to develop the backend of the system and Bootstrap 4 framework used for
developing the responsive frontend. After developing the system, different testing
methods have been used to find bugs in the system and ensure the quality.
2
Acknowledgements
In first, I am grateful to the Almighty Allah for the wellbeing and health that were
necessary to complete this project.
I wish to express my sincere thanks to my supervisor Mr. SRM Fahad-Ul-Hossain for

providing me with guidance and suggestion. Without his guidance, suggestion and
inspiration, it was very difficult for me to complete the project.
I am also grateful to my parents and all family members for supporting me to

concentrate on my study and complete it by time. I also thankful to all of my friends,
classmates and faculty members for supporting me through the journey.
3
Table of Contents
Abstract .......................................................................................................................... 2
Acknowledgements ........................................................................................................ 3
Table of Contents ........................................................................................................... 4
List of Tables ................................................................................................................. 8
List of Code Snippets ..................................................................................................... 8
List of Figures ................................................................................................................ 9
1. Introduction .......................................................................................................... 11
1.1. Project Overview ........................................................................................... 11
1.2. Project Aim & Objectives ............................................................................. 12
1.3. Project Rationale ........................................................................................... 12
1.4. Feasibility of the Project ............................................................................... 13
1.5. Scope of the Project....................................................................................... 14
2. Literature Review................................................................................................. 15
2.1. Past Works on This Domain.......................................................................... 15
2.1.1. PDA-based System ................................................................................ 15
2.1.2. RFID Based System ............................................................................... 17
2.1.3. Mobile Application Based System......................................................... 18
2.1.4. Web Application Based System............................................................. 19
2.1.5. Evaluation of the Past Works ................................................................. 19
2.2. Web Application Development Technologies .............................................. 20
2.3. PHP................................................................................................................ 20
4
2.4. Laravel ........................................................................................................... 20
2.5. Bootstrap ....................................................................................................... 23
3. Methodology ........................................................................................................ 24
3.1. Research Methodology .................................................................................. 24
3.1.1. Initial Study ............................................................................................ 25
3.1.2. Data Collection ...................................................................................... 25
3.1.3. Analysis.................................................................................................. 25
3.1.4. Implementation ...................................................................................... 25
3.1.5. Critical Analysis of the System.............................................................. 25
3.2. System Development Methodology .............................................................. 26
3.2.1. Waterfall ................................................................................................ 26
3.2.2. System Prototyping ................................................................................ 27
3.2.3. Agile Methodology ................................................................................ 27
3.2.4. Rational for Selected SDLC................................................................... 27
4. Requirements & Design ....................................................................................... 31
4.1. Requirements Elicitation ............................................................................... 31
4.1.1. Functional Requirements ....................................................................... 31
4.1.2. Non-Functional Requirements ............................................................... 31
4.2. Process Modelling ......................................................................................... 32
4.2.1. Context Diagram (CD) ........................................................................... 32
4.2.2. Data Flow Diagram (DFD) .................................................................... 33
4.3. Data Modelling .............................................................................................. 36
4.3.1. Entity Relationship Diagram (ERD) ...................................................... 36
5
4.4. User Interface Design .................................................................................... 37
4.4.1. Homepage .............................................................................................. 37
4.4.2. Menu List ............................................................................................... 39
4.4.3. Menu Details Page ................................................................................. 41
5. Implementation .................................................................................................... 44
5.1. Views............................................................................................................. 44
5.1.1. Home Page ............................................................................................. 45
5.1.2. Menu List ............................................................................................... 46
5.1.3. Menu Detail Page ................................................................................... 47
5.2. Implementation of Cart ................................................................................. 48
5.3. Facebook API Integration ............................................................................. 49
6. Testing.................................................................................................................. 52
6.1. Black Box Testing ......................................................................................... 52
6.1.1. Test 1 ...................................................................................................... 54
6.1.2. Test 2 ...................................................................................................... 55
6.1.3. Test 3 ...................................................................................................... 56
6.1.4. Test 4 ...................................................................................................... 56
6.1.5. Test 5 ...................................................................................................... 57
6.1.6. Test 6 ...................................................................................................... 60
6.2. Search Engine Optimisation (SEO) Testing.................................................. 62
6.3. User Acceptance Testing ............................................................................... 62
6.3.1. Ease of use ............................................................................................. 63
6.3.2. User Friendly ......................................................................................... 63
6
6.3.3. Responsiveness of Interface ................................................................... 64
6.3.4. Speed & Performance ............................................................................ 66
7. Results & Evaluations .......................................................................................... 67
7.1. Security of the System................................................................................... 67
7.2. Responsive User Interface ............................................................................. 67
7.3. Facebook API Integration ............................................................................. 67
7.4. Social Sharing Options .................................................................................. 68
8. Conclusions and Recommendations .................................................................... 70
8.1. Achievement of the Project ........................................................................... 70
8.2. Limitations of the System ............................................................................. 71
8.3. Future Recommendations.............................................................................. 71
8.4. Personal Reflection ....................................................................................... 71
8.4.1. Acquiring Research Skills...................................................................... 71
8.4.2. Acquiring Programming Skills .............................................................. 72
8.5. Concluding Remarks ..................................................................................... 72
9. Bibliography ........................................................................................................ 73
10. Appendices ........................................................................................................ 78
10.1. Appendix A: Code Snippets ...................................................................... 78
10.2. Appendix B: Questionnaire ....................................................................... 87
10.3. Appendix C: Ethical Approval & Progress Report ................................... 89
7
List of Tables
Table 1: Scope of the project. ...................................................................................... 14
Table 2: Comparison between SDLCs based on different criteria (Dennis, Wixom and
Roth, 2012). ................................................................................................................. 27
Table 3: Test cases for black box testing. .................................................................... 52
List of Code Snippets

Snippet 1: Main view. .................................................................................................. 44
Snippet 2: Codes of header file. ................................................................................... 45
Snippet 3: The construct function for authentication. .................................................. 48
Snippet 4: Function for adding product to cart. ........................................................... 48
Snippet 5: Remove item from the cart. ........................................................................ 49
Snippet 6: Service for Facebook credentials. ............................................................... 49
Snippet 7: Functions for handling Facebook Login..................................................... 50
Snippet 8: JavaScript code for adding Facebook like & share button. ........................ 51
Snippet 9: Admin Login Controller ............................................................................. 78
Snippet 10: Admin Registration Controller. ................................................................ 79
Snippet 11: Admin Menu Controller ........................................................................... 82
Snippet 12: Cart Controller .......................................................................................... 84
Snippet 13: Menu Controller. ...................................................................................... 85
Snippet 14: Cart View Blade. ...................................................................................... 86
8
List of Figures
Figure 1:Typical flow for food ordering in PDA-based system (Cheong, Chiew and
Yap, 2010).................................................................................................................... 16
Figure 2: MVC pattern ecosystem (Jailia et al., 2016). ............................................... 22
Figure 3: Steps of the research methods in Waterfall model. ...................................... 24
Figure 4: Phases of Extreme Programming (XP) (Dennis, Wixom and Roth, 2012). . 29
Figure 5: Context diagram of the system. .................................................................... 32
Figure 6: DFD of processes of customer for ordering food. ........................................ 34
Figure 7: DFD for processes of Admin........................................................................ 35
Figure 8: Entity relationship diagram of the system. ................................................... 37
Figure 9: Difference of screen layouts for different size of screens (Tan, 2013). ....... 37
Figure 10: Homepage layout. ....................................................................................... 38
Figure 11: Home page layout for small screen. ........................................................... 39
Figure 12: Menu list page layout. ................................................................................ 40
Figure 13: Menus page layout for small screen. .......................................................... 41
Figure 14: Menu details page layout. ........................................................................... 42
Figure 15: Menu details page layout for small screen. ................................................ 43
Figure 16: Homepage of the application. ..................................................................... 45
Figure 17: Homepage of the application in small screen. ............................................ 46
Figure 18: Menu list page of application. .................................................................... 46
Figure 19: Mobile view of menu list page. .................................................................. 47
Figure 20: Menu details page. ...................................................................................... 47
Figure 21: Facebook login successful. ......................................................................... 55
Figure 22: Redirected Facebook login page. ............................................................... 55
Figure 23: Successful login with Facebook. ................................................................ 56
Figure 24: Showing total for one menu. ...................................................................... 56
Figure 25: Total of multiple menus. ............................................................................ 57
Figure 26: New information inputted in form.............................................................. 57
Figure 27: Confirmation message after upload new product. ...................................... 58
Figure 28: New menu (Coca Cola) shown in database. ............................................... 58
Figure 29: The image of the new menu uploaded to the folder. .................................. 59
Figure 30: New menu in the menu list page. ............................................................... 59
Figure 31: Menu list page. ........................................................................................... 60
Figure 32: Product price is edited. ............................................................................... 61
Figure 33: Update of product price in menu list page. ................................................ 62
Figure 34: SEO test result by Lighthouse. ................................................................... 62
Figure 35: Ease of use of the application. .................................................................... 63
Figure 36: Percentage of views on user friendliness. .................................................. 64
Figure 37: Percentage of views on responsiveness. ..................................................... 65
9
Figure 38: Screen size of devices facing problem with UI. ......................................... 66
Figure 39: Satisfaction about speed and performance. ................................................ 66
Figure 41: Facebook analytics page for the restaurant application.............................. 68
Figure 42: Scan copy of ethical approval. ................................................................... 89
Figure 43: Scan copy of project progress report for meeting 1. .................................. 90
Figure 44: Scan copy of project progress report for meeting 5. .................................. 91
Figure 45: Scan copy of project progress report for meeting 10. ................................ 92
10
1. Introduction
This chapter starts with a high-level overview of the project. It then describes the
specific aims and objectives of the project. Finally, it analyses the feasibility of the
project and provides with a feasibility report of the system.
1.1. Project Overview

The project sets to develop an online ordering system for restaurant. Many industries
now quickly adopting technologies. Restaurant industry also embraces different types
of technologies which make daily processes easier and faster. But the adoption of
technology in restaurant industry is slower compared to other industries (Saeed et al.,
2016). Restaurants can use technology in different ways. One of them is to build an
online presence by a web application which may also help in online ordering. Because
the use of internet-based ordering system is in rise in today’s world. Since 2014, about
30% of customers aged between 18 and 54 have ordered food from a restaurant's
website via their phone or tablet in USA. On the other hand, QSR Web found that
digital restaurant ordering is growing 300% faster than dine-in traffic (Beltis, 2016).
So, the market for online food delivery now remains as large as ever. Nevertheless, a
huge section of this market is still being overwhelmingly offline.
When it comes to buying goods or foods online, customers want to be ensured about
the quality of the foods that s/he is going to buy. People tend to eat foods that is
suggested by their friends or nearest one. This thing can be achieved in an online food
ordering system by utilising and integrating social media properly. A study performed
by OTX Research found that two out of every three customers are influenced in their
buying decision through information they find in social media. Nearly, 67% of
customers are likely to pass this information on to other customers and over 60% of
customers trust information they find through social media such as Facebook, Twitter
and other social media sites (Shankararaman and Lum, 2013). Suraworachet et al.
(2012) studied the effect of Facebook’s features such as “like” and observed a
positive impact on consumer’s attitude to buying products. In summary, social media
has served as a new form of word-of-mouth and influence customer decision-making
while buy something online. So, social media will be implemented with the
application. Facebook API will be used with the system, so that customers can login
with their Facebook credential and like any menu. Along with this, Twitter sharing
system also integrated to the system.
The ubiquitous connectivity and internet makes different kinds of devices interact to
web applications. A web application now can be accessed from different types of
devices including desktop personal computer, laptop or notebook PCs, portable tablets
and smartphones. So, a modern web application should be optimised for every kind of
devices. But the existing restaurant websites are not in a good level. For instance, 51
11
percent of all mobile searches on Google are for restaurants, yet as few as 5 percent
have mobile-optimised websites (Oddle, 2016).
1.2. Project Aim & Objectives

The project aims to build a web-based system for restaurant, which automates food
ordering system. It will also help the management to manage the online orders and
view the status. The management can add menus and take orders with the system. The
system also has a simple mobile-friendly user interface which can be used through
different types of devices and screens. Facebook API will be integrated with the
application so customers can login with their Facebook account and like or share
menus which can work a new customer as word of mouth.
In order to achieve the mentioned aim, following objectives should be achieved:
1. An extensive literature review will be conducted to find out the past work
done to automate the food ordering process of restaurant.
2. Appropriate methods and methodologies will be used for designing and

developing the whole system in systematic approach.
3. Laravel 5.4 and Bootstrap 4 will be used for developing the backend and
frontend of the system.
4. Social Media will be integrated to the system. So, customer can login and
register through their social media account and share their views about menu.
5. The system will be tested properly to ensure the quality of the system.
1.3. Project Rationale

Online ordering from restaurants is getting easier as mobile and internet technology
progresses. Food lovers now tends to order foods through online ordering system as it
is easier and fast. QSR Web found that digital restaurant ordering is growing 300
percent faster than dine-in traffic. But most of the restaurant do not give concentration
to make solid appearance on the internet. As a result, 51 percent of all mobile
searches on Google are for restaurants, yet as few as 5 percent have mobile-optimised
websites (Beltis, 2016).
There are also some problems of traditional food ordering system, which results
wasting time and making conflicts. In existing system there are few problems:
• For placing orders, customers have to visit restaurants to know about food
items and then place order and pay. In this method time and manual work is
required.
12
• Some restaurants take order via phone. While placing an order over the phone,
customer lacks the copy of available menu items in restaurant.
• Every restaurant needs certain employees to take the order over phone or in-
person. In today’s market, labour rates are increasing day by day making it
difficult to find employees when needed (Patel, 2015).
To solve these issues, an Online Food Order System has been developed which is
originally designed for small scale business. But this system is applicable in any
restaurant. The main advantage of this online system is that it greatly simplifies the
food ordering process for both of the customer and the restaurant. The anticipated
benefits of the project are:
1. This will speed up the ordering process.
2. The system will help to reduce labour cost involved.
3. This will avoid long queues at the counter due to the speed of execution and
number of optimum screens to accommodate the maximum throughput.
4. The system will be less probable to make mistake, since it’s a machine.
5. The top benefit of online ordering was a savings in labour, since employees
are not tied up on the phone or at the counter.
6. Order accuracy was another benefit for restaurant (Kimes, 2011).
On the other hand, social websites and media play a vital role for business. Every
business can use social media to get information about potential customers, analyse
sentiments and better relationship with customers. A study by Alagoz and Hekimoglu
(2012) shows that trust is one of the main drivers to place order online in restaurant.
Today, a recommendation from friends via social media plays as a word of mouth in
building trust while ordering online (Shankararaman and Lum, 2013). Hence, Social
media can be integrated to restaurant web app to ensure customers about the food
quality. New customers can choice their desired products by studying reviews made
by other users.
1.4. Feasibility of the Project

The project requires a complete web application for restaurant that can be used to
manage online orders. This will be mobile-optimised web app, so that it can be
viewed in a mobile browser as well as in a PC. All the technologies that will be used
to develop the system are open-sourced, such as PHP, Laravel, Bootstrap 4, and
Apache Server. Hence, the technologies can be used without any cost.
13
1.5. Scope of the Project
The following the table shows the scope of the project:
Table 1: Scope of the project.
Scope In Scope Out
• Web application for restaurant • IoT based food ordering system
• Online restaurant management • Physical smart system for

system restaurant
• Online food ordering system • Mobile application
• Online customer management
• Written report on the project
14
2. Literature Review
This chapter discusses the different approaches for automating the ordering processes
of restaurant. After that, it explains the web application development tools and
technologies used in this project.
2.1. Past Works on This Domain

A computerised restaurant system is “an integrated IT system that supervises,
manages and facilitates the planning operations in restaurant” (Tan, 2013). Before the
automated system has been introduced, the orders and payments were managed
manually using register books etc. The Point-of-Sales (POS) was introduced in the era
of 1990. After the system got popularity, it started being used in restaurant industry.
After 1990, the internet and wireless technology moved on so much fast. Restaurants
also started using different technology based system to increase the efficiency of the
system (Sullivan, 2015). Researchers also started introducing different types of
solutions for restaurants. Lots of work have been done for automating the operations
of the restaurants. Every researcher chose an aspect or problem and tried to make
good solution for that. The solutions provided by researchers can be categorised in
different categories. The following sections will discuss about those systems.
2.1.1. PDA-based System
Xiang, Zhou and Chowdhury (2004) developed a PDA based in-house meal ordering
system for restaurant named iMenu. It is one of the first systems that introduced PDA-
based ordering in restaurant industry. The developers used .NET platform for
developing the system.
Patel, Patel and Obersnel (2007) discussed about implementation of PDA-based

ordering. The proposed system by Patel, Patel and Obersnel (2007) was a web-based
stand-alone wireless application. Connectivity between client and server is continuous
in two-tiered web-based client-server architecture. Customers in restaurant can order
through PDAs. Hence, the bill of foods can be generated and paid within a short time.
Hongzhen, Bin and Wenlin (2009) developed a web service and wireless system
which can be used through desktop and personal digital assistant (PDA). In this
system, the access of data to the servers can be wired and wireless. The food ordering
functions served through both desktop computers and PDAs over a wired/wireless
integrated local area network. These PDAs were used to see menus and make orders.
After the customer made orders through PDA, the manager can see the orders through
computer. They implemented the system using .NET and C#.
15
Figure 1:Typical flow for food ordering in PDA-based system (Cheong, Chiew and Yap, 2010).
There are many limitations of these PDA-based systems. Such as:
• In a PDA-based food ordering system, restaurant owners must have enough

number of PDAs to serve the number of the customers especially during peak
hours. Accommodation and maintenance of enough PDAs can increase the
restaurant expenditure which is a big challenge for restaurants as most of the
restaurants are categorised as small medium enterprise (SME) (Cheong, Chiew
and Yap, 2010; Samsudin et al., 2011).
• Continuous use of PDAs leads to recharging batteries multiple times which is

a big challenge (Patel, Patel and Obersnel, 2007).
• Sharing same PDAs among many customer may help in spreading contagious
diseases (Samsudin et al., 2011).
16
• Customers are required to be present physically to make order using the PDA-
based system. Thus, customers have no alternatives to make early order before
coming to the restaurant. This implies that customers have to accommodate
waiting time for food preparation (Samsudin et al., 2011).
• Today, PDA based in-house ordering system is an obsolete technology as

PDAs lost the attraction of the people and not used anymore widely because of
the advancement of cell phone technology (Smith and Wempen, 2011).
2.1.2. RFID Based System
Many researchers also proposed and implemented wireless communication based

system within the restaurant. Ngai, Suk and Lo (2008) developed a radio frequency
identification (RFID) based sushi management system in a conveyor-belt sushi
restaurant. Their case study showed that RFID technology helps improve food safety,
inventory control, service quality, operational efficiency, and data visibility in sushi
restaurants. Unfortunately, this system does not support customer-centred service
because it cannot actively identify customers. To overcome this problem, Tan, Chang
and Chen (2012) proposed a RFID based smart food recommender system, where
customers will have a RFID based card. The system integrates radio frequency
identification (RFID), wireless local area network, database technologies, and a menu
recommender. This system enables waiters to immediately identify customers via
RFID-based membership cards and then actively recommend the most appropriate
menus through menu recommender for customers. The customer will be identified by
this RFID based card and recommended food menu based on his/her past choice of
food. For taking orders, the waiters use PDAs that are connected the system via local
area network (LAN). Gayatri, Chaitanya and Harikrishna (2014) also proposed a
RFID based model almost the same system like Tan et al. (2012). But they added an
extra feature to the system, where customers can order food from their own mobile
through short text message (SMS).
There are some problems with this system, which are follows:
• In this systems, the customer needs to bring his/her card or smartphone to

restaurant. If s/he failed to bring the card to the restaurant they cannot use
many facilities of the system.
• These systems is focused only the customers who have the membership cards;
not all customers get the service as well.
• The system specially focusses on the in-house ordering system. There is no

room for ordering from outside of the restaurant.
17
2.1.3. Mobile Application Based System
Samsudin et al. (2011) recognised the limitations of PDA based food ordering system
and developed a food ordering system with Microsoft Access database and ASP.NET
and VB.NET for Microsoft Windows based smartphones. Customers can order foods
remotely from this application. As Android based smartphones took over Windows
based smartphones, Shinde et al. (2014) developed an application for Android
operating system based smartphones where they used Java and SQLite. The order
processing speed of this Android application is faster than PDA based ordering
system. The application can play a media between customer, restaurant manager and
kitchen. Dhore et al. (2014) also proposed an Android based system to automate
ordering process of the restaurant, through which one or more customers can order
food, book table, and also make payment remotely. Both of these to works
implemented almost same functionalities. Leong (2016) also developed a system for
Android operating system, which can be used for ordering food online. In this system,
computers need to be installed in kitchen and manager’s desk, so they can view and
check orders and payment.
Recently, Saeed et al. (2016) implemented an Android based smart restaurant system,
which helps customers finding free parking lot and free table, ordering foods and
paying bills from their mobile phone. On the other hand, the management can monitor
the whole work properly. This system is comprised of different technologies such as
Mobile and Web applications, Internet of Things (IoT), Near-Field Communications
(NFC) sensors, and cloud computing. This Smart Restaurant Management System
provides with two interfaces for the two types of users in restaurants; an Android
mobile application for customers and a web application for restaurant staff members.
These proposed and developed smartphone based systems let customers order foods
online before arriving to restaurant. But these systems have also some limitations as
follows:
• These applications are focused on specific operating system of smartphone.

So, who uses a smartphone running on different operating system cannot use
the application until there is another version of application is developed for
that specific platform. For example, an application developed for Windows
smartphone will not run on an Android smartphone.
• Customers need to install the restaurant mobile application for getting the
benefits of smart restaurant system.
• Ordering foods from computer is not possible with these application, as

mobile applications cannot be browsed via computers. To get orders from
customers using PC, another web application needs to be developed.
18
2.1.4. Web Application Based System
To overcome the device and operating system centric approach for automating
restaurant operation, K et al. (2016) proposed an online web application which can be
accessed through internet. For using this application, computer screen will be placed
on each table of restaurant for customers to order. Customers can order food for take
away and make payment through the application. However, the idea is innovative, but
a little bit weird as computers need to be installed in every table. Sometimes it may
create complex problem rather than making a solution. Patel (2015) developed an
online food ordering system with Java in backend system and HTML with CSS in
frontend. It was a robust and nice application. But the responsive development
method was not used in the application. Hence, the application cannot viewed
properly with a smart phone. Tan (2013) developed a web based application with ASP
.Net and Bootstrap to automate the ordering process of the restaurant and make it
paperless. But the system is only focused on the management of the restaurant. There
is no option for customers to order food online. The system was responsive.
These web applications, however, overcame the problem of being dependent on

specific device (e.g. PDA) or operating system. These systems also have few
limitations, such as:
• None of them tried to make the online ordering system more trustable to
customers.
• They did not integrated social media to the system which can make customer
registration and login process easier.
2.1.5. Evaluation of the Past Works

The previous lines illustrate that many researchers worked for implementing IT based
systems in restaurants to gain more revenue and reduce order processing time. But
most of them did not focus on the online based restaurant system where customers can
order food over internet from their home. With the expansion of internet technology
in this era, it is not feasible to stick with only technologies demonstrated above as
most of the proposed system only tried to automate the in-house ordering system.
On the other hand, the systems which is developed to order food remotely are device
or operating systems oriented. For obtaining the benefits of the system, customers
need to use a smartphone with specific operating system like Windows or Android.
No one tried to find a solution which does not depend on any specific device, while a
web application can be accessed by through kind of devices with internet connection
from anywhere. Moreover, there is no need for installing extra software for browsing
a web application. If the web application is developed using modern mobile friendly
manner properly, it will give a good performance on any kind and size of device.
19
The proposed solutions also lack the use of the power of social community, which can
be a big marketing medium for the restaurant and help influencing new customers to
have a food experience in the restaurant. The earlier part of this paper stated that the
digital restaurant ordering is growing 300 percent faster than dine-in traffic (Beltis,
2016). So, the restaurants should embrace internet technology to make a solid
appearance on the internet and provide the service in a wider range of customers
within minimum cost and time.
2.2. Web Application Development Technologies

The backend of the system is developed with PHP and Laravel and the frontend of the
system is developed with Bootstrap 4. Hence, this section is providing a brief
description of these technologies used for this project.
2.3. PHP
PHP is acronym for PHP: Hypertext Preprocessor. PHP is an “open source general-
purpose scripting language that is especially suited for web development and can be
embedded into HTML” (The PHP Group, 2018). PHP is mainly used in dynamic web
page, including CLI (command line interface) and GUI (graphical user interface)
program. It has the feature of good across-platforms and easy transplant (Lei, Ma and
Tan, 2014). PHP is not an object-oriented language like Java. But according to
Haydar (2007), PHP 5 implements almost complete object-oriented features.
83.1% of all the websites use PHP as server-side programming language and 14.1 of
all websites use ASP.NET as server side language by January 2018 (W3Techs, 2018).
Along with this, nearly 60% of web servers are running on Apache with PHP
(Hayder, 2007). Hence, many researchers tried to compare between these two
languages. According to a study of MVC frameworks from PHP and .NET by Jailia et
al. (2016), .NET gives better result for page loading time, time to first byte and time
to last byte compared to PHP based web applications. While PHP based website gives
much more promising result for request and response transfer speed. Bounnady et al.,
(2016) also made a comparison between PHP and .NET in five different parameters:
load static webpage, algorithms processing, managing database, uploading file and
reading/writing files. The study concluded that PHP performs better than .NET in
managing database operations and uploading files.
2.4. Laravel
Today, web applications are mostly developed using a framework. Surguy (2014)
defines PHP framework as follows:
20
“A PHP Web application framework is a set of classes, libraries or components
written in PHP server-side scripting language that aim to solve common web
development problems and promote code reuse.”
Frameworks are so popular precisely because they dramatically decrease the amount
of work (Gilmore, 2015). Laravel is a PHP open source framework that prefers the
rapidness of development. The framework is developed based on Model-View-
Controller (MVC) design pattern. Along with this, the framework also implements
Object Oriented Programming (OOP), Dependency Injection (DI) and Object
Relational Mapping (ORM) (Bean, 2015). The following lines briefly describe the
features of the framework.
• Interaction with Database: There are three techniques to interact with

databases in Laravel: (1) Eloquent ORM, (2) Query builder (3) Raw SQL.
Laravel supports running raw SQL commands which is the traditional way for
writing SQL within PHP code. The Eloquent ORM of Laravel provides Active
Record implementation for working with database. Each database table has a
corresponding "Model" which is used to interact with that table. Models allow
to run query for data in database tables, as well as insert new records into the
table. On the other hand, Laravel's database query builder provides an
interface to creating and running database queries. It can be used to perform
most database operations on all supported database systems (Bean, 2015). The
Laravel query builder uses PDO parameter binding to protect the application
against SQL injection attacks. There is no need to clean strings being passed
as bindings (Otwell, 2018b). As we have seen that there are three methods for
interaction with database, it is important to select the right database technique
when developing a web application because there are pros and cons with each
approach. Jound and Halimi (2016) made a performance comparison between
Eloquent ORM and raw SQL and concluded that Eloquent ORM doesn’t give
better performance and response time compared to Raw SQL. So, Eloquent
ORM is not suitable for the large applications with a huge amount of data.
Instead, Eloquent is good for building small to medium sized applications.
• Model-View-Controller Pattern: In MVC pattern, the view represents a

page’s template or templates, the controller represents both the server’s
dispatch infrastructure that maps a URL to a code snippet and the code snippet
itself, and the model represents an application’s data (the “state”), most of the
business logic, and any model-related computations (Parr, 2004). MVC was
first introduced in Smalltalk'80 by Krasner and Pope (Jailia et al., 2016).
Today, MVC is one of the most popular architectural design pattern for web
application. Laravel is a fully MVC compliant (Dockins, 2016).
21
Figure 2: MVC pattern ecosystem (Jailia et al., 2016).
• Blade Templating Engine: MVC based Web applications often implemented

by using HTML templates, often seeking to separate the webpage presentation
from the business logic and objects. It has become a de facto standard
programming model for Web application development. Template Engines are
use in web applications to separate the front end webpage presentation from its
underlying business logic and objects (Tatsubori and Suzumura, 2009;
McFarlin, 2017). Blade is a templating engine provided with Laravel. Unlike
other popular PHP templating engines, Blade does not restrict developers from
using plain PHP code in views. All Blade views are compiled into plain PHP
code and cached until they are modified (Otwell, 2018a).
• Built-In Security: Since authentication is a common thing for every

application Laravel comes with built-in authentication system for users which
can be used for user registration, login, password reset etc. The authentication
process is easily customisable to the need of the application and business
logic. There are many built-in features is Laravel which makes application
development faster without compromising the security and quality of the
application (Otwell, 2018c).
• Performance: Olanrewaju, Islam and Ali (2015) evaluated the performance of

the four popular PHP frameworks; CodeIgniter (CI), Symfony, CakePHP and
Laravel. The frameworks are benchmarked on several criteria such as request
per second, system load average, memory usage, number of function calls and
number of files required. Laravel gets the best result over other three
frameworks in request per second, system load average, memory usage and
number of function calls. Das and Saikia (2016) made a comparison between
22
raw PHP, CodeIgniter (CI) and Laravel frameworks where Laravel performed
better than raw PHP and CodeIgniter (CI).
2.5. Bootstrap
As the number of Internet users on mobile devices is growing every moment, websites
are no longer built only for the desktop machines. The mobile-first philosophy
demands the sites to be fully compatible for all available and future mobile devices.
Bootstrap allows and easily enables to design and develop websites congenial to all
devices including various screen readers.
Bootstrap is a free CSS and JavaScript framework that allows developers to rapidly
build responsive web interfaces. The framework was first conceived by Mark Otto
and Jacob Thornton while working at Twitter in 2010. Since its release as an open
source project in August of 2011, Bootstrap has become a household name among
frontend web developers (Jakobus and Marah, 2016).
Bootstrap is the most starred project in GitHub since 2012. Bootstrap is largely based
on CSS3 that is currently the latest version of Cascading Style Sheet (CSS) and
included with powerful capabilities like Media queries, Selectors, Cascading and
Inheritance, Template layouts, Namespaces, Flexible and Grid layouts etc. (Bhaumik,
2015). Bootstrap 4 has improved grid system and inclusion of flexbox. For regular
grid, another regular grid level is introduced for better targeting smartphones
(Lambert, 2016).
There are many other frontend frameworks like Zurb, Foundation etc. But the most
powerful thing of Bootstrap is its popularity. Hence, it is much easier to find solutions
with bootstrap (Gerchev, 2017).
23
3. Methodology
This chapter of the report aims to provide a clear vision on methods and
methodologies used for this project. In first, it describes the methodology and
methods selected for the research and gives rational why these methods and
methodology have been used. Then it discusses about software development
methodology and give rational for it.
3.1. Research Methodology

Research is “a scientific and systematic search for pertinent information on a specific
topic” (Kothari, 2004). The research methodology is a process used to collect
information and data for the purpose of making decisions. There are broadly two
approaches for conducting a research. Those are: 1) Quantitative analysis 2)
Qualitative Analysis. For developing the system, combined method has been applied.
A systematic approach should be used for conducting any research to find the solution
of the problem in systematic way. For this purpose, the research methods have been
applied based on waterfall model.
Initial
Study
Data
Collection
Implementation
Analysis
Critical Analysis
of the System
Figure 3: Steps of the research methods in Waterfall model.
There are different models for research. Among them, waterfall model is chosen as it
is easy to understand and implement. Hence, many beginners use this methodology
for research (Dawson, 2009). Hence, this methodology is used for research in this
project. Following steps have been used to formulate the hypothesis and determining
project requirements:
24
3.1.1. Initial Study
This is the first step of the research. In this step, different topics and subject area has
been reviewed to find problem. After setting the goal to developing restaurant system,
the study has been narrowed to online food ordering system.
3.1.2. Data Collection

Once the goal was set, data collection process began to get information about the
online food ordering system history and past works on this domain. Following
methods have been used for data collection:
• Literary Analysis: Literatures have been reviewed and critically analysed to

find what kind of works have been suggested in past. These works helped in
finding the shortcomings of past solutions and defining the aim and objectives
of the project. Mostly, primary data has been collected to serve the purpose.
But in some cases, secondary data is also used.
• Observation: Number of restaurant websites have been reviewed to find the

current trend in developing web application for restaurants. Along with this,
typical restaurant ordering system has been reviewed to get an insight of
online order processing system.
3.1.3. Analysis
After data collection, an overview on the system has been gained. Then different
methods (Data Flow Diagram, Entity Relationship Diagram etc.) of Structured System
Analysis & Design Methodology (SSADM) is used to analyse the system and make
logical structure for it.
3.1.4. Implementation
After getting the logical structure of the system, the implementation step began. In
this step, the logical structure converted to physical architecture through coding and
development of the system. The frontend and backend of the system has been
developed and tested.
3.1.5. Critical Analysis of the System

After implementation, the system has been critically evaluated to understand if it
meets the requirements. Then the result is analysed. In this step, conclusion and future
recommendation has been made.
25
3.2. System Development Methodology
For developing any information system, a System Development Methodology should
be used which will provide a structured way for development of an IT based systems.
SDLC refers to System or Software Design Life Cycle. It is phases of processes taken
down to build a system properly.
The main aim of SDLC process is to help provide a system that is effective, cost-
efficient, and of high quality. SDLC methodologies typically has the following stages:
Analysis (requirements and design), construction, testing, release, and maintenance
(response). But the phases can be changed in deferent SDLC mythologies. There are
many software development models for different types of projects. In following lines,
only popular three of them will be discussed.
3.2.1. Waterfall
The waterfall model is a well-known structured methodology for software
development. The whole process of system development is divided into distinct
phases. The model has been introduced in 1970s. Every phase has a unique output. It
was the first SDLC model to be used widely. So that, sometime it is referred to
Waterfall by SDLC. The waterfall model is used when the system requirements are
well known, technology is understood and the system is a new version of an existing
product (Dennis, Wixom and Roth, 2012).
Mainly there are six phases in Waterfall model. If there is a problem faced in any
phase of the cycle, the system goes to the previous phase. The phases of Waterfall
method are:
Requirements Gathering & Analysis: In this phase, all possible requirements of the
system are captured and documented in a requirement specification doc.
System Design: The requirements documented in previous phase are studied in this
phase and the system design is prepared.
Implementation: With inputs from system design, the system is developed in several
unites. Then the units are tested.
Integration & Testing: The units of the program developed in previous phase are
integrated into a system. Then the whole system is tested.
Deployment of the System: When the all kind of testing is done, the product is
deployed in the customer environment.
Maintenance: There are some issues which are found in the client environment.
Patches are released to fix those issues.
26
3.2.2. System Prototyping
Prototyping is a Rapid Action Development (RAD) method. In this method, the

analysis, design and implementation phases performed concurrently and repeatedly in
a cycle until the system is completed. With this methodology, the basics of analysis
and design are completed. Then the work on the system prototype begins
immediately. So that, many bugs and problems remained on the system. After that,
the users or project sponsors provide comment on the system. Then, the system is
reanalysed, redesigned and implemented based on feedbacks. This process continues
until the users or project sponsors satisfied with the system (Gould, 2016).
3.2.3. Agile Methodology
Agile is an iterative and incremental development model. The Agile methodology is

initiated in 2001 at a conference held in Utah, USA. The required software starts with
a simple design, then to code small functions and modules. The work on these
functions and modules is done in weeks for each life cycle which is called increment
or sprint. In these sprints, errors to be recognised, and customer feedbacks to be
incorporated into next design of the next increment (Ben-Zahia and Jaluta, 2014).
There are many models related to this methodology. The most famous ones include
Scrum, lean, and Extreme Programming (XP).
3.2.4. Rational for Selected SDLC
There are different criteria for selecting appropriate SDLC for developing an IT
system, because none of the SDLCs is best. Every SDLC has own advantages and
disadvantages. So, the SDLC should be chosen carefully based on the type of the
project. Dennis, Wixom and Roth (2012) discussed about different criteria for
selecting the appropriate development methodology for a project. SDLC selection
criteria provided by them is shown in the table below.
Table 2: Comparison between SDLCs based on different criteria (Dennis, Wixom and Roth,
2012).
Usefulness in Developing Waterfall System Agile

System Prototyping Development
With unclear user Poor Excellent Excellent

requirements
With unfamiliar Poor Poor Good

technology
27
That are complex Good Poor Poor
That are reliable Good Poor Good
With short time Poor Excellent Excellent

schedule
With schedule visibility Poor Excellent Good
Table 2 illustrates that agile development is the best solution when the time is short,
deadline is visible and the system should be reliable. It also has excellent performance
when the requirements of system is not clear. Its performance is poor when the system
complex. However, the system that is going to be built is not a complex system and
the system should be developed within a short time. Therefore, it has been considered
that agile methodology is the best SDLC for making the system.
On the other hand, Waterfall methodology is good for developing complex and
reliable system. But its performance is poor when the schedule is short and deadline is
visible. The System Prototyping method has an excellent performance with unclear
requirements and within short time schedule. So, it could be a good choice for
building this restaurant system. But the reliability of product developed with System
Prototyping is poor. No one wants to build a system that he or she cannot rely on. In
these criteria, Agile Development provides good result. So, the Agile Methodology
has been chosen as the software development methodology for the system.
There are many models of implementing Agile Methodology. Extreme Programming

(XP) has been chosen. Extreme Programming (XP) model has four stages for
developing a project, as the figure illustrates below.
28
Figure 4: Phases of Extreme Programming (XP) (Dennis, Wixom and Roth, 2012).
As the figure above shows, there are mainly four phases in Extreme Programming
method. These phases are discussed below:
• Planning: Extreme Programming starts with the planning stage. In this phase,
the requirements for the system have been collected and documented. In this
step, the plan, time, and costs of carrying out the iterations is prepared.
• Analysis: In this phase, the logical model of the system has been developed.
SSADM is used to make the logical structure of the system. A bottom-up
approach is used for analysis of the system, as there is not any previous
system. The system will be developed from scratch. Along with these, the user
interface requirements are also analysed.
• Design: In this phase of the SDLC, the logical model of database and the
interface of the system is designed. The normalisation of the database schema
is done in this phase.
• Implementation: In this phase, the system has been implemented through

coding. As extreme programming is an iterative method, it is possible to use
test driven development method using unit testing. After the system has been
developed, the end-to-end testing (black box testing, user acceptance testing)
will be used to evaluate the system. It should be kept in mind that analysis,
design and implementation phases are iterative phases. After completing one
29
iteration, feedback has been taken. Then all the phases began for the next
iteration.
30
4. Requirements & Design
This chapter illustrates the approaches taken to design the system for restaurant. The
chapter first addresses different types of requirements of the system. Then it discusses
about the system design and gives an overview of the systems processes. Then, the
database schema of the system is illustrated. Lastly, the user interface design has been
developed.
4.1. Requirements Elicitation

The requirements of a system is characteristics of a system it needs to have. The
requirements has been collected in the planning phase of the SDLC. Different kinds of
data collection methods have been utilised to obtain the requirements of the system,
which are explained in Chapter 3.1.2.
4.1.1. Functional Requirements

According to International Institute of Business Analysis (IIBA), functional
requirements are “the product capabilities, or things that the product must do for its
users” (Dennis, Wixom and Roth, 2012). Following are the functional requirements of
the project:
• The application must have user registration and login option.
• The application must have registration and sign in option with Facebook API.
• The Application must have a shopping cart for ordering foods.
• The application must have admin registration and login system.
• The application must have password recovery system with email address for
users and admins.
• The application must have menu add and edit options for admin.
4.1.2. Non-Functional Requirements

International Institute of Business Analysis (IIBA) defines non-functional
requirements as “the quality attributes , design, and implementation constraints, and
external interfaces which a product must have” (Dennis, Wixom and Roth, 2012).
Following are the non-functional requirements of the project.
• The application must have a user interface.
31
• The user interface must be mobile-friendly.
• Exception handling methods must be used.
• Users should get confirmation and warning message.
4.2. Process Modelling

Process modelling is used in a project to depict the processes of data in an application.
The restaurant application will be developed and implemented using Model-View-
Controller (MVC) design pattern. This processes are mostly implemented as business
logic in application controllers. There are different tools for process modelling in
SSADM. Context diagram and data flow diagram will be used to model the processes
of the system.
4.2.1. Context Diagram (CD)

Context diagrams define “how the business process or computer system interacts with
its environment” (Dennis, Wixom and Roth, 2012). Context diagrams are used early
in a project to describe the entities of the system. It shows the external entities and
data flows into and out of the system. The processes and data stores are not shown in
context diagram. It will be shown in data flow diagram.
Menu list
Confirmation
Order list Admin
Updated menu list
Menu request Request menu list

Food order Details of new menu
Login request Restaurant System Request for order list
Adding menus to cart Menu update request
Cart items list

User information
User Confirmation
Menu list
Figure 5: Context diagram of the system.
32
The above context diagram shows the processes of two entities, User and Admin, with
the restaurant system. Both of the entities have four processes with the system.
4.2.2. Data Flow Diagram (DFD)

This is a data flow diagram (DFD), which shows the process of ordering food through
online restaurant system. The oval shape means an entity or user. The boxes in the
middle of the diagram are process box. The process box shows the number of process
and its description. The boxes in the right side of diagram are data store.
The box represents when a piece of data is stored. The between the boxes and oval
shape shows the flow of data. The main purpose of a DFD is to show the flow of data
while doing a process. Figure 6 shows the DFD of ordering foods process for users.
33
1 System
User
Menu Details
Check Available
Menus
Available Menus D1 Menus
2 System
Check User Status User Details
D2 Users
Valid Info
3 System
Cart Items
Add Menus to Cart

D3 Cart
Valid Info
4 System Cart items
Order Details
Payment
D4 Order
Figure 6: DFD of processes of customer for ordering food.
Process 1 shows that whenever a visitor request the menus page, the system makes a
query in the menu table of the database and acquires available menus and returns the
menu list to visitor. If visitor likes to add any menu the menu list (shopping cart), s/he
hits “Add to Menu” button. Then in Process 2, the systems checks if the user is logged
in. If the user is not logged in, the system requests user to log in by redirecting
him/her to the log in page. After getting user’s credential, the system compares the
credential against the user database. In Process 3, if the user credential matched with
the credentials saved in User table in database, the system adds the menu to Cart table
34
and redirects to the cart page. In Process 4, if user orders the menu, the order details
saved in the Order table.
1 System
Admin
Admin information
Check Admin
Credentials
D1 Admins
2 System
Get All Menu Menu Details

Information
D2 Menus
3 System
Updated Data
Update Menu
Delete Request
4 System
Delete Menu
New Menu
Admin
5 System
Add Menu
Figure 7: DFD for processes of Admin.
35
Figure 7 illustrates the processes of admin in for manipulating Menus table of the
database. There are five processes for admin in this application. Process 1 depicts the
login of admin to the system. When admin gives credentials and send login request to
system, the system checks the credentials against the Admins table of the database and
gives access. Process 2 illustrates the acquisition of available menu list for admin. In
Process 3, the update process of menu has been depicted. In Process 4, deletion of
menu has been illustrated. In Process 5, adding process of new menu is shown.
4.3. Data Modelling

4.3.1. Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) is a visual presentation which “facilitates

database design by allowing specification of an enterprise schema that represents the
overall logical structure of a database” (Korth, Sudarshan and Silberschatz, 2010).
The following ERD illustrates the database design for restaurant application.
Admin
P
id
K
name Facebook
CartItem
email Cart P
P user_id
id K
K
P
password id
K provider_user_id
cart_id
role user_id provider
menu_id
remember_token created_at created_at
created_at
created_at updated_at updated_at
updated_at
updated_at
Users
P
id
K
rememberToken
created_at Menu
updated_at P
id
K
name Category name
email P
id description
K
password
name category
provider_id
created_at image
rememberToken
updated_at price
created_at
created_at
updated_at
updated_at
36
Figure 8: Entity relationship diagram of the system.
The crow foots shows the links between entities. A line with crowfoot in one side and
normal line in another side means many-to one or one-to- many relationship. The
ERD shows that, there is not any relationship between admin table and other tables in
the database. User table has relationship with Facebook and Cart tables. The Menu
table has a relationship with CartItem and Category tables. The Cart table has a
relationship with CartItem and User tables.
4.4. User Interface Design

As specified earlier, the user interface of the system should be responsive. So, the
interface can adopt any screen size. As the system can be accessed by devices with
large screen (e.g. desktop computer, smart television browser) as well as devices with
small screen (e.g. smart phone, tablet), every page of the application is designed for
two types of screen differently.
Figure 9: Difference of screen layouts for different size of screens (Tan, 2013).
4.4.1. Homepage
The homepage is the index page of the application. This is the page that is shown to
visitor when s/he accessed the website through URL. Figure 10 illustrates the layout
of the homepage in large screen.
37
Figure 10: Homepage layout.
The homepage of the application consists of a menu bar with company name, a
Jumbotron, featured food item and footer. The login and registration links appear in
the top right side of the menu bar, if the user is logged in. If the user is logged in,
there will be dropdown button for logging out with displaying the username.
38
Figure 11: Home page layout for small screen.
The homepage layout will change when someone visits the website from a smaller
screen. When the website is visited from a device with small screen, the menu bar is
toggled under a button. If the toggle button pressed, the menu bar comes out in
stacked manner. The header and footer layout is constant for all of the pages of the
site.
4.4.2. Menu List

The purpose of menu list page is to display all of the menu items to visitors. The page
shows the list of the menus with image and price. Visitors can add menus to cart from
this page or can view the details of the menu. Figure 12 shows the layout of the menu
in large screen.
39
Figure 12: Menu list page layout.
When this page appears in a small screen, the layout of the page will change to show
the page to viewers more effectively. Figure 13 shows the changes of the menu list
page when it appears in a small screen.
40
Figure 13: Menus page layout for small screen.
4.4.3. Menu Details Page

When a user clicks on a menu, it will load the details of the menu in a page. The menu
details page contains image, name, price and description of food menu. Users can add
menu to cart from this page.
41
Figure 14: Menu details page layout.
As Figure 14 shows, Facebook and Twitter share button will be shown in this page.
Facebook comments are shown in bottom left of the page. On the other hand, Figure
15 shows the layout of the menu details page in small screen. The layout is drastically
changes in small screen as there are too many buttons for social media sharing and
adding menu to cart.
42
Figure 15: Menu details page layout for small screen.
43
5. Implementation
This chapter provides an overview of the implementation process. In first, the
implementation of the frontend part is described. After that, different backend
functionalities have been discussed and evaluated.
5.1. Views
The user interface of the application is responsive. So, the interface can occupy the
full screen in any kind of device. For making the user interface of the application
mobile friendly, Bootstrap 4 is used. Laravel uses blade templating engine for making
views and presentation layer of applications. Blade templating engine is used to
develop and present the views. There is a main frontend view is developed, which has
been extended for different views of different pages. The following code snippet
shows the main view of the application.
<!DOCTYPE html>
@include('layouts.header')
<body>
@include('layouts.navbar')
@yield('content')
@include('layouts.footer')
</body>
</html>
Snippet 1: Main view.
We can see that the main view extends and includes three other views which are
header, navbar and footer. The header file is the HTML header files, which contains
metatags of page. The navbar blade contains the navigation bar of the application. The
footer blade contains the footer of the application. The footer blade also contains
some JavaScript files needed for the application. For example, it contains the
JavaScript file for connecting to Facebook API.
The following code snippet shows the header blade. The header blade contains the
metatags and CSS links.
44
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title> @yield('title')</title>


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">


<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<style>
body {
padding-top: 60px;
}
</style>
</head>
Snippet 2: Codes of header file.
5.1.1. Home Page

The home page of the application consists featured foods. Users can go to other parts
of the application through this page.
Figure 16: Homepage of the application.
45
The page can be viewed in any kind of devices. The following image shows the view
of the page in a smart phone screen.
Figure 17: Homepage of the application in small screen.
5.1.2. Menu List

The menu list page contains the list of all menus with the price and descriptions.
Figure 18: Menu list page of application.
46
The view of the page in a mobile screen is as below;
Figure 19: Mobile view of menu list page.
5.1.3. Menu Detail Page

Another function we have added to the application single product pages. This
dynamic single product page shows the information about the product with image.
This makes the application more powerful and user-friendly.
Figure 20: Menu details page.
47
As we can see that, the pages of the application is responsive.
5.2. Implementation of Cart

Another feature of our application is shopping cart. User can add products to cart and
order before checking out from the website. To make that, two controllers have been
made to calculate the price of products and show subtotal and total. The cart shows all
of the products user added to cart and their prices and quantity. User can add or
subtract product quantity or remove the products by clicking on buttons. Whenever
the user add or subtract any product, he or she can see the subtotal and total of cost.
Whenever a user tries to add product to the cart the authentication is checked against
auth middleware. So, a construct function is made in the Cart Controller.
public function __construct()
{
$this-
>middleware('auth');
}
Snippet 3: The construct function for authentication.
For adding the product into cart and showing the subtotal of the product another
function is added.
public function store(Request $request, $item)
{
$menu = Menu::find($item);
$cartItem = Cart::add([
'id' => $menu->id,
'name' => $menu->name,
'qty' => 1,
'price' =>$menu->price
]);
Cart::associate($cartItem->rowId, 'App\Menu'); // Display an image to
cart Page
Session::flash('status', 'Product added to cart');
return redirect('/cart');
}
Snippet 4: Function for adding product to cart.
Whenever a user adds any product to cart, the system is redirected to cart page where
all of the products are available. Users can remove items from the cart.
48
public function destroy($id)
{
Cart::remove($id);
Session::flash('status', 'Product removed from cart');
return redirect()->back();
}
Snippet 5: Remove item from the cart.
5.3. Facebook API Integration

For using Facebook Graph API, a developer account is needed which helps in creating
Facebook app. The Facebook app consists of a secret token for every app. This secret
token is also saved in the application that needs to connect to Facebook. Whenever
Facebook receives any HTTP request from Facebook, it checks the secret token. If the
token matches Facebook allows the app to use its functionality. For this purpose, a
new service is generated in service.php file that contains the credentials needed for
interacting with Facebook.
'facebook' => [
'client_id' => '161117594497266',
'client_secret' => 'efdbdf78fe1a9dccd3053c0af6f9de76',
'redirect' => 'http://localhost:8000/callback',
],
Snippet 6: Service for Facebook credentials.
Some new functions have been added in Login Controller to handle the login with
Facebook function. It checks if a user is in User table. If there is not any user, it
creates a new user using Facebook credential. If the user exists, it lined the Facebook
account the User table through provider_id field.
49
public function redirectToFacebook()
{
return Socialite::driver('facebook')->redirect();
}
/**
* Return a callback method from facebook api.
* @return callback URL from facebook
*/
public function callback()
{
$user = Socialite::driver('facebook')->user();
$authUser = $this->findOrCreateUser($user);
Auth::login($authUser, true);
return redirect('/');
}
public function findOrCreateUser($user)
{
$account = Facebook::whereProvider('facebook')
->whereProviderUserId($user->getId())
->first();
if ($account) {
return $account->user;
} else {
$account = new Facebook([
'provider_user_id' => $user->getId(),
'provider' => 'facebook'
]);
$user = User::whereEmail($user->getEmail())->first();
if (!$user) {
$user = User::create([
'email' => $user->getEmail(),
'name' => $user->getName(),
]);
}
$account->user()->associate($user);
$account->save();
return $user;
}
}
Snippet 7: Functions for handling Facebook Login.
On the other hand, JavaScript code have been used to handle the Facebook like and
share. The code is provided by Facebook API. The snippet of the code needs to be
pasted in the desired location of the view file.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '161117594497266',
xfbml : true,
version : 'v2.11'
50
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Snippet 8: JavaScript code for adding Facebook like & share button.
51
6. Testing
This chapter elaborates the test process of the application and shows the result of
testing.
6.1. Black Box Testing

Testing can be divided into two types broadly: functional testing and structural
testing. Structural testing, also known as white-box testing, involves examining the
internal implementation. It tests the design used by the implementation to verify it
correctness. In contrast, Functional testing, sometimes referred to black box testing, is
testing on the functionality of the system based on the specified requirement. The test
itself has little knowledge about the testing target’s internal structure. The following
table shows the test cases for black box testing.
Table 3: Test cases for black box testing.
Test Test Case Test Steps Expected Actual Pass/

Code Result Result Fail
Test Check Facebook 1. Go to The window As Pass

1 login functionality registration is redirected expected
with logged in page to Facebook,
Facebook user then to
2. Click on “Login homepage
with Facebook” with showing
button the Facebook
timeline name
on the top
right of the
bar. The
name and
details also
saved in
database.
52
Test Check Facebook 1. Go to The window As Pass
2 login functionality registration is redirected expected
with non-logged in page homepage
Facebook user with showing
2. Click on “Login the Facebook
with Facebook” timeline name
button on the top
right of the
3. Enter Facebook bar.
username and
password on the
next page
4. Press sign in
button
Test Check adding to 1. Go to any menu The user is As Pass

3 cart functionality details page redirected to expected
for logged in user cart page
2. Click on add to where the
menu button subtotal and
total price
shown.
Test Check adding a 1. Go to any menu The user is As Pass

4 menu twice to cart details page redirected to expected
cart page
2. Click on add to where the
menu button updated
subtotal and
3. Get back to total price
menu page shown.
4. Add the same
menu to cart
53
Test Add new menu into 1. Fill up the add A As Pass
5 database menu form confirmation expected
message will
2. Press add button be shown.
New menu
added to
database. The
image of the
menu
uploaded to
images folder
with menu
name.
Test Edit existing menu 1. Navigate to The menu As Pass

6 menu index description expected
page should be
changed in
2. Click edit menu menu page
and admin
3. Change existing menu list.
value
4. Click update
6.1.1. Test 1
Go to registration page and click on “Login with Facebook” button. The window
should redirected to Facebook, then to homepage with showing the Facebook timeline
name on the top right of the bar.
54
Figure 21: Facebook login successful.
6.1.2. Test 2
As the user is not logged in, when s/he presses on “Login with Facebook” button the
page will be redirected to Facebook login.
Figure 22: Redirected Facebook login page.
After submission of correct credentials for Facebook, the page will be redirected to
the homepage with logged in user.
55
Figure 23: Successful login with Facebook.
6.1.3. Test 3
When a logged in user added a menu to menu list, the page should be redirected to the
cart page with correct subtotal and total.
Figure 24: Showing total for one menu.
6.1.4. Test 4
Whenever multiple menus added, the changes should be shown in the total price.
56
Figure 25: Total of multiple menus.
6.1.5. Test 5
The admin filled in the new menu form with information of a new product and
pressed add menu button.
Figure 26: New information inputted in form.
After submission a confirmation message has shown up.
57
Figure 27: Confirmation message after upload new product.
The new menu is shown in the menu table in database.
Figure 28: New menu (Coca Cola) shown in database.
The image of the new menu should be uploaded to the images folder directory.
58
Figure 29: The image of the new menu uploaded to the folder.
Finally, the menu list is updated with proper information.
Figure 30: New menu in the menu list page.
59
6.1.6. Test 6
The admin navigated to the index of menu page and pressed edit button for Coca
Cola.
Figure 31: Menu list page.
Then the product price has been changed from 20 to 30.
60
Figure 32: Product price is edited.
The menu price has been updated for the product.
61
Figure 33: Update of product price in menu list page.
6.2. Search Engine Optimisation (SEO) Testing

There are different types of tools which automates testing processes and give result
about the application. Lighthouse is open-sourced tool made by Google for web
applications which can be used to test Search Engine Optimisation (SEO)
Compatibility of web application (Google, 2017). Search Engine Optimisation (SEO)
is a very important for web applications. A well-designed application for SEO can be
found in search engine more easily and accurately. Lighthouse provides a SEO testing
system for web applications and gives suggestion about potential problem.
Figure 34: SEO test result by Lighthouse.
Figure 34 shows that the restaurant app passed 7 tests out of 8 tests. The test result
shows that the metadata for page is not used in header section of the page which may
cause inappropriate result in search engine. The application gets overall 88 percent
marks.
6.3. User Acceptance Testing

User acceptance testing of the application is used to determine if the application meets
the requirements of focused people. For user acceptance testing, random selection
process is used. A questionnaire is made to obtain user evaluation of the system. The
questionnaire consists of five question, which are set to gain user perspective on the
ease of use, user friendliness, and responsiveness of UI and performance of the
application. The answers have been taken anonymously from 20 random persons. The
questionnaire can be found in Appendix B.
62
6.3.1. Ease of use
The first question of the questionnaire is for addressing the ease of use of the system.
Figure 35 illustrates the result of this question.
Figure 35: Ease of use of the application.
As the bar chart shows, 11 persons of 20 is ticked that the application is very easy and
5 found the application is moderately easy. Only 4 persons found the application is
slightly easy or not at all.
6.3.2. User Friendly

The pie chart in Figure 36 illustrates the percentage of views of respondents on user
friendliness of the application. Half of all respondents agreed that the system is
moderately user friendly and 35% of them found the system very user friendly. So, it
can be said that the website is user friendly. But there is a room for improvement as
15% of respondents do not find it so much user friendly.
63
Figure 36: Percentage of views on user friendliness.
6.3.3. Responsiveness of Interface
The responsiveness of UI means that the website UI is optimised properly for

different size of screens. The following donut pie chart shows that all respondent
found the website responsive. But there are many issues to improve the
responsiveness of the UI as 45% of respondent faced problem with their device.
64
RESPONSIVNESS OF UI
Yes No Have isues
45%
55%
0%
Figure 37: Percentage of views on responsiveness.
There can be many issues that can make problem in responsiveness. It has been tried
to find some of them. Who have problem with UI of the website, their screen size data
collected and analysed. The result is shown in the bar chart in Figure 38.
Screen Size
8
0
5 inch or more Below 5 inch
65
Figure 38: Screen size of devices facing problem with UI.
We can see, most of respondents who face problem in responsiveness use a device
with a screen smaller than 5 inch. So, UI should be optimised for smaller screens.
6.3.4. Speed & Performance

The pie chart in Figure 39 illustrates the percentage of satisfaction with speed and
performance of the system.
10
8
Very Satisfied
6 Moderatly Satisfied
Slightly Satisfied
4
Not at All
2
Figure 39: Satisfaction about speed and performance.
According to pie chart, 47% of respondent is very satisfied with the performance and
speed and 32% of respondent is moderately satisfied with the system.
66
7. Results & Evaluations
This chapter provides an overview of the project and its outcomes. The outcomes of
the project also is also analysed and evaluated.
7.1. Security of the System

Security is one of the most important thing for a web application, especially if the
system contains transection and user personal data. As it is an online food ordering
system, transactions will be made through the app and the application also saves the
different kind of personal information. In regards of ensuring the security of the
application different techniques have been used. For ensuring the security of the
password, default hashing function of Laravel has been used. Laravel handles all the
passwords by encrypting and decrypting automatically, which has been hashed based
on the secret key of the application. One the biggest problem for web applications is
Cross-site request forgery (CSRF) attack. CSRF is a type of malicious exploit
whereby unauthorized commands are performed on behalf of an authenticated user
when s/he clicked on malicious link. Laravel automatically generates a CSRF "token"
for each active user session managed by the application. This token is used to verify
that the authenticated user is the one actually making the requests to the application.
Anytime a HTML form in the application is defined, a CSRF hidden token field is
included in the form so that the default CSRF protection middleware of Laravel can
validate the request.
7.2. Responsive User Interface

The responsiveness of the application in any kind of screen was a big requirement for
the system. In regards of achieving this objective, Bootstrap 4 front end framework
has been used to develop the user interface of the system. This enables the UI of the
application to glue any kind of screen whether it be smart phone, tablet PC, laptop or
desktop PC. It also responsive for the proximity of the device. The application
interface matches the size of the device automatically whether it is kept horizontally
or vertically. Bootstrap 4 also reorganise the elements of the page based on the screen
size.
7.3. Facebook API Integration

According to Statista, a Hamburg based leading statistics company, Facebook is the
most popular social website by number of active users (Statista, 2017). On the other
hand, it has been explained based on the different studies that integration of social
media online buying portals increase the trust of the users on the website. The
comments and likes of friends and other relatives on social media influence people to
order online. Hence, Facebook API has been added to menu details pages. Users can
67
like, share and comment through Facebook social media plugin. The like button
shows the friend names of user who liked the menu previously. Users can directly
share the menu in personal timeline by clicking on the share button or can comment to
express their thought about the menu. This helps the management about the
impression of the food menu on the users. Then, the management can take steps to
improve the quality of the food.
The integration of Facebook API also helps the management in keeping track of users
and get different kinds of insights about the users. As the developed restaurant
application has not any in-app business intelligence tool, the Facebook analytics can
give the management a good overview of the online customers. In-app analytics
application development can make expand the length of the project. But it is good tool
for management. Restaurant owners can make decisions more informatively if they
have a business intelligence. The lacking of in-app business analytics tool can be
minimised by utilising the Facebook analytics tool.
Figure 40: Facebook analytics page for the restaurant application.
The Facebook API also eased user registration and login process. New users can
register for ordering food by tapping one button. New users do not need to fill up
registration form which is a boring thing for most people. On the other hand, existing
users can login by pressing one button.
7.4. Social Sharing Options

Different social media sharing options are implemented in the system. The users can
twit about the food menus in Twitter, like and share them in Facebook. Users can also
make comments on the food items page to express their review on the food item.
68
Whenever a user uses Facebook or Twitter for sharing food menus, their friends and
followers can know about the restaurant. As they know the restaurant through their
friends, they will feel trust about the quality of the restaurant.
69
8. Conclusions and Recommendations
This chapter concludes the report of this project. This chapter starts with discussing
the achievements of this project. Following that, it describes the limitations in the
system. It then proposes and recommends some features to be added to the system.
Finality, the chapter ends by concluding remarks.
8.1. Achievement of the Project

The project has gone through a series of activities to develop a complex solution for
the online food ordering system. After analysis of the project’s goal and research
direction, a set of objectives were established, as specified in Chapter 1.2. All the
activities done during the project were attempts to realise these objectives. At the end
of the project, the developed prototype software has fulfilled these objectives by the
following means:
• Objective #1 was satisfied by reviewing the past works for automating the
restaurant food ordering process. Along with this, the web application
development technologies is briefly discussed.
• Objective #2 was addressed by utilising Extreme Programming method of

Agile Development. Along with this, SSADM tools are used to analyse and
design the system.
• Objective #3 was satisfied by developing the system with Laravel 5.4 and
Bootstrap 4.
• Objective #4 was satisfied by integrating Facebook API to the system.
• Objective #5 was addressed with various testing approaches to ensure the

prototype system is as robust as possible.
The project was time-consuming. It has been tried to implement as many features as
possible within the very limited timeframe. It has successfully satisfied the Functional
Requirements. Some Non-functional Requirements of the system is not implemented.
These requirements have top priority and reflect the most needed features. Some
requirements are not implemented due to time constraints. However, their absence
would not result in major operational issues as they are the lower priority features.
These features could be implemented in the future.
70
8.2. Limitations of the System
There are also some limitations of the system. The shopping cart of the system has
basic functionalities and does not support advanced cart modification features. Along
with this, validation functionalities and almost all functionalities of the application are
handled with server side programming. It makes extra load on the server, especially
when the application gets lots of viewers. This limitation can be minimised by
validating data using client side language like JavaScript or HTML 5. Along with this,
the order model has been developed. But the controllers and functions for pushing
data into order table is not written. So, the placed orders cannot be viewed.
8.3. Future Recommendations

In addition to the unfinished requirements, there are other possibilities of further
improving the project. The respondent of user acceptance testing also suggest some
improvement ideas. The improvements may include:
• Overcoming the limitations mentioned in the Section 7.3.
• Secured payment system with various payment methods.
• Presenting graphical floor plan for table management and reservation.
• Adding support for food order delivery tracking.
• Advanced inventory control with material storage and expiry information.
• Managing customer loyalty membership and discount voucher.
• Converting the system to progressive web application.
8.4. Personal Reflection

I have gained some experiences and developed skills through the project. I also
became aware of some aspects which needs improvements.
8.4.1. Acquiring Research Skills

The literature review chapter required reviewing lots of journal articles and research
papers. By reading and reviewing journal articles, I have gained some knowledge
about how to write a journal paper in a structured way and how a research is
conducted. It also improved my presentation skills. I also become aware of my
lacking on researching which should be improved to be a better researcher.
71
8.4.2. Acquiring Programming Skills
To develop the application, I have to learn Laravel and Bootstrap. Learning Laravel
made my concept about object oriented programming clearer. I have also gained
some experiences on problem solving skills, as sometimes I had to brainstorm, search
and think for two or three days to solve a piece of code that was not working.
Sometimes it comes out a silly problem. Along with this, I was not good in
developing user interface.
8.5. Concluding Remarks

This project is for developing a web application for restaurant. For developing the
application, a systematic approach has been taken into account. Extreme
Programming method of Agile development has been applied to develop the system.
Along with this, SSADM has been used for modelling processes and data. The
application has been developed using Laravel 5.4 PHP framework.
The project successfully implemented a working complex prototype of an online food

ordering system with Facebook integrations. The implemented prototype software has
been fully tested to demonstrate the quality and performance of the system. This
report also documented all the relevant research details and decision-makings
processes. In summary, the project has satisfied its objectives and fulfilled its purpose.
I hope, the application can meet most of the requirements of restaurant online
ordering.
72
9. Bibliography
Alagoz, S. M. and Hekimoglu, H. (2012) ‘A Study on Tam: Analysis of Customer
Attitudes in Online Food Ordering System’, Procedia - Social and Behavioral
Sciences, 62, pp. 1138–1143. doi: 10.1016/j.sbspro.2012.09.195.
Bean, M. (2015) Laravel 5 Essentials. Packt Publishing Ltd.
Beltis, A. J. (2016) 9 Advantages of an Online Food Ordering System. Available at:

https://pos.toasttab.com/blog/online-food-ordering-system (Accessed: 7 July 2017).
Ben-Zahia, M. A. and Jaluta, I. (2014) ‘Criteria for selecting software development

models’, in. 2014 Global Summit on Computer Information Technology (GSCIT), pp.
1–6. doi: 10.1109/GSCIT.2014.6970099.
Bhaumik, S. (2015) Bootstrap Essentials. Birmingham, UK: Packt Publishing.
Bounnady, K. et al. (2016) ‘Comparison the processing speed between PHP and
ASP.NET’, in. 2016 13th International Conference on Electrical
Engineering/Electronics, Computer, Telecommunications and Information
Technology (ECTI-CON), pp. 1–5. doi: 10.1109/ECTICon.2016.7561484.
Cheong, S. N., Chiew, W. W. and Yap, W. J. (2010) ‘Design and development of

Multi-touchable E-restaurant Management System’, in. 2010 International
Conference on Science and Social Research (CSSR 2010), IEEE, pp. 680–685. doi:
10.1109/CSSR.2010.5773867.
Das, R. and Saikia, L. P. (2016) ‘Comparison of Procedural PHP with Codeigniter

and Laravel Framework’, International Journal of Current Trends in Engineering &
Research, 2(6).
Dawson, C. W. (2009) Projects in Computing and Information Systems: A Student’s

Guide. Addison-Wesley.
Dennis, A., Wixom, B. H. and Roth, R. M. (2012) Systems Analysis and Design. 5th
Editon. John wiley & sons.
Dhore, V. B. et al. (2014) ‘Digital Table Booking and Food Ordering System Using
Android Application’, International Journal of Emerging Engineering Research and
Technology, 2(7), pp. 76–81.
Dockins, K. (2016) Design Patterns in PHP and Laravel. Apress.
73
Gayatri, P. V., Chaitanya, J. K. and Harikrishna, K. (2014) ‘Developing an Intelligent
e-Restaurant with a Menu Recommender for Customer-Centric Service using Wi-Fi
Technology’, International Journal of Computer Applications, 101(16).
Gerchev, I. (2017) ‘The 5 Most Popular Frontend Frameworks Compared’, SitePoint,

17 May. Available at: https://www.sitepoint.com/most-popular-frontend-frameworks-
compared/ (Accessed: 29 January 2018).
Gilmore, W. J. (2015) Easy Laravel 5 : A Hands On Introduction Using a Real-World

Project. Leanpub. Available at: http://www.easylaravelbook.com/ (Accessed: 27
December 2017).
Google (2017) Lighthouse, Google Developers. Available at:

https://developers.google.com/web/tools/lighthouse/ (Accessed: 2 January 2018).
Gould, H. (2016) Systems Analysis and Design. 1st Edition. BookBoon. Available at:
http://bookboon.com/en/systems-analysis-and-design-ebook (Accessed: 30 December
2017).
Hayder, H. (2007) Object-Oriented Programming with PHP5. Packt Publishing Ltd.
Hongzhen, X. U., Bin, T. and Wenlin, S. (2009) ‘Wireless food ordering system based
on web services’, in Intelligent Computation Technology and Automation, 2009.
ICICTA’09. Second International Conference on. IEEE, pp. 475–478.
Jailia, M. et al. (2016) ‘Behavior of MVC (Model View Controller) based Web
Application developed in PHP and .NET framework’, in. 2016 International
Conference on ICT in Business Industry Government (ICTBIG), pp. 1–5. doi:
10.1109/ICTBIG.2016.7892651.
Jakobus, B. and Marah, J. (2016) Mastering Bootstrap 4. Packt Publishing Ltd.
Jound, I. and Halimi, H. (2016) Comparison of performance between Raw SQL and
Eloquent ORM in Laravel. Blekinge Institute of Technology. Available at:
http://www.diva-portal.org/smash/get/diva2:1014983/FULLTEXT02 (Accessed: 12
December 2017).
K, S. R. et al. (2016) ‘An Online Food Court Ordering System’, Journal of

Information Technology & Software Engineering, 6(4), pp. 1–3. doi: 10.4172/2165-
7866.1000183.
Kimes, S. E. (2011) ‘The current state of online food ordering in the US restaurant
industry’, Cornell Hospitality Report, 11(17), pp. 6–18.
74
Korth, H. F., Sudarshan, S. and Silberschatz, A. (2010) Database System Concepts.
McGraw-Hill Education.
Kothari, C. R. (2004) Research Methodology: Methods and Techniques. New Age

International.
Lambert, M. (2016) Learning bootstrap 4. Birmingham, UK: Packt Publishing Ltd.
Lei, K., Ma, Y. and Tan, Z. (2014) ‘Performance Comparison and Evaluation of Web
Development Technologies in PHP, Python, and Node.js’, in. 2014 IEEE 17th
International Conference on Computational Science and Engineering, pp. 661–668.
doi: 10.1109/CSE.2014.142.
Leong, W. H. (2016) Food Ordering System Using Mobile Phone. University Tunku
Abdul Rahman. Available at: http://eprints.utar.edu.my/1943/1/IA-2016-1203135-
1.pdf (Accessed: 12 January 2018).
McFarlin, T. (2017) ‘WordPress Templates for Beginners: What’s Templating,

Anyway?’, Tom McFarlin, 8 November. Available at:
https://tommcfarlin.com/wordpress-templates-3/ (Accessed: 26 January 2018).
Ngai, E. W. T., Suk, F. F. C. and Lo, S. Y. Y. (2008) ‘Development of an RFID-based

sushi management system: The case of a conveyor-belt sushi restaurant’,
International Journal of Production Economics. (Special Section on RFID:
Technology, Applications, and Impact on Business Operations), 112(2), pp. 630–645.
doi: 10.1016/j.ijpe.2007.05.011.
Oddle (2016) 2016 Restaurant Industry Statistics That Made The Industry Tick,
Oddle. Available at: https://oddle.me/blog/2016/12/29/2016-restaurant-industry-
statistics-that-made-the-industry-tick (Accessed: 7 July 2017).
Olanrewaju, R. F., Islam, T. and Ali, N. (2015) ‘An empirical study of the evolution
of php mvc framework’, in Advanced Computer and Communication Engineering
Technology. Springer, pp. 399–410.
Otwell, T. (2018a) Blade Templates, Laravel Documentation. Available at:

https://laravel.com/docs/5.5/blade (Accessed: 26 January 2018).
Otwell, T. (2018b) Eloquent, Laravel Documentation. Available at:

https://laravel.com/docs/5.4/eloquent (Accessed: 22 January 2018).
Otwell, T. (2018c) Hashing, Laravel Documentation. Available at:

https://laravel.com/docs/5.4/hashing (Accessed: 2 January 2018).
75
Parr, T. J. (2004) ‘Enforcing strict model-view separation in template engines’, in
Proceedings of the 13th international conference on World Wide Web. ACM, pp.
224–233.
Patel, K. J., Patel, U. and Obersnel, A. (2007) ‘PDA-based wireless food ordering
system for hospitality industry; A case atudy of Box Hill Institute’, in. 2007 Wireless
Telecommunications Symposium, pp. 1–8. doi: 10.1109/WTS.2007.4563314.
Patel, M. (2015) Online Food Order System for Restaurants. Master’s thesis. Grand
Valley State University. Available at: https://scholarworks.gvsu.edu/cistechlib/219/
(Accessed: 27 January 2018).
Saeed, H. et al. (2016) ‘Near-field communication sensors and cloud-based smart

restaurant management system’, in 2016 IEEE 3rd World Forum on Internet of
Things (WF-IoT). 2016 IEEE 3rd World Forum on Internet of Things (WF-IoT), pp.
686–691. doi: 10.1109/WF-IoT.2016.7845440.
Samsudin, N. A. et al. (2011) ‘A customizable wireless food ordering system with

realtime customer feedback’, in Wireless Technology and Applications (ISWTA), 2011
IEEE Symposium on. IEEE, pp. 186–191.
Shankararaman, V. and Lum, E. K. (2013) ‘Integration of Social Media Technologies

with ERP:A Prototype Implementation’, AMCIS 2013 PROCEEDINGS, p. 11.
Shinde, R. et al. (2014) ‘Design and Implementation of Digital dining in Restaurants

using Android’, International Journal of Advance Research in Computer Science and
Management Studies, 2(1).
Smith, A. and Wempen, F. (2011) CompTIA Strata Study Guide Authorized

Courseware: Exams FC0-U41, FC0-U11, and FC0-U21. John Wiley & Sons.
Statista (2017) Global social media ranking 2017, Statista. Available at:
https://www.statista.com/statistics/272014/global-social-networks-ranked-by-number-
of-users/ (Accessed: 2 January 2018).
Sullivan, K. (2015) The History of Restaurant POS Systems, Toast. Available at:
https://pos.toasttab.com/blog/the-history-of-restaurant-pos-systems (Accessed: 22
October 2017).
Surguy, M. (2014) Laravel: My First Framework. Leanpub. Available at:

http://www.furqanfreed.com/wp-content/uploads/2016/05/laravel-first-framework.pdf
(Accessed: 27 December 2017).
Tan, C. L. (2013) Implementing a Web-Based Computerized Restaurant System.

Master’s thesis. University of Manchester. Available at:
76
https://studentnet.cs.manchester.ac.uk/resources/library/thesis_abstracts/MSc13/FullT
ext/Tan-ChinLoong-fulltext.pdf (Accessed: 29 December 2017).
Tan, T.-H., Chang, C.-S. and Chen, Y.-F. (2012) ‘Developing an intelligent e-
restaurant with a menu recommender for customer-centric service’, IEEE
Transactions on Systems, Man, and Cybernetics, Part C (Applications and Reviews),
42(5), pp. 775–787.
Tatsubori, M. and Suzumura, T. (2009) ‘HTML templates that fly: a template engine
approach to automated offloading from server to client’, in Proceedings of the 18th
international conference on World wide web. ACM, pp. 951–960.
The PHP Group (2018) What is PHP?, PHP Official Website. Available at:
http://php.net/manual/en/intro-whatis.php (Accessed: 22 January 2018).
W3Techs (2018) Usage Statistics and Market Share of Server-side Programming

Languages for Websites, W3Techs. Available at:
https://w3techs.com/technologies/overview/programming_language/all (Accessed: 22
January 2018).
Xiang, Y., Zhou, W. and Chowdhury, M. (2004) ‘Toward pervasive computing in

restaurant’, in ICETE 2004: Proceedings of the First International Conference on E-
Business and Telecommunication Networks. Institute for Systems and Technologies of
Information, Control and Communication, pp. 312–317.
77
10. Appendices
10.1. Appendix A: Code Snippets
<?php
namespace App\Http\Controllers\AdminAuth;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
//Class needed for login and Logout logic

use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Auth;
class LoginController extends Controller

{
protected $redirectTo = '/admin_dashboard';
//protected $redirectAfterLogout = '/admin_login';
//Trait
use AuthenticatesUsers;
protected function guard()

{
return Auth::guard('admin');
}
//
public function showLoginForm()
{
return view('admin.login');
Snippet 9: Admin Login Controller

<?php
use App\Admin;
//Auth Facade used in guard

use Auth;
//Validator facade used in validator method

use Illuminate\Support\Facades\Validator;
class RegisterController extends Controller

{
78
protected $redirectPath = 'admin_dashboard';
public function showRegistrationForm()

{
return view('admin.register');
}
public function register(Request $request)

{
//Validates data
$this->validator($request->all())->validate();
//Create seller
$admin = $this->create($request->all());
//Authenticates seller
$this->guard()->login($admin);
//Redirects sellers
return redirect($this->redirectPath);
}
//Validates user's Input

protected function validator(array $data)
{
return Validator::make($data, [
'name' => 'required|max:255',
'email' => 'required|email|max:255|unique:admins',
'password' => 'required|min:6|confirmed',
]);
}
//Create a new seller instance after a validation.

protected function create(array $data)
{
return Admin::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
'role' => $data['role'],
]);
}

{
}
}
Snippet 10: Admin Registration Controller.

<?php
use App\Menu;
use App\Category;
79
use Illuminate\Support\Facades\Storage;
use App\Http\Controllers\AdminAuth\Session;
use Illuminate\Database\Query\Builder;
class MenuController extends Controller
{

{
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
$menus = Menu::all();
return view('admin.menu.menus', compact('menus'));
}
/**
* Show the form for creating a new resource.
*
*/
public function create()
{
//
$categories = Category::all();
return view('admin.menu.add_menu', compact('categories'));
// echo "Ok";
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
*/
public function store(Request $request)
{
//Setting up imamge saving path

$destinationPath = storage_path('app/public/images');
$extension = $request->file('image')->getClientOriginalExtension();
//Setting up image name while saving

$fileName = $request->name.".".$extension;
$this->validate($request, [
'image' => 'image|mimes:jpg,png,jpeg,gif,svg|max:2048',
80
'name' => 'unique:menus'
]);
//upload the image to the path

$request->file('image')->move($destinationPath, $fileName);
$menu = new Menu;

$menu->name = $request->name;
$menu->price = $request->price;
$menu->description = $request->description;
$menu->category = $request->category;
$menu->image = $fileName;
$menu->save();
// Session::flash('success', 'Event delete successfully!');
return redirect('/menus/create')->with('status', 'Menu successfully
created');
}
/**
* Display the specified resource.
*
* @param \App\Menu $menu
*/
public function show(Menu $menu)
{
//
}
/**
* Show the form for editing the specified resource.
*
*/
public function edit(Menu $menu)
{
//
$categories = Category::pluck('name');
return view('admin.menu.update_menu', compact('menu',
'categories'));
}
/**
* Update the specified resource in storage.
*
*/
public function update(Request $request, $id)
{
$menu = Menu::find($id);
81
if($request->hasFile('image')) {
//Setting up imamge saving path

$destinationPath = storage_path('app/public/images');
$extension = $request->file('image')-
>getClientOriginalExtension();
//Setting up image name while saving

$fileName = $request->name.".".$extension;
$this->validate($request, [
'image' => 'image|mimes:jpg,png,jpeg,gif,svg|max:2048',
'name' => 'unique:menus'
]);
//upload the image to the path

$request->file('image')->move($destinationPath, $fileName);
$menu->image = $fileName;
}
//$menu = new Menu;

$menu->name = $request->name;
$menu->price = $request->price;
$menu->description = $request->description;
$menu->category = $request->category;
$menu->save();
return redirect('/menus/update/'.$id)->with('status', 'Menu
Updated');
}
/**
* Remove the specified resource from storage.
*
*/
public function destroy(Menu $menu)
{
//deleting the image of menu from directory
// if(file_exists(storage_path('app/public/images/').$menu->image)
Storage::delete('public/images/'.$menu->image);
//delete the menu from database

Menu::destroy($menu->id);
return redirect('/all_menus');
}
}
Snippet 11: Admin Menu Controller
82
<?php
namespace App\Http\Controllers;
use App\Menu;
use Session;
use Cart;
class CartController extends Controller

{
public function __construct()
{
$this->middleware('auth');
}
/**
*
*/
{
//
return view('cart');
}
/**
* Store a newly created resource in storage.
*
*/
public function store(Request $request, $item)
{
//
$menu = Menu::find($item);
$cartItem = Cart::add([
'id' => $menu->id,
'name' => $menu->name,
'qty' => 1,
'price' =>$menu->price
]);
Cart::associate($cartItem->rowId, 'App\Menu'); // Display an image
to cart Page
Session::flash('status', 'Product added to cart');
return redirect('/cart');
}
/**
* Update the specified resource in storage.
*
* @param int $id
*/
public function update(Request $request, $id)
83
{
//
//dd($qty);
dd($id);
// dd($id);
break;
//$r = Cart::update($id, $request->qty);
Session::flash('status', 'Product quantity updated');

/**
* Remove the specified resource from storage.
*
* @param int $id
*/
public function destroy($id)
{
//
Cart::remove($id);
Session::flash('status', 'Product removed from cart');
}
}
Snippet 12: Cart Controller

<?php
namespace App\Http\Controllers;
use App\Menu;
use App\Category;
class MenuController extends Controller

{
/**
*
*/
{
//Shows all menu
$categories = Category::all();
$menus = Menu::all();
return view('menus.index', compact('menus', 'categories'));

}
/**
* Display the specified resource.
*
84
*/
public function show(Menu $menu)
{
$interested = Menu::where('id', '!=', $menu)->get()->random(2);
return view('menus.show', compact('menu','interested'));
}
}
Snippet 13: Menu Controller.

@extends('layouts.main')
@section('title', 'Your Cart')
@section('content')
<div class="container">
@if(Session::has('status'))
<div class="alert alert-warning alert-dismissible fade show" role="alert">
{{ Session::get('status') }}
<button type="button" class="close" data-dismiss="alert" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<div class="table-responsive cart_info">

<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Menu</td>
<td class="description">Description</td>
<td class="price">Price</td>
<td class="quantity">Quantity</td>
<td class="total">Sub-Total</td>
<td></td>
</tr>
</thead>
@foreach(Cart::content() as $menu)
<tbody>
<tr>
<td class="cart_product">
<a href=""><img src="{{ asset('/storage/images')."/".$menu-
>model->image }}" alt="" height="100px" width="100px"></a>
</td>
<td class="cart_description">
<h4><a href="">{{ $menu->name }}</a></h4>
</td>
<td class="cart_price">
<p>BDT {{$menu->price}}</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<input title="qty" id="qty" class="email input-text qty
85
text" value="{{ $menu->qty }}" type="text">
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">BDT {{ $menu->subtotal }}</p>
</td>
<td class="cart_update">
<a href="{{ route('cart.update',['id' =>$menu->rowId,
'qty' =>$menu->qty]) }}"><button class="btn btn-warning">Update</button></a>
</td>
<td class="cart_delete">
<a href="{{ route('cart.delete',['id' =>$menu->rowId])
}}" class="product-del remove" title="Delete"><button class="btn btn-
danger">Delete</button></a>
</td>
</tr>
<tr>
@endforeach
<th class="text-right">Shipping</th>
<td class="text-right">BDT 50</td>
</tr>
<tr>
<th class="text-right">Total</th>
<td class="text-right"><b>{{ Cart::subtotal() + 50 }}</b></td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<a href="/menus" class="product-del remove" title="Delete"><button

class="btn btn-lg btn-secondary" style="margin-bottom: 20px">Continue
Shopping</button></a>
<a href="/order/create" class="product-del remove"
title="Delete"><button class="btn btn-lg btn-success" style="margin-bottom:
20px">Place Order</button></a>
</div>
</div>
@endsection
Snippet 14: Cart View Blade.
86
10.2. Appendix B: Questionnaire
Questionnaire for User Acceptance Test
1. How easy was it to use our web application?
☐ Very easy
☐ Moderately easy
☐ Slightly easy
☐ Not at all
2. How user-friendly is the website?
☐ Very user-friendly
☐ Moderately user-friendly
☐ Slightly user-friendly
☐ Not at all
3. Is the website appeared in your mobile correctly?
☐ Yes
☐ No
☐ Yes, but with some issues. (Please, specify your screen size)
4. Are you satisfied with the speed and performance of our application?
☐ Very satisfied
☐ Moderately satisfied
☐ Slightly satisfied
☐ Not at all
87
5. How can we improve our software?
Explanation:
88
10.3. Appendix C: Ethical Approval & Progress Report
Figure 41: Scan copy of ethical approval.
89
90
Figure 42: Scan copy of project progress report for meeting 1.

91
92
View publication stats

Implementation of Responsive Online Food Ordering Application With Social Media Integration

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Implementation of Responsive Online Food Ordering Application With Social Media Integration

Uploaded by

Copyright:

Available Formats

See discussions, stats, and author profiles for this publication at: https://www.researchgate.

Implementation of Responsive Online Food Ordering Application with Social

Thesis · January 2018

Md. Muminur Rahman

The user has requested enhancement of the downloaded file.

A Project Submitted to University of Derby for the Degree of BSc (Hons) in

Md. Muminur Rahman

I wish to express my sincere thanks to my supervisor Mr. SRM Fahad-Ul-Hossain for

I am also grateful to my parents and all family members for supporting me to

Table of Contents ........................................................................................................... 4

List of Tables ................................................................................................................. 8

List of Code Snippets ..................................................................................................... 8

List of Figures ................................................................................................................ 9

1.1. Project Overview ........................................................................................... 11

1.2. Project Aim & Objectives ............................................................................. 12

1.3. Project Rationale ........................................................................................... 12

1.4. Feasibility of the Project ............................................................................... 13

1.5. Scope of the Project....................................................................................... 14

2.1. Past Works on This Domain.......................................................................... 15

2.1.1. PDA-based System ................................................................................ 15

2.1.2. RFID Based System ............................................................................... 17

2.1.3. Mobile Application Based System......................................................... 18

2.1.4. Web Application Based System............................................................. 19

2.1.5. Evaluation of the Past Works ................................................................. 19

2.2. Web Application Development Technologies .............................................. 20

2.5. Bootstrap ....................................................................................................... 23

3.1. Research Methodology .................................................................................. 24

3.1.1. Initial Study ............................................................................................ 25

3.1.2. Data Collection ...................................................................................... 25

3.1.4. Implementation ...................................................................................... 25

3.1.5. Critical Analysis of the System.............................................................. 25

3.2. System Development Methodology .............................................................. 26

3.2.1. Waterfall ................................................................................................ 26

3.2.2. System Prototyping ................................................................................ 27

3.2.3. Agile Methodology ................................................................................ 27

3.2.4. Rational for Selected SDLC................................................................... 27

4. Requirements & Design ....................................................................................... 31

4.1. Requirements Elicitation ............................................................................... 31

4.1.1. Functional Requirements ....................................................................... 31

4.1.2. Non-Functional Requirements ............................................................... 31

4.2. Process Modelling ......................................................................................... 32

4.2.1. Context Diagram (CD) ........................................................................... 32

4.2.2. Data Flow Diagram (DFD) .................................................................... 33

4.3. Data Modelling .............................................................................................. 36

4.3.1. Entity Relationship Diagram (ERD) ...................................................... 36

4.4.1. Homepage .............................................................................................. 37

4.4.2. Menu List ............................................................................................... 39

4.4.3. Menu Details Page ................................................................................. 41

5.1.1. Home Page ............................................................................................. 45

5.1.2. Menu List ............................................................................................... 46

5.1.3. Menu Detail Page ................................................................................... 47

5.2. Implementation of Cart ................................................................................. 48

5.3. Facebook API Integration ............................................................................. 49

6.1. Black Box Testing ......................................................................................... 52

6.1.1. Test 1 ...................................................................................................... 54

6.1.2. Test 2 ...................................................................................................... 55

6.1.3. Test 3 ...................................................................................................... 56

6.1.4. Test 4 ...................................................................................................... 56

6.1.5. Test 5 ...................................................................................................... 57

6.1.6. Test 6 ...................................................................................................... 60

6.2. Search Engine Optimisation (SEO) Testing.................................................. 62

6.3. User Acceptance Testing ............................................................................... 62

6.3.1. Ease of use ............................................................................................. 63