Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title HND in Computing

Assessor Internal Verifier
Unit 10: Web Design And Development
Unit(s)
Online Library Management System
Assignment title

Student’s name J.M.G.M Jayamaha

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/
• Linked to relevant assessment criteria? N
• Identifying opportunities for Y/
improved performance? N
• Agreeing actions? Y/
N
Does the assessment decision need
Y/N
amending?

Assessor signature Date

Internal Verifier signature Date

Programme Leader signature (if required)
Date

Confirm action completed

Remedial action taken
Give details:

Assessor signature Date

Internal
Date
Verifier
signature
Programme Leader
Date
signature (if
required)
Higher Nationals - Summative Assignment Feedback Form
Student Name/ID J.M.G.M Jayamaha
Unit 10: Web Design And Development
Unit Title

Assignment Number 01 Assessor Mr. Thanuja Sandaruwan

Date Received
Submission Date
1st submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:
LO1 Use an appropriate design tool to design a relational database system for a substantial problem

Pass, Merit & Distinction P1 M1 D1

Descripts

LO2 Develop a fully functional relational database system, based on an existing system

design Pass, Merit & Distinction P2 P3 M3 M3

D2
Descripts

LO3 Test the system against user and system requirements.

Pass, Merit & Distinction P4 M4 D2
Descripts

LO4 Produce technical and user documentation.

Pass, Merit & Distinction P5 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.

Assignment Feedback
Formative Feedback: Assessor to Student

Action Plan

Summative feedback

Feedback: Student to Assessor

Assessor Date
signature

Student Date
signature
Pearson Higher Nationals in
Computing
Unit 10: Web Design & Development
Assignment 01
General Guidelines

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

Word Processing Rules

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

Important Points:

1. It is strictly prohibited to use textboxes to add texts in the assignments, except for the
compulsory information. eg: Figures, tables of comparison etc. Adding text boxes in the body
except for the before mentioned compulsory information will result in rejection of your
work.
2. Carefully check the hand in date and the instructions given in the assignment. Late
submissions will not be accepted.
3. Ensure that you give yourself enough time to complete the assignment by the due date.
4. Excuses of any nature will not be accepted for failure to hand in the work on time.
5. You must take responsibility for managing your own time effectively.
6. If you are unable to hand in your assignment on time and have valid reasons such as illness,
you may apply (in writing) for an extension.
7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
8. Non-submission of work without valid reasons will lead to an automatic RE FERRAL. You will
then be asked to complete an alternative assignment.
9. If you use other people’s work or ideas in your assignment, reference them properly using
HARVARD referencing system to avoid plagiarism. You have to provide both in-text citation
and a reference list.
10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be
reduced to A REFERRAL or at worst you could be expelled from the course
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 form. 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 Edexcel UK.
3. I know what the consequences will be if I plagiarise 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 aspect of my program, will be my
own, and where I have made use of another’s work, I will attribute the source in the correct
way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding
agreement between myself and Pearson, UK.
6. I understand that my assignment will not be considered as submitted if this document is not
attached to the assignment.

Student’s Signature: Date: 06/06/2021

(Provide E-mail ID) (Provide Submission Date)
Higher National Diploma in Computing
Assignment Brief
Student Name /ID Number J.M.G.M Jayamaha/ GAM\A-015254

Unit Number and Title Unit 10: Web Design & Development

Academic Year 2020/21

Unit Tutor Mr. Thanuja Sandaruwan

Assignment Title Online Library Management System

Issue Date

Submission Date

IV Name & Date

Submission format

Part 1: Report- Submit a professional report with appropriate report formatting and guidelines
Followed. All the research data should be referenced along with in-text citations using Harvard
Referencing system.
Part 2: A fully functional web solution

Unit Learning Outcomes:

LO1 Explain server technologies and management services associated with hosting and
managing websites
LO2 Categorize website technologies, tools and software used to develop websites.
LO3 Utilize 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:

Assignment brief
Scenario.
‘Apex Design Works’ is a leading web design and marketing company. They are focused
on helping
businesses communicate more effectively and build their business through creative
design. You work as
an apprentice web developer for Apex Web Design and marketing company. As part of
your role, you
have been asked to create a Website for Lowa State University.
Lowa State University, Library is currently doing their work manually (Borrowing books, returning
books or viewing
the available books). Online Library Management System is a best solution to overcome this
problem. This system
would be used by members who may be students or professors of that University to check the
availability of the
books and borrow the books., The librarian can update the member details and the book lending
details.
The Online Library Management System will include the following information.
• The librarian, students and the professors can register and login to the system
• Any of the above users can update their profile details including the password
• The authorized users can reserve a book for 24hours
• The authorized users can check book availability
• The librarian can check the member status and update the lending details (If the book is for the
lending)
• The system allows the Librarian to create the books catalog, add/delete books and maintain the
books
catalog.
• The librarian can update the book return details
• The librarian can calculate the fine for the late returns if necessary
• The users can search the books according to the categories (Novels, Frictions, etc.)

Develop a web based solution for the above scenario and produce a report covering the
following tasks.0
 Activity 1
Task 1 - Server technologies and management services associated with hosting and managing
websites (LO1)
1.1 Explain and differentiate the communication protocols, server hardware, operating systems and
web server
software with regards to designing, publishing and accessing the website given in the scenario.
1.2 Identifry and define the types of DNS and the uses of it, with clarifications on how domain names
are
structured. Review the effect of search engines on website performance . Provide evidence-based
support for
improving a site’s index value and rank through search engine optimization.
1.3 Identify and explain the common web development technologies and frameworks. Explain the
tools and
techniques chosen to the web application and hence justify, by giving reasons, why a web application is
suitable for the given scenario.cc

Activity 2

Task 2 -Categories website technologies, tools and software used to develop websites (LO2)
2.1 Define the relationships between front-end and back-end website technologies and discuss how
the front-end
and the back-end relate to presentation and application layers.
2.2 Critically compare the different between online website creation tools and custom-built sites
Considering thed Followings: design flexibility, performance, functionality, User Experience (UX) and
User Interface (UI). Evaluate the tools and techniques available to design and develop a custom-built
web
Applications.
 Activity 3

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

