RESTAURANTS FOOD

ORDERING
MINI PROJECT – II

Submitted by

ANNAPOORANI C
Roll No:727622MCA027

In partial fulfilment of the requirements

For the award of the degree
Of

MASTER OF COMPUTER APPLICATIONS

DR. MAHALINGAM COLLEGE OF ENGINEERING

AND TECHNOLOGY
POLLACHI-642 003

(Approved by AICTE, Affiliated to Anna University and

Accredited by NBA & NAAC with,, A++”Grade)

JUNE-2023

1
 Dr. MAHALINGAM COLLEGE OF ENGINEERING
AND TECHNOLOGY POLLACHI-642 003
Department of Computer Applications (MCA)
MINI PROJECT -II REPORT
JUNE-2023
This is to certify that the project entitled
Restaurants Food Ordering
Is the bonafide record of project work done by

C.ANNAPOORANI
Roll No:727622MCA027
Of Master of Computer Applications during the year 2022-2023

Project Guide Head of the Department

Dr.S.RAJA RAJESWARI, MCA.,M.Phil.,Ph.d Dr.R.MUTHUSAMI,M.C.A.,M.Phil.,Ph.d

Assistant Professor/MCA Head & Assistant Professor (SG)

Submitted for the Project Viva-Voce examination held on ---------------------

Internal Examiner External Examiner

2
 DECLARATION

3
 DECLARATION

I affirm that the project work titled “RESTAURANTS FOOD ORDERING” being
submitted in partial fulfilment for the award of Mater of Computer Applications is the
original work carried out by me. It has not formed the part of any other project work
submitted for award of any degree or diploma, either in this or any other university.

(Signature of the Candidate)

C.ANNAPOORANI
Roll No:727622MCA012

I certify that the declaration made above by the candidate is true.

(Signature of the Guide)

Dr.S.RAJA RAJESWARI, MCA.,M.Phil.,Ph.d
Assistant Professor/MCA

4
ACKNOWLEDGEMENT

5
 ACKNOWLEDGEMENT

I express my gratitude to Dr.C.RAMASAMY, M.E.,Ph.D., F.I.V., Secretary, NIA

Educational Institutions ,Pollachi, for having provided me the facilities to do project
successfully.

I express my sincere thanks to Dr.P.GOVINDASAMY, B.E.,M.E.,Ph.D., Prinipal,

Dr.Mahalingam college of Engineering and Technology , Pollachi, for having provided me
the facilities to do the project successfully.

It is a great privilege and pleasure for me to express my gratitude to

Dr. A. SENTHIL KUMAR, B.E., M.E., Ph.D., Dean (Academic and Autonomous),
Dr. S. RAMAKRISHNAN, B.E., M.E., Ph.D., Dean (Research & Innovation),
Dr. CALVIN SOPHISTUS KING, M.Tech., Ph.D, Dean (Industry Relations and Talent
Development), Dr. Mahalingam College of Engineering and Technology, Pollachi, for
persistent encouragement.

I owe deep sense of gratitude to Dr.R.MUTHUSAMI, M.C.A.,M.Phil.,Ph.D., Head

of Department of Computer Applications for appreciating my goal. I express my sincere
thanks to his for his constant encouragement.

I express my thanks to my gratitude Dr.S.RAJA RAJESWARI,

MCA.,M.Phil.,Ph.D., Assistant Professor/MCA for his valuable guidance and support to
meet the successful completion of my project.

I express my sincere thanks to all staff members of Department of Computer

Applications for their encouragement and valuable guidance throughout this project.

Last but not the least, I would like to thank my family and my friends for putting up
with me spending so much time providing encouragement and valuable suggestions,
throughout the project tenure.

6
 ABSTRACT

7
 ABSTRACT

Restaurants Food Ordering Portal built using angular without user login are a popular
way for customers to shop online without the need for a login or account. These portals
provide an easy and efficient way for customers to browse, select, and order the foods
online. The Food ordering system sets up a food menu online and Customers can easily
place the order as per their wish. Also With a food menu, customers can easily track the
orders. This System also provides a feedback system in which user can rate the food items.
Customers can browse the available menu items on the website. Once a customer has found
the desired item, they can select it and add it to their cart. To proceed with the order,
customers are prompted to enter their delivery address and other required information.
Customers can then enter their payment information, such as credit card details or mobile
payment options, to complete the purchase .After reviewing the order details and ensuring all
information is accurate, customers can place the order. Customers receive an order
confirmation, which includes the estimated delivery time and other relevant details
.

8
TABLE OF CONTENTS

9
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

ABSTRACT 8
LIST OF FIGURES 13
LIST OF ABBREVATIONS 15
1 INTODUNCTION 16

1.1 Objectives 17

2 SYSTEM ANALYSIS 18

2.1 Existing System 19

2.1.1 Drawbacks of Existing System 19

2.2 Proposed System 19

2. 2.1 Advantages of proposed system 19
2.3 Feasibility Study 20
2.3.1Operational Feasibility 20
2.3.2Technical Feasibility 21
3 SYSTEM SPECIFICATION 22
3.1 Hardware Specification 23
3.2 Software Specification 23
4 SOFTWARE DESCRIPTION 24
4.1 Front End – HTML/CSS 25
4.2Front End – Angular 26
4.3 Front End – JavaScript 28
4.4 Back End – MySQL 29
5 PROJECT DESCRIPTION 30
5.1 Problem Definition 31

10
 5.2 Overview of the Project 31
5.3 Module Description 32
5.3.1 Modules

5.4 System Design 33

5.4.1 Dataflow Diagram 33

5.4.2 System Flow Diagram 34
5.4.3 UML Diagram 35
5.4.4 Entity Relationship Diagram 36
5.4.5 Database Design 37
5.5 Input Design 39
5.6 Output Design 39
6 SYSTEM TESTING 40
6.1 Testing Methodologies 41
6.1.1 Integration Testing 42
6.1.2 Functional Testing 42
6.2 Test Cases 43
7 SYSTEM IMPLEMENTATIONS 45
7.1 Steps to implementation the system 46
8 CONCLUSIONS AND
FUTURE ENHANCEENT
8.1 Conclusion 48
8.2 Future Enhancements 48
9 APPENDICES 49
9.1Sample Coding 50
9.2 Screen Shots 54
10 REFERENCES 60

11
 LIST OF FIGURES

12
 LIST OF FIGURES

FIG.NO DESCRIPTION PAGE NO

5.4.1.1 Level 0 DFD 33

5.4.1.2 Level 1 DFD 33

5.4.2 System Flow Diagram 34

5.4.3 UML Diagram 35

5.4.4 Entity Relational Diagram 36

13
LIST OF ABBREVATIONS

14
 LIST OF ABBREVATIONS

DESCRIPTION ABBREVATION

CSS Cascading Style Sheet

DFD Data Flow Diagram

ER Entity Relationship

HTML Hyper Text Mark-up Language

JS JavaScript

MYSQL My Structured Query Language

15
 INTRODUCTION

16
 CHAPTER 1

INTRODUCTION

1.1 OBJECTIVES OF THE SYSTEM

The Food Ordering in ANGULAR project for ordering the products. The project
contains admin side. The admin has to manage to add variety of foods. The admin has an
important role in the management of the system.

The admin can go through all the products, customer details and payments. This
project is a simple project that makes a convenient way for customers to order the foods
through online. The Food Ordering is in Angular and MYSQL. The admin can view the
customer order details and delivery the foods to the customers.

Food Ordering portal built using Angular with user login provides a convenient and
accessible way for users to purchase products online. Users can view food details, such as
price, description, and quality. Users can add foods to their cart and review the foods in their
cart. Once users have selected the products they wish to purchase, they can proceed to the
checkout page to place their order. The primary objective of the online food ordering is to
generate sales and increase revenue for providing a platform for customers to purchase foods
or services online. Aims to build long-term relationships with customers and faster brand
loyalty. This can be achieved by offering personalized recommendations, loyalty programs,
exclusive discounts, and excellent customer service.

