Thiết kế website quản lý cửa hàng mỹ phẩm Design a website for cosmetic store management Thiết kế website quản lý cửa hàng mỹ phẩm Design a website for cosmetic store management
OVERVIEW OF WORDPRESS AND MYSQL
Introduction to web development
Website programming plays a crucial role in transforming static web designs and customer requests into fully functional websites that engage users and interact with databases This process is divided into two primary areas: Front End development, which focuses on the user interface and experience, and Back End development, which manages server-side operations and database interactions.
Figure 1-1 Popular programming languages in front-end and back-end
(source: https://200lab.io/blog/web-development-la-gi/)
Front End development involves using HTML, CSS, and JavaScript to create user-friendly interfaces for websites and web applications The primary objective of website design is to enhance usability across various devices, which presents a significant challenge due to the diverse screen sizes and resolutions users employ Consequently, Front End Developers must account for these factors to ensure consistent website performance across different browsers, operating systems, and devices.
Back End developers are essential for managing the intricate business logic that ensures seamless system operations They handle user data and analysis algorithms, playing a crucial role in bringing websites to life To excel as a Back End Developer, proficiency in server-side languages and database manipulation is essential.
• Server-side languages to write Back End: C#, Java, Python, Ruby, … And must include knowledge of web frameworks that come with these languages: ASP.NET MVC, Spring, Django, Rails
• SQL database architecture: MS SQL Server, MySQL, Recently some
NoSQL databases are popular: Neo4j, MongoDB,
• Knowledge about the web in general, how to write Web Services, how to log in and assign permissions
• Architecture of some CMS: WordPress, Joomla, Umbraco,
HTML, or Hyper Text Markup Language, is essential for formatting and displaying text in web browsers, serving as the backbone of any website.
Hypertext refers to "text within text," where clicking on a linked word directs you to a new web page Markup language, a type of programming language, enhances text interactivity and flexibility by allowing the integration of text into images, tables, and links An HTML document utilizes various HTML tags, each serving to organize and present different content effectively.
HTML is a simple and easy-to-use markup language that allows for flexible web page design and straightforward result display through various tag formats It enables linking to other websites and is platform-independent, functioning seamlessly on systems like Windows, Linux, and Mac Additionally, HTML supports the integration of images, videos, and sounds, enhancing the attractiveness and interactivity of websites.
➢ Difference between HTML and HTML 5
HTML5, released in 2014 as an upgrade to the original HTML introduced in 1999, brought significant enhancements to web development Notably, HTML5 allows for the direct embedding of video and audio files into web pages using the and tags, eliminating the need for external plugins like Flash Player.
The article highlights the enhanced features of modern web standards, including support for Scalable Vector Graphics (SVG) and MathML, which facilitate the display of mathematical formulas and chemical structures It also emphasizes improvements in language with the introduction of numerous semantic tags that enhance user comprehension of website content Additionally, it points out the expanded range of form types supported, surpassing traditional HTML to include fields for email, date, time, phone number, URL, and search functionalities.
Additionally, some HTML tag errors have been removed in the HTML5 version For example: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike
Figure 1-2.Compare websites when adding CSS
CSS, or Cascading Style Sheets, is a language designed to style and format HTML elements on web pages While HTML is responsible for structuring content like text, headings, and tables, CSS enhances the visual presentation by allowing developers to modify aspects such as colors, fonts, and layout This separation of content and style enables greater flexibility and creativity in web design, improving user experience and engagement.
Streamline HTML code creation for your website by utilizing designated tag formatting styles such as bold, italics, underlined text, and colored text This approach not only results in cleaner source code but also effectively separates content from formatting, making updates to your website content a breeze.
Figure 1-3.CSS properties through each version
(source: https://wiki.matbao.net/css3-la-gi-tu-a-den-z-cac-tinh-nang-moi-cua- css3-so-voi-css/)
1.3 Learn about JavaScript programming language
JavaScript is a lightweight, cross-platform programming language that supports object-oriented programming It seamlessly integrates with its host environment, allowing it to manage and interact with various objects effectively.
JavaScript is a high-level programming language that shares similarities with C/C++, Java, Python, and Ruby, making it accessible and close to natural human language As a dynamic programming language, it is designed to enhance performance during installation, in contrast to static programming languages like C/C++, which focus on optimizing hardware performance Additionally, JavaScript is a scripting language that does not require compilation or linking, allowing for real-time translation during execution Furthermore, it is an object-based language, resembling object-oriented programming, which facilitates the use of objects in coding.
JavaScript does not support multimodal and polymorphic computation o Is a prototype-based language (prototype-based): is a type of implementation instruction object, in which the object's micro- actions can be reused
JavaScript is a versatile language essential for web development, often used alongside HTML and CSS It powers numerous front-end frameworks such as Angular.js, React JS, and Vue.js, enhancing user experiences On the server side, Node.js enables JavaScript applications to run efficiently Additionally, databases like MongoDB and CouchDB utilize JavaScript for scripting and querying JavaScript also facilitates the creation of desktop applications through the Electron framework, with popular tools like Visual Studio Code and Atom being notable examples For mobile app development on Android and iOS, React-Native allows developers to leverage JavaScript's capabilities across platforms.
Figure 1-4 Wide spectrum of programming languages (source: https://dantri.com.vn/suc-manh-so/ngon-ngu-lap-trinh-nao-pho-bien-nhat- hien-nay-20170421203318885.htm)
JavaScript offers numerous benefits for web development, including reduced server interaction by validating user input before it reaches the server, which decreases server load It provides immediate feedback to users, eliminating the need to wait for page reloads to correct input errors Additionally, JavaScript enhances interactivity by enabling dynamic responses to mouse movements and keyboard actions Furthermore, it allows for a richer interface through features like Drag and Drop components and sliders, significantly improving the user experience on websites.
JavaScript offers several benefits, including ease of mining and the ability to execute code on a user's computer However, it has notable limitations, such as restricted file access for security reasons and a lack of support for networking applications Additionally, JavaScript does not possess processing or multi-threading capabilities, which can lead to inconsistent performance across different devices due to varying declarations.
Figure 1-5 Home page PHP interface
SYSTEM ANALYSIS AND DESIGN
Introducing online sales website
Discover a diverse range of products on our sales website, featuring payment upon receipt for your convenience We efficiently manage sales for stores and companies, providing users with detailed item descriptions and accurate pricing Enjoy fast access speeds and a user-friendly interface for a seamless shopping experience.
The website has an easy page for customers and an easy page for administrators.
Analyze functions
Table 2-1 The table describes the client-side functionality
1 Register an account Users can register for an account using their email
2 Log in to your account
Users need to log in to their account to be able to purchase products and view the history of purchased products
3 Sign out of your account The user logs out of the logged in account from the website
All users accessing the website will be able to view the products on the website
5 Search products All users can search for products quickly when entering keywords
6 View sorted products Sort by newest, oldest, ascending price, descending price, best product
Table 2-1 The table describes the client-side functionality
View products by each category added by the administrator on the website or view all products on the website
The shopping cart holds all the items a user has selected for purchase, allowing them to easily adjust the quantity of each product, remove unwanted items, and view the total cost of their selections.
Displays the number of products purchased, date of purchase, name, address, postal code, country code and details of purchased products
10 See details of each product
View the name, description, content, selling price of each specific product and view similar products in the shop
11 Direct payment Payment on delivery
12 View news All users accessing the website will be able to view news on the website
13 See details of each new View the content of each specific new
➢ Details of customer side functions:
Register an account: Customers enter their name, email address and password to register for an account
Processing: When customers register for an account, customer information will be saved in the database
Output: Customers can log in using their registered email and account password
Log in to your account: Customers enter their registered email address and password to log in to the website
When a customer inputs the correct account information into the database, their token is securely stored, allowing for easy access to their account during future logins.
Upon successful login, customers will be directed to the product page, where they have the option to save their account information for easier access during future logins.
Log out of account: Customer presses the log out button
Processing: When the customer presses the logout button, the saved token will be deleted
Output: Logs out the account and redirects the user to the login page
View product: Customers access the website address
Customers can view product displays on the website without needing to log into their accounts.
Product search: Customers enter keywords into the search bar
Processing: Get data when customers enter search keywords and return results
Output: Customers can view products with search keywords
View product arrangement: Customers select fields in input select
Processing: Sorts data according to the value of the input selection
Output: View products sorted by newest, oldest, ascending price, descending price, best product
View products by category: Customers choose different product categories
Processing: Filter out products belonging to each category according to the value of the input select
Output: View products in different categories
Shopping cart: Customer clicks to buy the product Click on cart
When a customer selects a product to purchase, the product information is sent to the shopping cart component Customers can easily manage their selections by clicking on the shopping cart, allowing them to add, edit, or delete items as needed.
Output: Customers can add, edit, delete products in the cart, and view detailed product information
View purchase history: Customers click on history
Processing: When the customer clicks on the history, detailed information about the product the customer has purchased and the purchase date and order price will be retrieved
Output: Customers can see details of the product they have purchased
View product details: Customers click details
Processing: Switch to a new page with detailed information
Output: Customers can view details of products available on the website
View product details: Customer clicks the payment button
Processing: Allows customers to place orders and pay upon receipt
Output: Customers can pay for purchased products
View new details: Customers click details
Processing: Switch to a new page with detailed information
Output: Customers can view details of new available on the website
View new: Customers access the blog website address
Processing: When customers access blog the website, the news display address on the screen can be viewed by customers who have not logged in to their account
Output: Customers view news on the website
Table 2-2 Table describing administrator-side functions
1 Product Management Add, edit, delete individual products Delete all products
2 Manage product catalog Add, edit, delete product categories
Manage all sold orders Displays the number of products sold, date of sale, name, address, postal code, country code and details of sold products
4 Get customer feedback Store feedback from customers
5 News management Add, edit, delete each news Delete all news
➢ Details of administrator side functions:
Product management: Manage product information including name, price, product details, product photos Functions to add, edit, and delete products
When the administrator selects "add product," they are directed to the add product page, where they input all relevant product information and click save to update the system and return to the product page The administrator has the option to delete individual products or remove all products within a specific category, with the system updating accordingly upon pressing the delete button Additionally, they can edit existing products by modifying the name, brand, price, and product details before saving the changes in the system.
Output: Administrators can add, edit, and delete products
Product category management: Functions to add, edit, and delete product categories
Processing: When the administrator selects the add, delete, and edit functions, information about the product catalog will be updated in the database
Output: Administrators can add, edit, and delete product categories
Manage details of orders: The administrator clicks on view history and then selects the order and clicks on view
Processing: When the administrator selects, the order information stored in the system will be displayed on the screen
Output: Administrators can view detailed information about products that users have purchased, including name, address, postal code, country code, product, quantity, and price of each order
News management: Manage news information including name, content
Functions to add, edit, and delete news
When the administrator selects "add news," they are directed to a page where they can input all relevant information Upon clicking "save," the data updates in the system, redirecting them to the news page The administrator has the option to delete individual news items or remove all news within a specific category, with the system reflecting these changes immediately Additionally, they can edit existing news by modifying the title and content before saving the updates in the system.
Output: Administrators can add, edit, and delete news
2.3.1.User-side functional hierarchy diagram
Figure 2-1 User-side functional hierarchy diagram
2.3.2.Functional hierarchy diagram for administrators
Figure 2-2 Functional hierarchy diagram for administrators
Usecase diagram
2.4.2 Usecase diagram for customer actor
Figure 2-4 Usecase diagram for customer actor
2.4.3 Usecase diagram for system administrator
Figure 2-5 Usecase diagram for system administrator
2.4.4 Usecase diagram for shopping cart management
Figure 2-6 Usecase diagram for shopping cart management
2.4.5 Usecase diagram for product management
Figure 2-7 Usecase diagram for product management
2.4.6 Usecase diagram for new management
Figure 2-8 Usecase diagram for new management
2.4.7 Usecase diagram for add to cart
Figure 2-9 Usecase diagram for add to cart
Figure 2-10 Usecase diagram for payment
2.4.9 Usecase diagram for update shopping cart
Figure 2-11 Usecase diagram for update shopping cart
2.4.10 Usecase diagram for add products
Figure 2-12 Usecase diagram for add products
2.4.11 Usecase diagram for delete products
Figure 2-13 Usecase diagram for delete products
Single Page Application model
A Single Page Application (SPA) is a web application that operates entirely on a single page, where all user interactions occur without reloading the page The entire website's HTML structure is preloaded once, enabling seamless navigation and a smooth user experience.
Figure 2-18 Comparison between Single Page Application and Server Side Rendering (source: https://www.excellentwebworld.com/what-is-a-single-page-application/)
Single Page Applications (SPAs) offer numerous advantages, including the capability to perform all functions of traditional display applications while providing enhanced speed, as they load all HTML, CSS, and JavaScript just once during use, transferring only data thereafter SPAs foster increased user interaction and enable faster search, calculation, and processing Additionally, they allow for parallel development of back-end and front-end components and support asynchronous processing SPAs simplify mobile application development by enabling programmers to reuse code for both web and native applications, and they can cache data, allowing for efficient data reuse even in offline scenarios.
While flexibility in design offers creative freedom, it can lead to a lack of standardization Additionally, both server and client optimization are essential for optimal performance The initial load may be heavy, which can negatively impact user experience and search engine optimization (SEO).
BUILDING A WEBSITE
Basic installation
Install the latest version of WordPress with the operating system you are using on the homepage: https://vi.wordpress.org/download/
After downloading the file from the WordPress homepage, unzip the file and start using it
Install the Visual Studio Code source code editor program on the home page:https://code.visualstudio.com/
Figure 3-2 Visual studio code homepage interface
Figure 3-3 Install Visual Studio Code
Open the downloaded file, click I accept the agreement and click Next next time, click Install to install
Figure 3-4 Visual studio code interface
Git, a distributed version control system (DVCS) introduced in 2005, has become a widely utilized tool for efficiently storing and managing source code It simplifies the deployment of websites to platforms like Heroku, making it an essential resource for developers.
Download git at the homepage: https://git-scm.com/downloads
Figure 3-5 Git homepage interface Open the downloaded file and select Next to begin selecting installation options
Figure 3-6 Install Git(1) Next, select the folder to save Git and select Next
Figure 3-7 Install Git(2) Leave the following options as default and click Next
Figure 3-9 Install Git(4) Select Install to start installing Git After successful installation, open Command Prompt and type: git version to check the git version
Build Website
Figure 3-11 Php Myadmin home page interface Add a new account user and create a database with the same name and all privileges
Figure 3-12 New account user addition interface
Download source code https://vi.wordpress.org/download/
Figure 3-13 Install WordPress Create a new folder in Xampp/htdocs & move unzip file download
Figure 3-14 Create new folder Access localhost/name folder, declear connection database and submit
Figure 3-16 Config rules Next, declear information needed
Figure 3-17 Declare information needed Finally, login with username and password
Figure 3-18 Login with username Upload theme Xstore and active it
Figure 3-20 Active theme Xstore Install plugin Xstore Core
Figure 3-21 Install plugin Xstore Core Select and import data demo
Figure 3-22 Import data demo Choose page builder
Figure 3-23 Choose page builder Install necessary plugins
Figure 3-24 Install necessary plugin Install successfully
3.2.3 Integrate contact button into website
3.2.3.1 Integrate chat messages into the website
First, from your personal Facebook page, quickly access the Fanpage page and click
Figure 3-26 Setting fanpage Next, go to "Messaging"
Then, go to “Add Messenger to your Website” and press “Get Started”:
Figure 3-28 Add messager to website Here, enter your website domain and click Setup:
Next, follow Facebook's steps to set up the Plugin as follows:
Finally, insert the copied code into the footer.php file
Figure 3-34 Messenger Plugin Chat Code
Add code into footer.php file
Website interface
Figure 3-38 Homepage interface when logged in
Figure 3-44 Add new category and all categories
After extensive research and development, I launched an online sales website featuring a user-friendly interface and efficient operations This platform effectively manages essential sales tasks and includes seamless online payment functionality, ensuring a smooth user experience and fast processing speeds.
I possess additional skills in website development, including proficiency in JavaScript and MySQL, along with a solid understanding of HTML, CSS, and WordPress Furthermore, I have explored new specialized architectures to enhance my knowledge of programming processes, which I apply to the development of websites.
Despite the positive outcomes, there are notable limitations in the management system, including the absence of comprehensive statistical charts for products, inventory data, and total revenue Additionally, users lack detailed information regarding the bill of lading process for their paid orders.
➢ Development direction of the topic
The sales website is currently incomplete due to management and user limitations I am committed to enhancing the website by adding essential features to ensure its full functionality in the near future.