Website Design and Development Project: A Multipage E-commerce Website

Desklib provides past papers and solved assignments for students. This project focuses on website design and development.

Website Design & Development

Contents
List of Figures............................................................................................................................3
List of Tables..............................................................................................................................4
LO1 Explain server technologies and management services associated with hosting and
managing websites.....................................................................................................................5
P1 Identify the purpose and types of DNS, including explanations on how domain names
are organized and managed....................................................................................................5
P2 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..........................................................................................................6
M1 Evaluate the impact of common web development technologies and frameworks with
regards to website design, functionality, and management....................................................7
M2 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
optimization............................................................................................................................8
LO2 Categorise website technologies, tools and software used to develop websites................9
P3 Discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers................9
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)...............................................................................................................10
M3 Evaluate a range of tools and techniques available to design and develop a custom built
website..................................................................................................................................11
LO3 Utilise website technologies, tools and techniques with good design principles to create
a multipage website..................................................................................................................12
P5 Create a design document for a branded, multipage website supported with medium-
fidelity wireframes and a full set of client and user requirements.......................................12
P6 Use your design document with appropriate principles, standards, and guidelines to
produce a branded, multipage website supported with realistic content..............................14
M4 Compare and contrast the multipage website created to the design document.............17
LO4 Create and use a Test Plan to review the performance and design of a multipage website
..................................................................................................................................................18
P7 Create a suitable Test Plan identifying key performance areas and use it to review the
functionality and performance of your website...................................................................18
M5 Evaluate the Quality Assurance (QA) process and review how it was implemented
during your design and development stages........................................................................19
Reference..................................................................................................................................21

List of Figures
Figure 1: Home page................................................................................................................11
Figure 2: Login Page................................................................................................................12
Figure 3: Register Page............................................................................................................12
Figure 4: Shop page.................................................................................................................13
Figure 5: Homepage1...............................................................................................................14
Figure 6: Homepage2...............................................................................................................14
Figure 7: Login Page................................................................................................................15
Figure 8: Register Page............................................................................................................15
Figure 9: Shop Page.................................................................................................................16

List of Tables
Table 1: relationships between communication protocols, server hardware, operating systems
and web server software.............................................................................................................4
Table 2: capabilities and relationships between front-end and back-end website technologies 7
Table 3: Differences between online website creation tools and custom-built sites..................8
Table 4: Comparison of a web document and website............................................................15
Table 5: Test Plan.....................................................................................................................16

LO1 Explain server technologies and management services associated with
hosting and managing websites.
P1 Identify the purpose and types of DNS, including explanations on how domain
names are organized and managed.
DNS is basically for the transformation of the IP addresses into a domain name that is human
readable. Whenever a user asks for access to any website then the application or the browser
basically perform a Query of DNS against the server of the DNS that supply the name of the
host.
There are three main types of DNS servers that have a wide range of applications:
DNS Resolver: This is basically designed to receive the queries of the DNS including
the host names that are human readable and help in tracking the IP address related to
the hostnames.
DNS Root Server: The first and the foremost step in the conversion of the IP address
into human readable hostnames is initiated by DNS root Server. The Top-Level
Domain from the query of the user is extracted by the DNS Root Server. The domain
details will be provided by the server in return.
Authoritative DNS Server: The last stoppage of the query related to the name server
is the Authoritative DNS Server. The basic function of this DNS server is taking the
hostname and returning the right IP address to the resolver of the DNS (Anderson
et.al, 2013).
Domain Name System (DNS) Management
The maintenance and the management of the DNS system are required due to its great
importance.DNS is required to be managed as it is one of the most critical parts of the
internet system. Given below are the organizations that are responsible for the management
of the DNS:
Internet Assigned Numbers Authority (IANA)
Top domain level operators such as Verisign.
Accredited Registrars such as GoDaddy
Internet Corporation for Assigned Names and Numbers (ICANN)

