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 THI HUONG LAN

STUDENT ID: BKC13064

MOBILE NUMBER: 0869391816

Summative Feedback:

Internal verification:
 Table of Contents
I. Theoretical basics .................................................................................................................... 4

1.1 Domain and DNS ............................................................................................................. 4

1.2 Web – server ..................................................................................................................... 7

1.3 Frontend and Backend .................................................................................................... 16

1.4 UX/UI and tools ............................................................................................................. 22

1.5 Software testing and quality assurance ............................................................................... 25

1.6 Technologies and frameworks used to develop the website................................................ 26

1.7 SEO Website........................................................................................................................ 29

II. Website design and construction ........................................................................................... 29

2.1 problem statement .......................................................................................................... 29

2.2 problem analysis ............................................................................................................. 29

2.3 Website interface design ................................................................................................. 32

2.4 evaluate the website development process ..................................................................... 36

III. Evaluating the results of building WEBSITE .................................................................... 37

3.1 Demo website ................................................................................................................. 37

3.2 Result evaluation ............................................................................................................ 44

IV. References .......................................................................................................................... 48

I. Theoretical basics
1.1 Domain and DNS
What is the domain name?
The domain name is the name of a website operating on the internet, is the IP address for
each website. Domain names make it easy for users to recognize and remember your
website.
You can think of a domain name like a home address or a zipcode to locate it. Thanks to
that, users can find your website.
The IP address being used is currently IPv4 consisting of 32 bits, divided into 4 OCtets.
These octets are separated by a dot and expressed as a full 12-digit decimal.
Because it is such a long sequence of numbers, the user cannot remember it clearly.
Therefore, domain names are used to replace IP addresses, so that users feel easier to
remember and understand.
A domain name is an online address that resembles your house number
They contain a name (e.g. Hostinger) and a "domain" (e.g. .com).
Domain name registrations are overseen by ICANN.
Domains work by redirecting traffic to the specified server by pointing the domain name.
.com is the most popular domain name, accounting for 46.5% of the entire website.
ccTLDs are domains using country and area codes (eg .cn or .es).
gTLDs are generic domain names that are available to anyone for any purpose (eg. .org for
organizations).
Each registrar has a different way of registering domain names.
You can use the domain checker tool to find domain names that are available for
registration.
Domain names can be transferred from one provider to another.
Servers are physical machines that hold all of your website files.
Domain name registrars, like Hostinger, will always be available to help you with domain-
related issues
What is DNS? DNS types?
DNS stands for the phrase Domain Name System, which has the full meaning of the
domain name resolution system. In the most succinct way, DNS is basically a system of
converting the website domain names we are using, in the form of www.tenmien.com to a
digital IP address corresponding to that domain name and vice versa.

Show domain names are organized and managed

What is domain management? In essence, this is a job related to the synthesis of

management methods that users need to implement to maintain their domain name usage
rights as well as avoid unnecessary problems arising.

If a problem occurs because the domain name management process is not close and
appropriate, the owner of that domain name must take full responsibility.

This domain name registration is overseen by an organization called ICANN (Internet

Corporation for Assigned Names and Numbers). ICANN manages which domains can be
registered and is the central database of domain name information. When a company (or
person) buys a domain name, they can specify or connect to the desired web server. A
website on the internet needs at least two components, a web server and a domain name, to
function properly.

A web server is a computer that contains the files and databases that make up your website.
Then send it out to the internet every time someone visits your site from their server.

The domain name is the name people type into the browser, then because the domain name
points to the web server address, the browser can send a request to access that web server.
If you don't have a domain name, you'll have to type in an IP number that's hard to
remember – no one wants to do this.

Types of DNS:

-Traditional static domain name system.

All computers and network devices (hosts) on the Internet communicate with each other by
IP addresses. For the convenience of use, people use the name (domain name) to identify
that host, the Domain Name Server System is used to map the domain name to an IP
address, so that when you want to contact the host , people use an easy to remember string
of characters (domain name), instead of using an IP address which is a long series of
numbers that are difficult to remember.

Using static DNS service, subscribers of connection services provided by ISPs with
dynamic addresses such as dialup or ADSL cannot maintain the service server on their
own. For example, an organization that leases a high-speed ADSL line can improve the
speed of Internet access.

- Dynamic Domain Name System

In short, Dynamic DNS is a method of mapping domain names to highly variable IP

addresses (since not all computers use static IP addresses). Dynamic DNS service provides
a special program that runs on the computer of the user of the dynamic DNS service called
Dynamic Dns Client. This program monitors the change of IP address at the host and
contacts the DNS system every time the host's IP address (which is provided by the ISP
dynamically) changes and then updates the information to the database. DNS data about
that change of address. In this way, even if the server is regularly changed, the domain
name will still be pointed by the DNS server system to the correct IP address.

Shows how domain names are organized and managed ?

- Specific databases are used to hold domain names. The system of international domain
registrars includes these databases. DNS handles the conversion of IP addresses into
hostnames that can be read by humans (Domain Name System). There is a mixture of top-
level and second-level domains in the domain names. The hostname of the domain is its
second-level domain. The alternative gTLDs, ccTLDs, and nTLDs are the three categories
into which top-level domains are divided.

-Domain name registration is handled by the Internet Corporation for Assigned Names and
Numbers, or ICANN. The ICANN is in charge of handling these names as a result. The
assignment of IP addresses is a concern.
- iNET Systems provides a location to purchase your favorite domains. iNET can help you
grow your business by providing industry-leading services at accessible pricing.

- The domain name system is managed by a number of different organizations, including:

+ The non-profit Internet Corporation for Assigned Names and Numbers (ICANN) is in
charge of organizing the distribution of IP addresses and domain names as well as the
administration of the DNS root zone.

+ Registrars: Companies authorized by ICANN to sell domain names are known as

registrars. They are in charge of keeping track of all registered domains and the IP
addresses that go with them in a database.

+ Registries: Registries are companies that keep track of all second-level domains under a
specific gTLD in a database. They collaborate with registrars to guarantee the accuracy and
relevance of the domain name information.

1.2 Web – server

Web server, also known as a web server, in which is connected and linked to an extended
computer network. Web servers are installed programs to serve web applications, contain
all the data, and take control. The web server can take requests from the web browser and
send the response to the client via HTTP or another protocol.
The most used web servers today: are Apache, Nginx, IIs...
Hardware
A web server is a computer that stores the component files that make up a website (for
example, HTML, images, CSS, and javascript files...) and transmits them to the end user.
Software
The web server consists of several parts that control web users' access to the hosts file at at
least one HTTP server. An HTTP server is a piece of software that understands URLs (web
addresses) and HTTP (the way your browser displays web pages) At the most basic level,
any browser needs a host file on a web server, that browser will request that file via HTTP.
When a request is sent to the correct web server address, the HTTP server sends back a
request via HTTP.
 An operating system for server

Windows Server

Developer: Microsoft

Latest Version: Windows Server 2019

This is the most commonly used operating signal. Easy to install, operate and use, with its
popularity and friendly interface Windows Server is chosen by many administrators.

Linux

Developer: Open Source – Developed by Linus Torvalds

Latest Version: Linux Kernel 5.9.6

Latest kernel versions updated at Kernel

As an operating system born late, Linux overcomes the disadvantages that Windows has.
Free Linux with open source code should be supported by many programming
communities.

Low cost of use, most software on Linux is free. The operating system has the ability to
function well and is less affected by viruses and malware.

MAC OS X Server

Developer: Apple Inc

 New Version: Mac OS X Server 10.11

Is an operating system for servers by Apple. Used to manage computers using MacOS
and the Apple ecosystem.

some other operating systems such as

• CentOS (Server)

• Red hat enterprise linux (Server)

• Ubuntu (Client, Server)

• Debian

• Fedora

• FreeBSD

• HP–UX

• Solaris

Common types of web servers

Nginx

Nginx is considered a lightweight web server, the system's resources are not affected too
much. Nginx is considered an open source research proxy. This webserver is commented to
be quite stable, with relatively high performance and common configuration.
 Internet Information Services (IIS)

The father of IIS is Microsoft, with a variety of services such as Web Server services,
FTP Server services. IIS integrates with the Windows Server operating system.
Webserver IIS has reached nearly 248 million websites in use (Data from May 2015).

Apache HTTP server

Apache is the most used server in the world. Apache is built and developed by an open
source community under the auspices of the Apache Software Foundation. Users can use
Apache for free.

The Apache HTTP server is licensed under the Apache License. By mid-2018, Apache
served 54.2% of active websites and 53.3% of the top servers. Apache is allowed to
operate on: Windows, Linux, Unix, MacOS ....

Apache Tomcat

Apache Tomcat was created by the Apache Software Foundation. Tomcat serves Java
Servlet and JavaServer Pages (JSP) applications. Tomcat provides an HTTP server for the
plain Java language.

Lighttpd
Like Apache HTTP server, Lighttpd is open source software. Appreciated for its flexibility
and safety. Lighttpd was developed by the creator Jan Kneschke. Lighttpd does not
consume a lot of resources, low memory, small CPU. Lighttpd is built in C language.

Lighttpd is licensed by BSD and runs on popular operating systems such as Linux,
Windows, Mac OS, etc.

Client-server model:

Client server is a computer network model consisting of two main components: the client
(client) and the server (server). The server is the place to help store resources as well as
install service programs according to the client's requirements. In contrast, the Client
includes computers as well as general electronic devices that will send requests to the
server.

Client

Client is the customer who uses the service. It can be a specific organization or individual.
And when the concept is used in the digital realm, it means the same thing. In Client
Server, Client is a computer (Host). They have the ability to receive information from the
provider and use a specific service (Server).

Server

Server is a word used to talk about a server or a medium used to serve certain services.
When this concept is used in the field of technology, a server is a remote computer. They
have the function of providing information (data) for a particular service or access to the
service. In simple terms, the Client is the source of the request and the Server must serve it.
Model example client – server

Web server: The user enters the website address through the computer. The client sends the
request to the web server. Then, the web server will send the entire content of the website
back to the original client.

Mail server: User composes outgoing mail. Client sends to mail Server. After receiving the
signal, Mail Server will receive, store as well as search for the email address sent to and
proceed to send the mail.

File server: Client shares information with File server. Here, File server performs file
storage as well as file transfer. Users upload or download files to the server via FTP
protocol or web browser

protocols for accessing the web server

internet protocol suite

internet protocol suite is a set of protocols that implement the protocol stack on which the
Internet runs. The Internet Protocol Suite is sometimes referred to as the TCP/IP protocol
suite. TCP and IP are important protocols in the Internet Protocol Suite – Transmission
Control Protocol (TCP) and Internet Protocol (IP). The Internet Protocol Suite is similar to
the OSI model, but with some differences. Also, not all layers correspond well.
Protocol Stack

The Protocol Stack is a complete set of protocol layers that work together to provide
networking capabilities.

Transmission Control Protocol (TCP)

Transmission Control Protocol (TCP) is the core protocol of the Internet Protocol Suite.
The Transmission Control Protocol originates from a network implementation that
complements the Internet Protocol. Therefore, the Internet Protocol Suite is often referred
to as TCP/IP. TCP provides a method of reliably delivering an octet stream (8-bit data
block) over an IP network. The main feature of TCP is the ability to issue commands and
check errors. All major Internet applications such as the World Wide Web, email, and file
transfer rely on TCP.

Internet Protocol (IP)

Internet Protocol is the main protocol in the Internet protocol suite for forwarding data over
a network. The routing function of Internet Protocol essentially helps establish the Internet.
Previously, this protocol was the connectionless datagram service in the original
Transmission Control Program (TCP). Therefore, the Internet protocol suite is also known
as TCP/IP.

Hypertext Transfer Protocol (HTTP)

HTTP is the data communication platform for the World Wide Web. Hypertext is structured
text that uses hyperlinks between nodes containing the text. HTTP is an application
protocol for distributed and hybrid hypermedia information systems.

HTTP's default port is 80 and 443. Both of these ports are secure.

File Transfer Protocol (FTP)

FTP is the most common protocol used for file transfers on the Internet and in private
networks.

FTP's default port is 20/21.

Secured Shell Protocol (SSH)

SSH is the primary method used to securely manage network devices at the command
level. SSH is often used as a replacement for Telnet, because the protocol does not support
secure connections.

SSH's default port is 22.

Telnet Protocol

Telnet is the primary method used to manage network devices at the command level.
Unlike SSH, Telnet does not provide a secure connection, but only provides a basic
unsecured connection.

Telnet's default port is 23.

