0% found this document useful (0 votes)
194 views61 pages

Internal Verification for Web Design Assignment

Uploaded by

mohamedsameeth85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
194 views61 pages

Internal Verification for Web Design Assignment

Uploaded by

mohamedsameeth85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title BTEC Higher National Diploma in Computing


.Bala
Assessor Internal Verifier
Unit 13: Web Design and Development
Unit(s)
Malcolm Lismore Photographer’s Website
Assignment title
Lakshan
Student’sname
List which assessment Pass Merit Distinction
criteria the Assessor has
awarded.
INTERNAL VERIFIER CHECKLIST

Do the assessment criteria awarded match


those shown in the assignment brief? Y/N

Is the Pass/Merit/Distinction grade awarded


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

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

• Identifying
opportunities for improved
Y/N
performance?
Y/N
• Agreeing actions?
Does the assessment decision need
Y/N
amending?
Assessor signature Date

Internal Verifier signature Date


Programme Leader signature(if
Date
required)

1
Lakshan Web Design and Development
Confirm actioncompleted
Remedial actiontaken

Give details:

Assessor signature Date

Internal Verifier
Date
signature
Programme Leader
Date
signature(ifrequired)

2
Lakshan Web Design and Development
Higher Nationals - SummativeAssignmentFeedbackForm

Student Name/ID

UnitTitle Unit 10: Website Design & Development

Assignment Number 1 Assessor


Date Received 1st
Submission Date
submission
Date Received 2nd
Re-submission Date
submission

Assessor Feedback:

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

Pass, Merit & Distinction P1 P2 M1 M2 D1


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

Pass, Merit & Distinction P3 P4 M3 D1


Descripts

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

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

Grade: Assessor Signature: Date:

ResubmissionFeedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:


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

3
Lakshan Web Design and Development
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

4
Lakshan Web Design and Development
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.

Student’s Signature: Date:


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

5
Lakshan Web Design and Development
Assignment Brief
Student Name /ID Number

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.

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

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

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

6
Lakshan Web Design and Development
Assignment Brief and Guidance:

7
Lakshan Web Design and Development
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)

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

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

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.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 the most
suitable tools, techniques and justify your selection with valid reasons.

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

3.1 Design a suitable web application solution for the given scenario. 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

3.2 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 process against 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)

4.1 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).
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.
Note: User documentation should be simple and understandable by anyone. Use screenshots and provide stepwise guidance.

9
Lakshan Web Design and Development
Grading Rubric
Grading Criteria Achieved Feedback

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

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

P2 Explain the purpose and relationships between communication protocols,


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

M2 Review the influence of search engines on website performance and provide


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

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


website.

LO2 Categories website technologies, tools and


software used to develop websites

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


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

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

M3 Analyse a range of tools and techniques available to design and develop a


custom-built website.

1
Laksh Web Design and
LO3 Utilize website technologies, tools and techniques
with good design principles to create a multipage
website

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


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

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

LO4 Create and use a Test Plan to review the


performance and design of a multipage website

P7 Create a suitable Test Plan identifying key performance areas and


use it to review the functionality and performance of your website.
M5 Analyse the Quality Assurance (QA) process and review how it was
implemented during the multipage website design and development stages.
D3 Evaluate the results of the Test Plan and the overall success of the multipage
website with recommendations for improvement.

1
Laksh Web Design and
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
Laksh Web Design and
Contents
Task 01.....................................................................................................................................16

Purpose of DNS:.......................................................................................................................16

1. Name Resolution...............................................................................................................16

2. Load Balancing.................................................................................................................16

3. Redundancy and Failover.................................................................................................16

4. Email Routing...................................................................................................................16

5. Caching:............................................................................................................................16

Types of DNS:..........................................................................................................................17

1. Recursive DNS.................................................................................................................17

2. Authoritative DNS............................................................................................................17

3. Root DNS:.........................................................................................................................17

4. Top-Level Domain (TLD) DNS.......................................................................................17

5. Second-Level Domain (SLD) DNS:.................................................................................17

Organization and Management of Domain Names..................................................................18

The organization and management of domain names involve several entities:.......................18

1. Domain Registrars:...........................................................................................................18

2. Registry.............................................................................................................................18

3. ICANN:.............................................................................................................................18

4. Registrants........................................................................................................................18

5. Nameservers:.....................................................................................................................18

1. Communication Protocols:................................................................................................19

