Web

Contents
TASK 1......................................................................................................................................1
1.1 Different web technologies..........................................................................................1
1.1.1 Communication protocols....................................................................................1
1.1.2 Server hardware...................................................................................................3
1.1.3 Operating systems (OS).....................................................................................10
1.1.4 Web server software................................................................................................17
1.1.5 Difference between web technologies....................................................................23
1.1.6 Purpose of web technologies...................................................................................24
1.1.7 Relationship between web technologies.................................................................25
1.2 Domain name system (DNS).........................................................................................25
1.2.1 Types of DNS servers.............................................................................................26
1.2.2 Purpose Of DNS......................................................................................................27
1.3 Search Engine Optimization......................................................................................27
1.3.1 How Does SEO Works.......................................................................................28
1.3.2 effect of search engines on website performance..............................................28
1.3.3 How to improve HMS index value and Rank through the SEO........................29
1.4 Web development technologies and Frameworks.....................................................30
Dilmika Kavinda Web Design and Development 1

1.5 Tools and techniques chosen to the web application.................................................33
Task 2.......................................................................................................................................36
2.1 Front end and Back end technologies............................................................................36
2.1.1 Front End.................................................................................................................36
2.1.2 Back End.................................................................................................................37
2.1.3 Relationship between Front End and Back End development...............................38
2.1.4 Web Application Layers........................................................................................39
2.1.4.1 Front End Application layer.................................................................................39
2.1.4.2 Back End Application layer.................................................................................39
2.1.4.3 Web development in presentation layer...............................................................39
2.2 Differences between online website creation tools and custom-built web sites............40
2.2.1 Online website creation tool....................................................................................40
2.2.2 Custom built web site..............................................................................................45
TASK 3....................................................................................................................................47
3.1 Wireframe......................................................................................................................47
3.2 Database design..............................................................................................................53
3.2.1 ER Diagram.............................................................................................................53
3.2.3 Database structure...................................................................................................54
3.2.4 Evidence of the design............................................................................................57
3.3 User interface.................................................................................................................58
3.4 Important codes..............................................................................................................66

3.5 Critically evaluate the web design and development process against your design
document and analyses any technical challenges you faced in development......................72
TASK 4....................................................................................................................................73
4.1 Quality Assurance..........................................................................................................73
4.1.1 QA process and development steps.........................................................................73
4.1.2 Used techniques for develop th web application.....................................................75
4.2 Result of test plan...........................................................................................................76
4.2.1 Create test case........................................................................................................77
References................................................................................................................................79
Table of figures
Figure 1 tower server...............................................................................................................10
Figure 2 rack server..................................................................................................................10
Figure 3 blade server................................................................................................................11
Figure 4 motherboard...............................................................................................................12
Figure 5 processor....................................................................................................................13
Figure 6 memory (RAM).........................................................................................................14
Figure 7 hard drive...................................................................................................................14
Figure 8 network interface card...............................................................................................15
Figure 9 graphic card...............................................................................................................15

Figure 10 power supply............................................................................................................16
Figure 11 operating system with market share........................................................................17
Figure 12 windows OS’...........................................................................................................19
Figure 13 mac OS.....................................................................................................................20
Figure 14 Linux........................................................................................................................20
Figure 15 android OS...............................................................................................................21
Figure 16 IOS...........................................................................................................................22
Figure 17 Apache server..........................................................................................................24
Figure 18 nginx........................................................................................................................25
Figure 19 lighttpd server..........................................................................................................26
Figure 20 apache tomcat..........................................................................................................27
Figure 21 caddy server.............................................................................................................28
Figure 22 NodeJS server..........................................................................................................29
Figure 23 template....................................................................................................................48
Figure 24 drag and drop...........................................................................................................49
Figure 25 Add widgets.............................................................................................................50
Figure 26 Home Page...............................................................................................................53
Figure 27 Patient login.............................................................................................................53
Figure 28 patient registration...................................................................................................54
Figure 29 view patients............................................................................................................54
Figure 30 appoiment history....................................................................................................55

Figure 31 doctors’ login...........................................................................................................55
Figure 32 admin login..............................................................................................................56
Figure 33 admin dashboard......................................................................................................56
Figure 34 manage users............................................................................................................57
Figure 35 manage doctors........................................................................................................57
Figure 36 staff schedule...........................................................................................................58
Figure 37 operation theater schedule.......................................................................................58
Figure 38 ER diagram..............................................................................................................59
Figure 39 doctors table.............................................................................................................60
Figure 40 Patients table............................................................................................................60
Figure 41 admin table...............................................................................................................61
Figure 42 appoiment table........................................................................................................61
Figure 43 medical history table................................................................................................62
Figure 44 Doctor specialization table......................................................................................62
Figure 45 homepage.................................................................................................................64
Figure 46 patient login.............................................................................................................65
Figure 47 Patient Registration..................................................................................................66
Figure 48 Doctors login...........................................................................................................67
Figure 49 Admin Login............................................................................................................67
Figure 50 Admin dashboard.....................................................................................................68
Figure 51 manage doctors........................................................................................................68

Figure 52 Appoiment history...................................................................................................69
Figure 53 Manage patients.......................................................................................................69
Figure 54 Doctor specialization...............................................................................................70
Figure 55 add doctor................................................................................................................70
Figure 56 Manage doctors........................................................................................................71
Figure 57 data delete................................................................................................................71
Figure 58 Data Update.............................................................................................................72
Figure 59 css codes..................................................................................................................72
Figure 60 html and css.............................................................................................................73
Figure 61 bootstrap..................................................................................................................73
Figure 62 database connection.................................................................................................74
Figure 63 login code.................................................................................................................74
Figure 64 log out......................................................................................................................75
Figure 65 data insert.................................................................................................................75
Figure 66 update code..............................................................................................................76
Figure 67 delete code...............................................................................................................76
Figure 68 JavaScript.................................................................................................................77
Figure 69 JavaScript.................................................................................................................77
Table of tables
Table 2 difference between web technologies.........................................................................29
Table 3 test case.......................................................................................................................83

Table 4 test case.......................................................................................................................84

TASK 1
1.1 Different web technologies
1.1.1 Communication protocols
Communication protocols are written standards and formats for digital messages. They're
needed to send and receive communications within and between computers. Communication
protocols are crucial in telecommunications and other systems since they ensure that
messages are sent and received in a consistent and universal manner.
Authentication, error checking, and signaling are examples of communication protocols.

Analog and digital communications can also be described in terms of syntax, semantics, and
synchronization.
Hardware and software both support communication protocols. In digital and analogue
communications, dozens of communication protocols are employed. They are essential for
the operation of computer networks (techopedia, 2020).
1.1.1.1 Types of communication protocols

1. Transmission control protocol (TCP)
TCP is a well-known communication protocol for sending and receiving data over a network.
It separates any communication into a series of packets being sent from the source to the
destination, where they are reassembled (geeksforgeeks, 2021).
2. Internet protocol (IP)
IP was made with the aim of being used as an addressing protocol. It's most usually
associated with TCP. Packets with IP addresses typically routed through multiple nodes in the
network until they reach their destination system. TCP/IP is by far the most widely used
protocol for communications (geeksforgeeks, 2021).

3. HTTP
HTTP (Hypertext Transfer Mechanism) is a protocol for retrieving resources such as HTML
documents. It is the foundation of any data interchange on the Internet, and it is a client-
server protocol, meaning that requests are started by the recipient, which is commonly the
Web browser. Text, layout descriptions, photos, videos, scripts, and other sub-documents are
fetched, and a complete document is reconstructed from them (contributors, 2022).
4. HTTPS
The secure version of HTTP, which is the most common protocol for sending data between a
web browser and a website, is HTTPS. To improve data security, HTTPS is encrypted. This
is especially critical when users send sensitive data over the internet, such as when logging
into a bank account, email service, or health-insurance provider (cloudflare, 2022).
5. SSL (secure socket layer)
The data that is exchanged between a web browser and a server is secured using Secure
Socket Layer (SSL). SSL encrypts the connection between a web server and a browser,
ensuring that all data exchanged is secure and private (geeksforgeeks, 2021).
6. FTP (file transfer protocol)
FTP stands for file transfer protocol, and it is a method of transferring files between devices
via a network. When one party allows another to send or receive files via the internet, the
procedure works. Originally intended to allow users to communicate and exchange data
between two physical devices, the cloud is now routinely used to store files in a safe area that
is held remotely. FTP stands for file transfer protocol, and it is a method of transferring files
between devices via a network. When one party allows another to send or receive files via the
internet, the procedure works. Originally intended to allow users to communicate and
exchange data between two physical devices, the cloud is now routinely used to store files in
a safe area that is held remotely (mitchel, 2021).

7. Ethernet
Ethernet is the industry standard for connecting connected devices such as computers,
routers, and printers. In Ethernet, the devices wait for a free time slot in the network to
interact. When there isn't another device transferring data across the medium, the waiting
device takes advantage of the situation (cloudflare, 2022).
1.1.2 Server hardware
Contractor provides the hardware and other equipment, as well as relevant documentation,
including networking, as part of the Solution. All internal server components, such as
processors, chassis, network cards, memory, hard drives, storage, and power supply, are
referred to as server hardware (moore, 2020).
1.1.2.1 Types of servers

1.Tower server
Figure 1 tower server
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 shapes and sizes, all of
which provide ample processing power without the need for additional mounting hardware
(banger, 2020).
2.Rack server

Figure 2 rack server
In the horizontal rack, this server is housed. This single rack mount server chassis can
accommodate many servers. Its primary goal is to host and control enterprise solutions, and
these servers are commonly found in data centers (banger, 2020).
3.Blade server
Figure 3 blade server
The hardware in traditional computer servers is huge, and other server components are heavy.
However, these sorts of servers are gradually being turned into single slim servers known as
"Blade Servers" by removing hard disks, internal cooling, and ongoing shrinking of
processing equipment (banger, 2020).
1.1.2.2 Components of server computer

1.Motherboard
Figure 4 motherboard
The motherboard is the system's primary circuit board of your computer, to which all of the
other components are attached. The motherboards are the computer more than any
component. The motherboard connects all other components.
The processor (or CPU), supporting circuitry known as the chipset, memory, expansion slots,
a common IDE hard drive interface, and I/O connections for devices such as keyboards,
mouse, and printers are all major components on the motherboard. A graphic adapter, a SCSI
disk drive, or a network adapter are all built-in features on some motherboards (sourcedaddy,
n.d.).
2.Processor

Figure 5 processor
The processor, sometimes known as the CPU, is the computer's brain. Although the CPU isn't
the only factor that influences overall system performance, it's the one that most people
consider when determining which server to buy.
Each motherboard is built to accommodate a specific CPU type. There are two fundamental
mounting techniques for CPUs: slot and socket. However, because there are various different
types of slots and sockets, users must ensure that the motherboard supports the CPU's unique
slot or socket design. Some server motherboards contain two or more slots or sockets,
allowing for the installation of two or more CPUs (sourcedaddy, n.d.).
3.Memory

Figure 6 memory (RAM)
Servers with too much memory are rarely a source of complaint. Because there are so many
various types of memory, users must choose the proper one to match the memory supported
by your motherboard. The motherboard determines the server's total memory capacity. The
majority of new servers can accommodate at least 12GB of memory, with some supporting
up to 32GB (sourcedaddy, n.d.).
4.Hard drives
Figure 7 hard drive
The majority of desktop PCs use IDE drives, which are low-cost hard drives (sometimes also
called ATA). These drives are sufficient for individual users, but because server speed is
more critical, a different type of drive known as SCSI is typically utilized instead. Use SCSI
disks in conjunction with a high-performance SCSI controller card for the best results
(sourcedaddy, n.d.).
5.Network connection

Figure 8 network interface card
Among the most crucial components of every server is the connection. Network adapters are
incorporated into to the motherboards of many servers. users will need to add a different
network adaptor card if their server doesn't already have (sourcedaddy, n.d.).
6.Vedio
Figure 9 graphic card
For a server computer, fancy visuals aren't necessary. Users can use low-cost generic video
cards and monitors on their servers without compromising network performance. (This is one
of the few instances where saving money on a server is appropriate) (sourcedaddy, n.d.).
7.Power supply

Figure 10 power supply
A server requires a larger power supply than a regular desktop computer because it contains
more components (300 watts is typical). If the server contains a big number of hard disks, a
larger power supply may be required (sourcedaddy, n.d.).
1.1.3 Operating systems (OS)
An operating system (OS) is a piece of software that serves as a conduit between hardware
and the user. To run other applications, any computer must have at minimum single operating
system. Web browser, MS Office, Notepad Game, and other applications require a specific
environment in order to run and perform their functions.
The operating system enables us to communicate with a computer without learning its
language. A user cannot use a pc or mac without first installing the operating system
(willioms, 2022).

Figure 11 operating system with market share
1.1.3.1 Types of operating system
1.Batch operating system
Some computer procedures can take a long time. A job with comparable needs is grouped
together again and executed as a group in order to speed up the same process.
A batch operating system's user never interacts directly with the machine. Each user prepares
their work on an offline device, such as a punch card, and submits this to the computer
operator under this type of operating system.
2.Multi-tasking / time sharing operating system
People at various terminals (shells) can utilize a same computer system completely using a
time-sharing operating system. Time sharing refers to the division of processor time (CPU)
among multiple users.
3.Real time OS

The time it takes a real-time operating system to analyze and response to inputs is extremely
short. Military software systems and space technology systems are two examples of real-time
operating systems.
4.Distributed operating system
Distributed systems make use of multiple processors spread across multiple machines to give
extremely rapid computing to their consumers.
5.Network operating system
A server runs the Network Operating System. It has the capacity to handle data, users,
groups, security, applications, and other networking features.
6.Mobile OS
Mobile operating systems are those that are specifically built to run on smartphones, tablets,
and wearables.
Android and iOS are two of the most well-known mobile operating systems, but there are
also BlackBerry, Web, and watchOS (willioms, 2022).
1.1.3.2 Different operating system
1.Microsoft windows

Microsoft created, promoted, and sold a succession of graphical operating systems. In 1985,
the initial version of Windows was published as a graphical user interface (GUI) add-on for
MS-DOS. Windows 95 was the first version of Windows to be released as a standalone
operating system (greatlearningteam, 2022).
Figure 12 windows OS’
2.mac OS
Apple Inc created a series of graphical operating systems. It is the operating system that runs
Apple's Mac computers and is the successor to Mac OS X (greatlearningteam, 2022).

Figure 13 mac OS
3.Linux
Linux is a free and open-source software operating system based on the Linux kernel. It is
one of the most widely used server and embedded operating systems. Millions of people use
it on their computers all over the world (greatlearningteam, 2022).
Figure 14 Linux
4.Android

It is a Google-developed mobile operating system. It's based on the Linux kernel and was
created with touchscreen mobile devices like smartphones and tablets in mind
(greatlearningteam, 2022).
Figure 15 android OS
5.IOS
Apple Inc's iOS is another example of a mobile operating system. The successor to iPhone
OS is iOS. It's the operating system that runs on the iPhone, iPad, and iPod Touch
(greatlearningteam, 2022).

Figure 16 IOS
1.1.3.3 Advantages of operating system
1. Assuring that the computer's hardware is used correctly and efficiently.
2. Allowing many apps to operate at the same time.
3. Organizing and managing files and directories.
4. Creating a graphical user interface.
5. Taking care of security.
6. Organizing and managing resources (greatlearningteam, 2022).
1.1.3.4 Disadvantages of operating system
1. They can be tough to use and understand.

2. Purchasing and maintaining them might be costly.
3. They may be subject to malicious users' attacks (greatlearningteam, 2022).
1.1.4 Web server software
Computers can act as web servers with the help of web server software. Web servers used to
solely accept static files like HTML, but now they frequently allow the embedding of server-
side apps.
Simple HTTP servers are included in certain web application frameworks. The Django
framework, for example, has run server, while PHP includes a built-in server. These are
typically only intended for usage during the early stages of development (wikipedia, 2022).
1.1.4.1 Different web server software
1. Apache HTTP server
The Apache HTTP Server, often known as Apache or httpd in Red Hat deployments, is a free
and opensource web server developed by the Apache Software Foundation and released
under the Apache License version 2. Since its initial release in 1995, Apache has grown to
become one of the most popular and frequently used web servers, powering approximately
37% of all websites.
Apache is a web server designed in the C programming language that is highly adaptable
thanks to a large number of modules that enhance the web server's functionality. Mod file
cache is used for caching, mod ftp is used for FTP file uploads and downloads, and mod ssl is
used to support SSL / TLS encryption protocols, among others (kiarie, 2020).

