ISSN (Online) 2581-9429

IJARSCT
International Journal of Advanced Research in Science, Communication and Technology (IJARSCT)

Volume 2, Issue 5, May 2022

Impact Factor: 6.252

Restaurant Billing System using HTML, CSS and

JavaScript
Mr. Sudarsanam1, Eber Sheckel E2, Ghoushick A3, Hariharan S4
Assistant Professor, Department of Cyber Security1
UG Scholar, Department of Computer Science and Engineering2,3,4
SRM Valliammai Engineering College, Chengalpattu, Tamil Nadu, India

Abstract: This Billing system project reduces the manual work for managing bills, payment, cash etc. It
collects and manages the details about the customers and their ordered foods and its prices.it maintains the
records of available foods as well as the prices of the food that are available in the restaurant. It also
maintains the customer choice on their food, prices and its quantity. It excels in the instant calculation to
display the total amount to be paid by customer. The main objective of this project is to display the final bill
for the foods that are ordered by the customer accurately.

Keywords: billing system, displaying bill, instant calculation, html, CSS, Java script

I. INTRODUCTION
E-billing is the delivery of electronic bills to end consumers (B2C) and providing a payment option for them and it can
simply be explained as a technology which enables the replacement of paper with electronic documents delivered through
email or a website .Telecommunication Billing is a process of collecting credit usage, aggregating it, applying required
charges and finally generating invoices for the customers. Telecom Billing process also includes receiving and recording
payments from the customers. But this billing system in telecommunication is a very sensitive part and it is faced with a lot
of challenges like the overcharging which makes customers/ users complain. This problem may arise from the rating , that
is rate given to each call lines and the time by the inaccuracy of the billing system Most of the billing systems have poor
customer service thereby not given room for customer complaint and attention to their complaints.

A. System overview
The aim of this project is to create an application that should provide service to the user, collect user usage records, and
generate invoices of each credit expire, each billing cycle depends on the billing type, collect payments and adjust customers
balances. This Billing system project reduces the manual work for managing bills, payment, cash etc. It collects and manages
the details about the customers and their ordered foods and its prices. Adds and maintains the records of available foods in
the restaurant. Maintains the prices for the food that are available in the restaurant. It also excels in the instant calculation
to display the total amount to be paid by customer. Maintains the customer choice on their food, prices and its quantity.
Performs the calculation of the amount to be paid by the customer. Displays the amount to the customer.

II. LITERATURE SURVEY

M Mahaputra Hidayat & et.al.(2020)[1]: Culinary business is a business opportunity that is most in-demand, E Bill Resto
is a restaurant billing system that was developed by involving several selling places/restaurants with the name of a brand
that is connected to the parent company by a database server. With an integrated system, all revenue from restaurant sales
can be monitored in real time. The system design is made by implementing the RESTFul API architecture with security
access tokens The Master Application as a provider of Embedded Data Service Web resources on 3 Restaurant Information
Systems, It does the synchronization of 3 Web Service Clients, Data From the Master-Slave Side was obtained by testing 3
data sampling, where both applications are tested QoS (Quality of Service) .This bill system should be simple easy to
understand considering the Indian population. The people who work do the billing don’t always seem to have the skill or
intelligence to work with complex mechanisms. To conclude ,This paper helps to provide a simple billing system for anyone
to understand it.

Copyright to IJARSCT DOI: 10.48175/IJARSCT-4104 603

www.ijarsct.co.in
 ISSN (Online) 2581-9429
IJARSCT
International Journal of Advanced Research in Science, Communication and Technology (IJARSCT)

Volume 2, Issue 5, May 2022

Impact Factor: 6.252
W.Amer & et.al.,(2010). [2] :The energy sector of any country plays a major role in its economy in today's world. The
reduction of Transmission and Distribution losses is a key discussion point at all forums. In parallel to such efforts the
automation of theft monitoring and generation of e-Billing is a requirement of the time. The automation in metering and
billing will not only help tackle the problem of distribution losses to some extent but will also help in using the manpower
of electricity distribution companies in a more effective manner. The application of Automated Meter Reading (AMR)
system, e-Billing and e-Monitoring using Machine to Machine (M2M) connectivity is the primary theme of this paper. It
explains the design of a prototype meter for AMR application, its M2M connectivity to the central server and generation of
e-bills for the customers. Finally to conclude this paper use the above mentioned technology to reduce the distribution and
transmission loss by providing a automated billing ysttem
R. Raju & et.al.,(2020). [3]:The technology of automation has brought out major changes in almost all the fields. The aim
behind innovations today is to reduce the manual work and to make the process efficient as well as accurate. One of the
systems that has remained conventional since a long time is the electricity bill generation. There are a number of issues that
arise due to manual billing which includes incorrect computation/calculations, improper meter reading, delayed bill delivery,
rounding off issues etc. Another major drawback of manual billing is the storage of the bills and maintaining a history of
electricity consumption. To conclude, this paper provides a automated billing system with proper computation to generate
a electricity bill.
Yen-Cheng Chen & et.al.,(2018). [4]: The new billing approaches are manly to apply the integrated concept of data
warehouse with relevant billing data; in addition, use the methods of mining association rule to sort out the Billing Quantities
Pattern and then figure out the billing quantities. Moreover, employ the Decision Tree algorithm of data mining to find out
the unit billing price. As a result, the new billing approach is made of the methods of data warehouse and date mining. This
study is mainly focused on improving the operation of current billing system to establish the new functionality of the Billing
quantities and Billing price. As for the benefit of these two new functions, it is not only able to lead into clients' billing
systems, but it is also capable of upgrading the efficiency in rapid setup; especially for the enterprises that already possessed
billing system internally but not yet implemented. To conclude this paper uses data mining technique to improve billing
system performance in semiconductor industry

