Building a website for ordering pizza full stack Building a website for ordering pizza full stack Building a website for ordering pizza full stack
INTRODUCTION
Reason of picking this topic
In today's culinary landscape, diners crave not just flavorful meals but also personalized experiences, exemplified by the rising popularity of the "make your own pizza" trend This innovative approach empowers customers to customize their pizzas, selecting everything from crust type and sauce to an array of toppings By allowing patrons to engage in the creation process, this model not only fosters excitement but also significantly boosts customer satisfaction.
Creating a customizable pizza system enhances customer personalization while streamlining store operations Key features such as online ordering, ingredient management, and order tracking enable businesses to thrive in the digital age This innovative approach aims to deliver optimal technological solutions for both customers and pizza stores.
Objectives and functions of the systems
Building an online system that allows customers to design their own pizzas according to personal preferences while also supporting the store in managing operational processes efficiently
○ Develop a user-friendly interface that allows customers to easily select ingredients and customize their pizzas
○ Integrate an ordering system, online payment, and order status tracking
○ Support management of ingredient information, inventory levels, and order statistics
○ Enhance user experience and improve the store's business efficiency
Through the implementation of this project, we hope to provide high practical value to the food industry while promoting creativity and personalization in the customer experience
Sign-up/Sign-in (User/Admin)
Description
In today's food industry, personalizing the customer experience is essential for enhancing competitiveness and attracting consumers A prime example of this is the customizable pizza model, where customers can choose their preferred crust, sauce, and toppings However, implementing this model presents significant management and operational challenges, particularly when relying on manual processes or insufficient technological support.
○ Lack of an online system that allows customer to customize their own pizza in an easy way
○ Complicated, time-consuming ordering procedure
○ Hard to track the order status or ingredients information
○ Difficulty in managing a large volume of orders with customization requests from customers
○ Ineffective ingredient management, which can lead to shortages or excess stock
○ Lack of analytical tools to optimize business processes and forecast demand
● Build an online system that supports customers in designing their own pizzas according to preferences through a user-friendly and intuitive interface
● The system should automate the order management process, including capturing customer information, customizing pizzas, and processing payments
● Provide tools for the store to manage ingredients, track order status, and generate statistical reports
● Ensure scalability to accommodate a large number of customers in the future
To address this challenge, it is essential to integrate technology, enhance user experience, and implement modern management processes, ultimately delivering a solution that meets customer satisfaction while improving the operational efficiency of the pizza store.
Project layout
- Chapter 4: Conclusion and further improvement.
Technology used
Figure 1.1: Icon HTML and CSS [1]
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser It defines the content and structure of web content
Cascading Style Sheets (CSS) is a style sheet language used to define the presentation of documents written in markup languages like HTML or XML By separating content from presentation, CSS enhances accessibility, allowing content to be created without focusing on its visual style This approach offers greater flexibility and control over design elements such as layout, colors, and fonts Additionally, using a separate css file enables multiple web pages to share formatting, reducing complexity and repetition, while also allowing the css file to be cached, which improves page load speed across shared pages.
JavaScript is a vital programming language that enables developers to build interactive web pages, significantly improving user experience It powers features such as social media feed refreshes, animations, and interactive maps As a key client-side scripting language, JavaScript is essential to the foundational technologies of the World Wide Web.
Node.js is a powerful software platform for creating scalable internet applications, especially web servers It leverages JavaScript and employs event-driven programming along with asynchronous input/output to reduce costs and enhance scalability.
A framework is a structured collection of libraries designed to simplify the development of websites and software By offering pre-defined functions and tools, frameworks enhance efficiency and consistency, allowing developers to streamline their work and create applications more conveniently.
ReactJS is a free, open-source JavaScript library designed for creating user interfaces through reusable UI components Developed and maintained by Meta, along with a community of developers and companies, it enables efficient front-end development.
Figure 1.4: Icon framework Next JS [4]
Next.js is a React framework for building full-stack web applications You use
React Components to build user interfaces, and Next.js for additional features and optimizations
Next.js simplifies the development process by automatically configuring essential tools for React, such as bundling and compiling This enables developers to concentrate on building their applications rather than getting bogged down in configuration tasks.
Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications [5]
Figure 1.5: Icon Database MariaDB (MySQL) [6]
MariaDB Server is a widely-used open source relational database management system, recognized for its versatility and reliability It powers major platforms such as Wikipedia, WordPress.com, and Google Released under the GPLv2 license, MariaDB ensures its commitment to remaining an open source solution.
It can be used for high-availability transaction data, analytics, as an embedded server, and a wide range of tooling and applications support MariaDB Server [7]
Appwrite is an open-source backend platform that accelerates application development by offering essential services like database management, user authentication, file storage, and serverless functions Its compatibility with various programming languages and seamless integration with popular frontend tools enhance backend deployment efficiency With robust security features and scalability, Appwrite stands out as an ideal solution for web and mobile app development Its expanding development community further solidifies its popularity among programmers.
Visual Studio Code is a versatile and efficient source code editor compatible with Windows, macOS, and Linux It offers native support for JavaScript, TypeScript, and Node.js, along with a robust collection of extensions for various programming languages and runtimes, including C++, C#, Java, Python, PHP, Go, and NET.
SYSTEM ANALYSIS AND DESIGN
User
❖ Sign-in and Sign-up function
➢ Users can view the list of pizzas without needing to log in
➢ Users must log in to build their pizza and synchronize their order history
➢ Users can select their favorite pizza and add it to the cart, then proceed to place an order
➢ Users can create their own pizza with completely new flavors according to their preferences
➢ When users submit their order and select the payment method as Banking, the system will display a QR code for scanning
➢ Users can only view their order history on the device They must log in to synchronize it.
Admin
➢ Admin can Add/Adjust/Delete pizza
➢ Store statistics can be viewed directly within the management interface
➢ Admin can decide whether to accept this order for transfer to the kitchen or not.
Use Case
Figure 2.1: General use case diagram
The diagram presents two distinct use case scenarios: one depicting a user engaging with a pizza ordering system, which includes actions like signing in, customizing a pizza, and processing payments, while the other illustrates an admin overseeing different components of the system, such as managing orders, toppings, and user accounts.
Figure 2.2: Sign-in use case diagram
The diagram illustrates a user case within a pizza ordering system, highlighting key interactions such as signing in, placing an order, browsing the menu, and processing payments, while also including an optional logout feature linked to the sign-in function.
Condition Actor has not sign-in into the system
Output Actor sign-in successfully
Description Use case allows sign-in into the system
Table 2.1: Sign-in Use case description
This table describes the Sign-in Use case
1 Actor Choose Sign-in function
2 System Go to Sign-in interface
3 Actor Enters username and password
4 System If successful, the system will list the pizza menu; otherwise, it will display an invalid error message
Table 2.2: Sign-in Use case main flow
This table describes the Sign-in main flow
3 List Pizza Menu use case
Figure 2.3: Pizza menu Use case diagram
The diagram showcases a user interacting with a pizza menu, emphasizing the main action of listing available pizzas It also includes optional features for selecting size and crust, adding items to the cart, and accessing detailed information about individual pizzas.
Condition User find and choose the pizza they want to see details
Output Pizza list is displayed from the database
Description Use case allows user to see the pizza menu and add to cart
Table 2.3: Pizza menu Use case description
This table describes the Pizza menu Use case
1 User Click Menu on Navbar
3 User Select action type: view, filter, etc
4 System Display results, returning the list of pizzas that meet the criteria
Table 2.4: Pizza menu main flow
This table describes the Pizza menu Use case main flow
Figure 2.4: Build Pizza Use case diagram
The diagram illustrates a user scenario for constructing a pizza, which involves signing in and providing essential details Additionally, there is an optional feature for processing payment once the pizza is finalized.
Use case Create a request for Build Pizza
Condition User has signed-in into the system
The Build Pizza Use Case enables users to submit personalized requests for pizza creation based on their individual preferences This feature allows customers to customize their pizzas, ensuring a tailored dining experience that meets their unique tastes.
Table 2.5: Build Pizza Use case description
1 User Enters the information fields: Image, Name, Topping…
4 System Displays QR code for payment for the order
5 System Sends request to Admin
Table 2.6: Build Pizza main flow
This table describes the Build Pizza Use case main flow
Figure 2.5: Order Use case diagram
The diagram illustrates a user journey in a pizza ordering system, highlighting the steps of checking an order, choosing a payment method, entering personal information, and managing the shopping cart It also includes the process for displaying a QR code when a banking option is selected, along with optional features for adding a voucher and additional items to the cart.
Condition Has item in cart
Description Use Case allows user to choose delivery or take-away
Table 2.7: Order Use case description
This table describes the Order Use case
Figure 2.6: Order history Use case diagram
The diagram illustrates a user accessing their order history, which involves signing in and optionally includes features for reviewing order details and processing payments for previous orders.
2 System Redirect to Order history interface
5 Actor Select payment (for orders that have not been paid)
6 System Display QR code for payment
Table 2.8: Order history main flow
This table describes the Order history Use case main flow
7 Pizza managing Use Case (Admin)
Figure 2.7: Pizza managing Use case
The diagram illustrates a use case for an admin managing pizzas within a system It includes the requirement to sign in, with optional extensions for adding, deleting, and adjusting pizzas
8 Category managing Use Case (Admin)
Figure 2.8 Category managing Use Case (Admin) diagram
The diagram shows a use case for an admin managing categories within a system
It requires signing in and includes optional extensions for adding, deleting, and adjusting categories
Use case Managing web data from Admin
Condition Enter admin password correctly
Output Website updates data as desired by the Admin
Description Allow Admin to add, update, or delete data on the website
Table 2.9: Managing web data from Admin use case description
This table describes the admin management Use case
9 Order managing Use Case (Admin)
Figure 2.9: Order managing use case (Admin) diagram
The diagram depicts a use case for an administrator overseeing order management within a system It necessitates signing in and offers optional features such as updating the order status, modifying the payment status, and deleting orders.
Flow chart
Figure 2.10: Sign-up function flow chart
The flowchart illustrates the user sign-up process, starting with the selection of the sign-up function and the entry of personal information The system verifies the existence of the email; if the email is already registered, an error notification is issued Conversely, if the email is not in use, the user is redirected to the sign-in interface and receives a success notification.
1 User Select Sign-up function
2 System Redirect to Sign-up interface
3 User Enter information fields and select Sign-up
5 System Send error notification if email already exist in database
6 System Redirect to Sign-in interface if the information is valid
Table 2.10: Sign-up Function Actor Description
The table outlines the process of the Sign-up function in the system
Figure 2.11: Sign-in function flow chart
The flowchart outlines the user sign-in process, beginning with the selection of the sign-in function and the entry of necessary information The system verifies the validity of the provided details; if they are incorrect, an error notification is issued Conversely, if the information is valid, the user is directed to the menu, accompanied by a success notification.
1 User Select Sign-in function
2 System Redirect to Sign-in interface
3 User Enter information fields and select
5 System Send error notification if the input information is invalid
6 System Redirect to Menu if the information is valid
Table 2.11: Sign-in Function Actor description
The table outlines the process of the Sign-in function in the system
Figure 2.12: Add to Cart flow chart
The flowchart illustrates the steps for adding an item to a cart, starting with the selection of an item, followed by choosing the desired size and crust After making these selections, a success notification confirms that the item has been successfully added to the cart.
Table 2.12: Add to Cart function Actor description
The table outlines the process for adding an item to a shopping cart in the system
The flowchart outlines the order creation process, beginning with the user entering essential information like phone number, address, and voucher After selecting the order, the system verifies the payment method If banking is chosen, a QR code is generated; if cash is selected, the order is created immediately Ultimately, a success notification confirms the order completion.
1 User Enter information and select Order
3 System Display QR code if user select banking method
Table 2.13: Order function Actor description
Figure 2.14: Payment status check function flowchart
The payment verification process initiates once a user successfully completes a transfer The system then queries the website's API to confirm incoming transactions, ensuring that the content and amount correspond to the order If the details are found to be invalid, the user receives a notification to attempt the transaction again later Conversely, if the details are valid, a success notification is dispatched, and the order's payment status is updated accordingly.
1 User Transfer money to the QR code displayed on the website
2 System The Sepay system calls the website's API every time there is an incoming transaction
3 System The API checks if the content and amount match the order
4 System Update the order if the content and transaction amount match
Table 2.14: Payment status check function Actor description
The table outlines the process for transferring money via a QR code in a transaction system
6 Create/Adjust Pizza function (Admin)
Figure 2.15: Create/Adjust pizza flowchart
The flowchart illustrates the steps for adding a pizza to an order, starting with the input of necessary information Upon selecting the create/save option, the system performs a validation check; if the information is incorrect, an error notification is issued Conversely, if the details are valid, the newly added pizza is shown, accompanied by a success notification to confirm the addition.
1 User Select Add or Adjust pizza
3 System Send error notification if invalid
4 System Add to database if Create
5 System Update database if Adjust
Table 2.15: Create/Adjust pizza function Actor description
The table outlines the process for adding or adjusting a pizza order in a system
Figure 2.16: Delete Pizza function flowchart
The flowchart outlines the steps for removing a pizza from the menu, beginning with the selection of the delete icon linked to the relevant data row The system prompts the user for confirmation; if the user opts to cancel, the deletion is aborted However, if the user confirms, the pizza menu is promptly updated to reflect the change.
2 System Request confirmation for delete
3 System Delete from database if approve
Table 2.16: Delete pizza function Actor description
The table outlines the process for deleting an item in a system
7 Approve/Decline order function (Admin)
Figure 2.17: Approve/Decline order function flowchart (Admin)
1 Admin Perform the action to change the status
2 System Update the order status
Table 2.17: Approve/Decline order function Actor description
The table outlines the process for an admin changing the status of an order in a system
Figure 2.18: Revenue Statistic function flowchart (Admin)
The flowchart outlines the process for displaying business statistics It begins with selecting a specific statistic The system then calculates the relevant business data
Finally, the calculated statistic is displayed to the user
2 System Calculate data: Order, Voucher, Revenue,
3 System Display data when finish calculated
Table 2.18: Revenue Statistic function Actor description
The table outlines the process for an admin accessing statistical data in a system
Figure 2.19: Build Pizza function flowchart
The flowchart outlines the steps for building and ordering a pizza, beginning with the selection of the "Build Pizza" option Users must input their name and preferred toppings, after which a QR code for payment is generated The order then awaits admin approval before the final order is completed.
1 User (Signed-in) Enter required information
3 System Display the QR for payment
4 System Create order to Admin
Table 2.19: Build Pizza function Actor description
The table outlines the process for a signed-in user submitting a payment request
The diagram represents the database schema for the pizza ordering system, showing the relationships between different entities
4 Toppings Save information about crust types and toppings for pizza
7 Cart_items Save information about products in the order, including selected size and toppings
8 Orders Save information about the order status
The table outlines the various entities in a pizza ordering system and their respective descriptions.
BULDING THE WEBPAGE
Desktop Interface
This is the desktop homepage
Figure 3.2: Sign-in interface (Desktop)
This is the desktop Sign-in interface, where you fill in the required information to Sign- in as a User
Figure 3.3: 3 Sign-up interface (Desktop)
This is the desktop Sign-up interface, where you fill in the required information to register as a user
This is the pizza menu
Figure 3.5: Pizza details interface (Desktop)
This figure shows the detail of the pizza
Figure 3.6: Pizza Builder interface (Desktop)
This is the pizza builder, it allows you to build your pizza to your likings
This is the cart interface, it requires you to fill in the information for payment
Figure 3.8: About us page (Desktop)
This is the About page
This is the Revenue statistic of the admin interface It shows the income of the pizzeria
Figure 3.10: Pizza managing interface (Desktop)
This is the where the admin manage the menu
Figure 3.11: Order Managing Interface (Desktop)
This is the user’s order, the admin can approve or decline the order
12 Topping, Size, Voucher managing interface
Figure 3.12: Topping, Size, Voucher managing interface (Desktop)
These are the where the admin manages the Topping, size and voucher of the pizzeria.
Mobile Interface
This is the mobile homepage
Figure 3.14: Sign-in Interface (Mobile)
This is the mobile Sign-in interface
Figure 3.15: Order history interface (Mobile)
This is the mobile order history interface
Figure 3.16: Pizza Menu interface (Mobile)
This is the mobile pizza menu
This shows the detail of the pizza
Figure 3.17: Pizza details interface (Mobile)
Figure 3.18: Pizza Builder interface (Mobile)
This is the pizza builder, it allows you to build your pizza to your likings
This is the mobile cart interface, where you do your payment
Figure 3.20: About Us page (Mobile)
This is the About page
This is the admin revenue statistics, it shows the pizzeria income
Figure 3.22: Pizza managing interface (mobile)
This is where the admin manages the menu
11 Category, Size, Topping and Voucher managing interface
Figure 3.23: Category, Size, Topping and Voucher managing interface (mobile)
This is where the admin manages the categories, sizes, toppings and vouchers
Limitations
In addition, the system is not fully developed in certain user functionalities, such as determining loyalty member levels and messaging between users and the restaurant
The processing speed of the system is not high yet, as the programming has not been fully optimized
The interface for viewing the pizza list is not smooth, which negatively impacts the user experience.
Future objectives
Continue developing and enhancing the system with functionalities such as messaging between users and the restaurant, and upgrading loyalty member levels,
Add features like language translation and sharing the website on social media platforms such as Twitter, Threads, and Instagram,
Optimize the system to improve processing speed and enhance the database for easier future scalability.