(Đồ án hcmute) building an ecommerce website for selling electronic components

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT INFORMATION TECHONOLOGY BUILDING AN ECOMERCE WEBSITE FOR SELLING ELECTRONIC COMPONENTS ADVISOR: NGUYEN TRAN THI VAN STUDENT: NGUYEN MINH PHU VO MINH HUY NGUYEN CANH DUNG SKL 5 Ho Chi Minh City, March, 2023 MINISTRY OF EDUCATION AND TRAINING HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH-QUALITY TRAINING CAPSTONE PROJECT Building an ecommerce website for selling electronic components Instructor: Nguyễn Trần Thi Văn Students: Nguyễn Minh Phú 18110038 Võ Minh Huy 18110020 Nguyễn Cảnh Dũng 18110010 HO CHI MINH CITY - 2023 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc Ho Chi Minh City, March 2023 PROJECT CONTRIBUTION Full name: Võ Minh Huy ID: 18110020 Class: 181100CLA4 Full name: Nguyễn Minh Phú ID: 18110038 Class: 181100CLA4 Full name: Nguyễn Cảnh Dũng ID: 18110010 Class: 181100CLA1 Major: Information Technology Instructor: Nguyễn Trần Thi Văn MSc Topic: Building an e-commerce website for selling electronic components Contents: - Current status survey - Theoretical basics - System analysis and design - Program building - Client page - Admin page - Assignment DIRECTOR/DEPUTY DIRECTOR OF FACULTY INSTRUCTOR CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* INSTRUCTOR’S EVALUATION Full name of student: Võ Minh Huy ID: 18110020 Full name of student: Nguyễn Minh Phú ID: 18110038 Full name of student: Nguyễn Cảnh Dũng ID: 18110010 Major: Information technology Topic: Building an e-commerce website for selling electronic components Instructor’s full name: Lê Thị Minh Châu MSc Evaluation: About content & workload: Advantages: Disadvantages: Evaluation Rank: Mark: (By word: ……………………………………) Ho Chi Minh City, March 2023 Instructor CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* REVIEWER’S EVALUATION Full name of student: Võ Minh Huy ID: 18110020 Full name of student: Nguyễn Minh Phú ID: 18110038 Full name of student: Nguyễn Cảnh Dũng ID: 18110010 Major: Information technology Topic: Building an e-commerce website for selling electronic components Reviewer teacher’s full name: Lê Thị Minh Châu MSc Evaluation: About content & workload: Advantages: Disadvantages: Evaluation Rank: Mark: (By word: ……………………………………) Ho Chi Minh City, March 2023 Instructor TABLE OF CONTENTS FACULTY FOR HIGH-QUALITY TRAINING .1 CHAPTER 1: INTRODUCTION .1 1.1 Introduction about the project subject 1.2 Project objectives 1.3 Project outcomes 1.4 Project plan CHAPTER 2: CURRENT STATUS SURVEY General introduction Ideas, Purpose, Motivation, Risks Describe the operation of the store 2.1 Executive Board 2.2 Sales Department 2.3 Administration department .7 2.4 Requirements of the online sales system 2.4.1 User needs .7 2.4.2 Manager needs 2.4.3 Non-functional requirements of the online sales system Assignments CHAPTER 3: THEORETICAL BASICS 10 Spring boot 10 3.1 Introduction 10 3.2 Introduce RESTFUL Webservice 10 3.2.3 Mechanism of Spring Boot 12 3.2.4 React 13 3.2.4.1 Introduction of React 13 3.2.5 Introduction of Redux 14 3.2.6 Ant Design 18 3.2.7 PostgreSQL 19 CHAPTER 4: SYSTEM ANALYSIS AND DESIGN .20 4.1 System analysis and design 20 4.1.1 Product requirements 20 4.1.2 System Function Specification .20 4.1.3 Actor Description and featured functionalities .21 4.1.4 Usecase diagrams 23 4.1.5 Use case specification 30 4.1.6 Sequence diagram 52 4.1.7 Class Diagram .76 4.1.8 Database 78 CHAPTER 5: PROGRAM BUILDING 79 5.1 Build System 79 5.1.1 Front-End 79 5.1.2 Back-End 92 5.1.3 Public page 100 CHAPTER 6: DESCRIPTION OF SCREENS IN DETAIL (UI DESIGN) 104 6.1 Admin site 104 6.1.1 Login screen 104 CHAPTER 7.1.9.2 Edit news 7.1.10.Orders Admin can view a list of orders, search orders, and update orders’ states or cancel an order 153 CHAPTER 7.1.10.1 Update order 154 CHAPTER 7.2 Client 7.2.1 Login This page is used to login into the client site 155 CHAPTER 7.2.2 Profile Customer can upload their avatar or update their personal’s information such as password, full name, birthday, 156 CHAPTER 7.2.3 Address Management On the address management page, customers can view a list of addresses that they had created before, update/delete their addresses 157 CHAPTER 158 CHAPTER 7.2.4 Product Customers can view a list of products and product detail, search products, and add products to the cart 159 CHAPTER 160 CHAPTER 7.2.5 Cart This form is used to manage the products that customer has added to their cart They can increase/decrease product quantity, remove the product, add a note, and check the total price to pay After the customer clicks the “Place order” button, they will be forwarded to the payment page 7.2.6 Payment On this page, customer can edit their information such as their address, full name, phone number, and change payment method They can also view a list of products to make sure that they don’t buy the incorrect products And the customer is allowed to have kinds of payment methods some of which are COD (charge on delivery) and through sandbox payment of PayPal 161 CHAPTER 7.2.7 News Customers can view news on the website to know more about our products and how to utilize what they are going to buy or already have made the purchase 162 CHAPTER CHAPTER 8: CONCLUSION AND FUTURE DEVELOPMENTS 8.1 Conclusion - What have we learned in this project? Our group has learned a lot in this project on how to design layout by using ant design and other react powerhouse supports for creating UI pages We also have learned a lot in creating API for java spring boot and started to protect it with the help of Spring Security We have more experience in working as a group, assigning tasks to do, and helping each other by using an amazing tool like Jira When we face troubles then we start to meet up through Google Meet and start helping each other and find solutions to overcome them - What is the result of this project? We have two websites: one for clients and one for admin The client can place an order, add, or manage addresses, change their profile, track the orders they have placed and cancel an order after a specific amount of time Normal Admin can manage contents that are displayed on the client page and manage the order status of many clients Super Admin can manage both normal admin and customer on what kinds of permissions that they could and have all access to functionalities of which normal admin can perform 8.2 Pros and Cons • Pros The website from close lookup is clean, comprehensive, easy to use On the client’s side, the webpage might look a bit simple, plain but overall, it has provided enough content for many users to look up what kind of product they have been looking for And then on the admin’s page, the page is structured more 163 CHAPTER especially both in sider and main container It feels way more up-to-date, better as a website that can be used for management of a large cooperation store or a company The performance of both websites client and admin is also a plus as it can generally run at moderate speed The management in admin’s webpage is superb as it could genuinely be divided into kinds of roles Super Admin, Normal Admin, and Client As the Super Admin could take care of all functionalities which the admin’s webpage has given to and restrict it to two other actors Normal Admin and Client The Backend site of both websites has introduced the essential presence of Spring Security which will help our website prevent a cyber attack from hackers from the support of JWT session authentication and file upload vulnerability • Cons In general, these two websites Admin and Client have met the requirements set out in the construction process However, there are still a few functions that need improvement to make the website more user-friendly and responsive to the best possible ways for users The client’s page is still very simple, and it lacks lots of good content that could transform the website into a better one like the suggested product, discounted product price section, reviews section, Wishlist, … The admin’s page is good for a normal perspective of management as it allows admins to manage major parts of the Client’s page However, there might still be some improvements for the website later like enhancing the security layer of it 164 CHAPTER 8.3 Future works - Add a recommendation for special edition sale off - Allow the website to be more responsive friendly to the mobile user 165 REFERENCES [1] Ant Design of React - Ant Design [2] Getting Started – React (reactjs.org) [3] Spring Boot Reference Documentation [4] https://redux.js.org/introduction/getting-started [5] Sourcetree | Free Git GUI for Mac and Windows (sourcetreeapp.com) [6] Huyvictory/electronic-component-client-site-v1-1: Trang bán hàng electronic component (github.com) [7] Huyvictory/electronic-component-admin-site-v1: Administration website on selling electronic components page (github.com) [8] Integrate Checkout (paypal.com) 166 S K L 0