III. EXISTING SYSTEM

With increasing population the demand for restaurants have skyrocketed, the human resource required to maintain short
queue times is ever increasing. This creates a need for automation in the billing system. The huge increase in the demand
for Food based e-commerce paves way for an efficient and simple billing system , which should look clean, easy on the eyes
and not complicated.

IV. PROPOSED SYSTEM

The aim of this project is to create an application that should provide service to the user, collect user usage records, and
generate invoices of each credit expire, each billing cycle depends on the billing type, collect payments and adjust customers’
balances. This Billing system project reduces the manual work for managing bills, payment, cash etc. It collects and manages
the details about the customers and their ordered foods and its prices. Adds and maintains the records of available foods in
the restaurant. Maintains the prices for the food that are available in the restaurant. It also excels in the instant calculation
to display the total amount to be paid by customer. Maintains the customer choice on their food, prices and its quantity.
Performs the calculation of the amount to be paid by the customer. Displays the amount to the customer.

V. METHODOLOGY
The proposed system makes use of four modules that work together to build an efficient restaurant billing system Home
Module, Menu Module, Order Module and Display Bill Module. The behaviour and interaction of the above mentioned
modules are represented in the following figures.

A. Home Module
This module helps to inform the user about the restaurant name as well as its motive by showing restaurant's slogan.

Copyright to IJARSCT DOI: 10.48175/IJARSCT-4104 604

www.ijarsct.co.in
 ISSN (Online) 2581-9429
IJARSCT
International Journal of Advanced Research in Science, Communication and Technology (IJARSCT)

Volume 2, Issue 5, May 2022

Impact Factor: 6.252
This module consists of two buttons which are menu and exit button.If the user clicks menu button then he/she will be
redirected to the menu page of this restaurant and if the user wants to come out of this module then he can do this by clicking
the exit button.

Fig. 1. Home Module

B. Menu Module
This module helps the user to view the menu page of this restaurant. This module user can able to know about the different
types of foods like pizza, snacks items and beverages as well as desserts and its prices that are available in this restaurant.
This module also shows various images of delicious food items and its affordable prices to attract many customers After
viewing this menu page user can redirect to order page by clicking the order button provided
By this module

Fig. 2. Menu Module

C. Order Module:
This module contains an image of the menu page so that a user can refer this image to order his/her favourite food items
instead of redirecting to previous page which causes a lot of time for user to order various food items and also can test
his/her patience. This module collects and stores information about the customer and as well as their ordered food items as
well as its prices. If the customer doesn't enter his/her name then a pop up message will be shown to alert the customers
which helps the restaurant to avoid any difficulties in near future finally this module contains a calculate button which helps
the customer to redirect to the display bill page

Copyright to IJARSCT DOI: 10.48175/IJARSCT-4104 605

www.ijarsct.co.in
 ISSN (Online) 2581-9429
IJARSCT
International Journal of Advanced Research in Science, Communication and Technology (IJARSCT)

Volume 2, Issue 5, May 2022

Impact Factor: 6.252

Fig. 3. Order Module

D. Display Bill Module

This module helps the customer to view the bill which contains restaurant name ,and various fields like food name, food
quantity and food prices. This module collects the information like food name, quantities as well as its prices from the form
which is used in the previous page and then display these collected things in this bill for the user to check whether the food
items that it shows is the one that they ordered using form or not. Finally, it also displays the total amount to be paid by the
customer which helps the cashier to reduce any manual work and it also easy for the cutomer to do the payment.

Fig.4. Display Bill Module

VI. IMPLEMENTATION
Browsers that can support the basic HTML 5.0 can run the system with ease. This system is so simple that it doesn’t need
any other additional software to be run properly.
This system uses 5 modules.
1. Home screen
2. Menu Module
3. Order module
4. Display bill Module
These modules collaborate together and makes the system work efficiently. Each module does a significant job to ensure
the perfect data flow and user experience. The behaviour of all the mentioned modules are explained. This project gets
implemented by using notepad for each html as well as css files.this project consist of four modules each of them has been
structured using html code ,presented more attractive using css and interactive using javascript code. At first module,html
Copyright to IJARSCT DOI: 10.48175/IJARSCT-4104 606
www.ijarsct.co.in
 ISSN (Online) 2581-9429
IJARSCT
International Journal of Advanced Research in Science, Communication and Technology (IJARSCT)

