Pearson

Higher Nationals in
Computing
Unit 10: Web Design and Development
Assignment 01

Avinda Himesha WDD - COL/A-066773 P a g e 1 | 83

General Guidelines

1. A Cover page or title page – You should always attach a title page to your assignment. Use previous page as
your cover sheet and make sure all the details are accurately filled.
2. Attach this brief as the first section of your assignment.
3. All the assignments should be prepared using a word processing software.
4. All the assignments should be printed on A4 sized papers. Use single side printing.
5. Allow 1” for top, bottom , right margins and 1.25” for the left margin of each page.

Word Processing Rules

1. The font size should be 12 point, and should be in the style of Time New Roman.
2. Use 1.5 line spacing. Left justify all paragraphs.
3. Ensure that all the headings are consistent in terms of the font size and font style.
4. Use footer function in the word processor to insert Your Name, Subject, Assignment No, and Page Number
on each page. This is useful if individual sheets become detached for any reason.
5. Use word processing application spell check and grammar check function to help editing your assignment.

Important Points:

1. It is strictly prohibited to use textboxes to add texts in the assignments, except for the compulsory information.
eg: Figures, tables of comparison etc. Adding text boxes in the body except for the before mentioned
compulsory information will result in rejection of your work.
2. Carefully check the hand in date and the instructions given in the assignment. Late submissions will not be
accepted.
3. Ensure that you give yourself enough time to complete the assignment by the due date.
4. Excuses of any nature will not be accepted for failure to hand in the work on time.
5. You must take responsibility for managing your own time effectively.
6. If you are unable to hand in your assignment on time and have valid reasons such as illness, you may apply (in
writing) for an extension.
7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
8. Non-submission of work without valid reasons will lead to an automatic RE FERRAL. You will then be asked to
complete an alternative assignment.
9. If you use other people’s work or ideas in your assignment, reference them properly using HARVARD
referencing system to avoid plagiarism. You have to provide both in-text citation and a reference list.
10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be reduced to A
REFERRAL or at worst you could be expelled from the course

Avinda Himesha WDD - COL/A-066773 P a g e 2 | 83

Student Declaration

I hereby, declare that I know what plagiarism entails, namely to use another’s work and to present it as my own
without attributing the sources in the correct way. I further understand what it means to copy another’s work.

1. I know that plagiarism is a punishable offence because it constitutes theft.

2. I understand the plagiarism and copying policy of the Edexcel UK.
3. I know what the consequences will be if I plagiaries or copy another’s work in any of the assignments for this
program.
4. I declare therefore that all work presented by me for every aspects of my program, will be my own, and where
I have made use of another’s work, I will attribute the source in the correct way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding agreement between
myself and Pearson, UK.
6. I understand that my assignment will not be considered as submitted if this document is not attached to the
attached.

[email protected] 28/11/2021

Student’s Signature: Date:

(Provide E-mail ID) (Provide Submission Date)

Avinda Himesha WDD - COL/A-066773 P a g e 3 | 83

Assignment Brief
Student Name /ID Number K.A.Avinda Himesha / COL/A-066773

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2018/2019

2020/21

Unit Tutor

Assignment Title Online Library Management System

Issue Date

Submission Date

IV Name & Date

Submission Format:

Part 1.
Report- Submit a professional report with approepriate report formattimg and guidelines followed. All the research
data should be referenced along with in-text citations using Hrvard referencing syste.

Part 2
A fully functional web solution

Unit Learning Outcomes:

LO1 Explain server technologies and management services associated with hosting and managing websites.

LO2 Categorise website technologies, tools and software used to develop websites.

LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website.

LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Avinda Himesha WDD - COL/A-066773 P a g e 4 | 83

 Assignment Brief and Guidance:

Avinda Himesha WDD - COL/A-066773 P a g e 5 | 83

 Assignment Brief
Scenario.
‘Apex Design Works’ is a leading web design and marketing company. They are focused on helping
businesses communicate more effectively and build their business through creative design. You work as
an apprentice web developer for Apex Web Design and marketing company. As part of your role, you
have been asked to create a Website for Lowa State University.
Lowa State University, Library is currently doing their work manually (Borrowing books, returning books or viewing
the available books). Online Library Management System is a best solution to overcome this problem. This system
would be used by members who may be students or professors of that University to check the availability of the
books and borrow the books., The librarian can update the member details and the book lending details.

The Online Library Management System will include the following information.
• The librarian, students and the professors can register and login to the system
• Any of the above users can update their profile details including the password
• The authorized users can reserve a book for 24hours
• The authorized users can check book availability
• The librarian can check the member status and update the lending details (If the book is for the lending)
• The system allows the Librarian to create the books catalog, add/delete books and maintain the books
catalog.
• The librarian can update the book return details
• The librarian can calculate the fine for the late returns if necessary
• The users can search the books according to the categories (Novels, Frictions, etc.)

Develop a web based solution for the above scenario and produce a report covering the following tasks.

Task 1 - Server technologies and management services associated with hosting and managing websites (LO1)

1.1 Explain and differentiate the communication protocols, server hardware, operating systems and web server
software with regards to designing, publishing and accessing the website given in the scenario.
1.2 Identifry and define the types of DNS and the uses of it, with clarifications on how domain names are
structured. Review the effect of search engines on website performance. Provide evidence-based support for
improving a site’s index value and rank through search engine optimization.
1.3 Identify and explain the common web development technologies and frameworks. Explain the tools and
techniques chosen to the web application and hence justify, by giving reasons, why a web application is
suitable for the given scenario.

Task 2 - Categories website technologies, tools and software used to develop websites (LO2)

2.1 Define the relationships between front-end and back-end website technologies and discuss how the front-end
and the back-end relate to presentation and application layers.
2.2 Critically compare the different between online website creation tools and custom-built sites
Considering thedFollowings: design flexibility, performance, functionality, User Experience (UX) and User

Avinda Himesha WDD - COL/A-066773 P a g e 6 | 83

 Interface (UI). Evaluate the tools and techniques available to design and develop a custom-built web
Applications.
.
Task 3 - Utilize website technologies, tools and techniques with good design principles to create a multipage
website (LO3)

3.1 Design a suitable web application solution for the given scenario using PHP, JS and MySQL (Screenshots of
important code lines with proper comments and user interfaces filled with sample data must be attached to
the documentation. Apply a database design for the proposed system and provide the well normalized
database design of the proposed system). Provide evidences of the design, multipage website supported with
fidelity wireframes and a full set of client and user requirements.
3.2 Compare and contrast the multipage website created to the design document. Use your design document
with appropriate principles, standards and guidelines to produce a branded, multipage website supported
with realistic content and Critically evaluate the web design ,development process against your design
document analyisng any technical challenges you faced during the development.
3.3 .
Note - Synthesize client and the server-side functionalities in the proposed design.

Task 4 - Create and use a Test Plan to review the performance and design of a multipage website (LO4)

4.1 Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and
development stages.
QA process is expected to discover design issues and development errors while testing a product’s user
interface (UI) and gauging the user experience (UX).
4.2 Create a suitable test plan and Critically evaluate the results of your Test Plan and include a review of the
overall success of your multipage website; use this evaluation to explain any areas of success and provide
justified recommendations for areas that require improvement.
4.3 Prepare a user documentation to properly guide the users of the implemented system.
Note: User documentation should be simple and understandable by anyone. Use screenshots and provide
stepwise guidance.

Avinda Himesha WDD - COL/A-066773 P a g e 7 | 83

Avinda Himesha WDD - COL/A-066773 P a g e 8 | 83
 Grading Rubric
Grading Criteria Achieved Feedback

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.

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.
M1 Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and
management.
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.
D1 Justify the tools and techniques chosen to realize a custom built
website.

LO2 Categories 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.
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).

Avinda Himesha WDD - COL/A-066773 P a g e 9 | 83

 M3 Evaluate a range of tools and techniques available to design and
develop a custom built website.

Avinda Himesha WDD - COL/A-066773 P a g e 10 | 83

 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
requirements.
P6 Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with
realistic content.
M4 Compare and contrast the multipage website created to the design
document.

D2 Critically evaluate the design and development process against your

design document and analyse any technical challenges.

LO4 Create and use a Test Plan to review the

performance and design of a multipage website

P7 Create a suitable Test Plan identifying key performance areas and

use it to review the functionality and performance of your website.
M5 Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
D3 Critically evaluate the results of your Test Plan and include a review of
the overall success of your multipage website; use this evaluation to
explain any areas of success and provide justified recommendations for
areas that require improvement.

Avinda Himesha WDD - COL/A-066773 P a g e 11 | 83

 Observation Sheet

Activity Activity Learning Outcome Feedback

No (Pass/ Redo)
1 Explain server technologies and LO1
management services associated with
hosting and managing websites.
2 categorize website technologies, tools LO2
and software used to develop
websites.
3 Utilize website technologies, tools and LO3
techniques with good design
principles to create a multipage
website.
4 Create and use a Test Plan to review LO4
the performance and design of a
multipage website.

Comments:

Assessor Name :…………………………………………….

Date :…………………………………………….
Assessor Signature :…………………………………………….

2019/20 BTEC Internal Verification of Assignment Brief

Template Issue Date: 29 July 2019
Owner: BTEC
Assessment DCL1
Public
(Unclassified)
Version 1.0

Avinda Himesha WDD - COL/A-066773 P a g e 12 | 83

Task 1

