Information Technology: Assignment 1 & 2

BTEC FPT INTERNATIONAL COLLEGE
INFORMATION TECHNOLOGY
ASSIGNMENT 1 & 2:
UNIT: PROGRAMMING
STUDENT : TRAN VAN MINH NHAT

CLASS : BDAF-2005-1
STUDENT ID : BDAF190002
SUPERVISOR : PhD. VO DUC HOANG
DaNang, January 2020

Learning Outcomes and Assessment Criteria
Pass Merit Distinction
LO1 Explain server technologies and management services LO1 & 2

associated with hosting and managing websites D1 Justify the tools
and techniques
P1 Identify the purpose and M1 Evaluate the impact of
chosen to realise a
types of DNS, including common web development
custom built
explanations on how domain technologies and frameworks
website.
names are organised and with regards to website design,
managed. functionality and management.
P2 Explain the purpose and M2 Review the influence of
relationships between search engines on website
communication protocols, server performance and provide
hardware, operating systems evidence-based support for
and web server software with improving a site’s index value
regards to designing, publishing and rank through search engine
and accessing a website. optimisation.
LO2 Categorise website technologies, tools and software used to

develop websites
P3 Discuss the capabilities and M3 Evaluate a range of tools

relationships between front-end and techniques available to
and back-end website design and develop a custom
technologies and explain how built website.
these relate to presentation and
application layers.
P4 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).
i
ii
ASSIGNMENT 1 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing
Unit number and title 10: Website Design & Development
Submission date Date Received 1st submission
Re-submission Date Date Received 2nd submission
Student Name Student ID
Class Assessor name
Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the
consequences of plagiarism. I understand that making a false declaration is a form of malpractice.
Student’s signature
Grading grid
P1 P2 P3 P4 M1 M2 M3 D1
iii
Assignment Feedback
Formative Feedback: Assessor to Student
Action Plan
Summative feedback
iv
ACKNOWLEDGMENTS
First of all, I would like to thank my family for allowing me to study at Btec
International College, one of the most modern schools in Vietnam. Next, I would like to
thank Mr. Vo Duc Hoang for sharing the experiences and ways we should use to study this
subject well, and I think that a good teacher is a teacher. study for students, not submit
knowledge to students. Next, I would like to thank my K2 IT students of Btec FPT because
they helped me complete this report in the best way.
v
ASSURANCE
I certify that this assignment is my own work, based on my personal study and that I
have acknowledged all material and sources used in its preparation, whether they be
books, articles, reports, lecture notes, and any other kind of document, electronic or
personal communication. I also certify that this assignment has not previously been
submitted for assessment in any other unit, except where specific permission has been
granted from all unit coordinators involved, or at any other time in this unit, and that I have
not copied in part or whole or otherwise plagiarised the work of other persons.
Learners declaration
I certify that the work submitted for this assignment is my own and research sources
are fully acknowledged.
Student signature: Date:
vi
TABLE OF CONTENT
ASSURANCE.............................................................................................................vi
TABLE OF CONTENT..............................................................................................vii
LIST OF FIGURES......................................................................................................x
LIST OF TABLES......................................................................................................xii
INTRODUCTION.........................................................................................................1
CHAPTER 1 LO1 Explain server technologies and management services

associated with hosting and managing websites...................................................................2
1.1 Identify the purpose and types of DNS, including explanations on how
domain names are organised and managed (P1).............................................................2
1.1.1 Definition...................................................................................................2
1.1.2 Purpose and type of DNS.........................................................................2
1.1.3 How does DNS Work...............................................................................4
1.1.4 How domain names are organized..........................................................5
1.2 Explain the purpose and relationships between communication protocols,

server hardware, operating systems and web server software with regards to designing,
publishing and accessing a website (P2)...........................................................................6
1.2.1 Communication protocols.........................................................................6
1.2.2 Web server hardware.............................................................................12
1.2.3 Web server software..............................................................................13
1.2.4 Host operating system............................................................................17
1.2.5 Relationship............................................................................................18
1.3 Evaluate the impact of common web development technologies and

frameworks with regards to website design, functionality and management (M1)..........20
1.3.1 Evaluation Of Web Application Frameworks..........................................20
1.3.2 The Impact Of Frameworks With Regards To Functionality..................22
vii
1.4 Review the influence of search engines on website performance and
provide evidence-based support for improving a site’s index value and rank through
search engine optimisation (M2)......................................................................................23
1.4.1 Concept of search engine......................................................................23
1.4.2 Concept of SEO.....................................................................................25
1.4.3 Technical solution to improve website index based on SEO.................25
CHAPTER 2 LO2 Categorise website technologies, tools and software used to

develop websites 31
2.1 Discuss the capabilities and relationships between front-end and back-end
website technologies and explain how these relate to presentation and application layers
(P3). 31
2.1.1 Explanation of static and dynamic web..................................................31
2.1.2 Front End................................................................................................32
2.1.3 Back End................................................................................................39
2.1.4 The relationship between Front-end and Back-end...............................41
2.1.5 How Front-end and Back-end relate to presentation and application

layer 45
2.2 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) (P4)....................................................................................47
2.2.1 Online website creation tools and custom built sites.............................47
2.2.2 Differences between online website creation tools and custom-built sites
54
2.3 Evaluate a range of tools and techniques available to design and develop a
custom built website (M3)................................................................................................57
2.3.1 Tools.......................................................................................................57
2.3.2 Technique...............................................................................................58
CHAPTER 3 LO1 & 2............................................................................................60
viii
3.1 Justify the tools and techniques chosen to realise a custom built website
(D1). 60
3.1.1 Design Wideframe..................................................................................60
3.1.2 Design Visual.........................................................................................61
3.1.3 Languages..............................................................................................62
3.1.4 Text editor...............................................................................................66
3.1.5 Local server............................................................................................67
CONCLUSION..........................................................................................................70
REFERENCES..........................................................................................................71
ix
LIST OF FIGURES
Figure 1 Purpose of DNS............................................................................................3
Figure 2 How does DNS work.....................................................................................5
Figure 3 Domain name...............................................................................................5
Figure 4 Layers in the OSI model...............................................................................7
Figure 5 Illustration image of web server hardware..................................................12
Figure 6 How to overview the performance of web server software........................14
Figure 7 Web server Apache....................................................................................16
Figure 8 Web server IIS............................................................................................17
Figure 11 Some popular search engines..................................................................24
Figure 12 Search engine optimization......................................................................25
Figure 13 For example a static website....................................................................31
Figure 14 For example a dynamic website...............................................................32
Figure 15 A code snippet of a front-end developer..................................................33
Figure 16 <HTML> tag..............................................................................................33
Figure 17 HTML5......................................................................................................34
Figure 18 CSS3.........................................................................................................35
Figure 19 Bootstrap..................................................................................................36
Figure 20 SASS........................................................................................................36
Figure 21 javaScript..................................................................................................37
Figure 22 Responsive design illustrations................................................................38
Figure 23 Illustrative image of Perceived Performance............................................38
Figure 24 A code snippet of a back-end programmer..............................................39
Figure 25 Python laguage.........................................................................................40
Figure 26 Java language..........................................................................................40
Figure 27 C# language.............................................................................................41
Figure 28 PHP language...........................................................................................41

x
Figure 29 Full-stack development.............................................................................43
Figure 30 Function of presentation layer..................................................................46
Figure 31 The function of Application Layer.............................................................46
Figure 32 The function of Database layer.................................................................47
Figure 33 Online website creation tools....................................................................48
Figure 34 Choosing a design template that best fits your needs.............................49
Figure 35 Edit an element.........................................................................................49
Figure 36 Add new elements and widgets................................................................50
Figure 37 Sitemap and wireframe creation...............................................................52
Figure 38 Balsamiq...................................................................................................60
Figure 39 Photoshop.................................................................................................62
Figure 40 HTML5......................................................................................................63
Figure 41 CSS3.........................................................................................................63
Figure 42 javaScript..................................................................................................65
Figure 43 jQuery.......................................................................................................65
Figure 44 Boostrap 4................................................................................................66
Figure 45 Visual Studio Code...................................................................................66
Figure 46 Xampp.......................................................................................................67
Figure 47 Apache......................................................................................................68
Figure 48 MySQL......................................................................................................68
Figure 49 PHP...........................................................................................................69
LIST OF TABLE
xi
Table 1 Hardware Requirements..............................................................................13
Table 2 Software Requirements for Web Servers....................................................15
Table 3 Software Requirements for Database Servers............................................16
Table 4 Front-end and Back-end..............................................................................45
Table 5 Differences between online website creation tools and custom-built sites. 56
Table 6 Tools to design and develop a custom built................................................58
Table 7 Techniques to design and develop a custom built......................................60
xii
xiii
INTRODUCTION
A website is a collection of publicly accessible, interlinked Web pages that share a

single domain name. Websites can be created and maintained by an individual, group,
business or organization to serve a variety of purposes. Together, all publicly accessible
websites constitute the World Wide Web. Although it is sometimes called “web page,” this
definition is wrong, since a website consists of several webpages. A website is also known
as a “web presence” or simply “site”. Websites come in a nearly endless variety, including
educational sites, news sites, porn sites, forums, social media sites, e-commerce sites,
and so on. The pages within a website are usually a mix of text and other media. That
said, there are no rules dictating the form of a website. A person could create a website of
nothing but black and white photos of roses, or the word "cat" linked to another Web page
with the word "mouse." However, many sites follow a standard pattern of a homepage that
links off to other categories and content within the website. The homepage (or simply
“home”) represents the main page of the site itself. Frequently, the homepage is a sort of
“hub” from which all other pages can be accessed. An internal web page to which several
other pages are linked in a coherent structure (such as a specific category of topics) is
instead called a “parent page.” Every page is a single HTML document, and all of them are
connected through hyperlinks (or simply “link”) which can be combined in a navigation bar
for ease of use. The navigation bar is displayed on every page rather than just the
homepage, and allows the user to quickly move across the main website’s structure.
Another important section of most websites is the footer, which is another recurring section
that is found at the bottom of every page. Usually the footer contains external links pointing
to similar websites and other external resources, together with other vital info such as
disclaimers, links to the terms of service, privacy policy and contact pages, as well as the
physical address of the company that owns the site.
Perfomed Student: BDAF190002-TranVanMinhNhat 1

CHAPTER 1 LO1 Explain server technologies and management
services associated with hosting and managing websites
1.1 Identify the purpose and types of DNS, including explanations on how
domain names are organised and managed (P1).
1.1.1 Definition
DNS stands for Domain Name System, which means full name resolution system.
Most shortly, DNS is a system that converts the website domains we are using,
in www.tenmien.com form to a digital IP address corresponding to that domain and vice
versa.
1.1.2 Purpose and type of DNS
1.1.2.1 Purpose
Functionally, DNS can be understood as a "translator" and "communicator". DNS

will do the job of translating the domain name into an IP address consisting of 4 different
groups of numbers. For example www.tenmien.com to 421.64.874.899 or vice versa
translating an IP address into a domain name.
When "translating" like that, the browser will understand and log in. And when a
user logs in to a website, instead of having to remember and enter a range of hosting IP
addresses, just enter the website name and the browser automatically recognizes it.
Every computer on the Internet has a unique IP address. This IP address is used to
establish a connection between the server and the client to initiate a connection.
Whenever you visit an arbitrary website or send an email, DNS plays a very important role
in this case.
In countless websites around the world, no one will be able to remember every
sequence of IP addresses in every login. Hence, the concept of domain names was
introduced, from which each website would be identified with its unique name.
However, the IP address is still used as a platform connected by network devices.

That's where DNS works to resolve domain names into IP addresses for the network
devices to communicate with each other. At the same time, you can also download a
website by entering the IP address directly instead of entering the domain name of that
website.

