Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS
Programme title BTEC Higher National Diploma in Computing

Assessor Internal Verifier

Unit 10: Web Design and Development
Unit(s)
Online Library Management System
Assignment title
Kavin Mahendran
Student’s name
List which assessment Pass Merit Distinction
criteria the Assessor has
awarded.
INTERNAL VERIFIER CHECKLIST

Do the assessment criteria awarded match

those shown in the assignment brief? Y/N

Is the Pass/Merit/Distinction grade awarded

justified by the assessor’s comments on the Y/N
student work?
Has the work been assessed
Y/N
accurately?
Is the feedback to the student:
Give details:

• Constructive?
Y/N
• Linked to relevant assessment
criteria? Y/N

• Identifying opportunities for

improved performance? Y/N

• Agreeing actions? Y/N

Does the assessment decision need

Y/N
amending?
Assessor signature Date

Internal Verifier signature Date

Programme Leader signature(if
Date
required)

KAVIN
WEB DEVELOPMENT 1
 Confirm action completed
Remedial action taken

Give details:

Assessor signature Date

Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)

KAVIN
WEB DEVELOPMENT 2
Higher Nationals - Summative Assignment Feedback Form
Student Name/ID

Unit Title Unit 10: Website Design & Development

Assignment Number 1 Assessor
Date Received 1st
Submission Date
submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:

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

Pass, Merit & Distinction P1 P2 M1 M2 D1

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

Pass, Merit & Distinction P3 P4 M3 D1

Descripts

LO3. Utilise website technologies, tools and techniques with good design principles to create a multipage
website.
Pass, Merit & Distinction P5 P6 M4 D2
Descripts

LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & Distinction P7 M5 D3
Descripts

Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

* Please note that grade decisions are provisional. They are only confirmed once internal and external moderation has taken place and grades decisions have
been agreed at the assessment board.

KAVIN
WEB DEVELOPMENT 3
Pearson
Higher Nationals in
Computing
Unit 10: Web Design and Development
Assignment 01

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 be sure to fill the details correctly.
2. This entire brief should be attached in first before you start answering.
3. All the assignments should prepare using word processing software.

KAVIN
WEB DEVELOPMENT 4
 4. All the assignments should print in A4 sized paper, and make sure to only use one side printing.
5. Allow 1” margin on each side of the paper. But on the left side you will need to leave room for binging.

Word Processing Rules

1. Use a font type that will make easy for your examiner to read. The font size should be 12 point, and should be
in the style of Time New Roman.
2. Use 1.5 line word-processing. Left justify all paragraphs.
3. Ensure that all headings are consistent in terms of size and font style.
4. Use footer function on 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 edit your assignment.

Important Points:
1. Check carefully the hand in date and the instructions given with the assignment. Late submissions will not be
accepted.
2. Ensure that you give yourself enough time to complete the assignment by the due date.
3. Don’t leave things such as printing to the last minute – excuses of this nature will not be accepted for failure
to hand in the work on time.
4. You must take responsibility for managing your own time effectively.
5. 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.
6. Failure to achieve at least a PASS grade will result in a REFERRAL grade being given.
7. Non-submission of work without valid reasons will lead to an automatic REFERRAL. You will then be asked to
complete an alternative assignment.
8. Take great care that if you use other people’s work or ideas in your assignment, you properly reference them,
using the HARVARD referencing system, in you text and any bibliography, otherwise you may be guilty of
plagiarism.
9. If you are caught plagiarising you could have your grade reduced to A REFERRAL or at worst you could be
excluded from the course.

KAVIN
WEB DEVELOPMENT 5
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 Edexcel UK.
6. I understand that my assignment will not be considered as submitted if this document is not attached to the
attached.

Student’s Signature: coolkavin8@gmail.com Date:30/11/2020

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

KAVIN
WEB DEVELOPMENT 6
Assignment Brief
Student Name /ID Number

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2017/2018

Unit Tutor

Assignment Title Online Library Management System

Issue Date

Submission Date

IV Name & Date

Submission Format:

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.

KAVIN
WEB DEVELOPMENT 7
Assignment Brief and Guidance:

KAVIN
WEB DEVELOPMENT 8
 Assignment Brief

Borrowing books, returning books or viewing the available books at the Library of the Lowa State University
is currently done manually.
Online Library Management System supports to overcome the above-mentioned problems. 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.
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.)

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

1.1 Differentiate the communication protocols, server hardware, operating systems and web server
software with regards to designing, publishing and accessing a website.
1.2 Define the types of DNS and the uses of it, with clarifications on how domain names are structured.
1.3 Analyze 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.4 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.

KAVIN
WEB DEVELOPMENT 9
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 explain 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.
Consider Followings: design flexibility, performance, functionality, User Experience (UX) and
User Interface (UI).
2.3 Compare and contrast 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. Provide evidences of the design,
multipage website supported with fidelity wireframes and a full set of client and user requirements.
Use your design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design

3.2 Implement the designed system 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.

3.3 Critically evaluate the web design and development process against your design document and
analyze any technical challenges you faced in development.

