Pearson
Higher Nationals in
Computing
Unit 10: Web Design and Development
1|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
Higher Nationals Internal verification of assessment decisions – BTEC
(RQF)
INTERNAL VERIFICATION – ASSESSMENT DECISIONS
Programme title
BTEC Higher National Diploma in Computing
Mr. Lasitha Ranawaka
Assessor
Internal Verifier
Unit 10: Web Design and Development
Unit(s)
Online Hospital Management System
Assignment title
L.W.D. Dilshan Rathnasiri
Student’s name
List which assessment criteria the
Assessor has awarded.
Pass
Merit
Distinction
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria awarded match those
shown in the assignment brief?
Is the Pass/Merit/Distinctiongrade awarded justified
by the assessor’s comments on the student work?
Y/
N
Y/N
Has the work been assessed accurately?
Y/
N
Is the feedback to the student:
Give details:
• Constructive?
Y/
N
• Linked to relevant assessment criteria?
• Identifying opportunities for improved
Y/
N
2|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
performance?
Y/
• Agreeing actions?
N
Y/
N
Does the assessment decision need amending?
Y/
N
Assessor signature
Date
Internal Verifier signature
Date
Programme Leader signature (if required)
Date
Confirm action completed
Remedial action taken
Give details:
Assessor signature
Internal Verifier
signature
Programme Leader
signature (if required)
Date
Date
Date
3|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
Higher Nationals - Summative Assignment Feedback Form
Student Name/ID
L.W.D. Dilshan Rathnasiri / KUR/A-019659
Unit Title
Unit 10: Website Design & Development
Assignment Number
1
Assessor
23/06/2021
Date Received 1st
submission
Submission Date
Mr. Lasitha Ranawaka
Date Received 2nd
submission
Re-submission Date
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
Descripts
P3
P4
M3
D1
LO3. Utilise website technologies, tools and techniques with good design principles to create a multipage
website.
Pass, Merit & Distinction
P5
P6
M4
D2
Descripts
LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & Distinction
Descripts
P7
M5
D3
Grade:
Resubmission Feedback:
Assessor Signature:
Date:
Grade:
Assessor Signature:
Date:
Internal Verifier’s Comments:
Signature & Date:
4|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
Assignment Feedback
Formative Feedback: Assessor to Student
Action Plan
Summative feedback
Feedback: Student to Assessor
Assessor
signature
Date
5|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
Student
signature
Date
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 Pearson 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 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 attached.
dinindu077@gmail.com
Student’s Signature:
Date: 23/06/2021
(Provide E-mail ID)
(Provide Submission Date)
6|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
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.
7|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
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.
11. 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.
Assignment Brief
Student Name /ID Number
L.W.D. Dilshan Rathnasiri / KUR/A-019659
Unit Number and Title
Unit 10- Web Design and Development
Academic Year
2021/2022
Unit Tutor
Mr. Lasitha Ranawaka
Assignment Title
Online Hospital Management System
Issue Date
Submission Date
23/06/2021
IV Name & Date
Submission Format:
Part 1.
Report- Submit a professional report with approepriate report formattimg and guidelines followed. All the
research data should be referenced along with in-text citations using Hrvard referencing syste.
Part 2
A fully functional web solution
8|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
9|Page
L.W.D. Dilshan Rathnasiri
Web Design and Development
Task 1
1.1 Explain and differentiate the different web technologies such as communication
protocols, server hardware, operating systems and web server software with
regards to designing, publishing and accessing the Hospital Management System
(HMS).
Communication Protocols
Computers are similar to people in that they communicate through rules or protocols.
The protocols are designed for efficiency and are based on computer-specific rules
and regulations. Each rule is defined in its own way and given its own name. The
protocols define the communication standards and give precise information on the
data transmission operations, there are many different protocols available, and some
examples of these different protocols include, and they are here TCP/IP, PPP, SMTP,
HTTP, HTTPS, FTP, SNMP, RTP and IMAP these protocols are very common and
popular communication protocols.

TCP/IP
TCP/IP stands for Transmission Control Protocol/ Internet Protocol. TCP/IP Protocol
Stack is mainly designed as a version to provide rather dependable and end-to-end
byte circulate over an unreliable internetwork. The TCP/IP Model aids in determining
how a particular computer should connect to the internet and how data should be sent
between them. When many computer networks are linked together, it aids in the
creation of a virtual network. The TCP/IP paradigm was created to facilitate
communication across long distances[ CITATION gur213 \l 1033 ].

HTTP
HTTP was invented alongside HTML to create the first interactive, text-based web
browser: the original World Wide Web. Today, the protocol remains one of the
primary means of using the Internet. The first World Wide Web was built using HTTP
10 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
and HTML to construct the first interactive, text-based web browser. The protocol is
still one of the most used ways to access the Internet today. HTTP is a requestresponse protocol that allows users to interact with online resources like HTML files
by sending hypertext messages between clients and servers. To communicate with
servers, HTTP clients typically employ Transmission Control Protocol (TCP)
connections[ CITATION ext21 \l 1033 ].

FTP
FTP (File Transfer Protocol) is a protocol for communicating and transferring data
between computers connected to the internet through a TCP/IP network. The File
Transfer Protocol server allows users who have been allowed access to receive and
transfer files. FTP is used by website developers to make modifications to a website.
Given the enormous number of files that must be managed, managing them over FTP
is more convenient and safer[ CITATION Luq21 \l 1033 ].

SMTP
SMTP stands for Simple Mail Transfer Protocol. The client who wants to send the
email establishes a TCP connection with the SMTP server and then sends the email
via it. The SMTP server is constantly in listening mode, and the SMTP process
connects to that port (25). The client process sends the email immediately after
successfully establishing the TCP connection[ CITATION Vai20 \l 1033 ].

PPP
The Point-to-Point Protocol (PPP) is a data link layer communication protocol for
transmitting multiprotocol data between two directly linked (point-to-point)
computers. It is a byte-oriented protocol that is commonly utilized in high-speed
broadband communications with significant loads. Data is transferred in frames since
it is a data link layer protocol[ CITATION Ris18 \l 1033 ].
11 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Server Hardware
Although servers are distinct from personal computers, server technology is similar to
desktop hardware in many aspects. Both use the same fundamental components, such
as power supply, memory, and processors. Server hardware, on the other hand, might
appear to be a completely other sport for individuals who have only worked with
desktop hardware. Server hardware components are generally more sophisticated than
those found in desktop computers. Redundant and hot-swappable components are
sometimes used in servers. Hot swappable components may be found on PCs as well,
though they are considerably more frequent on servers. Tower servers, rack servers,
and blade servers are the three types of server hardware available.

