The urgency of project
As technology rapidly evolves, consumer needs and behaviors shift significantly, making digital transformation crucial for businesses To stay aligned with customer trends, companies must adopt mobile applications or websites as part of their business models A key focus in this area is the development of web platforms for booking event tickets, which enhances user experience and accessibility.
Before the advent of technology, customers had to physically visit venues or obtain authorization from organizers to purchase tickets for events Recognizing the challenges faced by both customers and organizers, we created a website platform to facilitate their interaction and meet the needs of both parties This innovation is the driving force behind our initiative.
"Building an event ticketing system"
This website offers customers the convenience of purchasing tickets online, replacing the traditional direct buying method It provides transparent and publicly accessible information, ensuring that all organizers undergo a vetting process to enhance credibility and reliability in online ticket sales Additionally, organizers benefit from easy event management and flexibility in handling emergencies or notifying customers about changes.
Research objects
This research focuses on user needs to develop an intermediary platform that facilitates transactions between ticket sellers and buyers It leverages insights from related websites and models, utilizing advanced technologies to create effective products for the ticketing market.
- Restful API application to build APIs to support accessing and manipulating the system between client and server effectively
- Using NoSQL database is MongoDB to store data in the system
- For payment methods, the team research and configure PayPal and Vnpay method to apply to the website
- For UI rendering, the team uses the ReactJS framework, AntDesign, Mui,
Bootstrap and other related support libraries to build the interface on the website
- Regarding system security, conducting research on JSON Web Token technology make the system secure and all requests are controlled via Token.
Research scope
The website serves as an intermediary platform for buying and selling event tickets, offering essential features like account management, favorite event listing, detailed event viewing, and multiple search methods for events, along with various payment options.
Project objectives
Topic “BUILDING A BOOKING EVENT WEBSITE APPLYING TO REACTJS AND SPRING BOOT” is including purposes as follows:
- Building a website that allows users to search, view information and order event tickets
- Building a management system and statistics on sales of orders and events for businesses
- The website has a user-friendly interface and is secure for users' personal information.
Delimitations
The website is restricted to the Vietnamese region, and exceptionally large data sets may pose challenges for the database system in processing and managing data efficiently Additionally, database time delays can impact order processing It is also important to note that payment accounts are exclusively utilized on testing platforms.
CHAPTER 1: FUNDAMENTALS
Front-end side
React is a powerful and versatile JavaScript library designed for developing user interfaces As a front-end library, it is built on a component-based architecture, effectively serving the View layer in MVC, MVP, and MVVM design patterns.
A React application consists of multiple components, each designed to render small, reusable HTML segments These components can be nested within one another, enabling the construction of complex applications from basic building blocks Additionally, components can manage internal state by utilizing props.
React utilizes a virtual DOM, which serves as a JavaScript representation of the actual DOM tree This allows React to read and write to the DOM using this virtual representation, enabling it to identify the most efficient methods for updating the browser's DOM.
ReactJS features a JSX - JavaScript Syntax Extension
JSX is favored by many web developers for its ability to simplify the integration of HTML structures within JavaScript code, although it is not mandatory in React This syntax extension allows for more readable and maintainable code Additionally, React's unidirectional data flow, often managed through Flux, enhances the predictability of data changes, making it easier to understand application behavior.
- React consists of a set of immutable values through the component renderer as properties in HTML tags The components cannot modify any properties directly but support a call back function
Figure 1-1 Undirectional Data Flow [1] c Virtual DOM
React utilizes a virtual DOM, a lightweight representation of the actual DOM stored in memory, which allows for faster manipulation compared to directly altering the actual DOM This efficiency stems from the virtual DOM's ability to update only the specific object that has changed, rather than re-rendering the entire DOM As a result, React enhances performance, particularly when contrasted with other front-end technologies that require updates to all objects, even when only one has changed.
Advantages and Disadvantages when using ReactJS
• Easy to learn and utilize resources
-ReactJS comes with a wide range of tutorials, documentation, training resources Anyone from the front-end side with basic background can easily understand and start using React in a short term
• Creating dynamic web applications has become easier
Before the advent of ReactJS, developing dynamic web applications was challenging and required complex coding ReactJS addresses these issues by utilizing JSX, a unique syntax that allows for the rendering of subcomponents through HTML-like quotes and tag syntax Additionally, it facilitates the creation of machine-readable code, enhancing the overall development process.
ReactJS consists of various components that generate reusable HTML snippets, simplifying app maintenance and development These components can be nested to create complex applications, enhancing flexibility and functionality.
ReactJS enhances performance through its use of the Virtual DOM, a programming API that interacts with HTML, XML, or XHTML Traditional DOM updates can lead to decreased performance, but the React Virtual DOM addresses this issue by optimizing rendering and updates, resulting in a more efficient user experience.
• The Support of Handy Tools
ReactJS is widely recognized in the front-end development industry, with many browsers like Chrome and Firefox offering developer extensions that simplify the inspection of elements within the virtual DOM These tools enable developers to easily select specific components and analyze their current properties and state.
ReactJS applications enhance server-side rendering, facilitating seamless navigation across search engines This is achieved through the virtual DOM, which efficiently renders content and delivers it to the browser as a standard web page.
Strong community support is a key factor in attracting users to the React framework This vibrant community allows individuals to easily find solutions to problems, bugs, and other issues through popular platforms like YouTube, Google, and Stack Overflow.
The rapid evolution of ReactJS poses a challenge for developers, making it difficult to stay current with the latest technologies within the framework Consequently, official documentation often lags behind, leaving developers to rely on their own problem-solving skills and experiences to navigate these changes.
-ReactJS only covers the UI Layers of the app Therefore, ReactJS tend to choose some other technologies for other development
Redux is a powerful state management tool designed for JavaScript applications, providing a consistent layer to manage application state It ensures reliable application behavior across various environments, including client, server, and native platforms Additionally, utilizing the Redux library streamlines the testing process, making it easier to maintain and validate application functionality.
-Redux helps write applications that behave consistently, run in different environments and are easy to test
- Centralizing application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more
-The Redux DevTools make it easy to trace when, where, why, and how application's state changed Redux's architecture allows logging changes
- Redux works with any UI layer and has a large ecosystem fit user requirement
-Using Actions to send data from application to the Redux store The data can be from user interactions, API calls or form submissions
-Actions are dispatched using the store.dispatch() method Actions are plain
JavaScript objects require a specific property to define the type of action to be executed, along with a payload that contains the necessary information for processing that action.
-Example: In the app that we are going to build, whenever the user clicks the "Add Note" button, then send to Store something like the following action:
To add a new note to the Store, simply inform the Store of your intention, specifying the desired title and content if applicable Both the "title" and "content" fields are optional, allowing for flexibility in your note creation.
Back-end side
Spring Boot is an excellent platform for Java developers to create stand-alone applications suitable for production It simplifies the development of web applications and microservices using the Spring framework, allowing for faster and easier implementation With minimal configuration required, developers can quickly set up Spring Boot without extensive setup processes.
-Directly embed Tomcat, Jetty, or Undertow (no need to deploy to WAR file) -Starter dependencies make configuring Maven simpler
-Automatically configure Spring when needed
-Secure private data with Spring security
-Authenticate user to ensure log-in system
Figure 1-9 Features of Spring Boot [11]
Advantages and Disadvantages of spring boot
• Spring Framework can be employed on all architectural layers used in the development of web applications
• Provide developers with flexibility in configuring XML configurations,
Java Beans, and Database Transaction
• The integration of Spring Boot with the Spring ecosystem which includes Spring Data, Spring Security, Spring ORM, and Spring JDBC
• Provide a wide range of plugins
• Easy to connect with various database such as Oracle, PostgreSQL,
MySQL, MongoDB, Redis, Solr, ElasticSearch, Rabbit MQ, ActiveMQ
• Difficulty in controlling system resulting in increasing the deployment file size
• It’s not suitable for beginners or individuals who have not ever worked with Spring Boot
Spring Boot is highly compatible with microservices architecture, allowing for seamless deployment of its artifacts directly into Docker containers However, it is not advisable to use Spring Boot for large, monolithic applications.
JSON Web Token (JWT) is an open standard that facilitates secure data sharing between client and server entities It is designed to be verifiable and trustworthy due to its inclusion of a digital signature JWTs can be signed using a secret key with the HMAC algorithm or through RSA encryption with a public/private key pair.
Structure of JSON web token
-In its compact form, JSON Web Tokens consist of three parts separated by dots (.), which are:
-The header typically includes 2 parts: the type of token and the signing algorithm being used, such as HMAC SHA256 or RSA
-The second part of the token is the payload It contains JSON data
A signature is essential for ensuring that a message remains unaltered during transmission, and when tokens are signed with a private key, it also authenticates the identity of the JWT sender.
Benefit of using JSON web token
-Authorization: Used immediately upon login Each request to the server is accompanied by a JWT to allow the user to access a specific service, etc
-Information Exchange: JSON Web Tokens are a good approach for securely transmitting information between parties
MongoDB, a NoSQL database model launched in 2009, operates without traditional relationships, utilizing collections and documents for data organization Each document is structured as key-value pairs, while collections serve as sets of these documents, making MongoDB a flexible and scalable solution for modern data management.
-Overall, MongoDB is a distributed database thanks to its core structure, It's highly efficient, scalable and geographically distributed built for ease of use
-All data is stored in documents instead of tables in RDBMS This data is stored as fields instead of rows and columns
-MongoDB supports search by field Queries can be customized to return certain fields in the comments
- Indexes can be created which can improve search performance in mongdb Any field can be indexed
- Replication in mongodb helps a lot in the process of copying and restoring data, especially with automatic failover mechanism to ensure that data is always available when there is a problem
-MongoDB can execute across multiple servers, load balancing between volumes and/and data replication to keep the system up and running in the event of a hardware failure
- MongoDB allows the system to execute on clustered data and get single data or equivalent results It is equivalent to the SQL GROUPBY statement
MongoDB includes three different aggregations: the aggregation pipeline, map-reduce function, and single-purpose aggregation
-The performance of mongoDB is high because of the features it offers such as scalability, indexing, replication
Advantages and Disadvantages of MongoDB
-Allow user to execute queries quicker due to most of data in RAM rather than hard disk Therefore, processing data is much more effective
-MongoDB offers a simple syntax to collect data faster than SQL
Additionally, It provide expressive query language to find data faster
• Easy Environment and a Quick Set-up
-Set up environment for MongoDB is faster and easier than RDBMS
-MongoDB’s schema is not predefined So, a lot of businesses tend to use this
No SQL database to adapt to their requirements
Sharding is a method of partitioning large datasets across multiple servers to enhance performance and manageability When a server encounters limitations in handling data due to its size, the sharding process automatically splits the data further, ensuring continuous operation without interruptions.
-MongoDB can expand the storage capacity
-An ad-hoc query is a non-standard inquiry It is generated to gain information if and when required
Unlike SQL databases, MongoDB lacks the ability to retrieve data between two documents directly Additionally, fetching data from multiple collections necessitates multiple queries, which can result in scattered code and increased processing time.
While most applications do not necessitate transactions, some may require them for updating multiple documents and collections This limitation in MongoDB can potentially result in data corruption.
• Limited Data Size and Nesting
-MongoDB allows a limited size of only 16 MB for a document Performance nesting for documents is also limited to only 100 levels
-MongoDB requires a high amount of storage due to the lack of joins functionalities which lead to the duplication of data.
CHAPTER 2: SURVEY AND USER REQUIREMENTS
Survey
-Viewing prominent event lists and a variety of events
-Allowing user to purchase tickets or organize events
-Finding appropriate events based on address, date, ticket costs
-Viewing information of purchased tickets or administering events (if any)
-Transparent information after buying ticket(s)
-Having a reliable and authentic website
-Paying order with different methods
-Send email when buying ticket successfully
-User interface is relatively complex for user
-Depending on support team to verify a event
-Can not see exactly quantity of Ticket when placing order https://ticketgo.vn/
-Viewing from prominent events to normal ones from top to bottom
-Booking events through hotline number affiliated with organization
- Paying order with different methods
-User interface is not optimal about spacing screening
-Having leftover server errors https://introart.com.vn/
-Viewing events based on week/month
-Booking ticket(s) through hotline number affiliated with organization
-Having good of user interface
-Rendering low-performance user interface
To summarize, after surveying these websites above, the booking ticket website could be evaluated by many criteria such as payment, user interface, third party, responsive design, performance optimization
-Store data: o Save avatar image of user o Save List of events is holding/completed o Save personal information for the purpose of contact
- Management: o Update Profile o Add/Delete/Update Event o Add/Delete/Update favorite event o Approve/Refuse pending Organizer Account
- Search: o Search by name o Search by filters
- Statistic: o Statistics group by Order o Statistics group by Ticket o Statistics group by Event
-Authorization: o Provide user with equivalent authorization to access to url accordingly -Authentication o Allow user to log in with equivalent role
-Payment o Allow user to check out with PayPal portal
34 o Allow user to check out with VNPay portal
-Searching information faster and more effective according to user requirement
-Provide user with equivalent authorization
-Ensure that securing personal information is private
-Minimizing the possibility of leaking private data
-Processing and responding data between client side and back-end side is on time and quickly
-Having possibility of expanding functions depending on user requirement
Figure 2-4 Client-side Use Case
Figure 2-5 Administration-side Use Case
2.3.2.1 Log-in with Google account
Log-in with Google account
Use Case Log-in with Google account
Short Description User Logs in to system using Google Account
Post-Condition(s) If user logs in successfully, user will be entered into Homepage Main Flow (1) Entering into the login page
(2) Select “Log in with Google” button
(5) Users is directed to Home Page Alternate Flow No
Exception Flow E1: If User failed to log in , then alert will be displayed on screening with error text messages and required to log in again
Table 2-1 Log-in with Google account
Short Description User Logs in to system with traditional login method, including email and password field
Post-Condition(s) If user logs in successfully, user will be entered into Homepage
Main Flow (1) Entering the login page
(5) Authenticate email and password successfully (E1)
(6) User is redirected to home page Alternate Flow No
Exception Flow E1: If user failed to log in , then alert will be displayed on screening with error text messages and required to log in again
Table 2-2 Login by Email/Password
Short Description User registers account to sign in for system
Post-Condition(s) user register for new account successfully
Main Flow (1) Entering into the login page
(5) Enter “confirm new password” field
(7) Register for new account successfully (E1) Alternate Flow No
Exception Flow E1: If user failed to register , then alert will be displayed on screening with error text messages and required to register again
Use Case Register for organizer
Short Description User send admin online application form to be approved for becoming official organizer
Post-Condition(s) User sends admin online application form successfully
Main Flow (1) Entering into the login page
(6) Send online application form successfully (E1) Alternate Flow No
Exception Flow E1: If user failed to register for organizer, then alert will be displayed on screening with error text messages and required to register again
Use Case View detailed event information
Short description User can view detailed event information
Post-condition(s) Event information is displayed on detailed event page
Main Flow (1) User visits a page, including a list of events (A1)
(2) User selects any event from the list of events
(3) Click to view event detail
(4) User can view a detailed event
Alternative Flow A1:User can select any events from the list of events in Home page
Table 2-5 View detailed event information
Short description Users can search event information by name
Post-condition(s) Users can view events in relation to particular name
Main Flow (1) User types some words into the search field
(2) Search field shows related event(s) (E1)
(3) User chooses a event as requested
(4) User can view a detailed event
Exception Flow E1: if data can not be found, Search field can not showed appropriately
Use Case Search event by filter
Short description Users can search event information by filter
Pre-condition(s) User has selected one of categories on the left side
Post-condition(s) Users can view events by filter
Main Flow (1) Select location, category, date and event available (A1)
(2) Screening will present events according to user requirement (E1)
Alternative Flow A1: User can select each field separately
Exception Flow E1: if data can not be found, there are no events displayed
Table 2-7 Search event by filter
Short description Users can change password
Pre-condition(s) User has logged in to system
Post-condition(s) User changes password successfully
Main Flow (1) Enter “current password” field
(3) Enter “Confirm new password” field (E1)
(6) User can view a detailed event
Exception Flow E2: if “current password” data is not equal to password in
System, then alert will be displayed on screening with error text messages
E1: if user enter “Confirm new password” field that are not equal to “New password” field, then system will present error text message below
Short description Users can change password if they can not remember password
Post-condition(s) User changes password successfully
Main Flow (1) User Enter email field
(2) System will send user OTP code to authenticate account
(3) User Enter OTP code within 5 minutes (E1)
(4) System will verify OTP code (E2)
(6) User Enter “confirm new password”field (E3)
(8) User is redirect to login page Alternative Flow No
Exception Flow E1: user can not use OTP code after 5 minutes
E2: if OTP code is not equal, then alert will be displayed on screening with error text messages
E3: if user enter “Confirm new password” field that are not equal to password field, then system will present error text message below
Use Case Add favourite event
Short description Users can add favourite event
Pre-condition(s) User has accessed to detailed event page
Post-condition(s) Users can add favourite event successfully
Main Flow (1) Press “interested” button
(2) Event will be added to WishList Alternative Flow No
Use Case Delete a favourite event
Short description Users can delete favourite event
Pre-condition(s) User has logged in to system
Post-condition(s) Users can delete favourite event successfully
Main Flow (1) Click on the bookmark icon
(2) Favourite event(s) will be displayed (A1)
(3) Press heart icon to delete an item
(4) Event will be removed from WishList
Alternative Flow A1: If there are no events displayed, then list will show “No result” message Exception Flow No
Use Case Delete all favourite events
Short description Users can delete all favourite events
Pre-condition(s) User has logged in to system
Post-condition(s) Users can delete all favourite events successfully
Main Flow (1) Click on the bookmark icon
(2) Favourite event(s) will be displayed (A1)
(4) Event will be removed from WishList
Alternative Flow A1: If there are no events displayed, then list will show “No result” message Exception Flow No
Table 2-12 Delete all favourite events
Use Case View favourite event list
Short description Users can delete all favourite events
Pre-condition(s) User has logged in to system
Post-condition(s) Users can View favourite event List successfully
Main Flow (1) Click on the bookmark icon
(2) Favourite event(s) will be displayed (A1) Alternative Flow A1: If there are no event displayed, then list will show “No result” message
Table 2-13 View favourite event list
Short description Users can delete all favourite events
Pre-condition(s) User has accessed to booking ticket page
Post-condition(s) Users can check out sucessfully
Main Flow (1) Select type of ticket
(3) Click on “Place Order” button
(4) User logs in with the corresponding payment method to check out (A1)
(5) Verify balance is enough for transaction (E1)
(6) User is redirected to Order History page
Alternative Flow A1: user can check out using either the Vnpay or Paypal method, depending on the corresponding organizer regulations
Exception Flow E1: If balance is lower than total price of Order, then error message will be displayed and transaction can not be processed
Use Case View Order History
Short description Users can view order history
Pre-condition(s) User has clicked to Popover of personal information
Post-condition(s) Users can view order history successfully
Main Flow (1) Click to “My Ticket” button
(2) paid tickets will be listed according to event vertically(A1)
Alternative Flow A1: If there are no event displayed, then screening will show
“Ticket list is empty” message Exception Flow No
Short description Users can update profile
Pre-condition(s) User has accessed to Profile Page
Post-condition(s) Users can update profile successfully
Main Flow (1) Enter “full name” field
(3) Press “submit” button Alternative Flow No
Exception Flow E1: if user enter incorrect phone number format,then error message will show below
Use Case Update Organizer Profile
Short description Users can update organizer Profile
Pre-condition(s) User has accessed to Profile Page
Post-condition(s) Users can update profile successfully
Main Flow (1) Enter “full name” field
(3) Select options from “Province” field
(5) Enter content of biography to “Biography” field
(6) Press “submit” button Alternative Flow No
Exception Flow E1: if user enter incorrect phone number format,then error message will show below
Short description Users can Update Avatar
Pre-condition(s) User has accessed to Profile Page
Post-condition(s) Users can update avatar
Main Flow (1) Click camera icon on Avatar user
(3) Click on “confirm” icon to change avatar (A1)
Alternative Flow A1: If user want to cancel update avatar, then click on “cancel” icon Exception Flow No
Short description Users can log out system
Pre-condition(s) User has logged in to system
Post-condition(s) Users can log out successfully
Main Flow (1) Press “Log out” button
(2) User will be exited from system Alternative Flow No
2.3.2.20 View Customer list by order
View Customer list by order
Use Case View customer order list
Short description User can view customer list by order
Pre-condition(s) User has accessed to Order Management page
Post-condition(s) User can view customer list group by order
(2) Click on “View detail” button
(3) Order modal will be displayed
(4) Click on “Orders by event” button
(5) List of customer will be shown (A1) Alternative Flow A1: if there are no events , “No data” message will be displayed Exception Flow No
Table 2-20 View Customer list by order
2.3.2.21 View customer list by account
View customer list by account
Use Case View customer list by Account
Short description User can view customer list by Account
Pre-condition(s) User has accessed to Order Management page
Post-condition(s) User can view customer list group by order
(2) Click on “View detail” button
(3) Order modal will be displayed
(4) Click on “Orders by event (unique accounts)” button
(5) List of customer will be shown (A1) Alternative Flow A1: if there are no events , “No data” message will be displayed Exception Flow No
Table 2-21 View customer list by account
Short description User can create event with appropriate data
Pre-condition(s) User has accessed to event management page
Post-condition(s) Event data will be stored into system
Main Flow (1) Click on “Create new event ” button
(6) Alert will be displayed with success messages Alternative Flow No
Exception Flow E1: if any of the quantity of Ticket is lower than 30, error messages will be displayed below E2: if there are no data, error messages will be displayed below
Use Case View created event
Short description User can view created event
Pre-condition(s) User has accessed to event management page
Post-condition(s) Event data will be showed
Main Flow (1) Event information will be showed (A1)
Alternative Flow A1: if there are no events , “No data” message will be displayed Exception Flow No
Short description User can update event
Pre-condition(s) User has accessed to event management page
Post-condition(s) Event data will be updated successfully
Main Flow (1) User chooses “edit” icon which is Equivalent to event
(7) Alert will be displayed with success messages (E2) Alternative Flow No
Exception Flow E1: if any of the quantity of Ticket is lower than 30, error messages will be displayed below
E2:if modify times are more than 2, user can not submit event and show error message
Short description User can delete event
Pre-condition(s) User has accessed to event management page
Post-condition(s) Status of this event will be changed successfully, event data will be disappeared
Main Flow (1) User chooses “remove” icon which is Equivalent to event
(2) Alert will be displayed with 2 options (“OK” or
(5) Alert will be displayed with success messages Alternative Flow No
Short description User can View Category
Pre-condition(s) User has accessed to categories page
Post-condition(s) User can View Category
Main Flow (1) Category information will be showed (A1)
Alternative Flow A1: if there are no events , “No data” message will be displayed Exception Flow No
Use Case Approve pending form
Short description User can Approve pending form
Pre-condition(s) User has accessed to Accounts page
Post-condition(s) User can Approve pending form successfully
Main Flow (1) Click on “Pending Organizer Accounts”
(5) Alert will be displayed with success messages Alternative Flow No
Use Case Refuse pending form
Short description User can refuse pending form
Pre-condition(s) User has accessed to Account management page Post-condition(s) User can refuse pending form successfully
Main Flow (1) Click on “Pending Organizer Accounts”
(5) Alert will be displayed with success messages Alternative Flow No
Use Case View organizer accounts
Short description User can view organizer accounts
Pre-condition(s) User has accessed to Account Management page Post-condition(s) User can view organizer accounts successfully
Main Flow (1) Select "Organizer" by Role filter
(2) Accounts with Organization will be showed Alternative Flow No
Use Case View customer accounts
Short description User can view customer accounts
Pre-condition(s) User has accessed to Account Management page Post-condition(s) User can view organizer accounts successfully
Main Flow (1) Select "Customer" by Role filter
(2) Accounts with Customer will be showed Alternative Flow No
Use Case View all feedback
Short description User can view all feedback by event
Pre-condition(s) User has accessed to Detailed movie page
Post-condition(s) User can view all feedback by event successfully
Main Flow (1) Select "Review" tab
(2) Review information by Event will be shown Alternative Flow No
Short description User can post feedback
Pre-condition(s) -User has accessed to Detailed movie page
-User has bought the certain event Post-condition(s) User can view all feedback by event successfully
Main Flow (1) Select "Review" tab
(2) Enter content into review message frame
(4) Alert will be displayed with success messages Alternative Flow No
Short description User can Delete feedback
Pre-condition(s) User has accessed to Detailed movie page
Post-condition(s) User can view all feedback by event successfully
Main Flow (1) Select "Review" tab
(4) Alert will be displayed with success messages Alternative Flow No
Short description User can follow organizer
Pre-condition(s) User has accessed to Detailed movie page Post-condition(s) User can follow organizer successfully
Main Flow (1) Select "Organizer" tab
(2) User will be directed to
(4) Change “Follow” into “Followed ” status Alternative Flow No
Use Case Export Orders to Excel
Short description User can download orders file by excel
Pre-condition(s) User has accessed to Order management page Post-condition(s) User can export to Excel successfully
Main Flow (1) Click on "Export Excel" button
(2) Excel file will be sent to organizer (E1) Alternative Flow No
Exception Flow E1: if there are no data of event, error messages will be displayed
Table 2-35 Export Orders to Excel
Use Case Export events to Excel
Short description User can download events file by excel
Pre-condition(s) User has accessed to Order management page
Post-condition(s) User can export to Excel successfully
Main Flow (1) Click on "Export Excel" button
(2) Excel file will be sent to organizer (E1) Alternative Flow No
Exception Flow E1: if there are no data of event, error messages will be displayed
Table 2-36 Export Events to Excel
Use Case Export accounts to Excel
Short description User can follow organizer
Pre-condition(s) User has accessed to Order management page
Post-condition(s) User can export to Excel successfully
Main Flow (1) Click on "Export Excel" button
(2) Excel file will be sent to admin (E1) Alternative Flow No
Exception Flow E1: if there are no data of event, error messages will be displayed
Table 2-37 Export Accounts to Excel
Short description User can view Statistics
Pre-condition(s) User has logged in to Management system
Post-condition(s) User can view Statistics successfully
Main Flow (1) Click on "Overview" on Dashboard
(2) Information statistics of Organizer will be shown (E1) Alternative Flow No
Exception Flow E1: if there are no event created , table with no statistics data will be shown
Table 2-38 View Statistics for organizer
Short description User can view Statistics
Pre-condition(s) User has logged in to Management system
Post-condition(s) User can view Statistics successfully
Main Flow (1) Click on "Overview" on Dashboard
(2) Information statistics of Admin will be shown (E1) Alternative Flow No
Exception Flow E1: if there are no event created , table with no statistics data will be shown
Table 2-39 View Statistics for admin
-Admin: : Use the system with the highest rank This individuals can manage both customer and organizer accounts in addition to managing authorization of Organizer accounts
-Organizer:Organizers work as organizer role.Organizers can manage their account.In addition, they can manage their created event
-Customer: customer work as customer role Customers can manage their account.They can manage their favourite list in addition to check-out Moreover, they can view their history order
-Guest: Guests can register for a customer account They can view a wide range of events and detailed events
1 Login Access to system as an admin role
2 Logout Log out of system
3 Forgot password Verify password with OTP code sent
4 Update profile Update information user
5 Update avatar Update avatar for user
6 View Customer accounts List all customer accounts
7 View Organizer accounts List all organizer accounts
8 Approve pending organizer Approve application from guest who want to be a organizer
9 Refuse pending organizer Refuse application from guest who want to be a organizer
10 View Categories List all Categories
11 View statics View Revenue in USD and VND
, the quantity of tickets sold, events, orders
1 Login Access to system as an customer role
2 Google login Access to system as customer role
3 Logout Log out of system
4 Forgot password Verify password with OTP code sent
5 Change password Update account with new password
6 Update profile Update information user
7 Update avatar Update avatar for user
8 View wish list Show wish list of user
9 Add an item to wish list Add favored event to wish list
10 Delete an item from wish list Remove an particular item from wish list
11 Delete all items from wish list Remove all items from wish list
12 View order View history order by List
13 Check-out Check out corresponding to payment method (Vnpay/ Paypal)
14 Search Event Find event by name
15 View Events by Category Show events by particular category
16 View upcoming events Show a wide range of upcoming events
17 View detailed event Display detailed information by particular event
18 View organizer information View events, the quantity of followers
19 Change Language Translate Vietnamese into English and vice versa
1 Register Register for being an official user
2 Search Event Find event by name
3 View Events by Category Show events by particular category
4 View upcoming events Show a wide range of upcoming events
5 View detailed event Display detailed information by particular event
6 Register for organizer Register for being an official organizer
7 View organizer information View events, the quantity of followers
8 Change Language Translate Vietnamese into English and vice versa
1 Login Access to system as Organizer role
2 Logout Log out of system
3 Forgot password Verify password with OTP code sent
4 Change password Update account with new password
5 Update organizer profile Update information organizer
6 Update avatar Update avatar for user
7 Create an event Create an event as Organizer role
8 Delete an event Delete an event as Organizer role
9 Update an event Update an event as Organizer role
10 View created event View event(s) after being created as
11 View customer list by Order Show customer list by Order
12 View customer list by Account Show customer list by distinct
13 Export Order by excel Download data of order by excel
14 View statics View Revenue in USD/VND and
View the quantity of tickets sold daily/weekly/yearly and nd view the quantity of tickets events, orders
15 View payment status View pending revenue in USD and
SYSTEM DESIGN
Class diagram
Database design
STT Property Type Description Note
1 _Id ObjectId Id of account
2 name String Name of user
3 phone String Phone of user
4 email String Email to login
5 avatar String Avatar of user
6 password String password Being encrypted for security
7 role String Role of user
8 otp Object(OTP) OTP of user Being used for verifying account
9 loginType Enum(EAccount) Type of
10 loginTime Date Time that user log in to system
STT Property Type Description Note
2 account DBRef(account) Account information
3 eventFavouriteList Array Object(String) event index
4 followList Array Object(String) Order history
STT Property Type Description Note
1 _id ObjectId Id of Order
4 totalPrice String Total price on order
6 currency String Currency type -USD
8 createdDate Date Date that order is checked out
STT Property Type Description Note
1 _id String Id of Event
3 province String province that event is hold
4 venue String general venue that event is taking place
5 venue_address String particular venue that event is taking place
6 startingTime String time to start event
7 endingTime String time to end event
8 startingDate String beginning date of event
9 endingDate String ending date of event Ending date could could overlap
10 host_id String Account index as organization role
11 description String description of event
12 background String Background of event
13 status String Status of Event -AVAILABLE
14 ticketTotal int Total types of ticket quantity when Organizer create Event
15 ticketRemaining int Ticket quantity left over after check-out
16 createdDate Date The date that organizer create event
17 modifyTimes int The frequency at which an organizer updates an event
69 updating will not be allowed
STT Property Type Description Note
3 biography String Biography of Organizer
8 status Enum(EOrganization) operation status of Organizer
That Status Payment when events is not completed
10 eventList Array Object(String) Event Index
Amount added to Organizatio n Account
The actual amount of money after deducting 5% for expenses in USD
Amount added to Organizatio n Account
The actual amount of money after deducting 5% for expenses in VND
13 template Tickets Array Object(Ticket) Template for organizers using frequently
STT Property Type Description Note
Amount added to Admin Account
The amount of money that the admin will be received after deducting 5% from the revenue of the organizer in USD
Amount added to Admin Account
The amount of money that the admin will be received after deducting
5% from the revenue of the organizer in VND
Amount added to Admin Account
The total amount of money that the admin is currently holding for the organizer in USD
Amount added to Admin Account
The total amount of money that the admin is currently holding for the organizer in VND
Amount added to Organizatio n Account
The total amount of money that the admin is currently holding for the organizer in USD
Amount added to Organizatio n Account
The total amount of money that the admin is currently holding for the organizer in VND
STT Property Type Description Note
1 _id ObjectId Id of Review
7 rate int Rate ranging from 1 to 5
8 createdAt Date time that feedback is commented
Sequence diagram
Figure 3-4 Login with Google account
Figure 3-6 Search event by filter
Figure 3-19 Delete all favorite events
Figure 3-20 View favourite event list
3.3.22 View Customer list by order
Figure 3-24 View Customer list by order
3.3.23 View Customer list by Account
Figure 3-25 View Customer list by Account
Figure 3-37 Export orders to Excel
Figure 3-38 Export events to Excel
Figure 3-39 Export accounts to Excel
Figure 3-40 View Statistics for organizer
Figure 3-41 View Statistics for admin
User Interface design
LT001 Home Home page shows slides, list of features events, list of categories
LT002 Login Login screen with email/password or login with a third party like Google
LT003 Register Sign up page enter your account's information to create a new account
LT004 Forgot Password Enter your email to send OTP to your one
LT005 Verify OTP Enter OTP which was sent to your email to reset password
LT006 New password Enter new password and confirm password to create new password
LT007 Organizer registration Enter fields to register organization account LT008 Event List Page Show event list with grid format Support paging and filter feature
LT009 Event Detail Page Show selected event information
LT010 Organization Profile Page Show organizer information including number of followers, number of events and list of events
LT011 Event Review Page Show a list of user feedbacks to the event
Table 3-10 User Interface for Guest
1 Logo Image Home page When tap will redirect to home page
2 Search box Input Search list
Enter a keyword, the results will appear as a dropdown, select one of the results in the list to go to the event you want to see
When tap will show favorite event list
Menu list of account features
When tap will show a menu list of account features
5 Language switch Button Language When tap will change language of website
When tap will redirect to the event list page and show events that have a selected category
7 Event Item Component Event Detail
When tap will redirect to the event detail page that has selected event info
8 View more button Button Event List
When tap will show more events
Redirect to the organizer registration page when clicked
10 Website information Text Show website info
11 Organization menu list Menu list Organization pages
When tapping a menu item will redirect to the target page
Redirect to social media page if you click it
1 Email Input Email Input Enter email here
Previous page or home page
Go to previous page or home page when this button is pressed
Google Button OAuth Go to OAuth page when this button is pressed
Go to forgot password page when this link is pressed
6 Sign up Link Sign up page
Go to Sign up page when this button is pressed
1 Email Input Enter email here
2 Full Name Input Enter full name here
3 Password Input Enter password here
4 Confirm new password Input Enter confirm new password
5 Sign up Button Sign up page
Implement the function of creating an account, sending data to the database
6 Sign in Link Sign up page
Go to Sign in page when this button is pressed
1 Email Input Enter email here
2 Confirm new password Input Enter confirm new password
1 Organization name Input Enter organization name
3 Phone Input Enter phone number
Implement ‘create organization account’ feature
1 Search box Input Search list
Enter a keyword, the results will appear as a dropdown, select one of the results in
124 the list to go to the event you want to see
When changing each parameter, it will call the api to show the data corresponding to the parameter passed
3 Event Item Component Event Detail
When tap will redirect to the event detail page that has selected event info
4 Page number Button Event List
The event list will be paginated, clicking on the page number will display the event list according to the corresponding page number
1 Book now Button Payment page
Tapping this button will redirect to the payment page (authenticated) If unauthenticated will appear as a popup to notify the error
2 Interest Button Favorite event list
Tapping this button will add event info to your favorite event list (authenticated) If unauthenticated will appear as a popup to notify the error
3 Section Tab Button Section When tap will scroll to the selected section
4 Expand Button Introduce of the event
Clicking will expand the text, clicking again will collapse
Clicking will expand the ticket information, clicking again will collapse
Show map where the event takes place
7 Follow button Button Organizer Clicking will follow/unfollow the organizer
8 Contact Button Email of the organizer
Clicking will open new mail with the receiver as the organizer's email of the selected event
Avatar Image Organizer Show organizer’s avatar
Name Text Organizer Show organizer’s name
3 Follow Button Button Customer Tap this button to follow or unfollow organization
Biography Text Organizer Show organizer’s biography
5 Followers Text Organizer Show the number of followers of organizer
6 Number of events Text Organizer Show the number of events
1 Rating Star Component Rating Show rating star of event
2 Rating Stats Component Rating Show rating stats of event
Item Component User Info Display feedback information
Options to execute with feedback such as Edit or Delete
LT012 Profile page The profile page shows customer/organizer information Besides, you can edit them by entering fields
LT013 Change password Change password
LT014 Ticket list of Customer Show ticket list of customer
LT015 Payment page Show payment page Include ticket list and cart
LT016 Customer order page Show customer order when pay order successfully
Table 3-22 User Interface for Customer
Tapping this one will redirect to the corresponding page
2 Log out Button Log out API Clear token in local storage of application
When tap will exit this page
4 Avatar Image Data from database
Click “camera” button to update new avatar
Data from database/ user input data
It will show the full name if data exists, otherwise, user has to input new data
6 Email Input Data from database
It will show the email
Data from database/ user input data
It will show the phone if data exists, otherwise, user has to input new data
8 Submit Button Update profile API
1 Current password Input User data input
2 New password Input User data input
3 Confirm new password Input User data input
3.4.2.3 LT014 – Ticket List of Customer
Figure 3-58 Ticket List of Customer
1 Order Item Component Order It will show the order information
Button Order It will show the booking id
Collapse Button Order It will show the buyer information if data exists
Button Order It will show the order detail information
5 Ticket Component Order Show ticket information
Button Button Ticket Export ticket with PDF format on your computer
7 Page number Button Ticket list
The ticket list will be paginated, clicking on the page number will display the ticket list according to the corresponding page number
Table 3-25 Ticket List of Customer
1 Step Button Step list Show current step
2 Ticket Item Component Data from database
Show ticket information of each ticket in ticket list
3 Ticket Item in Cart Component Data from database
Show information of the ticket added to cart
Order Component Data from database
2 Ticket detail Table Data from database
LT017 Home Home page shows stats about events, orders and revenue of organizer
LT018 Event Management Show event list Each event item can be modified such as delete or edit
LT019 Create/Update event Create a new event by filling in all fields or updating an existing event
LT020 Order Management View a list of customer orders LT021 Ticket Management View a list of tickets
Table 3-28 User Interface for Organizer
1 Organization name Text Data from database
2 Statistic Item Component Data from database
Show statistic of each element in elements list
Show page list Click to an item to redirect to target page
Displays the number of events by category
1 Create new event Button Data from database
2 Export Excel Button Events Export excel file on your local computer
3 Event table Table Data from database
Show information of each element in elements list
4 Edit Button Update event API
When clicked will go to the edit event page
When clicked will delete event
6 Page number Button Pagination Implement pagination
3.4.3.3 LT017 – Create/Update event page
Figure 3-63 Create/Update event page
Data from database/ user input data
2 Preview image Image Loaded image
Preview image to be uploaded
Data from database/ user input data
Enter title of the event
Data from database/ user input data
Push one or more categories to category list
Choose the type of date for the event Taking place in 1 day or many days
Data from database/ user input data
Choose start date of the event
Data from database/ user input data
Choose end date of the event
Data from database/ user input data
Choose start time of the event
Choose end time of the event
Data from database/ user input data
Data from database/ user input data
Data from database/ user input data
13 Use default address Switch Use default address which saved in database
14 Create new ticket Button Create new ticket item
Currency Select Currency Select currency for tickets
16 Use saved template Switch Use saved ticket list in database
17 Ticket type Input Input ticket type
18 Price Input Input ticket price
19 Quantity Input Input ticket quantity
Ticket type Input Input description of ticket
21 Delete ticket button Button Event Remove ticket item from ticket list
22 Save this ticket list Switch Save current ticket list into database
23 Description of the event Input Input the description of event
24 Submit Button Submit event information
25 Reset Button Clear all fields
Table 3-31 Create/Update event page
1 Export Excel Button Orders Export excel file on your local computer
2 Order table Table Data from database
Show event list The organizer can click “View detail” to view the order detail of the event
3 View detail Button Orders Click “View detail” to view the order detail of the event
4 Page number Button Event list
The event list will be paginated, clicking on the page number will display the event list according to the corresponding page number
Figure 3-65 Order detail by event
1 Order table Table Data from database
Show event list The organizer can click “View detail” to view the order detail of the event
2 Page number Button Order list
The order list will be paginated, clicking on the page number will display the order list according to the corresponding page number
3 Cancel Button Order detail modal
4 OK Button Order detail modal
Table 3-33 Order detail by event
1 Event item Component Data from database
Including thumbnail, event name, and status
2 Page number Button Order list
The order list will be paginated, clicking on the page number will display the order list according to the corresponding page number
1 Event item Component Data from database
Including thumbnail, event name, and status
2 Page number Button Order list
The order list will be paginated, clicking on the page number will display the order list according to the corresponding page number
Table Table Data from database
Show payment information Including event name V
2 Page number Button Order list
The payment list will be paginated, clicking on the page number will display the payment list according to the corresponding page number
1 Statistic Item Component Admin Show statistic of each element in elements list
Build a pie chart showing the percentage of accounts by role
Build a pie chart showing the percentage of events by province
Build a bar chart showing the number of events by category
Select the radio button that represents the type of list you want to display
2 Account table Table Data from database
3 Page number Button Account table
The account list will be paginated, clicking on the page number will display the account list according to the corresponding page number
3.4.4.3 LT023 – Pending Organizer Account Management page
Figure 3-70 Pending Organizer Account Management page
Show pending organizer account list
2 Approve Button Approve account API
3 Reject Button Reject account API
Table 3-40 Pending Organizer Account Management page
Item Component Data from database
Show event list by Category
The event list will be paginated, clicking on the page number will display the event list according to the corresponding page number
3 Cancel button Button Close modal
4 OK button Button Close modal
IMPLEMENTATION AND TESTING
Implementation
To ensure the application functions properly, users are required to install the following requirements:
• OpenJDK installed (version 19.0.2 or above)
• Node.js installed (version 18.14.2 or above)
Step 1: Clone or download project from GitHub
-Back-end: : https://github.com/longquoc47krb/BookingEventTicket/tree/746b76d5cf6eca 421bbafdf3d90aaf110f94733e/backend
-Front-end(User): https://github.com/longquoc47krb/BookingEventTicket/tree/746b76d5cf6eca 421bbafdf3d90aaf110f94733e/frontend/user-console
-Front-end(Admin): https://github.com/longquoc47krb/BookingEventTicket/tree/746b76d5cf6eca 421bbafdf3d90aaf110f94733e/frontend/admin-console
Step 2: Start Back-end of the application
-Clone or download back-end file to computer or laptop, then open project with IntelliJ IDEA to run it
Step 3: Start Front-end of the application
-Clone or download front-end file to computer or laptop
-Open Visual studio code and refer to Terminal, using “npm install” to download the necessary libraries and dependencies for the project
- After successfully installing all the actions above, then run the project by executing the command "npm start"
Testing
This project will utilize black box testing to evaluate the primary functionalities of the system, with detailed functional testing scopes for each module outlined below.
STT Module name Role Description
1 Login Customer Customer has the right to access system with authorized account
2 Register Customer Customer can register for a account
3 Modify account information Customer Customer has the right to modify account information on system
4 Check-out Customer Customer can buy tickets successfully on system
5 Add feedback Customer Customer can create, update feedback
6 Update feedback Customer Customer can update feedback
7 Add favourite event Customer Customer can add favourite event items to wish list
8 Delete favourite event Customer Customer can delete favourite event items to wishlist
9 Add event Organizer Organizer can create event
10 Delete event Organizer Organizer can delete event
11 Refuse organizer account Admin Admin has the right to refuse organizer account
12 Approve organizer account Admin Admin has the right to acept organizer account
1.Requirements analysis: research and analysis requirements for project
• Plan the testing work design
• Set up the testing environment
• Compare between the actual results and the expected results
• Report any occurring errors/bugs to the issue tracking/bug tracking tool
• Adjust and update documentation based on the actual status
• Summarize and report the results of test case execution
• Evaluate completion criteria such as quality, cost, time, and business requirements
• Discuss and derive lessons learned from the testing process
STT Description test steps Expected result Actual result status
“Log in” button on the navigation bar to direct to login page
Log in successfully with customer role
“Register” button on the navigation bar to direct to login page register successfully with customer role
“Sign up” button next to
“Don't have an account yet?”
3 Test Modify account information functionality
Modify account information successfully with customer role
Check-out successfully with customer role
Add feedback successfully with customer role
Add feedback successfully with customer role
7 Test Add favourite event functionality
Add favourite event successfully with customer role
8 Test Delete favorite event functionality
“Favorite event” tab 2.Select favorite event 3.Click on heart symbol next to favorite event
Delete favorite event successfully with customer role
Add event successfully and turn into NEW_EVENT
2 Enter information each field 3.Click on
“submit” button status with organizer role
1.Select event 2.Click on garbage icon on “Modify” frame
Delete event successfully and turn into DELETED status with organizer role
11 Test Refuse organizer account functionality
Allowing them to become the official organizer with admin role
12 Test Approve organizer account functionality
Refusing to allow them to become the official organizer with admin role
CONCLUSION
Expected Results
After the process of research and development about the 'Building a booking event website applying Reactjs and Spring Boot framework' to topic In summary, our team obtained the below results
Throughout the application development process, our team gained valuable insights into React.js and the Spring Boot framework, enhancing our understanding of client-side and server-side development Additionally, we deepened our knowledge of NoSQL and MongoDB, which improved our ability to store and retrieve data effectively.
In an application, security is one of the most important elements Therefore, we integrated JSON Web Token into our project to increase security
We prioritize user experience on the client side by dedicating significant time to exploring the latest technologies, including Redux Toolkit, React-query, Tailwind CSS, and Framer Motion These tools are instrumental in enhancing UX, ensuring that an appealing design keeps users engaged.
On the server side, we prioritize strictness and high performance The application not only runs the right way but also responds quickly
Complete basic and advanced features of an application for booking event tickets:
- Allow login by Google or email/password Basic features for account management such as editing profile, uploading an avatar, forgetting the password, changing password, etc
- An booking event ticket website which customer can view event list or search event by keyword or by filter Support paging feature
- Admin dashboard page where information such as events, orders, tickets can be managed for the organizer role and account management for the system administrator role
Strengths
- Modern and user-friendly user interface
- Easy to maintain and develop more features.
Drawbacks
- Lack of experience in analyzing and building system architecture
- Processing performance is still not smooth.
Future works
- Optimize performance and fix some existing bugs in application
- Add more payment method, such as Momo or VNPay
- Improve Search Engine Optimization (SEO) for the website
[1].Technologies, M (2021, April 22) Introduction to ReactJS
Mindmajix https://mindmajix.com/introduction-to-react-js
[2].Redux official document https://redux.js.org/
[3].Manhdatt (2021, February 21) https://viblo.asia/p/khi-nao-nen-va-khong-nen-su-dung-redux-
[4].Applying Redux to ReactJS https://viblo.asia/p/redux-trong-react-la-gi-1Je5EDX0lnL
Spring Boot offers numerous advantages, including rapid development, simplified configuration, and built-in features that enhance productivity Its auto-configuration capability reduces the need for extensive setup, allowing developers to focus on building applications rather than managing dependencies However, it also has some drawbacks, such as potential performance issues with larger applications and a steeper learning curve for newcomers Key features of Spring Boot include its embedded servers, production-ready metrics, and easy integration with various databases, making it a popular choice for modern application development Understanding both the pros and cons of Spring Boot is essential for making informed decisions in software development.
[7].JSON Web Tokens https://jwt.io/
[8].MongoDB Repository with Springdata in Spring Boot https://docs.spring.io/springdata/mongodb/docs/1.2.0.RELEASE/reference /html/mongo.repositories.html
[9].Pros and Cons of MongoDB https://www.knowledgenile.com/blogs/pros-and-cons-of-mongodb/
[10].Spring boot definition https://vietnix.vn/spring-boot-la-gi/
163 https://hocspringboot.net/2020/10/17/spring-boot-co-gi-hay-va-nhung- tinh-nang-cua-springboot/
[12].MongoDB Database https://stackjava.com/mongodb/mongodb-la-gi-cac-khai-niem-trong- mongodb.html
[13].Implement Vnpay payment https://sandbox.vnpayment.vn/apis/vnpay-demo/
[14] How to configurate Spring security https://www.baeldung.com/security-spring
[15] How to configurate Paypal payment https://developer.paypal.com/api/rest/