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
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)

1
 Confirm action completed
Remedial action taken

Give details:

Assessor signature Date

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

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.

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

4
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.
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.

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: Date:

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

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.

Assignment Brief and Guidance:

7
 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.
The Internet The Internet is a global WAN – a network of networks
It is based on a client-server network model Hundreds of thousands of web-servers throughout the
world provide resources and services to millions of clients
Communication between computers on the Internet largely takes place using the TCP/IP protocol,
although other protocols, such as FTP, are also used
How the web works The client-server model
Client and server operate on machines which are able to communicate through a network
The server waits for requests from a client
Server receives a requests from a client
Performs a the requested work
Or lookup the requested data
And send a response to the client

8
Servers: file servers, web servers, name servers
Clients: browsers, clients

Web browsers and servers

A browser: is a program that can retrieve files from the world wide web and render text, images, or
sounds encoded in the files.
i.e. IE, Chrome, Mozilla
A web server: is an application which waits for client requests, fetches requested documents from disk
and transmits them the client.
i.e Apache
 Microsoft (IIS)
 Sun

The Application Layer Protocols

 Layer 7 of the OSI 7 Layer model is called the application layer.
 This layer defines Application layer protocols.
 The most common application layer protocols used between clients and web servers include:
 HTTP (Hyper Text Transfer Protocol)
 HTTPS (Hyper Text Transfer Protocol Secure)
 FTP (File Transfer Protocol)

URL
When a website or page is requested the URL (Uniform Resource Link) is typed into the browser.
A URL tells a web browser (e.g. Firefox, Internet Explorer) where to look for a specified resource
Clicking a hyperlink sends a HTTP request to the host web server (HTTP is the is the transfer protocol
used for the transfer of pages on the Web. It works in conjunction with TCP/IP)
The URL will consist of Protocol Server Name The resource (file) *The Port Number

Data transmission over the Internet – IP and DNS

Each computer on the Internet has its own unique IP address (e.g )

9
Users can not possibly remember long, abstract strings of numbers like IP addresses
To make it easier to remember, a Domain Name System (DNS) is used to convert IP addresses to
domain names
The DNS has a hierarchical structure with several levels
 The root domain (Internet root domain)
 Top-level domains (e.g. .edu, .com, .gov, etc.)
 Second-level domains (e.g. Amazon, Birkbeck, Google)
 Third level domains (sales, finance, Home Office)
DNS is a worldwide network of data bases and domain names for domain names and IP addresses. This
database is global. Hurray is a DNS server. The DNS server can be defined as the following:

DNS Server
It is also a DNS server. Its main objective is to deal with the above mentioned database. These DNS
servers translate the domain name embedded in the IP address corresponding to the URL of the web
browser. Today, the largest digital database, the domain name system, has thousands of DNS servers
around the world.

Identify the purpose and types of DNS

DNS - A domain name system is a stunning technology. It helps us open IP addresses without delay. We
can easily write the domain name and have DNS to find the IP address of the domain we are writing to.
As in your phone's book, as well, as you want to find Mike, and you write "Mike", you do not want to
remember his actual number, is it not excellent?

DNS is an essential part of the Internet. It manages all the queries to IP addresses. In this way, it can
detect various devices connected to the network.

Information request
If you want to access our website and you know the domain name. If you are writing it in your browser,
if it first goes to your previous location, check for local caches, and the DNS query will not be found to
find the answer.
Recursive DNS servers

10
If you do not go to the previous page, your computer will answer the reversed DNS server of your
Internet service provider. You can get the result. If they do not, they will want to find information in a
different location.

Root name servers

Your query can take a long way. The next step are the servers. They are the same as the intermediate
ones. They do not know the answer, but know where to find it.

Top-Level Domain (TLD) name servers

Name servers will be forwarded to the left-right-side readings and the top TLD for the server (.com or
other). These TLD clients will guide you at the right time with the correct server.

Authoritative DNS servers

Check DNS records for DNS records for information. There are other records, for example, we request
our website to report the IP address for the site.

Retrieve the record

We provide a website with a record track record from an e-mail server. Its native memory is stored. If
anyone wants a hostile record easily for the same website, if there is information already, it is not
necessary to travel through all these steps. All of these data expire. In this way, users will receive up-
to-date information.

The final answer