Volume 2, Issue 5, May 2022

Impact Factor: 6.252
code for home page helps the customer to redirect to menu page and he/she can exit the home page if he/she wants to by
clicking the exit button.when the customer clicks the menu button ,next page will be shown .This action is provided by html
and customer can view the foods that are available in the restaurant .css has been used here to attract the customer by adding
various colors and aligning some beautiful pictures of foods in this menu.this page contains an order button so when
customer clicks it he will be redirected to order page which contains the picture of menu page as well as a form for collecting
the customer and his/her details of foods. All of these has been created using html code and aligned more perfectly by using
some appropriate Css styles. But as of now the details will be simply collected so here javascript is used to check whether
the detail that has been entered in this form are in correct format or not .if not a pop message will be displayed to alert the
customers as well as to calculate the amount of the foods that has been ordered by the customer. After details of the customer
and his/her food has been checked , customer can able to clicks the submit button. After this button gets clicked , javascript
helps to display a bill in next page which contains some fields like food name,food quantity and food price as well as the
total amount which has been calculated. Thus this project uses Html ,Css and Javascript to help the customer in viewing the
menu,ordering the foods as well as showing the accurate amount to be paid.

VII. CONCLUSION
Thus, the proposed system fulfils its main objective to provide a simple web billing system which is easy to implement. It
should provide service to the user, collect user usage records, and generate invoices of each credit expire, each billing cycle
depends on the billing type, collect payments and adjust customers’ balances. This system brings out a simple, easy to use
billing system, that is not too complicated on the eyes and could actually be understood even by the society’s underprivileged
sections.

A. Future Scope
The software has a very high potential for future modifications and improvements, the code is so simple and easy to
implement so that it can be easily deployed in other areas such as small shops viz. general stores, textiles, pharmacies etc.
The introduction of newer technologies could also be a further future improvement let’s say the use of sensors for automated
billing could be something easy and a really effective method if deployed. As we are well aware the world is going digital
now and it makes sense to go paperless. Customers nowadays have very little patience and any company would lose a lot
of money if a customer is made to wait for a long time for something as simple as a checkout bill. Hence using modern
technologies can be extremely vital for the reputation of the company and the customers will be encouraged to purchase
more in said location. A further improvement can be made with the integration of a database, to keep track of the customer
details, which only makes sense if it’s a large organisation but can still be implemented with ease.

REFERENCES
[1]. Design of Restaurant Billing System by- M Mahaputra Hidayat, R Dimas Adityo, Alek Siswanto DOI:
10.1109/ICoSTA48221.2020.1570615039 https://ieeexplore.ieee.org/document/9079304
[2]. Comprehensive e-Monitoring, e-Management and e-Billing (eM2B) system with zoom-in and zoom-out
capabilities to reduce electricity distribution losses for developing countries by- W. Amer, Y. Attique, A. Nadeem ,
Abdul Ghafoor DOI: 10.1109/SYSTEMS.2010.5482353 https://ieeexplore.ieee.org/document/5482353
[3]. A Comparison of Smart Electricity Billing Systems-by R. Raju, P. Madhumathy, N. Nithiya veni, G. Pavithra DOI:
10.1109/ICSCAN49426.2020.9262437 https://ieeexplore.ieee.org/document/9262437/
[4]. Using data mining technique to improve billing system performance in semiconductor industry by -Yeh-Cheng
Chen, Yu-Teng Chang, Y-S Kan, R. S. Chen, S. F. Wu DOI: 10.1109/INFOCT.2018.8356830
https://ieeexplore.ieee.org/document/8356830/
[5]. W3 Schools - https://www.w3schools.com/Css/
[6]. GeeksforGeeks - https://www.geeksforgeeks.org/html/?ref=ghm
[7]. Tutorials Point - https://www.tutorialspoint.com/css/index.htm
[8]. Domino’s Pizza - https://www.dominos.co.in/
[9]. Pizza Hut - https://www.pizzahut.co.in/
[10]. YouTube - https://www.youtube.com/watch?v=_TN94lBFI1s
Copyright to IJARSCT DOI: 10.48175/IJARSCT-4104 607
www.ijarsct.co.in
 ISSN (Online) 2581-9429
IJARSCT
International Journal of Advanced Research in Science, Communication and Technology (IJARSCT)

Volume 2, Issue 5, May 2022

Impact Factor: 6.252
[11]. YouTube - https://www.youtube.com/watch?v=YyTlYTLFDlo
[12]. Restaurant billing system in C(YouTube) - https://www.youtube.com/watch?v=_2msghvRn5M
[13]. Print Button - https://stackoverflow.com/questions/16894683/how-to-print-html-content-on-click-of-a-button-
but-not-the-page
[14]. Billing system (GitHub)- https://github.com/ama/System%3A%20Customer%20Billing%20System%20Project
%20is,shops%2C%20cafes%20etc.%20for%20billing%20to%20the%20customer.
[15]. HTML Color Codes - https://html-color.codes/

Copyright to IJARSCT DOI: 10.48175/IJARSCT-4104 608

www.ijarsct.co.in