PROGRAM TITLE: BTEC – Computing

UNIT TITLE: Website Design & Development

ASSIGNMENT NUMBER: Assignment 1

ASSIGNMENT NAME: Website Design & Development

SUBMISSION DATE: 12-02-2023

DATE RECEIVED: 04-02-2023

TUTORIAL LECTURER: PHAM SON TUNG

WORD COUNT: 6996

STUDENT NAME: NGUYEN DINH MINH DUC

STUDENT ID: BKC13067

MOBILE NUMBER: 0918350460

Summative Feedback:

Internal verification:
I. Basic concepts........................................................................................................5
1. Domain and DNS.....................................................................................................................5

a. What is the domain name?...................................................................................................5

b. What is DNS? DNS types?..................................................................................................5

c. The structure and management of domain names................................................................5

2. Web – server............................................................................................................................6

a. Hardware..............................................................................................................................6

b. Software...............................................................................................................................6

c. An operating system for server............................................................................................6

d. Common types of web servers.............................................................................................7

e, Client-server model:.............................................................................................................8

f. Protocols for accessing the web server.................................................................................9

g. Describe how to upload a website to the internet..............................................................11

3. Front-end and Back-end........................................................................................................13

a. Front-end............................................................................................................................13

b. Back-end............................................................................................................................13

c. Relationship between front-end and back-end...................................................................13

4. UX/UI and tools.....................................................................................................................14

a, UX/UI:...............................................................................................................................14

b, UX/UI design principles for websites................................................................................14

c, Differences between Custom-built websites and Online Website Creation tools:............15

5. Testing...................................................................................................................................17

a, Test Website.......................................................................................................................17

b, Tools for testing websites..................................................................................................19

c, Quality Assurance..............................................................................................................20
 6. Web development frameworks and technologies..................................................................20

a, Examine the effects of web development frameworks and technologies..........................20

b, Provides a variety of tools and methods for designing and constructing a unique website.
When should techniques and tools be compared and assessed?............................................22

c, Technologies, management services, tools and software selected to make a website built
on demand..............................................................................................................................23

7. Search Engine Optimization Website....................................................................................24

a, Concept:.............................................................................................................................24

b, How to enhance a website's search engine ranking...........................................................24

II. Website design and construction........................................................................25

1. Situation.................................................................................................................................25

2. Problem-solving.....................................................................................................................25

a) The website's functional and non-functional requirements...............................................25

b, The technology used: frontend, backend, web server........................................................26

c, ERD and database diagram................................................................................................26

3. Interface Design.....................................................................................................................28

III. Website construction.........................................................................................29

1. Website demo....................................................................................................................29

2. Result evaluation...............................................................................................................40

IV. References.........................................................................................................42
I. Basic concepts

1. Domain and DNS

a. What is the domain name?

- Client software that accesses websites uses a domain name, which is a text string connected to a
website's IP address in numeric form. A browser needs a domain name to find your website, just
as your home address or zip code aid a satellite router in finding your goods.

- Domain names are typically broken up into two or three parts, with a period between each part.
In a domain, identifiers are ordered from most general to most specific, read from right to left.
The top-level domain is the portion of the domain name to the right of the final dot (TLD). Both
"generic" TLDs like ".com," ".net," and ".org" as well as nation-specific TLDs like ".uk" and
".jp" fall under this category.

b. What is DNS? DNS types?

- The whole meaning of the term "domain name resolution system" is encapsulated in the
acronym DNS. In the simplest terms, DNS is a system that converts website domain names, such
as www.tenmien.com, to the matching digital IP address and vice versa.

- Display how domain names are arranged and controlled.

c. The structure and management of domain names.

- Domain names are arranged in specialized databases. These databases are part of the global
domain name registration system. Thanks to DNS, users can view the assigned IP address for the
relevant hostname (Domain Name System). A domain name is created by fusing a top-level
domain and a second-level domain. User-friendly hostnames are second-level domains. Other
top-level domains fall into three categories: generic, country-code, and new.
- All domain names are registered with The Internet Corporation for Assigned Names and
Numbers, or ICANN. As a result, ICANN is in charge of managing these domains. The
assignment of IP addresses is involved.

2. Web – server

- Web server, also called a web server, is a computer that is a part of a larger computer network.
Installed software on web servers allows them to serve online applications, store all the data, and
take over. The web server can process requests from web browsers and reply to clients using the
HTTP protocol or another protocol.

- Today's most popular web servers include Apache, Nginx, and IIs.

a. Hardware

- A web server is a machine that stores and transmits the individual files that make up a website,
such as HTML, pictures, CSS, and javascript files.

b. Software

- The hosts file at at least one HTTP server is controlled by a number of components that make
up the web server. A piece of software that comprehends URLs (web addresses) and HTTP is
known as an HTTP server (the way your browser displays web pages) Any browser needs a host
file on a web server at the most fundamental level, and it will use HTTP to request that file. The
HTTP server responds with an HTTP request after receiving a request made to the appropriate
web server address.

c. An operating system for server

- Windows Server:

+ Developer: Microsoft

+ Latest Version: Windows Server 2019

 + The most typical working signal is this one. With its widespread use and user-friendly
interface, Windows Server is preferred by many administrators because it is simple to
install, run, and use.

- Linux:

+ Developer: Open Source – Developed by Linus Torvalds

+ Latest Version: Linux Kernel 5.9.6

+ Latest kernel versions updated at Kernel

+ Linux, an operating system that was introduced later than Windows, gets around
Windows' drawbacks. Many programming communities should promote free Linux with
open source code.

+ Low cost of use; the majority of Linux software is free. The operating system has the
capacity to perform properly and is less vulnerable to malware and viruses.

- MAC OS X Server:

+ Developer: Apple Inc

+ New Version: Mac OS X Server 10.11

+ Is an Apple server operating system. used to control MacOS-based and Apple

ecosystem-compatible systems.

- Some additional operating systems:

d. Common types of web servers

- Nginx: Nginx is regarded as a lightweight web server, having little to no impact on the system's
resources. A popular open source research proxy is Nginx. This web server is described as being
relatively stable, having great performance, and having a standard configuration.

- Internet Information Services (IIS): Microsoft is the creator of IIS and offers a number of
services, including Web Server and FTP Server services. The Windows Server operating system
and IIS are integrated. Nearly 248 million websites are currently using the web server IIS (Data
from May 2015).

- Apache HTTP server: The most popular server in the world is Apache. Under the direction of
the Apache Software Foundation, an open source community creates and updates Apache. The
use of Apache is free for users.The Apache License governs the use of the Apache HTTP server.
By the middle of 2018, 53.3% of the top servers and 54.2% of active websites were served by
Apache. Windows, Linux, Unix, and MacOS are all supported platforms for Apache.

e, Client-server model:

- The client (client) and the server are the two fundamental parts of the client server computer
network concept (server). The server is where resources are stored and service programs are
installed in accordance with client needs. The Client, in contrast, consists of computers and other
electronic devices that can communicate with the server.

- Client: The person who uses the service is the client. It might be a particular business or
person. The same applies when the phrase is employed in a digital context. A computer is the
Client in Client Server (Host). They are able to use a certain service and obtain information from
the provider (Server).

- Server: The term "server" refers to a server or a medium used to deliver specific services. A
server is a remote computer in the context of this notion in the technology world. They serve the
purpose of supplying data (information) for a specific service or access to the service. Simply
put, the request originates from the Client, and the Server must fulfill it.

- Model example client – server:

+ Web server: Through the computer, the user types in the website address. The web
server receives the request from the client. The website's whole content will then be sent
back to the original client by the web server.

+ Mail server: Users write their emails. Sends to mail server from client. Following
receipt of the signal, Mail Server will begin receiving, storing, and searching for the
email address sent to before sending the mail.
 + File server: Client and file server exchange data. Here, the file server handles both file
storage and file transport. Users use the FTP protocol or a web browser to upload or
download files to the server.

f. Protocols for accessing the web server

- Internet protocol suite: The Internet works on a protocol stack, which is implemented by the
Internet protocol suite of protocols. The TCP/IP protocol suite is another name for the Internet
Protocol Suite. Transmission Control Protocol (TCP) and Internet Protocol (IP) are crucial
protocols in the Internet Protocol Suite (IP). The OSI model and the Internet Protocol Suite are
related but not identical. Additionally, not all layers match up effectively.

- Protocol Stack: The full set of protocol layers that make up the protocol stack cooperate to
give networking capabilities.

- Transmission Control Protocol (TCP): The foundational protocol of the Internet Protocol
Suite is Transmission Control Protocol (TCP). An Internet Protocol-complementing network
implementation is where the Transmission Control Protocol got its start. As a result, TCP/IP is a
common abbreviation for the Internet Protocol Suite. An octet stream—an 8-bit data block—can
be securely delivered across an IP network using TCP. The capacity to send commands and
detect faults is TCP's key feature. TCP is essential to all significant Internet services, including
file transfers, email, and the World Wide Web.

