MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING AN ECOMMERCE WEBSITE INSTRUCTOR: MSC. MAI ANH THO STUDENT: BUI THANH NGOC LE MINH THANG CHAU KIM TOA SKL010552 Ho Chi Minh City, FEBRUARY, 2023 MINISTRY OF EDUCATION AND TRAINING HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH-QUALITY TRAINING -------------------- PROJECT ON SOFTWARE ENGINEERING Report: BUILDING AN ONLINE LEARNING WEBSITE STUDENT NAME STUDENT ID Bùi Thanh Ngọc 18110034 Lê Minh Thắng 18110048 Châu Kim Toả 18110056 INSTRUCTOR: MS. Mai Anh Tho Ho Chi Minh City – February 2023 Last edited: February 10, 2023 SCORE Criteria Content Presentation Total Point TEACHER COMMENTS ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Ho Chi Minh City, 10 February, 2023 Teacher’s score (Signature and full name) Mai Anh Tho 2 ACKNOWLEDGEMENT The success of a student always accompanies a lecturer. We would like to express our sincere thanks to Ms.
Mai Anh Tho, who directly supported the group, give us suggestions, comments and suggestions as well as provide tips to help us make the best project. Thanks to her instructions, helping our team understand the knowledge to do the presentation as well as the implementation of the project so we have completed the schedule with a lot of experience that we learn. Again, our team would like to thank our instructor. Projects are made around two months, just enough to complete it.
However, due to some unexpected problems the project will have many errors that are inevitable. We are looking forward to receiving all the comments from our teachers to help our project better. Sincerely, thank you. 3 Table of Contents ACKNOWLEDGEMENT 3 Table of Contents 4 CHAPTER 01: OVERVIEW 8 I.
Project topic name 9 2. Reason to choose the topic. Research achieves goal. Research subject and research range 10 6.
Technology Applied in the project 11 a) Introduction to Visual Studio Code 11 b) Introduction to MERN Stack 12 c) Introduction to MongoDB 16 CHAPTER 02: Status Analyst and User Requirements 18 I. Current Status Analyst 18 II. Current status business report 18 1) Software Interface (Shoppee) 18 2) Website Interface (Tiki) 20 3) Website Interface (Lazada) 20 III. Requirements Analyst 21 1) Functional Requirements 21 2.
System Functional Requirement 25 3. Non-functional Requirement 26 CHAPTER 03: SOFTWARE DESIGN 29 I. Define Use Case Actor and Function 29 II. Actor and Function Description 30 1) Actor Description 30 2) Function Description 32 ❖ Guest 32 ❖ Administrator 33 4 ❖ Seller 34 ❖ Client 35 III.
Use Case Diagram 36 1) Use Case Diagram 36 2) Use Case Specification 36 ❖ Login 36 ❖ Manage Accounts 37 ❖ Manage Personal Information 38 ❖ Manage Rollback 39 ❖ Analysis Revenue 41 ❖ Manage Seller Salary Payment 42 ❖ Manage Order 43 ❖ Manage Products 44 ❖ Manage Payment 45 ❖ Manage Order History 46 ❖ Register 47 ❖ Voice Command 48 IV. Sequence Diagram 50 1) General Function (Guest) 50 a) Login 50 b) Manage Personal Information 51 c) Register 52 d) Forget Pass 53 e) View Seller Page 54 f) Handle Products In Search Screen 55 g) Manage Cart 56 h) Logout 56 i) Voice Command 57 2) Admin 58 a) Manage Accounts 58 b) Manage Rollback 59 c) Manage Seller Salary Payment 60 d) Manage Order 61 5 e) Analysis Revenue 62 3) Seller 63 a) Manage Seller’s Shop Information 63 b) Manage Products 64 c) Manage Seller’s Orders 65 4) Client 66 a) Manage Client Orders 66 b) Manage Order History 67 V. Class Diagram 68 CHAPTER 04: Database Design 69 I. Logic Schema 69 II.
Detail Data Tables 69 1) Users: 69 2) Order: 70 3) Review: 70 4) Shipping Address: 71 5) Rollback Order: 71 6) Order Items: 72 7) Payment Result: 72 8) Product: 73 III. Entity Relationship 74 CHAPTER 05: USER INTERFACE DESIGN 75 I. Home Page 75 II. Sign In screen 75 III.
Register screen 76 IV. Forget Pass Screen 76 V. Search Screen 77 VI. Cart Screen 77 VII.
Product Screen 78 VIII. Seller Sell Product Screen 78 IX. Client page 83 XI. Seller 86 CHAPTER 06: Testing and Deployment 89 I.
Home Page 89 6 II. Sign In screen 89 III. Register screen 90 IV. Forget Pass Screen 90 V.
Search Screen 91 VI. Cart Screen 91 VII. Product Screen 92 VIII. Seller Sell Product Screen 92 IX.
Client page 97 XI. Seller 100 CHAPTER 07: Result And Conclusion 103 I. Result 103 1) What you have learned in this project 103 2) What is the result of this project? 104 II. Developing in future 107 Task Division 108 Reference 109 7 CHAPTER 01: OVERVIEW I.
Introduction In the context that the world is entering the Industrial Revolution 4.0, online shopping is currently receiving the attention of many countries because of its convenience. In recent years, the online shopping method is no longer a strange concept in society or a new field in our country. Along with the trend of technology development in the world, online shopping in Vietnam is gradually forming, growing strongly, and playing an increasingly important role in the shopping market system. It can be considered that in 2021, the COVID-19 pandemic has brought many changes to the commerce field and applying online shopping tools has been playing an essential role for the young generation in purchasing stuffs.
From the strong development of the networks, web applications for these platforms are growing stronger and stronger. Web applications in the commerce industry are seen as part of the success of IT services. User experience, interface, features, and are the factors that retain customers. Using web applications to view products’ information with a beautiful friendly interface.
Products purchasing is very effortless and time efficient or checking the products that you had opted with all the products’ information that you selected just with a simple button press, you can also be able to check new advertise daily and all the flash sale time. are what users are drawing into. Therefore, in this project, our group had decided to build a ecommerce website to make clients feel easier when tracking their purchasing process and shop owner can easily post new product. The report includes the following sections: 1) Application Overview Details 2) System Analysis 8 3) Designing System II.
Project topic name Building an ecommerce website. Reason to choose the topic. In the development process of society, information technology has been growing rapidly, playing an important role in daily life and turning into an effective support tool for people in all fields. Especially with applications that come with multiple functions which are convenient for the mass population who have access to some type of technology devices such as laptop, mobile and an internet connection.
Instead of going to stores, many shops have designed their own applications (abbreviated as App) to host their products and manage their clients. Customers say that shopping websites are currently an effective shopping tool especially when the Vietnamese shopping system is trying to catch up with international commerce trends in developed countries. In the traditional way, clients have to spend time, getting up early and taking transport to store, from dressing up in formal cloths, taking transportation, furthermore, if there are an excessive number of clients, clients have to be in line to proceed the payment. Meanwhile, it only takes a few minutes to turn on your smart devices such as a personal computer, laptop or mobile phone and open a web browser, enter the website address and they are good to go.
Therefore, we have decided to implement the web programming language that we have learned and use the integrated development environment (as Visual Code) to build a shopping website. Research Aim - The main purpose of this research is being able to build a shopping website that serves some important purposes of a fully functioning shopping website, such as, being able to check products’ information, seeing stores’ advertisements, purchasing products, and track products. - Designing a user-friendly interface, easy to use and display result quickly when performing actions on the web. - Adding, managing, and updating products related aspects such as the quantity, the details information of all the products, the availability.
will be much easier for the web administrator. Research achieves goal. - Implement multiple major functions of a website application. - Bringing a user-friendly experience when using the web - Support real-time update.
Research subject and research range - Research Subject: Clients who have the need online shopping. - Research Range: Analyze popular shopping websites and figure out a good pattern for shopping website. Research method Methods based on theoretical research: o Survey ideas and opinions about shopping website from clients: o Finding and checking out other shopping website o Checking new technologies that are helpful and easy to use. o Analyze must-have functions to implement in the system.
o Programming a shopping website 10 o Using related tutorials videos on YouTube o Checking Stack overflow for debugging and fixing errors during development o Running tests and adding suitable functions for the web 7. Practical meaning - Application is built to provide the need and support the trending online shopping. - Shopping websites not only made the process of purchasing in multiple products instead of going to stores to pay in cash, but it also helped clients to track advisements from teachers from a specific course. - Client private information will also be protected.
Technology Applied in the project a) Introduction to Visual Studio Code Image 1.1 Visual Studio Code is a distribution of the Code - OSS repository with Microsoft-specific customizations released under a traditional Microsoft product license. 11 Visual Studio Code combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle. It provides comprehensive code editing, navigation, and understanding support along with lightweight debugging, a rich extensibility model, and lightweight integration with existing tools. Visual Studio Code is updated monthly with new features and bug fixes.
You can download it for Windows, macOS, and Linux on Visual Studio Code's website. To get the latest releases every day, install the Insiders build. b) Introduction to MERN Stack Image 1.2a The MERN stack is a JavaScript-based framework for developing web applications. MERN is named after MongoDB, Express, React, and Node, the four key technologies that make up the layers of the stack.
● MongoDB - document database ● Express(.js web framework ● React(.js) - a client-side JavaScript framework.js) - the premier JavaScript web server 12 There are variations to the MEAN stack such as MERN (replacing Angular.js with React.js) and MEVN (using Vue. The MERN stack is one of the most popular technology concepts for building web applications. MERN Stack Architecture The MERN architecture is designed to make building web applications in JavaScript and handling JSON incredibly easy.2b MERN Stack Diagram MERN Stack Components: React.js Front End The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple components, connect them to data on your back-end server, and render them as HTML.
React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles you’d expect from 13 a modern web framework: great support for forms, error handling, events, lists, and more.js and Node.js Server Tier The next level down is the Express.js server-side framework, running inside a Node.js bills itself as a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses. By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front end, you can connect to Express.js functions that power your application. Those functions, in turn, use MongoDB’s Node.