Now it's sending this server to a report it to your computer. To save the computer, read the IP address
and give your information to your browser. The browser connects to the web server, you can finally
see the site.

What is a domain name?

A domain name or domain is a structural label that connects to a specific IP (Internet Protocol) address
of a web hosting web host. Here is an example: https://domain.me is a domain name on our own
website. We declare that you will see us. Let's look at the structure of the domain.

11
1.2 Define the types of DNS and the uses of it, with clarifications on how domain names are structured.
DNS TLD’s Examples of top level domains include: http://www.iana.org
TLD’s (Top Level Domains) know about the location of a DNS server for individual domains but only
forward the request rather than resolve the request.
Examples of top level domains include:
 .com –commercial companies (Verisign)
 .org –non-commercial (public interest registry)
 .gov –US government use.
 .edu –education use.
 .ac.uk –UK academic/educational use.
DNS CCTLD’s CCTLD’s (Country Code Top Level Domains)
HTTP Server
The term "web server" refers only to the HTTP server software that provides the functionality of the
machine. HTTP is the web and HTTP server protocol, such as Microsoft's IIS and open source apache
servers, accepting requests from the browser's browser, and replying HTML documents (web pages)
and files. It also has a server (CGI script, JSPs, ASPs, etc.) and performs tasks such as searching
databases and credit cards.

Built in to hardware too

It's not just web servers. The HTTP server software generally builds a hardware-based hardware
component to configure the device from any hard drive. Includes small websites for many network
devices, such as routers, access points, and printed servers.

Web server hardware

The primary function of the web server is the implementation and response of web server requests
sent using HTTP. Web server’s memory, large and fast hard disk drives, and normal desktop or
notebook computers are not fast-growing. A virtual server or virtual hosting is more than one server
per machine.

Web server software

12
 Server software is a software designed to use, operate and manage a server. Facilitates the use of the
underlying server computer to use high-end computer services and functions.
Examples of CCTLD’s and their allocation.
 .au –Australia
 .bb –Barbados
 .ca –Canada
 .de –Germany
 .is –Iceland

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.
Success in search engine optimization (SEO) requires not only an understanding of where Google’s algorithm
is today but an insight to where Google is heading in the future.

13
Based on my experience, it has become clear to me Google will place a stronger weight on the customer’s
experience with page load speed as part of their mobile-first strategy. With the investment Google has made
in page performance, there are some indicators we need in order to understand how critical this factor is now
and will be in the future. For example:

AMP — Specifically designed to bring more information into the search engine results pages (SERPs) in a way
that delivers on the customer’s intent most expeditiously. Google’s desire to quickly serve the customer
“blazing-fast page rendering and content delivery” across devices and media begins with Google caching more
content in their own cloud.

Google Fiber — A faster internet connection for a faster web. A faster web allows for a stronger internet
presence in our everyday lives and is the basis of the success of the internet of things (IoT). What the internet
is today is driven by content and experience delivery. When fiber installations reach critical mass and gigabit
becomes the standard, the internet will begin to reach its full potential.
CSS

CSS is a Cascading Style Sheet. CSS web designers can change the colors, fonts, animations and websites. They
look good.
LESS – a CSS pre-compiler to make working with CSS easier and add functionality
SASS – a CSS pre-compiler to make working with CSS easier and add functionality

Programming languages
Languages of the programming language to communicate and what to do in it. Languages in different
languages (English, Spanish, French, Chinese, etc.) have a variety of programming languages. Not better than
the other. Developers usually make a couple better than others, because they are merely talented. The
following are just a few of their backing and languages
 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 by the Django framework 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

14
Google Developer Guidelines — 200-millisecond response time and a one-second top of fold page load time,
more than a subtle hint that speed should be a primary goal for every webmaster.
Now that we are aware page performance is very important to Google, how do we as digital marketing
professionals work speed and performance into our everyday SEO routine?

A first step would be to build the data source. SEO is a data-driven marketing channel, and performance data
is no different from positions, click-through rates (CTRs) and impressions. We collect the data, analyze, and
determine the course of action required to move the metrics in the direction of our choosing.

With page performance tools it is important to remember a tool may be inaccurate with a single
measurement. I prefer to use at least three tools for gathering general performance metrics so I can
triangulate the data and validate each individual source against the other two.