Hypertext Transfer Protocol (HTTP.................................................................................19

Hypertext Transfer Protocol Secure (HTTPS...................................................................19

2. Server Hardware...............................................................................................................19

3. Operating Systems:...........................................................................................................19

Linux.................................................................................................................................19

Windows Server:...............................................................................................................19

Others:...............................................................................................................................19
13
Laksh Web Design and
4. Web Server Software........................................................................................................19

Apache HTTP Server........................................................................................................20

Nginx:...............................................................................................................................20

Microsoft Internet Information Services (IIS):.................................................................20

Relationships between Components.........................................................................................20

Communication Protocols and Web Server Software......................................................20

Web Server Software and Operating Systems:.................................................................20

Operating Systems and Server Hardware.........................................................................20

Server Hardware and Website Performance.....................................................................20

TASK 02...................................................................................................................................21

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

Front-end and Back-end Website Technologies:.....................................................................21

1. HTML (Hypertext Markup Language):............................................................................21

2. CSS (Cascading Style Sheets............................................................................................21

3. JavaScript..........................................................................................................................21

4. Front-end Frameworks and Libraries...............................................................................21

Relationship between Front-end and Back-end Technologies:................................................21

1. User Interaction and Experience.......................................................................................21

2. Data Handling and Processing:.........................................................................................21

3. Communication between Front-end and Back-end..........................................................21

4. Separation of Concerns.....................................................................................................21

5. Application Layers:...........................................................................................................21

3. Web Servers:........................................................................................................................23

Cost Considerations:.................................................................................................................25

1. Project Overview:.................................................................................................................26

Task 03.....................................................................................................................................30

Design Flexibility:....................................................................................................................30

Performance..............................................................................................................................30

Functionality:............................................................................................................................30
14
Laksh Web Design and
User Experience (UX):.............................................................................................................31

Custom Built Sites:...................................................................................................................31

User Interface (UI):..................................................................................................................31

Interface and coding................................................................................................................32

Database...................................................................................................................................52

Task 04.....................................................................................................................................56

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

1. Formulating the SQA Management Plan:............................................................................56

3. Implementing Software Engineering Techniques:...............................................................56

6. Enforcing Process Adherence..............................................................................................57

Typically Testing is classified into three categories................................................................57

Task 04.....................................................................................................................................58

Test Plan...................................................................................................................................58

Reference..................................................................................................................................61

15
Laksh Web Design and
Task 01

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

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

Purpose of DNS:

The Domain Name System (DNS) is a critical component of the internet that serves as a decentralized
directory system for translating human-readable domain names into IP addresses. It acts as a phonebook
for the internet, allowing users to access websites and other online resources using familiar domain names
(e.g., www.example.com) instead of numeric IP addresses (e.g., 192.0.2.1). The primary purposes of DNS
are as follows:
1. Name Resolution: DNS provides the means to resolve human-readable domain names to their
corresponding IP addresses. When you enter a domain name in your web browser, the DNS server is
queried to find the IP address associated with that domain.
2. Load Balancing: DNS can be used for load balancing by distributing traffic across multiple servers
with the same domain name. This helps optimize resource utilization and ensures better performance
and availability.
3. Redundancy and Failover: DNS can facilitate redundancy and failover configurations, where
multiple IP addresses are associated with a domain. If one server fails, DNS can direct traffic to a
backup server automatically.
4. Email Routing: DNS is also used for email routing. It helps in determining the mail servers
responsible for handling email traffic for a specific domain.
5. Caching: DNS caching is employed to store previously resolved domain names and their
corresponding IP addresses. This reduces the load on DNS servers and improves the overall
efficiency of the system.

16
Laksh Web Design and
Types of DNS:

1. Recursive DNS: This type of DNS resolver is used by client devices (e.g., your computer or
smartphone) to resolve domain names. When a client requests a domain resolution, the recursive
DNS server queries other DNS servers on behalf of the client to find the correct IP address.
2. Authoritative DNS: The authoritative DNS servers are responsible for holding the actual DNS
records for a specific domain. When a recursive DNS server queries an authoritative DNS server, it
provides the definitive answer for the queried domain.
3. Root DNS: These are the highest level of DNS servers in the hierarchical DNS system. They store
the DNS information for the top-level domains (TLDs) such as .com, .org, .net, and country-code
TLDs like .uk, .fr, etc.
4. Top-Level Domain (TLD) DNS: TLD DNS servers are responsible for storing DNS records for
their respective top-level domains. For example, the .com TLD DNS servers handle domain names
ending with .com.
5. Second-Level Domain (SLD) DNS: SLD DNS servers are responsible for storing DNS records for
specific domains within a TLD. For example, the DNS servers for "example.com" handle requests
for that domain.

17
Laksh Web Design and
Organization and Management of Domain Names:

Domain names are organized hierarchically, from right to left, with each part separated by a dot (period).
For example, in the domain name "www.example.com":
 "com" is the top-level domain (TLD).
 "example" is the second-level domain (SLD).
 "www" is a subdomain of "example.com."

The organization and management of domain names involve several entities:

1. Domain Registrars: These are companies accredited by the Internet Corporation for Assigned
Names and Numbers (ICANN) and other domain registries to sell domain names to the public. They
allow individuals and organizations to register and manage domain names for specific periods,
usually ranging from one to ten years.
2. Registry: The registry is responsible for operating the authoritative database for a specific TLD.
They maintain the master list of all domain names registered under that TLD. Examples of registries
include VeriSign for .com and PIR for .org.
3. ICANN: The Internet Corporation for Assigned Names and Numbers is a non-profit organization
that oversees the allocation and management of domain names and IP addresses. ICANN coordinates
and regulates domain name system policies to ensure the stable and secure operation of the internet.
4. Registrants: These are individuals or organizations who purchase domain names from registrars.
Registrants have the rights to use the domain names they own for specific purposes, such as hosting
websites or setting up email services.
5. Nameservers: Nameservers are DNS servers responsible for storing DNS records and providing
DNS information for specific domains. When someone accesses a domain, their device queries the
appropriate nameserver to find the IP address associated with that domain.
In summary, DNS plays a crucial role in translating domain names into IP addresses, enabling users to
access websites and resources on the internet. It employs various types of DNS servers to manage domain
name resolution, and the domain name system itself is organized hierarchically to ensure efficient
management and distribution of domain names.

18
Laksh Web Design and
LO1 Explain server technologies and management services associated with hosting and managing
websites

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

Purpose and Relationships between Communication Protocols, Server Hardware, Operating


Systems, and Web Server Software:

Designing, publishing, and accessing a website involve several interconnected components that work together to make the
website accessible to users. Let's explore the purpose and relationships between communication protocols, server hardware,
operating systems, and web server software in this context:
1. Communication Protocols: Communication protocols are sets of rules and conventions that govern how data is
transmitted and received between devices over a network. In the context of websites, two important communication
protocols are:
 Hypertext Transfer Protocol (HTTP): HTTP is the foundation of data communication on the World
Wide Web. It defines how web clients (web browsers) and web servers exchange information. When you type a
website address in your browser and hit Enter, the browser sends an HTTP request to the web server, and the
server responds with the requested web page using HTTP.
 Hypertext Transfer Protocol Secure (HTTPS): HTTPS is a secure version of HTTP that encrypts
the data transmitted between the web client and the web server. It adds an extra layer of security to protect
sensitive information, such as login credentials and payment details, from potential eavesdropping and
tampering.
2. Server Hardware: Server hardware refers to the physical equipment that hosts and runs the website. This hardware
needs to be powerful enough to handle the incoming web requests, process data, and respond to clients efficiently. The
server hardware includes components such as processors (CPU), memory (RAM), storage (HDD or SSD), and network
interface cards (NIC) for network connectivity.
3. Operating Systems: The operating system (OS) is the software that manages the computer hardware and provides
services for other software applications. For web servers, common operating systems include:
 Linux: Many web servers run on Linux-based operating systems, such as Ubuntu, CentOS, or Debian. Linux is
favored for its stability, security, and cost-effectiveness.
 Windows Server: Windows Server operating systems are also used for hosting websites, especially when
the website relies on technologies that are better suited to the Windows environment.
 Others: There are other operating systems available for web servers, but Linux and Windows Server are the
most prevalent.
4. Web Server Software: Web server software is responsible for handling HTTP/HTTPS requests, processing them,
and serving web pages or other resources to the clients. The web server software listens for incoming requests on specific
ports

19
Laksh Web Design and
(e.g., port 80 for HTTP and port 443 for HTTPS) and forwards those requests to the appropriate web application or web
page. Popular web server software includes:
 Apache HTTP Server: Apache is one of the most widely used web server software. It is open-source,
flexible, and supports various modules for extending its functionality.
 Nginx: Nginx is known for its high performance and efficiency in handling concurrent connections. It is often
used as a reverse proxy server, load balancer, or caching server in addition to serving web content.
 Microsoft Internet Information Services (IIS): IIS is Microsoft's web server software designed
specifically for Windows Server operating systems. It integrates well with Microsoft technologies.

Relationships between Components: The relationships between these components can be summarized as follows:
 Communication Protocols and Web Server Software: Web server software (e.g., Apache, Nginx) is
responsible for implementing the HTTP and HTTPS protocols to handle incoming requests and deliver web pages or
resources to clients.
 Web Server Software and Operating Systems: The web server software must be compatible with the chosen
operating system. For example, Apache and Nginx are cross-platform and work on both Linux and Windows, while IIS is
specific to Windows Server.
 Operating Systems and Server Hardware: The operating system must be compatible with the server
hardware, and drivers for the hardware components should be available for the chosen OS.
 Server Hardware and Website Performance: The performance of the website depends on the capabilities of
the server hardware. A well-configured and powerful server can handle a higher number of concurrent users and deliver
content faster.
By understanding these relationships and selecting appropriate components that complement each other, web designers and
administrators can ensure the smooth functioning and accessibility of their websites to users across the internet.

20
Laksh Web Design and
TASK 02
LO2 Categories website technologies, tools and software used to develop websites

P3 Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these
relate to presentation and application layers.
Front-end and Back-end Website Technologies:
Front-end Technologies: Front-end technologies focus on the presentation layer of a website—the part that users interact with
directly. Front-end developers use these technologies to create the user interface and deliver a visually appealing and interactive
experience. Some key front-end technologies include:

1. HTML (Hypertext Markup Language): HTML provides the structure and content of a web page. It defines
the layout and arrangement of elements such as headings, paragraphs, images, links, forms, and more.

2. CSS (Cascading Style Sheets): CSS is used to style and format the HTML elements. It controls the appearance of
the website, including colors, fonts, layout, and responsiveness for different devices.

3. JavaScript: JavaScript is a versatile scripting language that adds interactivity to the website. Front-end developers use
it to create dynamic features like sliders, pop-ups, form validation, and animations.

4. Front-end Frameworks and Libraries: Frameworks like React, Angular, and Vue.js, as well as libraries like
jQuery, simplify and streamline front-end development, providing reusable components and easier management of
complex web applications.

Relationship between Front-end and Back-end Technologies:

The front-end and back-end technologies work together to create a functional and interactive web application. Here's how they
relate to each other:

1. User Interaction and Experience: The front-end handles the user interface and user interactions, ensuring that
users can interact with the website easily and enjoy a seamless user experience.

2. Data Handling and Processing: The back-end manages data processing, storage, and retrieval. It processes the user
input received from the front-end, interacts with the database, and returns the necessary data back to the front-end.

3. Communication between Front-end and Back-end: Communication between the front-end and back-end
occurs through HTTP requests and responses. The front-end sends requests to the back-end, and the back-end responds
with the required data or information.

4. Separation of Concerns: The front-end and back-end are designed to have a clear separation of concerns. The
front- end deals with presentation and user interactions, while the back-end handles the business logic and data
processing.

5. Application Layers: The front-end and back-end together form the application layers of a website. The front-end is
responsible for the presentation layer, while the back-end represents the application logic and data layer.

21
Laksh Web Design and
Back-end Technologies:

Back-end technologies handle the application layer of a website—the behind-the-scenes operations that
support the front-end and manage data processing, storage, and server-side functionality. Back-end
developers use these technologies to create and maintain the server-side logic. Some key back-end
technologies include:

1. Server-Side Languages:
 PHP: PHP (Hypertext Preprocessor) is a widely used server-side scripting language known for its
ease of use and compatibility with various databases. It is often embedded in HTML code to create
dynamic web pages and web applications.
 Python: Python is a versatile and user-friendly programming language that has gained popularity for
web development due to its readability and extensive libraries. Frameworks like Django and Flask
provide a robust foundation for building web applications.
 Ruby: Ruby is an elegant and flexible language known for its simplicity and productivity. Ruby on
Rails (often just called Rails) is a powerful web application framework that follows the Model-View-
Controller (MVC) architecture.
 Java: Java is a widely adopted, object-oriented programming language that offers strong support for
web development. It is used to build scalable and high-performance enterprise-level applications.
 Node.js: Unlike traditional server-side languages, Node.js is a runtime environment that allows
developers to execute JavaScript on the server. It is known for its event-driven, non-blocking I/O
model, making it suitable for real-time applications.
2. Databases:
 Relational Databases: Relational databases like MySQL, PostgreSQL, and Microsoft SQL Server
are used to store structured data in tables with defined relationships. They are well-suited for
applications that require complex querying and data integrity.
 NoSQL Databases: NoSQL databases like MongoDB, Couchbase, and Cassandra provide a flexible,
schema-less approach to data storage. They are suitable for handling large amounts of unstructured
or semi-structured data and are often used in modern web applications.
 In-Memory Databases: In-memory databases like Redis and Memcached store data in RAM,
resulting in faster read and write operations. They are commonly used for caching and improving the
performance of web applications.

22
Laksh Web Design and
3. Web Servers:
 Apache HTTP Server: Apache is one of the most popular and widely used web servers. It is open-
source, powerful, and highly configurable, making it suitable for a wide range of applications.
 Nginx: Nginx is known for its efficiency in handling a large number of concurrent connections and
low resource usage. It is often used as a reverse proxy server and load balancer.
 Microsoft Internet Information Services (IIS): IIS is Microsoft's web server software designed to
work specifically with Windows operating systems. It integrates well with Microsoft technologies
and supports ASP.NET for server-side scripting.
4. Server-Side Frameworks:
 Django: Django is a high-level Python web framework that follows the MVC architecture. It comes
with a built-in admin interface and offers excellent security features.
 Ruby on Rails (Rails): Rails is a full-stack web application framework for Ruby. It emphasizes
convention over configuration and enables rapid development.
 Express.js: Express.js is a minimalist, flexible Node.js framework that simplifies the process of
building web applications and APIs.
5. API Development:
 RESTful APIs: Representational State Transfer (REST) APIs follow a set of architectural principles
and use HTTP methods (GET, POST, PUT, DELETE) to interact with resources. They are widely used
for building web services.

 GraphQL: GraphQL is an alternative to REST APIs that allows clients to request exactly the data
they need. It provides more flexibility and reduces over-fetching and under-fetching of data.

23
Laksh Web Design and
LO2 Categories website technologies, tools and software used to develop websites
P4 Discuss the differences between online website creation tools and custom built sites with regards to
design flexibility, performance, functionality, User Experience (UX) and User Interface (UI).
1. Design Flexibility:

 Online Website Creation Tools: These tools typically offer a range of pre-designed templates to
choose from. While they allow some level of customization, the options might be limited compared
to custom-built sites. Users can modify colors, fonts, and content but may have restrictions on layout
changes or implementing unique designs.

 Custom-Built Sites: Custom-built sites provide unparalleled design flexibility since designers have
complete control over the design elements. Designers can create unique layouts, implement custom
animations, and cater the design to specific branding requirements. This level of freedom allows for
more creativity and uniqueness in the website's appearance.

2. Performance:

 Online Website Creation Tools: Websites built using online tools often have optimized
performance due to the underlying platform's technical infrastructure. However, as the platform
serves multiple users, there might be limitations in terms of server resources, resulting in potential
performance issues during traffic spikes.

 Custom-Built Sites: Custom-built sites can be optimized for performance based on specific
requirements. Developers can fine-tune the code, choose efficient technologies, and optimize server
configurations to achieve excellent performance and responsiveness.

3. Functionality:

 Online Website Creation Tools: These tools offer a selection of built-in features and integrations,
such as contact forms, galleries, e-commerce functionality, and blog capabilities. While they cover
common website needs, the options may be limited compared to custom-built solutions.

 Custom-Built Sites: With custom-built sites, developers can implement any desired functionality, no
matter how unique or complex. Custom features can be tailored to the business's specific needs and
requirements, providing a more tailored and personalized user experience.

24
Laksh Web Design and
4. User Experience (UX):

 Online Website Creation Tools: The user experience of websites created using online tools can
vary. While some platforms prioritize user-friendly interfaces, others may have limitations in UX
design or may not adapt well to different devices.

 Custom-Built Sites: Custom-built sites allow designers and developers to focus explicitly on
creating an optimal user experience. They can fine-tune interactions, navigation, and responsive
design to ensure a seamless and engaging experience for users.

5. User Interface (UI):

 Online Website Creation Tools: Online tools often provide templates with pre-designed UI
elements. While they may look visually appealing, they might not fully align with a brand's specific
UI requirements or design guidelines.

 Custom-Built Sites: Custom-built sites enable complete control over the user interface design. UI
elements can be

customized to match the brand identity and offer a consistent and coherent look across the website.

Cost Considerations:
 Online Website Creation Tools: These tools are generally more cost-effective and suitable for
small businesses or individuals with limited budgets. They offer a quick and affordable way to get a
website up and running.

 Custom-Built Sites: Custom-built sites require more significant upfront investment due to the
involvement of professional designers and developers. They are suitable for businesses with specific
requirements and a focus on unique branding and functionality.

Conclusion:

Online website creation tools and custom-built sites cater to different needs and budgets. Online tools offer
convenience and ease of use for those without technical expertise, but they may have limitations in design
flexibility and functionality. On the other hand, custom-built sites provide unparalleled design freedom,
performance optimization, and tailored user experiences, making them suitable for businesses that prioritize
a unique online presence and specific functionalities. The choice between the two approaches depends on
the business's goals, budget, and the level of control and customization required for their website.

Task 03

25
Laksh Web Design and
LO3 Utilize website technologies, tools and techniques with good design principles to create a multipage website
P5 Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set
of client and user requirements.

1. Project Overview:
Project Name Malcolm Lismore Photographer’s Website

 Purpose: To design and develop a branded, [Malcolm Lismore Photographer’s Website ].

 Target Audience: Editorial Industrial Advertising Events

 Goals:

There’s nothing like seeing your photographs in print. Creating a tangible piece of your work is not only rewarding, it’s a fantastic
learning tool

02 . User Requirements:

 User Persona 1:

 Name: Lakshan

 Age: 22

 Goals: Start a photography business or side hustle

3 . Website Structure: The website will consist of the following pages:

 Home

 About Us

 Products/Services

 Portfolio/Gallery

 Blog/News

 Contact Us

5. Design Elements:

 Color Scheme: [Specify the color palette based on the client's branding and user preferences]

 Typography: [Specify the font styles to be used for headings, subheadings, and body text]

 Logo Usage: [Define how the logo should be displayed throughout the website]

26
Laksh Web Design and
 Imagery: [Specify the type of images to be used, e.g., illustrations, photographs, etc.]

 Icons: [Specify the icon set or style to be used for visual elements]

6. Medium Fidelity Wireframes:

 [Provide wireframes for each page, showcasing the layout and placement of key elements, such as navigation, headers,
content sections, forms, etc.]

 [Add notes and annotations to explain the functionality and interactions on each page]

7. Content Requirements:

 Home: [Brief introduction to the business/organization and featured content]

 About Us: [Description of the company's history, mission, and team]

 Products/Services: [Listing and details of products/services offered]

 Portfolio/Gallery: [Showcase of previous work or products]

 Blog/News: [Regularly updated articles or news related to the industry]

 Contact Us: [Contact form, address, phone number, and social media links]

8. Functionality and Interactivity:

 Navigation: [Describe the navigation menu and its behavior]

 Search Functionality: [Specify if search functionality is required]

 Contact Form: [Define the required fields and validation for the contact form]

 Social Media Integration: [Specify the integration of social media links or sharing buttons]

 Interactive Elements: [Specify any interactive elements like sliders, carousels, or animations]

9. Responsive Design: The website will be designed to be fully responsive, ensuring optimal user experience across various
devices, including desktops, tablets, and smartphones.

10. Accessibility: The website will adhere to accessibility standards, ensuring it is inclusive and accessible to all users, including
those with disabilities.

11. Security: The website will incorporate necessary security measures, such as HTTPS and data encryption, to protect
user data and maintain privacy.

12. Technical Requirements:

 Development Platform: [Specify the chosen platform or content management system]

 Hosting Requirements: [Specify hosting requirements, e.g., server configuration, storage, etc.]

27
Laksh Web Design and
13. Timeline and Deliverables:

 Project Start Date: [06 25 2023]

 Project Completion Date: [07 28 2023]

 Deliverables: [List all the expected deliverables, e.g., wireframes, design files, etc.]

14. Approval and Review Process:

 The client will review and approve the wireframes and design before development begins.

 Regular communication will be maintained throughout the development process for feedback and updates.

15. Budget:

 The estimated budget for the project is [Amount].

 Payment Terms: [Specify the payment schedule]

Note: This design document serves as a starting point and should be customized based on the specific requirements of your
project and the preferences of the client and team members involved.

28
Laksh Web Design and
29
Laksh Web Design and
Task 03
LO3 Utilize website technologies, tools and techniques with good design principles to create a multipage website

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

Design Flexibility:
 Online Website Creation Tools:
 Limited Design Options: Website builders offer pre-designed templates with some customization options, but
they might lack the freedom to create unique and custom designs.
 Restrictive Layouts: The templates dictate the layout, making it challenging to implement unconventional
designs or complex page structures.
 Custom Built Sites:
 Unlimited Design Freedom: Custom-built sites offer complete design flexibility, allowing designers to create
bespoke layouts and implement unique design elements.
 Tailored Branding: The design can align perfectly with the brand's identity and specific design guidelines.
Performance:
 Online Website Creation Tools:
 Shared Resources: Websites built on website builders share server resources, potentially leading to performance
issues during high traffic.
 Limited Performance Optimization: Optimization options might be limited, affecting page loading speed and
responsiveness.
 Custom Built Sites:
 Optimized Performance: Custom sites can be optimized for speed and performance based on specific needs,
leading to faster loading times and improved user experience.
 Scalability: Developers can implement efficient coding practices to ensure the site handles increased traffic and
remains stable.
Functionality:
 Online Website Creation Tools:
 Pre-built Features: Website builders offer a range of built-in features, but they might not fulfill complex or
unique functionality requirements.
 Limited Integrations: Integration with external services or APIs might be restricted.
 Custom Built Sites:
 Tailored Functionality: Custom-built sites can implement any desired functionality, including advanced features
and custom business logic.
 Seamless Integrations: Developers can integrate third-party services and APIs to meet specific business needs.

30
Laksh Web Design and
User Experience (UX):
 Online Website Creation Tools:
 Standardized UX: Website builders offer predefined user interfaces that might not be optimized for the specific
target audience.
 Limited UX Personalization: The ability to fine-tune UX elements might be restricted.
Custom Built Sites:
 Personalized UX: Custom-built sites can be designed with a user-centric approach, tailoring the UX to meet the
needs and preferences of the target audience.
 Enhanced Interactivity: Developers can implement sophisticated user interactions to provide an engaging and
intuitive experience.
User Interface (UI):
 Online Website Creation Tools:
 Limited UI Customization: Website builders provide pre-designed UI elements, which might not align perfectly
with the brand's visual identity.
 Inflexible UI Components: Customizing UI components might be challenging due to limitations in templates.
 Custom Built Sites:
 Complete UI Control: Custom-built sites allow designers to create a UI that reflects the brand's visual identity
and ensures consistency across the website.
 UI Animation: Developers can add custom animations and micro-interactions to enhance the UI's overall appeal.
In summary, online website creation tools offer convenience and ease of use, but they come with design limitations, performance
trade-offs, and restricted functionality. On the other hand, custom-built sites provide the utmost design flexibility, performance
optimization, tailored functionality, and personalized user experiences. The choice between the two approaches depends on the
specific needs, budget, and goals of the website project. Small businesses or individuals with limited technical expertise might
find online website builders suitable for basic web presence, while larger enterprises or organizations seeking a unique and
robust online platform should consider custom-built sites to achieve their goals effectively.

31
Laksh Web Design and
wireframe photography

32
Laksh Web Design and
33
Laksh Web Design and
Interface and coding

34
Laksh Web Design and
35
Laksh Web Design and
36
Laksh Web Design and
37
Laksh Web Design and
Login

38
Laksh Web Design and
39
Laksh Web Design and
Admin Dashboard

40
Laksh Web Design and
41
Laksh Web Design and
42
Laksh Web Design and
Add Artist

43
Laksh Web Design and
44
Laksh Web Design and
45
Laksh Web Design and
Manage

46
Laksh Web Design and
47
Laksh Web Design and
48
Laksh Web Design and
Search

49
Laksh Web Design and
50
Laksh Web Design and
51
Laksh Web Design and
Database
Normalized database design

Database normalization is a fundamental database schema design technique aimed at optimizing data

organization by reducing redundancy and minimizing data dependencies. By breaking down a large table

into smaller, more manageable ones and establishing relationships between them, normalization enhances

data clarity and structure. This approach ensures that data is stored efficiently and fosters better data

management practices.

52
Laksh Web Design and
53
Laksh Web Design and
54
Laksh Web Design and
55
Laksh Web Design and
Task 04
Create and use a Test Plan to review the performance and design of a multipage website
Software Quality Assurance (SQA) is an essential process in the software development life cycle (SDLC) that aims to
ensure the software meets predefined quality standards. It involves continuous monitoring and evaluation of the developed
software to verify its compliance with desired quality measures. By incorporating various software testing methodologies
throughout the development stages, SQA ensures that high-quality software is produced.

SQA practices are universally applied in software development, irrespective of the chosen development model. Unlike traditional
approaches that assess quality after completion, SQA examines and tests for quality at each phase of development. This iterative
process allows any deviations from the required quality standards to be identified and addressed promptly, ensuring that the
software moves forward to the next phase only when it meets the necessary quality criteria. In essence, SQA plays a pivotal role in
delivering reliable and well-structured software products.

Below is a list of essential Software Quality Assurance (SQA) activities:

1. Formulating the SQA Management Plan:


The initial step involves creating a comprehensive plan outlining how SQA will be implemented throughout the project. This plan
includes selecting the SQA approach, defining engineering activities, and ensuring a skilled and capable team is in place.

2. Establishing Checkpoints:

The SQA team sets up various checkpoints at different project stages to assess the quality of activities. These checkpoints ensure
regular inspections and adherence to the project schedule.

3. Implementing Software Engineering Techniques:


Applying software engineering techniques assists designers in achieving high-quality specifications. Techniques like interviews
and FAST (Functional Analysis System Technique) are used to gather information, which is then utilized for project estimation
through methods such as WBS (Work Breakdown Structure), SLOC (Source Lines of Code), and FP (Functional Point)
estimation.

56
Laksh Web Design and
4. Conducting Formal Technical Reviews (FTR):

FTRs are executed to evaluate the quality and design of the software prototype. Technical staff participates in meetings to discuss
software requirements and prototype design quality. This process aids in detecting errors early in the SDLC and minimizes rework
efforts in later phases.

5. Adopting a Multi-Testing Strategy:

Emphasizing a multi-testing strategy involves conducting various types of testing to comprehensively evaluate the software
product from multiple perspectives, ensuring better overall quality.

6. Enforcing Process Adherence:


This activity stresses the importance of adhering to defined procedures and processes during software development. Ensuring
process adherence helps maintain consistency and quality throughout the development lifecycle.

Software testing is defined as checking whether the actual results match the expected results and ensuring that the software system
is Defect free. It involves the execution of a software component or system component to evaluate one or more properties of
interest. Software testing also helps identify errors, gaps, or missing requirements contrary to the actual conditions. It can be either
done manually or using automated tools. Some prefer saying Software testing is a White Box and Black Box Testing. In simple
terms, Software Testing means Verification of the Application Under Test.

Typically Testing is classified into three categories.

1. Functional Testing

2. Non-Functional Testing or Performance Testing

3. Maintenance (Regression and Maintenance)

57
Laksh Web Design and
Task 04
LO4 Create and use a Test Plan to review the performance and design of a multipage website

Test Plan

Test No Function Duration

1 Login the admin dashboard with correct 3 Minutes


username & password

Expected Result: Successful login to the admin dashboard..

2 Login the admin dashboard with wrong 3 Minutes


username & password

Expected Result: Display the Error Message.

3 Inserting artist’s data 3 Minutes

Expected Result: Alert box says “Artist details has been added”
Managing artist details
4 2 Minutes

Expected Result: Alert box says “Data Deleted”

5 To check the Searching Enquiry with 5 Minutes


wrong fake data

Expected Result: The alert should appear as no record found

58
Laksh Web Design and
Test Case-01

Test Propose Login to the admin dashboard


Test Input admin and Test@123

Expected Output Alert box says “Login success”


Actual Results

Test Case-02

Test Propose Login to the admin dashboard


Test Input Wrong Data

Expected Output Alert box says “Invalid Details”


Actual Results

Test Case-03

Test Propose Submitting Artist details

Test Input Artist Details

Expected Output Alert box says “Artist details has been


added”

59
Laksh Web Design and
Actual Results

Test Case-04

Test Propose Managing artist details

Test Input Delete an artist's details

Expected Output Alert box says “Data Deleted”

Actual Results

Test Case-05

Test Propose Searching Enquiry


Test Input Mobile number

Expected Output No record found


Actual Results

60
Laksh Web Design and
Reference

Fortinet. (n.d.). What Is Domain Name System (DNS)? [online] Available at:
https://www.fortinet.com/resources/cyberglossary/what-is- dns#:~:text=A%20Domain%20Name
%20System%20(DNS.
[Accessed 16 07 2023].

Infoblox. (n.d.). DNS - What is DNS? Learn How Domain Name System Works. [online] Available at:
https://www.infoblox.com/glossary/domain-name-system-dns/.
[Accessed 16 07 2023].

NS1 (2018). DNS: Types of DNS Records, DNS Servers and DNS Query Types. [online] NS1. Available
at: https://ns1.com/resources/dns-types-records-servers-and-queries.
[Accessed 16 07 2023].

Dey, E. (2021). Different Types of DNS Servers: Everything You Need to Know. [online] ‫آر ابر بالگ‬lable at:
https://www.arvancloud.ir/blog/en/different-types-of-dns-servers/.
[Accessed 16 07 2023].

Techopedia (2019). What is a Communication Protocol? - Definition from Techopedia. [online]


Techopedia.com. Available at: https://www.techopedia.com/definition/25705/communication-protocol.
[Accessed 16 07 2023].

Jones IT | Managed IT Services, IT Support, IT Consulting. (n.d.). Basics Of Computer Networking:


Communication Protocols | Jones IT. [online] Available at: https://www.itjones.com/blogs/basics-of-
computer-networking-communication-protocols.
[Accessed 16 07 2023].

Marketing, A.R., Marketing, C.W.M. at P. works as a D., writer, C.W.M. at P.S. is a passionate, blogger,
Cybersecurity, M.S. in and Technology, I. (n.d.). DNS Types: DNS Query Types, Servers and Records
Complete. [online] powerdmarc.com. Available at: https://powerdmarc.com/dns-types-queries-and-
servers/. [Accessed 16 07 2023].

61
Laksh Web Design and

You might also like