- Internet Protocol (IP): The Internet Protocol Suite's central protocol is called Transmission
Control Protocol (TCP). A network implementation that supports the Internet Protocol is where
the Transmission Control Protocol got its start. The Internet Protocol Suite is hence frequently
referred to as TCP/IP. An 8-bit data block called an octet stream can be delivered over an IP
network successfully using TCP. TCP's fundamental function is its capacity to send commands
and detect faults. The World Wide Web, email, and file transfers—all of the main Internet
applications—rely on TCP.

- Hypertext Transfer Protocol (HTTP): The World Wide Web's data communication
infrastructure is HTTP. Hypertext is structured text that employs links to connect the text's
nodes. For distributed and hybrid hypermedia information systems, HTTP is an application
protocol. The standard HTTP ports are 80 and 443. These ports are both safe.

- File Transfer Protocol (FTP): On the Internet and in private networks, FTP is the protocol
that is most frequently used for file transfers. The standard FTP port range is 20/21.

- Secured Shell Protocol (SSH): The main technique for securely managing network devices at
the command level is SSH. Due to the lack of functionality for secure connections in the Telnet
protocol, SSH is frequently used in place of it. The default port for SSH is 22.

- Telnet Protocol: The main tool for controlling network devices at the command level is telnet.
Telnet only offers a minimal, unsafe connection, as contrast to SSH's secure connection. The
default port for Telnet is 23.

- Simple Mail Transfer Protocol (SMTP): Email transmission from a source mail server to a
destination mail server and email transmission from a user to the mail system are the two main
uses of SMTP. The secured SMTP port (SMTPS) is 465 while the unencrypted SMTP port
(SMTP) is 25. (Non-Standard).

- Domain Name System (DNS): IP addresses are created from domain names using the Domain
Name System (DNS). Three servers make up the DNS hierarchy: the root server, the top-level
domain, and the authoritative server. 53 is the standard DNS port.

- Post Office Protocol version 3 (POP3): One of the two primary protocols used to retrieve
mail from the Internet is Post Office Protocol version 3. POP 3 is particularly easy to use because
it enables clients to download the entire contents of a server's mailbox and to remove items from
that server. The secured port for POP3 is 995, while the default port is 110.

- Internet Message Access Protocol (IMAP): Another important protocol for receiving mail
from servers is IMAP version 3. Content in the mailbox on the server is not deleted via IMAP.
IMAP's secure port is 993, while the default port is 143.

- Simple Network Management Protocol (SNMP): To manage networks, one uses the Simple
Network Management Protocol. Network devices can be monitored, configured, and controlled
via SNMP. Network devices can also be configured using SNMP traps to alert the central server
when particular events take place. SNMP uses ports 161 and 162 by default.

- Hypertext Transfer Protocol over SSL/TLS (HTTPS): Similar services are provided using
HTTPS and HTTP, but with a secure connection made possible by SSL or TLS. HTTPS's
standard port is 443.

g. Describe how to upload a website to the internet.

- Step 1: Choose a reputable hosting company.

+ A website's web hosting is a crucial component. It may be necessary to give your

hosting company and plan some careful thought before selecting them for your website.
You should make sure you are getting all the features you require because not all hosts
are created equal.

Step 2: Pick an uploading method for your website.

+ The development and upkeep of a website should not be taken lightly. It's crucial to
pick a premier web host with all the tools you need to launch your website.

+ While choosing a hosting provider, the following factors should be taken into account:

+ Your website hosting space is entirely under your complete control. The likelihood that
you will experience issues as your site grows increases the less control you have over
your shared hosting.

+ There is live support available. A reputable hosting company ought to have a team of
experts on hand to help you whenever you need it. Nothing is worse than encountering
issues and having to wait days for a response.

Step 3: Before extracting, upload the backup website.

+ Most web hosts provide a method for automatically backing up websites. However,
occasionally this backup service might not function, in which case you will have to
perform the backup manually.
 + When manually backing up your website, keep in mind that you must download both
the website files and the database. If not, the backup won't function and your data could
be lost.

Step 4: Check that the files are in the root directory.

+ To prevent this from happening, you must ensure that all of the files are located in the
public HTML directory, which is the domain's root directory. Using the File Manager,
you can move the files on your website. To move a subdirectory, all you need to do is
perform a right-click on it, select Move from the menu, and then select public HTML as
the target.

