ICON College Website Design and Development Project Report

This report outlines the design and development of a multi-page website for ICON College, detailing the technologies, tools, and techniques used throughout the process. It begins by explaining server technologies and management services, including DNS and communication protocols. The report then categorizes front-end (HTML, CSS, JavaScript) and back-end (Node.js, Python, PHP) website technologies, discussing their capabilities and relationships to presentation and application layers. A design document is presented, complete with wireframes and client requirements, which guides the creation of a branded website with realistic content. Finally, the report includes a comprehensive test plan to review the website's functionality and performance, covering aspects like form validation, browser compatibility, and navigation. The website aims to provide a user-friendly platform for students to access course information. Desklib is your resource for solved assignments and past papers.

Website Design and Development

Contents
Introduction:....................................................................................................................................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
LO2 categories website technology, tools and software used to develop website:.........................8
P3 discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers:.....................8
P4 discuss the difference between online website creation tools and custom built sites with
regards to design flexibility, performance functionality, and user interface and user
experience:.................................................................................................................................10
LO3 Utilize website technologies, tools and techniques with good design principles to create a
multipage website:.........................................................................................................................11
P5 Create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of client and user requirement:..........................................................11
P6 use your design document with appropriate principles, standards and guidelines to produce
a branded, multipage website supported with realistic content.................................................15
LO4 Create and use a test plan to review the performance and design of a multipage website....19
P7 create a suitable test plan identify key performance areas and use it to review the
functionality and performance of website:................................................................................19
Conclusion:....................................................................................................................................27
References......................................................................................................................................28

Table of Figures:
Figure 1: About Us Page of ICON College...................................................................................11
Figure 2: Contact Page of ICON College......................................................................................12
Figure 3: Various colors & Images of the Website.......................................................................13
Figure 4: Grid Layout....................................................................................................................14
Figure 5: Mobile responsive..........................................................................................................14
Figure 6: Contact us page of ICON college...................................................................................15
Figure 7: Home page of the ICON website...................................................................................16
Figure 8: About us page of ICON website....................................................................................17
Figure 9: Courses page of the ICON college................................................................................18
Figure 10: Form Validation...........................................................................................................19
Figure 11: Email Validation..........................................................................................................20
Figure 12: Chrome Testing............................................................................................................21
Figure 13: Firefox Testing.............................................................................................................22
Figure 14: Mobile Testing.............................................................................................................23
Figure 15: Subscription Test..........................................................................................................24
Figure 16: Search Box Testing......................................................................................................24
Figure 17: Down to Top Navigation..............................................................................................25
Figure 18: Navigation Code Validation.........................................................................................25

Introduction:
Website design and development is the assignment to develop a website on the user requirement.
This development includes different front-end and back-end platforms with using the various
databases to perform the operations.
The current report is going to develop as ICON college study portal where the list of all courses
of computing department will be available for the students. I will create the website as a full-
stack web developer with front-end technologies like Html, CSS, javascript and bootstrap. The
website will be user-friendly and intuitive. The context part of the report will include the server
technology and management services. It is also categories the website technologies, tools and
software to develop the website in the report. The next part will include the design document and
the last one will contain the test plan with functionality and performance of the website.

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
A naming system which used the computers and services to connect them with a private network
or with the internet is called as Domain Name System. Domain names are alphabetic that
translate into IP address by the internet. The IP address is the unique logical address of system
for the network. The size of IP address is 32 bits and consists of two components, host
component and network components. The domain name architecture contains the domain names,
name, and space and name server. Here, the domain name is associated with the IP address and
the next one, domain namespace refers to the hierarchy of the naming structure. Here is the
different naming server as Root, primary and secondary.
 Rot server: it contains the complete tree of DNS not the information about the domains.
 Primary Server: it saves a file of its zone and performs operations on it like, create update
and maintain the zone.
 Secondary Server: These types of server used to transfer the information about the zone
from a server to another server. The server which the zone, does not has the service to
edit it (tutorialspoint, 2018).
The working of the domain name system is as follows:
 Type a website into the browser and ask local DNS for IP address.
 DNS not find the IP and transfer it to root DNS server and ask about IP
 Root server replies that, don’t know the IP of current website but know the IP of DNS
server
 Local DNS ask about the IP to the DNS server
 The com DNS reply to don’t know the IP of complete website but it knows the IP of the
site by removing www form it.
 The local DNS ask to the website for the IP and its reply with the IP address. Now local