Figure 17 Apache server
2. Nginx web server
Nginx (pronounced Engine-X) is an opensource high-performance, reliable web server that

also serves as a load balancer, reverse proxy, IMAP/POP3 proxy server, and API gateway.
Nginx was created in 2004 by Igor Sysoev and has since grown in popularity to outperform
competitors and become one of the most stable and reliable web servers.
Nginx is known for its high concurrency, scalability, and low resource use. Nginx can handle
up to 500,000 requests per second with low CPU use when correctly tuned. As a result, it's
the best web server for hosting high-traffic websites, and it easily outperforms Apache.
LinkedIn, Adobe, Xerox, Facebook, and Twitter are just a few of the popular sites that use
Nginx (kiarie, 2020).

Figure 18 nginx
3. Lighttpd web server
Lighttpd is a free, open-source web server that is optimized for high-performance

applications. Unlike Apache and Nginx, it has a very small memory footprint (less than 1
MB) and uses the server's resources efficiently, such as CPU.
Lighttpd is a BSD-licensed web server that works natively on Linux/Unix platforms but can
also be installed on Windows. It's well-liked for its ease of use, performance, and module
support.
The architecture of Lighttpd is designed to support a large number of concurrent connections,

which is essential for high-performance web applications. For integrating programs with the
web server, the web server supports FastCGI, CGI, and SCGI. It also supports web
applications developed in a variety of programming languages, with PHP, Python, Perl, and
Ruby receiving special attention (kiarie, 2020).

Figure 19 lighttpd server
4.Apache Tomcat
Apache Tomcat is a Java servlet engine, Java Expression Language, and Java Server web
pages implementation that is open source. It appears to be an excellent choice for Java
developers who are creating and distributing applications.
Tomcat is not the same as Nginx or Apache in terms of web server functionality. It's a Java
servlet with enhanced capabilities for interacting with other Java servlets while also
implementing technical specifications like Java Server Pages (JSP) and Java Expression
Language (JEL) (Java EL). Tomcat is unique among web servers in that it is designed
primarily to deliver Java-based content. It was created to give JSP capability that was missing
from the Apache HTTP server (kiarie, 2020).

Figure 20 apache tomcat
5.Caddy web server
Caddy is a multiplatform web server written in Go that can also act as a reverse proxy, load
balancer, and API gateway. Caddy is simple to install and use because everything is built-in
with no dependencies. Caddy supports HTTPS by default and handles SSL/TLS certificate
renewals with ease. Its mobility across other distributions is enhanced by the lack of
dependencies, which eliminates library conflicts.
It's a great web server for running GO apps because it supports IPv6 and HTTP/2, allowing
for speedy HTTP queries. Virtual hosting, powerful WebSockets technology, URL rewrites
and redirects, caching and static file serving with compression, and markdown rendering are
all supported as well (kiarie, 2020).

Figure 21 caddy server
6.NodeJS web server

NodeJS is a server-side runtime environment for constructing JavaScript web apps that is
opensource and cross-platform. It does, however, come with a http module, which has a set of
classes and functions that enhance its capability and allow it to act as a web server (kiarie,
2020).
Figure 22 NodeJS server
1.1.5 Difference between web technologies

Table 1 difference between web technologies
Server software Web server software Operating system
A piece of computer hardware Any application that runs for the The operating system that
designed for hosting large, long- majority of the time or all of the interfaces with the hardware is
running applications with a high time and is ready to respond to generally referred to as a host
level of stability and longevity. inquiries or perform actions on OS.
behalf of another application or
process.

1.1.6 Purpose of web technologies
1. Communication protocols- Inter-network protocol, information exchange protocol, and

interaction protocol are all terms used to describe communication protocol. This is referred to
as a protocol in the field of information technology. The communication protocol's goal is to
join subnets together to form interlocutions for data transfer, signal transmission,
authentication, data representation, and data error detection. Data transmission between the
transport layer and the network layer Defines the structure of data packets as a single and
consistent basis for data transmission across the Internet, allowing computers and devices to
connect and exchange data. believe in each other.
2. Server hardware- In a computer, the hardware is the part that can see, hold, and touch. The
computer's hardware includes the monitor, mouse, keyboard, wires, CPU, and RAM.
Computer manufacturing businesses develop the hardware, and the hardware components
will be used. to make the software work.
3. Operating system- Software is just instructions that can be stored and run by hardware, and
software on the computer is apps that run inside the computer, which we can't handle or
touch. There is a lot of software on a computer. Each piece of software caters to a distinct
purpose.
4. Web server software
- Organize user-to-user and system-to-system interactions.
- Provide program resources and information on how to apply them.
- Organize data storage on external memory and provide tools for searching and retrieving
data.
- Check and maintain peripheral devices with software to make them easier and more
effective.
- Support for system utilities.

1.1.7 Relationship between web technologies
1. Communication protocol - The protocol specifies communication procedures, syntax,

semantics, and synchronization, and also error recovery mechanisms. Hardware, software, or
a combination of both can be used to implement protocols.
2. Server hardware - Hardware is made up of all the physical objects that user can touch and
see that have been integrated and built into a single entity known as a Personal Computer
(PC). In this situation, it may be a laptop or perhaps one of these smart devices.
3. Operating system - The operating system (OS) is the software that runs on top of the
hardware. The operating system (OS) is the software that provides users with an interface via
which users may connect with the hardware. Of all, there is also more to it than that. The OS
communicates with the kernel through device drivers, which deliver "commands" to the
hardware to do the tasks users desire.
4. Web server software - Web server software is also just a piece of software. It is installed
and operates on a computer - the server acts as a Web Server, allowing users to access
information on the Web site from another computer on the network (internet, intranet). The
HTTP protocol allows Web servers to send Web clients across the Internet (or Intranet)
environment.
1.2 Domain name system (DNS)
The Domain Name Method (DNS) is a system for mapping alphabetic names to numeric
Internet Protocol (IP) addresses on the Internet, similar to how a phone book maps a person's
name to a phone number. When a Web address (URL) is typed into a browser, for example, a
DNS query is performed to determine the IP address of a Web server associated with that
name.
The DNS system is an open global network of database name servers that includes 13
authoritative name servers, sometimes known as "root servers," that service the DNS root
zone level. When a DNS query with a domain name is received, a root server (also known as
a DNS root nameserver) responds by sending the request to a top-level domain (TLD)
nameserver based on the TLD of that domain, such as.com, .net, or.org). It directly replies to
queries for DNS records in the root zone by returning a list of authoritative TLD name
servers for the relevant TLD that can resolve the first DNS lookup request for the domain
name's IP address (Anon., 2022).

1.2.1 Types of DNS servers
1. Root server
TLDs are managed by DNS root servers. They are at the very top of the DNS structure and
keep track of TLD zones. It will link domain and IP addresses and serve as a common
interface between users and internet content. The root name server's role is coordinated by
ICANN (Internet Corporation for Assigned Names and Numbers) (dey, n.d.).
2. Authoritative Name Server
An authoritative name server is in charge of a given zone, and they respond to inquiries from
that zone with a great deal of precision. The root name server will take over if the
authoritative name server fails to reply.
3. Primary server
Each domain has just one primary server, and each domain must have one. All updates to the
domain are made on primary servers, which are authoritative for the domains they serve.
They synchronize and update secondary servers (dey, n.d.).
4. Secondary server
For all domains they serve, secondary servers acquire a copy of the domain data from the
domain's primary server or other secondary servers. They have authority over the domains
they serve. They get information from the main servers. They distribute load across all of the
domain's servers. They provide redundancy in the event that other servers are unavailable.
They can provide better local name resolving access (dey, n.d.).
5. Non-Authoritative Name server
Non-authoritative servers are not in charge of any DNS zones. They use recursive or iterative
DNS queries to collect data on specified zones (dey, n.d.).
6. Caching server

