ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 13: Website Design & Development

Submission date DAO DUC MANH Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Student ID

Class SE06201 Assessor name NGUYEN VAN QUANG

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.

Student’s signature MANH

Grading grid

P5 P6 P7 M4 M5 D2 D3
❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:
Contents
INTRODUCTION............................................................................................................................................................................................................ 3
CONTENT..................................................................................................................................................................................................................... 3
Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user
requirements (P5).................................................................................................................................................................................................... 3
 Use case diagram......................................................................................................................................................................................... 3
Database Design.................................................................................................................................................................................................. 5
I. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported
with realistic content (P6)..................................................................................................................................................................................... 11
III. Create a suitable Test Plan identifying key performance areas and use it to review the functionality and performance of your website. User
Experience (UX) and User Interface (UI) (P7).........................................................................................................................................................17
Conclusion............................................................................................................................................................................................................. 20
References............................................................................................................................................................................................................. 20

List of Figure

Figure 1.Use case diagram........................................................................................................................................................................................... 6

Figure 2.Database Design............................................................................................................................................................................................ 7
Figure 3.Home page..................................................................................................................................................................................................... 8
Figure 4.Contact Page.................................................................................................................................................................................................. 9
Figure 5.Profile page.................................................................................................................................................................................................. 10
Figure 6.Cart Page...................................................................................................................................................................................................... 11
Figure 7.HTML............................................................................................................................................................................................................ 12
Figure 8.CSS............................................................................................................................................................................................................... 13
Figure 9.Java script.................................................................................................................................................................................................... 14
Figure 10.Bootstrap................................................................................................................................................................................................... 15
INTRODUCTION
Sales web programming is akin to constructing a bustling marketplace in the digital realm. It's a specialized domain within web
development where the primary focus lies in crafting dynamic, intuitive, and high-performing online platforms tailored specifically
for selling goods or services. Much like an architect designing a grand marketplace, sales web programmers utilize a plethora of
programming languages, frameworks, and tools to meticulously construct websites or web applications that streamline the sales
journey for both businesses and customers.

In this bustling digital marketplace, every line of code serves as a brick, carefully laid to ensure stability, functionality, and user
satisfaction. From HTML and CSS laying the foundation for structure and style, to JavaScript orchestrating seamless interactivity, and
backend languages like Python, PHP, or Ruby managing the intricate backend processes, every element works in harmony to create a
captivating and efficient sales environment [1].

CONTENT

Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client
and user requirements (P5)

 Use case diagram

is a term used in the field of software development and project management to describe a specific situation or scenario of
how a system will be used. It defines the functions, operations, and interactions between the system and users or other
components in a specific situation.
A Use Case is used to understand the requirements and characteristics of a system, identify user behaviors and usage
scenarios, and identify important factors in software development. It provides a rational approach to analyze and describe
system impacts.

Use Cases are often represented as diagrams, such as UML (Unified Modeling Language) Use Case diagrams. Each Use Case
describes a specific situation, including expected behaviors, interactions, and outcomes. These Use Cases can then be used as
a basis for system design, development and testing [2].
 Figure 1.Use case diagram

Database Design
Database design is the organization of data according to a database model. The designer determines what data must be stored and
how the data elements interrelate. With this information, they can begin to fit the data to the database model. A database
management system manages the data accordingly [3].
 Figure 2.Database Design

Illustrate the structure and components of website (use Wireframe)

 A wireframe is an initial drawing or sketch of a product, it is often used in interface design to show the structure and layout of
component websites or applications [4].

Login page
Register page
o A Landing page (Home page)

Figure 3.Home page

o A Contact Page
Figure 4.Contact Page
o A Profile page.

Figure 5.Profile page

o A My Cart Page

Figure 6.Cart Page

I. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage
website supported with realistic content (P6)

HTML

HTML (short for HyperText Markup Language, also known as "Hypertext Markup Language") is a markup language designed to
create web pages on the World Wide Web. It can be helped by technologies like CSS and scripting languages like JavaScript [5].

Figure 7.HTML
CSS

CSS stands for Cascading Style Sheets , it is a language used to find and reformat elements created by markup languages (HTML). In
short, it is a language that creates style for a website. You can simply understand that, if HTML plays the role of formatting elements
on the website such as creating paragraphs of text, titles, tables, etc. then CSS will help us add styles to the elements. That HTML is
like changing the layout, page color, changing text color, font, changing structure [6].

Figure 8.CSS
Java script