DNS get the IP and send it to the system to get the server IP address.
Communication protocol: a protocol which used to transfer the information between two entities
using the different varieties. It covers signalling, authentication, correction and error detection. It
also defines the synchronizations, syntax and semantics of digital and analogue
communication.in the current system, communication is an important part of the staff of the
college. OSI and TCP/IP model are the types of communication. Some roles of communication
protocol are data routing, data sequencing, flow control, data formatting, error control and data
security (Kamil, 2012). \

Indexing and Ranking:
A step to add the information to a web page to search the index of the engine is known as
indexing of data. Here the term, the index is of the data is the collection of the web pages which
include the information of web page.
The ranking is the step to find the result of the user of the search engine. Here is some step of the
ranking are:
 Intent the user query with interpreting
 Identify the web page of index related to query (ENGE, 2016)
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:
To manage a website, there are different steps to manage a website by using some furcation like,
Take a regular backup of the data and notify the system before downloading anything from the
internet. Check the resources regularly and general content of the website. Need to clean the
database from the virus from the system.
A database is required to store the database of the users and visitors of the website. The
advantages of the database system are as follows.
 Improve the security of the data
 Effective data integration
 Increase the productivity of the user
 Store the data in a centralized format
 Focus on easy analysis and release the ability (RingLead, 2012)
Web server Software:
Web server supports only static files like HTML but in the current technology, it is possible with
a server-side application. This type of model is known as a client-server model which use various
servers. Here is some web server software which uses for a web application.
 Apache HTTP server: apache server is used to run on Linux operating system but
sometimes also on Windows and OS. It has its own architecture and user can add extra
modules in this architecture. It is an open source server which can support a big
organization to secure its data.
 NGINX: it depends on an asynchronous architecture which is event-driven and helps to
achieve the goals of the sessions. It has the ability to scale easily and light utilization of
the resource. It is not a complete web server but also load-balancer and proxy server.
 Node.js: a server-side javascript which uses as a web server in a network application.
Basically, it is the server of Linux foundation. It is a cross-platform runtime environment
which is better for network application (Muilwijk, 2016).
Web server Hardware:

Hardware requirement for a web server includes the processor, ram, hard disk, virtual machine
and some others. These all hardware has a different configuration of user requirement. The
website requires the web host to maintain the data flow and monitor the workflow for the
website. The other types of hardware include the different server like a print server, network
server and database server. Memory hardware required for the server as the hard disk according
to IP address and memory uses (Servaris, 2018).
Web Server Operating system:
An operating system is required to operating a network software or hardware. It’s platform to
install and run a network and server. Different operating systems have different configuration
and characteristics. The types of operating system are Microsoft Windows, Linux, MAC OS. The
operating systems are also helpful in web hosting because it is connected to the IP address. The
web server operating system has two types, first one is window based operating system and
another type is UNIX based web server system (Whoishostingthis, 2018).
M1 & M2: Successfully evaluate the web development technologies with their framework in
above section and also discuss the design and functionality of the management. in the next
discussion, complete the search engines with the explanation of site indexing and ranking
through search engine optimization.

LO2 categories website technology, tools and software used to develop a
website:
P3 discuss the capabilities and relationships between front-end and back-end
website technologies and explain how these relate to presentation and application
layers:
The web application or website created on the programming software and technologies which
has two types of it, front-end technology and back-end technology. Here we discuss both
technologies differently
Front-end technology:
Html, CSS, javascript is the main part of the front-end technology and these are the base of any
programming language.
 Html/CSS: HTML is known as hypertext markup language which used to create web
pages. It is a type of digital documentation where a person can make notes or any written
document with the use of HTML. CSS (cascading style sheet) is used to represent the
design of HTML. It used to create and change the design, layout, colour, text and
complete style of the page. These both are the basic part of any programming language.
 JavaScript/Jquery: Javascript is used to determine the function of the pages which
created the HTML and CSS. Some interactive features can add in the web page like
games, audio and video and page animation. There are various plugins and extensions in
this technology which makes faster and easier for the website.
 Responsive design: the pages adjust themselves in any browser of any device without
any error. This happens due to a feature of the responsive design. Bootstrap is major
things for the responsive design. It used with the HTML and CSS.
 Testing/Debugging: there are various testing available for a website or application like
functional testing, database testing, navigation testing, browser testing and many more.
Unit testing is the method to check the codes of the programming which are responsible
for any error (Morris, 2017).
Back-end technology:
The back-end technology is the Node.js, python, ruby, Php. it has the facility of scalability and
database administration. In other features of the back-end, techniques are data transformation,
backup methods and software.
 Language and frameworks: different frameworks and technologies used in back-end
technology like PHP, Python, Ruby on Rails, Laravel and others popular languages.
These languages are communicated with the database to execute the results for the users.
 DBMS: database management system is required for each website or application to store
the data. MySQL is most required database technology for every platform. It improves

the speed and features of a programming language. Another database technologies are
DB2, SQL server, Oracle is not as popular as MySQL. PostgreSQL is the database
technique of Ruby on rails platform which is open-source and has more fracture like,
messaging system and searching for full text. It also has its own data type which
integrated with ruby on rails.
 Caching and Key-value store: avoid optimization for complete an application as soon as
possible. But in case of more users, need to optimize the code. Caching is used in that
when we can’t use more optimization. It used to save the piece of the application that can
use after to process it with fast speed.
 Queue Systems: queue system is used to avoid the wait of the user for sing up
confirmation or other things. To improve the usability in this case, the website needs to
send a confirmation or feedback message to the user about to send the message of signup.
It can take few minutes to arrive. This process is known as an asynchronous task. Ruby
on rails face various queue which is called delayed job and it needs the database to
complete it (Morales, 2015).
Layers of the web design:
 Structure or content layer: it builds with the structure of Html code which creates a base
for the programming module. It includes the text and images with a hyperlink to navigate
the website.
 Style or presentation layer: it defines the structure of Html with the help of CSS
(cascading state sheet). CSS used to design the structure of the web page that how it
displays.
 Behaviour layer: it used with the help of JavaScript of a web page, which define the
behaviour of as the web page responds on user actions and user make changes in the
conditions of the web page (Kyrnin, 2017).

P4 discuss the difference between online website creation tools and custom built sites
with regards to design flexibility, performance functionality, and user interface and
user experience:
A web application which design to deliver the functions of features to the desktop application as
normally associated is known as rich internet application. It used to divide the process with the
internet and locate the user interface and its activity on the client side and data operation and
manipulation on the server of application side. RIA runs in the web browser and does not need
software to install (Rouse, 2007).
A website can be created by coding or manually by the online template and tools. The criteria of
design a website are, design flexibility, user interface, user experience and perforate with
functionality. Here is the difference between custom build sites and online website creation tools.
Advantages Disadvantages
Custom build sites  Flexible and can improve the
functionality
 No limitation of graphics and
easy to update the word
press.
 Better search engine
optimization and these sites
are necessary for e-
commerce.
 The higher cost of design
and maintenance
 Take a long time to
design and layout with
review and approval.
Online website
creation tools or
Template
 Less expensive and more
affordable
 Fast to implement a clear
schedule and less complexity
 More sophisticated with
robust and well designed
 Common design
 Limited accessibility of
graphic design and
navigation
 Limited functionality and
issue of security
(Johansson, 2014)
M3: Achieve the points of the custom built website in above section with the comparison of
manually created websites.

LO3 Utilize website technologies, tools and techniques with good design
principles to create a multipage website:
P5 Create a design document for a branded, multipage website supported with
medium-fidelity wireframes and a full set of client and user requirement:
To create a design document for a website or application, it is necessary to know about user and
technical requirement. These requirements help to understand the design principle before
creating the design:
User requirement: in the current scenario of website design, the user needs a website with
various features and availability of more flexibility. The website is full of attractive content,
pictures, designs and other features and the available services have online payment mode.
Client requirement: client of ICON College requires a secure website for the students of the
college with a secure database of college staff. The website should have a user-friendly graphical
user interface and administrator have all the authorities to allow the user to access the password.
The client also requires the SEO ranking and optimization to search the website on the browser.
Website Design Principle
A website creates different principles which are set on the user requirements; here are some
principles on which the Website of ICON College created.
Purpose: a website has always a purpose to create. The ICON college website is created for the
students and visitors of the college that they can see the course detail of the college and put any
query online.
Figure 1: About Us Page of ICON College

Communication: people need any information in their hand or in their access area. it’s required
to provide the communion facility on the online platform for the users of the website. In the
design of ICON college, the contact us page has the facility for contact to the college.
Figure 2: Contact Page of ICON College
Colours & Images: make an attractive website with using different images with proper colour
balance and interface design. Use contrast colour in background and text which make the content
easy to read. Give a modern look to the website with the colours. Select the right image for the
right content of the website so that it makes easy for the user to recognize a web page with its
picture without reading the complete content. Develop can use graphics and videos for the
website.