(Đồ án tốt nghiệp) Build ECommerce website using mern stack

(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack(Đồ án tốt nghiệp) Build ECommerce website using mern stack

GRADUATION THESIS HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING  GRADUATION THESIS BUILD E-COMMERCE WEBSITE USING MERN STACK HO NGOC DINH CHAU Student ID: 17110008 NGUYEN THI BICH NHAN Student ID: 17110195 Major: SOFTWARE TECHNOLOGY School Year: 2017 – 2021 Advisor: Dr LE VAN VINH Ho Chi Minh City, June 2021 GRADUATION THESIS ACKNOWLEDGEMENTS  Firstly, we are very grateful to HCMC University of Technology and Education in general and Faculty For High Quality Training in particular for creating a good environment to study well which helps us to reach the new technical knowledge and skills Furthermore, helps us to promote our own knowledge and accomplished tasks well I believe that the knowledge acquired during the past time will help us have a solid foundation for the graduation project research process but also valuable luggage for us to enter life confidently and firmly In this semester, we have completed the graduation project BUID E-commerce Website Using MERN Stack Secondly, we would sincerely appreciate Mr Le Van Vinh helping our completion of the project who is really enthusiastic about guiding theories as well as programming skills, especially how to solve problems Once again we are eternally grateful for everything you’ve taught us and we wish you have a lot of heaths With the conditions of time and limited experience of student, this report cannot avoid defects We look forward to receiving your advice and comments so that we can improve the actual system in the future And finally, We wish nothing but the best for everybody We are sincerely grateful! Ho Chi Minh City, June 28, 2021 Ho Ngoc Dinh Chau STUDENTS Nguyen Thi Bich Nhan July 19, 2021 GRADUATION THESIS ABSTRACTS  As you all know, any business in the world has its proprietary name, specific characteristics and the own trademark to they can approach their all customers even though they're far away They can approach customers through the way to create their own website to help them give their products and services to customers lively at that time Furthermore, it's also an easy way to buying and selling products but also does not take the most time On the other hand, help marketing strategy quickly and does not take the most time For individuals, the website brings full necessary products information and easy to choose items July 19, 2021 GRADUATION THESIS ABBREVIATION LIST  UC SA Admin SD UI AI ERD TC Use case Super Admin Administrator Sequence Diagram User Interface Administrator Interface Entity Relationship Diagram Test Case July 19, 2021 GRADUATION THESIS TABLE OF CONTENTS ACKNOWLEDGEMENTS ABSTRACTS .2 ABBREVIATION LIST CHAPTER 1: INTRODUCTION 16 Rationale 16 Objectives .16 Contents 16 Research methods 17 Practical scientific significance 17 CHAPTER 2: FUNDAMENTALS 18 Introduction to the Technical Stack 18 1.1 What is the Technical Stack? 18 1.2 List of the top Stacks 18 Introduction to the MERN stack 18 2.1 What is the MERN stack? .18 2.2 How does the MERN Stack work? .18 2.3 Why use the MERN Stack? 19 Introduction to the MongoDB 19 3.1 What is the MongoDB? 19 3.2 What is the MongoDB Atlas? 19 3.3 Why use the MongoDB? 20 Introduction to the Express 20 4.1 What is the Express 20 4.2 Feature of Express 21 4.3 Why use the Express 21 Introduction to the ReactJS 21 5.1 What is the ReactJS? .21 5.2 Why use the ReactJS? 22 5.3 What is the JSX? 22 July 19, 2021 GRADUATION THESIS 5.4 What is the Virtual Dom? 22 5.5 What is the Hooks? 22 Introduction to the NodeJS 23 6.1 What is the NodeJS? 23 6.2 What can NodeJS do? 23 6.3 Why use the NodeJS? .23 Introduction to the Redux 23 7.1 What is the Redux? 23 7.2 How Redux works? 24 7.3 Why use the Redux? .24 Introduction to the PayPal 24 8.1 What is the PayPal? .24 8.2 Why uses the PayPal? 25 CHAPTER 3: SURVEYS AND USER REQUIREMENTS 26 Reality survey 26 1.1 Websites 26 1.1.1 ZARA 26 1.1.2 SHEIN .27 1.1.3 H&M 27 1.1.4 LIBÉ 28 1.2 Conclusion .28 User Requirement 29 2.1 The function of Guest 29 2.2 The function of User .30 2.3 The function of Administrator 32 2.4 The function of Super Admin 33 2.5 Use Case Diagram 34 2.5.1 Module End-User 34 2.5.2 Module Administrator 35 2.6 Use Case Description 35 July 19, 2021 GRADUATION THESIS 2.6.1 Guest 35 2.6.1.1 Register 35 2.6.1.2 Login 37 2.6.1.3 View Product List 38 2.6.1.4 View Detailed Product 40 2.6.1.5 Filter Product 41 2.6.1.6 Add Email 42 2.6.1.7 Add to Compare 44 2.6.1.8 Remove Product from Compare 45 2.6.1.9 Add to cart 46 2.6.1.10 Remove Product from Cart 47 2.6.2 User 48 2.6.2.1 Logout 48 2.6.2.2 Edit Profile 50 2.6.2.3 Add to Wishlist .51 2.6.2.4 Remove Product from Wishlist .52 2.6.2.5 Send Feedback 53 2.6.2.6 Using Voucher 55 2.6.2.7 Place Orders 56 2.6.2.8 Order Tracking .57 2.6.2.9 Cancel Order 59 2.6.2.10 Comment Product 60 2.6.2.11 Rating Product .61 2.6.2.12 Payment 62 2.6.3 Supper Administrator .64 2.6.3.1 Create New Administrator .64 2.6.3.2 Update Administrator .65 2.6.3.3 Delete Administrator 67 2.6.3.4 Block Administrator 68 2.6.3.5 Unblock Administrator .70 July 19, 2021 GRADUATION THESIS 2.6.4 Administrator 71 2.6.4.1 Login .71 2.6.4.2 Logout .72 2.6.4.3 Create New Category 74 2.6.4.4 Update Category 75 2.6.4.5 Delete Category 77 2.6.4.6 Create New Product 78 2.6.4.7 Update Product 80 2.6.4.8 Delete Product 81 2.6.4.9 View Detailed Product 82 2.6.4.10 Block Products 84 2.6.4.11 Unblock Products 85 2.6.4.12 Import Goods 86 2.6.4.13 Create New User 88 2.6.4.14 Update User 89 2.6.4.15 Delete User .91 2.6.4.16 Change The Order Status 92 2.6.4.17 Send Email .93 2.6.4.18 View Statistical Page .95 CHAPTER 4: SYSTEM DESIGN 97 System architecture 97 Class Diagram .97 Sequence Diagram 98 3.1 Administrator Login .98 3.2 Administrator Create New Product 99 3.3 Administrator Update Product 99 3.4 Administrator Delete Product 100 3.5 Administrator Change The Order Status 101 3.6 Administrator View Statistical Page 101 3.7 Administrator Send Email 101 July 19, 2021 GRADUATION THESIS 3.8 Guest Add to Cart .102 3.9 Guest Filter Product 102 3.10 User Payment 103 3.11 User Order Tracking .103 3.12 User Cancel Order 104 Entity Relationship Diagram .104 4.1 ERD .104 4.2 Database Description 105 4.2.1 Product Table 105 4.2.2 User Table 106 4.2.3 Comment Table .107 4.2.4 Order Table 108 4.2.5 Statistical Table .108 4.2.6 Category Table 109 4.2.7 Tag Table 109 4.2.8 Voucher Table 109 4.2.9 Email Table 110 4.2.10 Size Table .110 Screen Interface 110 5.1 Administrator Interface .110 5.1.1 Login Page 110 5.1.2 Dashboard Page .111 5.1.3 Category Page 113 5.1.4 Product Page 114 5.1.5 Modal Create New Product 115 5.1.6 Modal Delete Product 116 5.1.7 Modal Block Product 116 5.1.8 Modal Details Product 117 5.1.9 Email Page 118 5.1.10 Modal Discount Product .119 July 19, 2021 GRADUATION THESIS 5.1.11 List Product Blocked Page 119 5.1.12 Order Page .120 5.2 User Interface .121 5.2.1 Home Page 121 5.2.2 Login Page 122 5.2.3 Register Page 123 5.2.4 User Logged 124 5.2.5 Product Store Page 125 5.2.6 Details Product Page .126 5.2.7 Related Products 127 5.2.8 Review Page 127 5.2.9 Modal Details Product 128 5.2.10 Cart Page 129 5.2.11 Checkout Page 01 130 5.2.12 Checkout Page 02 131 5.2.13 My Order Page 131 5.2.14 My Profile Page .132 CHAPTER 5: IMPLEMENT AND TESTING 134 Tools in Project 134 Technology in Project 134 Setup .134 Deployment 134 Testing 134 CHAPTER 6: CONCLUSION .137 REFERENCES 139 July 19, 2021 GRADUATION THESIS Quantity Label Color Label Displays the quantity of product on cart Displays the color of product Name Label Display the name product Product price Label Display the price product Size Label Display the size product 10 Total price Label Display the total price product 11 View cart Button Click on it to cart screen displays 12 Checkout Button 13 Heart Button Click on it to payment screen displays Redirection product to wishlist 14 Select option Button Redirection to detailed product 15 Eyes Button Appear the popup to detailed product Table 72: Product Store Page 02 5.2.6 Details Product Page Figure 87: User - Details Product Page July 19, 2021 12 GRADUATION THESIS Ordinary numbers Name Type Descriptions Star icon icon Displays ratting of product View Label View statistic each of product Product picture Image Points earned when buying Color Choice the color of product Size Radio button Button Heart Icon Click on it to add item on wishlist Compare Icon Click on it to add item on compare Product picture Image Product picture Image Choice the size product Displays others different Table 73: Details Product Page 5.2.7 Related Products Figure 88: User - Related Product 5.2.8 Review Page July 19, 2021 12 GRADUATION THESIS Figure 89: User - Review Page Ordinary numbers Name Type Product picture Image Label Descriptions product Star icon icon Displays ratting of product Choose file Comment Radio button Input Click on it appear the browser to choose file image Write the comment Post Button Click on it to post the comment Descriptions Table 74: Review Page 5.2.9 Modal Details Product July 19, 2021 12 GRADUATION THESIS Figure 90: User - Modal Details Product 5.2.10 Cart Page Figure 91: User - Cart Page Ordinary numbers Name Type Descriptions Title Label Product picture Image Name Label Display the name product Minus icon Button Plus icon Button Click on it to minus quantity of product Click on it to plush quantity of product July 19, 2021 12 GRADUATION THESIS Delete icon Icon Color & size Label Click on it to remove the item out the wishlist Displays the color & size of product Product price Label Display the price product Quantity Label Displays the quantity of product 10 11 Clear shopping button Click on it to remove all items in cart cart Continue button Click on it to the product screen shopping Table 75: Cart Page 5.2.11 Checkout Page 01 Figure 92: User - Checkout Page 01 Ordinary numbers Name Type Descriptions Title Label Information Label Display information of user Name Label Display the name product July 19, 2021 13 GRADUATION THESIS Product price & quantity Total Label Display information of product Label Displays the total price of order Table 76: Checkout Page 01 5.2.12 Checkout Page 02 Figure 93: User - Checkout Page 02 Ordinary Name numbers Note Type Descriptions Input Enter the note in box Coupon Input Enter the coupon in box Apply coupon button Allows the user to use coupon or not Place order Button PayPal Click on it to purchase items by payment when received Button Click on it to purchase items by PayPal Table 77: Checkout Page 02 5.2.13 My Order Page July 19, 2021 13 GRADUATION THESIS Figure 94: User - My Order Page Ordinary numbers Name Type Descriptions Title Label Total Label Canceled status Label Review product Link Date Label Click on it to the detailed product displays Date of order Cancel order Link The user can cancel the order Table 78: My Order Page 5.2.14. My Profile Page July 19, 2021 13 GRADUATION THESIS Figure 95: User - My Profile Page Ordinary numbers Name Type Product picture Image Choose file Information Radio button Label Save Button Descriptions Click on it appear the browser to choose file image Display information of user The user can change any label and then they have to click save button Table 79: My Profile Page July 19, 2021 13 GRADUATION THESIS CHAPTER 5: IMPLEMENT AND TESTING Tools in Project Tool Environment Name NodeJS PostMan Visual Studio Code MongoDB (NoSQL) Github Draw.io, Enterprise Architect Table 80: Tools in Project IDE Database Source control Modelling tools Technology in Project Back-End Front-End Database Services - ExpressJS - ReactJS - Redux - MongoDB Alas - PayPal (Payment gateway) Table 81: Technology in Project Setup  Clone project from github  Install npm: cmd  npm install  Run Project: cmd  npm start Deployment API User Website Admin Website - Heroku Netlify Netlify Testing Test Case No Test TC01 Test-Case Short Description Login/Authentication interface for the Admin Expected Result Actual Result As expected Pass July 19, 2021 13 GRADUATION THESIS TC02 TC03 TC04 TC05 TC06 TC07 TC08 TC09 TC010 TC11 TC12 TC13 TC14 TC15 TC16 TC17 TC18 TC19 TC20 TC21 TC22 TC23 TC24 TC25 TC26 TC27 TC28 TC29 TC30 TC31 Login/Authentication interface for the users Admin can create new category Admin can update category Admin can delete category Admin can create new tag Admin can update tag Admin can delete tag Admin can create new product Admin can update product Admin can delete product Admin can block product Admin can unblock product Admin can create new size Admin can update size Admin can delete size Admin can create voucher Admin can update voucher Admin can delete voucher Admin can change status order Admin can delete status order Admin can send email to customer Admin can view statistical Admin can create new user Admin can update user Admin can delete user Admin can block user Admin can unblock user SA can create new admin SA can update admin SA can delete admin As expected Pass As expected Pass As expected As expected As expected As expected As expected As expected Pass Pass Pass Pass Pass As expected As expected As expected As expected As expected As expected As expected As expected As expected As expected As expected Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass As expected As expected Pass Pass As expected As expected As expected As expected As expected As expected As expected As expected As expected Pass Pass Pass Pass Pass Pass Pass Pass Pass July 19, 2021 13 GRADUATION THESIS TC32 TC33 TC34 TC35 TC36 TC37 TC38 TC39 TC40 TC41 TC42 TC43 TC44 TC45 TC46 TC47 TC48 TC49 TC50 SA can block admin As expected SA can unblock admin As expected User can add to cart As expected User can add to wishlist As expected User can add to compare list As expected User can filter product by As expected category User can filter product by tag As expected User can filter product by As expected size User can filter product by As expected Color User can filter product by As expected keyword User can filter product by As expected price User can view details product As expected User can comment product As expected User can order tracking As expected product User can place order As expected User can payment by Paypal As expected Use can send email to Admin As expected User can connect message As expected chat with Admin User can receive e-invoice As expected Table 82: Test Case Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass July 19, 2021 13 GRADUATION THESIS CHAPTER 6: CONCLUSION Result In general, we have achieved 100% of the initial goals Through self-study and research, we have learned more about the process of building an application, how to use tools that support programming, how to analyze databases, about problemsolving  Operate and proficiently use React & Redux  Using NoSQL is MongoDB  Know that how to integrate technologies to build an application that runs on a color website  How to public website (Heroku & Netlify)  Furthermore, help us improve our skills and experience more User website URL: https://reverent-curie-7a2a0c.netlify.app Admin website URL: https://vigilant-saha-678c81.netlify.app Source: https://github.com/hndc9x/KhoaLuan Strengths  Deployment the website  Supports phone interface  User-friendly interface, easy to use  Users can easily filter and select products  Makes the orders quickly  Users can contact the shop by Messenger as well as rates & comments on the product Drawbacks  There are many service packages with high costs, so we can't buy them to apply to the website  Lack of deep knowledge and practical knowledge of applied technology  Website not optimized Future Works  Create more functions for the website, for example: Create games to accumulate points, recommend products using Artificial intelligence technology  Build Google Maps API to direct users to the nearest store July 19, 2021 13 GRADUATION THESIS  Website security  Website optimization With the above development directions, we believe that in the future the application will help users have better experiences, save costs, time and money, thereby improving the quality of life July 19, 2021 13 GRADUATION THESIS REFERENCES The website about Technology Stack [1] https://mixpanel.com/topics/what-is-a-technology-stack/ The website about MERN Stack [2]https://wikitia.com/index.php?title=MERN_(solution_stack)&mobileaction=togg le_view_desktop The website about set up MongoDB [3] https://www.mongodb.com/try#community The website about MongoDB [4] https://www.mongodb.com/what-is-mongodb The website about set up Express [5] https://developer.mozilla.org/en-US/docs/Learn/Serverside/Express_Nodejs/Introduction The website about set up Express [6] https://www.besanttechnologies.com/what-is-expressjs The website about Express [7] https://skillcrush.com/blog/what-is-react-js/#what The website about set up PayPal [8] https://www.businessinsider.com/how-to-set-up-a-paypal-account Video YouTube: Link video guide MERN Stack https://www.youtube.com/watch?v=tvdFYmJEaw4&list=PLB_Wd45SGAYsxD4JGaVdXll3PnoyI-AM&fbclid=IwAR3JgFG9kKM0_NHKnla8eCDYc_xVKM-4Nhh_cBklCYIwjqwcZRuRR5UzzY July 19, 2021 13 S K L 0 ... Express, React, NodeJS Table 1: List of the top Stacks Introduction to the MERN stack 2.1 What is the MERN stack? The MERN stack is a software stack comprised of four open-source technologies... the Technical Stack 18 1.1 What is the Technical Stack? 18 1.2 List of the top Stacks 18 Introduction to the MERN stack 18 2.1 What is the MERN stack? ... technologies creates a MERN Stack [2] 2.2 How does the MERN Stack work? The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript