lOMoARcPSD|51488188

4057-1682578912794-UNIT 13 WDD Assignment

HND In Computing (ESOFT Metro Campus)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hanna Davis (amnawaz28@gmail.com)
 lOMoARcPSD|51488188

HigherNationals

Internalverificationofassessmentdecisions–BTEC(RQF)

INTERNALVERIFICATION–ASSESSMENTDECISIONS

Programmetitle BTEC Higher National Diploma in Computing

Ms.Lakna AtÝgala
Assessor InternalVerifier

Unit 13: Web Design and Development

Unit(s)

Malcolm Lismore Photographer’s Website

AssignmentÝtle

Balasooriyage Dona Imalsha Sadhini

Student’sname

Listwhichassessmentcriteri Pass Merit Distinction

atheAssessorhasawarded.

INTERNALVERIFIERCHECKLIST
Dotheassessmentcriteriaawardedmatchtho
seshownintheassignmentbrief?
Y/N

Isthe Pass/Merit/Distinction
gradeawardedjustifiedbythe assessor’s
comments on the student work? Y/N

Hastheworkbeenassessedaccurate
ly? Y/N
Isthefeedbacktothestudent:
Givedetails:

• Constructive?
• Linkedtorelevantassessmentcriteria
Y/
?
NY/
• Identifyingopportunitiesforimpr
ovedperformance? N

• Agreeingactions?
Y/

NY/

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Doesthe
assessmentdecisionneedamending? Y/N

Assessorsignature Date

InternalVerifiersignature Date
Programme Leader
signature(ifrequired) Date

Confirm actioncompleted
Remedialactiontaken

Givedetails:

Assessorsignature Date
InternalVerifiersig
nature Date
Programme
Leadersignature(ifrequir Date

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Higher Nationals - SummativeAssignmentFeedbackForm

StudentName/ID Balasooriyage Dona Imalsha Sadhini / E199363

UnitTitle Unit 10: Website Design & Development
AssignmentNumber Assessor

SubmissionDate 18/01/2025 DateReceived1stsub

mission

Re-submissionDate DateReceived2ndsubmission

AssessorFeedback:

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: AssessorSignature: Date:

ResubmissionFeedback:

Grade:
AssessorSignature: Date:
InternalVerifier’sComments:

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.

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

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

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

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

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 Edexcel 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 Edexcel UK.
6. I understand that my assignment will not be considered as submitted if this document is not attached to the
attached.

E199363@esoft.academy 18/01/2025
Student’s Signature: Date:
(Provide E-mail ID) (Provide Submission Date)

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Assignment Brief

Student Name /ID Number Balasooriyage Dona Imalsha Sadhini / E199363

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2023/2024

Unit Tutor

Assignment Title Malcolm Lismore Photographer’s Website

Issue Date

Submission Date

IV Name & Date

Submission Format:

Unit Learning Outcomes:

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

LO2Categorise website technologies, tools and software used to develop websites.

LO3Utilise 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:

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Assignment Brief
Malcolm Lismore is a freelance photographer based on the North West coast of Scotland. His biggest
passion in photography is for the natural world. He sells many images of the rugged Scottish
landscape, its natural wildlife and coastal birds. However, it’s not just landscape and wildlife
photography he is interested in, like many photographers he can also be hired for weddings,
portraits, and special events.

Malcolm is looking for new ways to promote his business and has approached you to develop a
website that will act as a showcase of his photography skills and allow users to make enquires about
hiring him for weddings and special occasions. The website will need to provide the following
features:
 A home page from which it is possible to navigate to the other resources in the website. The home
page will need to quickly communicate the purpose of the site, be visually engaging and provide
clear navigation to the rest of the site.
 A page that provides basic information about Malcolm, his experiences and his passion for
photography.
 A page that provides information about Malcolm’s prices.
 A series of pages (initially between three and six pages) that will act as a gallery and showcase of
Malcolm’s photography. This is a really important part of the website as it will be the main way in
which the services of his business will be promoted. You will need to think carefully about how to
present the images and how to structure this part of the site. Bear in mind that in the future
Malcolm will want to add many additional photographs to this part of the site.
 An enquiry form. Malcolm would like to provide a way for customers to make enquiries about
possible bookings. The user will need to be able to enter details such their contact details, location
and date of the wedding etc. into a HTML form.

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)

Differentiate the communication protocols, server hardware, operating systems and web server
software with regards to designing, publishing and accessing a website. Define the types of DNS and
the uses of it, with clarifications on how domain names are structured.
Analyze the effect of search engines on website performance. Provide evidence-based support for
improving a site’s index value and rank through search engine optimization.Identify and explain the
common web development technologies and frameworks. Explain the tools and techniques chosen to
the web application and hence justify, by giving reasons, why a web application is suitable for the
given scenario.

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

Define the relationships between front-end and back-end website technologies and explain how the
front-end and the back-end relate to presentation and application layers.
2.2 Critically compare the different between online website creation tools and custom-built
sites.Consider Followings: design flexibility, performance, functionality, User Experience (UX) and
User Interface (UI). Compare and contrast the tools and techniques available to design and developa

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

custom-built web application for Malcome and Lismore. Select the most suitable tools, techniques
and justify your selection with valid reasons.

Task 3 - Utilize website technologies, tools and techniques with good design principles to
create a multipage website (LO3)

Design a suitable web application solution for the given scenario. Provide evidences of the design,
multipage website supported with fidelity wireframes and a full set of client and user requirements.
Use your design document with appropriate principles, standards and guidelines to produce a
branded, multipage website supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design

Implement the designed system 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. Critically evaluate the web design and development
processagainst your design document and analyse any technical challenges you faced in
development.

Task 4 - Create and use a Test Plan to review the performance and design of a multipage
website (LO4)

Analyse the Quality Assurance (QA) process and review how it was implemented during your design
and development stages.
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 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. Prepare a user documentation to properly guide the users of the
implemented system.
Note:User documentation should be simple and understandable by anyone. Use screenshots and
provide stepwise guidance.

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Grading Rubric

Grading Criteria Achieved Feedback

LO1 Explain server technologies and management services associated with hosting 14 - 41
and managing websites

P1 Identify the purpose and types of DNS, including explanations on how domain 14-17
names are organized and managed.

P2 Explain the purpose and relationships between communication protocols, server 17-25
hardware, operating systems and web server software with regards to designing,
publishing and accessing a website.
M1Analyse the impact of common web development technologies and frameworks 25-31
with regard to website design, functionality and management.

M2 Review the influence of search engines on website performance and provide 31-36
evidence-based support for improving a site’s index value and rank through search
engine optimisation

D1 Justify the tools and techniques chosen to realize a custom built 36-41
website.

LO2 Categories website technologies, tools and 44-53

software used to develop websites

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

P3 Discuss the capabilities and relationships between front-end and back-end 44-47
website technologies and explain how these relate to presentation and application
layers.

P4 Discuss the differences between online website creation tools and custom built 47-49
sites with regards to design flexibility, performance, functionality, User Experience
(UX) and User Interface (UI).

M3Analyse a range of tools and techniques available to design and develop a 49-53
custom-built website.

LO3 Utilize website technologies, tools and techniques 55-69

with good design principles to create a multipage
website

P5 Create a design document for a branded, multipage website supported with 55-58
medium fidelity wireframes and a full set of client and user

requirements.

P6 Use your design document with appropriate principles, standards and guidelines 58-61
to produce a branded, multipage website supported with realistic content.

10

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

M4 Justify the multipage website implementation decisions against the design 61-64
document.

D2 Evaluate the design and development process of the multipage website against 64-69
the design document including any technical challenges faced.

LO4 Create and use a Test Plan to review the 82-88

performance and design of a multipage website

P7 Create a suitable Test Plan identifying key performance areas and 82-83

use it to review the functionality and performance of your website.

M5Analyse the Quality Assurance (QA) process and review how it was implemented 83-85
during the multipage website design and development stages.

D3 Evaluate the results of the Test Plan and the overall success of the multipage 85-88
website with recommendations for improvement.

11

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Observation Sheet

Activity Activity Learning Outcome Feedback

No (Pass/ Redo)

1 Explain server technologies and management LO1

services associated with

hosting and managing websites.

2 categorize website technologies, tools and LO2

software used to develop

websites.

3 Utilize website technologies, tools and LO3

techniques with good design

principles to create a multipage website.

4 Create and use a Test Plan to review the LO4

performance and design of a

multipage website.

Comments -

Assessor Name -…………………………………………….

Date -…………………………………………….

.Assessor Signature -…………………………………………….

12

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Acknowledgement
This assignment report has been made possible by the knowledge and experiences I gained throughout the
past semester. It would not have been achievable without the unwavering support, guidance, and
encouragement from our lecturers. Their wisdom, advice, and hope have been invaluable and
unforgettable.

I would like to take this opportunity to offer my special thanks to Ms. Lakna Attigala for her continuous
support as a mentor. Her assistance has been instrumental in helping me expand my knowledge,
imagination, and creativity. She provided constructive feedback, corrected my mistakes, and inspired me to
experiment with new ideas and approaches during this semester.

Additionally, I would like to express my heartfelt gratitude to everyone who supported me at every stage of
the past semester. I extend a sincere thank you to the ESOFT organization for providing me the
opportunity to write this assignment.

Kind Regards,

Imalsha Sadhini

13

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Table of Contents
Task 1 - Server technologies and management services associated with hosting and
managing websites...................................................................................20

1.1. Differentiate the communication protocols, server hardware, operating systems and web server
software with regards to designing, publishing and accessing a website. Define the types of DNS and the
uses of it, with clarifications on how domain names are structured............................................................20

1.1.1. Communication Protocols..........................................................................................................20

1.1.2. Server Hardware............................................................................................................................22

1.1.3. Operating Systems.....................................................................................................................23

1.1.4. Web Server Software.................................................................................................................25

1.2. Analyze the effect of search engines on website performance. Provide evidence-based support for
improving a site’s index value and rank through search engine optimization. Identify and explain the
common web development technologies and frameworks. Explain the tools and techniques chosen to the
web application and hence justify, by giving reasons, why a web application is suitable for the given
scenario .......................................................................................................................................................31

1.2.1. Search Engines...........................................................................................................................31

1.2.2. The Impact of Technical SEO on Website Performance...........................................................33

1.2.3. Common Web Development Technologies and Frameworks...................................................37

1.2.4. Frameworks in Software Development......................................................................................40

1.2.5. Tools and Techniques for Developing a Photography Business Web Application...................42

1.2.6. Server-Side and Client-Side Scripts...........................................................................................44

1.2.7. Database Integration...................................................................................................................44

1.2.8. Justification for the Chosen Technologies.................................................................................45

1.2.9. Tools for Development..............................................................................................................45

1.2.10. Design and Development of a Branded Multipage Website......................................................46

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

14

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

2.1. Define the relationships between front-end and back-end website technologies and explain how the
front-end and the back-end relate to presentation and application layers....................................................49

2.1.1. Understanding Front-End and Back-End Relationships in Web Development.........................49

Overview of the OSI Model.....................................................................................................................49

Relationship Between Front-End and Back-End......................................................................................52

2.2 Critically compare the different between online website creation tools and custom-built sites. Consider
Followings - design flexibility, performance, functionality, User Experience (UX) and User Interface
(UI). Compare and contrast the tools and techniques available to design and develop a custom-built web
application for Malcome and Lismore. Select themost suitable tools, techniques and justify your selection
with valid reasons.........................................................................................................................................53

2.2.1. Online Website Creation Tools......................................................................................................53

2.2.2. Custom-Built Sites.........................................................................................................................53

2.2.3. Comparison....................................................................................................................................54

2.2.4. Tools and Techniques for Malcolm Lismore's Photography Website...........................................55