The information from other name servers is stored on caching servers for a period of time
defined by the authoritative name server. They keep a local cache of names that have been
looked up. They don't have any domain authority. They have a lower administrative cost of
doing business. They cut down on the overhead of the secondary server's zone (dey, n.d.).
7.Forwading server
Queries are forwarded to another DNS server using forwarding servers. They serve as a hub
for all off-site DNS requests. Off-site requests were centralized. Off-site queries will first be
routed through forwarding servers. They'll cut down on the quantity of duplicate off-site
requests. No additional configuration is required for forwarding servers (dey, n.d.).
1.2.2 Purpose Of DNS
It's much easier to remember a domain or hostname like someone.com than the site's IP
address numbers, which are 151.101.2.114. As a result, all users have to do to access a
website is type the URL.
When computers and network devices try to find each other on the internet, however, domain
names don't work properly. Using an IP address, which is a numerical representation of the
server on which the website lives in the network (internet), is far more efficient and exact
(fisher, 2021).
1.3 Search Engine Optimization
A search engine is a piece of software that does web searches. They use a textual online
search query to search on Internet in a systematic manner for specific information. Search
engine results pages (SERPs) are a series of pages that show the results of a search. Links to

online pages, photographs, videos, infographics, articles, research papers, and other sorts of
files may all be included in the content (wikipedia, 2021).
The term "search engine optimization" stands for "seo services." In basic terms, it refers to
the process of upgrading the website in order to boost its exposure when consumers use
Google, Bing, and other search engines to look for products or services linked to company.
The better business sites rank in search engine results, more the likely business is to attract
existing and future clients (Anon., 2022).
1.3.1 How Does SEO Works
Bots are being used by search engines Such as Google to crawl the web, moving from site to
site, collecting information about those sites, and indexing them. Consider the index to be a
big library where a librarian can pull up a book (or a web page) to assist you in finding know
what users looking about.
Then, utilizing hundreds of ranking factors or signals, algorithms evaluate sites in the indexes
to decide the order with which they should show in search results for a given query. In our
library analogy, the librarian has read every book in the collection and can tell users which
one will contain the answers to the queries.
The SEO success elements can be viewed as proxies for user experience aspects. It's how
search bots determine how well a website or web page can provide the searcher with the
information they're looking for (Anon., 2022).
1.3.2 effect of search engines on website performance
Google announced in 2010 that site speed would be taken into account when determining
search rankings. Since then, site performance has become increasingly important, and
optimizing for performance is now an important aspect of SEO optimization. Google
emphasized the user's perspective in their initial mention of site speed as a ranking criterion,

emphasizing how a slow website negatively effects the user's experience. Users were also less
inclined to stay on pages that loaded slowly, according to Google.
Because Google does not disclose information about its search algorithms, it's difficult to say
how much site speed influences SEO. However, website usability and overall user experience
are critical, particularly for mobile devices, with Google's own study revealing that 53
percent of mobile sites are abandoned entirely if they take more than three seconds to load
(Anon., 2022).
1.3.3 How to improve HMS index value and Rank through the SEO
1.Publish relevant, Authoritative content
The number one driver of HMS search engine rankings is quality, authoritative content, and
there is no alternative for great content, especially when it comes to SEO marketing. Quality
content generated exclusively for HMS's target audience boosts site traffic, which boosts the
authority and relevance of the HMS website. HMS' web writing skills as an authority on the
topic that he is writing about should be fine-tuned.
2.Update HMS content regularly
it is probably noticed that feel pretty strongly about content. Search engines are no
exception. Maintain in mind that regularly updated material is one of the best markers of a
site's relevance, so make sure to keep it up to date. On a regular basis, review HMS material
and make any necessary modifications.
3.Metadata
Each page on the HMS website has a gap between the head> tags for inserting metadata, or
information about the page's contents. If HMS has a CMS site that was created by the UMC
web team, this data will be pre-populated for HMS. However, as the site evolves, it is critical
for HMS to check and update information.
- Title metadata
- Description metadata
- Keyword metadata
4.Have a link Worthy site

A content-rich, authoritative, unbiased homepage that helps visitors learn more about what
they're interested in is more likely to garner links from other websites, improving the
company's search engine optimization.
By including relevant links within the text, you can increase the authority and credibility of
the Arogya HMS. Instead of "click here" links, consider writing out the destination's name.
"Click here" has no search engine value outside of the connected URL, however "Michigan
Tech Enterprise Program" is keyword-rich and will boost HMS search engine rankings as
well as the ranking of the page to which it is connecting.
5.Use alt tags
Always describe HMS image and video media using alt tags, or alternative text descriptions.
They allow search engines to locate Arogya HMS page, which is crucial—especially for
those who use text-only browsers or screen readers.
1.4Web development technologies and Frameworks
- Front End (Client side) Technologies
Front-end technologies are used on the website or application's "client side." They're utilized
to create the website's interactive elements and the elements that users see and interact with.
Text colors and styles, photos, buttons, and navigation menus are all included (Little, 2019).
- Back End (Server side) Technologies
Back-end technologies are used on the website or application's "server side." They're in
charge of laying the technical groundwork. They organize and store data and ensure that the
front-end functions properly. When a user enters login credentials into a social networking
application, for example, back-end technologies are utilized to verify that the credentials are
correct. The server will give back the profile name, photo, and other relevant information
once the credentials have been validated.

Core business procedures are also streamlined using back-end technologies. You could
execute a script on the backend to generate a meaningful report on the frontend in cases
where you have a lot of data to process. You can also send emails to groups of users
automatically. Certain dates, such as the end of a user's free website trial, can trigger emails
(Little, 2019).
1. HTML
Hyper Text Markup Language is the abbreviation for Hyper Text Markup Language. It is one
of the most important technologies for web development. It offers the foundation for a web
page's structure. HTML code ensures that all of a website's content is formatted correctly.
This is so that the material may be displayed correctly in the browser. A browser could not
display text or load photos and other content without HTML (Little, 2019).
2. CSS
The style and aesthetics of a web page are defined by Cascading Style Sheets, known as CSS.
CSS specifies the appearance of a web page, whereas HTML specifies its structure. Page
layouts, colors, typefaces, and element placement are all part of this. CSS is the skin on the
web page, if HTML is the bones. It improves the appearance of the Internet and a website
(Little, 2019).
3. Programming languages
Programming languages are techniques of communicating with computers and instructing

them on what they should perform. They give a set of grammatical rules and a vocabulary for
instructing a computer to accomplish specified tasks. There are numerous programming
languages available, just as there are numerous human languages. Developers usually
specialize in a small number of languages. Some of these are,
- Java script
- Python
- PHP
- Java
- Rust
4. Web Development Frameworks
Frameworks for web development are tools and libraries that developers use to make
programming in a specific language easier and more efficient. They give interfaces to

regularly used functionalities as well as abstractions that make complex things easier to
understand and handle.
Essentially, they speed up the development process by providing developers with a pool of
code resources from which to draw. When frameworks provide all of the tools needed to
build a website or application, there's no need to develop software functionalities from
scratch. Frameworks are less expensive than writing entirely new code since they give a head
start on the development. They also reduce the development risk because they are tried and
true, as opposed to writing new, untested code. Front-end and back-end frameworks both help
to speed up the development process (Little, 2019).
Example of front-end framework
- Angular
Google maintains the Angular front-end framework. It is the most comprehensive front-end
framework, with the most combined functionalities, when compared to other front-end
frameworks.
Large enterprises and companies that require a sophisticated front-end solution frequently
utilize it due to its durability and depth of capabilities. It has a steep learning curve, like with
other complicated applications.
Example of back-end framework
- Node.js
Node.js is a runtime that allows JavaScript to be used to write server-side programming.

Because of JavaScript's ubiquity, Node.js is widely utilized, and there are many experienced
Node.js engineers. It's frequently utilized in real-time online apps. Node.js speeds up and
simplifies the development of basic applications and prototypes. It is not, however, suitable
for CPU-intensive operations.
5. Libraries

