Building an e commerce website for selling clothes

Nguyễn Anh Đức Student ID: 19110118 Project’s name: BUILDING AN E-COMMERCE WEBSITE FOR SELLING CLOTHES Implementation content: Theory: • Programming Language PHP • Laravel • Bootstrap •

INTRODUCTION

Reason for choosing the topic

The trend of electronic shopping, usually referred to as online shopping, is becoming more and more common thanks to the development of technology and the internet Online shopping has become increasingly widespread and integrated into people's lives today Online shopping has become more and more common in modern society thanks to the rising use of technology to meet customer needs and the availability of a wide range of goods

Understanding and recognizing this need, I made the decision to create a clothes- selling website to make it simpler for individuals to shop as the COVID-19 disease spreads The website will satisfy the needs of customers who want to shop but don't have the time to visit a real store to select the clothes they want to purchase This website also encourages customers to take their time and visit a genuine store to select the right clothes.

Project goals

- Build the Admin Management Website

- Learn the theoretical foundation and apply it to the topic:

- Analyze the requirements and realize the system

- Project object: The study's focal point is a website that enables users to search and buy a variety of fashion items, mainly clothing, make online transactions when making purchases and interact with users with the store website The website will be created using Laravel Framework

- Project scope: "Building an e-commerce website for selling clothes" is the topic's project scope.

Project mission

- Describe the theoretical underpinnings of the project

- Examine the state of the current system

- Make a website and an app that adheres to the rules of online trading

- The website's and application's features are divided into separate modules for easy maintenance.

Practical scientific significance

The website and application that was created took the advancements in information technology and applied them to the commercial world

In addition to offering solutions to everyone's issues, this software and website also gives customers an efficient way to communicate Customers only need to stay at home and take a few easy steps to get what they want.

THEORY FOUNDATION

Bootstrap

Bootstrap is a free and open-source web development framework It’s designed to ease the web development process of responsive, mobile-first websites by providing a collection of syntax for template designs

In other words, Bootstrap helps web developers build websites faster as they don’t need to worry about basic commands and functions It consists of HTML, CSS, and JS- based scripts for various web design-related functions and components

Here are some of the essential usages of Bootstrap listed:

• Browser supportive: Every browser supports this Bootstrap Framework

• Mobile-first approach: The Bootstrap framework has a preexisting mobile-first style all through the library and not as separate files

• Simple and easy to start: If you know HTML and CSS, you can quickly start working with Bootstrap, and its documentation is available on the official site

• Responsive design and looks: Web pages designed using the Bootstrap framework have responsive CSS that can adjust to the screen size of large desktops, notebooks, tablets, and mobiles

• Easy customization: It provides some built-in components and functionalities that are easy to customize

• Clean interface or Developers: The bootstrap framework provides a new and consistent result for building user interfaces on web pages

• It is an open-source framework with web-based customization

Apply Bootstrap to build our project?

Our group has applied Bootstrap to do the following things:

• User Front-End: Design the user interface for the user page so that they can manipulate and interact with it

• Admin Front-End: Design the management interface for the admin page so that they can manipulate and manage the website

Laravel

Laravel is an open-source PHP framework, which is robust and easy to understand It follows a model-view-controller design pattern Laravel reuses the existing components of different frameworks which helps in creating a web application The web application thus designed is more structured and pragmatic

Laravel offers a rich set of functionalities which incorporates the basic features of PHP frameworks like CodeIgniter, Yii and other programming languages like Ruby on Rails Laravel has a very rich set of features which will boost the speed of web development

If you are familiar with Core PHP and Advanced PHP, Laravel will make your task easier It saves a lot time if you are planning to develop a website from scratch Moreover, a website built in Laravel is secure and prevents several web attacks

Laravel offers you the following advantages when you are designing a web application based on it:

• The web application becomes more scalable, owing to the Laravel framework

• Considerable time is saved in designing the web application, since Laravel reuses the components from other frameworks in developing web application

• It includes namespaces and interfaces, thus helping to organize and manage resources

Composer is a tool which includes all the dependencies and libraries It allows a user to create a project with respect to the mentioned framework (for example, those used in Laravel installation) Third party libraries can be installed easily with the help of the composer

All the dependencies are noted in composer.json file which is placed in the source folder

The command line interface used in Laravel is called Artisan It includes a set of commands which assists in building a web application These commands are incorporated from Symphony framework, resulting in add-on features in Laravel 5.1 (latest version of Laravel)

Apply Laravel to build our project?

Our group has applied Laravel to do the following things:

• Composer Tool: Use it to download and manage all the dependencies and libraries of websites In addition, our group also uses it to set up the initial project settings with just one command line on Terminal or Command Line

• Artisan: Use it to manipulate and interact on Terminal or Command Line Our group can create Controllers, set relationships for Models, Services, Repositories, Interfaces and launch websites with just one command line

• Use variables and namespaces to pass through the view page and manipulate the view page.

PhpStorm and Programing Language PHP

What Is PhpStorm and PHP?

PhpStorm is an innovative, Java-based integrated development environment (IDE) engineered by JetBrains for PHP and web developers It supports PHP 5.3/5.4/5.5/5.6/7.0/7.1/7.2/8.0, provides on-the-fly error prevention, best auto-completion and code refactoring, zero-configuration debugging, and an extended HTML, CSS and JavaScript editor The IDE provides smart code completion, syntax highlighting, extended code formatting configuration, on-the-fly error checking, code folding, supports language

