Download as pdf or txt
Download as pdf or txt
You are on page 1of 70

Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)


INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title BTEC Higher National Diploma in Computing

Assessor Internal Verifier


Unit 10: Web Design and Development
Unit(s)
Online Hospital Management System
Assignment title
H.A.H Banuka Shantha Udayanga
Student’s name
List which assessment Pass Merit Distinction
criteria the Assessor
has awarded.
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria awarded
match those shown in the Y/N
assignment brief?

Is the Pass/Merit/Distinction grade


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

• Constructive?

1 Banuka Udayanga COL/E 011159


• Linked to relevant assessment Y/N
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)

2 Banuka Udayanga COL/E 011159


Confirm action completed
Remedial action taken

Give details:

Assessor signature Date


Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)

3 Banuka Udayanga COL/E 011159


Higher Nationals - Summative Assignment Feedback Form

Student Name/ID Banuka Shantha Udayanga COL/E 011159

Unit Title Unit 10: Website Design & Development

Assignment Number 1 Assessor


07/04/2023 Date Received 1st
Submission Date
submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:
LO1. Explain server technologies and management services associated with hosting and managing websites.
Pass, Merit & P1 P2 M1 M2 D1
Distinction Descripts
LO2. Categorise website technologies, tools and software used to develop websites.

Pass, Merit & P3 P4 M3 D1


Distinction Descripts

LO3. Utilise website technologies, tools and techniques with good design principles to create a multipage
website.
Pass, Merit & P5 P6 M4 D2
Distinction Descripts

LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & P7 M5 D3
Distinction Descripts

4 Banuka Udayanga COL/E 011159


Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:


* Please note that grade decisions are provisional. They are only confirmed once internal and external moderation has taken place and
grades decisions have been agreed at the assessment board.

Assignment Feedback
Formative Feedback: Assessor to Student

5 Banuka Udayanga COL/E 011159


Action Plan

Summative feedback

Feedback: Student to Assessor

Assessor signature Date

Student signature Date

6 Banuka Udayanga COL/E 011159


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

General Guidelines

7 Banuka Udayanga COL/E 011159


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.

8 Banuka Udayanga COL/E 011159


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.

Student’s Signature: Date: 07/04/2023


(Provide E-mail ID) (Provide Submission Date)

9 Banuka Udayanga COL/E 011159


Assignment Brief
Student Name /ID Number Banuka Shantha Udayanga COL/E 011159

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 07/04/2023

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:

10 Banuka Udayanga COL/E 011159


LO1 Explain server technologies and management services associated with hosting and managing websites.
LO2 Categorise website technologies, tools and software used to develop websites.
LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Assignment Brief and Guidance:

11 Banuka Udayanga COL/E 011159


Assignment Brief
Scenario.
‘Apex Design Works’ is a leading web design and marketing company. They are focusing on helping busin
more effectively and build their business through a creative design. Assume that, you work as an apprentice
Apex Web Design and marketing company. As part of your role, you have been asked to create a Website fo
organization .
Arogya Health Care hospital currently uses a manual system for the management and maintenance of critical
system requires numerous paper forms, with data stores spread throughout the hospital management infrastr
(on forms) is incomplete, or does not follow management standards. Multiple copies of the same information
may lead to inconsistencies in data in various data stores. There are number of documents to be maintained in
and this information typically involves; patient personal information and medical history, staff information, ro
staff scheduling, operating theater scheduling and various facilities waiting lists. All of this information must b
and cost wise fashion so that the resources can be managed effectively. The reception module handles various in
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 c
complete Hospital Management System (HMS) for the scenario given above. Suggest and implement imp
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, o
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 structure
search engines on website performance. Provide evidence-based support for improving a site’s index value and
Management System (HMS) through search engine optimization.
1.3 Identify and explain the common web development technologies and frameworks. Explain the tools and techniq
the above web application and justify your choice by providing valid evidences.

Task 2 - Categories website technologies, tools and software used to develop websites (LO2)

2.1 Considering the requirments given in the above scenario define the relationships between front-end and back-e
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

12 Banuka Udayanga COL/E 011159


design flexibility, performance, functionality, User Experience (UX) and User Interface (UI). Evaluate the tools
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 w

3.1 Design a suitable web application solution for the given scenario using PHP, JS and MySQL (Screenshots of impo
proper comments and user interfaces filled with sample data must be attached to the documentation). Apply a
proposed system and provide the well normalized database design of the proposed system. Provide evidences o
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
standards and guidelines to produce a branded, multipage website supported with realistic content and Critica
design ,development process against your design document analyisng any technical challenges you faced during

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 inte
the user experience (UX). Evaluate the Quality Assurance (QA) process and review how it was implemented
development stages.

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

13 Banuka Udayanga COL/E 011159


14 Banuka Udayanga COL/E 011159
Grading Rubric
Grading Criteria Achieved Feedback

LO1 Explain server technologies and management services associated with


hosting and managing websites

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


domain names are organized and managed.

P2 Explain the purpose and relationships between communication


protocols, server hardware, operating systems and web server software with
regards to designing, publishing and accessing a website.
M1 Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and
management.

M2 Review the influence of search engines on website performance and


provide evidence-based support for improving a
site’s index value and rank through search engine optimization.

D1 Justify the tools and techniques chosen to realize a custom built


website.

LO2 Categories website technologies, tools and


software used to develop websites

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


end website technologies and explain how these relate to presentation and
application layers.

P4 Discuss the differences between online website creation tools and


custom built sites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI).

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


develop a custom built website.
LO3 Utilize website technologies, tools and techniques
with good design principles to create a multipage
website

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


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

D2 Critically evaluate the design and development process against your


design document and analyse any technical challenges.

15 Banuka Udayanga COL/E 011159


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.

16 Banuka Udayanga COL/E 011159


Observation Sheet

Activit Activity Learning Feedback


y Outcome (Pass/ Redo)
No
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 LO3
and techniques with good design
principles to create a multipage
website.
4 Create and use a Test Plan to review LO4
the performance and design of a
multipage website.

Comments:

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


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

17 Banuka Udayanga COL/E 011159


18 Banuka Udayanga COL/E 011159
Acknowledgment

Special Thanks

I am really grateful because I managed to complete my Web Design and Development assignment. I
respect and thank our HND Web Design and Development lecturer for giving we an opportunity to do
this assignment work and providing us all support and guidance which made me complete the
assignment on time, we extremely grateful to him for providing such a nice support and guidance.

Another big thanks to Esoft Metro Campus for this learning opportunities. I had a good time at class
in Esoft with many learning resources.

19 Banuka Udayanga COL/E 011159


Contents
Task 1 Develop a web based solution for the above scenario and produce a report covering
the following tasks. .................................................................................................................. 24
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).................... 24
Communication Protocols .................................................................................................... 24
Types of Communication Protocols ..................................................................................... 24
1. Transmission Control Protocols .................................................................................... 24
2. Internet Protocols .......................................................................................................... 24
3. FTP (File Transfer Protocols) ....................................................................................... 24
4. Telnet ............................................................................................................................ 24
Server Hardware ...................................................................................................................... 25
Hard Disk ............................................................................................................................. 25
Operating System (OS) ............................................................................................................ 26
Linux Operating system ....................................................................................................... 27
Windows Operating System ................................................................................................. 27
Mac Operating System ......................................................................................................... 29
Web Server Software ............................................................................................................... 30
Apache .................................................................................................................................. 31
Microsoft Internet Information Service (IIS) ....................................................................... 31
NginX ................................................................................................................................... 32
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. ......................................... 32
Define DNS Server............................................................................................................... 32
Types of DNS servers .............................................................................................................. 32
DNS Recursor .......................................................................................................................... 32
Root Name Server ................................................................................................................ 32
TLD Name Server ................................................................................................................ 33
Authoritative Name Server................................................................................................... 33
Top-level Domains (TLD) ....................................................................................................... 33
Some of the Top-Level Domains ......................................................................................... 34
How domain names are organized and managed ................................................................. 34

20 Banuka Udayanga COL/E 011159


1.3Identify 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. .................................................................................................. 34
Search Engine Optimization (SEO) ......................................................................................... 34
Links ..................................................................................................................................... 35
Contents................................................................................................................................ 35
Page Structure ...................................................................................................................... 35
.................................................................................................................................................. 35
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. .............................................................................. 35
Search Engine Optimization Techniques ................................................................................. 35
Keyword Research ............................................................................................................... 36
Link Building ....................................................................................................................... 36
On-Page Optimization .......................................................................................................... 36
Content Marketing................................................................................................................ 36
Search Engine Optimization Tools .......................................................................................... 37
Google Search Console ............................................................................................................ 37
Google Ads Keyword Planner.............................................................................................. 37
Backlink Analysis ................................................................................................................ 37
SEO Platforms ...................................................................................................................... 37
Hyper Text Markup Language (HTML) .................................................................................. 37
CSS (Cascading Style Sheet) ................................................................................................... 38
PHP (Hypertext Preprocessor) ................................................................................................. 38
Java Script ................................................................................................................................ 39
Framework ............................................................................................................................... 39
Bootstrap .............................................................................................................................. 40
Foundation ............................................................................................................................ 40
Onsen UI .............................................................................................................................. 40
(D1 Justify the Tools and Techniques chosen to realize a custom-built website) ................... 41
Types of Tools and Techniques for custom built website .................................................... 41
Notepad++ ............................................................................................................................ 41
Advantages of Notepad++.................................................................................................... 41
Sublime Text Editor ............................................................................................................. 41
Advantages of Sublime Text Editor ..................................................................................... 42
NetBeans .............................................................................................................................. 42

21 Banuka Udayanga COL/E 011159


Advantages of NetBeans ...................................................................................................... 42
Techniques which are used to design a custom-built web application development .............. 43
CSS Queries ......................................................................................................................... 43
Responsive Web Design Strategy ........................................................................................ 43
Make Your Site Accessible .................................................................................................. 43
No Stock Photography ......................................................................................................... 43
Task 2 - Categories website technologies, tools and software used to develop websites ........ 43
2.1Considering 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. ........................................................................... 43
Front End Website Technologies ......................................................................................... 44
Back End Website Technologies.......................................................................................... 44
Differences Between Front-End and Back-End Technologies ............................................ 44
Meaning of Frontend Verses Backend ................................................................................. 45
Role of Frontend Verses Backend ........................................................................................ 45
Presentation layer ................................................................................................................. 45
Application layer .................................................................................................................. 45
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.............................................................................................. 45
What is an Online Website Creation Tools? ............................................................................ 45
Weebly ................................................................................................................................. 46
Shopify ................................................................................................................................. 46
Wix ....................................................................................................................................... 47
Custom Built Websites ............................................................................................................ 47
Design and Flexibilities of the custom-Built Sites and Online Built Websites ....................... 48
Advantages of Custom-Built Site......................................................................................... 48
The difference between online web creation tools and custom-built website...................... 48
Task 3 - Utilize website technologies, tools and techniques with good design principles to
create a multipage website (LO3) ............................................................................................ 49
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. ................................................................................... 49
System Interface ................................................................................................................... 50

22 Banuka Udayanga COL/E 011159


Page Code............................................................................................................................. 50
Admin Loging Page ............................................................................................................. 51
Admin Loging Page Code .................................................................................................... 52
Contact Form ........................................................................................................................ 53
Contact Page Code ............................................................................................................... 53
Dashboard............................................................................................................................. 54
Dashboard Code ................................................................................................................... 55
Medical History .................................................................................................................... 57
Medical History Code .......................................................................................................... 57
Book Appointment page....................................................................................................... 59
Book Appointment Code...................................................................................................... 59
Profile Edit Page................................................................................................................... 60
Profile Edit Page Code ......................................................................................................... 60
Patient Registration .............................................................................................................. 61
Patient Registration code ...................................................................................................... 61
3.2 Compare and contrast the multipage website created to the design document. Use your
design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content and critically evaluate the web design,
development process against your design document analyzing any technical challenges you
faced during the development. ................................................................................................. 64
Web Design Development Process .......................................................................................... 64
Some of the Technical Challenges that I faced during the website development ................ 64
Task 4 - Create and use a Test Plan to review the performance and design of a multipage
website (LO4) .......................................................................................................................... 65
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. ................................................................................................................. 65
What is Quality Assurance (QA)? ........................................................................................... 65
Quality assurance methods ................................................................................................... 65
How was quality assurance implemented during the web design and development stage. . 65
(P7 Create a suitable Test Plan identifying key performance area and use it to review the
functionality and performance of your website.) ..................................................................... 65
Test Case Table for the Hospital Management System ....................................................... 65
References ................................................................................................................................ 67