Libraries are collections of files, programs, routines, scripts, or functions that can be used in
programming. Libraries allow functionality by putting bits of code together so that the user
does not have to write the code. They, like frameworks, reduce the danger of bad code, speed
up the development process, and save money (banger, 2020).
There are some different libraries,
- React.js
One of the most popular front-end libraries is React.js, which is backed by Facebook. React.js
has a long and difficult learning curve, but it's wonderful for designing beautiful user
interfaces (UI). It's also always evolving and being updated for betterment and upkeep.
- Vue.js
Vue.js is yet another UI development library. Vue.js is simpler and easier to utilize than
React.js. It has a smaller community for troubleshooting and support, however this is partially
countered by its speed and very simple learning curve. Although it is not as well-known as
some other libraries, it is gaining popularity as a result of its ease of use.
1.5Tools and techniques chosen to the web application
1. Sublime text
Sublime Text is a source code editor available for purchase. Many programming and markup
languages are supported out of the box. Plugins, which are usually community-built and
maintained under free-software licenses, allow users to extend the functionality of the
platform. Sublime Text includes a Python API for plugin development.
2. Bootstrap
Bootstrap is a free and open-source CSS framework for front-end web development that is
focused on responsive, mobile-first design. For typography, forms, buttons, navigation, and

other interface components, it includes CSS and (optionally) JavaScript-based design
templates.
3. Codepen
CodePen is an online community for testing and displaying HTML, CSS, and JavaScript code
snippets contributed by users. It's an online code editor and open-source learning
environment where developers may generate and test code snippets known as "pens."
4. jQuery
jQuery is a JavaScript framework that makes traversing and manipulating the HTML DOM
tree, as well as managing events, CSS animation, and Ajax, a lot easier. It's open-source
software that's free to use under the MIT License, which allows for a lot of flexibility. The
syntax of jQuery is intended to make navigating a document easier.
5. HTML5 boilerplate
HTML5 Boilerplate is an HTML, CSS and JavaScript template (or boilerplate) for
constructing HTML5 webpages with cross-browser interoperability.
Used techniques for the web application
1. Browsers
Browsers ask for information and then display it in a fashion that we can understand.
Consider them to be the web's interpreters (timotic, 2018).
Ex- Chrome, Safari, Firefox, Internet explorer
2. HTML & CSS
HTML is used by web browsers to determine what to display when they receive a request.
Also, if you want to better understand how HTML works, you need know what CSS is. CSS
(Cascading Style Sheets) defines how HTML elements should appear on the screen. Users

will be able to create CSS text effects, page transitions, photo hover effects, and other things
in no time if they look through enough tutorials (timotic, 2018).
3. Web development frameworks
Web development frameworks are a collection of objects that a developer can utilize to skip
over the easy or monotonous chores and get directly to work (timotic, 2018).
- Angular
- Rubi on Rails
- YII
- Meteor Js
- Express.JS
4. Programming languages
Computers require a distinct method of communication because they do not employ

languages that are similar to human languages (timotic, 2018).
- JavaScript
- Python
- PHP
- Java
5. Protocols
Protocols are the instructions for sending and receiving data between computers and other
devices.
- HTTP
- DDP
- REST

Task 2
2.1 Front end and Back end technologies
2.1.1 Front End
Front-end web development, often called client-side development, is the process of creating
HTML, CSS, and JavaScript for a website or Web application so that a user can see and
interact with it directly. The difficulty with front end development is that the tools and
techniques used to produce the front end of a website are continually changing, necessitating
the developer's constant awareness of how the field is progressing.
The goal of website design is to guarantee that when users visit the site, they view material in
an easy-to-read and relevant format. This is exacerbated even further by the fact that visitors
today use a wide range of devices with different screen sizes and resolutions, prompting the
designer to consider these factors while creating the site (frontendmasters, n.d.).
2.1.1.2 Front End Development skills
1. HTML/CSS
HTML is the standard markup language for producing web pages. It's the most fundamental
component of any website. The language CSS (Cascading Style Sheets) is used to show the
HTML document. HTML is used to lay the groundwork for a page. CSS, on the other hand,
is used to create the page's layout, color, fonts, and style. Both of these languages are
required to work as a front-end developer (sayantini, 2020).
2. JavaScript/jQuery
JavaScript is another useful tool for front-end developers (JS). If website developers want to
include interactive elements like audio and video, games, scrolling capabilities, and page
animations, they'll need JS.
Libraries like jQuery make up JavaScript. It's a set of plugins and extensions that make using
JS on the web more efficient and convenient. jQuery compresses common JS jobs into a
structure that can be executed with just one line of code (sayantini, 2020).
3. Frameworks

CSS and JavaScript frameworks are collections of CSS or JS files that share common
functionality to perform various jobs. Instead of starting with an empty text document,
developers begin with a code file that already contains a lot of JavaScript.
Frameworks each have their own set of advantages and disadvantages, making it critical to
select the appropriate framework for the type of website you're creating. Some JS
frameworks, for example, specialize at creating complicated user interfaces, while others
thrive at presenting all of a website's information (sayantini, 2020).
4. Responsive Design
To see online sites, developers utilize various devices such as PCs, phones, and tablets.
Without any further work on the part of the developer, the web pages adjust themselves to the
device being used. Because of the responsive design, this is possible. Understanding
responsive design principles and how to execute them on the coding side is one of the most
important tasks for a front-end developer. It's built into CSS frameworks like Bootstrap.
Because these abilities are all intertwined, once a developer masters one, he or she will
almost always be progressing in the others at the same time (sayantini, 2020).
5.Testing and Debugging
To keep bugs at bay, testing is a crucial component of any project. As a result, a front end
developer must be capable of testing and debugging code. For web development, there are
several testing approaches. Functional testing examines a specific aspect of the site's
functionality and guarantees that it follows the code exactly. Another technique is unit
testing, which evaluates each individual piece of code for proper operation (sayantini, 2020).
2.1.2 Back End
The server-side development is known as back-end development. Databases, scripting, and

website architecture are all covered in this course. It includes all of the activities that go place
behind the scenes when you use a website. It may be logging into an account or making an
online transaction. Browsers communicate with database information thanks to code
developed by back-end developers.
When reading an article on a blog, probably familiar with backend programming. The
frontend of this page is made up of fonts, colors, and designs, among other things. The
article's content is retrieved from a database and rendered from a server. This is where the
application's backend lives (martin, 2022).

2.1.2.1 Back End Development skills
1. Web development languages
At least one server-side or backend programming language, such as Java, Python, Ruby,
or.NET, is required of backend engineers.
2. Database and Cache
One of the most critical Backend developer talents is knowledge of various DBMS
technology. This is where databases like MySQL, MongoDB, Oracle, SQLServer, and Redis
come in handy. Caching systems such as varnish, Memcached, and Redis are beneficial.
3. Server knowledge
It's preferable if worked with Apache, Nginx, IIS, and Microsoft IIS. Administration of
servers is greatly aided by a solid understanding of Linux.
4. API (REST & SOAP)
For full stack developers, understanding web services or APIs is equally crucial. It would be
advantageous if developer could create and consume REST and SOAP services (martin,
2022).
2.1.3 Relationship between Front End and Back End development
The user interface/client and related code/tools are referred to as the front-end, whilst the
server-side and related code/tools are referred to as the back-end. CSS, HTML, and
JavaScript, as well as the numerous tools and frameworks that operate with these
technologies, will be used to interact with the application by the User/Human. The
back-end/server will communicate across the internet in response to queries via the "http"
protocol, which allows requests and responses to be sent as "packets" across a network or
networks.
The back-end will have some code (PHP, Python, Java, etc.) that will instruct the server what
to do, such as whether to acquire data, generate new data, update data, delete data, and so on.
The server will next interact with a data store, such as a database, to store and provide data in
a structured manner. Of course, there are many more processes and technologies involved,
but the basic relationship between front-end and back-end is that it permits interactions
between a human on a browser (or another server with merely back-end via APIs) and a
server/database someplace on the internet (B, 2021).
2.1.4 Web Application Layers