Activity 4

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

LO1 Explain server technologies and management services

associated with hosting and managing websites

P1 Identify the purpose and types of DNS, including explanations

on how domain names are organized and managed.
P2 Explain the purpose and relationships between communication
protocols, server hardware, operating systems and web server
software
with regards to designing, publishing and accessing a website.
M1 Evaluate the impact of common web development
technologies and frameworks with regards to website design,
functionality and management.
M2 Review the influence of search engines on website
performance and
provide evidence-based support for improving a
site’s index value and rank through search engine optimization.
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
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
P5 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.
Table of Contents
Higher Nationals..............................................................................................................................1
Internal verification of assessment decisions – BTEC (RQF)....................................................1
Higher National Diploma in Computing.......................................................................................7
Assignment Brief.....................................................................................................................7
Task 1 - Server technologies and management services associated with hosting and managing
websites (LO1)...........................................................................................................................15
1.1 Explain and differentiate the communication protocols, server hardware, operating
systems and web server.........................................................................................................15
1.2 Identify and define the types of DNS and the uses of it, with clarifications on how
domain names are structured. Review the effect of search engines on website performance.
Provide evidence-based support for improving a site’s index value and rank through search
engine optimization...............................................................................................................20
1.3 Identify and explain the common web development technologies and frameworks.
Explain the tools and techniques chosen to the web application and hence justify, by giving
reasons, why a web application is suitable for the given scenario.cc....................................25
Task 2 -Categories website technologies, tools and software used to develop websites (LO2) 29
2.1 Define the relationships between front-end and back-end website technologies and
discuss how the front-end and the back-end relate to presentation and application layers.
..............................................................................................................................................29
2.2 Critically compare the different between online website creation tools and custom-built
sites.......................................................................................................................................31
Considering the Followings: design flexibility, performance, functionality, User Experience
(UX) and User Interface (UI). Evaluate the tools and techniques available to design and
develop a custom-built web Applications.............................................................................31
Task 3 - Utilize website technologies, tools and techniques with good design principles to
create a multipage....................................................................................................................34
website (LO3)............................................................................................................................34
3.1 Design a suitable web application solution for the given scenario using PHP, JS and
MySQL (Screenshots of..........................................................................................................34
important code lines with proper comments and user interfaces filled with sample data
must be attached to..............................................................................................................34
the documentation. Apply a database design for the proposed system and provide the well
normalized............................................................................................................................34
database design of the proposed system). Provide evidences of the design, multipage
website supported with........................................................................................................34
fidelity wireframes and a full set of client and user requirements........................................34
3.2 Compare and contrast the multipage website created to the design document. Use your
design document...................................................................................................................54
with appropriate principles, standards and guidelines to produce a branded, multipage
website supported................................................................................................................54
with realistic content and Critically evaluate the web design ,development process against
your design............................................................................................................................54
 document analyisng any technical challenges you faced during the development...............54
3.3 ........................................................................................................................................57
Note - Synthesize client and the server-side functionalities in the proposed design............57
Task 4 - Create and use a Test Plan to review the performance and design of a multipage
website (LO4)...........................................................................................................................62
4.1 Evaluate the Quality Assurance (QA) process and review how it was implemented during
your design and.....................................................................................................................62
development stages..............................................................................................................62
QA process is expected to discover design issues and development errors while testing a
product’s user.......................................................................................................................62
interface (UI) and gauging the user experience (UX).............................................................62
4.2 Create a suitable test plan and Critically evaluate the results of your Test Plan and
include a review of the..........................................................................................................63
overall success of your multipage website; use this evaluation to explain any areas of
success and provide..............................................................................................................63
justified recommendations for areas that require improvement..........................................63
4.3 Prepare a user documentation to properly guide the users of the implemented system.
..............................................................................................................................................64
Note: User documentation should be simple and understandable by anyone. Use
screenshots and provide stepwise guidance.........................................................................64
Task 1 - Server technologies and management services associated with
hosting and managing websites (LO1)

1.1 Explain and differentiate the communication protocols, server hardware, operating
systems and web server

Protocol

Different types of networking operating systems uses different digital languages to

control the communication process between the computers. These languages is called
Network protocols.

Web Link- https://lowastateuniversitylibrary3.000webhostapp.com/

Username- university

Password- 1234

Files- https://drive.google.com/drive/folders/1VTMcL_uUOp3QDrtse68fwNAwlmxi-
u99?usp=sharing

The Web Communication Protocols

People have get used to browse the internet by using a web browser such as Internet
Explorer, Google Chrome, Mozilla Firefox, Safari etc. A web browser is a software
application used for retrieving, presenting and traversing information resources on the
World Wide Web (WWW). An information resource is identified by a Uniform Resource
Identifier (URI) and may be a web page, image, video, or other piece of content.

A web browser lets your computer communicate with web servers around the world and
allows the user to access the required information via World Wide Web. Different web
browsers have different way of retrieving information, but each and every one of them
follows a set of web communication protocols.

Web communication protocols are technology used to transfer information across the
internet.

Types of Communication Protocols

 Hyper Text Transfer Protocol (HTTP)

 Telnet

 File Transfer Protocol (FTP)

 Hyper Text Transfer Protocol Secure (HTTPS)

 IP Security

 Domain Name System (DNS)

 Simple Mail Transport Protocol (SMTP)

Domain Name System (DNS)

The Domain Name System (DNS) is the phonebook of the Internet. Humans access
information online through domain names, like esoft.lk or udemy.com. Web browsers
interact through the Internet Protocol (IP) addresses. DNS translates domain names to IP
Addresses so that the browsers can load relevant Internet resources.

Each device which is connected to the Internet has a unique IP address which other
machines use to locate the particular device. DNS servers eliminate the need for humans
to memorize IPv4 addresses such as 192.168.2.3 , or more complex newer alphanumeric
IPv6 addresses such as 2400:cb00:2048:1::c629:d7a2.

