Design and Implementation of an Electronics E-commerce Website Thiết kế và triển khai website thương mại điện tử
OVERVIEW
Reason for choosing the topic
In today's fast-paced world, the demand for online shopping is on the rise, driven by the challenges of balancing a busy lifestyle This growing trend addresses the difficulties individuals face in purchasing essential items for their physical and mental well-being.
Information technology is rapidly evolving and becoming integral to various sectors, particularly in business Many industries are leveraging technology to enhance profitability, with online business emerging as a key player This business model not only benefits entrepreneurs but also addresses the pressing needs of consumers in today's fast-paced world.
When building a sales system, two primary technology platforms are considered: mobile applications and websites Mobile applications require users to download them on their smartphones, leading to limitations such as the need for users to redownload updates to access new features Additionally, developers must ensure the app's interface is visually appealing across various mobile devices In contrast, websites offer a more flexible solution; users can simply access the site via any browser on their computer or smartphone, and updates are applied automatically without disrupting user experience Furthermore, developers can focus on creating a design that performs consistently across stable browser versions, making websites a more efficient choice for online sales systems.
Today, website and application technologies are fully optimized for mobile and tablet devices, allowing for seamless cross-platform functionality This makes them more effective for online businesses, particularly for product introductions, compared to traditional app usage.
The author has chosen the topic "Building a Website to Sell Computers Online Using the Laravel Framework" to enhance business convenience and accessibility This website will cater to customers' shopping needs, allowing them to make purchases anytime and from anywhere.
Purpose
- Research and learn the process of building a website to sell computers online using Laravel framework
- Learn the theoretical basis of programming languages, MySQL database management system, Laravel framework
- Apply existing knowledge and understanding and learn more to build an online book sales website with main functions such as:
The system administrator (Admin) is essential for managing an online sales website, overseeing critical functions such as product management, article management, user account management, order processing, and overall system administration.
+ For customers: have the right to perform functions such as viewing product details, ordering and paying, searching for products, sending contact information, registering an account, logging into the system
Object and scope of inquiry
- Research object: building an online book sales website
- The online book sales system is a countrywide system that caters to all clients and enables simultaneous access for many users.
System survey
➢ Survey website https://www.fahasa.com/
Figure 0-1Website interface https://www.fahasa.com/
Figure 0-2Website interface https://www.fahasa.com/
- The website works quite quickly
- Displays images and product description information
- Website aimed at purchasing products via fanpage (facebook)
- The search tool is ineffective, as the product filtering based on price is inaccurate
- No recommendations for comparable goods are available
➢ Survey website https://www.vinabook.com/
Figure 0-3Website survey https://www.vinabook.com/
Figure 0-4Website survey https://www.vinabook.com/
- Quite fully functional for a sales website, but the login and registration functions do not work
- Has online payment function.Full information and advertising
- The website is quite old, with a lot of redundant information and images
- The search function is not good, filtering products by price is not correct
➢ Survey website https://sachhay24h.com/
Figure 0-5Website survey https://sachhay24h.com/
Figure 0-6Website survey https://sachhay24h.com/
- You can place orders without logging in
- Website speed is still slow
- No logo, how much discount
- There are no suggestions for similar products
➢ Survey website https://bookbuy.vn/
Figure 0-7Website survey https://bookbuy.vn/
Figure 0-8Website survey https://bookbuy.vn/
- The website has a beautiful, clutter-free interface
- The menu has discount icons and is easy to see
- Banners about new products, best-selling products, and flash sales are also clearly displayed
- Displays the number of products sold and product suggestions in the product detail page
- Can comment and rate products
- There is no login function
- Can't select the quantity of products you want to buy
- Product information is limited, only size
Conclusion
In the conclusion of chapter 1, the author conducted a survey of various online computer retail websites to identify key requirements for an effective e-commerce platform for computer sales This analysis also revealed shortcomings in current management practices As a result, the author developed a strategy to create a new, enhanced, and user-friendly posting system.
THEORETICAL BASIS
Database
The system uses the MySQL database system [1]
MySQL is a fast and user-friendly system for managing relational databases, widely used by businesses of all sizes Developed and supported by the Swedish company MySQL AB, it has gained immense popularity for its robust features and reliability.
- MySQL is an exceptionally robust software
- MySQL employs a standard variant of the famous data language SQL
- MySQL operates on various operating systems and with numerous languages such as PHP, PERL, C, C++, Java,
- MySQL has high performance and reliability, especially when handling extensive data sets
- MySQL is particularly friendly with PHP, a language worth learning for Web development
MySQL is capable of handling extensive databases, accommodating up to 50 million rows or more in a single table While the default file size limit for a table is 4 GB, it can be increased—provided the operating system supports it—potentially reaching a theoretical maximum of 8 TB.
- MySQL is customizable The open source GPL license allows programmers to adapt MySQL software to match their own environment
MySQL employs several data kinds, split into three types: integers, date and time types, and string types
Numeric data type in MySQL
MySQL uses all numeric data types according to the ANSI SQL standard Common numeric data types include:
An INT is a standard-sized integer that can be either signed or unsigned The signed INT has a permissible range from -2,147,483,648 to 2,147,483,647, while the unsigned INT ranges from 0 to 4,294,967,295 Additionally, the width of an INT can be selected up to 11 digits.
TINYINT is a compact integer type that can be either signed or unsigned When signed, it supports a value range from -128 to 127, while the unsigned variant allows values from 0 to 255 Additionally, users can select a width of up to 4 digits for this data type.
SMALLINT is a compact integer type that can be either signed or unsigned For signed SMALLINT, the value range spans from -32,768 to 32,767, while the unsigned variant allows values from 0 to 65,535 Users can specify a width of up to 5 digits for this data type.
MEDIUMINT is a medium-sized integer type that can be either signed or unsigned The signed range extends from -8,388,608 to 8,388,607, while the unsigned range spans from 0 to 16,777,215 This data type allows for a width of up to 9 digits.
BIGINT is a data type that represents a large integer, which can be either signed or unsigned The signed BIGINT has a range from -9223372036854775808 to 9223372036854775807, while the unsigned version ranges from 0 to 18446744073709551615 Additionally, it allows for a width of up to 20 digits.
FLOAT(M,D) represents an unsigned floating-point real number, where M defines the total display length and D specifies the number of decimal places, with a default setting of 10.2 In this format, 10 indicates the total number of digits, including the decimal places, while the decimal portion can extend up to 24 digits after the decimal point.
DOUBLE(M,D) refers to an unsigned floating-point real number, where M defines the total display length and D specifies the number of decimal places By default, these values are set to 16 for the total digits and 4 for the decimal places A DOUBLE can accommodate up to 53 decimal places, and the term REAL is interchangeable with DOUBLE.
- DECIMAL(M,D): Another“kind of unsigned floating point Each decimal digit consumes 1 byte Defining the display length (M) and the number of decimal places (D) are required NUMERIC is a synonym for DECIMAL
Date and Time data types in MySQL Date and Time data types are categorized into:
- DATE: A date in YYYY-MM-DD format, between 1000-01-01 and 9999-12-
31 For example, December 25, 2015 will be kept as 2015-12-25
- DATETIME: A combination of Date and Time in the format YYYY-MM-DD HH:MM:SS, between 1000-01-01 00:00:00 and 9999-12-31 23:59:59 For example, 3:30 PM on December 25, 2015 will be recorded as 2015-12-25 3:30:00 PM
- TIMESTAMP: A Timestamp from between midnight on January 1, 1970 and
2037 Looks pretty similar to the previous DATETIME format, the difference is that there are no hyphens between integers For example, 3:30 pm on December 25, 2015 would be recorded as 20151225153000 ( YYYYMMDDHHMMSS)
- TIME: Save time in HH:MM:SS format
The YEAR(M) function allows you to store a year in either a 2-digit or 4-digit format When using a length of 2 (e.g., YEAR(2)), the year can range from 1970 to 2069, represented as 70 to 69 If a length of 4 is specified, the year can be from 1901 to 2155 By default, the length is set to 4 digits.
String data type in MySQL
In MySQL, the string data type is one of the most commonly used data types, alongside numeric and date/time types The following are the various string data types available in MySQL, along with their descriptions.
CHAR(M) is a fixed-length string data type that can range from 1 to 255 characters, such as CHAR(5) If the actual value stored in a CHAR field is shorter than the defined length, the remaining space on the right is automatically filled with whitespace characters While specifying the length is optional, the default length is set to 1.
- VARCHAR(M): Variable-length string data, with length from 1 to 255 characters (eg Varchar(24)) We must define the length while establishing a VARCHAR field
BLOBs (Binary Large Objects) and TEXT fields can store up to 65,535 characters, making them suitable for handling large volumes of binary data, such as images and files The key difference between them lies in their sensitivity during sorting and comparison: BLOBs are case-sensitive, whereas TEXT fields are case-insensitive Additionally, there is no need to specify lengths for either BLOBs or TEXT fields.
- TINYBLOB or TINYTEXT: A BLOB or TEXT column having a maximum length of 255 characters We don't need to define length with TINYBLOB or TINYTEXT
- MEDIUMBLOB or MEDIUMTEXT: A BLOB or TEXT column having a maximum length of 16777215 characters.”There is no need to specify the length with MEDIUMBLOB or MEDIUMTEXT
- LONGBLOB or LONGTEXT:“A BLOB or TEXT column with a maximum length of 4294967295 characters We don't need to provide length with LONGBLOB or LONGTEXT
ENUM is a data type used to specify a field that can accept a predefined list of values, including the option for NULL For instance, to restrict a field to only accept the values "A," "B," or "C," you would define it as ENUM('A', 'B', 'C') This ensures that only these specified values or NULL can be stored in that field.
HTML language
HTML, or HyperText Markup Language, is a fundamental language used in web development It allows users to navigate between various web pages by clicking on links, with each page being referred to as an HTML document.
An HTML page consists of various small components denoted by tags, and we can identify if a website is developed in HTML or PHP by examining its URL Typically, HTML pages end with the suffixes HTML or HTM.
HTML, or Hypertext Markup Language, is a fundamental web programming language that is universally supported by all websites and internet browsers The latest iteration, HTML5, offers enhanced features and improved quality compared to its predecessors.
2.2.2 The role of HTML in web programming
HTML, or Hypertext Markup Language, serves as the foundational framework for creating websites by structuring elements like frames and organizing components It also facilitates the integration of various digital files, including videos, music, and images.
The most remarkable advantage and also the strength of HTML is the ability to establish structure and make the website obey the rules of a comprehensive system
HTML is an essential language for all websites, regardless of their genre or the programming languages used for data processing, as it is crucial for displaying content to users effectively.
For programmers or web developers, they must master HTML as a basic language before attempting to construct any website.”
HTML pages are structured using tags, which are enclosed in angle brackets, such as Most fundamental tags, with a few exceptions, have corresponding closing tags; for instance, the tag is closed with , and the tag is closed with Popular HTML tag templates can be found in Table 1.1.
CSS language
CSS, or Cascading Style Sheets, is a stylesheet language that defines the visual appearance and formatting of documents created in markup languages Primarily used alongside HTML, CSS enhances website design and user interfaces, but it can also be applied to various XML documents, including plain XML, SVG, and XUL.
CSS is used alongside HTML“and JavaScript in most websites to generate user interfaces for web apps and user experiences for many mobile applications
2.3.2 The role of CSS in web programming
Before the advent of CSS, web developers faced the tedious task of repeating tags for fonts, colors, background styles, element layouts, borders, and sizes on every web page, which consumed significant time and effort CSS revolutionized this process by allowing for centralized styling, streamlining web design and enhancing efficiency.
- Save a lot of time: CSS style definitions are saved in external CSS files so the complete website may be altered by altering just one file
- Provide more attributes: CSS provides more detailed features than HTML to determine the look and feel of a web page [5]
JavaScript language
JavaScript is an interpreted programming language based on prototype concepts, widely utilized for both client-side and server-side development, particularly with Node.js Originally developed by Brendan Eich at Netscape Communications, it was first named Mocha, later renamed LiveScript, and ultimately became known as JavaScript While its syntax resembles that of Java, it is more closely related to Self JavaScript source files typically use the js suffix.
The latest version of JavaScript is ECMAScript 7, which is a standardized iteration of the language Mozilla's browser version 1.8 beta 1 offers limited support for E4X, an extension designed to simplify XML handling, as specified in ECMA-357.
PHP language
PHP, which stands for "PHP: Hypertext Preprocessor," is an open-source programming language primarily used for server-side development It is particularly well-suited for web programming, allowing for seamless integration with HTML Optimized for online applications, PHP offers a fast and concise syntax similar to C or Java, making it easy to learn and facilitating relatively short development times As a result, PHP has rapidly become one of the most popular programming languages for creating websites, including some of the world's most visited sites.
PHP, the widely-used scripting language today, originated from PHP/FI, created by Rasmus Lerdorf in 2004 The initial version was a basic set of Common Gateway Interface (CGI) binaries in C, designed to track user activity on personal websites, hence the name "Personal Home Page Tools." As PHP evolved, it gained enhanced features, enabling users to connect with databases and develop dynamic web applications like guestbooks.
In June 1995, Rasmus Lerdorf released the source code of PHP Tools, allowing developers to utilize and enhance it for free By September of the same year, he introduced PHP's FI (Forms Interpreter), incorporating essential functions and Perl-style variables, while enabling HTML code integration This syntax, although similar to Perl, was more limited and inconsistent, requiring programmers to use HTML comments to embed PHP/FI code within HTML files Despite mixed reception, FI continued to evolve and proved to be financially successful.
By 1997, PHP/FI 2.0, the second rewrite of the original C version, gained immense popularity, attracting thousands of users globally and being installed on approximately 50,000 domains, which represented nearly 1% of all Internet domain names Despite the contributions of many individuals to the project's source code, it remained primarily a one-man endeavor at that time.
PHP/FI 2.0 was officially launched in November 1997 after an extended beta phase, but it was quickly replaced by the alpha versions of PHP 3.0, leading to subsequent releases of PHP 4 and PHP 5.
When the user calls a PHP page, the Web Server will call the PHP Engine to understand the PHP page and send the results to the user as seen below
2.5.4 Advantages and disadvantages of PHP language
• PHP is open source so it is completely free to use
• PHP works very fast and efficiently
• PHP supports dozens of connections to millions of different operating systems
• Simple PHP structure, easy to use for beginners to web programming
PHP provides a robust data system, originally designed for online applications, featuring numerous built-in methods that simplify tasks like sending and receiving emails and managing cookies.
• The rich library and strong support community make it easy to find resources as well as receive effective support whenever difficulties arise
• Can be used on numerous OS systems Programmers are able to modify this code to run on different operating systems without having to alter the code again
• The grammatical structure is not as neat and beautiful as other programming languages
• PHP only works on Web applications.
Laravel framework
Framework is a completely built class library, a framework for building and developing application software A framework can be compared to a collection of
Programmers can save valuable time by utilizing pre-designed materials tailored for their specific fields, rather than creating everything from scratch To maximize their efficiency and creativity, it is essential for programmers to learn how to effectively leverage these resources and seamlessly integrate them to develop innovative products.
MVC, which stands for Model, View, and Controller, is a software architecture design pattern widely used in software engineering This approach enables developers to decompose applications into three distinct components, each with its own specific responsibilities By separating these elements, MVC promotes independence among components, enhancing maintainability and scalability in software development.
• Model: is the component that contains all activities, database access, processing methods, data description objects such as classes, processing algorithms
• View: responsible for showing information, interacting with users, contains all GUI components such as textboxes, pictures, etc Simply put, it is a collection of forms or HTML files.”
The controller is responsible for managing processing logic by receiving and handling user requests, ensuring that the appropriate processing procedures are invoked For instance, this component handles queries from URLs and forms to effectively manipulate the model.
Laravel is an open-source framework for building web applications, structured around the MVC (Model, Controller, View) architecture, with its complete source code available on GitHub, as noted by Kungfu PHP.
Laravel was developed by Taylor Otwell, launched its first beta version on June
Laravel 1 was released in June 2011, featuring essential functionalities such as authentication, localization, models, views, sessions, and routing However, it did not include controllers, which prevented it from being a true MVC framework.
Laravel 2 was launched in September 2011, bringing several enhancements from the author and community Significant features include controller support, Inversion of Contrl support, Template Blade system
Laravel 3 was launched in February 2012, with a ton of new features including a command line interface, more support for database management systems, support for in-app event capture, and system management package management
Laravel 4 was released in May 2013 It is a makeover of the Laravel Framework, relocating and reworking support packages into a set delivered by Composer, a package dependency management application PHP independent
Laravel 5 was released in February 2015 Besides a plethora of new features and refinements as it is currently, Laravel 5 also introduced an internal directory tree structure for new application development.”
Currently the latest version of Laravel is Laravel 5.6: This version has some pretty cool new features:
• Laravel brings major improvements to the Logging system All logging configurations are moved to the config/logging.php file
• Single server task scheduling: If the application runs on multiple servers, we can schedule it to run on only one server instead of all
• Dynamic rate limiting: To limit access to a route within a certain period of time in previous versions, the maximum number of requests would have to be hard coded
• Some new Blade Directives: 2 new form blade directives appear, including
• Bootstrap 4: Laravl has defaulted support for bootstrap 4 instead of bootstrap 3 as before
2.6.6 Overview of basic features of Laravel
[13]Bundles: In laravel version 3.x, it provides a module packaging system, with numerous incorporated functionalities
Composer: In laravel version 4.x, utilized as a management tool with functionality such as adding installation packs and PHP functions enabling Laravel available in the Packagist repository
Eloquent ORM (Object Relation Mapping) facilitates the mapping of database objects and their relationships, providing internal methods for implementation while incorporating restrictions on the relationships between the underlying database objects It plays a crucial role in application logic, particularly within the controllers during application development.
Routes: Specifies the relationship between paths (urls), links (links) When a link is built using the route name, a unified link identifier is created by Laravel
Restful controller: Provides alternatives to segregate the functionality behind HTTP POST and GET queries
Class auto loading: Provides automatic loading of classes in PHP, without requiring to include classes Depending on the requirements, appropriate classes will be loaded, limiting unneeded classes
View: Contains HTML codes, showing data given by the controller
Migrations offer a version management system for database schemas, ensuring that online applications remain compatible with logical modifications and application code updates This system facilitates necessary changes in database layout, streamlining the deployment and upgrade processes for applications.
• Use the latest PHP features[14]
The PHP Laravel framework stands out due to its incorporation of the latest PHP features, which many other frameworks overlook By utilizing Laravel 5, developers can take advantage of recent advancements such as Namespaces, Interfaces, Overloading, Anonymous functions, and shorter array syntax This versatility has led to the creation of a wide range of impressive content management systems (CMS), ranging from simple to highly sophisticated, and spanning both open-source and commercial options.
Laravel's documentation is incredibly developer-friendly All versions of Laravel are supplied with proper documentation where users will find extensive descriptions of coding style, methods and classes.”
Web applications play a crucial role in notifying users about the latest deals and offers, while also ensuring that new users receive alerts upon registration The framework utilizes a clean API based on the SwiftMailer library, featuring drivers for various services such as Mailgun, SparkPost, SMTP, Mandrill, PHP's "mail" function, Amazon SES, and "sendmail." This allows users to send emails seamlessly through both cloud-based and local services.
Laravel framework provides backend caches like Memcached and Redis out-of- the-box Users can also modify several cache setups
• Integrated tool for command line - Artisan
Developers often face the challenge of tedious and time-consuming repetitive programming tasks To streamline this process, Artisan, a command line tool, enables them to efficiently create code frameworks and manage database systems By generating essential MVC files and overseeing assets along with their configurations, Artisan significantly enhances productivity for developers.
Integrating the npm and Bower packages with Gulp and Elixir allows users to effectively manage resources and dependencies in their projects This combination is recognized as one of the most reliable package sources within the PHP ecosystem, enhancing workflow efficiency.
Users can drastically cut the product development cycle since the framework assists with faster integration, in addition to the massive support community - Laracasts
Inversion of Control (IoC) is a powerful mechanism that allows developers to create new components without the need for additional library initialization This flexibility enables users to access these components from any coding environment, breaking free from the constraints of traditional monolithic structures.
The framework offers a convenient feature that allows users to create links to specific routes effortlessly By simply referencing the router's name, the framework automatically generates the appropriate URL This ensures that if any route modifications are necessary in the future, those changes will be reflected universally across the application.
Laravel offers a robust ActiveRecord implementation that facilitates seamless database interactions through its ORM (Object-Relational Mapping) system In the MVC framework, each user model corresponds to a specific database table, allowing for efficient data management The ORM supports various relationships, including one-to-one, one-to-many, many-to-many, has-many-through, polymorphic, and many-to-many polymorphic, ensuring that any changes made to a database table are automatically reflected in related data.
• Payment function is not supported[14]
UML language
Unified Modeling Language (UML) is a graphical modeling language used in object-oriented approaches to design and create information systems It provides a standardized set of symbols to facilitate effective communication and understanding among developers and stakeholders.
Designing effective UML models is essential for accurately representing both the architectural and operational aspects of information systems UML's modeling techniques significantly benefit designers, implementers, and end-users by providing a comprehensive visualization of the intended information system This holistic perspective facilitates a better understanding of user requirements and enhances service delivery.
The transition from the analysis phase to the design, evaluation, and testing of information technology application solutions involves the use of object-oriented models These models serve as a foundation for the automatic generation of programs in languages like C++ and Java Utilizing both static (Object Model) and dynamic models enhances the efficiency of object-oriented programming, making it a valuable approach in software development.
UML uses a unified notation system to represent model elements Collections of model elements form UML diagrams There are the following main types of UML diagrams:
• Collaboration Diagram or Composite Structure Diagram
7 Activity: characterizes the ability of a certain process to operate
Association relationship: represents the relationship between an actor and a use-case, or between classes
Dependency relationship: indicates the dependence of an element in a certain method on another element
Aggregation relationship: indicates that a class includes other component classes, not required to be complete
Generalization relationship: represents inheritance, meaning a class can inherit from another class in both attributes and methods
Cognitive relationship: represents the ability to perceive through a certain event or message It represents the relationship between a class and an interface
13 Composition relationship: represents a class that is composed of other component classes Figure 0-3Explanation of UML symbols[15]
Conclusion
In this chapter, the author presents essential theoretical foundations for the project's implementation, summarizing key solutions and technologies including UML, MySQL, PHP, Docker, and the Laravel framework.
The upcoming section of the report will focus on the system design analysis for an online computer sales website It will begin by outlining the system requirements, followed by a comprehensive analysis of the detailed system design This analysis will include the use of use case diagrams, sequence diagrams, activity diagrams, class diagrams, and culminate in the basic design and data structure for the website.
SYSTEM DESIGN ANALYSIS
Requirements specification
Online computer sales websites function as e-commerce platforms, requiring continuous updates and presentation of products It's essential to display specific product information immediately when a user clicks on an item to enhance the shopping experience.
Besides, online ordering needs to be done in the best and most simple way for users This is one of the major elements of the system
Effective system administration is crucial for the success of an online business website A system administrator must possess the necessary authorization to manage various functions, including product administration—covering products, attributes, categories, manufacturers, and related keywords—along with article management, order processing, user account oversight, and overall system management.
To effectively attract viewers and facilitate online transactions, the website dedicated to computer distribution must feature an appealing yet streamlined design.
From the foregoing analysis and what is learnt through the websites in the Overview part, the project to construct an online computer sales website has the following key functions:
The system administrator has the right to control all actions of the online computer sales site using Laravel framework:
The product management function encompasses various aspects, including product category management, manufacturer management, product style management, and keyword management Users have the ability to add, edit, and delete management items, while the product management system also provides enhanced features for searching and transferring product information.
- Article administration function group includes: article category management, article management Users are able to add, modify, and delete managed items
- Account management function group: user management, review management, comment management, contact management Users are allowed to conduct remove operations on managed functions
- Order management: Enables searching, exporting information, monitoring orders (including deleting products in the order), modifying order status, and deleting orders
- System“management function group: slideshow, event management, static page management, statistics Users are permitted to add, edit, delete presentations, events, static pages and examine statistics
The frontend of the internet computer sales site is built on the following standards: - Beautiful interface, easy and user-friendly operations
- Product information is rich and diversified, regularly updated with the latest offerings
- There is store contact information
- Simple font, easy-to-read graphics, harmonizing colors
- The system's data security must be high
- Ensure good operation when several users interact at the same time
- Website is interoperable with popular browsers
The frontend of the website providing computers online performs the following functions:
- Display best-selling products, new products, featured products, recently seen products, display product classifications such as textbooks, comic books, science and technology ”
- Customers can read extensive product information, send product reviews and comments
- Allow customers to purchase things
- Allow customers to signup and login in to the system
- Allows searching for products and news
- Allows browsing news and featured items
- Allows“account management: examine review of personal page, update profile information, manage orders, view favorite items, viewed products, view login history
• Interface: The system interface must be easy to use, intuitive, and friendly to all users
• Processing speed: The system must process quickly and accurately
• Security: High security and safety
• Compatible: Compatible with most current web browsers.
System design analysis
The primary actors of the system include:
An admin agent is responsible for various management tasks, including statistics, static pages, events, slides, orders, contacts, comments, articles, reviews, users, article categories, products, keywords, product styles, manufacturers, and product groups To access these features, the admin must log in.
A customer agent can efficiently assist users in various tasks, including searching for electronic products like phones, laptops, and watches, as well as accessing news articles Users can view detailed product information, place orders, and manage their shopping cart Additionally, the agent facilitates account registration, allows customers to comment and rate products, enables login to the system, collects contact information, and helps manage user accounts.
Usecase diagram
The Administrator, as the senior manager, holds the highest level of responsibility for the system and possesses comprehensive system rights, including the ability to log in.
30 managing product categories, production, product attributes, keywords, products, article categories, articles, users, reviews, comments, contact, slides, events, static pages, statistics, as shown in Figure 0-1
Customers have a group of customer functions: manage account information, search for products, articles, view product details, evaluate, comment, send contact, register, log in, place orders
Admin will choose to log in to the admin page
This“usecase allows administrators to add, edit, delete, and search user groups
3 Preconditions Usecase for admin to log into the system
4 The following conditions Required fields must be entered in the correct format”
To access the administration page, users must first navigate to the login interface and input their admin email and password The system will then verify the provided credentials, and upon successful authentication, redirect the user to the administration page.
- The system notifies that the login process has failed due to incorrect admin email or password - Select re-enter, the system requires re-entering admin email and password
3.3.3 Usecase for product portfolio management
Figure 0-3Usecase diagram for product category management
• Usecase specification for product portfolio management
Admin will choose the function to view, add, edit, and delete product categories in the system
Table 0-2Product catalog management usecase specification
Usecase name Usecase for product portfolio management
Brief description Usecase allows viewing, adding, editing, and deleting product categories in the system
Preconditions Admin has logged into the system
Required fields must be entered in the correct format
The user picks the type of action: add, update, delete product category information
The system notifies“you of invalid data entry, re-enter the information, return to step 1 of the main event flow
Adding a product category includes updating a list with relevant data, initiating a secondary event stream if the initial attempt fails, and notifying the user It also involves providing an interface for users to input product category details and select additional categories as needed.
To modify product category data while preserving the integrity of the product category list, initiate the sub-event stream In the event of an error, the system will generate a report Upon successful modification, input the updated data and select the product category that needs to be changed, after which the system will present a comprehensive list of product categories.
To remove product category information, first save the product category list and initiate the flow sub-event If the update fails, the system will show the existing product categories However, if the update is successful, you can proceed to select and delete the desired product category.
Figure 0-4Product management Usecase diagram
Usecase allows viewing, adding, editing, and deleting product information in the system
Table 0-3Product management usecase specifications
Usecase name Product management usecases
Brief description Usecase“allows viewing, adding, editing, and deleting product information in the system
Preconditions Admin has logged into the system
Required fields must be entered in the correct format”
The user picks“the type of action: add, modify, delete product information
To add product information, users can select additional products, prompting the system to display an input interface Upon entering the product details, the system will issue a notification for successful submissions In cases of incorrect information, the system will initiate a secondary event flow, ensuring that all valid entries are stored in the product list.
To edit product information, select the desired product from the system's list, input the necessary changes, and upon successful update, a notification will be displayed If the update fails, the system will trigger a secondary event stream and save the product list information.
To delete product information, select the desired product from the displayed list Upon successful removal, the system will send a notification If the process encounters an error, a secondary event flow will be triggered to circulate the product list information.
The system notifies you of invalid data entry, re-enter the information, return to step 1 of the main event flow
Figure 0-5Usecase diagram for manufacturer management
Usecase allows viewing, adding, editing, and deleting manufacturer information in the system
Table 0-4Manufacturer management usecase specifications
Usecase name Product management usecases
Brief description Usecase allows viewing, adding, editing, and deleting product information in the system
Preconditions Admin has logged into the system
Required fields must be entered in the correct format
The user chooses“the type of action: add, edit, delete manufacturer information
To add manufacturer information, users can select an additional manufacturer, prompting the system to display an interface for data entry Upon successfully entering the manufacturer details, a notification is issued by the system If the information is incorrect, a secondary event stream is shown, and the details are saved to the producer list for future reference.
- Edit manufacturer information: the system presents a list of manufacturers, choose the manufacturer that needs to be altered,
To modify the information in the category, input the necessary details Upon successful changes, the system will send a notification If the information is incorrect, the sub-event stream will be executed, and the maker list information will be saved.
To delete manufacturer information, select the manufacturer from the system's list that you wish to remove Upon successful modification, the system will provide a notification If an error occurs, follow the secondary event flow to address the issue, while ensuring that the manufacturer list information is stored accurately.
The system notifies you of invalid data entry, re-enter the information, return to step”1 of the main event flow
Figure 0-6Usecase diagram for product attribute management
• Usecase specification for product attribute management
Usecase allows viewing, adding, editing, and deleting product attribute information in the system
Table 0-5Product attribute management usecase specifications
Usecase name Usecase manages product attributes
Brief description Usecase allows viewing, adding, editing, and deleting product attribute information in the system
Preconditions Admin has logged into the system
Required fields must be entered in the correct format
The user picks the type of action:“add, update, delete product attribute information
To enhance product listings, users can input detailed attribute information after selecting additional attributes Upon successful entry, the system confirms the update; if unsuccessful, it triggers a sub-event stream to ensure the data is saved to the product attribute list.
To edit product attribute information, the system displays a list of attributes for selection Users can choose which attributes to modify and input the necessary changes Upon successful modification, the system will generate a report confirming the update; if unsuccessful, it will execute a sub-event stream while retaining the original product attribute list.
To delete product attribute information, the system displays a list of available attributes Select the attribute you wish to remove, and if the deletion is successful, a confirmation message will appear In case of an error, follow the sub-event flow to ensure the product attribute list is saved correctly.
The system notifies you of invalid data entry, re-enter the information, return to step 1 of the main event flow
Figure 0-7Usecase chart for keyword management
• Usecase specification for keyword management
Usecase allows viewing, adding, editing, and deleting keyword information in the system
Table 0-6Keyword management usecase specification
Usecase name Keyword management usecase
Brief description Usecase allows viewing, adding, editing, and deleting keyword information in the system
Preconditions Admin has logged into the system
Required fields must be entered in the correct format
The user picks the type of action: add, amend, delete keyword information.
To effectively manage keyword data, users can enter specific keyword information into the system's interface Upon successful entry, the system will send a notification confirming the addition If the input is incorrect, the system will initiate a secondary event flow to address the issue while simultaneously storing the information in a keyword list for future reference.
- Edit keyword information: the system shows a list of keywords, pick the keyword to edit, input the information that has to be changed, if the information change succeeds, the system
Category Meaning generates a notification, if incorrect, execute display sub-event stream, save keyword list data
Class diagram
Activity chart
Figure 0-20Login function activity diagram
Figure 0-21Registration function operation diagram
3.6.3 Functional activity chart for adding new product categories
Figure 0-22Activity diagram of adding new product category
3.6.4 Activity chart of product catalog editing function
Figure 0-23Product category editing activity diagram
3.6.5 Activity diagram of the product category deletion function
Figure 0-24Activity diagram of the product category deletion function
3.6.6 Functional activity chart added new comments
Figure 0-25Activity diagram of the add new comment function
3.6.7 Activity diagram of the comment deletion function
Figure 0-26Activity diagram of the comment deletion function
3.6.8 Newly added functional activity chart for evaluation
Figure 0-27Newly added function activity chart for evaluation
3.6.9 Activity diagram of the review deletion function
Figure 0-28Activity diagram of the review deletion function
3.6.10 Activity diagram of the function of adding new articles
Figure 0-29Operation diagram of adding new article function
3.6.11 Activity chart of adding new slide function
Figure 0-30Activity diagram for adding new slides
3.6.12 Activity diagram of slide editing function
Figure 0-31Slide editing activity diagram
3.6.13 Activity diagram of the slide deletion function
Figure 0-32Slide deletion activity diagram
3.6.14 Activity diagram of the article editing function
Figure 0-33Activity diagram of the article editing function
3.6.15 Activity diagram of the post deletion function
Figure 0-34Activity diagram of the post deletion function
3.6.16 Activity chart for adding new products
Figure 0-35Operation diagram of adding new product function
3.6.17 Product repair function activity chart
Figure 0-36Activity diagram of product repair function
3.6.18 Activity diagram of the product deletion function
Figure 0-37Activity diagram of the product deletion function
3.6.19 Activity diagram of the user deletion function
Figure 0-38Activity diagram of the user deletion function
3.6.20 Activity chart of order processing function
Figure 0-39Order processing function activity diagram
Entity association model
Conclusion
In Chapter 3 of the report, the author outlines comprehensive requirements specifications, including both functional and non-functional aspects of the system, as well as an in-depth design of its functions Building upon this theoretical foundation, the author will develop and present the system in Chapter 4.
INSTALLATION AND TESTING RESULTS
Administration page interface
Figure 0-1Statistics page interface The statistics interface will display the most common information for admins such as total orders, total members, total products, total reviews,
Figure 0-2Admin information page interface
After successfully logging into the system, the admin is presented with an interface that clearly displays their personal information Additionally, the right menu of the screen showcases a comprehensive list of system functions for easy navigation.
Figure 0-3Product category page interface
In the product category management interface, product categories in the system will be managed with the functions of adding, editing, and deleting Managed product
69 catalog information includes catalog name, photo, status, display status on the website, creation date (new addition date) of the catalog
The manufacturer management function encompasses essential tasks such as adding, editing, and deleting manufacturer information, which includes the manufacturer's name, email, phone number, and the creation date for newly added entries.
4.1.5 Product data management page interface
Figure 0-5Product data management page interface
Size management interface with information such as name, type, creation date with functions to add, edit, and delete product attribute information
Keyword management includes title information, keyword description, hot, and creation date Functions on the interface include adding, editing, and deleting keyword information
Figure 0-7Product management page interface
4.1.8 Interface of article category management page
Figure 0-8Interface of article category management page
Manage article categories including information such as name, photo, status, hot, creation date Main functions such as adding, editing, and deleting article categories
Figure 0-9Article management page interface Manage articles including title, category, photo, hot, status, posting date information Functions include adding, editing, and deleting
4.1.10 User account management page interface
Figure 0-10User account management page interface
User account management includes name, email, phone number, and creation date information In user account management, there is only the function to delete information
Figure 0-11Inventory management page interface Manage product data, enter quantity remaining and products that are out of stock
Figure 0-12Product review list page interface
The product review interface shows customer feedback on the product on the website with name, user, rating, creation date and deletion function
4.1.13 Product comment list page interface
Figure 0-13Product comment list page interface
The product comment management interface allows administrators to efficiently oversee customer feedback through a comprehensive list of comments, which includes essential details such as the user's name, comment content, and creation date Additionally, it features a comment deletion function to maintain the quality and relevance of the feedback.
Figure 0-14Contact management page interface Contact management includes name, email, and phone number information
Figure 0-15Order management page interface
When a customer places an order on the website, the admin's order management system displays comprehensive details, including order information, amount, account, status, and creation date The system also offers functionalities such as viewing and deleting orders.
Figure 0-16Slide management page interface
Slide management will include information such as slide name, status, location on the website, purpose, and creation date Main functions such as adding, editing, deleting
Figure 0-17Event management page interface Event management includes information such as title, link, banner, creation date with functions to add, edit, and delete event information
4.1.18 The page interface manages static pages
Figure 0-18Static page management page interface
Managing static page information enables administrators to create and maintain essential details for website pages, including the title, page type, and creation date Users can efficiently manage these pages by adding, editing, or deleting them as needed.
Above is the interface of admin functions, the next sections will be the website interface for customers, users who visit or buy products.
Customer interface
This is the first interface of the website when customers visit Here customers can see products, advertising banners, menus
4.2.2 Product review and comment interface
Figure 0-20Product review and comment interface
On the product details page, users can find a dedicated section for product reviews and comments, allowing them to both view existing feedback and submit their own insights about the product.
The product details interface provides a comprehensive overview of each item, featuring detailed descriptions along with customer reviews and comments This screen allows users to conveniently add products to their cart and save their favorite items for future reference.
The article details screen, on the left is the area for featured articles and best- selling products
Shopping cart interface, customers will place orders on this page, customers can choose to apply discount codes, contact information and payment methods on this screen
Account registration interface for guests, displaying required information form After successful registration, customers will automatically log in
Figure 0-25Login interface This is the login page interface
4.2.8 Interface for sending contact information
Send contact information, when the customer has a request and wants the store to contact them again, the customer will save the data they entered
Figure 0-27Search page interface Customers can search by product name and filter products by price, time, origin and reviews
Figure 0-28Account information page interface Customers can change contact information here
Figure 0-29Online payment page interface
Conclusion
In this concluding chapter, the author showcases the administration system interfaces and user pages, demonstrating that the system effectively addresses the identified problem and aligns closely with the analysis requirements.
Conclusion
- ACHIEVED RESULTS OF THE THESIS
After a period of focusing on implementing the topic, the Author has completed
Creating an online store for selling computers requires a visually appealing and user-friendly interface that ensures seamless navigation It's essential to implement effective functionalities that align with established business processes for optimal performance Additionally, prioritizing data security is crucial, although the current level may be considered moderate.
After completing the project of building a website to sell computers for Thanh Tuyen store, the author enhanced their foundational skills in website construction using PHP and MySQL, along with HTML, CSS, and JavaScript acquired during web application development Additionally, the author gained new specialized skills by studying programming concepts relevant to the application development process This experience not only improved their self-study capabilities but also provided valuable insights into website construction and software design These skills will serve as a strong foundation for the author's continued personal development and practical experience in the field.
• The functions are still simple, there is no function for users to share products
• Processing speed is not high, there are still some errors that arise when operating the system
• Customer information is not absolutely confidential
• Research, design and build functions: share products, for future users Website optimization is not done well, so the website speed is still slow, significantly affecting the user experience
• Develop the system towards multi-language support
• Continue to develop more realtime features
[1] wikipedia, "MYSQL," 6 2020 [Online] Available: https://en.wikipedia.org/wiki/MySQL
[2] Viettuts, "What is HTML?," [Online] Available: https://viettuts.vn/html
HTML, or HyperText Markup Language, is a fundamental language used in web programming that structures content on the internet It plays a crucial role in defining the layout and elements of web pages, enabling developers to create interactive and visually appealing websites Understanding HTML is essential for anyone looking to engage in web development, as it serves as the backbone of web content creation For more information on HTML and its significance in web programming, you can visit the original article by V Nguyen.
[4] viettuts, "What is CSS?," [Online] Available: https://viettuts.vn/css [Accessed
[5] topdev, "What is CSS?," [Online] Available: https://topdev.vn/blog/css-la-gi/ [Accessed 01 08 2020]
[6] H G, "What is JavaScript?," 22 1 2019 [Online] Available: https://www.hostinger.vn/huong-dan/javascript-la-gi [Accessed 1 August
[7] Trongthanh, "Things to know about ECMAScript," February 18, 2019 [Online] Available: https://ehkoo.com/bai-viet/essential-ecmascript [Accessed 01 08
[8] Wikipedia, "PHP," 6 2020 [Online] Available: https://en.wikipedia.org/wiki/PHP [Accessed 01 08 2021]
The PHP programming language is essential for web development, providing the necessary tools to create dynamic websites This article outlines the installation process of PHP, enabling users to set up their development environment effectively By mastering PHP, developers can enhance their programming skills and build robust applications tailored to their needs For a comprehensive understanding and practical guidance, refer to the installation instructions provided.
"MVC," 5 2020 [Online] Available: https://www.javacodegeeks.com/2017/09/mvc-delivery-mechanism-domain- model.html.