KAVIN
WEB DEVELOPMENT 10
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 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.

KAVIN
WEB DEVELOPMENT 11
 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).

KAVIN
WEB DEVELOPMENT 12
M3 Evaluate a range of tools and techniques available to design and
develop a custom built website.
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.

KAVIN
WEB DEVELOPMENT 13
 Observation Sheet

Activity Activity Learning Feedback

No Outcome (Pass/ Redo)
1 Explain server technologies and LO1
management services associated with
hosting and managing websites.
2 categorize website technologies, LO2
tools and software used to develop
websites.
3 Utilize website technologies, tools LO3
and 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 :…………………………………………….

KAVIN
WEB DEVELOPMENT 14
Task 01
1.1
Web communication protocols
Hypertext transfer protocol (HTTP)
This is the most common used protocol in web communications. This is a classic client – server protocol.
When a user clicks a link the browser sends a request to the webserver through the internet and the server
sends the content to the browser. HTTP is an unsecured protocol where the data transferred between browser
and the server can be encrypted by the third party (Eyers, 2020).
Hypertext transfer protocol secure (HTTPS)
This protocol is similar to http but it combines with secure protocol named SSL/TLS to provide secure client
communication. The most sensitive data information is transferred through this protocol (Eyers, 2020).
IP security (IPSec)
This protocol encrypts packets of data transferred between computers which have the same cryptographic
keys. These are mostly used in virtual private networks which allows employees of an organization to log in
to their network through a public network (Eyers, 2020).
Telnet
This is one of the oldest protocols which is used to connect remote servers. Unlike http we can log into
remote server and perform functions in it. This is rarely used nowadays cause of the lack of security in data
communication (Eyers, 2020).
File Transfer Protocol (FTP)
This protocol is used to transfer files such as documents, images, music, etc., between remote computers. A
user can log into a FTP server using command line or other GUI programmes available. The user can also
navigate through the files and also update and delete files in that server. (Eyers, 2020).

Server hardware
Web server
The web server is a computer which have the webserver software and web component files. This server will
be connected to the internet and supports physical data interchange between devices connected to the web.
Web server software
This web server software control how user access hosted files. . At a minimum, this is an HTTP server. An
HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses

KAVIN
WEB DEVELOPMENT 15
 to view webpages). An HTTP server can be accessed through the domain names of the websites it stores,
and it delivers the content of these hosted websites to the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web server, the browser requests
the file via HTTP. When the request reaches the correct (hardware) web server, the (software) HTTP server
accepts the request, finds the requested document, and sends it back to the browser, also through HTTP. (If
the server doesn't find the requested document, it returns a 404 response instead.) (MDN, 2020).
Operating systems
Apache HTTP server
This is an open source software created by the Apache software foundation. But to use this software we need
the license from Apache. This software can be used in Windows, Mac OS X, Unix, Linux, Solaris and other
operating systems as well (Margaret Rouse, 2020).
Microsoft internet information services (IIS)
This is a server software which is created by Microsoft and mostly run on windows computer. This is a widely
used server software nowadays (Margaret Rouse, 2020).
Ngnix
This is a popular open source web server. This is mostly used in administrator’s light resource utilizability
and scalability. This system has a sever driven architecture so that it can handle many concurrent sessions
(Margaret Rouse, 2020).
Lighttpd
This is a open source sever which comes with the FreeBSD operating system. This is less CPU power
consuming system (Margaret Rouse, 2020).
Sun Java System Web server
This is an open source software created by Sun Microsystem. This software can run on windows and Linux
systems. This is a good server software to manage medium and large websites. (Margaret Rouse, 2020).
1.2
The DNS is a distributed system in the hierarchy and it is made up of a collection of DNS servers. The DNS
server is a computer which is allowed to join the DNS. Every DNS server will have an index of domain name
and IP address. The DNS server will provide the IP address whenever we request it with the domain name. If
any DNS server can’t find the specific IP address it will connect to another one and search that in it.
(Internet.com, 2015).

There are 4 types of DNS servers such as

KAVIN
WEB DEVELOPMENT 16
 • Recursive resolvers

• Root name servers

• TLD nameservers

• Authoritative nameservers

Recursive resolvers

This server is also known as DNS recursor. This will receive the request from the web client and give response
to the client with the cached data, or it will send a request to the root server, TLD nameserver and finally to
the authoritative nameserver. After getting the response this will send it to the client. This recursive server
will maintain a cache memory. After completing one request if the another user request same domain it will
send the response which is saved in the cache.

Root nameserver

The 13 DNS root nameservers are known to every recursive resolver, and they are the first stop in a recursive
resolver’s quest for DNS records. This will accept the query from the root server with the domain name and
it responds to it by directing it to TLD nameserver using it’s extension.

TLD nameserver

A TLD nameserver contains information of the domain names which have the same extension. For example a
.lk TLD nameserver will contain information of every website that ends with .lk extension. If a user wants to
search for google.lk the recursive resolver will send a query to a .lk TLD nameserver and it would respond by
pointing it to the authoritative nameserver.

Authoritative nameserver

KAVIN
WEB DEVELOPMENT 17
This is last point in the journey of an IP address. This server contain specific information to the specific domain
name it serves. This server can provide a recursive resolver with the IP address of that server found in that
DNS A record or else if the domain have a CNAME record it will provide a recursive resolver with an allias
domain, where recursive resolver will have to perform a whole new DNS lookup to procure a record from an
authoritative nameserver. (CloudFlare, 2020).
Domain name structure
A domain name will be structured according to the hierarchical structure of the domain name system.

Third level domain Second level domain Top Level domain Root label
WWW Google .com (Empty)

Root label
This is the first level of the domain name structure and it is empty and invisible to the online users. Even
though it is empty a fully qualified domain to be recorded in servers it should present with the root label
followed by the period in top level domain (IONOS, 2019).
Top level domain
This level represents the highest level of domain name resolution. Top Level Domains are managed by NIC.
There are TLDs available such as .com, .org and country specific such as .lk, .uk and.in. TLDs are operated
as sponsored top-level domains from special interest groups or businesses. Registering such a domain can be
associated with special requirements or conditions (IONOS, 2019).
Second level domain
This is freely chosen name under the top level domain name. Allocating SLDs is always done in alongside
with the superior TLD. An NIC-accredited private sector register is normally responsible for name allocation
for business to customer purposes (IONOS, 2019).
Third Level domain
Common names for third-level domains are www for web services, m for mobile services, mail, imap, or pop3
for mail servers as well as various country codes for language-specific services. By including a third level
domain we can define a sub address which can separate different sections from each other. The domain owners
can define different landing pages by changing the third level domain. For example,
Third Level Domain Second Level domain Top Level domain
.en wikipedia org

KAVIN
WEB DEVELOPMENT 18
 .es wikipedia org

In here when the user types the first domain the page will be available in English language and when the user
type the second one will be available in German language.
(IONOS, 2019)
1.3
There are some certain factors of a website which help to get a good rank in google rankings such as
 Website load speed
 Mobile friendliness
 Review web hosting
 Carefully placed header tags
 Inbound and outbound links
Website load speed
There are statistical reports saying that users tend to leave the site which takes more than 3 seconds to load.
So to keep users visiting our site the website's loading speed should be improved. Back in 2010, Google
included page loading speed as a ranking factor which means the fast loading pages only will get a good
rank. So to keep up with the other pages our page loading speed should be fast enough to get identified by
the Google’s algorithm (Neil Patel, 2020).

Mobile friendliness
Today most of us have a mobile phone and we do our searching’s through mobile phones. So the web
application we create should be mobile friendly if not users will abandon it (Neil Patel, 2020).

Review web hosting

The speed of the website has a close relationship with the google rankings. Likewise, the speed of the website
depends on the hosting of it. So it’s a good option to check with the provider regarding the package we have
and upgrades on them (Neil Patel, 2020).

If we are having a shared hosting account, we have to share the space with multiple other sites and according
to users visit the sever will get slow down. So in that case it is better to switch to a solo hosting package.
While choosing the provider we also have to check about the downtime issue which can be a major throwback
to our site (Neil Patel, 2020).

KAVIN
WEB DEVELOPMENT 19
 Carefully placed header tags
Search engines give a high priority to the keywords inside the header and it is also a major ranking criteria.
Optimizing our h1 tags help to reach a good rank in SEO (Neil Patel, 2020).

Inbound and outbound links

Inbound links plays a major role in the google rankings. The search engine will rank the site’s reliability and
relevance of the website based on how many times other sites link to it (Neil Patel, 2020).

The outbound link from our site to other authoritative sites are also important. Outgoing relevant links to
authoritative sites are considered in the algorithms and do have a positive impact on rankings. (Neil Patel,
2020).
Thevidence based support for improving site index value rank through search engine optimization
The website neilpatel.com have a great site index value and a huge number of visitors.
The website’s visitor rate

The website’s crawl status

KAVIN
WEB DEVELOPMENT 20
Optimizations found in his site which improve the loading speed

The site is mobile friendly

KAVIN
WEB DEVELOPMENT 21
KAVIN
WEB DEVELOPMENT 22
KAVIN
WEB DEVELOPMENT 23
Properly placed h1 tag

KAVIN
WEB DEVELOPMENT 24
1.4
Web development technologies and frameworks
With the increasing number of web application and standards the complexity of web development
technologies and frameworks have been increased too. Framework helps developers to create rich and
interactive application. Frameworks are used in both front-end and backend development and also it supports
web apps, web sites and API development. In simple terms framework is kind of an library that help to create
web apps easy and efficiently. The most popular frameworks of nowadays are,
 Express
 Django
 Rails
 Laravel
 Spring
 Angular
 React
 Vue
 Ember
 Backbone

Express
This is the most popular backend framework due to the popularity of node.js. This framework is used by the
leading companies such as Uber, IBM and Accenture. This framework can be combined with kraken, loopback
and sails. This is a minimal, fast and not an optioned framework.
Express provides leverages of node.js without obscuring it’s features. It supports full and rest API applications.
Even though it’s a great framework it is not a good framework for beginners since there is no structured way
of doing things.

Django
This is a model-view-template framework which uses python for web development. Leading companies such
as Google, YouTube and Instagram use this framework. Authentication and messaging are the most significant
features of this framework. The patterns it follows are convention over configuration and DRY. Django is also
having security features such as prevent code execution in the template layer.

KAVIN
WEB DEVELOPMENT 25
Rails
This is a model view controller framework which use ruby. The leading companies such as Airbnb, GitHub,
Hulu, and Shopify use this framework. Rails is also considered as a beginner friendly framework. Developers
can work fast and efficiently and also their community is quite reliable and friendly. It is also so many other
good features such as Flawless interaction with third-party apps, detailed error logs, development of SEO
friendly URLs. Even though it has major disadvantage which it takes more time to run and deploy.

Laravel
This is also a model view controller framework such as rails but it uses PHP. Developers can build customized
infrastructure and back out ordinary errands like authentication, sessions, storing, and steering with the help
of laravel's structure. Most of the developers use laravel cause of its scalability, performance and features.

Spring
Spring is also a model-view-template framework which uses Java. Popular websites such as Wix,
TicketMaster, and BillGuard use this framework. This framework eases the process of making J2EE apps.
Spring's rigid architecture frame helps developers to create simple, fast and flexible applications.

Angular
Angular is a frontend framework which is mostly used in single page application. Earlier days angular used
javascript but now it is using typescript. Angular is a multifaceted open-source front-end framework which
can be used to build a complete client-side application. This framework is developed and maintained by
Google and it is used by Google, Microsoft and PayPal. Declarative paradigm patterns make it easy to read.
Even though it is widely used this is not SEO friendly.

React
React is the first framework to adopt component-based architecture. React have virtual dom which makes dom
manipulation easy. Because of that it is mainly used in Facebook. This framework can be both used on client
and server side.
Vue
This is a progressive framework created as an individual project by Evan You. Vue mainly focus on
component composition and declarative providing.

KAVIN
WEB DEVELOPMENT 26
Currently it is the most trending js framework and developers can build complete frontend applications with
its component architecture. It is one of the most adaptive frameworks. In Vue it is easy to work on previous
projects by getting a portion of it and seamlessly moving forward. It has a central library that emphasizes the
view layer.

Ember
Ember was the best javascript framework of 2015 with its two-way data binding components. Companies such
as Google, Microsoft, Heroku, and Netflix use this framework more often. Ember eliminates the need for
redundant and monotonous activities or adopting some JS best practices in its core design.

Backbone
Backbone is used to build rich single applications. This partly implements the MVC design. Backbone allows
you to build complete client-side applications when added to Mustache and Marionette. (Amit Dua, 2020).

Tools used in the creation online library management system

Bootstrap
This is a free front-end framework which is mostly used by the current developers. Bootstrap contains HTML
and CSS based templates for typography, forms, buttons, tables, navigation, modals, image carousels and
many other, as well as optional JavaScript plugins.

The main reason that the developer used bootstrap is that it helps to create responsive designs. Since this
application is also created to students and professors they can check this application also in mobile phone or
any other devices which is comfortable for them. (W3schools.com, 2011)

JQuery
JQuery is a JavaScript library which makes it easy to use JavaScript in our website. In JQuery there are
methods for common tasks in JavaScript. Normally these tasks require so many lines of codes but this library
short it down inside a method so we can easily call it in one line. The JQuery library have following features
such as HTML/DOM and CSS manipulations, HTML event methods, Effects and animations, AJAX and
finally utilities. Companies such as Google, Microsoft, IBM and Netflix use this library.

KAVIN
WEB DEVELOPMENT 27
The reason that the developer choose JQuery for this application is that it makes it easy to write JavaScript
coding and there will be cross browser issue. Since JQuery runs same in all the major browsers it won’t be an
issue if the user chooses different browsers for the application. (W3schools.com, 2020)

Adobe Dreamweaver
This is a proprietary web development tool from Adobe Inc. It was created in 1997 by macromedia and
acquired by Adobe in 2005. (Wikipedia Contributors, 2020)
Advantages using Dreamweaver
 Highlights the code using colors which makes it easy to position HTML, CSS and PHP coding.
 Autofill code recommendations directly.
 No requirements for switching screens since sidebar assists hover around all the procedure.
 Mistakes will be highlighted.
 Can modify the contents in a hassle free manner.
Techniques used in development of Online Library Management System
Responsive web design strategy
As discussed earlier this web application is used by librarians, professors and students. So for the online library
management application can’t assure a specific window size for the application since users use different
devices to use the application. The developer chooses responsive web design strategy to overcome this
problem. Bootstrap framework is used for this so the application will adapt the size of the device and the user
will not face any issues such as zooming in and out unnecessarily (Lalith, 2015).
Maintained consistency
Developer have maintained same color, layout and font consistently in every page of the application. This
technique is used by the developer to make sure users does not feel lost while using the website. Changing
font and layout in every page will make users feel that they are navigated to another site. This is avoided buy
the developer by maintaining the consistency (Lalith, 2015).

Reasons for choosing web application for the online library management system
Accessibility across devices for users
This is an online library management system where the users are not only the librarians but also the
students and professors. Since this is a web application it is easy for them to access this application
anytime by any device. If this is a normal application, it should be either PC application or mobile
application and it should be downloaded in those devices and so many other things too. In this case we

KAVIN
WEB DEVELOPMENT 28
don’t need to worry about those things they can just visit the application and use it without any issues (Ruth,
2015).
Integration with other systems
Comparing with a normal desktop application web application well integrated with other systems. Since
we can expect different kind of devices and system using our online library management system a web
application is a good choice than a normal desktop application. Localized software is isolated compared
to web-based applications which are significantly more interoperable. This is because web applications
can be linked together more easily than two completely separate systems (Ruth, 2015).
Easy maintenance
Deploying our library management system is a very simple process. The access will be granted once the
software is installed in the host server. So whenever we need to upgrade our library management
system it can be simply upgraded through the host server rather than updating it in each and every
system. As the upgrades the maintenance of our library management system also can be done in a
central point. The time taken to make changes is reduced, and the system is consistent (Ruth, 2015).
Increased flexibility and scalability
Likewise, upgrade is easy the application can handle increase of capacity too. There will be no struggle to
increase the amount of books or the users in the application (Ruth, 2015).

Task 02
2.1
Frontend
Frontend is the part we develop using HTML, CSS and JavaScript where the user can see and interact directly.
The objective of designing the website is that when the user opens up to find the information they need they
should be in a format which is easy to search, read and understand. Nowadays we all use different type of
devices and web browsers to access the internet. It is the developer’s responsibility to create the site browser
friendly and device friendly. (Frontend Master, 2020).

Backend
Backend development is what we do which run behind the scenes of the site’s functionality. Codes written in
the backend site connect the website with database, manage user connection and give power to the application.
The languages that are used in the backend side are Java, PHP, Ruby, Python, SQL and JavaScript. The

KAVIN
WEB DEVELOPMENT 29
backend code also focuses on the functionality and logic performance. Responsibilities of backend
programmers could involve writing APIs, writing code to interact with a database, creating libraries, working
on business processes and data architecture, and much more. It often depends on the specific role and
company. (Krystal, 2020).

Relationship between frontend and backend

Frontend and backend development have their own differences but both of them are two aspects of the same
situation. Frontend is what users see and backend is all about how the site works. Frontend is the part which
contains the GUI with design, navigating menus, texts, images, videos, etc. Backend on the other hand is the
part which the user cannot directly interact. The visual aspects of the website that can be seen and experienced
by users are frontend. On the other hand, everything that happens on the background can be attributed to the
backend. Languages used for front end are HTML, CSS, JavaScript while those used for backend include
Java, Ruby, Python, .Net. (Nicole Ferguson, 2020).

How the front-end and the back-end relate to presentation and application layers
Presentation layer is the layer which contains the view elements of an application. Presentation code controls
the web user interaction with the product and its appearance. In this layer we use HTML, CSS and JavaScript
which are the frontend languages. (Magento, 2020).
Application layer doesn’t contain the view elements but it contains the logics, functionalities. In this layer we
use backend languages such as Java, PHP, Ruby, Python and JavaScript.
2.2
Different between online website creation tools and custom-built sites.
Web creation tools help us to build a website without manually coding it meanwhile custom built sites ready-
to-use, built-in theme found in most content management systems (CMS).
Critirea Web creation tools Custom-built sites
Design Limited in templates and layouts designed keeping in mind your
which can result our page looking objectives, needs and goals.
similar to competitors
User interface and experience Not much effective Looked into throughout to
increase effective user interface
and experience.
Performance Reduced loading speed High loading speed

KAVIN
WEB DEVELOPMENT 30
 Better SEO Limited SEO tools website designers use planning,
keyword research, sitemap
creation and a variety of other
tools.
(ice cube digital, 2020).
2.3 Tools to design and develop custom built websites
Creative Tim
This provides bootstrap based design elements in order to boost up the design and development process.
Creative Tim also provides pre built example pages, admin templates, admin dashboards and pre-made
sections and elements. These features of this software allow developers to reduce time on focusing about the
elements and focus that time one the business model (Rungta, 2020).

Envato HTML templates

Developers can find more than thousand premade HTML5 templates here. The templates will be available
power customization tools, SEO and optimized CSS and JS that helps to improve the speed of the application.
The templates in the Evnvato will be based on frameworks such as Bootstrap, Vuejs, Laravel and Angular.
The main features of Envato are light and dark options and charts library, chat and email apps and widgets
support.
One
This is a web development kit which provides wide range of add-ons, plugins and stock photos. One helps
developers to add audio and video assets more easily. There is draftium tool in this which helps the developers
to visualize the website idea. Apart from these features developers can find 7672 presentation templates which
they can use.
NPM
This is node package manager for JavaScript which helps developers to find packages of reusable code and
use them properly in their web applications. This web development tool is a command-line utility for
interacting with a said repository that aids in the package. NPM contains four hundred and seventy thousand
free reusable code packages in the application. NPM also helps developers to manage both the private and
public code using the same workflow.
Codekit
This is front-end web development tool. The main feature of Codekit is that it combines, minifies and check
errors in the JavaScript. Apart from that features there are other features available in this such as injecting

KAVIN
WEB DEVELOPMENT 31
CSS changes immediately without reloading the entire page and combines scripts to reduce HTTP requests
and file size.

Task 03
3.1.1 Sketches of Online Library Management tool

KAVIN
WEB DEVELOPMENT 32
KAVIN
WEB DEVELOPMENT 33
KAVIN
WEB DEVELOPMENT 34
KAVIN
WEB DEVELOPMENT 35
KAVIN
WEB DEVELOPMENT 36
KAVIN
WEB DEVELOPMENT 37
3.1.2 Wireframes of Online Library Management tool
Main home page

KAVIN
WEB DEVELOPMENT 38
Home page when root user login

Home page when admin login

KAVIN
WEB DEVELOPMENT 39
Main books page

Books page when a root user login

KAVIN
WEB DEVELOPMENT 40
Books page when admin login

Lending page

KAVIN
WEB DEVELOPMENT 41
Users page

3.1.3
User and system requirements
User requirements
User requirements are mainly derived to gather the use cases of the required systems. These are the
requirements presented by the user in similar words what customers expect from the system. These
requirements are written in simple and natural language, table and diagrams. The reason is for that to be
understandable by the non-technical customers. Even though there are these user requirements does not state

KAVIN
WEB DEVELOPMENT 42
clearly what happens in the system, but they can provide system functionality expectations (Mark and
Lindsley, 2016). The following are the user requirements of online library management system.
 The librarian, students and the professors should be able to register and login to the system
 Users can update their profile details including the password
 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 available 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.)