Rack Servers
This server is placed in the horizontal rack. Multiple servers can be installed in this
single rack mount server chassis. Main objective of developing it is to host and
control enterprise solutions, and these types of servers are used in data
centres[ CITATION ERR20 \l 1033 ].

Tower Servers
This server looks and functions like a regular desktop computer, but it has various
server hardware components. Today, tower servers come in a variety of forms and
sizes, all of which provide ample processing power without the need for extra
mounting gear[ CITATION ERR20 \l 1033 ].

Blade Servers
The hardware in traditional computer servers is huge, and other server components
are hefty. However, these sorts of servers are gradually being turned into single slim
servers known as "Blade Servers" by eliminating hard disks, internal cooling, and
continuous shrinking of processing equipment[ CITATION ERR20 \l 1033 ].
12 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
The fundamental components of server and personal computer hardware are, of
course, identical. All of them begin with a motherboard, which is quite similar to the
human body's system in that it is connected to, and transmits messages between, all of
the machine's opposing components. The Central Process Unit is the brain if the
motherboard represents the nervous system. Convert the electronic impulses from
various sections of the human body into meaningful data, instructions, and
regulations, and send them to other components as needed. Of fact, no brain can
operate without being able to recall crucial or general information. Use information
bits to your advantage. As a result, memory is installed in all servers, PCs, and other
devices. The static or permanent storage component is the final critical component. In
a computer, this memory is a hard disk or similar hard disk storage. Using the human
analogy, it can be compared to a notebook that a person would hold in their hand and
reference information from as they needed it. These are the difference between server
hardware and normal pc hardware.
Operating systems
A server operating system is a computer operating system that is meant to run on
servers, which are specialized computers that function in a client/server architecture
to fulfil requests from other computers on the network. The server operating system,
sometimes known as the server OS, is a software layer that runs on top of the server
hardware and allows other software programs or applications to execute. The ability
to operate in both a graphical user interface and a command line interface is one of
the most significant and crucial elements of a server operating system. Web servers,
mail servers, file servers, database servers, application servers, and print servers all
need server operating systems to allow and assist their functions. However, the most
widely used server operating systems are Windows Server and Linux.
There are some key differences between a Server Operating System and a Client
Operating System. Clients and servers are two separate sorts of computers with
distinct functions. A client is a modest computer that uses a network to communicate
13 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
with a server. A server machine is a large capacity computer that can store a wide
variety of files such as application and data files. There are various types of servers,
such as application server, file server, web server, database server, proxy server, etc.
The client computer usually contains more end user software than the server
computer. A server usually contains more operating system components. Multiple
users can log into a server at the same time. A client machine is simple and
inexpensive whereas a server machine is more powerful and expensive.
The key difference between a client and a server operating system is performance.
Client machines are recommended for applications that demand quick start-up times.
A server computer is recommended for applications that place a higher priority on
performance. It is not a typical desktop operating system since more operations need
be performed at the same time with more speed and efficiency.
When it comes to a server operating system it is designed in a way that it can connect
a large no of network connections as it is necessary. A client operating system does
not have that feature thus it has ability to connect a limited no of network
connections. Another key feature of server operating system is that it has the
capability of monitoring and managing client operating system. A client operating
system is not able to do so. A client operating system has limitation in executing
process. If the amount is exceeded the system tends to get stuck. But a server
operating system has the capability to execute extreme number of processes at once
without any hesitance. However, these are the key differences between the Server
operating system and the client operating system.
Web server software
Server software is software that is intended to be run, managed, and used on a
computer server. It allows and simplifies the use of underlying server processing
capacity for a variety of high-end computing applications and tasks. Server software
14 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
is designed to connect with the physical infrastructure of a server, which includes the
Processor, ram, storage, I/O, and other communication interfaces. Depending on the
server's kind and use[ CITATION tec216 \l 1033 ]. There are many different web
server software are available and some of different web server software include
apache http server, apache tomcat server, lighttptd server, jigsaw server.
Apache http server: Apache is a remarkable application software package. It is the
most popular Web Server application. It works on almost all platforms, including
Windows, OS X, OS/2, and others. It is a modular, process-based web server that
creates a new thread for each concurrent connection. Everything from server-side
programming language support to authentication mechanisms can be
provided[ CITATION gur214 \l 1033 ].
Apache tomcat server: Apache Tomcat, also known as Tomcat Server, is a popular
choice among web developers who are creating and maintaining dynamic websites
and Java-based applications[ CITATION fas20 \l 1033 ].
Lighttpd server: Lighttpd, pronounced lighty, is another free web server included
with the FreeBSD operating system. This open-source web server is quick, safe, and
uses very little CPU power. Lighttpd is also compatible with Windows, Mac OS X,
Linux, and Solaris[ CITATION tut212 \l 1033 ].
Jigsaw server: The World Wide Web Consortium created Jigsaw (W3C's Server). It
is open source and free, and it runs on Linux, Unix, Windows, Mac OS X Free BSD,
and other systems. Jigsaw is a Java application that can execute CGI scripts and PHP
programs[ CITATION tut212 \l 1033 ].
15 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
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 of the Hospital Management System (HMS) through search engine
optimization.
The Domain Name System (DNS) is the Internet's phone book. Domain names such
as nytimes.com and espn.com allow people to access content on the internet. Internet
Protocol (IP) addresses are used to communicate between web browsers. DNS
converts domain names to IP addresses, allowing browsers to access resources on the
Internet. Each Internet-connected device has a unique IP address that other machines
use to locate it. DNS servers eliminate the need for humans to memorize IP
addresses[ CITATION clo21 \l 1033 ].
Top level Domains
The last section of a domain name, or the section that comes after the "dot" sign, is
known as the top-level domain (TLD). The “.com” component of the internet address
https://www.google.com is an example of a TLD. Generic TLDs and country specific
TLDs are the two most common types of TLDs. Examples of some TLDs are .com,
.org, .net, .gov[ CITATION Cha21 \l 1033 ]
Generic TLDs: These are the most popular TLDs, including ".edu" for educational
websites and ".com" for commercial websites. top level domain is the last level of
every fully qualified domain name. These TLDs can be registered[ CITATION Cha21
\l 1033 ].
Country-code TLDs: The country code top level domain (CCTLD) is an internet top
level domain that is normally reserved or used for a nation, sovereign state, or
dependent territory that has a country code. The ccTLD for Srilanka, for example, is
".lk."[ CITATION Cha21 \l 1033 ]
16 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Sponsored TLDs: A sponsored top-level domain (TLD) is a customized top-level
domain (TLD) with a sponsor that represents a specific community that the domain
serves. The community engaged, on the other hand, is based on ethnic, technological,
geographical, professional, or other theme notions presented by private groups that
set and enforce restrictions restricting registrants' eligibility to use the to
TLD[ CITATION Cha21 \l 1033 ].
Infrastructure TLDs: This category has only one TLD, which is "arpa." This TLD is
managed by the Internet Assigned Numbers Authority on behalf of the Internet
Engineering Task Force (IETF)[ CITATION Cha21 \l 1033 ].
Second Level Domains
Within the DNS hierarchy, second-level domains are domains that follow top-level
domains. For example, in Nike.com, Nike is the second-level domain. Quite often,
second-level domains are the name of the business or vendor that registered the
domain name with a registrar. The brand name, company name, or project name is the
identifier for potential customers.
On top of these general second level domains, there are also country code secondlevel domains (ccSLD). In such cases, the second-level domain will be found to the
right of the period; for example, in a domain such as nike.co.ca, the country code toplevel domain is .ca and the ccSLD is.co.
Third Level Domains
Throughout the DNS structure, third-level applications naturally pursue second-level
domains. They will be discovered to the left of the SLD, and the wedge measure is
often discovered to be due to the sub domain. Larger companies often use sub-level
domains as descriptors that can be distinguished around various departments.
Generally, "www" is by far the most typical third-level domain. When a business uses
17 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
various third-level domains, they usually refer to a particular client inside the
business.
Uses of DNS.
DNS is used to underlie many other types of Internet communication in addition to
transforming domain names into IP addresses. like.

Messages are forwarded to email servers and webmail providers.

Within a web application, connecting app servers, databases, and middleware.

Virtual Private Networks (VPN)
Over the last two decades, DNS has changed. DNS has found new usage thanks to
next-generation DNS services like NS1, which provide enhanced traffic routing
features.
Data centre and cloud migration - Controlling traffic flow from on-premises resources
to cloud resources.
Internet traffic management - decreasing traffic jams and ensuring that traffic is sent
to the most suitable resource in the most efficient way possible.
Geographical routing - Each user's position should be established, and they should be
directed to the closest resource.
[ CITATION ns121 \l 1033 ]
How domain names are structured
A three-part arrangement makes up a full domain name. It begins with the computer
or host name (for example, “www” for “world wide web”), then the website's name,
and finally the TLD (like .com or .gov). A dot separates each portion of the domain
name, resulting in a completely eligible domain name like “www.google.com”
[ CITATION mai21 \l 1033 ].
18 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Typically, a search engine is an Internet-based software program or script that
searches documents and directories for keywords and returns the results of any files
that contain those keywords. There are now several search engines available on the
Internet, each with its own set of capabilities and functionality. They are also
extremely powerful. Google is the most common and useful search engine. There are
several popular search engines available, including Baidu, Bing, and Yahoo, but
Google is the strongest and most useful of them all.
The impact of search engines on website success is critical because the most powerful
way for a website to connect with users is by search engines. It benefits users by
allowing them to quickly access the website. Another benefit is that it improves the
website's functionality. if the website does not appear on the top outcomes or on the
first page of the search result section then peoples are less likely to discover it leading
to bad website performance. However, there are also very significant effects of search
engines on website results.
The method of search engines extracting data from webpages and saving it in
databases is known as website indexing. They do this because they need to process
data in order to show their customers the most important information. As a result, web
page indexing is critical for websites to appear in search engines in response to user
requests. there are many methods provided by search engines that help in
improving indexing of any website

XML Sitemap. (Extensible Markup Language) For websites, sitemaps are a
set of URLs that aid search engines in determining how this website needs to
be crawled.

Meta robot tags. It means that when a search engine crawls a website, it looks
for the meta robot name. This tag tells them whether or not they are able to
index this page.
19 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development

Robots.txt, is an important tool for allowing or disallowing search engines
from indexing websites at large scales. It is stored in the root directory of the
website.
These are the methods of website index[ CITATION eeb21 \l 1033 ].
Search engine optimization
The process of influencing the online visibility of a web page or a website in a web
search engine's unpaid results, also known as normal, organic, or acquired results, is
known as search engine optimization (SEO). The sooner or higher a website appears on
the search results tab, and the more often it appears on the search results column, the
more visits it will receive from search engine users. Following that, these guests can be
turned into clients. SEO may target very different kinds of search, including image
search, video search, and industry specific vertical search engines[ CITATION sli21 \l
1033 ].
Methods like Title tag, Meta Tag, Update content regularly and publishing relevant
content can be used to improve the site index value and rank through search engine
optimization.
Meta tag- The description meta tag is also very important when it comes to rating a
website in search engines. It is also shown in your website's header area. The introduction
tag is a summary of your business website that explains what the page is about. The
definition tag's length must not exceed 150 characters.
Title tag- Your website's title tag is also included in the headline. It is a short summary of
what you have to say. The related target keywords are included in the titling tag. The tittle
tag should not be longer than 70 characters. When anyone looks for the website, the title
tag appears alongside it in the search engine results. It is extremely beneficial in terms of
directing visitors to your website.
20 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Update content regularly- Regularly updated content is viewed as one of the best
indicators of a site's relevancy.
publish relevant content- means that great content is the most important factor in search
engine results, and there is no substitution for it. Publishing appropriate content generated
exclusively for the target audience boosts web traffic, which boosts authority and
relevance.[ CITATION sli21 \l 1033 ]
The cost-effectiveness of search engine optimization is due to the fact that there is no fee
paid to the search engine to be used in its results. This kind of advantage would not be
available to a website that does not use search engine optimization. This will also include
direction about what kind of material or posts to have on the website to make it more
attractive.
Search Engine Optimization (SEO) is a website ranking system, the higher ranked
websites will be shown in the SERP as well after SEO there are some methods that can be
used to boost website indexing and ranking to increase search traffic and attract more
users to the website. However, these are very useful and important to Arogya healthcare
hospital system to more increase the website rank and the index value.
1.3 Identify and explain the common web development technologies and
frameworks. Explain the tools and techniques chosen to develop the above web
application and justify your choice by providing valid evidences.
With the rising standard of web applications and the increase in complexity of
technology, frameworks have become an essential part of the web development world.
Endorsing in frameworks is a sensible approach instead of reinventing the techniques.
Frameworks help developers in building rich and interactive applications these are for
both backend and frontend development. These frameworks basically support web apps,
websites, and APIs development.
21 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Backend Frameworks
Backend frameworks consist of tools and languages used in server-side programming in a
web application development environment. The developers play an instrumental role in
web development creating the core logic which an application runs. According to experts,
Node.JS and Python play a lead role in backend development.
Django- Django is a platform for building model-view-template applications. It is used
by website production firms as well as large corporations such as Google, YouTube, and
Instagram. Convention over setup and DRY are the trends it follows. In Django, security
is really important, and it offers techniques and resources for developers to help them
create a stable website. Preventing code execution in the template layer is one
example[ CITATION Ami20 \l 1033 ].
Laravel- Laravel is a model-view-controller platform that employs PHP, the most widely
used web language. This architecture is fairly recent, and it includes API support right out
of the box. Web developers can build personalized architecture using Laravel's exquisite
and articulate structure. Laravel is a popular choice among developers because of its
scalability, stability, and functionality[ CITATION Ami20 \l 1033 ].
Spring- Websites like Wix, TicketMaster, and BillGuard use Spring. Since java is a
strongly typed language, it is common among programmers. With its rigid architecture
frame, developers can build simple, quick, and scalable applications[ CITATION
Ami20 \l 1033 ].
Express- It is used by major corporations such as Uber, IBM, and Accenture because it is
compliant with other architectures such as Kraken, Loopback, and Sails. Its core
functionalities take advantage of Node.js output without obscuring the language's
functionality. It is compatible with both absolute and REST API applications[ CITATION
Ami20 \l 1033 ].
22 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Frontend frameworks
A front-end architecture is a framework that helps you develop the front end. It typically
requires a method for structuring your files (for example, using components or a CSS
preprocessor), making AJAX requests, styling your components, and associating data
with DOM objects[ CITATION Max20 \l 1033 ].
Angular- AngularJS is an open-source front-end platform with several features. It is used
by big fishes like Google, Microsoft, and PayPal. Dynamic web sites can be created by
programmers. The heart is light and quick to read thanks to Declarative Paradigm
patterns. Apart from its height, the biggest disadvantage is that it is not SEO
friendly[ CITATION Ami20 \l 1033 ].
React- React is more of a front-end library than a system, many developers regard it as
such. Component-based architecture was used for the first time in this framework. It
comes with a computer dom that is simple to use and speeds up dom manipulation. React
was created by Facebook and can be used on both the server and client side[ CITATION
Ami20 \l 1033 ].
Bootstrap- Bootstrap is leek, intuitive, and very powerful front-end framework for faster
and easier web development. Bootstrap utilizes less CSS, is compiled via node, and is
managed through GitHub.
Backbone- Backbone is a lightweight front-end architecture for creating rich single-page
applications. It partially implements the MVC specification by following the MV*
standard. It has a thriving community and is solely reliant on the underscore’s library.
When combined with Mustache and Marionette, Backbone helps you to build full clientside applications[ CITATION Ami20 \l 1033 ].
There are different tools and techniques use for a different webpage. It does not mean that
all members in a team use the same tools and techniques for designing a webpage. While
choosing the tool and technique for creating webpage, keep in mind all required things so
23 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
that we will not face any problem in future. So however, tools and techniques are most
important factor to before creating a web application. In Arogya healthcare management
system there are used some tools and techniques. In here 2 type technologies are used and
they are front end technology and back-end technology. The front-end technologies are
HTML, CSS, and JavaScript. And backend technologies are PHP and MySQL. Also, in
addition bootstrap also used to develop the webpage.
HTML, CSS, and JavaScript over all will give a more attractive look for the webpage.
That is the main reason for choosing these. also, these three tools are most suitable tool
to develop front end of the page. HTML, CSS, and JavaScript give more user friendliness
to the webpage the users can use easily. However, these tools give more good look and
users can interact easily. In hospital management system MySQL is used to store a data in
a structured database, so we can view their logins and other data’s. Also, PHP is used to
this webpage the reason is PHP can add, delete, and modify data in the database also PHP
can be used to control user access also that is why in here used PHP.
[Blank kept intentionally]
24 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Task 2
2.1 Considering the requirements given in the above scenario 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.
The two most commonly used words in web development are frontend and backend. Both
are important, but they are not comparable. For a website to work successfully, each side
must communicate and collaborate efficiently.
Frontend Development- The front end refers to the section of a website that users
interact with directly. It encompasses everything that people are exposed to on a daily
basis. Front End developers provide the structure, appearance, behavior, and content of
everything that appears on browser displays when websites and online apps are opened.
The Front End's key goals are responsiveness and performance[ CITATION pal21 \l 1033
].
HTML: HTML is the term for Hypertext Markup Language. It is a markup language that
is used to design the front-end part of web pages. HTML is a markup language that
combines hypertext with markup. The term "hypertext" refers to the connection between
online pages. Within the tag that specifies the structure of web pages, the markup
language is used to create the text documentation[ CITATION pal21 \l 1033 ].
CSS: CSS (Cascading Style Sheets) is a simple language that was created to make the
process of making web pages presentable easier. Styles may be applied to web pages
25 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
using CSS. More crucially, CSS allows you to do so without having to worry about the
HTML code that makes up each web page[ CITATION pal21 \l 1033 ].
JavaScript: It is a well-known scripting language that is used to make websites magical
and interactive for users. It is used to make a website more functional by running exciting
games and web-based apps[ CITATION pal21 \l 1033 ]. JavaScript, on the other hand, is
utilized to create interactivity on the client side. A web development platform such as
Ruby, PHP, or.NET is utilized on the server side. When a web developer creates an
application, the work is done on the server, and the user receives raw HTML.
Backend Development- The server-side of a website is referred to as the backend. It
organizes and saves data, as well as ensuring that everything on the client side of the
website functions properly. It is the section of the website you cannot see or interact with.
It is the part of the software that does not interact with users directly. Users have indirect
access to the pieces and attributes established by backend designers via a front-end
application. The backend includes activities such as building APIs, developing libraries,
and interacting with system components without user interfaces or even scientific
programming systems[ CITATION pal21 \l 1033 ].
Although frontend and backend development are very distinct, they are both facets of the
same problem. The frontend is what people see and interact with, whereas the backend is
the backbone of the system. Frontend refers to the visual parts of a website that visitors
can view and interact with. On the other side, the backend is responsible for everything
that occurs in the background.
Presentation layer
Accepting user inputs or requests and presenting data in a user-friendly way are the
responsibilities of the presentation layer. It receives inputs and transmits them to the
application layer as inputs or requests. When a user submits data through one or more
channels, such as conventional applications, websites, portals, mobile device webpages
and apps, the presentation layer is employed. However, the presentation layer, which is
developed using HTML, CSS, and JavaScript, is sent to a computer device via a web
26 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
browser or a web-based application. This might make use of frameworks like React,
Angular, and Ember, among others. Through application program interface calls, the
presentation layer connects with the other levels[ CITATION alt19 \l 1033 ].
Application layer
The business logic layer is also known as the application layer. This is where the logic
controls and functionality for processing data from the display layer and database layer
may be found. It serves as a link between the presentation layer and the database layer.
The business logic that underpins the application's fundamental functionalities is written
in a language like Java[ CITATION alt19 \l 1033 ].
However here are advantages and disadvantages of these two layers. And here are the
advantages. The first one is it makes the logical separation between application layer and
presentation layer. Also, migration to new graphical environments is faster. Another one
is as each layer is independent it is possible to enable parallel development of each layer
by using different sets of developers. Also, the main advantage is easy to maintain and
understand large project and complex project. Also, there are few disadvantages, and they
are here. First one is to implement even small part of application it will consume lots of
time. Also need good expertise in object-oriented concept and also final one is it is more
complex to build.
However, the relationship between front end and presentation layer is the main
relationship the presentation layer contains both view elements and controllers, which
process commands to and from the user interface. Presentation code controls web user
interaction with the product and its appearance. HTML, CSS, and JavaScript files to
modify elements of the presentation layer. Basically, the presentation layer represents the
customization of HTML, CSS, and JavaScript. So basically, presentation layer formed by
front end development. However, the relationship between back end and application layer
is it basically formed by backend development. The application layer is the back boned of
back-end development. Also, application layer is the main important part in backend
27 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
development if have any issues or problem deferentially backend development is not
working. So, application layer is more important here.
2.2 Discuss the differences between online website creation tools and custom-built
web sites by considering the design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI). Evaluate the tools
and techniques
available to design the web application given in the scenario.
Custom-built web sites- With a custom website, you can and should use design to
express your company's culture and personality. A one-of-a-kind design can be presented,
changed, and turned into a bespoke website template. A good web development company
is always upgrading their code and looking for new methods to make the sites they create
last longer. SEO plays a big and main role in the success of any website. The site will be
developed to be search engine friendly and will be tested to operate across all browsers.
In addition, a customized website costs more than a template. Creating a bespoke site, on
the other hand, takes longer than creating a template site.
Online website creation tools- Most themes are designed in such a way that what you
see is exactly what you receive. Colors and fonts etc. can be changed, but the layout is
relatively fixed. If you truly like the style and style and do not want to modify it, a
template can be a good option for you. Many start-up businesses require a website to be
up and running immediately. Plug-and-play website layouts and platforms such as
WordPress, Squarespace, and Wix are common. A benefit is that the website creation
tools come with web hosting services, so we do not need to purchase it or set it up
separately.
In comparison both online creation website and custom-built site they are different and
useful. In online creation web site cost is one of the most attractive features of an online
28 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
website creation. By using this tool and techniques the user can immensely cut the cost of
designing a website and also the process is not complicated. Also, in custom built website
cost is more expensive than in online creation web site and also in custom built website
defiantly want to spend more time and work. So custom built website is more expensive
than online creation website. However, if compare these two another feature is in online
creation web site easy to use because there have some key options that means in online
creation website have simple drag and drop option and more styling text are done by
click so online creation website is faster and easier to use. But in custom built site is more
different the reason is in custom built site have here also have those options in different
way that mean the styling of Text, Images and other components is also done through
code also sometimes custom-built website get more time to load also. So, in here online
creation website is easy to use. Comparing these two basically the custom-built sites is
best and easy to use.
In online created website, the system UI and UX is more likely to have a pleasant UI and
UX. Most web designers employ pre-built templates, while custom-built websites have a
higher risk of having a system with poor UI and UX since the designers do not employ
pre-built templates. So, why do custom-built sites have poorer UI and UX than online
creation sites? Additionally, some custom-built sites are less user friendly than online
creation sites. It can be difficult or impossible to implement different and unique
functionalities in an online creation website using the limited tools available. Custom
built sites, on the other hand, have the flexibility to implement unique functionalities with
unique procedures that meet their company's needs. These are, however, the differences
between online website creation tools and custom-built websites.
Tools and techniques available to design the web application.
In only a few years, web development tools have gone a long way. We can take advantage
of the power of well-tested libraries to optimize our productivity and get access to more
responsive design options. Not only that, but owing to ever-improving version control
systems, we can construct things together. From browser add-ons and plugins to
29 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
processors that streamline our code, there have never been more possibilities for creating
awesome web applications. However, here are the most popular web development tools
and they are jQuery, bootstrap, angular.js, HTML, CSS, and java script. These are front
end technologies. MySQL and PHP are the back-end technologies.
Following are few development tools with their pros and cons.
HTML- which is a standard markup language for documents designed to be displayed
and viewed on the internet. It also aids in the creation of the structure of a web page.
The head section contains the metadata that describes the page, whereas the body section
contains all of the tags required to represent the visible content of the web page. HTML is
a platform-agnostic language that can be used on any platform, including Windows,
Linux, and Macintosh[ CITATION pul21 \l 1033 ].
Pros.