Simple Mail Transfer Protocol (SMTP)

SMTP is used with two main functions: Transfer email from the source mail server to the
destination mail server and transfer email from an end user to the mail system.

The default SMTP port is 25 and the secured SMTP port (SMTPS) is 465 (Non-Standard).

Domain Name System (DNS)

The Domain Name System (DNS) is used to convert domain names into IP addresses. The
DNS hierarchy consists of a root server, a TLD, and an authoritative server.

The default DNS port is 53.

Post Office Protocol version 3 (POP3)

Post Office Protocol version 3 is one of the two main protocols used to retrieve mail from
the Internet. POP 3 is very simple because this protocol allows the client to get the
complete content from the server's mailbox and delete the content from that server.

POP3's default port is 110 and the secured port is 995.

Internet Message Access Protocol (IMAP)

IMAP version 3 is another major protocol used to get mail from servers. IMAP does not
remove content from the server's mailbox.
The default IMAP port is 143 and the secured port is 993.

Simple Network Management Protocol (SNMP)

Simple Network Management Protocol is used for network management. SNMP is capable
of monitoring, configuring and controlling network devices. SNMP traps can also be
configured on network devices, to notify the central server when specific actions occur.

The default port of SNMP is 161/162.

Hypertext Transfer Protocol over SSL/TLS (HTTPS)

HTTPS is used with HTTP to provide similar services, but with a secure connection
provided by SSL or TLS.

The default port of HTTPS is 443.

Show the steps to publish a website to the internet

The steps to publish a website to the internet include:

1) Register a domain name;
2) Choose a web hosting provider;
3) Design and develop the website;
4) Upload the website files to the server;
5) Test the website;
6) Launch the website.
You create your own website, and network service providers like FPT, VNPT, and Viettel
will help you do the remaining 2 things. You have to pay to rent a web server to host your
website, you have to pay to register a domain name. However, there are also many service
providers that give you these 2 services for free with good quality
1.3 Frontend and Backend
Present the concept of the frontend? Popular front-end technologies?
Front end is simply understood to design and build interfaces for websites or web
applications using HTML, CSS, and JavaScript languages, so that users can view and
interact directly with them. The goal of web design is to make it easy for users to use when
opening a website.
Top Front-end Framework popular:
React
Vue.js
Angular
Semantic UI
Foundation
Materialize
Ember
Preact
Svelte
Bootstrap
Material UI
Present the concept of the Backend? Popular backend technologies?
BackEnd is all the parts that support the operation of a website or application that cannot
be seen by the user. Arguably BackEnd is like the human brain. It handles requests, and
commands and selects the correct information to display on the screen. BackEnd of any
website is made up of 3 components: server, application and database. Thanks to it, the
website works effectively, providing accurate information with fast speed to users.
When building BackEnd, developers also use programming languages to design website
structures similar to FrontEnd such as HTML, JavaScript, CSS, etc. Besides, BackEnd
development software stacks are used and Working frequently are operating systems, web
servers, languages, APA programming, and frameworks.
Software stack means technologies stacked on top of each other to make up the server
environment. Some of the famous and commonly used web stacks today are MEAN,
LAMP, .NET. The programming languages, APAs, and frameworks are responsible for
displaying the web to the server to operate the application programs for the user.
Popular backend technology:
JAVASCRIPT:
Developers can utilize JavaScript as a front-end and back-end technology. As a result,
creating mobile and web applications with this scripting language is quick and simple.
Express is a backend platform for JavaScript. Express middleware modules are available in
js to solve various programming difficulties. HTTP request logger, error handling, security
headers, and POST data functions are all included in these middleware packages.
Furthermore, JavaScript is a non-doctrinaire framework that operates without adherence to
strict rules.JavaScript is a client-side script, which means it runs in your browser.
Depending on whether the code affects the user interface or not, JavaScript can be
classified as a backend or frontend process.
Python:

Firstly, Python is a popular general-purpose programming language that was established

in 1991 by Guido van Rossum, a Dutch programmer. Python helps backend programmers
construct reasonable and explicit scripts because to its primary competency of brief and
legible codes.
The technology used in the backend programming downloads a large number of libraries.
Code for unit testing, databases, regular expressions, surfing, and email, among other
things, can be find in these libraries. In other words, backend engineers don’t have to
write each line of code by hand thanks to comprehensive libraries.
PHP:

PHP is a scripting language, and it is one of the backend languages. When a PHP page is
request, the server parses the PHP code, resulting in dynamically generated HTML in
most cases.
This general-purpose scripting language is simple to use and modify database
information. This technology also benefits from the availability of multiple modern
frameworks, a large community, a stable codebase, and ease of deployment. It is
preferable to use PHP in conjunction with MySQL and Apache on Linux. On the internet,
you can find a number of free PHP libraries. They can be use by programmers for quick
backend development. Though PHP is largely support by operating systems such as
Windows, Linux, and others, PHP web applications can be ru-n on any platform.
For first-time backend engineers, PHP is a good choice. PHP beginners use it since it has
features like a running sequence and no learning curve.
C#:

C#, sometimes known as C-sharp, is a popular backend programming language used in

the Windows environment for automation. The ASP.net framework also uses C# for web
development. It is an extension to C++ and one of the earliest programming languages.
This backend technology is primarily employ for desktop apps and embedded systems. C#
has a faster execution speed than most other programming languages, such as Python. In
today’s world, C# is the most extensively use programming language for game production
on Unity-like platforms. This backend technology is also use by backend engineers to
create console applications.
Perl:
 Perl is an excellent text processing scripting language. Fortunately, modern Perl versions
support POSIX-compliant systems and socket calls, among other sophisticated
capabilities.
Perl is the highest-paying technology on the planet. It’s worth noting that Perl is rank
among the top three most fear languages in the same survey. Perl can be readily integrate
into C++ and C programmes. Perl also supports external C and C++ libraries via SWIG
and XS.
C++:

C++ is a more advanced version of the C programming language. The C programming

language lacked the concept of classes or object-oriented programming. Object-oriented
programming, or OOP, is a concept that allows any programming language in the current
world to write structured code by defining classes and their relationships.
Relationship between front-end and back-end

A concept that contrasts with BackEnd is FrontEnd. If BackEnd is the sink, then FrontEnd
is the tip of the iceberg. More specifically, FrontEnd is the part that displays outside the
interface and interacts with the user. So it focuses on visuals, aesthetics, and easy-to-use
layouts.

And BackEnd is the work related to the internal database to display to the server. The main
function is to store data, retrieve information quickly and accurately with each command
given.
1.4 UX/UI and tools
State a few principles of building UI/UX for websites
Useful and quality content
According to Microsoft research, users spend only 8 seconds looking at content on the
Internet and decide whether to visit it to find out the details. This means that the customer
viewing the content in that short time will determine the amount of web traffic.
Uniform interface
A website that is judged to be aesthetically pleasing usually meets the following
requirements: fixed fonts, synchronous content, beautiful images, harmonious colors, eye-
catching layouts, etc. comfortable for visitors to the website but also helps businesses keep
them longer on the website.
Create a demo first
One of the principles to keep in mind when designing a standard UX / UI website is to
create a test version. Before you bring your website to market, you should test it out to
collect user opinions and reviews. Based on this feedback, the web designer will proceed to
edit the website to improve the quality of the product.
Limit the use of many operations
Currently, users tend to prefer products that are convenient and fast. Therefore, in website
design, you should not ignore this. Customers are afraid to perform cumbersome
operations many times in an application or a website.
Quickly fix errors (if any)
Having errors after designing a website is inevitable. However, as soon as you spot an error
from your website or get feedback from your customers, you need to quickly fix the error
and improve the web.
List common UX/UI tools
Sketch
 InVision Studio
Axure
Craft
Proto.io
Adobe XD
Marvel
Figma
The difference between Online Web Creation Tools and Custom Built Sites
-Online creation tools are also known as CMS (Content Management System) like
WordPress, Drupal, Joomla, and Wix. These tools/websites/software are used to build
websites just by drag and drop. You don't need any coding knowledge.
Whereas
Custom-build creation means that you will develop a website from scratch with coding.
For this, you need knowledge of some languages like HTML, CSS, JAVASCRIPT, etc.
1- Online tools (CMS)
Pros
Easy to learn and use
Need less time to learn
Fast way to build a website
Cons
Security risk
Large website size
Limitations in some things.
2- Custom-build website
Pros
Customization
Full control is in your hand
Everything (every) is possible to make with coding
No limitations
Cons
Not Easy to learn
 Need much time to learn