+ The website's data files are all located in the root directory. As a result, you must
determine whether the files are present in this folder already or not.

Step 5: Upload the database to a MySQL database.

+ Log in to the cPanel.

+ Locate the Databases section, then click the phpMyAdmin icon

+ If the database does not exist, please create a database first, a user, and give the user
full privileges via the MySQL Databases. Note the username and password.

+ You may want to refer to this article for instructions: How To Create or Delete a
MySQL Database or User.

+ Inside the phpMyAdmin, select the new database name from the left-hand menu

+ Click the Import tab in the main area of phpMyAdmin.

+ Browse for the .sql file on your computer using the Choose File button.

+ Once the .sql file was attached, scroll down and click on the Go button.

+ A confirmation prompt will appear, notifying you about the successful import.

Step 6: Examine the fundamental functionality of the website.

 + Once you've finished uploading, it's time for a final review.

3. Front-end and Back-end

a. Front-end

- Frontend design and development simply refers to creating user interfaces for websites and web
apps using HTML, CSS, and JavaScript so that people can view and interact with them directly.
Making a website simple to use when a user opens it is the aim of web design.

- Some Ex:

b. Back-end

- Backend refers to the entire system that supports the operation of a website or application,
which includes servers, programs, and databases. It saves and organizes data in addition to
making sure everything on the client side of the website works properly. It is the portion of the
website that users are unable to access or interact with. The backend processes each request and
command and chooses the appropriate data to display on the screen. The server can more easily
manage the Backend when the application saves the entered user information on the server's
databases. The languages used to create BackEnd include PHP, C++, Java, Python, JavaScript,
Node.js, C#, Ruby, REST, GO, and others. Express, Django, Rails, Laravel, Spring, and other
well-known backend technologies.

c. Relationship between front-end and back-end

- Front-end is a notion that contrasts with Back-end. Front-end is the tip of the iceberg if Back-
end is the sink. Front-end is more explicitly the component that interacts with users and appears
outside of the user interface. It thus emphasizes aesthetics, usability, and visual appeal.

- Back-end is the work done in order to present data from the internal database to the server.
With each order issued, the fundamental purpose is to store data and rapidly and properly
retrieve it.

4. UX/UI and tools

 a, UX/UI:

- UX: User experience design, put simply, is the process of organizing the feelings a person has
while interacting with a product. The interaction that a human user has with routine products and
services is the main focus of UX design. Making use of these products and services, whether
they are digital or physical, simple, logical, and enjoyable is the aim of UX design.

- UI: User interface (UI) design is the user-centered method of creating a digital product's
aesthetics. In essence, they design the user interface of a website or application. The graphical
design of the application is its interface. These interfaces should not only be useful, but also
simple to use and attractive to the eye. The visual touchpoints that enable users to interact with a
product are the main focus of UI designers. Typography, color schemes, buttons, animation, and
other imagery can all fall under this category. Consider all the actions you could take on an app,
such as slide to delete, pull down to refresh, text entry, etc.

b, UX/UI design principles for websites

- Useful and quality content: Users determine whether to visit a website for more information
after only 8 seconds of viewing the content there, according to Microsoft study. This implies that
the volume of web traffic will depend on the number of customers who view the material in that
little period.

- Uniform interface: A website that is deemed to be aesthetically pleasing typically satisfies the
following criteria: fixed fonts, synchronous content, lovely images, harmonious colors, eye-
catching layouts, etc. This not only makes visitors to the website more at ease but also aids
businesses in keeping them on the website for a longer period of time.

- Create a demo first: Making a test version is one of the guidelines to follow while developing
a typical UX/UI website. You should test out your website to gather feedback from users before
launching it. The web designer will proceed to alter the website based on this feedback to raise
the level of the final output.

- Limit the use of many operations: Users currently favor products that are quick and
convenient. Consequently, you shouldn't disregard this when designing websites. Customers are
reluctant to repeatedly complete laborious tasks on a website or in an application.
- Quickly fix errors : After designing a website, mistakes are unavoidable. However, you must
act swiftly to correct errors and enhance the web whenever you discover them on your website or
receive feedback from your clients.

- Some UX/UI design tools : Sketch, InVision Studio, Axure, Craft, Proto.io, Adobe XD,
Marvel,….

c, Differences between Custom-built websites and Online Website Creation tools:

- Online Website Creation tools : is software that enables you to build an attractive, useful
website without any design or coding experience. With this software, creating a website is
incredibly simple. All you need to know is how to drag and drop, and you can then use the
software's features to create a website that looks great.

- Custom built sites: Specifically designed for the requirements of your business, a custom
website. Typically, a developer will create this to fit your company's needs. Examples of custom
elements that can be used on a website include colors, layouts, symbols, images, and fonts. By
making changes to the template, you can create a unique website, or you can start from scratch
by writing code or using a page builder. Custom websites are simple to update and will grow
with your business. Compared to templated websites, customized websites are easier to edit and
more likely to last with new additions.

Custom built sites Online website creation tools

Efficiency - Distinctive design - Create a website with little to no

coding knowledge by simply
- Compared to online websites,
dragging and dropping - A website
custom designed websites are more
building tool online comes with a pre-
adaptable and extraordinary. They can
made template that lets customers test
be created by the designer using the
their website before buying. The pre-
specifications provided by the client.
made template, however, is only
capable of performing a few tasks.

- Some websites don't fully support

SEO and marketing tools, and users
are unable to make any modifications

Effectiveness Websites built from scratch are
simpler to update. better optimization
for search engines. endless design
- But building a website takes a lot of
time and costs more than using
website building tools.
- Your website can be adjusted and
optimized to load quickly.
Functionality Limited in terms of graphic design
and navigation. Functionality may be
limited on template websites.
UX – User The resources are beneficial and will
Experience help you produce high-quality goods.
Compared to a custom-built website,
they are frequently cheaper and more
quickly developed.
UI – User Interface adaptable to any type of design
5. Testing
a, Test Website
to the website.
- Websites are well-designed yet offer
few features and services.
- Easily and rapidly build a website.
- Pay for both hosting and a website
builder at the same time. The website
loads pretty quickly. Some templates
weren't made or kept up with very
well. There are frequently a few
security concerns.
Graphic design and navigation are
both constrained. The functionality
may be constrained on template
webpages.
You may create valuable products
with the help of the instruments,
which are helpful. Compared to a
custom-built website, they are
typically quicker and less expensive
to construct.
Responsive to the standard website
interface
- Website testing is the process of examining and identifying potential flaws on a website or
online application. Before it is made available to users, a website-based system must go through
extensive testing from start to finish.

- By testing the website, a business or organization can ensure that the system is usable and can
receive approval from real website visitors.

- The interface (UI) and functionality are the most important considerations when evaluating a
website.

- The most popular kinds of website testing include:

+ Functional testing: A website's functionality is tested using a variety of testing criteria,

including user interface, APIs, database, security, client and server, and fundamental
website functionalities. It is very convenient to perform both manual and automated
functional testing with functional testing. It is done to test how well each feature on the
website works.

+  Usability testing: Nowadays, usability testing is an essential component of any web-

based project. It can be conducted by testers like you or a small focus group that
represents the web application's target market.

+ Interface Testing: Application, Web, and Database Server are the three areas that will
be tested here.

• Application: Test output is displayed correctly on the client side and test
requests are correctly sent to the database. If there are any errors, they must be
detected by the application and displayed only to the administrator, not the end
user.

• Web server: The test Web server is able to handle every request from an
application without denying service.

• Database server: Verify that queries sent to the database return the desired
information.
 • When the connection between the three layers (Application, Web, and Database)
cannot be made, test how the system reacts and what message the user sees.

+ Database Testing: Your web application's database is a crucial component, so

emphasis must be placed on thoroughly testing it. Testing will involve the following:

• Check to see if any errors are displayed while running queries.

• When adding, updating, or deleting data from a database, data integrity is

upheld.

• Examine query response times and make any necessary adjustments.

• In your web application, test data that was retrieved from your database is
accurately displayed.

+ Compatibility testing: Compatibility testing makes sure that your web application
works properly on a variety of devices. This would comprise:

• Test for browser compatibility: The same website will appear differently in
different browsers. You must test to see if your web application works properly
with JavaScript, AJAX, and authentication across all browsers. You can also
check for compatibility with mobile browsers.

• With a change in operating system, the rendering of web elements like buttons,
text fields, etc. changes. Verify that your website functions properly on a variety
of operating systems, including Windows, Linux, Mac, and browsers, including
Firefox, Internet Explorer, Safari, and others.

+ Performance Testing: This will guarantee that your website functions properly under
all loads. Activities for software testing will comprise but not be limited to:

• Response times of web applications at various connection speeds

• Test the load on your web application to see how it responds to both normal and
peak loads.
 • To find out where your website breaks when subjected to peak-hour loads that
