A

PROJECT REPORT

ON

Interactive Restaurant Website

SUBMITTED BY

Krutika Rohidas Sawale and Karishma Kailas Dalimbe

Seat number

Under The Guidance Of-

Mrs. Deepali Shilvant ma’am

BCA-SEMISTER VI

BHARAT SHIKSHAN PRASARAK MANDAL

JAIKRANTI COLLEGE OF COMPUTER SCIENCE AND MANAGEMENT STUDIES

(B.C.A. DEPARTMENT)
KATRAJ
PUNE-411 046
UNIVERSITY OF PUNE
2019-2020

Savitribai Phule University of Pune

 JAIKRANTI COLLEGE OF COMPUTER SCIENCE
AND MANAGEMENT STUDIES, KATRAJ, PUNE-46

This is to certify that Krutika Rohidas Sawale and Karishma

Kailas Dalimbe students of SYBBA(CA) have satisfactorily completed their

project work entitled “Interactive Restaurant Website” And submitted
the project for the fulfilment of Bachelor of Business Administration
(Computer Applications) as per the syllabus of Savitribai Phule University of
Pune, during the academic year 2020-21.

Date:
Place:

Project Guide HOD Principal

Internal Examiner External Examiner

 ABSTRACT
In this project, we will create an interactive
homepage of a restaurant, where the background image will
change when we hover over a menu option. For example, if you
hover over menu navigation, it will display a menu card, if you
hover over the home, it will show the default. You have to give
your image names and locations for this to work. This
functionality is done through jQuery. Same way, the ‘order now’
button will keep flashing. We have done this by using
@keyframes functionality which we have used in our animated
website project too.
 ACKNOWLEDGEMENT
No project is ever complete without the guidance of those experts who
have already traded this past before and hence become master of it and as a
result, our leader. So I would like to take this opportunity to take all those
individuals who have helped us in visualizing this project. I express my deep
gratitude to my project guide prof prof. Deepali Shilvant Mam for providing
timely assistant to my query and guidance that he gave owing to his
experience in this field for past many years. He had indeed been a lighthouse
for us in this journey.

I extend my sincere appreciation to all my Professors from Jaikranti

college of computer science and management studies, for their valuable
insights and tips during the designing of the project. Their contributions have
been valuable in so many ways that I find it difficult to acknowledge of them
individually.

I am also great full to my HOD Prof. Deepali Shilvant for extending her
help directly and indirectly through various channels in my project work.
 INDEX
Sr. No Contents Page No
1 Introduction
Objectives
Problem Statement
Scope
2 System Analysis
Existing System
Proposed System
Hardware Requirements
Software Requirements
Justification of selection of technology
3 System Design
E-R Diagram
UML Diagrams

4 Implementation and Testing

Code
Testing

5 Results and Discussions

6 Future Enhancement
7 Reference And Bibliography
 DECLARATION
I hereby declare that the project entitled, “Interactive
Restaurant Website” done at place where the project is done, has
not been in any case duplicated to submit to any other university
for the award of any degree. To the best of my knowledge other
than me, no one has submitted to any other university. The project
is done in partial fulfillment of the requirements for the award of
degree of BACHELOR OF BUSINESS ADMINISTRATION(COMPUTER
APPLICATION)to be submitted as final semester project as part of
our curriculum.
Chapter 1
Introduction :
INTRODUCTION
"Interactive Restaurant Website” is considered as an
increasingly used application in restaurant
management. Just a few years ago, people used to
spend long time waiting for a table to be ready for them
at a restaurant. And after that, they would wait longer
time to order their food. There was no surprise that the
food took too long to be prepared. In short, the whole
enjoyment of eating did eventually result in boredom
and tiredness for customers. From another side, this is
the restaurant management and staff who used to stand
much pressure to handle a lot of customers at the same
time. With great technology in general and the internet
in specific, customers can be happy by using online food
ordering and reservation. This facilitates the work of
restaurant managers and staff. The system will make
the entire process for the restaurant manager much
easier and faster compared with traditional methods. On
the other hand, these days’ customers can place their
orders and make their reservations as quickly and
enjoyably as a click on their computers or smart
devices. All in all, both customer and menu information
management as well as report are the very wonderful
aspects of the modern world in restaurant industry.
Technically, Prototyping Model is what is applied in
Online Website. JavaScript, CSS, HTML and Microsoft
Office software’s are used to develop the project.
 1.1) OBJECTIVES