Communication Protocols
In the modern world, people use technology to communicate with others using various
devices in different languages including many ways and software. Without a certain set of
standards, it would be impossible to manage and protect the transferred data. So, Protocols
are a set of rules implemented in order to help the communication process. It is important to
use these protocols to maintain consistency and universality when transferring messages.
There are a lot of communication protocols implemented below are some of them explained
(w3schools.in, 2021)
1. Hypertext Transfer Protocol (HTTP)
It is the most popular communication protocol used when communicating via a
Network. It’s the foundation of data communication for the World Wide Web In
fact, you can probably see HTTP when you look at the address bar in your web
browser. Its main use is for distributing hypermedia documents in the application
layer. It’s mainly used to communicate between websites and servers. The default
port of HTTP is 80.
2. Hypertext Transfer Protocol Secure (HTTPS)
HTTPS is used with HTTP to provide the same services but with the addition of a
secure connection which is provided by SSL or TLS. You can observe HTTPS is
used in most websites nowadays especially in e-commerce websites where your card
details are required for payment purposes to maintain a secure connection.
3. Internet Protocol (IP)
It is a principal rule among communication protocols on the internet used for
addressing and routing data across the network. Data on the internet are divided into
small packets relevant packets have their dedicated IP information it helps routers to
find the specific destination to send those packets. The most commonly used
transport protocols are TCP/IP and UDP.
4. File Transfer Protocol (FTP)
It is the most commonly used communication protocol on the internet to transfer
files such as documents, images, videos, audio, etc. Users can log in to an FTP
server via an FTP client or from the command line interface and access the data of
the relevant web server. Users can modify, delete, change directories and add files
using FTP. The default port of FTP is 20/21.
5. Secured Shell (SSH)
SSH is used as the primary method to manage the network devices connected to a
network securely at the command level. It is an alternative to telnet which does not
support secure connections. The default port of SSH 22.
6. IP Security (IPSec)
IPSec is a group of protocols that is been used to ensure the security, integrity, and
confidentiality of the data by encrypting the connections between devices. It is used
to send data over a public network securely. It is often used in setting up VPNs. For
example, it is used in organizations to securely log in its employees to its system via
the public network.
Avinda Himesha WDD - COL/A-066773 P a g e 13 | 83
Before creating a website, you must fully understand the communication protocols and their
behaviors on the internet. You need HTTP or HTTPS and TCP/IP in order to create a website
and also you need FTP to transfer your files and SSH to manage and access them.

Server Hardware for Web Design

On the Hardware side, we need a computer known as the web server with certain
requirements to store the web server software and the website’s component files such as
HTML documents, images, CSS style sheets, java scripts, etc. It is connected to the internet
so that we can interchange physical data with other devices connected to the web. Some
devices used are mentioned below (Buskirk, 2021).
1. Computer
Obviously, you need access to a computer in order to build a website because all the
coding and editing are done using a computer. Normally it is required to have a
minimum of 2GB ram because any less than that will result in slow processing and
won’t be as quick as it's supposed. Also, you need all the peripherals such as a
mouse, keyboard, headset, etc.
2. Internet
It's basically impossible to build a website without a high-speed internet connection
because you can transfer data and files quickly without any interruptions. This
enables you to interact with your server to post updates and watch live updates
online to ensure that it is displayed properly.
3. Server
The server is a client computer that hosts your website data so that your website is
accessible to the outside world at any time. You need to find a suitable web hosting
company that will meet your needs and compare the prices and use them. You can
also set up a laptop or an old computer to act as a remote server but this is a very
complicated task and require high maintenance costs so it's best to purchase a web
server through a web hosting company.
4. External HDD or Cloud service
It is not an essential requirement but it's good to have a backup system to your web
server so that you can back up your data and files of your websites. New backups
can be made when you update or change your website contents and also it is useful
when you change the hosting company so that you can restore your old website
easily with the backup.
5. Mobile Device
Mobile devices could come in handy when you can remotely update small parts of
your website. It can be also used for testing purposes because you must create a
website that is mobile friendly so you can check the layout of your website using a
mobile device. Also, you can create content like images and videos for your website
to make it more attractive.
In this scenario, I used my personal computer (i5 7500) with 8GB of ram, a keyboard, a
mouse, and my internet connection to create this website. I also used this computer as my
server because this project is for educational purposes.
Avinda Himesha WDD - COL/A-066773 P a g e 14 | 83
Operating Software

The most commonly used operating software’s to create a website are Windows, Linux, Mac
OS, and Chrome OS. Every one of the above-mentioned OS has its distinct advantages and
disadvantages below are some of the main key points of these abovementioned OS. (Usability
Geek, 2021)
1. Windows
Microsoft Windows is the most popular Operating system in the world, according to
recent statistics 90% of the computers of the world run Windows as their operating
system. Windows is so user-friendly that everyone can easily identify its features
and adapt according to them. As for the developers, windows support more access
than for the usual regular users to manage software, test early release builds by
windows insider program, and navigate advanced options. Web design and
development is so easy in windows with the support of tools available for windows
that aren’t available in other operating systems. You can use VS code (Visual
Studio) for basic web development which is another product of Microsoft. Below are
some advantages and disadvantages of Windows OS when it comes to web
development;
• Most products/services are designed for this platform
• Built-in antivirus is robust and defensive
• Windows is cheaper than Mac but Linux is the cheapest
• Programmers can easily install and upgrade the software using the friendly
GUI
• Contains less amount of bloatware compare to Mac
• Tend to crash more quickly than other OS because of the too much
customizability
• Forced updates are the worst feature in Windows OS
• In comparison with other OS windows, has a slow rate of running scripts,
compiling codes, and handling complex tasks.

2. Linux
Linux is considered the most difficult to use Operating system because it is
functioned by commands that need to enter directly into the command line. It's not
easy as Windows to install and upgrade apps into the system too. However, despite
having difficulty learning the use of this OS it is arguably the most powerful and
customizable operating system available in today's market. It can be easily
customized to your specific requirements to conduct your development works. There
are a significant number of variations of Linux OS the most popular one is Ubuntu.
In fact, most servers are hosted in Linux OS. Below are some of the advantages and
disadvantages of using Linux in Web development.

Avinda Himesha WDD - COL/A-066773 P a g e 15 | 83

 • Open-Source Software (Free to use unlike Windows and Mac)
• Useful apps are pre-installed with less Bloatware
• Easy to install and less frequent updates than other OS
• Have a lot of variations of Linux to choose from
• Difficult to install and upgrade Apps
• Not very User-Friendly
• Limited technical support

Figure 1 - Differences between Windows and Linux Hosting

3. Mac OS
Mac OS is a very powerful operating system that comes for apple devices out of the
box. It may be the choice of web design enthusiasts because of its higher price. Mac
OS has been designed on prime of UNIX, which is excellent for web developers
because of its inbuilt terminal gives easy access to tools like git, virtualization
software and more. Unfortunately, Mac OS only supports apple devices officially so
it’s a huge downside because apple devices are expensive when compare to devices
manufactured by other companies. Below are some advantages and disadvantages of
using Mac OS in web development.
• Almost everything is visually well polished (User Friendly)
• Best integrated apps
• Easy to customize
• Easy to install and less frequent updates than other OS
• Expensive
• Various software apps aren’t free
4. Chrome OS (Chromium OS)
Chrome OS is arguably the simplest and straightforward operating system available
today. It is created by Google and it is very similar to the famous Chrome browser
but turned into an operating system. Unlike the above-mentioned operating

Avinda Himesha WDD - COL/A-066773 P a g e 16 | 83

 softwares, it doesn’t run applications and doesn’t have a web browser in fact the
whole operating system is a browser. All of the web development works can be done
through web apps that operate through the browser itself. It can be used to code
directly in raw HTML and CSS it doesn’t require code editors or interactive
development environments. It is not popular as the other operating softwares but it
can be useful in web development.

I am using Microsoft Windows for the basic coding of this website. I like the friendly user
experience of Windows it's very easy to use and supports almost every tool and software you
needed to design a website. But no matter what kind of development you do, you should
always choose your OS based on how much it will benefit you and not whatever is most
convenient.

Web Server Softwares