are above normal, stress test it.

• Test the site's ability to bounce back if a crash due to peak traffic occurs.

• Make sure to enable optimization methods like gzip compression, browser

caching, and server side cache.

+ Security testing: For e-commerce websites that store sensitive customer data like
credit cards, security testing is essential. Testing will involve the following:

• Test It's best to prevent unauthorized access to secure pages.

• No one should be able to download restricted files without the proper access.

• After an extended period of user inactivity, check sessions are automatically

terminated.

• The website should redirect to SSL-encrypted pages when SSL certificates are
used.

b, Tools for testing websites

- A few tools for testing websites:

• testRigor: You can directly express tests as executable specifications in plain English
with the aid of testRigor. Users of all technical levels can create end-to-end tests that
cover the mobile, web, and API steps in a single test and can range in complexity. Instead
of relying on implementation-specific details like XPaths or CSS Selectors, test steps are
expressed at the end-user level.

• Testpad: A simpler and more user-friendly manual test tool that is perfect for testing
web applications is called Testpad. It uses test plans that are inspired by checklists and
emphasize pragmatism over process. These test plans can be modified to fit a variety of
testing methodologies, such as exploratory testing, the manual side of Agile, syntax-
highlighted BDD, and even traditional test case management.
 • Selenium: Open-source Selenium is the most widely used and well-liked web
automation tool available today. One of the best website automation tools, it supports a
variety of operating systems, including Windows, Mac, and Linux, as well as popular
browsers, including Firefox, Chrome, IE, and Headless Browsers.

+ Programming languages like Java, C#, Python, Ruby, PHP, Perl, and JavaScript
can be used to create Selenium test scripts. Selenium's browser extension, Selenium IDE,
provides record and playback capabilities. You can write more intricate and sophisticated
automation scripts with the help of the robust Selenium WebDriver.

c, Quality Assurance

- A company can make sure that its products adhere to the industry- or company-set standards for
quality by using the quality assurance process. Quality assurance (QA) can also be thought of as
a business's procedure for raising the caliber of its output. Many companies see their QA
program as a promise to their clients and internal stakeholders that they will deliver high-quality
products with satisfying user experiences. To put it to use, we must perform the following:

• Develop and implement quality management policies that are suitable for each product.

• Develop and implement quality assurance policies and procedures.

• Carry out customary quality assurance and inspection processes.

6. Web development frameworks and technologies

a, Examine the effects of web development frameworks and technologies.

- Framework:

+ Promote code reuse among programmers to boost output.

+ The framework will always be kept current by the publishers, giving users a variety of
choices when looking for an appropriate coding strategy.

+ Frameworks allow for the connection of tools and databases, which is best for
supporting application development.
 + Applications can inherit a common structure from the Framework, simplifying and
streamlining later operation and maintenance.

+ The majority of frameworks in use today are built using open-source code, which
enables users to examine, modify, and develop it in accordance with pre-established
standards.

+ Supported and facilitated use of innovative and sophisticated technologies.

+ Minimizing repetitive tasks to save as much time and energy as you can.

+ When I did not directly create the program, the users listed below quickly check for and
fix bugs.

+ Everything follows a predetermined sequence, including interface design, coding, and

software testing

- Bootstrap:

+ Even those without a strong background in coding can create attractive landing pages
using Bootstrap. The only prerequisite is some level of CSS and HTML familiarity.
Additionally, Bootstrap is simple to integrate into both newer and older websites.
Numerous platforms, frameworks, and Bootstrap components can easily be incorporated
into your current CSS.

+ There are many templates available in Bootstrap. If you don't like them, you can make
your own customizations using the CSS file. Additionally, you can combine
customization with already existing code to increase functionality if you don't have the
time to start from scratch. This is all doable via the customization page.

- HTML5 and CSS:

+ Using HTML5 and CSS3 to create precise web pages and web systems that function
across devices, operating systems, and web browsers can be advantageous for businesses
that create and distribute web content and apps. Once published, you can go anywhere.
 The variety of devices, operating systems, and screen sizes present numerous design,
functional, and layout considerations and issues if standards are not adhered to.

+ A page won't rank highly in search engines if the website's foundation is not
semantically accurate. If your page's HTML is poorly written, difficult for search engines
to read, or lacks a logical document structure, no amount of content marketing or Search
Engine Optimization (SEO) will have an impact on rankings. HTML5's new components
can be relied upon when websites are reindexed on search engines because certain
HTML5 mark-up elements are essential when SERPs are created.