Most Suitable Choice and Justification....................................................................................................55

2.2.5. Analysis of Front-End Technologies..............................................................................................58

Task 3 - Utilize website technologies, tools and techniques with good design principles
to create a multipage website (LO3).........................................................60

3.1 Design a suitable web application solution for the given scenario. Provide evidences of the
design,multipage website supported with fidelity wireframes and a full set of client and user requirements.
Useyour design document with appropriate principles, standards and guidelines to produce a
branded,multipage website supported with realistic content.......................................................................60

3.1.1. Design Document for the Website.................................................................................................60

3.1.2. Client and User Requirements........................................................................................................60

3.1.3. Medium Fidelity Wireframes.........................................................................................................61

3.1.4. Malcolm Lismore's Photography Website - Wireframes...............................................................62

Development Standards, Guidelines, and Realistic Content....................................................................74

3.2 Implementation of the Designed System................................................................................................74

15

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Task 04 - Create and use a Test Plan to review the performance and design of a
multipage website.....................................................................................87

4.1. Analyze the Quality Assurance (QA) process and review how it was implemented during your design
and development stages. 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)............................................87

4.1.1. Quality Assurance (QA) Process Analysis....................................................................................87

4.2 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. Prepare a user documentation to properly guide the users of the
implemented system.....................................................................................................................................90

4.2.1. Summary of Key Findings.............................................................................................................90

4.2.2. Areas of Success.............................................................................................................................91

4.2.3. Areas Requiring Improvement and Recommendations..................................................................91

4.2.4. User Documentation.......................................................................................................................92

4.2.5. Overall Evaluation..........................................................................................................................92

4.2.6. Screenshots of Tests.......................................................................................................................93

Academic Experience................................................................................94

References................................................................................................95

List of Tables

Table 1 Comparison of online web creation tools and custom built creation..................................................56

Table 2 - Pros and cons comparison.................................................................................................................57

List of Figures

Figure 1 - Internet Protocols.............................................................................................................................20

Figure 2 - Server Hardware types.....................................................................................................................23

Figure 3 - Types of OS.....................................................................................................................................25

Figure 4 - Web Server Software.......................................................................................................................27

16

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 5 - How Does works?............................................................................................................................28

Figure 6 - Search engines.................................................................................................................................31

Figure 7 - Web crawling...................................................................................................................................33

Figure 8 - Technical SEO.................................................................................................................................35

Figure 9 - Web development languages...........................................................................................................39

Figure 100 - Web Application Frameworks.....................................................................................................41

Figure 11 - Development tools.........................................................................................................................45

Figure 12 –Technical Challenges....................................................................................................................48

Figure 13 - OSI Model.....................................................................................................................................53

Figure 14 - Web Development Tools...............................................................................................................59

Figure 15 - Home Page Wireframe..................................................................................................................62

Figure 16 - Home Page Design........................................................................................................................63

Figure 17 – Portfolio Wireframe......................................................................................................................63

Figure 18 - Portfolio Wireframe.......................................................................................................................64

Figure 19 - Portfolio Design.............................................................................................................................64

Figure 20 - Portfolio Design.............................................................................................................................65

Figure 21 - Portfolio design.............................................................................................................................65

Figure 22 - Contact Page Wireframe................................................................................................................66

Figure 23 - Contact page Design......................................................................................................................66

Figure 24 - About Page wireframe...................................................................................................................67

Figure 25 - About Page Wireframe..................................................................................................................67

Figure 26 - About Page Design........................................................................................................................68

Figure 27 - About Page Design........................................................................................................................68

Figure 28 - Packages Page Wireframe.............................................................................................................69

Figure 29 - Packages page design....................................................................................................................69

Figure 30 - User Login Page Wireframe..........................................................................................................70

17

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 31 - User login Page Design.................................................................................................................70

Figure 32 - Admin Login Page Wireframe......................................................................................................71

Figure 33 - Admin Login Design.....................................................................................................................71

Figure 34 - Customer Feedback Page Wireframe............................................................................................72

Figure 35 - Customer Feedback Design...........................................................................................................72

Figure 36 - Frequently asked Questions page wireframe.................................................................................73

Figure 37 - Frequently Asked Questions Page Design.....................................................................................73

Figure 38 - Index.html......................................................................................................................................76

Figure 39 - About.html.....................................................................................................................................76

Figure 40 - Pricing .html..................................................................................................................................77

Figure 41 - Upload Reciept. Html....................................................................................................................77

Figure 42 - Admin Login.html.........................................................................................................................78

Figure 43 - Gallery.html...................................................................................................................................78

Figure 44 - Payment.html.................................................................................................................................79

Figure 45 - enquiry.html...................................................................................................................................79

Figure 46 - Create admin.php...........................................................................................................................80

Figure 47 - Contact.php....................................................................................................................................80

Figure 48 - upload.php.....................................................................................................................................81

Figure 49 - signin.php......................................................................................................................................81

Figure 50 - subscriber.php................................................................................................................................82

Figure 51 - adminlogin.php..............................................................................................................................82

Figure 52 - Signup.php.....................................................................................................................................83

Figure 53 - Landscape images Table................................................................................................................83

Figure 54 - Receipts Table...............................................................................................................................84

Figure 55 - Contacts table................................................................................................................................84

Figure 56 - users table......................................................................................................................................85

18

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 57 - admins table...................................................................................................................................85

Figure 58 - subscribers table............................................................................................................................86

Figure 59 - coastal images table.......................................................................................................................86

Figure 60 - uploads table..................................................................................................................................87

Figure 61 - Light house Test............................................................................................................................93

Figure 62 - LCP Time Test..............................................................................................................................93

19

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Task 1 - Server technologies and management services associated with

hosting and managing websites

1.1. Differentiate the communication protocols, server hardware, operating systems

and web server software with regards to designing, publishing and accessing a
website. Define the types of DNS and the uses of it, with clarifications on how
domain names are structured.

In the domain of website design, publishing, and access, several critical elements must work together to
ensure optimal functionality, performance, and accessibility. These elements include communication
protocols, server hardware, operating systems, and web server software. Understanding the unique roles
and differences among these components is essential, as they collectively influence the success and
efficiency of a website. Below, we explore these differences in detail and in simpler terms.

1.1.1. Communication Protocols

Communication protocols are the standardized rules that govern how data is exchanged over the internet
and other networks. These protocols ensure that both the sender and the receiver operate within a common
framework, facilitating effective and efficient data transmission. They function much like the grammar and
vocabulary of a language, enabling seamless communication.

The internet operates by fragmenting data into smaller units called packets, which are transmitted across
networks. Each protocol dictates how these packets are organized, transmitted, and reassembled. Protocols
also play a crucial role in managing the flow of data, ensuring access control, and preventing data loss due
to variations in data transfer rates. Additionally, protocols determine which devices or nodes can access the
communication channel at any given time.

20 Protocols
Figure 1 - Internet

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

An IP address (Internet Protocol address) is a unique identifier assigned to devices on a network. It helps
distinguish between different devices, routers, and websites, enabling efficient communication between the
source and destination. This address acts as a digital identifier, much like a mailing address in the physical
world, guiding data to its intended recipient.

Types of Communication Protocols

Communication protocols can be categorized into various types, each serving a specific purpose,

1. TCP/IP (Transmission Control Protocol/Internet Protocol)

The foundational suite for internet communication.

2. SMTP (Simple Mail Transfer Protocol)

Used for sending emails.

3. PPP (Point-to-Point Protocol)

Facilitates direct connections between two devices.

4. FTP (File Transfer Protocol)

Enables file transfer between computers.

5. SFTP (Secure File Transfer Protocol)

An encrypted version of FTP for secure file transfers.

6. HTTP (Hypertext Transfer Protocol)

Facilitates the transfer of web pages.

7. HTTPS (Hypertext Transfer Protocol Secure)

A secure version of HTTP, incorporating encryption for safety.

8. TELNET (Terminal Network)

Allows remote access to computers.

9. POP3 (Post Office Protocol 3)

Retrieves emails from servers to local devices.

10. IPv4 and IPv6

Addressing schemes for identifying devices on a network, with IPv6 offering a larger address space.

21

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

11. ICMP (Internet Control Message Protocol)

Used for error reporting and diagnostics.

12. IMAP (Internet Message Access Protocol)

Allows access to emails stored on a server.

13. SSH (Secure Shell)

Provides secure access to remote devices.

1.1.2. Server Hardware

Server hardware forms the backbone of any server system. These physical components are responsible for
processing, managing, and storing data while providing resources to other devices on a network. Server
hardware is engineered for high performance, reliability, and security to support mission-critical functions
and manage multiple users and applications simultaneously. Unlike standard computer hardware, server
hardware is optimized for concurrent usage, offering enhanced processing power, larger memory capacity,
and greater storage to accommodate multiple simultaneous users.

Types of Server Hardware

1. Rack-mounted Servers

These servers are compact, modular, and scalable, making them ideal for data centers and server rooms.
They are versatile and suitable for businesses anticipating growth. With various sizes and hardware
configurations available, they are well-suited for web hosting, database management, and other demanding
applications.

2. Blade Servers

Designed for high-density computing, blade servers are housed within rack enclosures. They are favored
by organizations requiring substantial computational power and flexibility. Their smaller form factor,
lower power consumption, and hot-swapping capabilities make them a popular choice among businesses
with advanced needs.

3. Tower Servers

22

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Standalone servers that resemble traditional desktop computers. These are ideal for small to medium-sized
businesses due to their cost-effectiveness, scalability, and reliability. They are often used for file sharing,
email hosting, and light database applications.

4. Micro Servers

Compact and energy-efficient, micro servers cater to businesses with limited computational needs. They
are cost-effective and suitable for simple tasks like lightweight web hosting and basic applications.

5. Mainframe Servers

Large and powerful systems designed to handle extensive workloads. They are commonly used by large
enterprises and government organizations for mission-critical tasks. Mainframes offer exceptional
reliability, security, and processing power, making them indispensable for complex applications.

Figure 2 - Server Hardware types

1.1.3. Operating Systems

Operating systems, commonly abbreviated as OS, are fundamental software that facilitate the management
of a computer's hardware and serve as a foundation for running diverse applications. Acting as an
intermediary layer, they connect users, software, and physical hardware components, enabling seamless
interaction with computers. Without an operating system, modern computing as we know it would not be
possible, as it provides the necessary framework for coordinating tasks and ensuring efficient performance

Types of Operating Systems

23

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1. Windows

Windows, a product developed by Microsoft, is one of the most widely utilized operating systems globally.
It caters to both personal and professional use, providing versions tailored to different user needs. On
personal computers, versions like Windows 10 offer a user-friendly graphical interface, while editions like
Windows Server cater to enterprise environments with features such as advanced networking and data
management tools. Known for its extensive compatibility, Windows supports a broad range of software
applications and hardware configurations, making it a versatile choice for individuals and organizations
alike.

2. MacOS

Designed exclusively for Apple’s Mac computers, macOS stands out for its sleek, intuitive interface and
strong focus on user experience. Seamlessly integrated with other Apple devices, such as iPhones and
iPads, macOS enables users to benefit from a connected ecosystem. This operating system is built on a
robust Unix foundation, offering enhanced stability and security. Features like the Spotlight search, the
Dock, and Continuity tools make macOS a popular choice for users seeking a balance between
functionality and aesthetic appeal.

3. Linux

Linux is an open-source operating system kernel that forms the basis for countless distributions, often
referred to as "distros," such as Ubuntu, CentOS, and Debian. Unlike proprietary operating systems, Linux
offers users the freedom to modify and customize the system according to their specific needs. It is highly
valued in server environments due to its reliability, scalability, and security features. Linux is also an
attractive option for developers and tech enthusiasts who prefer a system that is both cost-effective and
flexible.