17
 SYSTEM ANALYSIS

18
 CHAPTER -2

SYSTEM ANALYSIS
2.1 Existing System

All work done manually, processing the customer orders was not easy to perform
manually. The Customer is completely depending on the manual process for buying the
foods. Manual process is a time consuming factor. And when customer approaches for a
manual shopping directly, actually he/she does not have an idea about things like, price
range, items, etc., The time which has been spent by the customer in manual shopping can
equates to multiple number of shopping. As customer can sit at home and browse in a
fraction of seconds.

2.1.1 Disadvantage of Existing System

 Visiting various restaurants one by one might be time- and energy-consuming.
 Discounts and deals are only made available for a limited time. Most likely, you won't
get as much of a discount as you would on an internet store.
 It is difficult to identify the required food and description of the food limited.

2.2 Proposed System

The purpose of Food ordering is to save time, save money. Through online ordering
one can save his valuable time. One can watch and select things he/she wants to order.
Through online ordering we can save our money because prices are less than market
prices and receive our orders at our home. No need to go anywhere. We can get different
varieties of foods online and we can choose which one we want.
The restaurant’s owner will be admin of the system. Shop owner can appoint
moderators who will help owner in managing the customers and food orders. The system
also recommends a home delivery system for the ordered foods.
2.2.1 Advantages of the proposed system

 This system majorly solved the congestion, collision and save time during
ordering activities.
 Can be easily used for customers.
19
2.3 Feasibility Study
Feasibility study is made to see if the project on completion will serve the purpose of
the organization for the amount of work, effort and the time that spends on it. Feasibility
study lets the developer for see the future of the project and the usefulness. A feasibility study
of a system proposal is according to its workability, which is the impact on the organization,
ability to meet the user needs and effective use of resources.

Two key considerations involved in the feasibility analysis are

 Operational Feasibility
 Technical Feasibility

2.3.1 Operational Feasibility

The aspects of study are to check the level of acceptance of the system by the user.
This includes the process of training the user to use the system efficiently. The user must not
feel threatened by the system, instead must accept it as a necessity. The level of acceptance
by the user solely depends on the methods that are employed to educate the user about the
system and to make them familiar with it.

20
 2.3.2 Technical Feasibility

The system must be evaluated from the technical point of view first. The assessment
of this feasibility must be based on an outline design of the system requirement in the terms
input, output, program and procedures having identified an outline-systems, the investigation
must go on to suggest the type of equipment required method developing the system of
running the system once it has been designed.

Technical issues raised during the investigation are:

1. Does the existing technology sufficient one?