19 mixtures and more Automated refactoring treats your code with care, helping to make global project settings easy and safe

There are many compelling features of PhpStorm that were not mentioned above Here is a small list of them

Many PHP frameworks are supported

PHP language is an acronym for Personal Home Page (now Hypertext Preprocessor) This term refers to a series of scripting or scripting languages, suitable for development for server-based applications

When writing software in PHP language, the command string will be processed on the server to generate HTML code on the client And based on that, the applications on your website will work easily

Why use PhpStorm and PHP?

PhpStorm is a combination of WebStorm, PHP, and DB/SQL Thus, all the features in WebStorm are included in PhpStorm, with full-fledged support for PHP and Databases/SQL support added on top

Along with all the features, PhpStorm is a popular IDE, meaning there is a large community forum where you can share your work, see others’ code and get help from professionals in case you run into an issue

PhpStorm also supports many plugins that can be found in the official Plugin Repository Here you will be able to find support for different programming languages such as Rust & Bash, and plenty of themes and custom icons you could install to change the way the application looks to fit your preferences There are also many other useful plugins such as Key Promoter X which allows you to learn essential PhpStorm shortcuts while you are coding, and Sting Manipulation which allows for case switching, sorting, filtering, incrementing, aligning to columns, and much more

People often use PHP in building and developing web applications that run on the server PHP code can be embedded into an HTML page using a pair of PHP tags

Thanks to that, the website you develop easily connects to other websites on the internet

PHP is also a free and open-source programming language PHP is compatible with various platforms like Windows, MacOS and Linux, etc

Most of the websites you are using every day for study, work and entertainment use the PHP programming language such as Facebook, Pinterest, Wikipedia, WordPress, etc

The PHP programming language is considered easy to read Therefore, it is easy to understand why it has become the preferred language of many young people to learn before starting a career

Apply PhpStorm and PHP to build our project?

Our group has applied PhpStorm and PHP to do the following things:

• PhpStorm: Use it as the main IDE for building our project

• PHP: Use it as the main programing language to design and write for our project.

MySQL

MySQL is a relational database management system based on SQL – Structured Query Language The application is used for a wide range of purposes, including data warehousing, e-commerce, and logging applications

The most common use for mySQL however, is for the purpose of a web database It can be used to store anything from a single record of information to an entire inventory of available products for an online store

In association with a scripting language such as PHP or Perl (both offered on our hosting accounts) it is possible to create websites which will interact in real-time with a mySQL database to rapidly display categorised and searchable information to a website user

• Web and Data Warehouse Strengths

• Open Source Freedom and 24 x 7 Support

• Lowest Total Cost of Ownership

Apply MySQL to build our project?

Our group has applied MySQL to do the following things:

• Use MySQL as the main database for building our project so that our group can manage and manipulate with data of website

• Combine with PHP and Laravel Framework to make logical queries and pass a variable on Laravel

Machine Learning

Machine Learning (ML) or machine learning is a branch of artificial intelligence (AI), it is a field of study that allows computers to have the ability to improve themselves based on training data or training data based on experience (what has been learned) Machine learning can predict or make decisions on its own without being specifically programmed

Machine Learning problems are often divided into two categories: prediction and classification Predictive problems such as predicting house prices, car prices Classification problems such as handwriting recognition, object recognition

We use Machine Learning because:

• Man-made artificial intelligence application

Apply Machine Learning to build our project?

Our group has applied Machine Learning to do the following things:

• Proposed Methodology (Recommendation Engine): In our project, we propose a model that uses Convolutional Neural Network and the Nearest neighbour backed recommender As shown in the figure Initially, the neural networks are trained and then an inventory is selected for generating recommendations and a database is created for the items in inventory The nearest neighbour’s algorithm is used to find the most relevant products based on the input image and recommendations are generated

• Application Flow-Chart: To generate recommendations, our proposed approach uses Sklearn Nearest neighbours This allows us to find the nearest neighbours for the given input image The similarity measure used in this Project is the Cosine Similarity measure The top 6 recommendations are extracted from the database and their images are displayed

• Convolutional Neural Networks (CNN): CNN is a specialized neural network designed for visual data, such as images & videos But CNNs also work well for non-image data (especially in NLP & text classification) Its concept is similar to that of a vanilla neural network (multilayer perceptron) – It follows the same general principle of forwarding & backward propagation Once the data is pre-processed, the neural networks are trained, utilizing transfer learning from ResNet50 More additional layers are added in the last layers that replace the architecture and weights from ResNet50 in order to fine-tune the network model to serve the current issue The figure shows the ResNet50 architecture

• Built With/Dependencies: OpenCV, Tensorflow, Tqdm, streamlit, pandas, Pillow, scikit-learn, opencv-python, flask and cloudinary

REQUIREMENT CAPTURING AND MODELING

Presentation on topic

Store information about products sold on the website, personal information of customers… Customers can log in and proceed to purchase our products If customers don't have time, they can still make purchases without logging in Site managers can add, remove, and edit product information on their own site on a separate site

• Customers log into the website (may not)

• Customers search for products that fit their needs

• After finding the product, payment will be made on the system

• The system will send email notification of successful order

Software survey

Table 1 Advantages and disadvantages of Shopee

Advantages and Disadvantages of Shopee

Advantages ✔ Fast access speed, making it easy to use

✔ Beautiful interface, easy to see

✔ Support online with the connection of online chat box from the buyer to seller