4. Unix

Unix is a pioneering operating system that laid the groundwork for many modern systems, including
macOS and Linux. Renowned for its reliability and multi-user capabilities, Unix was originally developed
for use in enterprise and academic settings. Over the years, its influence has extended to powering critical
infrastructure and services. The system’s architecture emphasizes simplicity and modularity, making it a
preferred choice for environments where stability and performance are paramount.

5. Android

24

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Android, an operating system built on the Linux kernel, was created by Google to power a wide range of
mobile devices, including smartphones and tablets. Known for its customizability, Android allows
manufacturers to tailor the OS to suit their hardware specifications, resulting in a diverse ecosystem of
devices. The operating system is accompanied by the Google Play Store, which provides access to millions
of applications spanning various categories. Android's open-source nature has made it a dominant force in
the mobile market, especially in regions where affordability and accessibility are key.

6. iOS

iOS is Apple’s proprietary operating system

designed specifically for its mobile devices, such
as the iPhone and iPad. It is celebrated for its
polished interface, high performance, and strong
emphasis on security and privacy. The
integration of features like the App Store,
iCloud, and Apple Pay enhances the overall user
experience, making iOS a robust platform for
both personal and professional use. Apple’s tight
control over its hardware and software
Figure 3 - Types of OS
ecosystem ensures a seamless and consistent experience across all iOS-powered devices.

1.1.4. Web Server Software

A web server is a specialized computer system or software designed to store, process, and deliver web
pages to users over the internet. When a user enters a website's URL into their browser or clicks on a link,
the web server responds by fetching the requested content and delivering it to the user's device. This
interaction enables users to view and interact with websites and web applications in their browsers
(Hostinger, n.d.).

The core functionality of a web server lies in its ability to process HTTP (HyperText Transfer Protocol)
requests. Upon receiving a request, the server retrieves the necessary files—whether they are static (e.g.,
HTML, images) or dynamically generated content (e.g., scripts, database-driven pages)—and constructs an
HTTP response. The response includes the requested data along with headers containing metadata, which
the browser uses to render the webpage.

1.1.4.1. Types of Web Servers

25

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1. Apache HTTP Server

The Apache HTTP Server, commonly referred to as Apache, is one of the most widely used web servers
globally. Developed by the Apache Software Foundation, it is an open-source software solution compatible
with nearly all operating systems, including Linux, Unix, Windows, FreeBSD, and macOS. Apache is
highly customizable through modules, allowing administrators to extend its functionality to suit specific
needs. With approximately 60% of web server machines relying on Apache, its popularity stems from its
stability, flexibility, and extensive community support.

2. Lighttpd

Pronounced as "lighty," Lighttpd is a lightweight, open-source web server optimized for speed and
efficiency. Distributed with the FreeBSD operating system, it consumes minimal CPU resources while
maintaining robust performance. Lighttpd supports multiple operating systems, such as Linux, Solaris,
Windows, and macOS, making it a versatile option for various platforms. Its lightweight design and secure
architecture make it particularly suited for high-traffic websites or environments with limited resources.

3. Sun Java System Web Server

Developed by Sun Microsystems, the Sun Java System Web Server is tailored for medium to large-scale
websites and enterprises. While it is available free of charge, it is not open-source software. This web
server is compatible with Windows, Linux, and Unix platforms and supports a wide range of programming
languages and technologies, including Java Servlets, JSP, PHP, Python, Ruby on Rails, Perl, ASP, and
ColdFusion. Its compatibility with Web 2.0 technologies makes it a powerful tool for developers building
interactive and dynamic websites.

4. Jigsaw Server

Jigsaw, developed by the World Wide Web Consortium (W3C), is an open-source web server designed for
experimentation and innovation in web standards. Written in Java, it supports a variety of platforms,
including Linux, Unix, Windows, macOS, and FreeBSD. Jigsaw is capable of running CGI scripts and
PHP programs, making it suitable for both static and dynamic content. Its focus on supporting and
demonstrating emerging web technologies makes it a valuable tool for researchers and developers.

26

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 4 - Web Server Software

Key Features of Web Servers

 Platform Compatibility

Many web servers are designed to work across multiple operating systems, ensuring flexibility.

 Customizability

Open-source servers like Apache and Lighttpd allow extensive modifications to meet specific
requirements.

 Support for Dynamic Content

Web servers such as Sun Java System and Jigsaw are equipped to handle scripting languages and
frameworks for dynamic website functionality.

 Efficiency

Lightweight servers like Lighttpd are optimized for low resource usage while delivering high performance.

27

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.1.5. Domain Name Server (DNS)

The Domain Name System (DNS) is a foundational component of the internet, functioning as a digital
"phonebook" that translates human-readable domain names, such as nytimes.com or espn.com, into
numerical Internet Protocol (IP) addresses used by computers to communicate. While people can easily
remember and use domain names, computers rely on IP addresses to locate and access internet resources.
DNS bridges this gap by automating the process of converting domain names into the corresponding
machine-readable IP addresses.

1.1.5.1. How DNS Works

When a user types a web address (e.g.,

www.example.com) into their browser, the DNS
resolution process begins. This process involves
converting the user-friendly domain name into an IP
address (e.g., 192.168.1.1 for IPv4 or 2400 -cb00
-2048 -1 - -c629 -d7a2 for IPv6), allowing the
browser to locate the server hosting the desired
webpage.

Each device connected to the internet has a unique IP

address, akin to a home’s physical address, ensuring
that data is delivered to the correct destination. The
DNS resolution process is seamless and invisible to
users, requiring no manual intervention beyond
entering the domain name. Instead, specialized DNS
servers handle this translation behind the scenes.
Figure 5 - How Does works?
The DNS infrastructure includes multiple
components, such as recursive resolvers, root name servers, and authoritative name servers, each playing a
critical role in ensuring users can access websites quickly and reliably. This efficient system spares
individuals the burden of memorizing complex numerical IP addresses and makes navigating the internet
intuitive.

28

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.1.5.2. Top-Level Domains (TLDs)

Every domain name is registered with the Internet Corporation for Assigned Names and Numbers
(ICANN) and is assigned a suffix known as the top-level domain (TLD). The TLD signifies the domain’s
category or geographical origin and appears as the last part of the domain name. Below are some
commonly recognized TLDs,

1. ".gov" (Government Websites)

The ".gov" TLD is reserved exclusively for government entities, ensuring that websites using this
extension are associated with official government agencies. For instance, whitehouse.gov represents the
website for the White House. This TLD conveys trust and credibility, making it a reliable source for
government-related information and services.

2. ".mil" (Military Websites)

The ".mil" TLD is designated for military organizations. Websites like af.mil are associated with the
United States Armed Forces. This extension ensures that sensitive military information is hosted on secure
and authorized platforms, maintaining the integrity of defense-related communications.

3. ".com" (Commercial Businesses)

As one of the most widely used TLDs, ".com" is synonymous with commercial enterprises and businesses.
Websites like google.com leverage this extension to reach global audiences. Its popularity makes it a
preferred choice for companies seeking an authoritative and professional online presence.

4. ".edu" (Educational Institutions)

The ".edu" TLD is restricted to accredited educational institutions, such as universities and colleges. For
example, harvard.edu represents Harvard University. This TLD indicates that the website provides
educational resources or services, establishing credibility within the academic community.

5. ".org" (Organizations)

Traditionally associated with nonprofit organizations, ".org" is used by entities such as wikipedia.org.
This TLD is recognized for hosting organizations dedicated to advocacy, research, and public service,
making it a trusted choice for informational and community-focused websites.

29

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

6. Country-Specific TLDs

Country code TLDs (ccTLDs) are two-letter extensions indicating a domain’s geographical affiliation. For
instance, ".ca" is associated with Canadian websites like cbc.ca, while ".uk" is linked to the United
Kingdom. These extensions are commonly used by businesses and organizations to target audiences within
specific regions.

1.1.5.3. Domain Name Structure

Domain names are structured hierarchically to organize and standardize internet naming conventions. This
structure consists of three main components,

1. Top-Level Domain (TLD)

The TLD is the last part of a domain name, located to the right of the dot (e.g., .com in www.example.com).
It represents the highest level in the domain name hierarchy and indicates the category or geographical
origin of the domain. For instance, in www.esoft.lk, the .lk TLD signifies that the website is associated
with Sri Lanka.

2. Second-Level Domain (SLD)

The SLD is the part of the domain name located immediately to the left of the TLD. It usually represents
the organization, entity, or brand associated with the domain. For example, in www.esoft.lk, "esoft" is the
SLD, likely representing a specific organization or business entity. The SLD is crucial for distinguishing
individual websites within a TLD.

3. Subdomain

Subdomains are optional prefixes that appear before the SLD. They are used to identify specific sections or
services within a domain. A common subdomain is "www," which stands for the World Wide Web, as
seen in www.esoft.lk. Organizations can also use custom subdomains, such as blog.example.com or
support.example.com, to organize their websites into distinct functional areas.

30

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2. Analyze the effect of search engines on website performance. Provide evidence-
based support for improving a site’s index value and rank through search engine
optimization. Identify and explain the common web development technologies
and frameworks. Explain the tools and techniques chosen to the web application
and hence justify, by giving reasons, why a web application is suitable for the
given scenario .

1.2.1. Search Engines

A search engine is a specialized software application designed to retrieve and present information stored in
a vast database, responding to user queries with a list of relevant results. These tools serve as the backbone
of internet navigation, enabling users to access specific resources or knowledge efficiently. Over time,
search engines have evolved in complexity and functionality, adapting to the ever-growing volume of web
content. The pioneering search engine, Archie, was primarily employed for locating FTP files, while
Veronica was the first text-focused search engine. Today, Google dominates as the most widely used
search engine, but alternatives such as AOL, Ask.com, Baidu, Bing, DuckDuckGo, and Yahoo also
maintain significant user bases by offering unique features and benefits.

Figure 6 - Search engines

31

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2.1.1. How Search Engines Operate

Search engines operate through a sophisticated and continuous process that involves crawling, indexing,
and ranking web pages across the internet.

 Crawling

The process begins with web crawlers, often called spiders or bots, which systematically traverse the web
by following links between pages. As they move from one site to another, these automated programs
collect detailed information about the content, structure, and metadata of each page. Crawlers are
programmed to revisit pages periodically, ensuring the search engine's index remains up-to-date with the
latest changes and additions to the web.

 Indexing

The data collected by web crawlers is stored in a massive repository, forming the search engine’s index.
This index serves as a structured database optimized for quick retrieval of information. During this stage,
content is analyzed and categorized based on various factors, including keywords, topics, and relevance,
making it easier for the search engine to process user queries efficiently.

 Ranking Search Results

When users input a query into the search engine, its algorithms analyze the indexed database to identify
and rank the most relevant results.

 Determining Relevance

Relevance is determined through a combination of factors such as keyword matching, the contextual
quality of the content, the authority of the webpage (measured through backlinks and domain credibility),
and user engagement metrics like click-through rates and time spent on the page. Search engines also
consider the freshness of content and its alignment with the user's intent, which is increasingly refined
using machine learning techniques.

 Presenting Results

After ranking the identified pages, the search engine presents these results in an organized format, typically
ordered by their perceived usefulness. This ensures that users can quickly locate the most pertinent
information without sifting through irrelevant content. The dynamic nature of ranking, influenced by
content updates, search trends, and evolving algorithm criteria, highlights the importance of search engine
optimization for maintaining visibility.

32

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2.1.2. The Role of Search Engines in Digital Interaction

Search engines have profoundly shaped how people interact with the internet, making vast amounts of
information accessible and manageable. Their efficiency and reliability depend on the underlying
technology and continual refinements to their algorithms, ensuring they remain indispensable tools in
modern digital life. They serve as a bridge between users and the expansive resources of the web,
facilitating effortless access to information and services.

