PROGRAM TITLE: BTEC in Computing (Software Engineering)

UNIT TITLE: Website Design and Development

ASSIGNMENT NUMBER: 01
ASSIGNMENT NAME: Website Design and Development
SUBMISSION DATE: 31/12/2022
DATE RECEIVED: 31/12/2022
TUTORIAL LECTURER: MR. NGUYEN VAN HUY
WORD COUNT: 9213

STUDENT NAME: NGUYEN HUU DUY

STUDENT ID: BKC13144
MOBILE NUMBER: 0918398233
Summative Feedback:
Internal verification:
 CONTENTS

I. INTRODUCTION

II. THEORY

1. Domains and DNS

2. Web server – server

3. Frontend and Backend

4. UX/UI and tools

5. Software testing and quality assurance

6. Technologies and frameworks used to develop the website

7. SEO Website

III. WEB DESIGN AND CONSTRUCTION

1. Problem statement
2. Problem analysis

IV. ASSESSMENT OF WEBSITE BUILDING RESULTS

1. Demo website

2. Result evaluation

3. Web interface design(Figma):

4. Evaluate the website development process:

V. REFERENCE
I. INTRODUCTION
- You have just been accepted as an intern at BKS, a company that specializes in providing
customers with software solutions.

- You are expected to acquire knowledge of web technologies and website management skills:

+ Outlining the connection between domain names and the domain name system (DNS) as
well as presenting domain names.

+ Describe the protocols used to access a website (HTTP, HTTPS...).

+ Server-side technologies are presented: hardware, software (such as an operating system),

and a presentation of some web frameworks and technologies.

- BKS is a customer of DWG, a company that sells phones, laptops, and accessories for
mobile devices.

- You are responsible for meeting DWG clients and gathering website building requirements,
both functional and nonfunctional.

- You are required to send back to DWG within a week regarding the technologies chosen to
develop the website (frontend, backend...), the server (hardware, operating system...), and the
website design. website.

- You construct a few websites by the previous design a month after meeting a customer BKS
needs a website demo and comes up with a scenario to test the features.

II. THEORY

1. Domains and DNS

1. 1. What is a domain name?

- A domain is a component of the definitions used in web addresses to identify your website
or a particular page of your website online. It is a string of text associated with the numerical
IP address of a website that's much easier for visitors to remember and search.

+ Every website has an IP address and a unique string of numbers connecting computers to
web servers. Although IP addresses are great for computers, they are challenging for people to
remember. That's where domains come in. Because a domain name and an IP address are
linked, users may more easily remember and search for a website by its domain while still
having their browser use the related IP address to locate the particular web server that hosts
the website.

+ A domain is often compared to a home address. Your friends don't memorize your house's
GSP coordinates every time they want to visit you. Instead, they just plug your street address
into their phones. The same goes for visiting a website. Instead of memorizing a website's IP
address, visitors simply type in the domain into their browser.

- What does a domain look like?

+ A domain typically consists of two or three words separated by dots. For example,
blog.hubspot.com is a domain.

- Domains are not only used to simplify how visitors find your website. Below we’ll look at
several other reasons domains are used.

+ To Gain Ownership

+ To Solidify Your Brand Identity

+ To Establish Credibility

+ To Be Memorable

+ To Stand Out Against Competitors

+ To Build Authority.

- A domain name is the unique name of a website. It functions like the site's home address on
the World Wide Web.

+ The term “domain name” is used interchangeably with the term "domain." The only
difference is that one is the thing’s name and the thing itself.

+ Not including its extension, like “.com”, the maximum length of a domain name is 63
characters. The minimum length can be one character.

+ There are typically two parts of a domain: the second-level and the top-level domains. If
read left-to-right, these parts decrease in specificity.

- Types of Domain:

+ Generic Top-Level Domains (gTLD)

+ Country Code Top-Level Domains (ccTLD)

+ Internationalized Country Code Top-Level Domains (IDN ccTLD)

+ Subdomain (Clifford, 2021)

1.2 What is DNS? Types of DNS?

- DNS stands for the phrase Domain Name System, which has the full meaning of the domain
name resolution system. DNS was invented in 1984 for the Internet, only a system that allows
the establishment of correspondence between IP address and domain name.

- DNS stands for the phrase Domain Name System, which has the full meaning of the domain
name resolution system. Most concisely, DNS is a system that converts 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. (Danh, 2019a)

- Type of DNS:

+ DNS queries:

 A DNS Client will send a DNS Server a DNS Query to obtain the IP address associated
witan an FQDN (called Fully Qualified Domain Name).
 Nearly all DNS resolver issues were called by Recursive Query on the client side. They
appear to ask the first DNS server they interact with to look for the necessary address
translation (or error message) on their behalf, according to our authorities.
 When a recursive request is received, a DNS server responds to iterative or non-recursive
queries, which are sent to name servers in its hierarchy or servers that are provided as
pointers in reaction to earlier iterative requests, until a response is given.

+ DNS servers:
 Three different types of DNS servers exist and can be found in any DNS subdomain.
These topics will be covered in the following sections. The main DNS server, also known
as the master server, is where the main DNS database files for the domain(s) or
subdomain(s) that server is authoritative for are kept. When the DNS service launches,
the purpose is to set one name server apart from the others for a domain by its capacity to
read information from a zone file on disk.
 Secondary DNS servers, also known as secondary master or slave servers, can receive
information from a master server via a zone transfer and store read-only copies of zone
files.
 Caching Servers is a separate system that only contains information about DNS records
based on the outcomes of previous queries. Keeping a copy of the lookup data locally
aims to speed up access to particular domain names.
 According to the link between the three types of DNS servers, the Caching server is a
system that is supported by either the primary or secondary DNS Server, making it
possible to set it up and configure it separately.

+ DNS records:
 Address Mapping record (A Record): A hostname and its associated IPv4 address are
stored in what is known as a DNS host record.
 IP version 6 Address record (AAAA Record): A hostname and its corresponding IPv6
address are also stored.
 Canonical Name record (CNAME Record):  A hostname may be made an alias for
another hostname.
 Mail exchanger record (MX Record): The IP address of a domain's primary email server
