Website Design and Development: A Comprehensive Guide

Desklib provides solved assignments and past papers to help students succeed.

UNIT 10
WEBSITE DESIGN AND DEVELOPMENT

Table of Contents
INTRODUCTION.....................................................................................................................................4
LO1.............................................................................................................................................................5
P1............................................................................................................................................................5
P2............................................................................................................................................................6
M1...........................................................................................................................................................7
M2...........................................................................................................................................................9
LO2...........................................................................................................................................................10
P3..........................................................................................................................................................10
P4..........................................................................................................................................................11
M3.........................................................................................................................................................12
LO3...........................................................................................................................................................14
P5..........................................................................................................................................................14
P6..........................................................................................................................................................17
M4.........................................................................................................................................................19
LO4...........................................................................................................................................................21
P7..........................................................................................................................................................21
M5.........................................................................................................................................................22
CONCLUSION........................................................................................................................................23
REFERENCES........................................................................................................................................24

Table of Figures
Figure 1 Front-end & Back-end.....................................................................................................10
Figure 2 Index Design...................................................................................................................14
Figure 3 About Design...................................................................................................................15
Figure 4 Destination Design..........................................................................................................15
Figure 5 Booking Design...............................................................................................................16
Figure 6 Index Page.......................................................................................................................17
Figure 7 About Page......................................................................................................................17
Figure 8 Destination Page..............................................................................................................18
Figure 9 Booking Page..................................................................................................................18

INTRODUCTION
This report will include the basics of web development. According to the scenario presented a
website has to be developed for a travel agency residing in UK, initially. In this report, all the
steps required for developing a website or a web application will be covered. All the principles
regarding the design and the development will be discussed. All the tools and techniques which
are used for developing a website will be discussed. The visual view of the development will be
presented for the better understanding of the development process.

LO1
P1
DNS stands for Domain Name System. It is the most important part of the internet. It helps us to
open any address without any bump (NS1, 2019). It works as the phonebook for the internet. The
main function of the DNS is to translate the domain name into IP addresses. It removes the
thought of memorizing the tough IP addresses like 163.198.2.2.
DNS Query is categorized into three types:
1. ITERATIVE QUERY
In this query, the DNS client gives a hostname in return to which the DNS resolver have
to provide the best answer. Either it’ll return the records from the cache or it’ll redirect
the client to another nearest DNS zone.
2. NON-RECURSIVE QUERY
Here, the answer is already known to DNS resolver. It rapidly return the record which is
stored in the local cache.
3. RECURSIVE QUERY
In this query, the hostname is provided by the DNS client. It is mandatory for the DNS
resolver to give an answer. It should return records if it is stored or it should display an
error notification.
There are three types of DNS Servers:
1. DNS ROOT SERVER
It works by extracting the TLD (Top Level Domain) from the query of the user. It
provides all the necessary information for .com Top Level Domain Name Server.
2. AUTHORITATIVE DNS SERVER
As the name defines this server is authoritative. It intakes hostname and provides the
DNS resolver with an accurate IP address.
3. DNS RESOLVER
It is the server which is designed for the submission of the DNS queries.

P2
COMMUNICATION PROTOCOLS
The functionality of the internet is defined by its protocols (Eyerys, 2019). These provide
communication over the internet. It means that the protocols are used for transferring data over
the internet. The protocols defines the privileges of the users. Various types web protocols are
HTTP (HyperText Transfer Protocol), Telnet, FTP (File Transfer Protocol), etc.
SERVER HARDWARE
A server refers to a database where all the components of a website is stored. These components
are delivered to the user requesting to see the website over the internet. The site is basically
online over the internet. The server computers have large memory, fast HDDs (Hard Disk
Drives) and processors than the basic computers. These are responsible for delivering the
resources to the visitors when they request it.
OPERATING SYSTEM
The operating system is the core of a server (Garden, 2019). Server is just a collection of
components. To provide functionality to the server and teach how to communicate with the rest
of the world, operating system is used. Example: Windows, Red Hat, Linux, Mac, Ubuntu, etc.
SERVER SOFTWARE
These are the software which are used for server (WhoIsHostingThis, 2019). These softwares
runs in the background. These softwares take help from the operating system to implement their
functionalities. Example: Tomcat JSP, Apache, IIS 7.0, LiteSpeed, Nginx, etc.

M1
WEB DEVELOPMENT TECHNOLOGIES
There are two types of coding while developing a web application:
1. CLIENT SIDE CODING
This type of coding is implemented in the browsers (Comentum, 2019). These type of
code is used to create the visible feel of the site. This code is easily readable by any user
by clicking to view the source code of the page in the site. This side of coding is mainly
done to implement the front end functionality of the site. The most commonly used
languages are as follows:
 JavaScript
 HTML
 Ajax
 CSS
 jQuery