b, Provides a variety of tools and methods for designing and constructing a unique
website. When should techniques and tools be compared and assessed?

- Bootstrap: When you need to quickly construct a website using prebuilt frameworks, use
bootstrap. Without having a lot of coding experience, one can still create an attractive landing
page by using Bootstrap. The only prerequisite is some level of CSS and HTML familiarity.
Additionally, Bootstrap is simple to integrate into both newer and older websites. Numerous
frameworks, platforms, and Bootstrap components can easily be incorporated into your current
CSS. There are many templates available in Bootstrap. If you don't like them, you can make your
own customizations using the CSS file. Additionally, you can combine customization with
already existing code to increase functionality if you don't have the time to start from scratch.
This is all doable via the customization page.

- HTML5 and CSS: When you need to show the viewer the text's contents, use HTML. creating
things like tables, headings, and text paragraphs, among other things, by formatting web page
elements. CSS is used to control a variety of elements, including text color, font style, paragraph
spacing, and more. The design of the layout, display variations for various devices and screen
sizes, column sizes and layouts, images and background colors, as well as a variety of other
effects. Companies that create and distribute web content and applications can gain from using
HTML5 and CSS3 to create precise web pages and web systems that function across devices,
operating systems, and web browsers. Create once, distribute anywhere. Standards must be
followed or the range of
- Figma: This tool is used to create static user interfaces through drag-and-drop without writing
any code, and it supports a number of different operating systems, including Windows, Linux,
MacOS, etc. As a result, it is a design tool that is open to use and trouble-free. Because it makes
it simple for users to communicate with one another, Figma is a useful tool for teamwork. You
can easily follow the design process by viewing the avatars of each person in the file and the
updated modifications. Any authorized members may view, edit, or update the document file.

- JavaScript: When creating a script to facilitate user interaction on a website, use JavaScript. It
takes less time to compile JavaScript than other programming languages because it is a
"interpreted" language. A client-side script that accelerates program execution by reducing the
time required to establish a server connection is JavaScript. When creating a web page,
Javascript has the power to make it come to life. It's a type of scripting language that depends on
a main development team that already exists or on individuals who have established their own
scripts.

- Visual Studio Code: This program is used when you frequently begin website development
quickly and switch between tasks. Vscode is an excellent option if you want to create a
straightforward, gorgeous, and user-friendly interface that is suitable for programming beginners.
Code editing is possible with Visual Studio Code, which speeds up the creation and design of
websites. Visual Studio Code can also be referred to as VS Code. This editor runs without a hitch
on Windows, macOS, and Linux operating systems. Additionally, VS Code offers compatibility
with reasonably priced, functional mid-range computing hardware. Visual Studio Code makes it
simple to get started right away and stay productive with its extensive language support and tools
like syntax highlighting, bracket matching, auto-indentation, box selection, snippets, etc.

c, Technologies, management services, tools and software selected to make a

website built on demand.

- React: + React is used to build the front-end user interface (UI).

+ React isn't a framework, though (unlike Angular, which has more views).

+ React is an open-source project created by Facebook.

- Spring Boot: Spring-based apps can be created quickly and easily with the help of the
opinionated Spring Boot framework. Without having to continually write the same boilerplate
settings, developers can create Spring-based apps rapidly with the aid of Spring Boot.

- MongoDB: A document database providing the essential indexing and querying, as well as
scalability and flexibility. A complete CRUD application instance may be created with Spring
Boot, React, and MongoDB. The backend server utilizes Spring Boot, Spring Web MVC, and
Spring Data MongoDB for REST API. Axios, Bootstrap, React, and React Router are used to
build the front end.

7. Search Engine Optimization Website

a, Concept:

- It describes the process of changing your website so that it will be more visible when customers
search for products or services connected to your business on Google, Bing, and other websites.
more search engines You are more likely to get seen and draw in current and future clients to
your business if your pages appear more frequently in search results.

b, How to enhance a website's search engine ranking

- Update content often: The more frequently you change the information on your website, the
more frequently search engines will crawl it. The more frequently this occurs, the more quickly
new content will be discovered and ranked higher.

- Speed up page loading: If your site loads slowly, search engines will penalize you and give
you a lower ranking. If a website takes a lengthy time to load, users will stop visiting.

- Provide correct, comprehensive, and concise information and material: Creating a website
with accurate, complete, and concise content will draw visitors, improving the website's ranking
in search results.

- Make sure your website is mobile-friendly: Nearly 60% of all online traffic is generated by
mobile devices. Because of this, search engine rankings will favor websites that are optimized
for mobile devices.
- Research keywords and use them appropriately: Keywords are the words or phrases users
use in a search engine to locate a website or business. To make it simpler for customers to find
your website, choose keyword words that are relevant to your organization, services, and
location. Use these words in your content's page titles, title tags, and picture names.

II. Website design and construction

1. Situation

- Your role as an intern at S Chanels, a company that specializes in offering software solutions to
clients, is to learn about and manage the WEB: A customer of Cellphones is CP, who sells
phones, computers, and accessories. I was tasked with meeting and obtaining client requirements
in order to develop a web page. After a week, you must submit a CP detailing the tools used to
develop and design the website. A month later, we must present the website, make some
websites with the old design, and develop a script to check its functionality.

2. Problem-solving

a) The website's functional and non-functional requirements.

- Functional requirement:

ADMIN site CUSTOMER site

User management: displays all user information Home page: displays the products and other
and includes tools for adding new users, editing website-related data.
existing users, and removing users.
Product_category page: displays all items that
Category management: displays all category have been filtered by category.
information and has the ability to add, edit, and
remove categories. Product_detail page: show any and all product
details that you select.
Product management: displays all product
information and has features for adding new, Search: Customers can search for any product
editing, and removing products. they want by entering the desired keyword in the
search box, the product name, or the product code.
Order management: reveals all customer data as
well as information about the products they Menu: Showcase the product categories.
purchase.
- Non – functional requirement:

+ The website's features operate without errors or roadblocks.

+ Effective website speed.

+ Effective response to website visitors' needs.

+ User-attractive interface with an eye-catching design.

b, The technology used: frontend, backend, web server...

- Frontend: HTML5, CSS, Bootstrap, JavaScript

- Backend: SQL, PHP

- Web server: Apache

c, ERD and database diagram

-ERD:
- Database diagram:
3. Interface Design
III. Website construction

1. Website demo

- Admin site:

+Product category:
+ Add Product category:
+ Edit category:
+ Small category:

+ Add small category:

+ Edit small category:

+ Product:
+ Add product:

+ Update product:
+ Sort product by category:

+ Manage customer account:

 + Update account

- User site:

+ Login:
+ Home
+ Watch category:
+ Table category:

+ Laptop category:
+ Phone category:

+ Product ex:
 2. Result evaluation

a, Manual test

Test What is being How Date Expected Actual Action

test result taken
result

TC 1 Check the link Click on the February Go to the OK none

from “HOME” to “watch” section on “watch” page
10, 2023
“watch” page the header

TC 2 Check the link Click on the February Go to the OK none

from “HOME” to “tablet” section on “tablet” page
10, 2023
“tablet” page the header

TC 3 Check the link Click on the February Go to the OK none

from “HOME” to “laptop” section on “laptop” page
10, 2023
“laptop” page the header

TC 4 Check the link Click on the February Go to the OK none

from “HOME” to “phone” section on “phone” page
10, 2023
“phone” page the header

TC 5 Check the link Click any product February Go to the OK none

from “HOME” to product page has
10, 2023
“product details” product details
page

TC 6 Check the “Add Click on the “Add February more success OK none
new” button on new” button after information
10, 2023
the “Add entering the new
category” page information
 TC 7 Check the “Add Click on the “Add February more success OK none
new” button on new” button after information
10, 2023
the “Add entering the new
product” page information

TC 8 Check the After making the February Successfully OK none

“Update” button necessary edited
10, 2023
on the “edit changes, press the
category” page "Update" button.

TC 9 Check the After making the February Successfully OK none

“Update” button necessary edited
10, 2023
on the “edit changes, press the
product” page "Update" button.

TC Check the link to Click on the February Go to the OK none

10 the "prodduct " “product” section “product” page
10, 2023
page on the
admin page

IV. References

1. https://cellphones.com.vn/macbook-pro-14-inch-2021.html.

2. https://www.cloudflare.com/learning/dns/glossary/what-is-a-domain-name/.

3. https://www.crucial.com/articles/pc-builders/what-is-computer-hardware.

4. https://www.heavy.ai/technical-glossary/client-server.

5. https://www.w3schools.com/whatis/whatis_http.asp.

6. https://frontendmasters.com/guides/front-end-handbook/2018/what-is-a-FD.html.

7. https://www.guru99.com/what-is-backend-developer.html.
8. https://asq.org/quality-resources/quality-assurance-vs-control.