User friendly

Free

Browser supportive
Cons.

Static language

Limited security features

Time consuming
CSS- Cascading style sheet is a method sheet language that provides web designers
control over how an internet site communicates with web browsers including the
formatting and display of their HTML documents. The language allows web developers
to regulate various style elements and functionalities, like layout, color, fonts, and
therefore the formatting and display of HTML documents. You may use CSS to change
30 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
the color of the text, the font design, the spacing between paragraphs, the size and layout
of columns, and more[ CITATION pul211 \l 1033 ].
Pros.

Less complex compared to others.

Reduce file transfer size.

Simplifies the maintenance.
Cons.

Less security

Cross browser issues

Browser compatibility
JavaScript- In web development, JavaScript is frequently performed directly in the
client's browser. It is possible that this is a client-side scripting language, implying that
the ASCII text file is handled by the client's browser rather than the internet server.
JavaScript code, like server-side scripting languages such as PHP and ASP, is frequently
put anywhere inside the HTML of a site[ CITATION pul201 \l 1033 ].
Pros.

Fast execution

Support all types of browsers.

Makes rich interfaces.
Cons.

Complex to read.

Code is always visible.

Difficult to detect errors.
31 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
By using the techniques listed below, it is simple to create a beautiful and functional
website. Only the most significant aspects of the website should be addressed by the
designer. Simply consider the following tips for successful web design approaches to
create a useful and entertaining website.
Simplicity- Make items and choices visible and accessible. The user may simply
accomplish their goal by using key pages. Excellent site design communicates with
people without putting them on the spot. You must choose carefully what to include and
what to leave out[ CITATION jam18 \l 1033 ].
Style/Typography- Users may distinguish your organization from the competition by
using unique typography. Quality typography is based on what other e-commerce web
design businesses have done in the past. There is a desire for anything that is unique.
Keep in mind that too much creativity might cause a user to become confused. Effective
style strategies improve the user's experience[ CITATION jam18 \l 1033 ].
Animations- Web animation may help make concepts and user interfaces more
understandable. In our digital age, animations will continue to demonstrate the brand's
strength. Some of these tools are geared toward non-animators such as creators,
developers, and others[ CITATION jam18 \l 1033 ].
[Blank kept intentionally]
32 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Task 03
Figure 1 Wireframe for home page
33 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 2important coding for home page
Figure 3 important coding for home page
34 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 4 important coding for home page
Figure 5 Homepage
In home page on its header is navigation bar, navigation buttons and they are home, about
us and contact. Below that is a slideshow of images after that are logins. However, this
homepage give attractiveness of the system.
35 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 6 Wireframe for patient login
Figure 7important coding for patient login
Figure 8 important coding for patient login continued
36 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 9 important coding for patient login
Figure 10 important coding for patient login continued
37 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 11 Patient login
Figure 12 Wireframe for patient registration
38 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 13 important coding for patient registration
Figure 14 important coding for patient registration
Figure 15 important coding for patient registration
39 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 16 important coding for patient registration
Figure 17 Patient registration
40 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 18 Wireframe for doctor login
Figure 19 important coding for doctor login
41 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 20 important coding for doctor login
Figure 21 Doctor’s login
42 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 22 Wireframe for doctor dashboard
Figure 23 important coding for doctor dashboard
Figure 24 important coding for doctor dashboard
43 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 25 important coding for doctor dashboard
Figure 26 important coding for doctor dashboard
Figure 27 important coding for doctor dashboard
44 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 28 Doctor dashboard
Figure 29 Wireframe for user dashboard
45 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 30 important coding for user dashboard
Figure 31 important coding for user dashboard
46 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 32 important coding for user dashboard
Figure 33 important coding for user dashboard
Figure 34 user dashboard
47 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 35 Wireframe for admin login
Figure 36 important coding for admin login
48 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 37 important coding for admin login
Figure 38 Admin login
49 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 39 Wireframe for admin dashboard
Figure 40 important coding for admin dashboard
50 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 41 important coding for admin dashboard
Figure 42 important coding for admin dashboard
51 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 43 important coding for admin dashboard
Figure 44 important coding for admin dashboard
Figure 45 important coding for admin dashboard
52 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 46 Admin dashboard
Figure 47 Wireframe for Patient information
53 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 48 important coding for patient information
Figure 49 Patient information
54 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 50 Appointments
Figure 51 Wireframe for Patient invoice
55 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 52 Patient Invoice
Figure 53 important coding for patient invoice
56 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 54 Wireframe for Room availability
Figure 55 Room Availability
57 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 56 Wireframe for Schedule
Figure 57 Staff and operating room schedule
58 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Figure 58 Database design
Figure 59 Table of patients
The database was developed using MySQL for the above system. Which is supported by
the xampp server.
The Web pages compares and constrict as client and server. The webpage is very
responsive to users as it responds quickly, the users can easily register them selves to
enjoy the services, from the search option you can search for doctors according to their
area of specialization to book an appointment. Users can also give their feedback through
contact us. Admins can authorize in allowing and denying access, users can login from
anywhere and anytime. Website is both mobile and PC friendly and also effectively
optimized. Although this is tend have high traffic website has high response rate.
The server-side performance of the website is very effective and to measure the
performance of the website. This website is designed using PHP and JavaScript and all
59 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
the form is designed using HTML. When a user registers them by filling their data then it
all store into the database of the website and retrieved whenever it is required. Also, it
takes few second to response on hitting means it provides quick response and all mail of
user registration and of unauthorized access is automatically goes to the admin email. The
database never stored duplicate data and shows error pop-up whenever the wrong
credential is filled. As a conclusion of contrast and comparing of my design have
different functions, and the relationship between them changes through the degree of
mutual influence. Which are always interdependent. Changing one means changing the
other.
Every website design and development project has a set of processes that must be
completed again and over again. While each project and its objectives are different, the
sequence of actions required to get a company website up and operating is the same. The
actions that must be performed to finish the design and development of a website are
outlined in a well-defined website design process. Following a well-defined and
documented web design process reduces project completion time, increases efficiency,
and guarantees that no critical phases are overlooked. Here is a list of stages that the web
design process entails in order to develop successful websites while also avoiding web
design.