is also recognized while routing STMP-based electronic correspondence via the Internet.
 Name Server record (NS Record): Finding the majority of the DNS servers in a domain
 Reverse-lookup Pointer records(PTR Record): It not only maintains IP address-to-domain
name translation information but also aids in the process.
 Certificate record (CERT Record): Keeping encryption certificates in storage: PKIX,
SPKI, PGP, etc
 Service Location (SRV Record): An entry for the service location, similar to the MX
record anticipated for other communication protocols.
 Text Record (TXT Record): Archiving any textual details about a domain name.
 Start of Authority (SOA Record): Identifying the name server in charge of a certain DNS
database section.
(NS1, 2018)
1.3. Show how domain names are organized and managed.
- Organization
+ The company that manages domain names serves as a distributor of domain registration
bundles. Top-level domains usually referred to as TLDs, are used as domain extensions. For
instance, the Verisign Company is in charge of.com and.net name registration.
+ The general public cannot register domain names for second-level domains like abc.com or
xyz.net through domain name registration companies. A domain name registrar, such as
Google Domains, must be used to register domain names.
+ To offer domain names with particular domain extensions, Google Domains collaborates
with domain name registries. Find out the distinctions between registrants, registrars, and
domain name registrars.

- Manage:
+ Through ICANN, the domain name management organization has the authority to control
domain extensions. The administrative information for the domains and subdomains under
each domain management organization's control is managed. Container files containing the
name servers' addresses and owner information for each domain are part of this data
management (registrant).
+ The conditions for the registration of domain names that use their domain extensions are set
by the domain name management organization. For instance, some domain extensions
demand that the registrant resides in a particular nation. Therefore, you must accept the terms
of service of both Google Domains and the entity that manages the domain name when you
register a domain name.
+ The terms of service of domain name organizations are occasionally enforced for domains
(Google, 2021)- A web server is software and hardware that uses HTTP (Hypertext Transfer
Protocol) and other protocols to respond to client requests made over the World Wide Web.
The main job of a web server is to display website content through storing, processing, and
delivering web pages to users. Besides HTTP, web servers also support SMTP (Simple Mail
Transfer Protocol) and FTP (File Transfer Protocol), used for email, file transfer, and storage.

- Web server hardware is connected to the internet and allows data to be exchanged with other
connected devices, while web server software controls how a user accesses hosted files. The
web server process is an example of the client/server model. All computers that host websites
must have web server software.
- Software is a collection of statements or instructions, written in one or more different
programming languages in a specified order. Software is born to create a task or function of a
particular problem. Compared to hardware which cannot be changed, software or software
can be considered a variable part of the computer. Software is divided into two parts: system
software and application software. Where system software includes the operating system and
any programs that support the application software, and application software is the program
that is of direct interest to the working user. (S. Gillis, 2021)

2.2. Web client-server model.

- Client Server is a computer network model consisting of two main components that are the
client and server (server). The server is the place to help store resources as well as install
service programs as required by the client. In contrast, the client includes computers as well as
electronic devices in general that will send the request to the server.

- The Client Server network model will allow the network to focus on applications with the
same function at one or more dedicated file services. They will become the center of the
system. The operating system of the Client Server model will allow users to share
simultaneously the same type of resource without a limited geographical location

Principle of operation of the client-server model:

- In the content of this article, we will find out specifically what the client-server model is and
how their operation is. Soon will be the principle of operation of the client-server model to
help you get the most general view.
- Client: The client is the customer using the service. It may be a specific organization or
individual. And when this concept is used in the field of digital, it has the same meaning. In
the client-server, the client is a computer (host). They can receive information from the
supplier and use the specific service (server).