2. SERVER SIDE CODING
This scripting is implemented on the web server. This coding is not readable nor
viewable by any other than the administrator. This type of coding is done for
implementing various functionalities such as creating the admin panel, connecting the
website with the admin panel and the admin panel with the database. The languages used
in the server side are listed below:
 ASP
 PHP
 ASP.NET
 Ruby on Rails
 Python
 Perl

Web Development Frameworks
Frameworks are a collection of components, tools and program libraries which are assembled in
a system. This system allows the developer to maintain and build web applications be it simple
or complex. It uses an effective and efficient approach to carry out the process of the
development. Frameworks used commonly are mentioned below:
 Angular (based on JavaScript)
 Django (based on Python)
 Laravel (based on PHP)
 Ruby on Rails (based on Ruby)

M2
There are many elements engaged in determining the rankings in the search engine. One of the
examples is Google (Epperson, 2019). Google is in the habit of refreshing and implementing
their algorithm. What may have worked a while back could finish up neutralizing you over the
long haul, so one should persistently improve the site, and keep the substance refreshed.
To improve the ranking of the site one should consider the factors mentioned below:
1. PLAGIARISM FREE & RELEVANT CONTENT
The content published on your site should be relevant to the topic and it should be
plagiarism free. The content should not be copied from anywhere as the algorithm of
google detects it and it lowers the ranking on the search results.
2. KEYWORDS
Keywords plays the most important role. These keywords can uplift the performance of
the content published in the site on the search results. The keywords mentioned should be
realistic and strategic. The keywords should be based on the topics which are published
on your site.
3. LINKS
The links should be relevant. Relevancy in the links will help in the determination of
justified content on the site. The determination is done by the search engine which is
displayed over the search results.
4. USER EXPERIENCE
The website should not be outdated. The content, design everything should be updated
and the interface should be interactive. The workflow of the website should be smooth
and the site should load quickly. There should not be errors in the links and the
navigation. This will certainly rise the ranking of the site in the search results. The user
experience should be creative and interactive so that the user should get indulge in the
site.

LO2
P3
FRONT-END WEBSITE TECHNOLOGIES
These website technologies refers to the coding which is done at the client-side of the
application. These technologies deals with the visible part which is readable by the site visitors.
It refers to the design and layout implementations in the website. It includes all the visual aspects
related to the website (Careerfoundry, 2019). It focuses on the experience of the user, the
interaction of the user with the interface. Front-end is the most crucial part as it is what the end
user’s see and judges the site from. The most common languages that are used are CSS
(Cascading Style Sheets), JavaScript and HTML (Hypertext Markup Language).
BACK-END WEBSITE TECHNOLOGIES
These technologies are used in the server-side of the application. It is not visible and readable to
the site visitors. The back-end coding runs in the background of the site. All the implementations
are done behind the scenes. It comprises of a web server. The web server is used to create a
communication between the database and the website components. In other words, you can say
that it is the core of the website. It runs all the CRUD (Create, Read, Update, and Delete)
functionalities in the database and on the website. It is not visible to the end user’s and can only
be accessed by the administrator. The languages which are commonly used in the back-end
development are: Python, .NET, Ruby, Java, etc.

Figure 1 Front-end & Back-end
P4
ONLINE WEBSITE CREATION TOOLS
It refers to the services that are provided by websites like WordPress, Squarespace or Wix. These
websites provide a vast range of themes which you can buy and then make your website on your
own by publishing your content (Fahrenbruch, 2019). The advantages and disadvantages of these
websites are as follows:
1. Anyone can choose any template which means what someone has chosen can also be
chosen by another person which means that your site is not unique.
2. You have limited access for the customization of the website.
3. Not every device is compatible to use it.
4. One cannot add their own custom technologies.
5. They have a cheap price which makes it convenient for anyone to buy it and use it.
6. Custom built are more supportive than the template based.
7. One can build the site on a go and start working immediately.
CUSTOM BUILT WEBSITES
These websites are made by a team. A team which is backing your business. It follows all the
approaches which are used in the development process. The work starts with a creative approach
to target the type of audience, the design and the functionalities of the site. The advantages and
disadvantages of these websites are mentioned below:

1. These websites are unique as the idea of the design is unique.
2. It is adaptable to the need of the enterprise.
3. It works on all devices.
4. It is friendly to search engines.
5. The development and maintenance of the website is costly.
6. The duration of the development is long.