Professional Documents
Culture Documents
Ujikuhj
Ujikuhj
Ujikuhj
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
• Constructive?
Y/N
• Linked to relevant assessment
criteria? Y/N
Give details:
Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)
LO1. Explain server technologies and management services associated with hosting and managing websites.
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
Resubmission Feedback:
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.
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.
123dewmi.sandunika@gmail.com
Unit Number and Title Unit 10- Web Design and Development
Unit Tutor
Issue Date
Submission Date
Submission Format:
LO2 Categorise website technologies, tools and software used to develop websites.
LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.
Assignment Brief
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)
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
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
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
Table of tables
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)
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.
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)
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.
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.
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.
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 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.
NCSA server
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
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.
DNS Resolver
DNS Root Server
Authoritative Name Server
DNS Resolver is a server of the internet convert domain names into IP Addresses.
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 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.
Root Domain
Top Level Domain
Second Level Domain
Sub Domain
Host or resource name
Domain Structure
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 .
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.
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.
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)
How front-end and back is relating to presentation layer and application layer
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.
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
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.
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
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.
Macaw- is an extensive website design tool for writing HTML semantic and CSS briefs.
TASK 03
3.1
Home page
Back-end Code
Front-end Code
3.2
Below Mentioned screenshots of important code lines with proper comments and user interfaces
Home Page:
TASK 04
4.2
Member/User Login
Admin/Librarian Login
Add book Details
Update Book Details
Return Book Details
Comments: