Build e commerce website using mern stack faculty of high quality training graduations thesis of the information technology

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 LIST OF FIGURES Figure 1: Structure Redux 24 Figure 2: The website https://www.zara.com 27 Figure 3: The website https://www.shein.com.vn 27 Figure 4: The website https://www.hm.com .28 Figure 5: The website https://libeworkshop.com/ .28 Figure 6: Use Case Diagram - User 34 Figure 7: Use Case Diagram - Admin .35 Figure 8: UC Guest – Register 35 Figure 9: UC Guest – Login 37 Figure 10: UC Guest - View Product List .39 Figure 11: UC Guest View Product Details 40 Figure 12: UC Guest Filter Product by Keyword .41 Figure 13: UC Guest Add Email .42 Figure 14: UC Guest Add to Compare 44 Figure 15: UC Guest Remove Product from Compare .45 Figure 16: UC Guest Add to Cart .46 Figure 17: Add to Cart .47 Figure 18: UC Guest Remove Product from Cart .47 Figure 19: UC User Logout .49 Figure 20: UC User Edit Profile 50 Figure 21: UC User Add to Wishlist 51 Figure 22: US User Remove Product from Wishlist .52 Figure 23: UC User Send Feedback 54 Figure 24: UC User Using Voucher 55 Figure 25: UC User Place Orders 56 Figure 26: UC User Order Tracking 58 Figure 27: UC User Cancel Order .59 Figure 28: UC User Comment Product .60 Figure 29: UC User Rating Product 61 Figure 30: UC User Payment 63 Figure 31: UC SA Create New Administrator 64 Figure 32: Update Administrator 66 Figure 33: UC SA Delete Administrator 67 Figure 34: UC SA Block Administrator 69 Figure 35: UC SA Unblock Administrator .70 Figure 36: UC Administrator Login 71 Figure 37: UC Administrator Logout 73 Figure 38: UC Administrator Create New Category 74 July 19, 2021 10 GRADUATION THESIS Figure 39: UC Administrator Update Category 75 Figure 40: UC Administrator Delete Category 77 Figure 41: UC Administrator Create New Product 78 Figure 42: UC Administrator Update Product 80 Figure 43: UC Administrator Delete Product 81 Figure 44: UC Administrator View Detailed Product 83 Figure 45: UC Administrator Block Products 84 Figure 46: UC Administrator Unblock Products 85 Figure 47: UC Administrator Import Goods .86 Figure 48: UC Administrator Create New User 88 Figure 49: UC Administrator Update User .89 Figure 50: UC Administrator Delete User 91 Figure 51: UC Administrator Change The Order Status 92 Figure 52: UC Administrator Send Email 94 Figure 53: View Statistical Page .95 Figure 54: Website Architecture .97 Figure 55: System architecture 97 Figure 56 : Class Diagram .98 Figure 57: SD Administrator Login 99 Figure 58: SD Administrator Create New Product 99 Figure 59: SD Administrator Update Product .100 Figure 60: SD Administrator Delete Product 100 Figure 61: SD Administrator Change The Order Status 101 Figure 62: SD Administrator View Statistical Page .101 Figure 63: SD Administrator Send Email .102 Figure 64: SD Guest Add to Cart 102 Figure 65: SD Guest Filter Product 103 Figure 66: SD User Payment 103 Figure 67: SD User Order Tracking 104 Figure 68: SD User Cancel Order 104 Figure 69: Entity Relationship Diagram 105 Figure 70: Administrator - Login Page 111 Figure 71: Administrator - Dashboard Page 112 Figure 72: Administrator - Category Page 113 Figure 73: Administrator - Product Page 114 Figure 74: Administrator - Modal Create New Product 115 Figure 75: Administrator – Modal Delete Product 116 Figure 76: Administrator - Modal Block Product 117 Figure 77: Administrator - Modal Details Product 118 Figure 78: Administrator - Email Page 119 July 19, 2021 11 GRADUATION THESIS Cart icon Dropdown Item chatbot 10 Messenger chatbot 11 Shop now button 12 Arrow icon 13 Slider Image Click on it to the cart to items displays Click on it to inform box display that login Facebook before chat with admin Click on it to the product screen displays To view more slider Table 71: User Logged 5.2.5 Product Store Page Figure 86: User – Product Store Page Ordinary numbers Name Type Descriptions Tag Label Contains tags Sexy Button Click on it to products related to sexy Product picture Image Delete icon Icon Click on it to remove product out the cart July 19, 2021 12 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 ... needs The operating criteria of the website are to serve the needs of wearing clothes and add a layer of value to consumers, giving them a great experience when accessing the website, high- quality. .. Node.js handles a file request:  Sends the task to the computer's file system  Ready to handle the next request  When the file system has opened and read the file, the server returns the content... file request:     Sends the task to the computer's file system Waits while the file system opens and reads the file Returns the content to the client Ready to handle the next request Here