Ujikuhj

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 52

Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS


Programme title BTEC Higher National Diploma in Computing

Mr. Sudesh
Assessor Internal Verifier
Unit 10: Web Design and Development
Unit(s)
Online Library Management System
Assignment title
Dewmi Sandunika Heenatigala/LE05456
Student’s name

List which assessment Pass Merit Distinction


criteria the Assessor has
awarded.
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria awarded match
those shown in the assignment brief? Y/N

Is the Pass/Merit/Distinction grade awarded


justified by the assessor’s comments on the
Y/N
student work?

Has the work been assessed


Y/N
accurately?
Is the feedback to the student:
Give details:

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

• Identifying opportunities for


improved performance?
Y/N

• Agreeing actions? Y/N

Does the assessment decision need


Y/N
amending?
Assessor signature Dat

Dewmi Sandunika Heenatigala (LE05456) Page 1 of 52


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

Dewmi Sandunika Heenatigala (LE05456) Page 2 of 52


Confirm action completed
Remedial action taken

Give details:

Assessor signature Date

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

Dewmi Sandunika Heenatigala (LE05456)


Page 3 of 52
Higher Nationals - Summative Assignment Feedback Form

Student Name/ID Dewmi Sandunika Heenatigala/LE05456

Unit Title Unit 10: Website Design & Development

Assignment Number 1 Assessor


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

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

Pass, Merit & Distinction P1 P2 M1 M2 D1


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

Pass, Merit & Distinction P3 P4 M3 D1


Descripts

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

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

Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:


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

Dewmi Sandunika Heenatigala (LE05456)


Page 4 of 52
Pearson
Higher Nationals in
Computing
Unit 10: Web Design and Development
Assignment 01

Dewmi Sandunika Heenatigala (LE05456)


Page 5 of 52
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.

Dewmi Sandunika Heenatigala (LE05456)


Page 6 of 52
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.

123dewmi.sandunika@gmail.com

Student’s Signature: Date:


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

Dewmi Sandunika Heenatigala (LE05456)


Page 7 of 52
Assignment Brief
Student Name /ID Number Dewmi Sandunika Heenatigala/LE05456

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.

Dewmi Sandunika Heenatigala (LE05456)


Page 8 of 52
Assignment Brief and Guidance:

Assignment Brief

Borrowing books, returning books or viewing the available books at the Library of the Lowa State University is
currently done manually.
Online Library Management System supports to overcome the above-mentioned problems. This system would be
used by members who may be students or professors of that University to check the availability of the books and
borrow the books., The librarian can update the member details and the book lending details.
Online Library Management System will include the following information.
 The librarian, students and the professors can register and login to the system
 Any of the above users can update their profile details including the password
 The authorized users can reserve a book for 24hours
 The authorized users can check book availability
 The librarian can check the member status and update the lending details (If the book is for the lending)
 The system allows the Librarian to create the books catalog, add/delete books and maintain the books
catalog.
 The librarian can update the book return details
 The librarian can calculate the fine for the late returns if necessary
 The users can search the books according to the categories (Novels, Frictions, etc.)

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

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

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

Dewmi Sandunika Heenatigala (LE05456)


Page 9 of 52
2.1 Define the relationships between front-end and back-end website technologies and explain how the front-end
and the back-end relate to presentation and application layers.
2.2 Critically compare the different between online website creation tools and custom-built sites.
Consider Followings: design flexibility, performance, functionality, User Experience (UX) and
User Interface (UI).
2.3 Compare and contrast the tools and techniques available to design and develop a custom-built web
Applications.

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

3.1 Design a suitable web application solution for the given scenario. Provide evidences of the design, multipage
website supported with fidelity wireframes and a full set of client and user requirements. Use your design
document with appropriate principles, standards and guidelines to produce a branded, multipage website
supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design

3.2 Implement the designed system using PHP, JS and MySQL. Screenshots of important code lines with proper
comments and user interfaces filled with sample data must be attached to the documentation. Apply a database
design for the proposed system and provide the well normalized database design of the proposed system.

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

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

Dewmi Sandunika Heenatigala (LE05456)


Page 10 of 52
interface (UI) and gauging the user experience (UX).
4.2 Critically evaluate the results of your Test Plan and include a review of the overall success of your
multipage website; use this evaluation to explain any areas of success and provide justified
recommendations for areas that require improvement.
4.3 Prepare a user documentation to properly guide the users of the implemented system.
Note: User documentation should be simple and understandable by anyone. Use screenshots and provide stepwise
guidance.

Contents
TASK 01...................................................................................................................................................15
1.1..........................................................................................................................................................15
Communication Protocols..................................................................................................................15
Operating System..............................................................................................................................19
Web Server Hardware........................................................................................................................20
Web Server Software.........................................................................................................................20
1.2..........................................................................................................................................................22
Domain Name Server (DNS).............................................................................................................22
Domain Structure...............................................................................................................................24
TASK 02...................................................................................................................................................26
2.1..........................................................................................................................................................26
Relationships between front-end and back-end website technologies................................................26
How front-end and back is relating to presentation layer and application layer.................................27
2.2..........................................................................................................................................................28
Comparison different between online website creation tools and custom built sites..........................28
TASK 03...................................................................................................................................................30
3.1..........................................................................................................................................................30
Wireframes and a full set of client and user requirements.................................................................30
3.2..........................................................................................................................................................39
Implemented Design Using PHP, JS and MySQL.............................................................................39
TASK 04...................................................................................................................................................45
4.2..........................................................................................................................................................45

Dewmi Sandunika Heenatigala (LE05456)


Page 11 of 52
References.................................................................................................................................................49

Table of figures
Figure 1 How HTTP Works......................................................................................................................17
Figure 2 Windows 10................................................................................................................................19
Figure 3 Apache Server.............................................................................................................................21
Figure 4 NCSA server...............................................................................................................................21
Figure 5 Perl Server...................................................................................................................................22
Figure 6 Domain Name Server..................................................................................................................23
Figure 7 Structure of a Domain Name.......................................................................................................24
Figure 8 In detail Structure of a Domain Name.........................................................................................25
Figure 9 Relationships between front-end and back-end...........................................................................26
Figure 10 Template and custom-built websites..........................................................................................28
Figure 11 Home Page................................................................................................................................30
Figure 12 Admin Login Page....................................................................................................................31
Figure 13 Admin Dashboard.....................................................................................................................31
Figure 14 Book Details Page.....................................................................................................................32
Figure 15 Borrow book Details Page.........................................................................................................32
Figure 16 Return Book Details page..........................................................................................................33
Figure 17 Search Book details Page..........................................................................................................33
Figure 18 Member Details page.................................................................................................................34
Figure 19 Admin Logout Page...................................................................................................................34
Figure 20 Student / Member Login Page...................................................................................................35
Figure 21 Student/Member Dashboard......................................................................................................35
Figure 22 Student / Member Book Search Details Page............................................................................36
Figure 23 Student / Member Borrow Book Details page...........................................................................36
Figure 24 Student / Member Return Book Details Page............................................................................37
Figure 25 Student / Member Details update Page......................................................................................37
Figure 26 Member Logout page................................................................................................................38
Figure 27 Home Page................................................................................................................................39
Figure 28 About Page................................................................................................................................40
Figure 29 Admin Login Page....................................................................................................................40
Figure 30 Admin Dashboard.....................................................................................................................41

Dewmi Sandunika Heenatigala (LE05456)


Page 12 of 52
Figure 31 Add Book Details......................................................................................................................41
Figure 32 Add member Details..................................................................................................................42
Figure 33 DB Connection PHP Code........................................................................................................42
Figure 34 Login Code................................................................................................................................43
Figure 35 Sign up Code.............................................................................................................................43
Figure 36 Book Borrow Code....................................................................................................................44
Figure 37 Add Book Code.........................................................................................................................44
Figure 38 Search Book Code.....................................................................................................................45

Table of tables

Table 1 Difference between HTTP and HTTPS........................................................................................17


