PROGRAM TITLE: ……………………………………………

UNIT TITLE: …………………………………………………….

ASSIGNMENT NUMBER: 1

ASSIGNMENT NAME: Website Design & Development

SUBMISSION DATE: ……………………………………….

DATE RECEIVED: …………………………………………….

TUTORIAL LECTURER: ……………………………………

WORD COUNT:

STUDENT NAME:

STUDENT ID:

MOBILE NUMBER:
Summative Feedback:

Internal verification:
Contents
A. INTRODUCTION.............................................................................................................................4
B. CONTENTS.......................................................................................................................................4
I. Server technologies and management services related to the hosting and management of
websites...................................................................................................................................................4
1. DNS.............................................................................................................................................4
2. Web server.................................................................................................................................7
3. Front-end and back-end website technologies, review the capabilities and responsibilities
of the technologies............................................................................................................................11
React.................................................................................................................................................14
Vue.js....................................................................................................................................................14
Angular.............................................................................................................................................14
4. Discuss the differences between online website creation tools and custom built sites with
regards to design flexibility, performance, functionality, User Experience (UX) and User
Interface (UI)...................................................................................................................................18
II. System analysis and evaluation...............................................................................................20
1. Techlonogy:..............................................................................................................................20
2. Require function:.....................................................................................................................21
3. System design:..........................................................................................................................21
A. INTRODUCTION

My report provides insights into the costs, mechanisms, and benefits of e-commerce. Since
IT admins have limited knowledge of websites, my first assignment is to provide an
understanding of server technology, storage, performance, usage experience, and
requirements. Hardware and software. Detailed usage will be presented in the next section.

B. CONTENTS
I. Server technologies and management services related to the hosting and
management of websites.
1. DNS
a. What is DNS?

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.

This operation of DNS helps link network devices together for the purpose of locating
and assigning a specific address to information on the internet.
 b. What is the function of DNS?

DNS can be understood as an “interpreter” and “communicator”. DNS will translate the
domain name into an IP address consisting of 4 different groups of numbers. For
example, www.tenmien.com into 421,64,874,899 or vice versa translates an IP address
into a domain name.
c. DNS record types:
 CNAME Record: This allows you to create a new name, point to the original name, and
set a TTL. In short, if the main domain wants to set one or more other names, this record
is required.
 A Record: This record is commonly used to point the Website name to a specific IP
address. This is the simplest DNS record, allowing you to add Time to Live, a new name,
and Points To.
 MX Record: With this record, you can point Domain to Mail Server, set TTL, Priority.
The MX Record specifies which Server manages that domain's email services.
 AAAA Record: To point a domain name to an IPV6 Address, you will need to use AAA
Record. Nod allows you to add a new host, TTL, IPv6.
 TXT Record: You can also add new TXT, Host, Points To, TTL values. To contain the
Domain's text formatting information, you will need this record.
 SRV Record: A record used to determine exactly which service runs on which port. This
is a special record in DNS. Through it, you can add Name, Priority, Port, Weight, Points
to, TTL.
  NS Record: With this record, you can specify the Name Server for each subdomain. You
can create a new Name Server, Host, TTL.

d. What is the working principle of DNS?

Each service provider operates and maintains its own DNS server, consisting of
machines within each service provider's own portion of the Internet.

That is if a browser searches for the address of any website, the DNS server that resolves
this website's name must be the DNS server of the organization that manages the
website, not an organization (service provider). ) any other.

INTERNIC (Internet Network Information Center) is responsible for keeping track of

domain names and corresponding DNS servers. INTERNIC is an organization formed
by the NFS (National Science Foundation), AT&T, and Network Solution, responsible
for the registration of Internet domain names. INTERNIC is only responsible for
managing all DNS servers on the Internet, not for resolving names for each address.

DNS has the ability to query other DNS servers for a resolved name. The DNS server of
each domain name usually has two different things.

 First, it is responsible for resolving names from machines within the domain to Internet