The main objectives of the web application are as follows:
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.2)PROBLEM STATEMENT
Nowadays, many restaurants manage their business by manual
especially take customer ordering. . In traditional booking system, a
customer has to go to restaurant or make a phone call in order to
get his meal reserved. Today, restaurant waiter takes the customer
ordering by manual system with using paper. Customer does some
formal conversation like hello, hi, etc. Than he demands for today’s
menu and do some discussion over menu items then he orders. It
takes 5 to 10 minutes to book the order and waiter book the order
on paper so there is probability of lost and duplication of customer
information. Restaurant management system puts the order in a
queue with specific priority according to time and quantity, and then
a cook is assigned for the specific order to complete it.

Besides, the restaurant waiter information also by manual system

kept use paper and this is difficult for restaurant administrator to
find waiter information, probability missing the paper and difficult to
arrange the schedule. Initial problem is that the customer has to get
connected over the phone; it would be harder if the restaurant is
very popular and busy. Sometimes, waiter information and customer
information is important to restaurant administrator for reference in
the future. The chances of committing mistakes at the restaurant
side in providing a menu list for a specific time would be more.

Many people have experienced going to a restaurant where the

service is poor and there is a lack of attention from the wait staff.
The paper menus can be flimsy, hard to navigate, and outdated. To
leverage the growing mobile industry, the on –line restaurant
proffers solution. This restaurant menu and management system will
replace the paper waste, is more maintainable, and allows for
greater customer engagement. The problem confronting the
research is to determine the Documentation for online restaurant
management system.

1.3) SCOPE
The following table shows the scope of the project:

Scope In Scope out

● Web application for restaurant ● IoT based food ordering system
● Online restaurant management system ● Physical smart system for restaurant
● Online food ordering system ● Mobile application
● Online customer management
● Written report on project
Chapter 2
System Analysis
2.1) EXISTING SYSTEM
The current system is paper based. Papers are used in restaurants for displaying the traditional
menu cards, writing down the orders of customers, storing the records of customers. The
disadvantages of paper based system are that papers can get easily damaged by stain marks; they
can be lost due to fire or accidents or can get lost in general. Hence, time and money is wasted. As
traditional menu cards are paper based, any changes that need to be made in the menu will
require reprinting of the entire menu card, leading to wastage. For small changes, reprinting the
entire menu card is impossible. Changes in the menu card cannot be made dynamically. It is
inefficient to access a particular record from the stack of papers. This system is time consuming.
One has to call a waiter number of times till he notices it, and wait for him to arrive at their table to
take their order. Also the waiter can misinterpret the customer’s order since he is writing the order
on paper, and the case of serving a wrong dish is possible.
 For placing any orders customers have to visit hotels or restaurants to know about food items
and then place order and pay. In this method time and manual work is required.
 While placing an order over the phone, customer lacks the physical copy of the menu item, lack
of visual confirmation that the order was placed correctly.
 Every restaurant needs certain employees to take the order over phone or in-person, to offer a
rich dining experience and process the payment. In today’s market, labour rates are increasing day
by day making it difficult to find employees when needed.
 2.2) PROPOSED SYSTEM
A Tablet menu completely revolutionizes the patron’s dining experience. Existing programs provide
an app that restaurants can use to feed their menus into iOS & Android based tablets and make it
easier for the diners to flip, swipe & tap through the menu. We aim in providing and advanced menu
display using android mobile phones at restaurants with a tablet menu that would recommend
dishes based on a recommendation algorithm. In addition to this we run the app on an Android
based tablet and not on an iOS based tablet which is more expensive alternative. We use a cloud
based server for storing the database which makes it inexpensive and also secured. Developers of
similar applications maintain that customers who seat at tables outfitted with tablets spend about
10% more than those at other tables (“people buy more when they can do so instantly, without
waiting for service”). Proposed system consists of following modules.

