INTRODUCTION
THE URGENCY AND OBJECTIVES OF PROJECT
- In a fully equipped society, each of us has the need to beautify and take care of ourselves
- You want to buy skincare products but don't want to drive in the blazing sun to get to the store
- So, my team got the idea of building a website that sells skin care cosmetics called Godashop
Topic “website for selling cosmetics” is solve the issues include:
- The project team should have expertise in researching results and understand the generalization and ability to design a website, programming the PHP language, and use MySQL
- Build a website that sells cosmetics so that users can view, search, sort and buy products online on the website
- Building management website helps admin to manage products, user accounts, orders, comment
- The product is a website, so it requires a user-friendly interface that is easy to use.
OBJECTS, SCOPE AND METHODS OF RESEARCH
- The project revolves around two main subjects: technology and practical knowledge about managing a website selling cosmetics
- In which, technology objects include compulsory research objects such as HTML, CSS, JavaScript, Bootstrap, PHP and MySQL to deploy and operate applications, enterprise architecture to create diagrams
The research aims to develop a user-friendly website for small shop owners to sell cosmetics, enhancing the online shopping experience for customers This platform will also include management features that enable store owners to efficiently oversee their sales and access valuable statistics.
EXPECTED RESULTS
- Understand the knowledge about HTML, CSS, JavaScript, Bootstrap, PHP, MySQL
- Build website sell cosmetics based on that knowledge.
RELATED WORK
1.4.1.1 Introduction: The website specializes in providing exclusive products of DHC - cosmetics of Japanese origin with prestigious brands, providing a full range of: Skin Care, Makeup, Body & Baby Skin Care, Hair Care …
Users can view new products or promotional events at discounted prices
Image 1.2: DHC Vietnam product list page
Users can view the products of their desired type
Image 1.3: DHC Vietnam product detail page
You can go to product detail page to see all information of product
Image 1.4: DHC Vietnam cart detail
You click the cart button so you can see detail of your cart
Image 1.5: DHC Vietnam payment page
You click payment button you will go to the payment page You can input your information and see how many you will pay for your card
Image 1.6: DHC Vietnam result searching page
You enter some keywords in product name so you can search the product you find
Image 1.7: DHC Vietnam contact page
You can send a message to store to know some information and you can see store address by google map API
1.4.2.1 Introduction: The "beauty box" operating form Lixibox has brought to a completely new way of skin care At Lixibox, there are many cosmetic lines from many famous brands from countries around the world such as Korea, France, UK, Japan, etc
Users can log in to the website to comment or use new utilities
Users can go to the shopping cart to review the products they have purchased and the total amount of those products.
Homepage of Lixibox will show some types of hot-selling, discounted and newly launched items
Product page will show you all product by category.
USER REQUIREMENTS AND USED TECHNOLOGIES
USER REQUIREMENTS
With the results gathered from the practical application, we build an easy-to-use, decentralized application for administrators and users
Based on the description of the problem, we can identify the main actors of the application are as follows:
- Admin: Admin can add, update products and user information Admin can manage the source of cosmetics, make sales, profit statistics
- User: Users can see product on website and order product
- Login User: The logged in users can comment products and update information
1 Add product Add product into the cosmetic website
2 Update product Update product information
3 Add user Add user into the admin website
4 Update user Update user information
5 Delete user Delete user from admin website
6 Add order Confirm product order into the admin website
7 Update order Update status order from the admin website
8 Cancel order Cancel product order from the admin website
9 Add staff Add staff into the admin website
10 Update staff Update staff information from the admin website
11 Disable staff Disable staff from the admin website
12 Active staff Active staff function in the admin website
13 Revenue statistics Revenue statistics are made daily
14 Decentralization Division of functions for each level
1 Login Enter email and password so that the authentication app or the user can log in with the Google account and Facebook account
2 Register Users who do not have an account can register email, password
3 Order Select the product and order
4 Search product Search for a product by name
6 Logout Sign out of the application
The application will encompass comprehensive documents, drawings, and detailed descriptions that enhance readability and understanding Furthermore, it facilitates straightforward maintenance, application upgrades, and technology transfers.
- Manage order (add, update, cancel)
- Manage customer (add, update, delete)
- Manage staff (add, update, disable/active)
Pre-conditions User already have had an account
If login successfully: Authenticated users and website return to the page the user was viewing
Basic flow Use case starts when the user needs to log in to the website
The website displays a window for the user to enter the username and password
User enter username and password The website authenticates the username and password The website return to the page the user was viewing
If the user enters the wrong username or / and password The following tasks were performed:
The website described the reason for authentication being wrong The website will prompt the user to login again
When the user re-enters the username and password, step 3 in Basic flow is performed
User login to app by Google Account
Pre-conditions User already have had Google Account
If login successfully: Authenticated users and website return to the page the user was viewing
Basic flow Use case starts when the user needs to log in to the website
The website displays a window for the user to enter the email and password
User enter email and password The google authenticates the email and password The website return to the page the user was viewing
If the user enters wrong email or password The following tasks were performed:
The website described the reason for authentication being wrong The website will prompt the user to login again
When the user re-enters the username and password, step 3 in Basic flow is performed
Table 2.4: Login by Google account scenarios
User login to app by Facebook Account
Pre-conditions User already have had Facebook Account
If login successfully: Authenticated users and website return to the page the user was viewing
Basic flow Use case starts when the user needs to log in to the website
The website displays a window for the user to enter the email and password
User enter email and password The google authenticates the email and password The website return to the page the user was viewing
If the user enters wrong email or password The following tasks were performed:
The website described the reason for authentication being wrong The website will prompt the user to login again
When the user re-enters the username and password, step 3 in Basic flow is performed
Table 2.5: Login by Facebook account scenarios
Pre-conditions User does not have account
If register successfully: Authenticated users and the website return to the page the user was viewing
Basic flow Use case starts when the user needs to register an account
The website displays the registration window User enter name, password, phone number, email The website authenticates for a duplicate email and a valid password
The website return to the page the user was viewing
If the user enters a duplicate email or an invalid password The following tasks were performed:
The website describes why it is wrong User retype email or password
Application returns to step 3 of Basic flow
Table 2.6: Register scenarios 2.1.5.5 View Product List:
Pre-conditions User want to view product list
If view product list successfully: website will show all products into screen
Basic flow Use case starts when the user wants to view product list
The website displays all products Alternative flow
If website cannot show all product:
The website describes the errors
Table 2.7: View product list scenarios
User view product by category
Pre-conditions User want to view product by category
If view product by category successfully: website will show all products of category is selected
Basic flow Use case starts when the user chooses a category want to view
The website displays all products of that category Alternative flow
If website cannot show all product of selected category:
The website describes the errors
Table 2.8: View product by category scenarios 2.1.5.7 Manage Cart:
Pre-conditions User want to manage cart
If manage cart successfully: website will show all products are selected in your cart
Basic flow Use case starts when the user wants to manage cart
The website displays all products are selected in your cart User can add or delete product in cart
If website cannot show all products are selected in your cart: The website describes the errors
Pre-conditions User want to search product
If search product successfully: website will show searched product
Basic flow Use case starts when the user wants to search product
User enter product name want to search into input search Below input search will show all product have that name User click button search
Website will show all product have the name is entered
If website cannot show all products have the name is entered: The website describes the errors
Table 2.10: Search product scenarios 2.1.5.9 Comment:
Pre-conditions Authorized user wants to comment in product
If comment successfully: website will show comment in that product
Basic flow Use case starts when the authorized user wants to comment
User click into one product User enter name, email, content of comment User click button send
If website cannot show comment:
The website describes the errors
Pre-conditions User want to proceed to order
If proceed to order successfully: website will show success message
Basic flow Use case starts when the authorized user wants to comment
User enter name, phone number, choose location and enter address User choose payment method
User click complete order button
If website cannot show comment:
The website shows the errors
Table 2.12: Proceed to order scenarios
1 Learnability User can easy complete main actions
2 Efficiency User can read instructions for each function
3 Memorability User working with app right way for second time use
4 Satisfaction Design with color easy look
Load website within 1 seconds with all thumbnail images
1 Maintainability The time modify website will faster
USED TECHNOLOGIES
2.2.1 Overview of HTML, CSS, PHP:
- HTML: Hypertext Markup Language, which provides content structure and meaning by defining it, for example a title, paragraph, or image
- CSS: Cascading Style Sheets, is a presentation language used to style the appearance of content using, for example, fonts or colors
PHP, or Hypertext Preprocessor, is a programming language primarily utilized for back-end development Its ability to be easily embedded within HTML pages makes it an excellent choice for website creation.
This is a simple but very effective front-end programming language Programming and debugging are both quick and easy
Websites can be easily customized with HTML through the fact that this programming language has many classes and function tags
It facilitates programmers to add a link on the web pages (by html anchor tag), so it acquires the interest of browsing of the user
It can work on most computer platforms such as Window, MacOS, Ubuntu, etc
A programming language that allows programmers to add multimedia to web pages such as video, audio, images, etc to make the website more lively and attractive
CSS empowers programmers to design customized web content by creating dedicated CSS files This allows for the precise styling and layout of elements, which can then be integrated into the desired HTML file Consequently, this approach enhances the clarity of the HTML structure and simplifies website management for users.
Programming with CSS will help the programmer from having to repeat the descriptions for each element From there, the programmer can save maximum time
21 working with it, making the code shorter, making it easier to control unnecessary errors
CSS helps programmers put a lot of styles that they want on an HTML website, so the ability to customize the page of the programmer becomes rich, colorful and vivid
CSS enhances the organization and clarity of web page code, allowing for a more structured display of content This separation facilitates easier updates by programmers and reduces the likelihood of errors in the HTML page.
CSS allows for the creation of diverse styles and colors, making it essential for various websites By utilizing CSS, programmers can minimize the redundancy of repeating formats and styles across multiple web pages.
Simple PHP is a simple programming language, easy to understand and easy to program compared to other scripting languages So PHP is a popular programming language for programmers
Faster Simple PHP language is easy to program, so PHP works faster than other script languages
Interpreted This is a programming language that does not need to be compiled
Open Source This is an open source language, so programmers do not need to pay, they can download and experience it for free
Multi-platform PHP programming language can be used on many popular platforms such as Window, MacOS, Linux, etc
Distinguish between uppercase and lowercase letters
PHP is a safe programming language for developing websites It has a lot of different security ways to prevent cyber attacks
The PHP programming language can be easily embedded in HTML files
The PHP programming language is compatible with most popular website servers today such as: Apache, IIS, Netscape, etc
The PHP programming language boasts a vibrant community of developers who consistently contribute valuable knowledge resources This collaborative environment not only facilitates regular updates to PHP documentation but also provides essential support for programmers facing challenges and inquiries.
- High-level language with simple syntax and a mild learning curve
- Platform-independency (Write Once Run Anywhere)
- Distributed language for easy remote collaboration
2.2.1.4 HTML, CSS, PHP in Project:
- HTML, CSS used to build front-end for application
- PHP used to build backend for application
SYSTEM DESIGN
ENTITY RELATIONSHIP DIAGRAM
SEQUENCE DIAGRAM
Image 3.2: User login sequence diagram
Image 3.3: User register sequence diagram
Image 3.4: Login with Google sequence diagram
Image 3.5: Login with Facebook sequence diagram
Image 3.6: View product list sequence diagram
Image 3.7: Search product sequence diagram
Image 3.8: Manage cart sequence diagram
Image 3.9: Procced to order sequence diagram
Image 3.10: User comment sequence diagram
Image 3.11: Add category sequence diagram
Image 3.12: Add role sequence diagram
Image 3.13: Delete order sequence diagram
Image 3.14: Search order sequence diagram
Image 3.15: Active manager sequence diagram
Image 3.16: View product by category sequence diagram
DATABASE DESIGN
- Content: The number of products in stock must be greater than the quantity of products purchased
- Content: User must be logged in to comment and rate the product
- Content: Only admins can access the comment list
- Content: User accounts must have unique email
Table 3.4: Constraints on user uniqueness
3.3.2.5 Constraints on order status confirmation:
- Content: Only admin can confirm order status
Table 3.5: Constraints on order status confirmation
- Content: Only admins can manage customers
Table 3.6: Constraints on managing customer
- Content: Only admins can manage staff
Table 3.7: Constraints on managing staff
3.3.3 Detailed description of data tables:
STT Attribute name Describe Datatypes
6 discount_percentage Product discount Int (11)
7 discount_from_date Product discount start time
8 discount_to_date Product discount end time
9 featured_image Product image Varchar (100)
10 inventory_qty Inventory quantity of the product
11 category_id Product category id
12 brand_id Product brand id Int (11)
13 create_date Time the product was created
STT Attribute name Describe Datatypes
2 province_id Province id Varchar (5)
STT Attribute name Describe Datatypes
STT Attribute name Describe Datatypes
4 province_id Province id Varchar (5)
STT Attribute name Describe Datatypes
4 district_id Product name Varchar (5)
STT Attribute name Describe Datatypes
2 product_id Product id Int (11)
Table 3.13: Detail image_item table
STT Attribute name Describe Datatypes
1 product_id* Product id Int (10)
2 order_id* Order id Int (10)
4 unit_price Price of each product
5 total_price Price of all products
Table 3.14: Detail order_item table
STT Attribute name Describe Datatypes
STT Attribute name Describe Datatypes
1 role_id* Role id Int (11)
2 action_id* Action id Int (11)
Table 3.16: Detail role_action table
STT Attribute name Describe Datatypes
STT Attribute name Describe Datatypes
STT Attribute name Describe Datatypes
6 login_by Type of login Varchar (20)
7 ward_id Ward id Varchar (5)
8 shipping_name Customer received name
9 shipping_mobile Customer received phone number
10 housenumber_street Detail address Varchar (200)
11 is_active Customer is active Tinyint (4)
STT Attribute name Describe Datatypes
2 create_date Time of create order
3 order_status_id Order status id Int (2)
4 staff_id Staff id Int (10)
5 customer_id Customer id Int (10)
6 shipping_fullname Customer received name
7 shipping_mobile Customer received phone number
8 payment_method Payment method Tinyint (4)
9 shipping_ward_id Ward id Varchar (5)
11 shipping_fee Shipping fee Int (11)
12 delivery_date Delivery date Date
STT Attribute name Describe Datatypes
2 role_id Role id Int (11)
INTERFACE DESIGN
Purpose: Allow users to access the website
1 Button Move to Google login interface
2 Button Move to Facebook login interface
6 Link Receive password from email
7 Link Move to Register interface
Purpose: Allow users to create an account on website
Purpose: Allow users to see products and events
1 Textbox Input product name to search
3 Link Move to Product list
5 Link Move to return policy
6 Link Move to payment policy
7 Link Move to delivery policy
9 Button Move to cart screen
10 Card Show product image and product short information
11 Link Move to register screen
12 Link Move to login screen
Purpose: Allow users to see products
4 Card Show product image and short information
Image 3.22: Client product detail screen
Purpose: Allow users to see more product detail information
2 Button Add product into cart
4 Tag Show detail information of product
5 Tag Show rate and comment
Table 3.26: Product detail screen (Client)
Purpose: Allow user to know product and price
2 Text view The price of product
3 Button Delete product from cart
4 Text view Total price of cart
5 Button Move to product list
6 Button Move to order screen
Purpose: Allow users to order products
Image 3.25: Client return policy screen
Purpose: Show information of return policy
Table 3.29: Return policy screen (Client)
Image 3.26: Client payment policy screen
Purpose: Show information of payment policy
Table 3.30: Payment policy screen (Client)
Image 3.27: Client delivery policy screen
Purpose: Show information of delivery policy
Table 3.31: Delivery policy screen (Client)
Purpose: Allow users to contact
1 Map Show location of shop
Purpose: Allow admin to see some information
1 Link Move to order interface
2 Link Move to product interface
3 Link Move to comment interface
4 Link Move to image interface
5 Link Move to customer interface
6 Link Move to category interface
7 Link Move to brand interface
8 Link Move to delivery charge interface
9 Link Move to staff interface
10 Link Move to decentralization interface
11 Link Move to order status interface
12 Link Move to letter interface
15 Card Show number of orders
17 Card Show number of cancel orders
Purpose: Allow admin to access the admin website
3 Check box Keep logged in
Image 3.31: Admin order list screen
Purpose: Allow admin to manage order
1 Item Move to order list
2 Item Move to add order interface
Table 3.35: Order list screen (Admin)
Image 3.32: Admin product list screen
Purpose: Allow admin to manage product
1 Item Move to product list
2 Item Move to add product screen
9 Link Move to comment of product
10 Link Move to product image
Table 3.36: Product list screen (Admin)
Image 3.33: Admin image list screen
Purpose: Allow admin to manage product images
Table 3.37: Image list screen (Admin)
Image 3.34: Admin customer list screen
Purpose: Allow admin to manage customers
1 Item Move to customer list
2 Item Move to add customer screen
Table 3.38: Customer list screen (Admin)
Image 3.35: Admin category list screen
Purpose: Allow admin to manage categories
1 Item Move to category list
2 Item Move to add category screen
Table 3.39: Category list screen (Admin)
Image 3.36: Admin delivery charges screen
Purpose: Allow admin to manage delivery charges
Table 3.40: Delivery charges screen (Admin)
Image 3.37: Admin staff list screen
Purpose: Allow admin to manage staffs
1 Item Move to staff list
2 Item Move to add staff screen
7 Button Active or disable staff
Table 3.41: Staff list screen (Admin)
3.4.1.21 Staff function list screen (Admin)
Image 3.38: Admin staff function list screen
Purpose: Allow admin to manage staff function
1 Item Move to function list
2 Item Move to add function screen
3 Item Move to action list
Table 3.42: Staff function list screen (Admin)
Image 3.39: Admin order status screen
Purpose: Allow admin to manage order status
Table 3.43: Order status screen (Admin)
Image 3.40: Admin letter list screen
Purpose: Allow admin to manage email from customer
1 Item Move to email list
2 Item Move to send email screen
Table 3.44: Letter list screen (Admin)
Image 3.41: Admin add order screen
Purpose: Allow admin to create order
4 Textbox Input recipient's phone number
5 List box Choose payment method
10 Form Choose date and time
14 Text view Show total price
Table 3.45: Add order screen (Admin)
Image 3.42: Admin add product screen
Purpose: Allow admin to create products
7 Form Choose date and time to start
8 Form Choose date and time to end
Table 3.46: Add product screen (Admin)
Image 3.43: Admin add customer screen
Purpose: Allow admin to create customers
4 Textbox Input customer phone number
10 Textbox Input recipient's phone number
Table 3.47: Add customer screen (Admin)
Image 3.44: Admin add staff screen
Purpose: Allow admin to add staffs
4 Textbox Input staff phone number
Table 3.48: Add staff screen (Admin)
Image 3.45: Admin send email screen
Purpose: Allow admin to reply email
5 Form Input content of email
Table 3.49: Send email screen (Admin)
IMPLEMENTATION AND TESTING
INSTALLATION
- Visual studio code 1.57.1: used to build front-end and backend
- Xampp 8.0.7: used to build and run website
- Enterprise Architect 7.5: used to design UML diagram
4.1.2 The structure of the program and the implementation processes
Image 4.1: Structure of the program
- The “admin” folder is the place to write code and build the backend of admin
- The “database” folder is the place to store database file
- The “html” folder is the place to write code and build the front-end of admin and client
- The “model” folder is the place to design data model
- The “site” folder is the place to write code and build the back end of client
- The “upload” folder is the place to store images
The “vendor” folder is the place to store services and technologies
4.1.3.3 Create Login on Admin side
Image 4.4: Create login on Admin side 4.1.3.4 Create Dashboard on Admin side
Image 4.5: Create dashboard on Admin side
4.1.3.5 Create Add Order on Admin side
Image 4.6: Create add order on Admin side
4.1.3.6 Create List Orders on Admin side
Image 4.7: Create list order on Admin side
4.1.3.7 Create Add Product on Admin side
Image 4.8: Create add product on Admin side 4.1.3.8 Create List Products on Admin side
Image 4.9: Create list products on Admin side
4.1.3.9 Create List Comments on Admin side
Image 4.10: Create list comment on Admin side
4.1.3.10 Create List Images Product on Admin side
Image 4.11: Create list images product on Admin side
4.1.3.11 Create Add Customer on Admin side
Image 4.12: Create add customer on Admin side
4.1.3.12 Create List Customers on Admin side
Image 4.13: Create list customer on Admin side
4.1.3.13 Create Add Category on Admin side
Image 4.14: Create add category on Admin side
4.1.3.14 Create List Categories on Admin side
Image 4.15: Create list categories on Admin side
4.1.3.15 Create Add Brand on Admin side
Image 4.16: Create add brand on Admin side
4.1.3.16 Create List Brands on Admin side
Image 4.17: Create list brands on Admin side
4.1.3.17 Create List Shipping Fee on Admin side
Image 4.18: Create list shipping fee on Admin side
4.1.3.18 Create Add Staff on Admin side
Image 4.19: Create add staff on Admin side
4.1.3.19 Create List Staffs on Admin side
Image 4.20: Create list staffs on Admin side 4.1.3.20 Create Add Role on Admin side
Image 4.21: Create add role on Admin side
4.1.3.21 Create List Roles on Admin side
Image 4.22: Create list roles on Admin side
4.1.3.22 Create List Actions on Admin side
Image 4.23: Create list actions on Admin side
4.1.3.23 Create List Status Order on Admin side
Image 4.24: Create list status order on Admin side
4.1.3.24 Create Home page on website
Image 4.25: Create home page on website
4.1.3.25 Create Product page on website
Image 4.26: Create product page on website
4.1.3.26 Create Sale Product page on website
Image 4.27: Create sale product page on website
4.1.3.27 Create Return Policy page on website
Image 4.28: Create return policy page on website
4.1.3.28 Create Contact page on website
Image 4.29: Create Contact page on website 4.1.3.29 Create Register form on website
Image 4.30: Create register form on website
4.1.3.30 Create Login form on website
Image 4.31: Create login form on website
Image 4.32: Create cart on website 4.1.3.32 Create Payment page on website
Image 4.33: Create payment page on website
4.1.3.33 Create Manage Order page on website
Image 4.34: Create manage order page on website
4.1.3.34 Create Account Information page on website
Image 4.35: Create account information page on website
TESTING
In this project, we employ the black box testing method to evaluate the application's core functionalities This testing approach is advantageous as it effectively assesses the primary functions of the system The specific functions targeted for testing include:
- User: add product to cart, see product detail, search product, sort product, order product
- Admin: confirm order, cancel order, update product, search product, search customer, add category, update category, add staff, activate staff, disable staff, search staff
1 User Add product to cart
Test the response of website when user adds product to cart
Test the response of website when user sees product details
3 User Search product Test the response of website when user searches product
4 User Sort product Test the response of website when user sorts product
5 User Order product Test the response of website when user orders product
6 Admin Update product Test the response of website when admin updates product
7 Admin Search product Test the response of website when admin searches product
8 Admin Search customer Test the response of website when admin searches customer
9 Admin Add category Test the response of website when admin adds category
10 Admin Search category Test the response of website when admin searches category
11 Admin Add staff Test the response of website when admin adds staff
12 Admin Activate staff Test the response of website when admin activates staff
13 Admin Disable staff Test the response of website when admin disables staff
14 Admin Search staff Test the response of website when admin searches staff
4.2.2.1 Test result of add product to cart (User):
ID Description Test steps Test data Expected result
TC_US_01 Test the response of website when user adds product to cart
“Thêm vào giỏ hàng” button Click
“Kem làm trắng da 5 trong 1
“Kem làm sáng vùng da bikini
Two products added in cart and navigated to cart dialog
Table 4.2: Test result of add product to cart (User)
Image 4.36: Actual result of add product to cart (TC_US_01)
4.2.2.2 Test result of see product details (User):
ID Description Test steps Test data Expected result
TC_US_02 Test the response of website when user sees product details
“Kem làm trắng da 5 trong 1
Move to detail product page
Table 4.3: Test result of see product details (User)
Image 4.37: Actual result of see product details (TC_US_02)
4.2.2.3 Test result of search product (User):
ID Description Test steps Test data Expected result
TC_US_03 Test the response of website when user searches product
Input text in search Click
Products will be displayed on Product page
TC_US_04 Test the response of website when user searches product
Input text in search Click
Products will not be displayed on Product page
Table 4.4: Test result of search product (User)
Image 4.38: Actual result of search product (TC_US_03)
Image 4.39: Actual result of search product (TC_US_04)
4.2.2.4 Test result of sort product (User):
ID Description Test steps Test data Expected result
TC_US_05 Test the response of website when user sorts product
Products will be sorted from old to new
Table 4.5: Test search result of sort product (User)
Image 4.40: Actual result of sort product (TC_US_05)
4.2.2.5 Test result of order product (User):
ID Description Test steps Test data Expected result
TC_US_06 Test the response of website when user orders product
Input name, phone number, province, district, ward, address Choose payment method
Nguyen Hoang Danh Phone number:
0399432909 Province: Ho Chi Minh District: Thu Duc
The notification is: “Bạn đã hoàn thành đơn hàng Để tiếp tục bấm vào đây”
TC_US_07 Test the response of website when user orders product
Input name, phone number, province, district, ward, address Choose payment method
No data The notification is: “Vui lòng nhập tên của bạn”
Table 4.6: Test result of order product (User)
Image 4.41: Actual result of order product (TC_US_06)
Image 4.42: Actual result of order product (TC_US_07)
4.2.2.6 Test result of update product (Admin):
ID Description Test steps Test data Expected result
TC_AD_01 Test the response of website when admin updates product
“Sửa” button Input text Click
SKU: SKU1 Selected product will be updated
Table 4.7: Test result of update product (Admin)
Image 4.43: Actual result of update product (TC_AD_01)
4.2.2.7 Test result of search product (Admin):
ID Description Test steps Test data Expected result
TC_AD_02 Test the response of website when admin searches product
TC_AD_03 Test the response of website when admin searches product
Products will not be displayed
Table 4.8: Test result of search product (Admin)
Image 4.44: Actual result of search product (TC_AD_02)
Image 4.45: Actual result of search product (TC_AD_03)
4.2.2.8 Test result of search customer (Admin):
ID Description Test steps Test data Expected result
TC_AD_04 Test the response of website when admin searches customer
TC_AD_05 Test the response of website when admin searches customer
Customers will not be displayed
Table 4.9: Test result of search customer (Admin)
Image 4.46: Actual result of search customer (TC_AD_04)
Image 4.47: Actual result of search customer (TC_AD_05)
4.2.2.9 Test result of add category (Admin):
ID Description Test steps Test data Expected result
TC_AD_06 Test the response of website when admin adds category
“Sữa rửa mặt” will be displayed
Table 4.10: Test result of add category (Admin)
Image 4.48: Actual result of add category (TC_AD_06)
4.2.2.10 Test result of search category (Admin):
ID Description Test steps Test data Expected result
TC_AD_07 Test the response of website when admin searches category
TC_AD_08 Test the response of website when admin searches category
Products will not be displayed
Table 4.11: Test result of search category (Admin)
Image 4.49: Actual result of search category (TC_AD_07)
Image 4.50: Actual result of search category (TC_AD_08)
4.2.2.11 Test result of add staff (Admin):
Statu s TC_AD_09 Test the response of website when admin adds staff
Table 4.12: Test result of add staff (Admin)
Image 4.51: Actual result of add staff (TC_AD_09)
4.2.2.12 Test result of active staff (Admin):
ID Description Test steps Test data Expected result
TC_AD_10 Test the response of website when admin activates staff
Choose staff is disabled Click
Table 4.13: Test result of activate staff (Admin)
Image 4.52: Actual result of activate staff (TC_AD_10)
4.2.2.13 Test result of disable staff (Admin):
ID Description Test steps Test data Expected result
TC_AD_11 Test the response of website when admin disables staff
Choose staff is actived Click “Vô hiệu” button
This staff will be disabled
Table 4.14: Test result of disable staff (Admin)
Image 4.53: Actual result of disable staff (TC_AD_11)
4.2.2.14 Test result of search staff (Admin):
ID Description Test steps Test data Expected result
TC_AD_12 Test the response of website when admin searches staff
TC_AD_13 Test the response of website when admin searches staff
Staff will not be displayed
Table 4.15: Test result of search staff (Admin)
Image 4.54: Actual result of search staff (TC_AD_12)
Image 4.55: Actual result of search staff (TC_AD_13)
CONCLUSION
RESULT
Through the process of implementing the topic Developing a website for selling cosmetics, the group of students has completed all the main functions of the topic
In addition, the group also accumulated other knowledge and experiences:
- Design simple interface and easy to use.
- Know the process of building and designing website.
STRENGTHS
The website of the implementation team has the following advantages:
- The website has a friendly and easy-to-use interface that makes it easy for customers to view products and buy products
- The website has full basic functions for customers to use stably
- The buttons have icons that make it easy for customers to identify the functions of the buttons on the website.
DRAWBACKS
The team has the following limitations:
- Some functions operate as simple as: search, order, etc making the user less selective about the website features.
- Machine learning has not been applied to the best product recommendation feature and the most trending product today
- There is no function to enter a discount code to reduce the price of products that customers order
- The website interface is simple, not rich in content and style causing boredom for customers as well as less attractiveness to customers
The group has upcoming plans on the website:
- Apply machine learning into website so that the website offers the best and trending products today
- Develop some new features such as: game to accumulate point, hunt for discount codes, etc
- Update website interface more beautiful, richer and suitable for customer
- Create an AI Bot to message with customers to make it more convenient for the store to solve customer questions
1 Bootstrap (n.d.) Download Bootstrap Retrieved from Getbootstrap: https://getbootstrap.com/docs/3.3/
2 MDN Web Docs (n.d.) Document Retrieved from MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/Document
3 PHP (2021) PHP Documentation Retrieved from PHP: https://www.php.net/docs.php
4 phpMyAdmin (n.d.) Welcome to phpMyAdmin’s documentation! Retrieved from phpMyAdmin: https://docs.phpmyadmin.net/en/latest/
5 VNPAY (n.d.) Hướng dẫn tích hợp Cổng thanh toán VNPAY Retrieved from VNPAY: https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/