Web Applications & Engineering Lab

Faculty of Engineering
Department of ICT
IoT Program

Course Title: Web Application Engineering Lab

Course Code: ICT-4258

Project-02
Project Name: Cafe BDU Billing System.

Submitted To: Submitted By:

Nurjahan Nipa Nusrat Jahan Akhi

Lecturer, ID: 1901040
Department of ICT, BDU. Session: 2019-20

Md. Habibur Rahman T. M. Mehrab Hasan

Lecturer, ID: 1901049
Department of ICT, BDU. Session: 2019-20

Submission Date: 6 August 2022

1|P age
 Web Applications & Engineering Lab

Table of Contents
Abstract ...................................................................................................................................................... 4
Acknowledgement ..................................................................................................................................... 5
Introduction ............................................................................................................................................... 6
1.1 Project Background .......................................................................................................................... 6
1.2 Problem Statement .......................................................................................................................... 6
1.3 Objective .......................................................................................................................................... 7
1.4 Scope ................................................................................................................................................ 7
1.4.1 Target User ................................................................................................................................ 7
1.4.2 Target Area ................................................................................................................................ 7
1.4.3 Project Deliverable .................................................................................................................... 8
1.5 Project Significance .......................................................................................................................... 9
1.6 Expected output ............................................................................................................................... 9
Literature Review & Project Methodology .............................................................................................. 10
2.1 Introduction.................................................................................................................................... 10
2.2 Facts & Findings.............................................................................................................................. 10
2.2 Project Methodology ..................................................................................................................... 10
2.3 Prototype Model ............................................................................................................................ 10
2.3.1 Planning Phase ........................................................................................................................ 11
2.3.2 Analysis Phase ......................................................................................................................... 11
2.3.3 Design Phase ........................................................................................................................... 11
2.3.4 Implementation Phase ............................................................................................................ 11
2.3.5 Testing Phase ........................................................................................................................... 11
System Architecture ................................................................................................................................. 12
3.1 Introduction.................................................................................................................................... 12
3.2 Admin Module................................................................................................................................ 12
3.3 Staff module ................................................................................................................................... 12
3.3 Services Diagram of Modules ......................................................................................................... 13
OVERALL DESCRIPTION ............................................................................................................................ 14
4.1 Product Perspective ....................................................................................................................... 14
4.2 Product Functions .......................................................................................................................... 14

2|P age
 Web Applications & Engineering Lab

4.3 The features of the System Users .................................................................................................. 14

4.4 User Classes and Characteristics .................................................................................................... 15
4.5 Operating Environment.................................................................................................................. 15
4.5.1 Constraints .............................................................................................................................. 15
4.5.2 Use case model........................................................................................................................ 15
TECHNOLOGY OVERVIEW ........................................................................................................................ 16
5.1 PHP ................................................................................................................................................. 16
5.2 MySQL ............................................................................................................................................ 16
5.3 Apache ............................................................................................................................................ 17
5.4 XAMPP ............................................................................................................................................ 17
5.4.1 Obtaining and Installing XAMP ................................................................................................. 17
5.4.2 Creating a Database and Inserting Data ................................................................................... 18
5.5 Ajax ................................................................................................................................................. 19
5.6 CRUD............................................................................................................................................... 19
5.7 jQuery ............................................................................................................................................. 19
5.8 Json ................................................................................................................................................. 19
PROJECT DESCRIPTION ............................................................................................................................. 20
6.1 Introduction.................................................................................................................................... 20
6.2 Description of Root Directory Contents ......................................................................................... 21
6.3 Description of Database tables ...................................................................................................... 22
NON- FUNCTIONAL REQUIREMENT ......................................................................................................... 24
7.1 Performance Requirements ........................................................................................................... 24
7.2 Safety Requirements ...................................................................................................................... 24
7.3 Security Requirements ................................................................................................................... 24
INTERFACE OF OUR PROJECT ................................................................................................................... 25
8.1 Login Page....................................................................................................................................... 25
8.2 Home Page [Admin] ....................................................................................................................... 25
8.3 Home Page [Staff] .......................................................................................................................... 26
BIBLIOGRAPHY ......................................................................................................................................... 27
Conclusion ................................................................................................................................................ 27