● MODULES:
1. Module 1: Login Module In login module the customer and restaurants login will be taken
while they already registered on the application. Every manager/user will have login id and
password to login to the application.
2. Module 2: Registration Module This module is displayed to the visitors if they need to
perform some order placements, and new registration for restaurants who wants to do
business with us on our online restaurant management application.
3. Module 3: Add/Update/remove Menu This module is for admin. Admin have rights to insert,
update (modify) and delete the data in database as per his/her necessary requirements.
4. Module 4: Account Management Module There will be an account manager who will
manage all the online order transaction and he/she will be responsible for issuing printed
copy of customers payment receipts.
5. Module 5: Station Tracking Module This module describes the current location of any
particular area over the usage of internet connectivity and GPS. This module is useful to find
the location of order placed and for estimated time delivery.
6. Module 6: Place Order Module The activity is performed by customer itself whose
registration is already done. Once the verification is done by application, the order gets
confirmed and delivery will be given to the dedicated customers address.
7. Module 7: Carting Module This is additional feature given to add the food items in
customer’s virtual basket just like pending orders or the orders which customer wants to do
later. But, if the customer is first time visiting then he/she will unable to place order until
he/she do registration to our application.
8. Module 8: Order Manage Module In case, the customer come to know that the food or
service of restaurant is not good and estimated delivery time is too much as expected then
he/she can manage his/her orders under order manage module.
9. Module 9: Messaging Module The private window for conversation between customer and
customer executives will be given inside the application where they can ask about any kind
of queries to the executives 24/7.
10. Module 10: Logout Module The last module describes that after placing order or performing
some actions on the application the customer will click logout profile.
 2.3)Working
Our main aim is to increase the efficiency of the food ordering and reduce human errors and provide
high quality services to the customers of the restaurants. The application on the tablets must be able
to communicate with the other devices. Fig.1 shows flow chart of the android application. As shown
in flowchart below, firstly the customer or visitor will open the application and searches for food
item menus from nearby available location of customer. The customer sees the categorized menu
card on the android app. The selection of food items is done by person if he/she visiting our
application with or without login and registration module. At this stage, the registered and non-
registered persons can add food items in their shopping kart for temporary purpose. If the customer
wants to buy selected items then condition will be checked weather customer login is done or not. If
login is not done then application will force customer to login first before ordering something.

For performing all activities in project we will create one database consists of all restaurants listed
along with their daily food items and costs. Once completing login task, the customer will place
order from his nearest searched local restaurants searched via server. After this the verification of
customer order will be done by making call given by customer at the time of login registration. After
successful verification admin will check is the order is confirmed by customer if not the whole
process begins from start.

2.4) ADVANTAGES
1. No misunderstandings and no frustrations.

2. Online food ordering will be opened 24/7.

3. Online menu is simpler and easy to operate by a user.

4. Number of users or customers increases.

5. It is Responsible for faster growth of your business over the internet.

2.5) HARDWARE REQUIREMENTS

Hardware requirements for this system are as listed follows:

Processor i5 10th Gen

Operating System Windows 10

 2.6) SOFTWARE REQUIREMENTS
Software requirements for this system are as listed follows:

Front End HTML5, CSS3, jQuery, JavaScript

Back End MySQL, AJAX

2.6) Justification of selection of Technology

HTML5 -
HTML5 stands for Hypertext Markup Language revision 5. It is a markup language for the
structure and presentation of World Wide Web contents. HTML simply means it is a language for
describing web-pages using ordinary text.
HTML is not a complex programming language. HTML5 is simply just an umbrella term for
the next generation of web apps and how functionality will be expanded with better markup
(HTML), better style (CSS), and better interactivity (JavaScript).

CSS3 -
CSS3 stands for Cascading Style Sheets. It is used for the designing of a webpage. CSS is the
standard and preferred mechanism for formatting HTML pages. CSS consist of a group of
formatting rules that you use to control the layout and appearance of the content on a web page.

One of the really great feature of CSS is that you can store all the CSS rules in one
document and keep that document separate from the HTML content and link them together.