System requirements
According to Jacob, S. (2015), system requirements are the functionalities that show what is needed by the
system in order to satisfy the customer’s requirements. Unlike the user requirements, these contain more
detailed information of the requirements of the system. Mostly system requirements written with technical
terms since they are for the developers. All the system requirements are recorded in a documentation called
System Requirement Specification. This document serves as the basic for the designing of the system. The
following are the system requirements of online library management tool.
 A common login page should be created to enter username and password to login. The entered data
should be checked against database and redirect to home page if both are correct.
 There should be an update page where users can update their details and an alert will be sent once the
details updated in the database.
 Only the admin (librarian) should have accessibility to user and lending pages.
 Only the admin should have CRUD operations in the books page other authorized users can only view
and request books.
 There should be separate buttons for each book category which will show the books only under
category.
 There should be separate table to update the lending and fine details of the book.

KAVIN
WEB DEVELOPMENT 43
3.2.1 Screenshots of code and interface
Index page

KAVIN
WEB DEVELOPMENT 44
KAVIN
WEB DEVELOPMENT 45
KAVIN
WEB DEVELOPMENT 46
KAVIN
WEB DEVELOPMENT 47
login modal

KAVIN
WEB DEVELOPMENT 48
Login page

KAVIN
WEB DEVELOPMENT 49
KAVIN
WEB DEVELOPMENT 50
Database connection