- Server: Se Server is the word to talk about a server or ed to serve certain services. When this
concept is used in the field of technology, the server is a remote computer. They have the
function of providing information (data) to a specific service or access to the service. (Cloud,
2021)
2.3. Protocols for accessing the web server (HTTP, HTTPS, FTP ...

 HTTP or HTTPS
- This stands for Hypertext Transfer Protocol or Hypertext Transfer Protocol (secure). The
secure version is encrypted, meaning that we will encrypt all the data as we send it from the
client to the server.
- Now client and server here become very important with application layer protocol. Nearly
all application-layer protocols use this model, using one device on the client’s network and
the other on the server.
- Now when we are using HTTP or HTTPS or transferring a file. Transferring a file in the
format of the hypertext. Hypertext is readable by a web browser. The client software you are
likely very familiar with. This is either Google Chrome or Firefox, which may be Microsoft
Edge or Ale’s Safari browser. Thall web cliehat support the use of HTTP or HTTPS.
- The server side also runs some software. It is a running server software. For the website, we
usually use Apache, an open-source software web server that can run on either Linux or
Windows. We have Nginx, which is used in large website deployments and can run on UNIX.
We have Microsoft’s Internet Information Services or IIS, which can be run on Microsoft
systems. There are several web server options that a server administrator can install to host a
website on the internet. So the whole purpose of the client-server here is to have client
software like a web browser and the web server like Apache work in conjunction with each
other and transfer these hypertext documents to get the website from the server to the client.
- The Port number uniquely identifies the layer-7 protocol being used at layer 4. We can use
these port numbers to identify traffic at layer 4 quickly, The HTTP by default, we have port
80, and for HTTPS by default, we have port 443 as the transport layer protocols.

 FTP (File Transfer Protocol)

- The FTP allows us to transfer files from a client to a server or from a server to a client.
- We can do it in both directions here, and this protocol is either going to be FTP, sFTP, or
TFTP.
- FTP is a File Transfer Protocol, SFTP is a Secure File Transfer Protocol, and TFTP is a
Trivial File Transfer Protocol.
- FTP and SFTP are pretty similar to one another. These protocols will transfer files from one
device to the other, and client and server software is specifically designed to do this.
- TFTP works a little bit differently. It’s meant for sending tiny files between two devices or
having simple setups where you can transfer a file quickly without worrying about
authentication or firewall issues causing your traffic to be knocked down.
- FTP and SFTP typically require a username and password to transfer these files. TFTP does
not require this. SFTP, specifically here, is going to encrypt the traffic.
- FTP will use ports 20 and 21; one is used for authentication, and the other for transferring
information. Port 22 is used for SFTP, and reason for that port 22 is the port number for
another protocol we are going to look at called Secure Shell or SSH, and what happens here is
we take the FTP protocol. We put it inside an SSH session, which allows us to encrypt traffic,
which is why the port numbers are the same for both SFTP and SSH. TFTP uses port number
69. (IDC, 2022)

2.4. Describe the steps to publish a website on the internet

- Website uploading steps will include:

Step 1: Choose a reliable hosting supplier
Step 2: Upload the website file (also known as source code) to hosting
Step 3: Upload the Backup Site and proceed to extract
Step 4: Check if the files are right in the public_html folder
Step 5: Upload database to MySQL database
Step 6: Basic testing of the website is operating normally

- To upload data to the website, the most basic you need to prepare:
+ Files website. These files may be all data in your old public_html or the latest source code,
or the latest backup version
+ The database file (if any)
+ Access to the Control Panel of the new hosting account
+ FTP Client software like Filezilla. (G, 2017)

3. Frontend and Backend

3.1 Explain the concept of Frontend? Popular frontend technologies?

- The front end is everything a user sees and interacts with when they click on a link or type in
a web address. The web address is also known as a URL, or Uniform Resource Locator, and it
tells what webpage should load and appear in your browser. It is the client-side part of a web
application

 Common Front End technologies:

+ HTML5: HTML5 Boilerplate is known as the most popular front-end template or most
popular front-end technologies. It helps you to build fast, adaptable, and robust web
applications.HTML5 Boilerplate offers a professional front-end template with a set of
HTML5-ready features and elements.
+ CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages
look in the browser.
+ React JS: React is known as a remarkably flexible library. Once you understand the
concepts of reacting, you can use it on a vast variety of application platforms to build great
quality user interfaces. React is known as Library it is not a framework.
+ React Native: React native is an open-source software framework created by Meta
platforms.
+ Angular: Angular is an open-source, JavaScript framework written in TypeScript. Angular’s
primary purpose is to develop single-page applications because of this feature it got spread
widely all over the world.
+ Flutter: Flutter is an open-source user interface development kit, which has been developed
by Google.
+ NPM: NPM stands for Node Package Manager. It is a manager for JavaScript programming
language maintained by NPM Inc. NPM is the default package manager and provides a
runtime environment for NODE JS.
+ Vue.js: Vue JS is an open-source framework. The core layer of the Vue JS is mainly
focused on viewing a part of the applications only.
+ BootStrap: Bootstrap is the most popular CSS Framework for developing responsive and
mobile-first websites. (Writers, 2022)

3.2 Explain the concept of the Backend? The popular backend technologies?

- Backend development deals with the technologies responsible for storing and securely
manipulating user data. It is the part associated with all the hidden logic that powers the
applications users interact with. The backend is considered the server-side part of an
application. The backend is all the hidden inner workings and the behind-the-scenes processes
in a web application. It refers to everything going on underneath the hood and all the
necessary components that make the front end function properly and smoothly. It makes sure
everything is working optimally.
- Essentially, the backend is what the users don't have direct access to or don't directly interact
with and are most likely unaware of when using an application.

 Common backend technologies include:

- Programming languages:
+ Python: Python is a high-level programming language that is popular for its clear syntax,
object-oriented design, and ability to allow program developers to create applications rapidly.
+ PHP: PHP, which stands for "PHP Hypertext Preprocessor," is a widely-used open-source
server-side programming language that helps create dynamic web pages.
+ JavaScript: JavaScript is a scripting language that enables you to create dynamically
updating content, control multimedia, animate images, and pretty much everything else.
(Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript
code.)
+ Ruby: Ruby is a well-known, versatile programming language regularly used for web
scraping, site building, command-line tools, automation, and data processing.
+ Java: Java is a versatile, object-oriented programming language that Sun Microsystems
released in 1995. It shares many features with C++ but also has advanced and simplified
capabilities.
+ C#: C# is a Microsoft object-oriented programming language that enables the construction
of more complex programs. It developed from the necessity for a robust object-oriented
language.

- Frameworks:
+ Laravel: If you have been surfing the web for a PHP backend framework, then Laravel is
one of the ideal choices that you can make. This open-source is specifically designed for
symphony-based web applications. If you want to pay attention to back-end development,
Laravel is the most suitable.
+ Django: Django is an open-source web framework written in Python that follows the
model–view–controller architectural pattern. It focuses on building database-driven complex
websites. If your utmost priority is to have a high-performance website, Django is the right
solution for you.
+ Spring Boot: Spring Boot framework is again an open-source framework that makes use of
the JavaScript framework for the backend. It offers you a powerful, customizable, and
modular environment that allows you to build complex enterprise-grade applications.
+ Ruby on Rails: The Ruby on Rails framework is famous as much for its full-stack
capabilities as it is for its ease of use. The focus of the framework is to make building web
applications simpler than ever before by taking a lot of the hard work out of the equation.
+ Koa: Koa is a minimal, open-source, and flexible Node.js backend framework. Node.js has
been one of the best frameworks for app development.

- Databases:
+ MongoDB: MongoDB is the first Document Database management software that was
released in 2009. It is challenging to load and access data into RDBMS using object-oriented
programming languages which also require additional application-level mapping. Thus, to
overcome this problem, Mongo was developed to handle Document Data.
+ MySQL: MySQL is one of the most popular databases to use in 2022 in the computer
world, especially in web application development. The main focus of this database is on
stability, robustness, and maturity. The most popular application of this database is for web
development solutions.
+ Oracle: Oracle is the most widely used commercial relational database management system,
with built-in assembly languages such as C, C++, and Java. This database’s most recent
version, 21c, contains a slew of new features.

- Servers:
+ Apache: The Apache web server, officially known as Apache HTTP Server, was released in
1995. Apache is a free, open-source web server; developed and maintained by the Apache
Software Foundation (ASF)
+ NGINX: Nginx is an open-source, high-performance web server, released in 2004. It has
become one of the most used web servers, together with Apache
+ Microsoft IIS: Microsoft-IIS or Microsoft Internet Information Services is a web server
released by Microsoft in 1995. It was developed to be used with Windows NT. Its modular
architecture allows adding and removing extensions/modules easily (Scaler, 2022)

3.3. Relationship/difference between Frontend and Backend?

- Relationship: Frontend is the display outside the interface and interacts with the user.
Therefore, it focuses on the visual, aesthetic, and easy-to-use layout. Backend is tasks related
to the internal storage database to display for the server.
- The difference between frontend and backend:

Frontend Backend
Nature of The main job is to focus on Ensure that webmaster tasks, and
work developing, building website data from the machine side only
interfaces, and bringing different take place smoothly
experiences to users.
 There are three mainstream
Programming programming languages including Common basic programming
languages HTML, CSS, and JavaScript. In languages that backend
addition to using programming programming needs to grasp
languages, Frontend needs to be include: PHP, Python, Ruby, Java,
familiar with frameworks such as ASP.NET
Bootstrap, Foundation, Backbone,
AngularJS, and EmberJS.

Task Perform image and feature Primarily responsible for

optimization for the website managing the system
(Writers, 2022)

4. UX/UI and tools

4.1 What are some principles of building UX / UI for the website?

- User Experience is referred to as UX. UX, which encompasses the full application
integration process, is the process of developing products that offer users (or customers) a
meaningful experience that is relevant to them. includes a wide range of elements, including
brand, design, usability, and function (Function).
- UI, short for user interface, refers to the user interface that a user uses to interact with a
device, such as an application's screen or the buttons he presses to access the Internet.
- Some principles of building UX / UI for the website:
+ Start with user needs: Service design starts with identifying user needs. If you don’t know
what the user needs are, you won’t build the right thing. Do research, analyze data, and talk
to users. Don’t make assumptions. Have empathy for users, and remember that what they
ask for isn’t always what they need.
+ Design with data: In most cases, we can learn from real-world behavior by looking at how
existing services are used. Let data drive decision-making, not hunches or guesswork. Keep
doing that after taking your service to live, prototyping and testing with users then iterating
in response. Analytics should be built-in, always on, and easy to read. They’re an essential
tool.
 + This is for everyone: Accessible design is good design. Everything we build should be as
inclusive, legible, and readable as possible. If we have to sacrifice elegance – so be it. We’re
building for needs, not audiences. We’re designing for the whole country, not just the ones
who are used to using the web. The people whom most need our services are often the
people who find them hardest to use. Let’s think about those people from the start.
+ Understand context: We’re not designing for a screen, we’re designing for people. We
need to think hard about the context in which they’re using our services.
+ Be consistent, not uniform: We should use the same language and the same design
patterns wherever possible. This helps people get familiar with our services, but when this
isn’t possible we should make sure our approach is consistent.
+ Do less: We should make it reusable and shareable instead of reinventing the wheel every
time. This means building platforms and registers others can build upon, providing resources
(like APIs) that others can use, and linking to the work of others. We should concentrate on
the irreducible core.
+ Do the hard work to make it simple: Making something look simple is easy. Making
something simple to use is much harder – especially when the underlying systems are
complex – but that’s what we should be doing.
+ Build digital services, not websites: A service is something that helps people to do
something. Our job is to uncover user needs and build the service that meets those needs.
+ Make things open: it makes things better: We should share what we’re doing whenever we
can. With colleagues, with users, and with the world. Share code, share designs, share ideas,
share intentions, share failures.

4.2 . What are the popular UX/UI tools?

- Sketch: If you have any UI design experience, you've heard of Sketch. And there are quite a
few reasons why it’s one of the design tools that’s so revered.
- InVision Studio: With a full suite of applications, InVision gives designers all of the UI
design tools they need to create fully realized and functional prototypes with dynamic
elements and animations
- Axure: Axure functions in prototyping and keeping track of the workflow. It features a
smooth interface to document as you go. High fidelity drives this app, resulting in prototypes
full of details.
- Craft: Craft, a plugin from InVision, works right alongside what you might be doing in
Photoshop or Sketch, with a sync function that updates what you’re working on. Along with
this time-saving feature, Craft offers everything you need for prototyping and collaboration.
- Proto.io: In their own words, Proto.io says using their UI design software results in
"Prototypes that feel real." And Proto.io delivers on this, giving you what you need to create,
organize, integrate, and test accurate mockups.
- Marvel: Whether you've been a UI designer for a while or if you're just stepping into the
role, Marvel's design platform makes things easy. With the ability to create both low-fidelity
and hi-fi wireframes, and interactive prototypes, and do user testing, it gives UI designers
everything they need — all wrapped into an intuitive interface.
- Figma: Figma lets designers build dynamic prototypes and mockups, test them for usability,
and sync up all of the progress. Figma allows for a collaborative environment where multiple
people can work on a project at the same time, much like Google Docs — letting you see who
has it open for real-time collaboration.
- Framer X: Framer X has evolved from its early days as a code-only prototyping application.
Today it offers a host of UI design tools for building functional prototypes and testing for
usability. Its ability to work with React makes it ideal for UI designers who like to stay on top
of the newest web design innovations.
- Webflow: Webflow gives you the power to design without knowing HTML or CSS. With
drag-and-drop functionality and an intuitive interface, Webflow gives you the creative
freedom to build whatever you imagine.
- FlowMapp: Where so many tools out there try to combine UI and UX into one platform,
FlowMapp dedicates itself to the discipline of UX design. Building user flows and
constructing visual sitemaps are indispensable for UX, and these are the pillars of
FlowMapp’s UX design app.
- Treejack: Treejack specializes in information architecture. It lets you test the tree structure
of a website with real users. It then generates the results that show a user’s path and
navigation through the content, giving you valuable insights that you can use to edit and
tweak the content organization.
- Optimal Workshop: As far as a UX design platform goes, Optimal Workshop has all you
need to analyze usability, figure out information architecture, and test and evaluate a design.
(Bill, 2021)
4.3. Differences between Online Web Creation Tools and Custom Built Sites based on
criteria: flexibility, performance, functionality, experience User Experience (UX), and User
Interface (UI) interfaces).

