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
H.P.Dileesha Mandara Prawarshana
Student’sname

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 Y/N
brief?

Is the Pass/Merit/Distinctiongrade 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)

H.P.D.Mandara Prawarshana 1 Web design and Development

 Confirm action completed
Remedial action taken

Give details:

Assessor signature Date

Internal Verifier
Date
signature
Programme Leader
Date
signature(ifrequired)

H.P.D.Mandara Prawatshana 2 Web design AND Developement

Higher Nationals - Summative AssignmentFeedbackForm
Student Name/ID H.P.D.Mandara Prawarshana /E131272

UnitTitle Unit 10: Website Design & Development

Assignment Number 1 Assessor Mr. Gagana Wickramasinghe

28 /12/2022 Date Received 1st 28/12/2022
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:

ResubmissionFeedback:

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.

H.P.D.Mandara Prawatshana 3 Web design AND Developement

Assignment Feedback

Formative Feedback: Assessor to Student

Action Plan

Summative feedback

Feedback: Student to Assessor

Assessor signature Date

[email protected] 28/12/2022
Student signature Date

H.P.D.Mandara Prawatshana 4 Web design AND Developement

 Pearson
Higher Nationals in
Computing
Unit 10: Web Design and Development
Assignment 01

H.P.D.Mandara Prawatshana 5 Web design AND Developement

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.

H.P.D.Mandara Prawatshana 6 Web design AND Developement

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] 28/12/2022
Student’s Signature: Date:
(Provide E-mail ID) (Provide Submission Date)

H.P.D.Mandara Prawatshana 7 Web design AND Developement

Assignment Brief
Student Name /ID Number H.P.Dileesha Mandara Prawarshana /E131272

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2021/2022

Unit Tutor

Assignment Title Online Hospital Management System

Issue Date

Submission Date 28/12/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.

H.P.D.Mandara Prawatshana 8 Web design AND Developement

Assignment Brief and Guidance:

H.P.D.Mandara Prawatshana 9 Web design AND Developement

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.

H.P.D.Mandara Prawatshana 10 Web design AND Developement

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.

H.P.D.Mandara Prawatshana 11 Web design AND Developement

H.P.D.Mandara Prawatshana 12 Web design AND Developement
 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).

H.P.D.Mandara Prawatshana 13 Web design AND Developement

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.

H.P.D.Mandara Prawatshana 14 Web design AND Developement

 Observation Sheet

Activity Activity Learning Outcome Feedback

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

Assessor Name :…………………………………………….

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

Comments:

H.P.D.Mandara Prawarshana 1 Web design and Development

Acknowledgement
This homework assignment is for the HND in Computing's Web Design and Development
curriculum. To the maximum degree possible, I owe all those who helped with this assignment their
blessings and unwavering support. I would want to use this occasion to express my gratitude to
everyone who was involved. First of all, I would want to express my gratitude to this subject's
instructor, Mr. Gagana Wickramasinghe, for his direction, continual monitoring, and provision of
the material I needed to complete the project. Finally, I want to thank my parents and friends for
their great encouragement and assistance in getting this project done.

H.P.D.Mandara Prawarshana 2 Web design and Development

 Table Of Contents
Learning Outcomes:01 ...................................................................................................................... 1

1.1 Website ....................................................................................................................................1

1.2 Designing and Development ................................................................................................... 1
1.3 The website design and development process. ........................................................................2
1.4 Web Designing ........................................................................................................................ 5
1.5 Web Publishing ....................................................................................................................... 6
1.6 Website Accessing .................................................................................................................. 7
1.7 Protocol ................................................................................................................................... 7
1.8 Server and Hardware ............................................................................................................. 12
1.9 Operating Systems .................................................................................................................12
1.10 Types of Operating System ................................................................................................. 13
1.11 Web Server Software ...........................................................................................................16
1.12 Types of Web Server Software ........................................................................................... 16
1.13 DNS (Domain Name System) ............................................................................................. 17
1.14 Domain Name ......................................................................................................................19
1.15 Search Engine ......................................................................................................................19
1.16 Search Engine Optimization (SEO) .................................................................................... 21
1.17 Search Engine Optimization works .....................................................................................22
1.18 Search Engine Optimization Technique ..............................................................................23
1.19 How Website Performance Affects SEO and Conversion Rates. ....................................... 27
1.20 Web performance and Search Ranking ............................................................................... 28
1.21 Web Development ...............................................................................................................30
1.22 Web Development Technologies ........................................................................................ 30
1.23 Web Development Frameworks ..........................................................................................34
1.24 Why a web application is appropriate in the given circumstances (conclusion) .................38
1.25 Using a web application ...................................................................................................... 38
1.26 Web application techniques .................................................................................................39
1.27 Web application tools ..........................................................................................................41

Learning Outcomes:02 .................................................................................................................... 46

2.1 Creating the front end. ...........................................................................................................46
2.2 Creating the Back end. .......................................................................................................... 50
2.3 Differences between front-end and back-end ........................................................................54

H.P.D.Mandara Prawarshana 1 Web design and Development

 2.4 Web Tier Architecture ...........................................................................................................56
2.5 Online Website Creation tools .............................................................................................. 57
2.6 Custom built sites .................................................................................................................. 58
2.7 Tools used to design Custom-built Web Applications ..........................................................60
2.8 Techniques used to design Custom-built Web Applications .................................................61

Learning Outcomes:03 .................................................................................................................... 62

3.1 What is a web application? ....................................................................................................62
3.2 Wireframes ( Online Hospital Management System) ........................................................... 63
3.3 UML diagrams for Online Hospital Management System ......................................................1
3.4 Use Case Diagram (Arogya online hospital management system) ......................................... 5
3.5 Principles, standards and guidelines of a website ................................................................... 7
3.6 Creating an Arogya web application using HTML, CSS, JAVASCRIPT, AND PHP. .......... 9
3.7 Comparison between the website and the actual document .................................................... 2
3.8 Technical problems faced by the author by creating the web application. ........................... 10

Learning Outcomes:04 .................................................................................................................... 11

4.1 Quality Assurance? ................................................................................................................11
4.2 Quality Assurance Process .................................................................................................... 11
4.3 Quality Control ......................................................................................................................12
4.4 The Difference Between Quality Assurance and Quality Control ........................................ 12
4.5 Here, we can talk about a different QA step. ........................................................................ 12
4.6 Create a suitable test plan for the developed system and critically evaluate the results of
your Test ......................................................................................................................................14
4.7 Xampp control panel (Database create) ................................................................................ 29
..................................................................................................................................................... 30

H.P.D.Mandara Prawarshana 2 Web design and Development

 Figure 11 - Web designing (interaction-design.org , 2022) ............................................................ 5