Data is only useful when the data is reliable. Depending on the website I am working on, I may have access to
page performance data on a recurring basis. Some tool solutions like DynaTrace, Quantum Metric, Foglight,
IBM and TeaLeaf collect data in real time but come with a high price tag or limited licenses. When cost is a
consideration, I rely more heavily on the following tools:

Google Page Speed Insights — Regardless of what tools you have access to, how Google perceives the
performance of a page is really what matters.

Pingdom.com — A solid tool for gathering baseline metrics and recommendations for improvement. The
added capability to test using international servers is key when international traffic is a strong driver for the
business you are working on.

GTMetrix.com — Similar to Pingdom, with the added benefit of being able to play back the user experience
timeline in a video medium.
WebPageTest.org — A bit rougher user interface (UI) design, but you can capture all the critical metrics.
Great for validating the data obtained from other tools.

Use multiple tools to capitalize on specific benefits of each tool, look to see if the data from all sources tells
the same story. When the data is not telling the same story, there are deeper issues that should be resolved
before performance data can be actionable.

15
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.

Web development comes with a huge set of rules and techniques every website developer should
know about. If you want a website to look and function as you wish them to, you need to get familiar
with web technologies that will help you achieve your goal. Developing an app or a website typically
comes down to knowing 3 main languages: JavaScript, CSS, and HTML. And while it sounds quite
complicated, once you know what you are doing, understanding web technology and the way it works
becomes significantly easier.

Browsers
Browsers request information and then they show us in the way we can understand. Think of them as
the interpreters of the web. Here are the most popular ones: Google Chrome – Currently, the most
popular browser brought to you by Google Safari – Apple’s web browser Firefox – Open-source
browser supported by the Mozilla Foundation

HTML & CSS

HTML is the one of the one you should learn first. Thanks to HTML, the web browsers know what to
show once they receive the request. If you want to better understand how HTML works, you also need
to know what CSS is. CSS stands for Cascading Style Sheets and it describes how HTML elements are to
be displayed on the screen.

Carefully placed header tags

The readers are removed from a large text line. Organize and organize your site content in a way that
can be read and read easily and followed. Always separated for use by distances and inconveniences,
and turning it naturally into the stream.

16
Inbound and Outbound links
Links in the Google Serial Algorithm are a key factor. How this works is because the search engine is
partly based on the reliability and relevance of our website, which links it to other websites. One
source says: "If we travel online as confidence-based voter names, the number of votes we receive
from different domains will be more powerful than the single domain."

Visual Contact helps to transform our site into a reliable source of information, and links to other sites
on our site from other websites and the SEO site.

Image optimization
Evidence suggests that a good burial image can increase translation rates in a website. The best way to
apply the signature based on the search terms is according to the relevant keywords. The simplest tool
is to add 'alt' and 'title' tags to images. Technology recommended by Google Publication Guides. The
'Alt' tag describes the function of the image and its image. Tell us what's on the screenwriter's
screenshots

Update content regularly

The simplest and simplest idea is that you would like a higher quality than Google. A very well-ranked
blogger says, "I'm not paying attention to a ton of tons; I'm often trying to push as much of the content
as possible."

Watch broken links

Web links are based on, and SEO's basics are on the background of your website. When someone clicks
a link to a broken Web site, bad things will happen - the user's frustration, our credibility reduces, and
our page rankings are detrimental. So, broken links is a very bad thing for SEO.
Web Development Frameworks

Web development frameworks are a starting point of items that a developer can use to avoid doing the
simple or mundane tasks, and instead get right to work.

Angular

17
 Angular is one of the latest web technologies designed specifically for developing dynamic web
applications. With this framework, you can easily create front-end based applications without needing
to use other frameworks or plugins.

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.

18
Backend developer is responsible for this ‘not visual’ part of application. If there is need to save some
information, it creates connection to DB and can do CRUD (create, read, update, delete) operation on
records. Frontend developer is responsible for ‘visual’ part of application. He creates interface that you
often clicks on.

Relationship between them is really close. If you want to develop good product, you have to have
harmonious team. Cooperation between those 2 types of developers is important at the beginning of
project. They has to establish some data schema and authorization type for project

Both are necessary components for a high-functioning application or website. It’s not uncommon for
companies to get tripped up by the “front-end versus back-end” divide when trying to navigate the
development of new software.