23 Banuka Udayanga COL/E 011159


Task 1 Develop a web based solution for the above scenario and produce a report
covering the following tasks.

1.1 Explain and differentiate the different web technologies such as communication
protocols, server hardware, operating systems and web server software with regards to
designing, publishing and accessing the Hospital Management System (HMS).

Communication Protocols

A communication protocol is a set of rules that allows two or more entities in a communication system
to communicate with one another in order to convey data via any physical quantity variation. The
syntax, semantics, and synchronization of communication, as well as possible error recovery
procedures, are defined by these rules or standards. Hardware, software, or a combination of both can
implement protocols. (networxsecurity.org)

Types of Communication Protocols

1. Transmission Control Protocols

A connection-oriented communications protocol that makes it easier for computers in a network to send
and receive messages. It is the most widely used protocol in networks that employ the Internet Protocol
(IP); it is sometimes referred to as TCP/IP when used jointly. (sdxcentral.com)

2. Internet Protocols

Internet Protocol (IP) is a method or protocol for sending data from one computer on the Internet to
another. Every computer, called a host on the Internet, has at least one IP address that uniquely identifies
it from all other computers on the Internet.

3. FTP (File Transfer Protocols)

File Transfer Protocol (FTP) is a communication protocol used to send files from computer to computer,
one of which acts as a server if both have internet connections.
FTP is a network protocol between clients and servers that allows users to download web pages, files,
and programs available for other services. If users want to download information to their computer, use
FTP. (hypr.com)

4. Telnet

TELNET is an abbreviation for TERMINAL NETwork. This is a type of protocol that allows a
computer to connect to a local computer. It is used as the standard TCP / IP Virtual Terminal Services
protocol provided by ISO. The computer that initiates the connection (called the local computer). The
computer to connect to, that is, H. Those that accept connections are called remote computers. When a
connection is established between the local computer and the remote computer. During telnet operation,
everything running on the remote computer is displayed from the local computer. Telnet works

24 Banuka Udayanga COL/E 011159


according to client / server principles. The local computer uses the telnet client program and the remote
computer uses the telnet server program. (geeksforgeeks.org)

Server Hardware

Server Hardware could be any computer if it serve any services that mines it's server, but server
definitions will be different in every Level it's depend on your requirement, if services need to access
with 2 or 3 computer or services execution on server is less not needed much RAM and CPU , it's simple
for big task you need more resources, more man , for small task we can do our-self Accordingly we
categorize server hardware, below mention server given according to our need and it's in sequence,
most powerful server is mainframes server which is used by Bank, where the execution is very high
"Rack Servers", "Blade Servers" , "Tower Servers" , "Mainframes"

Figure 1 Servers

Hard Disk

A hard disk drive (sometimes abbreviated as hard drive, HD, or HDD) is a non-volatile data storage
device. It is usually installed inside your computer and connects directly to the hard drive controller on
your computer's motherboard. (computerhope.com)

Four types of Hard Drives:

• Parallel Advanced Technology Attachment (PATA)


• Serial ATA (SATA)
• Small Computer System Interface (SCSI)
• Solid State Drives (SSD)
• NVM Express.

25 Banuka Udayanga COL/E 011159


Operating System (OS)

Operating system "OS" An interface between a computer user and computer hardware. An operating
system is software that performs all basic tasks such as file management, memory management, process
management, input / output processing, and control of peripherals such as drives and printers.
(tutorialspoint.com)

Some popular Operating Systems include Linux Operating System, Windows Operating System, Mac,
etc.

Figure 2 Operating system

26 Banuka Udayanga COL/E 011159


Linux Operating system

