o Allow admin of website to create, read, update and delete CRUD some related information of products o Allow admin of website to comment description of products o Allow admin of website
INTRODUCTION
Overview of the topic
The internet has revolutionized information exchange and transmission, making it a vital tool for both individuals and businesses Its widespread adoption has accelerated productivity and reduced costs, fostering innovation and the growth of the digital industry The internet has also become an indispensable platform for entertainment, commerce, and advertising, connecting people from around the world.
To facilitate business management, e-commerce websites were born It gradually changes the old business forms in businesses because of the superiority that the website brings such as: allowing users to operate business immediately on a global scale from advertising The company thanks to product marketing, negotiates and provides the services to place orders with many ways to check out that help keeps in touch with customers and provide backup support fastly Therefore, our group has carried out the topic "E-Commerce platform development and store management channel" to optimize the power of technology in the business field.
Reason for choosing the topic
Online sales are growing more and more, almost everyone is at home, so the demand for online shopping is increasing And from researching and surveying the market, the team found that the demand for clothes is increasing Therefore, the team decided to build an e-commerce website selling clothes to make it easy for customers to buy products In addition, it also helps customers easily access the product with full information and images about the product, thereby helping customers have a more intuitive view of the product to make decisions.
The goal of the project
- Research and learn web development technologies
- Understand the website model used in the topic
- Improve data manipulation skills with databases, and understand the flow of data
- Build an e-commerce website to meet the needs of each type of audience à Shop:
- Easier to manage the store's business activities
- Sell to customers on a larger scale, fast speed and greatly reduce costs compared to traditional sales methods à Client:
- Buy is more convenient, easier, and faster
- More convenient and secure payment methods
- Expanding choices when buying according to tastes and needs
- Have the opportunity to buy products directly from the manufacturer without going through intermediaries.
CURRENT STATUS SURVEY AND REQUIREMENTS
Current status survey
After determining the content for the website's topic, our team surveyed a number of famous clothing selling websites both foreign and Vietnamese in the fashion field for transaction reference interface, interaction methods between the store and customers as well as the necessary elements of an online store for long-term goals such as customer attraction, user experience and succession, Part The following UI & UX Website made a strong impression on our team and will be the inspiration for our final product:
1 The Blue website: https://theblues.com.vn/
Appearing on the market since 2001, this brand's products are growing stronger and stronger With a variety of trendy designs, Blue Exchange also brings comfort to customers when using the product, soft, durable fabrics and many diverse designs that are not only designed specifically for adults but also fashion Blue Exchange also has designs for children that are both fashionable and active and have many beautiful designs The prices of the costumes here are still suitable for users
At first, the brand's products were aimed at young customers, so products such as shirts, t-shirts, khakis, jeans were all highly dynamic and convenient With the growing demand for garments, Blue-Exchange has learned to diversify and enrich its product lines Specifically, extremely high-quality product lines have been launched such as Vintage Blue, Red Eagle, Magents, Crystal, Blue Lady which have been highly appreciated and trusted by consumers for many years à Advantages
- Nice interface, easy to use
- There are attractive promotions and vouchers
- Allow adding to cart when not logged in
- Allows you to select products in the cart for checkout
- Support login in many ways à Disadvantages:
- Only supports payment via bank card and online cash receipt
Ninomaxx was founded in 1998 The style as well as the quality of this product is not to mention because the quality is very good, the clothes here are designed to fit the buyer as if the buyer himself chooses the fabric and sewing outside Instead of before, you had to waste time choosing fabrics or finding beautiful tailors, now go to this fashion brand's store to choose your favorite products Jeans are probably the company's strong point, they are very beautiful and suitable for all ages à Advantages
- The interface is very eye-catching and easy to see
- The information of each product is very informative and complete
- Allow adding to cart, purchase without account login.
- There are attractive promotions and vouchers. à Disadvantages
- Must combine via another purchase site
- Buying goods is very difficult for foreigners
3 Gucci: ht tps://gucci.com/
The House of Gucci, or simply known as Gucci, is a fashion icon owned by Italy and France, a famous leather goods brand Gucci was founded in 1921 by Guccio Gucci in Florence, Tuscany Under the direction of Aldo Gucci (Guccio's son), Gucci became a famous brand worldwide, a symbol of Italy's Dolce Vita Its product lines include handbags, ready-to-wear, footwear, accessories, makeup, perfume and home decorations à Advantages
- The interface is very eye-catching and easy to see
- The information of each product is very informative and complete
- Allow adding to cart, purchase without account login.
- There are attractive promotions and vouchers. à Disadvantages
- Must combine via another purchase site
- Buying goods is very difficult for foreigners
Founded by Coco Chanel in 1883, Chanel is a renowned French fashion house based in Paris According to Forbes, the Chanel company is owned by Alain Wertheimer and Gerard Wertheimer, grandsons of Pierre Wertheimer, who partnered with Chanel in 1924.
Established in the years 1909-1910 by Gabrielle "Coco" Chanel, the name Chanel is known as the most proud high-end fashion brand of the French fashion industry More than any other brand, Chanel fully embodies many of the quintessence of the classic fashion industry of the previous era Few people know that Chanel is a rare fashion company that is completely privately managed, from the family of the original co-creator to Mrs Chanel Private ownership is a common form of classic fashion houses in France, but with a big name and a business worth up to millions of dollars like Chanel, it is not easy to maintain
That has helped Chanel become a model of classic and classic fashion in the fashion world à Advantages
- The interface still has a full product classification and a login search bar
- Full of functions that a sales website
- Allow adding to cart, purchase without account login. à Disadvantages
- When clicking buy now while viewing products, all products in the cart will be included in the order.
- Logging in is very difficult
- It is difficult for foreigners to buy goods
The advantages and disadvantages
à The concerns of the above websites that your group has consulted
- UI & UX impresses by intuitive images, providing many views of the product, easy for users to use right from the first visit
- Clear product classification, according to the market needs to help users find products easily
- Provide transparent store information, after-sales policies and store working processes
- The purchase procedure is very easy, providing many forms of payment to help customers have more choices in purchasing
- Confidentiality of customer information à The concerns of the above websites that your group has consulted
- Time to respond to customer inquiries is quite slow
- Detailed images of some items are limited
- From time to time there is a phenomenon of stuttering when loading the product à In general, through the selection process, our team recognizes some important things that need to be met by a business Website:
- The focus of the website is the store's products
- The interface must highlight the product's information, especially in terms of images
- It is necessary to clearly classify the types of items to quickly meet the search needs of customers
- The form of payment must be easily accessible
- In addition, store information (store address, contact information, ).
Website Functions
Functions targeted by the team include: à On the customer side:
- Function to register, login in many forms (Phone number, Facebook Auth, Google Auth)
- Provide product information & manage personal accounts
- Cart function (store products in cart, calculate price, promotion, )
- Online payment methods (Momo, VN Pay)
- Online support function à On the store side:
- Function to store and manage user information
- Integrated delivery and order management
Result
Through the product made based on the knowledge imparted and guided by the lecturer, our team members hope to gain more useful knowledge about the process of building and completing a website, supplementing and improving it improve skills in both front-end and back-end areas for specialized essay subjects.
SYSTEM ANALYSIS AND DESIGN
List of actors and use case
Table 1 List of actors and functions
Actors and use cases description
Customer - Log in by email
- Log in by social account
- Add product to favourite list
- Delete product to favourite list
- Reduce and increase product quantity by one
1 Log in Allow admin and customer to log in into the website with the respective permissions
2 Log in by social account
Allow admin and customer to log in into the website with the respective permissions by social account
3 Register Allow customer to create accounts with necessary permissions
4 Log out Allow admin and customer to log out into the website
5 Add account Owners can add a new account when a new
Staff joins the store with its respective permissions
6 Edit account Owner can also edit the account info, such as the staff name or phone number when needed
7 Remove account When a staff no longer works in the store, the owner can delete that staff account completely
8 Add bill Staff can add a new bill to the system when a customer decides to buy what they put into the shopping cart
9 Edit bill When there are some errors or when the customer wants to change the products inside the bill, staff have the ability to change what has been inside that bill in the system
10 Remove bill If the bill has been canceled by the customer or by the store, staff have the ability to delete that bill, as long as both sides agree to do so
11 Accept sell products to customer
After the customer has paid, the store owner will confirm it and let the shipping department give it to the customer
Owner and staff input the information about the new products onto the website/system such as the name, the ID, production date, pictures of the products,…
They can also edit those information when needed like when the price changed or almost out of stock
14 Remove products If the store is no longer having the products to sell, the owner and staff can decide whether to delete those products' information out of the system
15 Search products Both the owner, staff and customer can search for the respective products available in the store/on the website
16 Add customer When a new customer shows up to buy the devices from the store or when a customer info was no longer available inside the system, staff can add their information into it, some information include the name, the ID of that customer, address and phone number
In compliance with customer requests, store staff possesses the authority to purge customer information upon request Additionally, the store has implemented a policy to automatically remove customer data after a specified period of inactivity, ensuring the privacy and protection of customer information.
Staff uses this feature to check for the customer information when needed/required
19 Add new events When the owner wants to create a customer gratitude in special cases/holidays, the owner and staff can create a new event and the customer will have promotions when buying devices at the store The information of the event includes the name and details
20 Edit events The owner and staff can use this feature to fix/change the information about that respective event
21 Remove events When the event comes to an end, the owner and staff can delete the information about that event and customers will no longer have the promotion of the removed event
22 Statistics Owner and staff use this feature to watch the growth of the store, how many devices have been sold, how many devices are available in the store, …
23 Change password Allow admin and user to change old password to new password
24 Update user profile Allow admin and user to change profile information
25 Delete account Allow admin and user to delete account
26 User rating Allow user to rate and comments to the product
27 Report product Allow user to report bad products
28 Promotion Notification User will receive notifications about promotional products
29 Tracking order Allow user to track product delivery
30 System notification Display information such as user account registration, edited account information, view orders, orders in progress
31 Purchase history Allows customers to view purchased products
32 Filter products Allow user to search for products by desired characteristics
33 Sort products by price Allow user to search for products by the desired amount of money
34 Discount Allow user to enter discount codes to reduce product prices
Allow user to review selected favorite products
36 Add product to favorite list
Allow user to add products to their favourite list
37 Delete product to favorite list
Allow user to delete products from their favourite list
38 Create new order Allow user to order selected products after checking product information, payment method and shipping address
39 Cancel order Allow customers to cancel orders within a specified time
40 Share products Allow customers to share products to other social networks
41 Payment Allows customers to choose a method of payment for the product
42 Forgot password Allow user to get new password if user don’t remember
43 Add product to cart Allows the user to add the desired products to the cart before checkout
44 Reduce and increase product quantity by one
Allow user to increase or decrease the number of products
45 Delete cart item Allows users to remove unwanted products from the shopping cart
46 Delete cart Allows user to remove all products from the shopping cart
47 Chat with staff shop Allows users to chat with shop owners if they have any questions
Allows user to talk to the shop's virtual assistant
49 View profile Allow users to view their own information
50 View personal cart Allow user to view the products they have added to their shopping cart
51 View landing page Allows users to view information about policy, about us, or addreess of shop
52 View shop’s location in map
Allows customers to view the shop's address on a map using GPS navigation
Use Case Diagram
3.3.1 Use Case Diagrams Of Customer:
Figure 5 General Use Case Of Customer
Figure 6 Use Case Of Authentication Management
Figure 7 Use Case of Account management
Figure 8 Use Case of Notification
Figure 9 Use Case of Favorite
Figure 10 Use Case of Order
Figure 11 Use Case of Information
Figure 12 Use Case of Payment
Figure 13 Use Case of Cart
Figure 14 Use Case Of Discount
3.3.2 Use Case Specification Of Shop Owner:
Figure 15 General Use Case Of Shop Owner
Figure 16 Use Case of Account management
Figure 17 Use Case of Customer management
Figure 18 Use Case of Event management
Figure 19 Use Case of Statistic
Figure 20 Use Case of Product Detail
Figure 21 Use Case of Promotion
Figure 22 Use Case of User Password Management
Figure 23 Use Case of Notification
Figure 24 Use Case of Seller management
Figure 25 Use Case of Product Management
` Figure 26 Use Case of OrderManagement
Describe Allow employees and users to log into the system
Activation agent Employees and users
Condition Know email and password
Steps (1) The employee and user opens the program
(3) Press the “Login” button or press Enter
(4) If the login fails, the message “Incorrect email or password is entered” Employees and users re-enter information and log in again
(5) If the login have a message “Account is not activate ”, user will send an email and enter verification code to activate account
(6) If the login is avtivate,the message “Login successful”
Appear program interface with full functions of employee or user
Table 4 Use Case Log In description
Use Case Login By Social Account
Describe Allow employees and users to log into the system by social account such as facebook, google,
Activation agent Employees and users
Condition Know email and password of social account
Steps (1) The employee or user opens the program
(2) Choose social account: Facebook or Google
(4) Press the “Login” button or press Enter
(5) If the login fails, the message “Incorrect email or password is entered” Employees and users re-enter information and log in again
(6) If the login is successful Appear program interface with full functions of employee or user
Table 5 Use Case Log In By Social Account description
Describe Allow user create new account
Steps (1) The user opens the program
(2) Enter email, password, confirmPassword and Full Name (3) Press the “Register” button
(4) If the register fails, the message “Incorrect email or password is entered” The users re-enter information
(5) If the register is successful, return the message
Table 6 Use Case Register description
Describe Allow admin and customer to log out into the website
Activation agent User and admin
Condition User has logged into the system
Steps (1) The user or admin opens the program
(2) Press the “Log Out” button (3) If the register is successful, the message “ Log out”
Table 7 Use Case Logout description
Describe Allow admin and user to change old password to new password
Activation agent User and admin
Precondition Registered email is still available
User has logged into the system
Steps (1) The user or admin opens the program
(2) Select the function “Change password”
(3) Check email to recieve verification code
(5) After the user or admin enter new password and presses the "Change password" button to change the password
(6) The system will connect to the database to confirm the new password, and at the same time, it will send a message “Changed successfully”
Table 8 Use Case Change Password description
Describe Allow the user and admin to get new password if user don’t remember
Activation agent User and admin
Precondition Registered email is still available
Steps (1) The user or admin open the program
(2) Select the function “Forgot password”
(3) Check email to recieve verification code
(5) After the user or admin enter new password and presses the "Save" button to change the password
(6) The system will connect to the database to confirm the new password, and at the same time, it will send a message “Create new password successfully”
Table 9 Use Case Forgot Password description
Describe Search for products to know product information including: product name, product code, country of manufacture, number of equipment remaining, product status (coming soon or sold out)
Activation agent User or Employee
Precondition User or Employee has some desired product information
Steps (1) User or Employee opens the program
(2) User or Employee selects the “Search Product” function on the screen interface
(3) The system appears the search interface
(6) Search results appear on the screen:
- If not found, the system will notify "No product found"
- If the product is found, information will be displayed on the screen, including: product name, product code, manufacturer, country of manufacture, and year of release
Table 10 Use Case Search Product description
Describe Allow employees and customer to search for products by desired characteristics
Activation agent Customer and employee
Precondition Customer or employee has some desired product information
Steps (1) Customer or employee opens the program
(2) Customer or Employee selects the “Filter Product” function on the screen interface
(3) The system appears the filter interface (4) Choose a search method:
(5) Enter search information (6) Click the “Search” button (7) Search results appear on the screen:
- If not found, the system will notify "No product found"
- If the device is found, information display on the screen
Table 11 Use Case Filter Product description
Use Case Sort Products By Price
Describe Allow customers to search for products by the desired amount of money
Steps (1) Customer opens the program
(2) Customer selects the “Sort Product” function on the screen interface
(3) The system appears the filter interface (4) Choose min and max price of products (5) Enter search information
(6) Click the “Search” button (7) Search results appear on the screen:
- If not found, the system will notify "No product found"
- If the device is found, information will be displayed on the screen
Table 12 Use Case Sort Product By Price description
Use Case Edit Profile Information
Describe Allow admin and user to change profile information
Precondition User has logged into the system
Steps (1) The admin or user opens the program
(2) Select the function “Edit guest”
(3) The system displays the Edit customer form
(4) The admin or user edit customer information such as: customer name, customer code, age, phone number, address
(5) After entering, select “Save” for the system to save to the database
(6) The admin or user finishes the process and clicks the button to return to the main screen
Table 13 Use Case Edit Profile Information description
Describe Allow user to rate and comments to the product
Precondition User has logged into the system
Steps (1) The user opens the program
(2) The user selects the product to comment and rate (3) User comments and ratings
(4) The system will connect to the database
(5) The system will show comment and rating of user
Table 14 Use Case User Rating description
Describe Allow user to report bad products
Precondition User has logged into the system
Steps (1) The user opens the program
(2) The user selects the product to report
(3) Press function report and give a reason for the report
(4) The system will connect to the database to add the report of user information and the shop owner will watch
(5) The system will show a message “Report successful!”
Table 15 Use Case Report Product description
Use Case View Promotion Notification
Describe User will receive notifications about promotional products
The customer has logged into the system
Steps (1) Customer opens the program
(2) Customers select the notification on the screen and choose a promotion notification
(3) The system appears the message display interface
(4) After viewing the message, click “Close” button to finish
Table 16 Use Case View Promotion Notification description
Use Case View Tracking Order
Describe Allow customers to track product delivery
Precondition Product has been bought
Steps (1) Customer opens the program
(2) Customers select function tracking order
(3) The system will appear the delivery route
(4) After viewing, click “Close” button to finish
Table 17 Use Case View Tracking Order description
Describe Display information such as user account registration, edited account information, view orders
Activation agent Customers, employees, store owners
Precondition User has logged into the system
Steps (1) Customer or Employee opens the program
(2) Customers and employees select the message (3) The system appears the message display interface (4) After viewing the message, click “Close” to finish
Table 18 Use Case View Notification description
Use Case View Purchase History
Describe Display information about purchase product
Precondition The customer has logged in system
Steps (1) Customer opens the program
(2) Customers select function Purchase History
(3) The system appears the message display interface
(4) After viewing the message, click “Close”to finish
Table 19 Use Case View Purchase History description
Use Case View Favorite Product
Describe Desplay information about selected favorite products
Precondition User has logged into the system
Steps (1) Customer opens the program
(2) Customers select the icon “heart” on the screen
(3) The system appears the list product display interface
(4) After viewing, click “Close” button to finish
Table 20 Use Case View Favorite Products description
Use Case Add Product To Favorite
Describe Allow user to add products to their favourite list
Precondition User has logged into the system
Steps (1) User open the program
(2) Select the product which user want to add to the list
(4) The system will add product to favorite product list
Table 21 Use Case Add Product To Favorite description
Use Case Delete Product To Favorite
Describe Allow user to delete products from their favourite list
Precondition User has logged into the system
Steps (1) User open the program
(4) The system will delete product to favorite product list
Table 22 Use Case Delete Product To Favorite description
Describe After the desired products have been added to the cart and proceed to checkout
Precondition Customer has logged into the system
Steps (1) The customer opens the program
(2) Select cart in the system
(3) Select the button to buy products in the system
(5) If the customer choose payment after receiving the invoice and click Order, the system will send a message “Order successfully”
(6) If the customer choose payment online, the system will allow them to choose the payment method
Table 23 Use Case Order description
Describe Allows customers to choose a method of payment
Precondition The customer has chosen the position
Steps (1) The customer opens the program
(2) Click “Payment” button to order (3) Choose a payment method (4) Click “Confirm verification code” to make payment
Table 24 Use Case Payment description
Describe Allow customers to cancel orders within a specified time
Precondition Payment order no more than 15 minutes The customer has logged into the system
Steps (1) The customer opens the program
(2) Select tracking order in the system (3) Select cancel order in the system (4) The system will cancel the order
Table 25 Use Case Cancel Order description
Describe Allow customers to share products to other social networks
Precondition Customer have a social account
The customer has logged into the system
Steps (1) User open the program
(2) Select the product which user want to share (3) Select the function share
(5) The system will share link of product to other social networks
Table 26 Use Case Share Products description
Use Case Add Product To Cart
Describe Allows the user to add the desired products to the cart
Precondition User has logged into the system
Steps (1) User open the program
(2) Select the product which user want to add to cart (3) Select button “ Add to cart”
(4) The system will add product to their cart
Table 27 Use Case Add Product To Cart description
Use Case Delete Product To Cart
Describe Allows users to remove unwanted products from cart
Precondition User has logged into the system
Steps (1) The customer opens the program
(2) Select cart in the system (3) Select the product to delete (4) Select delete product and system will save the results
Table 28 Use Case Delete Product To Cart descriptiop
Use Case Edit the number of products purchased in the cart
Describe Allow customer to increase or decrease the number products
Precondition User has logged into the system
Steps (1) The customer opens the program
(2) Select cart in the system (3) Select the product to increase or decrease
Table 29 Use Case Edit the number of products purchased in the cart description
Describe Allows user to remove all products from the cart
Precondition User has logged into the system
Steps (1) The customer opens the program
(2) Select cart in the system (3) Select delete all product and system will save data
Table 30 Use Case Delete Cart description
Use Case Chat With Staff Shop
Describe Allows users to chat with shop owners if they have any questions
Precondition User has logged in the system
Steps (1) User clicks on the message icon on the system
(2) The system appear interface of chat
(3) The system will display the details of the user's chat with the employee
(4) User chooses to perform message operations
(5) The system performs the operation, and gives the information to the user
Table 31 Use Case Chat With Staff Shop description
Use Case Chat With The Shop’s Virtual Assistant
Describe Allows user to talk to the shop's virtual assistant
Precondition User has logged in the system
Steps (1) User clicks on the message with AI icon on the system
(2) The system appear interface of chat
(3) The system will display the details of the user's chat with the employee
(4) User chooses to perform message operations
(5) The shop's virtual assistant performs the operation, and gives the information to the user
Table 32 Use Case Chat With The Shop’s virtual Assistant description
Describe Display information such as name, username, phone,
Precondition The user has logged in the system
Steps (1) Customer or Employee opens the program
(2) Customers and employees select the profile on screen (3) The system appears information about their profile (4) After viewing the message, click “Close” to finish
Table 33 Use Case View Profile description
Use Case View Personal Cart
Describe Allow customer to view the products they added to cart
Precondition The customer has logged in the system
Steps (1) Customer opens the program
(2) Customers select cart icon on the screen
(3) The system appears list selected cart
(4) After viewing the message, click “Close” to finish
Table 34 Use Case View Personal Cart description
Use Case View Landing Page
Describe Allows customers to view information about policy
Precondition The customer has logged in the system
Steps (1) Customer opens the program
(2) Customers select landing page on the screen
(3) The system appears information about policy, about us (4) After viewing the message, click “Close” to finish
Table 35 Use Case View Landing Page description
Use Case View Shop’s location In Map
Describe Allows customers to view the shop's address on a map
Precondition The customer has logged in the system
Steps (1) Customer or Employee opens the program
(2) Customers and employees select map on thescreen (3) The system appears a map show location’s shop (4) After viewing the message, click “Close” to finish
Table 36 Use Case View Shop’s location In Map description
Use Case Accept Sell Product to Customer
Describe After the customer has paid, the store owner will confirm it and let the shipping department give it to the customer
Precondition The customer has paid
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the function “Management Product”
(4) The system will transfer equipment information to the shipping department, have a message “ Sell successfuly”
Table 37 Use Case Accept Sell Product Bill description
Use Case Add Information About Product
Describe Owner and staff input the information about the new products onto the website/system
Precondition Shop have a new product
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the function “Add Product”
(3) The system displays the Add Product screen
(4) The store owner enters the necessary information on the form such as : the name, the ID, production date, pictures of the products,…
(5) After entering, the store owner clicks the “Save” button to save the information in the database
(6) The system connects to the database, creates a new account, and displays the message “Product creation successful”
Table 38 Use Case Add Information About Product Description
Use Case Edit Information About Products
Describe They can also edit those information when needed like when the price changed or almost out of stock
Precondition Shop want to update products
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the function “Edit Product”
(3) The system displays the Edit Product screen
(4) The store owner enters the necessary information on the form such as : the name, the ID, production date, pictures of the products,…
(5) After entering, the store owner clicks the “Save” button to save the information in the database
(6) The system connects to the database, edit a new account, and displays the message “Product edition successful”
Table 39 Use Case Edit Information About Product Description
Describe If the store is no longer having the products to sell, the owner and staff can decide whether to delete those products information out of the system
Precondition The store is no longer having the products to sell
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the system “Delete Products”
(3) The system displays form delete products (4) The store owner selects the product to be deleted
(5) After entering, click the “save” button to save the results to the database
Table 40 Use Case Remove Product description
Describe The store owner adds an account when a new employee comes to work at the store
Precondition There are new employees to work
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the function “Add account”
(3) The system displays the Add Account screen
(4) The store owner enters the necessary information on the form such as : account name, and password
(5) After entering, the store owner clicks the “Save” button to save the information in the database
(6) The system connects to the database, creates a new account, and displays the message “Account creation successful”
Table 41 Use Case Add Account Description
Describe Owner can also edit the account info, such as the staff name or phone number when needed
Precondition There are new employees to work
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the function “Edit account”
(3) The system displays the Edit Account screen
(4) The store owner enters the necessary information on the form such as : account name, and password
(5) After entering, the store owner clicks the “Save” button to save the information in the database
(6) The system connects to the database, edit a new account, and displays the message “Account edition successful”
Table 42 Use Case Edit Account Description
Describe Store owner deletes employee's account
Precondition When an employee quits
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the function “Delete account”
(3) The system displays a list of existing accounts on the screen
(4) The store owner enters the account name in the search box or selects it directly from the list on the screen
(5) After selecting the account to be deleted, the store owner presses the “Delete” button to delete the account
(6) The system will connect to the database to delete the selected account information The message "Delete successful" will then be displayed
Table 43 Use Case Delete Account description
Describe Store owner can add a new bill to the system when a customer decides to buy what they put into the shopping cart
Store owner has logged into the system
Steps (1) The store owner opens the program
(3) The system will connect to the database to select information The system will give information about the price of the purchased products
Table 44 Use Case Add Bill description
When errors occur or customers request product modifications within a bill, staff are empowered to make necessary changes through the system This functionality ensures the accuracy and flexibility of bill management, allowing for efficient resolution of discrepancies and customer satisfaction.
Precondition Have some errors or when the customer wants to change the products inside the bill
Store owner has logged into the system
Steps (1) The store owner opens the program
(3) Enter new information of products
(4) The system will connect to the database to edit information The system will give new information about the price of the purchased products
Table 45 Use Case Edit Bill description
With the customer's consent, staff can nullify a bill if it has been withdrawn by the customer or the store This deletion process is authorized only with the mutual agreement of both parties.
Precondition The bill has been canceled
Store owner has logged into the system
Steps (1) The store owner opens the program
(3) The system will connect to the database to remove information Have a message “ Remove bill successfuly”
Table 46 Use Case Remove Bill description
Use Case Add New Customer
Describe Employee add new customer information to the database
Precondition When a customer comes to the store and wants to rent a disc, there is no information in the database
Employee has logged into the system
Steps (1) The employee opens the program
(2) Select the function “Add guest”
(3) The system displays the Add new customer form
(4) Employees enter customer information such as: customer name, customer code, age, phone number, address
(5) After entering, select “Save” for the system to save to the database
(6) The employee finishes the process and clicks the button to return to the main screen
Table 47 Use Case Add New Customer description
Describe Employees delete customer information from the database
Precondition Customers have too long stopped participating in the activities of renting or buying discs at the store
Store owner has logged into the system
Employee has logged into the system
Steps (1) The employee opens the program
(2) Select the function “Delete customer”
(3) The system displays a list of existing customers
(4) The staff checks the list of customers who have not come to buy or rent discs at the store for too long or search for the name of the customer they want to delete in the search box
(5) After identifying the customer to be deleted, the employee presses the “Delete” button to delete the customer
(6) Click “Save” to save it to the database
Table 48 Use Case Remove Customer description
Use Case Search Customer Information
Describe Employees want to look up customer information to manage existing customers or for statistics
Precondition Customers already have information on the database
Store owner has logged into the system
Steps (1) The employee opens the program
(2) Select the function “Look up customer information”
(3) The system displays the search form
(4) Employees enter information into the form according to the search directions such as: by customer name, by customer code, by month
(5) After entering, the employee presses the button
(6) Database connection system and customer information display
Table 49 Use Case Search Customers description
Describe When the store has promotional events, the offer you want to apply to the product
Activation agent Employee, shop owner
Store owner or employee has logged into the system
Steps (1) Staff or shop owners open the program
(2) Select the system “Add event”
(3) The system displays products that want to be discounted
(4) The employee enters the amount of the discount
(5) Employees enter the number of days to apply the discount
(6) After entering, click the “save” button to save the results to the database
Table 50 Use Case Add event description
Describe The owner and staff can use this feature to fix/change the information about that respective event
Activation agent Employee, shop owner
Store owner or employee has logged into the system
Steps (1) Staff or shop owners open the program
(2) Select the system “Edit event”
(3) The system displays products that want to be discounted
(4) The employee re-enters the amount of the discount
(5) Employees re-enter the number of days to apply the discount
(6) After entering, click the “save” button to save the results to the database
Table 51 Use Case Edit Event description
Describe When the event comes to an end, the owner and staff can delete the information about that event and customers will no longer have the promotion of the removed event
Precondition The event comes to an end
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select the function “Delete event”
(3) The system displays a list of existing events on the screen
(4) The store owner enters the avent name in the search box or selects it directly from the list on the screen
(5) After selecting the event to be deleted, the store owner presses the “Delete” button to delete the event
(6) The system will connect to the database to delete the selected event information The message "Delete successful" will then be displayed
Table 52 Use Case Remove Event description
Use Case View revenue statistics
Describe After a month of sales and want to summarize the results achieved
Precondition Number of products sold
Store owner has logged into the system
Steps (1) The store owner opens the program
(2) Select “statistics” in the system (3) Select the items that need statistics:
- Select the statistics of the number of products
(4) The system will appear a form displaying revenue information or the number of remaining products
Table 53 Use Case View revenue statistics description
Describe Allow user to enter discount codes to reduce product prices
User has logged into the system
Steps (1) Customer opens the program
(2) Customer selects the “Discount” function on the screen interface
(3) The system appears the discount interface (4) Enter discount’s user
(5) The system will reduce the price of products with discount entered
Table 54 Use Case Discount description
Sequence diagrams
Figure 27 Sign up sequence diagram
Figure 28 Change acccount information t sequence diagram
Figure 29 Manage Order sequence diagram
Figure 30 Manage user account sequence diagram
Figure 31 Manage products sequence diagram
Figure 32 Manage shopping cart sequence diagram
Figure 33 View products sequence diagram
Figure 34 Search products sequence diagram
Database design
Name Type Description id bigint ID of user email string Email of user phone bigint Phone of user role_id string Permission of user status smallint Status of user verification_code integer Verification code to active account or change password created_at timestamp with time zone
The time adds data updated_at timestamp with time zone
The time update data created_by string The person create data updated_by string The person update data
Name Type Description user_id bigint Id of user role_id integer ID role of user created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 56 User role database description
The `user_id` column represents the unique identifier for each user The `profile_picture` stores the user's profile picture The `full_name` column contains the user's full name The `birthday` column stores the user's birthday The `gender` column specifies the user's gender The `created_at` and `updated_at` columns capture the time when the user was created and last updated, respectively The `created_by` and `updated_by` columns track the user who created and last updated the data, respectively.
The Payment Method table stores payment methods for users Each row represents a method, with the 'id' column serving as a unique identifier The 'user_id' column links the payment method to a specific user The 'method' column specifies the type of payment method, such as credit card or PayPal The 'is_default' column indicates whether this is the user's default payment method The 'card_token' and 'card_exp' columns store card-specific information for credit card payments Finally, the 'created_at', 'updated_at', 'created_by', and 'updated_by' columns track the creation and modification details of each payment method.
Table 58 User method payment description
Id bigint Id of user address user_id bigint Id of user full_name string Full name of user phone bigint Phone of user company string Company of user region string Region of user district string District of user ward string Ward of user street string Street of user status smallint Status of user address created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 59 User address database description
Name Type Description id bigint Id of social account of user user_id bigint Id of user provider string Provider of user such as facebook or gmail access_token string Access token of account created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 60 Social account of user database description
Name Type Description id bigint Id of user title string Title of product slug string Slug of product sku string Sku of product catagory_id bigint Catagory ID of product quantity_in_stock integer Quantity in stock of product price numeric Price of product price_sales numeric Price sale of product status smallint Status of product percent_discount numeric Percent discount of product created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Name Type Description id bigint Id of product visual type smallint Type of product visual such as video or image url string Url of product visual slug string Slug of product product_id bigint Id of product product_option_detail bigint Option detail of product created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 62 Product visual database description
Id bigint Id of product rating product_id bigint Id of product user_id bigint Id of user star_rating smallint Star rating of product comment string Comment of user for product created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 63 Product rating database description
Name Type Description id bigint Id of product rating rating_id bigint Id of rating of product type smallint Type of product rating url string Url of product rating created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 64 Product rating visual database description
Name Type Description id bigint Id of product catagory title string Title of product catagory slug string Slug of product description string Description of product catagories status smallint Status of product catagories created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 65 Product categories database description
Name Type Description id bigint Id of product description product_id bigint Id of product descriptions string Description of product created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 66 Product description database description
Name Type Description id bigint Id of product description visual product_id bigint Id of product product_description
Product descriptions are identified by a unique ID (`id`) and have a specific type (`type`).* Each description has a visual representation accessible through a URL (`visual`).* Metadata includes timestamps for data creation and updates (`created_at`, `updated_at`), as well as the individuals responsible for these actions (`created_by`, `updated_by`).
Table 67 Product description visual database description
Name Type Description id bigint Id of product detail product_id bigint Id of product key string Key of product detail value string Value of product detail created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 68 Product detail database description
Name Type Description id bigint Id of product item detail product_item_id bigint Id of product item product_option_detail
_id bigint Id of product option detail created_at timestamp with time zone The time adds data updated_at timestamp with time zone The time update data created_by string The person create data updated_by string The person update data
Table 69 Product item detail database description
SYSTEM ARCHITECTURE AND TECHNOLOGIES USED
System architecture
In software architecture, a monolithic architecture refers to a design where all the components of an application are tightly integrated into a single codebase and run as a single process This is in contrast to microservices architecture, where an application is built as a collection of loosely coupled, independently deployable services à Advantages:
- Simplicity: Monolithic architectures are often simpler to develop, test, and deploy compared to more complex architectures like microservices The entire application is contained within a single codebase, making it easier to understand and manage
For small-scale projects and resource-constrained startups, monolithic applications offer quicker development and deployment as they eliminate the complexities associated with managing distributed systems This streamlined process proves particularly beneficial in situations where resources are limited.
- Easier Debugging and Testing:Debugging and testing are generally simpler in a monolithic architecture since the entire application is in one codebase It's easier to trace issues, and testing can be done on the entire application in a more integrated manner
- Synchronous Communication:In a monolithic architecture, communication between different components is typically synchronous, making it easier to understand and debug Asynchronous communication, common in distributed systems, can introduce complexities in terms of ordering, reliability, and error handling
- Resource Utilization:Monolithic applications can sometimes be more efficient in terms of resource utilization because they don't have the overhead of managing multiple services and communication between them
- Deploying a monolithic application is often simpler than deploying a distributed system There's only one codebase to deploy, and dependencies are typically easier to manage.
Technologies
ReactJS, often referred to as React, is an open-source JavaScript library for building user interfaces (UIs) and single-page applications (SPAs) It was developed and is maintained by Facebook (now Meta) and a community of individual developers and companies à Advantages:
- Good Performance: React uses Virtual DOM to optimize performance Instead of updating the actual DOM directly whenever there's a change, React creates a Virtual DOM tree and compares it to the previous one to determine the changes that need to be applied This minimizes direct access and updates to the actual DOM, making the application faster
- Component-Based Design: React allows you to break the UI into separate components, facilitating code reuse and making source code management easier This provides a convenient environment for development and maintenance
React's vibrant ecosystem boasts a comprehensive suite of libraries and tools that empower developers to address diverse application needs From routing management with React Router to state management with Redux or Mobx, React offers a vast selection of third-party resources to enhance its core functionality and foster efficient development processes.
- Large Community and Strong Support: React has a vibrant community with extensive documentation, articles, and online forums to help address issues and facilitate learning If you encounter problems during development, there are many sources of support available
- Easy Integration: React can be easily integrated with other libraries and frameworks, providing flexibility You can use React as part of a larger application that employs other technologies like Node.js, GraphQL, and Express.js
- Scalable Project Development: React is suitable for developing large and complex applications Its component-based project structure makes source code maintenance easy and enables efficient collaboration among development teams
- Security Support: React supports security measures against XSS (Cross- Site Scripting) and protection against other types of attacks when using JSX to display data in the application
Spring Boot is a Java application development framework designed to create Java applications easily, quickly, and efficiently It is developed and maintained by Pivotal Software, a subsidiary of VMware Spring Boot is part of the Spring Framework ecosystem, but it focuses on reducing complexity and configuration work for Java applications à Advantages:
Spring Boot's auto-configuration capability eliminates the need for extensive XML file configurations or explicit setup By utilizing sensible default configurations, it empowers developers to concentrate on writing application code rather than tedious configuration tasks.
- Embracing Convention over Configuration: Spring Boot promotes the
"convention over configuration" principle, meaning it has predefined configurations and certain conventions, reducing the number of decisions you need to make and helping you quickly start a project
- Rapid Development: Spring Boot helps you develop applications quickly by providing tools and libraries for building applications, such as database integration, security, RESTful web services, and many other features
- Microservices: Spring Boot is widely used in microservices architecture It provides features to support building and deploying small, independent, and manageable services
- Spring Ecosystem: Spring Boot is fully compatible with the Spring ecosystem, including Spring Framework, Spring Data, Spring Security, and many other modules This allows you to leverage the powerful features of Spring in your Spring Boot projects
PostgreSQL is a popular open-source Database Management System
(DBMS) It is designed to store and manage data, enabling applications and systems to use data efficiently and securely à Advantages:
- Open Source: PostgreSQL is open-source software and completely free to use, modify, and distribute without the need for any fees
- Cross-Platform: PostgreSQL supports various operating systems such as Linux, Windows, macOS, and other platforms, allowing you to deploy it in most environments
- Full SQL Support: PostgreSQL adheres to the SQL standard and provides a range of powerful features for data querying, transaction handling, and database management
- JSON and JSONB Support: PostgreSQL supports storing and querying JSON data, making it easy to work with semi-structured data JSONB is an improved form of JSON, offering better performance
- Scalability: PostgreSQL allows you to scale your database in various ways, including data clustering, data backup and recovery, and database clustering
- Strong Security: PostgreSQL includes robust security features such as user management, access control, data encryption, and database auditing
- Extensibility: It provides a wide range of extensions and add-on modules that enable you to create custom features and extend the functionality of PostgreSQL
- Strong Community: PostgreSQL has a large and vibrant community with extensive documentation, forums, and online support resources to help you resolve issues and learn
JWT stands for "JSON Web Token." It is an open-source standard used to represent secure information as a text string JWT is commonly used for authentication and authorization purposes in web applications and web services JWT consists of three main parts:
- Header: Contains information about the type of token and the encryption algorithm used to create the token
- Payload: Contains the data stored in the token, such as user information or access rights The payload can be customized to include any information you want to store.Signature: Created using the header and payload, along with a specified secret key (or public key) This signature is used to verify the integrity of the token
Overall, JWT is a powerful tool for authentication and authorization in web applications and web services, helping to improve security and performance in handling user requests à Advantages:
- Easy Deployment: JWT is an open-source standard, which means it is readily available and can be implemented in various programming languages and frameworks
- Security: JWT can be encrypted using a secret key (or public key), ensuring the security of the data within the token The signature is used to verify the integrity of the token, ensuring it hasn't been tampered with during transmission
- Authentication: JWT enables secure user authentication When users log in and receive a JWT, they can send it along with requests to prove their identity without the need for re-login
- Portability: JWT can be used across different environments and devices, including web browsers, mobile apps, and web services This facilitates integration and deployment in complex systems
- Easy Integration: JWT can be easily integrated with existing systems by sending and receiving tokens via HTTP requests It doesn't require server- side state storage, enhancing scalability and performance
- Customizable Information: The payload of JWT can contain any custom information you want, allowing flexibility in storing user information and access rights
- Reduced Server Workload: Since JWT doesn't require server-side state storage, it reduces server workload and leads to faster response times
Docker is an open-source platform for building, deploying, and running applications in a packaged environment known as a "container." Containers allow applications to be bundled together with their dependencies and required configurations into a single package, enabling the applications to run reliably and consistently in any environment supported by Docker. à Advantages:
- Application Packaging: Docker allows applications and their dependencies to be packaged into a single container, simplifying the deployment and execution of applications across various environments
- Easy Scalability: Docker facilitates easy scalability of applications by creating and running multiple copies of containers, increasing processing power and load handling capabilities
- Flexibility: Docker containers can be easily moved, copied, and shared across different servers and systems without affecting application performance or consistency
- Efficiency: Docker utilizes system resources more efficiently compared to traditional application deployments, saving hardware costs and deployment time
- Strong Support: Docker has a robust community support system, enabling quick issue resolution and access to solutions from the community
DESIGN UI
List of all pages
1 Sign In Text Display main purpose of page
2 Email Text Box For users to sign an email
3 Password Text Box For users to sign the password
4 Change Password Link After clicking, the page will go to Change Password Page
5 Sign In Button After clicking, the page will go to Home Page
Table 78 Information in Sign In
1 Create Account Text Display main purpose of page
2 Full name Text For users to sign a full name
3 Email Text Box For users to sign an email
4 Password Text Box For users to sign the password
Text Box For users to sign the password
6 Sign In Button After clicking, it still stays on the login page and forces us to log in
Table 79 Information in Sign Up
1 Logo Image Display logo of website
2 Trangc Text For users to sign a full name
3 Email Text Box For users to sign an email
4 Password Text Box For users to sign the password
5 Confirm Password Text Box For users to sign the password
6 Sign In Button After clicking, it still stays on the login page and forces us to log in
1 Image Image Display image of website
2 Image Image Display image of website
3 Titile Text Display title of product and describe product
4 Title Text Display title of product and describe product
5 Xem ngay Button After clicking, the page will go to the đồng hồ product page
6 Xem ngay Button After clicking, the page will go to the đồng hồ product page
1 Image Image Display image of product
2 Đồng hồ nam Text After clicking, the page will go to the đồng hồ product page
3 Nhẫn cưới Text After clicking, the page will go to the nhẫn cưới product page
4 Vòng tay Text After clicking, the page will go to the Kính mắt product page
5 Hoa tai Text After clicking, the page will go to the đồng hồ product page
1 Đồng hồ text Display title of product
2 Product Cart Component Product Display product of website
Table 83 Information product by category 1
Figure 50 Information detail of product
1 Image Image Display image of website
2 Title Text Describe product of website
3 Xem ngay Button After clicking, the page will go to product category page
Table 84 The detail information of product
1 Trang sức text Display title of product
Table 85 Information of product category 2
1 Tin tức nổi bật text Display title of product
2 Image Image Display list blog of website
1 The part page of home page Title Describe content of website
1 Footer Footer Display some information of website
1 Title Title Display title of website
2 Sắp xếp Select Box After clicking, it will show 2 options “Giá:
Tăng dần” and “Giá: Giảm dần”
Table 89 Information product category page 1
1 Đồng hồ text Display title of product
2 Product Cart Component Product Display product of website
Table 90 Information product category page 2
1 Image Image Display image’s product
2 Title Text Display title of product
3 Title Text Display information of product
4 Giá Text Display price of product
5 Color Button Display color of product
6 Size Button Display size of product
7 Số lượng Button Increase and decrease the quantity of product
Button After clicking, the product will added to cart
9 Mua ngay Button After clicking, the page will go to cart page
10 Policy Policy Show policy of product
1 Mô tả sản phẩm text Describe product
2 Câu hỏi thường gặp Accordion Component Display the question of users
1 Đánh giá sản phẩm text Display title of website
2 4 Text Display average star of comment’s users
3 Title Text Display comment of users
4 Number Pagination Users can switch to see older comments if there are more than 5 comments
Table 93 Information rating and comment product
1 Sản phẩm liên quan text Display title of website
2 Product Cart Component Product After clicking, the page will go to product detail page
1 Number text Display quanity of product
2 Information of product text Display information of product
3 Button Button Clicking if user want to buy products
4 Button Button Users can increase and decrease quanity of product
5 Number Text Displays the total amount of the product
6 Thanh toán Button After clicking, the page will go to payment page
7 Trang chủ Link Users can go to Home Page when users click
8 Product Cart Component Product After clicking, the page will go to the product detail page
1 Địa chỉ nhận hàng Text Display purpose of title
2 Sản phẩm Text Displays the order number that the user wants to buy
3 Phương thức thanh toán Text Select a payment method
4 Tổng tiền hàng Text Displays the total amount that needs to be paid
5 Đặt hàng Button After clicking, the page will go to the payment page
1 Hồ sơ Link After clicking, the page will go to profile page
2 Địa chỉ Link After clicking, the page will go to address page
3 Đơn hàng Link After clicking, the page will go to purchase page
4 Hồ sơ của tôi Text Display information of users
5 Lưu Button After clicking, saving information of users
6 Chọn ảnh Button Changing image of user
1 Địa chỉ của tôi Text Display main purpose of page
2 Thêm địa chỉ mới Button Adding a new address of user
3 Cập nhật Button Updating a address of user
4 Xoá Button Deleting a address of user
1 Chờ thanh toán Button Orders that have clicked on the payment button but have not yet been paid will be displayed
2 Hoàn thành Button Orders that have been paid by clicking the payment button will be displayed
1 Đổi mật khẩu Text Display main purpose of page
2 Email Text box For users to sign an email to change password
3 Mật khẩu mới Text box For users to sign an new password to change password
4 Lưu thay đổi Button After clicking, user change password successful, and go to login page
5 Huỷ Button After clicking, the page will go to the login page
1 Gửi mã xác nhận email Text Display main purpose of page
2 Email Textbox For users to sign an email to confirm code
3 Gửi Button After clicking, users switch verification code page
4 Huỷ Button After clicking, users will go to login
Table 101 Information send verification code
1 Gửi mã xác nhận email Text Display main purpose of page
2 Mã xác nhận Textbox For users to sign a verification code to active email
3 Bạn chưa nhận được mã xác nhận Link After clicking, users will receive a new verification code
4 Tiếp tục Button After clicking, users will go to login
5 Huỷ Button After clicking, users will go to login
Table 102 Information verification code page
2 Show entries SelectBox Users can display the number of products on each page as desired
3 Add Button After clicking, users can add a new products
4 Xem Button After clicking, users can view the description
5 Icon edit Icon After clicking, users can update product
6 Icon delete Icon After clicking, users can delete product
7 Button Pagination After clicking, users can view other products
INSTALLATION AND TESTING CODE
Installation
6.1.1 Install Reactjs à Step 1: Install Node.js and npm à Step 2: Create a React Project using Create React App
- Run the following command to install Create React App globally:
- Create a new project with the command: à Step 3: Move to Project Folder à Step 4: Run the Project
6.1.2 Install PostgreSQL using pgAdmin à Step 1: Download and Install PostgreSQL: à Step 2: Start pgAdmin:
- In pgAdmin, find and open "Servers" on the navigation bar à Step 3: Create a new Server:
- Right click on "Servers" and select "Create" > "Server "
- Fill in connection information in the following fields:
• General: Name: The name you want to give the server
• Connection: Host name/address: localhost Port: 5432 Maintenance database: postgres Username: postgres Password: Enter the password you set during PostgreSQL installation
- Click "Save" to save connection information à Step 4: Connect to Server:
- Right-click on the server you just created and select "Connect"
- If everything is correct, you will have successfully connected to your
6.1.3 Download Json web token à Step 1: Choose a Programming Language/Framework:
- Select the programming language or web framework you are using for your project Many languages have libraries that support JWTs à Step 2: Install a JWT Library:
- Add the following dependency to your Maven or Gradle project:
6.1.4 Download docker à Step 1: Go to the Docker Desktop for Windows page à Step 2: Click on the "Download for Windows" button à Step 3: Follow the on-screen instructions to download the installer à Step 4: Once the download is complete, run the installer à Step 4: During installation, you might be prompted to enable Hyper-V
Allow Docker to enable Hyper-V if it's not already enabled à Step 5: After installation, Docker Desktop should be running on your system
6.1.5 Download Swagger à Step 1: Swagger OpenAPI Specification:
- The Swagger OpenAPI Specification defines a standard, language- agnostic interface to RESTful APIs It allows both humans and computers to understand the capabilities of a service without accessing its source code or extensive documentation
- The OpenAPI Specification is typically written in JSON or YAML format
- You can download the OpenAPI Specification from the Swagger GitHub Repository à Step 2: Swagger Editor:
- The Swagger Editor is an online tool for editing and validating
Swagger/OpenAPI specifications It provides a convenient way to create and modify API documentation
- You can use the online Swagger Editor at Swagger Editor without any downloads à Step 3: Swagger UI:
- Swagger UI is a user interface that allows developers to visualize and interact with the API's resources without having any of the implementation logic in place
- You can use the online Swagger UI at Swagger UI or integrate it into your project by downloading it
To use Swagger UI in your project: à Step 1: Download the Swagger UI distribution from the official GitHub repository: Swagger UI GitHub Repository à Step 2: Extract the contents of the downloaded archive to a directory in your project à Step 3: Open the index.html file in your web browser You can customize the Swagger UI configuration by editing the index.html file if needed à Step 4: Specify the URL to your OpenAPI Specification file in the Swagger
UI interface to visualize and interact with your API documentation.
Software Testing
- Unit testing is the first level of testing and is often performed by the developers themselves It is the process of ensuring individual components of a piece of software at the code level are functional and work as they were designed to Developers in a test-driven environment will typically write and run the tests prior to the software or feature being passed over to the test team Unit testing can be conducted manually but automating the process will speed up delivery cycles and expand test coverage Unit testing will also make debugging easier because finding issues earlier means they take less time to fix than if they were discovered later in the testing process TestLeft is a tool that allows advanced testers and developers to shift left with the fastest test automation tool embedded in any IDE à Integration Testing
- After each unit is thoroughly tested, it is integrated with other units to create modules or components that are designed to perform specific tasks or activities These are then tested as a group through integration testing to ensure whole segments of an application behave as expected (i.e, the interactions between units are seamless) These tests are often framed by user scenarios, such as logging into an application or opening files
Integrated tests can be conducted by either developers or independent testers and are usually comprised of a combination of automated functional and manual tests à System Testing
- System testing is a black box testing method used to evaluate the completed and integrated system, as a whole, to ensure it meets specified requirements The functionality of the software is tested from end-to-end and is typically conducted by a separate testing team than the development team before the product is pushed into production à Acceptance Testing
Acceptance testing is the final stage of functional testing that evaluates if software meets predefined business criteria and user needs This process includes internal testing by the development team and external testing with end-users through beta testing Beta testing provides valuable feedback from potential customers, addressing usability concerns and ensuring the product is ready for delivery.
Based on the beginning and the content of the Source Code (intervention inside the Code of the program) Testing includes the following:
- Test based on memory view
- Check the performance of the program à Black box Testing
Test the functionality of the website to function properly according to the description Check and find errors to edit the website:
- Error in data structure or external database access
- Initialization and termination of errors
ID Description Test steps Test Data Expected
TC_01 Register with valid information
“Đăng nhập” at Home Page
- Full name: Trần Văn Thiên
TC_02 Register with an existing email account
“Đăng nhập” at Home Page
- Full name: Trần Văn Thiên
TC_03 Login with a valid account
“Đăng nhập” at Home Page
The page goes to the Home Page
The page goes to the home Page
TC_04 Log in with an account that doesn't exist
“Đăng nhập” at Home Page
User with email luonluondan dau1999@g
User with email luonluondan dau1999@g
12345678 mail.com not found! mail.com not found!
TC_05 Log in with an account that is the wrong password
“Đăng nhập” at Home Page
TC_06 Change Pass with wrong email
“Đăng nhập” at Home Page
- Click button"Lưu thay đổi”
Successful Successful Pass valid information
- Click “Icon user” and button
- Click button"Lưu thay đổi”
“Đăng nhập” at Home Page
- Click “Icon user” and button
Họ và tên, Giới tính, Ngày sinh
TC_09 Add a new address of user
“Đăng nhập” at Home Page
- Click “Icon user” and button
- Họ và tên: “Trần Văn Thiên”
- Region: “Thành phố Hồ Chí Minh”
TC_10 Edit a address of user
“Đăng nhập” at Home Page
- Click “Icon user” and button
- Họ và tên: “Trần Văn Thiên”
- Region: “Thành phố Hồ Chí Minh”
TC_11 Delete a address of user
“Đăng nhập” at Home Page
- Click “Icon user” and button
Display all đồng hồ categories on the
Display all đồng hồ categories on the
- Scroll to the product cart
TC_14 Add product to cart
- Scroll to the product cart
- Click choose size and color of product
TC_15 Search for products on the admin page
Showing products with title Royney
Showing products with title Royney
TC_16 Add a new product on the admin page
TC_17 Update a new product on the admin page
Change: Title, Price, Pricesales, PercentageSales, Category,
TC_18 View description of product
TC19 Show the number of products on each page
“Đăng nhập” at Home Page
- Click “Icon user” and button
CONCLUSION
Achievements
- Through the process of implementing the project of building a website to sell computer equipment, our team has accumulated extremely useful knowledge and experience:
- Know the workflow between front-end and back-end
- Practice planning and teamwork skills
- Practice programming ability with JavaScript language, especially using built a standard application monolith architecture à About the topic:
The program built by the team has fully ensured the basic required functions for a system of buying and selling clothes products in website and application such as:
- Add , Delete and Edit products function in Admin Page
- Search the products that the users want to see and Search according to filter
- Manage products , categories, users, orders and statistics on Admin Page
- Manage available quantity of products for prevent the users orders so many products
- Allows users to choose the colors and the sizes of products what they want
- Add to Cart, Remove products and Delete all products from the Cart
- Log in, Log out, Register Account, Change Password and Change Information for users
- Allows users to review orders placed and follow the order status
- Allows users to comment about products and review by rating
- Have Checkout Page for users sign the necessary informations
- Have two payment type (Paypal and VNPay) for users to choose
- Users can see the discount of products to know for choosing products when they buy
- Users can see the recommended products of any products to have many more options when they buy
- Users can see what percentage of certain products are on sale and which products are currently out of stock
Advantages
à The website that the team builds has the following advantages:
- Beautifully built, easy-to-use UI/UX to enhance user experience
- Provides full basic functionality of an e-commerce site
- Easy to maintain, extend, reuse when there is a need to expand the website
- Use SPA (Single Page Application) technology and new technologies to provide powerful APIs, query data quickly.
Disadvantages
Must build Skeletons (components that wait for data to be ready), or delay redirects Because for SPA pages, the data sometimes cannot be transferred to the Components, leading to missing data during the rendering process.
Data is stored for free , so the query is limited
Limited time can not build up the advanced functions for the website.
Future work
à In the future, the team will try to perfect the website and update more features according to the set plan/goals, such as:
- Feature to compare configuration between products
- Update more functions to manage categories for dashboard admin
- Additional APIs for respective payment methods
- Additional authentication methods such as automatically sending messages
- +Create a community of website users
[1] Software engineering curriculum, University of Technical Education,
[2] System issues: https://stackoverflow.com/
[3] Bootstrap: https://getbootstrap.com/docs/5.3/getting- started/introduction/
- React Router DOM v6: https://reactrouter.com/docs/en/v6/getting- started/overview
- Redux Saga: https://redux-saga.js.org/docs/api
- Axios: https://axios-http.com/docs
- Json Web Token: https://jwt.io/
[5] Vietnamese lectures from Prof Nguyen Van Hiep
[6].https://viblo.asia/p/phan-biet-black-box-test-va-white-box-test-so-luoc- mot-so-ky-thuat-trong-black-box-test-Az45bpm6ZxY
[7] https://www.geeksforgeeks.org/software-engineering-white-box-testing/ [8] Other Internet và wiki resources.