After all, there are a growing number of tools on the market aimed at helping developers become
more “full stack” oriented, so it’s easy for non-technicians to assume there isn’t a big difference
between front-end and back-end specialists. Front-end and back-end developers do work in tandem to
create the systems necessary for an application or website to function properly. However, they have
opposite concerns. The term “front-end” refers to the user interface, while “back-end” means the
server, application and database that work behind the scenes to deliver information to the user.

The user enters a request through the interface.

It’s then verified and communicated to the server, which pulls the necessary data from the database
and sends it back to the user. Here’s a closer look at the difference between front-end and back-end
development.

What is Front-End Development?

The front-end is built using a combination of technologies such as Hypertext Markup Language (HTML),
JavaScript and Cascading Style Sheets (CSS).

19
Front-end developers design and construct the user experience elements on the web page or app
including buttons, menus, pages, links, graphics and more.

HTML
Hypertext Markup Language is the core of a website, providing the overall design and functionality.
The most recent version was released in late 2017 and is known as HTML5.2.
The updated version includes more tools aimed at web application developers as well as adjustments
made to improve interoperability.

CSS
Cascading style sheets give developers a flexible, precise way to create attractive, interactive website
designs.

JavaScript
This event-based language is useful for creating dynamic elements on static HTML web pages.
It allows developers to access elements separate from the main HTML page, as well as respond to
server-side events.

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).
the single most important point about a custom-built website is that your site is designed and built to
specifically to support your established brand in a consistent way.

Other advantages include

There are no limitations on graphics and functionality. If you can imagine it, a custom site can be
programmed to do it.

Custom-built sites are flexible and can grow with you. Down the road you might need significant
changes to not only the design, but also the functionality of your site. If you’re working with a template
site, you may have to start over in the event of major changes. It’s much easier to add new features to

20
 a custom site.

Custom-built sites are easier to update as WordPress is updated. Your developer will be able to fix any
problems that might occur as WordPress is updated, because they can change the coding of the site. If
a WordPress update breaks a template site that hasn’t been maintained by the template developer,
you’re out of luck and are stuck running an older version of WordPress. This makes your site more
vulnerable to hackers.

Search engine optimization is better in custom-built sites. Web developers who build sites from scratch
have the technical knowledge to make sure your site is optimized for search engines.

It’s generally easy to see if a website was created using a template, or if it is custom-built. The first step
is to view the site’s source code. Here’s how to access the code:

In Google Chrome: Open the site and go to the “Tools” menu, and select “view source”; alternatively,
hit Ctrl + U
In Internet Explorer, Mozilla Firefox, or Apple Safari: Right-click on the website and choose “View
source”
You’ll see a page of source coding, which may be pretty intimidating if this is unfamiliar territory – but
don’t worry, this isn’t difficult! Toward the top of the page, in the paragraph that begins <head>, scan
through the code and look for the “generator” meta tag to see which Content Management System is
being used.

Examples:
A website built on the WordPress platform may contain this: <meta name=”generator”
content=”WordPress 3.8.1″ />.
A website built on the Joomla platform may contain this: <meta name=”generator” content=”Joomla!
1.5 – Open Source Content Management” />

2.3 Compare and contrast the tools and techniques available to design and develop a custom-built web
Applications.

21
Website designing requires many important tasks like discipline production in website and website
maintenance. While designing a simple or modern web page, you must have many things in your mind.
There are many important website design area like:
 Web graphic design
 Interface design
 Authoring
 User experience design
 Search engine optimization
 Standardized code and proprietary software
 Tools and technologies

There are different tools and techniques used for designing webpage. It does not mean that all members in
a team use the same tools and techniques for designing a webpage. While choosing your tool and
technique for creating webpage, keep in mind all required things so that you will not face any problem in
future.

Tools those are used for website designing:

 Pixate
 Affinity
 Avocode
 Antetype
 Sketch
 UXPin
 Form
 Macaw
 Marvel
 Webflow
Simple technologies used for website designing are:
 HTML / CSS
 Javascript
 php
 Skills and technologies

22
Page layout
User interface design is totally affected by page layout. Page layout design of web page may be consistent
or in consistent. For example, if you are designing a web page, you must set width and breadth same for
each type of field. According to that page layout, units are sent to the web browser and which will be
fitted into your browser display.

Marketing and communication design