Footer

Header

Navigation bar

KAVIN
WEB DEVELOPMENT 51
Navigation bar – admin

KAVIN
WEB DEVELOPMENT 52
Scripts

Books

KAVIN
WEB DEVELOPMENT 53
KAVIN
WEB DEVELOPMENT 54
KAVIN
WEB DEVELOPMENT 55
KAVIN
WEB DEVELOPMENT 56
KAVIN
WEB DEVELOPMENT 57
KAVIN
WEB DEVELOPMENT 58
KAVIN
WEB DEVELOPMENT 59
KAVIN
WEB DEVELOPMENT 60
Delete book

KAVIN
WEB DEVELOPMENT 61
KAVIN
WEB DEVELOPMENT 62
Edit book

KAVIN
WEB DEVELOPMENT 63
KAVIN
WEB DEVELOPMENT 64
KAVIN
WEB DEVELOPMENT 65
KAVIN
WEB DEVELOPMENT 66
Update book

KAVIN
WEB DEVELOPMENT 67
KAVIN
WEB DEVELOPMENT 68
KAVIN
WEB DEVELOPMENT 69
Users

KAVIN
WEB DEVELOPMENT 70
KAVIN
WEB DEVELOPMENT 71
KAVIN
WEB DEVELOPMENT 72
KAVIN
WEB DEVELOPMENT 73
KAVIN
WEB DEVELOPMENT 74
KAVIN
WEB DEVELOPMENT 75
KAVIN
WEB DEVELOPMENT 76
KAVIN
WEB DEVELOPMENT 77
Update user

