Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title BTEC Higher National Diploma in Computing

Mr. Gagana Wickramasinghe

Assessor Internal Verifier
Unit 10: Web Design and Development
Unit(s)
Online Hospital Management System
Assignment title
A.J Tharindu Janak Jayantha
Student’s name
List which assessment Pass Merit Distinction
criteria the Assessor has
awarded.
INTERNAL VERIFIER CHECKLIST

Do the assessment criteria awarded match

those shown in the assignment brief? Y/N

Is the Pass/Merit/Distinction grade awarded

justified by the assessor’s comments on the Y/N
student work?
Has the work been assessed
Y/N
accurately?
Is the feedback to the student:
Give details:

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

• Identifying opportunities for

improved performance? Y/N

• Agreeing actions? Y/N

Does the assessment decision need

Y/N
amending?
Assessor signature Date

Internal Verifier signature Date

Programme Leader signature(if
Date
required)
 Confirm action completed
Remedial action taken

Give details:

Assessor signature Date

Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)
Higher Nationals - Summative Assignment Feedback Form
Student Name/ID A.J Tharindu Janak Jayantha MAT/A-008895
Unit Title Unit 10: Website Design & Development

Assignment Number 1 Assessor Mr. Gagana Wickramasinghe

15/04/2022 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

Assessor signature Date

[email protected] 15/04/2022
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 aspects of my program, will be my own, and where
I have made use of another’s work, I will attribute the source in the correct way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding agreement between
myself and Pearson, UK.
6. I understand that my assignment will not be considered as submitted if this document is not attached to the
attached.

[email protected] 15/04/2022

Student’s Signature: Date:

(Provide E-mail ID) (Provide Submission Date)
Assignment Brief
Student Name /ID Number A.J Tharindu Janak Jayantha MAT/A-008895

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2021/2022

Unit Tutor Mr. Gagana Wickramasinghe

Assignment Title Online Hospital Management System

Issue Date 08/02/2022

Submission Date 15/04/2022

IV Name & Date

Submission Format:

Part 1.
Report- Submit a professional report with approepriate report formattimg and guidelines followed. All the research
data should be referenced along with in-text citations using Hrvard referencing syste.

Part 2
A fully functional web solution

Unit Learning Outcomes:

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

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

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

LO4 Create and use a Test Plan to review the performance and design of a multipage website.

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 Identifry 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 evidences.
Task 2 - Categories website technologies, tools and software used to develop websites (LO2)

2.1 Considering the requirments 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 gicven 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 evidences 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 analyisng 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 areas and

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

Activity Activity Learning Feedback

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

Comments:

Mr. Gagana Wickramasinghe

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

1
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Acknowledgement
This assignment is for Web Design and Development subject, which is a part of HND in
computing. In the accomplishment of this assignment successfully, many people have best
owned upon me their blessings and the heart pledged support, this time I am utilizing to
thank all the people who have been concerned with this assignment. First of all I am highly
indebted to the teacher in the this subject Mr. Gagana Wickramasinghe for his guidance
and constant supervision as well as for providing necessary information regarding the
assignment and also for her support in completing the assignment. Then I would like to
express my gratitude towards my parents and friends for their kind cooperation and
encouragement, which helped me in the completion of this assignment.

2
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Table of contents
LO1 Explain server technologies and management services associated with hosting and
managing websites................................................................................................................... 9
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). .................. 9
What is a website? ................................................................................................................... 9
What is web designing? ........................................................................................................... 9
What is web development? .................................................................................................... 10
The website design and development process ....................................................................... 10
Information gathering ............................................................................................................ 10
Planning ................................................................................................................................. 11
Design .................................................................................................................................... 11
Development.......................................................................................................................... 12
Testing and delivery .............................................................................................................. 12
Maintenance .......................................................................................................................... 12
Web Designing ...................................................................................................................... 13
Web Publishing ..................................................................................................................... 14
Website Accessing................................................................................................................. 14
What is a Protocol? ................................................................................................................ 14
Communication Protocol ....................................................................................................... 15
TCP/IP Protocol..................................................................................................................... 15
File Transfer Protocol (FTP) ................................................................................................. 16
Hypertext Transfer Protocol (HTTP) .................................................................................... 16
Hypertext Transfer Protocol Secure (HTTPS) ...................................................................... 17
Differences between HTTP and HTTPS ............................................................................... 18
Secure Shell (SSH) ................................................................................................................ 19
Server Hardware .................................................................................................................... 19
Operating Systems ................................................................................................................. 20
Types of Operating System ................................................................................................... 21
Web Server Software ............................................................................................................. 22
Types of Web Server Software .............................................................................................. 22
1.2 Identifry 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........................................ 25
DNS (Domain Name System) ............................................................................................... 25
The types of DNS .................................................................................................................. 25
Search Engine ........................................................................................................................ 27
How do search engines work? ............................................................................................... 28
Search Engine Crawling ........................................................................................................ 28
Search Engine Index .............................................................................................................. 29
Search Engine Ranking ......................................................................................................... 29

3
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Search Engine Optimization (SEO)....................................................................................... 30
Search Engine Optimization works ....................................................................................... 30
Search Engine Optimization Technique ................................................................................ 31
1.3 Identify and explain the common web development technologies and frameworks.
Explain the tools and techniques chosen to develop the above web application and justify
your choice by providing valid evidences. ............................................................................ 36
What is Web Development? .................................................................................................. 39
Web Development Technologies and Frameworks ............................................................... 39
Web Development Technologies .......................................................................................... 39
Web Development Frameworks ............................................................................................ 40
Why a web application is suitable for the given scenario ..................................................... 41
How web application work .................................................................................................... 42
Benefits .................................................................................................................................. 42
Web application techniques ................................................................................................... 42
Web application tools ............................................................................................................ 44
LO2 Categorise website technologies, tools and software used to develop websites. .......... 46
2.1 Considering the requirments 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. ........................................................................ 48
Front-end ............................................................................................................................... 48
Front-end Technologies ......................................................................................................... 48
Back-end ................................................................................................................................ 49
Back-end technologies........................................................................................................... 49
Web Tier Architecture ........................................................................................................... 51
What do the 3 Tiers mean? .................................................................................................... 51
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
gicven in the scenario. ........................................................................................................... 52
Online Website Creation tools............................................................................................... 52
The Tools ............................................................................................................................... 52
Custom built sites .................................................................................................................. 53
Differences between Online website tools and Custom built sites........................................ 53
Tools used to design Custom-built Web Applications .......................................................... 54
Techniques used to design Custom-built Web Applications ................................................. 55
LO3 Utilise website technologies, tools and techniques with good design principles to create
a multipage website. .............................................................................................................. 57
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 evidences of the design, multipage website supported with fidelity wireframes and
a full set of client and user requirements. .............................................................................. 57
What is a web application? .................................................................................................... 57

4
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Client and User Requirements ............................................................................................... 57
What is a wireframe............................................................................................................... 58
UML diagrams for Online Hospital Management System .................................................... 63
Principles, standards and guidelines of a website ................................................................. 67
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 analyisng any technical
challenges you faced during the development. ...................................................................... 69
Home Page – Hospital Management System ........................................................................ 69
Home Page Codes.................................................................................................................. 70
Register as patient page ......................................................................................................... 70
Register as patient page code ................................................................................................ 71
Login as doctor page ............................................................................................................. 72
Login as doctor page code ..................................................................................................... 72
Login as admin page .............................................................................................................. 73
Login as admin page code ..................................................................................................... 73
Drop us a message page ........................................................................................................ 74
Drop us a message page code ................................................................................................ 74
Admin Dashboard Page ......................................................................................................... 75
Admin Dashboard Page Codes .............................................................................................. 75
View Doctore Page ................................................................................................................ 77
View Doctore Page Codes ..................................................................................................... 77
Add Doctor Page ................................................................................................................... 78
Add Doctor Page Code .......................................................................................................... 78
Doctor Added Successfully Masage ...................................................................................... 79
Add Doctor ............................................................................................................................ 79
Delete Doctor page ................................................................................................................ 80
Delete Doctor Page Code ...................................................................................................... 80
View patients page ................................................................................................................ 82
View patients page code ........................................................................................................ 82
Register as patient.................................................................................................................. 83
New patient dashboard .......................................................................................................... 83
The new patient is displayed in the database......................................................................... 84
Queries ................................................................................................................................... 85
Queries code .......................................................................................................................... 85
Appointment details............................................................................................................... 86
Appointment details code ...................................................................................................... 86
Patient dashboard................................................................................................................... 87
Patient dashboard code .......................................................................................................... 87
Book appointment ................................................................................................................. 88
Book appointment code ......................................................................................................... 88
Log out................................................................................................................................... 89
Log out code .......................................................................................................................... 89

5
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor Dashboard .................................................................................................................. 90
Doctor Appoinment List ........................................................................................................ 90
Doctor dashboard code .......................................................................................................... 91
Comparison between the website and the actual document .................................................. 92
Technical challenges faced .................................................................................................... 99
LO4 Create and use a Test Plan to review the performance and design of a multipage website.
............................................................................................................................................. 100
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. ............................................................................................................. 100
What is Quality Assurance? ................................................................................................ 100
Quality Assurance Process .................................................................................................. 100
Quality Control .................................................................................................................... 101
The Difference Between Quality Assurance and Quality Control ...................................... 101
Here we can discuss some another steps in QA .................................................................. 102
Review requirements and documentation, .......................................................................... 102
Key benefits for the development process: ......................................................................... 102
Plan and prepare test cases .................................................................................................. 102
Design Test Cases................................................................................................................ 102
QA for Online Hospital Management System..................................................................... 103
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. .................................................................................................. 104
Test Case 01 – Admin ......................................................................................................... 104
Test Case 02 – Admin ......................................................................................................... 105
Test Case 03 - Admin ......................................................................................................... 106
Test Case 04 - Admin .......................................................................................................... 107
Test Case 05 - Admin .......................................................................................................... 108
Test Case 06 - Doctor .......................................................................................................... 110
Test Case 07 - Doctor .......................................................................................................... 111
Test Case 08 - Doctor .......................................................................................................... 112
Test Case 09 - Doctor .......................................................................................................... 113
Test Case 10 - Patient .......................................................................................................... 115
Test Case 11 - Patient .......................................................................................................... 116
Test Case 12 - Patient .......................................................................................................... 117
Test Case 13 - Patient .......................................................................................................... 118
Test Case 14 - Patient .......................................................................................................... 119
Annexures ............................................................................................................................ 122
Reference ............................................................................................................................. 124

6
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Table of figures
Figure 01: File Transfer Protocol (FTP) (ipswitch.com,2022).............................................. 16
Figure 02: Secure Shell (SSH) (ipswitch.com,2022) ............................................................ 19
Figure 03: Apache HTTP Server ........................................................................................... 23
Figure 04: Internet Information Services .............................................................................. 23
Figure 05: LIGHTTPD .......................................................................................................... 24
Figure 06: Authoritative Nameserver .................................................................................... 27
Figure 07: Search Engine ...................................................................................................... 28
Figure 08: Search Engine Crawling ...................................................................................... 28
Figure 09: Search Engine Optimization (SEO) ..................................................................... 30
Figure 10: front end & back end ............................................................................................ 50
Figure 11: Home page of the website .................................................................................... 59
Figure 12: Admin Login Page ............................................................................................... 59
Figure 13: Doctor Login Page ............................................................................................... 60
Figure 14: Patient Create Account Page ................................................................................ 60
Figure 15: Admin Dashboard Page ....................................................................................... 61
Figure 16: Doctor Apply Page ............................................................................................... 61
Figure 17: Patient Dashboard Page ....................................................................................... 62
Figure 18: Doctor Dashboard Page ....................................................................................... 62
Figure 19: Activity diagram (Admin).................................................................................... 63
Figure 20: Activity diagram (Doctor) .................................................................................... 64
Figure 21: Activity diagram (Patient).................................................................................... 65
Figure 22: Use Case Diagram................................................................................................ 66
Figure 23: Home Page ........................................................................................................... 69
Figure 24: Home Page Codes ................................................................................................ 70
Figure 25: Register as patient page ....................................................................................... 70
Figure 26: Register as patient page code ............................................................................... 71
Figure 27: Login as doctor page ............................................................................................ 72
Figure 28: Login as doctor page code ................................................................................... 72
Figure 29: Login as admin page ............................................................................................ 73
Figure 30: Login as admin page code.................................................................................... 73
Figure 31: Drop us a message page ....................................................................................... 74
Figure 32: Drop us a message page code .............................................................................. 74
Figure 33: Admin Dashboard Page ....................................................................................... 75
Figure 34: Admin Dashboard Page Codes ............................................................................ 76
Figure 35: View Doctore Page .............................................................................................. 77
Figure 36: view doctore page codes ...................................................................................... 77
Figure 37: Add Doctor Page .................................................................................................. 78
Figure 38: Add Doctor Page Code ........................................................................................ 78
Figure 39: Doctor Added Successfully Masage .................................................................... 79
Figure 40: Add Doctor........................................................................................................... 79
Figure 41: Delete Doctor page .............................................................................................. 80
Figure 42: Delete Doctor Page Code ..................................................................................... 80