Figure 7 - Web crawling

1.2.2. The Impact of Technical SEO on Website Performance

Technical SEO plays a vital role in enhancing a website’s visibility, user experience, and overall ranking in
search engine results. By focusing on the structural and backend elements of a website, technical SEO
ensures that search engines can effectively crawl, index, and rank web pages. Below are the primary
components of technical SEO and their effects on website performance -

 Website Structure

A well-organized website structure is essential for facilitating efficient crawling and indexing by search
engines. Clear hierarchies and logical organization of content help search engines understand the
relationship between different pages. Proper use of heading tags (H1 for primary titles, H2 for secondary

33

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

headings, etc.) and subheadings ensures that content is coherent and easy to follow. This not only enhances
SEO performance but also improves user experience, making information more accessible to visitors.

 URL Structures

URLs act as identifiers for web pages, and a structured, consistent URL scheme significantly boosts SEO.
Clean URLs that are descriptive and include relevant keywords allow search engines to quickly interpret a
page's purpose. For instance, a URL like www.example.com/technical-seo-tips is far more effective than a
generic or unintelligible URL like www.example.com/page12345.

 Meta Tags

Meta tags provide search engines with essential information about a webpage’s content.

 The title tag, which appears as a clickable link in search engine results, should include primary
keywords to improve its relevance and appeal.
 The meta description gives users a preview of the content, influencing their decision to click.
Optimized meta tags can lead to higher click-through rates (CTR), directly impacting a
website's traffic and ranking.
 Mobile Friendliness

With the widespread use of smartphones and tablets for internet browsing, ensuring mobile compatibility is
critical. Responsive web design allows websites to adapt to various screen sizes, making them accessible
on any device. Search engines like Google prioritize mobile-friendly websites in their rankings,
recognizing their importance in delivering a positive user experience.

 Page Speed

Website loading speed is a significant ranking factor. Pages that load quickly reduce user frustration and
minimize bounce rates, which search engines monitor as indicators of a site’s quality. Techniques like
compressing images, leveraging browser caching, and minimizing code can drastically improve loading
times, enhancing both user satisfaction and search engine rankings.

 Security

Website security is a growing concern for both users and search engines. The implementation of HTTPS
(Hypertext Transfer Protocol Secure) encrypts data exchanges between the browser and the website,
ensuring user privacy and data integrity. Search engines often reward secure websites with improved
rankings, making HTTPS a crucial element of technical SEO.

 Accessibility

34

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Search engines increasingly favor websites that prioritize inclusivity. Features such as alternative text for
images, keyboard navigation, and readable fonts improve accessibility for individuals with disabilities.
This not only boosts a site's ranking but also aligns with ethical web development practices.

Technical SEO is the foundation of a high-performing website. By addressing factors like website
structure, URL clarity, meta tags, mobile compatibility, page speed, security, and accessibility, businesses
can enhance their site’s search engine rankings and user experience. Investing in technical SEO ensures a
website is optimized for both search engines and human visitors, driving sustained traffic and engagement.

Figure 8 - Technical SEO

1.2.2.1. Evidence-Based Practices to Improve a Site’s Index Value and Rank Through SEO

Search Engine Optimization (SEO) is a critical digital marketing strategy focused on improving a website's
visibility on search engines like Google and Bing. By optimizing various elements of a site, SEO ensures
that it appears prominently in search results for relevant queries. Here are evidence-based strategies to
enhance a website's index value and rank effectively -

Publishing Relevant, Authoritative Content

Creating high-quality, authoritative content is fundamental to achieving better search engine rankings.
Search engines prioritize content that is both relevant and credible, as this provides value to users.
Producing well-researched, engaging, and unique material tailored to the interests and needs of your

35

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

audience can significantly boost site traffic. By consistently delivering insightful content, your website
establishes itself as an authoritative source, improving its relevance and ranking.

Keyword Identification and Targeting

Effective SEO begins with identifying and targeting specific keyword phrases that align with user search
behavior. Conduct thorough research to understand the terms and queries your target audience uses. For
each page, focus on a primary keyword or phrase to ensure relevance. For broader topics or multiple
keywords, create dedicated pages that address each term comprehensively to maximize visibility.

Strategic Keyword Placement

Where keywords are placed on a page significantly impacts search engine rankings. Integrate keywords
naturally within critical areas such as URLs, page titles, headings, and subheadings. This strategic
placement allows search engines to understand the page’s focus while maintaining readability and user
engagement. A balance between optimization and user experience is crucial to avoid keyword stuffing,
which can harm rankings.

Content Optimization

The frequency and distribution of keywords throughout your content influence its SEO performance.
Include the primary keyword in the opening and closing paragraphs, ensuring it appears periodically in the
body. However, prioritize readability and ensure the content flows naturally. Incorporate internal and
external links to authoritative sources to build credibility and provide users with additional valuable
resources, strengthening your content's overall relevance.

Regular Content Updates

Keeping your website updated is a key signal of relevance for search engines. Regularly auditing and
refreshing content ensures it remains accurate and current, maintaining user trust and search engine
favorability. Blogs are an excellent way to add fresh, keyword-rich content regularly. Interlinking blog
posts with related pages further strengthens your site’s internal link structure, enhancing navigation and
indexability.

Metadata Optimization

Metadata, contained within a webpage’s HTML <head> tags, plays an essential role in SEO.

 Title Metadata

36

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

This is the clickable headline displayed in search engine results. Craft compelling and descriptive titles
incorporating keywords to improve click-through rates.

 Description Metadata

Provide concise summaries of each page’s content, using keywords to attract search engine users. A well-
written description encourages users to click on your link over competitors’.

 Keyword Metadata

Although less relevant today, including secondary keywords can still complement other optimization
efforts, enhancing the page's contextual relevance.

Building a Link-Worthy Website

Creating content that is valuable, credible, and informative increases the likelihood of earning links from
other websites. These backlinks serve as endorsements, signaling your site’s authority to search engines.
Enhance your content’s linkability by incorporating useful information, statistics, or guides. Use
descriptive and contextually relevant anchor text for internal and external links to further improve your
site's SEO.

Alt Tags for Media

Providing alt tags, or alternative text descriptions, for images and videos ensures accessibility and enhances
search engine discoverability. These tags help search engines index non-text content, making your site
more inclusive for users relying on text-only browsers or screen readers. Alt tags also create opportunities
for your media to appear in search engine image results, driving additional traffic.

1.2.3. Common Web Development Technologies and Frameworks

Web development technologies and frameworks form the backbone of creating dynamic, functional, and
visually appealing websites and web applications. These technologies include a combination of
programming languages, tools, libraries, and frameworks that developers use to build and maintain web-
based projects.

1.2.3.1. Web Development Programming Languages

Programming languages are foundational for web development, enabling the creation of both the user-
facing (frontend) and server-side (backend) components of a web application. Below are the major
categories and examples of programming languages widely used in web development -

 Frontend Programming Languages

37

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Frontend languages power the visual and interactive elements users encounter when accessing a website or
web application.

HTML (Hypertext Markup Language)

HTML is the standard markup language for creating the structure of web pages. It organizes content into
elements such as headings, paragraphs, lists, images, and links, forming the foundation of any website.

CSS (Cascading Style Sheets)

CSS controls the styling and layout of web pages. It allows developers to specify design elements,
including fonts, colors, spacing, and responsiveness, ensuring the website is visually appealing and
optimized for various devices.

JavaScript
JavaScript is a versatile, client-side scripting language that adds interactivity and dynamic functionality to
web pages. It enables features such as animations, form validation, and asynchronous content updates
through technologies like AJAX.

TypeScript
A superset of JavaScript, TypeScript introduces static typing and other features that enhance code quality,
scalability, and maintainability, making it a preferred choice for large-scale web applications.

 Backend Programming Languages

Backend languages manage the server-side logic, data processing, and interactions that occur behind the
scenes of a web application.

Python
Python is renowned for its simplicity and readability, making it a favorite among developers. It is often
used with frameworks like Django and Flask for developing scalable and efficient web applications.

Node.js (JavaScript)

Node.js extends JavaScript's capabilities to the server side, enabling developers to build full-stack
applications using a single language. Its event-driven architecture ensures high performance for real-time
applications.

Ruby
Ruby, commonly used with the Ruby on Rails framework, is known for its developer-friendly syntax and
rapid development capabilities, making it ideal for startups and small-scale projects.

38

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

PHP
PHP is a widely used server-side scripting language designed specifically for web development. It
integrates seamlessly with databases and supports frameworks like Laravel and CodeIgniter.

Java
Java is a robust, platform-independent language ideal for creating enterprise-level web applications.
Frameworks like Spring and Hibernate enhance its capabilities for web development.

C#
Developed by Microsoft, C# is used in conjunction with the ASP.NET framework for building powerful
web applications, particularly on Windows platforms.

 Database Query Languages

Databases store and manage the data that powers web applications. Query languages facilitate interaction
with databases to retrieve, modify, and manipulate data effectively.

SQL (Structured Query Language)

SQL is the standard language for relational databases. It enables tasks such as retrieving specific data,
inserting new records, updating existing data, and managing database structures. Its versatility makes it an
essential tool for data management in virtually every industry.

1.2.3.2. Web Development Frameworks

Frameworks provide pre-built tools, components, and best practices that accelerate the development
process while maintaining high code quality and consistency.

Frontend Frameworks

Frameworks like React, Angular, and Vue.js streamline the creation of dynamic and interactive user
interfaces. These tools simplify state management, component rendering, and responsiveness.

Backend Frameworks

Django (Python), Express.js (Node.js), Laravel (PHP), Ruby on Rails (Ruby), and Spring (Java) offer
comprehensive solutions for handling server-side logic, routing, authentication, and database integration.

39 languages
Figure 9 - Web development

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2.4. Frameworks in Software Development

A framework is a structured set of tools, guidelines, and reusable code designed to facilitate the
development of software applications. By providing pre-established patterns and conventions, frameworks
streamline the development process, enhance efficiency, and ensure consistency across projects. They
often include libraries, APIs (Application Programming Interfaces), and best practices to help developers
address common challenges efficiently.

Key Advantages of Frameworks

Frameworks offer numerous benefits, making them an essential part of modern software development -

 Abstraction
Frameworks simplify complex functionalities by providing higher-level abstractions, enabling
developers to focus on application-specific logic rather than intricate technical details.
 Reusability
By offering reusable code modules, frameworks reduce the need to write code from scratch,
accelerating the development process.
 Structured Architectures

Frameworks enforce organized patterns such as the Model-View-Controller (MVC) architecture, ensuring
a clear separation of concerns and improving maintainability.

 Scalability
Frameworks are designed to support the growth of applications, making it easier to add features or
expand functionality as projects evolve.
 Consistency
Coding standards and practices enforced by frameworks enhance collaboration among developers and
ensure uniformity across the codebase.
 Security
Many frameworks come with built-in security features to mitigate common vulnerabilities, improving
the reliability and safety of applications.

40

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2.4.1. Types of Frameworks

Frameworks are tailored for specific development needs, including web applications, mobile development,
and backend systems.

1. Web Application Frameworks

Frameworks designed for creating dynamic and responsive websites and web applications.

Ruby on Rails

Built using Ruby, this framework emphasizes simplicity through principles like Convention over
Configuration (CoC) and Don't Repeat Yourself (DRY).

Django
A Python-based framework known for its rapid development capabilities and focus on clean, pragmatic
design.

Angular
Developed by Google, Angular is a JavaScript framework for creating highly dynamic single-page web
applications.

React
A JavaScript library from Facebook, React is widely used for building interactive user interfaces with a
focus on component-based architecture.