KAVIN
WEB DEVELOPMENT 78
KAVIN
WEB DEVELOPMENT 79
Edit user

KAVIN
WEB DEVELOPMENT 80
KAVIN
WEB DEVELOPMENT 81
KAVIN
WEB DEVELOPMENT 82
KAVIN
WEB DEVELOPMENT 83
Delete user

KAVIN
WEB DEVELOPMENT 84
KAVIN
WEB DEVELOPMENT 85
Lending

KAVIN
WEB DEVELOPMENT 86
KAVIN
WEB DEVELOPMENT 87
KAVIN
WEB DEVELOPMENT 88
KAVIN
WEB DEVELOPMENT 89
KAVIN
WEB DEVELOPMENT 90
Edit lending

KAVIN
WEB DEVELOPMENT 91
KAVIN
WEB DEVELOPMENT 92
KAVIN
WEB DEVELOPMENT 93
KAVIN
WEB DEVELOPMENT 94
KAVIN
WEB DEVELOPMENT 95
Update lending

KAVIN
WEB DEVELOPMENT 96
KAVIN
WEB DEVELOPMENT 97
KAVIN
WEB DEVELOPMENT 98
Interfaces
Home page

KAVIN
WEB DEVELOPMENT 99
Books page

Users page

Login page

KAVIN
WEB DEVELOPMENT 100
3.2.2 Database of the Online Library Management System