Figure 22 - Communication Protocol (thecenterforgrowth.com , 2022) ......................................8
Figure 33 - TCP/IP Protocol (novell.com , 2022) ...................................................................... 8
Figure 44 -File Transfer Protocol (essaystreak.com , 2020) ...........................................................9
Figure 55 - Hypertext Transfer Protocol (techtarget.com , 2020) ....................................................10
Figure 66 - HTTP and HTTPS (.cloudflare.com , 2022) .............................................................. 10
Figure 77 - Secure Shell (SSH (geeksforgeeks.org , 2022) ............................................................12
Figure 88 -Batch Operating System (quora.com , 2022) ..............................................................13
Figure 99 -Time-Sharing Operating Systems(byjus.com , 2022) ..................................................... 14
Figure 1010 -Distributed Operating System (.javatpoint.com , 2022) ............................................... 14
Figure 1111 - Network Operating System(.javatpoint.com , 2022) .................................................. 15
Figure 1212 -Real-Time Operating System(onlogic.com,2022) ...................................................... 15
Figure 1313 -Web Server Software(c-sharpcorner.com , 2014) ......................................................16
Figure 1414 - Domain Name (firstsiteguide.com , 2022) ............................................................. 19
Figure 1515 -Search Engine(mangools.com , 2022) .................................................................. 19
Figure 1616 -Crawling (moz.com , 2022) ............................................................................. 20
Figure 1717 -Indexing ((moz.com , 2022) ............................................................................. 21
Figure 1818 -Search Engine Optimization (oberlo.com , 2022) ......................................................22
Figure 1919 -Conversion rates and Website Performance (unincorporated.com ,2016) ........................... 27
Figure 2020 -Web performance (unincorporated.com ,2016) ........................................................ 28
Figure 2121 -PHP Language (vectorstock.com ,2022) ................................................................ 31
Figure 2222 -JavaScript Language (medium.com ,2020) .............................................................32
Figure 2323 -Ruby Language (Stock.com , 2020) ..................................................................... 32
Figure 2424 - Java Language (guru99.com ,2022) ................................................................... 33
Figure 2525 -Angular (orientsoftware.com/ ,2022) .................................................................. 34
Figure 2626 - Ember (Medium.com , 20220 ...........................................................................35
Figure 2727 -Django (orientsoftware.com/ ,2022) ....................................................................35
Figure 2828 -Express.js (medium.com , 2022) ........................................................................ 36
Figure 2929 -Vue.js (orientsoftware.com/ ,2022) ..................................................................... 36
Figure 3030 -React (orientsoftware.com/ , 2022) ..................................................................... 37
Figure 3131 -ASP.NET Core .(orientsoftware.com/ , 2022) .......................................................... 37
Figure 3232 -html (velog.om , 2022) ...................................................................................46
Figure 3333 -css((velog.om , 2022) .................................................................................... 47
Figure 3434 -JavaScript (javatpoint.com , 2020) ..................................................................... 49
Figure 3535 -1..Net (howtogeek.com/ ,2021) ..........................................................................50
Figure 3636 -front-end and back-end ( kenzie.snhu.edu/ ,2022) .....................................................55
Figure 3737 -home page (the author ,2022) .......................................................................... 64
Figure 3838 -login page (the author ,2022) ........................................................................... 65
Figure 3939 - admin page (the author ,2022) ......................................................................... 65
Figure 4040 -Doctor view (the author,2022) .......................................................................... 66
Figure 4141 -Appointment page (the author ,2022) ...................................................................67
Figure 4242 -Doctor login page (the author,2022) ................................................................... 67

H.P.D.Mandara Prawarshana 1 Web design and Development

 Figure 4343 -Doctor dashboard (the author,2022) ................................................................... 68
Figure 4444 - View Patient Page(the author) ......................................................................... 69
Figure 4545 -View appointment (the author ,2022) ...................................................................69
Figure 4646 -Staff Login page (the author ,2022) .....................................................................70
Figure 4747 -Staff page (the author ,2022) ............................................................................70
Figure 4848 -Add doctor page (the author ,2022) ...................................................................... 1
Figure 4949 -Doctor delete page(the author ,2022) ....................................................................1
Figure 5050 -Patient page (the author ,2022) .......................................................................... 1
Figure 5151 -digram (the author ,2022) ................................................................................ 2
Figure 5252 -digram (the author ,2022) ................................................................................ 3
Figure 5353 --digram (the author ,2022) ............................................................................... 4
Figure 5454 -digram (the author ,2022) ................................................................................ 5
Figure 5555 -use-case diagram (the author,2022) ..................................................................... 6
Figure 5656 -ER digram (the author ,2022) ............................................................................ 7
Figure 5757 -Home page (the author ,2022) .......................................................................... 10
Figure 5858 -Home page (the author,2022) ........................................................................... 10
Figure 5959 -Patient login page (the author ,2022) .................................................................. 11
Figure 6060 -Login page code (the author ,2022) .................................................................... 11
Figure 6161 -Login php code (the author ,2022) ......................................................................12
Figure 6262 - Patient Dashboard (the author ,2022) ................................................................. 12
Figure 6363 -Patient Dashboard code (the author ,2022) ............................................................13
Figure 6464 -Appointment Page (the author ,2022) .................................................................. 13
Figure 6565 -Appointment Page code (the author ,2022) ............................................................ 14
Figure 6666 --Appointment Page code (the author ,2022) ..........................................................14
Figure 6767 -view patient page (the author ,2022) ................................................................... 15
Figure 6868 -view patient code (the author ,2022) ................................................................... 15
Figure 6969 php code (the author ,2022) ..............................................................................15
Figure 7070 -Admin login page (the author ,2022) ................................................................... 16
Figure 7171 -Admin login page (the author ,2022) .................................................................... 16
Figure 7272 php code (the author ,2022) ..............................................................................16
Figure 7373 -dashboard(the author ,2022) ............................................................................17
Figure 7474 -dashboard(the author ,2022) ............................................................................17
Figure 7575 View Doctor page (the author ,2022) ....................................................................18
Figure 7676 -View doctor (the author,2022) .......................................................................... 18
Figure 7777 -View Patient(the author ,2022) ......................................................................... 19
Figure 7878 -View Patient(the author ,2022) ......................................................................... 19
Figure 7979 - php code (the author ,2022) ............................................................................ 19
Figure 8080 -Add doctor (the author,2022) ........................................................................... 20
Figure 8181 -Add doctor (the author,2022) ........................................................................... 20
Figure 8282 php code (the author ,2022) ..............................................................................20
Figure 8383 -Delete Page(the author ,2022) .......................................................................... 21
Figure 8484 --Delete Page(the author ,2022) ......................................................................... 21

H.P.D.Mandara Prawarshana 2 Web design and Development

 Figure 8585 -Doctors Login Page (the author ,2022) ................................................................ 22
Figure 8686 -Doctors Login Page (the author ,2022) ................................................................ 22
Figure 8787 -php code (the author ,2022) .............................................................................22
Figure 8888 -Doctor Dashboard(the author,2022) .................................................................... 23
Figure 8989 -Doctor Dashboard(the author,2022) ................................................................... 23
Figure 9090 -view patient (the author ,2022) ........................................................................... 1
Figure 9191 -view patient (the author ,2022) .......................................................................... 1
Figure 9292 php code (the author ,2022) ............................................................................... 1
Figure 9393 -Appointment History Page (the author ,2022) ...........................................................1
Figure 9494 -Appointment History Page (the author ,2022) ...........................................................1
Figure 9595 -Design Document (the author ,2022) .................................................................... 2
Figure 9696 -Actual Website (the author ,2022) ....................................................................... 2
Figure 9797 Design Document (the author ,2022) ..................................................................... 3
Figure 9898 -Actual Website (the author ,2022) ....................................................................... 3
Figure 9999 -Design Document (the author ,2022) ..................................................................... 4
Figure 100100 -Actual Website (the author ,2022) .................................................................... 4
Figure 101101 -Design Document (the author ,2022) ................................................................. 5
Figure 102102 -Actual Website (the author ,2022) .................................................................... 5
Figure 103103 -Design Document (the author ,2022) ................................................................. 6
Figure 104104 -Actual Website (the author ,2022) .................................................................... 6
Figure 105105 -Design Document (the author ,2022) ................................................................. 7
Figure 106106 -Actual Website (the author ,2022) .................................................................... 7
Figure 107107 Design Document (the author ,2022) .................................................................. 8
Figure 108108 -Actual Website (the author ,2022) .................................................................... 8
Figure 109109 -Design Document (the author ,2022) ................................................................. 9
Figure 110110 -Actual Website (the author ,2022) .................................................................... 9
Figure 111111 -XAMPP Run (the author ,2022) ......................................................................10
Figure 112112 - Before entering the system (the author ,2022) ...................................................... 15
Figure 113113 -Display Message(the author ,2022) ..................................................................15
Figure 114114 -login page (the author ,2022) ........................................................................ 16
Figure 115115 -error message display (the author,2022) ............................................................ 16
Figure 116116 -Error message code (the author ,2022) ..............................................................16
Figure 117117 -login page (the author ,2022) ....................................................................... 17
Figure 118118 -error message display (the author,2022) ........................................................... 17
Figure 119 -Javascripcode (the author ,2022) ........................................................................ 17
Figure 120119 -Login page (the author ,2022) ....................................................................... 18
Figure 121120 -Dashboard(the author ,2022) ........................................................................ 18
Figure 122121 -Login code (the author ,2022) ........................................................................18
Figure 123122 -Add doctor details(the author,2022) ................................................................. 19
Figure 124123 --Add doctor details(the author,2022) ................................................................ 19
Figure 125124 -Patios Login page (the author ,2022) ................................................................20
Figure 126125 -Patios Login page (the author ,2022) ................................................................20

H.P.D.Mandara Prawarshana 3 Web design and Development

 Figure 127126 -Patios Login page (the author ,2022) ................................................................21
Figure 128127 -Patios Login page (the author ,2022) ................................................................21
Figure 129128 -Patios Login page (the author ,2022) ................................................................22
Figure 130129 -Patios Login page (the author ,2022) ................................................................22
Figure 131130 -code (the author ,2022) ...............................................................................22
Figure 132131 - Login page (the author ,2022) ....................................................................... 23
Figure 133132 -Login page (the author ,2022 ........................................................................ 23
Figure 134133 -code (the author ,2022) ...............................................................................23
Figure 135134 -Resistor form (the author,2022) ......................................................................24
Figure 136135 -Dashboard (the author,2022) ....................................................................... 24
Figure 137136 -Login page (the author ,2022) ........................................................................ 25
Figure 138137 Login page (the author,2022) ......................................................................... 25
Figure 139138 Error message code (the author ,2022) ...............................................................25
Figure 140139 -login page (the author ,2022) ........................................................................ 26
Figure 141140 -login page (the author ,2022) ........................................................................ 26
Figure 142141 Test Case 13 – Doctor(the author ,2022) .............................................................27
Figure 143142 - login page (the author ,2022) ....................................................................... 27
Figure 144143 -login page (the author ,2022) ........................................................................ 27
Figure 145 -LOGIN PAGE (THE author ,2022) ...................................................................... 28
Figure 146 -dashboard (the author ,2022) ............................................................................ 28
Figure 147144 -Xampp (the author ,2022) ............................................................................ 29
Figure 148145 -Xampp (the author ,2022) ............................................................................ 29
Figure 149146 -Xampp (the author ,2022) ........................................................................... 30

H.P.D.Mandara Prawarshana 4 Web design and Development

 Table 11 - Differences between HTTP and HTTPS (the author , 2022) .............................................. 11
Table 22 -advantages and disadvantages (the author ,2022) ......................................................... 41
Table 33 - advantages and disadvantage(the author,2022) ...........................................................43
Table 44 --Advantages and Disadvantages (geeksforgeeks.org/ ,2022) ..............................................47
Table 55 --Advantages and Disadvantages (geeksforgeeks.org) ..................................................... 48
Table 66 - Advantages and Disadvantages (geeksforgeeks.org) ......................................................49
Table 77 - Frontend and Backend (interviewbit.com ,2022) .......................................................... 56
Table 88 - Online website tools and Custom built sites( icecubedigital.com ,2022) ................................. 59
Table 99 -Test case (the author,2022) ................................................................................. 15
Table 1010 -test case 2(the author 2022) .............................................................................. 16
Table 1111 -Test case 3 (the author ,2022) ............................................................................17
Table 1212 -Test case 4 (the author,2022) ............................................................................ 18
Table 1313 -Test case 5(the author ,2022) ............................................................................ 19
Table 1414 -Test case 05 (the author ,2022) .......................................................................... 20
Table 1515 test case 6(the author ,2022) .............................................................................. 21
Table 1616 Test Case 08 (the author ,2022) ...........................................................................22
Table 1717 test case 9(the author ,2022) ............................................................................. 23
Table 1818 test case 10(the author ,2022) ............................................................................ 24
Table 1919 - Test Case 11(the author ,2022) ..........................................................................25
Table 2020 test case 12 (the author ,2022) ............................................................................ 26
Table 21 -Test case 14 (the author ,2022) ............................................................................. 28

H.P.D.Mandara Prawarshana 1 Web design and Development

Learning Outcomes:01
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.1 Website
A website is a group of interconnected, publicly accessible Web pages with a common domain
name. A website can be developed and maintained to fulfil a number of objectives by a person,
group, company, or organization. The Internet is crammed with a ton of information, which is one
of the most frequent reasons we stay on it daily. A website is made up of a collection of files and
web pages that contain information from various sources that have been meticulously organized
into files and web pages. (techopedia.com , 2022)
There are countless other types of websites, including ones for learning, news, porn, forums, social
networking, e-commerce, and more. A website's pages often contain both text and other types of
media. Nevertheless, the design of a website is not constrained by any restrictions. In this sense, a
website is a collection of web pages that are centrally organized and contain text, images, and other
forms of multimedia files that are presented to Internet users in a user-friendly and appealing
manner. Every website that can access the Internet is a part of the World Wide Web (WWW).
(techopedia.com , 2022)

The information on the websites is arranged and made available online using computer languages
like HTML and PHP. The primary technique for defining a website's structure and controlling its
behaviour while users browse through its pages is website programming. With the use of web
design approaches, the well-structured material is given a user-friendly appearance and feel. The
web pages must be hosted on a web server, which will enable them to be sent to any web browser
via HTTP, the primary protocol of the WWW and the four-letter acronym we see at the start of
every website, in order to be displayed on the monitors of visitor. (techopedia.com , 2022)

1.2 Designing and Development

The process of creating a web page is referred to as internet design. It consists of a wide range of
components, including creative style, content design, and website layout. Web design is a part of
web development, despite the fact that the terms web design and web development are commonly
used interchangeably. Web development, usually referred to as website development, describes the

H.P.D.Mandara Prawarshana 1 Web design and Development

activities involved in developing, constructing, and managing websites and web applications that
are used to access information online using a browser. However, it might also involve database
management, web programming, and web design.

Web design is the process of creating, arranging, and structuring content on the Internet. In
contemporary web design, utility is just as important as looks (functionality). Web apps, mobile
applications, and user interface design are just a few of the many applications that fall under the
umbrella of online design.

Website design, development, and upkeep are together referred to as web development. It covers
things like web publishing, web programming, database administration, and web design. It is the
development of an online application, such as a website. programming or processing that enables a
website to function as specified by its owner. It focuses on aspects of website design and
development like writing code and mark-up that have nothing to do with design. All basic text
pages, huge web apps, social network applications, and e-commerce systems are included in the
construction of the website. Accordingly following is the web development hierarchy
(geeksforgeeks.org , 2022)
 Client-side coding
HTML, CSS, and JavaScript are used to create client-side code, which is executed inside a web
browser with little to no access to the underlying operating system. Front-end or client-side web
developers employ their programming skills to make user-friendly websites. By doing so, they
create slide shows, shopping pages, and home pages. Back-end or server-side developers create,
plan, and oversee the server-side code necessary for data exchange.
 Server-side coding
The server-side code takes care of tasks like validating submitted data and requests, storing and
retrieving data from databases, and sending the appropriate data to the client as needed.
 Database technology
It is possible for consumers to quickly and intuitively go back and retrieve the information they're
looking for thanks to database technologies, which take information and store, organize, and
process it in this way. There are many different types of database technology, including basic, huge,
and tiny.

1.3 The website design and development process.

A web application or website development project must follow a set of specified, foreseeable
procedures in order to be effectively completed. In order to guarantee that every component of the

H.P.D.Mandara Prawarshana 2 Web design and Development

project is handled and delivered on time, this procedure coordinates development resources,
stakeholders, and team members. All plain text pages that are part of a website's development are
included, as are complex online apps, social networking tools, and e-commerce platforms. Although
the specific steps will differ significantly from designer to designer, the fundamentals remain the
same. The process for developing a website is therefore described below.

a. Information Gathering
The first step in creating a fantastic website is gathering information. When developing the
appearance of your website, there are numerous things to take into account. This is the most
important step because it necessitates an in-depth comprehension of the business for which it was
created. It's about getting to know you, your professional aspirations, and how the internet can assist
you in achieving them. (geeksforgeeks.org , 2022)

b. Planning
Thinking through the steps necessary to accomplish a goal is the process of planning. Foresight, the
fundamental capacity for mental time travel, is the foundation of planning. The development of
foresight the capacity to plan ahead is viewed as a crucial step in human evolution. Based on the
data gathered in step one, it's time to formulate a plan for your website. A site map is created during
this step. All major topic categories on the website are listed in the site map, along with any
applicable subtopics. This acts as a roadmap for the content that will be included on the website and
is crucial for building a dependable and user-friendly navigation system. Remember to keep your
customer the end user in mind when you create your website. After all, it will be these individuals
who learn about and purchase your service or goods. A user-friendly user interface, which forms the
basis, creates a website that is simple to navigate. (strate.education , 2022)

c. Design
A design is a blueprint or set of instructions for constructing a system, engaging in an activity, or
carrying out a process. It can also be the output of a plan in the form of a prototype, finished good,
or method. It's time to choose the design of your website based on the data you've acquired so far.
The target audience is one of the most crucial elements to take into account. A website made for a
financial institution will be significantly different from one made for youngsters. In order to assist
build the firm's identity on the website, it is important to use features like your company logo or
colors throughout the design phase. Your web designer will create one or more design prototypes
for your website. Typically, this is a.jpg image showing how the final design will appear. Most
website designers provide their designs to you by email, but others go a step further and allow you

H.P.D.Mandara Prawarshana 3 Web design and Development

access to a protected area. Customers may see the ongoing work there on their website.
(strate.education , 2022)

d. Development
The creation of the website occurs during the development stage. Your web designer will use each
unique visual from the prototype to build the finished, functional site at this stage. Usually, this is
accomplished by first establishing the homepage and then a "shell" for the internal pages. The basic
navigation architecture is included in the shell, which acts as a template for the content pages of
your website. Your designer will use your content and place it in the appropriate locations on the
website once the site's shell is finished. Having said that, front-end web development expertise is
necessary for a successful website from a technical standpoint. This entails writing precise HTML
and CSS code that complies with current web standards, as well as ensuring the greatest usability
and accessibility for the broadest audience. (strate.education , 2022)

e. Testing and Delivery

Someone who is knowledgeable about current web design and development standards makes for a
better website developer. The two primary technologies employed are HTML and CSS (cascading
style sheets). The designer should make sure that all of the code created for your website is
validated as part of the testing process. An FTP (File Transfer Protocol) program is used to upload
website files to your server. Some web designers may either suggest a host for your website or
provide domain name registration and hosting services. Your website should be reviewed again
after setting up these accounts and uploading them to the server. This is only a safety measure.
Ensure that all content is posted accurately and that the website functions properly.

Last-minute planning in this case includes code checking and SEO (search engine optimization).
This is the procedure for adding features to your website, such as titles, descriptions, and keyword
tags. There are numerous Word Press plug-in that improve the functionality of Word Press as a
whole; the majority of them are directly related to improving the SEO of your website.
(strate.education , 2022)

f. Maintenance
How frequently you want to make additions or modifications to your website will determine how
much it will cost to maintain. Many site designers provide inexpensive maintenance services.
Offering fresh content or goods frequently is a tactic to draw devoted site visitors, like professionals.
A CMS (Material Management System) like Word Press may be placed on your website if you

H.P.D.Mandara Prawarshana 4 Web design and Development

decide to update your content yourself. This would be chosen in the course of the planning process.
A site with a CMS that is controlled by the database will be created by your designer using internet
software.
You can edit the website content yourself if it uses a CMS. A background management area with an
online text editor will be available to you (similar to a mini version of Microsoft Word). This allows
you to edit existing material or, if you're feeling very daring, even create new pages and content.
There are countless options. How you make changes to your own website is entirely up to you.
Some people like to be in full control because they can change their websites whenever they want.
Others prefer to outsource the website entirely because they have many other tasks that are more
critical than they can handle in-house. Your web designer can handle website maintenance so you
don't have to worry about it during these busy times, where they come from. Regular site backups,
Word Press upgrades, installing new plugins and similar tasks are additional types of maintenance.
(strate.education , 2022)

1.4 Web Designing

The building of websites and pages for a company's brand, information, and user-friendliness is
known as web design. Whether you're creating a website, a mobile app, or updating material on a
web page, appearance and design are essential components. You may apply for jobs where your
creativity can assist a company better its brand, message, and bottom line by developing your web
design talents. Web design is the practice of creating websites. It takes into account a number of
things, including website layout, content development, and visual design. Web design is a subset of
the larger subject of "web development," despite the fact that the terms "web design" and "web
development" are frequently used interchangeably. (.interaction-design.org , 2022)

Figure 11 - Web designing (interaction-design.org , 2022)

Websites are made using the mark-up language HTML. HTML tags are used by web designers to
indicate the content and information of each page while creating a web page. CSS is frequently used

H.P.D.Mandara Prawarshana 5 Web design and Development

to specify the arrangement and appearance of items on a website. Because of this, the majority of
websites use HTML and CSS to define how each page will appear in a browser.

Here's a "WYSIWYG" editor used by some web designers, while others prefer hand-coding sites.
This type of editor provides a visual user interface to allow website layout customization. A
common option is to use a content management system such as Word Press or Joomla. Since
graphic designers create images for use on the web, graphic design and web design can overlap.
Even some graphics programs, such as Adobe Photoshop, have a "Save for Web" option to save
photos for use on the Internet. Images are developed separately, but HTML and CSS are used to
create the look and feel of a website.(.interaction-design.org , 2022)

1.5 Web Publishing

The act of publishing unique information online is called web publishing. Building and uploading
websites, maintaining relevant web pages and providing information online are all part of the
process. In addition to e-books and blogs, online publishing also includes community, commercial,
and personal websites. The act of publishing information for distribution on the web. It includes
creating, managing and publishing websites as well as bogging. Published material may consist of
text, images, moving images, and other media. To publish information on the web, three
components are required. Accordingly, the following are the three components. (.nielit.gov.in ,
2022)

1) Web development software

Web development software may be used by both experienced web developers and non-web
developers to design websites, mobile applications, and other digital goods. Although computer
languages like HTML, CSS, JavaScript, and Python are the fundamental tools used in web
development, there are other top web development tools, web design software, website builders,
and content management systems (CMS).
2) An Internet connection
Using the Web browser and a networked computer, Web Connection enables you to configure
various settings and check the system's status. You can quickly enter the text from a computer for
network settings and destination requirements using this application.
3) A web server.
A web server is a computer that houses web server software and the files that make up a website. A
web server establishes a connection to the Internet and facilitates the physical data exchange with
other web-connected devices.

H.P.D.Mandara Prawarshana 6 Web design and Development

A basic web interface like WordPress or a professional site design package like Dreamweaver can
be used as the software. The material is uploaded to the web server via an internet connection.
Many smaller websites are frequently housed on shared servers that host several websites, even if
major websites may employ a dedicated web server. The majority of blogs are hosted utilizing a
free service like Blogger on open web servers. Publishing material on the web is almost free since it
doesn't require tangible resources like paper and ink. Anyone who satisfies the three prerequisites
listed above is eligible to operate as a web publisher. Additionally, the audience is limitless because
anyone with an internet connection can access content that has been published online. Because of
these benefits, in-person publishing has entered a new era that was previously unimaginable.

1.6 Website Accessing

A piece of software called a web browser enables you to look up and see websites on the Internet.
Even if you weren't aware of it, you are currently reading this page through a web browser. There
are many various types of web browsers, but some of the most popular ones include Mozilla Firefox,
Google Chrome, and Safari. The browser makes quick connections with globally dispersed web
servers. The information included in the packages is then used to construct the website. Continue
reading to learn how this procedure operates and what steps must be taken before a web page is
made accessible to users.

1.7 Protocol
A protocol is a collection of instructions for exchanging data. Each step and process of
communication between two or more computers has a set of rules that apply to it. For networks to
transport data successfully, they must abide by certain guidelines. Like programming languages,
protocols are built on certain computer rules and regulations and are created for efficiency. Each
rule has a particular definition and a name that is exclusive to it. Protocols lay out the rules for
communication and give specifics on the steps taken during data transmission. That is, Speaking the
same language allows two people to converse efficiently. Similar to software, if two hardware
devices use the same protocol, they can talk to each other regardless of the device's maker or
category. For instance, using the standard mail protocol, an Apple iPhone may send an email to an
Android smart phone. A web page from a Unix-based web server can be loaded using a standard
web protocol on a Windows computer. Accordingly, several protocols have been identified. Namely
Communication Protocol, TCP/IP Protocol, File Transfer Protocol (FTP), Hypertext Transfer
Protocol (HTTP) and Hypertext Transfer Protocol Secure (HTTPS). Accordingly, the protocol is
described below. (techopedia.com , 2022)

H.P.D.Mandara Prawarshana 7 Web design and Development

1. Communication Protocol
Different network devices can interact with one another thanks to communication protocols. They
can be used for crucial operations like file transfers between devices and internet access. They are
used in both analog and digital communications. A communication protocol is a set of guidelines
that enables information to be transmitted between two or more entities in a communication system
over any kind of physical quantity variation. rules of protocol, syntax,

Figure 22 - Communication Protocol (thecenterforgrowth.com , 2022)

2. TCP/IP Protocol
Message formats and processes are governed by protocols, which enable data interchange between
computers and application programs. Each computer engaged in the communication must abide by
these principles in order for the receiving host to comprehend the message. In terms of layers, the
TCP/IP suite of protocols can be understood. TCP/IP, also known as the Internet Protocol Suite, is a
framework for classifying the collection of communication protocols used on the Internet and other
similar computer networks based on functional requirements. Transmission Control Protocol, User
Datagram Protocol, and Internet Protocol are the three fundamental protocols in the suite.
Accordingly, four protocols can be identified. These are File Transfer Protocol (FTP), Hypertext
Transfer Protocol (HTTP), Hypertext Transfer Protocol Secure (HTTPS) and Secure Shell (SSH).

Figure 33 - TCP/IP Protocol (novell.com , 2022)

H.P.D.Mandara Prawarshana 8 Web design and Development

 File Transfer Protocol (FTP)
Transmission Control Protocol/Internet Protocol (TCP/IP) connections can be used to send files
between computers using the FTP (File Transfer Protocol) network protocol. FTP is regarded as an
application layer protocol within the TCP/IP family of protocols. The end user's machine is
commonly referred to as the local host in an FTP transaction. The remote host, which is often a
server, is the second machine in an FTP connection. To transfer files using FTP, both computers
must be networked together and properly configured. For clients to access these services, FTP
software must be installed and servers must be configured to run FTP services.

FTP is still often used to transmit files behind the scenes for other applications, such as financial
services, even though many file transfers may be carried out using HTTP, another protocol in the
TCP/IP family. New programs can occasionally be downloaded via web browsers. (techtarget.com ,
2022)

Figure 44 -File Transfer Protocol (essaystreak.com , 2020)

 Hypertext Transfer Protocol (HTTP)

The HTTP (Hypertext Transfer Protocol) protocol is a collection of guidelines for sending files over
the internet, including text, pictures, sound, video, and other multimedia assets. User starts utilizing
HTTP as soon as they open their web browser. The TCP/IP protocol family, which serves as the
Internet's building block, is built upon by the application protocol HTTP. The most recent HTTP
version is HTTP/2, which was released in May 2015. It is a replacement for HTTP 1.1 but does not
render it obsolete. (techtarget.com , 2020)

Resources are sent across the internet between client devices and servers via the HTTP protocol.
Client devices ask servers for the resources required to load a web page; the servers respond by
sending the client devices the requested resources. Sub-documents, such as information on graphics,

H.P.D.Mandara Prawarshana 9 Web design and Development

text, text layouts, etc., that are shared by requests and answers are put together by a client web
browser to show the entire web page file.

Figure 55 - Hypertext Transfer Protocol (techtarget.com , 2020)

 Hypertext Transfer Protocol Secure (HTTPS)

The basic protocol used to transmit data between a web browser and a website is HTTP, while
HTTPS is the secure version of HTTP. To strengthen the security of data transport, HTTPS is
encrypted. This is crucial when customers register into a bank account, email account, or health
insurance provider and transfer sensitive data. Any website should utilize HTTPS, especially those
that request login information. Websites that do not employ HTTPS are indicated differently from
those that do in contemporary web browsers like Chrome. If you want to know whether a website is
secure, look for a padlock in the URL bar. Google Chrome and other browsers flag all non-HTTPS
websites as insecure, demonstrating how seriously web browsers take HTTPS. (.cloudflare.com ,
2022)

Figure 66 - HTTP and HTTPS (.cloudflare.com , 2022)

H.P.D.Mandara Prawarshana 10 Web design and Development

Differences between HTTP and HTTPS

Hypertext Transfer Protocol (HTTP) Hypertext Transfer Protocol Secure (HTTPS)

It uses TCP/IP to function. There isn't a separate protocol for HTTPS.

HTTP is used for operation, but a TLS/SSL
connection is used for encryption.
Hypertext Transfer Protocol is what it is. It is a secure hypertext transfer protocol.

It is less secure because hackers may be able to It is intended to stop hackers from gaining
access the data. access to important data. It is protected from
such assaults.
The data being transmitted is not encrypted Data is encrypted before transmission via
using HTTP. Because of this, there is a greater HTTPS. The original data is recovered at the
possibility that hackers will have access to receiving end using descrambling. As a result,
transmitted information. the information transmitted is secure.
HTTP websites do not need SSL. HTTPS requires an SSL certificate.

HTTP is faster. Slower than HTTP

Websites using HTTP don't employ encryption. Websites using HTTPS encrypt user data.

Table 11 - Differences between HTTP and HTTPS (the author , 2022)

 Secure Shell (SSH)

The SSH Protocol uses the access credential SSH (Secure Shell). To put it another way, it is a
cryptographic network protocol used to send encrypted data over a network. It enables you to
remotely log in to one system from another by connecting to a server, or multiple servers, without
having to remember or enter your password for each system.(geeksforgeeks.org , 2022)

As a safe alternative to unencrypted Telnet, the SSH service was developed and makes use of
cryptographic methods to guarantee that all communications to and from the remote server are
encrypted. By relaying input from the client to the host and output back to the client, it offers a way
for authenticating a remote user. An example of a common SSH prompt is shown below. Any
Linux or macOS user can connect directly from the terminal window via SSH to their remote server.

H.P.D.Mandara Prawarshana 11 Web design and Development

Users of Windows can benefit from SSH clients like Putty. The same as if you were physically
using the remote computer, you can run shell commands on it. (geeksforgeeks.org , 2022)

Figure 77 - Secure Shell (SSH (geeksforgeeks.org , 2022)

1.8 Server and Hardware

A server is a piece of hardware or software that processes requests sent over a network and answers
to them. A client is the device that submits a request and waits for a response from the server. The
computer system that accepts requests for web files and delivers those files to the client is referred
to as a "server" on the Internet.(computerhope.com , 2022)

A computer's actual parts, whether they are analog or digital, are collectively referred to as
"hardware" in this context. The word "hardware" separates the physical components of a computer
system from "software," which is made up of written, machine-readable instructions or programs
that specify what to do and when to execute physical components.(techtarget.com , 2022)

Server Hardware

Although servers are different from personal computers, they have many characteristics with
desktop technology. They share similar fundamental components such as power supply, RAM, and
CPU. However, server hardware may seem quite different to people who have solely examined
desktop gear up to this point. Compared to PCs, server hardware appears to be more sophisticated
overall. Furthermore, redundant and/or hot-swappable parts are frequently used in servers. Tower,
rack, and blade servers are the three different types of server hardware.

1.9 Operating Systems

An operating system (OS) serves as a conduit between computer hardware and users. An operating
system is a piece of software that manages files, memory, processes, input, output, and peripheral
devices like disk drives and printers. It also handles input and output. Applications can

H.P.D.Mandara Prawarshana 12 Web design and Development

communicate with a computer's hardware through the use of an operating system, which is software.
The kernel is the name of the piece of software that houses the fundamental elements of the
operating system.

The main functions of an operating system are to manage the hardware and software resources of
the system and to enable applications (spftwares) to communicate with a computer's hardware. A
few of the most well-known operating systems are Linux, Windows, VMS, OS/400, AIX, z/OS, etc.
Nearly every item in use today has an operating system, including TVs, vehicles, personal
computers, mainframe computers, and mobile phones. (tutorialspoint.com , 2022)

1.10 Types of Operating System

1. Batch Operating System
When using a batch operating system, the users don't speak to the computer directly. On an offline
device like a punch card, each user prepares their work and submits it to the computer operator.
Jobs with comparable requirements are batched together and run as a group to speed up processing.
The operator then sorts the programs with similar requirements into batches after the programmers
have exited their programs.

Figure 88 -Batch Operating System (quora.com , 2022)

2. Time-Sharing Operating Systems

Through time-sharing, many users who are seated at different terminals can utilize a certain
computer system simultaneously. Multiprogramming logically extends to multitasking or time-
sharing systems. When numerous users share a processor's time concurrently, this is referred to as
time-sharing. The primary distinction between multi-programmed batch systems and time-sharing
systems is that multi-programmed batch systems aim to optimize processor utilization, whereas
time-sharing systems aim to reduce reaction time.

H.P.D.Mandara Prawarshana 13 Web design and Development

 Figure 99 -Time-Sharing Operating Systems(byjus.com , 2022)

3. Distributed Operating System

A fundamental kind of operating system is a distributed operating system (DOS). To support
several real-time applications and users, distributed systems need numerous central processors. Jobs
for data processing are therefore divided among the processors. Through a single communication
channel, it links several computers. Each of these systems also has its own processor and memory.
These CPUs may also communicate through phone lines or high-speed buses. One entity is
considered to be each individual system that communicates over a single channel. They go by the
name "loosely connected systems" as well.(.javatpoint.com , 2022)

Figure 1010 -Distributed Operating System (.javatpoint.com , 2022)

4. Network Operating System

These kinds of operating systems are a recent development in computer technology that is quickly
gaining adoption on a global scale. Over a shared communication network, several separate

H.P.D.Mandara Prawarshana 14 Web design and Development

networked computers can communicate with one another. The CPU and memory are separate for
every independent system. These are referred to as scattered or weakly coupled systems. The
processors in these systems come in a range of shapes and capacities. One user may always access
files or apps that are not physically present on their system but are on other systems connected to
that network thanks to the employment of these operating systems, which enables remote access
within the devices connected to that network.(.javatpoint.com , 2022)

Figure 1111 - Network Operating System(.javatpoint.com , 2022)

5. Real-Time Operating System

An operating system (OS) that ensures real-time applications have a given capability by a certain
deadline is known as a real-time operating system (RTOS). RTOSes are intended for time-sensitive
devices like microcontrollers and critical systems. Requirements for RTOS processing speed are
expressed in milliseconds. Any hesitation in answering might have grave repercussions. Real-time
operating systems (RTOSes) perform similar tasks to general-purpose operating systems (GPOSes),
such as Linux, Microsoft Windows, or macOS, but are built with a scheduler that can adhere to
strict deadlines for various tasks. (techtarget.com, 2020)

Figure 1212 -Real-Time Operating System(onlogic.com,2022)

H.P.D.Mandara Prawarshana 15 Web design and Development

1.11 Web Server Software
A web server is a piece of hardware and software that responds to client requests sent over the
World Wide Web using the HTTP (Hypertext Transfer Protocol) and other protocols. A web
server's primary responsibility is to show website content by storing, processing, and sending
visitors web pages. A web server's main job is to display the website's content. A web server that is
only used internally and is not available to the general public is known as an Intranet server. A web
browser sends a request to the Web for the appropriate web page when someone requests a website
by typing the URL or web address (such as WWW.Google.com) into the address bar of the browser.

Figure 1313 -Web Server Software(c-sharpcorner.com , 2014)

1.12 Types of Web Server Software

 Apache HTTP Server

A free and open-source HTTP server for modern operating systems like UNIX and Windows is
what the Apache HTTP Server project aims to build and maintain. The objective of this project is to
build a server that is secure, effective, and extendible while synchronizing HTTP services with
current HTTP needs. The Apache HTTP Server ("httpd"), which was created in 1995, has been the
most widely used web server on the Internet since April 1996. It marked its 20th year as a project in
February 2015.
 Internet Information Services
The well-known Microsoft web server Internet Information Server (IIS) is used to host and deliver
ASP.NET and ASP Web applications for Internet-based services. The task of a web server is to
reply to user inquiries. IIS receives requests from clients, processes them, and then sends the results
back to the clients. A collection of web development and management tools, search engines, and

H.P.D.Mandara Prawarshana 16 Web design and Development

web-based applications that connect to SQL Server databases is known as IIS (Internet Information
Server).
 LIGHTTPD
Lighttpd, which is pronounced "light," is a web server that quickly redefines the effectiveness of a
web server by being designed and configured for high-performance scenarios. Its characteristics
include security, speed, compliance, and flexibility. It outperforms other web servers with a
minimal memory footprint, efficient CPU load management, and a robust feature set (FastCGI,
SCGI, Auth, Output Compression, URL-Rewriting, and more). Any server having issues with load
should use Lighttpd as its solution.

1.2 Identify and define the types of DNS and the uses of it, with clarifications on how domain
names are structured. Review the effect of search engines on website performance. Provide
evidence-based support for improving a site’s index value and rank of the Hospital
Management System (HMS) through search engine optimization.

1.13 DNS (Domain Name System)

The phone book of the Internet is the Domain Name System (DNS). Humans use domain names,
such as nytimes.com or espn.com, to access information online. Through Internet Protocol (IP)
addresses, web browsers may communicate. In order for browsers to load Internet resources, DNS
converts domain names to IP addresses. Each Internet-connected device has a distinct IP address
that other computers can use to find the device. DNS servers take the place of the necessity for
people to remember IP addresses like 192.168.1.1 (in IPv4) or more complicated modern
alphanumeric IP addresses like 2400:cb00:2048:1::c629:d7a2 (in IPv6). Accordingly, several types
of DNS can be identified.The four DNS servers are recursive solvers, root name servers, TLD name
servers, and authoritative name servers. These four DNS servers cooperate to give the client the IP
address for a particular domain during a standard DNS lookup (the client is typically a stub
resolver-a simple resolver built into an operating system). The DNS is explained
below.(cloudflare.com , 2022)

1. DNS Recursive Resolver

The first stop in a DNS query is a recursive resolver, commonly referred to as a DNS predecessor.
A DNS name-server and a client are connected through the recursive resolver. A recursive resolver
will reply to a DNS request from a web client by using cached information, or it will make three
requests: one to a root name-server, one to a TLD name-server, and one to an authoritative name-
server. The recursive resolver subsequently provides a response to the client after getting a reply
from the authoritative name-server that includes the requested IP address.

H.P.D.Mandara Prawarshana 17 Web design and Development

The recursive resolver will save the data it receives from authoritative name servers during this
procedure. The resolver can skip the name-server communication procedure and just provide the
client with the requested record from its cache when a client asks the IP address of a domain name
that was just requested by another client.(cloudflare.com , 2022)

2. DNS Root Name-server

Every recursive resolver is aware of the 13 DNS root name-servers, and they serve as the starting
point for its search for DNS records. When a recursive resolver asks a root server for help, the root
nameserver replies by pointing the recursive resolver to a TLD nameserver depending on the
domain's extension (.com, .net, .org, etc.). The Internet Corporation for Assigned Names and
Numbers, a non-profit, is in charge of managing the root name-servers (ICANN).

It should be noted that even though there are 13 root nameservers, the root nameserver system does
not consist of only those 13 computers. There are 13 different types of root nameservers, but each
one is duplicated globally and uses Anycast routing to deliver quick replies. There are 632 different
servers if all the root nameserver instances were added up.(cloudflare.com , 2022)

3. TLD Name-server
A TLD nameserver keeps track of all the information for domain names that have the same domain
extension, such as.com,.net, or whatever follows the last dot in a URL. For instance, a.com TLD
nameserver stores data for each website whose domain name ends in.com. After a root nameserver
responds to a query for Google.com, the recursive resolver will then send a query to a nameserver
with the.com TLD, which will answer by referring to the authoritative nameserver (see below) for
that domain.(cloudflare.com , 2022)

4. Authoritative Name-server
A TLD name server's answer to a recursive resolver will point it in the direction of an authoritative
nameserver. The final stop on the resolver's path to an IP address is often the authoritative
nameserver. When a domain has a CNAME record (alias), the authoritative nameserver will provide
the recursive resolver with an alias domain instead of the IP address of that server found in the DNS
A record. If the domain has a CNAME record, the recursive resolver will then need to conduct a
brand-new DNS lookup in order to obtain a record from an authoritative nameserver.
(cloudflare.com , 2022)

H.P.D.Mandara Prawarshana 18 Web design and Development

1.14 Domain Name
A domain name is a website's name. A domain name is the address that enables Internet users to
access a website. Computers are located and recognized using their domain names. Computers
utilize a set of numbers called IP addresses. Humans struggle to remember number sequences.
Domain names were developed and are currently used to identify entities on the Internet instead of
IP addresses. A domain name can be made up of any alphabetic or numeric combination, and it can
also include one of the many domain name extensions, including.com,.net, and others.

Figure 1414 - Domain Name (firstsiteguide.com , 2022)

1.15 Search Engine

A search engine is a piece of software available over the Internet that runs a user's query against a
database of information. The search engine offers a list of outcomes that most closely match the
user's search criteria. The Internet is now home to a wide variety of search engines, each with its
own capabilities and features. Archie, the first search engine ever created, was used to look for FTP
files, and Veronica, the first text-based search engine, was considered the first. Google is now the
most widely used and well-known search engine. AOL, Ask.com, Baidu, Bing, DuckDuckGo, and
Yahoo are some of the other well-known search engines.Accordingly, some search engine images
are shown below. (computerhope.com , 2022)

Figure 1515 -Search Engine(mangools.com , 2022)

H.P.D.Mandara Prawarshana 19 Web design and Development

How are search engines operated?
Web crawlers are used by search engines to index billions of pages. Crawlers, sometimes referred to
as spiders or bots, search the internet for new pages by clicking on links. The pages are then added
to an index from which search engines can retrieve information. If you're doing SEO, understanding
how search engines work is essential.Search engines operate by performing three main tasks. That
is,
Crawling - Search engines use the discovery process known as crawling to send out a group of
robots, sometimes referred to as crawlers or spiders, to look for new and updated material. It doesn't
matter what format the material is in - a web page, an image, a video, a PDF, etc. – links are what
allow users to find it. In order to locate new URLs, Google bot first fetches a few web pages and
then follows the links on those sites. The crawler is able to find new content by following this
network of links, adding it to their Caffeine index, a sizable database of found URLs, to be later
retrieved by searchers looking for information that the content on that URL is a good match
for..(moz.com , 2022)

Figure 1616 -Crawling (moz.com , 2022)

Indexing - In an index, which is a sizable database of all the content search engines have found and
deem suitable for serving to users, they process and store the information they have discovered.
Search engines use indexing to organize information before a search in order to provide incredibly
quick answers to user queries. Search engines will find relevant information very slowly by sifting
through individual pages for keywords and topics.

How is search indexing carried out? Web crawlers, commonly referred to as online spiders, collect
material from web pages and organize it according to keywords to create search indexes for
websites. When producing search results, many search tools also take search intent and semantic
meaning into account.(moz.com , 2022)

H.P.D.Mandara Prawarshana 20 Web design and Development

 Figure 1717 -Indexing ((moz.com , 2022)

Ranking - Explore engines search their index for information that is extremely relevant to a user's
search, organize that content, and then attempt to answer the user's query. Ranking refers to the
process of ranking search results according to relevancy. In general, you can assume that a website's
ranking indicates how relevant the search engine considers it to the user's query. (moz.com , 2022)

The age of the site, the quality of its link portfolio, the relevancy of the pages, social signals, and
the amount of competition are just a few examples of the many variables that affect search engine
rankings. According to Google, 200 variables—many of which are outside the website owner's
control—are taken into account when determining a site's search engine ranking. For example, a
white-hat SEO campaign seeks to influence these factors favorably and raise a website's overall
search engine rating.

1.16 Search Engine Optimization (SEO)

The process of influencing how visible a website or web page is in a search engine's "natural" or
unpaid search results is known as search engine optimization. SEO, or search engine optimization,
is the art and science of improving a page's ranking in search engines like Google. Higher search
engine results may result in more visitors to a website because search is one of the most important
ways for people to find information online. The results page includes sponsored advertisements for
Google and other search engines at the top of the page in addition to standard results, or what search
providers refer to as "organic search results." To distinguish it from paid search traffic, SEO traffic
is occasionally referred to as "organic search traffic." Paid search is also known as search engine
marketing (SEM) or pay-per-click (PPC).Search engine optimization is a crucial part of online
marketing since search is one of the most common ways consumers use the internet. (oberlo.com)

H.P.D.Mandara Prawarshana 21 Web design and Development

 Figure 1818 -Search Engine Optimization (oberlo.com , 2022)

1.17 Search Engine Optimization works

Search engines like Google determine which websites to display for each individual query using an
algorithm or set of criteria. These algorithms have become fairly complex, using hundreds or even
thousands of distinct ranking factors to determine the rankings of various SRPs. On the other hand,
search engines use three essential criteria to assess a site's quality and determine where it should be
ranked.

Bots are used by search engines like Google and Bing to crawl online pages by moving between
websites, gathering data about them, and indexing them. Imagine the index as a huge library where
a librarian can bring up a specific book (or web page) to assist you locate what you're looking for at
the moment.

The order in which pages should appear in the search results for a particular query is then
determined by algorithms that examine sites in the index while accounting for hundreds of ranking
criteria or signals. In our hypothetical library, the librarian has read every single book there and is
able to pinpoint which one would provide the solutions to your problems.

 Links - Search engines like Google determine which websites to display for each individual
query using an algorithm or set of criteria. These algorithms have become fairly complex, using
hundreds or even thousands of distinct ranking factors to determine the rankings of various
SRPs. On the other hand, search engines use three essential criteria to assess a site's quality and
determine where it should be ranked.

H.P.D.Mandara Prawarshana 22 Web design and Development

 Content - Search engines frequently assess a web page's content to see if it is relevant to a
specific search query in addition to links. An essential component of SEO is the creation of
content using the keywords that search engine users are using.

 Page Structure - The third crucial element of SEO is page structure. Because web pages are
written in HTML, the HTML code's organization may have an impact on how well a search
engine can assess a page. By including important keywords in the page headers, URL, and title,
website owners can increase their site's SEO. They should also make sure their site can be
crawled. That is, to improve one's position in search results, search engine optimization entails
adjusting each of these core elements of search engine algorithms.

1.18 Search Engine Optimization Technique

The art and science of search engine optimization (SEO) involves raising a page's position in search
engines like Google. Ranking higher in search engines may enhance a website's traffic because
search is one of the primary ways users find material online. The first step in improving a site's
search rankings is understanding how search engines work. Several SEO strategies are employed to
optimize the search engine in order to raise a site's rating.

 Keyword Research
The general starting point for SEO is this approach, which involves examining the keywords that a
site already ranks for, the keywords that competitors rank for, and any additional phrases that
potential customers might be searching for. It might be possible to improve your current content and
create new content by learning the phrases that people use in Google Search and other search
engines.

 Content Marketing
Content marketing may start after potential keywords have been identified. This might be done to
make completely new material or to update existing material. It's crucial to research existing
information, produce engaging content that provides a wonderful user experience, and optimize it
for search engine results since Google and other search engines favour high-quality content. On
social media, quality content has a higher likelihood of being shared and linked to.

 Link Building
Since links from other websites—referred to as "back links" in SEO parlance—are one of Google's
and other major search engines' main ranking factors, obtaining high-quality back links is one of the

H.P.D.Mandara Prawarshana 23 Web design and Development

most important tools that SEOs have. This could entail encouraging other websites to connect to
you, getting in touch with them and building relationships with their web masters, submitting
websites to pertinent internet directories, and so on.

 On-Page Optimization
Upgrades to the page's actual structure, which the web master has total control over, may have
major SEO benefits aside from off-page considerations like links. A page's URL may be optimized
for keyword inclusion, the page title tag can be updated to incorporate the search term, and the Alt
attribute can be used to describe images. The meta description tag, for example, can benefit from
updating. Although these elements don't directly affect search rankings, they can increase the click
through rate from SERPs.

 Site Architecture Optimization

External links aren't the sole factor in SEO; internal links, or links on one's own website, frequently
play a significant role. By ensuring that significant websites are linked to and that the right anchor
text is used in those links to increase a page's relevance for certain queries, it helps a search engine
optimizer improve a site's SEO. To make it easier for search engines to recognize and crawl all of
the pages on larger sites, site mapping in XML may be an effective strategy.

 Semantic Mark-up
The semantic mark-up of the website should be improved as another SEO strategy by SEO experts.
To communicate the meaning behind a website's content, such as identifying who created a piece of
content or identifying the subject and kind of information on a page, semantic mark-up (such as
Schema.org) is utilized. Semantic mark-up may help display rich snippets like supplemental text,
review ratings, and even photos on the search results page. Rich snippets can increase search CTP,
which increases organic traffic, but they have little impact on search rankings.
1. Publish Relevant Content
It all comes down to how your audience feels about the content's applicability to particular subjects,
problems, demands, or interests. The capacity of your material to assist people in making decisions
or advancing toward objectives is referred to as its utility. There is no alternative for excellent
content, which is the most crucial aspect in deciding your search engine position. Increased site
traffic enhances the authority and relevance of your site since it results from the creation of quality
content specifically for your target audience.

Multiple Keyword Phrases

H.P.D.Mandara Prawarshana 24 Web design and Development

Unless the terms are quite similar, it might be challenging to acquire search engine results for many
keyword phrases on a single web page. You may search for "biomedical engineering careers" and
"biomedical engineering jobs" on the same page. A ranking for "student affairs," "student dean,"
"gender discrimination," or "violence reporting processes" on a single page is unlikely to exist. You
must create a unique page for each term you want to target if you want your website to rank for a
variety of keyword phrases.

Placing Keywords
That is, the following questions should be taken into account after choosing a keyword phrase for a
certain page. In other words, can the URL page (using keywords in folders) include any or all of the
keyword phrases? , Can I use the keyword phrase in its entirety or in part on the title page? Can the
headers and subheadings of the pages include all or some of the keyword phrases? The truth should
be investigated. Your search engine rating may increase if you respond positively to questions. Be
easy to use and natural. The keyword "engineering" shouldn't exist three times or more in the URL,
and the phrase "northern lights" shouldn't be on the title page or in any headers.

Search engine results are greatly influenced by content, which includes page URLs, titles, and
headers. Throughout the content, use your keyword phrase two to four times, including once or
twice in the introduction and conclusion. Don't forget to highlight those keyword phrases with bold,
italics, heading tags, and other emphasis tags, but don't go overboard. You should read your own
writing in your own language.

2. Update Your Content Regularly

Regular website content updates are crucial to the operation of any online-only business. Visitors
will sense greater trust in your website and are more likely to make a purchase when the material is
kept up to date. You've no doubt seen that we feel strongly about the material. One of the most
important indicators of a site's relevance is maintaining new content, therefore keep it current.
Regularly (every semester, for instance) audit your material and make any necessary revisions.

3. Meta data
Unlike the substance of the data, such as the text or image of communication, metadata is "data that
offers information about other data," not the content itself. Metadata comes in numerous forms,
including descriptive metadata, which provides details about a resource. It is utilized for
identification and detection. Such components as the title, abstract, author, and keywords are
included. Between the tags on each page of your website is a space where you may include

H.P.D.Mandara Prawarshana 25 Web design and Development

metadata or details about the page's content. If you have a CMS site that was developed by the
UMC web team, this information will already be filled in for you. However, it's crucial to analyse
and update information as your website changes.

 Title Metadata
Title information determines both the headline in search engine results as well as the page titles that
are shown at the top of a browser window. It is the most important information on your page. The
web team has created an automated method that creates the meta title for each page based on the
page title for those who have a CMS website. This highlights the importance of choosing consistent,
keyword-rich page titles.

 Description Metadata
Description metadata refers to the textual description that a browser may use to deliver your search
page. Imagine that the window of your website provides a brief but compelling overview of what is
within in order to get visitors to enter. A great Meta description often consists of two whole
sentences. Although the Meta description may not always be used by search engines, it is important
to give them the option.

 Keyword Metadata
Metadata for keywords is rarely taken into account for determining search engine rankings.
However, adding your keyword phrases in your keyword will have no impact on metadata because
you should already be familiar with them. There need to be a variety of terms offered. Generally, try
to keep it to 3–7 phrases with 1-4 words each. A great example of this is a degree in computer
science.

4. Have a link-worthy site

Concentrate on creating helpful links inside the article. Consider spelling out the destination name
rather than using links that say "click here." "Click here" has no additional search engine value
beyond the linked URL, whereas "Michigan Tech Enterprise Program" has valuable keywords and
will raise the page you link's search engine ranking. Always employ descriptive links to connect
keywords; this improves search engine performance while also adding value for your readers,
especially those who are visually impaired or use screen readers. (oberlo.com , 2020)

5. Use alt tags

H.P.D.Mandara Prawarshana 26 Web design and Development

Always use alt tags or alternative text descriptions to describe image and video assets. They help
search engines find your important page, which is especially helpful for users of text-only browsers
or screen readers.

1.19 How Website Performance Affects SEO and Conversion Rates.

A website's page speed is crucial. Even if we have a page that is beautifully designed and has a
clear message for our audience, if it takes more than a reasonable length of time for them to get
there (2 seconds or less), they will leave the site before they can view anything or take any action.

Conversion rates and Website Performance

According to studies, your website is your company's main point of contact, and the longer it takes
for your site to load, the fewer conversions your business will achieve through it. Long page load
times are an important factor for your customer experience whether you run an e-commerce
business selling products, a company looking to gather subscribers, or an organization attempting to
share important information.

When it comes to website traffic, people won't waste their meager attention waiting when looking
for a more frictionless user experience is to search for another comparable service, product, or piece
of information. Here is an illustration of how a slight increase in page load time has a detrimental
effect on conversion rates and the user experience.(unincorporated.com ,2016)

Figure 1919 -Conversion rates and Website Performance (unincorporated.com ,2016)

H.P.D.Mandara Prawarshana 27 Web design and Development

The info graphic from Web Performance Today up top shows how Walmart.com's conversion rates
are affected by web performance.(unincorporated.com ,2016)

Web Performance Across All Devices

Web performance needs to be taken into consideration across all devices in addition to desktop
experiences. Now that they are aware that a large portion of their web clients' audience will consist
of mobile users, many web development companies have decided to adopt a mobile-first strategy.

When conducting mobile searches, users used to be more tolerant of poor page loading times, but
thanks to mobile services and advancements in web technology, this is no longer an acceptable user
experience. You should quickly fix any page load or web performance difficulties in your website
design.

Figure 2020 -Web performance (unincorporated.com ,2016)

This graph from the Telegraph compares the proportion of users who use mobile and tablet devices
to those who use desktop computers. You can see that mobile and tablet usage surpassed desktop
usage for the first time in 2016. (unincorporated.com ,2016)

1.20 Web performance and Search Ranking

Slow website performance may have an impact on your site's SEO performance in addition to
negatively affecting conversion rates. The duration it takes for a web page to load has been a factor
in Google's search ranking formula since 2010. Because it is one of the ranking factors mentioned
in Google's Algorithm Speed Update, site speed has an impact on SEO. Google's algorithm uses site
speed to give high-speed websites a higher ranking than those that load slowly. (nexcess.net ,2022)

H.P.D.Mandara Prawarshana 28 Web design and Development

According to Moz, a well-known innovator in search engine optimization tools, "a low page speed
implies search engines may scan fewer pages using their given crawl budget, and this might
significantly harm your indexation." The short answer is yes, page speed has an impact on SEO.
Since Google's Algorithm Speed Update, the fact that page speed directly affects rankings has been
more well recognized. Speed, however, can also have an indirect impact on rankings by raising the
bounce rate and lowering dwell time. (cognitiveseo.com ,2022)

Five Steps to Boost Website Speed

Your total load time will decrease the smaller and faster your files load. Pages containing a lot of
photographs and other material frequently wind up being larger than 100KB. They are thus bigger
and take longer to download. Compressing download times will shorten them. Therefore, the next
five steps will increase website speed. That is,
1. Choose good website hosting
Uptime is one of the most crucial factors to take into account when selecting a reputable web
hosting provider. Uptime, sometimes referred to as availability, is a measurement of the proportion
of time that your website is up and accessible to users. Bottom line: The better, the closer to 100%
uptime. In light of this, if the website was created using a robust platform, such as WordPress or
Drupal, be certain that you have sufficient hosting (VPS or dedicated) to support it.

2. Pay attention to the libraries

There are some large JavaScript libraries that could cause your site to load slowly. Have a
developer make sure that libraries are delayed rather than immediately downloaded when you
navigate to a web page.

3. Magnify your CSS/JavaScript

By using Google Page Speed Tools, you may help magnify JavaScript and CSS. The success of
your website is greatly influenced by page speed since it has an effect on your website's conversion
rate, client satisfaction, and search engine rankings. If your page loads slowly and clumsily, you
might need a new website.

4. Leverage Browser Caching when appropriate

Working with a developer to make sure that your website is cached as necessary is a good idea if
you have content on your site that doesn't change every day. This suggests that the user won't need
to download all of the page's resources each time they visit your website.

H.P.D.Mandara Prawarshana 29 Web design and Development

5. Enable compression
All browsers support GZIP compression for HTTP requests. This suggests that the transmitted files
are up to 90% compressed before being given to you. To make images fit into their respective
spaces, they can be optimized and compressed. Providing a 2 MB image that will only be used as a
thumbnail is pointless.

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.

1.21 Web Development

The process of creating a website for the Internet (World Wide Web) or an Intranet is known as web
development (a private network). A single static page of plain text may be created using simple web
development techniques, as well as more complicated online apps, e-commerce platforms, and
social networking services. creating, constructing, and managing websites It covers things like web
publishing, web programming, database administration, and web design. It is the development of an
online application, such as a website. Although they are frequently used terms in this context, "web
developer" and "web designer" do not have the same meaning. Technically speaking, a web
designer only uses HTML and CSS to build website interfaces. A website's design may be handled
by a web developer, though web scripts created with languages like PHP and ASP are also an
option. A dynamic website's database management and upkeep can also be helped by a web
developer

The generation of a wide variety of web content is included in web development. Examples include
manually writing web pages with a text editor, building a website in Dreamweaver, and maintaining
a blog on a blogging platform. In recent years, content management systems like WordPress,
Drupal, and Joomla have become more and more common as online building tools. These tools
make it simple for anyone to build and edit their own website using a web-based interface.

1.22 Web Development Technologies

The majority of web pages and web apps on the client side support JavaScript, which is the primary
web language. This means that while server-side technologies are diverse, web technologies are
primarily based on JavaScript.Accordingly, those languages are described as follows. Developers
can work with a variety of web technologies, such as HTML, CSS, DOM, JavaScript, and other
elements handled by the web browser, thanks to web development tools. Popular web browsers

H.P.D.Mandara Prawarshana 30 Web design and Development

have added more features for developers in response to the growing demand from web browsers to
do more.

PHP Language
Developers utilize the server-side programming language known as PHP, or Hypertext Processor, to
build dynamic and interactive web sites. PHP is a very sophisticated, open-source, and well-liked
scripting language. The programming language is used to create web-based software applications
because it enables developers to create content that can communicate with many databases. The
well-known programming language can be integrated into other front-end technologies like HTML
and is utilized by tech giants like Google, Facebook, and Yahoo. (stechies.com , 2020)

Figure 2121-PHP Language (vectorstock.com ,2022)

PHP is a very strong and adaptable programming language that can be used for a wide range of
tasks. The primary use of PHP is server-side scripting, and a developer requires three things to carry
it out. A web server is required to run the files forming the web pages, a PHP parser is required to
convert a human-readable language to a computer-readable form, and a web browser is required to
display content or access program output.(stechies.com, 2020)

JavaScript Language
A dynamic computer programming language is called JavaScript. Its implementations enable client-
side scripts to interact with users and create dynamic pages, and it is most frequently used as a
component of web sites. It is an object-oriented programming language that may be interpreted.
Live Script was the original name of JavaScript, but Netscape changed it to JavaScript, maybe in
response to the buzz that Java was causing. Live Script, the predecessor of JavaScript, had its début
in Netscape 2.0 in 1995. Netscape, Internet Explorer, and other web browsers all contain the
general-purpose language's core. (tutorialspoint.com, 2020)

H.P.D.Mandara Prawarshana 31 Web design and Development

 Figure 2222 -JavaScript Language (medium.com ,2020)

The lack of pricey development tools is one of JavaScript's key advantages. You might begin by
using a basic text editor like Notepad. You don't even need to acquire a compiler since it is an
interpreted language used in a web browser.

Ruby Language
Ruby programming has probably been covered if you've read much or have any expertise with
computer programming. Ruby is a very well-liked programming language that's used for a variety
of tasks, including data processing and the creation of online applications. In comparison to other
programming languages, it is also highly user-friendly, and if you are prepared to put in the effort,
you can learn it very quickly. The fact that Ruby is a widely popular programming language and
that knowing how to write in it may make you a very flexible and valuable programmer is perhaps
the greatest of all. (developer.oracle.com , 2020)

Figure 2323 -Ruby Language (Stock.com , 2020)

H.P.D.Mandara Prawarshana 32 Web design and Development

Java Language
The object-oriented, class-based, general-purpose programming language Java was created to have
fewer implementation requirements. It is an application development platform for computers. Java
is therefore quick, safe, and trustworthy. It is widely used to create Java applications for
smartphones, game consoles, laptops, data centres, and other devices.

The Java Platform is a group of apps that aid developers in creating and executing Java
programming applications quickly. It has a compiler, an execution engine, and a number of libraries.
It consists of a collection of requirements and computer software. The Java platform was created by
James Gosling at Sun Microsystems and eventually purchased by Oracle Corporation. Java is a
programming language used by programmers to create applications for laptops, data centres, game
consoles, scientific supercomputers, mobile phones, and other gadgets. According to the TIOBE
index, which ranks the popularity of programming languages, Java is the third most popular
programming language in the world, behind Python and C. (guru99.com ,2022)

Figure 2424 - Java Language (guru99.com ,2022)

ASP.NET
A web development platform called ASP.NET offers a programming paradigm, a thorough software
architecture, and a variety of services needed to create reliable online applications for PCs and
mobile devices. The HTTP protocol is built on top of ASP.NET, which makes use of the HTTP
commands and policies to establish browser-to-server interaction. A component of the
Microsoft.Net platform is ASP.NET. The extensible and reusable components or objects found in
the.Net framework are used to create the compiled codes that make up ASP.NET applications.
These codes have access to the entire.Net framework class hierarchy.

H.P.D.Mandara Prawarshana 33 Web design and Development

The event-driven approach of interaction is extended to online applications using ASP.NET web
forms. A complete mark-up page or HTML page is returned by the web server when the browser
submits a web form to it. User actions on the client side are all sent to the server for stateful
processing. The client's actions are processed by the server, which also initiates the responses.
(tutorialspoint.com , 2022)

1.23 Web Development Frameworks

The development of web applications, including web services, web resources, and web APIs, is
supported by a software framework known as a web framework or web application framework.
Web frameworks offer a standardized method for creating and deploying web applications on the
Internet.
 Angular
Google created the open-source Angular front-end mobile and web application framework in 2010.
It is based on Type Script. The same team that created Angular JS also created Angular. In a
nutshell, Angular is a framework and platform for creating dynamic single-page client apps using
Type Script and HTML.

Figure 2525 -Angular (orientsoftware.com/ ,2022)

Instead of a hierarchy of components and services like Angular, AngularJS is based on JavaScript
and has concepts of scope and controllers. The MVC (model-view-controller) model, which is used
by AngularJS, serves as the key element and directs how the applications operate. Additionally,
AngularJS does not support mobile devices. (orientsoftware.com , 2022)

 Ember
Ember is a well-known and established JavaScript web development framework. Ember's
management system, complete organizational version, and simultaneous support for both modern
and antiquated technology are its distinguishing characteristics. website designers. Ember. Js is a
successful, tried-and-true JavaScript framework for creating contemporary web applications. It has
every component required to create rich user interfaces that function on any device.

H.P.D.Mandara Prawarshana 34 Web design and Development

 Figure 2626 - Ember (Medium.com , 20220

 Django
A high-level, open-source MVC Python web framework for dependable and secure websites is
called Django. The framework bears Django Reinhardt's name, a musician. Due to its simplicity,
usability, pragmatic design, and full feature set when compared to many other frameworks, Django
has been gaining popularity.

Figure 2727 -Django (orientsoftware.com/ ,2022)

Django is suitable for both frontend and backend applications and is also highly beginner-friendly.
All website kinds, including social networking, chat programs, interactive pages, and content
management, may be built using Django. Additionally, it works with the majority of big databases.
All of Python's advantages, including superb support, increased productivity, and quick
development, are also inherited by Django.

 Ruby on Rails
Over 826,000 websites use the Ruby on Rails framework (RoR), which was developed using the
Ruby programming language. There are several uses for this web framework, including tackling
challenging development issues. Developers can save time by using the numerous tools and
libraries that RoR offers.

 Express.js

H.P.D.Mandara Prawarshana 35 Web design and Development

Express.js, or just Express, is a Node.js back-end web application framework that is distributed as
free and open-source software under the MIT License. It is used to create RESTful APIs. It is made
for creating APIs and online applications. The server framework is referred regarded as the de facto
standard for Node.js. A node js web application framework called Express offers a variety of
capabilities for creating both online and mobile applications. A single page, multipage, or hybrid
web application can be created with it. It is a layer added to Node js that aids in managing servers
and routes.

Figure 2828 -Express.js (medium.com , 2022)

 Vue.js
An open-source front-end JavaScript framework for creating web UIs and single-page applications,
Vue.js is based on the MVVM (Model-View-ViewModel) paradigm. Evan You and his team are
responsible for the development and upkeep of Vue.js. Both desktop and mobile app development
can be done with vue.js.

Figure 2929 -Vue.js (orientsoftware.com/ ,2022)

Vue.js is well-liked because of its short learning curve and capacity to make web development a
simple and straightforward procedure. In addition to being lightweight and adaptable, Vue.js creates
products of the highest quality. In addition to being incredibly user-friendly, Vue.js has a ton of
helpful libraries and development communities, making it welcome for newcomers. Because it is
flexible and simple to connect with other frameworks and libraries, Vue.js is seen as a progressive
framework, making it simpler for developers of other frameworks to understand and use the
technology. (orientsoftware.com/ , 2022)

 React

H.P.D.Mandara Prawarshana 36 Web design and Development

React is a free, front-end JavaScript toolkit for building interactive user interfaces (UIs). Facebook
collaborates with a sizable developer community to create and maintain React. React can also serve
as the foundation for a mobile or single-page application.

React is built on the MVVM (Model-View-ViewModel) paradigm, which in the end enables direct
communication between the view and model. This makes it possible for React to divide the app into
more intricate, modular components for your apps. Front-end websites use React, but iOS and
Android mobile applications use React Native. React Native, which is based on React, enables
developers to create cross-platform mobile apps with ease and flexibility. Despite being a library,
React is still one of the most widely used JavaScript front-end frameworks because of its clear
programming, robust community, and quick performance.(orientsoftware.com/ , 2022)

Figure 3030 -React (orientsoftware.com/ , 2022)

 ASP.NET Core
Microsoft created ASP.NET Core, a free, open-source, high-performance web framework that
replaces ASP.NET. It may be used with Windows, the complete.NET framework, or the cross-
platform.NET Core. Building web applications and services, Internet of Things (IoT) applications,
and mobile backend all make use of ASP.NET Core.

Since ASP.NET has been around for a while, ASP.NET Core is also highly well-liked since it is a
quick and sophisticated framework. One of the top frameworks on the market, ASP.NET Core has a
vibrant and expanding community. Top worldwide companies including Alibaba, ROBLOX, Slack,
and Grub Hub are now embracing ASP.NET Core.(orientsoftware.com/ , 2022)

Figure 3131 -ASP.NET Core .(orientsoftware.com/ , 2022)

H.P.D.Mandara Prawarshana 37 Web design and Development

1.24 Why a web application is appropriate in the given circumstances
(conclusion)
The creation of an online hospital administration system is the project's principal goal. The idea of
developing an online web application provides a number of benefits. Patients may rapidly check for
appointments online rather than visiting the hospital. They may use the web application to quickly
modify any information they need to, such as their password or address. To allow patients to make
payments to the hospital without physically going there, an online payment option can be
introduced to the online web application. By conducting your job online, you may save time and
money. Here the patient does not need to visit the hospital to see the doctor. You can use this web
application which is a remote method for that. In addition, the patient can quickly get information
about the hospital's facilities.

1.25 Using a web application

Because web apps are accessed online, downloading is not necessary. A web application may be
seen by users using a web browser like Google Chrome, Mozilla Firefox, or Safari. A web app
requires a database, an application server, and a web server in order to function. Web servers
process client requests, and application servers execute the necessary work. Any necessary
information can be kept in a database.

Web apps may be created by small development teams and frequently have quick development
cycles. The majority of Web apps are made using JavaScript, HTML5, and Cascading Style Sheets
(CSS). These languages are widely employed in client-side programming to aid in the development
of the user interface of an application. Using server-side programming, a Web app may create the
scripts that it needs. Commonly used server-side programming languages include Python, Java, and
Ruby.

Benefits to the user by using a web application.

Web-based apps offer a wide range of commercial advantages over desktop programs. Instead than
needing to be manually installed on each machine you desire to access it from, these programs may
be accessible from any computer over the internet. Software as a Service (SaaS) refers to the use of
web-based applications that operate in a virtualized cloud environment. For instance, the
development of cloud-based email platforms has made it possible for users to access email on the
go without having to download a desktop email client. SaaS applications outperform on-premise
software in terms of tangible business benefits.

H.P.D.Mandara Prawarshana 38 Web design and Development

 Accessibility for users across devices
The good news is that most desktop software can actually be converted into a web-based
application, allowing you to access it from any mobile device, wherever you are. This allows users
to choose when and where they want to use the application, encouraging flexible working practices
within organizations to boost overall employee productivity.
 Adaptation to various gadgets
Web-based apps' content may be simply altered to work on several platforms, including mobile.
Due to the ability to customize how information is presented, the program is user-friendly and
enjoyable to use. Web-based apps can actually be customized more easily than traditional desktop
programs. Software that runs on the web may also be adaptable to browser changes. This
encourages mobile working and guarantees that employees always have access to the software.
 Arrangement with other systems
In comparison to desktop programs, web-based apps offer a significantly wider capacity for system
integration. Compared to web-based programs, which are substantially more interoperable,
localized software is isolated. This is due to the ease with which online apps may be joined together
as opposed to two totally independent systems.
 Maintenance hassles are eliminated
It is easy to implement SaaS apps across the organization. Once the program has been installed on
the host server, access is given. Without having to upgrade each machine, this can be applied each
time through the host server. This makes it simpler to implement new software or upgrades and
enables the use of a single location for maintenance. Changes take less time to implement, and the
system is reliable.
 Expanded adaptability and scalability
Enhancing the application's ability to scale with your organization is as simple to do as making
updates. Your web-based software can enable it as you need more operations to happen at once.
Furthermore, where problems arise, servers can be completely replaced without having an impact
on the entire operating system. As a result, any downtime you might otherwise have is reduced.

1.26 Web application techniques

A Web application (Web app) is an application program that is delivered over the Internet via a
browser interface and is kept on a remote server. By definition, web services are web applications,
and most websites though not all contain web applications.

 The Internet of Things (IOT) is dominating

H.P.D.Mandara Prawarshana 39 Web design and Development

The Internet of Things movement appears to have succeeded in its mission in recent years. Thanks
to the emergence of internet-related capabilities in products like heat system sensors and other
things, ordinary goods may now be managed via smart phone applications and other web portals.
Web developers must learn how to create applications that display device data as IoT becomes more
pervasive.

 Rails 5 in action
The web development industry has been dominated by Rails 5, which was introduced in the middle
of 2016 and is similar to Angular JS. It provides developers with enticing benefits that might
transform web development. API-only apps are now easy to build, and they include compelling
features including interaction with actions, turbo links 5, and JavaScript frameworks.

 Replacement of static images

On certain websites, motion user interface has replaced static pictures. Two-dimensional websites
are boring and, let's face it, old, so nobody likes to think about them. In this day and age of
animations, movies, and GIFs, Motion UI offers an animation queuing strategy and CSS patterns
that work with all JavaScript animation libraries. Web designers are increasingly creating high-
quality animations and native short movies to give their websites more life.

 Conversational UI is on the run

The following are the key categories of conversational UI: Chatbots: They mostly use text. Work
with voice commands using voice assistants (like Alexa, and Google Assistant) Utilize the user
interfaces of well-known messaging applications with conversational apps. It is easier to establish
an interactive relationship between the business and its customers when there is conversation with
the audience. A web developer's responsibility is to make sure that communication is effective,
enjoyable, and beneficial. Web developers may do this with the aid of conversational UI.
Conversational pop-ups and chat windows have started to appear on a number of websites. This
year, businesses will prioritize on customer and consumer communication.

 AI determined web creation

Many specialists use this term to describe a professional developer. The capacity to create AI has
been easier due to the accessibility of necessary resources and guidelines. AI can be used by web
designers to build websites in inventive ways. To create a website that is appealing to the eye, a web
designer will then take care of the branding, content, layout, algorithms, and color scheme. Utilize it
to its fullest potential to get the most out of it.

H.P.D.Mandara Prawarshana 40 Web design and Development

 Evolution of Angular
Frameworks are necessary and practical tools that make it simple for web developers to create
mobile and web applications. Angular is one of the most popular and widely used frameworks for
streamlining the creation of web applications.

1.27 Web application tools

Developers can work with a number of technologies with the help of web development tools. Web
development tools should be able to provide more affordable and faster mobile development. They
should assist programmers to create responsive design. The online browsing experience will be
enhanced by responsive web design, which will also help in better SEO, lower bounce rates and
lower maintenance requirements. Additionally, the front-end development tool you choose should
be scalable. Accordingly following are some web development tools.
 Sass
Syntactically Awesome Style sheet is referred to as Sass. Sass is a CSS extension. A CSS pre-
processor is Sass. All versions of CSS are fully compatible with Sass. Sass lowers CSS's duplication,
which frees up time. The most reputable and well-known CSS extension language is Sass. It is
possible to use variables, nested rules, mixing, and functions. You can share designs both within
and between projects using Sass. Accordingly, its advantages and disadvantages are listed below.

Advantages Disadvantages

Because it is a CSS extension, it is more Before using this preprocessor, the developer
dependable, strong, and elegant. As a result, must have enough time to become familiar
designers and developers can work more with its new features.
quickly and efficiently.

You can write neat, simple, and less CSS in a The built-in element inspector of the browser
programming construct thanks to Sass. may no longer be useful if Sass is used.

In order to use nested syntax and practical

functions like colors manipulation,
mathematical operations, and other values,
nesting is provided.

You can write CSS more quickly because it

has fewer codes.
Table 22 -advantages and disadvantages (the author ,2022)

H.P.D.Mandara Prawarshana 41 Web design and Development

 Code-pen
User-generated HTML, CSS, and JavaScript code snippets may be tested and shown in the online
community known as Code Pen. Developers may write and test "pans," or chunks of code, in this
online code editor and open-source learning environment. A social development environment is
Code Pen. Its core functionality is the ability to write code in the browser and view the results as
you construct. An effective and liberating online code editor for developers of any experience level,
but especially liberating for those just starting out with coding. Accordingly following are the
features of Code-pen.
 You can drag and drop media files, CSS, JSON, SVGS, and pictures, among other things.
 It will allow you to drag-and-drop images, CSS, JSON files, SVGS, Media files, etc.
 You can keep your pens secret with CodePen.
 It offers a flexible editor.

 Grunt
A solution for automating commonplace operations like minification, compilation, unit testing, and
linting is called Grunt, a JavaScript task runner. It executes custom functions specified in a file
using a command line interface. Grunt is a JavaScript task runner for the command line that runs on
the Node. js platform. It handles process automation and executes custom-defined repetitive
activities. Numerous major software developers who use Grunt as part of a continuous integration
work flow are listed on the project's homepage.

By utilizing the Grunt plug-in, you can simply execute file testing, compilation, and minification.
Use the Grunt plug-in to work quickly with a fresh codebase because it has minimal infrastructure.
It improves project performance and accelerates the development work flow. Grunt makes it
extremely simple to carry out repetitive operations like compilation, unit testing, file compression,
test execution, etc. The built-in tasks in Grunt increase the functionality of your scripts and plugins.
Grunt has a vast ecosystem that allows you to automate anything with a minimum of effort.
Accordingly following are the features of Grunt.
 It provides various plugins.
 Grunt will let you automate almost anything using minimum efforts.
 You can also create your own Grunt plug-in to Npm.
 It is easy to install.

 AngularJS

H.P.D.Mandara Prawarshana 42 Web design and Development

A JavaScript-based web framework designed for building single-page apps, AngularJS is free and
open-source. AngularJS is a structural framework for dynamic web apps, and it was primarily
maintained by Google and a community of people and businesses. You can use it to extend HTML
syntax and use HTML as your template language to express your application's components
succinctly and clearly. Data binding and dependency injection in AngularJS allow you to write a lot
less code than you would otherwise. Accordingly following are the advantages and disadvantage of
AngularJS
Advantages Disadvantages
Faster responsiveness and enhanced server Mandatory JavaScript
performance
Fast Development and Prototyping AngularJS-Specific Libraries

Easy Start-up Performance Glitches

Google Maintains it Steep Learning Curve

Table 33 - advantages and disadvantage(the author,2022)

 Chrome Dev Tools

There are several web development tools included with Chrome. Google Chrome already comes
with these resources. It enables you to see and modify both the DOM and the Style of a page. Using
Chrome Dev Tools, you can quickly identify problems, read messages, run and debug JavaScript in
the Console, change websites on the fly, and improve website performance. It is a robust tool kit
that enables you to inspect, edit, and debug your code as well as assess the performance of your
pages. This tutorial will show you how to test and debug your web pages using all of Dev Tools'
features. Grunt has a vast ecosystem that allows you to automate anything with a minimum of effort.
Accordingly following are the features of Grunt.
 You can inspect Network Activity with Chrome Dev Tools.
 With performance panel functionalities you will be able to optimize speed, Analyse 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

A software framework known as a web framework (WF) or web application framework (WAF) is
created to assist the creation of online applications, including web services, web resources, and web
APIs. Online frameworks offer a standardized method for creating and deploying web applications

H.P.D.Mandara Prawarshana 43 Web design and Development

on the Internet. Web design, functionality, and management are all impacted by frameworks and
popular web development tools in both positive and negative ways. We'll talk about them below.
Here, let's firstly concentrate on the favourable outcomes.

A framework, for those without a technical experience, is a group of libraries and tools that carry
out typical activities in web development. Its objective is to simplify common web development
chores. Selecting the appropriate framework is crucial for a developer because it helps them
develop apps faster and more efficiently. Most apps perform similar tasks, like managing session
data validation, so web frameworks spare developers from having to write the same code repeatedly
for new web applications.

Instead of rewriting the wheel in code, a framework aims to let designers and developers focus on
developing distinctive features for their web-based applications. The framework is intended to assist
you in enhancing the effectiveness and speed of your web app development project. The intriguing
features include templates, session management, and database access libraries, to name just a few.
Depending on your needs and tasks, you can select from a wide range of frameworks that are
offered on the market. Each framework may offer you a variety of web app functionalities, making
your program less prone to errors. A framework that helps with the prototyping, designing, and
implementing phases of the app development life cycle as well as ongoing maintenance and web
application enhancement.

How valuable are web frameworks? - Web Frameworks actually help web developers in many
ways by providing them with various responsibilities and capabilities. Below are some examples of
how frames can be beneficial.

 Flexibility and highly customizable

The benefit of frameworks allows you to avoid wasting time learning things that aren't truly
relevant. For example, if you are a MySQL user and have been given a PostgreSQL database to use
for your project, I'm sure you would have scratched your head attempting to construct the web app
from scratch. You may transfer your program from one platform to another by making a few
changes. The words for items that develop inside framework communities and enable you to easily
modify your application include add-ons, themes, plugins, and widgets.

 Saves time

H.P.D.Mandara Prawarshana 44 Web design and Development

The main advantage of a framework is that it frees up the developer's time and energy when
designing an app by taking care of data sanitization, session management, error handling, and
authentication logic. Most of these tasks are handled by the framework. Instead of wasting time on
repetitive coding, it eliminates head scratching and enables developers to start writing code for an
application immediately. The development process is doubled, which increases productivity.

 Easy deployment and maintenance

With identical functionality as a Windows application, a framework-based software may be made
available as a web application. Also possible is multilingual support. By reorganizing framework
apps in various ways to best suit their functionality, users may personalize native Windows
applications with them. The program uses a consistent coding methodology that makes the code
simpler to understand and maintain, which simplifies maintenance.

Accordingly following are some of the disadvantages of frames.

 Steep learning curve

The majority of frameworks can be very challenging to study and even harder to master. You might
assert that even with experience, it will take at least 3-6 months for you to feel comfortable using
any framework.

 Cost
As a result, hiring trustworthy framework developers may be more expensive than hiring
trustworthy CMS developers. According to my observations, a project built on a framework
typically costs more than a project built on a CMS.

 Performance
It is a factor, but it wasn't there previously, and it still matters now. JavaScript is used to load the
application, which was created with the aid of a framework. On a PC running at high speeds, you
might not notice the effects of loading a 75 kb compressed-framework js file, but mobile users will.

 Limitations
From coding paradigms to database designs and everything in between, they are all constrained in
some way. Finding out how the framework is used by other developers in the community is a good
way to get around this.

H.P.D.Mandara Prawarshana 45 Web design and Development

Learning Outcomes:02
2.1 Considering the requirements given in the above scenario define the relationships between
front-end and back-end website technologies and discuss how the front-end and the back-end
relate to presentation and application layers.

2.1 Creating the front end.

The creation of a website's graphical user interface using HTML, CSS, and JavaScript so that
visitors can view and interact with it is known as front-end web development. The front end is the
layer above the back end and it consists of all the hardware or software that makes up a user
interface. Various elements of a program's front end, such as user-entered data, buttons, programs,
web pages, and other features, are directly interacted with by humans or digital users.

Front-end and back-end are different in that the former relates to how a web page appears, whilst
the latter refers to how it functions. Back-End is the server side, while Front-End is the client side.
HTML, CSS, and JavaScript are the fundamental languages for front-end development.

Front-end Technologies
The creation of a website's graphical user interface using HTML, CSS, and JavaScript so that
visitors can view and interact with it is known as front-end web development. Among front-end
technologies, HTML, CSS, and JavaScript are the most popular. Here is a brief explanation of each
technique.
1. HTML
The coding that organizes a web page's content is called HTML (Hyper Text Mark-up Language).
Content may be organized using paragraphs, a list of billeted points, graphics, and data tables,
among other options. This article will provide you with a fundamental grasp of HTML and its
features, as the title indicates. HTML is a mark-up language that specifies how your material is
organized. HTML is made up of a number of components that you may employ to enclose or wrap
certain portions of the content to alter how it appears or behaves. The surrounding tags can italicize
words, make the font bigger or smaller, make a word or image hyper link to another location, and
more. Consider the content in the following line, for instance. (developer.mozilla.org ,2022)

Figure 3232 -html (velog.om , 2022)

H.P.D.Mandara Prawarshana 46 Web design and Development

There are other HTML versions available here. HTML 5 is the most recent iteration. It has more
sophisticated capabilities like geo-location, native audio and video support, canvas, web socket, and
so on. HTML is generally an easy language to find and use. An HTML file can be created by a
programmer using a basic text editor and run in a browser. Following are Html benefits and
drawbacks.
Advantages Disadvantages

HTML is a popular Mark-up language that Being a static language, it is unable to

aids in creating a website's structure. produce dynamic output on its own.
You don't need to buy any additional Making HTML documents' underlying
software because it comes pre-installed in structure difficult to comprehend.
every window.
The application cache function enables the Making lists, tables, and forms takes just as
storage of large files. much time as keeping the color scheme of a
page consistent.
HTML offers a variety of tags and attributes Errors may be expensive.
that can be used to shorten your code.
Very helpful for those who are new to the Being a static language, it is unable to
field of web design. produce dynamic output on its own.
Table 44 --Advantages and Disadvantages (geeksforgeeks.org/ ,2022)

2. CSS
These data files, which were initially introduced as composite pages, are used to advise web
browsers on how the content of a web page should appear. CSS (Cascading Style Sheets) enables
you to design beautiful web pages, but how does it function internally? This article covers some
important CSS terms as well as defining CSS with a straightforward syntax example. Simple text
styling for documents using CSS is possible, such as altering the size and colors of headers and
links. It is possible to utilize it to design a layout, such as transforming a single column of text into
one with a primary content section and a sidebar for supplementary information. It may even be
employed for animation effects.

Figure 3333 -css((velog.om , 2022)

H.P.D.Mandara Prawarshana 47 Web design and Development

Cascading Style Sheets, or CSS, is a tool that specifies how a website should appear on a browser
and is used to provide style to web pages. Unlike HTML or JavaScript, CSS is distinct in that it
doesn't produce any new elements. It is really a language for styling HTML components.
Accordingly, following are the advantages and disadvantages of CSS. (developer.mozilla.org ,2021)

Advantages Disadvantages

The primary benefit of CSS is that style is CSS, from CSS 1 to CSS3, causes confusion
applied uniformly across numerous websites. among web browsers.
Multiple areas can be controlled by a single
instruction, which is beneficial.
For each page, web designers should add a If any compatibility issues arise after making
few lines of programming to increase site the changes, we must verify them. All
speed. browsers are affected by the same change.
Because it is less complicated, the effort is On various browsers, CSS functions
drastically reduced. differently. CSS is supported in various ways
by IE and Opera.
It is capable of shifting position. It assists us Confusion is brought on by the various
in figuring out how the positions of the web levels, which are confusing to beginners and
elements that are present on the page have non-developers.
changed.
The primary benefit of CSS is that style is CSS, from CSS 1 to CSS3, causes confusion
applied uniformly across numerous websites. among web browsers.
Multiple areas can be controlled by a single
instruction, which is beneficial.
Table 55 --Advantages and Disadvantages (geeksforgeeks.org)

3. JavaScript

Numerous websites utilize the lightweight object-oriented programming language JavaScript (js) to
script their web pages. When used with an HTML document, it is an interpreted, complete
programming language that enables dynamic interactivity on websites. It was first released in 1995
to allow users of the Netscape Navigator browser to add applications to websites. Since then, every
other graphical web browser has embraced it. Users can create interactive modern web applications
with JavaScript without continually refreshing the page. The standard website makes use of js to
offer various forms of interactivity and simplicity.(javatpoint.com , 2020)

H.P.D.Mandara Prawarshana 48 Web design and Development

 Figure 3434 -JavaScript (javatpoint.com , 2020)

Programmers all over the world use JavaScript to make dynamic and interactive web applications
and browsers. With 97.0% of all websites using it as a client-side programming language,
JavaScript is the most widely used programming language in the world. Accordingly, following are
the advantages and disadvantages of JavaScript.

Advantages Disadvantages

No matter where JavaScript is hosted, it is Large apps may be challenging to create,

always run in a client environment to reduce even though you'll also be using the Type
bandwidth usage and speed up execution. Script layer.
The ability of JavaScript to support all The main issue or drawback with JavaScript
contemporary browsers and deliver an is that anyone can view the code because it is
equivalent result is its biggest advantage. always visible.
On the internet, JavaScript is used almost The entire website may stop rendering if a
everywhere. JavaScript error occurs. JavaScript errors are
very well tolerated by browsers.
JavaScript works well with other languages The process of converting a number to an
and is applicable to a wide range of integer continuously takes longer. As a result,
applications. the script runs slower and requires more time
to execute.
No matter where JavaScript is hosted, it is Large apps may be challenging to create,
always run in a client environment to reduce even though you'll also be using the Type
bandwidth usage and speed up execution. Script layer.
The learning curve for JavaScript is low. For
this reason, a lot of us prefer to begin our
journeys into the IT industry by studying this
language.
Table 66 - Advantages and Disadvantages (geeksforgeeks.org)

H.P.D.Mandara Prawarshana 49 Web design and Development

2.2 Creating the Back end.
Working on server-side software, which focuses on everything a website can't show you, is what
back-end development entails. Databases, back-end logic, application programming interfaces
(APIs), architecture, and servers are the main areas of attention for back-end developers since they
guarantee the website functions properly. The code in a computer program or application that
allows it to run but that users cannot access is referred to as the back end. A computer system's back
end is where the majority of data and operational syntax are kept and accessible.

Because they create server-side features and components that users access indirectly through the
front-end application or system, backend developers are crucial to the success of a web application.
These programmers create, maintain, troubleshoot, and test the entire backend. Accordingly, the
following is the technique used for creating the back end.

Back-end Technologies
Backend technologies often refer to the collections of server-side languages that are used to build a
website's server set-up. The building blocks of software development are the backend
technologies.Node. JS, Java, Ruby, Python, Golang, and PHP are the most popular backend
programming languages.

1. .Net
Microsoft created the NET Framework, a proprietary software framework that mostly runs on
Windows. Up until the cross-platform.NET project took its place, it was the Common Language
Infrastructure's main implementation. .NET is a free, open-source, cross-platform development
platform that can be used to create a wide variety of applications. With.NET, you can create
applications for the web, mobile, desktop, gaming, IoT, and more using a variety of languages,
editors, and libraries. Scalable, quick, and easy to use solutions may be created with ASP.NET. In
ASP.NET, applications and online services are created using a variety of programming languages,
including C# and VB.net. Additionally, it makes use of JavaScript, CSS, and HTML5 for front-end
web development.

Figure 3535 -1..Net (howtogeek.com/ ,2021)

H.P.D.Mandara Prawarshana 50 Web design and Development

The advantages of .NET Framework programming
 Supportive neighbourhood
There is a sizable army of developers that support and love.NET. This framework is well-liked by
businesses of various sizes and financial capacities. Since it's an open-source tool, more people
keep using it. There are many communities, so you can seek advice from more seasoned developers
to advance your abilities.
 Intelligent UI Control
Microsoft offers a.NET framework together with a sophisticated internal UI. Its goal is to improve
the application's aesthetics and quality. Additionally, it enables third-party approval controls to
enhance the created product. One of the third-party controls, Telemeter, greatly simplifies drag and
drop operations and saves developers priceless time.
 Automatic code inspection
Writing code is a difficult task. Even if you are a top-tier specialist, mistakes will inevitably happen.
If an error occurs accidentally, the entire project suffers. The.NET platform offers the feature of
automatic monitoring and checking to prevent this.
 Design for several platforms
The ability to write code that runs across many platforms is the main benefit of using the.NET
Framework. Because the code is open-source, it has undergone numerous improvements and is now
even more advanced.

Disadvantages of .NET Framework programming

 A reliance on a single source
Microsoft is the platform's owner. It implies that this organization completely outclasses this
framework. As a result, the developers are subject to Microsoft's rules and do not have complete
and exclusive control over the application.
 Insufficient object-relational support
For every IT product, updates are both frequent and essential. When updates prevent the release of
the previous version, a problem arises. If the database and design are altered in any way, the
original version is no longer supported, and the new versions are the only ones that function.
 License price
Although the.NET framework is open-source, licensing can occasionally be pricey for large and
complicated projects. Microsoft provides a variety of tools to help you with your work. Working
with the Visual Studio IDE is one of the most costly things. You'll pay $539 a year for it. It is not
the best platform to think about in terms of price.
 Several speed limits

H.P.D.Mandara Prawarshana 51 Web design and Development

The applications' pace has considerably decreased. The observations show that even for merely
counting algorithms, 40–50%. A lot of it. But it's not a major deal because new models'
performance is always improving.

2. Java
The object-oriented programming language and software platform known as Java is utilized by
billions of devices, including laptops, smartphones, gaming consoles, medical equipment, and many
more. Java's syntax and principles are derived from the C and C++ languages. A popular server-side
programming language called Java is frequently employed to create web applications. The most
well-known Java frameworks for building Web applications include Spring, Struts, Hibernate,
Apache Hadoop, and JSF.

The advantages of Java

 Java is Easy
A straightforward programming language is one that is simple to learn and comprehend. Java is one
of the easiest programming languages to learn and use thanks to its simple and understandable
codes.
 An Object-Oriented Programming Language is Java.
Java's ability to be an object-oriented programming language is one of its key benefits. We are all
aware of how difficult and complicated procedural languages are to use. Java is more simpler to
build and much more secure when using the OOPs approach. OOPs ideas assist Java in resolving
practical issues. By splitting up large code into smaller, named chunks, it also makes maintenance
easier.
 Java is affordable and practical to maintain.
Java is inexpensive and simple to create as a result of its straightforward structure. Java can operate
on any computer, independent of the hardware, which drastically lowers the cost of development.
 Java is cross-platform.
Java adheres to the WORA feature (Write Once Run Anywhere). Any other system with Java
installed may run the Java programs created on one machine. Because Java's compatibility is not
based on the operating system or hardware, it is platform-independent and incredibly adaptable.

The Disadvantages of Java

 Slow and Poor Performance
When compared to native programming languages like C and C++, Java uses more memory. Due to
the interpreter's added effort in translating the code into machine language, Java is also slower than

H.P.D.Mandara Prawarshana 52 Web design and Development

them. The JVM conducts a number of backend tasks that slow down the program. Java provides
automated garbage collection, so it runs continually in the background, hurting performance.
 No backup facility
Java has virtually no functionality for user data backup. It primarily focuses on data storage,
however there is no backup mechanism for such data.
 Large memory space is needed.
Compared to other programming languages like C and C++, Java uses more memory. Java has
terrible memory management. Java has a garbage collector, however it negatively affects
performance.
 Complicated and verbose code
Many verbose and intricate syntaxes exist in Java. It might be challenging to recall those
complicated syntaxes at times. Due to their comparatively easy language, Python and C++ are
preferred by many programmers over Java.

3. Python
A popular high-level programming language is Python. In 1991, Guido Ven Rossum designed the
general-purpose programming language Python and released it to the public. Code readability was a
major design consideration. Python is a popular computer programming language used to create
software and websites, automate processes, and analyse data. Python is a general-purpose language,
which means it may be used to make many various types of applications and isn't tailored for any
particular issues. One of Python's biggest advantages is the variety of libraries and frameworks it
offers. Everything from data visualization, machine learning, data science, natural language
processing, and complicated data analysis uses the Python Library, from NumPy to Tensor Flow.
(/techvidvan.com.2022)

The advantages of Python

 Simple to Learn, Read, and Write
Python is extremely simple to pick up and learn, which is why many people suggest it to beginners.
Compared to other popular languages like C/C++ and Java, you need fewer lines of code to
complete the same task.
 Translated Language
Python directly executes the code line by line because it is an interpreted language. In the event of a
mistake, it halts further operation and communicates the error that occurred.
 Dynamically Typed

H.P.D.Mandara Prawarshana 53 Web design and Development

Until the code is executed, Python does not know the type of the variable. During execution, the
data type is automatically assigned. Declaring variables and their data types is not something the
programmer needs to be concerned about.
 Free and Open-Source
The open-source license for Python has been accepted by the OSI. It is thus open for usage and
distribution. You can download the source code, make changes to it, and even share your
customized Python with others. For businesses looking to change a specific behaviour and use their
version for development, this is helpful.

The Disadvantages of Python

 Slow Speed
Python's slow speed is also a result of its dynamic nature, which requires it to perform additional
work while executing code. Python is thus not employed in projects where speed is a crucial
component.
 Not Effective with Memory
Python needs to make a small compromise in order to make things simple for the developer. Python
is a memory-intensive programming language. When developing applications, this may be a
drawback if memory optimization is preferred.
 Mobile Computing Is Weak
Typically, server-side programming uses Python. For the reasons listed below, Python is not used in
client-side or mobile apps. When compared to other languages, Python is not memory efficient and
has a slow processing speed.
 Database Access
Python programming is simple and stress-free. But the database lags behind when we interact with
it.

2.3 Differences between front-end and back-end

What Sets the Front-End and Back-End Apart? Front-end and back-end development are necessary
for any website. The visual elements of a website the component that visitors can see and interact
with are the focus of front-end development. The structure, infrastructure, data, and logic of a
website are all included in the back-end development. The two most common terminology used in
web development are frontend and backend. The back end is how everything operates, whereas the
front end is what people see and interact with. To increase the functionality of the website, each
side must cooperate and communicate with the other as a single entity. ( geeksforgeeks.org/,2021)

H.P.D.Mandara Prawarshana 54 Web design and Development

 Figure 3636 -front-end and back-end ( kenzie.snhu.edu/ ,2022)

The major differences between Frontend and Backend Development

Basis Back -End Front -End

Definition Effective implementation of a web Back end development entails the

application's visual components is a efficient implementation of web
function of front end development. application features like server
management, database
management, etc.
Skills Required The front end requires knowledge Python, Ruby, Java, PHP, and other
of HTML, CSS, SASS, JavaScript, programming languages are among
and other technologies. the skill sets needed for back end
development.
Independence Except for static sites, front end The front end and back end don't
development cannot function interact with each other during
independently. back end development.
Goal The front end development process The back end development's
aims to make sure that the objective is to guarantee that the
application is usable by everyone application will always function
and that it maintains correctly, be scalable, and operate
responsiveness across all platforms, with low latency.
including desktop, tablet, and
mobile.

H.P.D.Mandara Prawarshana 55 Web design and Development

Development Team The front end development team's The front end development team
task is to plan, create, test, and relies on the back end to link pages
evaluate how the application will together and to provide security
look based on user input. and user support.
Frameworks Used React, AngularJS, vue.js, etc. Ruby on Rails, Flask, CakePHP,
Django, etc.
Additional Skills A solid command of UI and UX problem-solving and logical
design. thinking.
Table 77 - Frontend and Backend (interviewbit.com ,2022)

2.4 Web Tier Architecture

The web tier is made up of elements that manage client communication with the business tier. Its
main responsibilities are as follows: Create material for the customer in a variety of formats
dynamically. The 3-Tier Online Architecture, a unique web database application development
approach based on a three-tier paradigm, is made up of the bottom database tier, the middle client
tier, and the top client tier. The majority of web applications on the internet are created utilizing this
sophisticated three-tier architectural module. The three-tiered web architecture is designed to give
each service that may be built at each level improved flexibility and increased security. The three-
tier web architecture connects and assembles three links that help the website function without
interruption.Accordingly, three can be identified. Below is an explanation of those three.
(Docs.oracle.com,2022)

 Presentation Tier
The user interface and communication layer of the program, or presentation tier, is where end users
engage with the software. Information presentation to and data collection from the user are its
primary goals. The user interface and communication layer of the program are located at the
presentation tier, where users interact with it. Its main purpose is to inform the user and collect data
from them. For instance, a web browser, desktop application, or graphical user interface can all be
used to access this top-level layer (GUI). The most popular tools for creating online presentation
levels are HTML, CSS, and JavaScript. Desktop applications may be created in a variety of
languages, depending on the platform.

 Application Tier
The core of the application is the application layer, sometimes referred to as the logic tier or middle
tier. In this layer, data gathered in the presentation tier is processed using business logic, or a

H.P.D.Mandara Prawarshana 56 Web design and Development

particular set of business rules, sometimes in comparison to data gathered in the data tier. The
application tier stores the functional business logic that drives an application's fundamental features.
Programming languages including Python, C++, Java, NET, and Java are often used.

 Data Tier
Data tier manages a relational database management system on a database server or mainframe, and
it houses the computer data storage logic. Data tier also supervises the servers where the data is kept.
The data layer increases performance and scalability by keeping data separate from application
servers and processing algorithms. The application's data is stored and managed at the data tier,
which is sometimes referred to as the database tier, data access tier, or back-end. You can use a
NoSQL database server, like Cassandra, CouchDB, or MongoDB, or a relational database
management system, like PostgreSQL, MySQL, MariaDB, Oracle, DB2, Informix, or Microsoft
SQL Server.

All communication in this three-tier application occurs at the application layer. Direct
communication between the data layer and the presentation layer is not possible.

2.2 Discuss the differences between online website creation tools and custom-built web sites by
considering the design flexibility, performance, functionality, User Experience (UX) and User
Interface (UI). Evaluate the tools and techniques available to design the web application given
in the scenario.

2.5 Online Website Creation tools

A piece of software called a website builder enables you to establish an online presence. The
software is a component of a SaaS hosting platform or is hosted on a web server by a hosting
company (software as a service). This means that you are not keeping website-building software on
your own computer (desktop or laptop). As an alternative, you could use software made specifically
for building websites to create the website. Because the website builder includes hosting, you don't
need to purchase or set it up separately. The bulk of website builders on the internet are designed
for people with little to no coding skills. Online website builders should be easy to use, enabling
novice or experienced designers to create a finished website using a drag-and-drop editor in a
matter of minutes. No coding knowledge or experience is required; users can create websites by
simply dragging and dropping components into the appropriate place. Accordingly, the following
are Online Website Creation tools.

H.P.D.Mandara Prawarshana 57 Web design and Development

1. Wix
A publicly traded Israeli software business called Wix.com Ltd offers cloud-based site building
services. Using link drag-and-drop capabilities, it enables users to develop HTML5 web pages and
mobile sites. A simple and free website creation tool is Wix. Our customers have the ability to
create professional websites with ease that look fantastic on any screen because to our user-friendly
technology and strong built-in features. Wix is an all-in-one website builder that enables even those
without design or coding skills to easily construct appealing websites. Blogger, business owners,
and small company owners love Wix. The cost-effective Wix plans are worth taking a closer look at
if you want to create a website without spending a lot of money.
2. Shopify
It is an e-commerce platform with a website builder built in. Of course, its inherent link to one of
the most well-known online buying platforms in the world is its greatest advantage.
3. DudaMobile
The program is made to assist you in creating mobile websites.
4. On Device
A tool for presenting websites that enables users to show their website designs to clients in the most
efficient manner. Users may showcase how responsive their websites are on all screen sizes thanks
to the platform's mobile-first policy.
5. Squarespace
Building an online store and integrating it with a blogging platform will enable you to pursue
content marketing and SEO strategies.

2.6 Custom built sites

A website that is created from scratch is referred to as custom-built. It is programmed to meet the
aesthetic and functional requirements of your company. You can have whatever you want (or,
should we say, whatever your developer is capable of creating! ), as there is no template that will
impose restrictions on your needs. Custom websites are the product of teamwork between several
employees of your business. It all begins with a creative process of identifying your target market,
the people you want to connect with, the functionality of your website, and how you want to present
yourself online. Any website's success depends on SEO. There are specific rules that must be
observed while creating a website, and not all themes may adhere to these rules. Because of this,
custom-designed websites are so much better. The developer can optimize the site while it is being
built so that Google and other search engines can understand each page, leading to a more relevant
search result for the user and naturally giving custom-built sites a better ranking.
(codeminers.co.uk ,2022)

H.P.D.Mandara Prawarshana 58 Web design and Development

Differences between Online website tools and Custom built sites
The popularity of website building tools is due to a number of factors. Even if you don't know how
to code, you can create a website using these tools. These are often provided by website hosting
businesses as exclusive tools. To create a website, these tools include an editor, a number of themes,
and simple drag-and-drop functionality for various elements like photos, text, headers, etc. You
needed to hire the best web development team that took the time to comprehend your business
needs if you wanted to create a site from scratch. Such websites are more cost-effective in the long
run because they are simple to alter to accommodate your company's expansion.

Online Website Tool Custom built sites

Cost Cheap Expensive

Development time Development time is shorter At least takes 6-8 weeks

Responsiveness Not 100% responsive on all 100% responsive on all

devices devices
Optimization Is not SEO friendly It is optimized for search
engines during development
Functionality Can be limited Offers higher flexibility in
design capabilities and
advanced functionality

Design A few elements, including the The needs of the business will
background color, the font, and guide the design. Because the
the logo, are customizable. web designers will be familiar
Changes to the layout are not with the business, the finished
easily accommodated. product will complement the
marketing plan.

User Interface (UI) What you see with the design of It is possible to convey culture
the most templates is what you and personality through the
get. design of a unique website. You
can present, modify, and
incorporate a special website
design into a special template.

Table 88- Online website tools and Custom built sites( icecubedigital.com ,2022)

H.P.D.Mandara Prawarshana 59 Web design and Development

2.7 Tools used to design Custom-built Web Applications
 Protopie
A highly interactive prototyping tool called ProtoPie helps designers convert their ideas into
functional prototypes. ProtoPie stands out from many other prototyping tools since it is an
interaction-focused tool. This implies that rather than just displaying pixel-perfect templates, the
purpose of prototyping using ProtoPie is to assist designers in conveying a sense of interactivity.
This enables those who interact with a prototype to gain a feel for what interacting with the real
thing might be like. With the use of smart device sensors, designers may create the most cutting-
edge, highly interactive prototypes with the help of ProtoPie, a potent high-end prototyping tool for
Mac and Windows for mobile apps.
 Dreamweaver
An tool for making websites called Adobe Dreamweaver is available for both Windows and Mac
systems. The extensive set of tools and solutions includes syntax highlighting and extremely
advanced Code Hinting, a built-in FTP client, workflow and project management features that
facilitate cooperation, and Live View, which allows you to see your source code. Dreamweaver has
close ties to other well-known Adobe products like Photoshop and enables you to exchange smart
objects for quick and easy updating and altering of graphic components. Describe Dreamweaver.
Using the help of software that supports HTML, CSS, JavaScript, and other languages, you may
create websites with Adobe Dreamweaver nearly everywhere. From amateurs to seasoned experts,
Dreamweaver is helpful for a range of site designers. (du,edu.com ,2021)
 Firefox Developer
A version of Firefox made exclusively for web developers is called Firefox Developer Edition. You
get access to all of their Dev Tools as a developer. In order to fully satisfy the needs of web
development, further features include testing and debugging, CSS Grid generation and design,
HTML inspector, style editor, and a myriad of other tools. The new Firefox Dev Tools are strong,
adaptable, and—most importantly—hackable. This includes a top-tier JavaScript debugger that is
integrated with React and Redux, targets multiple browsers, and is best-in-class.
 Browser sync
Google has made its Mozilla Firefox plugin, Google Browser Sync, available for free. It was
launched on June 8, 2006, at Google Labs, and ended in June 2008. The amount of effort spent
testing increases quickly with every new online page, gadget, or browser. Browsersync automates
time-consuming manual tasks such as live reloading, URL pushing, form replication, and click
mirroring. It is comparable to having an additional set of hands. By changing a number of UL or
command line sync parameters, you may create a test environment that is uniquely yours. It is easy
to integrate Browsersync with your Node.js web server, build tools, and other programs.

H.P.D.Mandara Prawarshana 60 Web design and Development

 Adobe XD
Adobe Inc. has developed and released Adobe XD, a platform for designing user interfaces for
internet and mobile applications. You may preview the work directly on your phone or tablet with
the iOS and Android versions that are available for macOS and Windows. Pushing, Adobe XD
provides wire framing and prototyping for websites. A robust and user-friendly vector-based
experience design platform, Adobe XD provides teams with the tools they need to jointly create the
finest experiences in the world. With cross-platform compatibility, XD, which is available on Mac
and Windows systems, meets teams where they are working.

2.8 Techniques used to design Custom-built Web Applications

 Responsive Web Design Strategy
Due to the enormous rise in mobile device usage, responsive web design is no longer just a UX-
focused field of work. All marketers need to understand site design and make it responsive as part
of their strategic strategy. You might not need to be an expert in responsive web design and
development to be a successful web marketer. You'll need to be aware of the specific marketing
obligations of your content.
 No Stock Photography
Glamour photos no longer pique people's curiosity. They surely want a more objective view of what
a company stands for or represents. Dry stock images with a pure white backdrop are outdated.
People seek for persons with distinct personalities and compelling stories. Use only related images
on your website, please. Your audience receives subliminal messages from your photographs.
 CSS Media Queries
You can refer to a tutorial from CSS-Tricks that shows you how to use media queries to make small
adjustments to a single style sheet. According on the width of the browser window, one may know
what to do if the browser window is extremely small, what to do if it's broader, and what to do if it's
much wider in the case of a fluid-width design with a sidebar that is 35% of the page's real width.
 Make Your Site Accessible
Make your website accessible to a wide range of browsers and devices if you want to draw in a lot
of visitors. No matter what program or browser a user is using, you must make sure that they can
use your website.
 Maintaining Consistency
Maintaining the site's elements, such as colors, style, and typeface, in general, is a good idea. Your
website should be dynamic from one page to the next. This suggests that in order to maintain
consistency, your font, colors, and layout style should be the same on all of your pages. It's crucial
to keep the elements consistent across all pages to prevent the visitor from becoming lost.

H.P.D.Mandara Prawarshana 61 Web design and Development

Learning Outcomes:03
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.1 What is a web application?

An internet browser is used to view application software known as a web application. Users having
a live network connection can access web apps on the Internet. An application software that is kept
on a distant server and delivered via the Internet using a browser interface is known as a web
application (Web application). Since most websites do not contain web apps, web services are by
definition web applications. A website is a collection of linked, accessible web pages that share a
common domain name. An individual, business, or organization can design and maintain a website.
The website is built to do a number of tasks, including blogging. A website might be hosted on a
single web server or on several web servers. An IP address on a network, such as the Internet, or a
private local area network, can access it. Accordingly, following are the Client and User
Requirements related to the web application.

Client and User Requirements

Client Requirements refers to the materials and/or information that the Client must furnish, as
specified in the Order Form or as may thereafter be requested on an as-needed basis throughout the
course of providing the Services. They are specifications that the end user has established. In terms
of the product to be created, the necessary throughput, and the circumstances in which the product
should be made, these criteria describe how a facility, piece of equipment, or process should
operate.Accordingly, the map shows the Client and User Requirements for the health web
application. (parfval.com ,2018)

Client Requirements
 Operations for hospital management should be managed by hospital management system.
 Development of Hospital Management System
 All processes should be under the control of hospital management system.
 Should be able to save time and cost.

H.P.D.Mandara Prawarshana 62 Web design and Development

 The hospital management system should allow doctors, patients and administrators to register
and log in.
 For the convenience of the staff

User Requirements
Patient Requirements
 The patient must be able to register and log into the system.
 The patient should be able to update his/her profile information including his password.
 The patient should be able to book a doctor for 24 hours.
 The patient should be able to check if there are doctors.
 The patient can also check the information about the hospital.

Doctors Requirements
 Physicians must be able to register and log into the system.
 Physicians should be able to update his/her profile information including their password.
 Doctors should be able to book a patient 24 hours a day.
 Doctors should be able to check availability of appointments.
 Doctors should be able to find the patient

Hospital Admin Requirements

 It should be possible for the hospital administrator to sign up and log in.
 The hospital administrator need to be allowed to change both his or her password and profile
information.
 The status of the members should be able to be checked by the hospital management.
 The loan information should be able to be updated by the hospital administration.
 Patient return information should be updated by the hospital administrator.
 Calculating the required doctor charge should be possible for the hospital administration.
 Admin of the hospital The doctors ought to have access to a patient database.
 Add and remove patients should be possible for the hospital administrator.

3.2 Wireframes ( Online Hospital Management System)

A website wireframes, sometimes referred to as a page schematic or screen plan, is a graphic
representation of a website's basic structure. Other areas that employ a wireframes to describe three-
dimensional shape and volume gave rise to the name "wireframes." By illustrating the routes
between pages, wireframes connect the site's information architecture to its visual design, among

H.P.D.Mandara Prawarshana 63 Web design and Development

other things. Explain how specific types of information should be shown consistently on the user
interface. Identify the interface's intended functionality.

Wireframes are often low-fidelity drawings or digital images that represent content blocks and
navigational components using boxes and lines. A product team has access to the low-fi wireframes.
In order to layout content and functionality on a page while taking into account user needs and user
journeys, a wireframes is frequently used. Before adding visual design and content to a page, the
basic structure of the page is established using wireframes early in the development process.
Accordingly, the following are some wireframes designed for the health online hospital
management system.

Home page of the website - Online Hospital Management System

Here, Arogya will be ready to create a web application for the online hospital system. Here the
interfaces are created first. First a Home page is created. Accordingly, the interface that will be
created is shown below.

Login Buttons

Figure 3737 -home page (the author ,2022)

There are three buttons to enter the system. There is for the patient, doctor and staff. The system
can be accessed by clicking the relevant button.

Patient Login Page - Online Hospital Management System

Accordingly, the following is the login page designed for patients to enter the system. Here you can
enter the system by entering the patient's user name and NIC number and password. Here the web
page has been created by the author in a way that is convenient for the patient.

H.P.D.Mandara Prawarshana 64 Web design and Development

 Figure 3838 -login page (the author ,2022)

The patient can enter the system through this login page. That is, first a new account is created for
the system and then by entering the information, the system can be easily entered. Here you can
enter the system by entering user name, NIC number and password.

Patient Dashboard Page - Online Hospital Management System

Here, when entering the web application as a patient, the patient can see the following dashboard.
The author has created this for the patient to get details from the hospital. Accordingly following is
the interface.

Patient dashboard

Figure 3939 - admin page (the author ,2022)

H.P.D.Mandara Prawarshana 65 Web design and Development

Here, the patient can get some information about the hospital through the Dashboard. So first all the
details of the hospital will appear. Doctors information can be accessed by clicking the second
button. Accordingly, the patient can see the information of all doctors registered in the hospital.
Thirdly, the patient can get an appointment. This service can be obtained by mentioning some
information of the patient.

View Doctor Page - Online Hospital Management System

Here the Patient can view the Doctor list. For that, you can click on the View Doctor button and
view it on the Patient. Accordingly, the following is the interface designed for the Doctor list. Here
the table shown in the interface below is a sample table. That is, the correct data is not mentioned in
that table.

View Doctors
Details

Figure 4040 -Doctor view (the author,2022)

Appointment Page - Online Hospital Management System

Accordingly, the following is the page that a patient should visit to get an appointment. Here, the
patient gets an appointment with that doctor without the relevant doctor. Accordingly, the patient
should provide some patient information. First the patient's first name and second name should be
given. Then the relevant province and phone number should be mentioned. Then Gender should be
selected. Finally, some additional details about the patient should be given. That is, a description of
the patient's illness should be given. Here, the author has designed this in a way that makes it easy
for the user. Accordingly, the following is the interface.

H.P.D.Mandara Prawarshana 66 Web design and Development

 Figure 4141 -Appointment page (the author ,2022)

Doctor Login Page - Online Hospital Management System

Accordingly, the following is the login page designed for Doctor to enter the system. Here you can
enter the system by entering the Doctors user name and password. Here the web page has been
created by the author in a way that is convenient for the Doctor.

Figure 4242 -Doctor login page (the author,2022)

The doctor can enter the system through this login page. Here the doctor can enter the system by
first entering his user name and password. Here the doctors register is done by the hospital. You can
enter the system by using the user name and password.

H.P.D.Mandara Prawarshana 67 Web design and Development

Doctor Dashboard Page - Online Hospital Management System
A doctor enrolled in the above system, a doctor without his user name, password and user type can
enter the system. After entering the system, you can see the separate dashboard for doctors.
Accordingly, the following is the doctor dashboard created by the author.

Figure 4343 -Doctor dashboard (the author,2022)

A doctor can check his appointment here. Here it can be viewed if the patient has made an
appointment for today. Here it will be displayed first by updating it. In addition, separate buttons
have been added by the author to view patient details. It is possible to view the details of all patients.
Here you can click the Dashboard button to contact the hospital. In addition to that, several links
have been added for appointments and patients, so that the same information as mentioned above
can be obtained. It is added by the author for user convenience.

View Patient Page - Online Hospital Management System

This interface is used by Doctors to retrieve patient information. You have to go to the View Patient
page for that. For that, there is a View Patient button on the Dashboard which can be viewed by
clicking on it. Since a large number of patients are entered into the system, a patient can be found
by searching later. Accordingly, the interface created by the author is shown below. Here, after a
patient is entered into the system, Doctors will only display some information about that patient.
Accordingly, this doctor has been given to contact the patient later. Accordingly, Doctors can
monitor the appointment given by the patient. It can get details about the number of patients and the
patient's disease.

H.P.D.Mandara Prawarshana 68 Web design and Development

 Figure 4444 - View Patient Page(the author)

View Appointment Page - Online Hospital Management System

Below is the Appointment page. Accordingly, when a patient makes an appointment, the details
about it appear here. This means that only Doctors are visible. It can get details about the patient
before meeting the patient. Doctors can get details about the patient's illness here.

Figure 4545 -View appointment (the author ,2022)

Staff Login Page - Online Hospital Management System

To join the hospital staff, click the Staff Login Button on the Home page. Accordingly, the Staff
Login page can be seen. Below is the Staff Login interface designed by the author.

H.P.D.Mandara Prawarshana 69 Web design and Development

 Figure 4646 -Staff Login page (the author ,2022)

Staff Dashboard Page - Online Hospital Management System

Accordingly, the following is the dashboard page of the hospital staff. Here the staff can see all the
details of the hospital by clicking the Dashboard Button. Secondly, the information of Doctors and
patients can be obtained. According to that, Appointment and other information of the hospital
(beds, rooms and more) can be obtained. Later, new doctors can be added to the system and an
existing doctor can be deleted from the system. Accordingly, the author has designed this interface
in a user-friendly manner.

Figure 4747 -Staff page (the author ,2022)

H.P.D.Mandara Prawarshana 70 Web design and Development

Add New Doctor Page - Online Hospital Management System
Here, the interface shown in the following interface is the interface designed to add a new doctor to
the system. Here the user can go to that web page by clicking the add doctor button. Here the user
name and name should be mentioned. In addition, a new doctor can be added to the hospital system
by providing an email address and a password. Then a doctor can enter the system by providing the
user name and password. After adding a new doctor to the system, the doctor's details can be
viewed through the View Doctor page.

Figure 4848 -Add doctor page (the author ,2022)

Delete Doctors Page - Online Hospital Management System

This web page is used to delete a doctor from the system. Here this can only be done by the hospital
staff. Here the doctor can be removed from the system by providing the doctor's first name, email
address and password. Accordingly, the following is the interface.

Figure 4949 -Doctor delete page(the author ,2022)

H.P.D.Mandara Prawarshana 1 Web design and Development

Contact Page - Online Hospital Management System
Here, these three parties can contact the hospital under the context of the home page.Here you can
see the location (address) of the hospital and the e-mail address of the hospital as well as the phone
number of the hospital. Accordingly, the following is the interface.

Figure 5050 -Patient page (the author ,2022)

3.3 UML diagrams for Online Hospital Management System

Software engineering's Unified Modelling Language is a general-purpose development modelling
language that aims to offer a uniform method of visualizing system designs. The aim to standardize
various notation systems and methods to software design served as the initial inspiration for the
development of UML. A UML-based diagram that serves to visually represent a system along with
its key actors, roles, actions, artefacts, or classes in order to better understand, alter, maintain, or
document system information.

UML is a visual language rather than a programming language. To depict the behaviour and
structure of a system, we use UML diagrams. UML provides modelling, design, and analysis
assistance to software engineers, businesspeople, and system architects. Unified Modelling
Language was made a standard by the Object Management Group (OMG) in 1997. Since then,
OMG has been in charge of it. UML was issued as a recognized standard by the International
Organization for Standardization (ISO) in 2005. UML has undergone numerous revisions over time
and is regularly examined. Accordingly, the following are some UML diagrams designed for
Arogya Margate web application. (geeksforgeeks.org ,2022)

H.P.D.Mandara Prawarshana 1 Web design and Development

LOGIN Digram
Below is the UML diagram prepared for entering the hospital administrator, patient, and Doctors
system.

Figure 5151 -digram (the author ,2022)

Here, the author has created a FLOCHART for a user to access the system. Here you can access the
system without correct user name, password and user type. For some reason, the user cannot enter
the system by specifying the wrong user name, password and user type. That is, the user can try to
enter the system again and again.

Dashboard Enter Digram

H.P.D.Mandara Prawarshana 2 Web design and Development

The diagram below shows that a user selects the correct user name, password and user type and
enters the system. Here, the author has mentioned an interface for the hospital user as well as an
interface for the patient and an interface for the doctor. Accordingly, the following is the flowchart
diagram created by the author.

Figure 5252 -digram (the author ,2022)

Access to hospital admin Flowchart Digram

Entry into the scheme is mentioned in the above flowchart and this diagram shows the flowchart
diagram created by a hospital administrator stating the steps given to an administrator after joining
the scheme. Here the user interface changes by selecting the user type. Accordingly, the following
is a flowchart diagram designed by a hospital administrator in such a way that the system can
behave after entering the system.
 Here a hospital administrator can view the doctor list.
 In addition, the patient list can be viewed.
 Appointment list can also be viewed.
 Prescription list can also be viewed.
 In addition, a new doctor can be introduced to the system.

H.P.D.Mandara Prawarshana 3 Web design and Development

 In addition to this, the hospital administrator can also delete a doctor from the system.

Figure 5353 --digram (the author ,2022)

Access to Doctor Flowchart Digram

Here too, after a doctor is included in the system, the author has indicated some changes that the
doctor can make in the system. Here the author has shown it through a flowchart. The above
interface is also shown here. Accordingly, the following is the flowchart diagram.
 It is possible to view the appointment here.

H.P.D.Mandara Prawarshana 4 Web design and Development

 In addition, it is possible to check patient details.
 The hospital is also easily accessible.
Access to Patient Flowchart Digram
Here it is possible to make any changes after a patient is entered into the system. Here, the author
can check the Book appointment and appointment history. In addition, the author can check the
prescription details. Here below is the flowchart diagram created by the author for entering a patient.

Figure 5454 -digram (the author ,2022)

3.4 Use Case Diagram (Arogya online hospital management system)

A graphical representation of a user's potential interactions with a system is called a use case
diagram. A use case diagram displays the many use cases, user categories, and frequently other
sorts of diagrams that are present in the system. Circles or ellipses are used to indicate use scenarios.
The scope and high-level functions of a system are described in use-case diagrams. The interactions

H.P.D.Mandara Prawarshana 5 Web design and Development

between the system and its actors are also depicted in these diagrams. Utilize-case diagrams show
what the system does and how the actors use it, but they do not show how the system works within.
A use case is a detailed explanation of how visitors will use your website to complete tasks. It
describes how a system behaves in response to a request from the viewpoint of a user. Each use
case is represented as a series of easy steps that start with the user's objective and end when that
objective is achieved.

Figure 5555 -use-case diagram (the author,2022)

3.5 ER Diagram (Arogya online hospital management system)

Here a database should be created for the health online web application. For that first an ER
diagram should be created. Accordingly, the relationship between the hospital and the patients as

H.P.D.Mandara Prawarshana 6 Web design and Development

well as between the hospital and the doctor is depicted in this diagram. Accordingly, the ER
diagram created by the author is shown.

Figure 5656 -ER digram (the author ,2022)

3.5 Principles, standards and guidelines of a website

Website Purpose
Some websites' main goal is to only show, distribute, or display some information or content online.
In other words, your website ought to take your users' needs into account. All pages should simply
have a clear aim to urge the reader to engage with what you're trying to express. What do you hope
to achieve with your website? Is it possible to get useful knowledge, like a "How to Guide"? Is
there entertainment at the sporting event? Do you have a website? Do you sell goods to customers
via your website? And while websites serve a variety of functions, they all share some fundamental
ones. That is,
 Description of expertise

H.P.D.Mandara Prawarshana 7 Web design and Development

 Reputation building
 Generating leads
 Sales
Simplicity
When it comes to website user interface and accessibility, simplicity is the way to go. That is, the
author tries to prepare the web application in such a way that users can easily use the above
interfaces. Accordingly, the following are some examples of how to achieve simplicity through
design.
1. Colors - Both information and emotional responses may be conveyed via colors. You can
affect how your customers behave toward your brand by choosing a colors scheme that goes
well with it. Limit the colors scheme to no more than five hues. The use of vibrant colors
improves the experience for customers.
2. Type - Your website's typography is really important. It catches the eye and embodies the
brand's aesthetic philosophy. Only three distinct fonts should be used on the website, and
typefaces should be readable.
3. Imagery - In communications, imagery refers to any visual element used. This is exemplified
through many visual arts including photography, illustration, cinema, and others. All graphics
must be descriptive, convey the essence of the business, and showcase the brand's uniqueness.

Navigation

On websites, users use the navigation to access search tools that connect them to relevant content
and help them locate what they're looking for. In order to draw visitors, the website must be easy to
browse. If a website's navigation is unclear, visitors may leave and look for what they need
elsewhere. The navigation on every website needs to be simple, straightforward, and consistent.

F-shaped pattern reading

The most common way that people search for text on websites is via the F-based pattern. Eye-
tracking research show that people mostly focus on the top and left parts of the screen. The F-
shaped structure corresponds to how we naturally read (left to right and top to bottom). An effective
website should conform to a reader's normal page-scanning habit.

Visual Hierarchy
A visual hierarchy is the arrangement of objects in the hierarchy of their importance. This is
influenced by factors including scale, colors, imagery, contrast, typography, space, texture, and

H.P.D.Mandara Prawarshana 8 Web design and Development

design. One of the most important tasks of visual hierarchy is focus point setting; it instructs
viewers where to find the most pertinent information.

Content
An effective Web design combines great design with engaging content. The use of captivating
language and top-notch content will draw customers by influencing and attracting them.

Grid Based Layout

Grids help to structure and organize your design. The grid maintains the components' alignment and
organization on the page. The grid-based design creates a visually pleasing website by dividing the
content into columns in a tidy, linear grid framework, with elements that match and look balanced
and enforce order.

Load Time

If a website takes too long to load, users will leave. A site that takes longer than three seconds to
load is often abandoned by nearly half of website visitors who expect it to load in two seconds or
less. To make the website load more quickly, picture sizes can be optimized.

Mobile Friendly

More people are accessing the internet through their phones or other devices. It's crucial to consider
using a responsive layout when creating your website so that it can adapt to various 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 analysing any technical challenges
you faced during the development.

3.6 Creating an Arogya web application using HTML, CSS, JAVASCRIPT,

AND PHP.
Home Page – Arogya Hospital Management System
Here the author has created the web application and here first the details of the hospital are shown
in the web application. That is information about the hospital. In addition, the information of
doctors is also included. Here the author has designed it in such a way that the user can handle it

H.P.D.Mandara Prawarshana 9 Web design and Development

easily. Here, secondly, admission to the system is arranged. Accordingly, the following is the
original web page created by the author. The fields used by the author to create it are mentioned
below.

Figure 5757 -Home page (the author ,2022)

Home Page Code

The codes of the web page fixed above are mentioned below.

Figure 5858 -Home page (the author,2022)

H.P.D.Mandara Prawarshana 10 Web design and Development

Login Page (Patient)
Here the author has created a web page to enter the system. Here the doctor and hospital staff can
only enter the system. Here, the patient has to create a new account while entering the system and if
there is a new account, he can enter the system through that account. Here the author has designed it
in a user-friendly way. Accordingly, the following is the login page created by the author.

Figure 5959 -Patient login page (the author ,2022)

Login Page Code

Here too, the author has created three separate login pages. That is for the patient, the doctor as well
as the staff. Accordingly, below are the codes used to create those pages.

Figure 6060 -Login page code (the author ,2022)

H.P.D.Mandara Prawarshana 11 Web design and Development

Login PHP Code
Below are the PHP codes used to create those pages.

Figure 6161 -Login php code (the author ,2022)

Patient Dashboard page

Once a patient is enrolled in the system, one can avail several services through this system, is to
access their patient information. The patient can get several services like getting a doctor's help and
appointment. These services can be availed only after being admitted to the system as a patient.
Here the author has designed it in such a way that the patient can handle it easily. Accordingly, the
following is the Patient Dashboard created by the author.

Figure 6262 - Patient Dashboard (the author ,2022)

H.P.D.Mandara Prawarshana 12 Web design and Development

Patient Dashboard page Code
Accordingly below are the codes to create the Patient Dashboard by the author.

Figure 6363 -Patient Dashboard code (the author ,2022)

Appointment Page
Here, the author can get the service in the Patient Dashboard on the web page to book appointment
easily. For that, the author has prepared it in such a way that the patient can handle it easily.
Accordingly it is given below.

Figure 6464 -Appointment Page (the author ,2022)

H.P.D.Mandara Prawarshana 13 Web design and Development

Appointment Page Code
Accordingly, the following are the codes used by the author to create the Book Appointment Page.

Figure 6565 -Appointment Page code (the author ,2022)

Form PHP Code

Figure 6666 --Appointment Page code (the author ,2022)

View Patient Page

Here, this web application is used to take care of the patients. Accordingly, the following is the
created web page. Here, it is possible to access the information of all the patients.

H.P.D.Mandara Prawarshana 14 Web design and Development

 Figure 6767 -view patient page (the author ,2022)

View Patient Page code

The author has created a table to display Patient information to the user. Accordingly, below are the
codes used to create the Patient View page.

Figure 6868 -view patient code (the author ,2022)

Figure 6969 php code (the author ,2022)

H.P.D.Mandara Prawarshana 15 Web design and Development

Admin Login Page
Here, the author has prepared a web page for entering the system in the hospital. Here the hospital
administrator can enter the system by entering the user name and password. Here the author has
prepared the web page in a user-friendly way. Accordingly, the following is the web page created
by the author.

Figure 7070 -Admin login page (the author ,2022)

Admin Login Page Code

Here, the author has prepared a web page for entering the system in the hospital. Accordingly,
below are the codes used by the author to create the web application.

Figure 7171-Admin login page (the author ,2022)

Figure 7272 php code (the author ,2022)

H.P.D.Mandara Prawarshana 16 Web design and Development

Admin Dashboard Page
Following is the page that will appear after the administrator enters the system. Here the author has
given permission to the user to administer the system. Accordingly, the hospital administrator can
see doctors and patients and add new doctors and delete a doctor from the database. Apart from that,
appointment details can also be viewed.

Figure 7373 -dashboard(the author ,2022)

Admin Dashboard Page Code
Below are the codes used to create the dashboard.

Figure 7474 -dashboard(the author ,2022)

H.P.D.Mandara Prawarshana 17 Web design and Development

View Doctor Page
The author has created a table to display Doctor information to the user. There the user can view
Doctors information. There, the user can view information such as ID number, name, address,
phone number.

Figure 7575 View Doctor page (the author ,2022)

View Doctor Page Code

The author has created a table to display Doctor information to the user. Accordingly, below are the
codes used to create the Doctors View page.

Figure 7676 -View doctor (the author,2022)

H.P.D.Mandara Prawarshana 18 Web design and Development

View Patient Page
The administrator can view the patient information page. Here the author has prepared this in a
user-friendly manner. Accordingly below is the patient page.

Figure 7777 -View Patient(the author ,2022)

View Patient Page Code

Accordingly, below are the codes used to prepare the patient details page.

Figure 7878 -View Patient(the author ,2022)

Figure 7979 - php code (the author ,2022)

H.P.D.Mandara Prawarshana 19 Web design and Development

Add Doctors Page
Here, the author has prepared an Add Doctor page for the hospital administrator to include a new
Doctor in the system.

Figure 8080 -Add doctor (the author,2022)

Add Doctor Page Code
The author has prepared an Add Doctor page for the hospital administrator to include a new doctor
in the system. Accordingly, following are the codes used to create it.

Figure 8181 -Add doctor (the author,2022)

Figure 8282 php code (the author ,2022)

H.P.D.Mandara Prawarshana 20 Web design and Development

Delete Doctor Page
Here, the author has prepared a separate web page for the hospital administrator to delete a doctor
from the system. Here, by providing the information of the Doctor to be deleted from the system,
that Doctor can be deleted from the system.

Figure 8383 -Delete Page(the author ,2022)

Delete Doctor Page Code

Here, the author has prepared a separate web page for the hospital administrator to delete a doctor
from the system. Accordingly, below is the code used to create that page.

Figure 8484 --Delete Page(the author ,2022)

H.P.D.Mandara Prawarshana 21 Web design and Development

Doctors Login Page
Here the author has prepared a web page for logging into the hospital system. Here the doctor of the
hospital can enter the system by entering the user name and password. Here the author has made the
web page user friendly. Accordingly, the following is the web page created by the author.

Figure 8585 -Doctors Login Page (the author ,2022)

Doctors Login Page Code

Here, the author has prepared a web page for logging into the hospital's system. Accordingly below
are the codes used by the author to create the web application.

Figure 8686 -Doctors Login Page (the author ,2022)

Figure 8787 -php code (the author ,2022)

H.P.D.Mandara Prawarshana 22 Web design and Development

Doctor Dashboard
Here the page after the doctor is entered into the system is given below. Accordingly, the doctor can
obtain any number of the system. Accordingly, patient information can be easily obtained by the
doctor. Here the author has prepared this page in a user-friendly way.

Figure 8888-Doctor Dashboard(the author,2022)

Doctor Dashboard Code

Here the page after the doctor is entered into the system is given below. Accordingly, the fields
used by the author to prepare this are given below.

Figure 8989 -Doctor Dashboard(the author,2022)

H.P.D.Mandara Prawarshana 23 Web design and Development

View Patient Details Page
Here the doctor has set up this web page to monitor his patients. Accordingly, all the patients of the
hospital are mentioned here. Below is the web page designed to monitor those patients.

Figure 9090 -view patient (the author ,2022)

View Patient Details Page Code

Here the doctor has set up this web page to monitor his patients. Accordingly, the codes used to
prepare that web page are shown below.

Figure 9191 -view patient (the author ,2022)

Figure 9292 php code (the author ,2022)

H.P.D.Mandara Prawarshana 1 Web design and Development

Appointment History Page
Here, if a patient has made an appointment through the appointment system, the doctor can easily
take care of it. Accordingly, the following is the web page.

Figure 9393 -Appointment History Page (the author ,2022)

Appointment History Page Code

Here the author has prepared this web page in a user friendly way. Accordingly, below are the
codes used to create that separate page.

Figure 9494 -Appointment History Page (the author ,2022)

H.P.D.Mandara Prawarshana 1 Web design and Development

3.7 Comparison between the website and the actual document
Here, the author has created the interface before preparing the web page. Accordingly, those
interfaces are given above. Here a comparison is made between the interface and the web
application. Accordingly, below are the comparisons.
Design Document

Login page

Back to
Home page

Figure 9595 -Design Document (the author ,2022)

Actual Website

Figure 9696 -Actual Website (the author ,2022)

The above author has shown that the interface and the actual web page are created before the web
page is created. Here, the hospital Patient has provided the web page for joining the scheme. There
is no difference between the designed interface and the actual web page. That is, the author has
created it as such. Here you can access the system by entering the user name,ID number and
password. Here, the author has created three login pages for the system. Accordingly, the above is
the web page used by the hospital Patient to enter the system.

H.P.D.Mandara Prawarshana 2 Web design and Development

Design Document

Login page

Back to
Home page

Figure 9797 Design Document (the author ,2022)

Actual Website

Figure 9898 -Actual Website (the author ,2022)

The above author has shown that the interface and the actual web page are created before the web
page is created. Here, the hospital Doctors has provided the web page for joining the scheme. There
is no difference between the designed interface and the actual web page. That is, the author has
created it as such. Here you can access the system by entering the user name and password. Here,
the author has created three login pages for the system. Accordingly, the above is the web page used
by the hospital Doctors to enter the system.

H.P.D.Mandara Prawarshana 3 Web design and Development

Design Document

Dashboard
Button

Figure 9999-Design Document (the author ,2022)

Actual Website

Figure 100100 -Actual Website (the author ,2022)

The author has created a dashboard for hospital users. Here the author must prepare an interface
before creating the web page. There is no difference between the interface developed by the author
and the web application created by it. Accordingly, the above is the web application developed by
the author with the interface and coding. Here this is a web page designed for hospital users only.

H.P.D.Mandara Prawarshana 4 Web design and Development

Design Document

View Patient Table

Figure 101101 -Design Document (the author ,2022)

Actual Website

Figure 102102 -Actual Website (the author ,2022)

The author may make some changes in the system to the hospital user. Here the hospital Doctor
can view Patient information. The author has created a web page for that. Accordingly, the above is
the web page prepared by the interface and fielding created by the author.This web page has been
created similar to the interface created by the author.It does not appear here because the data has not
been entered on the web page.

H.P.D.Mandara Prawarshana 5 Web design and Development

Design Document

View Table

Figure 103103 -Design Document (the author ,2022)

Actual Website

Figure 104104 -Actual Website (the author ,2022)

The author may make some changes in the system to the hospital user. Here the hospital Patient can
view the Doctors information. The author has created a web page for that. Accordingly, the above is
the web page prepared by the interface and fielding created by the author. Accordingly, the web
page has been prepared similar to the interface created by the author. It does not appear here
because the data has not been entered on the web page.

H.P.D.Mandara Prawarshana 6 Web design and Development

Design Document Doctor Add
Form

Figure 105105 -Design Document (the author ,2022)

Actual Website

Figure 106106 -Actual Website (the author ,2022)

The hospital administrator should visit this web page to admit a new doctor to the hospital.
Accordingly, the interface created by the author and the web page prepared by fielding is shown
above. Accordingly, the author was able to create it equally. Here the doctor can be entered into the
system by providing the information and clicking the Add button.

H.P.D.Mandara Prawarshana 7 Web design and Development

Design Document

Patient
Dashboard

Figure 107107 Design Document (the author ,2022)

Actual Website

Figure 108108 -Actual Website (the author ,2022)

The web page that appears to the patient after a patient is admitted to the online hospital system and
the interface created by the author are detailed. Accordingly, the web page has been created
identically by the interface and fielding created by the author. Accordingly, the author has tried to
design in a way that is convenient for the patient.

H.P.D.Mandara Prawarshana 8 Web design and Development

Design Document

Doctor
Dashboard

Figure 109109 -Design Document (the author ,2022)

Actual Website

Figure 110110 -Actual Website (the author ,2022)

Here the author has created a web interface for the doctor. That is, after a doctor is entered into the
system, this page appears. Here, the interface created by the author and the web page created by
fielding have been prepared equally. Accordingly, the author has designed it in such a way that the
doctor can easily behave. Accordingly, the above is the interface and web page created by the
author.

H.P.D.Mandara Prawarshana 9 Web design and Development

3.8 Technical problems faced by the author by creating the web application.
There are several technical hurdles when developing a website. While building the online hospital
management system, the developer faced various technical difficulties. That is the following is the
problem
faced.

The technical error of XAMPP

server faced by the author.

The programmer also faced some technical difficulties while creating the online hospital
management system. Accordingly, the above is a technical error in the XAMPP server. Here, the
author prepared a solution to avoid this problem. Accordingly, the following is the solution taken by
the author to avoid it.

This is due to a technical error in the XAMPP server. After that, the server was turned off and
restarted, but the server did not work. It was later updated. Then the server reconnected. That
technical glitch never came up again.

Figure 111111 -XAMPP Run (the author ,2022)

H.P.D.Mandara Prawarshana 10 Web design and Development

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

4.1 Quality Assurance?

Software quality assurance (QA) is what, exactly? Software quality assurance (SQA) is the process
of keeping an eye on all software engineering activities, procedures, and techniques used in a
project to make sure the software is of the right calibre and complies with the established standards.
Process audits, process standards, process documentation, and process check-lists are a few
examples of quality assurance activities. Peer reviews of deliverables, inspection, and software
testing are a few examples of quality control procedures. (www.techtarget.com)
The words "quality control" and "quality assurance," which refer to two separate management-
related concepts, are sometimes used interchangeably. On the other side, quality control comprises
upholding the set standards for quality. Monitoring quality management practices to make sure they
are effective is known as quality assurance.

4.2 Quality Assurance Process

Fit for use or purpose is the simplest way to describe quality, which is incredibly difficult to
quantify. It all comes down to fulfilling the requirements and expectations of the consumer in terms
of the product's usefulness, design, dependability, durability, and pricing. Assurance is nothing
more than a confident statement made about a good or service. It is the assurance that a good
outcome is guaranteed for a good or service. It offers a warranty that the product will perform
faultlessly in accordance with expectations or requirements.
A technique to guarantee the quality of software goods or services offered to clients by a business is
known as quality assurance in software testing. The goal of quality assurance is to increase the
efficiency and effectiveness of the software development process in accordance with the quality
standards established for software products. The PDCA cycle, often known as the Deming cycle, is
a specified cycle in the quality assurance system. These cycle's stages are.

Plan - Organizations should plan, set process-related goals, and identify the procedures needed to
provide a high-quality final result.

Do - Process development, testing, and implementation of modifications

H.P.D.Mandara Prawarshana 11 Web design and Development

Check - Monitoring of processes, process modification, and evaluation of whether it achieves the
specified goals

Act - Implement the steps necessary to improve the procedures. To ensure that the product is
designed and implemented in accordance with established procedures, a company must use quality
assurance. This helps to lessen problems and errors in the finished product.

4.3 Quality Control

It takes a procedure called quality control (QC) to attain or enhance product quality. The SDLC
waste process elimination efforts can also be a part of the QC process. A variety of testing
procedures are used in QC functions to find and fix technical problems.

It is a Software Engineering process that guarantees the quality of an item or service. Instead of
evaluating the processes used to create a product, it evaluates the quality of the "end products" and
the final result. The main objective of quality control is to make sure that the products meet the
requirements and expectations of the consumer. Any found fault or defect must be fixed before the
customer receives the goods. Additionally, QC evaluates individuals' skill sets and offers training
and certifications in accordance with their quality levels. For service-based businesses, conducting
this assessment is essential because it helps deliver "perfect" customer service. (bmc.com ,2022)

4.4 The Difference Between Quality Assurance and Quality Control

Although quality assurance and quality control can often be used interchangeably to refer to the
quality management of a project's product or service, the difference between the two is both subtle
and important. The difference is in where the project puts its attention. Quality control is more
focused on quality early in the project phase. On the other hand, assurance is concerned with
carrying out inspection and methodical testing at every level of the project. A quality system is used
by quality assurance to perform administrative and procedural tasks that lead to project goals for the
good or service. This makes it possible to measure something consistently and compare it to a
standard, as well as to monitor the production process and create a feedback loop to make sure no
errors are made. On the other hand, quality control is mostly focused on the process's output.
(bmc.com ,2022)

4.5 Here, we can talk about a different QA step.

Quality assurance testing is the process of testing whether or not a system or its components meet
specified requirements. Simply put, software QA is the execution of a sequence of actions to

H.P.D.Mandara Prawarshana 12 Web design and Development

identify gaps, bugs, and errors that conflict with requirements. Accordingly, several steps can be
identified. Accordingly, the following steps will be discussed.

Review requirements and documentation

Reviewing the criteria gives you the chance to check them over for flaws and/or omissions.
Additionally, it ensures that the requirements' general quality is sufficient before the project starts.
Accordingly the following properties can be identified.
 completeness
 redundancies
 clarity
 consistency
 excitability
 Verifiability

Key benefits for the development process

An organization's capability is improved through organization development (OD), which aims to
align strategy, structure, people, rewards, metrics, and management procedures.
 Errors cost less when they are discovered early.
 A higher-quality project with less lobar input and more accurate estimates results from better
documentation.
For this stage, you might want to use specialized document review tools like Confluence. You may
gather any pertinent information that will be used for the project's documentation and maintain
track of it in an internal knowledge base. As soon as requirements or documents are changed,
updated, added, or removed, all team members are made aware of the change.

Plan and prepare test cases

For this stage, you might want to use specialized document review tools like Confluence. You may
gather any pertinent information that will be used for the project's documentation and maintain
track of it in an internal knowledge base. As soon as requirements or documents are changed,
updated, added, or withdrawn, all team members are made aware of the change.

Design Test Cases

The development stage is finished, and the QA team starts running the test cases. This stage's main
goal is to confirm that the solution has been technically constructed correctly and that it meets the
initial product owner's expectations.

H.P.D.Mandara Prawarshana 13 Web design and Development

Below are the main QA activities and their aims
The primary objective of quality assurance is to track and resolve inadequacy before product release.
Most organizations often assign distinct QA departments, which help to increase customer
confidence and reliability, and also help to enhance efficiency and overall work processes.
 A smoke test should be performed first. To make sure the program or its module operates as
expected, QA engineers perform a cursory review. The investigation process starts as soon as
the bill is passed.
 During integration testing, confirm that various components work as a single system.
 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)
 Make sure the solution has a high enough level of security by doing security testing.
 A number of browsers and operating systems are supported by the application thanks to cross-
browser/cross-platform testing. This is especially important for hybrid and internet apps.
 Regression testing finds bugs in code that has already been tested. This is typically necessary
when modifying an existing system or adding new functionality.
QA for Online Hospital Management System
The developer made various changes to the actual website during the QA process after producing
the wireframes. To give customers the best UE possible, the developers made full use of the QA
procedure. The majority of the wireframes deviate from the actual website since the developer
created them with fewer user demands in mind. But the developer changed the website as needed
after compiling all of the user's requirements. Although there were design and technical challenges
for the developer, they were resolved in activity 3.2.

4.2 Create a suitable test plan for the developed system and critically evaluate the results of
your Test Plan. Include a review of the overall success of your multipage website; use this
evaluation to explain any areas of success and provide justified recommendations for areas
that require improvements.

4.6 Create a suitable test plan for the developed system and critically evaluate
the results of your Test
The author created an online web application for the health hospital and here first created the
interfaces. Accordingly, the second web application is created. All related activities are mentioned
above. Here the web application developed by the author is tested. Accordingly the following is the
web application to identify the problems of the web application and to test it.

H.P.D.Mandara Prawarshana 14 Web design and Development

Test Case 01 – Admin

Test Case Input data Expected Actual result Test result

result (Pass /Fail)
Access to the User name is The system does The system does not Pass
system without [email protected] not allow access, allow access, and a
entering the Password is Empty and a message message appears to
user name and appears to the user. the user.
password.
Table 99 -Test case (the author,2022)

Entering the system without

specifying the password

Figure 112112- Before entering the system (the author ,2022)

The system does not allow

entry. A message will be
displayed for that.

Figure 113113 -Display Message(the author ,2022)

H.P.D.Mandara Prawarshana 15 Web design and Development

Test Case 02 – Admin
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Entering the Incorrect user name Here, an error Here, an error Pass
system using X GMAIL.COM message appears to message appears to
wrong user correct password the user when the user when
name and 12345 entering the system entering the system
correct using the wrong using the wrong user
password user name and name and correct
correct password. password.
Table 1010 -test case 2(the author 2022)

Entering the system using

wrong user name and correct
password

Figure 114114 -login page (the author ,2022)

Figure 115115 -error message display (the author,2022)

Figure 116116 -Error message code (the author ,2022)

H.P.D.Mandara Prawarshana 16 Web design and Development

Test Case 03 – Admin
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Entering the Correct user name Here, an error Here, an error Pass
system using is message appears to message appears to
wrong [email protected] the user when he the user when he
Password and Incorrect password is logs into the system logs into the system
56789
correct User using the wrong using the wrong
name password and password and
correct user name. correct user name.
Table 1111 -Test case 3 (the author ,2022)

Entering the system using

wrong Password and correct
User name

Figure 117117 -login page (the author ,2022)

Figure 118118 -error message display (the author,2022)

Figure 119 -Javascripcode (the author ,2022)

H.P.D.Mandara Prawarshana 17 Web design and Development

Test Case 04 – Admin
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Entering the Correct user name Here, the dashboard Here, the dashboard Pass
system using is is accessed by is accessed by
Correct [email protected] displaying a displaying a
Password and Correct password is message to the user message to the user
correct User 12345 when they log into when they log into
name the system using the system using the
the correct correct password
password and and correct user
correct user name. name.
Table 1212 -Test case 4 (the author,2022)

Entering the system using

Correct Password and correct
User name

Figure 120119 -Login page (the author ,2022)

Figure 121120 -Dashboard(the author ,2022)

Figure 122121 -Login code (the author ,2022)

H.P.D.Mandara Prawarshana 18 Web design and Development

Test Case 05 – Admin
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Add Doctor Here the Doctor Here, Doctor was Once the Pass
gives some personal able to successfully information is added
information and collect personal to the system, the
adds it to the information into the information will
system. system. appear on the View
Message
Table 1313 -Test case 5(the author ,2022)

Here the Doctor gives some

personal information and adds it
to the system.

Figure 123122 -Add doctor details(the author,2022)

Alert Messages

Figure 124123 --Add doctor details(the author,2022)

H.P.D.Mandara Prawarshana 19 Web design and Development

Test Case 06 – Patient

Test Case Input data Expected Actual result Test result

result (Pass /Fail)
Login System User name is The system does The system does not Pass
[email protected] not allow access, allow access, and a
NIC is xxxxx and a message message appears to
Password is Empty appears to the user. the user.
Table 1414 -Test case 05 (the author ,2022)

Entering the system without

specifying the password

Figure 125124 -Patios Login page (the author ,2022)

The system does not allow

entry. A message will be
displayed for that.

Figure 126125 -Patios Login page (the author ,2022)

H.P.D.Mandara Prawarshana 20 Web design and Development

Test Case 07 – Patient

Test Case Input data Expected Actual result Test result

result (Pass /Fail)
Login System Incorrect user name Here, an error Here, an error Pass
[email protected] message appears to message appears to
correct password the user when the user when
789456 entering the system entering the system
using the wrong using the wrong user
user name and name and correct
correct password. password.
Table 1515 test case 6(the author ,2022)

Entering the system using

wrong user name and correct
password

Figure 127126 -Patios Login page (the author ,2022)

Figure 128127 -Patios Login page (the author ,2022)

H.P.D.Mandara Prawarshana 21 Web design and Development

Test Case 08 – Patient
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Entering the Correct user name Here, an error Here, an error Pass
system using is message appears to message appears to
wrong [email protected] the user when he the user when he
Password and Incorrect password logs into the system logs into the system
correct User is 56789 using the wrong using the wrong
name password and password and correct
correct user name. user name.
Table 1616 Test Case 08 (the author ,2022)

Entering the system using

wrong Password and correct
User name

Figure 129128 -Patios Login page (the author ,2022)

Figure 130129 -Patios Login page (the author ,2022)

Figure 131130 -code (the author ,2022)

H.P.D.Mandara Prawarshana 22 Web design and Development

Test Case 09 – Patient
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Entering the Correct user name Here, the dashboard Here, the dashboard Pass
system using is is accessed by is accessed by
Correct [email protected] displaying a displaying a message
Password and Correct password is message to the user to the user when
correct User 123456 when they log into they log into the
name the system using system using the
the correct correct password and
password and correct user name.
correct user name.
Table 1717 test case 9(the author ,2022)

Entering the system using

Correct Password and correct
User name

Figure 132131- Login page (the author ,2022)

Figure 133132 -Login page (the author ,2022

Figure 134133 -code (the author ,2022)

H.P.D.Mandara Prawarshana 23 Web design and Development

 Test Case 10 – Patient
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Patient To enter the system, In order to enroll a Enrollment is done Pass
Registration the patient must new patient in the as a new patient.
provide some system, the system Here the patient can
information and must be a registrar. see the Dashboard.
become a registrar.
Table 1818 test case 10(the author ,2022)

To enter the system, the patient

must provide some information
and become a registrar.

Figure 135134 -Resistor form (the author,2022)

Enrollment is done as a new

patient. Here the patient can see
the Dashboard.

Figure 136135 -Dashboard (the author,2022)

H.P.D.Mandara Prawarshana 24 Web design and Development

Test Case 11 – Doctor
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Login System User name is The system does The system does not Pass
[email protected] not allow access, allow access, and a
Password is Empty and a message message appears to
appears to the user. the user.
Table 1919 - Test Case 11(the author ,2022)

Entering the system without

specifying the password

Figure 137136-Login page (the author ,2022)

The system does not allow

entry. A message will be
displayed for that.

Figure 138137 Login page (the author,2022)

Figure 139138 Error message code (the author ,2022)

H.P.D.Mandara Prawarshana 25 Web design and Development

Test Case 12 – Doctor
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Login System Correct user name Here, an error Here, an error Pass
[email protected] message appears to message appears to
Incorrect password the user when the user when
549870 entering the system entering the system
using the wrong using the wrong
Password and password and correct
correct User name. user name.
Table 2020 test case 12 (the author ,2022)

Entering the system using

wrong Password and correct
User name

Figure 140139 -login page (the author ,2022)

Figure 141140 -login page (the author ,2022)

H.P.D.Mandara Prawarshana 26 Web design and Development

Test Case 13 – Doctor
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Login System Incorrect user name Here, an error Here, an error Pass
[email protected] message appears to message appears to
correct password the user when the user when
123456 entering the system entering the system
using the wrong using the wrong user
user name and name and correct
correct password. password.
Figure 142141 Test Case 13 – Doctor(the author ,2022)

Entering the system using

wrong Username and correct
Password

Figure 143142 - login page (the author ,2022)

Figure 144143 -login page (the author ,2022)

H.P.D.Mandara Prawarshana 27 Web design and Development

Test Case 14 – Doctor
Test Case Input data Expected Actual result Test result
result (Pass /Fail)
Entering the Correct user name Here, the dashboard Here, the dashboard Pass
system using is is accessed by is accessed by
Correct [email protected] displaying a displaying a message
Password and Correct password is message to the user to the user when
correct User 123456 when they log into they log into the
name the system using system using the
the correct correct password and
password and correct user name.
correct user name.
Table 21 -Test case 14 (the author ,2022)

Entering the system using

Correct Password and correct
User name

Figure 145 -LOGIN PAGE (THE author ,2022)

Figure 146 -dashboard (the author ,2022)

H.P.D.Mandara Prawarshana 28 Web design and Development

4.7 Xampp control panel (Database create)
XAMPP is a cross-platform, free and open-source web server solution package created by Apache
Friends that primarily consists of the Apache HTTP Server, MariaDB database, and interpreters for
PHP and Perl scripts. Here, the web application of Arogya Hospital has been prepared, but a
software is used to create its database. That is, Xampp software is used by the author. Accordingly,
the following is the database prepared by the author by using the software.

Figure 147144 -Xampp (the author ,2022)

Above is a scenario where the Xampp software is run. Accordingly, Apache and MySQL should be
started here.

Select the
Database (arogya)

Figure 148145 -Xampp (the author ,2022)

Accordingly, the above is a superscript created by the author in the database tables. Accordingly,
Xampp software can be accessed by clicking on bowers and clicking on phpmyadmin.

H.P.D.Mandara Prawarshana 29 Web design and Development

 Tables

Figure 149146 -Xampp (the author ,2022)

The author designed the test plan himself. He just checked the website; Add, remove, register and
login capabilities were all tested. The developer had his own desired results, which were met by the
actual result, which showed that all the functions were working properly. The problems faced by the
developer during the development of the website were addressed with various solutions. Here the
developer did not make any changes after receiving the new requirements, and the developer found
that the success of the website was achieved using the QA process. Accordingly, after testing the
web application, the database of the web application has also been tested. All the relevant details
have been mentioned above.

However, after completing the test plans, the developer discovered that the website may
benefit from a number of further enhancements, which are detailed below.
 Additionally, the user should be able to read the doctor's profile individually. Users can have a
good idea of the doctor thanks to it.

 So that registered users may see if the Appointment specialized physicians they are looking for
are available, various specialist doctors must be added.

 Users should be able to obtain an invoice thanks to its development.

 There need to be some changes made to the login page's interfaces. It is necessary to adjust the
size of the hospital logo since it is larger than the developer had anticipated.

 In order to reduce time and improve website performance, patients must be able to pay hospital
bills online through the website itself.

H.P.D.Mandara Prawarshana 30 Web design and Development

Reference

Klophaus, M. (no date) How website performance impacts conversion rates and Seo, Blog.
Available at: https://blog.unincorporated.com/website-performance-seo (Accessed: December 15,
2022).

Does page speed affect SEO? How to improve SEO page speed. (2021, August 5). Nexcess.
https://www.nexcess.net/blog/how-page-speed-affects-seo/

Cojocariu, A. (2021, December 19). How page speed affects SEO & Google rankings. SEO Blog |
CognitiveSEO Blog on SEO Tactics & Strategies. https://cognitiveseo.com/blog/22865/page-speed-
seo/

Mansfield, M. (2015, November 18). 20 little known things that make a good Web hosting company
great. Small Business Trends; Small Business Trends LLC.
https://smallbiztrends.com/2015/11/good-web-hosting-company.html

Php programming language syntax for web coding vector image. (2016, August 10). VectorStock.
https://www.vectorstock.com/royalty-free-vector/php-programming-language-syntax-for-web-
coding-vector-10186370

PHP language - an overview. (n.d.). STechies. Retrieved December 28, 2022, from
https://www.stechies.com/php/

JavaScript - Overview. (n.d.). Tutorialspoint.com. Retrieved December 28, 2022, from

https://www.tutorialspoint.com/javascript/javascript_overview.htm

Developer Resource Center. (n.d.). Menu. Oracle.com. Retrieved December 28, 2022, from
https://developer.oracle.com/learn/technical-articles/what-is-ruby

Hartman, J. (2020, January 6). What is Java? Definition, meaning & features of Java platforms.
Guru99. https://www.guru99.com/java-platform.html

Asp.net - introduction. (n.d.). Tutorialspoint.com. Retrieved December 28, 2022, from

https://www.tutorialspoint.com/asp.net/asp.net_introduction.htm

Chairman, P. K. (n.d.). The benefits of using web-based applications. Ltd.uk. Retrieved December
28, 2022, from https://www.geeks.ltd.uk/insights/blog/the-benefits-of-using-web-based-applications

H.P.D.Mandara Prawarshana 31 Web design and Development

Wilson, J. (2021, December 1). The advantages and disadvantages of AngularJS. Guru.com.
https://www.guru.com/blog/the-advantages-and-disadvantages-of-angularjs/

H.P.D.Mandara Prawarshana 32 Web design and Development