2.1.4.1 Front End Application layer
The phrase 'Frontend Developer' is familiar to most business professionals familiar with the
technical side of any web project; she or he is the person(s) in charge of making the app
appear good and operate properly for the end user. To provide effective user experiences, the
Frontend UI layer is code written in standard languages such as HTML, CSS, and JavaScript.
In some ways, the front-end application layer is distinct from the rest of the web application
infrastructure because it is unaffected by increased traffic. The frontend application runs in
the client's browser, so it doesn't matter if the app is accessed by ten or ten million people
(gayyur, 2018).
2.1.4.2 Back End Application layer
The whole business logic of the product would be written in this layer in typical web apps,
with a view generating component passing along a final UI presentation to the client.
However, modern web apps are being redesigned to make the frontend layer more logic-
heavy, which relieves burden on the backend server-side application while potentially raising
stress on the web server (with excessive server requests).
Bottlenecks and better resource allocation should be examined in the backend application.
Complex backend components of an app might impose undue burden on the system,
consuming server resources or even putting the database layer under duress (gayyur, 2018).
2.1.4.3 Web development in presentation layer
Both view elements (layouts, blocks, and templates) and controllers, which execute
commands to and from the user interface, are found at the presentation layer. The web user's
interaction with the product and its appearance is controlled by presentation code. By
modifying parts of the presentation layer with HTML, CSS, and PHTML files, you can
greatly personalize the user experience. The presentation layer is essentially where you
customize HTML, CSS, JavaScript, Magento UI, PHTML files, and block files.

web users interact with the storefront, which displays Magento's View model of data and
allows them to interact with product UI components to request data for viewing and
manipulation. These users are in charge of the frontend (Adobe, 2020).
2.2 Differences between online website creation tools and custom-built web
sites
2.2.1 Online website creation tool
There are two types of web builders.
1. Offline website builders
Offline website builders are computer programs that the user downloads and installs. The
user will create their website and store the files to their computer; once the website is
complete, all the user has to do is transfer all of the website files to a web host.
One advantage of such website builders is that the program runs on the user's computer,
allowing them to work on their websites even when they are not connected to the internet.
However, because the user will be uploading files to a web server, the user will need to have
some technical knowledge or experience. In addition to the website building software, the
user will need to obtain a web hosting service (Anon., 2022).
2. Online website builders
Online website builders are web-based and use the service of the supplier. Users don't need to
download or install any software on their computer to use online website builders; all users
need is a web browser (such as Chrome, Firefox, or Internet Explorer) and an Internet
connection. This gives the freedom to work on their website from any location and on any
device. Another advantage is that the website builder includes web hosting, so users don't
have to buy or set it up individually. Many internet website builders are made for those who
don't know how to code (Anon., 2022).
How Does an online website builder work?
Online website builders are supposed to be simple to use, allowing anyone — from novices to
seasoned designers – to create a full website in minutes using a drag-and-drop editor. Users
create websites by dragging and dropping pieces to the desired spot; no coding experience or

knowledge is necessary. It's as simple as dragging and dropping file icons on the PC (Anon.,
2022).
1. The user should begin by selecting a design template that best suits their
requirements. A collection of website templates is included with all online website
builders.

Figure 23 template
2. Each template includes pre-installed features and content. Simply click on an element
to update it (replace the text and photos with users own). This will launch the editor,
which allows user to make modifications. Drag and drop is used to rearrange page
elements; simply drag and drop the element to its new location.

Figure 24 drag and drop
3. Enhance user’s website by adding new features and widgets. Images, photo galleries,
movies, contact forms, blogs, and social sharing buttons are all common features and
widgets. If user want to sell things on their website, users can also include a PayPal
Buy Now button or a full-fledged shopping cart.

Figure 25 Add widgets
4. Finally users can click the publish button and they can view their website in online.

2.2.2 Custom built web site
Custom-built websites are created through a series of steps that result in a user interface that
is unique to the site. Furthermore, the response to user inputs (any action taken by the user)
that designers can use to generate a variety of outputs. Above all, custom-built websites will
provide user their own "built-from-the-ground-up website" and deliver a lot more distinctive
experience for their consumers.
Custom website designs will provide you more flexibility, but they will take more time to
construct and manage. Below, we'll go over the benefits and drawbacks of each (wallis,
2020).
Benefits of custom web site design
1. Website Design Tailored to user's Branding
Websites, like brick-and-mortar stores, allow businesses to show off not only their distinctive
products and services, but also their personalities. A business can work with an agency's
design team to give their website a personalized touch and a unique user experience that goes
beyond what most drag-and-drop templates provide.
2. Design that prioritizes the customer's experience
Website customization also allows a company to create a site that is focused on producing
genuine business results through a well-designed structure and user experience. The web
design service should inquire about the business goals before establishing and constructing a
website. Similarly, user should have a notion of the consumer journey for the product or
service. For example, if user run an auto repair shop, user will probably want a "request
service" form prominently displayed on their site to generate leads.
3. Search Engine Optimization (SEO) improvements
Another advantage of custom website design is that it allows for improved SEO. With a
bespoke site design project, benefit from the expertise of not only web developers, but also
SEO experts. The latter employs recommended practices in order to improve the site's search
engine ranking. They promote bespoke sites in a variety of ways over time, for example:

- Including relevant keywords in metadata, page URLs, picture alt tags, and site content
- Collaboration with the development team to create a user- and mobile-friendly site
architecture.
- Assisting in determining whether or not search engines should "crawl" a page.
4. Ability to Adapt to Changes in the Business
Businesses can scale the development process with custom website design. Although
engineers will initially put up a proper architecture while developing the site's roadmap,
business developments may require users to add extra functionality or content. user will save
the pain of having to do this on their own and maybe messing up your site thanks to their
existing partnership with a web design agency. However, be aware that it will almost
certainly incur additional fees, so plan accordingly.
5. Flexibility with Hosting
Finally, choosing a customized website gives more control over the website's hosting, which
is very useful if user want to switch providers or have specific business needs. Unfortunately,
drag-and-drop website builders lack this versatility. The freedom to choose a hosting firm
may have the following advantages:
- Beyond a "shared" hosting environment, the ability to scale

- Backups of files and data that are automatically performed and stored in a location
that you specify
- Monitoring the performance and availability of the server in real time
- Configuration and setup optimized for the CMS that chosen (woods, 2019).

TASK 3
3.1 Wireframe
Figure 26 Home Page
Figure 27 Patient login

Figure 28 patient registration
Figure 29 view patients

Figure 30 appoiment history
Figure 31 doctors’ login

Figure 32 admin login
Figure 33 admin dashboard

Figure 34 manage users
Figure 35 manage doctors

Figure 36 staff schedule
Figure 37 operation theater schedule

3.2 Database design
A set of techniques for designing, developing, deploying, and maintaining corporate data
management systems is referred to as database design. Well-designed databases are easy to
operate, improve data consistency, and are cost-effective in terms of disk space. The database
designer determines how data elements relate to one another and what data must be retained.
3.2.1 ER Diagram
Figure 38 ER diagram

3.2.3 Database structure
Doctors Table
Figure 39 doctors table
Patients table
Figure 40 Patients table

Admin table
Figure 41 admin table
Appoiment Table
Figure 42 appoiment table

Medical History Table
Figure 43 medical history table
Doctor specialization table
Figure 44 Doctor specialization table

3.2.4 Evidence of the design
1. Doctors can register to the system.
2. Patients can register to the system.
3. They all can log in to the system.
4. Above users can update their profile details including the password.
5. Doctors can check medical history.
6. Patients can make an appointment.

3.3 User interface
Home Page
This is the home page. You can click these button that you want to log in.
Figure 45 homepage

Patient login
This is the Patients Login page of Arogya Health Care Hospital. Patients can enter their
username and password and log in to the system.
Figure 46 patient login

Patient Registration
You can register patient using this form.
Figure 47 Patient Registration

Doctors login
This is the Doctors Login page of Arogya Health Care Hospital. Doctors can enter their
username and password and log in to the system.
Figure 48 Doctors login
Admin Login
Using this Page you can log in to the Admin page.
Figure 49 Admin Login

Admin dashboard
This is admin dashboard. The admin can manage each details here.
Figure 50 Admin dashboard
Manage doctors
Admin can manage doctors using this page.
Figure 51 manage doctors

Appoiment history
This table contains all the data of appointments and it is possible to update or delete that data.
Figure 52 Appoiment history
Manage patients
By that, the admin can insert, update, delete patient details
Figure 53 Manage patients

Doctor specialization
This page view the doctors specialization.
Figure 54 Doctor specialization
Add doctor
Using this page, you can add a new doctor
Figure 55 add doctor