(What is DNS?, 2021)

HTTP – Hyper Text Transfer Protocol

HTTP is a communication protocol. It defines the mechanism for communication
between browser and the web browser. It is also known as the request and response
protocol because the communication the communication between the browser and the
server takes place in request and response pairs.

HTTPS

HTTP over or HTTP Secure is the use of Secure Socket Layer (SSL) or Transport Layer
Security (TLS) as a sublayer under regular HTTP application layering. HTTPS encrypts
and decrypts user page requests as well as the pages that are returned by the web server.
The use of HTTPS protects against eavesdropping. HTTPS is used for secure browsing.

Server Hardware

Although servers are different from personal computers yet in many ways server
hardware is not too different from desktop hardware. Both of the personal computers and
servers are made up of the same basic components like Power Supplies, Memory
Devices, and the Central Processing Unit. Each and every component in a server system
tends to be more advanced than the ones found in Personal Computers.

Types of Servers

1. Tower Servers.

2. Rack Servers.

3. Blade Servers.

Web Server Software

Server software is a type of software that is designed to be used, operated and managed
on a computing server.
  Web server software

 Application server software

 Database server software

 Cloud computing server software

 File server software

Operating System and Web Servers

The foundational software on your server is the operating system. Basically the operating
system is the basis on which everything else we use runs.

Different Types of Operating Systems

 Mac OS: the proprietary operating system put out by Apple

 Microsoft Windows: Colloquially referred to as PC systems

 Chrome OS: found on what is marketed as Chromebooks

 Linux: typically offered on machines geared toward technical/enterprise purchaser

Operating Systems for Web Servers

A web server is a system that delivers content or services to end users over the internet.
A web server consists of a physical server, server operating system (OS) and software
used to facilitate HTTP communication. A web server is also known as an internet server.

A server operating system, also called a server OS, is an operating system specifically
designed to run on servers, which are specialized computers that operate within a
client/server architecture to serve the requests of client computers on the network.

The server operating system, or server OS, is the software layer on top of which other
software programs, or applications, can run on the server hardware. Server operating
systems help enable and facilitate typical server roles such as Web server, mail server, file
server, database server, application server and print server.

Web Hosting

When a hosting provider allocates space on a web server for a website to store its

files, they are hosting a website.

Main types of Web Hosting

 Shared

 Dedicated

 VPS

 Reseller
 1.2 Identify and define the types of DNS and the uses of it, with
clarifications on how domain names are structured. Review the effect of
search engines on website performance. Provide evidence-based support
for improving a site’s index value and rank through search engine
optimization.

DNS (Domain Name System)

What is DNS?

The Domain Name System (DNS) is the phonebook of the Internet. Humans access
information online through domain names, like esoft.lk or udemy.com. Web browsers
interact through the Internet Protocol (IP) addresses. DNS translates domain names to IP
Addresses so that the browsers can load relevant Internet resources.

Each device which is connected to the Internet has a unique IP address which other
machines use to locate the particular device. DNS servers eliminate the need for humans
to memorize IPv4 addresses such as 192.168.2.3 , or more complex newer alphanumeric
IPv6 addresses such as 2400:cb00:2048:1::c629:d7a2. (What is DNS?, 2021)
The process of viewing a website.

Client computer queries the local DNS resolver for where to go --and waits patiently for
the resolver to do all the heavy work.

•The local DNS resolver queries the root servers for the registrar responsible for the
information, gets a reply and goes on to the next step.

•The DNS resolver now asks the registrar for the name(s) and address (es) of the server(s)
responsible for knowing all the details about the domain name. These are called name
servers.

•The DNS resolver now queries the name servers (which it knows to be authoritative
because it started from the root) for the IP address of the server that hosts the web site
you've clicked to view, and receives it.

•The local resolver sends that IP address back to the client computer, which can now it
looks up on the Internet in a format that makes sense to it, rather than to us.

A Domain Name System (DNS) server performs the task of resolving a domain name to
an IP address.

There are different types of DNS Servers.

 Root Servers

 Primary(Master) Servers

 Secondary Servers

 Caching-only Servers

 Forwarding Servers

Components of a Domain

URL or Universal Resource Locator is the complete file address used to locate any page
on our Website. However Domain is a part of a URL. Domain names usually come after
the “@” sign of an email address and after the “www” in a web address. 

Example for a Domain – ESOFT.LK

Domain can be discussed under main two sections.

 Second – Level Domain: Represents our Name, Brand Name or Company Name
chosen by us.

In ESOFT.LK, ESOFT is the second level domain.

 Top – Level Domain: Domain Extensions found at the end of the Domain Name.
Top – Level Domain can be either a Country-code top level domain or a Generic
top level domain.

Search Engine
A search engine is a software program or script available through the Internet that
searches documents and files for keywords and returns the results of any files containing
those keywords.

Search Engine Optimization

Search Engine Optimization, which is the practice of increasing the quantity and quality
of traffic to your website through organic search engine results.

Crawling

Crawling is the process by which search engines discover updated content on the web,
such as new sites or pages, changes to existing sites, and dead links.

Indexing

Once a search engine processes each of the pages it crawls, it compiles a massive index
of all the words it sees and their location on each page. It is essentially a database of
billions of web pages.

Ranking

As SEO’s this is the area we are most concerned with and the part that allows us to show
clients tangible progress.

A search engine affects the web site performance immensely. Mainly if we can improve
the Search Engine Optimization then our web site or web service application relevant to
our business can fully function to its standards and we can get more profits from our
business.

Ways to improve our Site’s Ranking by SEO

  Publish relevant content.

 Update the content regularly.

 Metadata

 Have a link worthy site.

 Use alt tags (University Marketing and communications, 2021)

Evidence-based support for improving a site’s index value and rank through search
engine optimization.

It is utilized and used by almost all websites online that intend to generate income as well
as get to online popularity. Amongst the many strategies of maximizing a internet site,
Search Engine Optimization website design is just one of the upper concerns.