JavaScript -
JavaScript (JS) is a scripting languages, primarily used on the Web. It is used to enhance
HTML pages and is commonly found embedded in HTML code. JavaScript is an interpreted
language.

Thus, it doesn't need to be compiled. Although it shares many of the features and
structures of the full Java language, it was developed independently. It was originally developed by
Netscape as a means to add dynamic and interactive elements to websites.
 JavaScript is a client-side scripting language, which means the source code is processed by
the client's web browser rather than on the web server. This means JavaScript functions can run
after a web page has loaded without communicating with the server.

PHP -
PHP Stands for "Hypertext Preprocessor." PHP is an HTML-embedded Web scripting
language. This means PHP code can be inserted into the HTML of a Web page. A lot of syntax of
PHP is borrowed from other languages such as C, Java and Perl. However, PHP has many aunique
features and specific functions as well.

When a PHP page is accessed, the PHP code is read or "parsed" by the server the page
resides on. The output from the PHP functions on the page are typically returned as HTML code,
which can be read by the browser. Because the PHP code is transformed into HTML before the
page is loaded, users cannot view the PHP code on a page. This make PHP pages secure enough to
access databases and other secure information.

MySQL –

MySQL, pronounced either "My S-Q-L" or "My Sequel," is an open source relational
database management system. It is based on the structure query language (SQL), which is used for
adding, removing, and modifying information in the database. Standard SQL commands, such as
ADD, DROP, INSERT, and UPDATE can be used with MySQL.

These pages are often referred to as "dynamic," meaning the content of each page is
generated from a database as the page loads. Websites that use dynamic Web pages are often
referred to as database-driven websites.

jQuery –
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, animation, and Ajax much simpler with an
easy-to-use API that works across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery's syntax is designed to make it easier to navigate a document, select DOM
elements, create animations, handle events, and develop Ajax applications. jQuery also
provides capabilities for developers to create plug-ins on top of the JavaScript library. This
enables developers to create abstractions for low-level interaction and animation, advanced
effects and high-level, themeable widgets.
AJAX –
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating
better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java
Script.

With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results,
and update the current screen. In the purest sense, the user would never know that anything was
even transmitted to the server. AJAX is a web browser technology independent of web server
software.
Chapter 3
System Design

3.1) ER DIAGRAMS
An entity relationship diagram (ERD) shows the relationships of entity sets stored in a database. An
entity in this context is an object, a component of data. An entity set is a collection of similar
entities. These entities can have attributes that define its properties.

An ER diagram is a means of visualizing how the information a system produces is related. There
are five main components of an ERD:

● Entities, which are represented by rectangles. An entity is an object or concept about

which you want to store information. A weak entity is an entity

that must defined by a foreign key relationship with another entity as it cannot be

uniquely identified by its own attributes alone.

● Actions, which are represented by diamond shapes, show how two entities share

information in the database. In some cases, entities can be

self-linked. For example, employees can supervise other employees.
● Attributes, which are represented by ovals. A key attribute is the unique, distinguishing
characteristic of the entity. For example, an employee's social security number might be the
employee's key attribute.

A multivalued attribute can have more than one value. For

example, an employee entity can have multiple skill values. A derived

attribute is based on another attribute. For example, an employee's monthly

salary is based on the employee's annual salary.

● Connecting lines, solid lines that connect attributes to show the relationships of entities in
the diagram.

● Cardinality specifies how many instances of an entity relate to one instance of another
entity. Ordinality is also closely linked to cardinality. While cardinality specifies the
occurrences of a relationship, ordinality describes the relationship as either mandatory or
optional. In other words, cardinality specifies the maximum number of relationships and
ordinality specifies the absolute minimum number of relationships.
E-R Diagram :

3.2) UML DIAGRAMS

● Use Case Diagram –

A UML use case diagram is the primary form of system/software requirements for a new
software program under developed. Use cases specify the expected behavior (what), and not the
exact method of making it happen (how). Use cases once specified can be denoted both textual
and visual representation (such as UML). A key concept of use case modeling is that it helps us
design a system from end user's perspective. It is an effective technique for communicating system
behavior in the user's terms by specifying all externally visible system behavior.