- Online Web Creation Tools: There are several reasons behind the popularity of website
builder tools. These tools allow you to develop a website, even if you do not know how to
code. These are generally offered by website hosting companies as proprietary tools. These
tools include an editor, several themes, and easy drag and drop of various elements like
images, text, headers, etc. to build a site.
+ You do not need any special skills to build a website using such website builder tools.
While such ready-made templates are easy and quick to use and offer built-in features for a
fair amount of customization, these sites become heavy and are often slow to load.

- Custom Built Sites: Building a site from scratch required you to hire the right web
development team that takes time to understand your business needs. Such sites are more
cost-effective in the long run as they can be easily customized to adapt to the growth of your
business.

Online creation website Custom built website

tools
Design flexibility Since templates are Due to the few redundant
frequently fixed designs programs and the ability to
with certain module add- easily improve and change
ons, they lack flexibility. your website in a few years,
custom websites will
operate smoothly.
Performance Due to load speed and SEO, The customer website will
adding some default add- operate better when user
ons will ultimately slow traffic is bigger and not
down the website. constrained by all devices.
Functionally The programming is quite With this website, it will not
fast to implement in terms be limitations when written
of the fact that much of the by language such as HTML,
code is done. CSS, Javascript, so forth,
and so on.--- -----Custom-
 built sites permit users