The influence of the design of the website on search engine robot spiders or crawlers can
assist increase the ranking of the site. This is where SEO website design can be found in.
There are numerous methods to make the web site more appealing to robotic visitors and
human site visitors alike. Actually, crawlers and spiders from search engines do incline
the overall aesthetic value of the website. All these robotic spiders need is the information
it can obtain from the website. The difficult part is how to place appropriate details in the
site in order for the spiders to correctly index the site because of its importance. Search
Engine Optimization business that focuses best search engine optimization app on
enhancing website should likewise understand just how to place a site in front of others in
order to bring it to the attention of the Net individuals. The search optimizers that will
certainly handle your site must be able to recognize the best approaches to put the web
site ahead of others in its field with accepted techniques of optimization.

Search Engine Optimization web design is a competitive area where internet designers, or
what I favor to call site engineers, strive to find up with ideas as well as styles that are
cosmetically attractive as well as relevant at the same time. There needs to be
consideration for simplicity of getting around the site, being enticing to a wide variety of
site visitors and discovering the right place for the site. Making a standard, aesthetically
appealing site is easy with the many technologic developments available today, the
problem with these developments is that they are sometimes quite difficult to use
therefore making your web site tough to browse in. SEO website design should be easy to
use and also pleasant to both human and robot internet browsers.
 1.3 Identify and explain the common web development technologies and
frameworks. Explain the tools and techniques chosen to the web
application and hence justify, by giving reasons, why a web application is
suitable for the given scenario.cc

Web Development

Web development broadly refers to the tasks associated with developing websites for
hosting via intranet or internet. The web development process includes web design, web
content development, client-side/server-side scripting and network security configuration,
among other tasks. Web development is also known as website development.

Web development technologies refer to the multitude of programming languages and

tools that are used to produce dynamic and fully-featured websites and applications.

Web development technologies as Front End Technologies (Client Side) and Back End
Technologies (Sever Side).
 1. HTML

HTML stands for Hyper Text Mark Up Language. It provides structure of a website so
that web browsers know what to show.HTML is the standard markup language for
creating Web pages. It provides the base structure for a web page. HTML code ensures
that all the content on a website is properly formatted.

2. CSS

CSS is a Cascading Style Sheet. CSS let’s web designers change colors, fonts,
animations, and transitions on the web. They make the web look good. HTML is used to
structure a web page, CSS specifies the appearance of that structure. 

3. Programming Languages

Web developers use a set of programming languages for Web Development.

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

  Objective-C-the programming language behind iOS (your iPhone), lead by Apple

 Swift-Apple’s newest programming language

 Java-Used by Android (Google) and a lot of desktop applications.

JavaScript

JavaScript is the most used language by startups for a few reasons. It can be used as both
a front-end and back-end programming language. Compared to other languages,
JavaScript is comparatively easy-to-learn (although all languages come with some
difficulties), and it’s used everywhere in custom web application development. It’s also
constantly being updated and expanded with new features. All the following are back-end
languages that make a website or application work (Little, 2021)

PHP

PHP is the most common language in web development. WordPress, a content

management system (CMS) that powers 34% of the Internet, is built on PHP. Finding a
good developer can be difficult regardless of language, but choosing a popular one like
PHP will give you a larger pool of developers to choose from and work with. PHP also
comes with extensive online documentation and tutorials for troubleshooting and support.
(Little, 2021)

Frameworks

Frameworks are built to make building and working with programming languages easier.
Frameworks typically take all the difficult, repetitive tasks in setting up a new web
application and either do them for you or make them very easy for you to do. There are
both front-end and back-end frameworks that streamline the development process.
 Node.js-a server-side JavaScript framework

Ruby on Rails-a full-stack framework built using ruby

Django-a full-stack framework built using python

Phone gap / Cordova-a mobile framework that exposes native ape’s of iOS and
Android for use when writing JavaScript

Bootstrap-a UI (user interface) framework for building with

HTML/CSS/JavaScript

.NET-a full-stack framework built by Microsoft

Angular.js-a front-end JavaScript framework.

Ember.js-a front-end JavaScript framework.

Backbone.js-a front-end JavaScript framework.

4. Library

Libraries are groupings of code snippets to enable a large amount of functionality without
having to write it all by yourself. Libraries typically also go through the trouble to make
sure the code is efficient and works well across browsers and devices.

 React.js

 Vue.js

 jQuery

 Underscore

Databases
Databases are where all your data is stored. They provide a consistent, organized structure
for storing and retrieving large amounts of data.

There are two main types of databases as SQL and NoSQL.

 MySQL: An open-source SQL database. MySQL is used in WordPress websites.

 MongoDB: An open source NoSQL database.

 Oracle: Oracle Database is a proprietary database management system. It’s

commonly used for running online transaction processing, data warehousing and
mixed database workloads. (Little, 2021)

We are assigned to create a web page for the Library for the Lowa State University as a
Web Designer for the Apex Design Works Company. In this case after a thorough case
study I decided that a Web application is most suitable for this scenario focusing on the
basic requirements of the Library because you have to connect a Database for this Library
application at the back end which contains all the information about the books, students
etc. and the web page made via HTML should be the viewing context for the user or the
student. Therefore just a Web page is not necessarily enough for the process of a Library,
so I decided a Web Application should be used in this scenario.

Task 2 -Categories website technologies, tools and software used to

develop websites (LO2)

2.1 Define the relationships between front-end and back-end website

technologies and discuss how the front-end and the back-end relate to
presentation and application layers.

Front End and Back End

Front end and back end are the most popular terms used in web design and development.
Both these ends are very important for web development. Each of the front end and the
back end need to do their distinct work and need to stay in line connected with each other
for the proper functionality of the Web site.

Front End Development

Front end is the part of a web site which is directly interacting with the user. Front end is
also referred to be as the client side. The structure, design and content of a web site is
designed by front end developers. Responsiveness and performance should be clearly
visible to the user when entering the website such that the front end development should
be done to view a responsive web page.

Front end languages: HTML, CSS, JavaScript.