Vue.js
A progressive JavaScript framework that enables developers to build user interfaces incrementally,
offering flexibility and ease of use.

41 Frameworks
Figure 100 - Web Application

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

2. Mobile Development Frameworks

Frameworks for building applications that run on mobile devices, often supporting multiple platforms.

 React Native

A popular framework by Facebook that allows developers to create cross-platform mobile

applications using JavaScript and React.

 Flutter
A UI toolkit from Google for building natively compiled applications across mobile, web, and
desktop platforms using a single codebase.
 Xamarin
Owned by Microsoft, Xamarin enables the development of cross-platform mobile applications
using C# and .NET technologies.

3. Backend and API Frameworks

Frameworks that handle server-side logic, API development, and database interactions.

 Express.js
A minimalist framework for Node.js that facilitates the development of web applications and APIs
with flexibility and simplicity.
 Spring Boot

A Java-based framework that simplifies the creation of microservices and enterprise-level

applications with extensive features and tools.

 Laravel
A PHP framework that combines elegant syntax with powerful features for developing robust web
applications.

1.2.5. Tools and Techniques for Developing a Photography Business Web Application

A web application offers a dynamic platform that allows users to access services, share data, and
collaborate remotely via web browsers and internet-based technologies. For Malcolm Lismore's
photography business, a web application is the ideal solution to highlight his skills, showcase his portfolio,
and manage customer inquiries efficiently. The selected tools and techniques aim to create a visually
appealing, user-friendly, and functional platform tailored to these needs.

42

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2.5.1. Tools for Web Application Development

1. Visual Studio Code (VS Code)

Visual Studio Code is a versatile and robust code editor developed by Microsoft. Built with the Electron
Framework, it is compatible with major operating systems, including Windows, macOS, and Linux.

 Versatility
VS Code supports a wide range of programming languages and technologies, making it a highly
adaptable tool for developing web applications. It allows seamless integration with popular
frameworks and libraries, enhancing the development experience.
 Ease of Use

With its intuitive interface and extensive library of extensions, VS Code accommodates developers
of all skill levels. Features like intelligent code completion, debugging support, code refactoring, and
embedded Git simplify complex tasks, enabling efficient project development.

2. XAMPP Server

XAMPP is a cross-platform web server solution that combines essential components like Apache HTTP
Server, MariaDB database, and interpreters for PHP and Perl.

 Comprehensive Environment

XAMPP provides a local server environment for developing and testing web applications. It supports
seamless execution of server-side scripts, ensuring smooth integration of backend functionalities like
data storage and retrieval.

 Open Source and Accessible

As a free, open-source solution, XAMPP allows developers to set up a fully functional web server
without additional costs. Its user-friendly interface makes configuration and management
straightforward.

1.2.5.3. Justification for a Web Application

A web application is a practical choice for Malcolm’s photography business due to its flexibility and
accessibility -

 Showcasing Photography Skills

A visually engaging interface allows Malcolm to display his photography portfolio effectively, attracting
potential clients and showcasing his talent.

43

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

 Customer Inquiries

By incorporating an inquiry form, the web application facilitates direct communication between Malcolm
and prospective clients, streamlining the hiring process.

 Remote Accessibility

The web-based nature of the application enables users to access the platform from any device or location,
ensuring maximum reach and convenience.

 Interactive Features

Leveraging server-side scripts like PHP and client-side technologies such as JavaScript enhances user
experience through dynamic content, responsive design, and smooth interactions

1.2.6. Server-Side and Client-Side Scripts

To build a dynamic and secure web application for Malcolm Lismore's photography business, a
combination of server-side and client-side scripting languages has been utilized. Server-side scripts like
PHP play a crucial role in processing and securely managing client inquiries, ensuring sensitive customer
data is effectively stored and accessed.

On the other hand, client-side scripts such as JavaScript, HTML, and CSS enhance the user interface.
JavaScript adds dynamic and interactive features, creating a more engaging experience for visitors. HTML
provides the structural backbone for the portfolio, organizing content and ensuring accessibility. CSS
complements HTML by offering consistent styling and visual appeal, which is essential for a professional-
looking website. This balanced approach ensures functionality while delivering an intuitive and visually
engaging experience.

1.2.7. Database Integration

Incorporating a robust database management tool, such as phpMyAdmin, is essential for handling client
data. This tool enables the secure storage and organization of client inquiries, including contact details and
service requests. A well-structured database facilitates seamless communication between Malcolm and his
potential clients, ensuring inquiries are managed efficiently and responses are prompt. This not only
enhances customer satisfaction but also contributes to the website's overall functionality and reliability.

44

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2.8. Justification for the Chosen Technologies

The technologies selected for the web application—PHP, JavaScript, HTML, and CSS—are ideal for
meeting the project requirements. PHP, as a server-side scripting language, excels in data processing, form
handling, and database integration, making it indispensable for managing client inquiries.

JavaScript enhances interactivity by enabling dynamic features, ensuring a responsive and user-friendly
interface. HTML serves as the structural foundation of the website, providing semantic markup that
improves both accessibility and search engine optimization (SEO). Meanwhile, CSS ensures consistent
styling and layout control, delivering a visually appealing design that aligns with the professional nature of
the photography business.

1.2.9. Tools for Development

The development process relies on Visual Studio Code (VS Code) and phpMyAdmin, two highly effective
tools for web application development. VS Code is a versatile and user-friendly code editor equipped with
features like debugging, syntax highlighting, and a vast library of extensions, making it an excellent choice
for efficient coding.

PhpMyAdmin simplifies database management with its intuitive interface, enabling the secure and
organized handling of client information. Together, these tools ensure a smooth development process and a
robust, functional application.

Figure 11 - Development tools

45

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

1.2.10. Design and Development of a Branded Multipage Website

This document outlines the design, implementation, and evaluation process for creating a branded
multipage website. The website was developed in alignment with established principles, standards, and
guidelines to ensure professionalism, usability, and brand consistency.

1.2.10.1. Implementation of a Branded Multipage Website

1. Website Structure and Navigation

The website is organized into multiple pages, each serving a specific purpose -

 Homepage - Serves as the landing page showcasing Malcolm Lismore’s photography services and brand
identity.
 Portfolio Page - Displays categorized photography work in a gallery format.
 About Page - Provides information about Malcolm's background, achievements, and artistic philosophy.
 Services Page - Lists photography services offered, with pricing and package details.
 Contact Page - Includes an inquiry form, social media links, and contact information.

A multipage structure was chosen to distribute content effectively and enhance user experience. By
segmenting information into dedicated pages, users can quickly locate relevant content without feeling
overwhelmed. Clear navigation bars and a breadcrumb trail were implemented to simplify user journeys.

2. Branding and Design Consistency

The website adheres to a cohesive branding strategy -

Color Scheme - A neutral palette with accent colors inspired by Malcolm’s photography style ensures
visual harmony.

Typography - Elegant and legible fonts reinforce professionalism.

Imagery - High-resolution photos curated by Malcolm highlight his expertise and attract potential clients.

Branding consistency was prioritized to establish a professional image and enhance recall value. The
selected colors and fonts align with industry standards, while high-quality visuals improve the aesthetic
appeal and credibility of the site.

3. Technology Stack

The following tools and technologies were employed,

46

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

 Frontend Development - HTML, CSS, and JavaScript were used for creating responsive,
interactive pages.
 Backend Development - PHP handled form submissions and data processing.
 Database Management - phpMyAdmin and MySQL were used to securely store and retrieve
client inquiry data.
 Development Environment - Visual Studio Code was selected for its versatile features and
efficient workflow.

This technology stack was chosen for its compatibility and scalability. HTML and CSS ensure accessibility
and responsiveness, JavaScript enhances interactivity, and PHP with MySQL manages data securely.

1.2.10.2. Evaluation of the Design and Development Process

1. Alignment with the Design Document

The website’s development strictly adhered to the design document. Pages were structured based on the
initial wireframes and mockups. Navigation flow, branding elements, and functionality were implemented
as planned, ensuring alignment with user needs and business goals.

2. Technical Challenges Faced

Several challenges arose during development -

Cross-Browser Compatibility - Minor layout discrepancies were observed across browsers. These were
resolved by testing and applying specific CSS resets.

Responsive Design - Ensuring seamless performance on mobile devices required additional media queries
and adjustments.

Form Validation - Implementing secure and user-friendly form validation using JavaScript and PHP
posed initial challenges but was addressed through iterative testing.

3. Design Improvements

Based on testing and feedback, minor adjustments were made,

 Enhanced button contrast for better accessibility.

 Optimized image sizes to improve load times without compromising quality.
 Simplified the navigation bar for a cleaner interface.

47

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

One notable technical challenge encountered during the development of Malcolm Lismore's photography
webpage was ensuring cross-browser compatibility. While the website functioned well on modern
browsers like Google Chrome, inconsistencies in layout and styling were observed on older versions of
Internet Explorer and Firefox. These issues stemmed from varying levels of support for advanced CSS
features such as flexbox and grid layouts. To address this, CSS resets and vendor-specific prefixes were
implemented to normalize styling across browsers. Additionally, thorough testing was conducted on
multiple platforms, and alternative styling solutions were incorporated for unsupported features, ensuring a
consistent and professional user experience regardless of the browser used.

The branded multipage website successfully meets the objectives outlined in the design document. It
effectively showcases Malcolm Lismore’s photography work, facilitates customer engagement, and
establishes a strong online presence.

The process adhered to industry standards, ensuring a user-friendly and professional design. Although
minor technical challenges were encountered, they were resolved effectively, demonstrating adaptability
and commitment to quality. This project underscores the importance of a structured design document,
robust tools, and iterative refinement in delivering a high-quality web application.

Figure 12 –Technical Challenges

48

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

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

websites
2.1. Define the relationships between front-end and back-end website technologies
and explain how the front-end and the back-end relate to presentation and
application layers.

2.1.1. Understanding Front-End and Back-End Relationships in Web Development

2.1.1.1 Understanding OSI Layers

The Open Systems Interconnection (OSI) model provides a conceptual framework that defines how data
is transmitted and received across a network. It consists of seven layers, each with distinct functions that
ensure seamless communication between systems. The OSI model is essential for understanding the
relationship between the front-end and back-end technologies and their interaction within the presentation
and application layers.

Overview of the OSI Model

1. Physical Layer

Handles the physical transmission of data over network hardware, such as cables and switches.

2. Data Link Layer

Manages error detection, correction, and data framing for reliable transmission between adjacent nodes.

3. Network Layer

Routes data packets between devices using IP addresses and ensures delivery across different networks.

4. Transport Layer

Ensures reliable data transfer through segmentation, error correction, and flow control (e.g., TCP/UDP).

5. Session Layer

Establishes, manages, and terminates sessions between applications, enabling structured communication.

6. Presentation Layer

Responsible for data translation, encryption, and compression to ensure interoperability between devices.

49

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

7. Application Layer

Provides network services to applications, enabling user interaction with networked systems.

2.1.1.2. Relation of OSI Layers to Front-End and Back-End

 Presentation Layer (OSI Layer 6)

The front-end technologies align closely with this layer, as it focuses on data formatting and presentation
to the user. Front-end elements such as HTML, CSS, and JavaScript ensure that content is displayed in a
user-friendly and aesthetically pleasing manner.

 Application Layer (OSI Layer 7)

The back-end technologies correspond to this layer, where high-level application services like database
operations, authentication, and server-side logic are implemented. Technologies like PHP, Python, and
Node.js enable dynamic data processing and interaction.

2.1.1.3. How the OSI Model Informs Web Development

The OSI model helps in understanding the distinction and communication between the front-end and back-
end layers -

 Front-End Interaction