✔ Location of functions that are simple to use and implement

✔ In the process of clicking to examine product information, there is reasonable navigation

✔ The webpage completely introduces the website's material (introduction, policy, cooperation-affiliation)

✔ Compatible with many types of screens such as laptops, tablets, smartphones

❖ Amazon website: https://www.amazon.com/

Advantages and disadvantages of Amazon

✔ The interface is simple but suitable and comfortable

✔ Location of functions that are easy to access, easy to implement

✔ Reasonable navigation in the process of clicking to view product details

✔ The website fully introduces the information of the website (introduction, policy, cooperation-affiliation)

✔ Compatible with many types of screens such as laptops, tablets, smartphones

Disadvantages - Only accept paypal and master card as payment method

Table 2 Advantages and Disadvantages of Amazon

❖ Alibaba website: https://www.alibaba.com/

Advantages and Disadvantages of Alibaba

Advantages ✔ Have a list of frequently asked Questions

✔ Location of functions that are easy to access, easy to implement

✔ Reasonable navigation in the process of clicking to view product details

✔ The website fully introduces the information of the website (introduction, policy, cooperation-affiliation)

✔ Compatible with many types of screens such as laptops, tablets, smart phones

✔ Certificate of completion of the course

Disadvantages - Do not support multi language.

Table 3 Advantages and disadvantages of Alibaba

After reviewing the websites listed above, I discovered that the most important functions for our application are managing and displaying fashion items for users to see and buy it, especially clothes With the benefits of a user-friendly interface and simple features for novices Reputable web design businesses provide devoted and intelligent technical assistance and customer service, which is handled rapidly The website is well-designed, with a simple style and a system of various items that clearly state the price, quality, and origin of products, resulting in better client trust.

Requirement list

No Work Work type Regulations/Related

2 Search product Search Search by product name, product type

4 See the list of ordered products

Search See the list of products that have been ordered

Table 4 Business function requirements of client department

No Work Work type Regulations/

1 View products list Search View all products posted on the store

2 Add products Store Managers can add multiple products to the site

3 Delete products Store Delete products when they are out of stock or no longer open for sale

4 Update products Store Update product information when there is any change in price, quantity, size

Search View all orders that the user has placed, based on the information left by the customer to deliver the goods to the customer

Table 5 Business function requirements of admin department

No Content Detail description Note

- Client: have the right to view products information, view prices, look up product

- Admin: has full control over the products sold on his website

1 - The website can be edited and upgraded to suit the tastes of customers and the needs of the admin such as promotions,

- The website works well with many devices

- Function buttons are arranged not too complicated and easy to see

- The functional screens interact well with each other, creating convenience for users

3 - The database is stored securely and easily accessible

- The website works stably, access and processing speed is fast

4 - Websites accessed on different devices can share common information with each other

- The website meets the requirements of the user without affecting the activities of other users

5 - The design and functionality of the website can be reused for future development

- The code can be used many times and can be applied to many different programs without having to change the code too much

List of actors and usecases

3.4.1 Identify actors and use cases in use case diagrams

- View the list of products

Table 9 Detail description of Actors and Usecases

Usecase diagram

Usecase specifications

3.6.1 Description of Login Use Case

Description Actor logs into the system

Precondition When the actor wants to log into the system to do something

Steps (1) Actors open the web

(2) Actors click to the Login part

(3) Enter username and password into login form

(5) The system sends information to the database for validation

(6) Password and username are correct, and the actor will log into the system with his/her correct role

3.6.2 Description of Register Use Case

Description Actor registers an account in the system

Precondition When the actor wants to have an account in the system to become a

Client Steps (1) Actors open the web

(2) Actors click to the Login part

(3) Actors click to the Create an Account part

(3) Actors need to fill in all required information and have that information checked for validation before signing up

(4) Actors click on the Register to create a new account (after checking whether the account has existed, or the password is correct or not)

3.6.3 Description of View List of Products Use Case

Use Case View List of Products

Description Actor sees a list of all products

Precondition When the actor wants to see all products

(2) Actors need to login to the app and after login successful actor will be move to the Home Screen

(3) Actors click on the Shop Tab in the navigation bar at the top of the website and will see the product filter and a list of products

Table 12 Description of View List of Products

Description Actor search for a specific product in the system

Precondition When the actor wants to see a specific product in the system

(2) In the Navigation Bar, Actor can input the name of the product and search

(3) The results will be shown (including the product) the actor can click into the product

(4) The product’s detail of that product can be shown on that product detail screen

Precondition When the actor wants to buy a product in the system

(2) When found the need products, actor can add to cart button

(3) Once the product has been successfully added to the cart, the Actor proceeds to checkout his cart by various methods

(4) After the payment has been made, there will be a transaction status notification that an order confirmation email will be sent to the registered email address

3.6.6 Description of See the list of Ordered Products

Use Case See the list of Ordered Products

Description Actor sees the list of ordered products

Precondition When the actor sees the list of ordered products

Steps (1) Actor open the web

(2) In My Orders in the 'Page' Tab the actor can review the orders he has placed

(3) Open Order page to see

Table 15 Description of See the list of Ordered Products

3.6.7 Description of Read Blogs Use Case

Use View List of Read Blogs Use Case

Description Actor reads blogs of website

Precondition When the actor wants to read blogs of website

(2) Actors need to login the app and after login successful actor will be move to the Home Screen