lightly to update as
WordPress is updated.
UX UX of the template is that Especially for Custome
it's dull because other Built Website, the design
businesses might be using will be unique and attractive
the same one and just to the users.
having what users see is
what they get
UI Graphics design and Due to the design, some
navigation capability are add-ons will be reduced and
restricted since the website the part of the graphic
contains some extension design is more beautiful
add-ons without many constraints.

5. Software testing and quality assurance

5.1. What is testing?

- Software testing is an activity to find and detect software errors, ensure the software is
accurate, correct, and complete as required by the customer, and the requirements of the
product set out. . Software Testing also provides goals, an independent view of software,
which allows evaluation and understanding of the risks when implementing the software.
- Software testing is usually divided into 2 types: manual testing (manual test) and automatic
testing (Auto Test). In particular, automatic testing is chosen more by the ability to test
quickly, strongly, unlikely to neglect, and save costs.
However, the quality of automatic testing commands depends on whether the testing
commands are written well or not. Therefore, the article will introduce 10 software testing
tools that are highly appreciated by experts so that testers can be applied to the job. (Duyen,
2019)
5.2. Website testing tools?

- Selenium
- TestingWhiz
- HPE Unified Functional Testing (HP – UFT formerly QTP)
- TestComplete
- Ranorex
- Sahi
- Watir
- Tosca Testsuite
- Telerik TestStudio
- Katalon Studio (Cowell, 2021)

5.3. What is QA (Quality Assurance)?

- "Quality assurance" focuses on preventing defects. Quality assurance ensures that

approaches, techniques, methods, and processes are designed for projects and implemented
correctly. Quality assurance activities monitor and verify that software management and
development processes are complied with and effective. Quality assurance is an active process
to prevent defects. It realizes errors in the processes. Quality assurance must be performed
before quality control. (Viblo, 2017)

6. Technologies and frameworks used to develop the website

6. 1. Assess the impact of common web development technologies and frameworks involved
in website design, functionality, and management.

- Technologies and frameworks for web development are simple to use, improve user
experience, and enable people to boost productivity and accomplish desired objectives.

6.2. Offers several tools and techniques to design and build a custom website. Compare
when should these tools and techniques be evaluated.

- Some methods and tools: Bootstrap, Figma, HTML, JS, and GitHub
+ Bootstrap is the most widely used, free, and open-source framework for quickly and easily
creating responsive layouts for web pages. Forms, buttons, navigation, dropdowns, modals,
and layout are just a few of the many things it contains in HTML, CSS, and JS. You can make
every one of these absent a lot of endeavors, which in any case would require a ton of CSS,
HTML, and JS code.

• Bootstrap's benefits:

+ Saves time: Bootstrap's predefined classes and design templates make it easy to quickly
create features.

+ Responsive Design: You don't have to use media queries in your CSS file with Bootstrap. It
dynamically adjusts the web page for all screen sizes.

+ Compatible with all browsers: Since it is compatible with the most recent versions of all
browsers—Google Chrome, Firefox, Opera, Safari, and Edge—you don't need to worry about
any particular browser.

+ Simple and Straightforward - It is extremely simple and easy to use in website architecture.
You should proceed if you have a basic understanding of HTML and CSS.

+ Consistency: It ensures that your projects and those of other developers are consistent.

+ Open Source and Free: There are no restrictions at all. On GitHub, developers can
contribute their efforts to Bootstrap.

+ When creating websites that need to load quickly and save time, the tools and methods
described above will be utilized. Particularly making consistency among engineers and
planners. Because of the aforementioned advantages, particularly those of Bootstrap, Boostrap
is an excellent option for website developers.

6.3. Provide selected technologies, management services, tools, and software for
presentation to make a website built on demand. (A few examples can be given: Laravel-
Vue -Apache, SpringBoot-ReactJS-MongoDB...)

- Lavarel-Vue-Aphe:

+ A PHP framework called Laravel is open-source and straightforward to comprehend. The

principles of model-view-controller design were utilized. Laravel uses components from other
frameworks that are already in use to make a web application. As a result, the developed web
application is more efficient and well-organized.

+ Laravel combines the fundamental components of PHP frameworks like CodeIgniter and
Yii with those of other programming languages like Ruby on Rails to provide a
comprehensive set of capabilities. The extensive feature set of Laravel will accelerate web
development.

+ Laravel will make your tasks easier if you are familiar with Core PHP and Advanced PHP.
If you plan to build a website from scratch, it saves a lot of time. Additionally, a Laravel-built
website protects against several web attacks.

- Vue is a cutting-edge front-end system that can assist anyone with building a site or web
application. It is light, versatile, and simple to use when first starting. However, it is also a
comprehensive, robust framework that is adaptable to the requirements of the most advanced
web application builder.

