MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILDING AN COSMETICS E-COMMERCE WEB APPLICATION USING .NET & REACT LECTURER: LE VINH THINH STUDENT: TRUONG THI CAM TRAN DANG TAM SKL009622 Ho Chi Minh City, July, 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY ---------- BỘ GIÁO DỤC VÀ ĐÀO TẠOBỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN ---------- CAPSTONE PROJECT BUILDING AN COSMETICS E-COMMERCE WEB APPLICATION USING .NET & REACT INSTRUCTOR: Mr. Lê Vĩnh Thịnh STUDENTS: Trương Thị Cam 18110256 Trần Đăng Tâm 18110359 Ho Chi Minh City, July 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY ---------- BỘ GIÁO DỤC VÀ ĐÀO TẠOBỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN ---------- CAPSTONE PROJECT BUILDING AN COSMETICS E-COMMERCE WEB APPLICATION USING .NET & REACT INSTRUCTOR: Mr.
Lê Vĩnh Thịnh STUDENTS: Trương Thị Cam 18110256 Trần Đăng Tâm 18110359 Ho Chi Minh City, July 2022 SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness _______________ Ho Chi Minh City, …. July 2022 CAPSTONE PROJECT OBJECTIVES Full name of student: Trương Thị Cam Student Id: 18110256 Full name of student: Trần Đăng Tâm Student Id: 18110359 Major: Information Technology Project’s name: Building an cosmetics e-commerce web application using .Net & React Objectives: Theory: • Research .NET, React, SQL server • Research about Styled Component, Styled System, Pure React Carousel, Chart.Js, Formik, Typescript… • Research React framework: NextJS • Research about Azure, Swagger UI,. • Deploy project to Azure Web Service Practice: • Build website with the following main features: o Allow customers to browse products, add products to their shopping carts, checkout and pay for their purchases. o Customer can read real product reviews and wite review products that they bought o Admin manage users, products, product categories, orders.
• Deploy the database to Azure SQL Server • Deploy frontend and backend to Azure Web Service Execute time : 15 weeks (Start date from 7/3/2022 to 27/06/2022) Ho Chi Minh City,… July 2022 Head of industry Instructor’s name (Signed with full name) (Signed with full name) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness _______________ Ho Chi Minh City, …. July 2022 ASSESSMENT FORM FOR INSTRUCTOR Full name of student 1: Trương Thị Cam. Student Id:18110256 Full name of student 2: Trần Đăng Tâm. Student Id:18110359 Major: Information Technology Project’s name: Building an cosmetics e-commerce web application using .Net & React Instructor’s full name: Mr.
Lê Vĩnh Thịnh COMMENTARY 1. Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………. Approving for dissertation defence or not? ……………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………. Ho Chi Minh City, … July 2022 Instructor’s name (Signed with full name) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness _______________ Ho Chi Minh City, ….
July 2022 ASSESSMENT FORM FOR INSTRUCTOR Full name of student 1: Trương Thị Cam. Student Id:18110256 Full name of student 2: Trần Đăng Tâm. Student Id:18110359 Major: Information Technology Project’s name: Building an cosmetics e-commerce web application using .Net & React Reviewer’s full name: Mr. Huỳnh Xuân Phụng COMMENTARY 1.
Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………. Approving for dissertation defence or not? ……………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………. Ho Chi Minh City, … July 2022 Reviewer’s name (Signed with full name) ACKNOWLEDGEMENTS First of all, we would like to thank Mr. Le Vinh Thinh, who directly supported the group during the process of choosing the topic, guiding, commenting, and giving suggestions as well as providing reference materials.
Overall, Mr, Thinh is really enthusiastic about guiding theories as well as programming skills, especially how to solve. Once again, we would like to thank Mr. Le Vinh Thinh. Secondly, we really appreciate the Faculty of Information Technology – Ho Chi Minh City University of Technology and Education’s support.
FIT HCMUTE creates all the most favorable conditions for us to reach the new technical knowledge and skills. We also would like to thank the teachers and classmates in the Department of Information Technology for their help in supporting us and providing a lot of useful information and knowledge to help us complete the project. With the conditions of time and limited experience of students, this report cannot avoid defects. We look forward to receiving valuable comments from the teachers so that the group can improve the project in the future.
We are sincerely grateful! i INTRODUCTION Nowadays, in the Era of Internet of Things, the rhythm of society becomes busier and hustling, and it is difficult to spend time shopping. Concerns about time, location, unsafe traffic, bad weather, and limitations in traditional purchases can be avoided when shopping online. Therefore, consumers and customers who are organizations, companies,. are gradually switching to more online shopping to save time and effort.
Therefore, online shopping is even more important and necessary, with just one click, they can get the product they want. Online shopping has many advantages of being able to own everything. Through mouse clicks, you do not need to go to place to buy. After going to the sales website and selecting the product, just order, then they will bring the product to your home.
Online shopping allows purchases whenever you want. The online stores are never closed on the internet, you can shop 24/7. Shopping in markets, commercial centers or shops is very difficult for you to compare the characteristics and prices of the product. When buying online, you can easily compare and make the most suitable product choice for yourself.
Sometimes you encounter fastidious sellers at some sales locations. With online shopping, customers do not have to pay attention to it anymore. As a result, we have launched an E-commerce website "CiTi Shop", specializing in selling genuine cosmetics to customers who need cosmetics for beauty and health care. ii CONTENTS ACKNOWLEDGEMENTS.
iii LIST OF TABLES. iv LIST OF FIGURES. vii CHAPTER 1 OVERVIEW. The reason for choosing the topic.
2 CHAPTER 2 THEORETICAL BASIS. Introduction to SQL Server. 5 CHAPTER 3: SURVEYS AND REQUIREMENTS DETERMINATION. Survey of the current cosmetic stores online.
9 CHAPTER 4: SYSTEM ANALYSIS AND DESIGN. Use Case Diagram. Use Case detail. 92 iv LIST OF TABLES Table 1: User role.
10 Table 2: User Case Overview. 12 Table 3: Use Case Sign Up. 14 Table 4: Use Case Log in. 15 Table 5: Use Case View Home page.
16 Table 6: Use Case View product. 17 Table 7: Use Case View promotion. 18 Table 8: View Support page. 19 Table 9: Use Case View product details.
20 Table 10: View discount details. 21 Table 11: Use Case Chat. 22 Table 12: Use Case Log out. 23 Table 13: Use Case Personal information management.
24 Table 14: Usecase Personal account management. 25 Table 15: Usecase Search product. 26 Table 16: Usecase Order Product. 27 Table 17: Usecase Add to cart.
29 Table 18: Usecase Remove product from cart. 30 Table 19: Usecase Payment. 31 Table 20: Usecase Order tracking. 32 Table 21: Usecase Comment & rating.
33 Table 22: Usecase Admin page. 34 Table 23: Usecase User account management. 34 Table 24: Usecase Product management. 35 iv Table 25:Usecase Category management.
36 Table 26:Usecase Discount management. 37 Table 27: Usecase Order management. 38 Table 28: Usecase Stats. 39 Table 29: UI Overview.
65 Table 31: Home page (UI_02). 68 Table 32: Cart PopOver (UI_03). 69 Table 33: Search Page (UI_04). 71 Table 34: Login Page (UI_05).
72 Table 35: Register page (UI_06). 73 Table 36: Cart Page (UI_07). 74 Table 37: Products List Page (UI_08). 75 Table 38: Detail of Product Page (UI_09).
77 Table 39: Payment Page (UI_10). 77 Table 40: Receiver information (UI_11). 78 Table 41: Manage Product Page (UI_12). 79 Table 42: Modal Create Product (UI_13).
80 Table 43: Modal Create Address (UI_14). 81 Table 44: User Info Page (UI_15). 82 Table 45: Manage Order Page (UI_16). 83 Table 47: Manage Address page (UI_18).
84 Table 48: Setting account (UI_19). 85 Table 49: Order Tracking (UI_20). 86 v Table 50: Detail of Order (UI_21). 86 Table 51: Modal Add comment & rating (UI_22).
89 vi LIST OF FIGURES Figure 1: Introduction to NextJS. 4 Figure 2: The website Hasaki. 6 Figure 3: The website Guadian. 7 Figure 4: The website Nuty.
8 Figure 5: Use Case Diagram. 11 Figure 6: Sign up sequence diagram. 41 Figure 7: Log in sequence diagram. 42 Figure 8: View Home page sequence diagram.
43 Figure 9: View product sequence diagram. 44 Figure 10: View Promotion sequence diagram. 44 Figure 11: View Support page sequence diagram. 45 Figure 12: View product details sequence diagram.
46 Figure 13: View discount details sequence diagram. 46 Figure 14: Chat sequence diagram. 47 Figure 15: Log out sequence diagram. 48 Figure 16: Personal information management sequence diagram.
49 Figure 17: Personal account management sequence diagram. 50 Figure 18: Search product sequence diagram. 51 Figure 19: Order Product sequence diagram. 51 Figure 20: Add to cart sequence diagram.
52 Figure 21: Remove from cart sequence diagram. 53 Figure 22: Payment sequence diagram. 54 Figure 23: Order tracking sequence diagram. 55 Figure 24: Comment & rating sequence diagram.
56 vii Figure 25: Admin page sequence diagram. 57 Figure 26: User account management sequence diagram. 58 Figure 27: Product management sequence diagram. 59 Figure 28: Category management sequence diagram.
60 Figure 29: Discount management sequence diagram. 61 Figure 30: Order management sequence diagram. 62 Figure 31: View stats sequence diagram. 63 Figure 32: Database Diagram.
65 Figure 34: Home page (UI_02) - 1. 66 Figure 35: Home page (UI_02) - 2. 66 Figure 36 Home page (UI_02) - 3. 67 Figure 37 Home page (UI_02) - 4.
67 Figure 38 Home page (UI_02) - 5. 67 Figure 39 Home page (UI_02) – 6. 67 Figure 40: Cart PopOver (UI_03). 69 Figure 41: Search Page (UI_04).
71 Figure 42: Login Page (UI_05). 72 Figure 43: Register page (UI_06). 73 Figure 44: Cart Page (UI_07). 74 Figure 45: Products List Page (UI_08).
75 Figure 46: Detail of Product Page (UI_09) - 1. 76 Figure 47: Detail of Product Page (UI_09) - 2. 76 Figure 48: Payment Page (UI_10). 77 Figure 49: Receiver information (UI_11).
78 viii Figure 50: Manage Product Page (UI_12). 79 Figure 51: Modal Create Product (UI_13). 80 Figure 52: Modal Create Address (UI_14). 81 Figure 53: User Info Page (UI_15).
81 Figure 54: Manage Order Page (UI_16). 83 Figure 56: Manage Address page (UI_18). 84 Figure 57: Setting account (UI_19). 85 Figure 58: Order Tracking (UI_20).
85 Figure 59: Detail of Order (UI_21). 86 Figure 60: Modal Add comment & rating (UI_22). 89 ix CHAPTER 1 OVERVIEW CHAPTER 1 OVERVIEW 1. Subject name Building an cosmetics e-commerce web application CiTi Shop.
The reason for choosing the topic. Nowadays, there are varieties of cosmetics available in the market than ever before, it quite obvious to us that they play a crucial role in our day to day life, Cosmetics are essentials of daily life. Beauty needs as demand is indispensable, the skin care center, spa,. continuously appear to serve the beauty for our customers.
Besides, customers can also order beauty needs at home. Cosmetic has met the necessary requirements for their clients.