addresses, both inside and outside the domain it manages.

 Second, they respond to external DNS servers trying to resolve names within the domain
it manages. The DNS server is capable of remembering the resolved names. For later
resolution requests. The number of name resolutions stored depends on the size of each
DNS.

2. Web server
a. What is the protocol?

HTTP is the abbreviation for HyperText Transfer Protocol (hypertext transfer protocol),
which is a basic protocol used for the World Wide Web (www) to transfer data in the
form of text, images, video, audio. and other files from the Web server to the web
browser and vice versa.
HTTPS stands for HyperText Transfer Protocol Secure and is the HTTP protocol that
uses additional SSL (Secure Sockets Layer) certificates to help encrypt transmitted data
to increase security between Web servers and web browsers. In other words, HTTPS is
the HTTP version but safer, more secure

HTTP HTTPS

Port Port 80 Port 443

Encode HTTP is not at all HTTPS is encrypted

information, using SSL /
TSL standard security
technology, encrypted
communication between the
Web server and the browser

Securit With HTTP, information is HTTPS supports

y not encrypted, so it is easy authentication of the identity
to be attacked by Hackers. of the website that the client
visits through a security
certificate check. These
security authentications are
provided and verified by
reputable CAs (Certificate
Authority). When
authenticated from the CA,
the user will know that he is
accessing the right website to
look for instead of a certain
impersonation website.
 b. What is web server?

Web server is also known as a web server, 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.

 To publish a website
 A static web server consists of a computer with an HTTP server. We call it a
static webserver because the web server sends its unchanged file to the user's
browser.
 A dynamic web server consists of a static web server along with its
extensions, most commonly application servers and databases. We call it
dynamic web because the application server updates the host file before
sending it to the user's browser via the HTTP server.
For example, to generate the final web page you see in your browser, the
application server will fill in the HTML templates with content pulled from the
database. For example, MDN and Wikipedia have thousands of web pages. But
they are not real HTTP documents. Just one HTML template and a huge
database. This setting makes it easier and faster for content management and
transmission.
Web server communication over HTTP
 How the webserver interacts
To access a web page, your browser sends a request to the server. The web server
will process and look for the requested file in the web server's memory. In
 finding a file, the server will read the file, process it if needed, and then send it
back to the browser.
c. In terms of 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.

The web server is connected to the internet and accessed through a domain like
mozilla.org.

d. In terms of software:

The web server consists of several sections that control web user access to the host's file 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.

e. Hosting files:

Firstly, the webserver has to store the files of the website which are all the HTML files and its
related files like CSS and javascript, fonts, and videos...

Technically, you can store all those files on your computer, but for added convenience, we
should store that data on separate web servers that have the following characteristics:

 Always running and working continuously.

 Always connected to the internet.
 Always have an IP address.
 Maintained by a 3rd party supplier.

For all of the above reasons finding a good hosting provider is an important part of developing
websites. There are so many companies that offer hosting solutions for web development you
just need to choose a good website that fits your budget.
3. Front-end and back-end website technologies, review the capabilities and
responsibilities of the technologies.

Ront Front-end and back-end are very important in programming a website. Each one
will have its own function and a close relationship with each other. When accessing
awebsite, user experience is very important. It includes many factors from page load
speed, layout, design to image quality, website stability. The front-end of a website is the
interfaceto interact with users. Everything that you can see on the website belongs to the
front-end from the font, the color to the menu bar, the slider up and down. Back-end job.
The mainfunction of a Back-end developer is to ensure that the information and services
required by Front-end are implemented. They are the ones responsible for maintaining
the entiresystem, based on the integration process

Front-end: 3 main languages: HTML, CSS, and JavaScript programming languages and
frameworks like Bootstrap, Foundation, Backbone, AngularJS, and EmberJS to help
ensure content is always displayed well on all different device

