Higher Nationals
Internal verification of assessment decisions – BTEC (RQF)
INTERNAL VERIFICATION – ASSESSMENT DECISIONS
Programme title
BTEC Higher National Diploma in Computing
Assessor
Unit(s)
Assignment title
Internal Verifier
Unit 10: Web Design and Development
Online Library Management System
Student’sname
List which assessment
criteria the Assessor has
awarded.
Pass
Merit
Distinction
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria awarded match
those shown in the assignment brief?
Is the Pass/Merit/Distinction grade awarded
justified by the assessor’s comments on the
student work?
Has the work been assessed
accurately?
Y/N
Y/N
Y/N
Is the feedback to the student:
Give details:
• Constructive?
• Linked to relevant assessment
criteria?
Y/N
Y/N
• Identifying opportunities for
improved performance?
Y/N
• Agreeing actions?
Y/N
Does the assessment decision need
amending?
Y/N
Assessor signature
Date
Internal Verifier signature
Date
Programme Leader signature(if
required)
Date
1
Confirm actioncompleted
Remedial actiontaken
Give details:
Assessor signature
Date
Internal Verifier
signature
Date
Programme Leader
signature(ifrequired)
Date
2
Higher Nationals - SummativeAssignment FeedbackForm
Student Name/ID
UnitTitle
Unit 10: Website Design & Development
Assignment Number
1
Assessor
Submission Date
Date Received 1st
submission
Re-submission Date
Date Received 2nd
submission
Assessor Feedback:
LO1. Explain server technologies and management services associated with hosting and managing websites.
Pass, Merit & Distinction
P1
P2
M1
M2
Descripts
LO2. Categorise website technologies, tools and software used to develop websites.
Pass, Merit & Distinction
Descripts
P3
P4
M3
D1
D1
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
Descripts
Grade:
P7
M5
D3
Assessor Signature:
Date:
Assessor Signature:
Date:
ResubmissionFeedback:
Grade:
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:
(Provide E-mail ID)
Date:
(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
8
And send a response to the client
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
9
Data transmission over the Internet – IP and DNS
Each computer on the Internet has its own unique IP address (e.g )
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
10
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
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 upto-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.
11
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.
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
12
notebook computers are not fast-growing. A virtual server or virtual hosting is more than one server
per machine.
Web server software
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
13
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.
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
14

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
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.
15
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.
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.
16
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.
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
17
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
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.
18
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.
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.
19
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).
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.
20
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
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″ />.
21
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.
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:
22

HTML / CSS

Javascript

php

Skills and technologies
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.
23
Generated content
There are two ways to design a website. First one to design webpage is statistically or dynamically.
24
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
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:
25
Content
What will be shown on this page?
Structure
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.
26
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
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
27
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
Login Page
28
Users page
Books Page
29
Issued Books page
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
31
3.3 Critically evaluate the web design and development process against your design document and
analyse any technical challenges you faced in development.
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.
32
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 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.
33
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).
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.
34
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
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.
35
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
Checking
Enter Username
Normal
Access granted
Username and
and Password
Password
Wrong Username
Result
Case
no
1
message displayed
Error
or Password
Error message
displayed
Table 1
Add Student Records Details Forms
Test Case
Test
Action
no
Test
Expected Outcome
Result
Type
Add New
2
Cancel
Click on the Add
Normal
Add new students
New
for library to
button
Database
Click on the Cancel
Normal
Reset Form
Normal
Delete the record
button
Delete
Click on the Delete
button
form Database
Table 2
36
Add user’s feedback details Forms
Test Case
Test
Action
no
2
Test
Expected Outcome
Result
Type
Save
Click on the Save
coordinator
coordinator details
Information
button
Cancel
Click on the Cancel
Normal
Save coordinator
details to Database
√
Normal
Reset Form
√
Normal
Delete the records
√
button
Delete
Click on the Delete
button
form Database
Table 3
Add Books Category Forms
Test Case
Test
Action
no
Test
Expected Outcome
Result
Add New Books to
√
Type
Add New
Click on the Add
Normal
New
2
Database
button
Cancel
Click on the Cancel
Normal
Reset Form
√
button
Delete
Click on the Delete
Normal
button
Delete the recode
form Database
√
Expected Outcome
Result
Save attendance
√
Table 4
Add Return books records web Forms
Test Case
Test
Action
no
2
Test
Type
Save return
Click on the Save
book
attendance button
Normal
details to Database
information
37
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.

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.
38
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.
39
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
1.0
Date
Description
05/06/2019
Initial Création
Validation
Representative
Validator
Date
40
Contents
Purpose of the document .......................................................................................... 40
Document history .................................................................................................... 40
Validation ................................................................................................................ 40
1.
Icons Used in the Manuel ................................................................................... 41
2.
Presentation of the Solution ............................................................................ 42
2.1
Brief description
42
2.2
Descriptives Icons
42
2.3
Project players
42
2.4
Support
42
2.5
Referenced Documentation
42
2.6
History of the Solution
42
3.
Connecting to the Application ........................................................................... 43
3.1
Address
43
3.2
Authentication
43
4.
Structuring of the Application ........................................................................... 43
4.1
Website design for IT Online library System
43
4.2
Menus
44
4.3
Icons / Shortcuts
44
4.4
Functionalities
44
48
Operations
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
41
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
Referenced Documentation
Final_Report of the project
History of the Solution
42

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.
Connecting 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
Password :test
Structuring of the Application
Website design for Librarian Registration
43

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
44
Login Page
Users page
45
Books Page
Issued Books page
46
Returned Books page
47
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
48
References
[1] McConnell, Steve (June 2004). Code Complete, Second Edition. Microsoft Press. p. 960. ISBN 0-73561967-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.
49
50
Grading Rubric
Grading Criteria
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 backend website technologies and explain how these relate to presentation
and application layers.
P4 Discuss the differences between online website creation tools and
A c hc ui es vt oemd builtFseiteeds bwaicthk 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.
51
52
Observation Sheet
Activit
y
No
Activity
1
Explain
server
technologie
s and
manageme
nt services
associated
with
hosting and
Learnin
g
Outcom
e
LO1
Feedbac
k
(Pass/
Redo)
Plan to
review the
performanc
e and
design of a
multipage
website.
Comments:
managing
websites.
2
categorize
website
technologie
s, tools and
software
used to
develop
websites.
LO2
3
Utilize
website
technologie
s, tools and
techniques
with good
design
principles
LO3
Assessor
Name
:……………………………………………
.
Date
:……………………………………………
.
Assessor
Signature
:……………………………………………
.
to create a
multipage
website.
4
Create and
use a Test
LO4
53