The root zone of the DNS is the topmost layer of DNS and it is basically managed by IANA,
with the collaboration of ICANN that provides oversight by guiding the data of the root zone
in the servers of the root name. ICANN is also responsible for the management and the
maintenance of the Root Zone Database that contains the published information’s of WHOIS
services and is also responsible for the management of the KSK (Key Signing Key) that is
responsible for providing DNS security with the use of DNSSEC. The management of the
Top Level Domains are assigned by ICANN and is also responsible for the accreditation of
the registrars who manage and buy namespace with the domain of the top levels. ICANN is
the ultimate and the main authority that is responsible for the management of the Domain
Name System that is responsible for the assignment of the IP number (Gudivada et.al, 2015).
P2 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.
Table 1: relationships between communication protocols, server hardware, operating systems and web server software
Communication
Protocol
Server Hardware Operating Systems Web Server
Software
Communication
Protocol is basically a
set of rules that guide
the communication of
more than one entity for
the transmission of
information through the
variation of any type of
physical quantity.
Communication
protocol describes the
syntax, rules,
synchronization, and
semantics of the
methods of error
recovery and
The routing and the
interconnection of the
network devices are
regulated by the
server hardware. The
memory load and the
processing are
provided by the server
hardware. The
operating system of
the server hardware is
designed such that it
can easily support the
operations based in
network systems,
delivery of the
The management of the
software and the
hardware system is
managed by an
operating system. The
operating system is
consisting of
cooperating processes
that are responsible for
the manipulation of the
shared data for their
communication with
one another. There are
well defined and
understood protocols
for governing the
Web server
software is
designed such that
it can be operated,
managed and used
by the computing
server. Server
software is
basically designed
for the interaction
with the server
hardware. This
basically allows the
acting of the
computers as web
servers. HTML is

communications. The
implementation of the
communication protocol
is implemented
individually by server
hardware, web server or
an operating system or
by the combined actions
of them.
services and the
processing of the
large loads.
communication that is
rooted in the process
code. The operating
system is an
intermediary in the
communication of the
hardware and the
software system. For
the implementation of a
network protocol, the
software modules of
the network protocol
are interfaced with a
framework with
implementation
through the operating
system of the machine.
one of the web
server software.
This is sometimes
known as the
application server
or the HTTP server
(Anderson et.al,
2013).
M1 Evaluate the impact of common web development technologies and frameworks
with regards to website design, functionality, and management.
The common web development framework and the technologies allow a website developer to
develop a unique feature for the application or the website that they are developing rather
than wheeling in the same coding and the common features that are been used since a long
time in many of the web application and web development. A framework is basically for
providing a template to the developers that are prebuilt that contain the common feature or
repetitive features. A framework basically shortens the path of the development of a web
application and the management of the application (Thüm et.al, 2014).
Following are some of the pros of using the technologies for web application development
and the use of frameworks:
Efficiency: The pre-built functions that are provided in the framework lessen the time
and the effort of writing the codes again and again that make the process of web
development more efficient and faster.

Cost: The cost for the development of the website is less as it he4lp in the faster
development of the code for the website.
Support: A framework is provided with tools that contain a large amount of
documentation regarding any support for the development of the website.
Security: There are large security implementation advantages in using a framework
and web technology for the devolvement of the web application. The user in the
framework generally becomes a longtime tester. There are a defined system for
addressing any of the security issues arises during the development and during the
management of the web application.
Helps in the maintenance of the web application for a long time.
Integration: The database that is used for the storage of data in the web application
devolvement can be communicated easily on using a framework in the development
of a web application. Web development technologies and the framework make it
easier to link the database tool during the development of a web application.
Open Source: There are several frameworks that are open source and enables the
devolvement of web application for the building any type of commercial products
(Draco et. Al, 2013).
M2 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 optimization.
Search Engine Optimization is basically a discipline that is established by marketing
standards that are basically focused on certain practice that affect the ranking, position, and
visibility of any website in the result page of the search engine. The higher the rank of the
website in the SRP (Search Result Page) the more is the chance of the interaction of the
consumers with the website.
There are majorly two segments that determine the performance of the website and set the
position of the website in the search engine page:
On page Search Engine Optimization: This rate the relevancy of the content on the
website and that includes the keywords and the contents the architecture of the
webpage that includes the performance, UX and the design of the website.
Off-page Search Engine Optimization: This rate the presence of the website in the
social media sites that includes the engagement and the trust of the brand, and