(3) Actors click on the Blog Tab in the navigation bar at the top of the website and will read the blogs and a list of blogs

Table 16 Description of Read Blogs

3.6.8 Description of Review Use Case

Use View List of Review

Description Actors review the products of website

Precondition When the actor wants to review the products of website

(4) Actors click Quick View of Product to see product details

(5) Actors scroll down and click on the comments tab to review the products

3.6.9 Description of See Products Review Use Case

Use View List of See Products Review

Description Actor to see product reviews of website

Precondition When the actor wants to see product reviews of website

(4) Actors click Quick View of Product to see product details

(5) Actors scroll down and click on the comments tab to see product reviews

Table 18 Description of See Products Review

Description Actor manages actor’s products

Precondition When the actor wants to change actor’s products

Steps (1) Actors open the web for admin

(3) Fill all information to add new product, delete or update product

Table 19 Description of Manage Product

Description Actor manages actor’s categories

Precondition When the actor wants to change actor’s categories

(3) Fill all information to add new category, delete or update category

Table 20 Description of Manage Category

Description Actor manages actor’s users

Precondition When the actor wants to change actor’s users

(3) Fill all information to add new user, delete or update user

Table 21 Description of Manage User

Description Actor manages actor’s brands

Precondition When the actor wants to change actor’s brands

(3) Fill all information to add new brand, delete or update brand

Table 22 Description of Manage Brand

Description Actor manages actor’s orders

Precondition When the actor wants to see actor’s orders

(3) See all information of billing detail

Table 23 Description of Manage Order

SYSTEM DESIGN

Database Design

Database table details

Ord Attribute Type Domain Meaning Note

1 id bigint Primary Key Id of Brand

2 name varchar Name of Brand

3 created_at timestamp Created date of brand

4 updated_at timestamp Updated date of brand

1 id bigint Primary Key Id of Category

2 name varchar Name of category

3 created_at timestamp Created date of category

4 updated_at timestamp Updated date of category

1 id bigint Primary Key Id of images

2 product_id int Foreign Key Id of product

3 path varchar Path of images

4 created_at timestamp Created date of product images

5 updated_at timestamp Updated date of product images

3 color varchar Color of product

4 size varchar Size of product

5 qty int The number of products

6 created_at timestamp Created date of product

7 updated_at timestamp Updated date of product

3 user_id int Foreign Key Id of user

4 email varchar Email of user

5 name varchar Name of user

6 messages varchar Comment of user

7 rating int Rating of user when review

8 created_at timestamp Created date of comments

9 updated_at timestamp Updated date of comments

2 brand_id int Foreign Key Id of brand

3 product_cate gory_id int Foreign Key Id of category

4 name varchar Name of product

5 description text Description of product

6 content text Content of product

7 price double Price of product

8 qty int The number of product

9 discount double Discount of product

10 weight double Size of product

11 sku varchar Sku code of product

13 tag varchar Tag of product

14 created_at timestamp Created date of product

15 updated_at timestamp Updated date of product

3 first_name varchar First name of user

4 last_name varchar Last name of user

5 company_name varchar Company name of user

6 country varchar Country of user

7 street_address varchar Street Address of user

8 postcode_zip varchar Postcode of user

9 town_city varchar Town of user

11 phone varchar Phone number of user

12 payment_type varchar Payment method of order

13 status int Status of order

14 created_at timestamp Created date of order

15 updated_at timestamp Updated date of order

2 order_id int Foreign Key Id of order

4 qty int The number of products users want to buy

5 amount double The number of products

6 total double The total price of products

7 created_at timestamp Created date of orders

8 updated_at timestamp Updated date of orders

3 title varchar Title of blog

4 image varchar Image of blog

5 category varchar Category of blog

6 content text Content of blog

7 created_at timestamp Created date of blog

8 updated_at timestamp Updated date of blog

2 blog_id int Foreign Key Id of blog

5 name varchar Name of user

6 messages varchar Comment of user

7 created_at timestamp Created date of blog comment

8 updated_at timestamp Updated date of blog comment

2 name int Name of user

4 email_verified_at timestamp Time of email when verified

5 password varchar Password of user

6 remember_token varchar Remember account

7 avatar varchar Avatar of user

9 description text Description of user

10 company_name varchar Company name of user

11 country varchar Country of user

12 street_address varchar Street Address of user

13 postcode_zip varchar Postcode of user

14 town_city varchar Town of user

15 phone varchar Phone number of user

16 created_at timestamp Created date of account user

17 updated_at timestamp Updated date of account user

Class diagram

Sequence diagram

4.4.4 Add New Product Sequence Diagram

Figure 18 Add new product diagram

4.4.7 View Detailed Product Information Sequence Diagram

Figure 20 View product detail diagram

4.4.11 Add New Feedback Sequence Diagram

Figure 24 Add new feedback diagram

Figure 25 Add a new category diagram

Back-end structure

GUI

SCU01 Login Screen Login page for registered users

SCU02 Register Screen Register page for new users

SCU03 Home Page 1 Screen Main Home page so that users can see the first overview of the website

SCU04 Home Page 2 Screen Secondary Home page so that users can see the featured Female products of the website

SCU05 Home Page 3 Screen Thirdly Home page so that users can see the featured Male products of the website

SCU06 Home Page 4 Screen Fourthly Home page so that users can see the blogs and logo-carousel of the website

SCU07 Product Shop Screen Product Shop Page so we can see all the products of the website and search SCU08 Product Details 1 Screen Product Details Page so we can see the details of any product

