Research objects
For this topic, the research object is based on user needs, referring to related websites and models to create an intermediary transaction place between ticket sellers and buyers In addition, the technologies applied to realize specific products are as follows:
- 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 mainly focuses on handling the basic operations of a website as an intermediary platform in buying and selling event tickets with key functions such as: account management, list management favorite events, view event details, search for events by various methods, payment method, etc.
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 limited to the Vietnamese region In addition, In the case of exceptionally large data sets, a database system might encounter challenges in effectively processing and managing the data Furthermore, the order processing could be affected by database time delay Moreover, Accounts for payment are only used on testing platforms.
CHAPTER 1: FUNDAMENTALS
React
React is an efficient and flexible JavaScript library for user interface development This is a front-end library, developed based on Components to use the View layer in the MVC/MVP/MVVM model.
A React app is made up of many components, each responsible for rendering a small, reusable piece of HTML Components can be nested within other components to allow complex applications to be built from simple blocks A component can also maintain internal state by passing in props.
React implements a virtual DOM that is ultimately a DOM tree representation in JavaScript Therefore, when it needs to read or write to the DOM, it will use the virtual representation of it Then the virtual DOM will try to find the most efficient way to update the browser’s DOM.
ReactJS features a JSX - JavaScript Syntax Extension
-JSX is a preferable choice for many web developers It is not obligated to use JSX in React, but there is a huge difference between writing react.js documents in JSX and JavaScript JSX is a syntax extension to JavaScript By using that, we can write HTML structures in the same file that contains JavaScript code. b Unidirectional Data Flow and Flux
- 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 has a lighter version of the actual DOM in memory, this is called the virtual DOM Manipulating the actual DOM is much slower than Virtual DOM because nothing is drawn on the screen When the state of any object changes, Virtual DOM only modifies that object in the real DOM instead of updating the entire object That makes everything run faster, especially compared to other front-end technologies that have to update each object even if only one object changes in the web application.
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 existing ReactJS, creating a dynamic web application was really tricky and demanding due to requiring complex coding But, when it comes to ReactJS, it solved most of these problems as mentioned It makes use of JSX which is a particular syntax letting HTML quotes and HTML tag syntax to render subcomponents It also supports the building of machine-readable codes.
- ReactJS is made up of multiple components These components are responsible for producing a small piece of HTML which can be reusable whenever it is necessary Those reusable codes will make the app easy to maintain and develop These components can be nested with others to allow complicated applications.
- ReactJS improves performance due to virtual DOM The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML Any times that the DOM is updated, it makes performance low For this reason, The React Virtual DOM exists to solve this problem.
• The Support of Handy Tools
-ReactJS is prevalent to everybody in the front-end industry As a result, a lot of browsers such as Chrome and Firefox dev extension allow developers to inspect elements easily and understandably in the virtual DOM In addition, It also allows selecting particular components and examine current props and state.
-ReactJS applications can run on the server that makes the navigation on various search engines easy This is because the virtual DOM renders and returns to the browser as a regular web page.
-Strong community support can be seen as a factor in attracting a lot of people using this framework People can solve problems, bugs, or any trouble regarding to React is easy to find solution on popular channel such as : YouTube, Google, Stack
-With the development of ReactJS, this technique is updating so fast that developers cannot keep up with the updated technologies in this framework Therefore, official documents can not publish on time As a result, developers must solve the problems on their own or by their experience.
-ReactJS only covers the UI Layers of the app Therefore, ReactJS tend to choose some other technologies for other development.
Redux
-Redux is a Predictable State Management tool (meaning a high-end management tool) for applications running in the JavaScript programming language Redux is generated to create a layer that manages the overall state of the application Redux helps the applications write to work consistently and can work in different environments such as client, server, and native In addition, using the Redux library for storage also simplifies the testing and testing process.
-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. Structure of Redux
-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, and they must have a type of property to indicate the type of action to be performed There is also a payload containing information that needs to be processed by the 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:
-Note, the user is not dealing with any logic on how to change the Store.
Only tell the Store that the user wants to add a new note with the provided title and content The “title” and “content” fields are optional.
- There are functions that implement the behavior of the actions They change the state of the app, based on the action description and the state change description The Reducer function has two parameters: the previous State, the
Action sent, and the new State returned.
- Store stores the state of the application Store contains a few things other than State (like functions and other objects) Only create one Store for each application For Redux, there is a common state in the store and each component has access to the state This removes the need to constantly pass state from one component to another.
Although it looks a bit complicated at first, data flow in Redux is actually quite simple.
Figure 1-5 Data Flow of Redux [3]
Assume that the user fires an event (e.g clicking the "Add Note" button) and updates the State (i.e a new note is entered into the State) Here's what happens:
1/ When the button is clicked, the Dispatch function will send information to the Store.
2/ Redux retransmits the Action sent to the Reducer.
3/ Store stores the new State returned by Reducer.
4/ Because of the subscription to the Store, the provisioning function will be called and it will update the UI accordingly (i.e., append the new note in the list of notes)
React-Query
1.1.3.1 Why do people use React-Query?
One of the challenges we face when building an application with React is defining a design pattern to fetch data from the server The most common way to handle fetch in React is to use the global state as a mechanism to determine the current state of the data fetch.
Traditionally, we used React's default hooks like useState and useEffect to handle fetching data, but repeating these hooks creates many problems.
• Data is shared across all app versions and can be changed by others.
• Data may be "stale" and need to be refreshed.
• Handle cache and invalidate data to optimize requests.
Another solution and one that we will explore here in depth is React Query This library will help you fetch, synchronize, update, and store your remote data while reducing the amount of code you need to write by providing you with two simple hooks (useQuery and useMutation) and a utility function.
1.1.3.2 useQuery useQuery Hook is a function used to register your data fetch code into the React Query Library It takes an arbitrary key and an asynchronous function that fetches data and returns various values that you can use to inform the user about the current application state.
Figure 1-6 useQuery of React-Query
Notice in this code we don't use useState and useEffect This is because useQuery has different variables that we can use such as isLoading, error and returned data When the data changes, the useQuery function will automatically be called and the variables will change as well.
1.1.3.3 useMutation useMutation is commonly used to create/update/delete data remotely This function has an asynchronous function that updates your data (usually between Post, Put or Delete) and returns a mutate function that you can call to trigger mutations.
Figure 1-7 useMutation of React-Query
Other supporting Front-end libraries
❖ Antd – Ant design: A UI library for React, providing quality components.
❖ MUI: A UI library for React, like Antd.
❖ Axios: An HTTP Client library based on Promises Basically, it provides an API for XHR handling (XMLHttpRequests).
❖ Formik: A small library that helps us deal with the 3 most annoying problems in forms: getting values in and out of form state, validating values and returning error messages, and handling form submissions.
❖ Moment: A powerful library for manipulating datetime in JavaScript.
❖ @Redux/toolkit and React-redux: The package group is used to write redux, a toolkit for managing states in an application.
❖ Yup: A JavaScript object schema validator.
❖ React-i18next: A library that supports language switching for a React application.Swiper: Thư hiện hỗ trợ việc tạo ra carousel
❖ sweetalert2: Support library for creating floating notifications.
❖ wowjs: Scroll-trigger animation support library.
Back-end side
-Spring Boot provides a good platform for Java developers to develop applications to stand-alone standards and production stage Spring boot is a tool to develop web applications and microservices with spring framework faster and easier more We only need to configure some small configuration to start spring without too many setup steps.
-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 sticks good with micro services The Spring Boot artifacts can be deployed directly into Docker containers In a large and monolithic based application, I would not encourage you to use Spring Boot
-JSON web token -is an open standard used to share data between two entities, on the client side and on the server side This JSON web token can be verified and trusted as it contains a digital signature JWTs can be signed with a secret algorithm (with the HMAC algorithm) or a public / private key using RSA encryption.
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
-The signature is used to verify the message wasn't changed along the way, and, in the case of tokens signed with a private key, it can also verify that the sender of the JWT.
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 is a database model based on no relationship Hence, it is called
No SQL database MongoDB was released in 2009 by its founder and developer MongoDB uses collections and documents Documents consist of key-value pairs Collection includes Document sets.
-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 the process of dividing data from a large set and distributing it to multiple servers In case, there is an issue where the server cannot handle the data due to its size, it automatically divides it further without pausing the activity.
-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 database, MongoDB cannot implement between 2 documents to get data Moreover, acquiring data from multiple collections requires multiple queries and this may lead to scattered codes and consume time.
-The majority of the applications do not require transactions, although there are a few that may need it to update multiple documents and collections This is one of the major limitations with MongoDB as it may lead to corruption of data.
• 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
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 GOOGLE
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
7 ticket Array Ticket List of
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 If the value of an organizer updates an "modifyTimes" event exceeds 2, updating will not be allowed.
18 eventCategoryList Array EventCategory List of
19 organizationTickets Array Ticket List of event
STT Property Type Description Note
ST Property Type Description Note
3 biography String Biography of Organizer
8 status Enum(EOrganization) operation - status of ACCEPTE Organizer D
9 paymentPending Array That Status s Object(PaymentPending Payment
) when events is not completed
10 eventList Array Object(String) Event Index
Amount The actual added to amount of Organizatio money after n Account deducting
12 VNDBalance String VietNam The actual
Amount amount of added to money after Organizatio deducting n Account 5% for expenses inVND.
13 template Tickets Array Object(Ticket) Template for organizers using frequently
STT Property Type Description Note
3 USDBalance String Dollar The amount
Amount of money added to that the
Account be received after deducting 5% from the revenue of the organizer in USD.
4 VNDBalance String VietNam The amount
Amount of money added to that the
Account be received after deducting
5% from the revenue of the organizer in VND.
5 USDBalanceLock String Dollar The total
Amount amount of added to money that
Account currently holding for the organizer in USD.
6 VNDBalanceLock String VietNam The total
Amount amount of added to money that
Account currently holding for the organizer in VND.
ST Property Type Description Note
3 USDBalanceLoc String Dollar The total k Amount amount of added to money that Organizatio the admin is n Account currently holding for the organizer in USD.
4 VNDBalanceLoc String VietNam The total k Amount amount of added to money that Organizatio the admin is n Account currently holding for the organizer in VND.
5 status Enum(EPaymentStatu Dollar - s) amount INPROGRES pending S
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
Enter a keyword, the results will appear as a dropdown,
2 Search box Input Search list select one of the results in the list to go to the event you want to see.
3 Favorite Icon Favorite When tap will show button Button event list favorite event list
Menu list of When tap will show a menu
4 Avatar Image account list of account features. features
5 Language Button Language When tap will change switch language of website.
When tap will redirect to
6 Category Item Link Category the event list page and
List show events that have a selected category.
Event Detail When tap will redirect to
7 Event Item Component the event detail page that
Page has selected event info.
8 View more Button Event List When tap will show more button Page events
'Become an Organizer Redirect to the organizer
9 organizer' Slider registration registration page when button page clicked.
10 Website Text Show website info information
11 Organization Menu list Organization When tapping a menu item menu list pages will redirect to the target page.
12 Social button Button Facebook, Redirect to social media
Instagram page if you click it
1 Email Input Email Input Enter email here
2 Password Input Password Enter password here
Previous Go to previous page or home
3 Sign in Button page or page when this button is home page pressed
4 Login by Button OAuth Go to OAuth page when this
Forgot Forgot Go to forgot password page
5 Link password when this link is pressed password page
6 Sign up Link Sign up Go to Sign up page when this page 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 Input Enter confirm new password password
Sign up Implement the function of
5 Sign up Button creating an account, sending page data to the database
6 Sign in Link Sign up Go to Sign in page when this page button is pressed.
1 Email Input Enter email here
2 Submit Button Password feature. page
2 Submit Button Password feature. page
2 Confirm new Input Enter confirm new password password
3 Submit Button Password feature. page
1 Organization Input Enter organization name name
3 Phone Input Enter phone number
4 Submit Button organization account’ registration feature.
1 Search box Input Search list will appear as a dropdown, select one of the results in the list to go to the event you want to see.
When changing each parameter, it will call the api
2 Filter Dropdown Filter to show the data corresponding to the parameter passed
Event Detail When tap will redirect to the
3 Event Item Component event detail page that has
The event list will be Event List paginated, clicking on the
4 Page number Button page number will display the
Page event list according to the corresponding page number
Tapping this button will Payment redirect to the payment page
1 Book now Button (authenticated) If page unauthenticated will appear as a popup to notify the error
Tapping this button will add Favorite event info to your favorite
2 Interest Button event list (authenticated) If event list 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 Clicking will expand the text, the event clicking again will collapse
Collapse Clicking will expand the
5 Ticket Ticket list ticket information, clicking
6 Map Google Google Map Show map where the event
7 Follow Button Organizer Clicking will follow/unfollow button the organizer
Clicking will open new mail
8 Contact Button Email of the with the receiver as the organizer organizer's email of the selected event.
1 Organization Image Organizer Show organizer’s avatar Avatar
2 Organization Text Organizer Show organizer’s name Name
3 Follow Button Button Customer Tap this button to follow or unfollow organization
4 Organization Text Organizer Show organizer’s biography Biography
5 Followers Text Organizer Show the number of followers of organizer.
6 Number of Text Organizer Show the number of events events
1 Rating Star Component Rating Show rating star of event.
2 Rating Stats Component Rating Show rating stats of event.
3 Feedback Component User Info Display feedback
4 Menu options Popover feedback such as Edit or
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