Ministry of Education and Training HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATE THESIS ON BUILDING A BOOKING EVENT WEBSITE APPLYING TO REACTJS AND SPRING BOOT Advisor : Lê Văn Vinh, Ph.D Student name : Nguyễn Quốc Long : 18110150 Chu Nguyễn Anh Tuấn : 19110308 TP. Hồ Chí Minh – 06/2023 HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING SUMMARY OF GRADUATE THESIS Student Name 1: Nguyễn Quốc Long Student ID 1: 18110150 Student Name 2: Chu Nguyễn Anh Tuấn Student ID 2: 19110308 The research was conducted from February 20, 2023, to May 28, 2023. Major: Software Engineer. Topic name: Building a booking event website applying to ReactJS, Spring Boot Name of advisor: PhD.
Lê Văn Vinh MISSION OF GRADUATE THESIS 1. Theory - Research technologies such as ReactJS, Spring Boot, JSON Web Token and Redux. - Research payment methods such as VNPay, Paypal. Practice - Applying Spring Boot to build Back-end aspects.
Implement API for modules of the system. - Applying JSON Web Token to encode data and authentication. - Applying Mongodb to store data - Applying ReactJS to design interface for Front-end aspect. ĐH SƯ PHẠM KỸ THUẬT TP.HCM SOCIALIST REPUBLIC OF VIETNAM KHOA ĐÀO TẠO CLC Independence - Freedom - Happiness ****** ****** COMMENTARY OF INSTRUCTOR Student Name 1: Nguyễn Quốc Long Student ID 1: 18110150 Student Name 2: Chu Nguyễn Anh Tuấn Student ID 2: 19110308 Major: Software Engineer.
Topic name: Building a booking event website applying to ReactJS, Spring Boot Name of instructor: PhD. Lê Văn Vinh COMMENTARY 1. Content of Topic and workload done. Recommend for upholding a thesis or not ?.
Hồ Chí Minh, ngày tháng năm 2023 INSTRUCTOR (Name and signature) ĐH SƯ PHẠM KỸ THUẬT TP.HCM SOCIALIST REPUBLIC OF VIETNAM KHOA ĐÀO TẠO CLC Independence - Freedom - Happiness ****** ****** COMMENTARY OF CRITICAL LECTURER Student Name 1: Nguyễn Quốc Long Student ID 1: 18110150 Student Name 2: Chu Nguyễn Anh Tuấn Student ID 2: 19110308 Major: Software Engineer. Topic name: Building a booking event website applying to ReactJS, Spring Boot Name of Critical lecturer: Lê Thị Minh Châu COMMENTARY 1. Content of Topic and workload done. Recommend for upholding a thesis or not ?.
Hồ Chí Minh, ngày tháng năm 2023 CRITICAL LECTURER (Name and signature) ACKNOWLEDGEMENT First of all, We would like to send our sincere thanks to the Faculty of High-Quality Training - Ho Chi Minh City University of Technology and Education for creating conditions for our group to cultivate and develop a solid knowledge understanding to carry out this topic. On top of that, we would like to thank Mr. Le Van Vinh for the most sincere appreciation. He dedicated to enthusiastically instructing and giving valuable suggestions to our group throughout the process from the beginning to the end of this thesis.
Thanks to a solid foundation of specialized knowledge in addition to practical experiences and requirements in the hands-on projects through studying at school and doing internships in companies. The collective of teachers of the Faculty of CLC Training and especially Mr. Le Van Vinh have brought us a huge amount of knowledge and experience in the technical field and future work. Especially, this helped and motivated us to complete the thesis.
This will absolutely be a huge benefit for us for technical expertise. On the one hand, due to the time limit, we did our utmost to finish on time and complete with targets which are as much as possible with our knowledge. However, mistakes are inevitable. We hope to receive your enthusiastic comments in order to ameliorate our project better, learn experience and improve our products in the best way possible.
We sincerely thank you! Nhóm thực hiện Nguyễn Quốc Long – 18110150 Chu Nguyễn Anh Tuấn - 19110308 1 Graduate Thesis TABLE OF CONTENT LIST OF FIGURES. 6 LIST OF TABLES. The urgency of project. Front-end side.
Other supporting Front-end libraries .2 Back-end side .2 JSON Web Token. CHAPTER 2: SURVEY AND USER REQUIREMENTS .1 Use case diagram. 35 Use Case Specification. 60 CHAPTER 3: SYSTEM DESIGN .1 75 Login with google account .4 Search Event by filter .5 View detailed event .7 Register for organizer .9 View Order History .15 Add favourite event .16 Delete a favourite event .17 Delete all favourite events .18 View favourite event list .19 View Customer Account .20 Update Organizer Profile .22 View Customer list by order .23 View Customer list by Account .26 View created event .28 View Organizer Account .29 Refuse pending form .30 Approve Pending form .31 View all feedback .35 Export orders to Excel .36 Export events to Excel .37 Export accounts to Excel .38 View Statistics for organizer .39 View Statistics for admin.
User Interface design. User Interface for Guest. User Interface for Customer. User Interface for Organizer.
User Interface for Admin. 148 4 Graduate Thesis CHAPTER 4: IMPLEMENTATION AND TESTING. 162 5 Graduate Thesis LIST OF FIGURES Figure 1-1. Undirectional Data Flow [1].
previousState and newState. Data Flow of Redux [3]. useQuery of React-Query. useMutation of React-Query.
Features of Spring Boot [11]. Header of JWT [7]. Payload of JWT [7]. Structure of JWT [7].
JSON Web Token [7]. Client-side Use Case. Administration-side Use Case. Login with Google account.
Search event by filter. View detailed event. Register for organizer. View order history.
Add favorite event. Delete a favourite event. Delete all favorite events. View favourite event list.
View Customer Account. Update Organizer Profile. View Customer list by order. 96 6 Graduate Thesis Figure 3-25.
View Customer list by Account. View created event. View organizer account. Refuse pending form.
Approve Pending form. View all feedback. Export orders to Excel. Export events to Excel.
Export accounts to Excel. View Statistics for organizer. View Statistics for admin. New password page.
Event List Page. Event Detail Page. Organization Profile Page. Event Review Page.
Change password page. Ticket List of Customer. Customer Order Page. Event Management page.
Create/Update event page. Order Management page. Order detail by event. Ticket Management page.
Ticket List Modal. Payment Management page. 147 7 Graduate Thesis Figure 3-69. Account Management page.
Pending Organizer Account Management page. Category Management page. Events by Category. 152 8 Graduate Thesis LIST OF TABLES Table 2-1.
Log-in with Google account. Login by Email/Password. Register for organizer. View detailed event information.
Search event by filter. Add favourite event. Delete a favourite event. Delete all favourite events.
View favourite event list. View order history. Update Organizer Profile. View Customer list by order.
View customer list by account. View Created Event. Approve pending form. Refuse Pending Form.
View Organizer Accounts. View customer accounts. View all feedback. Export Orders to Excel.
Export Events to Excel. Export Accounts to Excel. View Statistics for organizer. View Statistics for admin.
63 9 Graduate Thesis Table 3-1 Account. User Interface for Guest. New password page. Event List Page.
Event Detail Page. Organizer Profile Page. Event Review Page. User Interface for Customer.
Ticket List of Customer. User Interface for Organizer. Event Management page. Create/Update event page.
Order Management page. Order detail by event. Ticket Management page. 145 Table 3-35 Ticket List Modal.
Payment Management Page. Admin Dashboard Page. Admin Dashboard Page. Account Management page.
Pending Organizer Account Management page. Category Management page. 151 Table 3-42 Events by Category. 159 10 Graduate Thesis INTRODUCTION 1.
The urgency of project With the explosion of technology, people's needs and consumer behavior change. Digital transformation is essential for most businesses. Therefore, to catch up with customer trends, businesses all require business models on mobile applications or websites… Specifically in this topic is booking event tickets based on a web platform. Prior to the development of technology, most of the events that customers want to attend must go to the venue or be authorized by the organizer to buy tickets directly.
Understanding the difficulties of both parties, A website platform to mediate for both customers and organizers to meet the requirement of both parties is essential. And that is also the reason why we developed the topic "Building an event ticketing system". With the features of this website, customers will have the opportunity to buy tickets online instead of directly as before, along with transparent and clear information publicly available on the platform, where there is censorship of the team prior to officially allowing the organizer to operate with the aim of creating credibility and reliability when buying tickets on the online platform. In addition, the Organizer can easily manage their events and be flexible in the process of implementing the event, or when notifying customers of an emergency.
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.
11 Graduate Thesis - 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. Front-end side 1. React Definition 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.
How ReactJS works 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. JSX - JavaScript Syntax Extension -JSX is a preferable choice for many web developers.