Works primarily at the presentation layer, ensuring data is rendered correctly for user consumption.

 Back-End Processes

Operates at the application layer, handling data storage, logic, and server-side communication.

Together, these layers ensure a smooth exchange of data between the client (user-facing front-end) and
server (functional back-end), creating a robust and dynamic web application

In web development, the front-end and back-end technologies work collaboratively to ensure seamless
interaction and functionality in web applications. These technologies correspond to the presentation layer
and the application layer, respectively, and each plays a distinct role in delivering an optimal user
experience and robust data management.

Front-End - Presentation Layer

The front-end, often referred to as client-side development, is responsible for creating the visual and
interactive elements that users engage with. It translates the design into a functional and visually appealing

50

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

interface using technologies such as HTML, CSS, and JavaScript. This aligns closely with the
presentation layer, which serves as the primary entry point for users.

Capabilities of Front-End Development

 User Interface (UI) Creation

Developers design intuitive and aesthetically pleasing user interfaces that make navigation and interaction
seamless.

 Responsive Design

Front-end technologies ensure that web pages adapt to different screen sizes and devices, providing
consistent usability across platforms.

 Performance Optimization

Techniques such as image compression and code minification reduce loading times, enhancing page speed
and user experience.

 Accessibility

Adhering to accessibility standards ensures that web content is usable for all individuals, including those
with disabilities.

Back-End - Application Layer

The back-end, also known as server-side development, powers the underlying functionality of web
applications. It handles the logic, database interactions, and server processes that drive the website. This is
closely related to the application layer, where data processing and business logic occur. Technologies like
PHP, Python, Node.js, and Ruby are commonly employed here.

Capabilities of Back-End Development

 Data Management

Back-end systems manage the storage, retrieval, and processing of data using databases like MySQL,
MongoDB, or PostgreSQL.

 Server-Side Logic

51

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Complex operations, such as authentication, file processing, and calculations, are handled securely on the
server.

 API Integration

Back-end technologies enable the integration of third-party services and APIs, facilitating additional
features like payment gateways or social media feeds.

 Security

Back-end frameworks implement robust security measures, including encryption and user authentication,
to safeguard data.

Relationship Between Front-End and Back-End

The relationship between front-end and back-end technologies is one of interdependence, with each
fulfilling unique roles while maintaining seamless communication,

 Data Flow

The front-end sends user inputs (e.g., form submissions) to the back-end, which processes the information
and responds with the appropriate output (e.g., confirmation messages or retrieved data).

 API Communication

APIs bridge the gap between the two layers, enabling the front-end to request and display data processed
by the back-end.

 Synchronization

The front-end ensures that the data processed by the back-end is presented effectively, ensuring users see
real-time updates and receive feedback.

The integration of the presentation and application layers ensures a coherent user experience. While the
front-end emphasizes design and usability, the back-end focuses on functionality and reliability.
Together, these technologies deliver an engaging and efficient web application, capable of meeting user
expectations in a dynamic digital landscape.

52

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 13 - OSI Model

2.2 Critically compare the different between online website creation tools and custom-
built sites. Consider Followings - design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI). Compare and contrast the tools and
techniques available to design and develop a custom-built web application for Malcome
and Lismore. Select themost suitable tools, techniques and justify your selection with
valid reasons.

2.2.1. Online Website Creation Tools

Online website creation tools, often referred to as website builders, are web-based platforms or software
applications that allow individuals and businesses to create websites without the need for in-depth coding
or web development skills. These tools are designed to simplify the process of website creation and make it
accessible to a broader audience.

2.2.2. Custom-Built Sites

Custom-built websites, also known as bespoke or tailor-made websites, are websites that are designed and
developed from the ground up to meet the specific and unique needs of a particular individual, business,

53

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

organization, or project. These websites are not based on pre-made templates or generic designs but are
instead crafted to cater to the precise requirements, goals, and branding of the client.

2.2.3. Comparison

These two approaches differ according to several factors, including design flexibility, performance,
functionality, User Experience (UX), and User Interface (UI).

 Design Flexibility

Online Website Creation Tools - Offer pre-designed templates with limited customization. Ideal for users
with minimal design expertise, but constrained by the structure and options provided by the platform.
Customization of advanced visual and functional aspects may not be possible.

Custom-Built Sites - Provide unparalleled flexibility in design. Developers can create unique layouts,
animations, and features that align precisely with the brand’s identity. Allow integration of bespoke
elements, offering complete control over aesthetics and functionality.

 Performance

Online Website Creation Tools - May experience slower performance due to shared hosting and bloated
code from templates. Limited optimization options can hinder site speed, especially with complex features.

Custom-Built Sites - Tailored code ensures efficient performance. Developers can optimize loading speeds,
database queries, and server interactions to meet specific needs.

 Functionality

Online Website Creation Tools - Include pre-built functionalities such as contact forms, image sliders, and
e-commerce plugins. Restricted to the features offered by the platform, limiting scalability for advanced
requirements.

Custom-Built Sites - Allow the integration of unique and advanced functionalities. Can accommodate
complex features such as advanced search capabilities, custom workflows, and unique user interactions.

 User Experience (UX)

Online Website Creation Tools - Provide a consistent but generic UX due to standardized templates.
Limited ability to create personalized experiences tailored to specific audiences.

Custom-Built Sites - Enable the development of a fully customized UX, considering target audience
preferences and user behaviors. Developers can implement personalized navigation flows and user-specific
interactions.

54

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

 User Interface (UI)

Online Website Creation Tools - Offer polished but template-driven UI designs. Lack the ability to fully
customize components for unique branding.

Custom-Built Sites - Allow for entirely unique UI designs, enabling a brand to stand out with bespoke
visual elements. UI can be crafted to support specific UX goals and branding guidelines.

2.2.4. Tools and Techniques for Malcolm Lismore's Photography Website

Custom-Built Approach

Tools

 Visual Studio Code (VS Code) - For coding and debugging.

 XAMPP - For local server setup and PHP development.
 phpMyAdmin - For database management.

Techniques

 Front-end - Use HTML, CSS, and JavaScript for crafting an engaging UI and responsive design.
 Back-end - Use PHP and MySQL for server-side logic and database management.

Online Website Creation Tool

Tools

 Wix or Squarespace - Drag-and-drop platforms for designing and hosting.

 Integrated plugins for galleries and contact forms.

Techniques

 Utilize pre-designed templates for the photography portfolio.

 Employ basic SEO tools provided by the platform.

Most Suitable Choice and Justification

For Malcolm Lismore’s photography business, a custom-built website is the most suitable option.

The need for a visually distinctive portfolio and tailored inquiry forms cannot be fully met by online tools.
A custom-built site offers flexibility to highlight Malcolm’s unique style, integrate personalized branding,
and optimize performance for a seamless experience. Advanced features like a dynamic gallery or tailored
booking system can be implemented with ease.

55

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

By leveraging tools like VS Code, PHP, and MySQL, the development team can ensure that the website
meets Malcolm’s specific business objectives, providing both functional and aesthetic excellence.
Table 1 Comparison of online web creation tools and custom built creation

Aspect Online Website Creation Tools Custom-Built Websites

Design Offers templates to kickstart the design Provides unlimited design flexibility tailored
Flexibility process. to brand-specific needs.

Allows customization of colors, fonts, and No restrictions on design elements; can

layouts within template limits. create fully unique designs.

Drag-and-drop interfaces for easy Requires more time and budget for tailored
arangement. designs.

Performance Often optimized for general use but can Optimized for specific requirements,
become slow due to unnecessary features in ensuring faster load times and efficient
templates. performance.

Limited control over server and hosting Full control over server configurations and
environments. performance tuning.

Functionality Built-in features for e-commerce, contact Custom functionality can be developed to
forms, and social media integration. meet specific business needs.

Add-ons and plugins available but may Advanced features can be designed securely,
introduce vulnerabilities. with full control over integrations.

User Experience Templates are pre-tested for usability, UX can be fully customized to align with the
(UX) offering a decent user experience for general target audience and business objectives.
audiences.

Limited ability to tailor the flow or Allows for unique and intuitive user journeys
interactions beyond the template structure. based on specific goals.

User Interface Pre-designed templates provide quick, UI is designed from scratch, ensuring brand
(UI) aesthetically pleasing solutions. consistency and alignment with business
identity.

56

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Limited flexibility in achieving truly unique Allows for innovative, modern, and user-
or complex designs. specific designs tailored to the client’s vision.

Can lack cohesiveness if templates are over- Ensures a cohesive and professional UI with
customized or plugins conflict. full creative control.

Table 2 - Pros and cons comparison

Aspect Online Website Creation Tools Custom-Built Websites

Design Pros - Pros -
Flexibility -Offers a range of templates to start designing Unlimited flexibility to create unique, brand-
quickly. specific designs.
Allows customization of colors, fonts, and No constraints by templates, enabling bespoke
layouts. design tailored to specific objectives.
Drag-and-drop interfaces simplify page Professional designers can align the design
arrangement. precisely with business goals.
Cons - Cons -
- Limited customization beyond template Higher budget and longer time required for
capabilities. development.
- Advanced or highly unique designs may not Requires coding expertise for design updates or
be achievable without coding. changes.
Performance Pros - Pros -
Built-in optimization for general use, ensuring Full control over server and hosting
decent performance for small-scale projects. configurations for optimized performance.
Cons - Cons -
Performance may degrade with unnecessary Requires skilled developers to implement and
template features. maintain performance optimizations.
Limited ability to fine-tune server settings.
Functionality Pros - Pros -
Comes with built-in features for common Allows development of advanced, unique
requirements like contact forms, e-commerce, functionalities tailored to specific business
and blogs. needs.
Add-ons and plugins extend functionality Provides full control over feature design,
without much effort. ensuring seamless integration.
Cons - Cons -
Add-ons and plugins can sometimes introduce Custom functionality development may take
security vulnerabilities. more time and resources.
Limited ability to implement highly complex or
unique features.
User Experience Pros - Pros -
(UX) Templates are pre-tested for usability, offering Fully customizable UX tailored to align with
a good starting point for general audiences. the target audience and specific business
objectives.
Quick and easy to implement basic user- - Enables design of intuitive user flows based
friendly features. on specific goals.
Cons - Cons -

57

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Limited ability to tailor complex or specific UX design may require user testing and
user interactions. iterations, increasing development time.
User Interface Pros - Pros -
(UI) Pre-designed templates provide aesthetically Allows for innovative, modern, and user-
pleasing solutions quickly. specific designs aligned with the client’s
vision.
Easy to implement basic customization for Ensures a professional and cohesive UI for
consistency. branding consistency.
Cons - Cons -
Limited flexibility for achieving truly unique Custom designs require professional skills and
designs. are time-intensive.
Templates and plugins may result in
inconsistent designs if over-customized.

2.2.5. Analysis of Front-End Technologies

HTML, CSS, and JavaScript form the foundation for the front-end development of any custom-built
website. HTML provides the structural framework, ensuring semantic markup for accessibility and search
engine optimization (SEO). CSS allows developers to control the styling and layout with precision,
enabling the creation of visually appealing and responsive designs. Meanwhile, JavaScript enhances
interactivity by enabling dynamic features such as image sliders and form validations. Together, these tools
ensure an engaging and user-friendly interface. The ability to customize these technologies gives
developers full control over the presentation layer, ensuring alignment with specific branding
requirements.

2.2.5.1. Evaluation of Back-End Technologies

PHP is a robust server-side scripting language that facilitates seamless data processing and integration with
databases. It is widely used for handling form submissions, managing user sessions, and interacting with
backend databases like MySQL. When combined with tools such as phpMyAdmin, PHP enables secure
and efficient database management, making it ideal for custom-built websites requiring dynamic content,
like Malcolm Lismore's photography portfolio. The flexibility of PHP allows developers to implement
advanced features tailored to unique business needs, ensuring that backend processes align with front-end
user interactions.