Back-end : To make server, application, and database interoperable, server-side

languages such as PHP, Ruby, Python, Java, and .Net are often used. build
anapplication, and tools likeMySQL, Oracle, and SQL Server tosearch, store,or change
dataand serve it back to the user in the front-end.how these relate to presentation and
application layers.

a. Distinguish Server-side rendering vs Client-side rendering.

 Server-side rendering.
 Server-side rendering is a mechanism that has been around for a long time. Call it server-
side rendering because most of the logic will be handled at the server:
 When the user enters a web page, the browser sends a GET request to the webserver
 The web server will receive the request, read data from the database.
 The web server will render the HTML and return it to the browser to display to the user
 Some properties of the server-side rendering mechanism:
 Logic from simple (validation, read data) to complex (decentralization, payment) is on
the server-side
 The logic for routing – page switching is on the server
 The logic for rendering – rendering the web page is also on the server
 Advantages of Server-side Rendering:
 Initial load is fast, easy to optimize because all data has been processed at the server.
The client just displays.
 All web frameworks from the past to now support this mechanism
 Easier to understand and easier to code. Developer only needs to code 1 web project, no
need to separate front-end and back-end
 Runs on most browsers, even disabling JavaScript works fine
 Disadvantages of Server-side Rendering:
 Every time the user turns the page, the site has to reload many times, which is annoying
 Heavy on the server because the server has to handle a lot of logic and data. Caching
can be used to reduce the load.
 Consumes bandwidth because the server has to send a lot of redundant and duplicate
data (HTML, header, footer). A CDN can be used to reduce the load.
 Interaction is not as good as Client-Side rendering because the page has to refresh and
reload many times.
  Client-side rendering.

Starting in the 2010s, with the development of javascript and ajax, client-side rendering
mechanisms started to be used Developers started building apps as SPA - Single Page
Application. Application is in unique 1-page, so-called Single Page Application.

Client-side rendering means rendering of HTML, CSS will be done at the client (web browser
JavaScript)

 The simple logic (validation, data reading, sorting, filtering) are on the client-side
 The logic for routing (turning pages), rendering (displaying) data is mostly on the client-
side, of course, there are still some routing applications that are still managed by the
server.
 Complex logic (payment, decentralization) or the need to handle a lot (data processing,
report) is still on the server-side.
 Advantages of Client-side Rendering
 The page only needs to load once. When the user turns the page or adds data,
JavaScript fetches and sends the data from the server via AJAX. Users can see new data
without turning the page.
 Moving logic to the client should reduce some of the load on the server.
 Reduced bandwidth by just getting the required JSON and data, instead of having to get
the entire page
  For applications that need a lot of interaction, SPA works more smoothly because the
code runs in the browser, no need to load and re-type a lot.
 Disadvantages of Client-side Rendering
 The initial load will be slower if optimize is not known. The reason is that the browser
has to download all the JavaScript (which is quite heavy), parse and run the JS, call the
API to get data from the server (slow), then render the data.
 Requires the project to be divided into two separate parts, the back-end (REST API)
and the front-end, so it is more difficult to code
 Cannot run if JavaScript is disabled, or in older browsers that do not accept JavaScript
ES6 (Can use transpiler and polyfill but will increase the js file size)
 If the client uses a mobile device, the device is weak, the load will be slow
b. Front-end website technologies

React Vue.js Angular

Overview Created as an open- Originally created as a As Google's flagship

source project and still fork of Angular by JS Framework,
used by Facebook, React engineers at Google, Angular has been in
is a popular JS Vue.js was developed development for a
Framework focused on as an alternative to while. Although it is
user experience. Angular and React. It not the easiest
Unlike some other was created to be a framework to learn for
frameworks, React is minimalist version of beginners, the longer
very flexible. Regardless Angular, but it has you use Angular, the
of the underlying evolved significantly easier it will feel.
technology you are using, over the years. It is well-suited for
you should be able to Vue uses traditional flexible staffing
take advantage of React. HTML, CSS, and JS, projects because the
Similar to objects in the and developers can way it encapsulates
OOP language, React create components just components makes it
allows programmers to like other popular modular and easy to
 create "components". The frameworks, like understand for new