Many type of markets are available that need to a website for successful run of their business. While
designing website, you must keep in mind what type of website you are designing and what
communication strategy they required. Web designers also keep in mind type of webpage like business to
business website design, retail or entertainment website. Web designers must also consider the reputation
of the business and owner in the market.

User experience design and interactive design

Web designer consider how the web page works and understand the working of web page. User
experience is directly depends on the layout. If layout is well featured, user will come to your webpage
again and again. As the interactive website is, user will use it more and more.

Typography
Web designers also use different type of font faces for their web pages. Web designers recognize specific
number of safe fonts for all types of browsers.

Motion graphics
Page layout and user interface affected by motion graphics. Motion graphics create issues those are not
initiated by the site browser.

Generated content
There are two ways to design a website. First one to design webpage is statistically or dynamically.

23
 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,

24
 multipage website supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design
For what reason would it be advisable for me to utilize wireframes?

There is a fundamental arrangement on our site. The principle objective is to tell the customer the best
way to develop the structure before the site. Clients by and large maintain their own organizations.
Proceed quickly on what they have to spotless and clean them.

What occurs in the event that I don't utilize wireframes?

By making a basic site structure, any natural situating can be immediately changed to address your
customer's issues. A snappy clarification of what should be on the different pages of your site,
regardless of whether it's a speedy layer on scratch paper.

Components of a wireframe

What to incorporate into a wireframe

Consider the fundamental highlights when arranging every site page: header, footer, side sites and
substance. From that point onward, consider extra components: Navigation Bars, Widgets and Buttons.

When we have a thought regarding the components, we would now be able to begin our wireframe
plan.

All highlights of Wireframe are for the most part shown and take the accompanying focuses:

Content

What will be shown on this page?

Structure

25
How might I add highlights to this page?

Pecking order

How to position these labels, naming and size?

Usefulness

How do these components cooperate?

Conduct

How is this element connecting with the client?

Wireframe instruments

There are many strategies to make a wireframe running from basic representations to a high constancy
nearly completed wireframe. The apparatuses you choose to utilize rely upon individual inclination and
undertaking prerequisites. A few people are searching for a less complex quick paced framework, while
others are bound to trust mockups, in the event that they take a little longer time on the task scope.
Each apparatus has its favorable circumstances and cares, and there is no "best" instrument for the
wireframe. Any offices we use and any work for our benefit.

HTML/CSS

On the off chance that the HTML and CSS are in our expertise list, we can make a code and contact our
photos. It's a less expensive device for wireframe on our site and offers notwithstanding
frames.Creating HTML wireframes may add time to your procedure from the time we start wireframe
to the moment that we have customer endorsement. Be that as it may, it might well decrease extra

26
 correspondence and work after our wireframes are endorsed, since the outline has just been finished.
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.

Website design for Librarian Registration

 All Users (system-common interfaces)

 Home page
 Login page (Using User Name, Password)
 Books page (To post forum)

Menus

 Complaint details

 User types

Icons / Shortcuts

Functionalities
User Login

All the system users will log in to the system by typing their user name and password on this interface

Client profile
This is the client’s profile page. For each client in my Online library System system they have their
unique profile

Client registration
This web form is filled by the user or client operator
Home page

27
Login Page

Users page

28
Books Page

Issued Books page

29
Returned Books page

30
 Add Books page

User/Student registration
This web form is filled by the system administrator. When new staff member comes he will enter the
required details of the user and click on the submit button
Handle complaint details
This web form is filled by the user or client operator
Overall Operations of the developed Library Management application

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

31
Multipage locales are something contrary to their single page partners. Multipage sites will show or
show a similar substance, yet will show it on different pages.

They must be supreme for a wide scope of substance, associations with items or administrations. A
great many pages or a huge number of items on one page will be hard to show.

Multipage sites are more typical than single-page locales, and many think a definitive web
improvement venture.

Multipage locales are better for progressively complex web extends that require more page content, or
improved usefulness. The endeavor to control progressively content on one page of the site is risky to
the general understanding of a client, and they are hard to discover and connect with what they have
visited.

For enormous sites, for example, an internet business site, this is the probably course you need to do.
In any case, you should contemplate the arrangement of your site, to enable clients to locate the
substance they are looking for as fast as would be prudent.

Specifically, look through must be completed with web based promoting endeavors.