2. Can the system expand if developed?
`
The project should be developed such that the necessary functions and performance achieved
within the constraints. The project is developed within latest technology. Through technology
may become obsolete after some periods of time, due to the fact that newer version of same
software supports older versions, the system may still be used. So, there are minimal
constraints involved with this project. The system has been developed using PHP is
technically feasible for development.

21
SYSTEM SPECIFICATION

22
 CHAPTER 3

SYSTEM SPECIFICATION

3.1 Hardware Specification

Processor : AMD PRO,2.50 GHz

Ram : 4.00GB

Operating System : Windows 11

3.2 Software Specification

Operating System: Windows 11

Front End : HTML, CSS, ANGULAR, JAVASCRIPT, TYPESCRIPT

Data base : MYSQL

Software : Visual Studio Code

23
SOFTWARE DESCRIPTION

24
 CHAPTER 4

SOFTWARE DESCRIPTION

4.1 Front End -HTML/CSS

Hypertext Mark-up Language (HTML) is the standard mark-up language for creating
web pages and web applications. Web browsers receive HTML documents from a webserver
or from local storage and render them into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the appearance of the
document. Web browsers receive HTML documents from a webserver or from local storage
and render them into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.

CSS

Cascading Style Sheet (CSS) is a style language used for describing the presentation
of a document written in a mark-up language. Although most often used to set the visual style
of web pages and user interfaces written in HTML, the language can be applied to any XML
document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or
on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by,
most websites to create visually engaging web pages, user interfaces for web applications,
and user interfaces for many mobile applications. CSS is designed primarily to enable the
separation of presentation and content, including aspects such as the layout, colors and fonts.
The separation can improve content accessibility, provide more flexibility and control in the
specification of Presentation characteristics enables multiple HTML pages to share
formatting by specifying the relevant CSS in a separate. CSS file and reduce complexity and
repetition in the structural content.

25
4.2 Front End-Angular

Angular (formerly called Angular JS) is a typescript-based web application

framework that supports full-stack development for building all types of web applications. It
helps in creating reactive single page application (SPA) and is completely based on the
concept of components. Angular has nowadays become the most popular framework for
developing mobile and desktop-based web applications. It comes with a variety of features.
The version over 2.0 is called Angular. Angular 1.0 was named Angular JS. The latest
version of Angular comes with all the possible features you may need to build a complex
and sophisticated web application for desktop and mobile. Some of the key features of
Angular are components, forms, directives, dependency injection, HTTP services, pipes, etc.

Angular CLI is a command-line interface tool that automates the application

development process by initializing new Angular applications and maintaining them directly
from a command shell. As you plan to set up your project using Angular CLI, it will show
all its built-in features. You can learn about the various features that Angular provides for
web application development. Single-page applications are web applications or a particular
type of website that provide users with a very intuitive, responsive, and fast user experience.
It is enriched with menus, multiple blocks, tiles, and interactive buttons on one page, helping
users easily navigate the application. It helps to load a portion of the current page
dynamically instead of reloading the entire page from the server. This is why Angular-based
applications are called reactive fast-speed loading pages. Angular helps develop desktop
applications for different operating systems. Native applications can also be built using
Angular with Cordova, Native Script, or Ionic.

Angular is used as a front-end web tool and can work in conjunction with PHP,
Node.js, Struts of Java, and has the ability for near-instant rendering using only CSS and
HTML. It optimizes the web application for improved SEO. Angular provides its
applications with the ability to load faster with new component routers and single page
application (SPA) support. Creating templates in Angular is also done with highly
customized code. This framework also provides testing (Jasmine and Karma for unit
testing), accessibility, automation, and supports full-stack development with Express JS,
Node.JS, and MongoDB.

26
4.3 Typescript

TypeScript is a free and open-source high-level programming language developed

by Microsoft that adds static typing with optional type annotations to JavaScript. It is
designed for the development of large applications and transpires to JavaScript.[5] Because
TypeScript is a superset of JavaScript, all JavaScript programs are syntactically valid
TypeScript, but they can fail to type-check for safety reasons. TypeScript may be used to
develop JavaScript applications for both client-side and server-side execution (as
with Node.js or Demo). Multiple options are available for transpiration. The default
TypeScript Compiler can be used, or the Babel compiler can be invoked to convert
TypeScript to JavaScript.

TypeScript supports definition files that can contain type information of existing
JavaScript libraries, much like C++ header files can describe the structure of existing object
files. This enables other programs to use the values defined in the files as if they were
statically typed TypeScript entities. There are third-party header files for popular libraries
such as jQuery, MongoDB, and D3.js. TypeScript headers for the Node.js library modules
are also available, allowing development of Node.js programs within TypeScript.
TypeScript is superior to its other counterparts like Coffee Script and Dart programming
languages in a way that TypeScript is extended JavaScript. In contrast, languages like Dart,
coffee Script are new languages in themselves and require language-specific execution
environment TypeScript starts with JavaScript and ends with JavaScript. Typescript adopts
the basic building blocks of your program from JavaScript. Hence, you only need to know
JavaScript to use TypeScript. All TypeScript code is converted into its JavaScript equivalent
for the purpose of execution

27
4.4 JavaScript

JavaScript is a cross-platform, object-oriented scripting language used to make webpages

interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). There are
also more advanced server-side versions of JavaScript such as Node.js, which allow you to
add more functionality to a website than downloading files (such as real time collaboration
between multiple computers). Inside a host environment (for example, a web browser),
JavaScript can be connected to the objects of its environment to provide programmatic
control over them.

 Client-side JavaScript extends the core language by supplying objects to control a

browser and its Document Object Model (DOM). For example, client-side extensions
allow an application to place elements on an HTML form and respond to user events
such as mouse clicks, form input, and page navigation.

 Server-side JavaScript extends the core language by supplying objects relevant to

running JavaScript on a server. For example, server-side extensions allow an
application to communicate with a database, provide continuity of information from
one invocation to another of the application, or perform file manipulations on a
server.

28
4.5 MYSQL

Database are a great way to store information they can store your personal contact list,
your financial records, your household inventory, or even a listing of your favorite websites.
Databases are able to store large amounts of useful information in a logical structure that
allows for quick retrieval in any user defined format. Community libraries are renowned for
their use of large database system to store the mass amounts of usable information that they
collect and share.

Database also play a major role in today’s web applications by storing complete
inventories of products and services and making these accessible through a programmed web
front-end. A database has the ability to provide dynamic content to a web shop by providing
the content to web pages.

29
PROJECT DESCRIPTION

30
 CHAPTER 5

PROJECT DESCRIPTION

5.1 Problem Definition

The Customer is completely depending on the manual process for ordering the foods.
Manual process is a time-consuming factor. And when customer approaches for a manual
ordering directly, actually he/she does not have an idea about things like, price range, items
quantity, etc., The time which has been spent by the customer in manual ordering can equates
to multiple number of ordering. As customer can sit at home and browse in a fraction of
seconds.

5.2 Overview of the Project

This system involves its own database to be maintained. As the information or details
about the foods are stored in the database for the server-side functionalities. The Server
process is for dealing with the customer’s detail and the items that are shipped to different
locations based on the addresses provided by the customers. The application design contains
two modules one is for the customers who wish to buy the products. And another is for the
admin who maintain and updates the information regarding the food and about the
customers.

Food Ordering Portal users which want to order some foods will first choose a food
and then select items which they want to order and add them to cart and finally checkout by
giving payment details. So by using this portal users can easily order foods from their
home.

31
5.3 Module Description

The modules of the Online Shopping Portal are as follows

5.3.1 Modules

 Admin Login
 Dashboard
 Add food details
 Customer View food details
 Search food
 Add food to cart

Admin Login:

This module maintains the admin login details. This module helps only the authorized users
to log in to the application. They are given unique username and password.

Dashboard:

In this field, admin can briefly view the number of foods list, Customer details and Ordering
details.

Add Food details:

In this field the admin can add the foods like food name, food quantity, food quality are all
stored in database.

Customer View food details:

In this field the customer can view the food details and can choose the foods added to cart
and order the food.

Add food to cart:

In this field the customer added the foods to cart and order the foods.

32
 5.4 System Design
5.4.1 Dataflow

Diagram Level - 0;

Online Shopping Portal

Admin
Database

Level – 1;

User
Online Shopping Portal
Enter the
name
33
View Foods
5.4.2 System Flow Diagram

Admin

Food ordering

Users enter the name

View Food Choose Order the

Add to Cart foods
Categories Foods

34
5.4.3 UML Diagram

Add foods

Choose
Foods

Add to Cart

Admin Users
Ordered
Foods

35
5.4.4 ER Diagram

Restaurant_ Details
Contact_no
name

Address Email_id

Restaurant

Register

Belong Belong
to Food to

Food Details
name
Customer
name Total
Price

Orders
Total Ord Category

Cate_id
Cus_id Food Qut
Cate_name

36
5.4.5 Database Design

Table Name : Admin

Primary key : Email Id
Description : This table is to store the admin login details.

Field Name Data Type Width Description

Email Id Varchar 30 Admin Email Id

Password Varchar 15 Admin Password

Table name : add-foods

Description : This table is to store the food details

Field Name Data Types Width Description

Food_name Varchar 20 Name of the food

Food_quantity Varchar 25 Food quantity

Food_price Varchar 10 Food

prize

37
Table name : order
Description : This table is to store the order details

Field Name Data Types Width Description

Food_name Varchar 10 Name of the

Food

Category Varchar 10 Food type

Food_quantity Varchar 10 Food Quantity

Add_Cart Varchar 10 Food is added to

cart

38
5.5 Input Design

Input design is the link that ties the information system into the world of its users. The
input design involves determining the inputs, validating the data, minimizing the data entry
and provides a multi-user facility. Inaccurate inputs are the most common cause errors in data
processing. Errors entered by the data entry operators can be controlled by input design.

The user-originated inputs are converted to Computer based format in the input
design. Input data are collected and organized into groups of similar data. Once identified, the
appropriate input media are selected for processing. All the input data are validated and if any
data violates any conditions, the user is warned by a message. If the data satisfies all the
conditions, it is transferred to the appropriate tables in the database.

5.6 Output Design

Computer output is the most important and direct source of information the user.
Output design is a very important phase since the output needs to be in efficient manner.
Efficient and intelligible output design improves the system relationship with the user and
helps decision making.

Allowing the user to view the sample screen is important because the user is the
ultimate judge of the quality of output. The output module of this system is selected
notifications.

39
SYSTEM TESTING

40
 CHAPTER 6

SYSTEM TESTING

6.1 Testing Methodologies

The purpose of testing is to discover errors. Testing is the process of trying to

discover every conceivable fault or weakness in a work product. It provides a way to check
the functionality of components, sub-assemblies, assemblies and/or a finished product. It is
the process of exercising software with the intent of ensuring that the Software system meets
its requirements and user expectations and does not fail in an unacceptable manner. There are
various types of tests. Each test type addresses a specific testing requirement.

 All field entries must work properly.

 Pages must be activated from the identified link.
 The entry screen, messages and responses must not be delayed.

 Unit Testing
 Integration Testing
 Functional Testing

6.1.1 Unit Testing

Unit testing is usually conducted as part of a combined code and unit test phase of the
software lifecycle, although it is not uncommon for coding and unit testing to be conducted as
two distinct phases. Field testing will be performed manually and functional tests will be
written in detail.

41
6.1.2 Integration Testing

Software integration testing is the incremental integration testing of two or more

integrated software components on a single platform to produce failures caused by interface
defects. The task of the integration test is to check that components or software applications,
e.g. components in a software system or – one step up – software applications at the company
level – interact without error.

6.1.3 Functional Testing

Functional tests provide systematic demonstrations that functions tested are available
as specified by the business and technical requirements, system documentation, and user
manuals.

Functional testing is listed on the following items:

 Valid Input: identified classes of valid input must be accepted.

 Invalid Input: identified classes of invalid input must be rejected.

 Functions: identified functions must be exercised.

 Output: identified classes of application outputs must be exercised.

 Systems/Procedures: interfacing systems or procedures must be invoked.

Organization and preparation of functional tests is focused on requirements, key functions, or

special test cases. In addition, systematic coverage pertaining to identify Business process
flows; data fields, predefined processes, and successive processes must be considered for
testing. Before functional testing is complete, additional tests are identified and the effective
value of current tests is determined

42
6.2 Test Cases:

Test Case Test Case Test Test Case Expected Actual Test Case
Id Name Purpose Condition Result Result Result

1 Admin Check If admin Grant Admin Pass

username details are access to successfully
Login
and not correct, the logs into
password display applicable the system
main upon
system submission
of correct
login
credential.

2 Mail Check If email id The email The email Pass

valid is not contains contains
email id correct one one special
display special character
invalid character and domain
(@) and extensions
domain (.com and
extension .in).
(.com and
.in)

43
Test Test Test Test Case Expected Actual Result Test
Case Case Purpose Condition Result Case
Id Name Result

3 Add To ensure If product New If Product details Pass

Foods that the new name is Product entered already
product already details exists in the
details exists in the successfully system ,error
added to the system, added to the message is
system error system displayed. If the
successfully. Message product details of
should the new Product
display details does not
exit in the system
,new user is
added.

44
SYSTEM IMPLEMENTATION
45
 CHAPTER 7

SYSTEM IMPLEMEANTATAION

System implementation is the process of defining how the information system should
be build, ensuring that the information system is operational and used , ensuring that the
information system meets quality standard.

7.1 Steps to implementation the system:

The implementation of the Power Distribution System can be done by the following steps:

I Server:

Step 1: Install the Visual Studio and MySQL

Step 2: Login with the proper username, password and server name

Step 3: Creating the required table in the server.

Step 4: Add the references to the SQL.

Step 5: Define and establish the connection.

Step 6: Define and establish the record set.

Step 7: Whenever need to use the connection have to create new connection and record set.

Step 8: Whenever need to use the connection and record set can open and close the
connection.

II Client:

Step 1: Connect to the server machine.

Step 2: In Command Prompt run the application as ng serve

46
Step 3: Type the URL in the browser.

47
CONCLUSION AND FUTURE ENHANCEMENT

48
 CHAPTER 8

CONCLUSION AND FUTURE ENHANCEMENT

8.1 Conclusion

It has been a great pleasure for me to work on this exciting and challenging project.
This project proved good for me as it provided practical knowledge of not only programming
in HTML, CSS and ANGULAR web-based application and no some extent Windows
Application and SQL Server, but also about all handling procedure related with “Food
Ordering”. It also provides knowledge about the latest technology used in developing web
enabled application and client server technology that will be great demand in future. This will
provide better opportunities and guidance in future in developing projects independently.

8.2 Future Enhancements

The current system can be extended to allow the users to create accounts and save
foods in to wish list. The users could subscribe for price alerts which would enable them to
receive messages when price for foods fall below a particular level. The current system is
confined only to the ordering cart process. It can be extended to have an easy to use check out
process. Users can have multiple shipping and billing information saved. During checkout
they can use the drag and drop feature to select shipping and billing information.

49
 APPENDICES

50
 CHAPTER 9

APPENDICES

9.1 SAMPLE CODING

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OrderMyFood</title>
<base href="/">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dosis&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>
</html>
<div class="cart-item" *ngFor="let cartItem of cartItems">
<h4>{{cartItem.name}}</h4>
<div class="price-input">
<button mat-mini-fab color="accent" (click)="removeQuantity(cartItem)">
<mat-icon>remove</mat-icon>
</button>

51
 <mat-form-field class="quantity-form-field">
<mat-label>Quantity</mat-label>
<input matInput type="text" [(ngModel)]="cartItem.quantity">
</mat-form-field>
<button mat-mini-fab color="accent" (click)="addQuantity(cartItem)">
<mat-icon>add</mat-icon>
</button>
</div>
<button mat-raised-button color="warn" class="remove-menu"
(click)="removeItem(cartItem)">
Remove Item
</button>
</div>
<mat-form-field appearance="fill">
<mat-label>Sort By</mat-label>
<mat-select [(value)]="selectedValue">
<mat-option [value]="sort.value" *ngFor="let sort of sortOptions"
(click)="sortHotels(selectedValue)">
{{sort.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>

<app-nav-bar [userName]="userName"></app-nav-bar>
<div class="hotel-container">
<div class="menu-bar">
<h3 class="tagline">Choose your favourite one</h3>
<div class="filters">
<app-search-bar (searchQueryEvent)="searchQuery($event)"></app-search-bar>
<app-dropdown [selectedValue]="selectedValue" [sortOptions]="sortOptions"
(sortEvent)="sortHotels($event)"></app-dropdown>
</div>
</div>

52
<div class="hotel-cards" [class]="{'empty-search': !hotels.length}" *ngIf="!hotels.length">
<div class="empty-hotel">
<mat-spinner *ngIf="!hotelsConstant.length"></mat-spinner>
<h3 *ngIf="hotelsConstant.length">
No Hotels found!
</h3>
</div>
</div>
<div class="hotel-cards">
<div *ngFor="let hotel of hotels" class="hotel">
<app-hotel-card [hotelName]="hotel.name" [hotelThumbnail]="hotel.thumbnail_image"
[hotelImage]="hotel.feature_image"
[cuisines]="hotel.cuisines" [rating]="hotel.rating" [review]="hotel.reviews"
(click)="goToHotel(hotel)" ></app-hotel-card>
</div>
</div>
</div> <mat-card>
<mat-card-header>
<div mat-card-avatar [ngStyle]="{'background-image': 'url(' + hotelThumbnail +
')'}"></div>
<mat-card-title title="{{hotelName}}">{{hotelName}}</mat-card-title>
<mat-card-subtitle title="{{cuisines}}">{{cuisines}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image width="400" height="300" src="{{hotelThumbnail}}" alt="Hotel
{{hotelName}}">
<mat-card-content>
<p>Rating: <span class="rating-star">{{'★'.repeat(math.round(rating))}}</span></p>
<p>Review: {{review}}</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="warn">Order Now</button>
</mat-card-actions>
53
</mat-card> <div class="menus-container">
<h3 class="menu-header">Order Now</h3>
<mat-card class="menu" *ngFor="let menu of hotel.menu">
<mat-card-header>
<mat-card-title>{{menu.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
{{menu.desc}}
</p>
</mat-card-content>
<mat-card-actions>
<span>{{'\u20B9'}} {{menu.price}}</span>
<button mat-raised-button class="order" (click)="addToMyCart(menu)">
Add to Cart
</button>
</mat-card-actions>
</mat-card>
</div> <mat-form-field>
<mat-label>Search</mat-label>
<input matInput type="text" [(ngModel)]="hotelSearch"
(ngModelChange)="searchQuery($event)" autocomplete="off">
<button mat-button *ngIf="hotelSearch" matSuffix mat-icon-button aria-label="Clear"
(click)="clearSearch()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field> <div class="navbar-container">
<img src="/assets/logo.png" class="logo" (click)="goToHome()">
<div class="user-profile" *ngIf="userName">
<p class="greetings">Hello, {{userName}}</p>
<ngx-avatar name="{{userName}}" textSizeRatio="2.5" bgColor="#f5f5f5"
fgColor="#9c27b0"></ngx-avatar>
</div>
</div>
54
<mat-form-field appearance="fill">
<mat-label>Sort By</mat-label>
<mat-select [(value)]="selectedValue">
<mat-option [value]="sort.value" *ngFor="let sort of sortOptions" (click)="sortHotels(selectedValue)">
{{sort.viewValue}}
</mat-option>
</mat-select>
</mat-form-field></div> <mat-form-field>
<mat-label>Search</mat-label>
<input matInput type="text" [(ngModel)]="hotelSearch"
(ngModelChange)="searchQuery($event)" autocomplete="off">
<button mat-button *ngIf="hotelSearch" matSuffix mat-icon-button aria-label="Clear"
(click)="clearSearch()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field> <div class="navbar-container">
<img src="/assets/logo.png" class="logo" (click)="goToHome()">
<div class="user-profile" *ngIf="userName">
<p class="greetings">Hello, {{userName}}</p>
<ngx-avatar name="{{userName}}" textSizeRatio="2.5" bgColor="#f5f5f5"
fgColor="#9c27b0"></ngx-avatar>
</div>
</div>

55
9.2 Screenshot

Figure:9.2.1 User Name

Figure:9.2.2 Dashboard page

56
Figure:9.2.3 Sort by Review or rating

Figure:9.2.4 Food Order Page

57
Figure:9.2.5 Food Added to Cart

Figure:9.2.6 Cart Details

58
Figure:9.2.7 Notification Page

Figure:9.2.1 Payment Page

59
 REFERENCE

REFERENCE

BOOK REFERENCES

1) Shyam Seshadri “Angular: Up and Running: Learning Angular, Step by Step” First
published 2018. ‘O’ Really.

60
 2) Doguhan Uluca “Angular for Enterprise Ready Web Applications” First published
Packet Publishing.

WEB REFERENCES

 https://angular.io/guide/http
 https://www.positronx.io
 http://www.bezkoder.com

61