state of each component React. What makes developers on the
is managed separately, this different is the team.
making it easy to fetch support for two-way Programmers leverage
and display data. data binding. Angular to make apps
What makes React Since it takes ideas look like Google apps.
unique is that it can be from both React and Combined with
rendered on either the Angular, it shouldn't be Material Design, it is
server-side or the client- difficult to switch from difficult to distinguish.
side. either to Vue.
Depending on data What made Vue so
security requirements, popular in the
specific components may beginning was its
be rendered on the server excellent
side while other documentation and
components are rendered tutorials, along with
on the client-side. tons of useful
Also, those who want to developer tools. It has
create cross-platform its own CLI, a browser
mobile apps will extension for
definitely like React debugging, a state
Native. management system,
and a server rendering
emulator.
Advantages  React's reusable  Has great  Angular is suitable
components ensure that documentation and is for extremely
developers don't have to intended for complex web
write the same code beginners as well as applications that can
over and over again. seasoned be developed at
 Due to the popularity of programmers. enterprise-scale on
React, it is easy to find Especially the par with desktop-
 help and resources for original Vietnamese based applications.
React. version of Vue  With Google
(Because there are ensuring long-term
Vietnamese people in support for this
the Vuejs team). open-source project,
 Vue comes with a developers can study
great set of tools that with confidence.
make programming
faster and less
painful.
 Components can be
created from
traditional HTML,
CSS, and JS.
Therefore, it makes it
easy for
programmers to
learn. Easier to learn
than React, Angular.
Disadvantages  React's an intense focus  Vue came out later  Angular is very
on UI development can than its competitors, complex and has one
make other aspects making it still a bit of of the steepest
difficult. a wildcard to use. learning curves.
 To learn React you  Given its low age,  Debugging can be
need a good which has only problematic because
background, partly due increased recently, it it lacks the caliber of
to inconsistent still has few tools of some of its
documentation. supporters. competitors.
Ideal Experienced web Programmers with Seasoned
developers who want to little web programmers and
create a website or programming engineers with
 mobile app with a rich
interface.
c. Back-end website technologies
PHP ASP.NET
Fast processing Fast processing
speed, high efficiency speed, high efficiency speed, high efficiency
Low cost (free High cost (due in part
language does not to buying copyright)
cost copyright)
Fast and simple Time to code and
coding and deploy is a bit
development time complicated, slower
than PHP
A large number of The number of
hosting providers, hosting providers is
easy to choose not much, so it is
difficult to choose
The number of The number of
website providers is website providers is
more, the ability to more, the ability to
choose a suitable choose a suitable
website is better website is better
Easy and fast Expand and develop
scalability and the website easily
experience who need enterprise applications
rapid prototyping. who need maximum
flexibility and are
willing to invest time
in learning.
ASP JSP/JAVA
Fast processing A bit slow
Average cost (due in High-cost cost
part to buying
copyright)
Average code and Time to code and
deployment time deploy is a bit
complicated, slower
than PHP
The number of The number of
hosting providers is hosting providers is
not much, so it is small, hard to find
difficult to choose
Small number of The number of
website providers website providers is
small, the ability to
choose to build a
suitable website is
very difficult
The ability to expand The ability to expand
and develop the and develop the
 development website is difficult website is difficult
Rich and diverse Rich and diverse Tools and technology Tools and technology
supporting tools and supporting tools and to support are few, to support are few,
technologies. Web technologies. Web hard to find. hard to find.
development based development based
on web 2.0. Using on web 2.0. Using
Ajax technology Ajax technology
makes browsing makes browsing
faster and more user- faster and more user-
friendly. friendly.

4. Discuss the differences between online website creation tools and custom built sites with
regards to design flexibility, performance, functionality, User Experience (UX) and
User Interface (UI).
Wix và wordpress Websites are built
Flexibility of Wix and wordpress: Flexibility of  High flexibility
design and design and performance  Low productivity
performance Wix: Wix is a great free web  Requires high expertise
building platform One of the biggest  Long product completion time
advantages of WIX is that it
 High cost
allows you to build websites with
simple drag and drop. Tools, features
integrated smartly.This makes
designing and editing the website
interface convenient and fast. Just go
to Manage Pages and click the
button. Your new pages will be
automatically added to the
navigationmenu. Wix has many
ready-made designs so to design a
website, you just need to choose the
interface you want, update the
content and images and you're done.
but the templates thatwix provides
have an important disadvantage that
you cannot change the model when
you start your editing process. and
you can even change the look and
feel of your website onmobile with
wix mobile editing
Wordpress: although wordpress
started out as a simple blogging
platform, it rose quickly and
outstripped other competitors and
became a versatile builder that
allowed you to createmany different
websites. It has over 40,000 plugins
available and especially all are free.
Wordpress themes can be found at
two places at wordpress.org and
various independent themewebsites
and theme stores. but in contrast to
wix, you will not be able to use
WYSIWYG editing to change and
edit your wordpress theme, if you
want to change then you must
knowhow to read the code.
 Flexibility is not high because
you have to depend on online
website creation tools.
 High productivity because
easy to use does not require
 users to know in-depth
coding.
Functionality Wix has many useful functions for The functionality will depend on the
users. It integrates many functions needs set forth when building the web
into websites such as, comment,
forums, live chat, this Site builder
supports you to adjust a lot of styles,
suchas themes and tools. Other
designs are easily found
here.Wordpress also has lots of cool
and unique functions. This platform
has thousands of plugins and themes.
These tools can help you change the
design and functionality of
yourwebsite thoroughly.Youcan
createalmost anykind of website you
can think of,with every function
available. Moreover,most of the best
WordPressplugins are free .
Conclusion Low cost, short web creation time, High cost, long web creation time,
low flexibility high flexibility

II. System analysis and evaluation.

1. Techlonogy:

 <PHP

 Framework Laravel

 Javascript

 Bootstrap 5

 Jquery
2. Require function:

 <AdminChỉ ra những loại đối tượng sử dụng hệ thống

o Login

o Product Management

o Brand Management

o Brand Management

o Logout>

 Customer

o Login

o Search

o Order

o Payment

o Logout

o VD:

o Khách hàng chưa có tài khoản:

o Đăng ký

o Xem tất cả sản phẩm

o Tìm kiếm

3. System design:
3.1. Cơ sở dữ liệuDatabase
<TableTừng bảng trong cơ sở dữ liệu>

AccountsSinh viên

id_accountsinh_vien int primary key auto_increment

usernameten_sinh_vien varchar(1050)

password varchar(1050)

type_account boolean

Customers

id_customer int primary key auto_increment

name varchar(100)

email varchar(100)

phone_number varchar(15)

address varchar(200)

id_account int foregin key major(id_account)

Employees

id_employee int primary key auto_increment

email varchar(100)

name varchar(100)

phone_number varchar(15)

address varchar(200)

id_course int foregin key course(id_course)

id_account int foregin key major(id_account)

Brands

id_brand int primary key auto_increment

name varchar(100)

description text

Products

id_product int primary key auto_increment

name varchar(100)

price float

image varchar(200)

quantity int

id_brand int foregin key class(id_brand)

Orders
id_order int primary key auto_increment

Name_customer varchar(100)

phone_number varchar(15)

address varchar(200)

id_customer int foregin key class(id_ customer)

Order_details

id_order_detail int primary key auto_increment

price float

quantity float