2.2.5.2. Integrated Development and Management Tools

Visual Studio Code (VS Code) is a highly versatile and user-friendly development environment, making
it an excellent choice for coding custom-built websites. Its support for multiple programming languages,
intelligent code completion, and extensive library of extensions streamline the development process.

58

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Additionally, phpMyAdmin simplifies database management, allowing developers to create, update, and
query databases with ease. The integration of these tools ensures a smooth workflow, enabling developers
to efficiently manage both the front-end and back-end aspects of the website.

2.2.5.3. Justification for Selected Tools and Techniques

The decision to use a combination of PHP, JavaScript, HTML, and CSS, along with tools like VS Code
and phpMyAdmin, is well-justified. These technologies provide the flexibility, scalability, and
performance needed for a custom-built website tailored to Malcolm's requirements. PHP and
phpMyAdmin ensure reliable backend functionality, while HTML, CSS, and JavaScript enable a visually
appealing and interactive user experience. VS Code enhances productivity with its advanced features,
making it a strategic choice for development. Collectively, these tools and techniques position Malcolm’s
website as a competitive and engaging platform in the digital space.

Figure 14 - Web Development Tools

Task 3 - Utilize website technologies, tools and techniques with good design
principles to create a multipage website (LO3)

59

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

3.1 Design a suitable web application solution for the given scenario. Provide
evidences of the design,multipage website supported with fidelity wireframes and a
full set of client and user requirements. Useyour design document with appropriate
principles, standards and guidelines to produce a branded,multipage website
supported with realistic content

3.1.1. Design Document for the Website

To design a suitable web application solution for Malcolm Lismore's photography business, we start with a
clear design document. The document outlines the overall vision for the website, including layout and
design principles, client requirements, and technical specifications. A multipage website will be structured
to provide different sections such as an About page, a Portfolio, a Gallery, a Contact Form, and a
Testimonials page. These sections will be aligned with Malcolm's business goals of showcasing his
photography skills, facilitating client inquiries, and providing a user-friendly experience.

The design will follow industry-standard principles, ensuring that the website is responsive, accessible, and
visually appealing. In this document, we will integrate wireframes to visualize the website’s layout and
user journey, helping to communicate the design’s structure to both developers and clients.

3.1.2. Client and User Requirements

The client requirements for the website must be carefully defined to ensure that the site meets both
Malcolm’s expectations and the end users’ needs. Below are the key requirements,

1. Branding

The website should reflect Malcolm Lismore’s personal brand and photography style. This includes
incorporating his logo, color scheme, and overall aesthetic into the design.

2. Functionality

A portfolio gallery to showcase his photography.

An easy-to-use inquiry form for potential clients to contact Malcolm.

Integration of a blog or news section for updates and promotions.

Mobile responsiveness to ensure the site works well on various devices.

3. User Experience (UX)

60

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Simple, intuitive navigation with a clear structure (e.g., Home, About, Portfolio, Contact).

Quick load times and performance optimization for a smooth browsing experience.

Aesthetic visual appeal to engage visitors.

4. Accessibility

The website should comply with accessibility standards, making it usable for all visitors, including those
with disabilities.

3.1.3. Medium Fidelity Wireframes

Wireframes are visual representations of the website layout and structure. Medium fidelity wireframes
focus on the essential elements like header, footer, main content, and navigation without focusing too
heavily on final design details. These wireframes allow us to organize content and plan out the user flow
on each page.

For example,

 Homepage
 Header with navigation links (Home, Portfolio, Contact, About).
 A hero image showcasing the best of Malcolm’s photography work.
 Quick links to sections like the portfolio gallery, blog, and client testimonials.
 Portfolio Page
 Grid layout of images with filter options (e.g., nature photography, portraits, etc.).
 Detailed view for each image with descriptions and titles.
 Contact Page
 Simple contact form with fields for name, email, message, and a submit button.
 Google Maps integration to show location.

These wireframes help map out where each element will be placed, ensuring an efficient design and
development process.

3.1.4. Malcolm Lismore's Photography Website - Wireframes

To design a suitable web application solution for Malcolm Lismore's photography business, we start by
creating wireframes that outline the website's layout and functionality. The wireframes help establish the
structure of each page, ensuring a user-friendly experience. The website will be multipage, with sections

61

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

such as the Homepage, Portfolio, Gallery, About, Contact, Testimonials, Packages, and Login pages.
Below is an overview of the wireframes for each page,

1. Homepage Wireframe
 Header Section -Navigation links (Home, Portfolio, About, Contact, Packages, Login).
 Hero Image - A large image showcasing Malcolm’s best work.
 Quick Links - Direct links to the Portfolio, Contact, Packages, and Login pages.
 Footer Section - Links to privacy policy, terms of service, and social media icons.

Figure 15 - Home Page Wireframe

62

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 16 - Home Page Design

2. Portfolio Page Wireframe

 Grid Layout - Photographs arranged in a clean, grid-style layout.
 Filters/Sorting Options - Filters based on categories (e.g., weddings, portraits, events).
 Detailed View - Clicking on any image opens a larger view or modal with additional details.

Figure 17 – Portfolio Wireframe

63

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 18 - Portfolio Wireframe

Figure 19 - Portfolio Design

64

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 20 - Portfolio Design

Figure 21 - Portfolio design

3. Contact Page Wireframe

 Contact Form - Fields for Name, Email, Message, and a Submit button.
 Location Map - Google Maps integration showing the studio location.
 Call-to-Action (CTA) - CTA button to encourage inquiries or bookings.

65

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 22 - Contact Page Wireframe

Figure 23 - Contact page Design

4. About Page Wireframe

 About Malcolm Section - A brief bio of Malcolm, his photography experience, and artistic style.
 Testimonials - Display of client reviews and testimonials with images.
 Call-to-Action - Links to Portfolio or Contact form.

66

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 24 - About Page wireframe

Figure 25 - About Page Wireframe

67

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 26 - About Page Design

Figure 27 - About Page Design

5. Packages Page Wireframe

 Package Overview - A list of photography packages (e.g., Wedding, Portrait, Event).
 Details - Each package includes price, description, and the services provided (e.g., number of photos,
hours of coverage).
 CTA Button - Each package includes a "Book Now" button that links to the Contact page.

68

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 28 - Packages Page Wireframe

Figure 29 - Packages page design

6. User Login Page Wireframe

 Login Form - Fields for entering username/email and password.
 Forgot Password Link - Option to reset the password.
 Login Button - To submit login credentials.
 Call-to-Action - A "Sign Up" link for new users to create an account.

69

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 30 - User Login Page Wireframe

Figure 31 - User login Page Design

7. Admin Login Page Wireframe

 Admin Login Form - Fields for Admin username/email and password.
 Forgot Password Link - Allows admins to recover access to their account.
 Login Button - To submit credentials and access the admin dashboard.

70

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 32 - Admin Login Page Wireframe

Figure 33 - Admin Login Design

8. Customer Feedback Page Wireframe

71

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 34 - Customer Feedback Page Wireframe

Figure 35 - Customer Feedback Design

9. Frequently Asked Questions Page Wireframe

72

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 36 - Frequently asked Questions page wireframe

Figure 37 - Frequently Asked Questions Page Design

73

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Development Standards, Guidelines, and Realistic Content

The development of the website must follow modern web design standards and guidelines to ensure it
meets performance, functionality, and accessibility requirements. This includes -

 HTML/CSS - These will be used to create the structure and styling of the pages. Proper semantic
HTML will be employed for SEO and accessibility.
 Responsive Design - The website will be designed to be mobile-friendly, using media queries to
adapt the layout to different screen sizes.
 JavaScript - This will be used to enhance user interaction, such as enabling a lightbox for viewing
images in the gallery or adding form validation.
 Performance Optimization - Techniques like image compression and lazy loading will be
implemented to ensure fast page load times.
 Realistic Content - The content will be tailored to reflect the business goals. This includes -
 Photography Gallery - Showcasing Malcolm’s best works.
 About Section - Detailing Malcolm’s background, style, and services.
 Contact Information - Clear ways for potential clients to get in touch.

3.2 Implementation of the Designed System

This section provides an overview of the implementation process for Malcolm Lismore's photography
website. The system was developed using PHP, JavaScript, and MySQL, supported by a well-structured
database design and sample data. Screenshots of the important code lines, user interfaces, and a normalized
database design are presented to showcase the development process.

Technologies and Tools Used

The development process utilized the following technologies -

 Frontend - HTML, CSS, and JavaScript were employed to design the user interface and enable
interactivity.
 Backend - PHP was used for server-side scripting to handle data processing and interactions with the
database.
 Database - MySQL was implemented to manage data storage for users, inquiries, and gallery
information.
 Development Tools - Visual Studio Code was selected as the primary IDE for coding due to its
flexibility and user-friendly interface. phpMyAdmin was used for database design and management.

These tools were chosen for their compatibility, reliability, and ability to meet the project's functional
requirements effectively.

74

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Database Design and Normalization

The database design followed strict normalization principles to achieve an efficient and scalable structure.
It was normalized to 3NF (Third Normal Form) to minimize redundancy and enhance data integrity.

Tables Designed

 Users Table - Stores user credentials with fields such as user_id (Primary Key), username,
password, and email.
 Inquiries Table - Maintains inquiry details with fields like inquiry_id (Primary Key), user_id
(Foreign Key), name, email, message, and date.
 Gallery Table - Manages photography assets with fields like image_id (Primary Key), title,
description, and file_path.
 ER Diagram - The relationships between users, inquiries, and gallery images were carefully
mapped to ensure smooth data retrieval and updates.

Implementation Process

Homepage Implementation

The homepage was developed as the entry point for users, showcasing Malcolm’s portfolio and services.
Dynamic loading of featured gallery images was implemented using PHP, enhancing the user experience.

User Login System

A secure login system was developed using PHP and MySQL. This involved creating login forms,
validating user credentials, and establishing secure sessions. Techniques like password hashing and
prepared statements were employed to ensure data security.

Photography Gallery

The gallery was designed to display Malcolm’s work in an engaging manner. A lazy loading mechanism
was implemented using JavaScript to optimize performance and maintain low loading times even with
large image collections.

Inquiry System

The inquiry system was developed with an HTML form for user submissions. JavaScript handled client-
side validation, while PHP ensured secure processing of the data. Inquiries were stored in the database and
made accessible to the admin via a dashboard.

75

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

HTML CODES SCREENSHOTS

Figure 38 - Index.html

Figure 39 - About.html

76

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 40 - Pricing .html

Figure 41 - Upload Reciept. Html

77

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 42 - Admin Login.html

Figure 43 - Gallery.html

78

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 44 - Payment.html

Figure 45 - enquiry.html

79

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

PHP CODES SCREENSHOTS

Figure 46 - Create admin.php

Figure 47 - Contact.php

80

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 48 - upload.php

Figure 49 - signin.php

81

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 50 - subscriber.php

Figure 51 - adminlogin.php

82

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 52 - Signup.php

DATABASE TABLES (PHP My Admin)

Figure 53 - Landscape images Table

83

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 54 - Receipts Table

Figure 55 - Contacts table

84

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 56 - users table

Figure 57 - admins table

85

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 58 - subscribers table

Figure 59 - coastal images table

86

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Figure 60 - uploads table

Task 04 - Create and use a Test Plan to review the performance and design
of a multipage website
4.1. Analyze the Quality Assurance (QA) process and review how it was implemented
during your design and development stages. 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).

4.1.1. Quality Assurance (QA) Process Analysis

The Quality Assurance (QA) process ensures that a product adheres to predetermined standards and meets
user expectations. For Malcolm Lismore's photography website, the QA process focused on identifying
design issues and development errors while improving the User Interface (UI) and enhancing the User
Experience (UX).

Implementation of QA During Design and Development

 Planning Stage

A Test Plan was created, identifying critical performance areas such as functionality, responsiveness,
accessibility, security, and scalability.

87

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Tools like browsers and mobile devices were selected to test cross-platform compatibility and responsive
design.

 Design Stage

Wireframes and mockups were reviewed for visual consistency, ease of navigation, and alignment with
Malcolm’s branding.

Feedback was gathered from stakeholders to ensure design accuracy and user-friendliness.

 Development Stage

Code reviews and unit testing were conducted to ensure error-free implementation of features like the
gallery, inquiry forms, and login systems.

Emphasis was placed on optimizing image sizes and scripts for faster load times.

Security testing was performed to protect user data and prevent vulnerabilities in the admin and user login
systems.

 Testing Stage
 Functionality Testing - Each website feature, such as the gallery and inquiry form, was tested to
verify proper operation.
 Performance Testing - Load times were measured to ensure the website remained responsive even
with high-resolution images.
 User Testing - Selected users provided feedback on the website’s interface and usability, leading to
refinements in the navigation flow and page layout.
 Regression Testing - Post-fixes, previously tested functionalities were rechecked to avoid
introducing new errors.

Test Plan for Key Performance Areas

Performance Objective Test Method Outcome

Area

Functionality Verify proper operation of Manual testing of forms and All functions work as
features. gallery. intended.

Responsiveness Ensure compatibility across Test on mobile, tablet, and Pages adapt seamlessly.
devices. desktop.

88

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Accessibility Check inclusivity for all WCAG 2.1 compliance Basic accessibility
users. testing. ensured.

Security Protect user and admin data. Penetration testing for login Vulnerabilities addressed.
forms.

Performance Optimize load times and Use tools like GTmetrix or Load times under 2
scalability. Lighthouse. seconds.

QA Process Outcomes

 Improved User Experience

Testing revealed minor navigation issues, which were corrected to ensure a seamless user journey.

 Enhanced Performance

Image compression and optimized coding significantly reduced page load times, improving the overall
browsing experience.

 Secured Functionality

Testing login systems highlighted potential vulnerabilities, prompting additional security measures, such as
implementing CAPTCHA and secure database queries.

The QA process was effectively implemented during the design and development stages of the website.
Regular reviews and feedback loops ensured adherence to the client’s requirements and objectives. The
structured Test Plan allowed for systematic validation, leading to the development of a reliable, user-
friendly, and scalable website for Malcolm Lismore's photography business.

The process successfully identified and mitigated design and development issues, resulting in a polished
product that aligns with industry standards and user expectations.

89

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

4.2 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. Prepare a user
documentation to properly guide the users of the implemented system.

The multipage website developed for Malcolm Lismore’s photography business has been evaluated
thoroughly using a detailed test plan. This evaluation reflects the results of the test plan, identifies areas of
success, and provides recommendations for improvement. Additionally, a user documentation guide has
been created to support users in navigating and utilizing the system effectively.

4.2.1. Summary of Key Findings

The website excels in usability and user experience (UX), as confirmed by usability testing. Users found
the site intuitive to navigate, with clear content presentation and structured access to key sections such as
the gallery and pricing pages. The immersive experience provided by the photography gallery effectively
showcases Malcolm’s talents, ensuring an engaging visit for users.

Content on the website is well-organized and informative. The "About Malcolm" page provides a
compelling narrative of Malcolm’s journey and passion for photography, while the pricing page clearly
outlines service costs, assisting potential clients in making informed decisions. The gallery stands out for
its visual appeal, offering high-quality images that reflect Malcolm’s expertise in photography.

From a technical perspective, the website demonstrates scalability, successfully accommodating the initial
set of photographs while being prepared for future additions. Performance testing revealed responsive load
times, even when handling large image files, ensuring a smooth and uninterrupted user experience. Inquiry
management is robust, with the HTML form effectively capturing customer details like name, contact
information, and event specifics. Secure data storage mechanisms ensure that inquiries are efficiently
managed without compromising customer privacy.

The website also showcased technical stability during testing, with no critical errors or broken links
identified. All functional elements, including navigation menus, contact forms, and galleries, operated
seamlessly, reflecting a strong alignment with the design document and project requirements.

90

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

4.2.2. Areas of Success

The website’s success can be attributed to several factors. Firstly, its user-centric design ensures ease of
navigation and accessibility, enhancing the overall user experience. Secondly, its visual appeal and
professional presentation of content, especially through the photography gallery, create a memorable
impression of Malcolm’s work.

Another key success is the technical reliability of the system. The inquiry form and database integration
function smoothly, facilitating effective communication between Malcolm and his clients. Lastly, the
scalability of the website ensures it remains flexible and adaptable for future updates and expansions,
which is crucial for maintaining its relevance over time.

4.2.3. Areas Requiring Improvement and Recommendations

Despite its strengths, the website has a few areas where improvements are necessary. The user experience
in the gallery, while engaging, can be further enhanced by adding features such as image captions, filters,
and a search function. These additions would allow users to navigate the collection more efficiently and
find specific content of interest.

Mobile responsiveness is another area requiring attention. Although the website is functional on smaller
screens, some minor inconsistencies in layout and content alignment were observed during testing.
Optimizing the design for mobile devices, including resizing images and adjusting font scaling, will
improve usability for mobile users.

Search engine optimization (SEO) is essential for increasing the website’s visibility on search engines.
Implementing strategies such as keyword optimization, meta descriptions, alt text for images, and
integrating analytics tools like Google Analytics can significantly enhance the website’s online presence
and organic traffic.

To maintain user engagement, the website should include mechanisms for regular updates. Adding new
photographs and refreshing content periodically will ensure returning visitors find value in revisiting the
site. Furthermore, strengthening security measures is crucial to protecting user data and safeguarding the
website against potential threats. Recommendations include implementing HTTPS encryption, regular
security audits, CAPTCHA for forms, and secure backup protocols.

91

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

4.2.4. User Documentation

A user guide has been developed to assist visitors and administrators in effectively using the website. Users
can access the gallery to explore Malcolm’s photography collection. If filters or search features are
implemented, they can use these tools to find specific images or categories.

To make inquiries, visitors can navigate to the “Contact” page, fill out the form with their event details,
and submit it. A confirmation message will be displayed, and responses can be expected within 24 to 48
hours. Pricing details are readily available on the “Pricing” page, providing clarity about the services
offered.

For administrators, a secure login page enables access to manage inquiries and upload new photographs.
Credentials should be kept confidential to maintain the security of the website.

4.2.5. Overall Evaluation

The multipage website for Malcolm Lismore has achieved considerable success, meeting its objectives and
providing a high-quality platform for showcasing Malcolm’s photography. Its strengths lie in its usability,
scalability, technical reliability, and visually engaging design, all of which align closely with the design
document and client expectations.

However, there are areas for improvement, including the gallery user experience, mobile responsiveness,
SEO strategies, and security measures. Addressing these areas will not only enhance the overall quality of
the website but also position it for long-term success. Regular updates and maintenance will ensure that the
website continues to promote Malcolm’s photography effectively, attract new clients, and provide an
excellent user experience.

92

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

4.2.6. Screenshots of Tests

Figure 61 - Light house Test

Figure 62 - LCP Time Test

93

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

Academic Experience
The process of designing and developing Malcolm Lismore's photography website provided an invaluable
academic and practical learning experience. This project allowed me to deepen my understanding of web
design principles, coding practices, and the integration of client requirements into a cohesive and
functional web application.

One of the most significant lessons learned was the importance of balancing user-centric design with
technical functionality. Creating a visually appealing website that also performs efficiently required careful
planning and execution. Additionally, working on this project emphasized the critical role of testing and
quality assurance in identifying and addressing design issues or coding errors early in the development
process.

This project also underscored the necessity of continuous learning and adaptability in the dynamic field of
web development. Keeping abreast of the latest design trends, best practices in mobile responsiveness, and
evolving security measures was vital to delivering a high-quality product that meets modern standards. It
reinforced the importance of lifelong learning to maintain relevance and ensure ongoing optimization of
digital solutions.

Developing Malcolm Lismore's photography website was a valuable academic experience that not only
enhanced my technical skills but also deepened my understanding of client collaboration, problem-solving,
and quality assurance in web development. It highlighted the need for perseverance, adaptability, and a
commitment to excellence in producing a product that meets both client and user expectations.

94

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

References
1. Cloudflare, n.d. What is DNS. [online] Available at: https://www.cloudflare.com/learning/dns/what-
is-dns/ [Accessed 19 January 2025].
2. Codecademy, n.d. What is a framework?. [online] Available at:
https://www.codecademy.com/resources/blog/what-is-a-framework/ [Accessed 19 January 2025].
3. edu.gcfglobal.org, n.d. Understanding operating systems. [online] Available at:
https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/ [Accessed 19
January 2025].
4. GeeksforGeeks, n.d. Frontend vs Backend. [online] Available at:
https://www.geeksforgeeks.org/frontend-vs-backend/ [Accessed 19 January 2025].
5. GeeksforGeeks, n.d. Types of Internet Protocols. [online] Available at:
https://www.geeksforgeeks.org/types-of-internet-protocols/ [Accessed 19 January 2025].
6. Hostinger, n.d. What is a web server?. [online] Available at:
https://www.hostinger.com/tutorials/what-is-a-web-server [Accessed 19 January 2025].
7. Mailchimp, n.d. Domain Name. [online] Available at: https://mailchimp.com/resources/domain-
name/ [Accessed 19 January 2025].
8. mtu.edu, n.d. Improve your Site's Ranking (SEO). [online] Available at:
https://www.mtu.edu/umc/services/websites/seo/ [Accessed 19 January 2025].
9. n6cloud.com, n.d. Server hardware. [online] Available at: https://www.n6cloud.com/blog/server-
hardware/ [Accessed 19 January 2025].
10. Search Engine Land, n.d. What is SEO. [online] Available at:
https://searchengineland.com/guide/what-is-seo [Accessed 19 January 2025].
11. TutorialsPoint, 2023. The impact of technical SEO on your website's performance. [online]
Available at: https://www.tutorialspoint.com/the-impact-of-technical-seo-on-your-website-s-
performance [Accessed 19 January 2025].
12. TutorialsPoint, n.d. Web server types. [online] Available at:
https://www.tutorialspoint.com/web_server_types.htm [Accessed 19 January 2025].
13. W3Schools, n.d. Learn PHP. [online] Available at: https://www.w3schools.com/php/ [Accessed 19
January 2025].
14. Mozilla, n.d. Introduction to HTML. [online] Available at:
https://developer.mozilla.org/en-US/docs/Web/HTML [Accessed 19 January 2025].
15. W3C, n.d. Web Content Accessibility Guidelines (WCAG) Overview. [online] Available at:
https://www.w3.org/WAI/standards-guidelines/wcag/ [Accessed 19 January 2025].

95

Downloaded by Hanna Davis (amnawaz28@gmail.com)

 lOMoARcPSD|51488188

16. Smashing Magazine, n.d. Best Practices in Web Design. [online] Available at:
https://www.smashingmagazine.com/category/web-design/ [Accessed 19 January 2025].
17. Google Developers, n.d. Using Lighthouse for Performance Testing. [online] Available at:
https://developers.google.com/web/tools/lighthouse/ [Accessed 19 January 2025].
18. TechTarget, n.d. What is UX design?. [online] Available at:
https://www.techtarget.com/whatis/definition/user-experience-UX-design [Accessed 19 January
2025].

96

Downloaded by Hanna Davis (amnawaz28@gmail.com)