Unit 10 Web Design and Development Reworded 2021 Bhanuka Perera

Higher Nationals
Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS
Programme title BTEC Higher National Diploma in Computing
Assessor Internal Verifier

Unit 10: Web Design and Development
Unit(s)
Online Hospital Management System
Assignment title
Jayasuriya Kuranage Bhanuka Perera
Student’s name
List which assessment Pass Merit Distinction
criteria the Assessor has
awarded.
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria awarded match

those shown in the assignment brief? Y/N
Is the Pass/Merit/Distinction grade awarded

justified by the assessor’s comments on the Y/N
student work?
Has the work been assessed
Y/N
accurately?
Is the feedback to the student:
Give details:
• Constructive?
Y/N
• Linked to relevant assessment
criteria? Y/N
• Identifying opportunities for

improved performance? Y/N
• Agreeing actions? Y/N
Does the assessment decision need

Y/N
amend?
Assessor signature Date
Internal Verifier signature Date

Programme Leader signature(if
Date
required)
Confirm action completed
Remedial action taken
Give details:
Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)
Higher Nationals - Summative Assignment Feedback Form
Student Name/ID Jayasuriya Kuranage Bhanuka Perera NEG – E-118432
Unit Title Unit 10: Website Design & Development
Assignment Number 10 Assessor

Date Received 1st
Submission Date
submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:
LO1. Explain server technologies and management services associated with hosting and managing websites.
Pass, Merit & Distinction P1 P2 M1 M2 D1

Descripts
LO2. Categorise website technologies, tools and software used to develop websites.
Pass, Merit & Distinction P3 P4 M3 D1

Descripts
LO3. Utilise website technologies, tools and techniques with good design principles to create a multipage
website.
Pass, Merit & Distinction P5 P6 M4 D2
Descripts
LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & Distinction P7 M5 D3
Descripts
Grade: Assessor Signature: Date:
Resubmission Feedback:
Grade: Assessor Signature: Date:
Internal Verifier’s Comments:
Signature & Date:

* Please note that grade decisions are provisional. They are only confirmed once internal and external moderation has taken place and grades decisions have
been agreed at the assessment board.
Assignment Feedback
Formative Feedback: Assessor to Student
Action Plan
Summative feedback
Feedback: Student to Assessor
Student signature Date

Pearson
Higher Nationals in
Computing
Unit 10: Web Design and Development
Assignment 01
General Guidelines
1. A Cover page or title page – You should always attach a title page to your assignment. Use previous page as
your cover sheet and make sure all the details are accurately filled.
2. Attach this brief as the first section of your assignment.
3. All the assignments should be prepared using a word processing software.
4. All the assignments should be printed on A4 sized papers. Use single side printing.
5. Allow 1” for top, bottom , right margins and 1.25” for the left margin of each page.
Word Processing Rules
1. The font size should be 12 point and should be in the style of Time New Roman.
2. Use 1.5 line spacing. Left justify all paragraphs.
3. Ensure that all the headings are consistent in terms of the font size and font style.
4. Use footer function in the word processor to insert Your Name, Subject, Assignment No, and Page Number
on each page. This is useful if individual sheets become detached for any reason.
5. Use word processing application spell check and grammar check function to help editing your assignment.
Important Points:
1. It is strictly prohibited to use textboxes to add texts in the assignments, except for the compulsory
information. eg: Figures, tables of comparison etc. Adding text boxes in the body except for the before
mentioned compulsory information will result in rejection of your work.
2. Carefully check the hand in date and the instructions given in the assignment. Late submissions will not be
accepted.
3. Ensure that you give yourself enough time to complete the assignment by the due date.
4. Excuses of any nature will not be accepted for failure to hand in the work on time.
5. You must take responsibility for managing your own time effectively.
6. If you are unable to hand in your assignment on time and have valid reasons such as illness, you may apply
(in writing) for an extension.
7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
8. Non-submission of work without valid reasons will lead to an automatic RE FERRAL. You will then be asked to
complete an alternative assignment.
9. If you use other people’s work or ideas in your assignment, reference them properly using HARVARD
referencing system to avoid plagiarism. You have to provide both in-text citation and a reference list.
10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be reduced to A
REFERRAL or at worst you could be expelled from the course.
11. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be reduced to A
REFERRAL or at worst you could be expelled from the course.
Student Declaration
I hereby, declare that I know what plagiarism entails, namely to use another’s work and to present it as my own
without attributing the sources in the correct way. I further understand what it means to copy another’s work.
1. I know that plagiarism is a punishable offence because it constitutes theft.

2. I understand the plagiarism and copying policy of the Pearson UK.
3. I know what the consequences will be if I plagiaries or copy another’s work in any of the assignments for this
program.
4. I declare therefore that all work presented by me for every aspect of my program, will be my own, and
where I have made use of another’s work, I will attribute the source in the correct way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding agreement
between myself and Pearson, UK.
6. I understand that my assignment will not be considered as submitted if this document is not attached to the
attached.
bhnkperera@gmail.com 15th November 2022

Student’s Signature: Date:
(Provide E-mail ID) (Provide Submission Date)
Assignment Brief
Student Name /ID Number Jayasuriya Kuranage Bhanuka Perera NEG – E-118432
Unit Number and Title Unit 10- Web Design and Development
Academic Year 2021/2022
Unit Tutor Mr. Tuan Wazeem
Assignment Title Online Hospital Management System
Issue Date
Submission Date
IV Name & Date
Submission Format:
Part 1.
Report- Submit a professional report with appropriate report formatting and guidelines followed. All the research
data should be referenced along with in-text citations using Harvard referencing system.
Part 2
A fully functional web solution
Unit Learning Outcomes:
LO1 Explain server technologies and management services associated with hosting and managing websites.
LO2 Categorize website technologies, tools and software used to develop websites.
LO3 Utilize website technologies, tools and techniques with good design principles to create a multipage website.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.
Assignment Brief and Guidance:

Assignment Brief
Scenario.
‘Apex Design Works’ is a leading web design and marketing company. They are focusing on helping
businesses communicate more effectively and build their business through a creative design. Assume
that you work as an apprentice web developer for Apex Web Design and marketing company. As part of
your role, you have been asked to create a website for the following organization.
Arogya Health Care hospital currently uses a manual system for the management and maintenance of
critical information. The current system requires numerous paper forms, with data stores spread
throughout the hospital management infrastructure. Often information (on forms) is incomplete or does
not follow management standards. Multiple copies of the same information exist in the hospital and may
lead to inconsistencies in data in various data stores. There are number of documents to be maintained in
the Health Care hospital and this information typically involves; patient personal information and medical
history, staff information, room and ward scheduling, staff scheduling, operating theater scheduling and
various facilities waiting lists. All of this information must be managed in an efficient and cost wise fashion
so that the resources can be managed effectively. The reception module handles various inquiries about
the patient's admission and discharge details, and the patient's movements within the hospital.
Assume that you are the web developer hired by the Health Care Hospital, to propose, and engineer a low
cost but yet powerful and complete Hospital Management System (HMS) for the scenario given above.
Suggest and implement important functionalities and features to the system by identifying system
functionalities.
The new system is to control the following information

• patient information
• room availability
• staff and operating room schedules
• patient invoices
Develop a web-based solution for the above scenario and produce a report covering the following tasks.
Task 1 - Server technologies and management services associated with hosting and managing websites (LO1)
1.1 Explain and differentiate the different web technologies such as communication protocols, server hardware,
operating systems and web server software with regards to designing, publishing and accessing the Hospital
Management System (HMS).
1.2 Identify and define the types of DNS and the uses of it, with clarifications on how domain names are
structured. Review the effect of search engines on website performance. Provide evidence-based support for
improving a site’s index value and rank of the Hospital Management System (HMS) through search engine
optimization.
1.3 Identify and explain the common web development technologies and frameworks. Explain the tools and
techniques chosen to develop the above web application and justify your choice by providing valid evidence.
Task 2 - Categories website technologies, tools and software used to develop websites (LO2)
2.1 Considering the requirements given in the above scenario define the relationships between front-end and
back-end website technologies and discuss how the front-end and the back end relate to presentation and
application layers.
2.2 Discuss the differences between online website creation tools and custom-built web sites by considering the
design flexibility, performance, functionality, User Experience (UX) and User Interface (UI). Evaluate the tools
and techniques available to design the web application given in the scenario.
.
Task 3 - Utilize website technologies, tools and techniques with good design principles to create a multipage
website (LO3)
3.1 Design a suitable web application solution for the given scenario using PHP, JS and MySQL (Screenshots of
important code lines with proper comments and user interfaces filled with sample data must be attached to
the documentation). Apply a database design for the proposed system and provide the well normalized
database design of the proposed system. Provide evidence of the design, multipage website supported with
fidelity wireframes and a full set of client and user requirements.
3.2 Compare and contrast the multipage website created to the design document. Use your design document
with appropriate principles, standards and guidelines to produce a branded, multipage website supported
with realistic content and critically evaluate the web design, development process against your design
document analyzing any technical challenges you faced during the development.
Note - Synthesize client and the server-side functionalities in the proposed design.
Task 4 - Create and use a Test Plan to review the performance and design of a multipage website (LO4)
4.1 QA process is expected to discover design issues and development errors while testing a product’s user
interface (UI) and gauging the user experience (UX). Evaluate the Quality Assurance (QA) process and
review how it was implemented during your design and development stages.
4.2 Create a suitable test plan for the developed system and critically evaluate the results of your Test Plan.
Include a review of the overall success of your multipage website; use this evaluation to explain any areas
of success and provide justified recommendations for areas that require improvements.
Grading Rubric
Grading Criteria Achieved Feedback
LO1 Explain server technologies and management services associated with

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

domain names are organized and managed.
P2 Explain the purpose and relationships between communication

protocols, server hardware, operating systems and web server software
with regards to designing, publishing and accessing a website.
M1 Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and
management.
M2 Review the influence of search engines on website performance and
provide evidence-based support for improving a
site’s index value and rank through search engine optimization.
D1 Justify the tools and techniques chosen to realize a custom built
website.
LO2 Categories website technologies, tools and