+ Laravel developers can use Vue JS to create the front end of their application without
having to reload the page each time a change is made. Vue helps you build a large-scale
application that is event-driven and completely front-end-driven.

+ Vue's command line interface allows for quicker project structure creation.
+ Building the most common front-end application may be done with the help of Vue's robust
ecosystem, which also offers some really useful add-ons. Vue-router, Vuex, Vue-test-utils,
Vue-dev-tools, Vue-CLIi, etc. could all be part of it.

7. SEO Website

7.1 What is web SEO?

- SEO stands for Search Engine Optimization and is a special Internet marketing technique.
The purpose of helping the website to achieve high rankings on search sites, typically Google.
So what is the information you need to know about SEO? Do not worry about the storm wiki
will answer for you.
- Types of good SEO do:
+ SEO keywords or website SEO is the most popular and common form. Most businesses or
+ SEOERs expect their keywords to have high rankings on Google's search results
+ SEO Photo: This is the way to use the technique to bring the image in your website to the
top of Google search when the user searches with that keyword and selects the display image
tab.
+ SEO Clip: Can SEO Videos, Clips available on the web or use other information channels
like YouTube to bring your site displayed on the video tab?
+ SEO Google Map (Local Seo): is a way to help searchers easily see the location to be
searched on Google Map
+ SEO App Mobile: This form of SEO will appear on the search page that Google displays,
making it easier for users to choose. (Danh, 2019).

7.2. Suggest ways to improve the position of the website on popular search engines like
Google, Bing

- Content Optimization: Writing high-quality content with relevant keywords for your goods
or services and adding value for the reader are all aspects of content optimization.
- Link building: is the process of finding relevant websites and linking to them from your
website. This will improve your website's reputation and trustworthiness in the eyes of search
engines.
- Utilize SEO tools: Utilize SEO tools like Google Analytics and Search Console to track and
enhance your website's SEO performance.
- Website speed optimization: Ensure that transitions are quick and your website remains
fluid.

III. WEB DESIGN AND CONSTRUCTION

1. Problem statement:
- You have just been accepted as an intern at BKS company, BKS is a company specializing
in providing software solutions to customers.
- You are tasked with meeting DWG clients and gathering requirements to build a website.
You must also send back to DWG the technologies selected to develop the website. A month
after meeting a customer BKS needs a demo of the website, you build a few websites
according to the previous design and come up with a scenario to test the features.
2. Problem analysis
2.1. Functional and non-functional requirements of the website.
- Functional:
~ The following elements must be present on the customer site:
+ Home page: A list of items and other website-related information;
+ Product-Detail page: Detailed information on the product the customer has chosen
+ Category: When a user picks a category in the menu bar, the filtered items are displayed.
+ Cart Page: Shows the items that the user has chosen and added to their shopping cart.
+ Search: Users can input the keyword they're looking for in the search box to look up
information on products by name, product code, and product category.
- In the admin section, the website must have
+ Dash Board: Display the total number of members, items, and orders.
+ Category Management: Admin can add, edit, and delete product categories.
+ Product Management: The administrator can manage information about different product
kinds by, for example, displaying a list of products, adding new products, editing products by
ID, and deleting products by ID.
+ User Management: Admin can handle information about certain product types: View Users,
Create New Users, Edit Users by ID, and Delete Users by ID.
+ Order Management: The administrator can manage information about different user kinds
by, for example, displaying the name, phone number, email, and customer address.
- Non-functional:
+ Time constraints.
+ Performance constraints, standards used, etc.

2.2. Technology used: frontend, backend, web server…

- Frontend: HTML, CSS, JS
- Backend: PHP
- Web server: Apache

2.3. ERD and Diagram

- ERD:
- Diagram:

3. Web interface design(Figma):

- Customer site:
+ home.php:
+ cart.php:

+ introduction.php:
+ category.php:
+ product_detail.php:
- Admin site:
+ admin.php:

+ user.php:
+ add_user.php:

+ edit_user.php:
+ categories.php:
+ add_categories.php:

+ edit_categories.php:
+ product.php:

+ add_product.php:
+ edit_product.php:

- order.php:
4. Evaluate the website development process:
- Website development process is quite easy, from coming up with Figma design ideas, to
creating demos using HTML and CSS.
- The real difficulty came at the stage of using MySQL and database, we had to create the
information tables according to the previously assigned requirements. We have connected the
data entered by the database and printed them out in the new product categories, the featured
products section. However, the process is quite difficult to add PHP in HTML.
- The technical challenge we encountered probably came from adding PHP to the HTML,
other than that the work was quite light, and not too difficult.

IV. ASSESSMENT OF WEBSITE BUILDING RESULTS

1. Demo website

1.1 Give images of websites built according to previous designs:

- Customer Site:
+ home.php:
+ product.php:
+ product_detail.php:

+ contact.php:
+ introduction.php:
+ cart.php:

- Admin site:
+ admin.php:

+ user.php:

+ add_user.php:
+ edit_user.php:

+ categories.php:
+ add_categories.php:

+ edit_categories.php:
+ product.php:
+ add_ product.php:

+ edit_ product.php:
+ order.php:

1.2 Provide evidence that the website has been built according to the design requirements
by the design requirements design, function

2. Result evaluation

2.1. Provide functional testing for the built website. (Manual test).

Test What is being How Date Expected Actual Action

tested? result Results taken
Check the link Click on the “Giỏ December Go to the OK None
from “Trang hàng” section on 31, 2022 “Giỏ hàng"
chủ” to the the header page.
“Giỏ hàng”
TC 1 page
Check the link Click on the “Giới December Go to the OK None
from “Trang thiệu” section on 31, 2022 “Giới thiệu"
chủ” to the the header page.
“Giới thiệu”
TC 2 page
TC 3 Check the link Click on the “Liên December Go to the OK None
 from “Giới hệ” section on the 31, 2022 “Liên hệ"