Lending table

Role table

KAVIN
WEB DEVELOPMENT 101
User table

Entity relationship diagram

Use case diagram

KAVIN
WEB DEVELOPMENT 102
KAVIN
WEB DEVELOPMENT 103
Activity 04
Test plan
Functionality testing
Links
Test case Result
Links in navigation bar Obtained expected result
Links which jump on same page in books page Obtained expected result
Checking orphan pages No orphan pages found
Checking broken links No broken links found
Forms
Validations on each field Each field has validations
Default values in the fields Necessary fields are filed with default value
Wrong inputs in the forms Error message alerts sent
View, update, add delete functions of the form Expected result obtained
Cookies
creation of a new cookie New cookie successfully created once a new user
login
Delete the cookie Cookie is successfully deleted once the user login
Database connection
connection Successfully connected
Inserting new row Data inserted successfully
Updating new row Data updated successfully
View data Result successful
Delete data Data deleted successfully

Usability testing
Overall usability Easy to use by the users
Instructions Clear and understandable
Navigation Easy navigation in one click

KAVIN
WEB DEVELOPMENT 104
 Main menu Present in every page
Consistency Maintained consistency in every pages
Content checking No grammar and spelling errors.

Interface testing
Web server and application server interface
Application server and database server interface
Interaction between servers are executed and errors
are handled properly
Interaction between servers are executed and errors
are handled properly

Compatibility testing
Browser compatibility Checked and working properly in Internet Explorer,
Firefox, Netscape Navigator, AOL, Safari and
Opera.
OS compatibility Checked and working properly in Windows, Unix,
MAC, Linux and Solaris
Mobile browsing compatibility Checked and working properly in mobile browsers

Add new book

Purpose Test data Expected result Actual result
Check add new book Title = test Details added to the Data added successfully
function Author = test system without any
Type = novel errors
Availability = available

Update book details

Purpose Test data Expected result Actual result
Check update book Change availability of Display message saying Successfully updated
function book id 09 successfully updated message displayed

KAVIN
WEB DEVELOPMENT 105
Delete book details
Purpose Test data Expected result Actual result
Check delete book Delete book ID 09 Book removed from the Book removed from the
function system system.

Add new user

Purpose Test data Expected result Actual result
Check add new user name = test Details added to the Data added successfully
function email = system without any
test@library.com errors
contact = 00000000

Update new user

Purpose Test data Expected result Actual result
Check update book Change availability of Display message saying Successfully updated
function user id 03 successfully updated message displayed

KAVIN
WEB DEVELOPMENT 106
Delete user details
Purpose Test data Expected result Actual result
Check delete user Delete user ID 03 user removed from the User removed from the
function system system.

According to the obtained results from the test plans, the application is working successfully and its ready to
use by the clients. The application also passed the web load and stressing tests but the developer will need to
improve them further more in future with the increasing number of users using the application.
User manual
Login to the system
Step 1: Press the login button in the top right corner of the system

Step 2: type the correct email and password and press login

KAVIN
WEB DEVELOPMENT 107
If the login is successful you will be redirected to the home page, and the username will be displayed

Operations in the books page

Adding a new book
Step 1: Select books from the navigation bar

Step 2: now you are in the books page. Now select add new book button in the bottom of the page

KAVIN
WEB DEVELOPMENT 108
Step 3: now fill the form with accurate detail and press the save button

Once you do this successfully you can see the book in the books page.

Updating the details of the existing book

Step 1: press the pencil icon in blue color of the book you want to edit then it will redirect to the form

Step 2: change the details you wish to change and press update
Step 3: if the process is successful you will get a alert message and press ok in that

