VIETNAM NATIONAL UNIVERSITY, HANOI INTERNATIONAL SCHOOL GRADUATION PROJECT PROJECT NAME: BUILDING AN E-COMMERCE WEBSITE FOR FASHION SHOP PANDORA STORE Student’s name: Nguyễn Xuân Tường Hanoi - Year 2024 VIETNAM NATIONAL UNIVERSITY, HANOI INTERNATIONAL SCHOOL GRADUATION PROJECT PROJECT NAME: BUILDING AN E-COMMERCE WEBSITE FOR FASHION SHOP PANDORA STORE SUPERVISOR: PGS.TS Trần Thị Ngân STUDENT: Nguyễn Xuân Tường STUDENT ID: 19071641 MAJOR: Informatics Computer and Engineering Hanoi - Year 2024 Pledge Full name of student: Nguyen Xuan Tuong Contact phone: 0915942072. Email: xuantuong20011@gmail.com Grade: ICE2019A. I – Nguyen Xuan Tuong – commit The project is my own research under the guidance of Assoc. Tran Thi Ngan.
The results stated are honest, my own work, not copied by any other work. All references including images, tables, figures, and citations—are clearly and fully sourced in the bibliography. I take full responsibility for even one copy that violates the school's statutes. Hanoi, January 2024 Author Nguyen Xuan Tuong 1 Acknowledgments I would like to sincerely thank Assoc.Dr wrote Tran Thi Ngan for her enthusiasm to guide me throughout the process of making the design project to achieve today's results! I would like to express my heartfelt gratitude to you for the invaluable guidance and support that you provided to us throughout the completion of the project.
Your consistency and depth of knowledge, coupled with your enthusiastic and dedicated spirit, helped me overcome challenges and develop skills comprehensively. I also want to convey my appreciation for your precious assistance and advice in editing and refining the project. Your constructive feedback and detailed comments have aided me in gaining a deeper understanding of the content and enhancing my abilities in evaluation and self-assessment. Additionally, I want to extend my thanks to the entire school, friends, family, and everyone who shared knowledge, opinions, and encouragement during the process of working on this project.
The support from you and the surrounding community has been a significant source of motivation, contributing greatly to the successful completion of this project. I believe that the knowledge and skills acquired here will serve as a solid foundation for future development. Once again, I sincerely thank you and everyone who supported me on this journey. Best regards, 2 Table of Contents Pledge.
7 Objectives and scope of the topic. 9 Chapter 1: Technology used. 12 Chapter 2: Survey and requirements analysis. Current status survey.
Overview use case diagram. Decay use case diagram. Non-functional requirements. 33 Chapter 3: Application development and deployment.
Software architecture selection. Package Detail Design. Build an app. Libraries and tools to use.
Results of Deploying. 45 Conclusion and development direction. 60 4 LIST OF FIGURES Figure 1. Frontend technology…………………………………………………………10 Figure 1.
Overview usecase diagram…………………………………………………. Decay Diagram Usecase Management Rows………………………………. Portfolio management usecase decay diagram………………………………18 Figure 2. Order management usecase decay diagram……………………………….
Decay Diagram Usecase sales account management………………………. Decay Diagram Usecase voucher management……………………………. Purchasing case decay diagram……………………………………………. Activity Diagram Order Item……………………………………………….Net Core Clean Architecture……………………………………………….
N-tier architecture and Clean Architecture…………………………………. Overview package diagram…………………………………………………. Detailed package diagram…………………………………………………. Color pallete…………………………………………………………………26 Figure 3.
Customer site UI site map…………………………………………………27 Figure 3.7 Salesman site UI site map…………………………………………………27 Figure 3. Detailed backend diagram…………………………………………………. Frontend layer diagram……………………………………………………. Database design diagram…………………………………………………30 Figure 3.
Home , guest list…………………………………………………………. Enter shipping information………………………………………………. Choose a payment method………………………………………………. Check order information and add voucher……………………………….
Order results and order qr………………………………………………. Catalogue management capabilities……………………………………. Item management functionality…………………………………………. Order management functionality…………………………………………41 Table 3.
Technologies and tools used……………………………………………….31 6 PROLOGUE Set a problem In the era of technology 4.0, almost everyone owns 1 technology device connected to the internet such as laptop, phone, etc. And it is also a source of customers with great potential for commercial traders. Along with that, where to buy and sell on the internet is a good and practical topic. In this problem, I will build a sales system, online shop to serve the buying and selling needs of users with outstanding features such as: easy connection between two buyers and sellers, quick and right product search, easy ordering.
Sellers can easily expand the types of items sold, manage uniformly and easily One of the pressing challenges currently confronting our e-commerce shop revolves around the optimization of our website's user experience. Despite having a diverse range of high- quality products, we have identified a significant hurdle in terms of the overall ease of navigation and functionality of our online platform. Customers often encounter difficulties in finding specific items, and the checkout process is not as intuitive as we would like it to be. This has led to an increase in abandoned shopping carts and a potential loss of sales.
Moreover, the lack of personalized recommendations and a targeted marketing approach contributes to a missed opportunity in engaging customers effectively. Recognizing the paramount importance of a seamless and user-friendly online shopping experience, we are actively seeking solutions to revamp our website's interface, implement advanced search functionalities, and integrate a more personalized recommendation system. By addressing these challenges head-on, we aim to enhance customer satisfaction, reduce bounce rates, and ultimately improve the overall performance and profitability of our e-commerce venture. More specifically, I'm aiming for the website used for Pandora store.
Is a shop that sells many different items, many genres and often changes according to the market. Therefore, the website will also have flexibility in changing product categories as well as products. 7 Objectives and scope of the topic To build an e-commerce system with such features, I chose to make a website system for two types of users: • Salesman: need an online system to be able to store, manage and statistics categories, items, orders, promotions,. - Provide comprehensive catalog management functionalities, enabling sellers to add, edit, and manage their products efficiently.
- Implement analytics tools to gather insights into user behavior, sales trends, and inventory management, enabling data-driven decision-making. • Customers: Need an online website to be able to shopping online at home without having to go out - Include a feedback and review system to allow buyers to rate and comment on products, fostering transparency and aiding future purchasing decisions. - Develop a seamless order management system that allows buyers to place orders, track shipments, and request returns Solution- oriented The solution is that I will build a website system for the above two agents, accompanied by a server that provides APIs to be able to implement the functions and features mentioned in section 1.1 The system will be divided into 2 main parts: Building frontend and backend. Frontend is to build a user interface specifically for user agents such as buyers and sellers, using HTML, CSS and JS technology.
Backend will build a service that provides APIs specifically for businesses, using .Net Core technology and databases using MySQL technology. 8 Project layout Chapter 1: Technology used. Chapter 2: Survey and requirements analysis. Chapter 3: Application development and deployment.
9 Chapter 1: Technology used 1. Front-end The Front-End development of the project is based on the utilization of a range of technologies and languages including HTML, CSS, JavaScript, and jQuery. While not the newest technologies, they effectively address challenges related to User Interface (UI) and User Experience (UX). The following is a detailed analysis of how these technologies are integrated into the development and deployment process of the system.
HTML, CSS, JavaScript: Initial Stage: HTML, CSS, and JavaScript are used to build the fundamental structure of the website. HTML is responsible for the foundational structure, CSS adjusts the user interface, and JavaScript provides dynamic interactions. jQuery: UI-UX Development Stage: jQuery is employed to optimize and add dynamic effects, graphics, and interactions to the website without compromising performance. This provides advantages in terms of lightweight, easy deployment, and SEO optimization.
Advantages of jQuery: jQuery is a widely adopted JavaScript library known for its many benefits in web development. A key benefit is the ability to simplify and streamline complex tasks in JavaScript, providing a concise syntax that greatly reduces the amount of code needed for common operations. jQuery normalizes inconsistencies across different web browsers, ensuring consistent behavior and saving developers from cross-browser compatibility challenges. Its intuitive API facilitates DOM manipulation, event handling, and animation, making it accessible to both beginners and experienced developers.
jQuery also improves the efficiency of AJAX requests, simplifying asynchronous communication. Additionally, the rich collection of plugins available for jQuery allows developers to easily integrate pre- built functions into their projects, reducing development time and effort. Overall, jQuery contributes to more efficient and maintainable code, making it a valuable tool for creating dynamic and interactive web applications. Besides, jquery also has benefits such as: 10 • Lightweight, improves page loading speed.
• Easy to deploy and integrate into projects. • SEO optimization, bringing good experience to search engines. Disadvantages of jQuery: While jQuery has been immensely popular and beneficial for simplifying web development, it does come with certain disadvantages. One notable drawback is its potential impact on page load times.
As jQuery is an additional JavaScript library that needs to be downloaded and executed, it can contribute to increased loading times, especially on mobile devices with slower network connections. In modern web development, where performance optimization is crucial for user experience and search engine rankings, the additional weight of jQuery may be considered a drawback. Furthermore, as browsers have evolved, native JavaScript has become more powerful and efficient, reducing the necessity for jQuery in some scenarios. Developers who are proficient in modern JavaScript frameworks may find that using jQuery adds unnecessary complexity and overhead to their projects.May not perform well with complex web applications that require high flexibility.
While jQuery remains a valuable tool for certain situations, developers should carefully weigh its advantages against these potential drawbacks and consider alternative approaches when appropriate. Responsive Design: Cross-Platform Deployment Stage: Responsive design is integrated to ensure the website is flexible and accessible on various devices, from mobile phones and tablets to personal computers. Future Plan: Using ReactJS Future Project: The plan is to use ReactJS to rebuild the FrontEnd. ReactJS brings high performance and code reusability, enhancing user experience and reducing the complexity of the application in the future.
Conclusion: The use of HTML, CSS, JavaScript, and jQuery in the initial stages of the project is a flexible and meaningful decision, providing good performance and effectively addressing UI-UX-related issues. Additionally, the plan to integrate ReactJS in the future will improve scalability and source code management. Backend The system's backend uses the following technologies and architecture: • .Net Core + Clean Architecture .NET Core, combined with the Clean Architecture design pattern, presents a powerful framework for developing scalable, maintainable, and modular 12 software solutions.NET Core is an open-source, cross-platform framework developed by Microsoft, emphasizing flexibility and high performance. • Features: The Clean Architecture, often associated with .NET Core, enforces a clear separation of concerns into layers, including presentation, application, domain, and infrastructure layers.
This design facilitates testability, maintainability, and adaptability to evolving requirements.NET Core, as a cross-platform framework, supports development on Windows, macOS, and Linux, promoting platform independence. • Advantages: The combination of .NET Core and Clean Architecture promotes code organization, making it easy to understand and modify. It facilitates automated testing, ensuring software reliability.NET Core's cross-platform nature extends application reach, while its performance optimization capabilities contribute to efficient execution.NET Core and Clean Architecture offers a synergistic combination that brings numerous benefits to software development.NET Core, as a cross-platform framework, ensures that applications can run seamlessly on various operating systems, enhancing flexibility and scalability. Its open-source nature fosters a collaborative and vibrant developer community, leading to continuous improvements and updates.
Clean Architecture, on the other hand, provides a modular and maintainable structure by separating concerns into distinct layers, such as presentation, application, domain, and infrastructure. This separation facilitates code organization, testability, and adaptability to changing requirements.NET Core and Clean Architecture promote a high level of code reusability, making it easier to develop and maintain robust applications. The platform-agnostic nature of .