Define the goals

Planing

Researching
This website was developed based on the design but not every part of the design was
easily created. While some parts of the design were developed with a major challenge,
The user interface of a website is a key need, and the system's user interface is a major
development problem. The most essential component of system design is the user
interface. The usability of a website is improved by a well-designed user interface. A
system's users are a diverse group of people who come from various backgrounds and
60 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
regions. The system should be straightforward for all users, regardless of their affiliation.
Visitors should be able to find what they are searching for quickly. However, creating a
decent user interface is the most difficult aspect of the design process. and another
requirement is a way to give patient invoices in advance the challenge is algorithm to
generated invoices was hard to generate but this feature would enhance customer
satisfaction. and also, to develop a website which is accessible, so need to design and
develop it in a way that all users have controlled access to the information, functionality,
and features of the website. These are the major challenges faced when developing the
system.
Another requirement is proper admin dashboard with patient information, staff schedule
and operating room schedule, cause these functions are important to admins to help
enhance customer satisfaction, The challenge faced was creating a dashboard with those
functions because interconnection among those data type was complicated. another
requirement is check room availability technical Challenge is in here need to have a
search in the database to find out whether the room is available in the database or not. If a
room is reserved by the user, it should be deduced from the number of rooms available.
This process was done by using PHP coding and MySQL.
In addition, when developing the system there were many coding errors and new codes
were found in internet and then they were modified according to this system. So, solving
the errors of the system is another important challenge faced when developing the
system. So mentioned above are the technical challenges when developing the designing
phase of the system.
61 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Task 4
4.1 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). Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
When end customers use a website, Quality Assurance (QA) guarantees that they have a
functional user interface and the best possible experience. It looks at a website to see if
there are any problems that were ignored during the design and development process.
While evaluating the system user interface and assessing the user experience, the QA
process is anticipated to uncover design flaws and development mistakes. QA testers are
responsible for a variety of tasks during the QA process, including reviewing
specifications and verifying that all client needs are met. They also create a test strategy
and test cases to test the system. Quality assurance, on the other hand, generally entails
requirement testing, design testing, and functionality testing.
Testing Requirements - Requirement testing takes into consideration the customer's
declared needs as well as any design papers that have been authorized by the client. The
QA testers generate a list of criteria and utilize it to assess the system's layout and
prototype. Throughout the development process, requirement testing is necessary to
guarantee that the project team accomplishes all of its mission objectives. After ensuring
that the requirements document's quality is ensured and maintained, the QA testers finish
the document and build a test plan to test the system. Microsoft Edge, Google Chrome,
Opera, and Mozilla Firefox are among the browsers that are compatible with the website.
Design Test- The appearance is the focus of design testing. The QA tester evaluates if the
website's appearance and feel match the planned design and general layout when testing
the design. Design testing is a multi-faceted process that involves tasks like browser
testing. The site interfaces, on the other hand, have been thoroughly tested, with the color
62 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
of the interfaces, typeface, and pictures all functioning as intended. There are several
techniques for testing the design, including tree testing, card sort testing, and A/B testing.
However, a design test is carried out across many browsers to guarantee the product's
quality.
Testing the functionality- The system's user interface and user experience are both
evaluated during functional testing. It is generally the last stage in the Quality Assurance
testing process. It is a meticulous procedure that guarantees that every link, button, form,
and other element works properly. When a calculation is done, it is tested and compared
to the results of a manual calculation. It is also checked whether the Doctors can be found
by their names and whether their availability is displayed. The website is tested across a
variety of browsers and systems to ensure that the user will have no difficulties viewing
or using the site, and it is also compared to the specifications to see if the system has
fulfilled the client's criteria and if all required functions are available.
4.2 Create a suitable test plan for the developed system and critically evaluate
the results of your Test Plan . 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 improvements.
Test plan
Introduction- Arogya Healthcare Hospital is a well know quite busy place known for its
healthcare services. Arogya Healthcare Hospital decide to implement a hospital
management system also this system developed by using HTML, CSS, JavaScript, PHP,
and MySQL. Arogya Healthcare Hospital Management System provides all basic and
important information’s about patient information to staff and doctors, room availability
to admins, daily schedules, and patient invoices.
63 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Purpose- In here there are basic functions are currently done by manually, but the main
objective is creating a complete automated system. In here basically included some
features to the system and they are the patients can register and login to the system and
also the admins can check the room availability and update the details another one is the
system allows the patients to create the appointments , another one is the admins can
calculate the payments for the appointments and final one is the patients can search the
doctors according to the specialization. These are the basic few functions of the system.
So, the basic purpose create an automated system and include these functions.
Scope- Testing will done for selected functions to check whether system is fully
functional and user friendly . In here entire buttons will also to be tested. As the hospital
management system has a large set of functions, we have prioritized the features and
testing will take place according to this priority.
Goals- The major objective of the test is to discover flaws in the system while also
ensuring user usability. And provide a permanent remedy for their bugs; moreover, after
the testing, the system should be easy to use and beautiful; additionally, after the testing,
the system's users should be able to easily accomplish their tasks effectively.
Testing criteria
Login form: The test cases involved are whether valid password and name are entered, or
invalid name and password entered.
Patient registration form: The test cases included are-on the click button and respond and
other functions.
Appointment creation form: The test cases included are-on the click of button respond
and other functions.
Schedule: The test cases included are-on the click of button respond and other functions.
64 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Testing and Results
Login form
Test case
Enter valid login details
Expected result
System should open own
Test result
Successful
and click login
Enter invalid login details
main window
System should display
Successful
and click login
error message
Patient Registration form
Test case
Clicking submit after
Expected result
System should display a
Test result
Successful
filling out form
message success and open
Inserting already existing
new window
Display error message
Successful
Display error message
Successful
Test case
Clicking submit after
Expected result
System should open new
Test result
Successful
filling out form
Clicking drop down list of
window
Should show a drop-down
Successful
doctors
list
information and click
submit
Leaving one field without
filling
Appointment creation form
Staff and Operating room schedules
Test case
On click of add button
Expected result
Opens a form
Test result
Successful
65 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
On click of update button
Modified records are
Successful
On click of delete button
updated in the database
This delete data of selected
Successful
case
From all of these test cases we were able to obtain the expected results.
The Arogya healthcare hospital management system has been a huge success here, based
on test results and other testing methods. The system is more appealing, but there are still
certain features that need to be included. The developed system may be regarded a good
system based on the aforementioned test results, and it is also more user pleasant. System
performance and satisfying expected requirements are the reasons for the system's
success. Because the user actions take less time, the system may be called efficient, and
the security level is the most important aspect of the system because all user information
is totally safe. These are the major reasons for the system's success.
The created system does have certain drawbacks. The first is that there is no option to add
a profile photo upon registration. When registering as a patient, there is no opportunity to
upload a photo to the patient profile. The majority of people nowadays are more attracted
to having these kinds of features in any system. The second issue is a lack of effective
communication among system users. The only option to reach us is through contact us,
which users do not want. If a chat system is used to connect with one another as needed,
it will boost user involvement. Another example is this website, which only enables
subscribers to access it. Visitors who want to learn more may be present, therefore the
website should offer information such as about us, services provided, vision, and mission.
These are the website's few limits.
However, there are certain system enhancements that might be made in the future. A
mobile application might be used to create the system. The use of mobile applications is
becoming increasingly popular throughout the world. Having a mobile app for any
system is appealing to consumers because it makes it easier for them to register and login
66 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
to the system with the system at their fingertips. Improving these features together with
identifying further issues will eventually increase the usability of the system.
References
altexsoft, 2019. altexsoft. [Online]
Available at: https://www.altexsoft.com/blog/engineering/web-application-architecture-howthe-web-works/
[Accessed 25 05 2021].
67 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
Anon., n.d. eebew. [Online]
Available at: https://www.eebew.com/seo-tutorial/on-page-seo/website-indexing/
[Accessed 22 05 2021].
Anon., n.d. extrahop. [Online]
Available at: https://www.extrahop.com/resources/protocols/http/
[Accessed 18 05 2021].
Anon., n.d. slideshare. [Online]
Available at: https://www.slideshare.net/ShivamSaurabh8/how-search-engine-can-effect-yourwebsite-performance-in-search-egnines-converted-1
[Accessed 24 05 2021].
Anon., n.d. techopedia. [Online]
Available at: https://www.techopedia.com/definition/23735/server-software
[Accessed 20 05 2021].
BANGER, E. R. S., 2020. digitalthinkerhelp. [Online]
Available at: http://digitalthinkerhelp.com/what-is-server-in-networking-types-examplesfunctions-and-uses/
[Accessed 18 05 2021].
Bryant, C., 2021. techopedia. [Online]
Available at: https://www.techopedia.com/definition/1348/top-level-domain-tld
[Accessed 20 05 2021].
cloudflare, n.d. cloudflare. [Online]
Available at: https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/
[Accessed 20 05 2021].
Dua, A., 2020. thenextscoop. [Online]
Available at: https://thenextscoop.com/web-development-technologies-and-frameworks/
[Accessed 24 05 2021].
fasthosts, 2020. fasthosts. [Online]
Available at: https://www.fasthosts.co.uk/blog/what-apache-tomcat/
[Accessed 20 05 2021].
guru99, n.d. guru99. [Online]
Available at: https://www.guru99.com/tcp-ip-model.html
[Accessed 18 05 2021].
guru99, n.d. guru99. [Online]
Available at: https://www.guru99.com/apache.html
[Accessed 20 05 2021].
68 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
M., L., 2021. hostinger. [Online]
Available at: https://www.hostinger.com/tutorials/what-is-ftp
[Accessed 18 05 2021].
mailchimp, n.d. mailchimp. [Online]
Available at: https://mailchimp.com/marketing-glossary/domain-name/#:~:text=Domain
%20name%20structure,-A%20complete%20domain&text=It%20starts%20with%20the
%20machine,like%20www.mailchimp.com.
[Accessed 22 05 2021].
ns1, n.d. ns1. [Online]
Available at: https://ns1.com/resources/what-is-dns
[Accessed 21 05 2021].
palaksinghal9903, 2021. geeksforgeeks. [Online]
Available at: https://www.geeksforgeeks.org/frontend-vs-backend/
[Accessed 25 05 2021].
Pekarsky, M., 2020. stackoverflow. [Online]
Available at: https://stackoverflow.blog/2020/02/03/is-it-time-for-a-front-endframework/#:~:text=A%20front%2Dend%20framework%20is,associate%20data%20with
%20DOM%20elements.
[Accessed 24 05 2021].
pulkitagarwal03pulkit, 2020. geeksforgeeks. [Online]
Available at: https://www.geeksforgeeks.org/advantages-and-disadvantages-of-javascript/
[Accessed 27 05 2021].
pulkitagarwal03pulkit, n.d. geeksforgeeks. [Online]
Available at: https://www.geeksforgeeks.org/advantages-and-disadvanatges-of-html/
[Accessed 27 05 2021].
pulkitagarwal03pulkit, n.d. geeksforgeeks. [Online]
Available at: https://www.geeksforgeeks.org/advantages-and-disadvantages-of-css/
[Accessed 27 05 2021].
Rathor, R., 2018. tutorialspoint. [Online]
Available at: https://www.tutorialspoint.com/point-to-point-protocol-ppp
[Accessed 18 05 2021].
row, j., 2018. thenextscoop. [Online]
Available at: https://thenextscoop.com/web-design-techniques/
[Accessed 27 05 2021].
tutorialspoint, n.d. tutorialspoint. [Online]
Available at: https://www.tutorialspoint.com/web_developers_guide/web_server_types.htm
[Accessed 20 05 2021].
69 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
VaibhavRai3, 2020. geeksforgeeks. [Online]
Available at: https://www.geeksforgeeks.org/simple-mail-transfer-protocol-smtp/
[Accessed 18 05 2021].
70 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
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.
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
71 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
P3 Discuss the capabilities and relationships between front-end and backend website technologies and explain how these relate to presentation
and application layers.
P4 Discuss the differences between online website creation tools
and custom built sites with regards to design flexibility,
performance, functionality, User Experience (UX) and User
Interface (UI).
M3 Evaluate a range of tools and techniques available to design and
develop a custom built website.
LO3 Utilize website technologies, tools and techniques
with good design principles to create a multipage
website
P5 Create a design document for a branded, multipage website
supported with medium fidelity wireframes and a full set of client and
user
requirements.
P6 Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with
realistic content.
M4 Compare and contrast the multipage website created to the design
document.
D2 Critically evaluate the design and development process against your
design document and analyse any technical challenges.
LO4 Create and use a Test Plan to review the
performance and design of a multipage website
72 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development
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.
73 | P a g e
L.W.D. Dilshan Rathnasiri
Web Design and Development