A web server is a computer that runs websites its main use is for storing, processing, and
delivering web pages all over the internet to its users. Web Servers can be also called as an
HTTP Server because it accepts user requests via HTTP, HTTPS, and Internet protocols. It
can understand the URLs and can be accessed by the domain names of the websites it stores.
When you register a web address (Domain Name) a URL is assigned to access the specific
web server through the Internet (URL is a sequence of four digits around 0 and 255 divided
by 4 intervals. Web Servers need software to run their operations, There are many types of
Web Servers Softwares in today's market below are the most popular Web servers explained
briefly (SADOS, 2021) ;
1. WP Farm
WP farm is the newest and most advanced web server on the current market. They
offer a range of readymade templates through Elementor page builder, and AMP
installation for any WordPress website with 24/7 Support. But the main downside of
this server is it is only supported for WordPress websites which is a platform that
allows you to create websites without coding.
2. Apache Server
This is the most popular free source web server developed by Apache Software
Foundation. Ti supports almost all of the software and hardware such as Linux,
UNIX, Windows, FreeBSD, Mac OS X, and much more. It is more popular because
it's an open-source free-to-download webserver software and developers can change
their code to optimize, fix errors and even add new features without any restriction.
Apache server can be for both small websites and large-scale websites with
thousands of pages with support for both static and dynamic content.

3. Internet Information Services (IIS)

This is a high-performance server developed by Microsoft. The best way to utilize
its performance is to use it on a Windows web server so that you can get the most
Avinda Himesha WDD - COL/A-066773 P a g e 17 | 83
 out of its GUI that allows the client to manage their websites and their users.
4. Nginx
It is pronounced as Engine X which was developed by Nginx is an open-source web
server that uses HTTP web services to its clients and is much more similar to
Apache server. Its rise in popularity comes from its major client such as Pinterest,
Netflix, CloudFlare, etc. Because of its stability, it is used to provides services such
as cache server, mail proxy server, and Load Balancing. As apache, it supports all of
the web servers such as Linux, Mac OS, AIX, and Solaris.
5. Google Webserver
GWS is a web server software developed and owned by Google. Google uses it as
its web infrastructure, which implies that they use it as their central ecosystem for
web hosting via Google cloud services. According to research, it is the 4th most
popular web server powering 13% of active websites across the internet. It is based
on Linux OS and custom-made by Google to meet their requirements. It is said that
Google built this server from the bottom up and did not follow its making based on
other servers such as open-source software such as Apache Server.
6. LightSpeed Server
It is another popular web server developed by LightSpeed Technologies in 2003 and
make its way to the 16th most popular web server in 2008. It is the same as Apache
where its configurations are identical but the Lightspeed server runs at an extremely
high speed. This enables users to maintain thousands of operations at the same time
whilst using minimum memory and CPU.

Web Publishing
In conclusion, Simply Web publishing is posting content on the internet so that other people
can access that information easily. It mainly includes;
• Uploading files to the web server via FTP
• Updating web pages (maintenance)
• Posting content to these web pages like text, videos, digital images, artwork, and other
forms of media can be added as blogs, personal and business websites, e-commerce
websites, etc.

In order to publish your site, you need the following things;

• Web development software
• Internet Connection
• Web Server

Avinda Himesha WDD - COL/A-066773 P a g e 18 | 83

 Figure 2 - Web Publishing Process

What is DNS?
DNS stands for Domain Name System and is referred to as the phonebook of the internet. We
access information on the internet by domains names like esoft.lk, cnn.com, etc. but web
browsers interact through IP address (numbers) so in situations like this DNS translates
domain names to IP addresses so that the browsers can look up the content you want and load
them. All the IP addresses and domain names are stored in DNS servers so that DNS can
easily access them. Every device connected to the internet has its unique IP address so that
other devices can easily find them. DNS Servers eliminate the need of memorizing IP
addresses such as 192.168.12.1 from humans (Cloudflare, 2021).

Domain Name Structure

Every Domain Name can be categorized into three different parts;
1. Host Name – indicated as WWW (World Wide Web)
2. Website name
3. TLD (like .com or .gov)
Each part is separated by a dot creating a fully qualified domain name such as
www.example.com, You can add a subdomain to your main domain by placing the sub name
before the main domain of your website which is also separated by a dot
(www.test.example.com)
But URL is not the same as Domain name because URLs contain the full address of the
website with the domain name included. URL includes the internet protocol that is been used
by the website usually HTTP or HTTPS are the two Internet protocols used.

Avinda Himesha WDD - COL/A-066773 P a g e 19 | 83

 Figure 3 - Domain Name Structure

Domain Name Types

1. Top-Level Domains (TLDs)
Every website’s URLs can be categorized into different parts, TLDs are found at the
end of your domain mane and are also known as domain extensions. TLD is the
most important part of your domain because you cant register a domain name
without a suitable TLD. There are many TDLs in today's market but the most
common one is .com. As the internet expands so does the need for unique domain
names so that’s the reason ICAN (Internet Corporation for Assigned Names and
Numbers – they manage all domains) introduces a vast variety of TLDs. The most
common TLDs are mentioned below; .com, .net, .edu, .blog, .io, .org, etc.
2. Country Code Superior Domains (ccTLD)
These types of domains are established to depict their certain country or
geographical location. These normally consist of two letters such as .uk represents
the United Kingdom, .au Australia, .ca Canada, .us USA, etc. These types of TDLs
were restricted to their country at first but later those countries allow outsiders to
purchase these ccTLD. You can use these TLDs for your website if your desired
.com TLD was already taken.
3. Generic Top-Level Domain (gTLD)
We already know about these types of domains, not by the name itself but by their
popularity some of them are .com, .edu, .info, .org, and .net. At first, these were
categorized under ccTLD because there weren’t many TLDs at the beginning
however we now have a large variety of TLDs to choose from.
These are of 4 types;
• Generic (.com, .net, .org, .info), domains which will be used for general
functions.
• Generic restricted (.pro, .biz, .name) domains which will only be used for
client’s specific functions.

Avinda Himesha WDD - COL/A-066773 P a g e 20 | 83

 • Sponsored (.edu, .gov, .int, .mil, .aero, .cat, .asia, .mobi, .coop, .travel, .tel,
.jobs) domains which will be used by businesses corresponds to their business
needs.
• Infrastructure (.arpa) was among the first commanding domains.
4. Second-Level Domain (SLD)
In the Domain name hierarchy, SLDs are what immediately precedes after TLDs for
example take esoft.lk, where esoft is the second level domain followed by the .lk
top-level domain. Oftenly SLDs are assigned with correspondence of their business
names or vendor name when registering a domain name through a registrar.
5. Third-Level Domain
This is the last part of the domain name. In www.example.com the TLD is .com and
the SLD is example, now we are going to talk about the www which is referred to
as the Third-Level Domain of a domain name. The third-level domain usually
comes at the first of every domain name before the SLD. By default, when you
purchase a domain name your third-level domain will be www. That doesn’t always
work for large companies who need more web pages and they usually refer third-
level domains to a particular client inside the business, however. So you may
sometimes see www1 or even www2 before the SLD in a domain name
(DreamHost, 2021).

DNS Server Types

There are 4 main DNS Servers involved in loading a page;
1. DNS Recursor
A Recursive Resolver (also referred to as a DNS recursor) is the initial step in a
DNS request. It acts as the middleman between the client machine and the DNS
Server basically it acts as a librarian who is asked a specific book from somewhere
in the library. After receiving a DNS request from a client, The recursor either sends
the request to the root nameserver or responds to the query with cached data. At the
same time, it sends multiple requests to the TLD server and the Authoritative
nameserver. After receiving a response from the authoritative nameserver containing
the requested IP address, the Recursor then sends the requested web page to the
client's computer. At the same time, the Recursive Resolver also cache (store) the
requested information from the Authoritative nameserver. So, when a client requests
the same IP address of a domain the Recursor can minimize the previous process by
delivering the client's requirements instead of contacting the name servers.
2. Root Nameserver
The Root Nameserver is the first step to translate the domain names sent by the
client into IP addresses. There are 13 main Root Nameservers types which are
known to every Recursive Resolver. What happens here is, When the Recursor
hands over the client's query which includes the domain name to the root nameserver
it redirects the Recursive Resolver to a TLD nameserver based on the domain
Avinda Himesha WDD - COL/A-066773 P a g e 21 | 83
 extension(.com, .net, .org, etc.). The Root Nameservers are managed by a nonprofit
organization called the Internet Corporation for Assigned Names and Numbers
(ICANN).
3. TLD Nameserver
Top-Level Domain Servers (TLD) acts as the specific rack of the book in a library
that you are looking for. Such that a TLD nameserver maintains information for all
the domain names that share a common domain extension, such as .com, .net, or
whatever comes after the last dot in a URL (example.com), For an example take
.com TLD name server; it contains all the information regarding every website that
ends with.com (website.com, example.com, cnn.com, etc.), So after Root
Nameserver directs the Recursive Resolver to the specific TLD nameserver it sends
a query which will result in finding the respective Authoritative Nameserver. TLD
nameservers are managed by the Internet Assigned Numbers Authority (IANA),
which is also a branch of ICANN.

4. Authoritative nameserver
Authoritative nameserver is the last stop of finding the IP address of the relevant
domain name. After receiving the response of the TLD Nameserver it will direct the
Recursive Resolver to the relevant Authoritative nameserver. This server contains
the exact information of a specific domain name and will provide the Recursor with
the IP address of that domain name found in the DNS A record, or if the domain
name has a CNAME record (alias to the relevant domain name) it will provide the
Recursive Resolver with an alias domain, at which point the Recursor will have to
perform a whole new DNS lookup process from the start-up to obtain a record from
an authoritative nameserver .

Domain Name Lookup Process

Normally there are 8 steps in the DNS Lookup process but when the DNS information is
cached the Recursor skips relevant steps which makes it quicker than the standard procedure.
1. A web client types a domain name (example.com) in the web browser and the query
proceeds into the internet and is received by a DNS recursive resolver.
2. Then the Resolver queries a DNS Root Nameserver.
3. The Root Nameserver responds with the address of the relevant TLD server
corresponding to the information of its domain. In this situation, the request is pointed
towards the .com TLD Server.
4. Then the resolver makes a request to the .com TLD
5. The TLD server then responds with the IP address of the domain’s nameserver,
example.com
6. Lastly, the recursive resolver sends a query to the domain’s nameserver
7. The IP address for example.com is then returned to the resolver from the nameserver
8. Then the DNS resolver responds to the web browser with the IP address of the
domain requested initially by the client.

Avinda Himesha WDD - COL/A-066773 P a g e 22 | 83

After the requested IP address makes its way to the browser, Now the Browser can request
the web page by making an HTTP request to the IP address. Then the server that belongs to
the relevant IP returns the webpage to be rendered in the browser. This is the whole DNS
Lookup process results when we search for a relevant domain name in our web browser
(CloudFlare, 2021).

Figure 4 - DNS Lookup Process

We need to find a suitable domain for our website before designing it. When choosing a
domain you want to think about what will work best for your brand and your audience and
pick something memorable. After all, you want people to remember your website, so they
come back other times.

Search Engine
A search engine is a service that allows its users to search for information via the internet
with keywords or phrases. When a user enters a certain keyword or a key phrase into a search
engine it gives the list of web results relevant to the entered keyword in the form of websites,
images, videos, audios, etc. The most widely used search engine is Google and there are other
decent options you might want to consider like DuckDuckGo when it comes to privacy and
Microsoft uses Bing as their default search engine, Yahoo also has a small market share when
it comes to search engines.
The higher the website is ranked in the Search Engine Results Page (SERP) it comes up at the

Avinda Himesha WDD - COL/A-066773 P a g e 23 | 83

top of the SERP. A method to get a website or some of its pages a higher rank at the SERP is
developed in the last few decades it is known as SEO - Search Engine Optimization
(Techopedia, 2021).

What is SEO?
Search engine optimization (SEO) means the process of improving the quality and quantity of
your website traffic by increasing the visibility when people search keywords related to your
website through search engines such as Google, Bing, Yahoo, etc. More visibility the better
because people tend to click the results at the top of their search results.
Early search engines results were based majorly on page content, but as websites learned to
index their site in the system through advanced SEO practices, algorithms have also become
much more complex and the search results can literally be based on hundreds of variables.
Nowadays many search engines use their exclusive algorithms that consist of many complex
factors such as relevancy, accessibility, usability, page speed, quality content, and user intent
to sort the pages in a certain order.
When a user enters a search term the search engine search engines like Google, Bing looks
for website page titles, contents, and keywords using bots called spider or web crawlers to
access information and to put them to an index Next, algorithms analyze pages within the
index, taking several ranking factors or signals into account, to check the order of the pages
are to appear within the searched results for a given question (MTU, 2021).
Below are some factors that determine your SEO score
1. Website Load Speed – Recent statistics show that web surfers have a higher tendency
of abandoning a website site that hasn’t loaded for three seconds. In Apr 2010,
Google started victimization page speed as a ranking issue, which implicates that the
quicker the page speed higher the SEO rankings.
2. Mobile-Friendly Website - Google says that within the USA 94% of people search the
web through their smartphone. This suggests that unless your website is mobile-
friendly, clients have a tendency of abandoning it.
3. Good Hosting Service – Page speed is directly proportional to the quality of the web
hosting company that you’ve chosen to host your website. So, finding a good fast web
hosting service will affect your SEO rankings.
4. Placing Header Tags – As per researches people observe your website at a glance
using an F-shaped pattern so you must organize your website content in an
exceedingly method that's more straightforward to scan and follow and to be attractive
so that the client will most likely visit your website again, this may result in higher
SEO ranks.
5. Image Optimization - Evidence shows that a well-placed image will increase SEO
ranking on a website. When you put your keywords to images using alt tags it's most
likely to be detected by a search engine.

Understanding what SEO means is the first step of increasing your website’s rank. We can
use these techniques to improve the SEO score;

Avinda Himesha WDD - COL/A-066773 P a g e 24 | 83

 1. Keywords
Try to determine and target a selected keyword that is appropriate for your content
on each page of your website. Thinking on however the reader will search for a
specific page on your website can assist you to find the correct keywords and try
applying them. You must use bold, italics, heading tags (like H1), and other
emphasis tags to focus these keyword phrases but don’t overdo it.
2. Updating your Content Frequently
Search engines will feel strongly about your content so must you. Regularly updated
content is identified as the best indicator of a site’s relevancy so, try to update your
content regularly so that the reader will enjoy visiting your website for new
information.
3. Metadata
Metadata is placed within the area between <head> tags of your pages, it can also be
used to store information regarding the relevant page. There are three types of
Metadata.
• Title Metadata - Title metadata is in charge of the page titles that are displayed
at the top of a browser and as the headline within search engine results. It is
considered the most important metadata on your page.
• Description Metadata - Description metadata is the description of the website
that is used by the web browser in your page search return. Search engines do
not always use the provided meta description, but it's necessary to supply them
with a choice to use it
• Keyword Metadata – As the name suggests it is your keywords relevant to
your website. It is rarely used to increase your website's rank in search engine
results but it doesn’t hurt to use what you already know so, include a small
variety of phrases consisting of 1-7 words as your Keyword Metadata.
4. Have a link-worthy site
A website consists of fresh content, reliable and unbiased content will always attract
the existing as well as new users and is most likely to attract links (redirections or
mentions) from other websites too, This will affect your SEO ranking to climb very
quickly.
5. Use alt tags
Always try to describe your media content such as images and videos using alt tags
(alternative text descriptions), Because they will allow the search engines to locate
your page more consistently than normal.

As mentioned above SEO is a main part of getting traffic to your website so you must
improve your SEO score in every possible way.

Avinda Himesha WDD - COL/A-066773 P a g e 25 | 83

Web Development Technologies and Frameworks
There are lots of web development frameworks available in today's market, it can be
challenging to find the right one that suits your specific requirements. It is best to select the
framework that suits the goals of your website this would come in handy in future
development. You should plan to develop an attractive web application with the latest tools
and technology available to remain pertinent in the current market. Below are some of the
best web development technologies available right now (Johns, 2021);
1. Angular
Angular is an open-source web development framework developed by Google in
2016 after the failure of AnjularJS with end-to-end application development
functionality. Angular uses TypeScript as its main programming language, unlike its
previous versions which used Javascript. You can easily develop front-end web
applications only using Angular with PrimeNG (Open-source Angular Library).
Some of the features of Angular are two-way data binding, Virtual DOM, dirty
checking, etc. It is more popular because it allows web developers to create multiple
modules for a single web application. Then these modules can act independently, by
this web developers can create a singular dynamic application for end-users for both
desktop and mobile devices. Angular helps developers to build lighter and faster
apps by deleting unnecessary codes. Since it is maintained by Google you are
privileged with various resources and community support and guidance in
developing applications.

Figure 5 - Angular

2. React.JS
React JS has gained popularity because of its Javascript-based client-side
framework. Its features enable web developers and enterprises to chose ReacT.JS
over other Frameworks. Some features of React are it implements the view layer
which enables you to use it for end-to-end application development, React.JS
supports both desktop and mobile interfaces, It offers top-notch server-side
rendering exceptional SEO support. React.JS is one of the best frameworks in the
current market which support one-way data binding and declarative programming.
Currently, React.JS features are been are being tested with 2.7 billion Facebook
users to keep up with the industry trends.

Avinda Himesha WDD - COL/A-066773 P a g e 26 | 83

 Figure 6 - React.JS

3. Vue.JS
Vue.JS was in 2014 with the combination of features of both AngularJS and
React.js. It is a very popular framework with great community support in the current
market. It supports end-to-end application development same as both Angular and
React.JS in addition to external data flow and state management support. It is based
on Javascript frontend development with premium quality documentation. It is
considered the best web development framework available for developing apps for
mobile devices. Some of its features are two-way data binding, virtual DOM, and
event sourcing similar to Angular.

Figure 7 - Vue.JS

4. Spring
Spring was first developed in 2002 but it has outcome several development stages
and now is one of the best options for a Java-based framework. When you plan to
use a java framework with cloud computing Spring makes it impossible to go for
other choices than Spring itself. Some features are mentioned below; It is an
enterprise-grade web development framework with a server-side rendering feature,
Dependency Injection, Annotation, supports Cloud Native development, Batch
processing, and Event-driven application development. Spring is specially designed
for large-scale web application development including higher security.

Figure 8 – Spring

Avinda Himesha WDD - COL/A-066773 P a g e 27 | 83

 5. Flask
Flask is developed by Armin Ronacher in 2010 as a minimalist web development
framework. It is based on the python programming language, As python is one of
the best programming languages the popularity of Flask is also rapidly increasing in
the current market. Flask is not an end-to-end web development framework as others
mentioned above. Flask uses Jinja2 as its template engine, Most importantly its
server-side rendered and a micro-web framework. Flask is most suitable to develop
basic web applications with minimum features.

Figure 9 - Flask

6. Ruby On Rails
It is a modern web development framework based on the Ruby programming
language which is developed by David Heinemeier Hansson. It supports the MVC
architecture and stress Convention over configuration. You can use this platform to
create web applications easily with features like ORM, Middleware, Security,
Coaching, etc. It may be the first web development framework that considerably
focuses on the user experiences of the developers. This is the best framework to use
if you're searching for a high-speed development process with having experience in
the Ruby programming language.

Figure 10 - Ruby on Rails

Tools techniques used in designing the website

Web Browsers
A web browser is a software that enables you to search for anything on the internet such as
text, images, and videos from anywhere around the world. A web browser is a very powerful
tool that retrieves data and information or queries and demonstrates to us in a way that we
can understand using Hypertext Transfer Protocol. The most popular web browsers are;
• Chrome - currently the most common browser introduced to you by Google
• Mozilla Firefox – open-source developed by Mozilla
• Safari – For apple devices developed by apple

Avinda Himesha WDD - COL/A-066773 P a g e 28 | 83

 • Microsoft edge – Developed by Microsoft based on Chromium
• Brave – Based on chromium developed for privacy
I have used Chrome, Mozilla, Mircosoft Edge, Brave, and Vivaldi browsers but I personally
prefer Google Chrome because it's easy to sync with my default browser in my mobile phone
(Chrome) and access my data anywhere. It's also a very user-friendly and most commonly
used browser. But the main downside of the Chrome browser is it's too resource-heavy.

HTML & CSS

Hypertext Markup Language is a programming language that is used to create (structure) a
web page and its content. A Markup Language is a way that computers communicate with
each other in order to control how text is processed and presented to humans. If you want to
understand how HTML operates, you need to understand how CSS is handled. CSS stands for
Cascading Style Sheets and it explains how HTML components are to be presented on the
screen.
I have used both HTML and CSS to create the Library Management System website.

Programming Languages
Programming languages enable us to give commands to the computer in a language that they
could understand. There are various types of programming languages used today with the
development of technology. Below are some examples of the programming languages used in
current market;
• JavaScript - used by all web browsers, Meteor, and lots of other frameworks
• Coffee script - is a kind of “dialect” of JavaScript. It is viewed as simpler and easier
on your eyes as a developer but it complies (converts) back into JavaScript
• Python -used in frameworks like Flask, Django and used in a lot of mathematical
calculations
• Ruby - used by the Ruby on Rails framework
• PHP - used by WordPress
• Go - newer language, built for speed.
• Objective-C - the programming language behind iOS (your iPhone), led by Apple
• Swift - Apple’s newest programming language
• Java - Used by Android (Google) and a lot of desktop applications.

Libraries
Libraries are set of codes written by someone else (pre-made templates) which can be used in
your work to make it easy. Their sole purpose is to help and solve your problems in simpler
ways. Below are the most commonly used libraries used today (Wozniewicz, 2019);
• Bootstrap
• jQuery
• SASS
• React
• Redux

Avinda Himesha WDD - COL/A-066773 P a g e 29 | 83

Databases
Databases are a way of organizing structured data or information and are stored in a
computer. Typically Databases are by a Database Management system (DBMS). Databases
are consist of series of tables in a way that the processing and querying made efficient. Most
of the web services are provided by web database applications so databases are an essential
part of making certain types of websites such as online shopping, forums, bulletin boards,
corporate websites, and sports and news portals, Management systems, etc. Below are some
of the most popular DBMS (Williams and Lane, 2021);
• MySQL
• MongoDB
• Radis
• PostgreSQL
• Oracle.
• SQL Server

When concluding this scenario, A web application is most the suitable option because of the
accessibility of creating a website in these kinds of situations. The main users of this website
are the Students, Professors, and the Librarian, a web application will ease their steps to
borrow a book than the traditional method. For example, let us compare the time that will
take a student to borrow a book from a library; you have to write your name and all the
details of the book when borrowing a book so its very time consuming so a web application is
definitely suitable and these users can use the web application easily. Another reason to chose
a web application is centralized data that mean all user's data and pieces of information about
all the books in the library are more securely stored in the server so, it's easy to backup and
keeps track of the past information too. Also, users don’t need to worry about their passwords
or personal information falling into wrong hands because that information can be only
accessed by an authorized person so, the data is safe rather than documenting them as before.

Avinda Himesha WDD - COL/A-066773 P a g e 30 | 83

Task 02

Front-end and Back-end Website Technologies

Frontend and Backend development is the most fundamental parts when it comes to software
engineering that affects the web development process. Think of it as two sides of a coin that
are co-dependent on each other. Frontend development handles what the users see and
interact within a web application while Backend development is the part that we can't see but
handles all the work.

What is Front-End?
As mentioned above Frontend development is the section where the user (client) interacts
within a website. It basically consists of all the information and the details that the users will
see and communicate with such as buttons, menus, pages, links, graphics, and more. So better
frontend development greater the user attractions in your website which will result in more
traffic to your website. It is also known as client-side because all the processes which are
done within the frontend development belong to the clients mainly the web browser.
The main technologies used for Frontend web development are Hypertext Markup Language
(HTML), Cascading Style Sheets (CSS), and (JavaScript) with the help of frameworks such
as JQuery, Angular, ReactJS, etc.
The people who deal with Front-end web development are Web Designer, User interface (UI)
designers, User experience (UX) designers, and Front-end developers.
A front-end developer is capable of creating a static website without back-end development,
which is more common for business websites that don’t require a database (Khillar, 2018).

What is Back-End?

Backend development is also known as server-side development because it is the part of a

website that the user cannot see or interact with but that supports the website's functioning.
Unlike the frontend, the backend is a server-side application that performs all of the website's
operations while communicating with the frontend. This is where things like developing
libraries, coding, and writing APIs are handled. A website's presentation layer cannot work
without backend development. In reality, they help the presentation and business layers
communicate with one another.
Java, Python, PHP, Ruby, NodeJs, and more programming languages are used by back-end
developers. They write code to ensure that everything in the front-end works properly.
Mainly Programmers and Developers handle the back-end development of a website. A back-
end developer can create dynamic sites which change constantly and have updates in real-
time, for example, such as Facebook, Google, Amazon, etc (Khillar, 2018).

Avinda Himesha WDD - COL/A-066773 P a g e 31 | 83

Differences between Front-end and Back-end Development

The Front-end development of a website involves the structure, navigation menus, texts,
images, videos, and other components which users see and interact with, including the
graphical user interface (GUI) and command line. On the other side, the backend is the part
of the website which users cannot see or interact with. It is more about how everything
operates.
Regardless of their differences, Front-End and Back-End Web Development are two sides of
a coin Both are equally important, and a website can only function effectively when they
work together.

Figure 11 - Differences between Front-end and Back-end

Figure 12 - Front-End & Back_End Developmet

Front-end and the back-end relate to Presentation and Application layers

Accepting user inputs or requests and displaying data in a user-friendly format are the
responsibilities of the Presentation layer. It accepts inputs and sends them to the application
layer as inputs or requests. When a user submits data through one or more channels, such as
traditional applications, websites, portals, mobile device webpages, and apps, the presentation
layer is used. However, the presentation layer, which is developed with HTML, CSS, and

Avinda Himesha WDD - COL/A-066773 P a g e 32 | 83

JavaScript, is delivered to a computer device via a web browser or a web-based application.
These include React, Angular, Ember, Aurora, and more frameworks. The presentation layer
connects through Application Programming Interface (API).
The business layer is also referred to as the application layer. This is where the logic controls
and functionality for processing data from the presentation layer and database layer can be
found. It serves as a link between the presentation layer and the database layer. The business
logic that underpins the application's main operations is also developed in a programming
language such as Java. Depending on how much processing power the program requires, the
fundamental application layer can be hosted on cloud-distributed servers or a dedicated in-
house server.

The relationship between the front end and the presentation layer is the most important,
View elements and controllers, which process commands to and from the user interface, are
both found at the presentation layer. The web user's contact with the product and its
appearance is controlled by the presentation code. To change the presentation layer's
elements, we use HTML, CSS, and JavaScript files. In essence, the presentation layer is
where HTML, CSS, and JavaScript are customized. So, front-end development creates a
presentation layer.
Backend development, on the other hand, is primarily responsible for the relationship
between the back end and the application layer. The backbone of back-end development is
the application layer. In addition, the application layer is the most crucial component of
backend development; if there are any faults or problems, backend development will fail. As
a result, the application layer is more critical in this case.

Website Creation Tools

The popularity of website-building tools can be attributed to a number of factors. Even if you
don't know how to code, you can use these tools to create a website. Website hosting firms
typically provide these as proprietary tools. These tools include an editor, a number of
themes, and the ability to drag and drop various elements such as photographs, text, headers,
and other elements to create a website. Using website builder tools, you don't need any
special skills to create a website. While ready-made templates are simple and quick to use
and include built-in features that allow for some modification, these sites quickly become
hefty and slow to load. Furthermore, because these tools are DIY, they do not provide support
for maintaining your website. Some examples of Website creations tools are WordPress,
Wix, Squarespace, etc.

Custom Built Websites

Your website reflects the identity of your company. As a result, it's critical that it stands out
and is unique. A custom-created site would be excellent for your business if you have the
funds and time. Building a site from the ground up necessitated hiring the proper team that
took the time to learn about your organization. In the long term, such sites are more cost-
Avinda Himesha WDD - COL/A-066773 P a g e 33 | 83
effective because they can be quickly adjusted to adapt to your company's growth (M, 2021).

Differences between Custom Built Websites & Online Website Creation Tools

1. Design Flexibility
Custom websites are created with your aims, demands, and interests in mind. They are
created offline using codes and then published online. To boost efficacy, issues such
as user interface and user experience are thoroughly examined while developing the
website. Additionally, your company can be distinguished from the competition by
being distinct and unique. It does not have any limitations in designing the website
because it is created from scratch according to the user requirement and also very
flexible in changing to the way we want.

Online website construction tools, on the other hand, are limited in terms of themes
and layout. Using them could result in a website that looks similar to one of your
competitors. Although you can customize templates to a substantial extent, especially
the more expensive ones, you are mostly limited to the template's limitations for
visual design and navigation. Simple design constraints, such as a lack of symbol
options, or more substantial ones, such as the inability to use a feature the way you
want it to work, are examples.

2. Performance
Once a client arrives on your website, you must keep him there. Page speed is
significant in this regard. In addition, Google takes your page speed into account
when determining your ranking. Custom websites provide improved Page speed in
addition to offering relevant content through excellent SEO tactics. Through coding,
website designers support the reduction of loading time. For the optimum loading
speed, they address specifics such as JavaScript and CSS (Cascading Style Sheets),
browser caching, CDNs (Content Delivery Networks), content compression, and so
on.

You won't be able to handle these matters in detail if you build with online tools.
Your website's loading speed may be slowed if you use builders.

3. Functionality
The major goal of taking a business online is to increase its visibility among the
general public. SEO (Search Engine Optimization) improves your page's ranking on
Google and other search engines for this aim. Higher rankings (or listings) in search
results result in more visitors to your website. Website designers employ planning,
keyword research, sitemap creation, and a range of other tools to optimize your
website.

Online website builders, on the other hand, offer limited SEO features, which may
deprive you of these advantages. Because website templates aren't built with search
Avinda Himesha WDD - COL/A-066773 P a g e 34 | 83
 engines in mind, they end up near the bottom of search results. A big issue with
website templates is the lack of support and browser compatibility.

If you're using a template site, you might have to start over if you make significant
modifications. A Custom site makes it much easier to add new features.
4. User Experience (UX)
This area of web design uses logic and critical analysis to comprehend and plan for a
user's interaction with products, systems, and services. Usability, design, navigation,
and impression are all factors to consider. Simply, it all comes down to having a
fantastic web design. UX design is similar to a house blueprint in that it envisions
how people will enter and exit the building, as well as move from one room to the
next. You can customize UX the way you want in custom-built sites unless adhering
to the ready-made templates with minimal customization in Online Website Creation
Tools.

5. User Interface (UI)

It's all the simple details when a user and a computer program interacts, in this case,
your website, come together. The user interface is a set of commands or menus that
allow a user to interact with a software. The UI design of your site influences how
simple and straightforward it is for a user to accomplish their goals. The furnishings,
paint, and small elements that evoke the feel of a home are analogous to UI design.
Custom-built websites provide more flexible UI options when compared to online
website creations tools because of the lack of control over editing.

6. Cost
An advantage of utilizing a website template is that it is less expensive, so even if you
have a limited budget, you can still obtain one. Thanks to website templates, you no
longer need to be a website developer with huge quotations to create a website. Even
if you don't know HTML or CSS, you can make a website template.

7. Easy to Launch
In Template sites, This is due to the fact that much of the coding has already been
completed. If the content is almost ready to go (which is often not the case — and is
sometimes a substantial obstacle to having a site published), and your developer's
timetable is clear, a template site can usually be launched in a matter of weeks. A
custom site will take substantially longer depending on the complexity of what you
desire.

8. Security
Template websites are extremely appealing to people who enjoy writing malicious
code since they offer the ability to hack several sites at once. In an attempt to improve
WordPress security, in particular, developers will sometimes customize a template
site using plug-ins (a plug-in is a piece of code that adds a specific functionality), but
Avinda Himesha WDD - COL/A-066773 P a g e 35 | 83
 unless your developer truly understands what he or she is doing, this can actually
make the problem worse. Furthermore, if you use a template that isn't updated
regularly to stay up with WordPress, your site will be more exposed to hackers.

Tools and Techniques to design Custom-built Web Applications

Because they help you produce a webpage, gather analytics, and find layouts and designs,
web development tools are vital to modify and incorporate in development environments.
Web development is all about progressing and improving your existing level of expertise.
Furthermore, it does not necessitate a large sum of money, vast resources, or the expectation
of large sums of money. Only your improved ultimate website performance is factored into
development tools (Craig, 2021).

1. Dreamweaver
Adobe Dreamweaver is a professional web development program available for both
Mac and Windows platforms. Syntax highlighting and highly sophisticated Code
Hinting, a built-in FTP client, project management and workflow features that make
teamwork simple, and Live View – which displays you a sample of your source code
are just a few of the features and options available in this website design tool.
Dreamweaver interfaces tightly with other popular Adobe applications, like
Photoshop, allowing you to share Smart Objects for quick and easy graphics
component update and modification.
Pros
• It highlights your secret writing so that it can be immediately scanned.
• It enables newcomers to comprehend the value of hidden writing for a website.
• Code suggestions are sent to users.
• A data processing interface is all it takes to create content variations.
• You'll be able to notice and replace items all across your newly produced website.

Cons
• Adobe Dreamweaver is not a browser-based application.
• Learning how to use the UI takes time.
• What you see isn't always what you get.
• Your pre-programmed secret writing options aren't very specific.
• Global styling will be a major pain in the neck.

2. Notepad ++
Notepad++ is an excellent text editor with syntax highlighting, plugin management,
and a long-range of other useful features. GitHub, a key distribution partner, can
nevertheless support it, despite the fact that it is only available for Windows.

Notepad++ also supports 27 different programming languages. You may easily select

Avinda Himesha WDD - COL/A-066773 P a g e 36 | 83

 the language you require by going to the Binary Translations page. You can also use
User Language Define System to assist you in defining the meaning of keywords or
regular expressions. Furthermore, if you are proficient in coding languages such as
C++, Batch, and HTML, Notepad++ is an excellent choice.

Pros
• Notepad is a lightweight writing software tool that is exceedingly simple to use
• In a single window, Notepad provides a variety of text and program authoring
capabilities
• With notepad++, you'll get a long list of plug-ins
• Notepad++ is a tool that adds to the syntax lightening of programming languages
Cons
• Notepad++ isn't a proper IDE because it lacks a computer program for writing
• Notepad++ features out-of-date themes or computer programs, making it tedious to
use
• There is no such thing as a session backup in notepad++

3. Github
Github is an example of modern age web development. This web platform not only
allows you to manage web applications by coordinating tools and usability, but it also
allows you to deploy regular teams and campaigns to complete the same applications
or projects. GitHub gives you access to a branch-based workflow that allows you to
experiment with taking on new jobs and managing your current workflow.
• It allows you to make modifications and reviews without affecting the other branches
involved.
• It has a simple documentation approach that frequently goes hand in hand with good
coding.
• It can change the content and layout of pages remotely through the internet or locally
on your computer.

4. VironIT
VironIT provides you with a selection of cutting-edge web development tools and
services to help you build a highly adaptable website or a visually appealing online
application. If you're wondering what kind of development tools are merged in one
program, it could range from AR&VR (augmented and virtual reality) development to
IoT Software development (data visualization and analysis). With such a
comprehensive collection of cross-platform tools in one location, you'll find it easier
to build, maintain, and promote better development, as well as respond to potential
vulnerabilities. It also ensures that apps, programs, and websites run quickly, thanks to
its well-organized software architecture.

5. Photoshop
Adobe Photoshop is a well-known professional graphics editor which is available for

Avinda Himesha WDD - COL/A-066773 P a g e 37 | 83

 both Mac and Windows. It is the ideal application for altering photographs and
producing digital graphics, and it was created for professional photographers and
designers. Filters – which automatically add effects to your image or a specified
portion of your image, extensibility, and automation with Brushes, Actions, and
Scripting, and workflow optimization features like Layer Comps and the Reverse
features – are all available in Photoshop.

6. Chrome DevTool
Given that Google Chrome is the most widely used cross-platform browser, you can
be confident that a Chromium-based development technology will allow you to
inspect, debug, and navigate the browser. While many development tools are largely
focused on constructing websites, online stores, and blogs, Chrome DevTool is quite
useful for examining and customizing them. Although navigating across so many tabs
and functionalities can be difficult, Chrome DevTool provides a number of panels for
increasing productivity, monitoring load performance, and improving user-
friendliness such as Elements panel, Console panel, Sources panel, Network panel,
Performance panel, Memory panel, Application panel, Security panel.

7. Bootstrap
Bootstrap is the most widely used HTML, CSS, and JavaScript framework for
creating mobile-first, responsive websites. Its open-source toolkit has a variety of
templates and designs for generating standard UI components. Forms, buttons,
navigations, dropdowns, alerts, modals, tabs, accordions, carousels, tooltips, and so on
are common examples of these elements. Essentially, it allows you to create mobile-
friendly websites using a simple drag-and-drop interface.

Furthermore, ready-made code blocks and flexible layouts required for HTML and
CSS can be readily altered and used to meet the needs of your project. A long list of
components, a Useful icon library, a solid guarantee of the project's responsiveness,
are the most important Bootstrap features.

8. XAMPP
XAMPP is a popular cross-platform web server that allows programmers to write and
test their code on a local webserver. It was created by Apache Friends, and the
audience can amend or modify its native source code. It includes Apache HTTP
Server, MariaDB, and interpreters for PHP and Perl, among other computer
languages. It's available in 11 languages and runs on a variety of platforms, including
Windows' IA-32 package, Mac OS X's x64 package, and Linux's x64 package
(Javatpoint, 2021).

Avinda Himesha WDD - COL/A-066773 P a g e 38 | 83

Task 3

Wireframes

Figure 13 - User Login

Avinda Himesha WDD - COL/A-066773 P a g e 39 | 83

 Figure 14 - Admin Login

Figure 15 - Signup Form

Avinda Himesha WDD - COL/A-066773 P a g e 40 | 83

 Figure 16 - Add a Category

Figure 17 - Add a Book

Avinda Himesha WDD - COL/A-066773 P a g e 41 | 83

 Figure 18 - Add an Author

Figure 19 - Student Registration

Avinda Himesha WDD - COL/A-066773 P a g e 42 | 83

 Figure 20 - Manage Books

Figure 21 - Issue new Books

Avinda Himesha WDD - COL/A-066773 P a g e 43 | 83

Website creation

Figure 22 - Admin Login

Figure 23 – Admin Login PHP

Avinda Himesha WDD - COL/A-066773 P a g e 44 | 83

 Figure 24 - Admin Login Page

Figure 25 - Admin Login Page

Figure 26 - Admin Login PHP

Avinda Himesha WDD - COL/A-066773 P a g e 45 | 83

 Figure 27 - Email availability PHP

Figure 28 - Logout PHP

Avinda Himesha WDD - COL/A-066773 P a g e 46 | 83

 Figure 29 - Change Password

Figure 30 - Change Password PHP

Avinda Himesha WDD - COL/A-066773 P a g e 47 | 83

 Figure 31 - Change Password PHP

Figure 32 - Change Password PHP

Avinda Himesha WDD - COL/A-066773 P a g e 48 | 83

 Figure 33 _Change Password PHP

Figure 34 - Add Author

Avinda Himesha WDD - COL/A-066773 P a g e 49 | 83

 Figure 35 - Add Author PHP

Avinda Himesha WDD - COL/A-066773 P a g e 50 | 83

 Figure 36 - Add Author PHP

Figure 37 - Add Author PHP

Avinda Himesha WDD - COL/A-066773 P a g e 51 | 83

 Figure 38 - Manage Authors

Figure 39 - Edit Author PHP

Avinda Himesha WDD - COL/A-066773 P a g e 52 | 83

 Figure 40 - Edit Author PHP

Figure 41 - Edit Author PHP

Avinda Himesha WDD - COL/A-066773 P a g e 53 | 83

 Figure 42 - Add a Book

Figure 43 - Add Book PHP

Avinda Himesha WDD - COL/A-066773 P a g e 54 | 83

 Figure 44 - Add Book PHP

Figure 45 - Add Book PHP

Avinda Himesha WDD - COL/A-066773 P a g e 55 | 83

 Figure 46 - Add Book PHP

Figure 47 - Manage Books

Avinda Himesha WDD - COL/A-066773 P a g e 56 | 83

 Figure 48 - Edit Book PHP

Figure 49 - Edit Book PHP

Avinda Himesha WDD - COL/A-066773 P a g e 57 | 83

 Figure 50 - Edit Book PHP

Figure 51 - Edit Book PHP

Avinda Himesha WDD - COL/A-066773 P a g e 58 | 83

 Figure 52 - Edit Book PHP

Figure 53 - Issued Books

Avinda Himesha WDD - COL/A-066773 P a g e 59 | 83

 Figure 54 - Issue Book PHP

Avinda Himesha WDD - COL/A-066773 P a g e 60 | 83

 Figure 55 - Issue Book PHP

Avinda Himesha WDD - COL/A-066773 P a g e 61 | 83

 Figure 56 - Issue Book PHP

Figure 57 - Issue Book PHP

Avinda Himesha WDD - COL/A-066773 P a g e 62 | 83

 Figure 58 - PHP for DB connect

Figure 59 – Header PHP

Figure 60 - Header PHP

Avinda Himesha WDD - COL/A-066773 P a g e 63 | 83

 Figure 61 - Footer PHP

Figure 62 - Index PHP

Avinda Himesha WDD - COL/A-066773 P a g e 64 | 83

 Figure 63 - Index PHP

Figure 64 - Index PHP

Avinda Himesha WDD - COL/A-066773 P a g e 65 | 83

Database

Figure 65 - Books Table

Figure 66 - Author Table

Figure 67 - Student table

Figure 68 - Book Issue table

Avinda Himesha WDD - COL/A-066773 P a g e 66 | 83

Database Data View

Figure 69 - Database view

Avinda Himesha WDD - COL/A-066773 P a g e 67 | 83

Compare and contrast the multipage website created to the design document

Steps to make a perfect website

Gathering Info

The majority of people overlook this essential step in the development process. Gathering
information about the organization is essential for ensuring that your web layout is on the
right track. Recognize the company's objectives.

Planning

The next step is to create sitemaps and wireframes after you’ve gathered enough information
about the company. The data gathered in the first stage is used to create a sitemap. The
primary goal of a website map is to make an internet site easier to navigate and to create a site
structure. A wireframe is a graphic representation of a website. Aside from that, consider
what features and functionalities you want on a website. Login, email subscription, admin,
live chat, and other functions are included in this service.

Design

Your web design could make or break your online business's success. The net style is tailored
to the target audience. A website that you're planning for college is not the same as one that
you're planning for product. Aspects to consider include the color scheme, the placement of
text, graphics, and videos, and so on. The planned layout helps organize your page in a
logical way so that it appears appealing.

Development

The design of your website is currently behind developers to run the programs on during this
stage. Codes on the placement can be used by an online developer to make it
more functional and run smoothly. It's the most critical stage in the development process
since the graphic style used in the previous stage has a life of its own. According to sitemaps,
the home page is designed first, followed by the other pages. You'll finally start building the
website here. To create an actual online design, several components styled in the previous
steps are used. Most of the time, the landing or main page is constructed first, followed by all
other websites, in accordance with the positioning hierarchy established in the sitemap. At
this point, a thorough understanding of each development technology you'll be using is
essential.

Avinda Himesha WDD - COL/A-066773 P a g e 68 | 83

Content Writing

After you've finished with the event technique, it's time to start writing the content for your
website. To catch people's attention, you need beautiful and fascinating material. Headings,
subheadings, tags, and other elements of the website's content should be modified so that
visitors can find what they're looking for. Material writing refers to each time you want to
write and publish content in order to achieve your company goals. It could be to raise overall
awareness, make people aware of new products or services, generate leads, or attract new
customers to the company.

Testing

It's a procedure that's part of the web development process. Before launching the site, all of
the pages and links were thoroughly examined to ensure that nothing is damaged. Check each
type, script, and writing system, as well as the software system, for possible typewriting
errors. Use code validators to ensure that your code adheres to the web development
standards. Your website is tested for a variety of factors at this step, including site
performance, cross-browser compatibility, and multiple screen tests. Before introducing a
website into the world, it must pass all of the necessary testings.

Maintenance

When a website is launched, it does not imply that it is at the top of its game. Most
developers are delighted to provide maintenance services to avoid unnecessary trouble. The
corporation must manage numerous responsibilities, including providing clients with ASCII
text files and project documents, responding to feedback, and providing post-development
assistance. This step is equally important because the most important function of the website
begins after it is open to the public.

Challenges in creating a website

The process of establishing a website is difficult because it involves a variety of devices, code
frameworks, scripts, and, of course, the constant need to collaborate with others in new ways
to efficiently manage the process.
Building a website takes a long time when compared to creating a desktop site. The content
on a website should be prioritized for mobile use. For smaller screens, the designer must
understand exactly what is important, such as the devices that people use, their surroundings,
and their specific goals. The interaction between desktop websites and mobile devices is
distinct.

Avinda Himesha WDD - COL/A-066773 P a g e 69 | 83

Task 4

Quality Assurance

Quality Assurance (QA) is defined as a process that ensures a company is offering the best
possible product or service to its consumers. QA focuses on improving procedures in order to
deliver high-quality products to customers. A company must ensure that processes are cost-
effective and efficient in accordance with industry standards for software package products.
Quality Control is also known as QA Testing.

There are a few things to think about while using the internet. My Code is becoming more
complex, and faults are going undiscovered if no one is strictly sorting them out. This is
usually where quality assurance enters the conversation. It's an important examination.
Acting methodology entails a needs assessment, a fashion examination, and practicality
testing. From there, any large layouts, prototypes, or alpha versions of the website are
compared to this list. Estimation, in one sense, is about comprehending and reflecting on a
certain set of activities.

At the start of each project, a quality check is conducted by a judge. From the user's
perspective, these plans depict all of the tasks that must be taken to meet the facet objectives.
There are a few metrics to keep in mind.
1. Frequency of defects
2. Examine your abilities
3. Difference in schedule or effort
4. Effectiveness of defect detection
5. Defect Issue Percentage Test verification methods have advanced to the point that it is now
possible to demonstrate that all test plans have been reviewed and tested, ensuring that the
final version is free of functional problems (Guru99.com, 2021).

Avinda Himesha WDD - COL/A-066773 P a g e 70 | 83

 Test plan

Test
T.No Test Case Actions Expected Result Result
1 Website Launch http://localhost/library Homepage Successful
Enter valid Username and
2 Login Password Login Success Successful
Enter Invalid Details Login Failed Successful
Enter valid Name, Mobile Number, Registration
Successful
3 User Sign Up Email & Password Success
Enter Invalid Details Registration Failed Successful
Enter Valid Book Name, Category,
Author, ISBN & Price Addition Successful Successful
4 Adding new books Enter Valid Book Name, Category,
Author, ISBN & Price pressing the
Add button Addition Failed Successful
Enter all the Details Addition Successful Successful
5 Adding Authors Enter half of the details and
submitting Error Successful
Adding correct Student ID and
6 Issuing a Book ISBN Number Addition Successful Successful
Adding a Wrong Student ID Error Successful

Analyze the library system

The library management web site is the product under consideration. You should research
clients and, as a result, end-users to learn about their needs and expectations from the
software. For example, who can use the website? What is it used for? How can it work? What
is that the software/ hardware the merchandise uses

You should look around this website and check the library system documentation as well.
Reviewing product documentation allows you to become familiar with all of the website's
options as well as how to use it. If you're unsure about anything, you could interview the
customer, developer, or designer to get more information.

Objective Outlines

The overarching aim and action of the test execution is known as the test objective. The goal
of the test is to detect as many package flaws as possible; ensure that the package under test is
bug-free before releasing it.
You must do the following procedures to outline the examination objectives.

Avinda Himesha WDD - COL/A-066773 P a g e 71 | 83

1. Make a list of all the package options (functionality, performance, GUI, etc.) that must be
considered.
2. Outline the target or the goal and take a look at supported and higher than options.

You can outline the look at the Objective of the project Lowa library management system as
follows based on the preceding alternatives.

• Verify that the functionality of the Lowa library management system (login, choose a book,
insert book...) works as expected in a real-world learning environment, with no errors or
faults.
• Verify that the website's external interface, such as the UI, is operational and meets the
needs of the client.
• Examine the website's usability. Is it possible that those features will be useful to the user?

Criteria Outlines

Test Criteria can be a standard or rule on which a method or evaluation judgment is based.
They're a couple of different ways of looking at criteria, such as the ones listed below.

• Suspension Criteria
Define the essential suspension criteria for a test. If the suspension conditions are reached
during testing, the actors' evaluation cycle will be halted until the issues are remedied.
• Exit criteria
It establishes the criteria for determining if a check section has been completed successfully.
The exit criteria are the check's intended outcomes, and they must be met before moving on
to the next stage of development.

Resource Planning

The resource set up could be a detailed outline of all of the resources required to complete the
project task. The resource could be a person, instruments, or materials needed to complete a
job.

The resource gathering is a crucial aspect of the check gathering since it aids in determining
the number of resources (employees, equipment, etc.) to be used for the project. As a result,
the project's schedule and estimation will be created by the check Manager.

Avinda Himesha WDD - COL/A-066773 P a g e 72 | 83

Plan Test Environment

A testing environment is a combination of software and hardware that the testing team uses to
run test cases. The look at the environment comprises of genuine business and user
environments, as well as physical settings, such as a server, forepart running environment.
How can you create a look at the atmosphere?

Returning to your project, have you had a look at the environment for this website?
To complete this work, you will need strong collaboration between the Review Team and the
Development Team.

Schedule & Estimation

You already used some strategies to estimate the difficulty of completing the project in the
article verify estimation. Now, because of the check-designing timetable, you should embrace
that estimation as well.

Making a schedule is a typical project management word. By creating a solid timetable

within the check writing, the check manager will be able to use it as a tool for monitoring
project progress and managing price overruns.
The check Manager requires a variety of input types to generate the project schedule, as
shown below:
• Project and employee deadlines: Operating days, project point, and resource availability
were all elements that influenced the schedule.
• Project estimation: The check manager knows how long it will take to complete the project
based on the estimation. As a result, he will create an acceptable project timeline.
• Project Risk: Recognizing the threat allows the project manager to provide extra time to the
project schedule to deal with the risks.

Test Deliverables

A list of all the documentation, tools, and other pieces that must be generated and maintained
in support of the testing endeavor is known as Test Deliverables. At each stage of the code
development lifecycle, there are completely different check deliverables.

Avinda Himesha WDD - COL/A-066773 P a g e 73 | 83

Conclusion

The Lowa State University library management system has been a huge success based on
comments and other testing methods. The system is more appealing, but there are still some
features that need to be included. Because of the aforementioned criteria, the created system
can be called a good system, and it is also more user friendly, allowing the user to efficiently
move around the system.

The majority of comments is positive for this system, and system performance and security
are also factors in its success. Because the user activities take less time, the system may be
deemed efficient, and the security level is the most important aspect of the system because all
user information is entirely protected. These are the key reasons for the system’s success.

However, there are certain system enhancements that could be made in the future. A mobile
application could be used to develop the system. The use of mobile applications is becoming
increasingly popular around the world. Having a mobile app for any system is appealing to
consumers because it makes it easier for them to register and login to the system with the
system at their fingertips. As a result, librarians can do their tasks utilizing a mobile
application. As a result, they will be able to complete their tasks more quickly.

Another significant enhancement is the ability for people to read the book online. This will
make the system more user-friendly because users will not have to go to the library to obtain
the book. Improving these aspects, as well as identifying further flaws, will improve the
system's usefulness in the long run.

Avinda Himesha WDD - COL/A-066773 P a g e 74 | 83

Prepare user documentation to properly guide the users of the implemented system

Online Library Management System divided into 2 modules

• Librarian
• Student/Professor

Admin options
• Admin Dashboard
• Admin can add/update/ delete category
• Admin can add/update/ delete author
• Admin can add/update/ delete books
• Admin can issue a book to a student and collectively update when the student return
to the book
• Admin can search students by their student ID
• Admin can also browse student details
• Admin can change own countersign

Students Options
• The student will register yourself and when registration, they'll get student id
• After login students will read their dashboard.
• The student will update their profile.
• The student will read the issued book and book come date-time.

System Requirement

Processor-Dual Core (Minimum)

• Memory -128 MB (Minimum)
• Disk Space -An additional 500 MB is required on time of setup of the database and to
run smoothly the newly designed MySQL DB.
• Operating System -Window NT 4 (SP4) and above, Linux.
• Supported browser- Google Chrome, Safari, Mozilla Firefox, and internet Explorer.
Etc.

Avinda Himesha WDD - COL/A-066773 P a g e 75 | 83

Website Manual

Login

The users must log in with a username and a password along with the correct verification
code to get any service from the online library.

Figure 70 - User Login

Figure 71 - Admin Login

Avinda Himesha WDD - COL/A-066773 P a g e 76 | 83

Note: Registered students and Professors may only login via the login Portal

Registration
Users have to register first by filling in proper credentials like Full Name, email, and
password along with the correct verification code. After completion of the registration, the
process admin will get a new registration email notification

Figure 72 - User Registration

Note: After registration, Users can log in with their email ID and Password via the User
Login Tab.

Avinda Himesha WDD - COL/A-066773 P a g e 77 | 83

After Logging in users can access their issued books and see the current statistics using the
dashboard

Figure 73 - User Dashboard

Users can view and edit their account using the ACCOUNT Tab

Figure 74 - User Profile

Avinda Himesha WDD - COL/A-066773 P a g e 78 | 83

By logging as a Librarian, you can add Books, Authors, Categories and Issue books while
having access to edit previously added Books, Authors and Categories using the Navigation
Bar

Figure 75 - How to add a Book

Figure 76 - How to add an Author

Avinda Himesha WDD - COL/A-066773 P a g e 79 | 83

 Figure 77 - How to add a Category

Figure 78 - How to issue Books

Avinda Himesha WDD - COL/A-066773 P a g e 80 | 83

You can check all the information using the Dashboard and also Log Out after

Figure 79 - Dashboard

Avinda Himesha WDD - COL/A-066773 P a g e 81 | 83

References

W3schools.in. 2021. Types of Network Protocols and Their Uses. [online] Available at:
<https://www.w3schools.in/types-of-network-protocols-and-their-uses/> [Accessed 3
October 2021].
Buskirk, B., 2021. The Hardware and Software You Need for Web Design. [online]
ThinkComputers.org. Available at: <https://thinkcomputers.org/the-hardware-and-software-
you-need-for-web-design/> [Accessed 4 October 2021].
Usability Geek. 2021. How To Choose A Laptop For Web Design And Development -
Usability Geek. [online] Available at: <https://usabilitygeek.com/web-design-resources/how-
to-choose-laptop-for-web-design-and-development/> [Accessed 4 October 2021].
Cloudflare. 2021. What is DNS?. [online] Available at: <https://www.cloudflare.com/en-
gb/learning/dns/what-is-dns/> [Accessed 5 October 2021].
DreamHost Academy. 2021. Understanding the Different Kinds of Domains - DreamHost.
[online] Available at: <https://www.dreamhost.com/academy/understanding-different-kinds-
of-domains/> [Accessed 5 October 2021].
CloudFlare. 2021. DNS server types. [online] Available at: <https://www.cloudflare.com/en-
gb/learning/dns/dns-server-types/> [Accessed 5 October 2021].
Techopedia.com. 2021. What is Search Engine? - Definition from Techopedia. [online]
Available at: <https://www.techopedia.com/definition/12708/search-engine-world-wide-
web> [Accessed 5 October 2021].
Michigan Technological University. 2021. Five Ways to Improve your Site's Ranking (SEO) |
Michigan Technological University. [online] Available at:
<https://www.mtu.edu/umc/services/websites/seo/> [Accessed 5 October 2021].
Johns, K., 2021. Top 10 Best Web Development Technologies to use in 2021 | ISHIR-
Software Development Company India. [online] ISHIR | Software Development India.
Available at: <https://www.ishir.com/blog/9821/top-10-best-web-development-technologies-
to-use-in-2021.htm> [Accessed 6 October 2021].
Wozniewicz, B., 2019. The Difference Between a Framework and a Library. [online]
freeCodeCamp.org. Available at: <https://www.freecodecamp.org/news/the-difference-
between-a-framework-and-a-library-bd133054023f/> [Accessed 6 October 2021].
Williams, E. and Lane, D., 2021. Web Database Applications with PHP and MySQL, 2nd
Edition. [online] O’Reilly Online Learning. Available at:
<https://www.oreilly.com/library/view/web-database-applications/0596005431/ch01.html>
[Accessed 6 October 2021].
Khillar, S., 2021. Difference Between Frontend and Backend | Difference Between. [online]
Differencebetween.net. Available at:
<http://www.differencebetween.net/technology/difference-between-frontend-and-backend/>
[Accessed 14 October 2021].
M, B., 2021. Advantages of Custom Built Sites vs Online Website Builder Tools. [online]
Icecube Digital. Available at: <https://www.icecubedigital.com/blog/advantages-of-custom-
built-sites-vs-online-website-builder-tools/> [Accessed 27 October 2021].
Craig, W., 2021. 5 Best Web Design Software Tools for 2021 | WebFX. [online] WebFX
Blog. Available at: <https://www.webfx.com/blog/web-design/top-five-web-design-tools/>
Avinda Himesha WDD - COL/A-066773 P a g e 82 | 83
[Accessed 28 October 2021].
www.javatpoint.com. 2021. XAMPP Tutorial - javatpoint. [online] Available at:
<https://www.javatpoint.com/xampp> [Accessed 29 October 2021].
Guru99. 2021. What is Quality Assurance(QA)? Process, Methods, Examples. [online]
Available at: <https://www.guru99.com/all-about-quality-assurance.html> [Accessed 28
November 2021].

Avinda Himesha WDD - COL/A-066773 P a g e 83 | 83