Takes time to build a website

Custom built sites Online website creation tools

Efficiency - Unique design - Custom made A website construction tool

websites are more flexible and available online comes with a pre-
exceptional than internet websites. made template that allows
They can be produced by the consumers to test their website
designer utilizing the client's before purchasing. This allows
specifications. users to create a website with little
to no coding experience by just
dragging and dropping. However,
the pre-made template is limited in
what it can do.

- The users of some websites are

unable to make any changes to the
website since those websites don't
fully support SEO and marketing
tools.

- Although well-designed, websites

only have a limited number of
functions and services.

Effectiveness Websites that are completely new Create a website quickly and easily.
are easier to update. better search Pay for hosting as well as a website
engine optimization perpetual builder simultaneously. Website
design. However, creating a loading is fairly speedy. Some
website from scratch takes a lot templates weren't well made or
more time and money than using updated. Occasionally, there are a
website creation software few security worries.
 - You can modify and optimize
your website to make it load more
fast.

Functionality Restricted in terms of navigation Both navigation and graphic design

and graphic design. On template are limited. On websites with
websites, functionality could be template content, the functionality
constrained. could be limited.

UX – User The tools are helpful and will Utilizing the useful tools will
Experience enable you to create high-caliber enable you to produce valuable
products. They are frequently less goods. They are often easier to
expensive and constructed more create and less expensive to build
rapidly than a custom website. than a custom website.

UI – User able to accommodate any kind of Responsive to the standard website

Interface design interface

1.5 Software testing and quality assurance

What is testing?
Software testing is an activity to find and detect software errors, to ensure that the software
is accurate, correct and complete according to customer requirements and product
requirements. Software testing also provides objective, independent view of the software
which allows to assess and understand the risks of software implementation.
Testing tools website
Selenium
Testing Whiz
HPE Unified Functional Testing (HP – UFT formerly QTP)
TestComplete
Ranorex
Sahi
Watir
Tosca Testsuite
Telerik TestStudio
Katalon Studio
Quality assurance – QA
Quality assurance is one of the methods of quality management.
Quality assurance is focused on providing confidence that quality requirements will be
fulfilled.
Quality assurance is concerned with the relationship between the customer and the
producer, oriented towards customer satisfaction.
It is the totality of planned and systematic activities carried out within a quality system to
ensure quality internally and externally.
1.6 Technologies and frameworks used to develop the website
Assess the impact of common web development technologies and frameworks in
relation to website design, functionality, and management
Framework is a piece of code that represents the architecture of the project.
The framework has control over you, which means that the framework dictates where you
need to add your code.
The framework provides the standard for developing and deploying applications.
Frameworks have standards and mandatory architectures.
frameworks make life easier for developers by allowing them to control the entire software
development process, or most of it, from a single platform.
Help developers write better code and conform to design patterns.
Code duplication or redundancy can be avoided.
Easier to work with more complex technologies.
Because the framework is open source, the features are always updated continuously, latest
and least buggy, by many other programmers.
Some of the code and features have been tested before by many other developers, so you
can use it with confidence.
Testing and debugging can be done by programmers who don't even own the code, so it's
much easier.
The time required to develop an application is significantly reduced.
Offers a number of tools and techniques for designing and building a custom website.
Compare and evaluate the tools and techniques that should be applied when?
Give some tools and techniques to design and build a custom website. Compare and
evaluate the tools and techniques that should be applied when?
- Bootstrap: Use bootstrap to easily build a website using prebuilt frameworks. Using
Bootstrap, one can still make a visually appealing landing page without having any coding
skills. The only requirement is a basic understanding of CSS and HTML. Furthermore,
Bootstrap is easy to incorporate into both brand-new and established websites. You may
quickly include a variety of platforms, frameworks, and Bootstrap elements into your
current CSS. In Bootstrap, there are numerous templates accessible. If you don't like them,
you can use the CSS file to create your own modifications. If you don't have the time to
start from scratch, you may also combine customisation with already written code to boost
functionality. All of this is possible through the customization page.
- HTML5 and CSS: Use HTML to display the contents of a text to the viewer. By
structuring web page elements, you may make things like tables, headings, and text
paragraphs, among other things. Different elements, such as text color, font style,
paragraph spacing, and more, are controlled by CSS. column sizes and layouts, photos and
background colors, as well as a range of other effects. Display variations for various
devices and screen sizes. Employing HTML5 and CSS3 to build exact web pages and web
systems that work across devices, operating systems, and web browsers can benefit
businesses that produce and distribute web content and apps. Distribute anyplace after
creating once. If standards are not adhered to, the range of
- Figma: This software supports a variety of operating systems, including Windows, Linux,
MacOS, etc. It is used to design static user interfaces by drag-and-drop without writing any
code. As a result, it is a straightforward and trouble-free design tool. Figma is a helpful tool
for teamwork since it makes it simple for users to communicate with one another. Viewing
the avatars of each individual in the file and the current alterations makes it simple to
follow the design process. The document file may be viewed, edited, or updated by any
authorized members.
- JavaScript: JavaScript should be used when writing scripts that allow for user interaction
on websites. JavaScript is a "interpreted" language, hence compiling it takes less time than
other computer languages. JavaScript is a client-side script that speeds up program
execution by cutting down on the time needed to establish a server connection. Javascript
has the ability to bring life to a web page when it is being created. It's a kind of scripting
language that is dependent on either an established core development team or on people
who have created their own scripts.
-Google devtools - device mode : The googlechrome devtool has a device mode feature
which is useful for testing and debugging responsive design. Unlike most other responsive
design testing tools that simply resize your viewport, device mode actually simulates the
mobile device experience, especially touchscreen interactions. like typing and swiping,
right in your web browser. The tool's features are:
Test responsive design by simulating different screen sizes and resolutions, including
Retina display.
Evaluate your site's performance using a network emulator without affecting traffic to other
tabs.
Visualize and test CSS media queries.
Accurately simulate device input for touch events, geolocation, and device orientation.

