NGUYEN QUANG VU Faculty of Computer Science – Class 20GIT Le Viet Thang Le Thi Hong... Da Nang, December 10 , 2023 th NGUYEN QUANG VU Faculty of Computer Science – Class 20GIT Le Viet T
RESEARCH OVERVIEW
Overview of React
React is a powerful UI library created by Facebook, designed for building highly interactive and reusable UI components Its versatility allows it to function on both the client and server sides, enabling seamless integration By efficiently comparing changes between renders, React updates the DOM with minimal alterations, enhancing performance and user experience.
Virtual DOM technology significantly boosts application performance by ensuring that only the root node maintains state When this state changes, it triggers a complete restructuring of the DOM tree, impacting processing speed React JS leverages Virtual DOM to address these issues effectively Essentially, Virtual DOM is a JavaScript object that encapsulates all necessary information for creating a DOM Upon data changes, it calculates the differences between the virtual object and the actual DOM tree, optimizing the re-rendering process for enhanced efficiency.
Faculty of Computer Science – Class 20GIT Le Viet Thang
React employs a one-way data binding mechanism, allowing data to flow seamlessly from parent components to child components through props This straightforward data flow simplifies error management and enhances control over the application Due to these features, React is ideal for developing large-scale applications that require continuous data updates, with changes in data often reflecting updates in the user interface.
JSX is a powerful language that enables developers to write HTML code within JavaScript, offering significant advantages It enhances performance by optimizing code during compilation, resulting in faster execution compared to traditional JavaScript Additionally, JSX's static typing allows for early error detection during compilation, similar to languages like Java and C++, leading to improved security and robust debugging capabilities.
React is fundamentally structured around components rather than templates, allowing developers to create websites using small, reusable components Each component can have different states or properties and can contain other components, enabling a flexible architecture Additionally, every component in React maintains its own mutable state, with updates triggered by changes in that state, making components the core building blocks of React applications.
They help maintain code when working on large projects A simple react component just needs a render method There are many other methods available, but render is the dominant method.
Props: helps components interact with each other, the component takes input called props, and returns properties that describe what the child component should render Prop is immutable.
State: represents the state of the application, when the state changes, the component also re-renders to update the UI.
ReactJs
React JS is a powerful JavaScript library designed for building user interfaces (UIs) on both web and mobile platforms Developed by Facebook, React boasts a rich ecosystem and is widely adopted in the industry Its primary goal is to enable the creation of fast, efficient, and visually appealing web applications with minimal coding React ensures that websites function smoothly, load quickly, and maintain high scalability, making it simple to implement in various projects.
ReactJS utilizes a virtual DOM to enhance performance by allowing components to reside within it When updates or changes are required, ReactJS first performs calculations in the virtual DOM, minimizing direct manipulations of the actual DOM This efficient approach reduces unnecessary operations and optimizes rendering, ultimately improving the overall performance of applications built with ReactJS.
ReactJS simplifies JavaScript coding through its unique JSX syntax, enabling the seamless integration of HTML and JavaScript This feature allows developers to incorporate additional code directly within the render function, eliminating the need for string concatenation and enhancing the overall coding experience.
Faculty of Computer Science – Class 20GIT Le Viet Thang
ReactJS and converting HTML fragments into constructors are all implemented from the main converter which is JSX.
ReactJS stands out as a highly SEO-friendly JavaScript framework, addressing a significant challenge faced by many other frameworks that struggle with search engine optimization Unlike its counterparts, ReactJS leverages server-side rendering and the Virtual DOM, enabling it to deliver content that is easily indexed by search engines This capability ensures that React applications are not only performant but also optimized for search visibility, making it a preferred choice for developers focused on SEO.
ReactJS is primarily a View library, distinct from traditional MVC frameworks, as it focuses solely on rendering the view layer Developed by Facebook, React does not include Model and Controller components, necessitating integration with other libraries for a complete solution Additionally, React lacks features like two-way data binding and built-in Ajax support.
Integrating React.js into traditional MVC frameworks necessitates a reconfiguration process due to its size, which is comparable to Angular, with React being approximately 35kb and Angular around 39kb However, while React is a robust library, Angular offers a more comprehensive framework solution.
1.2.4 Things to know about React Js:
ReactJS enables the creation of highly interactive, stateful, and reusable UI components It operates seamlessly on both the client side and server side, allowing for effective integration between the two Notably, React is not an MVC framework; it lacks a built-in model and controller, requiring the use of additional libraries for data manipulation.
Minimizing the use of State components is crucial, as the State serves as the core of an application's functionality It's essential to keep the State simple due to the continuous growth of React applications Excessive State can complicate testing and affect rendering, particularly in terms of whether the data has been initialized or changed Additionally, State is confined to individual components and should only be used when necessary to accurately represent the component's state and facilitate data exchange.
React, primarily a view library, is most effective when paired with state management tools like Redux or Flux, enhancing its data flow capabilities Redux is a popular choice among developers for managing application state JSX, a standout feature of React, allows developers to write HTML-like syntax directly in their JavaScript, while Babel compiles this code, enabling the use of modern ES6 features Additionally, NPM and Webpack are essential for packaging and optimizing libraries, streamlining the development process.
NodeJs
Node.js is a platform-independent development environment built on Chrome's JavaScript runtime, enabling the rapid and efficient creation of network applications With its high processing speed and real-time capabilities, Node.js is ideal for high-traffic products that require quick scalability and technological innovation, making it an excellent choice for startups aiming to launch projects swiftly.
Figure 1.3 - Logo NodeJsFaculty of Computer Science – Class 20GIT Le Viet Thang
NodeJS is a versatile platform that enables the development of various applications, including command line tools, web applications, real-time chat applications, and REST API servers Primarily, it is utilized for creating network programs, particularly web servers, similar to technologies like PHP, Java, and ASP.NET.
NodeJS is a platform that enables faster and independent website development, as it does not require waiting for API responses, making its APIs asynchronous It is compatible with multiple operating systems, including Windows, MacOS, and Linux However, it operates as a single-threaded server, which means it does not support multi-threading.
NodeJS is not classified as a programming language, so beginners should have a solid understanding of fundamental programming concepts, including protocols and JavaScript, to effectively utilize NodeJS The NodeJS community is extensive and offers support at any time Built primarily in C++, NodeJS boasts high performance and processing speed, enabling applications to respond in real-time across multiple platforms and devices.
Node.js offers exceptional execution speed and scalability, making it an ideal choice for startups aiming to develop large products Its performance is crucial for accommodating a growing user base, ensuring that your site can scale efficiently as demand increases.
Asynchronous event-driven IO helps handle multiple concurrent requests Meet real-time requirements Has extremely fast speed, meeting the usage needs of 'huge' visitors in a short time.
Use JavaScript, a programming language that is very easy to learn Share the same piece of code with both server and client side.
Npm and its modules are continually evolving, supported by a robust community and extensive code sharing on GitHub They offer compatibility across various devices and operating systems, including MacOS, Windows, and Linux.
Implementing Node.js on a host can be challenging, especially with shared web hosting, as it doesn't support direct Node.js application deployment For optimal performance, using a VPS or dedicated server is recommended, allowing for proper installation and management of Node.js applications.
One significant disadvantage of Node.js is its ongoing development phase, leading to potential changes in features over time This evolving nature is highlighted by the stability index found in various articles, indicating the risks associated with using its current functionalities.
NodeJS struggles with scalability and fails to utilize the multi-core capabilities of modern server-grade hardware, making it challenging to work with relational databases.
Using callbacks in JavaScript can lead to complex nested structures, making it challenging for those unfamiliar with the language, especially when working with Node.js It's important to note that Node.js is optimized for I/O operations, such as web servers, rather than CPU-intensive tasks.
Python
Python is a versatile programming language commonly utilized in web applications, software development, data science, and machine learning Its efficiency, ease of learning, and compatibility with multiple platforms make it a popular choice among developers.
Python is an interpreted programming language that executes code line by line This allows for immediate error detection, as the execution halts upon encountering a mistake, enabling programmers to quickly identify and fix issues in their code.
Python uses the same word as in English Unlike other programming languages, Python does not use braces Instead, this language uses indentation.
Programmers do not need to declare variable types when writing code because Python will determine them at run time So you can write Python programs more quickly.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Python is closer to the human language than other programming languages. Therefore, programmers do not need to worry about its basic functions such as architecture and memory management.
Developers can easily read and understand a Python program because the language has the same basic syntax as English.
Python improves the productivity of developers because compared to other languages, they can use fewer lines of code to write a Python program.
Python boasts an extensive standard library filled with reusable code, allowing developers to avoid starting from scratch for various tasks Additionally, it seamlessly integrates with other widely-used programming languages such as Java, C, and C++.
The active Python community includes millions of enthusiastic developers around the world If you run into problems, you'll be able to get quick support from the community.
There are many useful resources on the Internet if you want to learn Python. For example, you can easily find developer videos, tutorials, documentation, and guides.
Python can be used on many different computer operating systems, such as Windows, macOS, Linux, and Unix.
Although it is a faster language than PHP, Python is quite slow compared to C/C++ and JavaScript.
Only use Python to create programs that work on the web platform, but cannot integrate program development on mobile devices.
Does not contain properties such as public, protected or private In particular,do while loops cannot be performed with switch case.
Recommender system
Recommender Systems are a leading application of data science, widely utilized to forecast user ratings or preferences for various items Today, nearly every major technology company has integrated these systems into their services, highlighting their significance in enhancing user experience and engagement.
Step 1: Find features that influence user ratings, through data exploration and analysis
Step 2: Analyze and apply suitable filtering algorithm
Simple recommenders provide broad suggestions for all users, focusing on popular films and specific genres This system operates on the premise that movies with high popularity and critical acclaim are more likely to resonate with a general audience A prime example of this is the IMDB Top 250 list, which highlights films that appeal to a wide range of viewers.
Content-based recommenders suggest similar items by analyzing specific item metadata, including genre, director, description, and actors These systems operate on the principle that if a user enjoys a particular item, they are likely to appreciate similar items By leveraging the user's past interactions and preferences, these recommenders provide tailored suggestions A prime example of this is YouTube, which recommends new videos based on your viewing history.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 1.4 - Main types of recommender
Collaborative filtering recommenders are popular systems that predict user ratings or preferences for items by analyzing the past ratings and preferences of other users Unlike content-based filters, these systems do not rely on item metadata, making them efficient in generating personalized recommendations.
Hybrid recommenders combine content-based filtering and collaborative filtering algorithms to enhance recommendation systems This approach allows flexibility; when collaborative filtering lacks user behavior data, the system relies on content-based filtering, and conversely, when content-based filtering lacks necessary features, collaborative filtering takes precedence.
The correlation coefficient is a statistical indicator that measures the strength and weakness of the relationship between two variables.
The correlation coefficient has a value from -1.0 to 1.0 A calculated result greater than 1.0 or less than -1 means there is an error in the correlation measurement.
A negative correlation coefficient shows that two variables have an inverse or negative relationship (absolutely inverse when the value is -1).
A positive correlation coefficient indicates a positive or positive relationship (absolute covariance when the value is equal to 1).
Correlation is zero for two independent variables.
1.5.5 What does Pearson coefficient mean?
Pearson correlation coefficient (r) fluctuates in the continuous range from -1 to +1:
r = 0: Two variables have no linear correlation
r = 1; r = -1: Two variables have an absolute linear relationship.
r < 0: Negative correlation coefficient That is, the value of variable x increases, the value of variable y decreases and vice versa, the value of variable y increases, the value of variable x decreases.
r > 0: Positive correlation coefficient That is, the value of variable x increases, the value of variable y increases and vice versa, the value of variable y increases, the value of variable x also increases.
If r is between 0.50 and ±1, it is said to be strongly correlated.
If r is between 0.30 and ±0.49, then it is called the mean correlation.
If r is below ±.29, then it is called a weak correlation.
On a scatter plot, if r = -1 the data will be distributed on a straight line with a negative slope, r = 1 the data will be distributed on a straight line with a positive slope.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 1.6 - Strength of the pearson correlation coefficient
Implementation tools
Visual Studio Code, developed by Microsoft, is a versatile code editor compatible with Windows, Linux, and macOS It offers robust features such as debugging support, integrated Git functionality, syntax highlighting, intelligent code completion, and various code enhancements, making it an essential tool for developers.
XAMPP is a comprehensive web server solution that includes Apache, PHP, MySQL, an FTP server, and a mail server, along with management tools like phpMyAdmin Unlike AppServ, XAMPP offers a user-friendly management interface that enables users to easily start or stop server services as needed.
MySQL is the most popular free and open-source database management system, favored by developers for application development due to its high speed, stability, and user-friendly interface It is compatible with multiple operating systems, including Windows, Linux, Mac OS X, and Unix, and offers a robust set of powerful utility functions With its excellent performance and security features, MySQL is ideal for internet-based applications that require efficient database access.
MySQL is used to support PHP, Perl, and many other programming languages, as it stores the information of web pages written in PHP or Perl.
Summary
In this chapter, we explored the fundamental concepts of React, ReactJs, NodeJs, and Python, highlighting their key features Understanding the advantages and disadvantages of each language provides a comprehensive overview, enhancing our knowledge of these essential technologies.
The focus is on the concept of recommender systems and recommender systems include four main categories: Simple Recommenders, Content-based Recommenders, Collaborative filtering Recommenders, and Hybrid Recommenders.
Learn about the tools needed to build this e-commerce system.
Faculty of Computer Science – Class 20GIT Le Viet Thang
SYSTEM ANALYSIS AND DESIGN
Collaborative filtering recommenders
This algorithm predicts a user's preferences for items by analyzing the behaviors of similar users It assesses user similarity based on their interest levels, measured through ratings of previously known items in the system.
Figure 2.9 - Determine the similarity between users
For example: Two users A and B both like Acer laptop products (ie, they both rate these acer laptop products 4 -> 5 stars) Based on B's purchase history, we see that
B bought an LG TV, so it is likely that A also likes this product, from which the system will recommend LG TV to A.
Method one is to determine each user's interest in an item based on the interest of similar users in that item, also known as User-user collaborative filtering.
Method two focuses on identifying item similarities rather than user similarities This approach enables the system to recommend items that are closely related to those the user shows significant interest in.
List of use case
Table 2.1 - List of use case
View products (Filter products by each attribute)
Manage orders o Processing o Delivering o Completed o Canceled o Return/Refund
Review products with stars and content
Method payment o Cash on delivery o Paypal
2 Admin Overview o Order statistics for the day o Order statistics for the month o Total revenue for the month o Order statistics by column chart o Order statistics by pie chart
Faculty of Computer Science – Class 20GIT Le Viet Thang
Edit status (active, lock, not verified)
Categories manage o Add category o Edit information category o Delete category
Product manage o Add product o Edit information product o Delete product
Receipt manage o Export receipt o Edit information receipt o Delete receipt
Warehouse manage o Enter the product into the warehouse o Edit the number of products in stock
Special event manage o Create discount events o Edit event time o Delete event
Product reviews manage o Delete review
Use case diagram
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.11 - Use case login, register Table 2.2 - Specific description use case login, register
Pre-conditions You must register and verify your account before you can log in The following conditions
Description Users log into the system to use the application
Action Agent action System action
(1) Enter email and password (2) Get information for testing
(3) If successful, login to the system If failed error message.
Figure 2.12 - Use case search products Table 2.3 - Specific description use case search products
Agent Member customers, curent customers, administrators
Description Actors enter the product name to be searched, and the system displays the product information to the agents
Action Agent action System action
(1) Agent enters product name (2) Get information from input
(3) The system conducts a database query, If a product is found, then inform the agent If not found message agent no product
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.13 - Use case order tracking Table 2.4 - Specific description use case order tracking
Pre-conditions Successfully logged into the system
Description Customers track order information such as viewing orders in progress, orders in progress, delivered orders, canceled orders, refund orders
Action Agent action System action
(1) User selects account item (2) Display the information from the database by customer id If there are no orders, the system will tell you that you have no orders
2.3.2.4 Use case see product details:
Figure 2.14 - Use case see product details Table 2.5 - Specific description use case see product detail
Function name See product details
Agent Member customers, Current customers
Description Agent selects products, the system displays information about products
Action Agent action System action
(1) The agent clicks on the product
(2) The system queries in the database by product id and displays product information to the user.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.15 - Use case product recommend
Table 2.6 - Specific description use case product recommend
Function name See product recommendation
Pre-conditions Successfully logged into the system and rated at least one product
Description The agent selects the product to enter the product details Here the recommender system will suggest products that are close to your interests.
Action Agent action System action
(1) The agent clicks on the product
(2) Recommender system will suggest products that are close to your interests.
2.3.2.6 Use case add product to cart:
Figure 2.16 - Use case add product to cart Table 2.7 - Specific description use case add product to cart
Function name Add product to cart
Pre-conditions Select a product, view product details, view product recommend The following conditions
Description Customer selects products to add to cart
Action Agent action System action
(1) On the product detail page, the agent chooses to add a shopping cart.
(2) The system understands that the cart has been successfully added and saved to localstorage.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.17 - Use case for cart management Table 2.8 - Specific description use case for cart management
Function name Add product to cart
Pre-conditions Select a product, view product details, view product recommend The following conditions
Description Customer selects products to add to cart
Action Agent action System action
(1) On the product detail page, the agent chooses to add a shopping cart.
(2) The system understands that the cart has been successfully added and saved to localstorage.
2.3.2.8 Use case enter promo code:
Figure 2.18 - Use case enter promo code Table 2.9 - Specific description use case enter promo code
Function name Enter promo code
Pre-conditions Log in to your account, select cart products, enter all information and select checkout
Discount for products according to events from the system
When customers input their information and select a payment method, a valid code will apply a discount to their purchase If the code is invalid, they will receive a notification, and the discount will not be applied.
Action Agent action System action
(1) Select checkout on the cart page
(3) Enter the promo code input.
(2) The system displays a page to check personal information, product information, input promo code.
(4) The system checks the code and notifies the customer.
(5) If successful, notify the amount of the promotion
Faculty of Computer Science – Class 20GIT Le Viet Thang
2.3.2.9 Use case product reviews and ratings:
Figure 2.19 - Use case product reviews and ratings
Table 2.10 - Specific description use case product reviews and ratings
Function name Product reviews and ratings
Pre-conditions Successfully logged into the system
Discount for products according to events from the system
Description Customers evaluate the quality of the product and can comment on the product
Action Agent action System action
(1) Select the product to review.
(2) Select the number of stars you want to rate.
(3) Enter a comment in the input box.
(5) The system says "thanks for the review" Record star and comment data into the database.
(6) Display comments and recently rated stars on the product's detail page
2.3.2.10 Use case personal account management:
Figure 2.20 - Use case for personal account management
Table 2.11 - Specific description use case personal account management
Function name Personal account management
Pre-conditions Successfully logged into the system
Description Users click on the profile item to view, edit and delete personal information
Action Agent action System action
(1) Click on profile (2) The system displays information for customers to add, edit and delete
Faculty of Computer Science – Class 20GIT Le Viet Thang
2.3.2.11 Use case order through the system:
Figure 2.21 - Use case order through the system
Table 2.12 - Specific description use case order through the system
Function name Order through the system
Pre-conditions There are products in the cart, enter personal information according to the system's requirements, enter the promotion code (if any)
Description Customers buy goods after choosing products on the system
Action Agent action System action
(1) Customer selects Order (2) The system retrieves personal information, order information.
(3) If successful, the system will notify you of success, record it in the database, and send an order confirmation email.
(4) If it fails, the system will notify you that the order has failed.
2.3.2.12 Use case user accounts management:
Figure 2.22 - Use case user accounts management
Table 2.13 - Specific description use case user accounts management
Function name Management of user accounts
Pre-conditions Successfully logged into the system
Description Manage customer account information
Action Agent action System action
(2) The system displays all customer accounts.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.23 - Use case product management Table 2.14 - Specific description use case product management
Pre-conditions Successfully logged into the system
Description Manage customer account information
Action Agent action System action
(1) Select product management (2) The system displays product information, displays the functions of adding,editing and deleting products.
Figure 2.24 - Use case order management Table 2.15 - Specific description use case order management
Pre-conditions Successfully logged into the system
Description Admin can manage all orders, and update order statuses.
Action Agent action System action
(1) Select order management (2) The system displays orders for admin and functions to update order status.
Faculty of Computer Science – Class 20GIT Le Viet Thang
2.3.2.15 Use case product category management:
Figure 2.25 - Use case product category management
Table 2.16 - Specific description use case product category management
Function name Product category management
Pre-conditions Successfully logged into the system
Description Manage adding, editing, deleting product categories
Action Agent action System action
(2) The system displays all product categories and functions, add, edit,delete.
Figure 2.26 - Use case promotion management
Table 2.17 - Specific description use case promotion management
Pre-conditions Successfully logged into the system
Description Manage adding, editing, deleting promo codes.
Action Agent action System action
(1) Select promotion management (2) The system displays promotional events and functions to add, edit, and delete promotional codes.
Faculty of Computer Science – Class 20GIT Le Viet Thang
2.3.2.17 Use case comments and star ratings management:
Figure 2.27 - Use case comments and star ratings management
Table 2.18 - Specific description use case comment and ratings management
Function name Comments and star ratings management
Pre-conditions Successfully logged into the system
Description Manage deleting comments and star ratings.
Action Agent action System action
(1) Select comments and star ratings management.
(2) The system displays comment and functions to delete comment and star ratings.
Class diagram
Faculty of Computer Science – Class 20GIT Le Viet Thang
Activity diagram
Figure 2.29 - Register function activity diagram
Figure 2.30 - Login function activity diagram
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.31 - Order function activity diagram
Sequence diagram
Figure 2.32 - Register function sequence diagram
Users complete the registration form on the registration interface, which verifies the provided information against entry rules If any details are incorrect, an error message prompts the user to re-enter their information Once the information is validated, the server sends the data to the Model for processing, and the user is redirected to the email validation page to confirm their email address.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.33 - Login function sequence diagram
Customers enter their details on the login interface, which checks the format of the username and password length If the information is incorrect, an error message prompts the user to re-enter their details Upon successful validation, the form submits the information to the server, which then requests a database check from the Model and returns the results.
2.6.3 View product details function sequence diagram:
Figure 2.34 - View product details function sequence diagram
Users can choose products from either the homepage or the search interface This selection triggers a view request to the server's Controller The server then communicates with the Model to retrieve the required information from the database Once the data is obtained, the Controller responds with the product details API, sending the information back to the client for user display.
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 2.35 - Order function sequence diagram
2.6.5 Add favorite products function sequence diagram:
Figure 2.36 - Add favorite products function sequence diagram
Summary
In this chapter, we have deeply analyzed the working mechanism of the Collaborative filtering recommender system Based on pictures and examples, we will better understand this recommendation system.
Analysis of general use case charts, use case specifications of each function in the system of two main actors, customers and admin.
Analyze class diagrams to get a better understanding of the objects and properties contained within that object.
Analyze the activity graph to understand the execution steps, actions, decision nodes and branching conditions to control the execution flow of the system.
Sequence diagram analysis is essential for identifying the sequence of events among a specific group of objects This method intricately outlines the messages exchanged between these objects, emphasizing the timing of both message transmission and reception.
Faculty of Computer Science – Class 20GIT Le Viet Thang
IMPLEMENTATION AND BUILDING SYSTEM
Build website interface with React Js
Install the required libraries for ReactJS:
Figure 3.37 - Install the required libraries for ReactJS
Use collaborative filtering suggestions to recommend products
Install the required libraries for Python
Figure 3.38 - Install the required libraries for Python
Use Flask library to write api that returns suggested product data
Figure 3.39 - Use the library Flask
Use the library mysql.connector for database connection
Use query statements to get or post data
Before calculating the Pearson correlation coefficient, we need to create a matrix and process the NaN values
Figure 3.43 - Create a matrix and process the NaN values
Calculate the correlation coefficient using corr(method='pearson') and sort the coefficients in descending order
Figure 3.44 - Calculate the correlation coefficient using corr(method='pearson')
Use the Pearson correlation coefficient to compare the correlation between users using the formula:
Figure 3.45 - The formula for calculating the correlation coefficient PearsonFaculty of Computer Science – Class 20GIT Le Viet Thang
Use Json library to return data in Json format
Figure 3.46 - Use Json library to return data in Json format
Building a server system using Node Js
Configure database connection using mysql library
Install the necessary libraries for node JS:
Figure 3.48 - Install the necessary libraries for node JS
Build a database
In this topic, we choose the database management system MySQL to work The database to work with the system is called e-commerce Includes 11 tables
Figure 3.49 - Tables in the database
E-commerce system interface
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 3.54 - Email verification page interface
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 3.57 - Product detail page interface
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 3.67 - Account users manage interface
Figure 3.68 - Edit user information interface
Figure 3.69 - Account admin manage interface
Faculty of Computer Science – Class 20GIT Le Viet Thang
Figure 3.70 - Edit admin information interface
Figure 3.71 - Add account admin interface
Figure 3.73 - Edit category information interface
Summary
In this chapter, we learned how to implement the commands and libraries needed to run the Pandore e-commerce system.
Learn how to configure a database connection for efficient data querying, utilize the Flask library to create an API for user interfaces, and understand the mechanism and calculation formula for determining the correlation coefficient, enabling you to recommend products that align with user preferences.
Get an overview of the database table, user interface and administrator interface in this system
Faculty of Computer Science – Class 20GIT Le Viet Thang
Parts achieved in this project: building Pandore e-commerce system.
Build sales website for users to use.
Build admin management system in management such as: o Products manage. o Category manage. o Manage discount codes. o Inventory manage.
Buyer management: including managing user accounts, viewing account information,
The existing advantages and disadvantages of the system::
Advantage: o Simple admin interface, easy to understand, easy to use o Simple user interface, easy to use and grasp
Defect: o The interface is not eye-catching. o Missing some functions
Through the process of completing our project, we have learned a lot of new knowledge:
How to build an admin page for good management, simple and easy to use but also full of functions.
Build a product Recommend system for buyers.
In the near future, The system will need to develop and upgrade some more parts like:
Continue to upgrade the user interface to be friendly and easy to use.
Develop cross-platform model, running on mobile app.
Upgrading the website's security system.
Add some other functions and features to the model.
Faculty of Computer Science – Class 20GIT Le Viet Thang