When somebody utilizes a web crawler, it attempts to get the most significant outcomes. This is valid
for natural Search, which can likewise be connected to installment contentions. This implies for similar
questions in nature, we should make separate pages for each title or catchphrases. We can't do it with
a site in one page. As we can't be sure, it is a finished arrangement of each size. Thusly, numerous page
destinations have a huge bit of leeway over this pager.

At that point, on the off chance that you've reappeared this exchange (the way toward giving
promotions to clients who have recently visited our site), at that point multi-page locales will
fundamentally have a higher hand. This is hard to trigger a duplicated pixel/content, which is
progressively entangled. Our CRM is connected to our web investigation, and the future prospect is

32
sent to the business group when we visit a specific page.

For multi-page destinations, this usefulness is basically straight out of the case, though for one page
locales some type of custom arrangement would be required. This implies from an advertiser's point of
view, multi-page sites hold a particular bit of leeway over their single page cousins.

On the off chance that we have little items or administrations, we couldn't care less about the most
progressive advertising techniques, for example, SEO, PPC and re-deal, a possibility for a one page site.

Be that as it may, on the off chance that we have 10 items or administrations or our substance is
amazingly unpredictable and mind boggling, one can't furnish a cordial client involvement with a one
page or an adequate profundity of substance. So also, on the off chance that we are essential to
advertising, the degree of advancement of an's application on one page is constrained, and in this
manner a multipage site might be the most proper arrangement.

For instance, our items and administrations are recorded on our 'landing page' and there is a third
alternative when utilizing a blog or point of arrival apparatus to help our endeavors in showcasing. This
does not work for all associations. Along these lines, master counsel ought to be gotten from
significant partners.

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.

33
 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).

The software testing is a critical element of software quality assurance and represents the ultimate
review of specification design and coding. Testing is an exposure of a system to trial input to see
whether software meets correct output. Testing cannot be determined whether software meets user’s
needs, only whether it appears to confirm to requirements. Testing can show that a system is free of
errors, only that it contains error. Testing finds errors, it does not correct errors. Software success is a
quality product, on time and within cost. Through testing can reveal critical mistakes. Testing should
therefore,
 Validate Performance
 Detects Errors
 Identify Inconsistencies

Test Objective
There is strong evidence that effective requirement management leads to overall project cost savings.
The three primary reasons for this are,
Requirement errors typically cost well over 10 times more to repair than other errors.
Requirement errors typically comprise over 40% of all errors in a software project. Small reduction in
the number of requirement errors pays big dividend in avoided rework costs and schedule delays.
System are not designed as entire systems nor are they tested as single systems the analyst must perform
both unit and system testing. For this different level testing are use:
Unit Testing
In unit testing Module is tested separately and the programmer simultaneously along with the coding of
the module performs it. In unit testing the analyst tests the programs making up a system. For this
reason, unit testing is sometime called program testing. Unit testing gives stress on modules
independently of one another, to find errors. This helps the tester in detecting errors in coding and logic
that are contained within that module alone.
The errors resulting from the interaction between modules are initially avoided. Unit testing can be
performed from the bottom up, Starting with smallest and lowest-level modules and proceeding one at a
time., for each module in Bottom-up testing a short program is used to execute the module and provides
the needed data, so that the module is asked to perform the way it will when embedded within the larger
system.
System Testing

34
This is performed after the system is put together. The system is tested against the system requirement to
check if all the requirements are met and if the system performs of specify by the requirements. Testing
is an important function to the success of the system. System testing makes a logical assumption that if
all the parts of the system are correct, the goal will be successfully activated. Another reason for system
testing is its utility as a user-oriented vehicle before implementation.
System Testing Consists of Following Five Steps:
1. Program Testing:

A program represents the logical elements of a system. For a program to run satisfactorily, it must
compile and test data correctly and tie in properly with other programs. It is the responsibility of a
programmer to have an error free program. At the time of testing the system, there exist two types of
errors that should be checked. These errors are
a) Syntax error
b) Logic error
A syntax error is a program statement that violates one or more rules of the language in which it is
written. An improperly defined field dimension or omitted key words are common syntax errors. These
errors are shown through error messages generated by the Computer. A logic error, on the other hand,
deals with incorrect data fields out of range items, and invalid combinations.