Front end frameworks and libraries: AngularJS, React.js, Flutter, jQuery.

Back End Development

Back end is the server side of a web site or a web application. It stores and arrange data
entered by the client side of the web site. Server side is the hidden portion of a website
which the user is not able to access. Many of the activities like creating libraries and
writing API are also done by back end development.

It’s the place where functions, methods, and data manipulation happens that you don’t
what the client’s to see.

Backend languages: PHP, C++, Java, Python, JavaScript, Node.js

Back end frameworks: Express, Django, Larvel.

Relationship among the front end, back end with the presentation and application layer

Front-End and Back-Ends refers to the separation of concerns between the presentation
layer, application layer and database layer. The application layer is there at the front end
and at the back end we can find the application layer and the database layer.

Presentation Layer

The presentation layer is the front end layer of the web application. Its main component is
GUI which allows the users to interact with the web application.

Application Layer

The logic for all application services is contained within the application layer, which lies
between the presentation layer and the data layer, which is mostly written in Java, .NET,
C #, Python, C++, etc.

Database Layer

The database and the data access layer are part of Database layer and these systems may
include MySQL, Oracle, MongoDB, Microsoft SQLServer and Application layer
accesses data through API calls.

Presentation layer is mostly deployed to the desktop, tablets and phones either through
web browser or through web-based application utilizing a web server as well as
application layer is mostly hosted in cloud or in dedicated workstation which depend
upon the complexity and processing power required by the application. There are the
different benefits of using three-layer architecture such as speed of development,
scalability, performance and availability as well as it also helps to improve development
efficiency by allowing team to focus on their core competencies.

2.2 Critically compare the different between online website creation tools
and custom-built sites
Considering the Followings: design flexibility, performance, functionality,
User Experience (UX) and User Interface (UI). Evaluate the tools and
techniques available to design and develop a custom-built web
Applications.

Difference between Online Web Site Creation Tools and Custom Built Sites

Online Web Creation:

Most of the Websites are produced and developed with the use of CMS (Content
Management System) which helps the companies to update their sites easily and quickly
without any technical support. WordPress is an open source blogging tool and a CMS.
Drupal, Joomla, DotNetLuke are some examples for CMS.

Custom Built Sites

A custom built site is designed to fit a certain subject area. The important thing about
custom built website is that it is designed to support an established brand in a consistent
way.

Advantages of custom built sites,

 There are no limitations about graphics and functionality.

 Custom built sites are flexible and can grow with you.

 Easier to update.

 Search Engine Optimization is better in custom built sites.

Tools and techniques available to design and develop a custom-built web
Applications.

Custom built site is done by the team members which starts with the creative method
which helps to make understand the target of the audience, reach our destination,
functions and many more. All the rules and regulations are followed by custom built site
while designing and developing the websites and not all the themes are able of long
lasting by these rules. This is why, custom built sites are more popular and superior.
Normally, it takes 6 to 8 days to develop a website. We can built our own website
according to our needs with the help of custom built design..

Web development tools allow web developers to test and debug their code. They are
different from website builders and integrated development environments (IDEs) in that
they do not assist in the direct creation of a webpage, rather they are tools used for testing
the user interface of a website or web application.

 HTML

 CSS

 JavaScript Libraries

 API tools
 Task 3 - Utilize website technologies, tools and techniques with good
design principles to create a multipage
website (LO3)

3.1 Design a suitable web application solution for the given scenario using
PHP, JS and MySQL (Screenshots of
important code lines with proper comments and user interfaces filled with
sample data must be attached to
the documentation. Apply a database design for the proposed system and
provide the well normalized
database design of the proposed system). Provide evidences of the design,
multipage website supported with
fidelity wireframes and a full set of client and user requirements.

Home Page Visible To the Student.

PHP code for Index Page

<?php
    session_start();
?>
<!DOCTYPE html>
<html>
<head>
    <title>
        Online Library Management System
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
    nav
    {
        float: right;
        word-spacing: 30px;
        padding: 20px;
    }
    nav li 
    {
        display: inline-block;
        line-height: 80px;
    }
</style>
</head>

<body>
    <div class="wrapper">
        <header>
        <div class="logo">
            <img src="images/9.png">
            <h1 style="color: white;">ONLINE LIBRARY MANAGEMENT SYSTEM</
h1>
        </div>

        <?php
        if(isset($_SESSION['login_user']))
        {
            ?>
                <nav>
                    <ul>
                        <li><a href="index.php">HOME</a></li>
                        <li><a href="books.php">BOOKS</a></li>
                        <li><a href="logout.php">LOGOUT</a></li>
                        <li><a href="feedback.php">FEEDBACK</a></li>
                    </ul>
                </nav>
            <?php
        }
        else
        {
            ?>
                        <nav>
                            <ul>
                                <li><a href="index.php">HOME</a></li>
                                <li><a href="books.php">BOOKS</a></li>
                                <li><a href="student_login.php">LOGIN</
a></li>
                                <li><a href="registration.php">SIGN-
UP</a></li>
                                <li><a href="feedback.php">FEEDBACK</a></
li>
                            </ul>
                        </nav>
        <?php
        }
            
        ?>

            
        </header>
        <section>
        <div class="sec_img">
            <br><br><br>
            <div class="box">
                <br><br><br><br>
                <img src="images/1.png">
                <h1 style="text-align: center; font-size: 35px;">Welcome T
o The Library of Lowa State University</h1><br><br>
                <h1 style="text-align: center;font-size: 25px;">Opens at: 
08:30 </h1><br>
                <h1 style="text-align: center;font-size: 25px;">Closes at: 
17:00 </h1><br>
            </div>
        </div>
        </section>
        

    </div>
    <?php  

        include "footer.php";
    ?>
</body>
</html>
Student Login Page
 PHP code for Student Login Page

<?php
  include "connection.php";
  include "navbar.php";
?>

<!DOCTYPE html>
<html>
<head>

  <title>Student Login</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/
bootstrap.min.js"></script> 
  
  <style type="text/css">
    section
    {
      margin-top: -20px;
    }
  </style>   