Linux® is an open supply working device (OS). A working device is the software program that without
delay manages a device`s hardware and assets, like CPU, memory, and storage. The OS sits among
packages and hardware and makes the connections among all your software program and the bodily
assets that do the work. (redhat.com)

Figure 3 Linux OS

Windows Operating System

Microsoft Windows (also known as Windows or Win) is a graphical operating system developed and
published by Microsoft. It provides ways to save files, run software, play games, watch videos, and
connect to the Internet. (computerhope.com)

Microsoft Windows was first introduced in version 1.0 on November 10, 1983. Since then, more than
12 versions of Windows have been released, including the current version of Windows 10.

List of Microsoft Windows versions:

Version Windows revision

Windows 11 Windows 11.

Windows 10 Version 10.0 Windows 10.

Windows 8 Version 6.3 Windows 8.1 (Windows 8 with


Start and other features).

Windows 8 Version 6.2 Windows 8.

Windows 7 Version 6.1 Windows 7 (name of 7, e.g., Windows 7


Home Premium).

27 Banuka Udayanga COL/E 011159


Windows Vista Version 6.0 Windows Vista (name of Vista,
e.g., Windows Vista Home Basic).

Windows XP 5.1.2600 Windows XP (name of


XP, e.g., Home Edition, Professional,
Media Center Edition).

Windows 2000 5.00.2195 Windows 2000 Workstation.

Windows ME 4.90.3000 Original release of Windows ME.

Windows CE 3.0 Windows CE 3.0.

Windows 98 4.10.2222A Windows 98 Second Edition.

Windows CE 2.1 Windows CE 2.1.

Windows 98 4.10.1998 Original release of Windows 98.

Windows 98 4.10.1691 Beta release of Windows 98.

Windows 95 4.00.950 C Second release of Windows 95 OSR2.5


with FAT32, MMX, USB and AGP support.

Windows CE 2.0 Windows CE 2.0.

Windows CE 1.0 Windows CE 1.0.

Windows 95 4.00.950 B Second release of Windows 95 (OSR2)


that does support FAT32 and MMX.

Windows NT 4.00.1381 Windows NT 4.0 Workstation.

Windows 95 4.00.950 A Windows 95 with Service Pack 1 or


OSR (OEM Service Release) 1.

Windows 95 4.00.950 Original release of Windows 95.

28 Banuka Udayanga COL/E 011159


Windows NT 3.51.1057 Windows NT Server version 3.51.

Windows NT 3.51.1057 Windows NT Workstation version 3.51.

Windows 3.11 Windows for Workgroups Windows 3.11.

Windows NT 3.1 Windows NT 3.1.

Windows 3.1 Windows 3.1.

Windows 3.0 Windows 3.0.

Figure 4 Windows Operating Systems

Mac Operating System

This is an operating system that runs on a Macintosh computer. Pronounced "Mackohes". Mac OS has
existed since the first Macintosh was announced in 1984. Since then, Mac OS has been continually
updated with many new features. Each major version of the operating system is identified by a new
number (Mac OS 8, Mac OS 9, etc.)

The core of Mac OS was almost decades old, so Apple decided to completely overhaul the operating
system. In March 2001, Apple announced a completely new version of Mac OS and rewrote it from
scratch. The company called it "Mac OS X" and properly pronounced it "Mac OS 10". Unlike previous
versions of Mac OS, Mac OS X is based on the same kernel as Unix and has many advanced
management features and utilities. The operating system is much more sophisticated than previous
versions of Mac OS, but it still has the same ease of use that people expect from Apple software (
techterms.com)

29 Banuka Udayanga COL/E 011159


Figure 5 Mac Operating system

Web Server Software

Server software is a type of software designed to be used, operated, and managed on a computer server.
Provides and facilitates the use of underlying server processing power for use in a variety of high-end
computing services and features.

Server software is primarily designed to interact with the server's hardware infrastructure, including
processors, memory, storage, input / output (I / O), and other communication ports. Depending on the
type or usage of the server, the server software can be divided into various formats, including: B. It is
as follows. (techopedia.com)

• Web server software


• Application server software
• Database server software
• Cloud computing server software
• File server software

Each of the above types of server software uses servers for a variety of features and services, but all
focus their primary goals on the use of unique computing power and resources. In addition, the server
software can be for physical servers or virtual / cloud servers built on top of physical servers.
(techopedia.com)

There are some of the common web server names are given below.

• Apache
• Microsoft Internet Information Service (IIS)
• NginX (This can be pronounced as Engine X)

30 Banuka Udayanga COL/E 011159


Apache

Apache HTTP Server is a free open-source web server that serves web content over the Internet.
Commonly called Apache, it quickly became the most popular HTTP client on the Web as soon as it
was developed. It is widely believed that Apache was named after its development history and the
process of improvement with applied patches and modules, but it was fixed by Durability in 2000.
(sumologic.com)

Figure 6 Apache Web Server Software

Microsoft Internet Information Service (IIS)

Abbreviation for "Internet Information Service". IIS is a web server software package developed for
Windows Server. It is used to host websites and other content on the web.

Microsoft's Internet
Information Services
provide a graphical user
interface (GUI) for
managing websites and their
users. It provides a visual
means for creating,
configuring, and publishing
websites on the web. Web
administrators can use the
IIS Manager tool to change
website options such as
Figure 7 Microsoft Internet Web Server
default pages, error pages,
log settings, security
settings, and performance optimization.

IIS can serve both standard HTML web pages and dynamic web pages such as ASP.NET applications
and PHP pages. When a visitor visits a page on a static website, IIS simply sends the HTML code and
associated image to the user's browser. When you visit a page on a dynamic website, IIS runs all the
applications, processes the scripts contained in the page, and sends the resulting data to the user's
browser. (techterms.com)

31 Banuka Udayanga COL/E 011159


NginX

NGINX is a free open-source high performance HTTP server and reverse proxy, as well as an IMAP /
POP3 proxy server. NGINX is known for its high performance, stability, rich feature set, easy
configuration, and low resource consumption.
NGINX is one of the few servers created to address the C10K problem. Unlike traditional servers,
NGINX does not rely on threads to process requests. Instead, use a much more scalable event-driven
(asynchronous) architecture. This architecture
uses a small but most important, predictable
amount of memory under load. You can take
advantage of NGINX's high performance and
small footprint without having to expect to
handle thousands of simultaneous requests.
NGINX can scale in all directions, from the
smallest VPS to large server clusters.
(nginx.com)

Figure 8 NginX
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.

Define DNS Server

The Domain Name System (DNS) is called the phonebook of the Web. When a client sorts a space
title or site address into the address bar of the browser, the DNS server is capable for interpreting the
space title to a particular IP address, driving it to the proper site.

Types of DNS servers

DNS Recursor
The recursor can be thought of as a custodian who is inquired to go discover a specific book some
place in a library. The DNS recursor may be a server planned to get questions from client machines
through applications such as web browsers. Ordinarily the recursor is at that point dependable for
making extra demands in arrange to fulfill the client’s DNS inquiry.

Root Name Server


The root server is the primary step in deciphering (settling) human lucid have names into IP
addresses. It can be thought of like a list in a library that focuses to distinctive racks of books -
regularly it serves as a reference to other more particular areas.

32 Banuka Udayanga COL/E 011159


TLD Name Server
The beat level space server (TLD) can be thought of as a particular rack of books in a library. This
nameserver is the following step within the rummage around for a particular IP address, and it has the
final parcel of a hostname (In example.com, the TLD server is “com”).

Authoritative Name Server


This last nameserver can be thought of as a word reference on a rack of books, in which a particular
title can be interpreted into its definition. The definitive nameserver is the final halt within the
nameserver inquiry. In the event that the definitive title server has get to to the asked record, it'll
return the IP address for the asked hostname back to the DNS Recursor (the curator) that made the
beginning ask. (cloudflare.com)

Figure 9 DNS servers

Top-level Domains (TLD)

A top-level space (TLD) is the furthest right fragment of a space title, found after the final dab. Too
known as space expansions, TLDs serve to recognize certain components of website, such as its reason,
proprietor or geological zone. For illustration, a .edu top-level space permits clients to immediately
recognize that location as the next instructive institution. (wix.com)

The concept of TLDs was made by ARPANET within the 1960s with the goal of facilitating the method
of memorizing IP addresses. It wasn’t until the early 1980s that the most punctual top-level spaces were
created and the organized categorization you’ll come over when enlisting a space title nowadays was
presented. Each top-level space has an autonomous registry overseen by a assigned organization
beneath the direction of the Web Enterprise for Relegated Names and Numbers (ICANN). (wix.com)

33 Banuka Udayanga COL/E 011159


Some of the Top-Level Domains

➢ .com
➢ .gov
➢ .edu
➢ .org
➢ .mil
➢ .net

How domain names are organized and managed

A website's domain name is its name. A domain name is the address that allows Internet users to access
a website. A domain name is a unique identifier that is used to locate and identify computers. Computers
employ IP addresses, which are a collection of numbers. Humans have a hard time remembering long
strings of numbers. Domain names were introduced in place of IP addresses and are currently used to
identify entities on the Internet.

Figure 10 Domains

1.3Identify 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.

Search Engine Optimization (SEO)

SEO stands for “search motor optimization.” In straightforward terms, it implies the method of
improving your location to extend its perceivability when individuals seek for items or administrations
related to your commerce in Google, Bing, and other look motors. The superior perceivability your

34 Banuka Udayanga COL/E 011159


pages have in look comes about, the more likely you're to gather consideration and pull in planned and
existing clients to your commerce. (searchengineland.com)

Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.

Contents
An important factor of Search Engine Optimization is creating contents towards the keywords which
are searched by the users in the search engines.

Page Structure
Page Structure is the third of the Search Engine Optimization. Mostly the web pages are written or
created in HTML. From this we can understand how the HTML code is structured can in a web page
can create a good impact on the search engine’s ability to classify a page.

Figure 11 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.

Search Engine Optimization Techniques

35 Banuka Udayanga COL/E 011159


Keyword Research
(also known as keyword search) is the act of investigating, analyzing and selecting the leading
catchphrases to target to drive qualified activity from search engines to your website. Keyword look
optimization could be a basic step in initial stages of look motor showcasing, for both paid and natural
look. In the event that you are doing a bad work at selecting your target catchphrases, all your ensuing
endeavors will be in unsuccessful. So it’s crucial to induce watchword optimization right.

Link Building
The Link Building is the links which comes from the external websites. This can be defined as
Backlinks. This is considered as one of the core ranking factor in Google.

On-Page Optimization
One of the main work of on-page optimization techniques include progressing the URL of the page to
incorporate keywords.

Content Marketing
However, when the possible keywords are got founded, then the content marketing comes inside.
Mostly this will use to update an existing content or to create a brand new content. Because the search
engines like the Google gives a high quality content on its page.

Figure 12 SEO Techniques

36 Banuka Udayanga COL/E 011159


Search Engine Optimization Tools

Google Search Console


Google Search Console is a free service offered by Google that helps you monitor, maintain, and
troubleshoot your site's presence in Google Search results. You don't have to sign up for Search Console
to be included in Google Search results, but Search Console helps you understand and improve how
Google sees your site. (google.com)

Google Ads Keyword Planner


This too a free apparatus given by the Google. This takes a portion in Google Advertisements item. It
for the most part gives catchphrase proposal and catchphrase look volume. This will be exceptionally
supportive when we doing a catchphrase inquire about.

Backlink Analysis
Backlink investigation will be permitting the client to analyze which websites are linking to their site.

SEO Platforms
This stage can track watchword positioning, can recognize on-page and off-page opportunities, can
offer assistance with watchword research.

Hyper Text Markup Language (HTML)


HTML, in full hypertext markup dialect, a designing framework for showing fabric recovered over the
Web. Each recovery unit is known as a Web page (from World Wide Web), and such pages regularly
contain hypertext joins that permit related pages to be recovered. HTML is the markup dialect for
encoding Web pages.

a client sorts a space title or site address into the address bar of the
Figure 13 HTML

37 Banuka Udayanga COL/E 011159


browser, the DNS server is capable for interpreting the space title to a particular

CSS (Cascading Style Sheet)

Short for "Cascading Style Sheet". Cascading style sheets are used to format the layout of web pages.
They can be used to set text styles, table sizes, and other aspects of a web page that could previously
only be set in the HTML code of a page.

CSS helps web developers create a unified look and feel across multiple pages of a website. Instead of
defining the style of each table and block of text in a page's HTML, commonly used styles need to be
defined only once in the CSS document. Once the style is defined in a cascading style sheet, it can be
used by any page that references the CSS file. Plus, CSS makes it easy to change styles on multiple
pages at once.( techterms.com)

it to the proper site.

Figure 14 CSS

PHP (Hypertext Preprocessor)

Short for "PHP: Hypertext Preprocessor", a recursive acronym. PHP is a scripting language used by
web developers to create dynamic web pages. It is usually installed by default on the Apache web
server, along with MySQL as part of the "LAMP" configuration.

PHP scripts can range from simple one-line commands to complex functions. Some PHP-based
websites generate virtually all website content using a series of PHP scripts dynamically. Although the

38 Banuka Udayanga COL/E 011159


first versions of PHP were not an object-oriented
language, PHP3 introduced support for classes,
including object properties and methods.
Developers can create custom object libraries and
import them into different PHP pages, similar to a
compiled language. (techterms.com)

Figure 15 PHP

Java Script

Javascript (JS) is a scripting language mainly used on the web. It is used to enhance HTML pages and
is usually embedded in HTML code. JavaScript is an interpreted language. Therefore, it does not need
to be compiled. JavaScript renders web pages interactively and dynamically. This allows pages to react
to events, display special effects, accept mutable text, validate data, set cookies, detect the user's
browser, and more.

HTML pages are ideal for displaying static content, e.g. an image or text. However, most pages these
days are rarely static. Many pages today have menus, forms, slideshows, and even images that allow
users to interact. Javascript is the language used by web developers to provide such interaction. Since
JavaScript works with HTML pages, a developer must know HTML to exploit the full potential of this
scripting language. While there are other languages that can be used to script on the web, in reality they
are essentially JavaScript. (techopedia.com)

Figure 16 Java Script

Framework

In computer systems, a framework is often a layered structure that indicates what types of programs can
or should be built and how they will depend on each other. Some computer system frameworks also
include actual programs, specify a programming interface, or provide programming tools to use the
frameworks.

39 Banuka Udayanga COL/E 011159


Bootstrap

Bootstrap could be a free and open-source front conclusion improvement system for the creation of
websites and web apps. The Bootstrap system is built on HTML,
CSS, and JavaScript (JS) to encourage the improvement of
responsive, mobile-first destinations and apps. (techtarget.com)

Figure 17 Bootstrap

Foundation

Foundation was a one of the recently


grown HTML
framework. Foundation was considered as a reliable
framework. Framework is developed with all the
modern features of web development. Foundation has
a main character which can deliver across the most
modern devices. Foundation was grown from another
framework which contains some features like remain,
building email templates, websites and complex.

Figure 18 Foundation
Onsen UI

Onsen UI is an open-source UI system that creates it simple to make native-feeling Progressive Web
Apps (PWAs) and cross breed apps. It permits engineers to make apps utilizing Web innovations like
CSS, HTML5, and JavaScript. (educative.io)

Figure 19 Onsen UI

40 Banuka Udayanga COL/E 011159


(D1 Justify the Tools and Techniques chosen to realize a custom-built website)

When it comes to designing a website, there are a variety of tools and techniques to choose from.
It does not imply that each member of a high performing team employs the same tools and techniques
when creating website. When choosing your tool and technique for creating a website, keep all
necessary considerations in mind so that you not have any problems in the future.

Types of Tools and Techniques for custom built website

• Notepad++
• Sublime Text Editor
• NetBeans

Notepad++

Notepad++ is a free source code editor and Notepad replacement that


supports several languages.
Based on the capable altering component notepad++ is composed in
C++ and employments immaculate Win32 API and STL which
guarantees a better execution speed and littler program estimate. By
optimizing as numerous schedules as conceivable without losing user
invitingness, notepad++ is attempting to decrease the world carbon
dioxide outflows. When utilizing less CPU control, the PC can throttle
down and decrease control utilization, coming about in a greener
environment. (notepad-plus-plus.org)

Advantages of Notepad++ Figure 20 Notepad++

• Line Numbering
• Edit Text file up to 2GB in size
• Edit Multiple files, organized in tabs
• Advance find and replace, with support for regular expression
• Syntax highlighting for over 70 programming languages, including HTML and windows
batch files
• A plugin system for adding features to the software

Sublime Text Editor

41 Banuka Udayanga COL/E 011159


Sublime Text editor is a complex text editor widely used by developers. It includes many features like
syntax highlighting, auto-indent, file type recognition, sidebars, macros, plugins, and packages that
make working with the codebase easier. This tutorial provides you with comprehensive coverage of
Sublime Text concepts and allows you to comfortably use it in your software development projects.

Figure 21 Sublime Text Editor

Advantages of Sublime Text Editor

• Multi-platform
• The theme and color scheme varies
• Support more than 70 types of files

NetBeans

NetBeans is an open-source integrated development environment (IDE) for developing with Java,
PHP, C++ and other programming languages. NetBeans is also known as modular component
platform which is used to develop Java desktop applications. (techterms.com)

Advantages of NetBeans

• Multiple languages are supported


• It helps to write bug free coding
• Easy to use
• It can be installed any operating systems

Figure 22 NetBeans

42 Banuka Udayanga COL/E 011159


Techniques which are used to design a custom-built web application development

CSS Queries

You can learn how to use media queries to make minor changes to a single style sheet in a course from
CSS Tricks. In the case of a fluid-width design with a sidebar that is 35% of the page's actual width, for
example, one can tell what to do depending on the browser window's actual width if the browser is very
small, very broad, or very wide. (sharma.in.com)

Responsive Web Design Strategy

Due to the significant increase in the number of mobile devices, responsive web design is no longer just
a UX-only profession. All marketers must consider site design and responsiveness as part of their
strategy development. You may not need to know every detail of developing and building a responsive
website as a web marketer. You'll need to be aware of the marketing duties associated with your content.
(sharma.in.com)

Make Your Site Accessible

You'll need to make your site compatible with a variety of devices and browsers if you want to attract
a large number of visitors. You must make your website accessible to everyone who views it,
regardless of the application or browser they are using. (sharma.in.com)

No Stock Photography

People aren't as fascinated in glamorous photos as they once were. They are surely looking for a more
unbiased view of what a company represents or stands for. Dry stock photographs on a plain white
background are no longer fashionable. Characters with personalities and narratives are in high
demand. Only use photos that are related on your website. Subliminal messages are sent to your
audience through your images. (sharma.in.com)

Task 2 - Categories website technologies, tools and software used to develop websites

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

43 Banuka Udayanga COL/E 011159


Front End Website Technologies

Front-end web development, also known as client-side development, is the production of HTML, CSS,
and JavaScript for a website or web application so that users can see and interact with them directly.
The challenge associated with user interface development is that the tools and techniques used to create
the user interface of a website are constantly changing and therefore the developer must be constantly
aware of the developments. of this field. ( frontendmasters.com)

Back End Website Technologies

Back-end refers to the parts of a computer application or program code that allow it to work and are not
accessible to the user. Most of the data and operation syntax are stored and accessed in the back part of
the computer system. Generally, the code consists of one or more programming languages. The back-
end is also known as the data access layer of software or hardware and includes all the functions required
to be accessed and navigated through digital media.
The Back-end developers mostly use sever side language such as PHP, Ruby, Python, Java and Net to
build an application. Some tools like MySQL Oracle and SQL server to find, change or to
Save the data and assist in back to the user in Front end code. (techtarget.com)

Figure 23 Front End and Back End Website Technologies

Differences Between Front-End and Back-End Technologies

Frontend and Backend are the two most commonly used terms in the Web industry, but the difference
between the two is very subtle. They are the two most basic parts of software engineering and play an
important role in Web development. The front end is what you see and interact with, and the back end
is how everything works. The front end can refer to the graphical user interface, while the back end is
the part of the website that you cannot see or interact with. These two terms are very important for Web
development, but they are very different from each other. Although they are certainly unique terms and
each has its own role, they are very similar to two sides of the same coin. The function of the website
depends on interacting with each other as a single unit. This article explains the difference between the
two.

44 Banuka Udayanga COL/E 011159


Meaning of Frontend Verses Backend

The frontend is the part of the website that users can see and interact with, such as graphical user
interfaces (GUI) and command lines, including layout, navigation menus, text, images, videos, etc.
Rather, the backend is part of the website that users cannot see and interact with. It all depends on how
everything works.

Role of Frontend Verses Backend

Both play a vital role in web development and, although there are considerable differences between
them, they are like two sides of the same coin. The interface deals with the visual aspects of the website
that users can see and experience. Instead, everything that happens in the background can be attributed
to back-end web development. It's more like a front-end web experience facilitator.

Presentation layer

The presentation layer is located at the sixth level of the OSI model, it is responsible for providing and
formatting information for the application layer to process or display further. This type of service is
needed because different computer architectures use different data representations. Unlike providing
transparent data transport at the fifth level, the presentation layer handles all issues related to data
presentation and transport, including translation, encoding, and compression.
(router-switch.com)

Application layer

The application layer is the seventh layer of the seven-layer OSI model. The application layer interface
interacts directly with the application and provides common web application services. The application
layer also makes a request to the presentation layer. The application layer is the top layer of an open
system that provides services directly to the application process.
(router-switch.com)

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.

What is an Online Website Creation Tools?


A website builder is a tool that allows you to build a website without coding experience. There are two
different types of website builders: online and offline. There are lot of tools available to create a website
and some of the most popular online websites are given below.

45 Banuka Udayanga COL/E 011159


Weebly
Weebly gets the top spot for one of the best website builders because of its low cost, flexibility and ease
of use. Now you have the option to create a small business website with Weebly’s popular editor, or
choose an online store and build it using Square’s no-frills e-commerce site builder. Even if you choose
to build a website with Weebly, you can add shopping cart functionality later. Plus, Weebly gives you
hundreds of stylish theme designs (that are mobile-responsive) to get you started. You can choose a
design based on industry, or simply choose one you like. Weebly which will cost us 6$ per month.
(forbes.com)

Figure 24 Weebly

Shopify
Shopify is primarily an e-commerce website builder. All of the paid plans come with built-in shopping
carts and marketing features to help you sell online. There are only nine free e-commerce templates
from which you can choose. If you don’t mind paying, there are dozens of premium templates available,
but they cost about $100 on average.
The editor isn’t a true drag-and-drop editor, which may add to the learning curve a bit. It’s more
point-and-click navigation, but it’s easy enough to figure out and use after you spend some time with
the tools. (forbes.com)

46 Banuka Udayanga COL/E 011159


Figure 25 Shopify

Wix
Wix is one of the most popular website builders because it offers something for everyone. You can use
the free plan to create a website, but you’ll be on a subdomain and have Wix display ads. The lowest-
priced plan is a bit limiting, but you have access to lots of free apps to extend your site’s functionality.
On the higher-tier plans, you’ll get SEO and analytics tools, an events calendar and a logo maker. E-
commerce plans offer even more, but they’re also a bit pricey. (forbes.com)

Figure 26 Wix

Custom Built Websites


Custom built websites are different from an online website builder. Custom built websites are
basically, developed from scratch without using pre-designed layouts. Tailor-made website Design is
not just the look and feel of a website. Custom built websites contributed on the back-end coding for
advanced custom features, lead management, APIs, and e-commerce functionality. Mostly other
website builder tools that use pre-designed elements like contact forms, navigation layouts, or images

47 Banuka Udayanga COL/E 011159


slider, but custom-built websites are known for having an in-depth design or planning process to website
personalization.

Design and Flexibilities of the custom-Built Sites and Online Built Websites
Custom websites are flexible to update and will grow with your business. Unlike template-based
websites, custom websites are easier to modify and are more likely to last with the addition of new
features. You will also receive…

• Communicate with a professional developer/designer to make your website look and work
exactly the way you want it to.

• Consistent branding on your website will complement all of your other business activities. Your
website designer will use your branding throughout your site, including fonts, colors, and logos
to ensure that all aspects of your marketing are consistent.

• Unique Design - having a unique professionally designed website will work well for current
and future clients You would avoid having a website in general and websites really say a lot
about a business.

• Professional maintenance - since you will be paying for a "service", there will always be
someone managing your site and checking that it is up and running as it should. This may
include updating software and making sure your website is secure and will function properly.

Advantages of Custom-Built Site

1. Custom-fit to the business


2. Unlimited designs
3. Can be updated anytime
4. Better SEO ranking
5. Flexible when businesses grow
6. Highly responsive and optimized for mobile

The difference between online web creation tools and custom-built website

Online Website Creation Tools Custom-Built website

Design Flexibilities Less Flexible than the Custom More Flexible than the online
built web creation tools

48 Banuka Udayanga COL/E 011159


Price Less expensive than the custom More expensive
built

User Interface More Creative Mostly it depends on the web


designer

Security Might be an issue No security issue

Functionality There is a limitation on graphic No limitation on graphic and


and functionality functionality

User Experience More user experience Less user experience

Performance It is not easy to update Depends on the web designer

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.

49 Banuka Udayanga COL/E 011159


System Interface

Page Code

50 Banuka Udayanga COL/E 011159


Admin Loging Page

51 Banuka Udayanga COL/E 011159


Admin Loging Page Code

52 Banuka Udayanga COL/E 011159


Contact Form

Contact Page Code

53 Banuka Udayanga COL/E 011159


Dashboard

54 Banuka Udayanga COL/E 011159


Dashboard Code

55 Banuka Udayanga COL/E 011159


56 Banuka Udayanga COL/E 011159
Medical History

Medical History Code

57 Banuka Udayanga COL/E 011159


58 Banuka Udayanga COL/E 011159
Book Appointment page

Book Appointment Code

59 Banuka Udayanga COL/E 011159


Profile Edit Page

Profile Edit Page Code

60 Banuka Udayanga COL/E 011159


Patient Registration

Patient Registration code

61 Banuka Udayanga COL/E 011159


62 Banuka Udayanga COL/E 011159
63 Banuka Udayanga COL/E 011159
3.2 Compare and contrast the multipage website created to the design document. Use
your design document with appropriate principles, standards and guidelines to produce
a branded, multipage website supported with realistic content and critically evaluate
the web design, development process against your design document analyzing any
technical challenges you faced during the development.

Web Design Development Process


A web application or website development project can be effectively finished by following a
specified, predictable set of stages. To guarantee that every component of the project is addressed and
delivered on time, this method aids in the alignment of development resources, stakeholders, and team
members. (marceldigital.com)

Some of the Technical Challenges that I faced during the website development

• During the planning stage, there was too much time spent trying to understand the customers.
• Had some when issues collecting content for the website because it is a library management
website and finding appropriate photographs was difficult.
• When students were given surveys, they were unable to provide feedback. Only a few
students responded.
• There were numerous coding problems and difficulties in designing the database while
designing the back end of the website.
• Had some poor system performances while creating the system

64 Banuka Udayanga COL/E 011159


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.

What is Quality Assurance (QA)?


A product or service's compliance with predetermined specifications is determined through a
systematic procedure known as quality assurance (QA).
QA creates and upholds standards for creating or producing dependable products. A quality assurance
system enables a company to compete more effectively with rival businesses by enhancing work
processes and efficiency as well as client confidence and a company's credibility. (techtarget.com)

Quality assurance methods


• Failure testing
• Statistical process control
• Total quality management

How was quality assurance implemented during the web design and development stage.
The goal of quality assurance is to monitor and enhance the entire development process so that any
issues are quickly identified and rectified. It is difficult to overstate the significant role QA plays in
web development because the earlier errors are detected, the cheaper it is to resolve them and the less
influence they have on your business.

(P7 Create a suitable Test Plan identifying key performance area and use it to review
the functionality and performance of your website.)

Test Case Table for the Hospital Management System

Test: Sign Up Executed by: Banuka


Activity Expected Output Actual Output Result
Hospital Management Should be able to Sign Sign Up got successful Pass
system Up when the Patient and the page moves
Signup gives their name,
email, address,
password

Test: Admin Login Executed by: Banuka


Activity Expected Output Actual Output Result

65 Banuka Udayanga COL/E 011159


Hospital Management Should be able to Login got successful Pass
system Login when the and the page moves
Admin Login Admin gives their
Username, password

Test: Update Patient Executed by: Banuka


Details
Activity Expected Output Actual Output Result
Hospital Management Should be able to Patient Update got Pass
system update patient after success after entering
Update Patient Details given their correct their details and the page
details moves

66 Banuka Udayanga COL/E 011159


Test: Book an Executed by: Banuka
Appointment
Activity Expected Output Actual Output Result
Hospital Management Should be able to add Booking successfully Pass
system correct details added and the page
Book an Appointment moves

References
• Communications Protocol
https://www.networxsecurity.org/members-area/glossary/c/communications-protocol.html

• Transmission Control Protocols


https://www.sdxcentral.com/resources/glossary/transmission-control-protocol-tcp/

• FTP
https://www.hypr.com/file-transfer-protocol-ftp/

• telnet
https://www.geeksforgeeks.org/introduction-to-telnet/

• Hard disk
https://www.computerhope.com/jargon/h/harddriv.htm

• Operating System (OS)


https://www.tutorialspoint.com/operating_system/os_overview.htm

67 Banuka Udayanga COL/E 011159


• Linux operating system
https://www.redhat.com/en/topics/linux/what-is-linux

• Windows Operating System


https://www.computerhope.com/jargon/w/windows.htm

• Web Server Software


https://www.techopedia.com/definition/23735/server-software

• Apache Web Server


https://www.sumologic.com/blog/apache-web-server-introduction/

• Microsoft Internet Information Service (IIS)


https://techterms.com/definition/iis

• NginX
https://www.nginx.com/resources/wiki/

• Top level Domains


https://www.wix.com/blog/2020/12/what-is-tld/?

• Search Engine Optimization


https://searchengineland.com/guide/what-is-seo

• Google Search Console


https://search.google.com/search-console/welcome

• CSS (Cascading Style Sheet)


https://techterms.com/definition/css

• Php
(https://techterms.com/definition/php)

• JavaScript
(https://www.techopedia.com/definition/3929/javascript-js)

• Bootstrap
(https://www.techtarget.com/whatis/definition/bootstrap)

• Onsen UI
(https://www.educative.io/answers/what-is-onsen-ui)

• Notepad++
(https://notepad-plus-plus.org/downloads/)

• NetBeans
(https://www.techopedia.com/definition/24735/netbeans)

• Front End website Technologies


https://frontendmasters.com/guides/front-end-handbook/2018/what-is-a-FD.html

68 Banuka Udayanga COL/E 011159


• Back End website Technologies
https://www.techtarget.com/whatis/definition/front-end

• Presentation layer
https://www.router-switch.com/faq/what-is-presentation-layer-and-function.html

• Application Layer
https://www.router-switch.com/faq/what-is-application-layer-the-functions-and-examples-of-
application-layer.html

• Online Website Creation Tools


Weebly, Shopify,Wix
https://www.forbes.com/advisor/business/software/best-website-builders/

• what is QA ?
https://www.techtarget.com/searchsoftwarequality/definition/quality-assurance

69 Banuka Udayanga COL/E 011159


70 Banuka Udayanga COL/E 011159

You might also like