software used to develop websites
P3 Discuss the capabilities and relationships between front-end and back-

end website technologies and explain how these relate to presentation
and application layers.
P4 Discuss the differences between online website creation tools and
custom-built sites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI).
M3 Evaluate a range of tools and techniques available to design and

develop a custom-built website.
LO3 Utilize website technologies, tools and techniques
with good design principles to create a multipage
website
P5 Create a design document for a branded, multipage website supported

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

design document and analyse any technical challenges.
LO4 Create and use a Test Plan to review the

performance and design of a multipage website
P7 Create a suitable Test Plan identifying key performance area and

use it to review the functionality and performance of your website.
M5 Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
D3 Critically evaluate the results of your Test Plan and include a review of
the overall success of your multipage website; use this evaluation to
explain any areas of success and provide justified recommendations for
areas that require improvement.
Observation Sheet
Activity Activity Learning Outcome Feedback

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

Date …………………….
Assessor Signature ……………………….
UNIT 10 – WEB DESIGN AND DEVELOPMENT | BHANUKA PERERA 1

ACKNOWLEDGMENT
Primarily, I would like to express my sincere gratitude to the lecturer of this unit,
Mr. Tuan Wazeem and Mr. Nadheera Senasinghe , for the delivery of valuable
lectures, assignment guidance and review sessions conducted to examine our progress
from time to time.
Aside from him, I would also like to extend my gratitude to the management of
ESoft Metro Campus for conducting extra guidance sessions and for providing the
necessary facilities to join online learning due to the prevailing pandemic situation.
Finally, I would also like to thank my family and my dear batch mates for their
support and encouraging me during this challenging time.
Regards,
Bhanuka Perera

Contents
Acknowledgment ...................................................................................................................... 2
Activity 01 ................................................................................................................................. 8
1.1 Identify types of DNS and it purposes, include an explanation about how domain
names are organized and managed. ........................................................................................ 8
1.1.1 Introduction to DNS ................................................................................................... 8
1.1.2 Three types of DNS queries ....................................................................................... 9
1.1.3 Types of DNS servers .............................................................................................. 10
1.1.4 Domain names .......................................................................................................... 11
1.1.5 Search Engine Optimization (SEO) ......................................................................... 12
1.1.6 Site index .................................................................................................................. 12
1.2 Explain the purpose and relationships between communication protocols, server
hardware, operating systems and web server software with regards to designing, publishing
and accessing a website ........................................................................................................ 13
1.2.1 Communication protocols ........................................................................................ 13
1.2.2 Operating systems .................................................................................................... 14
1.2.3 Web server software ................................................................................................. 16
1.2.4 Relationships between communication protocols, server hardware, operating

systems, and web server software with regards to designing, publishing and accessing a
website............................................................................................................................... 17
1.2.5 Evidence for improving a site’s index value and rank through search engine
optimization....................................................................................................................... 18
1.3 Identify and explain the common web development technologies and frameworks.
Explain the tools and techniques chosen to develop the above web application and justify
your choice by providing valid evidence. ............................................................................. 19
1.3.1 Common web development technologies and frameworks ..................................... 19
1.3.2 Explain the tools and techniques chosen to develop the above web application ..... 24

Activity 02 ............................................................................................................................... 28
2.1 Considering the requirements given in the above scenario define the relationships
between front-end and back-end website technologies and discuss how the front-end and
the back end relate to presentation and application layers. .................................................. 28
2.1.1 Front and back-end of a website .............................................................................. 28
2.1.2 Relationship between front and back end of a website ............................................ 30
2.1.3 How front and the back end relate to presentation and application layers .............. 31
2.2 Discuss the differences between online website creation tools and custom-built web
sites by considering the design flexibility, performance, functionality, User Experience
(UX) and User Interface (UI). Evaluate the tools and techniques available to design the
web application given in the scenario................................................................................... 32
2.2.1 differences between online website creation tools and custom-built web sites
Online website creation tools. ........................................................................................... 32
2.2.2 Evaluate the tools and techniques available to design the web application given in
the scenario........................................................................................................................ 34
Activity 03 ............................................................................................................................... 37
3.1 Design a suitable web application solution for the given scenario using PHP, JS and
My SQL. Apply a database design for the proposed system and provide the well
normalized database design of the proposed system. Provide evidence of the design,
multipage website supported with fidelity wireframes and a full set of client and user
requirements. ........................................................................................................................ 37
3.1.1 Design a suitable web application solution for the given scenario using PHP, JS
and My SQL ...................................................................................................................... 39
3.1.2 Apply a database design for the proposed system and provide the well normalized
database design of the proposed system. .......................................................................... 64
3.1.3 Provide evidence of the design, multipage website supported with fidelity
wireframes ......................................................................................................................... 67
3.2 Compare and contrast the multipage website created to the design document. ............. 72

3.3 Critically evaluate the web design, development process against your design document
analyzing any technical challenges you faced during the development. .............................. 79
3.3.1 Technical challenges ................................................................................................ 79
3.3.2 Critical evaluation .................................................................................................... 80
Activity 04 ............................................................................................................................... 81
4.1 QA process is expected to discover design issues and development errors while testing
a product’s user interface (UI) and gauging the user experience (UX). Evaluate the Quality
Assurance (QA) process and review how it was implemented during your design and
development stages. .............................................................................................................. 81
4.1.1 User interface (UI) ................................................................................................... 81
4.1.2 User experience (UX) .............................................................................................. 81
4.1.3 Quality Assurance (QA) ........................................................................................... 82
4.1.4 Evaluate the Quality Assurance process during your design and development. ..... 83
4.2 Create a suitable test plan for the developed system and critically evaluate the results of
your Test Plan. Include a review of the overall success of your multipage website; use this
evaluation to explain any areas of success and provide justified recommendations for areas
that require improvements. ................................................................................................... 84
4.2.1 Create a suitable test plan for the developed system ............................................... 84
4.2.2 Critically evaluate the results of your Test Plan and explain any areas of success
and provide justified recommendations for areas that require improvements. ................. 88
4.2.3 Review the overall success of your multipage website. .......................................... 89
REFERENCES ......................................................................................................................... 4
List of figures ............................................................................................................................ 6
List of tables .............................................................................................................................. 7

