model 16 Figure 3: Entity customers 16 Figure 4: Entity products 17 Figure 5: Entity product_categories 17 Figure 6: Entity categories 17 Figure 7: Coupons entity 17 Figure 8: Entity car
INTRODUCTION
Reasons for choosing the topic
Nowadays, e-commerce in Vietnam is developing very fast Online shopping needs of users are increasing day by day Building an online sales website is essential for companies and business organizations that want to build a brand E- commerce is really a revolution in sales methods that, if you know how to apply, businesses will succeed beyond expectations in bringing products to consumers Besides that, websites want to bring in high revenue and meet customer needs for choosing quality products without spending a lot of time
Based on those facts, we decided to choose the topic “selling fashion Website” with the purpose of building a website with quality fashion and clothing products, convenient for online shopping and payment
This personal project started as an idea for a small business online fashion store called Lalla.
Purpose of the topic
Main objectives: Research and build a fashion sales website, that allows to perform the following functions:
● Product information management, order management
● Learn how to build a website
● Learn the theory and proficient use of programming languages
● Learn and use web services
Research object
• Topics using PHP programming language
Research scope
The topic is limited in scope to the following research and experimental levels:
• Learn how to build a website
• Learn the theory and use of web services
Scientific and practical significance of the topic
The topic contributes to affirming the development of e-commerce for life Online shopping needs of users are increasing day by day
Besides, the topic also contributes to affirm that Vietnamese fashion is quite rich, luxurious, and suitable for all body shapes.
Development tools
1 Visual studio code Write PHP code
3 Xampp Create a server to run the website
4 StarUML Draw a USE-CASE diagram a) Introduction to Visual Studio Code
Visual Studio Code is a distribution of the Code - OSS repository with Microsoft- specific customizations released under a traditional Microsoft product license
Visual Studio Code combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle It provides comprehensive code editing, navigation, and understanding support along with lightweight debugging, a rich extensibility model, and lightweight integration with existing tools
Visual Studio Code is updated monthly with new features and bug fixes You can download it for Windows, macOS, and Linux on Visual Studio Code's website To get the latest releases every day, install the Insiders build b) Introduction to Power Designer
PowerDesigner DataArchitect is the industry-leading data modeling tool manufactured by SAP It offers a model-driven approach to empower and align business and IT PowerDesigner enables enterprises to more easily visualize, analyze and manipulate metadata for effective enterprise information architecture c) Introduction to Xampp
XAMPP stands for 5 modules built into it including Cross-Platform (X),
Apache (A), MariaDB (M), PHP (P) and Perl (P) XAMPP is a free and open source software used to create web servers on personal computers (Localhost), XAMPP is compatible with popular operating systems such as: Linux, MacOS, Windows,
The biggest advantage of XAMPP is that it is open source and easy to use, relatively simple and compact, so it is increasingly popular today
XAMPP is widely applied from ordinary users to programmers, to operate and develop websites using PHP programming language such as: WordPress, Joomla!, Magento, Drupal, OpenCart, phpBB, d) Introduction to StarUML
StarUML is a platform model, a software that supports UML (Unified
Modeling Language) It supports MDA (Model Driven Architecture) approaches by supporting UML profile concepts That is, StarUML supports system analysis and design something that any project needs Also using StarUML will ensure maximum productivity and quality of your software projects Since it allows modeling, it will not depend on the coder, the language of the code or the platform used Because of the modeling, it is easy to read and understand One thing I like most about StarUML is the ability to generate code from class models.
FUNDAMENTAL
HTML5
HTML is the skeleton of the website HTML5 is the 5th upgrade from HTML HTML5 makes content rendering more efficient and improves performance, web pages will load faster, bandwidth will be used less, and the battery life of mobile devices will be longer Less reliance on functional plugins,
The advantages of HTML5 are as follows:
HTML5 for better interaction: Supports dynamic effects, adds new tags to make the website dynamic, meeting more user needs Geolocation: allows geolocation of the user
Easy game application development: with the help of tag, we can develop some games in HTML5 You'll find it much more enjoyable to build HTML5-based game apps than when you were building Flash games and apps before
Web storage: storing Web application data on the user's machine is faster and more secure than using cookies Integrated video/audio features: built-in support libraries for audio and video, no need to use 3rd party programs Suitable for web design on devices and all different screens can be simple without disturbing layout or images.
Tailwind CSS
CSS3 is the latest standard of CSS, the advantages of CSS3 are as follows:
● Added the ability to adjust the background (background) and border
● Add animations, multi-column structure.
• Tailwind is a utility-first CSS framework Tailwind CSS has many classes that cover different CSS properties and importantly, we can easily extend and create new classes with its own classes
• Using Tailwind helps us optimize CSS code, write more concise code And moreover, with many more classes but with extremely user-friendly naming rules, the programmer looks at the class and can see what this class is styled
We also have to talk about the high customizability and extensibility, which gives us unlimited flexibility.
Concepts of SQL Server Database Administration System
Concept: SQL is short for Structured Query Language; it is a tool Data management is commonly used in many fields Most high-level languages have SQL support such as Visual Basic, Oracle, Visual C#…Application programs and administrative tools database allow users to access the database without using it directly SQL But those applications must use SQL when running
• SQL language similar to English
• SQL is a non-procedural language; it does not ask us how to access the database All SQL messages are very easy to use and less likely to make mistakes
• SQL provides rich scripting for data inquiry tasks
• Insert, update, delete rows in a relation
• Create, modify, and add objects in the database
• Control access to the database and its objects to ensure the security of the database
• Ensure database consistency and binding
• The only requirement to use the Q&A is to have a good grasp of your database structures
• Poor Interface: SQL has a poor interface as it makes look everything very complex even when it's not! Due to its difficult interfacing, users find it difficult to deal with the databases
• Partial Control: SQL doesn't grant complete control over databases to its users This is due to some hidden business rules
• Security: Regardless of the SQL version, databases in SQL are constantly under threat as it holds huge amounts of sensitive data.
PHP Language
PHP (short for Hypertext Preprocessor) is a scripting language, a type of code mainly used to develop dynamic web pages Unlike client-side languages, like JavaScript, PHP code is executed on the server side and then the HTML code is returned to the browser (client) PHP's syntax is heavily borrowed from C and Java, so you'll quickly pick up on it if you've studied the other languages
However, if you haven't learned it, it's okay, because PHP is not too difficult for everyone, even for those who are not professional programmers.
STATUS SURVEY AND USER REQUIREMENTS
Status Survey
3.1.1 ZARA Vietnam (https://www.zara.com/vn/)
Zara is one of the largest international fashion companies Zara belongs to Inditex, one of the largest distribution groups in the world
Customers are at the heart of their unique business model, which includes design, manufacturing, distribution and sales through an extensive retail network
- View product list: Allows viewing a list of products by category
- View product details: View details of any product
- Search, sort and filter products: Search products by name and can apply filters or sort products
- Add products to cart: Add a product you want to buy to the cart
- Order with 1 method: online payment (visa, mastercard, domestic card)
- Simple ordering process, no login required
- Customers can not valuate product on website
3.1.2 H&M (https://www2.hm.com/vi_vn/index.html)
H&M Group is a family of brands and businesses, making it possible for customers around the world to express themselves through fashion and design, and to choose a more sustainable lifestyle They create value for people and society in general by delivering our customer offering and by developing with a focus on sustainable and profitable growth
- View product list: Allows viewing a list of products by category
- View product details: View details of any product
- Search, sort and filter products: Search products by name and can apply filters or sort products
- Add products to cart: Add a product you want to buy to the cart
- Order with 2 methods: online payment (Visa, Master card, domestic card), and cash on delivery (COD)
- Simple ordering process, no login required
3.1.3 Uniqlo (https://www.uniqlo.com/vn/vi/)
Uniqlo is a Japanese company that provides essential fashion products for everyone
- View product list: Allows viewing a list of products by category
- View product details: View details of any product
- Search, sort and filter products: Search products by name and can apply filters or sort products
- Add products to cart: Add a product you want to buy to the cart
- Order with 3 methods: online payment (Visa, Master card, domestic card), and cash on delivery (COD), or customer can receive product at the shop
- Customer can valuate product and view other’s comments without buying
- Must login to buy product.
Requirement Analysing
Table 3.2.1A: Table of requirements for client-side business functions
No Professional requirements Type of requiremens
1 Search for products by name or description
2 View product list Lookup (search)
3 View product details Lookup (search)
4 View the list of orders placed Lookup (search)
5 Add, edit product information in the cart
9 Calculate the total order value based on the current price of the product
Table 3.2.1B: Table of requirements for management's business functions
No Professional requirements Type of requiremens
1 Add and edit product information Storage
2 Add new account information Storage
3 Add, edit new category information
4 Add, edit new brand information Storage
5 Confirm and cancel orders Storage
6 View, filter product list Lookup (search)
7 View, filter the list of accounts Lookup (search)
8 View, filter the list of categories Lookup (search)
9 View and filter the list of brands Lookup (search)
10 View, filter order list Lookup (search)
11 Statistical number of products by status
Table 3.2.1C: System function requirements table
No System Requirements Description, binding Note
Authorization for the admin side and the client side includes: authenticated customers and guests
Table 3.2.2: Non-Functional Requirement Table
No Quality requirements Type of requiremens
1 Eye-catching and user-friendly interface
2 Fast, accurate search and processing speed
4 The user's personal information must be kept confidential and encrypted
5 The system can be easily scaled up Evolution
Identify the actors and functions of the system
- Based on the results after surveying and collecting information from pre-existing systems Then the reporting team decides the main actors of the system as follows:
- Guest: A user who has not logged in or has no account in the system
- Authenticated customer (User): A user who already has an account in the system
- Administrator: The person with the highest authority in the system Will operate and manage all activities of the system
- Guest: o View list, product details o Product search o Sign up
- Authenticated customer (User): Inherit the functions as a guest and add other functions such as: o Sign in o View and edit personal information o Cart management (Add, edit, delete, view products in the cart) o Place an order o Online payment o View the list of orders placed o Cancel the order
- Administrators: Inherit the functions as a user and add other functions such as: o Product management (add, edit, delete, view products) o Confirm, cancel the order o Account management (Add, delete, view accounts) o Manage categories (Add, edit, delete, view categories) o Brand management (Add, edit, delete, view brands)
ANALYST AND DESIGN
System specification
Building a fashion sales website makes it easy for suppliers to introduce products to buyers Buyers can choose and order products easily Buyers register as members to place orders, search for products, the website's customers are individuals or groups wishing to buy fashion clothes
With the requirements of the topic, the function can be divided into the following 2 groups of users:
Customers accessing the website can perform the following functions:
• Update information after registering as a member
• Search products by name, category, category, keyword, price of the product
• Search products by category filter, product category
• Choose quantity and product’s size
• For items: when customers need to order online through the system, the temporary order will be temporarily stored Here, customers can check and update the product list The customer can then continue to purchase, the customer checks his order again and chooses to pay
• Customers can view their purchase history
The admin object has the following main functions:
• Customer management: manage customers of the whole system
• Manage website interface: update slides for homepage interface, add, edit, delete, update products, categories, product categories
• Product management: manage all products, update out-of-stock products
• Sales portfolio management: including managing information about product categories and product types
• Order management: view orders, confirm orders.
Class Diagram
Figure 1: Basic Level Class Diagram
Database Diagram
Explain: customer entity contains user information, each user has a unique password (customer_id) self-incrementing, full name username, email, phone number, address, password, picture, device ip address b Products
Figure 4: the products entity Explain: products entity contains product information, each product will have a self-incrementing product_id, date added, name, price, image, product description, product label, discount price, search suggestion keywords search, total product c Product_categories
Explain: product_categories entity contains product category information, each product category will have a self-incrementing code (product_category_id), product category name, product category description d Categories
Explain: categories entity contains product category information, each product category will have a self-incrementing code (category_id), product category name, product category description e Coupons
Explain: coupons entity contains discount code information, Each discount code has a self-increasing coupon (coupon_id), product name, discount code, discount price, discount code, limit the number of codes used, the number of codes used f Cart
Explain: cart entity contains cart code information, each cart has a self- incrementing code (cart_id), device ip address, product size, product price, product quantity g Customer_order
Explain: customer_orders entity contains ordered product information, each order has a self-incrementing code (order_id), amount to be paid, invoice number, size, quantity, order date, order status
• Description of the customers entity
STT Attribute name Datatypes Main Key Description
1 customer_id int X Customer code
2 Customer_name Varchar Customer name
3 Customer_email Varchar Customer email
4 Customer_phone Int Customer phone number
7 Customer_image Text Customer pictures
8 Customer_ip Text Client device ip address
• Description of the customer_orders entity
Table 3 Display of order information
STT Attribute name Datatypes Main Key Description
1 Order_id Int X Code orders
2 Customer_id Int Customer's code
3 Product_id Int Product code
4 Due_amount Int Amount to be paid
5 Invoice_no int Some bills
8 Order_date Text Order date
9 Order_status Text Order Status
• Description of the products entity
Table 4 Display of product information
STT Attribute name Datatypes Main courses Description
1 Product_id Int X Product code
2 Product_category_id Int Category code
3 Product_category_id Int Category code
5 Product_title Text Product's name
6 Product_img1 Text Product image
7 Product_img2 Text Product image
8 Product_img3 Text Product image
10 Product_keywords Text Search keyword
13 Product_sale Text Reduced price
• Description of the entity product_categories
STT Attribute name Datatypes Main Key Description
1 Product_categories Int X Category code
2 Product_category_title Text Name list
3 Product_category_desciption Text Describe product category
• Description of the categories entity
STT Attribute Name Datatypes Main Key Description
1 Product_category_id Int X Category code
2 Product_category_title Text Category name
3 Product_category_desciption Text Describe
• Description of the cart entity
STT Attribute Name Datatypes Main Key Description
1 Product_id Int X Product code
2 Ip_add Varchar Client IP
Use-case diagram
a Diagram of guest user’s use case
Figure 10: Diagram of future user use case b Use case diagram for member users
Figure 11: Member user use case diagram c Admin use case diagram
Figure 12: Admin use case diagram
The main processing algorithm in the system
a Flowchart of member registration algorithm
Figure 13: Flowchart of the membership registration algorithm
• The user enters the information provided in the form
• The system will check the information entered by the user In particular, users must not enter the same login email as they already have If the user enters the same email name, the system will report an error
• After the customer has registered, the customer is transferred into the system to perform the functions listed above b Flowchart of system login algorithm
Figure 14: Flowchart of the login algorithm Meaning: When having a member account, users can log in to the system to be provided with additional functions such as: ordering c Flowchart of product buying algorithm
Figure 15: Product purchase algorithm flowchart
➢ When the user chooses to buy a product, the system will check if there is enough quantity that the customer wants to buy or not, if not, the system will notify the customer Otherwise, the product will be added to the cart
➢ User can update cart again:
• When the user is not logged in to the account, the system will ask the user to log in to be able to purchase
• However, when the user is logged in, the system will notify that the product is added
➢ The system will check the information, if there is an error, the system will report an error Otherwise, the order will be saved in the database.
Sequence Diagram
The sequence diagram gives an overview of the system's processing sequence for each specific function It shows the flow of functionality across UseCases, it is a diagram that describes interactions between objects and focuses on describing the order of messages over time a Process of adding product to cart
Figure 16: Sequence diagram of the process of adding products to the cart b Ordering process c Process of adding products
Figure 18: Sequence diagram of adding products
CODE DEVELOPMENT AND EXPERIMENT
User Homepage
The homepage is the first page displayed when a user visits the website, which contains links to other pages of the website On the homepage will list products, new products, best-selling products Users can easily search for products here.
Shop page
The shop page interface shows all the products of the store, users can view products by category, product category.
Product detail page
Figure 21: Product detail page interface
Product detail page shows product information, user can choose size, quantity and add selected product to cart
Cart page
The shopping cart page shows users what is in their cart, allows users to change the number of products, can delete products, enter a discount code, let users continue shopping or order now
Account page
The account page helps users to view their order history, view their order payment status, users can edit their account, delete their account.
Notice page
The successful order notification page lets users know that their order has been successfully ordered, users can press the view order button to redirect to the order history page.
Contact page
The contact page displays the store's location on the map, route information, phone number, and business hours of the store.
Product search page
Product search page to show results that return product information searched by the user.
Login page
The login page allows users to log in to the system, if they do not have an account, users can click the link below the form to switch to the registration page.
Admin page
The admin page helps admin to have an overview of the system, manage products, view products, customers, categories, product categories, manage orders, and customers.
Product view page
Figure 29: Product view page interface
Product view page helps admin manage all his products, admin can edit, delete products.
More product page
The new product page allows admins to add products to their store.
Product edit page
Figure 31: Product editing page interface
Product edit page, help admin edit product information, name, image, price, discount code, product tag,
Product catalog view page
Figure 32: Product catalog page interface
The product category page displays product catalog information, admin users can edit and delete product categories.
Category page
The Category page shows product category information, admin users can edit and delete product categories
The slider page allows admin to edit and delete the slider image of the store's homepage interface.
Order page
Orders page helps admin view customer orders.
Customer page
The Customer page helps admin view and manage their customers
Coupons page helps admin manage discount codes, admin users can add, edit, delete discount codes
Result
• Complete the website as set out at the beginning
• The system works fine on all browsers
• When performing testing the functions work well as required, there is no case that the customer's order is not received
• Online shopping is simple and easy to do
• The system contributes to saving time for researching and buying quality fashion products.
Valuation
• The basic system fulfills the necessary functions for online purchases
• Diverse products, convenient payment method
• When the admin deletes the order in the Admin Page, the Users’s order history will be deleted so it can not be checked if any problem happens
• Sales-off, coupon function are now just only manual not automatic for the products
• Does not have the chart to check avenue
• Does not have online payment.
Future Development
• Helping customers who do not register as a member can still buy goods
• Add an online banking payment function, update more suppliers with the most purchases
• Allow admin decentralize permissions for smaller admins
Group Member Student ID Role
Phan Hoàng Long 17110046 Admin/User Role
Nguyễn Quang Minh 17110051 Admin/User Role
All members: use case, sequences, database…
[1] HTML5: https://www.w3schools.com/html/default.asp
[2] CSS: https://www.w3schools.com/css/default.asp
[3] Tailwind CSS: https://tailwindcss.com/docs
[4] PHP: https://www.php.net/docs.php
[5] XAMPP: https://topdev.vn/blog/cai-dat-xampp/