Offer selected technologies, management services, tools and software to realize a

built-on-demand website.

-Spring Boot: is an open source micro framework maintained by Pivotal. This framework
provides Java developers with a platform to get started with an autoconfiguration Spring
application. With it, developers can get started quickly without spending time preparing
and configuring their Spring application.
Notable features of Spring Boot
Auto-configuration: Spring Boot sets up your application based on its surroundings, as well
as hints what the developer has to offer.
Standalone: Literally Spring Boot is completely independent. Therefore, you do not need
to deploy your application to a web server or any special environment. Your only task is to
click the button or give the run command and the framework will start running.
Having an opinion: This means that the framework chooses to do things for itself.
- 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.

- 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.

1.7 SEO Website

SEO stands for Search Engine Optimization (search engine optimization) and is a special
technique in Internet Marketing. The purpose of helping the website achieve high rankings
on search pages, typically Google
Give ways to improve the position of the website on popular search engines like
Google, Bing...
What are your strategic goals?
Keyword analysis
Competitors
Effective SEO techniques
Page Level Analysis
The content of the article needs to be analyzed
User experience research
Analyze links
Related quotes
II. Website design and construction
2.1 Problem statement
DWG is a company that sells mobile devices such as phones, laptops and accessories and
is a customer of BKS . I will build websites according to the precious design and come up
with a scenario to test the features
2.2 Problem analysis
functional and non-functional requirements website
Functional requirements:
User: Those who want to view or buy mobile devices. They look for the phone models they
need and therefore need to have the following functions:
-Show a list of devices in the page so customers can view and choose
-Provide search function. With the need of customers when entering the website is to find
the devices they need to see. Sometimes there are many visitors to the website without
knowing which model to look at, the requirement for the system is how customers can
quickly and efficiently find the devices they need.
-After the customer has finished selecting the equipment to buy, the system must quickly
execute the commands that the user wants. There are also some functions such as: Register,
login.Customers need to log in to buy a phone. In addition, there is a function to respond to
customer comments about the website.
Admin: The person who owns the application has control over all system activities. This
person is provided with a username and password to log into the system to perform his
function. If the login process is successful, the administrator has the following functions:
+ Function to manage updates (add, edit, delete) products on the website, this requires
accuracy.
Receive and check customer reviews and feedback.
In addition to the above functions, the website must be presented in such a way that it
is easy to understand, the interface is easy to use, beautiful and makes customers see the
information they need to find, provide attractive but honest advertising information. real, in
order to attract interest about your website and have the opportunity to have more visitors
and know your website.
The most important thing in an online utility website is to ensure absolute safety of
customer-related information during use. At the same time, the website must be easy to
upgrade, maintain, and repair when it needs to add or update new features.
Non-functional requirements:
-Support customers safely when using the website as personal information related to
customers is guaranteed to be safe. Friendly interface, easy to use, attractive, easy to find
information about products.
 - Website has not too large capacity, fast processing speed.