A use case diagram is usually simple. It does not show the detail of the use cases:
● It only summarizes some of the relationships between use cases, actors, and systems.
● It does not show the order in which steps are performed to achieve the goals of each use
case.
As said, a use case diagram should be simple and contains only a few shapes. If yours contain
more than 20 use cases, you are probably misusing use case diagram.

Use case diagrams are typically develop in early stage of development and people often apply use
case modeling for the following purposes:

● Specify the context of a system

● Capture the requirements of a system
● Validate a systems architecture
● Drive implementation and generate test cases
● Developed by analysts together with domain experts

● Usecase diagram:
 3.3) Statechart Diagram –

A Statechart diagram describes a state machine. State machine can be defined as a machine
which defines different states of an object and these states are controlled by external or internal
events.

Statechart diagram is one of the five UML diagrams used to model the dynamic nature of a
system. They define different states of an object during its lifetime and these states are changed by
events. Statechart diagrams are useful to model the reactive systems. Reactive systems can be
defined as a system that responds to external or internal events.

Statechart diagram describes the flow of control from one state to another state. States are
defined as a condition in which an object exists and it changes when some event is triggered. The
most important purpose of Statechart diagram is to model lifetime of an object from creation to
termination.

Statechart diagrams are also used for forward and reverse engineering of a system.
However, the main purpose is to model the reactive system.

Following are the main purposes of using Statechart diagrams −

● To model the dynamic aspect of a system.

● To model the life time of a reactive system.

● To describe different states of an object during its life time.

● Define a state machine to model the states of an object.

Statechart diagram -

3.4)Activity Diagram –

An activity diagram visually presents a series of actions or flow of control in a system

similar to a flowchart or a data flow diagram. Activity diagrams are often used in business process
modeling. They can also describe the steps in a use case diagram. Activities modeled can be
sequential and concurrent. In both cases an activity diagram will have a beginning (an initial state)
and an end (a final state).

In between there are ways to depict activities, flows, decisions, guards, merge and time events and
more. Learn about activity diagram symbols below:

Basic Activity Diagram Notations and Symbols

Initial State or Start Point

A small filled circle followed by an arrow represents the initial action state or the start
point for any activity diagram. For activity diagram using swimlanes, make sure the start point is
placed in the top left corner of the first column.
Activity or Action State
An action state represents the non-interruptible action of objects. You can draw an action
state in SmartDraw using a rectangle with rounded corners.

Action Flow
Action flows, also called edges and paths, illustrate the transitions from one action state to
another. They are usually drawn with an arrowed line.

Object Flow
Object flow refers to the creation and modification of objects by activities. An object flow
arrow from an action to an object means that the action creates or influences the object. An object
flow arrow from an object to an action indicates that the action state uses the object.

Decisions and Branching

A diamond represents a decision with alternate paths. When an activity requires a decision
prior to moving on to the next activity, add a diamond between the two activities. The outgoing
alternates should be labeled with a condition or guard expression. You can also label one of the
paths "else."
Activity Diagram –

3.5)Sequence Diagram –
 Sequence Diagrams are interaction diagrams that detail how operations are carried out.
They capture the interaction between objects in the context of a collaboration. Sequence Diagrams
are time focus and they show the order of the interaction visually by using the vertical axis of the
diagram to represent time what messages are sent and when.
Sequence Diagrams captures the interaction that takes place in a collaboration that either realizes
a use case or an operation and high-level interactions between user of the system and the system,
between the system and other systems, or between subsystems.

Purpose of Sequence Diagram

● Model high-level interaction between active objects in a system

● Model the interaction between object instances within a collaboration that realizes a use
case
● Model the interaction between objects within a collaboration that realizes an operation
● Either model generic interactions (showing all possible paths through the interaction) or
specific instances of a interaction (showing just one path through the interaction)

● Sequence Diagram :
Chapter 4
Implementation &
Testing
4.1) TESTING APPROACH
Testing -

Software Testing is an empirical investigation conducted to provide stakeholders with information