thiệu” to the header page.
“Liên hệ” page
Check the link Click on the “Sản December Go to the OK None
from “Liên hệ” phẩm” section on 31, 2022 “Sản phẩm"
to the “Sản the header page.
TC 4 phẩm” page
Check the link Click on the “Giới December Go to the OK None
from “Liên hệ” thiệu” section on 31, 2022 “Giới thiệu"
to the “Giới the header page.
TC 5 thiệu” page
Check the link Click on the “Giới December Go to the OK None
from “Trang thiệu” section on 31, 2022 “Giới thiệu"
chủ” to the the footer page.
“Giới thiệu”
TC 6 page
Check the link Click on 1 product December Go to the “ OK None
from “Trang in “Sản phẩm 31, 2022 Chi tiết sản
chủ” to the “ mới” category phẩm” page
Chi tiết sản
TC 7 phẩm” page
Check the link Click on the “Sản December Go to the OK None
from “Trang phẩm” section on 31, 2022 “Sản phẩm"
chủ” to the the header page.
“Sản phẩm”
TC 8 page
Check the link Click on 1 product December Go to the “ OK None
from “Sản in the “Danh mục 31, 2022 Chi tiết sản
phẩm” to the sản phẩm” in “ Sản phẩm” page
“Chi tiết sản phẩm”
TC 9 phẩm” page
TC 10 Check the link Click on the button December Go to the OK None
from “Chi tiết “Mua ngay” on 31, 2022 “Giỏ hàng”
 sản phẩm” to the page page
the “Giỏ hàng
hàng” page
Check the link Click on the December Go to the “ OK None
from “Chi tiết “Trang chủ” 31, 2022 Trang chủ”
sản phẩm” to section on the page
the “Trang chủ” header
TC 11 page
Check the link Click on the “Liên December Go to the “ OK None
from “Chi tiết hệ” section on the 31, 2022 Liên hệ”
sản phẩm” to footer page
the “Liên hệ”
TC 12 page
Check the link Click on the “Giỏ December Go to the “ OK None
from “Sản hàng” section on 31, 2022 Giỏ hàng”
phẩm” to the the footer page
“Giỏ hàng”
TC 13 page
Check the link Click on the “Liên December Go to the “ OK None
from “Sản hệ” section on the 31, 2022 Liên hệ”
phẩm” to the footer page
TC 14 “Liên hệ” page
Check the link Click on the “Giới December Go to the “ OK None
from “Sản thiệu” section on 31, 2022 Giới thiệu”
phẩm” to the the header page
“Giới thiệu”
TC 15 page
Check the link Click on the “ZN December Go to the “ OK None
from “Giới Shop” section on 31, 2022 Trang chủ”
thiệu” to the the header page
“Trang chủ”
TC 16 page
TC 17 Check the link Click on the “ZN December Go to the “ OK None
 from “Giỏ Shop” section on 31, 2022 Trang chủ”
hàng” to the the header page
“Trang chủ”
page
Check the link Click on the “ZN December Go to the “ OK None
from “Giới Shop” section on 31, 2022 Trang chủ”
thiệu” to the the header page
“Trang chủ”
TC 18 page
Check the link Click on the “ZN December Go to the “ OK None
from “Sản Shop” section on 31, 2022 Trang chủ”
phẩm” to the the header page
“Trang chủ”
TC 19 page
Check the link Click on the “Giới December Go to the “ OK None
from “Liên hệ” thiệu” section on 31, 2022 Giới thiệu”
to the “Giới the footer page
TC 20 thiệu” page
Check the link Click on the December Go to the “ OK None
from “Admin” “User” section on 31, 2022 User” page
to the “User” the selection table
TC 21 page
Check the link Click on the December Go to the “ OK None
from “Admin” “Categories” 31, 2022 Categories”
to the section on the page
“Categories” selection table
TC 22 page
Check the link Click on the December Go to the “ OK None
from “Admin” “Products” section 31, 2022 Products”
to the on the selection page
TC 23 “Products” page table
TC 24 Check the link Click on the December Go to the “ OK None
from “Admin” “Order” section on 31, 2022 Order” page
 to the “Order” the selection table
page
Check the link Click on the “Add December Go to the “ OK None
from “User” to User” section 31, 2022 Add User”
the “Add User” under the title page
TC 25 page
Check the link Click on the “Edit December Go to the “ OK None
from “User” to User” section on 31, 2022 Edit User”
the “Edit User” Action page
TC 26 page
Check the link Click on the December Go to the “ OK None
from “User” to “Products” section 31, 2022 Products”
the “Products” on the selection page
TC 27 page table
Check the link Click on the December Go to the “ OK None
from “User” to “Dashboard” 31, 2022 Admin”
the “Admin” section on the page
TC 28 page selection table
Check the link Click on the December Go to the “ OK None
from “User” to “Categories” 31, 2022 Categories”
the section on the page
“Categories” selection table
TC 29 page
Check the link Click on the “Add December Go to the “ OK
from Product” section 31, 2022 Add
“Products” to under the title Products” None

the “Add page

TC 30 Products” page
Check the link Click on the December Go to the “ OK None
from “Add “Product” section 31, 2022 Products”
Products” to the on the header page
TC 31 “Products” page
TC 32 Check the link Click on the December Go to the “ OK None
 from “Add “Home” section on 31, 2022 Admin”
Products” to the the header page
“Admin” page
Check the link Click on the December Go to the “ OK None
from “Order” section on 31, 2022 Order” page
“Categories” to the selection table
the “Order”
TC 33 page
Check the link Click on the “Edit December Go to the “ OK None
from Categories” 31, 2022 Edit
“Categories” to section on Action Categories”
the “Edit page
Categories”
TC 34 page
Check the link Click on the December Go to the “ OK None
from “Order” to “Dashboard” 31, 2022 Admin”
the “Admin” section on the page
TC 35 page selection table
Check the link Click on the December Go to the “ OK None
from “Order” to “Home” section on 31, 2022 Admin”
the “Admin” the header page
TC 36 page
Check the link Click on the December Go to the “ OK None
from “Order” to “Products” section 31, 2022 Products”
the “Products” on the selection page
TC 37 page table
Check the link Click on the December Go to the “ OK None
from “User” to “Home” section on 31, 2022 Home”
the “Home” the header page
TC 38 page
TC 39 Check the link Click on the December Go to the “ OK None
from “Home” section on 31, 2022 Home”
“Categories” to the header page
 the “Home”