Java Script (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is
most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache
CouchDB and Adobe Acrobat [7].

Figure 9.Java script

Bootstrap

bootstrap is an HTML, CSS and JS library that focuses on simplifying the development of informative web pages (as opposed to web
applications). The primary purpose of adding it to a web project is to apply Bootstrap's choices of color, size, font and layout to that
project. As such, the primary factor is whether the developers in charge find those choices to their liking. Once added to a project,
Bootstrap provides basic style definitions for all HTML elements. The result is a uniform appearance for prose, tables and form
elements across web browsers. In addition, developers can take advantage of CSS classes defined in Bootstrap to further customize
the appearance of their contents. For example, Bootstrap has provisioned for light- and dark-colored tables, page headings, more
prominent pull quotes, and text with a highlight [8].

Figure 10.Bootstrap
A Landing page (Home page)
The home page is the starting point of a website. Its main function is to provide an overview of the content, services, or products
that the website offers. Typically, it also displays links or main menus for users to navigate to other sections of the website.

A Contact Page
The contact page provides contact information, such as email address, phone number, or a contact form, so that users can reach out
to the website owner or administrator.

A Login page
The login page is where users enter their login information, such as username and password, to access their personal accounts on
the website.
A Register page
The register page is where users can create a new account on the website. Users are usually required to fill out a form with
necessary information such as name, email address, password, and possibly other information depending on the specific
requirements of the website.
A Profile page
The profile page is where users can edit their personal information on the website, such as name, address, payment information,
and other account settings.
A My Cart Page
The my cart page displays the products or services that the user has added to their cart. Typically seen on this page are the total
quantity of items in the cart, the total price of those items, and options for payment and shipping.
III. Create a suitable Test Plan identifying key performance areas and use it to review the functionality and performance of your
website. User Experience (UX) and User Interface (UI) (P7)
Test Plan needs to check functional and non-functional requirements

Functional:

Functional testing is crucial for ensuring that a software product meets its intended functional requirements. It involves
testing various aspects of the software to verify that it behaves as expected. Here are the key stages of functional testing:

Unit Testing:

Description: Unit testing is the first level of testing, typically performed by developers.

Purpose: Ensure that individual components or units of code function correctly in isolation.

Methods: Manual testing or automated testing.

Tools: Testing frameworks like JUnit, NUnit, or automated testing tools.

Goals: Verify that each unit performs as expected, helping to catch bugs early in the development cycle.

Integration Testing:

Description: Integration testing checks the interaction between different units/modules of the software.

Purpose: Ensure that integrated components work together seamlessly.

Methods: Black-box or white-box testing techniques.

Focus: Detect errors such as data format incompatibilities, message passing issues, or parameter mismatches.

Tools: Integration testing frameworks, mock objects, or stubs.

System Testing:
 Description: System testing evaluates the behavior of the entire software system.

Purpose: Verify that the integrated system meets specified requirements.

Methods: Black-box testing focusing on functional requirements.

Scope: Testing the system as a whole, including interfaces with external systems.

Tools: Test management tools, defect tracking systems.

User Acceptance Testing (UAT):

Description: UAT is performed by end-users to validate the software's readiness for deployment.

Purpose: Ensure that the software meets user requirements and is fit for release.

Approach: Real-world testing scenarios simulating actual usage.

Feedback: Gather feedback from users to identify any issues or areas for improvement.

Tools: User feedback collection tools, bug tracking systems.

Non-functional:

Non-functional testing is essential for assessing aspects of a software system beyond its core functionality. These tests evaluate attributes such
as reliability, robustness, performance, usability, maintainability, and portability. Here's a detailed overview of each type of non-functional
testing:

Reliability Tests:

Description: Checks whether the software can maintain consistent performance over a specific period and under certain conditions.

Purpose: Ensure that the software operates reliably without failure.

Methods: Expose the system to varying conditions and monitor its behavior over time.

Tools: Monitoring tools, fault injection techniques.

Robustness Tests:

Description: Evaluates the system's ability to operate correctly under adverse conditions or unexpected events.

Purpose: Verify that the system can gracefully handle errors and recover without catastrophic failure.

Methods: Injecting unexpected inputs, forcing system failures.

Tools: Error injection tools, fault tolerance testing frameworks.

Stress Tests:

Description: Measures the system's performance under extreme conditions, beyond its normal operational capacity.

Purpose: Determine the system's breaking point and identify performance bottlenecks.

Methods: Increasing the workload, applying heavy concurrent user loads.

Tools: Load generation tools, stress testing frameworks.

Performance Tests:

Description: Assess the responsiveness and processing speed of the software under different workloads.

Purpose: Ensure that the software meets performance requirements and responds quickly to user interactions.

Methods: Benchmarking, profiling, latency measurement.

Tools: Performance testing tools, profiling tools.

Load Tests:

Description: Simulates the expected workload on the system to evaluate its response.

Purpose: Determine the system's capacity and scalability under normal and peak loads.
Methods: Gradually increasing the number of concurrent users or transactions.

Tools: Load testing tools, load generation scripts.

Usability Tests:

Description: Evaluates the ease of use and user-friendliness of the software.

Purpose: Ensure that the software is intuitive and easy for users to navigate.

Methods: Usability surveys, user observation sessions, heuristic evaluations.

Tools: Usability testing platforms, survey tools.

Maintainability Tests:

Description: Assess the ease with which the software can be modified, updated, and maintained.

Purpose: Ensure that the software remains adaptable to changes in requirements or environments.

Methods: Code analysis, code complexity metrics, regression testing.

Tools: Code quality analysis tools, version control systems.

Portability Tests:

Description: Measures how easily the software can be transferred or adapted to different environments or platforms.

Purpose: Ensure that the software remains functional across various operating systems, devices, or configurations.

Methods: Cross-platform testing, compatibility testing.

Tools: Cross-platform testing frameworks, virtualization tools.

No Test case Input data Expected output Actual output Evaluation

1 Login Valid login User should be directed to Pass
credentials their respective account
page

2 Registration User User should be successfully pass

registration registered and directed to
details login

3 Contact Search for store Complete and accurate pass

Information contact details contact information for the
store displayed
4 Home Page User navigates Home page should load with pass
to the home all necessary elements
page

5 Shopping Add products to Products should be pass

Cart cart and verify successfully added and
displayed in the cart

6 Profile logging in with User should be able to view pass

valid and update their profile
credentials and information
clicking on the
"Profile" link.
7 Attempt to Enter an email Upon attempting to submit pass
register with address with an the registration form, the
an invalid incorrect format system should detect the
email (e.g.,missing"@ invalid email format and
format. " symbol, display an error message
incorrect indicating that the email
domain). address provided is not in
the correct format. The
registration process should
not proceed until a valid
email address is entered.

8 Submitting Valid name, Successful submission of the PASS

valid contact email, subject, contact form, with a
information. and message. confirmation message
displayed to the user.

9 Attempt to Leave one or Upon attempting to submit Pass

register with more required the registration form with
missing fields blank, missing information, the
information. such as system should validate the
username, input fields and display error
email address, messages indicating which
or password. fields are required and must
be filled out.
10 Deleting a Clicking on the The product should be PASS
single delete button removed from the cart, and
product next to a the total price should be
from the specific product updated accordingly. The
cart. in the cart. cart should reflect the
changes instantly.

11 Viewing the Product ID: The details of the product PASS

details of a "Men’s T- with ID " Men’s T-shirts "
specific shirts". should be displayed,
product. including its name, price,
description, and other
relevant information.
Conclusion
This project focuses on evaluating or designing a user interface (UI) that integrates text in a table format, with the goal of testing and
improving the user experience (UX). This process involves evaluating the usability, functionality, and overall effectiveness of the UI to
ensure a positive and easy-to-use experience for users. The approach typically includes using methods such as user testing, visual
analysis, gathering feedback from users, and performing A/B tests to optimize and improve the user interface. use. At the same
time, using UX/UI design principles such as simplicity, consistency, and understandability also plays an important role in this process
[9].
References

[1] What is the difference between an e-commerce specialist and a web developer? (no date) Quora. Available at:
https://www.quora.com/What-is-the-difference-between-an-e-commerce-specialist-and-a-web-developer (Accessed: 10 April
2024).
[2] Brush, K. (2022) What is a Use Case?, Software Quality. TechTarget. Available at:
https://www.techtarget.com/searchsoftwarequality/definition/use-case (Accessed: 10 April 2024).
[3] Database design (2024) Wikipedia. Wikimedia Foundation. Available at: https://en.wikipedia.org/wiki/Database_design
(Accessed: 10 April 2024).
[4] Hannah, J., Jaye Hannah Writer for The CareerFoundry BlogJaye Hannah is a freelance content writer and strategist, Jaye Hannah
Writer for The CareerFoundry Blog, Hannah, J., Blog, W. for T. C. and Jaye Hannah is a freelance content writer and strategist
(2024) What Is A Wireframe? Your Best Guide [With Examples], CareerFoundry. Available at: https://careerfoundry.com/en/blog/ux-
design/what-is-a-wireframe-guide/ (Accessed: 10 April 2024).
[5] HTML (2024) Wikipedia. Wikimedia Foundation. Available at: https://vi.wikipedia.org/wiki/HTML (Accessed: 10 April 2024).
[6] G., D. (2023) What Is CSS and How Does It Work?, Hostinger Tutorials. Available at: https://www.hostinger.com/tutorials/what-is-
css (Accessed: 10 April 2024).
[7] JS/TS (no date) JavaScript Development. Available at: https://baldur.gitbook.io/js (Accessed: 10 April 2024).
[8] Bootstrap (no date) Wayne E Solutions. Available at: https://wayneesolutions.com/bootstrap.php (Accessed: 10 April 2024).
[9] What is User Experience (UX) Design? (2023) The Interaction Design Foundation. Interaction Design Foundation. Available at:
https://www.interaction-design.org/literature/topics/ux-design (Accessed: 10 April 2024).