secondly the likings on the website that includes the credibility and the quality of the
website (Luna et.al, 2013).
Improving the rank of the website and the value of the site index through Search Engine
Optimization:
Publishing relevant content in the webpage: The site traffic is increased by the
publishing the quality content that is specified according to the user requirements.
This improves the relevancy and the authority of the site. It is one of the top drivers in
improving the site index and rank of the website.
Regular update of the content: The relevancy of the site is determined by the regular
updates of the content of the site and SEO ensures that the website is regularly
updated according to the current affairs.
Proper linking on the website by maintaining the relevancy of the links provided on
the site.
Creating metadata during the designing of the page that which states that the page is
divided into three segments, title metadata, description metadata, and the keyword
metadata.
Describing the audio and the visual contents on the website with alt tags that is an
alternative definition text (Chu et.al, 2013).
LO2 Categorise website technologies, tools, and software used to develop
websites
P3 Discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers.
Table 2: capabilities and relationships between front-end and back-end website technologies
Front End Website Technology Back End Website Technology
Front End Website technology refers to the
technologies that are involved in the
development client side that involves the
analysis of the code and the applications
debugging with an objective of providing a
better user experience.
The visual portion of the application
Back end website technologies refer to the
server side development technologies. This
includes the changes and updating the site
and the monitoring of the functionality of
the site.
Nonvisual Part of the application
development s carried out by the

is carried out by the front end
technology.
User can easily interact with the
Front end part of the website.
The front end website technology
includes JavaScript, CSS, and
HTML.
back end technology.
This technology basically works
behind the application development,
for example, the databases, etc.
The back end technology includes
Python.Net, Java, Ruby, etc
(Berman et.al, 2013).
Relationship of back-end and front-end website technologies to the application and the
presentation layer
Presentation layer and application layer are the two layers of the 6th and the 7th layer of the
OSI model that determines the communication function between the computing systems. The
front end technologies work with the presentation layer that enables the representation of the
data by the translation between the format of the network and the application. The back end
technologies help in the transformation of the data into a form that is accepted by the
application. Back end technologies work behind the application layer which is the closest
layer to the end user. The application layer and the user directly interact with the application
software. Back end technologies help the application layer to identify the partners of the
communication, determining the availability of the resources and maintaining the
synchronization of the communication between the user and the application (Killoran, 2013).
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).
Table 3: Differences between online website creation tools and custom-built sites
Online tools for website
Creation
Custom Built sites
Flexibility of
Design
Online tools provide less
flexibility in term of designing
as the developer is only limited
to certain defined functionality
of the template that is provided.
Does not provide any flexibility
Custom built sites are very
flexible in terms of designing as
it can be customized easily
according to the client
requirements. They provide a
unique design based on the

regarding customizing the site.
The websites may not be
supported in all the platforms.
needs of the customer.
Functionality Less functionality is provided by
template-based online creation
tools as nothing extra can be
added other than the template.
Wide range of functionalities
can be added according to the
client requirement and is
responsive to all the devices.
Performance The development time of online
creation tools are comparatively
lesser but the performance is
limited to certain devices and
there is no uniqueness in the
designs.
There are no limitations in the
graphics and the performance of
the sites. Wirth better SEO and
site updates.
User Interface (UI) Less user interface as the
developer has to work according
to the template that is provided
nothing according to the user
requirements.
Custom built sites are according
to the user requirement and the
user is more interactive with the
site.
User Experience
(UX)
User experience with online
build websites is not up to the
expectation as all the
requirements are not fulfilled by
the template and do not produce
ant unique designs.
Provide better user experience
as the requirement of the user is
fulfilled accordingly (Völter
et.al, 2013).
M3 Evaluate a range of tools and techniques available to design and develop a custom
built website.
There are wide ranges of tools that are used by the web developer for bringing a concept into
reality. Following are tools that are most popular in the development of a custom built
website:
Fireworks: Firework is for the vector graphics and raster editor hybrid that is
generated from Adobe for the Windows and Mac operating systems. The main