page
Check the link Click on the December Go to the “ OK None
from “Edit “Home” section on 31, 2022 Home”
User” to the the header page
TC 40 “Home” page

2.2. Discuss how to ensure quality throughout the design and construction process and
website.

- Website Content Optimization

- Provide your contact information

- Hosting upgrade

- Improve site navigation

- Switch to WordPress

- Replace Flash with jQuery

- Code cleanup

- Define a main goal in the web

- Design upgrade

2.3. Evaluate the test plan, and give a way to optimize the website based on the test plan.

- A test plan is a comprehensive document that outlines test objectives, test strategy, the
resources (people, software, and hardware) needed for testing, test scheduling, test estimation,
and handover. The test plan acts as a guide for carrying out software testing tasks as a process
that is verified, tracked, and tested after each action taken by the test manager.

- The test plan aids in estimating the time needed to verify the accuracy of the application that
is being tested. It also aids in explaining the testing process to others outside the testing team,
such as developers, business managers, and customers. Tes Plan directs our thinking. It must
be adhered to like a rulebook. The management team can examine and apply the test plan's
important details, such as test estimation, test scope, and test strategy, for other projects.
- Test plan also supports me build by the requirements (requirements) of the supplier, testing
products, links, and related tools such as adding, editing, deleting,… and check the content
displayed on the website, check data input forms, check links & menus, check HTML/CSS
syntax errors, check data logging on the server, check database, check data the data sent to the
server is handled properly, check the translation (localization), check the cookie (browser) &
session (server).

- For the user page, we need to check the content, check the link logic and instructions, and
check the local culture and audience.

V. REFERENCE

Bill (2021). 17 Công Cụ Thiết Kế Ux/ui Hiện Đại Dành Cho Designer. [online] JAMstack
Vietnam. Available at: https://jamstackvietnam.com/blog/user-experience/17-cong-cu-thiet-
ke-ux-ui [Accessed 9 Dec. 2022].

Clifford, C. (2021). The Plain-English Guide to Domains & Domain Names. [online]
blog.hubspot.com. Available at: https://blog.hubspot.com/website/what-is-a-domain.

Cloud, F. (2021). Client Server là gì? Tìm hiểu mô hình Client Server từ A – Z. [online] FPT
Cloud. Available at: https://fptcloud.com/client-server/.

Cowell (2021). 10 CÔNG CỤ KIỂM THỬ PHẦN MỀM TỐT NHẤT CHO TESTER. [online]
CO-WELL Asia. Available at: https://co-well.vn/nhat-ky-cong-nghe/10-cong-cu-kiem-thu-
phan-mem-tot-nhat-cho-tester/ [Accessed 9 Dec. 2022].

Danh, V.H. (2019a). DNS là gì? Tầm quan trọng của DNS trong thế giới mạng. [online]
Trung tâm hỗ trợ kỹ thuật | MATBAO.NET. Available at: https://wiki.matbao.net/dns-la-gi-
tam-quan-trong-cua-dns-trong-the-gioi-mang/.

Danh, V.H. (2019b). SEO là gì? Tại sao SEO rất quan trọng với mỗi website. [online] Trung
tâm hỗ trợ kỹ thuật | MATBAO.NET. Available at: https://wiki.matbao.net/seo-la-gi-tai-sao-
noi-seo-rat-quan-trong-voi-moi-website/#seo-la-gi [Accessed 9 Dec. 2022].

Duyen, D.T. (2019). Kiểm thử phần mềm là gì? Quy trình kiểm thử phần mềm. [online]
viblo.asia. Available at: https://viblo.asia/p/kiem-thu-phan-mem-la-gi-quy-trinh-kiem-thu-
phan-mem-1VgZvayYKAw [Accessed 9 Dec. 2022].
G, H. (2017). Cách up web lên host của bạn - phương pháp nhanh nhất. [online] Hướng Dẫn
Hostinger. Available at: https://www.hostinger.vn/huong-dan/cach-up-web-len-host-cua-ban
[Accessed 9 Dec. 2022].

Google (2021). Tổ chức quản lý tên miền - Google Domains Trợ giúp. [online]
support.google.com. Available at: https://support.google.com/domains/answer/6279305?
hl=vi.

IDC, F. (2022). Sự khác nhau giữa HTTP và HTTPS. [online] fptidc.com.vn. Available at:
https://fptidc.com.vn/HTTP-HTTPS.html [Accessed 9 Dec. 2022].

Nguyen, N. (2022). Tổng Hợp Nguyên Tắc Vàng Và Xu Hướng Thiết Kế UI/UX Nổi Bật Bạn
Không Nên Bỏ Qua. [online] Glints Vietnam Blog. Available at:
https://glints.com/vn/blog/nguyen-tac-va-xu-huong-thiet-ke-ui-u/#1_tap_trung_vao_nguoi_du
ng [Accessed 9 Dec. 2022].

NS1 (2018). DNS: Types of DNS Records, DNS Servers, and DNS Query Types. [online] NS1.
Available at: https://ns1.com/resources/dns-types-records-servers-and-queries.

S. Gillis, A. (2021). What is a Web Server and How Does it Work? [online] WhatIs.com.
Available at: https://www.techtarget.com/whatis/definition/Web-server.

Scaler, T. (2022). Top 12 Backend Technologies You Must Know [2023]. [online] Scaler
Topics. Available at: https://www.scaler.com/topics/software-engineering/backend-
technologies/.

viblo (2017). Phân biệt QA và QC. [online] viblo.asia. Available at: https://viblo.asia/p/phan-
biet-qa-va-qc-RQqKLxd4K7z [Accessed 9 Dec. 2022].

Writers, G. (2022). Frontend, Backend, Fullstack là gì? Phân Biệt Frontend, Backend,
Fullstack. [online] Glints Vietnam Blog. Available at: https://glints.com/vn/blog/frontend-la-
gi-backend-la-gi-fullstack-la-gi/#frontend_la_gi_frontend_developer_la_gi [Accessed 9 Dec.
2022].