Table 2 Differentiate between SMTP POP3 and IMAP.............................................................................18
Table 3 Test Plan for Admin/Librarian Login...........................................................................................46
Table 4 Test Plan for Student/member Login............................................................................................46
Table 5 Test Plan for add new book with details.......................................................................................47
Table 6 Test Plan for Update Book Details...............................................................................................47
Table 7 Test Plan for Return Book Details................................................................................................48

Dewmi Sandunika Heenatigala (LE05456)


Page 13 of 52
TASK 01

1.

Communication Protocols
Online communication protocols are the technology used to transmit information over the Internet. For
example, a web browser uses these protocols to request information from a Web server, which is then
displayed on the browser screen in text and image formats. Depend degree users can interact with that
information on the protocol.

“There are many properties of a transmission that a protocol can define. Common ones include: packet
size, transmission speed, error correction types, handshaking and synchronization techniques, address
mapping, acknowledgement processes, flow control, packet sequence controls, routing, address
formatting

Popular protocols include: File Transfer Protocol (FTP), TCP/IP, User Datagram Protocol (UDP),
Hypertext Transfer Protocol (HTTP), Post Office Protocol (POP3), Internet Message Access Protocol
(IMAP), Simple Mail Transfer Protocol (SMTP).” (techopedia, 2012)

There are several types of communication servers.


TCP/IP Model
TCP/IP model is layered and is used in the same fashion as the OSI model but with fewer layers. As the
modern Internet and most communications use the Internet Protocol (IP), the TCP/IP model is technically
more in line with modern network implementations. As well It consists of a set of protocols designed to
create a network of networks to provide a host with Internet access.

Dewmi Sandunika Heenatigala (LE05456)


Page 14 of 52
HTTP (Hypertext Transfer Protocol)

Figure 1 How HTTP Works