Figure 1 Purpose of DNS
1.1.2.2 Type of DNS
 Root Name Servers:
Also commonly referred to as Name Server. This is the most important server in the
hierarchy of DNS. You can also understand that the Root Name Server is a library to
navigate the search for you.
As a matter of fact, after receiving a request from DNS Recursive Resolver, the
Root Name Server will respond that it should look for specific top-level domain name
servers (TLD Name Servers).
 DNS Recursor:
As mentioned above, this "hard handle" acts as an industrious employee, taking on
the task of retrieving and returning information to the browser to find the right information
they need.
In other words, DNS Recursor is responsible for communicating with other servers
in response to the user's browser. Of course, in the process of retrieving information,
sometimes it will also need the help of the Root DNS Server.
 TLD Nameserver:
When you want to access Google or Facebook, usually, your extension is ".com"
right? So I want you to know that it is one of the Top-level Domains there. And the Server
for this type of Top-level domain is called TLD Nameserver. This is the entire information
system manager of a generic domain name extension.
In sequence, the TLD Name Server will respond from the DNS Resolver, then refer
it to an Authoritative DNS Server - or the official repository for that domain's data source.

 Authoritative Nameserver:
When DNS Resolver found the Authoritative Nameserver, that was when the
domain name resolution happened.
On the other hand, the Authoritative Name Server contains information about which
address the domain name is tied to. This will give Recursive Resolver the necessary IP
address found in its list of records.
1.1.3 How does DNS Work
The working principle and process of DNS are divided into the following steps:
 Step 1:
The client proposes a domain name resolution request and sends the request to the
local domain name server.
 Step 2:
When the local domain name server receives the request, it first queries the local
cache. If there is this record, the local domain name server directly returns the result of the
query.
 Step 3:
If the local cache does not have the record, the local domain name server directly
sends the request to the root domain name server, and then the root domain name server
returns the primary domain name of the domain (the subdomain of the root) of the local
domain name server. The address of the server.
 Step 4:
The local server sends a request to the domain name server returned in the
previous step, and then the server that accepts the request queries its cache. If there is no
such record, it returns the address of the relevant lower-level domain name server.
 Step 5:
Repeat step 4 until you find the correct record.
 Step 6:
The local domain name server saves the returned results to the cache for the next
use and returns the results to the client.

Figure 2 How does DNS work
1.1.4 How domain names are organized
1.1.4.1 What is Domain Names
Domain (domain name) is the name of a website operating on the Internet.

Basically, the domain name is the physical address for your website. Let the satellite
routers guide users to the website.
It serves as the home address or zip code to locate. The web browser needs a
domain name to direct you to a website.
Figure 3 Domain name

A domain name consists of 2 parts:
 Site name. Example: foodweb

 Extension. For example .com (short for commercial - commercial, is the most
popular domain name) or .net (short for network - network, commonly used for
Internet service providers)
1.1.4.2 How does domain name work?
When you enter a domain name into your web browser, it first sends an access
request to a global network of servers forming the Domain Name System (DNS).
These global servers then look for a server whose name is associated with the
domain and forward the request to those nameservers.

For example: If your website is hosted on FOODWEB.VN, its Name Server
information will look like this:
 ns1.foodweb.vn
 ns2.foodweb.vn
The Name Server is the server that holds the database used for the conversion of IP
addresses and domain names managed by the domain name service provider. This
company will forward the user's request for access to the computer where the website is
hosted. This computer is called a Web Server. Web Server can be hardware or software,
or both.
As hardware, a Web Server is a real computer that stores the components of a website
(HTML, CSS, image files, ...) and can connect to the internet and distribute website
information to people's devices. end-use.
Like software, a Web Server consists of several components that control how web
users access files stored on an HTTP server (HTTP server) - the software that
understands URLs and HTTPs.
Whenever the browser needs data stored on the Web Server, the browser sends the
request over HTTP. When a request reaches the correct web server (hardware), the HTTP
server (software) sends the requested document back, also via HTTP.
1.2 Explain the purpose and relationships between communication

protocols, server hardware, operating systems and web server software
with regards to designing, publishing and accessing a website (P2).
1.2.1 Communication protocols
A communication protocol is a system of rules that allows two or more entities of a

communication system to transmit information over any kind of variation of a physical
quantity. The protocol defines the rules, syntax, semantics, and communication
synchronization, and possible error recovery methods. Protocols can be implemented
using hardware, software, or a combination of the two.
Communication systems use well-defined formats to exchange various messages.

Each message has a precise meaning intended to elicit feedback from a range of
responses that can be predefined for that particular situation. A specified behavior is
usually independent of how it is performed. Communication protocols must be agreed
upon by the interested parties. To reach agreement, a protocol can be developed into a
technical standard. A programming language describes the same thing for computations,
so there is a close similarity between protocols and a programming language: what are the
protocols for communicating a programming language with operations? count. An
alternative formula says that the protocols are for conveying computational algorithms.
Multiple protocols often describe different aspects of a single communication. A

group of protocols that are designed to work together is called a set of protocols; when
deployed in software, they are a protocol stack.
Internet communication protocols are published by the Internet Technical Task

Force (IETF). IEEE (the Institute of Electrical and Electronics Engineers) handles wired
and wireless networks, and the International Organization for Standardization (ISO)
handles the others. The ITU-T handles telecommunications protocols and formats for
public switched telephone networks (PSTN). As the PSTN and the Internet converge,
standards are also moving towards convergence.
Figure 4 Layers in the OSI model

The role of the network layers in the OSI model
1.2.1.1 Application layer roles and functions
The job of this layer is to define the interface between the user and the OSI
environment. Includes a variety of application protocols that provide ways for users to
access network environments and provide distributed services. When the Application
Entity (AE) is established, it will call the Application Service Element (ASE). Each
application instance can consist of one or more application service elements. Application
service elements are coordinated in the application entity's environment through
associations called Single Association Object (SAO). SAO controls communication and
allows the serialization of communication events.
Figure 5 Application layer roles and functions

1.2.1.2 Roles and functions of the presentation layer
The presentation layer solves problems related to the syntax and semantics of the
information being transferred. Representing user information by the network's working
information and vice versa. Usually the source and target application information
representation can be different because the applications running on the systems can differ.
The presentation layer is responsible for converting data sent on the network from one
representation to another. To that end it provides a generic media representation that
allows conversion from local to generic and vice versa.

Figure 6 Roles and functions of the presentation
1.2.1.3 Session layer roles and functions
The session layer allows users on different machines to establish, maintain, and
synchronize communication sessions between them. In other words, the session layer
establishes "transactions" between the terminal entities.
The session service provides a link between two endpoints that use the session
service to synchronously exchange data and release the link when it ends. Using Token
(Token) to perform data transmission, synchronize and cancel the link in simultaneous or
alternate transmission methods. Set up synchronization points in the conversation. When
problems occur, it is possible to restore conversations starting from an agreed
synchronization point.
Figure 7 Session layer roles and functions

1.2.1.4 Transport layer roles and functions
The top layer is concerned with protocols for data exchange between open
systems, controlling the data transmission from node to node (End-to-End). Procedures in
the three lower layers (physical, data link, and network) only serve the data transmission
between adjacent layers in each system. The peer-to-peer entities talk to each other
during data transmission.
The transport layer does the division of large packets into smaller packets before
sending them and number the packets and ensure they move in the correct order. As the
last layer responsible for the security of data transmission, the transport layer protocol
depends heavily on the nature of the network layer. The carrier layer can multiplex several
links into the same link to reduce costs.

Figure 8 Transport layer roles and functions
1.2.1.5 Network layer roles and functions
The network layer performs the functions of selecting a route for source to
destination packets that can be on the same or different networks. The path can be fixed, it
can also be defined at the start of the conversation, and it is possible that the dynamic
path can change with each packet according to the instantaneous load status of the
network. In the network, the broadcast type (Broadcast) routing is very simple.
Another important function of the network layer is the Congestion Control function. If
there are too many packets traveling on the same route, congestion can occur. Performs
the function of communicating between networks as packets travel from one network to
another to reach the destination.
Figure 9 Network layer roles and functions

1.2.1.6 Role and function of the data link layer
The main function of the data link layer is to establish links and maintain and
destroy data links. Error control and flow control.
Divide the information into frames, transmit sequential frames, and process
Acknowledgment Frames from the receiver. Unstructured frames are converted to the
physical layer. The second layer receives and reconstructs the bit sequence into frames of
information. Physical transmission can cause errors, so the data link layer has to deal with
error control, flow control, and traffic control, preventing the source node from flooding the
data to the receiver. lower speed. In broadcast networks, the Medium Access Sublayer
(MAC) sublayer controls the maintenance of link entry.
Figure 10 Role and function of the data link layer

1.2.1.7 Physical layer roles and functions
The physical layer is the lowest in the 7-layer OSI model. Layer entities
communicate with each other over a physical path. The physical layer defines the
electrical, mechanical, and optical functions and procedures to activate, maintain, and
release physical connections between networks. Providing electrical mechanisms,
functions, procedures, ... to make the connection of network elements into a system by
physical methods. Ensures the switching requirements work to create real paths for the
information bit chains. The standards in the physical layer are the standards that define the
user interface and the network environment. Physical layer protocols are of two types:
asynchronous and synchronous transmission.
Figure 11 Physical layer roles and functions

1.2.2 Web server hardware
The word “server” is sometimes a little confusing because a server can refer to
computer hardware or the programs that run on that hardware. Here we are talking about
the actual hardware itself.
Servers are computers designed to wait for any requests from users or other
computers and then act on that request. Their main purpose is to be there for you, to share
data, and perform tasks to keep your workflow smooth and productivity elevated.
Figure 12 Illustration image of web server hardware

There is no official minimum for the hardware requirements that are needed to host the
Sana Commerce webshop. The hardware specifications will change under the influence of
different factors that should be taken into account. To make the best estimation of the
hardware specifications for the web and database server where Sana Commerce will be
hosted the following questions should be answered:
 High-traffic or low-traffic webshop

 Number of visitors per day/month
 Maximum number of simultaneous visitors
 Maximum number of order lines in the shopping basket
 Number of simultaneous orders

 Size and complexity of the products catalog (number of products, product
categories, attributes)
 Number of articles in the webshop
 Number of search queries
 Size of the database
These are only those questions that should be considered first of all to make a more
precise estimation regarding the hardware requirements that are needed for hosting and
management of the Sana Commerce webshop. However, you should also take into
account the software that is listed in the software requirements and should be installed on
the server. This leads to the extra hardware requirements that should be also taken into
account.
The higher the webshop requirements, the higher hardware specifications of the web
and database servers are. To begin with, you can think of the environment with the
following specifications that are for the Sana Commerce solution only:
Combined web
Web server Web server Combined web
&database
Item &database
(minimal) (recomended) server(recomme
server(minmal)
nded)
Processor 1,6 GHz CPU 2 x 1,6 GHz CPU 2 x 1,6 GHz CPU 4 x 1,6 GHz CPU
RAM 1,75 GB RAM 3,5 GB RAM 3,5 GB RAM 7 GB RAM
1x 40 GB of free space or more is recommended for the webshop data (non-
system drive is preferred)
HDD
1x 40 GB of free space or more is recommended for the software that is
listed in the software requirements (system drive)
Recommended
Microsoft Azure Basic medium Basic medium
Basic small VM Basic large VM
Virtual Machine VM VM
Configuration
Table 1 Hardware Requirements
1.2.3 Web server software
A web server includes several parts that control how web users access files stored
on an HTTP server. An HTTP server is a software that understands URLs (web
addresses) and HTTP (the protocol your browser uses to view web pages).
At its most basic, whenever a browser needs a file stored on a web server, the
browser requests the file over HTTP. When a request arrives at the correct web server
(hardware), the HTTP server (software) sends the requested document back, also over
HTTP.

Figure 13 How to overview the performance of web server software
To publish a website you need a static or dynamic web server.
A static web server, or stack, consists of a computer (hardware) with an HTTP

server (software). We call it "static" because the server sends the files it stores "intact" (as-
is) to your browser.
A dynamic web server consists of a static web server plus software extensions,
most commonly an application server and a database. We call it "dynamic" because the
application server updates the cached files before sending them to your browser via the
HTTP server.
For example, to create the web pages you see in the browser, the application
server could populate an HTML template with the content retrieved from a database. Sites
like MDN or Wikipedia have thousands of web pages, but they are not actual HTML
documents, but just a few HTML templates and a huge database. This setup makes it
easier and faster to maintain and distribute content.
1.2.3.1 Software Requirements for Web Servers
The web server where you install the Sana Commerce webshop and back office
application must meet the software requirements listed in the following table:

Component
Internet Information Services (IIS) 6, 7.0, 7.5 or
8
 ASP.net is a required component
(Aspnet_regiis should be executed)
 Basic Authentication is a required
component
 CGI restrictions should be configured
(ASP.net extensions should be allowed)
 The FTP service is a required
component
 The SMTP service might also be
required when no alternative SMTP
server is available
Windows PowerShell 2.0 or 3.0

Table 2 Software Requirements for Web Servers
1.2.3.2 Software Requirements for Database Servers
The database server where you install the Sana Commerce database must meet the
software requirements listed in the following table:
Component Notes
 Enterprise, Business Intelligence,
Microsoft SQL Server 2012 Standard, Web, Express
 Enterprise, Business Intelligence,
Microsoft SQL Management Studio 2012 Standard, Web, Express
Microsoft SQL Server 2008 R2  Express, Workgroup, Web, Standard,
-or- Enterprise, and Datacenter editions are
supported
Microsoft SQL Server 2008 with Service Pack 1
or later  The web edition is recommended
 Express edition can only be used if the
-or- database size is under 4GB
Microsoft SQL Server 2005 with Service Pack 2
or later
Microsoft SQL Management Studio 2008 R2
 Express, Workgroup, Web, Standard,
-or-
Enterprise, and Datacenter editions are
Microsoft SQL Management Studio 2008 supported
-or-
Microsoft SQL Management Studio 2005
Table 3 Software Requirements for Database Servers

1.2.3.3 Web server Apache
It is one of the most popular web servers in the world today developed by the
Apache Software Foundation. Apache is open-source software that supports almost all
operating systems including Linux, Unix, Windows, FreeBSD, Mac OS X, and others.
Approximately 60% of the computers run on the Apache Web server.
Customizing the Apache web server is easy because it has a modular structure.
Since it's open-source, you can add your own modules to the server as needed and make
modifications to suit your needs.
Apache is more stable than any other web server and it is also easier to handle
administrative problems. The more recent versions of apache offer the ability to handle
more requests when compared to previous versions.
Figure 14 Web server Apache

1.2.3.4 Web server IIS
IIS is a product of Microsoft. This web server also has all the same features as that
of Apache. However, this is not open source, moreover, adding individual modules is not
easy and modifications are more or less difficult. Microsoft is the developer of this web
server, so it runs on all platforms of the windows operating system. And Microsoft also
provides attentive customer support when there is any problem.
Figure 15 Web server IIS

1.2.4 Host operating system
A server operating system is a software installed on a computer that interacts with

the underlying hardware and is often used to describe the operating system used in a
virtualized server to distinguish it from the guest operating system.
The host operating system is most commonly used to describe an operating system
that interacts with hardware and runs Type 2 hypervisors, also known as hosted
hypervisors, that run on the operating system. operator rather than direct interaction with
hardware. This Type 2 hypervisor can then create multiple virtual machines (VMs) that
each run a guest operating system. In this case, the guest operating system does not need
to be the same as the host operating system.
Let's look at a real-world example of a computer running Apple's OS X operating

system. If the user wants to run an application available only to the Windows operating
system, the user can use virtualization and install Type 2 hypervisors, such as VMware
Fusion, on a computer running OS X. Then, users can use the VMware Fusion hypervisor
to create a virtual machine and install Windows 10 as the operating system on that virtual
machine. The user will then be able to run their Windows application in this virtual
machine. The original version of OS X installed on the computer will be considered the
host operating system, while Windows 10 (running on the virtual machine) will be regarded
as the guest operating system.

However, not all virtualized servers use the host operating system. In many cases,
the Type 1 hypervisor, also known as the bare-metal hypervisor, is installed directly into
the server hardware. Type 1 hypervisor replaces the host operating system and can then
create virtual machines, each of which can run a guest operating system.
The term host operating system can also be used to describe an operating system
that uses virtualization-based on containers. Containers are logical partitions used to
separate applications on the same server. Instead of cloning the entire operating system
for each application, as is the case in virtual machines, containers allow applications on
the same server to share the same operating system kernel while providing isolation.
Hardware. This shared operating system is called the host operating system.
The server administrator may also encounter a confusing situation where the virtual
machine's guest operating system also serves as the host operating system for the
container. For example, consider a server running VMware's ESXi Type 1 hypervisor
hosting a virtual machine running a Linux distribution as the guest operating system. The
Linux guest operating system can then be used to create multiple Linux kernel sharing
containers, which in turn can be regarded as the host operating system.
1.2.5 Relationship
Some protocols are used in both the front and back end website technology. These
protocols are found in the application layer of the OSI 7-layer model.
HTTP (HyperText Transfer Protocol) – this protocol determines how resources are
transferred across the internet. HTTP is used to deliver data on the internet, it provides a
regulated method for computers to be able to communicate with one another. HTTP is an
application protocol that runs on the top level of the TCP/IP. The HTTP protocol uses port
80.
HTTPS (HyperText Transfer Protocol Secure) – is a secure protocol that encrypts

the data that is being sent over the website that it is on. It encrypts the data by exchanging
keys with the customer and the website, this encrypts the data so that then if it is
intercepted and stolen it cannot be decrypted unless they have the keys from the owner
and customer.
FTP (File Transfer Protocol) – is mainly a standard protocol of Network which is

used to transfer data from client to host or one server to another server, it uses a client-
server architecture. When creating a website, you will use the FTP protocol to upload
you're created and completed web pages to the web server, this is normally done through

the FTP protocol using a program such as FileZilla. The port numbers used by this are 20
for data and 21 for control.
SMTP (Simple Mail Transfer Protocol) – The mail protocol uses the SMTP protocol
to send emails on the internet, it only sends the mail from one user to another. To receive
the emails, then the POP3 protocol is used to collect the mail from the receiver. This
protocol works with the Mail Transfer Agent (MTA) protocol to send your communication to
the correct computer and email inbox. The port number used by SMTP is 25.
Apache is the most commonly used web server software on the market 6. Apache
is open-source software and is maintained by a community of developers whilst being
backed by the Apache Software Foundation. Apache is a good software to use on a web
server as it is free to use and download and is most often used on Linux servers. Microsoft
has its web server software called IIS (Internet Information Services) it is not free like
Apache and requires a license and will only run on its Windows operating systems. The
Microsoft software comes with a tidy but takes some time getting used to GUI, it comes
with a panel to manage the connected servers, but everything is one place to is very easy
to manage.
It also comes with good security features such as the TLS certificate management
and binding for enabling HTTPS and SFTP on your websites. It also has software patches
that are regularly rolled out to keep up with the latest security threats in the world. The
security features in Microsoft’s software help to keep websites on the servers up and
running and keep downtime to a very low level, this will help companies keep their
financial losses down if their website does get attacked.
Most companies will use servers to host their websites, it is not essential but is
recommended as servers are needed to run all day every day of the year. A server needs
to be reliable more reliable than workstations in a business as they are always on. The
main job of a web server is to deliver the content of a hosted website on the internet to the
client. All computers that host websites must have web server programs, the most widely
used web server program is Apache. Any computer as long as it is connected to the
internet can be used as a web server as it has the appropriate software installed. Web
servers typically host many websites, some only host a few. Servers that host multiple
websites are called shared host while servers that host a website for a single company or
person is called a dedicated host, these dedicated hosts are appropriate for websites with
a high volume of traffic and sites that require custom server modifications.

1.3 Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and
management (M1).
1.3.1 Evaluation Of Web Application Frameworks
The framework is a set of source code built, developed, packaged, and distributed
by professional programmers. The framework will provide developers with a standard
development structure on which developers build and develop projects. Attached to it is a
library repository consisting of many classes - handlers are placed in separate packages
or namespaces. Professional programmers will use their programming skills and
algorithms to create the most optimal processing classes, solving requests in the fastest
and most accurate way.
1.3.1.1 Degrees Of Activeness Web Frameworks
A Web framework(WF) supports the creation, development, and publishing of web

applications and web sites. This can include web services, APIs, and other resources.
Web frameworks are software frameworks that offer a standard and accessible way to
build and develop web applications.
Although web-enabled applications are commonplace on the Internet and are used
every day by most Internet-connected individuals, they are still in their infancy when it
comes to developing tactics and tools. This is why it’s so important to have a web
framework to act as a support system for the development and deployment of such
applications. A web application framework is one such tool, and this article shows how it
can help to build a web app that complies with the most modern web standards.
1.3.1.2 Advantages Of Using A Framework
Efficiency: Frameworks eliminate the need to write a lot of repetitive code that you
will find being used in many different applications. The advantage of efficiency will never
be underestimated. You can expect to build a project in much less time than would be
achieved by writing code without a framework.
Security: As far as a framework usually developed and tested by many different

developers it can gain a strong level of security. It is extremely likely that many security
risks are addressed and tested when the framework is being built.

Open-Source: Most of the popular frameworks are open-source (or available to
use for free). They often also come with licensing that is not restrictive and allows to build
a commercial product
Integration: For building almost any type of application (including a website) where
you want to store some data, you will typically use a database. There also exist many
other tools that link to web development. Many frameworks will thus make it easier to link
to these tools and also communicate with them
Scalability: When you develop a software alone, there are high chances that you
will release it to a few of your close friends to test it out, and give you some feedback that
you hope to use to fix any issues or proceed with the release. This is not dependable, and
you might end up making some grave mistakes that you can regret in the future.
Development frameworks are tested by millions of users and thousands of developers;
hence it is highly likely that your software will scale better than the one you develop alone.
Libraries: In real life, libraries are places where you can access information for
free. But as far as programming is concerned, a library is a collection of objects, functions,
and methods (depending on the language) that can be reused and shared among multiple
applications. A library performs specific, well-defined operations. A library is usually
created when a problem of a certain domain starts to be frequently encountered in
programming. A common example is operations and data structures that are not built into
the language – like reactive extensions, advanced collections, etc.
1.3.1.3 Disadvantage Of Using A Framework
You learn the framework, not the language: I believe this to be a significant
issue. If you’re making use of a framework and you know very little about the language
behind it, you will certainly find out the framework and not the language itself. The method
you code jQuery is different from the way you code javascript. Simply put, if you know
jQuery, it doesn’t imply you understand javascript.
Restriction: The framework’s core behavior cannot be modified, indicating that when
you utilize a framework, you are required to respect its limitations and work the way it is
required. Ensure you choose a framework that fits your needs.
Code is public: Since the framework is readily available to everyone, it is likewise

offered to people with bad intentions. It can be studied in order to know how things work
and to discover flaws that can be utilized against you.

1.3.2 The Impact Of Frameworks With Regards To Functionality
1.3.2.1 Convention Over Configuration
Convention over configuration is a simple concept that is primarily used in

programming. It means that the environment in which you work (systems, libraries,
language…) assumes many logical situations by default, so if you adapt to them rather
than creating your own rules each time, programming becomes an easier and more
productive task.
The goal is to decrease the number of decisions the programmer has to make and
eliminate the complexity of having to configure all and each of the areas of application
development. The immediate result is that you can create many more things in less time.
1.3.2.2 Integrated Development Environment
IDE (Integrated Development Environment) is an integrated environment used to

write code for application development
Besides, the IDE integrates other supporting tools such as compiler (Compiler),
interpreter (Interpreter), error checking (Debugger), format or highlight code, code
directory organization, code search ...
In the simplest sense, IDE is a software that includes other software packages, IDE
helps programmers to develop software applications.
1.3.2.3 Internationalization (Localization)
Localization is the process of translating your app into multiple languages. But
before you can localize your app, you internationalize it. Internationalization is the process
of making your app able to adapt to different languages, regions, and cultures. Because a
single language can be used in multiple parts of the world, your app should adapt to the
regional and cultural conventions of where a person resides. An internationalized app
appears as if it is a native app in all the languages and regions it supports.
The App Store is available in over 150 different countries, and internationalizing your
app is the first step to reach this global market. In-App Store Connect, you specify whether
your app is available in all territories or specific territories. Then you customize your app
for each target market that you want to support. Users in other countries want to use your
app in a language they understand and see dates, times, and numbers in familiar, regional
formats.

1.3.2.4 Validation
Validation is an automatic check to ensure that the data entered is sensible and
feasible.
Validation cannot ensure data is accurate.
When programming, it is important that you include validation for data inputs. This
stops unexpected or abnormal data from crashing your program and prevents you from
receiving impossible garbage outputs.
1.3.2.5 Testing
In general, testing is finding out how well something works. In terms of human beings,
testing tells what level of knowledge or skill has been acquired. In computer hardware and
software development, testing is used at key checkpoints in the overall process to
determine whether objectives are being met. For example, in software development,
product objectives are sometimes tested by product user representatives. When the
design is complete, coding follows and the finished code is then tested at the unit or
module level by each programmer; at the component level by the group of programmers
involved; and at the system level when all components are combined. At the early or late
stages, a product or service may also be tested for usability.
1.4 Review the influence of search engines on website performance and

provide evidence-based support for improving a site’s index value and
rank through search engine optimisation (M2).
1.4.1 Concept of search engine
A search engine is a software accessed on the Internet that searches a database of

information according to the user's query. The engine provides a list of results that best
match what the user is trying to find. Today, there are many different search engines
available on the Internet, each with its abilities and features. The first search engine ever
developed is considered Archie, which was used to search for FTP files, and the first text-
based search engine is considered Veronica. Currently, the most popular and well-known
search engine is Google. Other popular search engines include AOL, Ask.com, Baidu,
Bing, DuckDuckGo, and Yahoo.

Figure 16 Some popular search engines
1.4.2 How do search engines work?
Search engines work by retrieving a list of known URLs, then going to the
scheduler. The scheduler decides when to crawl each URL. The crawled pages then go to
the parser where the critical information is extracted and indexed. The parsed link goes to
the scheduler, which prioritizes crawling and recrawl.
When you search for something, search engines return relevant pages and
algorithms that rank them according to relevance.
1.1.1.1 Scheduling
The scheduler assesses the relative importance of the new and known URLs. It
then decides when to recrawl new URLs and how often to recrawl known URLs.
1.1.1.2 Crawling
A crawler is a computer program that downloads websites. Search engines discover
new content by regularly recrawling known pages where new links are often added over
time.
1.1.1.3 Parsing
The parser extracts links from the page, along with other important information. It
then sends the extracted URLs to the scheduler and extracts the data for indexing.
1.1.1.4 Indexing
Indexing is where information parsed from crawled pages is added to a database
called a search index.
Think of this as a digital library of information about the trillions of websites.

1.4.3 Concept of SEO
Search engine optimization is the act of trying to push a website higher up in a

search engine's results. SEO seeks to tweak particular factors known to affect search
engine results. Successful SEO can make certain pages more attractive to search engines
than similar pages that are vying for the same keywords or keyword phrases.
The better a web page's search engine optimization, the higher a ranking it will
achieve in search result listings. SEO can help a website beat out competitors offering a
similar product or service.
Figure 17 Search engine optimization

1.4.4 Technical solution to improve website index based on SEO
1.4.4.1 Enable HTTPS for your website
Have you enabled a security key for your website? When a visitor comes to your
website, HTTPs in the address bar will let the user know that your website is trustworthy
and secure.
Especially for e-commerce sites, where you enter your customers' personal and
account information, a lack of security could cause your potential customers to leave your
site.
1.4.4.2 Pay special attention to the website transmission line
The website server is the place where you store your website, you have to make
sure your website is running at the best speed for your users. As you know, web speed is
a technical ranking factor so server performance matters!

Look at server downtime and speed factors that affect rankings. Server
performance significantly affects your rankings. Perform regular audits to improve page
speed. Clean Cache, Allow Text Compression, Minimize.
1.4.4.3 Website optimization on Mobile version
Since the introduction of Smart Phone, internet users have changed to use web
surfing, mobile search rather than the computer.
If your site is not mobile optimized, your rankings will suffer and your bounce rate
will increase. Here's how to make your mobile-friendly version of your website effective:
 Use the extension or the Google Developer Console to see what your mobile
version looks like while developing your website
 Use the Search Console to fetch both mobile and desktop versions of your website
 Make sure to have a fully responsive website
1.4.4.4 Confirm that your Content is being indexed by Google
If your site is not indexed by Google, then all SEO efforts are completely void.
To see if google has Indexed your website, you can check it by typing in a search
engine with the content "site: domain name". If Google immediately displays the search
results on your website, it is indexed. Note when Google Index:
 Make sure the H1 & Meta Description tags are correctly displayed
 Check the google Index with the Google Search Console tool
1.4.4.5 Pay attention to your Website Map
When submitting your page directly to Google through Search Console, the easiest
way is to resubmit the sitemap. A sitemap makes navigation easier for spiders to crawl
through your website's content. Have a good sitemap that indexes the deep or one-level
pages that you want most.
1.4.4.6 Audit link from your website
You really need to audit the outbound links from your website. Looking for high
quality content while linking really high domain authority sites. Here are some items to
check out:
 Regularly check for dead or broken links

 Make sure internal links to other pages are done correctly
 When your website redirects to another domain, make sure it is a good site.
 Do a regular audit to identify all previous pages on your site
 Consider linking back from elsewhere to your website

1.4.4.7 Activate Google Search Console
Search Console helps to track your website status on SERPs. It helps troubleshoot
error reporting, track website traffic to your website, performance and mobile usability
issues with your website. It allows you to track the "health" of your website.
Here are some of the main functions provided by Search Console:
 Help crawl and index your website

 Alerts you of indexing problems and is easy to fix
 Google search data includes Visible CTR impressions
 Show sitelinks
1.4.4.8 Understand what Keywords people are searching for
Understanding what people are searching for is essential for the success of any
Google Ads campaign, especially during the process of developing an effective campaign
strategy and creating highly relevant ads. Understanding what people are searching for is
essential for the success of any Google Ads campaign, especially during the process of
developing an effective campaign strategy and creating highly relevant ads.
How to find what people are searching for online:
There are a variety of ways you can discover which keywords people are using to
search online when it comes to developing a campaign for your business, including using
the Google Keyword Planner tool and Google Trends.
Keyword Planner Tool: Google Keyword Planner, a free-to-use tool within Google
Ads, provides extremely important insights into online behavior. It shows what people are
searching for online and the amount of times, per month, a specific keyword or phrase has
been searched. With this data, you can tailor your campaigns to ensure your online ads
will be relevant to your potential customers and be able to find them with the right
keywords, especially as you can also search by geographical location. This will also help
improve your chances of appearing at the top of the search engines for specific terms you
are bidding on as part of your overall online marketing strategy.
Google Trends: shows search interest of a particular topic or search term over

some time, across various regions of the world and in a variety of different languages. This
trend data can be filtered with either real-time searches from the last seven days or non-
real-time. A dataset that can go back to a set period from 2004 up to 36 hours ago,
depending on the amount of and type of data you want to look at.

1.4.4.9 Create content that searchers want to see
Use content ideation to give customers what they want
You know content marketing plays a significant role in influencing buyer decisions
because it lends credibility to your brand, increases brand awareness, and can generate
more leads or sales. Synchrony Financial, formerly GE Capital Retail Bank, conducts an
annual Major Purchase Shopper Study and found that 80% of shoppers aiming to buy
something above $500 begin their research online – a 20% increase from the year prior.
Keyword research, using search engine tools like Google AdWords, Bing’s Keyword
Research Tool, io, AnswerThePublic.com, and Ubersuggest.io,
The search of question-and-answer sites such as Quora and Yahoo! Answers to

see what people are asking regarding your industry
Ask your staff what questions they get asked every day. Include anyone who talks
to prospects or clients – from customer support members to sales reps.
Have a chat with your market research analyst to dig through company studies and
surveys, identifying what your customers are most concerned about.
Look through the data from a chat feature on your website; it may be an information
gold mine.
Talk with those who worked your booth at your latest trade show to see what topics
were most prominent in conversations.
Look at questions in comments of content to inspire follow-up posts.
Share your content marketing goals company-wide, and empower team members
to share ideas as they come with your content team.
1.4.4.10 Keep URLs short and descriptive
User-friendly URLs are URLs that are easy for the user to remember, encouraging
users to revisit the page frequently by putting the URL in the address bar of an internet
browser.
A long URL with numbers and symbols is more difficult to remember than a simple
“www.example.com/faq” for the FAQ section of the company’s website.
With the importance of optimizing websites to show up in search engines, SEO

consultants focus on SEO-friendly URLs. These addresses are meant to be user-friendly

and garner high rankings in search engine results. SEO-friendly URLS are often short and
keyword-abundant. Find out more below on how to make your URL SEO-friendly.
1.4.4.11 Optimize your images
4 ways to optimize your images:
 Reduce file size before uploading

Dimensions: The first thing you’ll want to do is make sure the image you’re about
to use fits the size of the place where it is going to be, as close as possible. You don’t want
to upload a smaller image than you need because it’ll get pixelated when enlarged. And
you don’t want to upload a much bigger image because you could be saving in weight if
you downscale its dimensions. Professional photos usually have a width of around
5000px. In web terms, that’s huge. The larger screen size commonly used right now is
1920px wide, while 1366 x 768 is the most common one.
Quality: After you adjust the dimensions of your image you need to reduce its
quality so it gets even lighter. Before you get all scared about that, reducing its quality it’s
not about making it look ugly and cheap. No. It’s about lowering the amount of data we use
to represent it on the website. On major design or photo editing apps, the quality of an
image can be reduced from 100% to 0%.
File format: The most common formats for images on the web are JPEG (or JPG),
PNG, and GIF. In most cases, JPEG is the format that results in a lighter image. It
compresses the image and allows you to choose a quality degree, as I explained before.
PNG is mostly used when you need the image to have a transparent background, which
JPEG doesn’t allow. Like when using a logo, an illustration, etc. It creates higher quality
images (because it doesn’t compress the images as JPEG does), but also heavier files.
Therefore, it’s mostly used in smaller amounts and for smaller images.
Tools to do all this: Now that we covered the 3 factors involved, here’s how to
achieve it. There are 2 ways of managing dimensions, quality, and file format: Using
software like Photoshop / Illustrator / Sketch. Using an online tool like Reduce Images
 Use an image optimizer like ShortPixel or Imagify

Besides, to manually adapt the size of your images, you can use an optimizer tool
to make them even lighter. ShortPixel and Imagify are online services that compress and
optimize the images on your site. They reduce image sizes even further while maintaining
their quality as much as possible. How do they work? They send the original images to
their cloud where they are compressed. Then they download the optimized images that

replace the original ones on your website. They store the original photos too, so you can
restore your media in their original versions when you need to. Both of them have specific
plugins for WordPress, which is great. And both of them offer different pricing plans,
including a free one.
 Host your images on a CDN

CDN stands for Content Delivery Network. Hosting your images on a CDN means
setting up a CDN to serve them instead of having your server to do that.
CDN is a network located all over the world with powerful web servers that take
care of loading your site’s files to the visitor using the closest server to him, geographically
speaking.
 Add a lazy load plugin

The logic behind the Lazy Load technique is to load the images on your site just
before they have to appear in the browser’s viewport. Or, simpler: right before the user
gets to see them. With lazy loading, the image at the bottom of your site will load once the
user gets closer to the bottom of your site and not when the site is loaded. If fewer images
are being loaded at the same time, this means huge savings of bandwidth and better
performance. Images will only be loaded if needed when needed.
1.4.4.12 Make sure your content is easy to read
Headers are the easiest way to split up text into easy-to-read content.
If you are promoting an article for your website, and you title it with anything that
has a number, your audience is going to scan for those points.
So if your headline is "6 Simple Weight Loss Tips", then your readers are going to
land on your site, and quickly scan to see what those tips are. They are going to see if
those tips are helpful. If they are useful, then your reader may dive deeper into each tip.
If you do not use numbers in your headline but have a "how-to" or "guide" in your
title, then the same idea applies. Your reader needs to be able to scan the article enough
to see if your guide can help them.
Most importantly, make sure your headings are clear! The heading isn't the place to
be clever, if your reader can't tell right off the bat what you are trying to get across, they
will leave.

CHAPTER 2 LO2 Categorise website technologies, tools and
software used to develop websites
2.1 Discuss the capabilities and relationships between front-end and back-
end website technologies and explain how these relate to presentation
and application layers (P3).
2.1.1 Explanation of static and dynamic web
2.1.1.1 Static web
A static website is a website with constant content. The user cannot alter its content
interactively.
A static Web site can be a blog or a news site with pre-built content and images.
The end users can only read and redirect pages through the links and cannot change the
content displayed. It can be understood that the "static" Website is merely a text, we can
only read and not manipulate it.
A Web page is considered "static" if it contains only HTML documents, CSS Code,
and does not contain JavaScript scripts that handle interactions.
Figure 18 For example a static website

2.1.1.2 Dynamic web
A "dynamic" Web site is a web page with modifiable content. Users can interact with
the website to change its displayed content without having to reload the page.

The "dynamic" Web site is very popular at the moment. Shopping sites like Tiki,
Lazada, or Social Media sites like Facebook and Twitter are dynamic Web sites. It shows
when a user interacts with an icon on a website, such as pressing Like, Subscribe,
comment, or post a status. The "dynamic" website is updated immediately, users do not
have to reload the page to update the content. This provides a better user experience,
blurring the line between a website and desktop software.
Structurally, a dynamic website always contains three elements: HTML text, CSS
code, and JavaScript code that handles interactions. JavaScript's job is to change the
Node elements in the DOM (in this case, HTML) based on user interactions.
Figure 19 For example a dynamic website

2.1.2 Front End
2.1.2.1 What is Front End
The front-end of a website is the practice of converting data to a graphical interface;

allowing the user to view and interact with data through digital interaction.
The front-end is the opposite of the back-end. It’s all the components of a website
that a visitor can see (pages, images, content, etc).
While web design is the way a website looks, front-end development is how that
design gets implemented on the web.
Front-end developers link together the world of design and technology, packaging
up the utility of the back-end in an inviting way for users to interact with. Core elements of
front-end development include design/layout, content, buttons, images, navigation, and
internal links.

Figure 20 A code snippet of a front-end developer
2.1.2.2 Things that front-end developers need to learn
2.1.2.2.1 HTML
HTML stands for HyperText Markup Language [1] is used to create a web page, on
a website it can contain many pages and each page is defined as an HTML document
(sometimes I will write it as an HTML file). The father of HTML is Tim Berners-Lee, also
the creator of the World Wide Web and the president of the World Wide Web Consortium
(W3C - the organization that sets standards on the Internet).
An HTML document is made up of HTML Elements (HTML Elements) specified with

tag pairs, which are surrounded by parenthesis (for example, <html>) and usually will. is
declared as a pair, including an opening and closing tag (for example <strong> for
example </strong> and). The text that wants to be marked up with HTML will be declared
inside the tag pair (<strong> This is bold text </strong> for example). But some special
tags do not have a close tag and the declared data will be included in attributes (eg <img>
tag).
An HTML file will contain HTML elements and are saved under a .html or .htm
extension.

Figure 21 <HTML> tag
2.1.2.2.2 HTML5
HTML4 has worked very well, but it has some drawbacks. The HTML5 development
team certainly has a higher take on the next step of HTML, which means HTML5 must be
built on top of the following principles:
 Less dependency on plugins for functionality.

 Scripting should be replaced with markup whenever possible.
 Device independence (for example, available on all devices and providing the same
user experience).
 Announce the development process so everyone can see what's going on.
More specifically, HTML5 has added a lot of new markup tags:
 The <header> and <footer> tags help you separate the top and bottom sections of
content blocks. To be able to use multiple times on a single page.
 The <article> tag helps to identify a specific piece of content, for example, a blog
post or a reader comment.
 The <nav> tag identifies which sections are considered navigation blocks.
 The <section> tag allows you to define a certain piece of content; is similar to the
current <div> tags.
 The <audio> and <video> tags to mark content that include audio or video.
 The <canvas> tag allows you to draw graphics using a separate scripting language.
 The <embed> tag is used to embed external content or applications on the web
page.
HTML5 also removes some tags: <acronym>, <applet>, <font>, <frame>, <frameset>,
<noframes>, and others.
Figure 22 HTML5

2.1.2.2.3 CSS
CSS is a language to create the style for the website - Cascading Style Sheet
language. It is used to style and style elements written in a markup language, such as
HTML. It can control the formatting of multiple web pages at the same time to save the
effort of web writers. It distinguishes the appearance of the web page from the main
content of the page by controlling the layout, color, and font.
CSS was developed by the W3C (World Wide Web Consortium) in 1996, for a
simple reason. HTML is not designed to be tagged to help with web page formatting. You
can only use it to "bookmark" your site.
Tags like <font> were introduced in HTML version 3.2, which causes a lot of trouble
for programmers. Because the website has many different fonts, different background
colors, and styles. To rewrite your website code is a long, arduous process. So the CSS
generated by W3C is to solve this problem.
The correlation between HTML and CSS is very close. HTML is the markup
language (the foundation of the site) and the CSS that defines the style (all that makes the
website look), they are inseparable.
Theoretically, there is no CSS, but then the website will not just be a page
containing text but nothing else.
Figure 23 CSS3
2.1.2.2.4 Bootstrap
Bootstrap is a framework that allows for faster and easier responsive website
design
Bootstrap is comprised of HTML templates, CSS templates, and Javascript that

make the basic ones available like typography, forms, buttons, tables, navigation, modals,

image carousels, and more. In bootstrap, there are more Javascript plugins in it. Makes
designing your responsive easier and faster.
Figure 24 Bootstrap
2.1.2.2.5 SASS
SASS (Syntactically Awesome StyleSheets) is a CSS Preprocessor that helps you

write CSS faster and with a clearer structure. With SASS, you can write CSS in a clear
order, manage predefined variables, share classes, or automatically compress CSS files to
save space.
Figure 25 SASS
2.1.2.2.6 JavaScript
JavaScript is a scripting language used to create and control dynamic website

content, i.e. anything that moves, refreshes, or otherwise changes on your screen without
requiring you to manually reload a web page. Features like:
 animated graphics
 photo slideshows
 autocomplete text suggestions
 interactive forms
An even better way of understanding what JavaScript does is to think about certain
web features you use every day and likely take for granted—like when your Facebook

timeline automatically updates on your screen or Google suggests search terms based on
a few letters you’ve started typing. In both cases, that’s JavaScript in action.
The results of JavaScript may seem simple, but there’s a reason why we teach an
entire segment on JavaScript in both our Front End Web Developer and Break into Tech
Blueprints. Underneath all those great animations and autocompletes—there’s some pretty
fascinating stuff happening. This guide will break down exactly how JavaScript works and
why and how to use it, plus the best ways to learn JavaScript if you’re realizing you need it
in your skillset.
Figure 26 javaScript
2.1.2.2.7 Responsive Design
Responsive design is an approach to web design that makes your web content
adapt to the different screen and window sizes of a variety of devices.
For example, your content might be separated into different columns on desktop
screens, because they are wide enough to accommodate that design.
If you separate your content into multiple columns on a mobile device, it will be hard
for users to read and interact with.
Responsive design makes it possible to deliver multiple, separate layouts of your

content and design to different devices depending on screen size.

Figure 27 Responsive design illustrations
2.1.2.2.8 Perceived Performance
Perceived performance can be described as simply how fast does your website
feels when it loads? This can be slightly different than how fast your website loads.
Perceived performance is all from the perspective of the user, not from a website speed
test tool. Generally, the two go hand in hand, but that's not always the case. Below are a
couple of examples of things that might speed up your site, but not necessarily help your
perceived performance.
Figure 28 Illustrative image of Perceived Performance

2.1.3 Back End
2.1.3.1 What is Back End
The bottom of the web page is the part that is hidden from the view of regular
website visitors, in the back, if you wish. Back-end enables front-end experience,
information structure processing, and applications.
The back-end is a part of a computer system or application that is not directly

accessed by the user and is usually responsible for storing and manipulating data.
Think of the user interface as part of an iceberg on water. That's what the user sees
- the website looks good. The back end is the rest of the tape; It cannot be seen by the
end-user, but it is the most basic element of a web application. The back-end runs on the
server, or it is often referred to as the "server-side".
This is where we as the developer of the complete website management, and

where all changes are made to the complete website.
Back-end development is needed to create a dynamic page. A dynamic website is

one that is constantly changing and updating in real-time. Most web pages are dynamic
pages, as opposed to static pages.
Figure 29 A code snippet of a back-end programmer

2.1.3.2 Languages & Frameworks
2.1.3.2.1 Python 2
Python is a high-level programming language created by Guido van Rossum and

first launched in 1991. Python is designed with the strength of being easy to read, learn,
and remember. Python is a very clean language with a clear structure that is convenient

for beginners to code. Python's structure also allows users to write code with minimal
keystrokes.
Figure 30 Python laguage

2.1.3.2.2 Java
Java is an object-oriented programming language (OOP) and is based on classes.

Unlike most conventional programming languages, instead of compiling the source code
into machine code or interpreting the source code at runtime, Java is designed to compile
the source code into bytecode, the bytecode is then executed by the environment.
Figure 31 Java language

2.1.3.2.3 C# (or C sharp):
C# is an object-oriented programming language designed mainly by Anders

Hejlsberg, the famous software architect for Turbo Pascal, Delphi, J ++, WFC products
and developed by Microsoft. Since C # is based on C ++ and Java, it is described as a
language that has a balance between C ++, Visual Basic, Delphi, and Java.
Today, C # is a multi-paradigm programming language widely used not only on

Windows platforms but also on iOS / Android platforms (thanks to Xamarin) and Linux
platforms.

Figure 32 C# language
2.1.3.2.4 PHP (or Hypertext Preprocessor):
PHP is a programming language mainly used to develop websites and open-source

sources like WordPress. Therefore, PHP is very optimized for web applications to make
the website faster.
Figure 33 PHP language

2.1.4 The relationship between Front-end and Back-end
2.1.4.1 What should front-end and Back-end developers both know

2.1.4.1.1 Version control systems (VCS)
VCS stands for Version Control System is a type of software that helps us manage
changes in the project's source code over time easily and conveniently.
The VCS stores every change in the project's source code in a special database.
We can easily query for a change in source code in a file at any one time. And if needed
we can easily reverse the source code in the file back to an earlier point in time.
2.1.4.1.2 Testing and debugging

 Testing:
Testing is the process of verifying and validating that a software or application is
bug free, meets the technical requirements as guided by its design and development and

meets the user requirements effectively and efficiently with handling all the exceptional
and boundary cases.
 Debugging:
Debugging is the process of fixing a bug in the software. It can defined as the
identifying, analyzing and removing errors. This activity begins after the software fails to
execute properly and concludes by solving the problem and successfully testing the
software. It is considered to be an extremely complex and tedious task because errors
need to be resolved at all stages of debugging.
2.1.4.1.3 Full Stack Development
Full Stack is also called a programmer, it can be said that this is the person
responsible for all jobs related to Server, DataBase, Front End, Back End, UX, UI ... etc ...
In the above role, a Full Stack developer can also undertake the following related jobs:
Sever, network, and hosting. Why they can take on this role is because no one is
knowledgeable about the hardware, operating system, environment, and system settings
for deploying applications. So they will capture many factors to be able to handle this job.
Database. Referring to the database, people in the technology industry will think
about database analysis and design. Yes, Full Stack Developer will be the person who
analyzes and designs the database and uses the database management systems such as
MySQL, SQLServer, NoSQL ... Full Stack programmers must be able to write the queries
in this role.
API / Back-end code. This is the job that Full Stack programmers can use one or
more server-side languages as well as other programming languages such as Ruby,
Python, PHP, Java, C # ... to write web applications and Web service also known as web
service.
Front-end code: programmers use HTML5, CSS3, Javascript, and frameworks like
Bootstraps, Jquery, AngualarJS for web and web application setup. - UI / UX.
Client work. Also, the final role of a Full Stack developer can communicate and take
requests from their customers and write down other technical documentation such as
technical specs. Architecture documents and documentation.

Figure 34 Full-stack development
2.1.4.2 Difference between Front-end and Back-end
2.1.4.2.1 Meaning of Front-end and Back-end
The front-end part of a website is the interface to interact with the user. All the
elements that you can see on the website belong to the front-end from fonts, colors to
menu bars, up and down sliders. They are all a combination of HTML, CSS, and
JavaScript.
For the front-end of a website to work, the back-end must be well-built. The back-
end consists of a server, an application, and a database. Code written by the back-end
developer is the part that will help the front-end communicate and interact with the user.
Any element that cannot be easily seen with the eye belongs to the job of the back-end
developer.
2.1.4.2.2 Role of Front-end verses Back-end

 Front-end:
The goal of website design is to make it easy for the user to open the website. This
is very difficult because, in reality, users use many different types of devices with different
sizes and resolutions, thus forcing Front End Developer to consider all these aspects when
designing websites. Need to make sure the website appears correctly on different
browsers, different operating systems, and different devices.
 Back-end:

Back-end web developers focus on building and processing logic using server
programming languages such as PHP or Ruby that are all too familiar to you in college. As
a back-end web developer at BSS, I work with PHP every day, so this language will be
used as an example throughout the article.
In addition to making functions for the website, back-end web developers are also
responsible for finding ways to optimize their functions, ensuring the processing speed and
performance of the entire website.
Furthermore, back-end web developers are also people who have to work with
databases. This is an indispensable part of a website to store information about users,
products, ... The database that is familiar with back-end web developers is MySQL,
MongoDB, or PostgreSQL.
2.1.4.2.3 Developer of Front-end verses Back-end
Web design is a web development process that aims to create a website that
focuses on aesthetic elements such as layout, user interface, and other visual images to
make the website attractive and easy to use. used more. Web designers use various
programs and tools to achieve the desired look, such as Dreamweaver, Photoshop, and
many others. In order to create a winning design, web designers need to think about their
audience, the purpose of the website, and the design's visual appeal.
2.1.4.2.4 Essentials of Front-end verses Back-end
Front End (also known as client-side) is all about what a user sees when they visit a
website, including design categories and languages like HTML or CSS.
Users interact directly with many aspects of the front-end such as: identifying the
location of the logo, main colors, searching and reading information, using buttons and
features on the web ... End purpose Front End is intended to bring an eye-catching
interface, making it easy for users to manipulate and use.
2.1.4.2.5 Front-end and Back-end: Comparison chart
Front-end Back-end
Interacting with customers and users Interact with the server
Gather the user's information Handling user information
Developed a graphical user experience and Redeveloping the brain of the web makes the
interactive interface website work again more efficiently
Esponsible for accessibility, search engine
Security, backup according to process, logic
optimization

Responsible for the duty, user input In charge of issues related to databases
Use scripting and markup languages such as Works with languages PHP, java, ruby,
HTML, CSS, and Javascript Python,...
Table 4 Front-end and Back-end
2.1.4.2.6 Summary of Front-end verses Back-end
While both frontend and backend form the basis of how a website works, they have
their fair share of
Differences in terms of functionality. Despite everything, they are like two sides of
the same coin. While the
Former is everything a user sees and interacts with, the latter is what a user cannot
see. Frontend refers to the
Client-side, whereas backend refers to the server-side of the application. Both are
crucial to web
Development, but their roles, responsibilities, and the environments they work in are
different.
The frontend is basically what users see whereas the backend is how everything
works.
2.1.5 How Front-end and Back-end relate to presentation and application layer
2.1.5.1 Presentation layer
The representation layer is concerned with the syntax and semantics of the data
between two systems.
Function of presentation layer (Presentation Layer)

 Determine the data structure format
 Compress and decompress data
 Encrypt and decrypt data
 The performing layer at the sending station transmits information about a certain
format
 The demonstration floor at the receiving station transfers information from the
common template to the station format

Figure 35 Function of presentation layer
2.1.5.2 Application layer
The application layer allows users and software to access the network, provides a
user interface and support for services such as mail, file access/transfer, database
sharing, and distribution services. other canopies.
The function of Application Layer (Application Layer)
 Provide application program interface for users

 Help users communicate with the network.
 Does not provide services for the floors below
Figure 36 The function of Application Layer

2.1.5.3 Database layer
The database abstraction layer is an application programming interface that unifies

the communication between a computer application and databases such as SQL Server,
DB2, MySQL, PostgreSQL, Oracle, or SQLite. Traditionally, all database vendors provided
their interface tailored to their products. The application programmer executing code for
the database interfaces will be supported by the application. Database abstraction classes
reduce workload by providing a consistent API to developers and hiding database

specifics behind the interface as much as possible. There are many layers of abstraction
with different interfaces in many programming languages. If an application has such a
class built-in, it is called database agnostic.
Figure 37 The function of Database layer
2.2 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) (P4).
2.2.1 Online website creation tools and custom built sites
Website creation support website can be understood as websites where users can
access, use available features to set up a website of their own with a system of unique
interfaces and features. . Free website creation support website is considered as a means
of bringing convenience to many individuals and units who do not have much experience
or expertise in creating a website in the form of coding, programming with software,
machines…
Now, with websites that support free website creation, users can freely edit, set up,
and customize their websites until they are satisfied. Thanks to this convenience, many
websites are offering free website creation services for visitors.

Figure 38 Online website creation tools
2.2.1.1 Online website creation tool
The website builder is a program, or tool, that helps you build a website.
Web-based online website builder and running on vendor service. Unlike the offline
website builders, you don't need to download or install software on your computer - all you
need is a web browser (i.e. Chrome, Firefox, or Internet Explorer) and a connection.
Internet. This allows you to work on your website from anywhere and from any device.
Another benefit is that the website builder comes with web hosting services, so you don't
need to buy and/or set up separately. Many online website builders are designed for
people with little or no coding experience.
How does an online website builder work?
Online website builders are designed to be very easy to use, allowing anyone –
beginners or experienced designers – to create an entire website within minutes using a
drag-and-drop editor. Users build a website simply by dragging elements and dropping
them to the desired location, no coding knowledge or experience is required. It’s as easy
as moving file icons on your computer.
 Step 1:
You start by choosing a design template that best fits your needs. All online
website builders come with a library of website templates.

Figure 39 Choosing a design template that best fits your needs.
 Step 2:
Each template comes with built-in elements and content. To edit an element (ie.
replace the text and images with your own) all you need to do is click on it. This will open
the editor where you can make changes.
Figure 40 Edit an element
 Step 3:

Add new elements and widgets to enhance your website. Standard elements and
widgets include images, photo galleries, videos, contact forms, blogs, social sharing
buttons (ie. Facebook Like, Twitter Tweet, Pinterest Pin, and more). You can also add a
PayPal Buy Now button or a full-on shopping cart if you want to sell products on your
website.

Figure 41 Add new elements and widgets
 Step 4:
Once you are happy with your new website, just click on the Publish button and
your website will be viewable online.
2.2.1.2 Custom built sites
Custom built websites involve a team behind your business. It starts with a creative
process to understand who is your target audience, who do you want to reach, how you
want/need the website to function and how do you want to look on the internet.
SEO plays a big role in the success of any website. There are rules to follow when
building a site and not all themes are capable of abiding by these rules. This is why
custom-built websites are so much more superior, the developer can optimize the site
during creation to allow for google and other search engines to read each page to give the
end-user a more relevant search result thus, giving custom-built sites naturally a better
ranking on the system. This goes beyond keyword research.
Custom built websites tend to take longer than themes, this is because everything is
being built and catered to a particular business. It will save time in the long run because
when it's built from the ground up it’s a lot easier to customize the site to ensure your site

does exactly what you want it to do. Custom designs allow your site to be responsive
across all devices (such as phones, tablets, laptops, etc.) & browsers.
Steps to design a website requires 7 steps:
 Step 1: Goal identification

In this early stage, the designer needs to define the ultimate goal of the website
design, often working closely with the client or other stakeholders. Questions to explore
and answer during this stage of the website design and development process include:
 Who is the website for?

 What do they expect to find or do there?
 The main purpose of this site is for announcements, for sale (e-commerce,
anyone?) Or entertainment?
 Does the website need to convey the core message of the brand or is it part of a
broader branding strategy with its sole focus?
 What competitor websites, if any, exist and how is this website inspired /
different from those of these competitors?
This is the most important part of any web development process. If all of these
questions are not answered in the summary, the entire project could go wrong.
It can be helpful to write down one or more clearly defined goals, or a summary of
the expected goals. This will keep the design in the right direction. Make sure you
understand your site's target audience and develop a working knowledge of the
competition.
 Step 2: Scope definition

One of the most common and difficult problems plaguing web design projects is
scope creep. The client sets out with one goal in mind, but this gradually expands,
evolves, or changes altogether during the design process — and the next thing you know,
you’re not only designing and building a website, but also a web app, emails, and push
notifications.
This isn’t necessarily a problem for designers, as it can often lead to more work. But
if the increased expectations aren’t matched by an increase in budget or timeline, the
project can rapidly become utterly unrealistic.
 Step 3: Sitemap and wireframe creation

Figure 42 Sitemap and wireframe creation
The sitemap provides the foundation for any well-designed website. It helps give
web designers a clear idea of the website’s information architecture and explains the
relationships between the various pages and content elements.
Building a site without a sitemap is like building a house without a blueprint. And
that rarely turns out well.
 Step 4: Content creation

Purpose 1. Content drives engagement and action
First, content engages readers and drives them to take the actions necessary to
fulfill a site’s goals. This is affected by both the content itself (the writing), and how it’s
presented (the typography and structural elements).
Dull, lifeless, and overlong prose rarely keeps visitors’ attention for long. Short,
snappy, and intriguing content grabs them and gets them to click through to other pages.
Even if your pages need a lot of content — and often, they do — properly “chunking” that
content by breaking it up into short paragraphs supplemented by visuals can help it keep a
light, engaging feel.
Purpose 2: SEO
Content also boosts a site’s visibility for search engines. The practice of creating
and improving content to rank well in search is known as search engine optimization or
SEO.
Getting your keywords and key-phrases right is essential for the success of any
website. I always use Google Keyword Planner. This tool shows the search volume for

potential target keywords and phrases, so you can hone in on what actual human beings
are searching on the web. While search engines are becoming more and more clever, so
should your content strategies. Google Trends is also handy for identifying terms people
actually use when they search.
 Step 5: Visual elements

Finally, it’s time to create a visual style for the site. This part of the design process
will often be shaped by existing branding elements, color choices, and logos, as stipulated
by the client. But it’s also the stage of the web design process where a good web designer
can shine.
Images are taking on a more significant role in web design now than ever before.
Not only do high-quality images give a website a professional look and feel, but they also
communicate a message, are mobile-friendly, and help build trust.
 Step 6: Testing
Once the site has all its visuals and content, you’re ready for testing.
Thoroughly test each page to make sure all links are working and that the website
loads properly on all devices and browsers. Errors may be the result of small coding
mistakes, and while it is often a pain to find and fix them, it’s better to do it now than
present a broken site to the public.
 Step 7: Launch
Now it’s time for everyone’s favorite part of the website design process: When
everything has been thoroughly tested, and you’re happy with the site, it’s time to launch.
Don’t expect this to go perfectly. There may be still some elements that need fixing.
Web design is a fluid and ongoing process that requires constant maintenance.
Web design — and, design in general — is all about finding the right balance
between form and function. You need to use the right fonts, colors, and design motifs. But
the way people navigate and experience your site is just as important.
Skilled designers should be well versed in this concept and able to create a site that
walks the delicate tightrope between the two.
A key thing to remember about the launch stage is that it’s nowhere near the end of
the job. The beauty of the web is that it’s never finished. Once the site goes live, you can
continually run user testing on new content and features, monitor analytics, and refine your
messaging.

2.2.2 Differences between online website creation tools and custom-built sites
Online creation tools Custom built website

Online website creation tool has a pre-
custom-build sites have more
made template which helps the user to
flexibility than online websites and
see their site at the time of buying and
sites are made according to the
the function available in the pre-made
requirement of the client which helps
template are limited so the user has to
to develop more flexibility between
satisfy whatever they get from the
web designer and client. Additionally,
online template as well as a
design, features, colors, fonts, and
customization option in the template
Design outlook are made according to the
are limited. In addition, some of the
requirement of the client and the site
flexibility sites are not totally friendlier with SEO
is already tested before deploying to
and marketing tools as well as user
the server and FTP server also
cannot make any changes to the site
provides greater flexibility which
and web hosting companies also
means that web folders can be
provide the hosting and domain name
accessed from the website that is
that helps the user who has no
hosted directly. At last, a client can
experience in coding and online
buy their Domain name and hosting
website have good design with limited
plan according to their desire.
capabilities and services.
The performance of online website Custom build website has both poor
creation tool is very good related to and good performance depend upon
custom build site because custom the designer in what form they write
build website is made by coding in the code, plugins are limited or not as
which the designer can make mistake well as depend upon the server used
but in online website creation tool is in the site. Similarly, a designer who is
made by an expert designer which an expert can reach the site to higher
have less mistake which increases the performance compared to online
performance of sites as compared to website creation tools and if the
custom build site but some sites have designer has used high range server
poor performance lack proper coding. and hosting site then it will also help
Performance Moreover, we cannot make full trust to increase the performance of the
on an online website that it will site but only a few websites have
provide fast performance and speed of higher performance compared to
online site also depend upon the style online sites so while making the site
of coding as well as sites having more client have to choose an appropriate
plugin and animation also make the designer who can make the site faster
site slower. Additionally, the speed of and made the site according to their
the side also depends upon the server desire. Furthermore, using less plugin
that is used, as some of the servers are and animation help to load the site
not good which provides a poor faster and using dynamic content also
response from the server and make helps to increase the performance of
the performance of the site slower. the site.
Functi In the online template, the function is But in a custom build website designer
onality already given and it is limited as well as can increase and decrease the number
user cannot make any changes to the of functions according to the user
template and in the online template, requirement. Most of the site like
the user has to be satisfied with
whatever functions are available on
Facebook, Twitter, YouTube uses
the site. Besides, users cannot even
custom build website because they
add or delete the function and service
need more and more function which
available on site and the online
can be later increased or decreased
template has a limited function. Users
according to their demand so most of
who want to start an e-commerce site
the site prefer custom build website to
cannot be able to use an online
get more functionality.
template because an e-commerce site
needs more function.
User Experience is needed to improve Custom build website has different
customer satisfaction but in the User Interface and it can be designed
website template, most users are not by the designer to attract the visitors,
satisfied with the design and outlook as well as UX, can be designed in
available in the template as well as it different pages of the same website so
cannot design the UX for the user. that visitor will be attractive toward
Similarly, the main aim of User the site and will visit your site
Experience is to provide a positive continuously to get the information
UX
experience that can attract the user available on your site. There are
towards the site however most of the different tools to increase UX and it
sites have a good User Experience. can be built as per the client’s
Besides, the user cannot change the requirements. Moreover, online
User experience to attract the visitors templates can’t design experiences
and user have to satisfied with the but in custom build, a website
design that provided for User designer can design experiences for
Experience the user.
Custom build website can manage the
UI help to design website structure User Interface and make the site
properly without sacrificing creative
friendlier to the visitors. Similarly,
and original idea which user want tothere are different information on the
include in their site but in the online
website and if there will be different
template user can add their ideas orfunction then it will be easy to manage
even can’t the design of the template
that information on the different
as well as the website must be user-function which make site higher in
friendly sot that any visitors can get or
User Information they will get the
UI interact with the information available
information quicker than other sites.
in the site. Moreover, the online Additionally, there are different UI
template which meets the client tools that allow the designer to create
requirement has a good User Interface
outstanding’s visual in reasonable
but those clients who still use an timeframes which can be done in
online template that is not suitable for
custom build website and help to
their site such as e-commerce will not
improve design workflow in different
get a proper User Interface as the user
ways as well as User Interface can be
will not interact with the site friendlier.
changed later if the user to create
another UI.
Table 5 Differences between online website creation tools and custom-built sites

2.3 Evaluate a range of tools and techniques available to design and develop
a custom built website (M3).
2.3.1 Tools
Advantages Disadvantages
 It provides a very  It’s very heavyweight, has a
comprehensive overview lot, A LOT of plugins, and some
 It combines theory and of them you never need them.
practice  You can’t customize it, I mean
Netbean  It provides many samples. you cannot uninstall the
 It is a "living book" plugins to make the IDE faster.
 It is not for beginners only.  The debugger is really slow,
compared with the IntelliJ or
eclipse.
 Identifying the different  In addition to the ability to
vendor coding within the text. manually comparing the text
 Easy to use and provides many file, Sublime has the feature of
preferences that suit all users' automatically comparing the
needs. files but it's hard to use and
 Manipulating text is easy and needs to be improved because
efficient. it's a useful feature.
 The ability to add package  Although Sublime Text has the
Sublime text controls. features of identifying the
 You can freely evaluate the many vendor's coding, many
app. other vendors' coding can not
be identifying like Cisco-IOS
coding.
 Adding the ability to mark or
highlight the text with
different colors would be nice.
 Microsoft Visual Studio Code is  If we continuously use

my favorite because there are Microsoft Visual Studio Code
lots of useful code-editing for many hours, devices get
features packed in a single heated up.
software.  It consumes so much battery
 It saves time--it has a feature in very little time.
that automatically writes the  It takes time descent amount
rest of the code (Intelligent of time to open. Not
Studio code
Code Completion). Recommended for Slow
 It has a very easy-to-use Computers.
interface (UI) unlike any
similar product in the market.
 It is very good at debugging
code.

 Good tools for debugging  It is not lightweight
 Easy package searching and  Expensive
Pycharm installation  Rendering the notebook is
 Easy to learn frustrating
 Atom has an amazing plugin  Some of Atom's default UX

library that is easy to use and could be improved. Depending
integrates seamlessly. on your previous workspace, it
 Specifically, Atom's multi- can open with two panes and
cursor plug-in functionality a welcome tab in each,
provides a powerful method requiring you to close lots of
for manipulating text in bulk. cruft on startup.
Atom  Atom provides good syntax  Atom's documentation and
highlighting and other plugin marketplace could be a
interactive support for a little more discoverable.
number of programming
languages through its available
plug-ins.
Table 6 Tools to design and develop a custom built

2.3.2 Technique
Advantages Disadvantages
 Large choice of available  Declining popularity
specialists  Lack of dedicated libraries for
 Plentiful documentation modern needs
 Improved loading speed  Security flaws
 The wide selection of databases
 Inexpensive open-source
software
PHP  Cheaper hosting services
 Excellent combinability with
HTML
 Good flexibility
 Compatibility with cloud services
 They’re better for one-on-one  Their formatting isn’t up to you.

email correspondence.  They’re not as engaging.
 They load quickly.  They’re link-less.
HTML  They work on every device  They’re harder to measure.
 They’re more accessible to those
with disabilities.

 Speeds up your development  Restricts your freedom
 Enables cross-browser  Adds extra code
functionality  Forces you to use the
 Gives you clean and symmetrical framework’s semantics
CSS3
layouts  You could potentially lose time
 Enforces good web design habits
 Saves Time  Every Bootstrap Website Looks

 Bootstrap Encourages Similar
Consistency  Has a Learning Curve
 Better Teamwork  Can be Heavy
Boostrap  Bootstrap Offers an Excellent Grid
System
 Responsiveness
 High speed  Security

 Beginner-friendly  Controllable
 Well documented Compatibility
javaScript  Interoperability
 Independency
 Simple  Performance
 Object-Oriented  Look and Feel
 Platform-Independent  Single-Paradigm Language
 Distributed computing  Memory Management
Java  Secure
 Memory allocation
 Multithreaded
 Integration Feature  Not adjustable to Other

 Developed Programmer’s Languages
Productivity  Gets Slow in Speed
 Expanded Support Libraries  Weak in Mobile Computing
Python
 Productivity  Run-time Errors
Table 7 Techniques to design and develop a custom built

CHAPTER 3 LO1 & 2
3.1 Justify the tools and techniques chosen to realise a custom built website
(D1).
3.1.1 Design Wideframe
Wireframe design is an important step in any interface design process. It mainly

allows you to define the information hierarchy of your design, making it easier for you to
lay out the layout in the way you want your users to process the information. If you've
never used wireframe before, it's time to use it.
It is like an architectural blueprint; You need to see it in a two-dimensional black and

white scheme before you know what to do to build a real house. Similarly, for an interface
design, you can't start building pixel layers in photoshop, or write blocks of code without
knowing where the information should be placed.
After researching on the internet, I have chosen for myself a tool to design
wireframe for my website that is Balsamiq.
Figure 43 Balsamiq.

3.1.2 Design Visual
When designing a website, Photoshop can be one of your allies when making the
site look vibrant and unique. There is a plethora of customization that can be achieved by
the software that had over 10million users on its 20th anniversary in 2010. In the 6 years
that have followed this, this number has surely increased, which means that a huge
number of people can reap the advantages of Photoshop.
Out of this number, however, quite a minority would use the software for the sole
purpose of designing a website. This means that people may not fully understand the
advantages of using Photoshop for web design due to the limited resources available on
this matter. This list will help to change that by highlighting just how helpful Photoshop can
be when designing a website.
 PSD Files Are Still Needed

A PSD file stands for Photoshop Document, kind of makes sense, right? Often
companies like a copy of the PSD file you have created the Photoshop image or website
mock upon. This is so then they can directly edit the document without having to go
through a frustrating phone call or email exchange highlighting a minute change that you
want doing. Photoshop is popular enough to be accessible on the computers of companies
that know that it will be needed. However, companies can still access the PSD file even if
they don’t have the Photoshop software if they want to simply look over designs.
 Pre-Made Photoshop Actions

There are many hidden actions that can save you a lot of time and effort in creating
a stunning effect for your images. The best thing about these actions is that there are
many that are absolutely free! These include photo filters, touch-up techniques, and also
special effects. These are great for adding pre-made amazing filters to your designs in
order to spruce up your website creation. This also saves you jotting down every little
change you made in order to recreate this effect when you can have it pre-set ready to go
whenever you want. Little unknown perks to Photoshop like this can make all the
difference in making your website stand out from the crowd.
 Image Scalability
Photoshop also prides itself on providing clear images that will retain their clarity
even if they are changed in size. By clicking and holding the shift button then dragging the
image to whatever size you require. This is great for website pages that require larger
images as backgrounds, or smaller images to integrate into product pages, blog posts, etc.

This adds to the versatility of Photoshop as this beats many other image manipulation
software in how you can keep the clarity of an image.
 So Many Fonts!
Photoshop offers a range of fonts themselves, however, if you are looking for
something a little funkier, then by using sites such as DaFont and 1001 Fonts, you can
implement a wide range of fonts that go beyond the realms of Photoshop. These include
famous fonts such as the Star Wars font and Harry Potter font, which can be great if you
are looking to create websites along with these themes.
Figure 44 Photoshop
3.1.3 Languages
3.1.3.1 HTML5
HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not
a programming language, but rather a markup language. In this tutorial, we will discuss the
features of HTML5 and how to use it in practice.
This tutorial has been designed for beginners in HTML5 to make them understand
the basic-to-advanced concepts of the subject.

Figure 45 HTML5
3.1.3.2 CSS3
Cascading Style Sheets (CSS) is a language that is used to illustrate the look, style,
and format of a document written in any markup language. In simple words, it is used to
style and organize the layout of Web pages. CSS3 is the latest version of an earlier CSS
version, CSS2.
A significant change in CSS3 in comparison to CSS2 is the introduction of modules.

The benefit of this functionality is that it allows the specification to be finalized and accept
faster, as segments are finalized and accepted in portions. Also, this allows the browser to
support segments of the specification.
Figure 46 CSS3

3.1.3.3 javaScript
Speed: JavaScript tends to be very fast because it is often run immediately within
the client's browser. So long as it doesn't require outside resources, JavaScript isn't
slowed down by calls to a backend server. Also, major browsers all support JIT (just in
time) compilation for JavaScript, meaning that there's no need to compile the code before
running it.
Simplicity: JavaScript's syntax was inspired by Java's and is relatively easy to

learn compared to other popular languages like C++.
Popularity: JavaScript is everywhere on the web, and with the advent of Node.js, is

increasingly used on the backend. There are countless resources to learn JavaScript. Both
StackOverflow and GitHub show an increasing amount of projects that use JavaScript, and
the traction it's gained in recent years is only expected to increase.
Interoperability: Unlike PHP or other scripting languages, JavaScript can be

inserted into any web page. JavaScript can be used in many different kinds of applications
because of support in other languages like Pearl and PHP.
Server Load: JavaScript is client-side, so it reduces the demand on servers overall,

and simple applications may not need a server at all.
Rich interfaces: JavaScript can be used to create features like drag and drop and
components such as sliders, all of which greatly enhance the user interface and
experience of a site.
Extended Functionality: Developers can extend the functionality of web pages by

writing snippets of JavaScript for third party add-ons like Greasemonkey.
Versatility: There are many ways to use JavaScript through Node.js servers. If you
were to bootstrap Node.js with Express, use a document database like MongoDB, and use
JavaScript on the frontend for clients, it is possible to develop an entire JavaScript app
from front to back using only JavaScript.
Updates: Since the advent of ECMAScript 5 (the scripting specification that

JavaScript relies on), ECMA International has been dedicated to updating JavaScript
annually. So far, we have received browser support for ES6 in 2017 and look forward to
ES7 being supported in the future.

Figure 47 javaScript
3.1.3.4 JQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, animation, and Ajax much simpler
with an easy-to-use API that works across a multitude of browsers. With a combination of
versatility and extensibility, jQuery has changed the way that millions of people write
JavaScript.
Figure 48 jQuery
3.1.3.5 Bootstrap
Bootstrap is the most popular front-end framework in recent times. It is a sleek,

intuitive, and powerful mobile first front-end framework for faster and easier web
development. It uses HTML, CSS, and Javascript. This tutorial will teach you the basics of
Bootstrap Framework using which you can create web projects with ease. The tutorial is
divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout
Components, and Bootstrap Plugins. Each of these sections contains related topics with
simple and useful examples.

Figure 49 Boostrap 4
3.1.4 Text editor
Visual Studio Code
Microsoft Visual Studio Code is my favorite because there are lots of useful code-
editing features packed in a single software.
It saves time--it has a feature that automatically writes the rest of the code (Intelligent
Code Completion).
It has a very easy-to-use interface (UI) unlike any similar product in the market.
It is very good at debugging code.
Figure 50 Visual Studio Code

3.1.5 Local server
3.1.5.1 Xampp
Microsoft Visual Studio Code is my favorite because there are lots of useful code-
editing features packed in a single software.
It saves time--it has a feature that automatically writes the rest of the code (Intelligent
Code Completion).
It has a very easy-to-use interface (UI) unlike any similar product in the market.
It is very good at debugging code.
Figure 51 Xampp
3.1.5.2 Apache
Apache is a popular open-source, cross-platform web server that is, by the

numbers, the most popular web server in existence. It’s actively maintained by the Apache
Software Foundation.
Some high-profile companies using Apache include Cisco, IBM, Salesforce,

General Electric, Adobe, VMware, Xerox, LinkedIn, Facebook, Hewlett-Packard, AT&T,
Siemens, eBay, and many more (source).
In addition to its popularity, it’s also one of the oldest web servers, with its first
release back in 1995. Many cPanel hosts utilize Apache today. Like other web servers,
Apache powers the behind-the-scenes aspects of serving your website's files to visitors.
Because Apache doesn’t perform as well in some benchmarks, especially for static
websites or websites with high traffic, Kinsta uses the NGINX web server instead of

Apache. Though NGINX hasn’t been around for as long as Apache, it’s quickly grown in
popularity and market share since its launch in 2004.
Figure 52 Apache
3.1.5.3 Mysql
Websites and systems that store a lot of information like usernames, passwords,
and other customer data can get difficult to navigate. Without a structured database or
collection, accessing this information for various purposes is almost impossible. This is
where MySQL can be of help. The database management program lets you organize data,
so you can easily use it while keeping it safe from any breaches.
With years under its belt, MySQL has evolved to become a pioneer in database
service and management. It helps individuals, as well as corporations, collect and store
data. And this data can range from user information to polls to browser history to any other
information you intend to capture. The software is highly efficient, and companies
like Facebook, Google, Drupal, and WordPress, use it often.
Figure 53 MySQL

3.1.5.4 PHP
The PHP Hypertext Preprocessor (PHP) is a programming language that allows

web developers to create dynamic content that interacts with databases. PHP is basically
used for developing web-based software applications. This tutorial helps you to build your
base with PHP.
Figure 54 PHP

CONCLUSION
I had a lot of trouble completing this Assignment because there was so much new
knowledge to me, it took me a lot of practice and research to understand this knowledge.
Besides this knowledge in Assignment has helped to know more about the website field so
that I can improve my own programming skills such as the process that a website works,
how to design wireframe, tutorial on how to use frameworks, how to standardize SEO,
knowledge of the Front-end as well as the Back-end. Thereby I can improve my coding
skills, this knowledge will help me go further in my future work.

REFERENCES
[1] Khello, R., Cobo, M., Ferraro-Esparza, V., & Samukic, A. (2006). U.S. Patent No. 7,027,582. Washington,
DC: U.S. Patent and Trademark Office.
[2] Agranat, I. D., Giusti, K. A., & Lawrence, S. D. (1999). U.S. Patent No. 5,973,696. Washington, DC: U.S.
Patent and Trademark Office.
[3] Lubbers, P., Albers, B., Salim, F., & Pye, T. (2011). Pro HTML5 programming (pp. 107-133). New York,
NY, USA:: Apress.
[4] Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y Javascript. Marcombo.
[5] Welling, L., & Thomson, L. (2003). PHP and MySQL Web development. Sams Publishing.
[6] Faranello, S. (2012). Balsamiq wireframes quickstart guide. Packt Publishing Ltd.
[7] Davis, H. (2006). Search engine optimization. " O'Reilly Media, Inc.".

Information Technology: Assignment 1 & 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Information Technology: Assignment 1 & 2

Uploaded by

Copyright:

Available Formats

BTEC FPT INTERNATIONAL COLLEGE

STUDENT : TRAN VAN MINH NHAT

DaNang, January 2020

Pass Merit Distinction

LO1 Explain server technologies and management services LO1 & 2

LO2 Categorise website technologies, tools and software used to

P3 Discuss the capabilities and M3 Evaluate a range of tools

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Student ID

Class Assessor name

Formative Feedback: Assessor to Student

CHAPTER 1 LO1 Explain server technologies and management services

1.1.2 Purpose and type of DNS.........................................................................2

1.1.3 How does DNS Work...............................................................................4

1.1.4 How domain names are organized..........................................................5

1.2 Explain the purpose and relationships between communication protocols,

1.2.1 Communication protocols.........................................................................6

1.2.2 Web server hardware.............................................................................12

1.2.3 Web server software..............................................................................13

1.2.4 Host operating system............................................................................17

1.3 Evaluate the impact of common web development technologies and

1.3.1 Evaluation Of Web Application Frameworks..........................................20

1.3.2 The Impact Of Frameworks With Regards To Functionality..................22

1.4.1 Concept of search engine......................................................................23

1.4.2 Concept of SEO.....................................................................................25

1.4.3 Technical solution to improve website index based on SEO.................25

CHAPTER 2 LO2 Categorise website technologies, tools and software used to

2.1.1 Explanation of static and dynamic web..................................................31

2.1.2 Front End................................................................................................32

2.1.3 Back End................................................................................................39

2.1.4 The relationship between Front-end and Back-end...............................41

2.1.5 How Front-end and Back-end relate to presentation and application

2.2.1 Online website creation tools and custom built sites.............................47

CHAPTER 3 LO1 & 2............................................................................................60

3.1.1 Design Wideframe..................................................................................60

3.1.2 Design Visual.........................................................................................61

3.1.4 Text editor...............................................................................................66

3.1.5 Local server............................................................................................67

Figure 1 Purpose of DNS............................................................................................3

Figure 2 How does DNS work.....................................................................................5

Figure 3 Domain name...............................................................................................5

Figure 4 Layers in the OSI model...............................................................................7

Figure 5 Illustration image of web server hardware..................................................12

Figure 6 How to overview the performance of web server software........................14

Figure 7 Web server Apache....................................................................................16

Figure 8 Web server IIS............................................................................................17

Figure 11 Some popular search engines..................................................................24

Figure 12 Search engine optimization......................................................................25

Figure 13 For example a static website....................................................................31

Figure 14 For example a dynamic website...............................................................32

Figure 15 A code snippet of a front-end developer..................................................33

Figure 16 <HTML> tag..............................................................................................33

Figure 22 Responsive design illustrations................................................................38

Figure 23 Illustrative image of Perceived Performance............................................38

Figure 24 A code snippet of a back-end programmer..............................................39

Figure 25 Python laguage.........................................................................................40

Figure 26 Java language..........................................................................................40

Figure 28 PHP language...........................................................................................41

Figure 30 Function of presentation layer..................................................................46

Figure 31 The function of Application Layer.............................................................46