- The calculation ensures accuracy and does not accept errors.
- Ensure data safety when running.
- Capable of storing a lot of data.
technology used:
frontend: HTML,CSS,Bootstrap, JavaScript
backend : SQL, PHP
Web server: Apache
Design interface website : Figma
ERD and Database Diagram:
ERD

Database diagram
2.3 Website interface design
Home page (Design by figma)
 Page phone product list:

Page buy product ( Cart ):

Page upload product:

Page result upload product :

Page result customer message:

Page sign up and login in website:

Page update admin table:

Page result update admin table

Page delete fuction

2.4 Evaluate the website development process

- In the process of website development, I found that my websites have completed the following
functions quite well:

+ Create products

+login to the site

+ Product update

+ Delete product

+ send customer feedback

+ eye-catching interface design

However, there are also some limitations:

+ Users after logging in can still exit the login screen themselves without the "logout" key

+ I can't make a notification every time I click delete something

+ When creating a product, it is not possible to create each individual product, but all products
are in the created list.

+The admin's function slide is not complete because I can't afford it

III. Evaluating the results of building WEBSITE

3.1 Demo website
Page homepage:
 URL:

phone product list:

Upload product :

Result upload product :

 Cart:

Result cart :

Customer message:
Result Customer message:

Sign up and login in website:

Result login in website:Password 123456 -> go to page Admin
Update admin table:

Result update admin table:

Delete fuction:

Result delete fuction:

3.2 Result evaluation

 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 “Admin” section “Admin” page
9, 2023
“Admin” page on the header

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

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

TC 3 Check the link Click on the “send February Can see OK none
from “HOME” to message now ” “Thanks for
11, 2023
“send message section on the sendding
now” footer comments “

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

from “HOME” to “readmore” “products”
9, 2023
“readmore” in section on the page
website products

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

from “HOME” to “readmore” “Login” page
10, 2023
“readmore” in section on the
content content

TC 6 Check the Click on the February More OK none

“Admin ” button “Admin” section information for
10, 2023
on the “Home” on the header products you
page
 can edit ,
delete, update

TC 7 Check the Click on the February more success OK none

“UPDATE” “UPDATE” information
10, 2023
button on the button after you can edit
“Admin” page entering the new form
information

Discuss how to ensure quality during website design and construction:

In the process of building a website, the first plan will be based on the collected information.
Specifically:
Outline sitemap.
List all the pages and topics that will appear on the site.
Define detailed content for each page.
Web needs to ensure user-friendliness when building, because this factor determines the
performance of the web later. Simply put, customers will not stay on the site if they find it
difficult to use the available features.
Logo tone, website colors must be easy to see
The content and message the website wants to convey is to view and sell phone models
Determine the target audience, customers are suitable for the website
The functionality of the website should be built according to the requirements agreed in the plan.
Once the site functionality is built, I will run tests myself and update and correct the wrong
content.
Plan web maintenance by each
Evaluate the test plan, give a way to optimize the web based on the test plan

Test What is How Test Expected Date Actual Action

testing date result results taken
TC1 Create Insert Dec The 1/01/2023 FAIL fix the error when
phone information 10 information creating a product
new phone of phone are not updating the
not up to product on the
home page website
TC2 Update Update price Dec Show the 1/01/2023 PASS None
phone and 6 update
descriptions home page
“SAMSUN
G S22”
TC3 Delete Delete Dec The phone 1/01/2023 FAIL Fix the error when
phone phone 6 has not a product not
“Iphone14” deleted deleting the poduct
on the website
TC4 Search Search Dec Show all 1/01/2023 PASS None
phone “Iphone” 10 phones
name have name
“Iphone”
IV. References

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

https://www.guru99.com/what-is-backend-developer.html.

https://asq.org/quality-resources/quality-assurance-vs-control.