is_up_set boolean

id_product int foregin key class(id_ product)

id_order int foregin key class(id_ order)

Import_products

id_imp_product int primary key auto_increment

total_price float

quantity float

id_product int foregin key class(id_ product)

id_employee int foregin key class(id_ employee)

Database diagram

Entity diagram
 3.2. Testing
Customer

Description Step Expected Result

Check the layout of the Check UI -Display the same screen
account registration screen (Refer Layout Item 1)
Check the registration screen 1.Click the registration button
processing 2.Enter the full field
information correctly -Display screen login (Refer

3.Click button Submit Layout Item 2)

1.Click the registration button - Show error request enter the

2.Enter missing a field full field information
information
3.Click button Submit
Check the layout of login Check UI
screen
Check layout login
Check layout of home screen
Check the handle search bar
Check processing button 1.Log in to the system
ADD TO CARD
Check the cart screen layout
Check cart processing
-Show the same screen (Refer
Layout Section 3)
3.Click button Submit - Displaying an error asking
to enter full-field information
(Refer Layout Section 4)
1. Log in to the system -Display the same screen
2.Check UI (Refer Layout Section 5)
1.Log in to the system -Show products in the menu
2.Click the search bar (Refer Layout Section 6)
3.Enter the product name in
the menu
4. Press Enter
1.Log in to the system -No products found in the
2.Click the search bar menu
3.Enter a product name that is -The screen does not show
not on the menu the product
4. Press Enter
-Product added to cart
2.Select 1 product
3.Click the button ADD TO
CARD
1.Log in to the system -Display the same screen
2. .Select 1 product (Refer Layout Section 6)
3.Click the button ADD TO
CARD
4.Click on the cart
5.Check UI
1.Log in to the system - Display the products in the
2. .Select 1 product shopping cart

Check the layout of Payment
3.Click the button ADD TO -Show the total amount of
CARD products in cart
1.Log in to the system Show the screen same (Refer
2. .Select 1 product to Layout Section 7)
3.Click the button ADD TO
CARD
4.Click on the cart
5.Click the button Payment

Admin

Description Step Expected Result

Check the layout of login 1.host -Show the same screen
screen http://127.0.0.1:8000/login (Refer Layout Section )
2. Check UI
Check layout login
3.Click button Submit - Displaying an error
asking to enter full-field
information (Refer Layout
Section )
Check display of Brands Check UI - Display the same screen
items (Refer Layout Item )
Check to delete 1.Log in to the system - Data is deleted
productitem 2. Click menu Brands
 3. Input delete
Check and edit the list 1.Log in to the system -Show items to fix (Refer
2. Click menu product Layout Section )
3. Input edit - The product item is edited
and displayed on the
product
Check add product 1.Log in to the system - display additional input
2. Click menu product items product
3. Input add product - More success product
Check display of product Check UI - Display the same screen
items (Refer Layout Item )
Check to delete product 1.Log in to the system - Data is deleted
item 2. Click menu product 3.
Input delete
Check and edit the list 1.Log in to the system -Show items to fix (Refer
2. Click menu Brands Layout Section )
3. Input edit - The product item is edited
and displayed on the
Brands
Check add Brands 1.Log in to the system - display additional input
2. Click menu Brands items Brands
3. Input add Brands - More success Brands
Check more Bills items Check UI Display information input
items
Reference:

https://wiki.matbao.net/dns-la-gi-tam-quan-trong-cua-dns-trong-the-gioi-mang/

https://bizflycloud.vn/tin-tuc/tat-tat-kien-thuc-co-ban-ve-web-server-ban-phai-biet-
20180515115521302.htm

https://niithanoi.edu.vn/front-end-framework-pho-bien-nhat.html

https://bicweb.vn/vi/kien-thuc-ve-website.nd216/diem-danh-cac-cong-nghe-pho-bien-phat-trien-
website-hien-nay.i1175.html