Manage doctors
By that, you can insert, update, delete doctors details.
Figure 56 Manage doctors
Data delete
If you click the delete button, the details is should deleted.
Figure 57 data delete

Data Update
If you want to edit some details, you can click update button.
Figure 58 Data Update
3.4 Important codes
Html and CSS
Figure 59 css codes

Figure 60 html and css
Bootstrap
Figure 61 bootstrap

Database connection
Figure 62 database connection
PHP code for login
Figure 63 login code

PHP Log Out Code
Figure 64 log out
PHP Code for Insert data
Figure 65 data insert

PHP Code for Update data
Figure 66 update code
PHP code for delete data
Figure 67 delete code

JavaScript codes
Figure 68 JavaScript
Figure 69 JavaScript

3.5 Critically evaluate the web design and development process against
your design document and analyses any technical challenges you faced in
development
The Arogya Health Care hospital management system is a complete system for overseeing
everyday activities in a hospital. A manual registration method using physical resources is the
most recent procedure. HTML, CSS, and JavaScript, for example, shape the web and control
how we interact with content. Preliminary data collecting, detailed planning, and post-launch
maintenance, on the other hand, are typically hidden behind the scenes while being an
important part of the website development life cycle. The total number of development
phases is usually between five and eight, but the overall image is consistent.
Steps of web development
i. Information Gathering
ii. Planning
iii. Design
iv. Content Writing and Assembly
v. Coding
vi. Testing, Review and Launch
vii. Maintenance
A Login system, patient personal information and medical history, staff information, room
and ward scheduling, staff scheduling, operating theater scheduling, and various facility
waiting lists should all be included in the hospital administration. Several issues developed
throughout the construction of the system. The front-end and back-end were among them.
The first step in the web development process is preparation. Examine the system's user
requirements at this point. Then, based on the specifications, decide how the framework
should look. Because this hospital management system has a connected database to hold the
data needed for the software to function properly, there were minimal issues during the
database's design.

TASK 4
4.1 Quality Assurance
Any systematic procedure of verifying if a product or service fulfills defined standards is

known as quality assurance (QA). Set requirements for creating or manufacturing trustworthy
products are created and sustained by QA. A quality assurance system is designed to boost
customer trust and credibility while also increasing work procedures and efficiency, allowing
the business to compete successfully.
The ISO (International Organization for Standardization) is a driving force for quality
assurance practices and the mapping of monitoring and evaluation. QA is frequently used
during combination with the ISO 9000 global standards. Many businesses utilize ISO 9000 to
verify that their quality system is up to date and functioning right (gills, n.d.).
4.1.1 QA process and development steps
QA's initial role is to help plan and control the software development process in such a way
that severe issues during the project are avoided. To do this, QA engineers collaborate with
other specialists such as the product owner, project management, business analyst, and
developers on the project as an integral component of the software development team
throughout the whole software development cycle. The quantity and order of QA tasks varies
from project to project, and is largely influenced by the scope of the work and the project's
objectives.
Development process
i. Analysis of requirements
ii. Design
iii. Implementation
iv. Verification or testing
v. Maintenance

QA process
i. Review requirements
Parallel to the documentation generation, QA engineers begin working on the project. They
look over the specifications and documentation for:
- Completeness
- Redundancies
- clarity \consistency
- executability
- verifiability
The goal is to look for flaws in the system design and technologies.
ii. Plan and prepare test cases
After the requirements have been created, it's time to start thinking about test cases, which are
descriptions of the actions that QA engineers take to ensure that the program works as
expected. You can also utilize special tools like TestRail or Zephyr to write test cases if the
volume of such scenarios becomes particularly large. Both pieces of software allow for the
design and adjustment of tests, as well as the use of metrics to track outcomes.
iii. Design test cases
The QA team begins running the test cases when the development stage is completed. The
primary purpose of this stage is to ensure that the solution has been appropriately designed
from a technical standpoint and that it fits the needs of the initial product owner.
iv. Report and measure
When a QA engineer finds a bug, he or she logs it into a bug tracking system that
simultaneously serves as a project management system. You can use Jira or Redmine for this,
both of which are highly configurable applications. They make it simple to monitor any issue,
from a malfunctioning login form to security issues, and all team members can see real-time
task updates. This facilitates team collaboration and allows for a clear view of the
improvement process.

The development team assigns a priority rating to each issue, ranging from urgent to low, and
then resolves it based on time and resources available.
v. Verifying Fixes
When a developer resolves an issue, the responsible QA engineers are notified, and the issue
is verified. When no issue is found, the ticket in the bug tracking system is closed. This is the
rule: no bug can be marked as fixed until it has been verified (team, 2021).
4.1.2 Used techniques for develop th web application
1. Meaningful variables
Variables are utilized for data management purposes while the application is run. In the
source code, give variables a meaningful name to make it and the content easier to define.
2.Comments
A comment is a piece of code that is ignored entirely by all web browsers. It's a good idea to
put comments in your code, especially in complicated documents, to help anyone viewing the
code identify sections of the document and any extra remarks. Comments help you and others
understand your code and make it easier to read.
3.Code efficiency
The term "code efficiency" relates to the reliability, speed, and programming methodology
used when writing code for an application. The goal of code efficiency is to reduce resource
consumption and completion time as much as possible while causing as little danger to the
organization or operational environment as possible.

4.2 Result of test plan
The user's needs were taken into consideration when developing this web application. After
it's been acknowledged, that's how it's envisioned. The user interface was created with user
experience in mind, with the purpose of making this web application easy and user-friendly.
A simple interface is essential because this web-based solution is designed to allow the user
convenient access to his or her demands. Another important consideration is that this web
application is equivalent to the current accounting method. Due to the critical significance of
data migration to this online application, productivity and compatibility with the user
interface and user experience system became clear after the program was completed.
As a result, website hosting is no longer optional, but rather required for all types of
businesses. This is the first step toward becoming and staying relevant in the workplace. A
single webpage is insufficient. A company must create a website that is comprehensive,
informative, and easy to use. The website can be thoroughly inspected to ensure that all of
these traits are kept, and this web evaluation procedure is known as website examination.
Online checks are computer-assisted assessments that look for flaws in websites and web
applications. It's a detailed investigation of web-based applications before they're used. A
web-based framework must be completely controlled from start to finish before it can be used
by end users.
Compatibility with browsers, operating systems, and printing functions are only a few
examples. Examine the web application's performance in a variety of scenarios during the
performance test. A web load test or a stress test, for example. Last but not least, there is
security testing. As indicated in the test header, check the security status of the web
application. Integrity checks are part of the security vulnerability screening process. After
passing these tests, just a few areas that needed attention and changes were uncovered before
being supplied to end consumers. According to the test results, there were just a few issues
with the web interface, database connection, and functions.

4.2.1 Create test case
Table 2 test case
Test Case
Date 25/03/2022
System Arogya Health Care Hospital
Function Login to System
Status Approved
Test ID 01
Tested by Dilmika Kavinda
Test type Unit Testing

Table 3 test case
Actual
Result
(Pass/Fail)
Number Test Case Path Test Data Expected
Result
1. Enter
Username
Username: Redirect to Pass
2. Enter Departments
area.
01 Valid login password dilmika
3. Click the
“Login”
button Password:
Dilmika123
1.Enter
wrong
Username
Username:
2.Enter
wrong Dilmika121
password
Password: Login failed Pass

3. Click the
“Login” button Dil111
02 Invalid
login

References
Adobe, 2020. devdocs.magento.com. [Online]

Available at: https://devdocs.magento.com/guides/v2.4/architecture/archi_perspectives/
present_layer.html
[Accessed 22 2 2022].
Anon., 2022. .thousandeyes.com. [Online]

Available at: https://www.thousandeyes.com/learning/techtorials/dns-domain-name-system
[Accessed 16 2 2022].
Anon., 2022. cloudflare.com. [Online]

Available at: https://www.cloudflare.com/learning/performance/how-website-speed-boosts-
seo/
[Accessed 17 2 2022].
Anon., 2022. searchengineland.com. [Online]

Available at: https://searchengineland.com/guide/what-is-seo
[Accessed 16 2 2022].
Anon., 2022. website.com. [Online]