3|P age
 Web Applications & Engineering Lab

Abstract

"Cafe BDU Billing System (CBBS)" is web application to restaurant management. This system
wakes to provide service facility to the café and to the customer. The services that are provided
is food ordering and billing by the customer through the system online, admin information
management and staff information management, menu information management and bill
management. Main objectives to build this system is to provide ordering and bill service by online
to the customer. With this system online, ordering and bill management will become easier and
systematic to replace traditional system where paper is used.

4|P age
 Web Applications & Engineering Lab

Acknowledgement

A study of this volume can never be the outcome of a single person or just a mere group of
dedicated students, so we express our profound sense of gratitude to those who have extended
their wholehearted helps and supports to us in completing this report because successful
completion of any work requires guidance and help from several people. Firstly, we thank our
almighty Allah for this opportunity. Then, we greatly acknowledge our university ‘Bangabandhu
Sheikh Mujibur Rahman Digital University, Bangladesh’ for providing us an opportunity to study
here and write our report on ‘Café BDU Billing System’. In addition, we wish to express our
deepest sense of gratitude to our honorable teacher ‘Nurjahan Nipa mam’ & ‘Habibur Rahman
Sir’ for permitting us to carry out this work and for her guidance and support. Last but not the
least, we extend our whole-hearted gratitude for the invaluable contribution of our parents for
their blessings and earnest affections and all those persons ‘behind the veil’ for their necessary
support, which enabled us to complete this work.

5|P age
 Web Applications & Engineering Lab

Introduction

1.1 Project Background

“Café BDU Billing System” is the system for manage the cafe business. The main point of
developing this system is to help cafe administrator to manage the cafe business and help
customer for online ordering and billing system.
The project is in developing stage because many cafes have a lot of difficulties to manage the
business such as customer ordering and billing system. By using manual customer ordering, it is
difficult for the staff to keep the correct customer order information and face hassle while
managing the billing.
So, Café BDU Billing System will develop to help the cafe administrator to manage cafe
management and for customer to make their online ordering and billing. Other than that, this
project is to upgrade the manual system and make the business easily to access and systematic.

1.2 Problem Statement

Nowadays, many cafes & restaurants manage their business by manual especially taking
customer orders. Today, cafe staff takes the customer ordering by manual system with using
paper. This is the problem for a café staff where there is a probability to lose and duplicates
customers’ information’s. Additionally, it would affect to reputation of café in operating
management of ordering.
Besides, the café staff information is also kept manually in paper, and this is difficult for the
administrator to find staff information. There remains a probability of missing the paper and
difficult to arrange the schedule. Sometimes, staff information and customer information are
important to café administrator for reference in the future.
Furthermore, cafe side needs management in the section menu. This is important to café staff to
manage the menu. Besides, this section is for the customer to view the menu that the café has
prepared and then they make their ordering.
As a result, the current (manual) system is not applicable and appropriate anymore.

6|P age
 Web Applications & Engineering Lab

1.3 Objective

Based on the problems stated above, the objectives of the project are:

1. To develop online ordering and billing system in café.

2. To develop the user interface for Café BDU Billing system.
3. To provide online menu information for customer.

1.4 Scope

This section consists of three components which is target user, target area and project
deliverables.

1.4.1 Target User

The groups of users that had been identified to use the system are staff and administrator.

❖ Staff

This staff will register to be a member to use the online system of this system. The staff
can change their name and password, can access some specific functions as well as the
billing menu.

❖ Administrator

Administrator is the person who will manage the entire system. This type of user will also
do maintenance and control the application of this system. Administrator takes a
responsibility to register new staff, register new menu into database etc.

1.4.2 Target Area

This system will be placed at our university cafe.

7|P age
 Web Applications & Engineering Lab

1.4.3 Project Deliverable

