OVERVIEW
The reason for choosing the topic
The Online Shop serves as an effective platform that provides a variety of goods, benefiting both customers and vendors by increasing product sales Additionally, the COVID-19 pandemic has shifted consumer preferences towards online shopping, making home-based purchasing a crucial necessity.
With the "Online Shop" software that our team has built, customers can easily book any kind of goods, and the shop owner can also easily manage the sale.
Objectives
This e-commerce project enables us to leverage the latest technologies for our website development We utilized PHP and Perl to effectively create and maintain our online platform.
Our e-commerce project encompasses essential features for both customers and administrators, offering dedicated pages for each Customers can effortlessly search for products, access detailed information, place orders, and complete payments Meanwhile, administrators can efficiently manage products, users, and orders through the website Our goal is to create a user-friendly platform that streamlines the entire online purchasing process.
In this project, we aim to create an e-commerce website tailored for customers who prefer online shopping While platforms like Lazada, Tiki, and Shopee dominate the market, many vendors struggle to stand out amidst the competition Therefore, establishing individual websites for vendors proves to be a more effective solution for enhancing their visibility and competitiveness in the online marketplace.
Methodology
To develop our website effectively, we utilize PHP and Perl as our primary programming languages By applying our understanding of the MVC framework, we ensure a streamlined coding process For the design of both the frontend and backend, we leverage popular tools like draw.io and Enterprise Architect.
Scope
Our website streamlines the online purchasing process, allowing customers to complete their transactions in just a few simple steps Additionally, it offers an intuitive interface for administrators to efficiently manage the site Importantly, the code is designed to be clean and easily maintainable, facilitating the addition of new features as needed.
THEORETICAL BASIS
Overview of PHP
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open-source general-purpose scripting language that is especially suited for web development and can be embedded into HTML
PHP differs from client-side JavaScript in that it executes code on the server, producing HTML that is sent to the client As a result, clients receive the output of the script without any knowledge of the underlying code By configuring your web server to process all HTML files with PHP, you can effectively keep your code hidden from users, enhancing security and privacy.
PHP is used by prominent social networking sites such as Facebook and reputable organizations such as Harvard University, which makes PHP popular and enhances its reputation.[2]
PHP is one of the easiest and most popular programming languages for web development, thanks to its numerous advantages It is recognized as a highly efficient technology that streamlines the development process by offering a wide range of tools to assist developers.
Page | 17 process According to the Programming Language Index (PYPL), PHP is the world's fifth most used programming language
PHP is quicker than ever with the newest versions According to our current PHP benchmarks, PHP 7.X is significantly faster than PHP 5.6
Our experiments with WordPress and popular eCommerce plugins like WooCommerce and Easy Digital Downloads revealed that PHP 7.3 processed 2-3 times more requests per second compared to PHP 5.6 Furthermore, the recently released PHP 7.4 by Kinsta demonstrates even greater speed than its predecessor.
Figure 2 Image of PHP trend [3]
MySQL
MySQL is an open-source relational database management system (RDBMS) named after co-founder Michael Widenius's daughter, My, and the abbreviation for Structured Query Language, SQL This relational database organizes data into tables, allowing for relationships between different data types, which enhances data structure and organization.
SQL is a programming language essential for creating, modifying, and extracting data from relational databases while managing user access An RDBMS, such as MySQL, operates alongside an operating system to implement relational databases in computer storage, oversee user management, enable network access, and ensure database integrity through testing and backup creation.
Perl
Perl is a highly competent, feature-rich language with a development lasting over
30 years Perl runs from portable to mainframes on over 100 systems and is appropriate for both fast prototyping and large-scale development initiatives
XAMPP
XAMPP is a free and open-source web server solution stack developed by Apache Friends, designed to be cross-platform It primarily includes the Apache HTTP Server, MySQL, and interpreters for PHP and Perl scripts This makes XAMPP an ideal tool for developers, as it allows for easy transition from a local test server to a live web server, utilizing the same components commonly found in actual web server deployments.
Architectural design
Model-View-Controller (MVC) is a widely used software design pattern for developing user interfaces, which organizes program logic into three interconnected components This separation facilitates the distinction between the internal representation of information and how it is presented to and interacted with by users.
The model serves as the core element of the pattern, functioning as the application's dynamic data structure that operates independently of the user interface It is responsible for directly managing the data, logic, and rules that govern the application.
• View: Any representation of information such as a chart, diagram or table
Multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants
• Controller: Accepts input and converts it to commands for the model or view
2.5.2 Architectural design of business layer (back-end)
In this project, we leverage PHP for backend development, benefiting from WebStorm's comprehensive features enhanced with robust PHP and SQL database support The IDE streamlines routine tasks through seamless integration with Version Control Systems, remote deployment capabilities, and various tools such as Docker, Composer, and a REST Client, making it an efficient environment for developers.
Figure 5 Architectural design of business layer 2.5.3 Architectural design of the data presentation layer (front-end)
Personally, Visual Code is the greatest application for web-based developers
It is so small and the way it manages all files which support developers effectively routes category.PHP sales.PHP products.PHP users.PHP sales.PHP
Visual Studio Code offers robust support for PHP, allowing developers to execute code effortlessly within the IDE Additionally, it provides real-time updates during the development process, enhancing efficiency and productivity.
Figure 6 Architectural design of the data presentation layer
Object-oriented programming
Object-oriented programming (OOP) is a computer programming model that organizes software design around data, or objects, rather than functions and logic
An object can be defined as a data field that has unique attributes and behavior
Object-Oriented Programming (OOP) emphasizes the manipulation of objects over the underlying logic, making it ideal for large, complex, and frequently updated software applications.
The organization of an object-oriented program also makes the method beneficial to collaborative development, where projects are divided into groups
Products table Sales table Users table Details table Cart table Category table
Figure 7 Sample Template for Navbar [3]
ANALYSIS & DESIGN
Current status survey
Lazada, a leading e-commerce platform in Southeast Asia, was founded in 2012 by Maximilian Bittner with support from Rocket Internet Acquired by Alibaba Group in 2016, Lazada operates in multiple countries and has raised around US$647 million from notable investors, including Tesco, Temasek Holdings, and JPMorgan Chase.
Advantages: It includes a category bar on the right side of the website which lets customers easily access their product
Disadvantages: Due to an international website, sometimes, customers can access the English version of Lazada, while it should be the Vietnamese version
Tiki is a leading e-commerce platform in Vietnam, playing a crucial role in the country's online shopping development Founded by Tran Ngoc Thai Son and backed by JD.com, the second-largest e-commerce site in China, Tiki has attracted 30 million loyal users By focusing on the needs of local customers and enhancing its delivery management, Tiki has become the most popular shopping website in Vietnam.
The website offers significant advantages by being tailored specifically for Vietnamese users, incorporating popular local purchasing methods and aligning with their interests and hobbies.
Disadvantages: Source of products on Tiki.vn is not popular as Lazada or
Shopee Pte Ltd, a Singaporean multinational technology company under Sea Group, specializes in e-commerce Launched in 2015 in Singapore, Shopee has since expanded its operations to multiple countries, including Malaysia, Thailand, Taiwan, Indonesia, Vietnam, the Philippines, and Brazil.
Since its inception in 2020, Shopee has catered to users in Southeast and East Asia, along with South America, facilitating online buying and selling Its integration of mobile and social features has positioned Shopee as a leading player in the ecommerce landscape, earning recognition from Tech in Asia as one of the "5 disruptive ecommerce startups we saw in 2015" for its innovative technology and expansive reach.
Advantages: More products than Lazada.vn and Tiki.vn
Disadvantages: Fake products are quite popular on this e-commerce website
In this project, we develop essential features for an e-commerce website, allowing users to browse products and make purchases User orders are promptly updated on the server, and this version is designed for future updates to enhance functionality.
System description
In our system, we have two web applications, one for customers to conduct the purchasing process and another for the admin to manage the whole system
Products Management Systems are divided into many categories, which includes related products inside This will make the customer easily access their expected products
Customers will proceed to the Checkout Process after collecting their items, where they can complete their purchase using two payment options: Cash on Delivery (COD) and the PayPal Checkout System.
When the checkout process is completed, the users’ orders will be moved to the admin Sales Management Process
In the Sales Management Process, the admin will manage the status of the product, and customers can access their order’s status by using a notification system in their profile page
Besides that, admin can manage their users’ personal information and manage their products and categories by using Product Management System
The Dashboard serves as a centralized hub for displaying essential system information, allowing Admins to effortlessly monitor key metrics such as Total Sales, Number of Products, Number of Users, and Sales Today A standout feature of our system is the Monthly Sales Report, which provides valuable insights into sales performance over time.
Requirement capturing and modeling
3.3.1 Business functional requirements (user application)
No Function Type Constraint/Formula code
1 View category Search Display category in shop
Search Display full information of product
4 Search product Search Display search bar that user can use to find product
Search Display product selling in shop
6 Buy a product in the shop
Storage If an item is already in cart, display "already in cart"
Table 1 Business functional requirements 3.3.2 System functional requirements (user application)
1 Environment +Cross-platform (Web, Mobile)
+The database is hosted in the cloud.
2 Authentication +Every customer need to login for checkout
+Every customer need to login Facebook to chat and comment
Table 2 System functional requirements (shop) 3.3.3 Non-functional requirements (user application)
No Content Criteria Description Note
1 The application can be updated to meet user requirements
4 + User can run the app in any browser application
5 + UI component and source code can be reused for future development
Table 3 Non-functional requirements (user application) 3.3.4 Business functional requirements (admin application)
No Function Type Constrai nt/Formu la code
Table 4 Business functional requirement 3.3.5 System functional requirements (admin application)
1 Authentication Admin need to login to use the application
Table 5 System functional requirements (admin application) 3.3.6 Non-functional requirements
No Content Criteria Description Note
1 The application can be updated to meet user requirements
4 + User can run the app in any browser application
5 + UI component and source code can be reused for future development
Table 6 Non-functional requirements (admin application)
Requirement modeling
Figure 10 Use case of e-commerce website
Brief Description A guest of the System registers to the System
1 System displays the register form to the guest
2 Guest enters first name, last name, email, password, retype password and presses sign up button
3 System checks whether the guest information is in the correct form or not
4 Guests are authenticated and navigated to the project dashboard form
Connection Lost If step 2 of the basic flow fails:
1 User refreshes the page until user can edit information Pre-Conditions
Success Guest can open and see register page
Failure Lost connection or server die
Name View page for guest
Brief Description Guest can see product information
1 The guest press into the product
2 The system displays product details page
Connection Lost The system announces to the guest that the connection is lost Pre-Conditions
Success Guest can open page with plenty of product
Failure Lost connection or server die
Table 8 Guest View Page c) Search
Brief Description A guest can search for a product
1 System displays the search bar for guests
3 System checks whether the product information is in the correct form or not
4 The system receives form information and starts searching for the topic After checking, the system displays a list of products according to the information the guest provides
Connection Lost If step 2 of the basic flow fails:
1 User tries to refresh the page until product appear
2 Continue step 2 of the basic flow
Success Page displays product in search bar
Failure Lost connection or server die
Table 9 Guest Search d) View products details
Brief Description A guest can choose any product to view details information
1 System displays the page containing a list of products
2 Guest click any product they want
3 Guest is navigated into product details page
Connection Lost If step 2 of the basic flow fails:
The system displays a message telling the user to re- connect the Internet
Success Guest can open page which has details about product
Failure Lost connection or server die
Table 10 Guest View Product Details e) View Facebook’s comment
Brief Description A guest can choose any product to view comment
1 System displays the page containing a list of products
2 Guest click any product they want
3 Guest is navigated into product details page
Connection Lost If step 2 of the basic flow fails:
The system displays a message telling the user to re- connect the Internet
Success Guest can see the comment for product
Failure Lost connection or server die
Table 11 Guest View Facebook’s Comment f) Messenger Chat
Brief Description A guest can chat with admin
1 System displays chat button on the right bottom of the page
2 Guest click to chat icon and communicate with admin
Connection Lost If step 2 of the basic flow fails:
1 The system displays a message telling the user to re-connect the Internet
2 If the connection is normal, try to login with Facebook account to chat
Facebook login first User need to login Facebook account on browser
Table 12 Guest Chat g) Add product to Cart
Name Add Product to Cart
Brief Description Add a new product in cart management
1 Guest opens web service in browser
2 Click any product that guest want to buy
3 Click on “Add to Cart”
4 If added successfully, the information of products will be added and announce
“Item successfully added” If add failed, the information of products will not be added and announce “Item add failed”
Product already in Cart If step 3 of the basic flow fails:
1 System informs failed message “You already have this on your Cart”
Success Product is appeared in Cart Page
Failure Product is not appeared in Cart Page
Table 13 Add Product to Cart h) Edit product quantity
Name Edit product quantity on Cart
Brief Description Edit product quantity in cart management
1 Guest opens web service in browser
3 Click on product you want to change the quantity
4 If edit successfully, the quantity of product will change in the screen
If step 3 of the basic flow fails:
You might need to refresh the page because the server loads slowly
Success Product quantity is updated in Cart Page
Failure Product quantity is not updated in Cart Page
Table 14 Guest Edit Product Quantity i) Delete product from Cart
Name Delete product on Cart
Brief Description Delete product in cart management
1 Guest opens web service in browser
3 Click on remove button in any product
4 If delete successfully, the system notifies that product is deleted If user can not delete product, the system notifies that “Product already deleted”
Product deleted in Cart If step 3 of the basic flow fails:
You might need to refresh the page because the server loads slowly
Success Product quantity is updated in Cart Page
Failure Product quantity is not updated in Cart Page
Table 15 Guest Delete Product from Cart j) Most view today
Brief Description System display table which contains number of product that is most viewed
1 Guest opens web service in browser
2 System display number of products that is most viewed
Table 16 Guest Most View Today 3.4.2.2 Customer Module a) Login
Brief Description A customer of the System logs in to the System
1 System displays the login form to the user
2 Customer enters email and password and presses the login button
3 System checks whether the email and password are correct
4 Customer is authenticated and navigated to the project dashboard form
If step 2 of the basic flow fails:
1 System informs the authentication failure message to the customer
2 System recommends some methods to the customer to pass authentication
3 Continue step 2 of the basic flow
Success The customer is authenticated and the system displays a board form based on the user type
Failure The customer is unable to log in for one or more reasons Extension Points
Brief Description A customer of the System logs out of the System
1 Customers press the Account button
2 Customers choose the option Logout
3 System sends a notification to confirm
4 Customer chooses Yes, the systems log the customer out
If step 2 of the basic flow fails:
1 Customer is navigated to the page respecting the selected option
2 Customer is still in the system
Customer does not confirm logging out
If step 3 of the basic flow fails:
Customer is still in the system
Table 18 Customer Logout c) Update information
Name Customer updates customer information
Brief Description Change customer information in manage user information
1 Customer opens web service in browser
5 Chose any information of user that admin want to edit/change
7 If update successfully, the information of order will be updated and announce
“User successfully updated If updated failed, the information of customer will not be updated and announce “User information update failure”
Connection Lost If step 3 of the basic flow fails:
Success The admin can update user information successfully
Failure The admin is unable to update user information
Table 19 Customer Update Information d) View Page
Name View page for customer
Brief Description Customer can see product information
1 The guest press into the product
2 The system displays product details page
Connection Lost The system announces to the guest that the connection is lost Pre-Conditions
Success Guest can open page with plenty of product
Failure Lost connection or server die
Table 20 Customer View Page e) Search
Brief Description A customer can search for a product
1 System displays the search bar for guests
3 System checks whether the product information is in the correct form or not
4 The system receives form information and starts searching for the topic After checking, the system displays a list of products according to the information the guest provides
Connection Lost If step 2 of the basic flow fails:
1 User tries to refresh the page until product appear
2 Continue step 2 of the basic flow
Success Page displays product in search bar
Failure Lost connection or server die
Table 21 Customer Search f) View products details
Brief Description A customer can choose any product to view details information
1 System displays the page containing a list of products
2 Customer click any product they want
3 Customer is navigated into product details page
Connection Lost If step 2 of the basic flow fails:
The system displays a message telling the user to re- connect the Internet
Success Customer can open page which has details about product Failure Lost connection or server die
Table 22 Customer View Product Details g) View Facebook’s comment
Brief Description A customer can choose any product to view comment
1 System displays the page containing a list of products
2 Guest click any product they want
3 Guest is navigated into product details page
Connection Lost If step 2 of the basic flow fails:
The system displays a message telling the user to re- connect the Internet
Success Customer can see the comment for product
Failure Lost connection or server die
Table 23 View Facebook’s Comment h) Messenger Chat
Brief Description A customer can chat with admin
1 System displays chat button on the right bottom of the page
2 Guest click to chat icon and communicate with admin
Connection Lost If step 2 of the basic flow fails:
1 The system displays a message telling the user to re- connect the Internet
2 If the connection is normal, try to login with Facebook account to chat
Facebook login first User need to login Facebook account on browser
Table 24 Customer Message Chat i) Add product to Cart
Name Add Product to Cart
Brief Description Add a new product in cart management
1 Guest opens web service in browser
2 Click any product that guest want to buy
3 Click on “Add to Cart”
4 If added successfully, the information of products will be added and announce
“Item successfully added” If add failed, the information of products will not be added and announce “Item add failed”
Product already in Cart If step 3 of the basic flow fails:
System informs failed message “You already have this on your Cart”
Success Product is appeared in Cart Page
Failure Product is not appeared in Cart Page
Table 25 Customer Add Product to Cart j) Edit product quantity
Name Edit product quantity on Cart
Brief Description Edit product quantity in cart management
1 Customer opens web service in browser
3 Click on product you want to change the quantity
4 If edit successfully, the quantity of product will change in the screen
If step 3 of the basic flow fails:
Customer might need to refresh the page because the server loads slowly
Success Product quantity is updated in Cart Page
Failure Product quantity is not updated in Cart Page
Table 26 Customer Edit Product Quantity in Cart k) Delete product from Cart
Name Delete product on Cart
Brief Description Delete product in cart management
1 Guest opens web service in browser
3 Click on remove button in any product
4 If delete successfully, the system notifies that product is deleted If user can not delete product, the system notifies that “Product already deleted”
Product deleted in Cart If step 3 of the basic flow fails:
You might need to refresh the page because the server loads slowly
Success Product quantity is updated in Cart Page
Failure Product quantity is not updated in Cart Page
Table 27 Delete Product from Cart l) Checkout or Payment
Name Checkout product on Cart
Brief Description Customer make payment for list of products on Cart
Guest opens web service in browser
Click on checkout button or Paypal to make payment
Upon successful payment, the system confirms that the product is being processed and generates an order number If the payment fails, the user will receive a notification stating, "Your cart is empty, please check again."
Product deleted in Cart If step 3 of the basic flow fails:
You might need to refresh the page because the server loads slowly
Success System pops up customer make payment successful
Failure System pops up “Your Cart is Empty”
Table 28 Checkout and Payment m) Most view today
Brief Description System display table which contains number of products that are most viewed
3 Guest opens web service in browser
4 System display number of products that is most viewed
Table 29 Customer Most View Today 3.4.2.3 Admin Module a) Login
Brief Description An admin of the System logs in to the System
1 System displays the login form to the user
2 Admin enters email and password and presses the login button
3 System checks whether the email and password are correct
4 Admin is authenticated and navigated to the project dashboard form
If step 2 of the basic flow fails:
1 System informs the authentication failure message to the admin
2 System recommends some method to the admin to pass authentication
3 Continue step 2 of the basic flow
Success The admin is authenticated
Failure The admin is unable to log in for one or more reasons
Name Log out of Admin
Brief Description An admin of the System logs out of the System
2 admin choose the option Logout
3 System sends a notification to confirm
4 Admin chooses Yes, the systems log the user out
If step 2 of the basic flow fails:
1 Admin is navigated to the page respecting the selected option
Admin is still in the system
Admin does not confirm logging out
If step 3 of the basic flow fails:
Admin is still in the system
Table 31 Admin Logout c) Add Product
Brief Description Add a new product in product management
5 Admin opens web service in browser
8 Click on Product List and click on “New” button
9 Enter the name, price, description, chose photo and category
11 If added successfully, the information of products will be added and announce
“Item successfully added If add failed, the information of products will not be added and announce “Item add failed”
Connection Lost If step 3 of the basic flow fails:
Success The admin can add product successfully
Failure The admin is unable to add product
Table 32 Admin Add Product d) Edit product
Brief Description Edit a product in product management
1 Admin opens web service in browser
4 Click on Product List and click on any products you want to edit
5 Enter the name, price, description, chose photo and category
7 If edit successfully, the information of products will be edited and announce “Item successfully edited If edit failed, the information of products will not be edited and announce “Item edited failed”
Connection Lost If step 3 of the basic flow fails:
Success The admin can edit product successfully
Failure The admin is unable to edit product
Brief Description Delete a product in product management
1 Admin opens web service in browser
5 Click on any products you want to delete
6 If delete successfully, the information of products will be deleted and announce
“Item successfully deleted If deleted failed, the information of products will not be deleted and announce “Item deleted failed”
Connection Lost If step 3 of the basic flow fails:
Success The admin can delete product successfully
Failure The admin is unable to delete product
Table 34 Admin Delete Product f) Add Category
Brief Description Add a new category in category management
1 Admin opens web service in browser
4 Click on category and “new” button
5 Enter the name, slug of the category
7 If added successfully, the information of category will be added and announce
“Category successfully added If add failed, the information of category will not be added and announce “Category add failed”
Connection Lost If step 3 of the basic flow fails:
Success The admin can add category successfully
Failure The admin is unable to add category
Table 35 Admin Add Category g) Edit Category
Brief Description Edit a category in category management
1 Admin opens web service in browser
4 Click on category and chose any category you want to edit
5 Enter the name of the category
7 If edit successfully, the information of category will be added and announce
“Category successfully edited If edit failed, the information of category will not be edited and announce “Category edit failed”
Connection Lost If step 3 of the basic flow fails:
Success The admin can edit category successfully
Failure The admin is unable to edit category
Table 36 Admin Edit Category h) Delete Category
Brief Description Delete a category in category management
1 Admin opens web service in browser
4 Click on category and chose any category you want to delete
6 If delete successfully, the information of category will be deleted and announce
“Category successfully deleted If delete failed, the information of category will not be deleted and announce “Category delete failed”
Connection Lost If step 3 of the basic flow fails:
Success The admin can delete category successfully
Failure The admin is unable to delete category
Table 37 Admin Delete Category i) Edit order
Brief Description Edit an order in sale management
1 Admin opens web service in browser
4 On status column click edit to change the status of the order
6 If edit successfully, the information of order will be added and announce
“Order successfully edited If edit failed, the information of order will not be edited and announce “Order edit failed”
Connection Lost If step 3 of the basic flow fails:
Success The admin can edit order successfully
Failure The admin is unable to order category
Table 38 Admin Edit Order j) Change Customer Information
Name Admin change customer information
Brief Description Change customer information in manage user information
1 Admin opens web service in browser
5 Chose any information of user that admin want to edit/change
7 If update successfully, the information of order will be updated and announce
“User successfully updated If updated failed, the information of customer will not be updated and announce “User information update failure”
Connection Lost If step 3 of the basic flow fails:
Success The admin can update user information successfully
Failure The admin is unable to update user information
Table 39 Admin Change Customer Information k) View total sale
Brief Description Admin can view the total sale through the chart
1 Admin opens web service in browser
3 The system displays the chart which contains the total sale of the month
Admin need to login Admin need to login successful
Table 40 Admin View Total Sale l) Print
Brief Description Admin can print the total sale through the chart
1 Admin opens web service in browser
3 The system displays the chart
4 Admin click on “Print” button
5 If print works successfully, the system will open a print page for the admin to print total sales
Admin need to login Admin need to login successful
Success Admin can print the total sales for any month
Failure The time for printing is not exist
Figure 15 Admin - Products Management f) Admin - Categories Management
Figure 16 Admin - Categories Management g) Admin - Sales Management
Figure 26 Customer - Search r) Customer - Product
Database design
Figure 32 Customer Most View 3.5.1 Details for Sales
No Attribute Type Primary Note
Table 42 Demonstrate for Sales 3.5.2 Details for Products
No Attribute Type Primary Note
Table 43 Demonstrate for Products 3.5.3 Details for Cart
No Attribute Type Primary Note
Table 44 Demonstrate for Cart 3.5.4 Details for Details
No Attribute Type Primary Note
Table 45 Demonstrate for Details 3.5.5 Details for Category
No Attribute Type Primary Note
Table 46 Demonstrate for Details 3.5.6 Details for Users
No Attribute Type Primary Note
Class diagram
UI Design for the website
No Operation Meaning Related operations
1 Button Dashboard Go to Dashboard page
2 Button Sales Go to Sales Page
3 Button Users Go to Users Page
4 Button Products Go to Products-related
5 Button Total Sales Display Total Sales
Display number of products in database
Display number of users in database
8 Button Sales Today Display Sales Daily
Table 48 Admin Homepage Table 3.7.3.2 Admin Sales Management Page
No Operation Meaning Related operations
1 Button Print Print Sales History
2 Button View View Sales Details
3 Button Edit Edit_Status_Form Edit Status of Sales
Table 49 Admin Sales Management Page Table
Figure 36 Edit_Status_Form 3.7.3.3 Admin Users Management Page
Figure 37 Admin Users Management Page
No Operation Meaning Related operations
1 Button New Create a new user
3 Button Cart Cart_Form Go to Cart Form
4 Button Edit Edit_User_Form Edit user details
Table 50 Admin Users Management Page Table
Figure 38 Edit_User_Form 3.7.3.4 Admin Cart Management Page
Figure 39 Admin Category Management Page
No Operation Meaning Related operations
1 Button New Add_New_Product
2 Button Users Go to User Form
Table 51 Admin Category Management Page Table
Figure 40 Add_New_Product_Form 3.7.3.5 Admin Category Management Page
Figure 41 Admin Category Management Page
No Operation Meaning Related operations
1 Button New Add_New_Categor y_Form
2 Button Edit Edit_Category_For m
Table 52 Admin Category Management Page Table
Figure 43 Add_New_Category_Form 3.7.3.6 Admin Product Management Page
Figure 44 Admin Products Management Page
No Operation Meaning Related operations
1 Button New Add_New_Product
2 Button View View_Product_For m
3 Button Edit Edit_Product_For m
Table 53 Admin Products Management Page Table
Figure 45 Add_New_Product_Form
Figure 47 Admin Products Management Page 3.7.2 User interface design
No Operation Meaning Related operations
1 Button Home Go to Homepage
2 Button About us Go to About us Page
3 Button Contact us Go to Contact Page
4 Button Category Go to Category Page
5 Button Product Go to Product Page
6 Button Login Go to Login Page
7 Button Signup Go to Signup Page
Table 54 Admin Customer Index Page Table 3.7.3.8 Customer Product Page
No Operation Meaning Related operations
1 Button - Minus the number of products
2 Button + Add the number of products
Button Add to Cart Add product(s) into cart
Table 55 Admin Customer Product Page Table 3.7.3.9 Customer Login Page
No Operation Meaning Related operations
1 InputText Email Enter email for validation purpose
2 InputText Password Enter password for validation purpose
3 Button Continue Login with default account
Table 56 Customer Login Page Table 3.7.3.10 Customer Signup Page
No Operation Meaning Related operations
1 InputText Firstname Enter firstname for signin purpose
2 InputText Lastname Enter lastname for signin purpose
3 InputText Email Enter email for signin purpose
4 InputText Password Enter password for sign up purpose
Enter retype password for sign up purpose
6 Button Sign up Complete sign up process
8 Link Home Go to Homepage
Table 57 Customer Login Page Table 3.7.3.11 Customer About us Page
Figure 52 Customer About us Page
No Operation Meaning Related operations
1 Button Contact Go to our Facebook personal page
Table 58 Customer About us Page Table 3.7.3.12 Customer Contact Page
No Operation Meaning Related operations
1 InputText Username Enter username for contact purpose
2 InputText Email Enter email for contact purpose
3 InputText Subject Enter subject for contact purpose
Enter message for contact purpose
5 Button Submit Complete the contact process
Table 59 Customer Contact Page Table 3.7.3.13 Customer Category Page
No Operation Meaning Related operations
1 Button Product Go to product page
Table 60 Customer Category Page Table 3.7.3.14 Customer Cart Page
No Operation Meaning Related operations
2 Button - Minus the number of product
3 Button + Add the number of product
Edit the number of product
Go to Paypal checkout Page
Table 61 Customer Cart Page Table
IMPLEMENTATION & TESTING
Frontend
In this step, we use Visual Code as the main application for the whole development process
To install Visual Code, please visit: https://code.visualstudio.com/
4.1.2 Create an PHP and XAMPP application
We selected PHP as the framework for our system development due to its ease of use and the convenience it offers Additionally, our team members possess valuable experience in developing applications using this framework.
In the project, we use the latest version of the PHP In fact, in this version, some features have been updated, which makes some difficulties in the development
The entire project is organized within a single folder, facilitating management and updates through XAMPP and PHP This streamlined structure simplifies the maintenance process and enhances the efficiency of implementing new updates.
To install XAMPP, please visit: https://www.apachefriends.org/download.html
Figure 57 Admin Frontend Components List
Figure 58 Customer Frontend Components List
Index Login Logout Signup Password_forg et Profile Product Category Aboutus Cart Transaction
Backend
PHPStorm is an excellent choice for backend development, offering a convenient combination of editor functions and an integrated IDE Specifically designed for PHP-based websites, this application includes unique features tailored for PHP development, making it a powerful tool for developers.
To install PHPstorm Please visit: https://www.jetbrains.com/PHPstorm/
The owner company offers a free code for education-based projects So, use your educational website and receive a free gift
BackendProducts Sales Users Details Cart Category
Token & service
Manage users efficiently with our eCommerce platform Access the user management section at http://onlineshop24h.live/ecommerce/admin/users.PHP to view all users To add new users, visit http://onlineshop24h.live/ecommerce/admin/users-add.PHP For editing user details, navigate to http://onlineshop24h.live/ecommerce/admin/users-edit.PHP If you need to remove users, you can do so at http://onlineshop24h.live/ecommerce/admin/users-delete.PHP Additionally, update user photos by visiting http://onlineshop24h.live/ecommerce/admin/users-photo.PHP.
Product http://onlineshop24h.live/ecommerce/a dmin/products.PHP
Products http://onlineshop24h.live/ecommerce/a dmin/products-all.PHP
To manage your online store effectively, you can easily add, edit, or delete products through the admin panel To add new products, visit [Add Products](http://onlineshop24h.live/ecommerce/admin/products-add.PHP) For editing existing products, go to [Edit Products](http://onlineshop24h.live/ecommerce/admin/products-edit.PHP) If you need to remove products from your inventory, use the [Delete Products](http://onlineshop24h.live/ecommerce/admin/products-delete.PHP) section Streamlining product management is essential for a successful e-commerce experience.
Photo http://onlineshop24h.live/ecommerce/a dmin/products-photo.PHP
Load Category http://onlineshop24h.live/ecommerce/a dmin/category.PHP
To manage categories effectively in your online store, you can easily add, edit, delete, and fetch categories using the following links: Add Category at http://onlineshop24h.live/ecommerce/admin/category-add.PHP, Edit Category at http://onlineshop24h.live/ecommerce/admin/category-edit.PHP, Delete Category at http://onlineshop24h.live/ecommerce/admin/category-delete.PHP, and Fetch Category at http://onlineshop24h.live/ecommerce/admin/category-fetch.PHP.
Manage your sales efficiently with our online platform Access the Sales dashboard at [Sales Management](http://onlineshop24h.live/ecommerce/admin/sales.PHP) to view all transactions To add new sales, visit [Add Sales](http://onlineshop24h.live/ecommerce/admin/sales-add.PHP) For editing existing sales records, go to [Edit Sales](http://onlineshop24h.live/ecommerce/admin/sales-edit.PHP) Finally, you can print sales reports easily by navigating to [Print Sales](http://onlineshop24h.live/ecommerce/admin/sales-print.PHP).
The Cart.PHP functionality allows users to manage their shopping carts effectively on the online store You can load your cart using the link provided, add items with ease, edit existing entries, or delete unwanted products For seamless shopping experiences, visit the respective URLs: load your cart at http://onlineshop24h.live/ecommerce/admin/cart.PHP, add items at http://onlineshop24h.live/ecommerce/admin/cart-add.PHP, edit your cart at http://onlineshop24h.live/ecommerce/admin/cart-edit.PHP, and delete items at http://onlineshop24h.live/ecommerce/admin/cart-delete.PHP.
Table 62 Admin Tokens and Services 4.3.2 User
Index.PHP Load Homepage http://onlineshop24h.live/ecommerce/
Login.PHP Login http://onlineshop24h.live/ecommerce/
Logout.PHP Logout http://onlineshop24h.live/ecommerce/
Signup.PHP Sign Up http://onlineshop24h.live/ecommerce/
Forget Password http://onlineshop24h.live/ecommerce/
Profile.PHP Load Profile http://onlineshop24h.live/ecommerce/
/profile.PHP Edit Profile http://onlineshop24h.live/ecommerce/
Product.PHP Load Product http://onlineshop24h.live/ecommerce/
Load category http://onlineshop24h.live/ecommerce/
Contact.PHP Load Contact http://onlineshop24h.live/ecommerce/
Aboutus.PHP Load About Us http://onlineshop24h.live/ecommerce/
Cart.PHP Load Cart http://onlineshop24h.live/ecommerce/
/cart-view.PHP Add Cart http://onlineshop24h.live/ecommerce/
/cart-add.PHP Update Cart http://onlineshop24h.live/ecommerce/
Delete Cart http://onlineshop24h.live/ecommerce/
/cart-delete.PHP Load Cart Details http://onlineshop24h.live/ecommerce/
/cart-details.PHP Load Cart Total http://onlineshop24h.live/ecommerce/
Make transaction http://onlineshop24h.live/ecommerce/
Test plan
The project utilizes Black-box Testing Method to evaluate the primary functions of the application A key advantage of Black-box Testing is its adaptability for assessing extensive code and core system functions Two specific functions are examined during this testing process.
• Customer: Sign in, Sign up
Test scenarios
1 Customer Sign in Test the application’s response when a user fills in sign in form and click “sign in” button
2 Customer Sign up Test the application’s response when a user fills in sign up form and click “sign up” button
3 Admin Add a product Test the application’s response when admin fills in “Add New Product Form” and click “Submit”
4 Admin Print sale bill Test the application’s response when the admin clicks “print” button in sales page
Test results
4.6.1 Test result of Customer Sign In function
ID Description Test steps Test data Expected result
TC_SI_01 Test response of application when the customer enters correct authentication information
Enter email Enter password Click
Email: test2@gmail.com Password password
User is logged in the application and navigate to index screen which account is login in
TC_SI_02 Test response of application when the customer enters incorrect authentication information
Enter email Enter password Click
Email: test2@gmail.com Password
An error message appears and says
TC_SI_03 Test response of application when the user leaves all inputs empty and click
An error message appears and says “Please fill out this field”
Table 65 Test result of Customer Sign In function
4.6.2 Test result of Customer Sign up function
TC_SU_01 Test response of application when the user signs up a new account
Enter all of the related data
First name: Vu Last name: Tuan Anh Email: test2@gmail.com Password: 1234578 Retype password:
Add product completely, the data is saved into database, and waiting screen is displayed
TC_SU_02 Test response of application when the user signs up a new account without enter name
Enter all of the related data with wrong retype password
First name: Vu Last name: Tuan Anh Email: test3@gmail.com Password: 1234578 Retype password:
An error message appears and says
“Please fill out this field”
TC_SU_03 Test response of application
An error message appears and
Page | 116 when the user signs up a new account without enter anything
Table 66 Test scenarios of of Customer Sign up function
4.6.3 Test result of Admin Add a Product function
TC_AP_01 Test response of application when the admin enters a new product correctly
Enter all of the related data
Category: Phones Price: 1299 Photo: galaxy_note_20_ultra.png Description: This is description
Add product completely, and the data is saved into database
TC_AP_02 Test response of application when the admin enters a new product without its name
Enter all of the related data without name
Category: Phones Price: 1299 Photo: galaxy_note_20_ultra.png Description: This is description
An error message appears and says
“Please fill out this field”
TC_AP_03 Test response of
Page | 118 application when the admin enters a new product without enter anything any data appears and says
“Please fill out this field”
Table 67 Test scenarios of Admin Add a Product function
4.6.4 Test result of Admin Add a Product function
ID Description Test steps Test data Expected result
TC_PSB_01 Test return correct of application when the admin enters correct date time information
Enter email Enter password Click
System open print application and user can see the date is correct and data is displayed correctly
Test return wrong of application when the admin enters wrong date time information
Enter email Enter password Click
System open print application and user can see the date is correct and data is displayed in empty
Table 68 Test scenarios of Admin Print sale bill
SUMMARY
Achievements
• How to design the UX/UI of a website
• Learn about the latest technologies, such as PHP and Perl
• How to work as a group, and contribute to a successful teamwork
• Use Microsoft Project, Draw.io and Enterprise Architect to make the whole team process
• Apply some WFH tools to work effectively during the Covid-19 pandemic
• Admin module allows the shop owner to manage categories, manage products, users, manage orders and conduct various statistics
• User module allows the user to view, search products, manage shopping carts, perform other online checkout, and view their own order history.
Strengths
There are a lot of advantages in the process of building this website
• The website supplies users with basic features of the business process
• UI/UX is user-friendly
• Users can log in with a Google account
• The website integrates Paypal e-wallet
• Our website goes online on the real host.
Drawbacks
On the other hand, out system still has some drawbacks:
• The website still does not support promotion campaigns
• The performance of the website is not fully evaluated.
Difficulties in the process
There are 3 main things that we have to solve:
• The time for the project is limited
• The technologies are quite new to us, so we had to spend a lot of time learning and fixing some bugs
• Due to the fact that we do not understand enough about the DevOps process, we cannot configure the Server to use the email function.
Improvement & Future Developments
These are some things which we can improve in the near future:
In the future, establishing strong connections with customers will be crucial To enhance website traffic and drive profitability, we plan to leverage tools such as SEO, backlinks, and artificial intelligence (AI).
UI and UX play a crucial role in captivating customers when they visit a website To enhance user engagement and satisfaction, it is essential to refine the website's template and design.
• Due to the development of e-wallets, we might need to include more e-wallets to enable users to shop more easily and conveniently
[1] https://vi.wikipedia.org/wiki/T%E1%BA%ADp_tin:PHP-logo.svg.(Viewed on
[2] https://www.php.net/manual/en/history.php.php (Viewed on 15/6/2021)
[3] https://kinsta.com/blog/is-php-dead/ (Viewed on 15/6/2021)
[4]https://websolutions.com.vn/perl-la-gi-gioi-thieu-ve-ngon-ngu-lap-trinh-perl/ (Viewed on 15/6/2021)
[5] https://vi.wikipedia.org/wiki/T%E1%BA%ADp_tin:Xampp_logo.svg (Viewed on 15/6/2021)
[6] https://bootstrapious.com/p/obaju-e-commerce-template (Viewed on 15/6/2021)
[7] https://www.lazada.vn/ (Viewed on 25/12/2021)
[8] https://tiki.vn/ (Viewed on 25/12/2021)
[9] https://fontawesome.com/v4.7.0/ (Viewed on 15/4/2021)
[10] https://www.PHPmyadmin.net/docs/ (Viewed on 13/3/2021)
[11] https://www.perl.org/ (Viewed on 13/5/2021)
[12] https://www.PHP.net/ (Viewed on 14/5/2021)
[13] https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat- plugin/ (Viewed on 15/6/2021)
[14] https://www.tutorialspoint.com/PHP/PHP_sending_emails.htm#:~:text=PHP%20makes% 20use%20of%20mail,%2C%20message%2C%20headers%2C%20parameters%20)%3B\ (Viewed on 15/6/2021)
[15] https://www.PHPweb.org/website-templates/e-commerce-and-shopping.html# (Viewed on 15/6/2021)
LINK OF OUR SOURCE CODE
Project: https://github.com/VuThien3010/final_project
Demo: http://onlineshop24h.live/ecommerce/ (Viewed on 15/7/2021)