Available at: https://www.website.com/website-builder-and-web-design/what-is-website-
builder-how-does-website-builder-work?source=SC
[Accessed 22 2 2022].
Anon., 2022. website.com. [Online]

Available at: https://www.website.com/website-builder-and-web-design/what-is-website-
builder-how-does-website-builder-work?source=SC
[Accessed 22 2 2022].
banger, E. R. S., 2020. digitalthinkerhelp.com. [Online]

Available at: https://digitalthinkerhelp.com/what-is-server-in-networking-types-examples-
functions-and-uses/
[Accessed 12 2 2022].

B, R., 2021. quora.com. [Online]
Available at: https://www.quora.com/What-are-the-capabilities-and-relationships-between-
front-end-and-back-end-website-technologies
[Accessed 21 2 2022].
cloudflare, 2022. cloudflare.com. [Online]

Available at: https://www.cloudflare.com/learning/ssl/what-is-https/
[Accessed 16 2 2022].
contributors, M. a. i., 2022. developer.mozilla.org. [Online]

Available at: https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
[Accessed 16 2 2022].
dey, e., n.d. arvancloud.com. [Online]

Available at: https://www.arvancloud.com/blog/en/different-types-of-dns-servers/
[Accessed 16 2 2022].
fisher, t., 2021. lifewire.com. [Online]

Available at: https://www.lifewire.com/what-is-a-dns-server-2625854
[Accessed 16 2 2022].
frontendmasters, n.d. frontendmasters.com. [Online]

Available at: https://frontendmasters.com/guides/front-end-handbook/2018/what-is-a-
FD.html
[Accessed 20 2 2022].
gayyur, m., 2018. web-dotz.com. [Online]

Available at: https://www.web-dotz.com/understanding-your-web-applications-layers/
[Accessed 21 2 2022].
geeksforgeeks, 2021. geeksforgeeks.org. [Online]

Available at: https://www.geeksforgeeks.org/secure-socket-layer-ssl/
[Accessed 16 2 2022].
gills, a. s., n.d. techtarget.com. [Online]

Available at: https://www.techtarget.com/searchsoftwarequality/definition/quality-
assurance#:~:text=Quality%20assurance%20(QA)%20is%20any,developing%20or
%20manufacturing%20reliable%20products.
[Accessed 25 3 2022].

greatlearningteam, 2022. mygreatlearning.com. [Online]
Available at: https://www.mygreatlearning.com/blog/what-is-operating-system/
[Accessed 13 2 2022].
kiarie, j., 2020. tecmint.com. [Online]

Available at: https://www.tecmint.com/best-open-source-web-servers/
[Accessed 13 2 2022].
Little, C., 2019. tillerdigital.com. [Online]

Available at: https://tillerdigital.com/blog/an-introduction-to-web-development-technologies/
[Accessed 17 2 2022].
martin, m., 2022. guru99.com. [Online]

Available at: https://www.guru99.com/what-is-backend-developer.html
[Accessed 21 2 2022].
mitchel, c., 2021. investopedia.com. [Online]

Available at: https://www.investopedia.com/terms/f/ftp-file-transfer-protocol.asp
[Accessed 16 2 2022].
moore, j., 2020. searchdatacenter.techtarget.com. [Online]

Available at: https://searchdatacenter.techtarget.com/Server-hardware-guide-to-architecture-
products-and-management
[Accessed 12 2 2022].
sayantini, 2020. edureka.co. [Online]

Available at: https://www.edureka.co/blog/front-end-developer-skills
[Accessed 20 2 2022].
sourcedaddy, n.d. sourcedaddy.com. [Online]

Available at: https://sourcedaddy.com/networking/components-of-server-computer.html
[Accessed 12 2 2022].
team, Q., 2021. kruschecompany.com. [Online]

Available at: https://kruschecompany.com/quality-assurance-in-projects/
[Accessed 25 3 2022].
techopedia, 2020. techopedia.com. [Online]

Available at: https://www.techopedia.com/definition/25705/communication-protocol
[Accessed 9 2 2022].

timotic, m., 2018. tms-outsource.com. [Online]
Available at: https://tms-outsource.com/blog/posts/web-technologies/
[Accessed 20 2 2021].
wallis, j., 2020. webo.digital/blog. [Online]

Available at: https://webo.digital/blog/custom-built-vs-template-websites-which-is-better/
[Accessed 23 2 2022].
wikipedia, 2021. wikipedia.org. [Online]

Available at: https://en.wikipedia.org/wiki/Search_engine
[Accessed 16 2 2022].
wikipedia, 2022. wikipedia.org. [Online]

Available at: https://en.wikipedia.org/wiki/Comparison_of_web_server_software
[Accessed 13 2 2022].
willioms, l., 2022. guru99.com. [Online]

Available at: https://www.guru99.com/operating-system-tutorial.html
[Accessed 13 2 2022].
woods, A., 2019. rollwithduckpin.com. [Online]

Available at: https://www.rollwithduckpin.com/5-benefits-custom-website-design-
development/
[Accessed 23 2 2022].


Web

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web

Uploaded by

Copyright:

Available Formats

Contents

1.1 Different web technologies..........................................................................................1

1.1.1 Communication protocols....................................................................................1

1.1.2 Server hardware...................................................................................................3

1.1.3 Operating systems (OS).....................................................................................10

1.1.4 Web server software................................................................................................17

1.1.5 Difference between web technologies....................................................................23

1.1.6 Purpose of web technologies...................................................................................24

1.1.7 Relationship between web technologies.................................................................25

1.2 Domain name system (DNS).........................................................................................25

1.2.1 Types of DNS servers.............................................................................................26

1.2.2 Purpose Of DNS......................................................................................................27

1.3 Search Engine Optimization......................................................................................27

1.3.1 How Does SEO Works.......................................................................................28

1.3.2 effect of search engines on website performance..............................................28

1.4 Web development technologies and Frameworks.....................................................30

Dilmika Kavinda Web Design and Development 1

2.1 Front end and Back end technologies............................................................................36

2.1.1 Front End.................................................................................................................36

2.1.2 Back End.................................................................................................................37

2.1.3 Relationship between Front End and Back End development...............................38

2.1.4 Web Application Layers........................................................................................39

2.1.4.1 Front End Application layer.................................................................................39

2.1.4.2 Back End Application layer.................................................................................39

2.1.4.3 Web development in presentation layer...............................................................39

2.2.1 Online website creation tool....................................................................................40

2.2.2 Custom built web site..............................................................................................45

3.2 Database design..............................................................................................................53

3.2.3 Database structure...................................................................................................54

3.2.4 Evidence of the design............................................................................................57

3.3 User interface.................................................................................................................58

3.4 Important codes..............................................................................................................66

Dilmika Kavinda Web Design and Development 2

4.1 Quality Assurance..........................................................................................................73

4.1.1 QA process and development steps.........................................................................73

4.1.2 Used techniques for develop th web application.....................................................75

4.2 Result of test plan...........................................................................................................76

4.2.1 Create test case........................................................................................................77

Figure 1 tower server...............................................................................................................10

Figure 2 rack server..................................................................................................................10

Figure 3 blade server................................................................................................................11

Figure 6 memory (RAM).........................................................................................................14

Figure 7 hard drive...................................................................................................................14

Figure 8 network interface card...............................................................................................15

Figure 9 graphic card...............................................................................................................15

Dilmika Kavinda Web Design and Development 3

Figure 11 operating system with market share........................................................................17

Figure 12 windows OS’...........................................................................................................19

Figure 13 mac OS.....................................................................................................................20

Figure 15 android OS...............................................................................................................21

Figure 17 Apache server..........................................................................................................24

Figure 19 lighttpd server..........................................................................................................26

Figure 20 apache tomcat..........................................................................................................27

Figure 21 caddy server.............................................................................................................28

Figure 22 NodeJS server..........................................................................................................29

Figure 24 drag and drop...........................................................................................................49

Figure 25 Add widgets.............................................................................................................50

Figure 26 Home Page...............................................................................................................53

Figure 27 Patient login.............................................................................................................53

Figure 28 patient registration...................................................................................................54

Figure 29 view patients............................................................................................................54

Figure 30 appoiment history....................................................................................................55

Dilmika Kavinda Web Design and Development 4