KAVIN
WEB DEVELOPMENT 109
Deleting a new book
Step 1: press the delete icon of the book you wish to delete

Step 2: press ok in the alert box

Selecting the book according to the category

Once you press the category button the books in only that category will be shown. For example, if you press
science button only science books will be visible.

If you press the all button again all the books from all category will be visible.

Users page
Adding a new user
Step 1: press users in the navigation bar

KAVIN
WEB DEVELOPMENT 110
Step 2: press the add new user button

Step 3: use the form with appropriate details

Once the inserting process is successful you can see the new entry in the bottom of the page

KAVIN
WEB DEVELOPMENT 111
Users book lending process
step 1: press the request button on the available books

Step 2: once the request is sent press ok in the alert message

Librarian accepting requests from user

Accepting the request: press the blue icon and update the details accordingly (set approved value yes)

Declining the request: set the approved value no and press update

KAVIN
WEB DEVELOPMENT 112
References
Amit Dua, (2020). Top Web Development Technologies and Frameworks of 2020 [Blog]. The Next Scoop.
Available at https://www.google.com/amp/s/thenextscoop.com/web-development-technologies-and-
frameworks/amp/. Accessed on (08th September 2020).

CloudFlare, (2020). DNS server types [Blog]. CloudFlare. Available at

https://www.cloudflare.com/learning/dns/dns-server-
types/#:~:text=What%20are%20the%20different%20types,TLD%20nameservers%2C%20and%20authoritat
ive%20nameservers. Accessed on (08th September 2020).

Eyers, (2020). The Web Communication Protocols [Online]. Eyers. Available at

https://www.eyerys.com/articles/web-communication-
protocols#:~:text=Web%20communication%20protocols%20are%20technology,form%20of%20text%20an
d%20images. Accessed on (08th September 2020).
FrontendMaster, (2020). What is frontend development [Blog]. Frontend Masters. Available at
https://frontendmasters.com/books/front-end-handbook/2018/what-is-a-FD.html. Accessed on (08th
September 2020).
Icecube Digital, (2020). Advantages of Custom Built Sites vs Online Website Builder Tools [Blog]. Available
at https://www.google.com/amp/s/www.icecubedigital.com/blog/advantages-of-custom-built-sites-vs-online-
website-builder-tools/amp/ . Accessed on (08th September 2020).

Internet.com, (2015). What is a DNS server [Blog]. Internet.com. Available at

https://internet.com/domains/what-is-a-dns-server/ accessed on (08th September 2020).
IONOS, (2019). The domain name basics [Onliy]. IONOS. Available at
https://www.ionos.com/digitalguide/domains/domain-tips/what-is-a-domain/ accessed on (08th September
2020).
Krystal, (2020). The 2020 Beginner’s Guide to Backend Development [Blog]. Learn to code with me.
Available at https://learntocodewith.me/posts/backend-
development/#:~:text=Backend%20development%20languages%20handle%20the,product%20to%20the%2
0end%20user. Accessed on (08th September 2020).

KAVIN
WEB DEVELOPMENT 113
Lalith, S. (2015). 15 Effective Web Designing Techniques and Their Importance for Content Gurus. [online]
InstantShift - Web Designers and Developers Daily Resource. Available at:
http://www.instantshift.com/2015/06/12/effective-web-designing-techniques/ [Accessed 12 Nov. 2020].

Margaret Rouse, (2020). Web server [Online]. Whatis.com. available at

https://www.google.com/amp/s/whatis.techtarget.com/definition/Web-server%3famp=1 accessed on (08th
September 2020).
Magento, (2020). Presentation layer [Blog]. Magento. Available at
https://devdocs.magento.com/guides/v2.4/architecture/archi_perspectives/present_layer.html . accessed on
(08th September 2020).

MDN web doc, (2020). What is a web server [Online]. MDN web doc. Available at
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server accessed on
(08th September 2020).
Neil Patel, (2020). SEO Made Simple: A Step-by-Step Guide for 2020 [Online]. Neil Patel. Available at
https://www.google.com/amp/s/neilpatel.com/what-is-seo/%3famp (accessed on 08th September 2020).
Nicole Freguson, (2020). What’s The Difference Between Frontend And Backend Web Development?
[Online]. Career Foundry. Available at https://careerfoundry.com/en/blog/web-development/whats-the-
difference-between-frontend-and-backend/ (accessed on 08th September 2020).
Wikipedia Contributors (2020). Adobe Dreamweaver. [online] Wikipedia. Available at:
https://en.wikipedia.org/wiki/Adobe_Dreamweaver [Accessed 20 Oct. 2020].

W3schools.com. (2011). Bootstrap Get Started. [online] Available at:

https://www.w3schools.com/bootstrap/bootstrap_get_started.asp [Accessed 20 Oct. 2020].

W3schools.com. (2020). jQuery Introduction. [online] Available at:

https://www.w3schools.com/jquery/jquery_intro.asp [Accessed 20 Oct. 2020].

KAVIN
WEB DEVELOPMENT 114
KAVIN
WEB DEVELOPMENT 115