Regarding to the module that had been identified, the flow of an activity will be described in term
of staff registration module, customer online ordering and billing module, feedback module,
menu module and generate report module.

❖ Staff Registration Module

Staff registration module contains staff's information such as staff personal information
and other information related to that staff. Then, all of this information is recorded into
database.

❖ Customer Registration Module

Customer registration module contains customer's information such as customer

personal information and other information related to that customer. Then, all of
this information is recorded into database.

❖ Customer Ordering & Billing module

Customer ordering & billing module provides a menu and a payment system to choose
the food to their likings and see the food rates.

❖ Menu Module

Menu module is food that restaurant prepared for customer. Customer can view the
menu and make their decision for what to order.

8|P age
 Web Applications & Engineering Lab

❖ Report Module

System provides an option for generate a report. The contents of the report as the
following:
1. The report of customer ordering and billing.
2. Ordered food's information and staff information.
3. Total cost of the ordered food.
4. Profit business for café.

1.5 Project Significance

This system will be going to help the customer, staff, and administrator in a café especially in the
part of online ordering and billing. Most of the café has a problem of the ordering and billing. The
result of online ordering and billing will give customer easy to make ordering and payment and
hopefully can smoothen up the job of administrator and staff. This system also produces a
computerized system in defining the best solution in each ordering and payment problem faced
by customer and administrator.

1.6 Expected output

The expected output from this project is a system-based that will be able to store customer's
information, staff's information, menu's information, store customer information of online
ordering and payment and customer's suggestion and generate profit business report. Otherwise,
this system will change form manual system to computerized system.

9|P age
 Web Applications & Engineering Lab

Literature Review & Project Methodology

2.1 Introduction

The second phase in delivering a system is Literature Review & Methodology. The purpose of
Literature Review is to help in explaining how far the question needs to be investigated to maps
out the requirement needed. A Literature Review is a summary of previous research on a topic.
Literature Review can be a part of a larger report of a research project. This chapter explains
about facts or statement which known as Literature Review that will be used as guidance in
developing the system.
Other that, methodology will elaborate prototyping model approach. To develop this system,
methodology should be chosen for one important part of the Literature Review.

2.2 Facts & Findings

Facts and findings establish what the existing system does and what the problems are and leads
to a definition of a set of options from which users may choose their required system (Yeates and
Wakefield, 2004).
This section will map out different perspective which related to the project that will be
developed, It focused on the how far the online ordering and reservation table is important to
customers and administrators. In the other situation, it will describe any element or method
which is useful to be used for the purpose of searching and gathered useful information in
developing this system.

2.3 Project Methodology

To develop this system, we have been identified a suitable methodology to be followed during the
implementation of Café BDU Billing System (CBBS). Prototyping model explains detail in this section.

2.4 Prototype Model

Based on explanation of Prototyping model via the internet, prototype model is described below,

10 | P a g e
 Web Applications & Engineering Lab

2.4.1 Planning Phase

The project planning starts in this phase. First, the information is gathered from the café and the
end users about the manual system. Before starting built the system, problem must be analyzed
in manual system then try to solve the problem.

2.4.2 Analysis Phase

During this phase, the manual system is investigated, and improvement opportunities are
identified based on the information gathered in the Planning phase. The user requirements are
gathered, analyzed, and reviewed.

2.4.3 Design Phase

The output produced in the Analysis phase is used to guide the design process of this system.
During this phase, database will be designed. It is design based on requirement needed by this
system. Besides that, an interface will also be designed.

2.4.4 Implementation Phase

During this phase, the system is built by using PHP, AJAX, CSS, JavaScript, Json & CRUD
operations. Database and interface design from design phase will be developed. Then, process
of written code will be done. In this system, programming had divided into four, CRUD
Operations, AJAX, PHP language and MySQL database.

2.4.5 Testing Phase

After completing to develop the system, testing phases will be done. This is important to test
whether code which had been implemented is correct or not. If there is error occurred, a
solution will be finding to overcome the problem. If there is an error, a modifying code will be
done from the beginning phase of development.