String Testing
Programs are invariably related to one another and interact in total system. Each program is tested to see
whether it confirms to related programs in the system. Each part of the system is tested against the entire
module with both test and live data before the whole system is ready to be tested.
System Testing
System testing is designed to uncover weaknesses that were not found in earlier tests. This includes
forced system failure and validation of total system, as its user in the operational environment will
implement it.

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.
Login Page
Test Test Action Test Type Expected Outcome Result

35
 Case
no
Checking Enter Username Normal Access granted
1 Username and and Password message displayed
Password Wrong Username Error Error message
or Password displayed
Table 1

Add Student Records Details Forms

Test Case Test Action Test Expected Outcome Result
no Type
Add New Click on the Add Normal Add new students
2 New for library to
button Database
Cancel Click on the Cancel Normal Reset Form
button

Delete Click on the Delete Normal Delete the record

button form Database

Table 2

Add user’s feedback details Forms

Test Case Test Action Test Expected Outcome Result
no Type
Save Click on the Save Normal Save coordinator
2 coordinator coordinator details details to Database √
Information button

Cancel Click on the Cancel Normal Reset Form √

button

36
 Delete Click on the Delete Normal Delete the records √
button form Database

Table 3
Add Books Category Forms
Test Case Test Action Test Expected Outcome Result
no Type
Add New Click on the Add Normal Add New Books to √
2 New Database
button
Cancel Click on the Cancel Normal Reset Form
button √

Delete Click on the Delete Normal Delete the recode

button form Database √

Table 4

Add Return books records web Forms

Test Case Test Action Test Expected Outcome Result
no Type
Save return Click on the Save Normal Save attendance √
2 book attendance button details to Database
information

Cancel Click on the Cancel Normal Reset Form

button √

Delete Click on the Delete Normal Delete the records

button form Database √

Table 5

Here I am going to write the scenario based on these requirements.

 Username should contain letter, number and period.
 Username should not be left blank.
 Username should not be more than 30 characters.

37
  Username should not start with or contain any symbols.
 Password should be at least 6 characters.

Test Scenarios
 Write down the test scenarios based on the following test types
 User Interface
 Here are some of the questions that can help you form test cases.
 Where is the cursor focus in text area when you load the page?

Positive test cases

 Enter valid username and password.
 Click on forgot password link and retrieve the password for the username.
 Click on register link and fill out the form and register username and password.

Negative test cases

 Enter valid username and invalid password.
 Enter valid password but invalid username.
 Keep both fields blank and hit enter or click login button.

Testing Full Name Field

 Check the Full name text field without Prefix.
 Check the Full name text field without adding First name.
 Check the Full name text field without adding Last name.

38
 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.
LIBRARY MANAGEMENT SYSTEM
USER MANUAL

Purpose of the document

The document explained my developed Online library System application all implemented related
information.

Document history

Version Date Description

1.0 05/06/2019 Initial Création

Validation

39
 Representative Validator Date

Contents

Purpose of the document............................................................................1

Document history........................................................................................1
Validation....................................................................................................1
1. Icons Used in the Manuel.....................................................................2
2. Presentation of the Solution.................................................................3
2.1 Brief description 3
2.2 Descriptives Icons 3
2.3 Project players 3
2.4 Support 3
2.5 Referenced Documentation 3
2.6 History of the Solution 3
3. Connecting to the Application..............................................................5
3.1 Address 5
3.2 Authentication 5
4. Structuring of the Application..............................................................6
4.1 Website design for IT Online library System 6
4.2 Menus 7
4.3 Icons / Shortcuts 7
4.4 Functionalities 7
Operations 8

40
Icons Used in the Manuel

Throughout this document, the pictograms below are used to underline points or important notions

Important information

Good to know - Tricks

Risk in front of a parameter setting or of a specific action

Action to be avoided

Mandatory action

Sensitive or difficult procedure. To take into account necessarily

Actions reserved for the Administrator of my application

Actions reserved for the User or Customer of my application

Presentation of the Solution

Brief description
I developed this system namely Online Library management System. The KLibrary management System
is a new method which hopes to identify the most suitable defects of currently occur in real time with
the help of pattern matching techniques

Descriptive Icons

Project players
Administrator

User/Customer

Support

I got the support  request here below following methods:

 Telephone
 E-mail
 Dedicated application

41
 Referenced Documentation
Final_Report of the project

History of the Solution

 The proposed system which is a web based solution that will mainly provide functionalities such