SCU09 Product Details 2 Screen Product Details Page so we can see products related to any product

SCU10 Shopping Cart Screen Cart Page so we can see in our cart

SCU11 Checkout Process Screen Checkout Page for us to fill in information and payment method

SCU12 My Ordered Screen My Order Page so we can see the orders we have placed

SCU13 My Favorite Screen My Favorite Page so we can see the products we like

SCU14 My Contact Screen My Contact Page so we can see the information of website

SCU15 Forgot Password Screen Forgot Password Page so we can sign your email to change password

SCU16 Reset Password Screen Reset Password Page so we can sign the new password

SCU17 My Blog Screen Blog Page so we can read the blogs of website

SCU18 Admin Login Screen Login page for Admin

SCU19 Admin Manage User Screen Manage Page for Users (Add,

SCU20 Admin Manage Order Screen Manage Page for Orders

SCU21 Admin Order Information Screen Manage Page for seeing Orders

SCU22 Admin Product Screen Manage Page for Products

SCU23 Admin Product New Screen Manage Page for Adding

SCU24 Admin Product Edit Screen Manage Page for Editing

SCU25 Admin Category Screen Manage Page for Categories

SCU26 Admin Brand Screen Manage Page for Products

SCU27 Admin Statistic Screen Manage Page for Statistic

1 Login Text Display main purpose of page

2 Email address Text Box For users to sign an email

3 Password Text Box For users to sign the password

4 Save Password Check Box For user to check for saving password

5 Forget your Password Link After clicking, the page will go to Forgot Password Page

6 SIGN IN Button After clicking, the page will go to Home Page

7 OR CREATE AN ACCOUNT Link After clicking, the page will go to Register Page

1 Register Text Display main purpose of page

2 Name Text For users to sign username

5 Confirm Password Text Box For users to resign the password

6 REGISTER Button After clicking, the page will go to

7 OR LOG IN Link After clicking, the page will go to

1 Logo Image Display logo of website

2 HOME Navigation Menu After clicking, the page will go to

3 SHOP Navigation Menu After clicking, the page will go to

4 COLLECTION Navigation Menu When we mouse over it, it will drop down to Men's Women's

5 BLOG Navigation Menu After clicking, the page will go to

6 CONTACT Navigation Menu After clicking, the page will go to

7 PAGES Navigation Menu When we mouse over it, it will drop down to other pages

8 Banner Slider For users to see banner ads

Table 38 Home Page 1 Screen Objects

1 Banner Men’s Banner Display Banner for Men’s

2 Banner Women’s Banner Display Banner for Women’s

3 Banner Kid’s Banner Display Banner for Kid’s

4 All Filter-control When we mouse over it, it will drop down to Men's Women's

5 Clothings Filter-control After clicking, it will show

6 HandBag Filter-control After clicking, it will show

7 Shoes Filter-control After clicking, it will show

8 Accessories Filter-control After clicking, it will show

1 All Filter-control When we mouse over it, it will drop down to Men's Women's Kid's

2 Clothings Filter-control After clicking, it will show

3 HandBag Filter-control After clicking, it will show

4 Shoes Filter-control After clicking, it will show Shoes of woman

5 Accessories Filter-control After clicking, it will show

6 Slider Slider For users to see the list of products by filter

7 Banner Men’s Banner Display Banner for Men’s

1 From The Blog List Display the blogs of website

2 Logo Logo-carousel Display the logo- carousel of website

3 Footer Footer Display some information’s of website

1 Categories Filter-widget For users to search by categories

2 Brand Filter-widget For users to search by brands

3 Price Filter-widget For users to search by prices

4 Color Filter-widget For users to search by colors

5 Size Filter-widget For users to search by sizes

6 Sorting Select Box For users to sorting

7 Show Select Box For user to show how many products they want

8 Quick View Button For user to see product details when point the mouse at products

9 Heart Icon Button After clicking, that product will add to your favorite

Table 42 Product Shop Screen Object

1 Product Name Title For users to see product name

2 Price Content For users to see price

3 Color Radio button For users to see what colors are available

4 Size Radio button For users to see what sizes are available

5 ADD TO CART Button After clicking, the page will go to

6 TAGS Text For users to see tags

Table 43 Product Details 1 Screen Objects

1 Related Products Title Display the title

2 Product List List Show products related to the product users are viewing

Table 44 Product Details 2 Screen Objects

1 IMAGE Image Show the product image users just added to your cart

2 PRODUCT NAME Title Show the product name users just added to your cart

3 PRICE Text Show the product price users just added to your cart

4 COLOR Text Show the color of product users just added to your cart

5 SIZE Text Show the size of product users just added to your cart

6 QUANTITY Button For users to increase or decrease and remove products from cart

7 TOTAL Text Show the total price of product

8 Subtotal Text Show the subtotal price of product

Button After clicking, the page will go to

11 X Button After clicking, the page will delete all cart items

12 X Button After clicking, the page will remove the cart item want to delete

Table 45 Shopping Cart Screen Objects

Figure 43 Checkout Process Page Screen

1 First Name Text Box For user to sign first name

2 Last Name Text Box For user to sign last name

3 Company Name Text Box For user to sign company name

4 Country Text Box For user to sign country

5 Street Address Text Box For user to sign street address

6 Postcode/Zip Text Box For user to sign postcode

7 Town / City Text Box For user to sign town / city

8 Email Address Text Box For user to sign email address

9 Phone Text Box For user to sign phone number

10 Your Order Table Show the bill

Check Box For user to choose payment methods

12 PLACE ORDER Button After clicking, the user will receive a notification order successfully

Table 46 Checkout Process Page Screen Objects

1 IMAGE Image Show the product image users just added to your cart

2 ID Text Show the order id users just ordered

3 PRODUCTS Text Show all products users just ordered

4 TOTAL Text Show the total price users paid

5 DETAILS Link After clicking, users can see the billing details of ordered

6 Show Table Show image, id, products, total and details

Table 47 My Order Screen Objects

1 IMAGE Image Show the product image users just added to your favorite

2 PRODUCTS Title Show the product name users just added to your favorite

4 Details Link For users to see details of product just added to your favorite

5 X Button For users to delete all products in your favorite

6 X Button For users to remove the products in your favorite

Table 48 My Favorite Screen Objects

1 Forgot Your Password? Text Display main purpose of page

2 Email address Text Box For users to sign an email to change password

3 SUBMIT Button After clicking, a new email will send to your email address

4 BACK TO LOGIN Link After clicking, the page will go to Login Page

Table 49 Forgot Password Screen Objects

1 Reset Password Text Display main purpose of page

2 Password Text Box For users to sign a password want to change

3 Confirm Password Text Box For users to confirm new password

4 RESET PASSWORD Button After clicking, the new password will be updated

Table 50 Reset Password Screen Objects

1 Logo Image Display main purpose of page

4 Keep me logged in Check Box For user to check for saving password

5 Log in to Dashboard Button After clicking, the page will go to

Table 51 Admin Login Screen Objects

Figure 49 Admin Manage User Screen

1 User Metismenu After clicking, the page will go to Manage

2 Order Metismenu After clicking, the page will go to Manage

3 Statistic Metismenu After clicking, the page will go to Manage

4 Product Metismenu After clicking, the page will go to Manage

5 Category Metismenu After clicking, the page will go to Manage

6 Brand Metismenu After clicking, the page will go to Manage

7 Create Button For admin to add new users

8 Search Search-wrapper For admin to search users

Table 52 Admin Manage User Screen Objects

Figure 50 Admin Edit User Screen

1 Avatar Image After clicking, admin can choose the image from folder

2 Name Text For admin to change the name

3 Email Text For admin to change the email

4 Password Text For admin to change the password

5 Confirm Password Text For admin to change the email

6 Company name Text For admin to sign the company name

7 Country Text For admin to sign the country

8 Street Address Text For admin to sign the street address

9 Postcode / ZIP Text For admin to sign the postcode

10 Town / City Text For admin to sign the town / city

11 Phone Text For admin to sign the phone

12 Level Form-control For admin to choose the level of account

13 Description Text For admin to sign the description

14 Cancel Button For admin to cancel if not edited

15 Save Button For admin to save the information after edited

Table 53 Admin Edit User Screen Objects

Figure 51 Admin Manage Orders Screen

1 Search Search-wrapper For admin to search orders

2 Orders List Show for admin can see all the orders of website

3 Details Link After clicking, admin can see the orders details

Table 54 Admin Manage Orders Screen Objects

Figure 52 Admin Order Information Screen

1 Product Title Show the product name and some information that user ordered

2 Order Info Title Show the information of order

3 Full name Text Show the full name

4 Email Text Show the email

5 Phone Text Show the phone number

6 Company name Text Show the company name

7 Street Address Text Show the street address

8 Town / City Text Show the town / city

9 Country Text Show the country

10 Postcode / ZIP Text Show the postcode/zip

11 Payment type Text Show the payment type

12 Status Text Show the status of order

13 Description Text Show the description

14 Status Select Box For admin to choose the order status after seeing the order information

15 Update Status Button For admin to update order status

Table 55 Admin Order Information Screen Objects

Figure 53 Admin Manage Products Screen

2 Create Button For admin to add new products

3 Products List Show for admin can see all the products of website

4 Show Text Show how many products of page 1

5 Page Paging After clicking, the page will show the products of next page

Table 56 Admin Manage Products Screen Objects

Figure 54 Admin Add New Products Screen

1 Brand Form-control For admin to choose brand

2 Category Form-control For admin to choose category

3 Name Text Box For admin to sign name

4 Content Text Box For admin to sign content

5 Price Text Box For admin to sign price

6 Discount Text Box For admin to sign discount

7 Weight Text Box For admin to sign size

8 SKU Text Box For admin to sign sku

9 Tag Text Box For admin to sign tag

10 Featured Check Box For admin to choose featured

11 Description Text Box For admin to write description

Table 57 Admin Add New Products Screen Objects

Figure 55 Admin Edit Product Screen

1 Images Images Show the images of product

2 Product Images Link For admin to edit the images of product

3 Product Details Link For admin to edit the information

4 Info Text Show the current information of product

Table 58 Admin Edit Products Screen Objects

Figure 56 Admin Manage Categories Screen

2 Create Button For admin to add new categories

3 Categories List Show for admin can see all the categories of website

4 Edit Button For admin to edit categories

5 Delete Button For admin to delete categories

Table 59 Admin Manage Categories Screen Objects

Figure 57 Admin Edit Category Screen

1 Name Text For admin to edit the category

Table 60 Admin Edit Category Screen Objects

Figure 58 Admin Manage Brands Screen

2 Create Button For admin to add new categories

3 Brands List Show for admin can see all the brands of website

4 Edit Button For admin to edit brands

5 Delete Button For admin to delete brands

Table 61 Admin Manage Brands Screen Objects

Figure 59 Admin Edit Brands Screen

1 Name Text For admin to edit the brand

Table 62 Admin Edit Brands Screen Objects

Figure 60 Admin Manage Statistics Screen

1 Start Date Select Box For admin to choose start date

2 End Date Select Box For admin to choose end date

3 Search Button Show for admin can see information from start date to end date

4 Month Select Box For admin to choose month

5 Search Button Show for admin can see information of chosen month

6 Total Orders Heading Display the order quantity of website

7 Products Sold Heading Display the number of products sold of website

8 Total Revenue Heading Display the amount of money recovered of website

9 Users Heading Display the number of registered users of website

10 REVENUE Card body Display the total revenue of website

11 Sort by Quantity Button After clicking, the table will display list according to Decrease Quantity

12 Sort by Products Sold Button After clicking, the table will display list according to Decrease Products Sold

13 Sort by Tag Button After clicking, the table will display list according to Tag

14 Information Table control Display main information

15 Details Button After clicking, the page will go to information details of that products

16 Sales Report Title Display main purpose

APR TO JUN JULY TO SEP

Control Tab For admin choose Tab to see chart by month

18 Top 3 Best Seller Items Title Display main purpose

19 Chart Context Menu For admin see chart with many options

20 Column Chart Display the column chart with the quantity of products sold

21 Name of Products Text Display the name of Top 3 Best Seller

22 TOP ORDERS Title Display main purpose

23 Information of the order List Display the information of top orders

(name, email, phone, total price)

Table 63 Admin Manage Statistics Screen Objects

IMPLEMENTATION AND TESTING

Implementation

During the entire process of developing and implementing the project, the team used the following supporting software:

- Use Visual Studio Code and PHP Storm for PHP Developers to write code and design UI, using Laravel Framework

- Use MySQL to build database

- Use Heroku Platform for deploying website to hosting

- Use Enterprise Architect 7.5.848 to draw UML diagrams

5.1.2 Introduction about technologies used in the application

The program uses PHP language to write code, written on MVC model Using Laravel Framework technology and MySQL

Laravel is a web application framework with expressive, elegant syntax It has already laid the foundation — freeing you to create without sweating the small things

Laravel values beauty We love clean code just as much as you do Simple, elegant syntax puts amazing functionality at your fingertips Every feature has been thoughtfully considered to provide a wonderful developer experience

MySQL is the world's most popular free and open-source database management system and is very popular with developers in application development Because MySQL is a high-speed, stable and easy-to-use database management system that is portable, works on many operating systems, it provides a large system of very powerful utility functions With high speed and security, MySQL is well suited for applications that access databases

118 on the internet Users can download MySQL for free from the homepage MySQL has many versions for different operating systems: Win32 version for Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS, etc

MySQL is one of the very basic examples of a Relational Database Management System using Structured Query Language (SQL)

MySQL is used to support Node.js, PHP, Perl, and many other languages, as a place to store information on web pages written in NodeJS, PHP or Perl, etc

MVC is an acronym for 3 words Model – View – Controller This is the design model used in software engineering Model the source code into 3 parts, corresponding to each word Each word corresponds to a separate activity in a pattern

Model helps to store the application's data and its state It can be a database or just an XML file

View is considered a user interface used by your website visitors to see the data The controller is responsible for handling user interactions with the website It is used to determine what type of view needs to be displayed The controller is also used for the purpose of communicating with the model

The part that stores all the data of the application This part is a bridge between the two components below, View and Controller The model is presented in the form of a database or sometimes simply a normal XML file The model clearly demonstrates operations with the database such as allowing viewing, retrieving, and processing data

This is the user interface (theme) Where users can get information about data of MVC through query operations such as searching or using through websites

Typically, web applications use MVC View as part of the system where HTML components are generated Besides, the View also has the function of recording user activities to interact with the Controller However, the View has no direct relationship with the Controller, nor can it get data from the Controller, but only displays a request to pass it to the Controller

The department is responsible for handling user requests made through the view From there, C gives the right data to the user Besides, the Controller also has the function of connecting to the model

Controller gets data from View and sends it to Model The model will now receive data from the Controller to store in the database

5.1.4 Setting process of the application

First, we must have a database to load the website's data and fill in the required information of the database in the env file such as DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME and DB_PASSWORD

Second, we must open the Terminal of IDE Platform and sign “php artisan serve” to run the server

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

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 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 is the last phase of functional testing and is used to assess whether or not the final piece of software is ready for delivery It involves ensuring that the product follows all of the original business criteria and that it meets the end user’s needs This requires the product to be tested both internally and externally, meaning you’ll need to get it into the hands of your end users for beta testing along with those of your QA team Beta testing is key to getting real feedback from potential customers and can address any final usability concerns

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

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 Login with a valid account

Email: hoangan10ab4@g mail.com

TC_02 Log in with an account that doesn't exist

Login failed; account does not exist

TC_03 Log in with an account that is the wrong email or password

TC_06 Register with valid information

TC_07 Register with an existing email account

TC_08 Manage user - Login by admin account

Display Admin Manage Users Screen

TC_09 Manage category - Login by admin account

Display Admin Manage Categories Screen

TC_12 Edit category - Login by admin account

TC_14 Edit product - Login by admin account

TC_15 Delete product - Login by admin account

TC_16 Create new brand - Login by admin account

TC_17 Edit brand - Login by admin account

Brand name: LV Update brand successfully

TC_18 Delete brand - Login by admin account

- Write a comment about the product

Comment: Good Comment has been sent successfully

Comment has been sent successfully

TC_20 Add to cart - Login by user account

TC_21 Logout - Click logout Logout successfully

CONCLUSION

Achievements

• The course provides the background knowledge in new technologies and framework in software programming and engineering Especially in new methods for software development

• Students are provided with knowledge about PHP In addition, there is knowledge of setting environment, designing, implementing, testing, packaging, and deploying a software product Along with external skills such as communication, teamwork, project management and report writing

• During the project implementation, the team had a closer look at the php programming language Use the PhpStorm IDE together with the Laravel framework, combined with some CSS libraries to perfect your product Also learn how to divide frontend and backend properly

• Know the theory of MySQL and Laravel Framework Learn how to build frontend websites and build databases and connect to them

• Know the theory of Python and Flask Learn how to build an image recognition system and call an API that returns results and connects to a website

• Know the theory of Cloudinary Learn how to use services, connect to websites, manage, and store all the images of websites on the Cloudinary platform

• Know some JavaScript theory Learn how to use it to handle some special website operations

• Gain effective teamwork skills Logical thinking is also significantly improved Know how to start a project effectively and divide the work evenly among team members

• 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:

+ Create , Read, Update,and Delete products function in Admin Page

+ Search the products that the users want to see and Search according to filter + Manage products, brands, 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 (payment later and online payment by VNPay) for users to choose

+ Have email notification for user after ordering products

+ Users can see contact of website to know location and communications + Users can see the best seller of website and 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

+ Users can add to favorite when they like this products

• This is the website we finished and deployed to the Heroku platform: https://old-fashionedshop-679213baddbf.herokuapp.com/

Advantages

• The user interface is guided enthusiastically by the instructors, showing good or bad points continuously, ensuring aesthetics

• Database, applications are uploaded on the internet, users do not need to install third-party applications to be able to use them

• The errors have been thoroughly tested by all members who have been learning through the software testing course Understand the procedures for finding errors and making corrections

Disadvantages

• When we want to add new features that might need to have a newer library – this can be leaded to the problems that the older devices are not supported, and it can make the application, which is hard to reach to people in the unmodern areas, becomes harder

• Login and account registration need more variety

• Should have more online payment such as PayPal, Momo,…

Future work

• Build a mobile app for the website

• Build more features for the website, for example a map suitable for ordering,

• Add payment method, add shipping method for many remote customers

• Build a website system for a chain of stores with many branches like thegioididong,

1 Anh Nguyen Ngoc, Cài đặt và cấu hình IDE PhpStorm phát triển dự án PHP

Retrieved from: https://www.youtube.com/watch?v=SWsST-WF424&ab_channel=AnhNguyenNgoc

2 freeCodeCamp.org, Bootstrap CSS Framework - Full Course for Beginners

Retrieved from: https://www.youtube.com/watch?v=-qfEOE4vtxE&ab_channel=freeCodeCamp.org

3 Hiếu Tutorial with live project, Lập trình website bằng Laravel Framework

Retrieved from: https://www.youtube.com/playlist?list=PLWTu87GngvNxpWN6FVuEcS-YvFNq6RnqG

4 Code With Dary, PHP for beginners

Retrieved from: https://www.youtube.com/playlist?list=PLFHz2csJcgk_fFEWydZJLiXpc9nB1qfpi

5 ZendVN - Học Lập Trình Online, Hướng dẫn deploy lên Heroku - Phần 4.2 Deploy Project Laravel

Retrieved from: https://www.youtube.com/watch?v=aGrgKFRfxK8&list=WL&index=4

6 Đặng Kim Thi, Tự làm website bán hàng với Laravel Framework 8.x

Retrieved from: https://www.youtube.com/playlist?list=PLsVJaIeVT78pmuOYNo4T7RKSW_RGLWipQ

7 Programming with Vishal, Step by step create an eCommerce website using PHP (Mar 4 th , 2021)

Retrieved from: https://www.youtube.com/playlist?list=PLWCLxMult9xfYlDRir2OGRZFK397f3Yeb

Retrieved from: https://github.com/mj703/Fashion-Recommendation-System

9 Stack Overflow, How to solve "Error: MySQL shutdown unexpectedly"?

Retrieved from: https://stackoverflow.com/questions/18022809/how-to-solve-error-mysql-shutdown- unexpectedly

10 VNPay, Hướng dẫn tích hợp Cổng thanh toán VNPAY

Retrieved from: https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/

11 CampusX, Fashion Recommender System | Clothes Recommendation | Ecommerce Project

Retrieved from: https://www.youtube.com/watch?v=xanJe6e8Xuw/

12 Tech With Tim, Python REST API Tutorial - Building a Flask REST API

Retrieved from: https://www.youtube.com/watch?v=GMppyAPbLYk/

Retrieved from: https://en.wikipedia.org/wiki/PHP/

Retrieved from: https://laravel.com/docs/8.x/

Tiêu đề	Building An E-Commerce Website For Selling Clothes
Tác giả	Trương Hoàng Ân, Nguyễn Anh Đức
Người hướng dẫn	MSc. Nguyễn Trần Thi Văn
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	141
Dung lượng	9,66 MB