11 | P a g e
 Web Applications & Engineering Lab

System Architecture
3.1 Introduction

In this chapter, modules of the website are described. It includes software interfaces, hardware
interfaces, software requirements, hardware requirements etc. This project is made under an
online project which works as a website, and it also uses for the billing management of the café.
It also includes the information pages of the dashboard, order giving system, order taking system,
payment system & reports.

3.2 Admin Module

This module is for the administrator of the cafe to get a unique username and a password for
registration and login to the admin dashboard. The admin has the privilege to add, change or
modify, delete (CRUD Operations) any food order, item, staff etc. All the functions of the system
are accessible only to the admin and staff has only a limited access.

3.3 Staff module

This module is for the staff of the café to get a unique username and password for registration
and login to the staff dashboard. The staff has the privilege to only take orders and take payment
and make a receipt of it through billing system.

12 | P a g e
 Web Applications & Engineering Lab

3.4 Services Diagram of Modules

❖ Admin Module

Take/Modify/Delete
Orders

ADD/Modify/Delete new
food categories

Admin ADD/Modify/Delete
new food products

Checkout Payments

ADD/Delete new or old

staff

❖ Staff Module

Take/Modify/Delete
Orders

Staff
Checkout Payments

13 | P a g e
 Web Applications & Engineering Lab

OVERALL DESCRIPTION

4.1 Product Perspective

The website Café BDU Billing System is aimed towards giving multiple customer service at a time
efficiently and accurately through an online system. It is very much different from the traditional
system where paper is used for all purposes in a café.

4.2 Product Functions

There are two different users who will be using this product:
➢ Administrator who can view and edit the details of any food & other services.
➢ Staffs who can only view and perform order taking and payment system.

4.3 The features of the System Users

❖ Administrator

➢ An Administrator can login into the system and perform any of the available operations.
➢ Can edit his/her username & password
➢ Can add/delete/update food items and prices.
➢ Can add & remove products.
➢ Can add & remove staffs.
➢ Can edit food information and prices.
➢ Add & Update payment system.
➢ Can access all the details of the student.

❖ Staff

➢ A staff can login into the system and perform some specific tasks.
➢ Can edit his/her username & password
➢ Can view product details.
➢ Can take orders and make a receipt.
➢ Can use the billing system.
➢ Can view the sales report.

14 | P a g e
 Web Applications & Engineering Lab

4.4 User Classes and Characteristics

There are mainly two kinds of users for the product. The users include:
➢ Administrator.

➢ Staff.

4.5 Operating Environment

The “Café BDU Billing System” can run on any browser (preferable to use Chrome browser).

4.5.1 Constraints

✓ Every user must be comfortable using computer.

✓ All operations are in English so user must have basic knowledge of English.

4.5.2 Use case model

❖ Use Case Model:

1. Admin: Responsible for managing all the functions and services.

➢ Login into the website

➢ Add / Remove Staff & Admin

➢ Add / Remove food products

➢ Add / Remove food items & prices

➢ Access the billing system

➢ View / Edit the users

➢ View / Edit username & password

2. Student: Has the access rights to view and edit their personal details.
➢ Login into the website.

➢ Add / Remove orders from customers

➢ Access the payment system

15 | P a g e
 Web Applications & Engineering Lab

TECHNOLOGY OVERVIEW
The technology selected for implementing Café BDU Billing System is PHP/MYSQL, AJAX,
JavaScript, jQuery, Json. XAMP software is used for creating & accessing database. Apache is used
as the HTTP server. The development was done in a ‘windows’ environment using adobe dream-
weaver CS5.

5.1 PHP

PHP is a general-purpose scripting language that is especially suited to server-side web

development where PHP generally runs on a web server. PHP code is embedded into the HTML
source document. Any PHP code in a requested file is executed by the PHP runtime, usually to
create dynamic web page content. It can also be used for command-line scripting and client-side
GUI applications. PHP can be deployed on many web servers and operating systems and can be
used with many relational database management systems (RDBMS). It is available free of charge,
and the PHP Group provides the complete source code for users to build, customize and extend
for their own use.