about the quality of the product or service under test, with respect to the context in which it is
intended to operate. Software Testing also provides an objective, independent view of the software
to allow the business to appreciate and understand the risks at implementation of the software.
Test techniques include, but are not limited to, the process of executing a program or application
with the intent of finding software bugs. Software Testing, depending on the testing method
employed, can be implemented at any time in the development process, however the most test
effort is employed after the requirements have been defined and coding process has been
completed.

STRATEGIC APPROACH TO SOFTWARE TESTING -

The software engineering process can be viewed as a spiral. Initially system engineering defines the
role of software and leads to software requirement analysis where the information domain,
functions, behavior, performance, constraints and validation criteria for software are established.
Moving inward along the spiral, we come to design and finally to coding. To develop computer
software we spiral in along streamlines that decrease the level of abstraction on each turn.

Testing progress by moving outward along the spiral to integration testing, where the focus is on
the design and the construction of the software architecture. Talking another turn on outward on
the spiral we encounter validation testing where requirements established as part of software
requirements analysis are validated against the software that has been constructed. Finally we
arrive at system testing, where the software and other system elements are tested as a whole.
 UNIT TESTING

MODULE TESTING

Component Testing
SUB-SYSTEM TESING

Integration Testing SYSTEM TESTING

ACCEPTANCE TESTING
User Testing

Unit Testing -
The primary goal of unit testing is to take the smallest piece of testable software in the
application, isolate it from the remainder of the code, and determine whether it behaves exactly as
you expect. Each unit is tested separately before integrating them into modules to test the
interfaces between modules. Unit testing has proven its value in that a large percentage of defects
are identified during its use.
Unit testing is a software verification and validation method where the programmer gains
confidence that individual units of source code are fit for use. A unit is the smallest testable part of
an application. In procedural programming a unit may be an individual program, function,
procedure, etc., while in object- oriented programming, the smallest unit is a class, which may
belong to a base/super class, abstract class or derived/child class.

Integration Testing -
Integration testing, also known as integration and testing (I&T), is a software development
process which program units are combined and tested as groups in multiple ways. Integration
testing is a component of Extreme Programming (XP), a pragmatic method of software
development that takes a meticulous approach to building a product by means of continual testing
and revision.
There are two major ways of carrying out an integration test, called the bottom-up method
and the top-down method. Bottom-up integration testing begins with unit testing, followed by
tests of progressively higher-level combinations of units called modules or builds. In a
comprehensive software development environment, bottom-up testing is usually done first,
followed by top-down testing.

Validation testing -
At the validation level, testing focuses on user visible actions and user recognizable output
from the system. Validations testing is said to be successful when software functions in a manner
that can be reasonably expected by the customer. Two types of validation testing.

● Alpha testing is simulated or actual operational testing by potential users/customers or an

independent test team at the developers' site. Alpha testing is often employed for offthe-
shelf software as a form of internal acceptance testing, before the software goes to beta
testing.

● Beta testing comes after alpha testing. Versions of the software, known as beta version,
are released to a limited audience outside of the programming team. The software is
released to groups of people so that further testing can ensure the product has few faults
or bugs. Sometimes, beta versions are made available to the open public to increase the
feedback field to a maximal number of future users.

● Gray box testing Grey box testing is the combination of black box and white box testing.
Intention of this testing is to find out defects related to bad design or bad implementation

of the system .it is used for web application.

Chapter 5
Results & Discussions

OUTPUT SCREEN
Chapter 6
Future Enhancement

Future Enhancement:
 This order food online system project aimed at developing an
online food ordering system which can be used in small places,
and medium cities firstly and then on a large scale.
 It is developed to help restaurants to simplify their daily
operational and managerial task as well as improve the dining
experience of customers.
 And also helps restaurants develop healthy customer
relationships by providing good services. The system enables
staff to let update and make changes to their food and
beverage list information based on the orders placed and the
orders completed.
Chapter 7
References
REFERENCES

● www.wikipedia.com
● www.w3school.com
● www.tutorailpoint.com
● www.materializecss.com

● www.developers.google.co
m