Source:( https://whatis.techtarget.com/)
HTTP stands for the Hypertext Transfer Protocol. This is probably the most wildly used protocol in the
world today. HTTP is the protocol that is used for viewing web pages on the internet. This arrangement of
standards is exchange the text, images, and any sound on world wide web.

HTTPS (Hyper Text Transfer Protocol Secure)

HTTPS is the safe version of HTTP. The 'S' toward the finish of HTTPS means 'safe or secure'. It means
all activities between your browser and the site are encrypted. HTTPS is regularly used to ensure
exceptionally private online exchanges like online banking and web-based shopping request frames.

Difference between HTTP and HTTPS

HTTP HTTPS
HTTP URL begins with HTTP:// HTTPS URL begins with https://
HTTP is used 80 port HTTPs is using 443 port
Insecure connection. Secure connection.
HTTP normal fast HTTPS is quite slow compared to HTTP.
No encrypted connection. Encrypted connection.
HTTP does not require any certificate HTTPS requires SSL certificate.
Table 1 Difference between HTTP and HTTPS
Source: (Author Developed)
Internet Protocol (IP)

Dewmi Sandunika Heenatigala (LE05456)


Page 15 of 52
IP by itself is something like the postal system. It allows you to address a package and drop it in the
system, but there's no direct link between you and the recipient. TCP/IP, on the other hand, establishes a
connection between two hosts so that they can send messages back and forth for a period of time. (Beal,
2019)

Email Protocols – POP3, SMTP and IMAP

POP3:

Stands for "Post Office Protocol." POP3, sometimes referred to as just "POP," is a simple, standardized
method of delivering e-mail messages. A POP3 mail server receives e-mails and filters them into the
appropriate user folders. When a user connects to the mail server to retrieve his mail, the messages are
downloaded from mail server to the user's hard disk. (techterms, 2019)

SMTP:

The Simple Mail Transfer Protocol (SMTP) is a standard communication protocol for sending email
messages to businesses and the Internet. Email usually uses SMTP to send, Post Office 3 (POP3) or
IMAP protocols to receive mail.

IMAP:

The Internet Message Access Protocol (IMAP) is a standard protocol for accessing e-mail on a remote
server from a local client. IMAP is an application layer Internet protocol that uses transport layer
protocols to create host-to-host communications services for applications.

Differentiate between SMTP POP3 and IMAP

SMTP POP3 IMAP


Full form Simple Mail Transfer Post Office Protocol IMAP stands for
Protocol third Internet Message
Access Protocol

Function Sending emails Retrieving emails Retrieving emails


Server port 25 110 143
Limitation Can’t find the sender. One time message gets Mailbox on the server
This sometimes leads downloaded on a local has a definite quota
to Spam issues computer, it accessible and thus, one needs to

Dewmi Sandunika Heenatigala (LE05456)


Page 16 of 52
remain on that ensure that the
computer only. mailbox retains space
for newer mails
Table 2 Differentiate between SMTP POP3 and IMAP
Source: (Author Developed)

Operating System

An operating system (OS) is the most important software that runs on a computer. It manages computer
memory and process. As well it is of software and hardware. Without an operating system computer is
useless. OS manages all of the software and hardware on the computer. Most of the time, there are several
different computers bringing at the same time, and they all need to access your computer’s central
processing unit, memory, and storage. The operating system coordinates all of this to make sure each
program gets what it need. Common desktop operating system.

Windows

Figure 2 Windows 10
Source: (https://c.s-microsoft.com/en-gb/CMSImages/windows10-laptop.png?version=eec1eae8-03c5-
1f2b-4160-3e2f5a7379d7)

Supporting everyone of windows programs. It can install PHP, MYSQL and other open source software.
Most of the users in Microsoft windows. That means there are so many applications developed by
Microsoft.

Dewmi Sandunika Heenatigala (LE05456)


Page 17 of 52
Linux

Linux is a Unix-like operating system that was designed to provide personal computer users a free or very
low-cost alternative. Linux has a reputation as a very efficient and fast-performing system.

Web Server Hardware

There are many types of servers, including web servers, mail servers and file servers. Each type executes
specific programs for the purpose of the server .

Types of servers

Applications Server
Application server is a server specifically designed to run applications. The "server" includes both the
hardware and software that provide an environment for programs to run.

Proxy server
A proxy server is a program that acts as an intermediary between an endpoint device, such as a computer,
and another server requested by a user or service customer

Mail Server
A Mail Server is a computer system that sends and receives email. In many cases, web servers and mail
servers are combined in a single machine.

File Server
A file server is a computer that is responsible for central storage and management of data files so that
other computers on the same network can access them.

Web Server Software

Web server is a computer where the web content is stored. Basically web server is used to host the web
sites but there exist other web servers also such as gaming, storage, FTP, email etc.

Dewmi Sandunika Heenatigala (LE05456)


Page 18 of 52
 Apache server

Figure 3 Apache Server


Also called the Apache HTTP server project or Apache, is a robust, commercial-grade, feature-rich, free,
and open-source HTTP web server. It is developed by the ASF (Apache Software Foundation), a
community of software engineers located throughout the world. The Apache server is available for
various operating systems, but is most commonly run on Linux, BSD, and other Unix-like operating
systems. (computerhope, 2019)

 NCSA server

Figure 4 NCSA server


Server for files, written in C, public domain. Many features like httpD from CERN. Platforms: Unix.

Dewmi Sandunika Heenatigala (LE05456)


Page 19 of 52
 Perl Server

Figure 5 Perl Server


By Mark van Hainingen at the University of Indiana. Written in Perl. Platforms: Unix

 XAMPP
XAMPP ( or ) is a free and open-source cross-platform web server solution stack package developed by
Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for
scripts written in the PHP and Perl programming languages. (definitions.net, 2019)

 Apache tomcat

Apache tomcat is open source application server. It can run windows or UNIX. Tomcat provides a "pure
Java" HTTP web server environment in which Java code can run.

1.2

Domain Name Server (DNS)

Order to bridge the Communication gap between computers and human, and make the communication a
lot easier network engineers develop DNS. DNS stand for Domain Name System. DNS resolves names to
numbers. To be more specific it resolves domain names to IP addresses.

Dewmi Sandunika Heenatigala (LE05456)


Page 20 of 52
Figure 6 Domain Name Server
Source:( https://devopedia.org/images/article/104/2558.1549907788.png,2019)

How DNS Works?


For a example type domain name in a web browser. So we can use ESOFT.COM. now we do not have
type in esoft.com. we can just type in the IP address instated if already knew what the IP address was. But
it is very difficult and not suitable for longtime working and attracting web users. So we can just type
domain name instant and let DNS converted to IP address for us. When we type ESOFT.COM in a web
browser after the DNS server searching through the database find the matching IP address for that
domain. And when it finds it will be a result of that domain name to the IP address of the Gmail website
and one is done then our computer able to communicate with Gmail web server.

DNS server have Three types.

 DNS Resolver
 DNS Root Server
 Authoritative Name Server

Dewmi Sandunika Heenatigala (LE05456)


Page 21 of 52
DNS Resolver

DNS Resolver is a server of the internet convert domain names into IP Addresses.

DNS Root Server

Root servers are most necessary part of the domain name system (DNS). Publish contents file, which are
responsible for the DND functionality to the internet.

Authoritative Name Server

Authoritative Name Server is the top-level servers in the DNS. Authoritative Name Server hold the Up-
to-date data for the specific hostname. This will send the appropriate IP address to DNS Resolver.

Types of Domain Names

 Root Domain
 Top Level Domain
 Second Level Domain
 Sub Domain
 Host or resource name

Domain Structure

Structure of a Domain Name

Figure 7 Structure of a Domain Name

Dewmi Sandunika Heenatigala (LE05456)


Page 22 of 52
Below diagram illustrates the structure of the domain name. The top-level domain
includes .com, .net, or any of the top-level domains of a standard country.

Figure 8 In detail Structure of a Domain Name

Resource Type
Reference to the page type. Normal web pages are HTTP. As well HTTPS is Secured HTTP. Other
resources can be identified FTP, GOPHER, TELNET, etc.

Machine name

This subdomain can also be named. Most web pages start with WWW. This is not an absolute rule. We
can call it MYWEBSITE instead. Historically, people have chosen WWW (World Wide Web). You do
not need to use this part on most Web pages if DNS is configured correctly .

Second level domain (Domain name)


Second-level domain names are often created based on the name of a company, product or service. As an
example, in the domain example.co.lk, co is the second-level domain.

Top level domain


A top-level domain is a large set of similar types of domain names. Some are limited to specific people
only, such as .gov or .int.

Dewmi Sandunika Heenatigala (LE05456)


Page 23 of 52
TASK 01
2.1

Relationships between front-end and back-end website technologies

There are two things in the web industry. those are front and back. it may little complex. because the
difference between the front and back is not always quite clear. front known as the client side sometimes
considered design of the web. The end of the web industry is often called the server name. Often, when
someone says it's a "web developer," they say they're working in the back end of the sites. Although this
interpretation seems simple, the line between the two is unclear.

Figure 9 Relationships between front-end and back-end

Front End (Client Side)

Front is a part of the web page and executed by the client side software. As well we can identify Front-
end programming mostly deals with the user interface with which user interacts in the web. It is
commonly a browser, in the user’s machine, that runs the code and it’s mainly done in any scripting
language like JavaScript.

Example of front end Languages.

Dewmi Sandunika Heenatigala (LE05456)


Page 24 of 52
JavaScript, HTML, CSS, Action Script, Dart, VBscript, TypeScript etc.

Back End

Back-end is a method of designing websites so that the process or user request is run on the originating
server. Back-end provide an interface to the user and are used to limit access to proprietary data and help
keep control of the script source code.

“What is back-end web development? The back-end, or the "server-side", is basically how the site works,
updates, and changes. This refers to everything the user can't see in the browser, like databases and
servers.
Usually people who work on the back-end are called back-end programmers or back-end developers.
back-end Developers are mostly worried about things like security, structure, and content management.
They usually know and can use languages like HTML and CSS, but it’s not their focus.” (pluralsight,
2019)

Example of Back-End Languages

ASP, PHP, Ruby, Python, C++ etc.

How front-end and back is relating to presentation layer and application layer

 Presentation Layer: Interface of the outside


 Application Layer: Mechanics needed to create an interface
 Business logic layer: real logic that includes / simulates / simulates the operations and business
processes of your company - algorithms, transitions, approval processes, etc.
 Database layer: Database and logic necessary of back-end

In the presentation layer data is transferred through the web application are encrypt and decrypt. In front
end, can make more presentation layers. An application layer is shared communications protocols and
interface methods used by hosts in a communications network. Application layer used HTTP protocol
with framework of the internet protocol. Mostly application layers are work with back end operations. As
a summary front end things are running in the any browser based on mainly CSS/HTML/JS. As well
Back end things are running on the server Java, JavaScript, Ruby, Python, PHP, Java, bash scripts,
DBMS.

Dewmi Sandunika Heenatigala (LE05456)


Page 25 of 52
2.2

Comparison different between online website creation tools and custom built sites.

In the web Design Platform there are two ways to build a site.

 Custom built
 Online website creation

Figure 10 Template and custom-built websites

Most of the sites nowadays created by online tools. Effectively and quickly create their websites without
specialized help. There are advantages as disadvantages. Online creators do not install any software or
download any plugin. They are easily build the site through internet. We can identify some online
creating websites. Such as WIX, SQUARESPACE, SITE123, 10NOS, WEB.COM, WordPress, and
JIMDO. As well Most current sites are developed with content management system, or CMS, which
allows companies to update their sites easily and quickly without technical assistance. The most popular
is WordPress.

Custom Design

Most of people think custom web design is too expensive. Below are some advantages of hiring we
designer and build a site.

Dewmi Sandunika Heenatigala (LE05456)


Page 26 of 52
Benefits of Customer built web design

 Unique Design- Every business or company has unique products and services therefore when we
going to custom web development process. a business can easily develop and design the website by
using an authentic logo, relevant content, and high-resolution images.
 Scalability- Such as adaptability, if you have planned what you want in the future for your website, a
good web designer will consider this when choosing the techniques, you will use when creating your
website.
 Search Engine Friendly- as Additional advantage it is allows the website to be optimized for search
engines easily. Web marketing paly major role in the ranking of web site.
 Flexible and User-Friendly-Custom website design gives a user-friendly approach to the customers.
Developers can scale the development process of the website and can make appropriate changes
whenever required

Online Web Design

Free web site template is a bad idea for this industry. However below mentioned some of points about
web site templates.

Less Development time – Using template design only required short development time. Because there is
no any software install or working with that. Most of platforms can be created web site. less than 10
clicks.

Low budget – we can buy a package what is suitable for our business. They have monthly subscription
plan also.

Colours, Design and free features - You can not make your web designer copy these, but give the web
designer an idea of what you want.

Disadvantages of Online web design templates

 There are lot of people using same template.


 Limited the customization. We can’t add new features or layout.
 Very hard to optimize SEO
 Antiquated coding

Dewmi Sandunika Heenatigala (LE05456)


Page 27 of 52
 Some online website creation tools site will not work with devices

Online web design tools

Atomic- is a tool for porotypes. Does not need any coding

Antetype- is a UI design application. It increases productivity of UI designers.

Macaw- is an extensive website design tool for writing HTML semantic and CSS briefs.

TASK 03

3.1

Wireframes and a full set of client and user requirements

Home page

Dewmi Sandunika Heenatigala (LE05456)


Page 28 of 52
Figure 11 Home Page
Admin Login

Dewmi Sandunika Heenatigala (LE05456)


Page 29 of 52
Figure 12 Admin Login Page
Admin Dashboard

Figure 13 Admin Dashboard


Book Details

Dewmi Sandunika Heenatigala (LE05456)


Page 30 of 52
Figure 14 Book Details Page
Borrow Book Details

Figure 15 Borrow book Details Page


Return Book Details

Dewmi Sandunika Heenatigala (LE05456)


Page 31 of 52
Figure 16 Return Book Details page

Search Book details

Figure 17 Search Book details Page


Member Details

Dewmi Sandunika Heenatigala (LE05456)


Page 32 of 52
Figure 18 Member Details page
Admin Logout

Figure 19 Admin Logout Page


Student / Member Login

Dewmi Sandunika Heenatigala (LE05456)


Page 33 of 52
Figure 20 Student / Member Login Page
Student / Member Dashboard

Figure 21 Student/Member Dashboard

Student / Member Book Search Details

Dewmi Sandunika Heenatigala (LE05456)


Page 34 of 52
Figure 22 Student / Member Book Search Details Page
Student / Member Borrow Book Details

Figure 23 Student / Member Borrow Book Details page


Student / Member Return Book Details

Dewmi Sandunika Heenatigala (LE05456)


Page 35 of 52
Figure 24 Student / Member Return Book Details Page
Student / Member Details update

Figure 25 Student / Member Details update Page


Member Logout

Dewmi Sandunika Heenatigala (LE05456)


Page 36 of 52
Figure 26 Member Logout page

Front-end Vs Back-end Functions


Basically there are running two programs at the same time.

 Code in the server respond to HTTP Requests.


 Code in the browser respond to what user Input.

Back-end Code

 The languages / framework include


 Database stores data such as user profiles, add book etc.
 Not visible for the user
 It can only respond to HTTP requests from a particular URL, not to any type of user input.

Front-end Code

The languages used such as HTML, CSS and JS

 Analyzed by the user’s browser


 Respond to user input
 It can be seen and edited by the user in its entirety.

Dewmi Sandunika Heenatigala (LE05456)


Page 37 of 52
 Should communicate through HTTP requests. Can’t directly access or edit file from the server.

3.2

Implemented Design Using PHP, JS and MySQL

Below Mentioned screenshots of important code lines with proper comments and user interfaces

filled with sample data.

Below mentioned screenshots of Library Management System.

Home Page:

Figure 27 Home Page


Source: (Author Developed)

Dewmi Sandunika Heenatigala (LE05456)


Page 38 of 52
About Page:

Figure 28 About Page


Source: (Author Developed)
Admin Login:

Figure 29 Admin Login Page


Source: (Author Developed)

Dewmi Sandunika Heenatigala (LE05456)


Page 39 of 52
Admin Dashboard:

Figure 30 Admin Dashboard


Source: (Author Developed)
Add Book Details:

Figure 31 Add Book Details


Source: (Author Developed)

Dewmi Sandunika Heenatigala (LE05456)


Page 40 of 52
Add User Details:

Figure 32 Add member Details


Source:( Author Developed)

PHP/JS/HTML Code Screenshots

Database Connection PHP Codes:

Figure 33 DB Connection PHP Code


Source: (Author Developed)

Dewmi Sandunika Heenatigala (LE05456)


Page 41 of 52
Login Code:

Figure 34 Login Code


Source: (Author Developed)
Sign up Code:

Figure 35 Sign up Code


Source: (Author Developed)

Dewmi Sandunika Heenatigala (LE05456)


Page 42 of 52
Book Borrow Code:

Figure 36 Book Borrow Code


Source: (Author Developed)
Add Book Code:

Figure 37 Add Book Code


Source: (Author Developed)

Dewmi Sandunika Heenatigala (LE05456)


Page 43 of 52
Search Book

Figure 38 Search Book Code


Source: (Author Developed)

TASK 04

4.2

Below mentioned the system test Plan

 Member/User Login
 Admin/Librarian Login
 Add book Details
 Update Book Details
 Return Book Details

Dewmi Sandunika Heenatigala (LE05456)


Page 44 of 52
Admin/Librarian Login

No Input Expected Output Comment


Test 01 Valid User name and Error notification. Correct
Invalid Password
Test 02 Invalid User name and Error notification Correct
valid Password
Test 03 Invalid User name and Error notification Correct
Invalid Password
Test 04 Valid username and Success Login Correct
valid password
Table 3 Test Plan for Admin/Librarian Login
Source: (Author Developed)
Member/Student Login

No Input Expected Output Comment


Test 01 Enter User name and Success Login Correct
password
(Dewmi/password)
Test 02 Enter password Error notification Correct
(Admin)
Test 03 Enter username Error notification Correct
(Dewmi)
Test 04 Enter wrong user name Error notification Correct
and Password.
(Dewmi/pass0321)
Table 4 Test Plan for Student/member Login
Source:( Author Developed)
Add Book Details

No Input Expected Output Comment


Test 01 Add Novel to relevant Successfully added Correct
category.
*book details add
Test 02 Add software book Enter Book name Correct

Dewmi Sandunika Heenatigala (LE05456)


Page 45 of 52
Without book name.
Test 03 Add HR book, Without Enter Author Correct
author details.
Table 5 Test Plan for add new book with details
Source: (Author Developed)
Update Book Details

No Input Expected Output Comment


Test 01 Change book name Update Success Correct
*Input Book name HR
Test 02 Change book Category Update Success Correct
*Select Software
Category book
Test 03 Update Book without Enter Author name Correct
Author.
*clear book author
name

Table 6 Test Plan for Update Book Details


Source: (Author Developed)

Return Book Details

No Input Expected Output Comment


Test 01 Return book without Please calculate fine Correct
Fine
*Backdate return
book accept with
fine 0
Test 02 Return Damage book Book Status change Correct
with Fine. Success
*Backdate return
book accept with
fine 0
Test 03 Book Status change to Borrow book states Correct

Dewmi Sandunika Heenatigala (LE05456)


Page 46 of 52
Lost Book change to lost book

Table 7 Test Plan for Return Book Details


Source: (Author Developed)

Recommendation of Lowa State university


This library management system is automated and computerized. According to this system there are more
benefits students and admin panel. Student can easily find the books. As well as members can check the
status of the books rent. And librarian can check issued books. As future improvements we can identify
online conference, video premiering, lectures / teachers can use as a platform for online lectures. And
another suggest parents can monitor the student’s improvements.

Dewmi Sandunika Heenatigala (LE05456)


Page 47 of 52
References
Beal, V., 2019. webopedia. [Online]
Available at: https://www.webopedia.com/TERM/I/IP.html
[Accessed 11 October 2020].
computerhope, 2019. computerhope. [Online]
Available at: https://www.computerhope.com/jargon/a/apache.htm
[Accessed 14 October 2019].
definitions.net, 2019. definitions. [Online]
Available at: https://www.definitions.net/definition/XAMPP
[Accessed 16 october 2019].
pluralsight, 2019. pluralsight. [Online]
Available at: https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end
[Accessed 22 october 2019].
techopedia, 2012. Techopedia. [Online]
Available at: https://www.techopedia.com/definition/25705/communication-protocol
[Accessed 10 October 2019].
techterms, 2019. techterms. [Online]
Available at: https://techterms.com/definition/pop3
[Accessed 12 October 2020].

Dewmi Sandunika Heenatigala (LE05456) Page 48 of 52


Grading Rubric

Grading Criteria Achieved Feedback

LO1 Explain server technologies and management services associated with


hosting and managing websites

P1 Identify the purpose and types of DNS, including explanations on how


domain names are organized and managed.

P2 Explain the purpose and relationships between communication


protocols, server hardware, operating systems and web server
software with regards to designing, publishing and accessing a
website.
M1 Evaluate the impact of common web development technologies
and frameworks with regards to website design, functionality and
management.

Dewmi Sandunika Heenatigala (LE05456) Page 49 of 52


M2 Review the influence of search engines on website performance
and provide evidence-based support for improving a
site’s index value and rank through search engine optimization.
D1 Justify the tools and techniques chosen to realize a custom built
website.

LO2 Categories website technologies, tools and


software used to develop websites

P3 Discuss the capabilities and relationships between front-end and back-end


website technologies and explain how these relate to presentation and
application layers.

P4 Discuss the differences between online website creation tools and


custom built sites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI).

M3 Evaluate a range of tools and techniques available to design and develop


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

P5 Create a design document for a branded, multipage website supported


with medium fidelity wireframes and a full set of client and user
requirements.
P6 Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with realistic
content.
M4 Compare and contrast the multipage website created to the design
document.

Dewmi Sandunika Heenatigala (LE05456) Page 50 of 52


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.

Dewmi Sandunika Heenatigala (LE05456) Page 51 of 52


Observation Sheet

Activity Activity Learning Feedback


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

Comments:

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


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

Dewmi Sandunika Heenatigala (LE05456)


Page 52 of 52

You might also like