5.2 MySQL

MySQL is an Oracle-backed Open-source relational database management system (RDBMS)

based on Structured Query Language (SQL). MySQL runs on virtually all platforms, including Linux,
UNIX, and Windows. Although it can be used in a wide range of applications, MySQL is most often
associated with web applications and online publishing. MySQL is an important component of an
open-source enterprise stack called LAMP. LAMP is a web development platform that uses Linux
as the operating system, Apache as the web server, MySQL as the relational database
management system and PHP as the object-oriented scripting language. (Sometimes Perl or
Python is used instead of PHP.)

16 | P a g e
 Web Applications & Engineering Lab

5.3 Apache

The Apache HTTP Server is a web server software notable for playing a key role in the initial
growth of the World Wide Web. In 2009 it became the first web server software to surpass the
100 million web site milestone. Apache is developed and maintained by an open community of
developers under the auspices of the Apache Software Foundation.

5.4 XAMPP

XAMPP is a small and light Apache distribution containing the most common web development
technologies in a single package. Its contents, small size, and portability make it the ideal tool for
students developing and testing applications in PHP and MySQL. XAMPP is available as a free
download in two specific packages: full and lite. While the full package download provides a wide
array of development tools, XAMPP Lite contains the necessary technologies that meet the
Ontario Skills Competition standards. The light version is a small package containing Apache HTTP
Server, PHP, MySQL, phpMyAdmin, OpenSql, and SQLite.

5.4.1 Obtaining and Installing XAMP

17 | P a g e
 Web Applications & Engineering Lab

5.4.2 Creating a Database and Inserting Data

Now that we have run and tested Apache and PHP, the next step is running MySQL and creating
a database and table which will hold information to be used by our website. To start MySQL,
navigate to the XAMPP directory and run the mysql_start.bat batch file. The XAMPP package
contains an application called phpMyAdmin which allows developers to administer and maintain
MySQL databases.
We will be using phpMyAdmin to create a database and table and enter test data. Before testing
phpMyAdmin, make sure that both Apache and MySQL are running by opening their respective
batch files: apache_start.bat and mysql_start.bat. Along with Apache and MySQL running in the
background, we type http://localhost/phpMyAdmin/ into our web browser.
If successful we will be presented with a phpMyAdmin start page like the one shown below. The
first step with phpMyAdmin running is creating a new database. We create a new database by
directly executing SQL statements as shown in section 7.

18 | P a g e
 Web Applications & Engineering Lab

5.5 Ajax

Ajax is a set of web development techniques that uses various web technologies on the client-
side to create asynchronous web applications. With Ajax, web applications can send and retrieve
data from a server asynchronously without interfering with the display and behavior of the
existing page.
It is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated
asynchronously by exchanging small amounts of data with the server behind the scenes. This
means that it is possible to update parts of a web page, without reloading the whole page.

5.6 CRUD

CRUD is an acronym that comes from the world of computer programming and refers to the four
functions that are considered necessary to implement a persistent storage application: create,
read, update and delete.
In computer programming, create, read, update, and delete are the four basic operations of
persistent storage. CRUD is also sometimes used to describe user interface conventions that
facilitate viewing, searching, and changing information using computer-based forms and reports.

5.7 jQuery

jQuery is a fast, small, and feature-rich JavaScript library. jQuery is a JavaScript library designed
to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation,
and Ajax. The purpose of jQuery is to make it much easier to use JavaScript on your website.

5.8 Json

JavaScript Object Notation (JSON) is a standard text-based format for representing structured
data based on JavaScript object syntax. It is commonly used for transmitting data in web
applications. It is an open standard file format and data interchange format that uses human-
readable text to store and transmit data objects consisting of attribute–value pairs and arrays.

19 | P a g e
 Web Applications & Engineering Lab

PROJECT DESCRIPTION
6.1 Introduction

