MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A SEO-OPTIMIZED E-COMMERCE WEBSITE, INTEGRATING PAYMENT AND ORDER MANAGEMENT SOLUTIONS INSTRUCTOR: PhD. MAI ANH THO STUDENT: NGUYEN BUI DUY PHONG DANG VAN THONG PHAM QUOC THAI SKL013445 Ho Chi Minh City, June 2024 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INTERNATIONAL EDUCATION 🙦🕮🙤 CAPSTONE PROJECT BUILDING A SEO-OPTIMIZED E-COMMERCE WEBSITE, INTEGRATING PAYMENT AND ORDER MANAGEMENT SOLUTIONS Instructor: PhD. Mai Anh Tho Students: Nguyen Bui Duy Phong 19110102 Dang Van Thong 19110056 Pham Quoc Thai 19110122 Course: 2019 Specialization: Information Technology Ho Chi Minh City, June 2024 SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness ******* PROJECT’S OBJECTIVE Student’s names: 1. Nguyễn Bùi Duy Phong Student ID: 19110102 2.
Đặng Văn Thông Student ID: 19110056 3. Phạm Quốc Thái Student ID: 19110122 Project’s name: BUILDING A SEO-OPTIMIZED E-COMMERCE WEBSITE, INTEGRATING PAYMENT AND ORDER MANAGEMENT SOLUTIONS Implementation contents: Theory: - Frontend: NextJS, ReactJS, TailwindCSS, MUI, Redux - Backend: NodeJS, Express, MongoDB - DevOps: AWS (S3, EC2), Vercel, pm2, nginx - Third Parties: + VietQR (Payment) + Giaohangnhanh (Delivery) + Cloudinary (Cloud Storage) + Google Mail / Zalo OA (Order Management) + Firebase (Phone OTP, Notification services) Practice: Creating a user-friendly apple product selling website: - Boosting visibility through SEO. - Integration payment solutions. - Order management solutions.
- Enhancing the shopping experience. Implementation time: 15 weeks (Starting from Mach 4, 2024 to June 17, 2024) HEAD OF INFORMATION INSTRUCTOR TECHNOLOGY SECTOR (Sign and write full name) (Sign and write full name) SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness ******* ASSESSMENT FORM FOR INSTRUCTOR Student’s names: 1. Nguyễn Bùi Duy Phong Student ID: 19110102 2. Đặng Văn Thông Student ID: 19110056 3.
Phạm Quốc Thái Student ID: 19110122 Major: Information Technology Project’s name: BUILDING A SEO-OPTIMIZED E-COMMERCE WEBSITE, INTEGRATING PAYMENT AND ORDER MANAGEMENT SOLUTIONS Instructor’s full name: PhD. Mai Anh Thơ COMMENTARY: 1. Approval for oral defense (Approved or denied):. Ho Chi Minh City, June …, 2024 INSTRUCTOR (Sign with full name) SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness ******* ASSESSMENT FORM FOR REVIEWER Student’s names: 1.
Nguyễn Bùi Duy Phong Student ID: 19110102 2. Đặng Văn Thông Student ID: 19110056 3. Phạm Quốc Thái Student ID: 19110122 Major: Information Technology Project’s name: BUILDING A SEO-OPTIMIZED E-COMMERCE WEBSITE, INTEGRATING PAYMENT AND ORDER MANAGEMENT SOLUTIONS Examiner’s full name: PhD. Nguyễn Đức Khoan COMMENTARY: 1.
Approval for oral defense (Approved or denied):. Ho Chi Minh City, June …, 2024 REVIEWER (Sign with full name) SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness ******* ASSESSMENT FORM FOR COMMITTEE Student’s names: 1. Nguyễn Bùi Duy Phong Student ID: 19110102 2. Đặng Văn Thông Student ID: 19110056 3.
Phạm Quốc Thái Student ID: 19110122 Major: Information Technology Project’s name: BUILDING A SEO-OPTIMIZED E-COMMERCE WEBSITE, INTEGRATING PAYMENT AND ORDER MANAGEMENT SOLUTIONS Committee’s members:. Ho Chi Minh City, June …, 2024 COMMITTEE (Sign with full name) ACKNOWLEDGEMENT First of all, I would like to send my most sincere thanks to PhD. Mai Anh Thơ for her dedicated support and guidance throughout the process of researching and implementing this topic. I would like to thank my teachers for their dedicated guidance, guidance in choosing topics, techniques and overcoming errors during the implementation process.
I would also like to express my gratitude to the professors of Ho Chi Minh City University of Technical Education, especially the Faculty Lecturers who enthusiastically taught and shared a lot of information and expertise with us. During my studies, support me in completing my writing effectively. However, errors in the implementation of the topic may be overlooked by the teacher. I am eagerly waiting for teachers' feedback so that I can gain more experience and improve my expertise to better serve my future studies and work.
Thank you sincerely! Ho Chi Minh City, June 17, 2024 TABLE OF CONTENTS CHAPTER 1. REASONS FOR CHOOSING THE TOPIC. THE PROJECT OBJECTIVE AND SCOPE. The scope of project.
EXPECTED RESULT TO ACHIEVE. IMPORTANCE OF THE PROJECT IN THE TECHNOLOGY INDUSTRY AND E-COMMERCE MARKET. TECHNOLOGY USED IN FRONT-END. TECHNOLOGY USED IN BACK-END.
JSON Web Tokens (JWT) and Safety Considerations. TECHNOLOGY USED IN DEVOPS, CLOUD. THIRD PARTIES INTEGRATION:. Google Mail / Zalo OA (Order Management).
REQUIREMENT CAPTURING AND MODELING. ANALYSIS SIMILAR APPLICATIONS:. Non-functional requirements. LIST OF ACTORS AND USE CASES.
USE CASE DIAGRAM.1 Use Case specifications. Description of Login Use Case. Description of Register Use Case. Description of View Information of Products Use Case.
Description of Search Use Case. Description of Add to Cart Use Case. Description of Order and Purchase Use Case. Description of Review Use Case.
Description of Manage Profile Use Case. Description of Manage Address List Use Case. Description of Manage Ordered List Use Case. Description of Manage Products Use Case.
Description of Manage Users Use Case. Description of Manage Orders Use Case. Description of Manage Contents Use Case. Description of Manage Promotions Use Case.
Description of Statistics and Reporting Use Case. DATABASE TABLE DETAILS. BACK-END STRUCTURE. Back-end controllers.
Back-end model. Back-end routes. Back-end repositories. Login sequence diagram.
Logout sequence diagram. Search product sequence diagram. Add product to cart sequence diagram. Delete cart item sequence diagram.
Create new order sequence diagram. Cancel order sequence diagram. Payment sequence diagram. Search user sequence diagram.
Update user profile sequence diagram. Add product sequence diagram. Update product sequence diagram. Delete product sequence diagram.
Add promotion sequence diagram. Edit promotion sequence diagram. Remove promotion sequence diagram. Add content sequence diagram.
Edit content sequence diagram. Remove content sequence diagram. Product Details Page. Shopping Cart Page.
Users management page. Products management page. Orders management page. IMPLEMENTATION AND TESTING.
Introduction about technologies used in the application. Testing methods Unit.107 LIST OF FIGURES Figure 1. System architecture 7 Figure 2. MERN stack 8 Figure 3.
API RESTful 20 Figure 4. JSON Web Tokens (JWT) 22 Figure 5. Compare products 38 Figure 7. Macbook product page 39 Figure 8.
Shopee product details 41 Figure 10. Use Case Diagram 47 Figure 11. Class Diagram 55 Figure 12. Back-end controllers 65 Figure 13.
Back-end model 65 Figure 14. Back-end routes 66 Figure 15. Back-end repositories 67 Figure 16. Login Sequence diagram 68 Figure 17.
Logout sequence diagram 69 Figure 18. Search product sequence diagram 70 Figure 19. Add product to cart sequence diagram 71 Figure 20. Delete cart item sequence diagram 72 Figure 21.
Create new order sequence diagram 73 Figure 22. Cancel order sequence diagram 74 Figure 23. Payment sequence diagram 75 Figure 24. Search user sequence diagram 76 Figure 25.
Update user profile sequence diagram 77 Figure 26. Add product sequence diagram 78 Figure 27. Update product sequence diagram 79 Figure 28. Delete product sequence diagram 80 Figure 29.
Add promotion sequence diagram 81 Figure 30. Edit promotion sequence diagram 82 Figure 31. Remove promotion sequence diagram 83 Figure 32. Add content sequence diagram 84 Figure 33.
Edit content sequence diagram 85 Figure 34. Remove content sequence diagram 86 Figure 35. Login Page 87 Figure 36. Register Page 88 Figure 37.
Home Page 89 Figure 38. Products Page 90 Figure 39. Product Details Page 92 Figure 40. Shopping Cart Page 93 Figure 41.
Order Page 95 Figure 42. Payment page 96 Figure 43. Blog page 97 Figure 44. Users management page 98 Figure 45.
Products management page 99 Figure 46. Orders management page 99 Figure 47. Profile page 100 LIST OF TABLES Table 1. Functional requirements guest 42 Table 2.
Functional requirements user 43 Table 3. Functional requirements admin 44 Table 4. Non-functional requirements 45 Table 5. List of actors and use cases 46 Table 6.
Use Case Login 48 Table 7. Use Case Register 48 Table 8. Use Case View Information of Products 49 Table 9. Use Case Search 49 Table 10.
Use Case Add to Cart 49 Table 11. Use Case Order and Purchase 50 Table 12. Use Case Review 50 Table 13. Use Case Manage Profile 51 Table 14.
Use Case Manage Address List 51 Table 15. Use Case Manage Ordered List 51 Table 16. Use Case Manage Products 52 Table 17. Use Case Manage Users 52 Table 18.
Use Case Manage Orders 52 Table 19. Use Case Manage Contents 53 Table 20. Use Case Manage Promotions 53 Table 21. Use Case Statistics and Reporting 54 Table 22.
User table 56 Table 23. Product table 57 Table 24. Variant table 58 Table 25. Option table 59 Table 26.
Cart table 59 Table 27. Category table 59 Table 28. Order Item table 60 Table 29. Order table 61 Table 30.
Review table 62 Table 31. Event table 63 Table 32. Blog table 63 Table 33. Statistics table 64 Table 34.
Login Page 87 Table 35. Register Page 88 Table 36. Home Page 90 Table 37. Products Page 90 Table 38.
Product Details Page 92 Table 39. Shopping Cart Page 93 Table 40. Order Page 95 Table 41. Payment page 96 Table 42.
Blog page 97 Table 43. Users management page 98 Table 44. Products management page 99 Table 45. Orders management page 99 Table 46.
Profile page 101 CHAPTER 1. REASONS FOR CHOOSING THE TOPIC We decided to pursue the project “Build an SEO-Optimized E-commerce Website, Integrating Payment and Order Management Solutions” because of its relevance and impact in today's digital age. E-commerce has rapidly transformed the retail landscape, with more consumers preferring the convenience of online shopping. This growing trend presents an exciting opportunity for us to develop essential skills in web development and digital marketing.
Focusing on SEO optimization is crucial for ensuring that our website stands out in search engine results, driving organic traffic and enhancing visibility. Additionally, integrating secure and efficient payment gateways is vital for building customer trust and ensuring seamless transactions. Effective order management is another critical component, streamlining the entire process from order placement to delivery, which is essential for operational efficiency and customer satisfaction. By working on this project, we aim to gain hands-on experience and develop a broad skill set that includes web development, SEO strategies, and the integration of various third-party services commonly used in Vietnam, such as VietQR for payments and Giaohangnhanh for deliveries.
This multidisciplinary approach not only bridges the gap between theoretical knowledge and practical application but also encourages us to think creatively and develop innovative solutions for the challenges faced by online businesses. Overall, this project provides a comprehensive learning experience that will be invaluable for our future careers. THE PROJECT OBJECTIVE AND SCOPE 1. Project Objective Boosting visibility through SEO: We're going to use SEO techniques to help our website appear higher in search engine results.
This means more people can find us just by searching online. We’ll optimize everything from our website’s text to its structure to make sure it’s search engine friendly. Integration payment solutions: We want to make paying as easy as possible, so we're going to set up a variety of payment methods. Whether our customers prefer using their 1 credit cards, digital wallets, or even direct bank transfers, we’ll have options ready.
It’s all about making transactions smooth and secure. Order management solutions: ● Managing orders efficiently: We’re developing a system that will take care of orders from start to finish. This means keeping track of inventory, processing orders quickly, and making sure customers always know the status of their purchase ● Integration delivery solutions: This integration APIs from shipping providers will allow our system to automatically update shipping options based on availability, cost, and delivery timeframes directly from the carriers. Customers can choose their preferred shipping method at checkout, and the system will handle the logistics seamlessly.
Enhancing the shopping experience: We’re focused on making our website not just functional but also appealing and easy to navigate. Whether someone is shopping on a phone or a computer, we want their experience to be seamless and enjoyable.