</head>
<body>

<section>
  <div class="log_img">
   <br>
    <div class="box1">
        <h1 style="text-align: center; font-size: 35px;font-family: Lucida 
Console;">Library Management System</h1>
        <h1 style="text-align: center; font-size: 25px;">User Login For
m</h1><br>
      <form  name="login" action="" method="post">
        
        <div class="login">
          <input class="form-control" type="text" name="username" placehol
der="Username" required=""> <br>
          <input class="form-control" type="password" name="password" plac
eholder="Password" required=""> <br>
          <input class="btn btn-default" type="submit" name="submit" valu
e="Login" style="color: black; width: 70px; height: 30px"> 
        </div>
      
      <p style="color: white; padding-left: 15px;">
        <br><br>
        <a style="color:yellow; text-decoration: none;" hre
f="update_password.php">Forgot password?</a> &nbsp &nbsp &nbsp &nbsp &nbsp 
        New to this website?<a style="color: yellow; text-decoration: none
;" href="registration.php">&nbspSign Up</a>
      </p>
    </form>
    </div>
  </div>
</section>

  <?php

    if(isset($_POST['submit']))
    {
      $count=0;
      $res=mysqli_query($db,"SELECT * FROM `student` WHERE username='$_POS
T[username]' && password='$_POST[password]';");
      
      $row= mysqli_fetch_assoc($res);
      $count=mysqli_num_rows($res);

      if($count==0)
      {
        ?>
              <!--
              <script type="text/javascript">
                alert("The username and password doesn't match.");
              </script> 
              -->
          <div class="alert alert-danger" style="width: 600px; margin-
left: 370px; background-color: #de1313; color: white">
            <strong>The username and password doesn't match</strong>
          </div>    
        <?php
      }
      else
      {
        $_SESSION['login_user'] = $_POST['username'];
        $_SESSION['pic']= $row['pic'];

        ?>
          <script type="text/javascript">
            window.location="profile.php"
          </script>
        <?php
      }
    }

  ?>

</body>
</html>

Sign Up Page for a new user

PHP code for Sign Up Page

<?php
  include "connection.php";
  include "navbar.php";
?>

<!DOCTYPE html>
<html>
<head>

  <title>Student Registration</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/
bootstrap.min.js"></script> 

  <style type="text/css">
    section
    {
      margin-top: -20px;
    }
  </style>   
</head>
<body>

<section>
  <div class="reg_img">

    <div class="box2">
        <h1 style="text-align: center; font-size: 35px;font-family: Lucida 
Console;"> &nbsp &nbsp &nbsp  Library Management System</h1>
        <h1 style="text-align: center; font-size: 25px;">User Registration 
Form</h1>

      <form name="Registration" action="" method="post">
        
        <div class="login">
          <input class="form-control" type="text" name="first" placeholde
r="First Name" required=""> <br>
          <input class="form-control" type="text" name="last" placeholde
r="Last Name" required=""> <br>
          <input class="form-control" type="text" name="username" placehol
der="Username" required=""> <br>
          <input class="form-control" type="password" name="password" plac
eholder="Password" required=""> <br>
          <input class="form-control" type="text" name="roll" placeholde
r="Roll No" required=""><br>
          <input class="form-control" type="text" name="email" placeholde
r="Email" required=""><br>
          <input class="form-control" type="text" name="contact" placehold
er="Phone No" required=""><br>

          <input class="btn btn-default" type="submit" name="submit" valu
e="Sign Up" style="color: black; width: 70px; height: 30px"> </div>
      </form>
     
    </div>
  </div>
</section>

    <?php

      if(isset($_POST['submit']))
      {
        $count=0;

        $sql="SELECT username from `student`";
        $res=mysqli_query($db,$sql);

        while($row=mysqli_fetch_assoc($res))
        {
          if($row['username']==$_POST['username'])
          {
            $count=$count+1;
          }
        }
        if($count==0)
        {
          mysqli_query($db,"INSERT INTO `STUDENT` VALUES('$_POST[first]', 
'$_POST[last]', '$_POST[username]', '$_POST[password]', '$_POST[roll]', '$
_POST[email]', '$_POST[contact]', 'p.jpg');");
        ?>
          <script type="text/javascript">
           alert("Registration successful");
          </script>
        <?php
        }
        else
        {

          ?>
            <script type="text/javascript">
              alert("The username already exist.");
            </script>
          <?php

        }

      }

    ?>

</body>
</html>

Books Page

PHP code for Books Page

<?php
  include "connection.php";
  include "navbar.php";
?>

<!DOCTYPE html>
<html>
<head>
    <title>Books</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .srch
        {
            padding-left: 1000px;

        }
        
        body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

.sidenav {
  height: 100%;
  margin-top: 50px;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #222;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: white;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.img-circle
{
    margin-left: 20px;
}
.h:hover
{
    color:white;
    width: 300px;
    height: 50px;
    background-color: #00544c;
}

    </style>

</head>
<body>
    <!--_________________sidenav_______________-->
    
    <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&time
s;</a>

            <div style="color: white; margin-left: 60px; font-size: 20px;
">

                <?php
                if(isset($_SESSION['login_user']))

                {   echo "<img class='img-circle profile_img' height=120 w
idth=120 src='images/".$_SESSION['pic']."'>";
                    echo "</br></br>";

                    echo "Welcome ".$_SESSION['login_user']; 
                }
                ?>
            </div><br><br>

 
  <div class="h"> <a href="books.php">Books</a></div>
  <div class="h"> <a href="request.php">Book Request</a></div>
  <div class="h"> <a href="issue_info.php">Issue Information</a></div>
  <div class="h"><a href="expired.php">Expired List</a></div>
</div>

<div id="main">
  
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 
open</span>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "300px";
  document.getElementById("main").style.marginLeft = "300px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}
</script>
    <!--___________________search bar________________________-->

    <div class="srch">
        <form class="navbar-form" method="post" name="form1">
            
                <input class="form-control" type="text" name="search" plac
eholder="search books.." required="">
                <button style="background-color: #6db6b9e6;" type="submit" 
name="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
        </form>
    </div>
    <!--___________________request book__________________-->
    <div class="srch">
        <form class="navbar-form" method="post" name="form1">
            
                <input class="form-control" type="text" name="bid" placeho
lder="Enter Book Category" required="">
                <button style="background-color: #6db6b9e6;" type="submit" 
name="submit1" class="btn btn-default">Request
                </button>
        </form>
    </div>
    <h2>List Of Books</h2>
    <?php

        if(isset($_POST['submit']))
        {
            $q=mysqli_query($db,"SELECT * from books where name like '%
$_POST[search]%' ");

            if(mysqli_num_rows($q)==0)
            {
                echo "Sorry! No book found. Try searching again.";
            }
            else
            {
        echo "<table class='table table-bordered table-hover' >";
            echo "<tr style='background-color: #6db6b9e6;'>";
                //Table header
                echo "<th>"; echo "ID"; echo "</th>";
                echo "<th>"; echo "Book-Name";  echo "</th>";
                echo "<th>"; echo "Authors Name";  echo "</th>";
                echo "<th>"; echo "Edition";  echo "</th>";
                echo "<th>"; echo "Status";  echo "</th>";
                echo "<th>"; echo "Quantity";  echo "</th>";
                echo "<th>"; echo "Department";  echo "</th>";
            echo "</tr>";   

            while($row=mysqli_fetch_assoc($q))
            {
                echo "<tr>";
                echo "<td>"; echo $row['bid']; echo "</td>";
                echo "<td>"; echo $row['name']; echo "</td>";
                echo "<td>"; echo $row['authors']; echo "</td>";
                echo "<td>"; echo $row['edition']; echo "</td>";
                echo "<td>"; echo $row['status']; echo "</td>";
                echo "<td>"; echo $row['quantity']; echo "</td>";
                echo "<td>"; echo $row['department']; echo "</td>";

                echo "</tr>";
            }
        echo "</table>";
            }
        }
            /*if button is not pressed.*/
        else
        {
            $res=mysqli_query($db,"SELECT * FROM `books` ORDER BY `books`.
`name` ASC;");
        echo "<table class='table table-bordered table-hover' >";
            echo "<tr style='background-color: #6db6b9e6;'>";
                //Table header
                echo "<th>"; echo "ID"; echo "</th>";
                echo "<th>"; echo "Book-Name";  echo "</th>";
                echo "<th>"; echo "Authors Name";  echo "</th>";
                echo "<th>"; echo "Edition";  echo "</th>";
                echo "<th>"; echo "Status";  echo "</th>";
                echo "<th>"; echo "Quantity";  echo "</th>";
                echo "<th>"; echo "Department";  echo "</th>";
            echo "</tr>";   

            while($row=mysqli_fetch_assoc($res))
            {
                echo "<tr>";
                echo "<td>"; echo $row['bid']; echo "</td>";
                echo "<td>"; echo $row['name']; echo "</td>";
                echo "<td>"; echo $row['authors']; echo "</td>";
                echo "<td>"; echo $row['edition']; echo "</td>";
                echo "<td>"; echo $row['status']; echo "</td>";
                echo "<td>"; echo $row['quantity']; echo "</td>";
                echo "<td>"; echo $row['department']; echo "</td>";

                echo "</tr>";
            }
        echo "</table>";
        }

        if(isset($_POST['submit1']))
        {
            if(isset($_SESSION['login_user']))
            {
                mysqli_query($db,"INSERT INTO issue_book Values('$_SESSION
[login_user]', '$_POST[bid]', '', '', '');");
                ?>
                    <script type="text/javascript">
                        window.location="request.php"
                    </script>
                <?php
            }
            else
            {
                ?>
                    <script type="text/javascript">
                        alert("You must login to Request a book");
                    </script>
                <?php
            }
        }

    ?>
</div>
</body>
</html>

Logged In User Profile

PHP code for profile page

<?php 
    include "connection.php";
    include "navbar.php";
 ?>
 <!DOCTYPE html>
 <html>
 <head>
    <title>Profile</title>
    <style type="text/css">
        .wrapper
        {
            width: 300px;
            margin: 0 auto;
            color: white;
        }
    </style>
 </head>
 <body style="background-color: #004528; ">
    <div class="container">
        <form action="" method="post">
            <button class="btn btn-default" style="float: right; width: 70
px;" name="submit1">Edit</button>
        </form>
        <div class="wrapper">
            <?php

                if(isset($_POST['submit1']))
                {
                    ?>
                        <script type="text/javascript">
                            window.location="edit.php"
                        </script>
                    <?php
                }
                $q=mysqli_query($db,"SELECT * FROM student where username=
'$_SESSION[login_user]' ;");
            ?>
            <h2 style="text-align: center;">My Profile</h2>

            <?php
                $row=mysqli_fetch_assoc($q);

                echo "<div style='text-align: center'>
                    <img class='img-circle profile-img' height=110 width=1
20 src='images/".$_SESSION['pic']."'>
                </div>";
            ?>
            <div style="text-align: center;"> <b>Welcome, </b>
                <h4>
                    <?php echo $_SESSION['login_user']; ?>
                </h4>
            </div>
            <?php
                echo "<b>";
                echo "<table class='table table-bordered'>";
                    echo "<tr>";
                        echo "<td>";
                            echo "<b> First Name: </b>";
                        echo "</td>";

                        echo "<td>";
                            echo $row['first'];
                        echo "</td>";
                    echo "</tr>";

                    echo "<tr>";
                        echo "<td>";
                            echo "<b> Last Name: </b>";
                        echo "</td>";
                        echo "<td>";
                            echo $row['last'];
                        echo "</td>";
                    echo "</tr>";

                    echo "<tr>";
                        echo "<td>";
                            echo "<b> User Name: </b>";
                        echo "</td>";
                        echo "<td>";
                            echo $row['username'];
                        echo "</td>";
                    echo "</tr>";

                    echo "<tr>";
                        echo "<td>";
                            echo "<b> Password: </b>";
                        echo "</td>";
                        echo "<td>";
                            echo $row['password'];
                        echo "</td>";
                    echo "</tr>";

                    echo "<tr>";
                        echo "<td>";
                            echo "<b> Email: </b>"; 
                        echo "</td>";
                        echo "<td>";
                            echo $row['email'];
                        echo "</td>";
                    echo "</tr>";

                    echo "<tr>";
                        echo "<td>";
                            echo "<b> Contact: </b>";
                        echo "</td>";
                        echo "<td>";
                            echo $row['contact'];
                        echo "</td>";
                    echo "</tr>";

                    
                echo "</table>";
                echo "</b>";
            ?>
        </div>
    </div>
 </body>
 </html>

Fines Calculated By The Logged In Admin

Student Information Obtained by Admin Login

Normalized Database Design

3.2 Compare and contrast the multipage website created to the design
document. Use your design document
with appropriate principles, standards and guidelines to produce a
branded, multipage website supported
with realistic content and Critically evaluate the web design ,development
process against your design
document analyisng any technical challenges you faced during the
development.

Use Case Diagram

ER Diagram

Design Document Attributes Related to the Design of the web page related to CSS
code.

 Colorful Index Page.

 Standard Font Size.

 Transparent buttons.

 Black Colored Header and Footer.

 Tabled view of Books Page.

It was a difficult task in designing the web site as per the customer’s needs. As per the
agreed set of user requirements between the Customer and the Apex Design Company, I
had to design the web application up to the standards required by the customer. As per the
Use case diagram and the ER diagram in the above page, the designing of the web page
was done successfully completing most of the requirements asked by the customer.
3.3 .
Note - Synthesize client and the server-side functionalities in the proposed
design.
PHP code to calculate the fine

<?php
  include "connection.php";
  include "navbar.php";
?>
<!DOCTYPE html>
<html>
<head>
  <title>Fine Calculation </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .srch
    {
      padding-left: 850px;
    }
    body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

.sidenav {
  height: 100%;
  margin-top: 50px;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #222;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.img-circle
{
  margin-left: 20px;
}
.h:hover
{
  color:white;
  width: 300px;
  height: 50px;
  background-color: #00544c;
}

  </style>
</head>
<body>

<!--_________________sidenav_______________-->
  
  <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&time
s;</a>

        <div style="color: white; margin-left: 60px; font-size: 20px;">

                <?php
                if(isset($_SESSION['login_user']))
                  
                { 
                    echo "<img class='img-circle profile_img' height=120 w
idth=120 src='images/".$_SESSION['pic']."'>";
                    echo "</br></br>";

                    echo "Welcome ".$_SESSION['login_user']; 
                }
                
                ?>
            </div>
<br><br>
  <div class="h"><a href="request.php">Book Request</a></div>
  <div class="h"><a href="issue_info.php">Issue Information</a></div>
  <div class="h"><a href="expired.php">Expired List</a></div>
</div>

<div id="main">
  
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 
open</span>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "300px";
  document.getElementById("main").style.marginLeft = "300px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}
</script>

  <!--__________________________search bar________________________-->
<div class="container">

  <h2>List Of Students</h2>
  <?php

  $res=mysqli_query($db,"SELECT * FROM `fine` where username='$_SESSION[lo
gin_user]' ;");

    echo "<table class='table table-bordered table-hover' >";
      echo "<tr style='background-color: #6db6b9e6;'>";
        //Table header
        echo "<th>"; echo " Username "; echo "</th>";
        echo "<th>"; echo " Bid ";  echo "</th>";
        echo "<th>"; echo " Returned ";  echo "</th>";
        echo "<th>"; echo " Days ";  echo "</th>";
        echo "<th>"; echo " Fines in $ ";  echo "</th>";
        echo "<th>"; echo " Status ";  echo "</th>";
      echo "</tr>"; 

      while($row=mysqli_fetch_assoc($res))
      {
        echo "<tr>";
        
        echo "<td>"; echo $row['username']; echo "</td>";
        echo "<td>"; echo $row['bid']; echo "</td>";
        echo "<td>"; echo $row['returned']; echo "</td>";
        echo "<td>"; echo $row['day']; echo "</td>";
        echo "<td>"; echo $row['fine']; echo "</td>";
        echo "<td>"; echo $row['status']; echo "</td>";

        echo "</tr>";
      }
    echo "</table>";
    

  ?>
</div>
</body>
</html>

Finally the back end part and the front end part of the web page is connected and the database
is linked with the web page as well. MySQL connection query has been attached in the above
context.

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 above figure shows the test cases made by me at the start, mid and at the end of the web
design phase. This test cases has been so helpful to me in finding the errors raised when building
the web site. This test case can be used to QA my web design and development of my web
application.
 4.2 Create a suitable test plan and Critically evaluate the results of your
Test Plan and include a review of the
overall success of your multipage website; use this evaluation to explain
any areas of success and provide
justified recommendations for areas that require improvement.

This test plan involves a series of steps including most of the multiple web pages attached with
my web application. This is my last test result before concluding my web application. Repeated
test cases allowed me to find the errors and build my web application successfully.
The above figure shows the test cases made by me at the start, mid and at the end of the web
design phase. This test cases has been so helpful to me in finding the errors raised when building
the web site.
The test plan has been quiet successful from my point of view. But the web site could have been
more user friendly if I could have used more advanced web designing tools to create more
responsive user interfaces. So I think this web site need more improvement from my point of
view.

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.

User Documentation

 First the student has to go to the webpage of Lowa State University Online
Library Management System.

Then you have to go to Sign Up page and get registered

After getting registered, then you can log in to the web page with the username and password
from the Login page.

After logging in you can view the books from the books page and request the books by their
category.

By moving to the profile page you can view your personal information and you can change the
password for your login any time.

When your book request gets accepted by the librarian you can reserve a book for 24 hours.
Please enjoy reading books by reserving your favorite books from the Online Library
Management System. Thank You.