Café BDU Billing System can be used by various cafes to maintain the records of staffs, foods,
products, sales etc. easily. Achieving this objective is difficult using a manual system as the
information is scattered, can be redundant and collecting relevant information may be very time
consuming. All these problems are solved using this project

The directory structure of the project is as follows:

20 | P a g e
 Web Applications & Engineering Lab

6.2 Description of Root Directory Contents

assets: This folder contains all the CSS, jQuery & Json code for the pages of the website.
billing: This folder contains the data files which indicates the interface and functionalities of
billing page.
database: This folder contains the sql query of the database.
img: This folder contains the images used in this system website.
Admin_class.php: It contains all the codes in PHP of the interface, functions & services accessible
for the administrator.
ajax.php: It contains the code for ajax file.
categories.php: It contains the code for the food categories field on the website.
db_connect.php: It contains the PHP code to connect a database with the website.
header.php: It contains the PHP code for the header of the website.
Home.php: It contains the PHP code of the dashboard on the website.
index.php: It contains the PHP code for the front page of the website.
login.php: It contains the PHP code for the login box at the starting page.
manage_user.php: It contains the PHP code for managing different users where they can edit
and delete their user information.
navbar.php: It contains the PHP code for the navigation bar of the website.
orders.php: It contains the PHP code for the order functions on the website.
products.php: It contains the PHP code for the products functions on the website.
receipt.php: It contains the PHP code for the receipt functions used in the payment part.
sales_report.php: It contains the PHP code for managing all the sales report on the website.
site_settings.php: It contains the PHP code for the site settings of the website.
topbar.php: It contains the PHP code for the top bar function used on the website.
users.php: It contains the PHP code for the users who have access to the website.
view_order.php: It contains the PHP code for the order cart in the website.

21 | P a g e
 Web Applications & Engineering Lab

6.3 Description of Database tables

Database & its Tables

Table-1: “categories” Table

Table-2: “orders” table

22 | P a g e
 Web Applications & Engineering Lab

Table-3: order_items table.

Table-4: products table

Table-5: system_settings table

23 | P a g e
 Web Applications & Engineering Lab

Table-6: user table

NON- FUNCTIONAL REQUIREMENT

7.1 Performance Requirements

The proposed system that we are going to develop will be used as the main performance system
for providing help to the organization in managing the whole database of the café. Therefore, it
is expected that the database would perform functionally all the requirements that are specified.

7.2 Safety Requirements

The database may get crashed at any certain time due to virus or operating system failure.
Therefore, it is required to take the database backup.

7.3 Security Requirements

We are going to develop a secured database. There are different categories of users namely
Admin, Staff who will be viewing either all or some specific information form the database.
Depending upon the category of user the access rights are decided. It means if the user is an
admin, then he can be able to modify the data, append etc. All other users only have the rights
to retrieve the information about database.

24 | P a g e
 Web Applications & Engineering Lab

INTERFACE OF OUR PROJECT

8.1 Login Page

8.2 Home Page [Admin]

25 | P a g e
 Web Applications & Engineering Lab

8.3 Home Page [Staff]

26 | P a g e
 Web Applications & Engineering Lab

BIBLIOGRAPHY

❖ https://www.w3schools.com/php/php_ajax_php.asp

❖ https://api.jquery.com/jquery.aj

❖ https://www.tutorialrepublic.com/php-tutorial/php-mysql-crud-application.php

❖ PHP E-book by Robin Nixon

❖ HeadFirst PHP & MySQL by Lynn Beighley and Michael Morrison (O’Reilly)

Conclusion
The Café BDU Billing System (CBBS) is discussed in this work. The project is designed to solve the
challenges that the typical café fails to preserve. The CBBS was built with PHP, MYSQL, Ajax, CRUD
Operations, HTML, CSS, JavaScript, and jQuery, and it was hosted locally using Apache web
worker. The product improvement concept is also based on the Participatory Steady Process
Model (PIP Model). A useful breakdown of the framework and its core components is provided
to understand the framework's primary functions.

------------------------------------- Fi Amanillah --------------------------

27 | P a g e