7
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Figure 43: View patients page ............................................................................................... 82
Figure 43: View patients page code ...................................................................................... 82
Figure 44: Register as patient ................................................................................................ 83
Figure 45: New patient dashboard ......................................................................................... 83
Figure 46: The new patient is displayed in the database ....................................................... 84
Figure 47: Queries ................................................................................................................. 85
Figure 48: Queries code......................................................................................................... 85
Figure 49: Appointment details ............................................................................................. 86
Figure 50: Appointment details code .................................................................................... 86
Figure 51: Patient dashboard ................................................................................................. 87
Figure 52: Patient dashboard code ........................................................................................ 87
Figure 53: Book appointment ................................................................................................ 88
Figure 54: Book appointment code ....................................................................................... 88
Figure 55: Log out ................................................................................................................. 89
Figure 56: Log out code ........................................................................................................ 89
Figure 57: Doctor Dashboard ................................................................................................ 90
Figure 58: Doctor Appoinment List ...................................................................................... 90
Figure 59: Doctor dashboard code ........................................................................................ 91
Figure 60: Xampp control panel .......................................................................................... 122
Figure 61: PHP My Admin.................................................................................................. 122
Figure 62: PHP My Admin.................................................................................................. 123

8
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
LO1 Explain server technologies and management services associated with hosting and
managing websites.
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).
What is a website?
One of the most common reasons that we hang around on the Internet every day is the
abundance of information for which it is loaded. Multiple sources generate the information
and carefully organize it in the form of files and web pages, that, when grouped together to
form a single entity, become a website. (indiatimes.com, 2022)

In this context, a website represents a centrally grouped of web pages comprising text,
photographs and other types of multimedia files that are brought to the attention of Internet
users in an attractive and easily accessible way. The World Wide Web (WWW) is made up
of all Internet-enabled websites. (indiatimes.com, 2022)

Using programming languages, such as (X) HTML and PHP, the data contained in the
websites is organized and made accessible to the online. Website programming is the main
method to define website’s structure and manage its behavior while visitors browse through
its pages. The well-structured information is given a user-friendly look and feel with the help
of web design techniques. In order to present the properly programmed web pages on the
monitors of visitors, they must be hosted on a web server, which will allow them to be
transferred via HTTP to any web browser, the main protocol of the WWW and the 4-letter
abbreviation that we see at the beginning of each website. (indiatimes.com, 2022)

What is web designing?

The web page development technique is known as internet design. It includes a variety of
elements such as webpage layout, content design, and creative style. Regardless of the fact
that the words or phrases web design and web development are sometimes used
interchangeably, web design is a subset of web development. (indiatimes.com, 2022)

The process of developing, designing and organizing information for Internet is known as
web design. Modern web design includes not only how things look (aesthetics), but also how
things work (functionality). Online design encompasses a wide range of applications,
including web applications, mobile applications, and user interface design.

9
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
What is web development?
Website development is the programming or processing that allows a website to work
according to its owner's specifications. It concentrates on parts of website design and
development that aren't related to design, such as code and markup writing. The development
of the website includes all simple text pages, including large web applications, social network
applications and e-commerce systems.

The web development hierarchy is as follows:

 Client-side coding
 Server-side coding
 Database technology

The website design and development process

The development of the website includes all simple text pages, including large web
applications, social network applications and e-commerce systems.

The exact process will vary slightly from designer to designer, but the basics are the same.

 Information Gathering
 Planning
 Design
 Development
 Testing and Delivery
 Maintenance

Information gathering
Gathering information is the first step in developing a great website. There are many factors
to consider when designing the look of your website. This is the most critical step, as it
requires a thorough understanding of the business for which it was designed. . It’s about
getting to know you, what your business goals and dreams are, and how the web can help you
achieve them. (securitytrails.com, 2022)

It is critical that your web designer begin by asking a lot of questions to help them understand
your business and your requirements for a website.

10
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
  Purpose - Then what was the purpose of the program?
 Goals - What do you aim to achieve by creating this website?
 Target Audience - Is there a certain set of people who will assist you in reaching your
objectives? It can be helpful to imagine the "perfect" person who will visit your
website. Consider their age, gender, or interests; this will help you pick the ideal
design style for your site later on.
 Content - What kind of information will your site's target audience be seeking?

Planning
Now is the time to create a plan for your website based on the information obtained in step
one. This is the step where a sitemap is created. The sitemap provides a list of all major topic
categories on the site, along with subtopics where applicable. This serves as a guide to what
information will be present on the site and is essential for creating a consistent and easy to
use navigation system. When developing your website, remember to keep the end user in
mind – your customer. After all, these are the people who will discover your service or buy
your products. A good user interface, which is the basis, generates an easy-to-navigate
website. (securitytrails.com, 2022)

Design
It's time to decide what your site should look like based on the information you've gathered
so far. One of the most important variables to consider is the target audience. A site designed
for teenagers will be very different from one designed for a financial institution. It is also
essential to incorporate elements such as your company logo or colors as part of the design
phase of to help establish your company's identification on the website. For your website,
your web designer will produce one or more design prototypes. .This is usually a .jpg
representation of what the final design will look like. You'll often receive your website
templates via email, but some designers go a step further and give you access to a secure part
of their website where consumers can view the work in progress.

In any case, your designer must allow you to visualize your project at all levels of design and
development. The most crucial reason is that it allows you to communicate your site design
preferences. Communication between you and your designer is key during this stage to ensure
the finished website meets your goals and tastes. It is essential that you collaborate closely
with your designer, exchanging ideas until you arrive at the final design of your website.

11
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Development
The development phase is when the website is created. In this phase, your web designer will
use all of the individual graphics from the prototype to create the final, working site.
Typically, this is done by creating the homepage first, followed by a "shell" for the internal
pages. The shell serves as a template for your site's content pages as it includes the basic
navigation framework. Once the shell is complete, your designer will take your content and
place it in the right places on the site.

From a technical perspective, a successful website requires front-end web development

knowledge. This involves producing correct HTML/CSS code that adheres to current web
standards, as well as maximizing usefulness and accessibility for the widest possible
audience. (securitytrails.com, 2022)

Testing and delivery

A better website developer is one who is familiar with current website design and
development standards. HTML and CSS are the main technologies used (cascading style
sheets). As part of the testing process, the designer should ensure that all code written for
your website is validated.

It is time to deploy the site after you have given your web designer final clearance. The
website files are uploaded to your server using an FTP (File Transfer Protocol) application.
Some web designers also provide domain name registration and web hosting services, or can
recommend a host for your site. After these accounts have been created and your website has
been uploaded to the server, it should be tested one more time. This is only a preventive
measure to ensure that all materials have been uploaded correctly and that the site remains
fully operational.

Other last-minute preparations include code validation and SEO (Search Engine
Optimization). This is the process of optimizing your website with features such as titles,
descriptions, and keyword tags. There are numerous Word Press plugins available that
increase the normal Word Press functionality; many of them are directly related to increasing
your website's SEO.

Maintenance
The cost of maintaining your website depends on how often you plan to make changes or
additions to it. Many web designers offer maintenance packages at discounted rates.
Regularly offering new materials or products is a strategy to attract regular visitors to your

12
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
site, such as experts. If you choose to be more hands-on and update your content, a CMS
(Content Management System) like Word Press can be installed on your website. This would
be determined during the planning phase. Your designer will use the Internet software to
create a site directed by the database with a CMS.

A website powered by a CMS allows you to change the website's content regions yourself.
You will be granted access to a back-end administrative area where you will be able to use
an online text editor (similar to a mini version of Microsoft Word). You'll be able to alter old
content this way, or if you're feeling very daring, you can even create new pages and content.
The options are limitless. It's entirely up to you how comfortable you are with updating your
own website. Some people like to have complete control so that they can make changes to
their own websites whenever they want. Others prefer to delegate the website altogether since
they have too many other activities that are more important for them to manage directly.
That's where your web designer comes in again, as they can handle website upkeep for you
one less thing for you to worry about in these hectic times. Other types of maintenance include
regular site backups, WordPress upgrades, new plugin installations, and so on.

Web Designing
The process of building websites is known as web design. It includes a variety of factors, such
as webpage layout, content creation, and visual design. While the phrases "web design" and
"web development" are frequently used interchangeably, web design is a subset of the larger
topic of "web development."

HTML is a markup language that is used to create websites. Web designers create webpages
by utilizing HTML tags to specify the content and metadata of each page. CSS is commonly
used to define the layout and look of items on a webpage (cascading style sheets). As a result,
most websites use a combination of HTML and CSS to specify how each page will look in a
browser. (securitytrails.com, 2022)
Some web designers prefer hand coding pages, but others use a "WYSIWYG" editor. This
type of editor gives a visual interface for customizing the webpage layout. Another popular
method is using a content management system such as WordPress or Joomla.
Graphic design and web design may overlap because graphic designers develop pictures for
usage on the Web. Some graphics tools, such as Adobe Photoshop, even have a "Save for
Web" option to save photos for use on the Internet. HTML and CSS are used to create the
look and feel of a website, but images are developed separately.

13
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Web Publishing

Web publishing is the process of distributing content over the Internet. It involves
constructing and uploading websites, maintaining webpages, and publishing blogs. Text,
photos, videos, and other forms of media may be included in the published content. Three
elements are required to publish information on the web.

 Web development software

 An Internet connection
 A web server.

The software can be a professional web design program like Dreamweaver or a simple web
interface like WordPress. The internet connection is used to upload the content to the web
server. Although large sites may use a dedicated web server, many smaller sites are commonly
hosted on shared servers hosting multiple websites. Most blogs are hosted on public web
servers using a free service like Blogger.
Since web publishing does not require physical resources such as paper and ink, it is almost
free to publish content on the web. Anyone who meets the three requirements mentioned
above can work as a web publisher. In addition, the audience is unlimited as the content
published on the web is accessible to anyone in the world with an internet connection. These
advantages of digital publishing have ushered in a new era of in-person publishing that was
previously unthinkable.

Website Accessing
The browser contacts web servers distributed worldwide in fractions of a second. It then
builds the website from the data provided in the packages. Read on to see how this process
works and what actions must be completed before a webpage is visible to the user.

What is a Protocol?
A protocol is a common set of rules for communicating between electronic devices. Such
regulations include what types of data can be transferred, what commands are used to send
and receive data, and how to confirm data transfers. A protocol can be compared to a spoken
language. Every language has its own set of laws and terminology. When two people speak
the same language, they can converse efficiently. In the same way, if two hardware devices
implement the same protocol, they can communicate with each other regardless of

14
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
manufacturer or type of device. For example, an Apple iPhone can send an email to an
Android device using the normal mail protocol. A common web protocol can be used by a
Windows PC to load a webpage from a Unix-based web server.

Communication Protocol
Communication protocols are formal descriptions of the formats and rules of digital
messages. They are needed in or between computer systems to exchange messages and are
also needed in telecommunications. Communication protocols include authentication, error
detection, correction, and signaling. They can also explain analogue and digital
communication, as well as syntax, semantics and timing. Communication protocols are
implemented in hardware and software. Hundreds of communication systems are used in
analog and digital communication worldwide. Without them there would be no computer
networks.

TCP/IP Protocol
TCP/IP or Transmission Control Protocol/Internet Protocol is a set of communication
protocols used to connect network devices connected to the Internet. TCP/IP can also be used
as a communication protocol in a private network (intranet or extranet).
In the Internet Protocol Suite, the two core protocols perform server-specific tasks. TCP
specifies how applications can establish communication channels over networks. It also
knows how to break a message into smaller packets before sending it across the Internet, and
how to reassemble it in the correct order at the destination address.
IP specifies how each packet should be addressed and forwarded to ensure it reaches its
intended destination. Each gateway computer on the network checks this IP address to
determine where to send the message. (techtarget.com, 2019)

Common TCP/IP protocols are listed below:

 File Transfer Protocol (FTP)
 Hypertext Transfer Protocol (HTTP)
 Hypertext Transfer Protocol Secure (HTTPS)
 Secure Shell (SSH)

15
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
File Transfer Protocol (FTP)
The term File Transfer Protocol (FTP) refers to a process by which files are transferred
between devices over a network. The process works when one party allows another to send
or receive files over the internet. It was originally used as a form of communication between
users. and exchange of information between two physical devices, today it is widely used to
store files in the cloud, which is usually a secure place managed remotely. FTP can be used
by a business or a person to transfer files from a computer system to another or with websites
to load or download files from their servers. (techtarget.com, 2019)
FTP is one of the oldest methods still in use today; began its initial development in 1971.
FTP is often used by a website developer to make changes to a website. Due to the large
number of files to manage, using FTP to manage them is more comfortable and secure. For
example, you can move a web template, add image files, upload specific files for creating
websites, etc. (techtarget.com, 2019)

Figure 01: File Transfer Protocol (FTP) (ipswitch.com,2022)

Hypertext Transfer Protocol (HTTP)

The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and is
used to load web pages using hypertext links. HTTP is an application layer protocol designed
to transfer information between networked devices and runs on top of other layers of the
network protocol stack. A typical flow over HTTP involves a client machine making a request
to a server, which then sends a response message. (techtarget.com, 2019)

16
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
An HTTP method, sometimes called an HTTP verb, specifies the action that the HTTP request
expects from the queried server. For example, two of the most common HTTP methods are
GET and POST. a 'GET' request expects to receive information (usually in the form of a web
site), while a 'POST' request usually indicates that the client is sending information to the web
server (such as form information, for example a name, username and password Posted).

Hypertext Transfer Protocol Secure (HTTPS)

HTTPS is an acronym that stands for Hypertext Transfer protocol Secure and is a protocol
used to secure computer network communication. Secure data transfer over the Internet is
necessary for all businesses to prevent wiretapping and attacks by middlemen. While
technically not being a protocol, Secure Hypertext Transfer is the result of layering the HTTP
on top of the SSL/TLS protocol. When transferring sensitive information like personal data,
social security numbers, or credit card details, a secure connection is preferred.

By ensuring that data is encrypted between the client and the server, transfer of data becomes
secure. A short-term key will be converted into a long-term asymmetric secret key that is
unreadable to anyone attempting to intercept data passed on the internet. The server holds the
certificate of the public key that is used to verify the entity and to ensure the identity of the
organization or person receiving the data sent. (techtarget.com, 2019)

17
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Differences between HTTP and HTTPS
Parameter HTTP HTTPS
Protocol This is a hypertext transfer It operates using HTTP
protocol and operates at because HTTPS does not
TCP/IP level have any separate protocol.
HTTPS uses encrypted
TLS/SSL connection.
Security Since it is less secure, data This is designed to prevent
may be vulnerable to hackers accessing to
hackers. sensitive information.
Port By default, it uses port 80. By default, it uses port 80.
Starts with URLs of HTTP begins with URLs of HTTP begins with
http:// http://
Used for It is good fit for websites that If the website needs to
are designed to consume collect private information
information such as blogs. such as credit card number,
the HTTPS is a secure
protocol.
Scrambling HTTP does not scramble the Before transmission,
transmitted data. That’s why HTTPS the data. It
there’s a higher likelihood descrambles to recover the
that hackers will have access Before transmission,
to transmitted information. HTTPS the data.
Domain Name Validation SSL is not needed for HTTP HTTPS requires a certificate
website of SSL
Domain Name Validation HTTP website is not using Data encryption is used on
encryption. HTTPS websites.
Search Ranking Search rankings are not Search rankings are
improved by HTTP. improved by HTTPS.
Speed Fast Slow
Vulnerability Hackers are vulnerable It is highly secure as the data
is encrypted before being
transmitted over a network.

18
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Secure Shell (SSH)
SSH, or Secure Shell Protocol, is a remote administration protocol that allows users to access,
control, and modify their remote servers over the Internet.
The SSH service was created as a secure replacement for unencrypted Telnet and uses
cryptographic techniques to ensure that all communications to and from the remote server are
encrypted. It provides a mechanism to authenticate a remote user by passing input from the
client to the host and relaying the output to the client.
The following example shows a typical SSH prompt. Any Linux or macOS user can connect
via SSH to their remote server directly from the terminal window. Windows users can take
advantage of SSH clients such as Putty. You can execute shell commands the same as if
you were physically using the remote computer. (ssh.com, 2022)

Figure 02: Secure Shell (SSH) (ipswitch.com,2022)

Server Hardware
Server
A server is a computer designed to process requests and send data to another computer over
the Internet or a local network. Most people know that the word server means that a web
server means a web server where web pages can be accessed over the internet through a client
like a web browser. There are many different types of servers including local servers such as
file servers that store data within an intranet network.(hostinger.com, 2021)

Hardware
In technology, hardware (H/W) refers to the physical components that make up an electronic
device or machine and anything that is physically observable. Includes monitor, memory,
hard drive and processor. Hardware works hand-in-hand with firmware and software to create
a working machine. (hostinger.com, 2021)

19
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Server Hardware
Although servers differ from personal computers, server hardware is not very different from
desktop hardware in several respects. They consist of the same essential elements such as
power supplies, memory and CPU. However, for those who have only looked at desktop
hardware so far, server hardware may seem like a whole different ballgame. In server
hardware, every piece seems to be more advanced than in PCs.
Servers also often use redundant and/or hot-swappable components.There are three types of
server hardware: Towers server, rack server, blade server. (lawinsider.com, 2022)

Operating Systems
An operating system (OS) is a software that handles all of the other application programs in
a computer after being loaded into the machine by a boot program. The operating system is
accessed by application programs through a specified application program interface, which
makes requests for services (API). Users can also interact with the operating system directly
via a user interface, such as a command-line interface (CLI) or a graphical user interface
(GUI).
Computer software and software development benefit greatly from the use of an operating
system. Without an operating system, each program would have to have its own user interface
as well as the extensive code required to handle all of the underlying computer's low-level
functions, such as disk storage, network connections, and so on. Given the wide range of
underlying technology available, this would significantly increase the size of any program
and render software development unfeasible. Many basic operations, such as delivering a
network packet or displaying text on a standard output device, such as a display, can instead
be delegated to system software, which acts as a bridge between applications and hardware.
The system software allows programs to interface with the hardware in a consistent and
repeatable manner without the requirement for the applications to know any specifics about
the hardware. That system software the operating system can handle nearly unlimited number
of apps as long as they all access the same resources and services in the same way. This
significantly decreases the amount of effort and coding necessary to design and debug an
application while also assuring that users can control, configure, and manage system
hardware through a standard and intuitive interface.(geeksforgeeks.org, 2021)

20
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Types of Operating System
1. Batch Operating System
This sort of operating system does not communicate with the computer directly. There is a
worker that collects related jobs and organizes them into batches. Sorting jobs with
comparable requirements is the operator's responsibility. (geeksforgeeks.org, 2021)

Examples of Batch Operating System: - Payroll System, Bank Statements.

2. Time-Sharing Operating Systems

Each task takes some time to complete, so everything is running smoothly. When using a
single machine, each user gets CPU time. Multitasking Systems is a term used to describe
these systems. The job might come from a single person or several people. Quantum refers to
the amount of time it takes to complete each job. When the interval timer expires, the OS
moves on to the next job.
Examples: - Multics, UNIX.

3. Distributed Operating System

These sorts of operating systems are a new advancement in computer technology that has
gained widespread acceptance throughout the world, and at a rapid rate. Various independent
networked computers can interact with one another over a common communication network.
Each independent system has its own CPU and memory. These are referred to as loosely
connected or dispersed systems. These systems' processors come in a variety of sizes and
functions. The fundamental benefit of using these operating systems is that one user may
always access files or applications that are not physically present on their system, but are on
other systems linked to that network, i.e. remote access is enabled inside the devices
connected to that network. (geeksforgeeks.org, 2021)
Examples: - LOCUS

4. Network Operating System

Files, users, groups, security, apps, and other networking operations may all be controlled
using these systems, which operate on a server. Files, printers, security, apps, and other
networking services may all be shared via a small private network using these operating
systems. The key feature of Network Operating Systems is that all users are aware of the

21
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
underlying configuration of other network users, their particular connections, and so on,
which is why these computers are referred to as closely linked systems. The key characteristic
of Network Operating Systems is that all users are fully aware of all other network users'
fundamental configurations, individual connections, and so on (need to compare with the
highlight once agin).
Examples: - Microsoft Windows Server 2003, Microsoft Windows 2008, UNIX, Linux, Mac
OS X.

5. Real-Time Operating System

These operating systems allow for real-time operation of the systems. Processing and reacting
to inputs takes a relatively short amount of time. The term "response time" refers to the time
period between two events. When time is of the essence, such as in missile systems, air traffic
control systems, robotics, and so on, real-time systems are utilized. (geeksforgeeks.org, 2021)
Examples: - Scientific experiments, medical imaging systems, robots.

Web Server Software

A web server is a computer that hosts webpages. It's a computer application that delivers
requested web pages. The primary goal of a web server is to store, process, and distribute web
pages to users. This intercommunication is enabled via the Hypertext Transfer Protocol
(HTTP). The majority of these web pages include static material, such as HTML documents,
photos, style sheets, tests, and so on. For emailing, file transmission, and storage, a web server
supports SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol).
The primary function of a web server is to show the website's content. An Intranet Server is
a web server that is not publicly accessible and is only used internally. When someone
requests a website by typing the URL or web address (such as www.google.com) into the
address bar of a web browser, the browser sends a request to the Web for the matching web
page for that address. (geeksforgeeks.org, 2021)

Types of Web Server Software

 Apache HTTP Server
The Apache HTTP Server project's goal is to create and maintain an open-source HTTP server
for current operating systems like UNIX and Windows. The goal of this project is to create a
server that synchronizes HTTP services with existing HTTP requirements while being secure,
efficient, and extensible. Since April 1996, the Apache HTTP Server ("httpd") has been the

22
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
most popular web server on the Internet, having been established in 1995. In February 2015,
it celebrated its 20th anniversary as a project. (apache.org, 2022)

Figure 03: Apache HTTP Server

 Internet Information Services

Internet Information Server (IIS) is a popular web server from Microsoft that hosts and serves
ASP.NET and ASP Web applications for Internet-based services. A web server's role is to
respond to user queries. When a client sends a request to IIS, the request is taken from the
users, processed, and returned to the users. IIS (Internet Information Server) is a set of web-
building and management tools, search engines, and web-based applications that connect to
SQL Server databases. (hugedomains.com, 2022)

Figure 04: Internet Information Services

 LIGHTTPD
Security, speed, compliance, and flexibility are all features of lighttpd (pronounced light), a
webserver that swiftly redefines the efficiency of a webserver by being created and tuned for
high-performance situations. With a small memory footprint, effective CPU load
management, and an extensive feature set (FastCGI, SCGI, Auth, OutputCompression, URL-

23
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Rewriting, and more), it outperforms competing web servers. Lightpd is the ideal answer for
any server experiencing load problems. (hugedomains.com, 2022)

Figure 05: LIGHTTPD

24
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
1.2 Identifry 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.

DNS (Domain Name System)

The internet and the World Wide Web are unexplored territory for accessing and exchanging
computer-based data and information. One of the most basic technologies on the internet is
the Domain Name System, or DNS. Many people assume "DNS" stands for "Domain Name
Server," but in fact it stands for "Domain Name System." DNS is a standard protocol for how
computers exchange data on the internet and many private networks, and it is part of the
TCP/IP protocol stack. (techtarget.com, 2019)
DNS is the internet's equivalent of a phone book. Computers and other network devices on
the internet utilize IP addresses to route requests to the website you're trying to reach. This is
comparable to dialing a phone number to communicate with the person you want to reach.
However, due to DNS, you no longer need to keep track of your own IP address book. You
connect instead through a domain name server, also known as a DNS server or a name server,
which manages a massive database that maps domain names to IP addresses.

The types of DNS

Recursive solvers, root nameservers, TLD nameservers, and authoritative nameservers are
the four DNS servers. During a regular DNS lookup, these four DNS servers work together
to provide the client with the IP address for a selected domain (the client is typically a stub
resolver-a simple resolver built into an operating system).

DNS Recursive Resolver

A recursive resolver is the initial stop in a DNS query (also known as a DNS recursor). The
recursive resolver is a middleman between a client and a DNS nameserver. After receiving a
DNS query from a web client, a recursive resolver will either respond with cached data or
send a request to a root nameserver, followed by another request to a TLD nameserver, and
finally a request to an authoritative nameserver. After receiving a response from the
authoritative nameserver, the recursive resolver will deliver a response to the client providing
the requested IP address. During this procedure, the recursive resolver will store the
information acquired from the authoritative name servers. When a client requests the IP

25
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
address of a domain name that has recently been requested by another client, the resolver can
avoid communicating with the nameservers by simply providing the requested record from
its cache to the client. (techtarget.com, 2019)

DNS Root Nameserver

The 13 DNS root nameservers are known by all recursive resolvers and are the initial stop in
a recursive resolver's search for DNS records. When a recursive resolver queries a root server
with a domain name, the root name server replies by referring the recursive resolver to a TLD
nameserver depending on the domain extension (.com, .net, .org, etc.). The root nameservers
are managed by the non-profit Internet Corporation for Assigned Names and Numbers
(ICANN). It's important to note that just because there are 13 root nameservers doesn't mean
the root nameserver system is made up of only 13 machines. There are 13 different types of
root nameservers, but each one has several copies throughout the world that employ Any cast
routing to offer fast replies. There would be 632 distinct servers if all the root name server
instances were joined together. (techtarget.com, 2019)

TLD Nameserver
A TLD nameserver keeps track of all domain names that share a common domain extension,
such as.com,.NET, or anything after the last dot in a URL. The information for each website
ending in '.com' is stored on a.com TLD nameserver. The recursive resolver would ask
the.com TLD nameserver after receiving a response from a root nameserver referring to the
authoritative nameserver for that domain. The TLD nameservers are managed by the Internet
Assigned Numbers Authority (IANA), a division of ICANN. The Internet Assigned Numbers
Authority (IANA) divides TLD servers into two categories: Non-country specific domains
are known as generic top-level domains, and some of the most well-known generic TLDs
include.com, .org, .NET, .Edu, and .Gov. Top-level domains with country codes: These are a
collection of domains that are particular to a nation or state. Some examples
include.uk,.us,.ru, and.jp. There is also a third category for infrastructure domains, however
it is practically never used.

Authoritative Nameserver
When a recursive resolver receives a response from a TLD nameserver, the resolver is
directed to an authoritative nameserver. The authoritative nameserver is generally the last
stop on the way to a resolver's IP address. The authoritative nameserver gives precise

26
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
information about the domain name it serves (for example, google.com) and can supply a
recursive resolver with the IP address of that server included in the DNS A record.
How domain names are organized and managed

Figure 06: Authoritative Nameserver

A domain name is the name of a website. The address that permits Internet users to visit a
website is known as a domain name. A domain name is used to locate and identify computers.
IP addresses are a series of numbers used by computers. Number sequences are tough for
humans to recall. Instead of utilizing IP addresses, domain names were created and are now
used to identify entities on the Internet. Any combination of letters and numbers may be used
as a domain name, and it can be combined with different domain name extensions such
as .com, .net, and others. (techtarget.com, 2019)

Search Engine
A search engine is software that searches a database of information based on the user's query
and is available over the Internet. The engine generates a list of the most relevant results for
the user's search. On the Internet nowadays, there are several search engines, each with its
unique set of capabilities and features. Archie is credited with being the first search engine
ever created, while Veronica is credited with being the first text-based search engine. Google
is the most well-known and popular search engine nowadays. Other major search engines
include AOL, Asl.com, Baidu, Bing, and Yahoo.(computerhope.com, 2022)

27
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 Figure 07: Search Engine

How do search engines work?

There are three main primary functions of search engines:
 Crawl: Search the Internet for content, browse the code/content for each URL they
find.
 Index: The content found during the crawling process is stored and organized. Once
a page is in the index, the result for relevant queries will be displayed in the running.
 Rank: Provide the content pieces that best answer the query of a searcher, which
means that the most relevant to the least relevant results are ordered.

Explanations of the three functions are further discovered below:

Search Engine Crawling

Figure 08: Search Engine Crawling

28
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Crawling is the process of search engines sending out a team of robots to find fresh and
updated material (known as crawlers or spiders). The type of information can vary it could
be a webpage, a picture, a video, a PDF, or something else entirely but regardless of the
format, the material is found through links. Googlebot is tasked with retrieving a few online
pages and then following the links to discover new URLs on those sites. The crawler will
discover new material by following this link route, and it will be added to its Caffeine index
a massive database of newly found URLs to be retrieved later when a searcher is seeking for
information that matches the content on that URL. (computerhope.com, 2022)

Search Engine Index

The process of gathering, processing, and storing data from a search engine for later use is
known as search engine indexing. The search engine's real index is the location where all of
the data obtained by the search engine is stored. It is the search engine's index that gives the
search query results and pages stored in the search engine index that appear on the search
engine's results page. Without a search engine index, launching a search query will take a
long time and effort because the search engine will have to search not only any web page or
piece of data relevant to the keyword used in the search query, but also every other piece of
information it has access to to ensure that nothing is missing. Search engine spiders, also
known as search engine crawlers, are the tools that keep the search engine index up to date
and spam-free. (computerhope.com, 2022)

Search Engine Ranking

A site's search engine ranking is the position at which it appears in the results of a search
engine query. Each page of search results typically contains ten websites, but they may also
include local listings, videos, and photos. The higher ranking correlates to a lower number
(#1), while the lower ranking corresponds to a higher number (#10) in the search results.
Many website owners invest in SEO strategies in order to enhance their search engine rating
and bring their site closer to the top of the results. Websites that are listed higher typically
receive a larger percentage of click-throughs and attract more visitors than those that are
placed lower.
A multitude of variables impact search engine results, including the site's age, the quality of
its link portfolio, page relevancy, social signals, and competition intensity, among others.
Google says that it utilizes 200 elements to determine a site's search engine ranking, many of
which are beyond the website owner's control. A white hat SEO effort, for example, is

29
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
intended to have a positive influence on these parameters and increase a website's overall
search engine rating. (computerhope.com, 2022)

Search Engine Optimization (SEO)

The art and science of boosting a page's ranking in search engines like Google is known as
SEO, or Search Engine Optimization. Because search is one of the most significant methods
for people to discover content online, higher rankings in search engines may lead to greater
traffic to a website. Along with ordinary results, or what search vendors refer to as "organic
search results," the results page also includes paid ads for Google and other search engines at
the top of the page. SEO traffic is sometimes referred to as "organic search traffic" to
distinguish it from sponsored search traffic. Search engine marketing (SEM) or pay-per-click
(PPC) are other terms for paid search. Search engine optimization is a crucial part of online
marketing since search is one of the most common ways consumers use the internet.

Figure 09: Search Engine Optimization (SEO)

Search Engine Optimization works

Search engines like Google use an algorithm or set of rules to choose which sites to show for
every given query. When determining the ranks of separate SRPs, these algorithms have
gotten quite sophisticated, with hundreds, if not thousands, of different ranking criteria being
employed. Search engines, on the other hand, employ three key factors to determine the
quality of a site and how it should be ranked. (computerhope.com, 2022)

30
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Links- Search engines like Google use an algorithm or set of rules to choose which sites to
show for every given query. When determining the ranks of separate SRPs, these algorithms
have gotten quite sophisticated, with hundreds, if not thousands, of different ranking criteria
being employed. Search engines, on the other hand, employ three key factors to determine
the quality of a site and how it should be ranked.

Content- In addition to links, search engines frequently evaluate a web page's content to
determine if it is relevant to a particular search query. The development of content based on
the keywords that search engine users are looking for is an important part of SEO.

Page Structure- Page structure is the third essential component of SEO. Because web pages
are written in HTML, a search engine's capacity to analyze a page may be influenced by the
structure of the HTML code. Site owners may improve their SEO by include significant
keywords in the title, URL, and headers of their pages, as well as making sure their site is
crawlable.
Search engine optimization entails tweaking each of these fundamental components of search
engine algorithms in order to rank higher in search results.

Search Engine Optimization Technique

Understanding how search engines function is only the beginning of enhancing a site's search
rankings. To improve a site's ranking, several SEO tactics are used to optimize the search site.

Keyword Research- This strategy, which involves looking at which keywords a site already
ranks for, which keywords rivals rank for, and what additional phrases potential buyers are
looking for, is generally the starting point for SEO. Identifying the phrases that people use in
Google Search and other search engines might help you figure out how to improve your
existing content and develop new material.

Content Marketing- Once viable keywords have been found, content marketing may begin.
This might be for the purpose of updating current material or creating entirely new stuff.
Because Google and other search engines value high-quality content, it's critical to analyze
what's currently out there and create interesting material that gives a great user experience
and has a chance to score highly in search engine results. On social media, good material is
also more likely to be shared and linked to. (computerhope.com, 2022)

31
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Link Building- Obtaining high-quality backlinks is one of the key levers that SEOs have
since links from other websites (referred to as "backlinks" in SEO parlance) are one of
Google's and other major search engines' core ranking criteria. This might include promoting
good content, reaching out to other websites and creating webmaster relationships, submitting
websites to relevant online directories, and forcing other websites to link to you.

On-Page Optimization- Aside from off-page factors like links, upgrading the page's actual
structure may have significant SEO effects and is a component that the webmaster has
complete control over. On-page SEO approaches include optimizing a page URL for keyword
inclusion, updating the page title tag with the search phrase, and using the Alt property for
picture description. Updating a page's meta tags (such as the meta description tag) might also
help these elements have no direct influence on search rankings, but they can boost the click
rate from SERPs. (computerhope.com, 2022)

Site Architecture Optimization- Internal links (links on one's own website) usually play a
key part in SEO; external links aren't the only thing that matters. It aids a search engine
optimizer in improving a site's SEO by ensuring that important sites are linked to and that
appropriate anchor text is utilized in those links to boost a page's relevance for certain
searches. For bigger sites, creating and site mapping XML might be a helpful approach to
assist search engines identify and crawl all of the pages on the site.

Semantic Markup- Another SEO approach utilized by SEO specialists is to improve the
website's semantic markup. Semantic markup (such as Schema.org) is used to express the
meaning behind a website's content, such as identifying who wrote a piece of content or
identifying the topic and kind of information on a page. On the search results page, semantic
markup may assist show rich snippets like supplementary text, review ratings, and even
photos. Rich snippets in the SERPs have little effect on search ranks, but they can boost search
CTP, resulting in more organic traffic. (computerhope.com, 2022)

Provide evidence-based justification for using search engine optimization to improve a site's
index value and rank.

32
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 1. Publish Relevant Content
Quality content is the most important factor in determining your search engine ranking, and
there is no substitute for outstanding content. Quality content created exclusively for your
target audience increases site traffic, which improves the authority and relevance of your site.

Keywords
For each page of your website, determine and target a single keyword phrase.

Multiple Keyword Phrases

It's difficult to get search engine results for many keyword phrases on a single web page
unless the terms are highly similar. Both "biomedical engineering jobs" and "biomedical
engineering careers" may be found on the same page. It's unlikely that a ranking for "student
affairs" and "student dean" or "gender discrimination" and "violence reporting procedures"
will exist on a single page. If you want your website to rank for many keyword phrases, you'll
need to construct a different page for each term you want to target.

Placing Keywords
Consider the following questions once you've decided on a keyword phrase for a certain page:
☛ Can I use some or all of the keyword phrase in the URL page (using keywords in
folders)?
☛ Can I use all or part of the keyword phrase in the title page?
☛ Can I use some or all of the keyword phrase in the headings and subheadings of pages?

Answering yes to such queries can improve your search engine ranking. Be natural and easy
to use. You don't want the word "engineering" to appear three times or more in the URL, nor
do you want the term "Northern Lights" to appear on the title page and in every heading.

Content
Along with the page URL, title, and headers, content has a big influence on search engine
results. Repeat your keyword phrase two to four times throughout the text, once or twice in
the opening and end paragraphs. Don't forget to use bold, italics, header tags (especially an
H1), and other emphasis tags to draw attention to those keyword phrases but don't go crazy.
You want to read your own language and writing style, of course.

33
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 2. Update Your Content Regularly
You've undoubtedly noticed that we have strong feelings regarding content. Maintaining new
material is one of the biggest markers of a site's relevancy, so make sure to keep it up to date.
Audit your material on a regular basis (for example, every semester) and make changes as
needed.
3. Metadata
Every page on your website has an area for putting metadata, or information about the content
of the page, between the tags. This data will have been pre-populated for you if you have a
CMS site that was created by the UMC web team. However, as your site evolves, it's critical
that you analyze and update information. (computerhope.com, 2022)

Title Metadata
The page titles that appear at the top of a browser window and as the headline in search engine
results are both determined by title metadata. It's the most crucial info for your page. For
those with a CMS website, the web team has built an automatic system that generates the
meta title for each pages depending on the page title. This emphasizes the necessity of
selecting keyword-rich page names that are consistent throughout.

Description Metadata
The textual description that a browser may utilize when delivering your search page is known
as description metadata. Consider it your site's window display a succinct and enticing
summary of what's inside with the goal of getting folks to come in. A excellent Meta
description usually consists of two whole phrases. Although search engines may not always
use the Meta description, it is crucial to provide them the opportunity.

Keyword Metadata
When calculating search engine ranks, metadata for terms is rarely used. However, because
you should already be familiar with your keyword phrases, using them in your keyword will
have no effect on metadata. There should be a range of expressions presented. In general, aim
to confine it to 3-7 sentences, each of which has 1-4 words. "Computer science degree" is a
wonderful illustration of this. (computerhope.com, 2022)

34
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 4. Have a link-worthy site
Within the content, focus on building useful links. Instead of links like "click here," consider
typing out the destination name. "Click here" has no search engine value beyond the linked
URL, however "Michigan Tech Enterprise Program" includes rich keywords and will help
your search engine and the page you link to rank higher. When connecting keywords, always
use descriptive links it not only enhances search engine performance, but it also provides
value to your readers, particularly those with impairments or who use screen readers.

5. Use alt tags

To explain your visual and video files, always use alt tags, or alternate text descriptions. They
help search engines find your critical page, which is especially useful for those who use text-
only browsers or screen readers. (computerhope.com, 2022)

35
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
How Website Performance Impacts Conversion Rates and SEO
The page speed of a website is important. We can have a beautifully designed page with a
clear message for our audience, but if they can't get there in a fair amount of time (2 seconds
or less), the site will be abandoned before they see anything or take any action.

Web Performance and Conversion Rates

According to studies, the longer your site takes to load, the less conversions your company
will get through its principal touchpoint website. Long page load times are a crucial factor for
customer experience, whether an e-commerce firm selling items, a corporation attempting to
gather subscribers, or an organization trying to communicate vital information (CX). When
it comes to site traffic, individuals will not waste their time waiting when a more frictionless
user experience is to seek for another similar service, product, or information. Here's an
example of how a slight adjustment in page load time has a detrimental influence on
conversion rates and customer satisfaction.(unincorporated.com, 2022)

Above is an infographic from Web Performance Today that illustrates the impact of web
performance on conversion rates for Walmart.com.

36
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Web Performance Across All Devices
Web speed must be considered across all devices in addition to desktop experiences. Many
web development businesses are adopting a mobile-first strategy now that they recognize that
mobile users will make up the bulk of their clients' audience. When searching on a mobile
device, users used to be more forgiving of poor page loading times, but thanks to mobile
services and advancements in web technology, this is no longer an acceptable user experience.

This graph from Telegraph shows the percentage of people who use mobile and tablet devices
against those who use desktop computers. In 2016, mobile/tablet usage overtook desktop
usage for the first time. (unincorporated.com, 2022)

Web performance and Search Ranking

Slow website speed is not only bad for conversion rates, but it may also affect your site's SEO
performance. Since 2010, Google has used the time it takes for a webpage to load as another
element in determining search rankings.

"A poor page speed means search engines may crawl fewer pages using their assigned crawl
budget, and this could severely effect your indexation," according to Moz, a well-known
leader in search engine optimization tools.

37
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
5 Steps to Improve your Website Speed

Choose good website hosting

To put it another way, you get what you pay for. If your site is built on a powerful platform
like WordPress or Drupal, be sure you have enough hosting (VPS or Dedicated) to support it.

Pay attention to the libraries

There are certain large JavaScript libraries that might create a lot of lag on your site. Have a
developer make sure that when you navigate to a webpage, libraries are postponed rather
being downloaded right away. (unincorporated.com, 2022)

Minify your CSS/JavaScript

Use Google PageSpeed Tools to help minify CSS and Javascript.

Leverage Browser Caching when appropriate

If you have material on your site that does not change on a daily basis, you should work with
a developer to ensure that your webpage is cached as needed. This implies that the visitor will
not have to download all of the assets on the page every time they visit your site.

Enable compression
GZIP compression for HTTP requests is supported by all browsers. This implies that the
transmitted files are compressed by up to 90% before being provided to you. Images can be
compressed and optimized to fit into their respective spaces. It's pointless to provide a 2 MB
image that will only be used as a thumbnail! (unincorporated.com, 2022)

38
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
1.3 Identify and explain the common web development technologies and frameworks.
Explain the tools and techniques chosen to develop the above web application and justify
your choice by providing valid evidences.

What is Web Development?

The term "web development" refers to the process of designing, building, and maintaining a
website. It includes web design, web publishing, web development, and database
management. Although the terms "web developer" and "web designer" are frequently used
interchangeably, they do not have the same meaning. Technically, a web designer creates
website interfaces using solely HTML and CSS. Although web scripts written in languages
such as PHP and ASP are also viable, a web developer may be involved in the planning of a
website. A web developer may also assist in the management and updating of a database
utilized by a dynamic website.
Web development encompasses the creation of a wide range of web content. Hand-coding
web pages with a text editor, constructing a website with Dreamweaver, and updating a blog
with a blogging website are all examples. Content management systems like WordPress,
Drupal, and Joomla have been increasingly popular as online building tools in recent years.
Using a web-based interface, these tools make it simple for anybody to create and modify
their own website.

Web Development Technologies and Frameworks

Web Development Technologies
PHP
PHP's Hypertext Preprocessor is a server-side scripting language for building fast, dynamic,
and interactive websites. This language and its numerous feature-rich and popular
frameworks, like as Symfony, Laravel, Cake PHP, and others, are used to power more than
80% of all websites in the digital world. It has a low learning curve and can readily incorporate
into HTML code without the use of an additional IDE.

JavaScript
Due to its huge popularity, which stems from its online relevance, increasing empire, and
beginner-friendly nature, JavaScript is seen as the future of web development. It may be used
for both client-side and server-side applications.

39
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Ruby
This high-level programming language, like PHP, can be readily incorporated in HTML. It's
an object-oriented programming language with essential features including better security
code, flexible syntax, and a debugger that helps web developers build high-quality online
apps.

Java
Java is a platform-independent programming language used to create Web and desktop
applications. It is a pure object-oriented language with rigorous standards and type that is
presently used to construct mobile applications in Android.

ASP.NET
ASP.NET was created by Microsoft to allow programmers to create and deploy fully
functional, dynamic, and scalable online applications in a managed environment fast and
easily. The most recent upgrade is ASP.NET Core 1.1, which is the quickest of all current
versions.

Web Development Frameworks

Angular
Angular is the greatest framework for online apps, and it is unquestionably the most popular
of Google's developer tools. Angular is a fantastic alternative for large projects since it
supports Typescript. It requires minimal development time and provides good performance
because to features like two-way binding and dependency injection.

Ember
Ember is a JavaScript web development framework that is well-known and well-established.
Ember's unique features are its comprehensive organizational version, management system,
and simultaneous support for both new and ancient technologies.

Django
Around 12,000 known web projects have been developed with Django. Though it was first
released in 2005, it is still considered one of the best website building frameworks owing to
its current approach to problem-solving and continuous improvement. Django is the most

40
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
extensively used web application framework based on Python, which is one of the most
widely used programming languages in the world.

Ruby on Rails
The Ruby on Rails framework (RoR), created in the Ruby programming language, is now
used by over 826,000 online websites. This web framework offers a wide range of
applications, including resolving complex development difficulties. RoR provides a wealth
of tools and libraries that help developers save time.

Express.js
Express.js, a framework for developing Node.js API and web apps, is built on the principals
of speed and simplicity. It is one of several open-source frameworks that provides a huge
number of out-of-the-box resources and allows for the creation of various solutions with just
a few lines of code.

Vue.js
is a new web framework that several top web development firms in the United States are
using. Because it gives tremendous benefits with no delay or difficulties, its popularity is fast
growing. It solves issues rapidly due to its basic nature. Many people are afraid to invest in
Vue.JS at first, but after reading its documentation, you will find it to be a powerful web
development framework.

Symphony
is a well-known web development framework that is also popular among PHP programmers.
It enables for the production of complicated web-based applications while reducing
development time. Symfony is known for its stability, speed, and flexibility, as well as the
ability to reuse code. It also creates high-performance programs with less memory use.

Why a web application is suitable for the given scenario

The major goal of this project is to create an online hospital management system. The concept
of creating an online web application has several advantages. Instead of visiting the hospital,
patients may quickly check whether appointments are available. If students need to change
any information, such as their password or address, they may do it using the online
application, saving time. If the patient is required to pay a charge to the hospital, an online

41
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
payment option could be added to the online web application so that the student may pay
without having to visit the hospital.

How web application work

Web applications do not require downloading because they are accessed through the internet.
Users can use a web browser such as Google Chrome, Mozilla Firefox, or Safari to view a
web application. To work, a web app needs a web server, an application server, and a
database. Client queries are handled by web servers, while the application server performs
the required activity. Any information that is necessary can be stored in a database.

Web apps often have short development cycles and may be produced by small development
teams. JavaScript, HTML5, and Cascading Style Sheets are used to create the bulk of Web
applications (CSS). These languages are frequently used in client-side programming to help
in the creation of an application's front-end. The scripts that will be utilized by a Web app are
generated using server-side programming. Python, Java, and Ruby are commonly used
server-side programming languages.

Benefits
Web apps offer a wide range of applications, and with those applications come a slew of
potential advantages. The following are some of the most prevalent advantages of Web apps:
• Allowing multiple users access to the same version of an application.
• Web apps don’t need to be installed.
• Web apps can be accessed through various platforms such as a desktop, laptop, or
mobile.
• Can be accessed through multiple browsers

Web application techniques

Internet of Things (IoT) is dominating
In recent years, the Internet of Things movement looks to have accomplished its goal.
Ordinary goods may now be controlled via smartphone applications and other online portals
thanks to the introduction of internet-related capabilities in things such as heat system sensors
and other items. Because IoT is becoming more widespread, web developers must learn how
to construct applications that display device data. (smashingmagazine.com, 2009)

42
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Rails 5 in action – a powerful web development tool
Rails 5, like Angular JS, was released in the middle of 2016 and has since dominated the
online development market. It offers developers tantalizing advantages that have the potential
to revolutionise web development. API-only apps are now simple to construct, and their
interaction with JavaScript frameworks, as well as turbo links 5 and actionable, are all
appealing features.

Replacement of static images

On certain websites, motion UI has taken the role of static images. Nobody likes to think
about two-dimensional web sites since they're tedious and, let's face it, outdated. Motion UI
provides an animation queuing approach and CSS patterns that work with all JavaScript
animation libraries in this day and age of animations, videos, and GIFs. To give their websites
more life, web developers are increasingly developing high-quality animations and native
short movies. (smashingmagazine.com, 2009)

Conversational UI is on the run

Conversation with the audience makes it simpler to develop an interactive relationship
between the company and its consumers. The job of a web developer is to make sure that
communication is efficient, pleasant, and productive. The conversational UI method can help
web developers achieve this. On a variety of websites, conversational pop-ups and chat
windows have begun to surface. Businesses will focus on enhancing their communication
with clients and consumers this year.

AI determined web creation

This is a word that many specialists come across as a professional developer. Because of the
availability of required tools and instructions, AI creation has become easier. Web developers
may utilize AI to construct websites in a creative way. A web designer will next take care of
branding, content, layout, algorithms, and color palette to create a visually pleasing website.
Make the most of it by putting it to the best possible use. (smashingmagazine.com, 2009)

Evolution of Angular
Due to its recent debut, Angular JS was the center of attention in 2016, and it is predicted to
continue to steal the show for developers in 2017. This is as a result of the most recent Angular

43
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
upgrades. Because everyone is aware of the six-monthly program upgrades, developers
should keep in touch to ensure that their systems are updated and functional.

Web application tools

AngularJS
AngularJS can help you broaden your HTML vocabulary. HTML is good for static pages, but
it's not good for dynamic views. AngularJS will give you with an expressive, legible, and fast
programming environment. It comes with a suite of tools that will help you build the
framework for your application. This toolkit may be used with other libraries and is
completely extendable. Based on your development technique, you can update or replace the
functionality.
Features:
• AngularJS provides you the features of Data Binding, Controller, and Plain
JavaScript. Data binding will eliminate DOM manipulation.
• Directives, Reusable Components, and Localization are the important features that
AngularJS provides for creating Components.
• It provides the features of Deep Linking, Form Validation, and Server Communication
for Navigation, Forms, and Back ends.
• It also provides built-in Testability.

Chrome Dev Tools

Chrome comes with a set of web development tools. These tools are included in Google
Chrome. It allows you to see and alter a page's DOM as well as its Style. You can read
messages, execute and debug JavaScript in the Console, change websites on the fly, rapidly
discover issues, and optimize website speed using Chrome Dev Tools.

Features:
• You can inspect Network Activity with Chrome Dev Tools.
• With performance panel functionalities you will be able to optimize speed, Analyze
Runtime performance, and Diagnose forced synchronous layouts, etc.
• It has various functionalities for Security panels like understanding Security Issues
and for Application panel, Memory panel, Network panel, Sources panel, Console
panel, Elements panel, and the Device mode.

44
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Sass
Sass is the most well-known and trustworthy CSS extension language. Variables, nested rules,
mixing, and functions can all be used. Sass can let you share design between projects as well
as inside them.
Features:
• You will be able to organize large Stylesheets.
• Sass supports multiple inheritances.
• It has features of Nesting, Variables, Loops, Arguments, etc.
• It is compatible with CSS.
• Sass has a large community.

Grunt
Grunt is a task runner for JavaScript that may be used to automate jobs. It will handle the
majority of repetitive activities, such as magnification, compilation, and unit testing.
Features:
• It provides various plugins.
• Grunt will let you automate almost anything using minimum efforts.
• You can also create your own Grunt plugin to Npm.
• It is easy to install.

CodePen
CodePen is an online tool that allows you to create and share front-end development designs.
Because CodePen provides all of the IDE's features in the browser, you may use it to build
the whole project.

Features:
• It provides a customizable editor.
• CodePen will let you keep your pens private.
• It will allow you to drag-and-drop images, CSS, JSON files, SVGS, Media files, etc.
• It has a collaboration mode that will allow multiple people to write and edit code in a
pen at the same time.

45
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Framework and public web development technologies have both good and bad effects on web
design, functionality and management. We discuss them below. We will first focus on the
good effects here.
For those with a non-technical background, a framework is a collection of libraries and tools
that perform common tasks in web development. Its goal is to make typical tasks in web
development easier. For a developer, choosing the right framework is critical since it saves
time and effort while developing an app. The majority of apps have a similar set of functions,
such as managing session data validation, and web frameworks protect a developer from
having to rewrite the same code every time a web app is created.
The goal of a framework is to allow designers and developers to concentrate on creating
unique features for their web-based projects rather than reinventing the wheel through code.
Framework is designed to help you improve the speed and efficiency of your web app
development project. Templates, session management, and database access libraries are just
a few of the exciting features available. You may choose from a wide choice of frameworks
available on the market based on your needs and tasks. Each framework may provide you a
wide range of web app functionalities, resulting in a less error-prone program. In a nutshell,
a framework assists in the prototype, design, and implementation stages of the app
development lifecycle, as well as the continuing maintenance and enhancement of a web
application. (cuelogic.com, 2002)

But, how web frameworks are useful?

Actually, web frameworks are really useful, and they assist web developers in a variety of
ways by providing various tasks and features. The following are some examples of how
frameworks are beneficial: (cuelogic.com, 2002)

Saves time: The biggest benefit of a framework is that it saves time and effort while designing
an app because the developer doesn't have to deal about data sanitization, session
management, error handling, or authentication logic. The framework takes care of the
majority of these functions. It eliminates brain scratching and allows developers to begin
developing code for an application right immediately rather than wasting time on repeated
coding. It boosts productivity by double the development process.

Flexibility and highly customizable: If you are a MySQL user and have been handed a
postgresSQL database to utilize for your project, I'm sure you would have scratched your

46
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
head trying to develop the web app from scratch, but the benefit of frameworks allows you to
avoid wasting time learning things that aren't actually important. With a few adjustments, you
can move your software from one platform to another. Add-ons, themes, plugins, and widgets
are all terms for things that arise inside framework communities and allow you to customize
your application even more quickly. (cuelogic.com, 2002)

Easy deployment and maintenance: A framework-based program may be deployed as a

web app with similar capabilities as a Windows application. You can also support a
multilingual setting. Users may customise framework applications with native Windows
applications by rearranging them in a variety of ways to best match the way they operate.
Maintenance is simplified since the program uses an uniform coding methodology that makes
the code easier to comprehend and maintain.

We will sceond focus on the bad impact here.

Limitations: They are all restricted in some way, from coding paradigms to database designs
and everything in between. A good way to work around this is to see what the framework is
being used for by other developers in the community. (cuelogic.com, 2002)

Performance: It is a factor, but it did not exist before and have relevance today. Application
is loaded through JavaScript, using a framework as the tool for building that application.
Whereas you might not feel the impact of loading a 75kb compressed-framework js file on
your PC (with high speeds), this js file will definitely impact mobile users.

Cost: As a result, it can be more costly to hire reliable framework developers than reliable
CMS developers. In my experience, the average project built with a framework is more
expensive than a similar project built with a CMS.

Steep learning curve: Most frameworks can be very hard to study and more difficult to be a
master. You would say that even with experience, at least 3-6 months will be needed to
become confident using any framework. (cuelogic.com, 2002)

47
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
LO2 Categorise website technologies, tools and software used to develop websites.

2.1 Considering the requirments 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.

Front-end
The term "front-end" relates to the development of web pages and user interfaces for web
applications. When you explore webpages, online apps, or mobile apps, it is responsible for
the structure, appearance, behavior, and animation of everything you see on the screen. The
three essential technologies that all modern front-end web developers aspire to understand
are HTML5, CSS, and JavaScript.(glossarytech.com, 2022)
The building of a website's graphical user interface using HTML, CSS, and JavaScript so that
users can view and interact with it is known as front-end web development.

Front-end Technologies
HTML, CSS, and JavaScript are the most common front-end technologies. The following is
a quick description of each technology:

HTML
The initial layer of each website is HTML, which provides a wireframe code version. All CSS
styles and JavaScript bells & whistles are included in these wireframes. Hypertext Markup
Language is the abbreviation for Hypertext Markup Language.
The most essential part of the name is the markup portion, because markups are the formal
term for HTML components, often known as HTML tags. HTML is the markup that forms
the essential elements of a webpage. It's crucial to keep in mind that HTML isn't very smart.
It does not make judgments or collect data on its own. This only creates scaffolding for the
web pages. (glossarytech.com, 2022)

CSS
Cascading Style Sheets, or CSS, is what gives visual appeal to the HTML and draws users.
Simply put, style sheets dictate that HTML elements are presented on a page. CSS, with a
bunch of Times New Roman texts and blue hyperlinks, does not make it look like a white

48
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
background. Ever tried loading Amazon on a bad day and seeing nothing but a white page
with a huge list of black texts, some blue links and nothing else? That’s loading without styles
from Amazon. Styles are what beautiful designs are transitioning to a site.

JavaScript
JavaScript is a runtime language for web browsers. When you open a web page, it will load
both the normal JavaScript included with the website as well as fundamental JavaScript added
to the page. It will load in tandem with the new JavaScript, which will be able to conduct
actions and make judgments. JavaScript differs from back-end languages such as Java and
Ruby in that it is visible to the user and is not pre-compiled to execute behind the scenes.

Back-end
The server side of a website is referred to as the backend. It saves and organizes data, as well
as ensuring that everything on the website's client side is working properly. It's a section of
the website that you can't see or interact with. It's the software that isn't in direct touch with
the user. Through a front-end application, users may indirectly access the pieces and attributes
defined by backend designers. Writing APIs, generating libraries, and interacting with system
components without user interfaces, as well as scientific programming systems, are all
covered in the backend. (glossarytech.com, 2022)

Back-end technologies
.Net
Microsoft's.NET Framework is a software framework that it created and built. The initial
version of the.NET framework, version 1.0, was released in 2002. It is a virtual machine that
compiles and executes programs written in various languages such as C#, VB.Net, and others.
Form-based apps, Web-based applications, and Web services are all developed with it.

Java
Java is a computer programming language that is concurrent, class-based, object-oriented,
and expressly designed to have as few dependencies as possible. Its goal is to enable
application developers to "write once, run anywhere," which means that generated Java code
may operate on any Java-supporting platform without the need to recompile.

49
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Python
Python is an interpreted and object-oriented high-level programming language with dynamic
semantics. Its high-level data structures, when combined with dynamic type and dynamic
binding, make it particularly appealing for Rapid Application Development as well as for
usage as a scripting or glue language for integrating existing components. Python's readability
is emphasized by its straightforward, easy-to-learn syntax, which lowers program
maintenance costs. (glossarytech.com, 2022)

Figure 10: front end & back end

Differences between front-end and back-end

Frontend Backend
It’ s the part of the website where users can It has all the coding regarded to the frontend
see and interact
It is the client-side of the application It is the server-side of the application
This typically includes all that attributes to This usually includes a web server that
website visual aspects. communicates with a database in order to
server requests presented by the frontend.
It forms the basis of what users on their web It’s the website’s brain that can never be
browsers can touch and experience. seen by end users

50
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 The technologies used are HTML,CSS and The technologies used are Ruby, Python,
JavaScript Java, etc.

Web Tier Architecture

The bottom database tier, the middle client tier, and the top client tier make up 3-Tier Online
Architecture, a one-of-a-kind web database application development solution based on a
three-tier paradigm. The bulk of internet Web Applications are built using this advanced
three-tier architectural module. The three-tiered Web Architecture is meant to provide better
flexibility and enhanced security for each service that may be established at each level. The
three-tier web architecture is a connection and composition of three links that aid in the
seamless running of the website. (glossarytech.com, 2022)

What do the 3 Tiers mean?

Presentation Tier
The presentation tier is the application's user interface and communication layer, which is
where the end user interacts with it. Its primary function is to present information to and
gather data from the user. This top-level layer, for example, can be accessed via a web
browser, a desktop program, or a graphical user interface (GUI). HTML, CSS, and JavaScript
are commonly used to create web presentation levels. Depending on the platform, desktop
apps may be built in a variety of languages.
Application Tier
The functional business logic that powers an application's basic features is stored in the
application tier. Java, NET, C#, Python, C++, and other programming languages are often
used.
Data Tier
The data tier, also known as the database tier, data access tier, or back-end, is where the
application's data is kept and maintained. A relational database management system, such as
PostgreSQL, MySQL, MariaDB, Oracle, DB2, Informix, or Microsoft SQL Server, or a
NoSQL database server, such as Cassandra, CouchDB, or MongoDB, can be used.

All communication in a three-tier application goes through the application tier. The data tier
and the presentation tier are unable to communicate directly with one another.

51
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
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 gicven in the scenario.

Online Website Creation tools

A website builder is a piece of software that allows you to create an online presence. The
program is hosted on a web server by a hosting firm or is part of a SaaS hosting platform
(software as a service). In other words, you are not storing website-building tools on your
local computer (desktop or laptop). Alternatively, you can create the website using software
designed specifically for website creation. You don't have to buy or set up web hosting
separately because the website builder comes with it. The majority of internet website
builders are made for users who have little or no coding experience. Online website builders
are supposed to be simple to use, allowing anyone beginners or expert designers to construct
a complete website in minutes using a drag-and-drop editor. Users create websites by simply
dragging and dropping pieces to the correct spot; no coding expertise or experience is
necessary.

The Tools
Wix: -A popular website builder with extensive functionality, in-depth customization, and
drag-and-drop simplicity that allows users to create professional-looking but distinctive
websites.
Shopify: -It is an e-commerce platform that also includes a website builder. The biggest
benefit is, of course, its natural connection with one of the world's most prominent online
shopping platforms.
DudaMobile: -The software is designed to help you build mobile websites.
OnDevice: -A website presentation tool that allows users to exhibit their website designs to
their clients in the most effective way possible. The platform's mobile-first strategy allows
users to demonstrate the responsiveness of their websites across all screen sizes.
Squarespace: -Building an online shopping site as well as integrating it with a blogging
platform to help you pursue SEO and marketing strategies for content.

52
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Custom built sites
Custom built websites are the result of collaboration between a group of people that work for
your company. It all starts with a creative process of figuring out who your target audience
is, who you want to reach out to, how you want your website to work, and how you want to
appear on the internet. SEO is critical to the success of any website. When it comes to
designing a website, there are certain guidelines that must be followed, and these guidelines
cannot be met by all themes. That's why custom designed websites are so much better; the
developer can optimize the site during production so that Google and other search engines
can understand each page, resulting in a more relevant search result for the end user, naturally
giving custom built sites a better ranking.

Differences between Online website tools and Custom built sites

Online Website Tool Custom built sites
Development time Development time is shorter At least takes 6-8 weeks
Cost Cheap Expensive
Optimization Is not SEO friendly It is optimized for search
engines during development
Responsiveness Not 100% responsive on all 100% responsive on all
devices devices
Functionality Can be limited Offers higher flexibility in
design capabilities and
advanced functionality
Design You are able to customize The design will be built
few things such as the around the business needs.
background color, the font The web developers will
and the logo. The layout is have a understanding of the
not very adaptable to company which means the
change. end result will fit to the
marketing strategy.
User Experience (UX) User experience can be User experience is higher
lower because some because the website is
function are limited customized.

53
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 User Interface (UI) What you see with the With a custom website, it is
design of the most templates possible to show the culture
is what you get. and personality through the
design. A unique design for
your website can be
presented, revised and built
into a custom template.

Tools used to design Custom-built Web Applications

Protopie
ProtoPie is a highly interactive prototyping tool that assists designers in turning their concepts
into working prototypes. The fact that ProtoPie is an interaction-focused prototype tool
distinguishes it from many other prototyping tools. This means that the goal of prototyping
using ProtoPie is to help designers communicate a feeling of interaction rather than merely
exhibit pixelperfect templates. This allows individuals who communicate with a prototype to
get a sense of what an actual encounter with a genuine product would be like.

Dreamweaver
Adobe Dreamweaver is a commercial web building application that runs on both Mac and
Windows computers. Syntax highlighting and highly sophisticated Code Hinting, a built-in
FTP client, project management and workflow solutions that make teamwork simple, and
Live View which gives you a glimpse of your source code are all part of the comprehensive
range of tools and solutions. Dreamweaver allows you to exchange smart objects for quick
and simple updating and altering of graphical components, and it's tightly connected with
other popular Adobe programs like Photoshop. (recruitinginnovation.com, 2022)

Firefox Developer
The Firefox Developer Edition is a version of Firefox designed specifically for web
developers. As a developer, you get access to all of their DevTools. Other capabilities include
testing and debugging, CSS Grid creation and design, HTML inspector, style editor, and a
plethora of other tools to meet web development demands to the fullest extent feasible.

54
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Browser sync
With each new web page, device, or browser, the amount of time spent testing grows rapidly.
From live reloads to URL pushing, form replication to click mirroring, Browsersync
automates tiresome manual processes. It's like having an extra pair of hands. Create a
personalized test environment by adjusting a variety of UL or command line sync settings.
Browsersync is simple to integrate with your Node.js web server, build tools, and other
applications. (recruitinginnovation.com, 2022)

Adobe XD
Adobe XD is a vector-based user experience design platform for online and mobile apps
created and published by Adobe Inc. It's available for macOS and Windows, as well as iOS
and Android versions that let you preview the work straight on your phone or tablet. By
pushing, Adobe XD offers website wireframing and prototyping.

Techniques used to design Custom-built Web Applications

Responsive Web Design Strategy

Responsive web design is no longer a UX-only profession, thanks to the massive increase in
the number of mobile devices. As part of their strategy planning, all marketers must grasp site
design and make it responsive. As a web marketer, you may not need to understand all of the
secrets of designing and constructing a responsive Web. You'll need to know your content's
particular marketing responsibilities.

No Stock Photography
People are no longer interested in glamour images. They are undoubtedly seeking a more
impartial perspective of what a business represents or stands for. Photographs of dry stock on
a plain white background are out of style. People are looking for characters with personalities
and plots. On your website, only utilize photographs that are related. Your photographs send
out subliminal signals to your audience. (recruitinginnovation.com, 2022)

CSS Media Queries

You may follow a lesson from CSS-Tricks that explains how to utilize media queries to make
modest changes to a single style sheet. For example, in the instance of a fluid-width design
with a sidebar that is 35% of the page's actual width, one might know what to do if the browser

55
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
window is extremely tiny, what to do if it's bigger, and what to do if it's much wider, based
on the browser window's actual width. (recruitinginnovation.com, 2022)

Make Your Site Accessible

If you want to attract a lot of visitors, you'll need to make your site compatible with a variety
of devices and browsers. You must ensure that everyone who visits your website can use it,
regardless of the program or browser they are using

Maintaining Consistency
It's a good idea to maintain the site's aspects like color, layout, and font generally similar.
From one page to the next, your website should be dynamic. This implies that your font, color,
and layout structure should be consistent throughout all of your pages to preserve consistency.
It's critical to maintain the components similar throughout all pages to avoid the visitor being
disoriented.(recruitinginnovation.com, 2022)

56
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
LO3 Utilise website technologies, tools and techniques with good design principles to
create a multipage website.
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 evidences of the design, multipage website supported with
fidelity wireframes and a full set of client and user requirements.

What is a web application?

A website is a collection of interconnected, globally accessible web pages under one domain
name. A website can be created and maintained by an individual, a company, or an
organization. The website is designed to serve a variety of functions, such as blogging.
A single web server or several web servers are used to host a website. It can be accessed by
an IP address on a network like the Internet or a private local area network.

Client and User Requirements

Client Requirements
 To create a hospital management system
 The hospital management system should be able to managehospital management
operations.
 The hospital management system should be able to monitor all the processes.
 Doctors, Patient and Admin should be able to register and login to the hospital
management system
 Should be able to save time and cost.

User Requirements
Hospital Admin Requirements
 The hospital Admin should be able to register and login to the system.
 The hospital Admin should be able to update his/her profile details including his
password.
 The hospital Admin should be able to check status of members.
 The hospital Admin should be able the update lending details.

57
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
  The hospital Admin should be able to update Patient return details.
 The hospital Admin should be able to calculate Doctor fee necessary.
 The hospital Admin The Doctors should be able to patient catalog.
 The hospital Admin should be able add and delete Patient.

Patient Requirements
 The Patient should be able to register and login to the system.
 The Patient should be able to update his/her profile details including his password.
 The Patient should be able to reserve a Doctors for 24 hours.
 The Patient should be able to check availability of Doctors.

Doctors Requirements
 The Doctors should be able to register and login to the system.
 The Doctors should be able to update his/her profile details including his password.
 The Doctors should be able to reserve a patient for 24 hours.
 The Doctors should be able to check availability of Appointment.
 The Doctors should be able to search patient

What is a wireframe
Wire framing is a method of constructing a website's structure. A wireframe is a common tool
for laying out information and functionality on a website while considering user demands and
user journeys. Wireframes are used early in the development process to define a page's
fundamental framework before visual design and content are added.
A wireframe is used to acquire stakeholder and project team agreement before the creative
process begins by providing an early visual understanding of a page in a project.

Wireframes for the given scenario (Online Hospital Management System)

58
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Home page of the website - Online Hospital Management System

Figure 11: Home page of the website

Admin Login Page - Online Hospital Management System

Figure 12: Admin Login Page

59
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor Login Page - Online Hospital Management System

Figure 13: Doctor Login Page

Patient Create Account Page - Online Hospital Management System

Figure 14: Patient Create Account Page

60
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Admin Dashboard Page - Online Hospital Management System

Figure 15: Admin Dashboard Page

Doctor Apply Page - Online Hospital Management System

Figure 16: Doctor Apply Page

61
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Patient Dashboard Page - Online Hospital Management System

Figure 17: Patient Dashboard Page

Doctor Dashboard Page - Online Hospital Management System

Figure 18: Doctor Dashboard Page

62
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
UML diagrams for Online Hospital Management System

Activity diagram (Admin)

Figure 19: Activity diagram (Admin)

63
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Activity diagram (Doctor)

Figure 20: Activity diagram (Doctor)

64
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Activity diagram (Patient)

Figure 21: Activity diagram (Patient)

65
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Use Case Diagram

Online Hospital Management System

Figure 22: Use Case Diagram

66
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Principles, standards and guidelines of a website
Website Purpose
Your website must consider the demands of its visitors. Simply having a clear objective on
all pages would encourage the visitor to interact with what you're trying to say. What is the
objective of your website? Is it possible to obtain practical information, such as a "How to
Guide"? Is it a sporting event that provides entertainment? (feelingpeaky.com, 2022)
Do you have a website or do you sell the consumer a product? Websites serve a variety of
purposes, but they all have several essential functions in common.
 Describing Expertise
 Building The reputation
 Generating Leads
 Sales
⮞ Simplicity
When it comes to your website's user interface and accessibility, simplicity is the way to go.
The following are some examples of how to achieve simplicity through design.

Color - Color has the ability to convey information as well as elicit emotional reactions. By
selecting a color palette that complements your brand, you may influence your customers'
behavior toward it. Keep the color palette to a maximum of 5 colors. Color schemes increase
the customer's experience and make them feel happy. (feelingpeaky.com, 2022)

Type- The typography on your website is really significant. It commands attention and speaks
for the brand's visual perspective. On the website, typefaces should be readable, and just three
distinct fonts should be used.

Imagery- Any visual component employed in communications is referred to as imagery.

Photography, illustration, film, and other visual mediums are all examples of this. All
graphics should be descriptive, convey the company's essence, and demonstrate the brand's
individuality. (feelingpeaky.com, 2022)

⮞ Navigation
People utilize navigation to find mechanisms on websites that allow them to connect and find
what they're looking for. The ability to navigate across the website is critical to attracting

67
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
visitors. Visitors may quit up and look for what they need elsewhere if website navigation is
confusing. On every website, it's critical to keep navigation clear, straightforward, and
consistent. (feelingpeaky.com, 2022)

⮞ F-shaped pattern reading

The F- based pattern is the most prevalent method users search text on a website. The majority
of what individuals view is in the top and left areas of the screen, according to eye tracking
studies. The F-shaped structure reflects our natural reading habits (left to right and top to
bottom). A well-designed website should follow the natural pattern of a page-scanning reader.

⮞ Visual Hierarchy
The order of significance for the arranging of elements is known as visual hierarchy. Size,
color, images, contrast, typography, space, texture, and design all contribute to this. Setting a
focus point is one of the most significant jobs of visual hierarchy; it shows visitors where the
most relevant information is located. (feelingpeaky.com, 2022)

⮞ Content
Great design and content go hand in hand in a good Web design. The use of appealing
language and exceptional content will attract and influence visitors, transforming them into
buyers.

⮞ Grid Based Layout

Grids aid in the organization and structure of your design. The grid keeps the pieces organized
and centered on the page. The grid-based style organizes material into columns in a neat,
linear grid structure, with elements that match and seem balanced, and enforces order,
resulting in a visually appealing website. (feelingpeaky.com, 2022)

⮞ Load Time
Visitors will leave if a website takes too long to load. Nearly half of website visitors anticipate
a site to load in two seconds or less, abandoning a site that takes more than three seconds to
open. The picture sizes can be optimized to make the site load faster.

68
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 ⮞ Mobile Friendly
More individuals are utilizing their phones or other gadgets to access the internet. It's
important to think about building your website with a responsive layout, which allows it to
adjust to multiple screen sizes.

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 analyisng any
technical challenges you faced during the development.

Home Page – Hospital Management System

Figure 23: Home Page

69
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Home Page Codes

Figure 24: Home Page Codes

Register as patient page

Figure 25: Register as patient page

70
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Register as patient page code

Figure 26: Register as patient page code

71
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Login as doctor page

Figure 27: Login as doctor page

Login as doctor page code

Figure 28: Login as doctor page code

72
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Login as admin page

Figure 29: Login as admin page

Login as admin page code

Figure 30: Login as admin page code

73
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Drop us a message page

Figure 31: Drop us a message page

Drop us a message page code

Figure 32: Drop us a message page code

74
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Admin Dashboard Page

Figure 33: Admin Dashboard Page

Admin Dashboard Page Codes

75
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 Figure 34: Admin Dashboard Page Codes

76
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
View Doctore Page

Figure 35: View Doctore Page

View Doctore Page Codes

Figure 36: view doctore page codes

77
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Add Doctor Page

Figure 37: Add Doctor Page

Add Doctor Page Code

Figure 38: Add Doctor Page Code

78
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor Added Successfully Masage

Figure 39: Doctor Added Successfully Masage

Add Doctor

Figure 40: Add Doctor

79
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Delete Doctor page

Figure 41: Delete Doctor page

Delete Doctor Page Code

Figure 42: Delete Doctor Page Code

80
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 81
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
View patients page

Figure 43: View patients page

View patients page code

Figure 43: View patients page code

82
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Register as patient

Figure 44: Register as patient

New patient dashboard

Figure 45: New patient dashboard

83
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
The new patient is displayed in the database

Figure 46: The new patient is displayed in the database

84
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Queries

Figure 47: Queries

Queries code

Figure 48: Queries code

85
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Appointment details

Figure 49: Appointment details

Appointment details code

Figure 50: Appointment details code

86
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Patient dashboard

Figure 51: Patient dashboard

Patient dashboard code

Figure 52: Patient dashboard code

87
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Book appointment

Figure 53: Book appointment

Book appointment code

Figure 54: Book appointment code

88
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Log out

Figure 55: Log out

Log out code

Figure 56: Log out code

89
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor Dashboard

Figure 57: Doctor Dashboard

Doctor Appoinment List

Figure 58: Doctor Appoinment List

90
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor dashboard code

Figure 59: Doctor dashboard code

91
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Comparison between the website and the actual document

Design Document

Actual Website

As you can see, the design document simply has a rudimentary interface. However, the
name of the Online Hospital Management System appears in the navigation bar as "HMS"
on the real website. By clicking "Admin" the administrator can access his or her portal. It
also allows a new patient to register and a doctor to access the system. These features,
however, are not visible in the created document since a wireframe is first developed, and
then the wireframe is designed to the real document after gathering user requirements.

92
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor Apply Page

Design Document

Actual Website

Details such as doctor name, user name, email, password, and repeat password are only
presented in the design document, as you can see. A login button appears. When a
registered doctor logs back into the website, he can enter his username and password and
log in.

93
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Patient Create Account Page

Design Document

Actual Website

As you can see, in the design document, details such as first name, last name, email,
password and repeat password are only shown.A login button and a cancel button is shown.
However, in the actual website the username and password the Patient is asked.

94
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor Login Page

Design Document

Actual Website

Major changes are been done in the login page. In the design document, the login page is
not beautifully designed but the login page of the actual website is beautifully designed.
This is done to ensure that it is clear to the users. Users can access the website by clicking
the "Login" button.

95
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Admin Dashboard Page

Design Document

Actual Website

There are some similarities between the design document and the actual website. The actual
site has become colorful. This page are admin page. The administrator always manages all
the doctors and all the patients. Adding and deleting doctors is also the responsibility of
the administrator.

96
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Patient Dashboard Page

Design Document

Actual Website

Both the design document and the actual website has some similarities. This allows the
patient to make an appointment with a physician. He can also look at the patient's
appointment history. The patient can also see the prescriptions prescribed by the doctor.

97
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Doctor Dashboard Page

Design Document

Actual Website

Both the design document and the actual website has some similarities. The doctor should
first consider the appointment he has. Through it the details of the patients can be obtained
by the doctor. Through it he will be able to prescribe medication.

98
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Technical challenges faced

There will be several technological hurdles when developing a website. While constructing
the Online Hospital Management System, the developer experienced various technical
difficulties.

Technical Challenge 01

The programmer also encountered certain technological difficulties when creating the Online
Hospital Management System.
This is due to a technical error in the XAMPP server. Then turned off the server and restarted,
but the server did not work. It was later updated. Then the server reconnected. That technical
bug never came up again.

99
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
LO4 Create and use a Test Plan to review the performance and design of a multipage
website.
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.

What is Quality Assurance?

Quality assurance refers to the methods and procedures that systematically track the many
components of a service or facility. Through audits and other forms of assessments, quality
assurance efforts discover and correct errors or variations that fall outside of defined standards
or specifications. To put it another way, quality assurance ensures a high level of quality
during the creation of a product or service. (techtarget.com, 2022)
The terms "quality assurance" and "quality control," which are two different aspects of the
management approach, are frequently interchanged. Quality control, on the other hand, entails
carrying out the quality requirements that have been established. Quality assurance is the
process of monitoring quality management measures to ensure that they are working properly.

Quality Assurance Process

Main steps in QA process,
 Plan
 Do
 Check
 Act
These stages are done to guarantee that the organization's procedures are assessed and
improved on a regular basis. Let's take a closer look at the processes listed above.
Plan - The organization should plan and develop process-related objectives, as well as the
methods necessary to provide a high-quality final result.
Do - Process development and testing, as well as "doing" modifications to processes.
Check - Processes are monitored, modified, and checked to see if they match the intended
goals.

100
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Act - Implement measures required to enhance processes. An organization must utilize
Quality Assurance to guarantee that the product is planned and implemented according to
proper procedures. This aids in the reduction of issues and faults in the final output.

Quality Control
The term "quality control" is sometimes shortened as "QC." It's a Software Engineering
procedure that ensures a product's or service's quality. It assesses the quality of the "end
products" and the ultimate output rather than the procedures utilized to make a product.
Quality control's major goal is to ensure that the products fulfill the customer's standards and
needs. If a flaw or defect is discovered, it must be resolved before the consumer receives the
product. QC also assesses people's skill sets and provides training and certifications based on
their quality levels. This assessment is necessary for service-based organizations, and it aids
in providing "perfect" customer service. (techtarget.com, 2022)

The Difference Between Quality Assurance and Quality Control

Although both phrases are sometimes used interchangeably to describe the quality
management of the project's product or service, the distinction between quality assurance and
quality control is minor but crucial. The distinction lies in the location of the project's
emphasis. Early in the project phase, quality control is more concerned with quality.
Assurance, on the other hand, is concerned with the execution of inspection and systematic
testing at all stages of the project. Quality assurance makes use of a quality system that is set
up to carry out administrative and procedural duties that result in project goals for the product
or service. This allows for systematic measurement and comparison to a standard, as well as
process monitoring and a feedback loop to ensure that no mistakes are introduced into the
manufacturing process. Quality control, on the other hand, is primarily concerned with the
output of the process. (techtarget.com, 2022)

101
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Here we can discuss some another steps in QA
Review requirements and documentation,
Parallel to the documentation development, QA engineers begin working on the project. They
look over the specifications and documentation for:
 completeness
 redundancies
 clarity
 consistency
 executability
 verifiability

The goal is to look for flaws in the system design and technology.

Key benefits for the development process:

 When errors are caught early on, they are less expensive.
 Better documentation translates to a higher-quality project with less labor input and
more precise estimations.
Consider utilizing specialist software for document review, such as Confluence, for this
phase. You may compile any relevant documentation that will be utilized during the project
and keep track of it in an internal knowledge base. Any modifications to requirements or
documents are visible to all team members as soon as they are amended, added, updated, or
removed.
Plan and prepare test cases
When the requirements have been created, it's time to start thinking about test cases, which
are descriptions of the actions that QA engineers take to ensure that the product works as
expected. If the number of such examples grows to be too large, specific tools such as TestRail
or Zephyr can be used to write test cases. Both pieces of software allow you to create and
modify tests, as well as track outcomes with metrics. (techtarget.com, 2022)
Design Test Cases
The QA team begins executing the test cases after the development stage is completed. The
primary purpose of this stage is to ensure that the solution has been appropriately built from
a technical standpoint and that it fits the initial product owner's expectations.

102
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Below are the main QA activities and their aims:
 The first step is to do a smoke test. QA engineers do a cursory review to ensure that
the program, or its module, performs as expected. When the bill is passed, the
investigating process begins.
 Verify that multiple components function together as a single system during
integration testing.

 Performance testing that includes:

⮞ Load testing – check system behavior for normal and expected peak load
⮞ Stress testing – determine critical load after which the system breaks down
 Security testing - make sure the solution has a high enough level of security.
 Cross-browser/cross-platform testing ensures that the program runs smoothly across
a variety of browsers and systems. This is particularly critical for online and hybrid
apps.
 Regression testing identifies flaws in previously tested code. When adding new
features or making changes to an existing system, this is usually required.

QA for Online Hospital Management System

After creating the wireframes, the developer made several adjustments to the real website
throughout the QA phase.

In activity 3.1, the developers fully utilized the QA process in order to provide the greatest
UE to the consumers. Because the developer generated the wireframes with less user needs,
the majority of them diverge from the real website. However, after gathering all of the user's
needs, the developer made the necessary changes to the website. The developer had design
and technical obstacles, but they were addressed in activity 3.2.

103
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
4.2 Create a suitable test plan for the developed system and critically evaluate the results
of your Test Plan . Include a review of the overall success of your multipage website;
use this evaluation to explain any areas of success and provide justified
recommendations for areas that require improvements.

Test Case 01 – Admin

Test Case Expected Output Actual Output
Login to the Admin page Should be able to only Can only Username in login
Username in login and not and not login the system.
login the system

Only enter the

Username and not
login to the system.

Display the Error messge

to PLEASE FILL OUT
THIS FIELD

104
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 02 – Admin
Test Case Expected Output Actual Output
Login to the Admin page Should be able to not login Can not login when the
to when the incorrect incorrect username and
username and password is password is given.
given

Should be able to not

login to when the
incorrect username and
password

Invaild Username or
Password Error Messgae
Invaild Username or
Password

Admin Login and Error

Message Codes

105
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 03 - Admin
Test Case Expected Output Actual Output
Login to the Admin page Should be able to login to Can login when the correct
when the correct username username and password is
and password is given given.

Should be able to login to

when the correct

Login to the administrator

dashboard

Admin Login Codes

106
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 04 - Admin
Test Case Expected Output Actual Output
Add doctor When the requested The information provided
information is entered and was added to the database.
the “ADD DOCTOR”
button is clicked, the details
are added to the database.

Admin added the

doctor

Added message alert

Doctor Added Successfully

Update the mysql , view the

added Doctor

107
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 05 - Admin
Test Case Expected Output Actual Output
Delete doctor Enter the doctor's email you That doctor has been deleted
want to delete and click the from the database.
"DELETE DOCTOR"
button below to have it
deleted from the database.

Admin Rejected Doctor

Confirmation message Do
you really want to
delete?

Delete message alert Doctor

removed Successfully

108
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 Update the mysql , view
the Rejected Doctor

109
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 06 - Doctor
Test Case Expected Output Actual Output
Login to the Doctor page Should be able to only Can only Username in login
Username in login and not and not login the system.
login the system.

Only enter the

Username and not login
to the system.

Display the Error

messge to PLEASE
FILL OUT THIS
FIELD.

110
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 07 - Doctor
Test Case Expected Output Actual Output
Login to the Doctor page Should be able to not login Can not login when the
to when the incorrect incorrect username and
username and password is password is given
given

Should be able to not login

to when the incorrect
username and password

Invaild Username or
Password Error Messgae
Invalid username or
password. Try again!

DoctorLogin and
Error Message
Codes

111
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 08 - Doctor
Test Case Expected Output Actual Output
Login to the Doctor page Should be able to login to Can login when the correct
when the correct username username and password is
and password is given given

Should be able to login

to when the correct
username and
password is given

Login to Doctor
Dashborad

DoctorLogin
Message Codes

112
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 09 - Doctor
Test Case Expected Output Actual Output
Doctor cancle the When a doctor cancels an An appointment exits the
appointments appointment for a patient, it database when the
must be removed from the "CANCEL" button is
database. clicked.

Doctor appointments
dashboard

Confirmation message
Are you sure you want
to cancel this
appointment?

Appointment
cancelled message
Your appointment
successfully
cancelled

113
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 Update the mysql ,
view the cancelled
appointment

114
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 10 - Patient
Test Case Expected Output Actual Output
Login to the Patient page You will not be able to log in Unable to log in because
when you enter only your only the username is
username or password. provided.

Only enter the

Username and not
login to the system.

Display the Error

messge to PLEASE
FILL OUT THIS
FIELD

115
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 11 - Patient
Test Case Expected Output Actual Output
Login to the Patient page Should be able to not login Can not login when the
to when the incorrect incorrect username and
username and password is password is given
given

Should be able to not login

to when the incorrect
username and password

Invaild Username or
Password Error Messgae
Invalid username or
password. Try again!

Patient Login and Error

Message Codes

116
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 12 - Patient
Test Case Expected Output Actual Output
Login to the Patient page Should be able to login to Can login when the correct
when the correct username username and password is
and password is given given

Should be able to login

to when the correct
username and password
is given

Login to Patient
Dashborad

117
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 13 - Patient
Test Case Expected Output Actual Output
Book appointment Should be able to Patient Can Patient Book
Book Appoinment to when Appoinment when the
the Appoinment date and Appoinment date and doctor
doctor is given is given

Book appointment
dashboard

Book appointment
message Your
appointment
successfully booked

Appointment history
dashboard. The
above appointment is
also recorded in
appointment history.

118
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Test Case 14 - Patient
Test Case Expected Output Actual Output
Cancle appointment Can delete a booked A selected appointment has
appointment from database been canceled and deleted
by clicking the “CANCEL” from the database.
button.

Appointment history
dashboard

Confirmation
message Are you
sure you want to
cancel this
appointment.

Cancelled
appointment message
You appointment
successfully
cancelled

119
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
 Appointment history
dashboard (the
cancelled
appoinment)

120
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
The developer created the test plan himself. He just tested the website; the add, remove,
register, and login capabilities were all tested. The developer had his own expected outcomes,
which were met by the Actual Result, indicating that all functionalities are functioning
properly. The issues that the developer encountered while developing the website are
addressed with various solutions and discussed in activity 3.2. The developer did not make
any changes after receiving new requirements in activity 3.2, and the developer discovered
that the website's success was achieved through the use of the QA process.

However, after completing the test plans, the developer discovered that the website may
benefit from a number of further enhancements, which are detailed below:

 The interfaces of the login page has some amendments to do. add the hospital logo,
the size of the logo is bigger than the developer has expected, therefore the size of the
logo must be changed.

 Patient amust be able to pay hospital charges using an e-pay facility in the website
itself which saves time and increases the efficiency of the website.

 A different specialist doctors must be included so that registered users can view
whether the Appoinment specialist doctors the they are searching for available

 It should be developed in such a way that users can get an invoice.

 Also, the doctor's profile should be set to be viewed separately by the user. It allows
users to gain a clear understanding of the physician.

121
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Annexures

Xampp control panel

Figure 60: Xampp control panel

PHP My Admin

Figure 61: PHP My Admin

122
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
PHP My Admin

Figure 62: PHP My Admin

123
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha
Reference
Techterms.com. Protocol Definition. [online] Available at:
https://techterms.com/definition/protocol [Accessed 20 Feb. 2022].
SearchNetworking. . What is TCP/IP and How Does It Work?. [online] Available at:
https://searchnetworking.techtarget.com/definition/TCP-IP [Accessed 24 Feb. 2022].
Hostinger Tutorials.. What is FTP: File Transfer Protocol Explained for Beginners. [online]
Available at: https://www.hostinger.com/tutorials/what-is-ftp [Accessed 10 Mar. 2022].
Tutorialspoint.com. (2019). HTTP - Overview - Tutorialspoint. [online] Available at:
https://www.tutorialspoint.com/http/http_overview.html [Accessed 25 Mar. 2022].
O’Reilly | Safari. [online] Available at: https://www.oreilly.com/library/view/ssh-the
secure/0596008953/ch01s01.html#ftn.sshtdg2- CHP-1-FN-1 [Accessed 28 Mar. 2022].
Techterms.com. . Operating System Definition. [online] Available at:
https://techterms.com/definition/operating_system [Accessed 29 Mar. 2022].
GeeksforGeeks. . Types of Operating Systems - GeeksforGeeks. [online] Available at:
https://www.geeksforgeeks.org/types-of-operating-systems/ [Accessed 01 Apr. 2022].
The Economic Times Definition of Web Server, Web Server Meaning - The Economic Times
[online] Available at: https://economictimes.indiatimes.com/definition/web-server
[Accessed 01 Apr. 2022].
Apache, . [online] Available at: https://httpd.apache.org/ [Accessed 01 Apr. 2022].
Net-informations.com.. What is IIS - Internet Information Server. [online] Available at:
http://netinformations.com/faq/asp/iis.html [Accessed 03 Apr. 2022].
Lighttpd.net. . Home - Lighttpd - fly light. [online] Available at: https://www.lighttpd.net/
[Accessed 03 Apr. 2022].
Definitions, S. and Hope, C. . What is a Search Engine?. [online] Computerhope.com.
Available at: https://www.computerhope.com/jargon/s/searengi.html [Accessed 04 Apr.
2022].
Glossarytech. Front-end technologies. [online] Available at:
https://glossarytech.com/terms/front_end-technologies [Accessed 05 Apr. 2022].
Recruiting Innovation. Intro to Front End Technologies: HTML, CSS, & JavaScript |
Recruiting Innovation. [online] Available at: https://recruitinginnovation.com/blog/front-
end-technologies/ [Accessed 05 Apr. 2022].
GeeksforGeeks. . Frontend vs Backend - GeeksforGeeks. [online] Available at:
https://www.geeksforgeeks.org/frontend-vs-backend/ [Accessed 05 Apr. 2022]

124
Unit 10: Web Design and Development A.J Tharindu Janak Jayantha