Building a website for a chain of coffee shops faculty of high quality training graduations thesis of the information technology

TABLE OF CONTENT BUILDING A WEBSITE FOR A CHAIN OF COFFEE SHOPS i GRADUATION THESIS TASK ii ASSESSMENT FORM OF INSTRUCTOR iii ASSESSMENT FORM OF CRITICAL LECTURER iv ACKNOWLEDGMENTS v SUMMARY vi TABLE OF CONTENT viii LIST OF TABLE xi LIST OF PICTURES xiv Chapter OVERVIEW 1.1 Reason for choosing the topic 1.2 Purpose and tasks performed .1 1.2.1 Purpose .1 1.2.2 Tasks 1.3 Research Methods 1.4 Expected results achieved Chapter THEORETICAL BASIS 2.1 About ReactJs 2.1.1 What is ReactJs? 2.1.2 Highlights of ReactJs .2 2.1.3 About JXS .2 2.1.4 Components 2.1.5 Props 2.1.6 State 2.2 About NodeJs 2.2.1 What is Nodejs ? 2.2.2 Highlights of Nodejs viii 2.2.3 Benefits of using Nodejs 2.3 About ExpressJs .4 2.3.1 What is ExpressJs? 2.3.2 The function of ExpressJs .4 2.3.3 Benefits of using ExpressJs .4 2.4 About MongoDB .4 2.4.1 What is MongoDB? 2.4.2 Why use MongoDB ? .4 2.5 About Natural Language Processing 2.5.1 What is Natural Language Processing? .5 2.5.2 Application of Natural Language Processing in chatbot building 2.5.3 Technologies used – Dialogflow Chapter DETERMINATION OF REQUIREMENTS AND SYSTEM MODELING 3.1 Current status survey 3.2 Request list 3.3 Requirements Modeling .10 3.4 Use Case Diagram 11 3.4.1 Admin 13 3.4.2 Employee 25 3.4.3 Customers have account .32 3.4.4 Customers have no account 37 Chapter 40 SYSTEM ANALYSIS AND DESIGN 40 4.1 Database design 41 4.1.1 Database diagram 41 4.1.2 Analysis of entities 42 4.2 Website interface design 47 4.2.1 Admin - Employee page (CMS Page) 47 4.2.2 Customer page (Client Page) 70 4.3 Mobile interface design 88 ix 4.4 Sequence diagram 100 4.4.1 Login .100 4.4.2 Admin - Employee .100 4.4.3 Customer 102 Chapter 103 INSTALL AND TEST 103 5.1 Support tools .103 5.2 Set up and run the program 103 5.2.1 Set up and run Back-end 103 5.2.2 Set up and run Front-end 103 5.2.3 Program Structure .103 5.3 Testing 105 5.3.1 Register 105 5.3.2 Login .106 Chapter 108 CONCLUDE 108 6.1 Summary .108 6.2 Result 108 6.3 Advantages 108 6.4 Defect 108 6.5 Future work 108 REFERENCES 109 x LIST OF TABLES Table 3.1 Usecase specification: Admin - Manage account 14 Table 3.2 Usecase specification: Admin - Manage employee 15 Table 3.3 Usecase specification: Admin - Manage branch 16 Table 3.4 Usecase specification: Admin - Manage category 17 Table 3.5 Usecase specification: Admin - Manage product 18 Table 3.6 Usecase specification: Admin – Manage comment 19 Table 3.7 Usecase specification: Admin – Manage order 20 Table 3.8 Usecase specification: Admin – Manage coupon code 21 Table 3.9 Usecase specification: Admin – View stats 22 Table 3.10 Usecase specification: Admin – Login 23 Table 3.11 Usecase specification: Admin – Logout 24 Table 3.12 Usecase specification: Employee - Manage branch 26 Table 3.13 Usecase specification: Employee – Manage order 27 Table 3.14 Usecase specification: Employee – Manage coupon code 28 Table 3.15 Usecase specification: Employee – View stats 29 Table 3.16 Usecase specification: Employee – Login 30 Table 3.17 Usecase specification: Employee – Logout 31 Table 3.18 Describe usecase: Customers have account - Login 33 Table 3.19 Describe usecase: Customers have account - Logout 34 Table 3.20 Describe usecase: Customers have account – Rating and comment 35 Table 3.21 Describe usecase: Customers have account - Order 36 Table 3.22 Describe usecase: Customers have no account - Register 38 Table 3.23 Describe usecase: Customers have no account - Order 39 Table 4.1 Database entity analysis: Categories 42 Table 4.2 Database entity analysis: Product 42 Table 4.3 Database entity analysis: Order 43 Table 4.4 Database entity analysis: Branches 44 Table 4.5 Database entity analysis: Coupon code 44 xi Table 4.6 Database entity analysis: User 45 Table 4.7 Database entity analysis: Comments 46 Table 4.8 Describe: Login page for store members 47 Table 4.9 Describe: Dashboard page - statistics 48 Table 4.10 Describe: Admin page - Navigation bar 49 Table 4.11 Describe: Category management page 50 Table 4.12 Describe: The window of creating a new category product 51 Table 4.13 Describe: The window of editing category product 52 Table 4.14 Describe: Product management page 53 Table 4.15 Describe: The window of creating a new product 54 Table 4.16 Describe: The window of update product 55 Table 4.17 Describe: Account management page 56 Table 4.18 Describe: Comments management page 57 Table 4.19 Describe: Employee management page 58 Table 4.20 Describe: The window of creating employee 59 Table 4.21 Describe: Coupon code management page 60 Table 4.22 Describe: The window of creating coupon code 61 Table 4.23 Describe: Branch management page 62 Table 4.24 Describe: The window of branches management 63 Table 4.25 Describe: The window of creating a new branch 64 Table 4.26 Describe: The window of adding new products for the branch 65 Table 4.27 Describe: Order management page 66 Table 4.28 Describe: The window of order detail 67 Table 4.29 Describe: Password change page 68 Table 4.30 Describe: Coupon code management page for employee 69 Table 4.31 Describe: Home page 71 Table 4.32 Describe: The window of login 72 Table 4.33 Describe: The window of register 73 Table 4.34 Describe: Introduction page 74 Table 4.35 Describe: Profile page 75 xii Table 4.36 Describe: Password change page for the customer 76 Table 4.37 Describe: Product page 78 Table 4.38 Describe: Product details page - reviews 80 Table 4.39 Describe: Product details page – rating and comment 82 Table 4.40 Describe: Coupon code page 83 Table 4.41 Describe: Order history page 85 Table 4.42 Describe: Shopping cart page 86 Table 4.43 Describe: The window of entering information and payment 87 Table 4.44 Describe: Mobile - Login screen 88 Table 4.45 Describe: Mobile - Registration screen 89 Table 4.46 Describe: Mobile - Chatbot screen 90 Table 4.47 Describe: Mobile - Profile screen 91 Table 4.48 Describe: Mobile - Profile update screen 92 Table 4.49 Describe: Mobile - Home screen 93 Table 4.50 Describe: Mobile – Shopping cart (empty) 94 Table 4.51 Describe: Mobile - Reviews 95 Table 4.52 Describe: Mobile - Rating and comment 96 Table 4.53 Describe: Mobile - Order summary screen 97 Table 4.54 Describe: Mobile - Payment screen 98 Table 4.55 Describe: Mobile - Payment method screen 99 Table 5.1 Testcase: Register 105 Table 5.2 Testcase: Login 106 xiii LIST OF PICTURES Figure 3.1 Current status survey: The Coffee House Figure 3.2 Current status survey: Highland Coffee Figure 3.3 Current status survey: Trung Nguyen Legend Figure 3.4 Current status survey: Starbucks Figure 3.5 Requirements Modeling 10 Figure 3.6 Use Case Diagram - Store management 11 Figure 3.7 Use Case Diagram - Customer 12 Figure 3.8 Usecase: Admin 13 Figure 3.9 Usecase admin: Manage account 14 Figure 3.10 Usecase admin: Manage employee 15 Figure 3.11 Usecase admin: Manage branch 16 Figure 3.12 Usecase admin: Manage category 17 Figure 3.13 Usecase admin: Manage product 18 Figure 3.14 Usecase admin: Manage comment 19 Figure 3.15 Usecase admin: Manage order 20 Figure 3.16 Usecase admin: Manage coupon code 21 Figure 3.17 Usecase admin: View stats 22 Figure 3.18 Usecase admin: Login 23 Figure 3.19 Usecase admin: Logout 24 Figure 3.20 Usecase: Employee 25 Figure 3.21 Usecase employee: Manage branch 26 Figure 3.22 Usecase employee: Manage order 27 Figure 3.23 Usecase employee: Manage coupon code 28 Figure 3.24 Usecase employee: View stats 29 Figure 3.25 Usecase employee: Login 30 Figure 3.26 Usecase employee: Logout 31 Figure 3.27 Usecase: Customers have account 32 Figure 3.28 Usecase customers have account: Login 33 xiv Figure 3.29 Usecase customers have account: Logout 34 Figure 3.30 Usecase customers have account: Rating and comment 35 Figure 3.31 Usecase customers have account: Order 36 Figure 3.32 Usecase: Customers have no account 37 Figure 3.33 Usecase customers have no account: Register 38 Figure 3.34 Usecase customers have no account: Order 39 Figure 4.1 Database diagram 41 Figure 4.2 Login page for store members 47 Figure 4.3 Dashboard page - Statistics 48 Figure 4.4 Admin page: Navigation bar 49 Figure 4.5 Category management page 50 Figure 4.6 The window of creating a new category product 51 Figure 4.7 The window of editing category product 52 Figure 4.8 Product management page 52 Figure 4.9 The window of creating a new product 53 Figure 4.10 The window of update product 54 Figure 4.11 Account management page 56 Figure 4.12 Comments management page 57 Figure 4.13 Employee management page 58 Figure 4.14 The window of creating employee 59 Figure 4.15 Coupon code management page 60 Figure 4.16 The window of creating coupon code 61 Figure 4.17 Branch management page 62 Figure 4.18 The window of branches management 63 Figure 4.19 The window of creating a new branch 64 Figure 4.20 The window of adding new products for the branch 64 Figure 4.21 Order management page 65 Figure 4.22 The window of order detail 66 Figure 4.23 Password change page 67 Figure 4.24 Coupon code management page for employee 68 xv Figure 4.25 Home page 70 Figure 4.26 The window of login 71 Figure 4.27 The window of register 72 Figure 4.28 Introduction page 73 Figure 4.29 Profile page 74 Figure 4.30 Password change page for the customer 75 Figure 4.31 Product page 77 Figure 4.32 Closed shop 79 Figure 4.33 Product details page – reviews 80 Figure 4.34 Product details page – rating and comment 81 Figure 4.35 Coupon code page 83 Figure 4.36 Order history page 84 Figure 4.37 Shopping cart page 85 Figure 4.38 The window of entering customer information 86 Figure 4.39 The window of payment 87 Figure 4.40 Mobile - Login screen 88 Figure 4.41 Mobile - Registration screen 89 Figure 4.42 Mobile - Chatbot screen 90 Figure 4.43 Mobile - Profile screen 91 Figure 4.44 Mobile - Profile update screen 92 Figure 4.45 Mobile - Home screen 93 Figure 4.46 Mobile – Shopping cart (empty) 94 Figure 4.47 Mobile - Reviews 95 Figure 4.48 Mobile - Rating and comment 96 Figure 4.49 Mobile - Order summary screen 97 Figure 4.50 Mobile - Payment screen 98 Figure 4.51 Mobile - Payment method screen 99 Figure 4.52 Mobile - Thank you screen 99 Figure 4.53 Sequence - Login 100 Figure 4.54 Sequence: Category management 100 xvi Figure 4.55 Sequence: Product management 101 Figure 4.56 Sequence: Confirm Order 101 Figure 4.57 Sequence: Create Order 102 Figure 4.58 Sequence: Rating and comment 102 Figure 5.1 Structure: Back-end 103 Figure 5.2 Structure: Front-end: Admin - Employee 104 Figure 5.3 Structure: Front-end: Client 104 Figure 5.4 Structure: Mobile 104 xvii Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.47 Mobile - Reviews Table 4.51 Describe: Mobile - Reviews No Name Detailed description Product information Contains image, name and product price Add product to cart Click to add product to cart Reviews Show previous user reviews of the product Rating and comment Click to go to rating and comment When clicked, customers will be redirected to the homepage Button “Home” Displays a different color from the rest of the pages while working on this page When clicked, customers will be redirected Button “Profile” to the profile page When clicking, customers will be Button “Chatbot” redirected to the chatbot page – Auto reply 95 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.48 Mobile - Rating and comment Table 4.52 Describe: Mobile - Rating and comment No Name Detailed description Product information Contains image, name and product price Add product to cart Click to add product to cart The user chooses the number of hearts to Star rating rate the product Comment Customers enter product reviews When clicked, the product review will be Button “Update rating” saved When clicked, customers will be redirected to the homepage Button “Home” Displays a different color from the rest of the pages while working on this page When clicked, customers will be redirected Button “Profile” to the profile page When clicking, customers will be Button “Chatbot” redirected to the chatbot page – Auto reply 96 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.49 Mobile - Order summary screen Table 4.53 Describe: Mobile - Order summary screen No Name Detailed description Display the products selected by the Product added customer Temporary total amount Is the total price of the products Button “Order” When clicked, will go to the payment page When clicked, customers will be redirected to the homepage Button “Home” Displays a different color from the rest of the pages while working on this page When clicked, customers will be redirected Button “Profile” to the profile page When clicking, customers will be Button “Chatbot” redirected to the chatbot page – Auto reply 97 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.50 Mobile - Payment screen Table 4.54 Describe: Mobile - Payment screen No Name Detailed description When clicking, the user will change the Change the address delivery address User chooses the appropriate discount code Discount code for his order Total price Total amount to be paid by the customer Click confirm order after checking the Payment order and go to the payment method page When clicked, customers will be redirected to the homepage Button “Home” Displays a different color from the rest of the pages while working on this page When clicked, customers will be redirected Button “Profile” to the profile page When clicking, customers will be Button “Chatbot” redirected to the chatbot page – Auto reply 98 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.51 Mobile - Payment method screen Table 4.55 Describe: Mobile - Payment method screen No Name Detailed description PayPal Payment Click to pay the order by PayPal Click to pay for your order by Debit or Payment Debit or Credit Credit card Figure 4.52 Mobile - Thank you screen 99 Chapter 4: SYSTEM ANALYSIS AND DESIGN 4.4 Sequence diagram 4.4.1 Login Figure 4.53 Sequence - Login 4.4.2 Admin - Employee Figure 4.54 Sequence: Category management 100 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.55 Sequence: Product management Figure 4.56 Sequence: Confirm Order 101 Chapter 4: SYSTEM ANALYSIS AND DESIGN 4.4.3 Customer Figure 4.57 Sequence: Create Order Figure 4.58 Sequence: Rating and comment 102 Chapter 5: INSTALL AND TEST Chapter INSTALL AND TEST 5.1 Support tools − Use Visual Studio Code to write code − Using Nodejs − Use mongodb.com to create database − Use draw.io to draw UML 5.2 Set up and run the program 5.2.1 Set up and run Back-end − Access the folder: Coffee_Shop and go to the backend_api folder − Install package: npm install − Run project: npm start 5.2.2 Set up and run Front-end − Access the folder: Coffee_Shop and go to the folder frontend_cms and frontend_website − Install package: npm install − Run project: npm start 5.2.3 Program Structure Figure 5.1 Structure: Back-end 103 Chapter 5: INSTALL AND TEST Figure 5.2 Structure: Front-end: Admin - Employee Figure 5.3 Structure: Front-end: Client Figure 5.4 Structure: Mobile 104 Chapter 5: INSTALL AND TEST 5.3 Testing 5.3.1 Register Table 5.1 Testcase: Register Test Title Test Case# Step Test Test Leave Open the email, registry window REG_ password Leave email, TEST#01 or Name password, Name blank blank Click register Enter Open the email that registry window does not Enter Name and REG exist and Password but enter TEST#02 enter email does not Name and exist password Click register REG TEST#03 Enter real email and enter Name and password Open the registry window Enter the real Name and password and email Click register Data fName = “” email = “ ” password = “ ” fName = “trung phan” email = “ aaaaa@gmail.com” password = “Abc@123” Email = “phicuong99@gmail.c om” Password = “Abc@123” Expected Result Report cannot leave email, password and Name blank Report successful registration but cannot confirm the account via text message sent to email Report successful registration, customers go to email to verify email 105 Chapter 5: INSTALL AND TEST 5.3.2 Login Table 5.2 Testcase: Login Test Title Test Case# Test LOGIN TEST#01 LOGIN TEST#02 LOGIN TEST#03 LOGIN TEST#04 LOGIN TEST#05 Step Test Open the login Leave your window email or Leave your password email and blank password blank Click sign in Open the login The email window is Enter the registered correct email but but the the wrong password password is wrong Click sign in Email is Open the login not window registered Enter and unregistered email entered and wrong wrong password password The email Open the login is window registered Enter the and the registered email password and correct is correct, password but the but the account has been account is locked locked The email Open the login is window registered Data email = “ ” password = “ ” Expected Result Report cannot leave email and password blank Report failed email = login, “kaitrung99@gmail.co incorrect m” email or password = “aaaaaa” password Report failed email = login, “trungphan123@gmail incorrect com” email or password = “aaaaa” password email = “kaimap99@gmail.co m” password = “Abc@123” Report failed login, incorrect email or password email = Report “kaitrung99@gmail.co successful m” login and 106 Chapter 5: INSTALL AND TEST and the password is correct Enter the registered email and correct password password = “Abc@123” redirect to homepage 107 Chapter 6: CONCLUDE Chapter CONCLUDE 6.1 Summary Since receiving the topic and in the development process, our team has encountered many difficulties because of the desire to apply new technologies and languages to the system, even though they have not studied and learned before MERN STACK is not specialized, but it is the first step for us to improve our knowledge and experience so that we can develop more and more in creating a website product Over a while trying to research and learn, our group has created a business website with basic functions such as Admin management functions, purchase functions, shopping carts, comments, and reviews 6.2 Result After a period building a website for the coffee shop chain business, thanks to the guidance and help of Mr Le Vinh Thinh, our team has completed most of the functions and requirements originally set out Then the group will continue to build additional functionality needed in the future to meet the needs of our customers, helping them have a better experience in shopping at the website 6.3 Advantages − Developing the registration and login process of the website is relatively true to the actual business, helping the admin to manage the accounts easily − The website has a friendly interface that is easy to use − Order confirmation function allows Admin to review valid orders before confirming for delivery − Users can leave comments and reviews for products to make shopping more reliable and objective 6.4 Defect − The purchase of the website is not really close to reality − Website does not have high security 6.5 Future work − Customers can pay online by e-wallet (Momo, ZaloPay, ) − Incorporating 3rd parties (such as Now, Baemin, Gojek, ) for customers' orders 108 REFERENCES REFERENCES Vietnamese: [1] Priyesh Patel (2018), “Node.js thực gì?” , from : https://topdev.vn/blog/node-js-la-gi/ [2] Sơn Dương (2019), “Xây dựng ứng dụng web với NodeJS + ExpressJS”, from: https://vntalking.com/xay-dung-ung-dung-web-voi-nodejs-expressjs.html [3] Bách khoa toàn thư mở Wikipedia, “Node.js”, from : https://vi.wikipedia.org/wiki/Node.js English: [4] https://mongoosejs.com/docs/models.html [5] https://reactjs.org/ [6] Xtech, from: https://ant.design/components/overview/ [7] https://reactrouter.com/web/guides/quick-start 109 ... 3.4.1.1 Admin - Manage account Figure 3.9 Usecase admin: Manage account Table 3.1 Usecase specification: Admin - Manage account Use Case ID UC_3.4.1.1 Name Manage account Goal Allows admin to manage... delete) of MongoDB is much faster than that of relational database management systems (RDBMS) With a large enough amount of data, the test shows that the insert speed of MongoDb can be faster 2.5 About... 3.4.1.4 N /A Admin - Manage category Figure 3.12 Usecase admin: Manage category Table 3.4 Usecase specification: Admin - Manage category Use Case ID UC_3.4.1.4 Name Manage category Goal Allows admin