List of figures
Figure 1. Popular domain server names | Source (Google Images,2022) ..................................8
Figure 2. DNS Process diagram | Source (Cloudflare, 2022) ....................................................9
Figure 3. Domain name | Source (Love3Dev, 2022) ...............................................................11
Figure 4. Communication protocol | Source (Snabay Networking, 2022) ..............................14
Figure 5. Server operating systems | Source (CMAN HUB, 2022) .........................................15
Figure 6. Evidence for search engine optimization | Source (Author's work) .........................18
Figure 7. Web developing tools | Source (DevTeam.Space, 2022) .........................................25
Figure 8. Front end and back end | Source (123RF, 2022) ......................................................29
Figure 9. Front end and back-end relationship | Source (AOG.jobs) ......................................30
Figure 10. ERD diagram | Source (Author's data) ...................................................................38
Figure 11. Home page | Source (Author's data) .......................................................................39
Figure 12. Home page code snippets | Source (Author's data) ................................................41
Figure 13. Dashboard | Source (Author's data) ........................................................................42
Figure 14. Dashboard code snippets | Source (Author's data) .................................................43
Figure 15. Patient page | Source (Author's data)......................................................................44
Figure 16. Patient page code snippets | Source (Author's data) ...............................................46
Figure 17. Doctor page | Source (Author's data)......................................................................47
Figure 18. Doctor page code snippets | Source (Author's data) ...............................................50
Figure 19. Contact us page | Source (Author's data) ................................................................51
Figure 20. Contact us page code snippets | Source (Author's data) .........................................52
Figure 21. About us page | Source (Author's data) ..................................................................54
Figure 22. About us page code snippets | Source (Author's data) ...........................................57
Figure 23. Appointment creating page | Source (Author's data) ..............................................58
Figure 24. Cost calculation example | Source (Author's data) .................................................58
Figure 25. Appointment creating page code snippets | Source (Author's data) .......................60
Figure 26. Appointment detail page | Source (Author's data) ..................................................61
Figure 27. Appointment details page code snippets | Source (Author's data) .........................63
Figure 28. Database for the proposed system | Source (Author's data) ...................................65
Figure 29. Using data from the database | Source (Author's data) .........................................66
Figure 30. Balsamiq | Source (Balsamiq) ................................................................................67

Figure 31. Homepage wireframe | Source (Author's data) ......................................................67
Figure 32. Doctor / Patient / Prescription / Appointment Data view | Source (Author's data) 68
Figure 33. Patient Registration wireframe | Source (Author's data) ........................................68
Figure 34. Doctor Registration wireframe | Source (Author's data) ........................................69
Figure 35. Contact us wireframe | Source (Author's data) .......................................................69
Figure 36. Services wireframes | Source (Author's data) ........................................................70
Figure 37. Appointment booking wireframes | Source (Author's data) ...................................71
Figure 38. Dashboard wireframes | Source (Author's data) .....................................................71
Figure 39. UI and UX | Source (testfort, 2022) .......................................................................82
Figure 40.Quality assurance | Source (testbytes.net) ...............................................................83
Figure 41. Creating a successful system | Source (Freepik,2022) ...........................................89
List of tables
Table 1. Differences between online tools and custom built | Source (Author's work) ..........33
Table 2. Comparison and contrast of multipage website to the design document | Source
(Author's data) ..........................................................................................................................78
Table 3. Test case for the system | Source (Author's data)……………………………….….87

Activity 01
1.1 Identify types of DNS and it purposes, include an explanation about
how domain names are organized and managed.
1.1.1 Introduction to DNS

The Domain Name System (DNS) translates domain names into IP addresses, which browsers use to
load Internet pages. Every device connected to the Internet has its own IP address, which other
devices use to locate the device. DNS servers such as Fortinet.com allow their browsers to enter
generic terms without tracking the IP address for each website.
A domain name is a separate area reserved for website owners to set up their services on the Internet.
Domain names can be purchased for various prices and are registered under a registrar who is
responsible for maintaining them. If domain names did not exist, web servers would have to
memorize and use IP addresses every time they wanted to access a website.
Figure 1. Popular domain server names | Source (Google Images,2022)
As an example: IPv6 IP address for Arogya.lk is 2400:cb00:2042:1:c629:d6a1. Instead of

remembering the IP address, a user can type 'www.arogyamedicine.lk' as the URL in any browser.
When this is done, the browser sends a request to the DNS, and the DNS returns a response to the
browser stating that it is the IP address of the Arogya hospital website, and the browser then sends a
request to that IP address, which responds with the resource. Because the Internet is a public
network, a standard method is needed to enable communication between humans and machines. This
system is called a domain name system.

Figure 2. DNS Process diagram | Source (Cloudflare, 2022)
DNS serves as a fully functional way of figuring out which IP address resolves to which domain
name, allowing it to respond quickly and authoritatively, allowing web browsers to load websites and
their resources without interruption.
1.1.2 Three types of DNS queries,

1. Recursive query - A DNS client expects a DNS server (typically a DNS recursive resolver)
to respond to a recursive query with the requested resource record or, when the resolver
cannot find it, an error message.
2. Iterative query - The DNS client allows the DNS server to respond with the best possible
response in this situation. If the queried DNS server does not have a match for the query
name, a pointer to a DNS server for a lower level in the domain name space will be returned.
The DNS client will then contact the referral address. This process is repeated with other
DNS servers until the query chain fails or times out.

3. Non recursive query - This typically occurs when a DNS resolver client requests a DNS
server for a record that the server already has access to, either because the server is
authoritative for the record or because the record is already in the server's cache. Typically, a
DNS server caches DNS records to reduce load on upstream servers and use additional
bandwidth.
1.1.3 Types of DNS servers
There are Three types of DNS servers,
1. DNS Resolver - A DNS resolver, also known as a recursive resolver, is set up to respond
to DNS requests with human-readable host names and is in charge of looking up the IP
address associated with those host names. During this procedure, the recopied data is stored
so that it can be used later when the client requests the same IP address.
2. Root server - The root server is where a hostname is translated into an IP address. The
Top-level Domain (TLD) obtained from the user's query by the DNS Root Server; For
example, the.com TLD name server information can be found at www.esoft.lk. In exchange,
the client will provide details for domains such as "esoft.lk" located in the .com DNS zone.
Thirteen root servers identified globally by the letters A through M, operated by
organizations including the Internet Systems Consortium, Verisign, ICANN, the University
of Maryland and the United States Army Research Lab
3. Authoritative DNS server - When a DNS server is designated as the "authoritative" name
server for a specific hostname, it indicates that it has the most recent information available for
that hostname. This decision is made by the top-level DNS servers. The Authoritative Name
Server is the final node in the DNS hierarchy and uses the hostname to provide the correct IP
address to the DNS resolver.

1.1.4 Domain names
When client programs are used to access websites, domain names are strings of text that are
converted to numeric IP addresses. The text that a user types into a browser to access a particular
website is called a domain name. For example, the domain name for Google is "google.com". A
website's actual address is a frozen integer IP address, but thanks to DNS, users can substitute
human-friendly domain names and then be directed to the websites of their choice. This process is
called a DNS lookup. All domain names are managed by domain registrars, who also provide
domain name allocations to registrars. With over 300 million domain names already registered,
anyone who wants to create a website can register a domain name with a registrar.
Each level of the hierarchical structure used to organize domain names is indicated by a dot. As an
example, the top-level domain com, the subdomains www and example, and the domain name
www.example.com all exist. A database called the Domain Name System (DNS) converts domain
names into IP addresses. DNS translates human-readable domain names (such as
www.example.com) into IP addresses that computers can use to connect to each other (such as
192.168.1.1). A global network of servers oversees DNS management. Your computer contacts a
DNS server and requests the IP address associated with the domain name you enter your web
browser. Your computer connects to the website after the DNS server returns the IP address.
Figure 3. Domain name | Source (Love3Dev, 2022)

1.1.5 Search Engine Optimization (SEO)
SEO is a method of optimizing a website or webpage to enhance the quantity and consistency of its
traffic from the organic results of a search engine. SEO focuses on unpaid traffic(organic) rather than
direct or paid traffic. Search engines like google, Bing, yahoo and other search engines has search
algorithms and ranking algorithms that are different from each other.
The quality of a website's content, including its mobile friendliness, keyword density, backlinks,
crawlability, page speed and other variables, is the foundation of SEO. These elements may vary
from search engine to search engine as different SEO techniques are used. SEO has a direct impact
on how well a website performs because without proper SEO techniques, a website will not be able
to reach a wide audience or rank well in search results. Also, the engine will not drive any organic
traffic your way.
1.1.6 Site index

A description of a document or part of it can be an index if it is made so that other software or a
search engine can use it to search for keywords or to search multiple documents without having to
open them individually. When discussing the Internet or web pages, "index" refers to a file also
known as "index.htm," "index.html," "index.asp," or "index.php." When entering a website directory,
the index file is loaded first.
How can we improve site index value and ranking through SEO,
• Improvement of the loading speed
• Provide up-to-date content
• Image optimization
• Use relevant keywords strategically
• Optimizing website for mobile devices

1.2 Explain the purpose and relationships between communication
protocols, server hardware, operating systems and web server software
with regards to designing, publishing and accessing a website.
1.2.1 Communication protocols

Descriptions of formats and guidelines for digital messages are called communication protocols.
They are necessary for the transmission and reception of messages within and between computer
systems. To exchange messages within or across systems, a protocol like this is needed.
Communication protocols are an essential part of telecommunication systems because they enable
uniformity and consistency in sending and receiving communications. In telecommunications and
other systems, communication protocols are critical because they ensure uniform and consistent
transmission and reception of messages. Communication protocols provide for authentication, error
detection and repair, and signalling. They can also describe the syntax, semantics, and
synchronization of analog and digital communications. Hardware and software are used to
implement communication protocols. Many communication protocols are used in analog and digital
communication. Without them, computer networks would not exist.
Before successful transmission can take place, networked communications devices must agree on
many physical aspects of the data that is to be exchanged. Rules defining data transmissions are
called "protocols." (Techopedia, 2019)
A protocol may specify a wide range of transmission properties,

• Packet size.
• Transmission speed.
• Error correction types
• Handshaking and synchronization technique.
[Space left intentionally]

Some important communication protocols are,
• HTTP - Hypertext Transfer Protocol
• HTTPS - Hypertext Transfer Protocol-Secured
• FTP - File Transfer Protocol
• TCP/IP - Transmission Control Protocol/Internet Protocol
• POP - Post Office Protocol
Figure 4. Communication protocol | Source (Snabay Networking, 2022)
1.2.2 Operating systems

An operating system is the most important software that runs on a computer. It manages the
computer's memory and processes, as well as all of its software and hardware. It also allows you to
communicate with the computer without knowing how to speak the computer's language.
(“Computer Basics: Understanding Operating Systems - GCFGlobal.org”)
Server Operating Systems

An operating system designed to be installed and used on a client computer is called a client
operating system. It is a modified version of an operating system with features and functionality
required for a client-server architecture or a comparable enterprise computing environment. Other
software applications or programs may run on the server hardware using the server operating system.
Web servers, mail servers, file servers, database servers, application servers, and print servers are
just a few of the common server functions that are enabled and supported by operating server
systems.

Important characteristics of a server operating system,
• Access to the server through both a graphical user interface and a command-level interface.
• Use OS commands to run all or most processes.
• Services for advanced hardware, software, and network setup.
• Install and/or deploy enterprise and/or web applications.
• Provides a centralized interface for managing users, implementing security, and
administrative tasks.
• Client computers and/or operating systems are managed and monitored.
Examples for server operating systems,

• Red Hat Enterprise Linux
• Windows Server
• Mac OS X Server
• Ubuntu
Figure 5. Server operating systems | Source (CMAN HUB, 2022)

1.2.3 Web server software
A website is a complex information system that facilitates interactions among users and data sources.
Users can access websites using several types of web browser software. Computers connected to the
internet can run web server software, which stores, organizes and updates data. Web server software
allows websites to function efficiently and accurately. A web server is a powerful program that
works together with web browser software to create dynamic websites. A web server is a computer
program that supports internet connectivity, storage, and data transfer for website creation,
management and maintenance. It is also used to direct internet users to websites on a particular
server. Designing a website requires setting up a web server and uploading the necessary files to
create the website. A web server can be physical or virtual- it can also be installed on a mobile
device connected to the internet. Since web browsers are constantly updated, the programs
themselves are also updated regularly. Files needed to create a website include HTML, CSS,
JavaScript and images to name a few. HTML is the code language used in creating websites. CSS is
the style sheet language used for formatting web pages. Images are used on web pages to add visual
appeal and are also necessary for page accessibility. JavaScript is used as an interactive language that
enables customizations with real-time results. It is also used for online games and applications.
To be able to host a website, you will need an internet service provider (ISP). An ISP connects
computers, networks and telecommunication services between individuals, companies and
governments. Each ISP has different limits on the amount of data transferred through its network
each day. To host a website, you must contact an ISP with sufficient internet access capacity and
security measures for your project. A web server running your project will host all your project's files
and create your website online. Designing, publishing and accessing a website requires setting up a
web server, uploading website files and securing an ISP for internet connectivity. Since hosting is
required for any public access to the internet, it is best to contact your state government regarding
this requirement.
Server software can be categorized,

• Web server application
• Application Server software
• Database server software
• Cloud computing server software
• File server software

1.2.4 Relationships between communication protocols, server hardware,
operating systems, and web server software with regards to designing, publishing
and accessing a website
Users use web browsers to surf the Internet. A web browser is software used to access, transmit, and
view resources on the World Wide Web (www). A Uniform Resource Identifier (URI), which
identifies the source of the data, can identify any type of material, including pages, images, videos,
and other resources. A web browser enables communication between our computers and web servers
and provides the required data quickly. Web communication protocols are modern technologies that
enable data transmission between Internet nodes.
For example, a web browser uses these cycles to retrieve data from a web server and display them as
text and images on the browser's display. The protocol determines how closely clients can interact
with that data. Either hardware or software can be used to create a web server. They are dedicated to
creating frameworks that can satisfy the demands of clients on the world wide web. The web server
has at least one website. The web server uses HTTP and several other related protocols to measure
incoming network requests. The main function of a web server is to store web pages and transmit
them to the appropriate clients. Hypertext Transfer Protocol is used for communication between
client and server (HTTP). Therefore, HTTP is the primary protocol that nodes use to communicate
with each other over the Internet. HTML text that is sent with pages includes graphics, movies, and
other text material. If a specific source is not specified by the server operator, usually a web browser
or web page, the server responds with the contents of that source or outputs an error.
Accessible web servers are installed on devices such as printers, switches, and webcams and run only
on the local network wherever practical. The web server may include a feature to view or control the
device in question. This suggests that only a web browser, which is already included with most
functional frameworks, should be installed on the server framework, and no additional software
should be installed. A functional framework server, often called a server operating system, is an
operating system designed specifically to attack servers, which are specialized computers that
implement a server/server architecture to deliver client PC applications over the network.

1.2.5 Evidence for improving a site’s index value and rank through search engine
optimization
As mentioned in the previous section, search engines rank and index websites based on various
factors. Search engines like Google have the ability to identify unique websites based on design and
functionality. When such websites are detected, Google promotes them to higher ranks than websites
created using templates.
Therefore, search engines like Google constantly strive to create a fair and accurate environment for
search purposes. For this reason, it is essential to have a proper understanding of the website you are
working on as well as SEO. On the part of a developer, the only action he/she can take during the
design and development process of a website to ensure a high ranking in any search engine is the use
of meta tags within the source code of that website.
The below figure illustrates evidence for the use of meta tags in the header section of the HMS, in
order to get s higher rank in the results page of a search engine.
Figure 6. Evidence for search engine optimization | Source (Author's work)

1.3 Identify and explain the common web development technologies and
frameworks. Explain the tools and techniques chosen to develop the above web
application and justify your choice by providing valid evidence.
1.3.1 Common web development technologies and frameworks
Building websites can be a fun and challenging task. It can be a creative project that allows you to
express yourself and fuel your creativity with different ideas. Anyone can learn how to build
websites by attending workshops and classes, but self-education is also possible. The Internet has
made learning web development technologies and frameworks easier than ever; Anyone with access
can learn to build websites without any specialized training. Web development technology is the
term used to describe the hardware and software used to create websites. This includes desktop
computers as well as handheld devices such as smartphones and tablets. All of these are used to build
websites that are either static or dynamic in nature. Static websites are those that require few updates
and are accessible regularly, while dynamic websites are less accessible but require regular
maintenance.
One of the most common web development tools is a web browser, which enables users to access the
Internet. An HTML or HTML5 web page is the basic format for all web pages. This is the basic way
in which the content of a web page is represented. Various styling options like CSS and JavaScript
are also available to change the look and functionality of web pages. Every website requires specific
coding standards for its code to render properly in a browser. (appypie.com, 2021)
All these factors contribute to making website building easier. Frameworks help streamline website
building by providing standardized code for building common website elements, such as forms or
pagination. This allows experienced developers to focus on more innovative aspects of website
building, such as online advertising or e-commerce functionality. There are various frameworks to
use for web development; Each has its advantages and disadvantages. Common frameworks used
today include PHP (Personal Web Pages), Ruby on Rails, Bootstrap, ReactJS and AngularJS. Over
the past few years, many modern technologies have become readily available and accessible to all
web developers even those with little prior experience in the field. These include HTML5/CSS3,
responsive design, JavaScript, ECMA Script 6 and more. With these innovations came increased
access to computer hardware and software, allowing for more complex projects than ever before.
Although anyone can learn how to build websites, self-education is often preferred due to the
convenience and greater access to resources. With the right tools at your disposal, building a website
is as easy as clicking a button! For that matter, there are many resources online now for learning web
development technologies like HTML or CSS.

Some Popular Frameworks based on different languages
• PHP: Yii, CodeIgniter, CakePHP, Zend, Symfony, Laravel
• Ruby: Rails, Sinatra, Padrino
• Python: Djang, Web2py, TurboGears, Flask
• JavaScript: AngularJS, EmberJS, BackboneJS, KnockoutJS
• Design/CSS frameworks: Bootstrap, Foundation
Advantages Of using frameworks,

• Open source: Often used frameworks are open source (or freely available) in several
different languages. They also have unlimited licenses and allow you to create consumer
products using such frameworks.
• Efficiency: Frameworks avoid writing the repetitive code found in many applications.
• Security: In general, several different developers build and test a framework. As the
framework is built, many security issues are likely to be handled and tested. There are also
quick fixes and solutions for new security threats.
• Integration: When building any kind of application or website, you can usually use a
database, and you need to store some data. Like a database, there are several other resources
involved in web design. This will simplify connection and communication to these resources
with multiple frameworks.
Disadvantages Of using frameworks,

• Limitations - With a single frame, you will not be able to do anything. Everything from
coding paradigm to data base design is somehow constrained.
• Performance - Each framework performs in different situations.
• Learning curve – It can be difficult to understand and many frameworks are difficult to
master
• Cost-frameworks require more expertise and experience in implementation than most CMS.
This means that reliable system developers can be more expensive to hire than reliable CMS
developers.
According to the given scenario it is more suitable to develop a Web Application using these
tools and techniques.

Programming Languages
Programming languages are ways of communicating with machines and instructing them on what to
do. Just as there are many linguistic languages, there are many programming languages. One is not
superior to the other.
• JavaScript - a programming language that is used by both web browsers, Meteor, and a
variety of other systems.
• Coffeescript - A "dialect" of JavaScript. As a developer, it appears to be simpler and easier
on the eyes, but it compiles (converts) back into JavaScript.
• Python - programming language that is used within the Django platform and is used in many
mathematical calculations.
• Ruby - programming language that is used within the Ruby on Rails framework. • Go -newer
language designed for speed.
• Objective-C is Apple's programming language that powers iOS (your iPhone).
• Swift - Apple's most recent programming language.
• Java - programming language that is used by Android (Google) and many desktop apps.
Libraries
Libraries are collections of pieces of code that support a wide range of functionality without the need
to build them all from scratch. Libraries usually go to great lengths to ensure that code is functional
and performs well across browsers and devices.
• jQuery
• Underscore
Databases
All your data is contained in databases. It is like a filing cabinet with folders full of documents. SQL
and NoSQL databases are the most popular databases. SQL offers further structure, which helps
ensure that all data is correct and checked. NoSQL offers great versatility when it comes to
developing and managing applications.
• MongoDB - An open-source NoSQL database.
• Redis - Most widely used key-value store. It is lightning quick for data retrieval but does not
allow for much depth in data storage.
• PostgreSQL - Well-known open-source SQL database.

• MySQL - Well-known open-source SQL database. MySQL is a database that is used in
WordPress websites.
• Oracle - commercial SQL database.
• SQL Server - A database server manager developed by Microsoft. Client-Side A client is a
particular device user. Desktop computers, laptops and portable devices can all be used as
servers. Multiple servers usually deal with the same application stored on a server. Server-
Side application code is usually stored on a server. Clients send requests to the server, and the
server collects the required information and responds to those requests.
Front End
HTML, CSS, and JavaScript make up the front end. This is how and where users can see the website.
Back End
Your server and database make up the backend. It is the location of functions, procedures, and data
manipulation that you do not want your clients to see.
HTML
HTML is a markup language which defines the content structure. HTML consists of a collection of
elements that wrap or enclose various sections of the material to make it seem or to behave in some
way. The enclosed tags can hyperlink a word or an image to another place, can make words cursive,
render font bigger or smaller, etc.

CSS
The CSS system offers a basic framework for creating clear solutions to common recurring problems
in front-end web development. They provide generic features that can be overridden with specific
scenarios and applications. This significantly reduces the time it takes to create websites and
applications.
Advantages of Using CSS,

• Maintenance of code easier.
• Consistency of the project structure.
• Media inquiries sensitive.
• Consistent styling by tips, buttons, shapes etc.
• Consistent font collection and interface-dependent icons.
JavaScript
JavaScript is a robust server-side scripting language. JavaScript is primarily used to introduce
complex web page functionality.
Advantages Using JavaScript

• JavaScript is a client-side programming language.
• JavaScript is a simple language to grasp.
• For the end user, JavaScript is relatively quick.
• Web pages have more features.
• There is no need for a compilation.
• It is simple to debug and measure.
• Independent of platform.
• Event-Based Programming language.
• Capabilities for procedural programming

PHP
PHP is a server-side scripting language used for static or dynamic website development or web
applications. PHP is the pre-processor for hypertext, which previously represented home pages. Only
a server that has PHP installed will read PHP scripts. A Web browser is only needed for clients
accessing PHP scripts.
Advantages Of using PHP,

• PHP is both free and open source.
• Compared to other languages, short learning curve.
• PHP is supported by default by most web hosting servers.
• To keep abreast of latest technology developments, PHP is regularly updated.
• The support for working with MySQL is integrated into PHP.
• PHP is a cross-platform, allowing you to deploy your applications on various OSes such as
Windows, Linux, or Mac OS.
Web Applications
A web application is a computer program based on a web browser and web technology that performs
tasks over the internet. (“Web app presentation - SlideShare”)
In web applications, servers are used to store and retrieve information and server-side scripts
(JavaScript and HTML) to present information to users using server-side scripts (PHP and ASP). It
enables users to use online forms, content management systems, shopping carts and more to interact
with the app. Applications allow employees to create documents, share information, collaborate on
projects, and work on public documents regardless of their location or device.(Stackpath, 2021)
How a web application functions.

Web applications are usually coded in browser-friendly languages such as JavaScript and HTML,
these languages depend on the browser to make the application functional. Some systems are
complex and require server-side processing. Others are completely static with no server settings. A
web application includes a web server to handle client requests, execute required functions, and often
store information in a database. Application server technologies vary from ASP.NET, ASP,
ColdFusion and PHP to JSP.

Advantages of Using a Web Application
• Multiple platform Web applications run on OS or mobile if the browser is supported.
• In contrast to conventional apps, Web applications are always available, anywhere and via
any PC or any internet connected device.
• Every user accesses the same version, removing compatibility problems.
• They are not installed on the hard disk, so space considerations are eliminated.
• Decreases costs both for business and end users because the company requires fewer help and
maintenance, and the end user requirements are less.
• Easily customizable, the web application user interface is easier to adjust than with desktop
applications.
Figure 7. Web developing tools | Source (DevTeam.Space, 2022)

1.3.2 Explain the tools and techniques chosen to develop the above web
application
Taking the previous sections of the report into a summarized view, a custom-made website is a
unique creation developed from the combined efforts of a front-end developer and a back-end
developer to create a portal for businesses and consumers. to interact with each other.
It is not always necessary to have two separate developers for front end and back end, sometimes a
single developer manages to develop the entire website. Those developers are called "Full-stack
developers". In the previous sections of the report, the author has been able to explain the differences
between online website creation tools and custom-made websites in terms of their design,
functionality, etc. and management. According to the detailed investigation of the information
related to both these types and the requirements presented by the management of Arogya Healthcare,
the author has decided to develop a custom-made website for the hospital. A hospital management
system that uses a web-based application makes it very affordable and simple to operate and update
information and data. It will be easier to keep the information and data safe while developing the
system.
Justification for tools and techniques used to develop a website for Arogya Healthcare system
Taking the previous sections of the report into a summarized view, a custom-made website is a
unique creation developed from the combined efforts of a front-end developer and a back-end
developer to create a portal for businesses and consumers. to interact with each other. It is not always
necessary to have two separate developers for front end and back end, sometimes a single developer
manages to develop the entire website. Those developers are called "Full-stack developers". In the
previous sections of the report, the author has been able to explain the differences between online
website creation tools and custom-made websites in terms of their design, functionality, etc. and
management, the author has decided to develop a custom-made website for the hospital, according to
the detailed investigation of the information related to both these types and the requirements
presented by the healthcare management. Application based makes it more affordable and simpler to
operate and update information and data. It is easy to keep the information safe while developing the
system and it is also easy to improve the data.

The author has used the tools and techniques listed above to achieve a custom-built website for the
Arogya Healthcare system. As an initial step, the author has chosen a suitable text editor for
activities related to the website's source code. Next, the author has used the image editor to
customize the images needed for the website. These images were edited using software such as
Adobe Photoshop and Paint 3D, which are high-quality software designed simply for customizing
and/or managing image-related activities. Since this site is a custom-made site, the author had to
choose a suitable web browser to view and test the site's files. Among many browsers, the author had
chosen Google Chrome for this purpose. This is because of the features of this web browser. In the
previous sections of this report, the author introduced several frameworks. Out of them two CSS
frameworks were used by the author in the development process of the official website of Arogya
Healthcare. Bootstrap and materialize are the two CSS frameworks used for this purpose. Unlike
online website design tools, custom-made websites rely entirely on coding. For this, the author has
used HTML as the pioneer markup language that provides the basic structure of any website. It is
clear by now that the use of HTML alone cannot help web developers build a complete website, CSS
also plays a key role. Realizing this fact, the author has chosen two CSS frameworks to support the
design of the web page. Bootstrap and materialize. Apart from large frames, vanilla CSS is also used
as the styling language of this website. The combination of HTML and CSS helps web developers
completely cover the design part of a website. But it is not enough for a website to look attractive, it
should be interactive with its users so that the real purpose of a website can be achieved. The author
has used JavaScript as the scripting language to provide interactive elements for the website. Using
all these tools and techniques, the author has been able to build an attractive and interactive website
for its users.
Next is the actual functionality of the website, for this, the author used PHP as the server-side
scripting language to enable the actual functionality. As explored in the previous sections of the
report, both the front and back ends of a website need to be interconnected to achieve the primary
objective of developing a website. To achieve that, the author has used a query language, namely
SQL, and a database server, MySQL, for the development of this website. Tables that store all types
of data are created using these tools. To effectively manage this data, the author has chosen
PhpMyAdmin as the database administration tool. As mentioned earlier, the author has used Google
Chrome as the web browser to run the website files. Since PHP is involved, a web server solution
bulk package is required to run the PHP files on the local host. For this purpose, the author has
chosen XAMPP as the web server solution stack package for this project. Also, the author has used
font styles and icons offered by Font impressive, which is considered a toolkit of fonts and icons.
This allowed the author to add an unusual look to the site.

Activity 02
2.1 Considering the requirements given in the above scenario define

the relationships between front-end and back-end website technologies
and discuss how the front-end and the back end relate to presentation
and application layers.
2.1.1 Front and back-end of a website

A website is an amazing creation used to publish content and interact with clients. Developing a
website is done in relation to two main parts. These parts are known by the terms front end and back
end. Both these applications are very crucial in the world of web development but they are quite
different from each other. Each of these two parts needs to communicate and function correctly to
function as a single unit, to ensure and improve the overall performance of a website.
The front end of a website includes all the content accessible to customers of a particular business.
Basically, front end refers to the interface through which users can interact directly.
Front-end is also called server-side. The server side of an application includes everything a user can
experience.
For example: font colours, styles, tables, images, videos, slides, buttons and navigation bars.
The back end of a website includes all the activities that are done to ensure the effective functioning
of the client. It is also called server side. Apart from ensuring the efficient operation of the server
side, the back end performs functions such as Data storage and processing. Unlike the front end, this
part of a website does not involve direct interaction with the end users of that particular website. It is
the part of a website that is not visible to users of a website, but whose functionality is used
indirectly by people interacting with front-end software and/or applications. Other tasks such as
creating APIs, using libraries and system components (without interfaces) are also performed in the
back end of a website.

The main objective of back-end dev is to ensure that functionality works well as expected. These
types of developers also have a wide range of technologies to develop the back end of a website.
Some of such common technologies are discussed below.
• PHP - PHP is an acronym used for Hypertext Pre-processor. It is a server-side scripting
language embedded with HTML codes. PHP is a scripting language specially designed for
web development.
• Python - Python is a server-side programming language. It allows developers to work faster
and integrate systems more efficiently.
• C++
• Java - Java is considered as one of the most popular and widely used programming language.
Its components are easily available, and Java is considered as highly scalable.
In this way, the above back-end technologies are utilized in the application layer to develop actual
functionalities of websites, in order to deliver dynamic content to users.
Figure 8. Front end and back end | Source (123RF, 2022)

2.1.2 Relationship between front and back end of a website
Relationships between Front-End and Back-End Technologies Simply put, the front end of a website
is everything the client sees and experiences and sees on the website. Back-end refers to the heart of
the website, enabling it to perform its functions. In the web development process, these two take
different paths but both are really important to each other when it comes to website functionality.
Without a backend (especially in web applications) the website has nothing to offer the user of a
website. The front end of a website is the part where users interact. The front end is everything that
users see and interact with on a website. The backend of a website is the part that runs behind the
scenes. It includes the application that powers the server, database and front end.
Figure 9. Front end and back-end relationship | Source (AOG.jobs)

2.1.3 How front and the back end relate to presentation and application layers
The front end is the presentation layer and the back end is the application layer. The front end is
responsible for displaying information to the user and the back end is responsible for storing and
retrieving data.
Presentation layer
The presentation layer is called the front-end layer and the user interface is called front e and it is
accessible through the web browser and web application and it displays the information and content
for the target audience. Accordingly, this layer is created through web technologies such as HTML,
CSS, and JavaScript, and it is built using frameworks and can interact with other layers through
APIs. The presentation layer is mainly used through internet browser or web-based software on
computer or mobile devices. Application layer This is called business logic, domain logic or business
layer. The process of receiving a user request from a browser and determining the ways in which the
data is processed. This layer encodes the data and the protocol followed as the request passes through
the backend. The application layer includes the practical business logic that drives the core
functionality of an application and is typically coded in Java, .NET, C#, Python, C++, and other
programming languages.
Application layer
The application layer contains the functional business logic that drives the basic capabilities of an
application, mostly written in Java, .NET, C#, Python, C++, etc.
Database Layer
Database / data storage system and data access layer. The database layer and examples of these
systems include MySQL, Oracle, PostgreSQL, MongoDB, Microsoft SQL Server, etc. and the
application layer accesses data through API calls. The presentation layer is mostly deployed to
desktops, tablets, and phones via a web browser or web-based application using a web server, while
the application layer is mostly hosted in the cloud or on a dedicated workstation, depending on the
complexity and processing power required. Application. There are diverse benefits of using the
three-tier architecture, such as speed of development, scalability, performance, and availability,
which help improve development efficiency by allowing the team to focus on their core
competencies.

2.2 Discuss the differences between online website creation tools and custom-built
web sites by considering the design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI). Evaluate the tools and techniques
available to design the web application given in the scenario.
2.2.1 differences between online website creation tools and custom-built web sites
Online website creation tools
A platform or program that allows you to create a website quickly and easily is called an online
website development tool. All you need is an internet connection and a web browser. This helps you
work on your website from anywhere and on any device. Another advantage is that web hosting
services are available for these tools, so you do not need to buy and/or set it up. Most online site
builders are built for people with no coding knowledge.
Some examples for online web creation tools are,
• Weebly
• Squarespace.com
• Wix.com
• Wordpress.com
Online website builders use pre-made templates to create websites. Therefore, online website
builders are built to be highly user-friendly, allowing anyone – beginners or expert designers – to
build an entire website in minutes using a drag-and-drop editor. Users create a website by dragging
and dropping items into designated locations; No coding expertise or skill required.
Advantages of using Web creation tools,
• Design flexibility - Significantly less expensive than building a custom-made website, using
a website builder ensures that the majority of website coding is done without the developer
having to lift a finger. As a result, template sites are significantly less expensive than custom
sites, but the developer will still need to spend time customizing the template and integrating
content.
• The sophistication of templates is increasing - The best templates are well-designed, stable,
and allow for a fair amount of customization.
• Performance - Templets are SEO optimized right away, so there is no need to worry about
rankings like Wix, Weebly and Squarespace. However, the main issue is the quality of the
site which can have an impact on the rankings and UI.

• User Experience (UX) - This increases customer satisfaction in terms of convenience and
usability, because web design tools are simple to use, they all drag and drop and show us
what the final design will look like; With this benefit, we should focus
• The User Interface - It is really user-friendly and simple so it is convenient and effective. Its
meaning is depicted in a way that is really attractive to the users. The platform is released in
phases to improve interaction between users
Custom built sites

A custom-built website is designed from the ground up. It is encrypted to meet the needs of the
client. There is no template that limits your options. Custom-made websites are easy to update and
will expand with the client's needs.
• Personalized pages are easier to modify than templated pages.
• Graphics and features are not limited. A custom site can be designed to do something of
which you can think.
• Custom-built websites are adaptable and can evolve alongside you. You will need to make
major improvements to your site's architecture as well as its functionality in the future. A
custom site is also easier to add new functionality to.
• Custom-made websites perform better in terms of search engine optimization. Web
developers who create websites from the ground up have the technical skills to ensure that the
website is search engine optimized. This is an essential part of your digital marketing
strategy, especially if you are targeting a specific geographic area or service/product sector.
• E-commerce necessitates the use of custom-built websites. A template site is insufficient if
you want an online store with more than a couple of products.
Online Tools Custom-built

Less expensive. Requires professionals. (Costly)
Development is quick. Development takes time.
Uses templates. Each and every function is coded.
Looks similar to others. VS Unique in every aspect.
Limited customization for graphics. Customizations can be done as needed.
Flexible to an extent. Flexible.
Poor SEO. Better SEO
Table 1. Differences between online tools and custom built | Source (Author's work)

In terms of UE, online site creation tools offer good user experience with all needed functionalities.
But custom-built sites are able to offer something beyond normally experienced things.
Due to uniqueness in every aspect, custom-built sites are able to provide an excellent user
experience. As bottom-line, the author would like to conclude by mentioning that both online
website creation tools and custom-built websites are great choices. The decision of which one to use
is completely based on the situation, and the financial stability of an organization.
2.2.2 Evaluate the tools and techniques available to design the web application
given in the scenario.
There are many web application development tools and techniques available to developers. Some of
the most popular include,
• Code editors
• IDEs
• Markup language (HTML)
• Programming languages (PHP)
• Designing languages (CSS)
• Meta tags
• Photo editors
• Frameworks
• Sublime Text
Code editors
Code editors allow web developers to write software programs and applications. This tool is
available in two forms. It can be used as a stand-alone program or as part of an IDE. A code editor
allows web developers to edit source code and handle large code files easily, saving the developer
time and energy.
Popular code editors include Sublime Text, Notepad++ and Visual Studio code.
Ajax
Asynchronous JavaScript and XML is called AJAX. With the help of XML, HTML, CSS, and Java
Script, a new method called AJAX allows developers to build more effective, faster, and interactive
web applications. Currently the most practical Rich Internet Application (RIA) technology is AJAX.
The industry is gaining a ton of momentum and a number of toolkits and frameworks are emerging.
However, AJAX is not supported by all browsers and JavaScript is, making it challenging to
maintain and debug.

IDE
IDE stands for Integrated Development Environment. Like code editors, IDEs allow developers to
edit and manipulate source code. Apart from this, an IDE includes more features than a simple code
editor. Among those features, debugging is an essential part. Apart from that, an IDE supports
features like syntax highlighting, error checking while writing code, and code auto-completion.
Popular IDEs - Visual Studio, IntelliJ and NetBeans.
Markup language (HTML)

The most popular markup language is HTML. HTML plays an especially significant role in
developing a website. This language is pioneered to set up the entire structure and layout of a
particular website. Basically, this markup language provides the overall skeleton of a particular
website. Thanks to HTML, a developer is able to develop the entire structure of a website in a brief
period of time, with less code input.
Programming languages
The use of programming languages is another tool for website development. Developers rely on
many programming languages to develop a website. Popular programming languages include PHP,
JS, Java and Python. While JavaScript can also be used in front-end development of a website, the
others mentioned above are used in back-end development. Functions are coded and actualized using
these languages that enable the user to access data and interact with the website.
Designing languages
Cascading Style Sheets, or CSS, is the most widely used design language. CSS allows developers to
design the website as desired. Apart from CSS, JavaScript also works as a design technique. JS
allows developers to incorporate interactive elements into a website's design. So, both CSS and JS
can be used to give a developer a unique and creative design.

Meta tags
During the design and development process of a website, it is also essential to consider its future. For
this purpose, the use of meta tags can be considered as a technique used in the development process
to ensure prominent levels of customer interaction in the future. Meta tags are part of HTML coding.
Including this tag can ensure effective SEO in the future.
Photo editors
When designing and developing a custom-made website, it is essential to use quality content. The
reason behind this is that by doing so, the website can attract the attention of the customers which in
turn attracts more customers to the website. Moreover, it builds trust in consumers that the quality of
a particular business is high. Photo editors are used as a tool to ensure that high-quality images,
logos, and other elements are included on a particular website.
Some popular photo editors include - Adobe Photoshop, Adobe illustrator and CorelDraw.
Frame works
Using frames to insert elements into a website is a good choice. Frameworks are great tools that
make work easier for developers by providing ready-made resources to decorate their websites. For
designing, frameworks like Bootstrap are extremely helpful in building an attractive website.
Bootstrap is a CSS framework. It contributes to the front-end development of a website. Having an
attractive design on the client side ensures that customers are attracted to the website.
Popular frameworks include Django, Ruby of Rails, and Bootstrap.
The bottom line is that all the tools and techniques evaluated above greatly aid in the design and
development process of a custom-made website.
Sublime texts
Sublime Text is a sophisticated text editor popular among developers. It has many features that make
working with code easy, such as syntax highlighting, automatic indentation, file type detection,
sidebar, macros, plug-ins and packages.

Activity 03
3.1 Design a suitable web application solution for the given scenario using PHP,
JS and My SQL. Apply a database design for the proposed system and provide
the well normalized database design of the proposed system. Provide evidence of
the design, multipage website supported with fidelity wireframes and a full set of
client and user requirements.
Client and user requirements

Clients are people who request for a system to overcome a business problem, whereas user are
people who use the system (Administrators, doctors, patients).
Client requirements
• Should be able to store and fetch data in a manner that eliminates or reduces the occurrences
of data inconsistencies.
• Should be able to store, update and fetch personal data of patients, medical histories,
information of relevant staff, room/ward scheduling, staff scheduling and appointment details
whenever needed.
• Should be able to manage inquiries on information related to admission & discharge of
patients.
• Should be able to control information related to invoices of patients.
• Should be able to check for availability or rooms and/or wards
User requirements
• Should be able to login.
• Should be able to view profile.
• Should be able to make appointments.
• Should be able to get payment reports.
• Should be able to view services, departments, medicines.

ERD diagram
Figure 10. ERD diagram | Source (Author's data)

3.1.1 Design a suitable web application solution for the given scenario using PHP,
JS and My SQL
Homepage
Figure 11. Home page | Source (Author's data)
The primary web page of a website is called the home page. The word can also refer to the start page
that appears in a web browser when an application is first launched. The website of Arogya Medicare
has this on its home page. You can login using an email and the password and after logging in, using
this page, we can see system data and information.

Figure 12. Home page code snippets | Source (Author's data)

Dashboard
Figure 13. Dashboard | Source (Author's data)
The second primary web page of a website is called the dashboard. In here you can access websites
data and information and you can edit them as well, with the help of navigation bar you can go to
different pages to edit and maintain data and information. We can access this page after lining n from
the homepage. The website of Arogya Medicare has this for its dashboard.

Figure 14. Dashboard code snippets | Source (Author's data)

Patient management page
Figure 15. Patient page | Source (Author's data)
While in this page you can view patients details and also, we can add new patients as well, by
entering patient’s name we can search for his/her details.

Figure 16. Patient page code snippets | Source (Author's data)

Doctor management page
Figure 17. Doctor page | Source (Author's data)
In this page you can view doctors’ details and also, we can add or delete doctors as well, by entering
doctor’s ID we can search for his/her details.

Figure 18. Doctor page code snippets | Source (Author's data)

Contact us
Figure 19. Contact us page | Source (Author's data)
In this page people can contact us and leave their feedback and suggestions through an email, user
must enter his/her name and phone number.

Figure 20. Contact us page code snippets | Source (Author's data)

About us / Services

Figure 21. About us page | Source (Author's data)
While in this page viewers can take thorough idea about our services and packages also about contact
details and location.

Figure 22. About us page code snippets | Source (Author's data)

Make an appoint page
Figure 23. Appointment creating page | Source (Author's data)
Navigating through this page receptionist can book an appointment for patient, name. contact NO,
doctor and service type should be entered and after that we can add payment information in cost
calculation, we can enter services and take total at the end. Example is shown below,
Figure 24. Cost calculation example | Source (Author's data)

Figure 25. Appointment creating page code snippets | Source (Author's data)
To obtain the cost calculator we have used AJAX in the appointment creating page.

Appointment details
Figure 26. Appointment detail page | Source (Author's data)
In this page we can view information about appointments, it includes details of the patient, doctor
and service as well as date time and price information

Figure 27. Appointment details page code snippets | Source (Author's data)

3.1.2 Apply a database design for the proposed system and provide the well
normalized database design of the proposed system.

Figure 28. Database for the proposed system | Source (Author's data)

Figure 29. Using data from the database | Source (Author's data)

3.1.3 Provide evidence of the design, multipage website supported with fidelity
wireframes
Balsamiq Wireframes is a quick, low-fidelity UI wireframe tool that simulates drawing on a

whiteboard or notepad while using a computer. It effectively pushes you to focus your attention on
structure and materials rather than wasting time on early debates about color and detail.
With wireframes, you can quickly generate new ideas, discard substandard ones, and identify the
best solutions. (Balsamiq.com, 2019)
To create wire frames for the above system I have used Balsamiq wireframe
tool,
Figure 30. Balsamiq |

Source (Balsamiq)
Homepage
Figure 31. Homepage wireframe | Source (Author's data)

Doctor / Patient / Prescription / Appointment Data view
Figure 32. Doctor / Patient / Prescription / Appointment Data view | Source (Author's data)
Doctor / Patient Registration
Figure 33. Patient Registration wireframe | Source (Author's data)

Figure 34. Doctor Registration wireframe | Source (Author's data)
Contact us
Figure 35. Contact us wireframe | Source (Author's data)

Services
Figure 36. Services wireframes | Source (Author's data)

Appointment booking
Figure 37. Appointment booking wireframes | Source (Author's data)
Dashboard
Figure 38. Dashboard wireframes | Source (Author's data)

3.2 Compare and contrast the multipage website created to the design document.
Screenshot / Description
Design document
Multipage website
As shown above, the login interface of the multi-page website is designed

and developed as suggested by the design document. When comparing and
Description contrasting, the only differences that can be found are the images and Play
Store and a logo added and the background image applied.

Design document
Multipage website
As shown above, the Dashboard interface of the multi-page website is

designed and developed as suggested by the design document. When
Description comparing and contrasting, the only differences that can be found is the logo
of Arogya medical image applied.

Design document
Multipage website

Multipage website
As shown above, the detail interfaces of the multi-page website is designed

Description contrasting, the only differences that can be found is the logo of Arogya
medical image has been added.
Design document

Multipage website

Description contrasting, the only differences that can be found are the logo of Arogya
medical and a contact image has been added.
Multipage website

Design document

Description contrasting, the only differences that can be found are the logo of Arogya
medical has been added.

Design document
Multipage website
As shown above, the Appointment booking interface of the multi-page

website, designed and developed as suggested as the design document.
Description When comparing and contrasting, the only differences that can be found is
the logo of Arogya medical and some more fields and their name has given
and the logo has applied.
Table 2. Comparison and contrast of multipage website to the design document | Source (Author's data)

3.3 Critically evaluate the web design, development process against your design
document analysing any technical challenges you faced during the development.
3.3.1 Technical challenges

Problems of a technical nature are simple to identify and solve with the use of available resources.
There are several ways to identify something as a technical challenge,
• They are very noticeable. For example, software problems are occurring in your company
that affect efficiency.
• Experts can use their expertise to solve them. This could be a technical expert on staff who is
familiar with the software and has solved problems of a similar nature in the past. In other
words, the problem can be solved more or less easily using current knowledge.
• People affected by the problem are glad help is on the way. In other words, everyone is happy
this software issue is finally getting fixed. Better late than never, right?
• It is simple to solve the issue. It could be a matter of performing a software update or
deciding that a move to another software solution is in order. Now, some technical challenges
can be complex, but they are simple to solve when compared to the adaptive challenges
discussed later.
When faced with a technical challenge, it is critical for leaders to clearly describe it, find the
resources (such as employees) best equipped to solve it quickly, and implement the solution in
practice for the benefit of the entire team. A badly made piece of software is clearly a problem.
Finding staff members who have dealt with this problem before or have the knowledge to handle it
quickly, like those in tech support, and have them work on a solution.
Technical Challengers that I faced during developing the Arogya Medicare System,
• Lack of knowledge : This was a significant issue for web development since I lacked the
skills to translate the needed functionality into framework coding. And I may benefit from
your ignorance of the new features.
• Time Management : As previously explained, I had to practically learn by trial and error
until I had a portion of the interface that I wanted, and the little amount of time I had to finish
the system made it more difficult.
• Security : Making the exact design that was outlined in the design document a secured site
that could shield internal assets from outside intruders posed a challenge to the author when
creating it.
• Balancing simplicity : A excellent website should be simple, as was discussed in a previous
part of this study. Matching colours, headers, titles, icons, and other elements was difficult
for the author to do in order to suggest a pleasing design that would be able to live up to or
beyond user expectations.
• Errors in the codes : A big problem is minor errors like syntax errors and functional errors.
Determining the exact locations of errors was difficult, making it difficult to debug the
problems and get them working correctly.
3.3.2 Critical evaluation
Arogya A multi-page hospital management system for Medicare. As a preliminary step, the author
has gathered the necessary information from the hospital management organizations, then the author
has decided what tools and techniques are appropriate to use to create the website, and finally the
author has taken steps to maintain it. To ensure that the website, system is current and up to date.
First, the author has added client and user requirements.
After conducting several discussion sessions with the management, the author has been able to
understand the main intention of health Medicare management. Their main intention was to have a
fully functional, online system to handle their day-to-day tasks quickly and easily, without wasting
time and energy working with a manual system (the current system).
The design and development process of a specific website is especially important and should be done
carefully by the appropriate development and design parties. This method may involve various stages
depending on the developer. As a preliminary step, communication with the customer before starting
the design and development process, research, wireframe design process, determining the design
development process, preparing resources for post-launch and final product after the design and
development stages are done. To ensure that the system was current and up to date, the author first
obtained the information needed from hospital authorities. and then I decided which tools and
approaches would be best to use in the design of the website.
Finally, the author worked to maintain the website. During the comparison process done in previous
works, the author identified several differences. But those changes did not cause much trouble during
the design and development process of this system. The design document for this particular site
included wireframes with a simple, yet unique design. Simplicity is considered a principle of a
reliable website. The design document consisted of the hospital management system homepage logo,
navigation bar, content section. Next, the login page was developed similar to the design suggested
by the design document. The only changes here were the addition of a background image and some
icons. All other pages were designed and developed as suggested by the design document

Activity 04
4.1 QA process is expected to discover design issues and development errors
while testing a product’s user interface (UI) and gauging the user experience
(UX). Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
4.1.1 User interface (UI)

User interface (UI) refers to the graphical interface that a user interacts with in order to use a
software application. Simply defined, "UI" stands for "user interface," and refers to the appearance of
a page, layout, placement of items, and other visual aspects of a website or application. It is essential
to remember that user interface design is a subset of UX that, while not the same as user experience
design, affects the final look and feel of the experience. While UI designers use a blend of creative
and convergent thinking to provide a solution that fits their client's needs and specifications, UX
designers are more concerned with the thought process behind an app or website. What motivates
them to do so? By translating the research, development, content and layout of a product (UX) into
an attractive, user-friendly and responsive user experience or interface of an app or website.
UI designers are responsible for,
• Presentation
• Visual
• Themes
• Content
4.1.2 User experience (UX)

User experience (UX) refers to the overall experience that a user has while using a software
application, including the UI. "UX" stands for "user experience," and refers to specialists who play a
human-first position in this role. In fact, this implies that the goal of UX design is to provide an easy
user experience that allows users to browse an app or website without getting lost or taking extra
steps. UX designers bring a keen understanding of how a product should work and user interaction
potential. The work of UX designers in industry is less cognitive than in digital and demands the
application of critical and creative thinking to produce an easy-to-use finished product. UX designers
conduct user research, test existing components, oversee development and content, work on
prototypes, and drive content creation to ensure the company's design principles align with the user's
needs while delivering the desired solution.

It is clear that UX and UI designers have quite different tasks to complete, but it is clear that the
work of the UX designer should ultimately be delegated to the UI designer. The UI designer is then
in charge of making sure that the technical specifications are presented in a way that engages the user
and speaks to the brand as a whole.
Ultimately, without purpose in UX design elements, UI design cannot produce meaningful graphics,
and a UX designer can only push their user-centred approach so far before digitizing it for usability.
Figure 39. UI and UX | Source (testfort, 2022)
4.1.3 Quality Assurance (QA)
Quality Assurance (QA) is the process of ensuring that a software application meets all the necessary
requirements and works as expected. User experience is affected by quality assurance because when
things do not work, users start to doubt their understanding and come up with irrational solutions.
Usability, by definition, includes quantifiable attributes including user happiness, ease of learning,
and usability. Usability, by definition, includes quantifiable attributes including user happiness, ease
of learning, and usability.
Whether for manufacturing, aviation, or hospital cleanliness, proactive QA that treats quality as an
integral part of the core process achieves the best results. This is the same conclusion found in other
qualitative subjects.

• Plan In the first phase, the company needs to plan and establish the project's objectives, in
order to determine the steps necessary to deliver a high-quality product.
• Do - In Phase 2, the company should begin development and testing. In between, changes
can be made whenever necessary.
• Check - In Phase 3, activities such as monitoring, modifying existing processes, and making
sure objectives are met take place.
• Act - The last stage implements the necessary actions to achieve the expected results from
the processes
Figure 40.Quality assurance | Source (testbytes.net)
4.1.4 Evaluate the Quality Assurance process during your design and
development.
Process was implemented during the design and development stages by conducting usability testing
to ensure that the UI and UX were effective and efficient.
Under the QA process, the author undertook to analyse the requirements presented by the
management of Arogya Medicine. The author then created a test plan to test key performance areas
of the system.
This test plan was created to test each part of the system during the system design and development
process. Test cases are then designed to test each part of the system, incorporating data, conditions,
and actions. Next, once the test cases are executed, they are planned to be recorded separately as a
report. This makes dealing with defects easier as the actions taken to correct any errors are recorded.

4.2 Create a suitable test plan for the developed system and critically evaluate the
results of your Test Plan. Include a review of the overall success of your
multipage website; use this evaluation to explain any areas of success and provide
justified recommendations for areas that require improvements.
4.2.1 Create a suitable test plan for the developed system
Test
Expected outcome Actual outcome Result
case
Entering credentials
(username and password)
should enable login and
1 login should fail if Pass
username or password is
incorrect by giving the
message “password is
incorrect”.

Test
case
After logging into the

system, the user should be
able to navigate through
various pages using the
2 dashboard page (e.g.,
when you select the Pass
patient list from the list or
icons provided in the
dashboard the user should
be able to see the details
of the patients)

Test
case
After navigating to
(patient list , doctor list)
3 specific page, user should Pass
be able to manage patients
and doctors.

Test
case
To book an appointment
with the patient, the user
should open the “Make an
appointment” page after
opening the page where
the user can fill the
required fields, and after
entering the data, the user
4 should click the “Book” Pass
button after clicking the
record button. Must be
added, also in the cost
calculator, after entering
the prices and processes
the total should be
calculated and shown in
the "Fees" field and below
the calculators. And if we
view thew appointment
details it should be shown
there.
To search the data for a

particular patient, with
search option enabled, I
5 was able to display the Pass
relevant patient data by
searching the name from
the search box.
Table 3. Test case for the system | Source (Author's data)

4.2.2 Critically evaluate the results of your Test Plan and explain any areas of
success and provide justified recommendations for areas that require
improvements.
The author, developer and designer of Arogya Medicare System managed to design and develop an
attractive and fully functional online hospital management system for Arogya Medicare Hospital. To
ensure the quality of the product, the author has created a test plan and then conducted test cases to
ensure that the desired result is achieved. The results of the test plan conducted by the author to test
the various functionalities of the Arogya Medicare Management System have been successful. The
author has conducted the testing procedure targeting the key performance areas of the website.
All fields are working fine. The reason for such a conclusion is the result obtained by the
implementation of the relevant test cases. Proper functioning of this interface ensures that only
authorized users can access information belonging to a particular business or organization. As this
project needed to be completed within a two-week period, the author had to work on designs and
features in a short period of time.
Therefore, although the system is ready to be handed over to Arogya Medicare management, the
author thinks that some more features can be added using a software update in the future.
Some recommendations for future improvements are,

• Mobile-friendly version
• More detailed list of services
• Price list should be given in both USD and LKR
• Online chatting facilities
• Addition of social media links
• Schedule, add and view rooms
• Backup System
• Generate Reports
• Email Notifications and verifications

4.2.3 Review the overall success of your multipage website.
The site is overall successful. The pages are well designed and easy to navigate. The content is
professionally written and informative. The only problem is that the website is not mobile-friendly,
making it inaccessible to users on mobile devices. The developer and designer of Arogya Medicare
System managed to design and develop an attractive and fully functional online hospital
management system for Arogya Medicare Hospital. To ensure the quality of the product, the author
has created a test plan and then conducted test cases to ensure that the desired result is achieved. The
results of the test plan conducted by the author to evaluate the various functionalities of the Arogya
Medicare Management System have been successful.
Figure 41. Creating a successful system | Source (Freepik,2022)

REFERENCES
Fortinet (2022). What Is DNS? Definition & How DNS Works. [online] Fortinet. Available at:
https://www.fortinet.com/resources/cyberglossary/what-is-dns.
Cloudflare (2019). Cloudflare. [online] Cloudflare. Available at:

https://www.cloudflare.com/learning/dns/what-is-dns/.
Standardised Communications Protocols | ARDC. [online] Available at:

https://ardc.edu.au/resource/standardised-communications
protocols/#:~:text=A%20communications%20protocol%20is%20a.
Bigelow, S. (2021). What is an Operating System (OS)? Definition, Types and Examples. [online]
WhatIs.com. Available at: https://www.techtarget.com/whatis/definition/operating-system-OS.
WhatIs.com. (n.d.). What is a Web Server and How Does it Work? [online] Available at:
https://www.techtarget.com/whatis/definition/Web-server.
www.orientsoftware.com. (n.d.). What technology should you use for Web Development? [online]
Available at: https://www.orientsoftware.com/technologies/web-technologies/.
(1978). [online] Available at: https://dspace.mit.edu/bitstream/handle/1721.1/61034/06564848-

MIT.pdf
Aasif (2019). Most Popular Web Development Frameworks for 2019-20. [online] Appy Pie.
Available at: https://www.appypie.com/top-web-development-frameworks.
Code Institute Global. (2022). Database Programming: An Introduction. [online] Available at:
https://codeinstitute.net/global/blog/database-programming/
Niekerk, J. van (2017). How Do HTML, CSS and JavaScript Work Together? [online]
ITonlinelearning. Available at: https://www.itonlinelearning.com/blog/how-do-html-css-and-
javascript-work-together/#:~:text=HTML%20is%20a%20markup%20language

www.conceptatech.com. (n.d.). What Is the Difference Between Front-End and Back-End
Development? Software Engineering. [online] Available at:
https://www.conceptatech.com/blog/difference-front-end-back-end-
development#:~:text=The%20term%20%E2%80%9Cfront%2Dend%E2%80%9D.
Mindfire Solutions (2018). Advantages and Disadvantages of PHP Frameworks. [online] Medium.
Available at: https://medium.com/@mindfiresolutions.usa/advantages-and-disadvantages-of-php-
frameworks-c046d50754e5.
WhatIs.com. (n.d.). What is framework? - Definition from WhatIs.com. [online] Available at:
https://www.techtarget.com/whatis/definition/framework#:~:text=In%20computer%20systems%2C
%20a%20framework.
PCMAG. (n.d.). Definition of PHP. [online] Available at:

https://www.pcmag.com/encyclopedia/term/php.
SearchSoftwareQuality. (n.d.). What is Web Application (Web Apps) and its Benefits. [online]
Available at: https://www.techtarget.com/searchsoftwarequality/definition/Web-application-Web-
app.
Stackpath.com. (2022). [online] Available at: https://www.stackpath.com/edge-academy/what-is-a-

web-application/.
Magenest - One-Stop Digital Transformation Solution. (2021). Top 20 Website Development Tools
& Techniques for Beginners 2022. [online] Available at: https://magenest.com/en/website-
development-tools/.
Shabbir, A. (n.d.). HTML meta tag explained with examples. [online] Available at:
https://linuxhint.com/html-meta-tag/
tutorialspoint.com (2019). What is AJAX? [online] www.tutorialspoint.com. Available at:

https://www.tutorialspoint.com/ajax/what_is_ajax.htm.

Balsamiq.com. (2019). Balsamiq Wireframes | Balsamiq. [online] Available at:
https://balsamiq.com/wireframes/.
Study.com. (2022). [online] Available at: https://study.com/academy/lesson/technical-vs-adaptive-

challenges-in-organizations.html#:~:text=Technical%20challenges%20are%20problems%20that
Nielsen Norman Group. (2013). QA (quality assurance) & UX (user experience). [online] Available
at: https://www.nngroup.com/articles/quality-assurance-ux/.
UC Irvine Boot Camps. (2019). UX vs. UI Design: What’s The Difference? [online] Available at:
https://bootcamp.ce.uci.edu/blog/ux-vs-ui-design-whats-the-difference/

Gantt chart

Unit 10 Web Design and Development Reworded 2021 Bhanuka Perera

Uploaded by

Copyright:

Available Formats

Unit 10 Web Design and Development Reworded 2021 Bhanuka Perera

Uploaded by

Document Information

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

Unit 10 Web Design and Development Reworded 2021 Bhanuka Perera

Uploaded by

Copyright:

Available Formats

Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

Programme title BTEC Higher National Diploma in Computing

Assessor Internal Verifier

Do the assessment criteria awarded match

Is the Pass/Merit/Distinction grade awarded

• Identifying opportunities for

• Agreeing actions? Y/N

Does the assessment decision need

Internal Verifier signature Date

Assessor signature Date

Unit Title Unit 10: Website Design & Development

Assignment Number 10 Assessor

Pass, Merit & Distinction P1 P2 M1 M2 D1

Pass, Merit & Distinction P3 P4 M3 D1

Grade: Assessor Signature: Date:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

Feedback: Student to Assessor

Assessor signature Date

Student signature Date

Word Processing Rules

1. I know that plagiarism is a punishable offence because it constitutes theft.

bhnkperera@gmail.com 15th November 2022

Academic Year 2021/2022

Unit Tutor Mr. Tuan Wazeem

Assignment Title Online Hospital Management System

IV Name & Date

Unit Learning Outcomes:

Assignment Brief and Guidance:

The new system is to control the following information

LO1 Explain server technologies and management services associated with

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

P2 Explain the purpose and relationships between communication

LO2 Categories website technologies, tools and

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

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

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

D2 Critically evaluate the design and development process against your

LO4 Create and use a Test Plan to review the

P7 Create a suitable Test Plan identifying key performance area and

Activity Activity Learning Outcome Feedback

Assessor Name …………………….

UNIT 10 – WEB DESIGN AND DEVELOPMENT | BHANUKA PERERA 1

UNIT 10 – WEB DESIGN AND DEVELOPMENT | BHANUKA PERERA 2

1.1.1 Introduction to DNS ................................................................................................... 8

1.1.2 Three types of DNS queries ....................................................................................... 9

1.1.3 Types of DNS servers .............................................................................................. 10

1.1.4 Domain names .......................................................................................................... 11

1.1.5 Search Engine Optimization (SEO) ......................................................................... 12

1.1.6 Site index .................................................................................................................. 12

1.2.1 Communication protocols ........................................................................................ 13

1.2.2 Operating systems .................................................................................................... 14

1.2.3 Web server software ................................................................................................. 16

1.2.4 Relationships between communication protocols, server hardware, operating

1.3.1 Common web development technologies and frameworks ..................................... 19

UNIT 10 – WEB DESIGN AND DEVELOPMENT | BHANUKA PERERA 3

2.1.1 Front and back-end of a website .............................................................................. 28

2.1.2 Relationship between front and back end of a website ............................................ 30