as avoiding time duplication, program duplication as well as client’s solutions and multiple
concurrent accesses to the data by employees and by the head of the authorities of School

 The proposed system will provide user authentication, report generation and database
connectivity.

 Therefore we will implement a system database to centralize the relevant data.

Co
nnecting to the Application

Address
You must connect to the application using the following address:

In my local machine I used the below URL:

URL : http://localhost:2714/LibraryApp/home.aspx

Authentication

For Administrator, Please use below credentials

User Name: admin

Password :admin

For User or Customer, Please use below credentials

User Name: test

42
 Password :test

Structuring of the Application

Website design for Librarian Registration

 All Users (system-common interfaces)

 Home page
 Login page (Using User Name, Password)
 Books page (To post forum)

Menus

 Complaint details

 User types

Icons / Shortcuts

Functionalities
User Login

All the system users will log in to the system by typing their user name and password on this interface

Client profile
This is the client’s profile page. For each client in my Online library System system they have their
unique profile

Client registration
This web form is filled by the user or client operator
Home page

43
Login Page

Users page

44
Books Page

Issued Books page

45
Returned Books page

46
 Add Books page

User/Student registration
This web form is filled by the system administrator. When new staff member comes he will enter the
required details of the user and click on the submit button
Handle complaint details
This web form is filled by the user or client operator
Overall Operations of the developed Library Management application

Operations
This section will list all normal and special operations required by the user. The normal operations in my
system are displayed below.
 Handling user
 Create account
 Identify problems
 Identify problems exist in DB or not
 Identify most suitable technician
 User shares the answer, what he knows about that problem.
 Post irrelevant thing the system check that answer and automatically remove.
 Create suggestion documents

References

47
 [1] McConnell, Steve (June 2004). Code Complete, Second Edition. Microsoft Press. p. 960. ISBN 0-
7356-1967-0.
[2] McConnell, Steve (July 2, 1996). Rapid Development. Microsoft Press. p. 680. ISBN 1-55615-900-5.
[3] Leffingwell, Dean; Don Widrig (May 16, 2003). Managing Software Requirements: A Use Case
Approach, Second Edition.Addison-Wesley Professional. p. 544. ISBN 0-321-12247-X. [5] MySql Bible by
Steve Suehring Publisher: John Wiley & Sons
[4] http://codeapogee.com/tools-techniques-material-design-developing-web-page/

[5] https://www.codementor.io/nicolesaidy/getting-started-with-wireframes-du107vuh7

[6] https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end

[7] https://www.klood.com/blog/gdd/one-page-vs-multi-page-website-design-pros-cons

[8] Leffingwell, Dean; Don Widrig (May 16, 2003). Managing Software Requirements: A Use Case
Approach, Second Edition.Addison-Wesley Professional. p. 544. ISBN 0-321-12247-X. [5] MySql Bible by
Steve Suehring Publisher: John Wiley & Sons
[9] Abels,E.G.,White,M.D.,& Hahn,K.(1999).A user-based design process for Web sites. OCLC Systems
and Services,Vol.15,No.1,pp.35-44.
[10] Amaratunga,D.,Baldry,D.,Sarshar,M.& Newton,R (2002). Quantitative and Qualitative
research in the built environment:application of mixed research approach.Work
Study,Vol.51,No.1,pp.17-31.

Grading Rubric P1 Identify the purpose and types of DNS, including explanations on how
Grading Criteria domain names are organized and managed.

Explain the purpose and relationships between communication protocols,

LO1 Explain server technologies and management services associated with
server hardware, operating systems and web server software with regards to
hosting and managing websites
designing, publishing and accessing a website.
Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and
management.

48
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).

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.

49
 techniq
ues with
Observation Sheet good
design
Acti Activity Learn Feed principle
vity ing back s to
No Outc (Pass
ome / create a
Redo) multipa
1 Explain LO1
server ge
technol website.
ogies 4 Create LO4
and and use
manage a Test
ment Plan to
services review
associat the
ed with perform
hosting ance
and and
design
managin of a
g multipag
website e
s. website.
2 categori LO2
ze
website Comments:
technol
ogies,
tools Assessor Name :
and …………………………………………
softwar ….
e used Date :
to …………………………………………
develop ….
websites Assessor Signature :
…………………………………………
. ….
3 Utilize LO3
website
technol
ogies,
tools
and

50