ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 13: Website Design & Development

Submission date 06/04/2024 Date Received 1st submission 06/04/2024

Re-submission Date Date Received 2nd submission

Student Name Nguyen Tu Trinh Student ID BS00411

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 Trinh

Grading grid

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

Grade: Assessor Signature: Date:

Signature & Date:
Table of Contents
I. INTRODUCTION.................................................................................................................................................................................................... 5
II. CONTENT............................................................................................................................................................................................................. 6
1. Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user
requirements (P5).................................................................................................................................................................................................... 6
a. Use case diagram......................................................................................................................................................................................... 6
b. Database Design:......................................................................................................................................................................................... 9
c. llustrate the structure and components of website...................................................................................................................................11
2. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported
with realistic content (P6)...................................................................................................................................................................................... 17
a. List tools and techniques for website development..................................................................................................................................17
b. Take screenshots of website functions......................................................................................................................................................38
c. Explain in detail the functions of the website............................................................................................................................................44
3. 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).................................................................................................................................................46
4. Compare and contrast the multipage website created to the design document (M4)..................................................................................50
a. Include the similar wireframes & web screenshots for comparison. Clarify the similarities and differences between them....................50
5. Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages (M5)......55
a. Present about QA, steps in QA...................................................................................................................................................................55
b. Clarify which steps you had applied in your web development with evidences........................................................................................57
6. Evaluate the design and development process against your design document and analyse any technical challenges (D2)..........................58
a. Evaluate the design document, evaluate development process, show any differences between them....................................................58
b. Show the technical challenges/difficulties in web development with evidences & explanation...............................................................60
7. 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 (D3).............................................................61
 a. Test result evaluation, review overall success of multipage website.........................................................................................................61
b. Provide justified recommendations of improvements...............................................................................................................................62
c. Show the advantages, disadvantages of his/her web project....................................................................................................................63
III. CONCLUSION..................................................................................................................................................................................................... 64
IV. REFERENCE LIST................................................................................................................................................................................................. 65

List Of Figure:

Figure 1. Use Case Diagram......................................................................................................................................................................................... 8

Figure 2. Database Design.......................................................................................................................................................................................... 10
Figure 3. Landing Page............................................................................................................................................................................................... 12
Figure 4. Contact Page............................................................................................................................................................................................... 13
Figure 5. Login Page................................................................................................................................................................................................... 14
Figure 6. Register Page.............................................................................................................................................................................................. 15
Figure 7. Profile Page................................................................................................................................................................................................. 16
Figure 8. My Cart Page............................................................................................................................................................................................... 17
Figure 9. HTML........................................................................................................................................................................................................... 19
Figure 10. CSS............................................................................................................................................................................................................ 21
Figure 11. JavaScript.................................................................................................................................................................................................. 23
Figure 12. MySQL, PostgreSQL, MongoDB, SQLite.....................................................................................................................................................25
Figure 13. Git............................................................................................................................................................................................................. 27
Figure 14. AWS, Google Cloud Platform, Microsoft Azure.........................................................................................................................................29
Figure 15. Frameworks and Libraries......................................................................................................................................................................... 31
Figure 16. Task Runners and Build Tools.................................................................................................................................................................... 33
Figure 17. Package Managers.................................................................................................................................................................................... 36
Figure 18. Testing Frameworks and Libraries.............................................................................................................................................................38
Figure 19. Landing Page............................................................................................................................................................................................. 39
Figure 20. Contact Page............................................................................................................................................................................................. 40
Figure 21. Login Page................................................................................................................................................................................................. 41
Figure 22. Register Page............................................................................................................................................................................................ 42
Figure 23. Profile Page............................................................................................................................................................................................... 43
Figure 24. My Cart Page............................................................................................................................................................................................. 44
Figure 25. Landing Page............................................................................................................................................................................................. 50
Figure 26. Contact Page............................................................................................................................................................................................. 51
Figure 27. Log In Page................................................................................................................................................................................................ 52
Figure 28. Register Page............................................................................................................................................................................................ 53
Figure 29. Profile Page............................................................................................................................................................................................... 54
Figure 30. My Cart Page............................................................................................................................................................................................. 55

List Of Table:

Table 1. Test Case……………………………………………………………………………………………………………………………………………………………………………..48

I. INTRODUCTION
In today's digital landscape, a well-designed and functional website is crucial for businesses and organizations to establish their
online presence and engage with their audience effectively. This design document outlines the process of creating a branded,
multipage website, adhering to client and user requirements, incorporating medium fidelity wireframes, and employing appropriate
principles, standards, and guidelines.

The journey begins with crafting a comprehensive design document that encompasses the structure, components, and
functionalities of the website. This includes creating a use case diagram, database design, and wireframes to illustrate the envisioned
user experience. Utilizing HTML5, CSS3, and JavaScript, among other tools and techniques, we embark on the development phase,
bringing the design document to life with realistic content.

Following the development process, thorough testing is conducted to ensure the website meets both functional and non-functional
requirements. A detailed test plan is implemented, encompassing UI and UX testing, along with test cases to evaluate various
aspects of the website's performance.
Upon completion of the website, a comparison is drawn between the implemented website and the initial design document,
highlighting similarities, differences, and any deviations encountered during development. The Quality Assurance (QA) process is
evaluated, shedding light on the steps undertaken to ensure the website's quality and reliability.

Furthermore, the design and development process is scrutinized against the design document, identifying technical challenges faced
and addressing them with supporting evidence and analysis. Finally, the results of the test plan are assessed, providing insights into
the overall success of the multipage website, accompanied by justified recommendations for areas of improvement and a balanced
evaluation of its strengths and weaknesses.

This comprehensive approach not only ensures the successful creation of the multipage website but also fosters continuous
improvement and refinement to deliver an optimal user experience and achieve the desired objectives.

II. CONTENT

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

The use case diagram is one of the essential components in software development methodology for describing the functionalities or
behaviors of the system from the perspective of users. This diagram focuses on the activities that the system provides to external
users (actors) and how the system interacts with them through use cases. Specifically, the use case diagram typically includes the
following components:

 Actor:
+ Specify the types of actors involved in the system, including end-users, external systems, and other components that may
interact with the system.
+ Identify the features and permissions of each actor.
+ Distinguish between different types of actors based on their roles and purposes of interaction with the system.
 Use Case:
+ Identify and describe specific tasks or functionalities that the system provides to actors.
 + Clearly define the objectives and expected outcomes of each use case.
+ List the steps necessary to complete each use case.
+ Ensure that each use case corresponds to a specific need of the actor.
 Relationship between Actor and Use Case:
+ Identify how each actor interacts with specific use cases.
+ Describe relationship types such as association, inclusion, or extension.
+ Ensure that each relationship reflects a logical interaction pattern between the actor and the system.
 System:
+ Represents the entire system that use cases and actors interact with.
+ Describes the scope and boundaries of the system, including its components and core functionalities.
+ Ensure that all use cases and actors are reflected within the scope of the system. [1]
Figure 1. Use Case Diagram

Let me explain each of them:

 View Landing: This likely refers to the initial landing page or homepage of the application. It's the first page users see when
they visit the website or open the app.
 Login: This is a functionality that allows users to log into their accounts by providing their credentials such as username/email
and password.
 Verify: This might refer to a process where users need to verify their identity or email address before they can access certain
features or complete registration.
 Login Facebook: This indicates the option for users to log in using their Facebook accounts, leveraging Facebook's
authentication system.
 Login Acc: This could be short for "Login Account," which refers to the general login functionality mentioned earlier.
 Login Gmail: Similar to "Login Facebook," this suggests the option for users to log in using their Gmail or Google accounts.
 Log out: This is a functionality that allows users to log out of their accounts, terminating their current session.
 View Product: This likely refers to a page or functionality where users can view details and information about products
available in the application or website.
 Manage Product: This indicates a set of functionalities for managing products, which may include adding new products,
updating existing ones, and deleting outdated or no longer available products.
 Add, view, update, delete: These are the basic CRUD (Create, Read, Update, Delete) operations often associated with
managing data in a system. It implies functionalities to add new items, view existing ones, update/edit them, and
delete/remove them.
 Management cart: This refers to functionalities related to managing items in a shopping cart, such as adding items, updating
quantities, removing items, and proceeding to checkout.
 Guest, Admin, Customer, Authenticated User: These likely refer to different user roles within the system:
 Guest: Refers to users who are not logged in or haven't created an account yet.
 Admin: Refers to users with administrative privileges, often responsible for managing the system, users, and content.
 Customer: Refers to regular users or customers who use the system to browse, purchase, or interact with products/services.
 Authenticated User: Refers to users who have successfully logged into their accounts and are currently authenticated to
access certain features or data that require authentication.
b. Database Design:
Figure 2. Database Design
 Categories: This table contains information about product categories. Each category has a category_id as the primary key,
along with other columns such as category name and description.
 Products: This table stores information about products. Each product has a product_id as the primary key, and it also has a
category_id to link it with the Categories table through a foreign key. Other columns include product name, description,
price, and stock quantity.
 Order_Details: This table records detailed information about each product in each order. Each row in this table has an
orderdetail_id as the primary key, and it also contains order_id and product_id to indicate the corresponding order and
product. Other information includes quantity and price of each product.
 Orders: This table stores information about placed orders. Each order has an order_id as the primary key. Other information
includes customer_id (a foreign key referencing the Customers table), order date, and order status.
 Customers: This table contains information about customers. Each customer has a customer_id as the primary key. Other
information includes name, email, address, and phone number.
 Sellers: This table contains information about sellers. Each seller has a seller_id as the primary key. Other information
includes name, email, address, and phone number.
c. llustrate the structure and components of website
 Frame 1:
Figure 3. Landing Page

 Frame 2:
Figure 4. Contact Page

 Frame 3:
Figure 5. Login Page

 Frame 4:
Figure 6. Register Page

 Frame 5:
Figure 7. Profile Page

 Frame 6:
Figure 8. My Cart Page

2. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage
website supported with realistic content (P6)
a. List tools and techniques for website development

HTML (HyperText Markup Language)

  Definition:

HTML, short for HyperText Markup Language, is the standard markup language for creating web pages. It provides a set of markup
tags that are used to structure the content of a web page, defining elements such as headings, paragraphs, lists, images, links, and
more. HTML documents are interpreted by web browsers to render web pages for users to view and interact with.

 Characteristics:
+ HTML serves as the fundamental building block of web development. It provides a simple yet powerful means of
organizing and presenting content on the web. Key characteristics of HTML include:
+ Tag-based Structure: HTML documents are structured using tags, which are enclosed in angle brackets (< >) and used to
define elements and their attributes. Tags indicate the beginning and end of elements, and can be nested to create
complex structures.
+ Semantic Markup: HTML offers semantic tags that convey the meaning and purpose of content to both browsers and
developers. Semantic markup improves accessibility, search engine optimization (SEO), and maintainability of web pages.
+ Platform Independence: HTML is platform-independent and supported by all modern web browsers, ensuring consistent
rendering and accessibility across different devices and operating systems.
+ Extensibility: HTML can be extended and customized using external resources such as Cascading Style Sheets (CSS) for
styling and JavaScript for interactivity. This allows developers to enhance the appearance and functionality of web pages
beyond basic HTML markup.
 Benefits:
+ HTML offers several benefits for web development:
+ Accessibility: HTML provides semantic markup features that improve accessibility for users with disabilities, screen
readers, and assistive technologies. Semantic HTML elements convey meaning and structure to both human users and
machines, enhancing the overall user experience.
+ Compatibility: HTML is supported by all major web browsers, including Chrome, Firefox, Safari, and Edge, ensuring broad
compatibility and consistent rendering of web pages across different platforms.
+ Ease of Learning: HTML is easy to learn and understand, making it accessible to beginners in web development. Its
straightforward syntax and tag-based structure facilitate rapid prototyping and experimentation for creating web pages.
 + Foundation for Web Development: HTML serves as the foundation for building web pages and web applications. It
provides the basic structure and content formatting capabilities needed to create functional and visually appealing
websites.
 Limitations:
+ Despite its advantages, HTML has limitations that may require additional technologies for addressing more advanced
requirements:
+ Static Content: HTML is primarily used for defining static content and layout structure. It lacks built-in support for
dynamic content generation, user interactivity, and real-time updates, which are essential for modern web applications.
+ Limited Styling Options: HTML offers basic styling capabilities through attributes such as color, font, and alignment.
However, complex styling and layout customization require additional technologies such as CSS (Cascading Style Sheets)
for achieving desired visual effects and responsive designs.
+ Minimal Interactivity: HTML alone cannot provide dynamic user interactions or client-side logic. To create interactive web
experiences, developers need to use scripting languages such as JavaScript for implementing event handling, form
validation, and DOM manipulation.
+ Browser Compatibility: While HTML is widely supported across web browsers, differences in browser implementations
and rendering engines may result in inconsistencies and compatibility issues. Developers must test and ensure cross-
browser compatibility to maintain a consistent user experience. [2]

Figure 9. HTML

CSS (Cascading Style Sheets)

 Definition:
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML
(including XML dialects such as SVG, MathML, etc.). It provides a means to separate the content from the presentation aspects of a
web page, allowing for greater flexibility and control over the appearance and layout of web pages.

 Characteristics:
+ Control over Presentation: CSS enables precise control over the visual presentation of HTML elements. Designers can
specify properties such as colors, fonts, spacing, borders, and positioning for various elements on a web page.
+ Cascading Nature: CSS follows a cascading model, where multiple style sheets can be applied to the same document.
Styles can be inherited from parent elements and overridden or supplemented by more specific rules. This cascading
nature allows for modular and scalable style definitions.
+ Selectors and Declarations: CSS employs selectors to target specific HTML elements and declarations to define the style
properties applied to those elements. Selectors can be based on element types, IDs, classes, attributes, or even
hierarchical relationships.
+ Media Queries: CSS includes support for media queries, which allow styles to be tailored based on characteristics of the
device or viewport, such as screen size, resolution, orientation, or media type. This enables responsive web design, where
layouts adapt to different devices and screen sizes.
+ Flexibility and Extensibility: CSS is highly flexible and extensible, allowing for the creation of complex layouts, animations,
and interactive elements. It supports features like transitions, transformations, keyframe animations, and more, enabling
rich user experiences.
 Benefits:
+ Consistency and Maintainability: By separating style definitions from content, CSS promotes consistency in design across
a website. Changes to styling can be made globally by modifying style sheets, ensuring uniformity and ease of
maintenance.
+ Improved Performance: External style sheets can be cached by browsers, reducing page load times for subsequent visits
and improving overall performance. Additionally, CSS allows for more efficient coding practices, leading to faster
rendering and smoother user experiences.
+ Accessibility: CSS provides mechanisms for enhancing accessibility, such as specifying alternative text for images, ensuring
proper color contrast for readability, and enabling keyboard navigation for interactive elements. These features
contribute to making web content more inclusive and accessible to all users.
 + SEO (Search Engine Optimization): Well-structured and semantically meaningful HTML, styled using CSS, can improve the
visibility and ranking of web pages in search engine results. CSS allows designers to optimize content presentation while
maintaining clean, indexable code for search engine crawlers.
 Limitations:
+ Browser Compatibility: Despite efforts to standardize CSS specifications, differences in implementation across various
web browsers can lead to inconsistencies in rendering and behavior. Designers may need to resort to vendor prefixes or
workarounds to ensure cross-browser compatibility, which can add complexity to development.
+ Learning Curve: While CSS is relatively straightforward to grasp for basic styling tasks, mastering advanced concepts and
techniques can require time and practice. Keeping up with evolving best practices, browser capabilities, and new features
can also be challenging for designers and developers.
+ Complexity in Large Projects: Managing stylesheets in large-scale projects with numerous pages, components, and
contributors can become unwieldy. Without proper organization and documentation, CSS files may grow bloated,
redundant, or difficult to maintain over time.
+ Performance Overhead: Overly complex or inefficient CSS rules can impact page load times and responsiveness,
particularly on low-powered devices or slow network connections. Minification, compression, and optimization
techniques can mitigate this overhead but may introduce additional complexities to the development process. [3]

Figure 10. CSS

JavaScript:

 Definition:

JavaScript, often abbreviated as JS, is a high-level, interpreted programming language primarily used for client-side web
development. It enables web developers to add interactive elements, dynamic behavior, and real-time updates to web pages. Unlike
HTML and CSS, which focus on defining the structure and styling of web content, JavaScript empowers developers to manipulate and
control the behavior of web pages dynamically.

 Characteristics:
+ JavaScript's primary characteristic is its ability to enhance web pages by adding interactive features and dynamic
functionality. Some key characteristics include:
+ Interactivity: JavaScript allows developers to create interactive elements such as buttons, dropdown menus, sliders, and
forms that respond to user input.
+ Asynchronous Operations: JavaScript supports asynchronous programming, enabling web pages to perform tasks such as
fetching data from servers or updating content without blocking the user interface.
+ Event Handling: JavaScript facilitates event-driven programming, allowing developers to define responses to user actions
such as clicks, keystrokes, mouse movements, and page loads.
+ DOM Manipulation: JavaScript can manipulate the Document Object Model (DOM) of a web page, enabling dynamic
updates and modifications to page content, structure, and styling.
+ Browser Compatibility: JavaScript is supported by all modern web browsers, making it a versatile language for developing
cross-platform web applications.
 Benefits:
+ JavaScript offers several benefits for web development:
+ Enhanced User Experience: By adding dynamic behavior and interactivity, JavaScript enhances the user experience,
making web pages more engaging, responsive, and user-friendly.
+ Real-time Updates: JavaScript enables real-time updates and dynamic content loading, allowing web pages to display
fresh data without requiring a full page reload.
+ Rich Web Applications: JavaScript powers the development of rich web applications with complex features such as
interactive maps, multimedia players, drag-and-drop interfaces, and animations.
 + Cross-platform Compatibility: JavaScript runs on all major web browsers and platforms, ensuring broad compatibility and
reach for web applications.
 Limitations:
+ Despite its numerous advantages, JavaScript has some limitations and considerations:
+ Security Risks: JavaScript code executed on the client-side can potentially be exploited by malicious users to launch
attacks such as cross-site scripting (XSS) or data tampering. Proper security measures, such as input validation and
sanitization, are essential to mitigate these risks.
+ Performance Overhead: Heavy use of JavaScript, especially in large web applications, can introduce performance
overhead and affect page load times. Optimizing JavaScript code and minimizing unnecessary operations can help
mitigate these performance issues.
+ Dependency on Client-Side Execution: JavaScript relies on client-side execution, which means that users must have
JavaScript enabled in their browsers to access the full functionality of web applications. This dependency may limit
accessibility for users with JavaScript-disabled browsers or assistive technologies.
+ Learning Curve: JavaScript, being a full-fledged programming language, requires a solid understanding of programming
concepts such as variables, loops, functions, and object-oriented programming. The learning curve for mastering
JavaScript may be steep for beginners or those with limited programming experience. [4]

Figure 11. JavaScript

MySQL, PostgreSQL, MongoDB, SQLite:

+ MySQL: MySQL is an open-source relational database management system (RDBMS) that is widely used for web
applications. It supports SQL (Structured Query Language) for querying and managing data. MySQL is known for its
scalability, reliability, and ease of use. It is suitable for various types of web projects, from small blogs to large-scale e-
commerce platforms.
+ PostgreSQL: PostgreSQL is an advanced open-source relational database management system known for its robustness,
extensibility, and standards compliance. It supports features such as ACID (Atomicity, Consistency, Isolation, Durability)
transactions, JSONB (binary JSON) data type, and full-text search. PostgreSQL is commonly used for applications requiring
complex data modeling, geographical data processing, and data warehousing.
+ MongoDB: MongoDB is a popular open-source NoSQL database management system designed for storing and retrieving
JSON-like documents. It offers flexibility and scalability, making it suitable for handling unstructured or semi-structured
data. MongoDB uses a flexible schema model, allowing developers to store and query data without predefined schemas.
It is often used for real-time analytics, content management systems, and mobile applications.
+ SQLite: SQLite is a lightweight, serverless, self-contained relational database management system that is embedded
directly into the application. Unlike traditional client-server databases, SQLite does not require a separate server process
to operate. It is suitable for small to medium-sized web applications, mobile apps, and desktop software. SQLite is known
for its simplicity, portability, and minimal resource consumption.
 Benefits:
+ Structured Data Storage: These database management systems organize data in a structured format, making it easy to
query and retrieve information efficiently.
+ Powerful Features: They provide a wide range of features such as indexing, transactions, replication, and security
mechanisms to ensure data integrity and reliability.
+ Scalability: These systems can scale to accommodate growing amounts of data and increasing user loads, making them
suitable for high-traffic websites and applications.
+ Data Management: They offer tools and utilities for managing data, including backup and restore capabilities, data
migration, and performance optimization.
 Limitations:
 + Technical Knowledge Required: Setting up and managing these database management systems requires knowledge of
database administration, SQL query optimization, and system configuration.
+ Performance Optimization: Improperly configured databases or poorly optimized queries can lead to performance issues
such as slow response times and resource contention.
+ Scalability Challenges: Scaling databases to handle extremely large datasets or high concurrent loads may require
additional hardware resources, partitioning strategies, or sharding techniques.
+ Maintenance Overhead: Regular maintenance tasks such as data backups, software upgrades, and performance tuning
are necessary to ensure the stability and reliability of these systems. [5]

Figure 12. MySQL, PostgreSQL, MongoDB, SQLite

Git:

 Definition:

Git is a distributed version control system (DVCS) designed to track changes in source code files during software development.
Developed by Linus Torvalds in 2005, Git has become the de facto standard for version control in software development due to its
efficiency, flexibility, and robustness. It allows developers to collaborate on projects, track changes, and manage code repositories
effectively.

 Characteristics:
 + Distributed Architecture: Git uses a distributed model where each developer maintains a complete copy of the repository
on their local machine. This decentralized approach enables offline work, faster access to version history, and greater
resilience against data loss or network failures.
+ Branching and Merging: Git facilitates branching and merging operations, allowing developers to create parallel lines of
development (branches) for implementing features or fixing bugs. Branches can be merged back into the main codebase
(usually the master branch) once changes are tested and approved.
+ Lightweight and Fast: Git is lightweight and optimized for performance, making it suitable for projects of any size. It uses
efficient algorithms for storing and retrieving version history, enabling fast operations such as committing changes,
switching branches, and merging code.
+ Collaboration Support: Git provides features for collaboration among developers, including remote repositories hosted
on platforms like GitHub, GitLab, or Bitbucket. Developers can push changes to remote repositories, pull updates from
others, and review code changes through pull requests or merge requests.
 Benefits:
+ Source Code Management: Git helps manage source code files, tracking changes, and maintaining a complete history of
revisions. This ensures the integrity and traceability of code changes over time.
+ Collaboration Efficiency: Git enables efficient collaboration among team members, allowing multiple developers to work
on the same project simultaneously. Each developer can work on their own branch, making independent changes without
interfering with others' work.
+ Version Control: Git provides version control capabilities, allowing developers to revert to previous versions of code,
compare differences between versions, and track the evolution of a project over time.
+ Workflow Flexibility: Git supports various workflow models, including centralized, feature branch, Gitflow, and forking
workflows. Teams can choose a workflow that best fits their development process and project requirements.
 Limitations:
+ Learning Curve: Git has a steep learning curve for beginners, requiring knowledge of command-line usage, Git concepts
(e.g., commits, branches, merges), and workflows. Understanding advanced features and resolving complex scenarios
may require additional practice and experience.
+ Complexity in Large Projects: Managing large repositories with numerous branches, collaborators, and dependencies can
be challenging in Git. Teams need to establish conventions, guidelines, and tools for effective collaboration and code
management.
 + Merge Conflicts: Git may encounter merge conflicts when integrating changes from multiple branches or developers.
Resolving conflicts requires manual intervention to reconcile conflicting changes, which can be time-consuming and
error-prone.
+ Git Operations Overhead: Some Git operations, such as creating branches or performing merges, may introduce
overhead, especially in large repositories. Optimizing workflows, reducing unnecessary branching, and leveraging Git's
performance tuning options can mitigate these issues. [6]

Figure 13. Git

AWS, Google Cloud Platform, Microsoft Azure:

 Definition:

AWS (Amazon Web Services), Google Cloud Platform (GCP), and Microsoft Azure are leading cloud service providers that offer a wide
range of infrastructure resources and services for deploying, managing, and scaling web applications. These cloud platforms provide
on-demand access to computing power, storage, networking, databases, analytics, machine learning, and more, enabling
organizations to build and operate applications without the need to invest in physical hardware or infrastructure.

 Characteristics:
 + Flexibility: Cloud platforms offer a wide variety of services and deployment options, allowing developers to choose the
most suitable resources and configurations for their applications. They support various programming languages,
frameworks, and operating systems, enabling flexibility in application development and deployment.
+ High Availability: Cloud services are designed to ensure high availability and reliability of applications by distributing
resources across multiple data centers and regions. They offer features such as auto-scaling, load balancing, and fault
tolerance to minimize downtime and maximize uptime for web applications.
+ Cost Reduction: Cloud platforms offer pay-as-you-go pricing models, allowing organizations to pay only for the resources
and services they consume. This flexible pricing structure helps reduce upfront costs and enables cost optimization by
scaling resources up or down based on demand.
 Benefits:
+ Infrastructure Management: Cloud services abstract away the complexity of managing hardware infrastructure,
networking, and data centers. They provide managed services for provisioning, monitoring, scaling, and maintaining
infrastructure components, allowing organizations to focus on application development and innovation.
+ Flexibility and Scalability: Cloud platforms offer elastic scalability, allowing organizations to easily scale resources up or
down to meet changing demand and workload patterns. They support rapid deployment of new features, updates, and
changes, enabling agility and innovation in web application development.
+ Cost Efficiency: Cloud services help optimize infrastructure costs by providing cost-effective pricing models, resource
utilization optimization, and pay-as-you-go billing. Organizations can achieve cost savings through efficient resource
allocation, usage monitoring, and optimization techniques.
+ Security and Compliance: Cloud providers implement robust security measures and compliance certifications to protect
data, applications, and infrastructure against security threats and compliance requirements. They offer advanced security
features such as encryption, identity and access management (IAM), network security, and compliance reporting.
 Limitations:
+ Vendor Lock-In: Adopting a specific cloud platform may lead to vendor lock-in, making it challenging to migrate
applications and data to other platforms or on-premises environments. Organizations should consider portability and
interoperability when designing and implementing cloud solutions to mitigate vendor lock-in risks.
+ Technical Knowledge: Leveraging cloud services requires technical expertise in cloud architecture, deployment,
management, and optimization. Organizations need skilled personnel or external consultants with cloud computing
knowledge and experience to effectively utilize cloud platforms and maximize their benefits.
 + Complexity and Learning Curve: Cloud platforms offer a wide range of services and features, which can be complex and
overwhelming for beginners. Organizations may face challenges in understanding and mastering cloud technologies,
leading to longer deployment times and potential implementation errors.
+ Compliance and Governance: Cloud services may introduce challenges related to compliance with regulatory
requirements, data sovereignty, and governance policies. Organizations need to ensure that their cloud deployments
comply with relevant laws, regulations, and industry standards to avoid legal and regulatory issues. [7]

Figure 14. AWS, Google Cloud Platform, Microsoft Azure

Frameworks and Libraries:

 Definition:

Frameworks and libraries in web development are collections of pre-written code, tools, and conventions designed to assist
developers in building web applications more efficiently. They provide reusable components, patterns, and structures that can be
leveraged to streamline development processes and solve common programming tasks.
 Characteristics:
+ Pre-built Functionalities: Frameworks and libraries offer pre-built functionalities for common tasks such as data
manipulation, user interface rendering, form validation, routing, and authentication. Developers can leverage these
ready-made components to accelerate development and focus on building application-specific features.
+ Abstraction and Simplification: Frameworks and libraries abstract complex implementation details and provide simplified
interfaces and APIs for developers to interact with. This abstraction layer hides low-level complexities and enables
developers to work at a higher level of abstraction, increasing productivity and reducing cognitive load.
+ Consistency and Convention: Frameworks and libraries often enforce coding conventions, best practices, and
architectural patterns to maintain consistency and coherence across projects. By adhering to established conventions and
standards, developers can create code that is easier to read, maintain, and collaborate on with other team members.
+ Ecosystem and Community Support: Frameworks and libraries typically have vibrant ecosystems and active communities
of developers contributing plugins, extensions, documentation, tutorials, and support resources. This ecosystem support
enhances the usability, extensibility, and longevity of frameworks and libraries, fostering collaboration and knowledge
sharing among developers.
 Benefits:
+ Increased Development Speed: Frameworks and libraries provide ready-made solutions for common tasks, reducing the
need for developers to reinvent the wheel. This accelerates the development process and enables faster time-to-market
for web applications.
+ Reduced Error Rate: By leveraging well-tested and proven components from frameworks and libraries, developers can
minimize the occurrence of bugs and errors in their code. This leads to improved software quality, reliability, and stability.
+ Performance Optimization: Frameworks and libraries often include performance optimizations and best practices out of
the box, helping developers build efficient and scalable web applications. This can result in faster page load times,
improved responsiveness, and better user experience.
+ Organizational Structure: Frameworks and libraries provide a structured approach to web development, offering
guidelines, conventions, and architectural patterns that promote code organization, separation of concerns, and
maintainability. This facilitates collaboration among team members and ensures consistency across projects.
 Limitations:
 + Limited Flexibility: Some frameworks and libraries may impose constraints or conventions that limit flexibility and
customization options. Developers may encounter challenges when trying to deviate from established patterns or
integrate third-party components that are not supported by the framework or library.
+ Learning Curve: Adopting a new framework or library requires developers to invest time and effort in learning its
concepts, APIs, and conventions. The learning curve can vary depending on the complexity and maturity of the
framework or library, potentially slowing down initial development efforts.
+ Dependency Management: Relying heavily on external frameworks and libraries introduces dependencies that can
complicate project management, versioning, and compatibility issues. Developers need to carefully manage
dependencies and stay informed about updates, deprecations, and security vulnerabilities.
+ Overhead and Performance Impact: Some frameworks and libraries may introduce overhead in terms of code size,
resource consumption, and performance impact. Developers should assess the trade-offs between convenience and
performance to choose the most suitable tools for their specific project requirements. [8]

Figure 15. Frameworks and Libraries

Task Runners and Build Tools:

 Definition:
Task runners and build tools are software utilities designed to automate repetitive tasks and streamline the development and
deployment workflow in software projects. They automate processes such as compiling source code, bundling assets, running tests,
optimizing resources, and deploying applications to various environments.

 Characteristics:
+ Automation: Task runners and build tools automate manual tasks that would otherwise require repetitive manual
intervention, such as compiling code, running tests, and deploying applications. By automating these tasks, developers
can save time and reduce the risk of human error.
+ Customization: Task runners and build tools are highly customizable, allowing developers to define and configure tasks
according to the specific requirements of their projects. They provide flexibility in defining build pipelines, specifying
dependencies, and integrating with third-party tools and services.
+ Dependency Management: Task runners and build tools manage dependencies and ensure that the necessary software
components and resources are available for building and deploying applications. They can automatically download
dependencies, manage version conflicts, and ensure reproducibility of builds across different environments.
+ Integration: Task runners and build tools integrate seamlessly with version control systems, continuous integration (CI)
servers, and deployment platforms. They support integration with popular development tools and services, enabling a
smooth and efficient development workflow.
 Benefits:
+ Time Savings: Task runners and build tools automate repetitive tasks, reducing the time and effort required for manual
intervention. This allows developers to focus on writing code and implementing features rather than performing tedious
build and deployment tasks.
+ Error Reduction: Automation of build and deployment processes helps minimize human errors and inconsistencies in the
development workflow. By enforcing standardized build configurations and automated testing, task runners and build
tools improve the overall quality and reliability of software releases.
+ Consistency and Performance: Task runners and build tools ensure consistency in the build and deployment process,
leading to more predictable outcomes and improved performance. They enable standardization of build environments,
optimization of resource usage, and enforcement of coding standards and best practices.
+ Scalability: Task runners and build tools support the scalability of software projects by automating repetitive tasks and
facilitating the management of complex build configurations. They enable efficient handling of large codebases, multiple
environments, and diverse deployment targets.
  Limitations:
+ Complexity: Configuring and customizing task runners and build tools can be complex, especially for developers with
limited experience or knowledge of build automation concepts. Understanding the tool's configuration options, syntax,
and workflow may require a significant learning curve.
+ Technical Knowledge: Effective use of task runners and build tools requires proficiency in scripting languages, build
automation concepts, and the tool's specific features and functionalities. Developers need to invest time and effort in
learning how to use these tools effectively to reap their full benefits.
+ Maintenance Overhead: Task runners and build tools require ongoing maintenance and updates to keep pace with
evolving project requirements, changes in dependencies, and updates to the tool itself. Developers need to regularly
review and update build configurations, scripts, and dependencies to ensure smooth operation and compatibility with the
latest technologies.
+ Tool Selection: Choosing the right task runner or build tool for a project can be challenging due to the wide range of
options available. Developers need to evaluate factors such as compatibility, features, community support, and ease of
integration with existing tools and workflows when selecting a tool for their project. [9]

Figure 16. Task Runners and Build Tools

Package Managers:

 Definition:
Package managers are software tools designed to simplify the management of software dependencies in web development projects.
They automate the process of installing, updating, and removing software packages and libraries, making it easier for developers to
manage project dependencies and ensure the availability of required software components.

 Characteristics:
+ Dependency Management: Package managers provide a centralized repository of software packages and libraries, along
with metadata describing their dependencies and versions. Developers can specify project dependencies in configuration
files, and package managers handle the resolution and installation of these dependencies automatically.
+ Version Control: Package managers enable version management of software dependencies by allowing developers to
specify version constraints and preferences. They ensure that the correct versions of dependencies are installed based on
project requirements, preventing compatibility issues and conflicts between different software versions.
+ Automated Installation: Package managers streamline the process of installing and updating software packages by
automating dependency resolution, download, and installation tasks. Developers can execute simple commands or
scripts to install, update, or remove packages, saving time and effort compared to manual installation methods.
+ Dependency Resolution: Package managers resolve dependencies recursively, ensuring that all required software
components and their dependencies are installed correctly. They handle complex dependency graphs, resolve conflicts,
and install compatible versions of packages to satisfy project requirements.
 Benefits:
+ Dependency Consistency: Package managers ensure consistency and reliability of project dependencies by managing
them in a centralized repository and enforcing version constraints. This helps prevent issues such as dependency
conflicts, missing dependencies, and incompatible software versions.
+ Version Management: Package managers facilitate version management of software dependencies by allowing
developers to specify version ranges, constraints, and preferences. They ensure that the correct versions of dependencies
are installed and updated automatically, reducing the risk of compatibility issues and software conflicts.
+ Simplified Workflow: Package managers streamline the development workflow by automating dependency management
tasks such as installation, updating, and removal of software packages. Developers can focus on writing code and building
features without worrying about managing dependencies manually.
+ Community Collaboration: Package managers foster collaboration within the development community by providing a
centralized platform for sharing, discovering, and distributing software packages and libraries. They enable developers to
leverage open-source libraries, contribute to projects, and benefit from community-maintained packages.
  Limitations:
+ Dependency Complexity: Managing dependencies of multiple software packages can become complex, especially in large
projects with numerous dependencies. Package managers may struggle to resolve complex dependency graphs and
handle conflicting version requirements, leading to dependency resolution issues.
+ Compatibility Problems: Package managers may encounter compatibility problems when installing or updating software
packages, especially if dependencies have conflicting requirements or if package versions are incompatible with the
project's environment. This can result in errors, failures, or unexpected behavior in the application.
+ Learning Curve: Using package managers effectively requires familiarity with their commands, configuration options, and
best practices. Developers may need to invest time and effort in learning how to use package managers correctly and
troubleshoot issues that arise during dependency management.
+ Dependency Conflicts: Package managers may encounter dependency conflicts when multiple packages require different
versions of the same dependency. Resolving these conflicts can be challenging and may require manual intervention or
dependency resolution strategies such as dependency pinning or version locking. [10]

Figure 17. Package Managers

Testing Frameworks and Libraries:

  Definition:

Testing frameworks and libraries are essential components of the software development process, providing tools and utilities for
automating the testing of web applications. They enable developers to verify the correctness, functionality, and performance of their
code through automated tests, ensuring that applications meet specified requirements and quality standards.

 Characteristics:
+ Automated Testing: Testing frameworks and libraries facilitate the automation of testing processes by providing APIs and
tools for writing and executing automated tests. Developers can create test suites, define test cases, and run tests
automatically to verify the behavior of their code.
+ Test Types: Testing frameworks and libraries support various types of tests, including unit tests, integration tests, end-to-
end tests, and performance tests. They offer functionalities for simulating user interactions, mocking dependencies, and
measuring code coverage to assess the quality and reliability of applications comprehensively.
+ Reporting and Analysis: Testing frameworks and libraries generate detailed reports and analysis to provide insights into
the test results, code coverage, and test execution metrics. Developers can analyze the test output, identify failing tests,
and debug issues efficiently to improve the quality of their code.
+ Extensibility: Testing frameworks and libraries are often extensible, allowing developers to customize and extend their
functionalities according to specific project requirements. They support integration with third-party tools, plugins, and
extensions for enhancing testing capabilities and adapting to evolving testing needs.
 Benefits:
+ Error Detection: Testing frameworks and libraries help detect errors and bugs in the code automatically by executing
predefined test cases and comparing the actual behavior of the application with expected results. This early detection of
errors enables developers to identify and rectify issues promptly, preventing them from escalating into production.
+ Code Quality: By enforcing a disciplined approach to testing, testing frameworks and libraries contribute to the overall
quality of the codebase. They encourage developers to write modular, well-structured, and testable code, leading to
better maintainability, readability, and scalability of applications.
+ Regression Prevention: Automated testing with frameworks and libraries helps prevent regression issues by continuously
validating code changes against existing test cases. This ensures that new features or modifications do not inadvertently
introduce regressions or break existing functionality, maintaining the stability and reliability of applications.
 + Time Savings: Despite the initial investment required to set up testing frameworks and write test cases, they ultimately
save time by automating repetitive testing tasks and reducing the need for manual testing efforts. This allows developers
to focus on delivering new features and improvements rather than spending excessive time on testing and debugging.
 Limitations:
+ Development Overhead: Writing and maintaining test cases with testing frameworks and libraries require additional time
and effort during the development process. Developers must invest resources in designing comprehensive test suites,
updating tests as code evolves, and troubleshooting failing tests.
+ Learning Curve: Using testing frameworks and libraries effectively requires familiarity with their APIs, syntax, and best
practices. Developers may need to undergo training or self-study to learn how to write effective tests, set up testing
environments, and interpret test results accurately.
+ Initial Development Time: While automated testing ultimately saves time in the long run, it may increase the initial
development time due to the overhead of setting up testing frameworks, writing test cases, and integrating testing
processes into the development workflow. Developers must balance the upfront investment in testing with the long-term
benefits of improved code quality and reliability.
+ False Positives/Negatives: Automated tests generated with testing frameworks and libraries may sometimes produce
false positives (indicating failures when code is correct) or false negatives (failing to detect actual errors). Developers
need to carefully design and maintain test cases to minimize false results and ensure the accuracy and reliability of test
outcomes.
Nên sử dụng HTML 5, CSS 3 and JavaScript
Figure 18. Testing Frameworks and Libraries

b. Take screenshots of website functions

 A Landing page (Home page)

Figure 19. Landing Page

 A Contact Page
Figure 20. Contact Page

 A Login page
Figure 21. Login Page

 A Register page
Figure 22. Register Page

 A Profile page
Figure 23. Profile Page

 A My Cart Page
Figure 24. My Cart Page

c. Explain in detail the functions of the website

Sure, here are detailed explanations of the functions of each page:
 Landing page (Home page):
The landing page is where users first land when they visit the website. It typically contains design elements to grab users' attention
and guide them through the website.
Key elements often include:
+ Header and slogan: Displaying the name and a brief description of the website's service or product.
+ Call to Action (CTA): Buttons or links prompting users to take action, such as "Buy Now," "Sign Up," or "Learn More."
 + Featured products or services: Showcasing the most important products, services, or information to attract attention.
+ Navigation menu: Links to other subpages of the website such as products, about us, contact, etc.
+ Contact information: Address, phone number, or quick contact form.
 Contact Page:
The contact page provides information for users to get in touch with the website owner.
Key elements typically include:
+ Contact form: Allowing users to fill in their personal information and message to send to the website owner.
+ Contact information: Address, phone number, email, or map directions to the company's location.
Email sending system: Allowing users to send emails directly from the website.
 Login Page:
+ The login page allows users to sign in to their accounts to access personalized features or private information.
+ Key elements typically include:
+ Login form: Users input their username and password.
+ Registration link: Link to the registration page if the user doesn't have an account.
 Register Page:
The register page allows users to create a new account on the website.
Key elements typically include:
+ Registration form: Users fill in personal information such as name, email, password, etc.
+ Password confirmation: Input box to re-enter the password to ensure accuracy.
 Profile Page:
+ The profile page displays the logged-in user's personal information and allows them to manage their personal
information.
+ Key elements typically include:
+ Personal information: Name, address, phone number, etc.
+ Account settings: Allowing users to change password, email address, etc.
+ Purchase history or activities: Displaying transactions or activities the user has performed on the website.
 My Cart Page:
 + The cart page displays all the items users have added to their cart and allows them to view and edit before checkout.
+ Key elements typically include:
+ Product list: Showing all items in the cart, including images, names, and prices.
+ Total: Displaying the total amount for all items in the cart.
+ Checkout button: Redirecting users to the checkout page to complete the order.
3. 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)

No Test case Input data Expected output Actual output Evaluation

1 Test link home Click on home Navigate to home [Actual home Pass
link page page]

2 Test link image Click on image Navigate to image [Actual image Pass
link page page]

3 Add product Fill out product Product added [Actual result after Pass
form with valid successfully adding product]
data

4 Test color Check color Colors match [Actual color Pass

scheme of UI design scheme]
elements specifications

5 Test layout Resize window UI elements [Actual layout on Pass

and check UI adjust properly different screen
layout sizes]

6 Test font Verify font Fonts consistent [Actual fonts used] Pass
consistency with design
across UI

7 Test image display Load page with Images displayed [Actual image Pass
 images correctly display]

8 Test navigation Click through Navigate to [Actual page Pass

various links correct pages navigation]

9 Test form Submit empty Display error [Actual error Pass

validation form messages for messages]
required fields

10 Test Access website UI adjusts for [Actual UI Pass

responsiveness on different different screen responsiveness]
devices sizes

11 Test loading time Load website Website loads [Actual loading Pass
within expected time]
time

12 Test broken links Click on links Verify links are [Actual link status] Pass
not broken

13 Test error Trigger an error Proper error [Actual error Pass

handling condition message message]
displayed
14 Test search Perform a search Relevant results [Actual search Pass
functionality displayed results]

15 Test checkout Add item to cart Successful [Actual checkout Pass

process and proceed to completion of process]
checkout checkout process

16 Test login Attempt to login Successful login [Actual login Pass

functionality with valid result]
credentials

17 Test logout Logout from user Successful logout [Actual logout Pass
functionality account result]

18 Test password Request Password reset [Actual password Pass

recovery password reset email sent reset process]

19 Test language Change language UI elements [Actual language Pass

localization setting display in displayed]
selected language
 20 Test accessibility Navigate website Screen reader [Actual screen Pass
using screen compatible UI reader
reader compatibility]

The selected test cases were chosen based on a variety of important factors to ensure the quality and performance of the
application. Here's the specific rationale for choosing each test case:

 Test link home and Test link image: Ensure the basic functionality of navigating links to the home page and image page is
working correctly.
 Add product: Check the product addition feature to ensure data is handled correctly and products are successfully added to
the system.
 Test color and Test font: Ensure that the colors and fonts on the interface are in line with the original design, maintaining
aesthetic appeal and consistency.
 Test layout and Test responsiveness: Verify the flexibility of the interface across different screen sizes and ensure that
interface elements adjust properly.
 Test image display: Ensure images are displayed correctly, enhancing the aesthetic appeal and user experience of the
website.
 Test navigation: Check the accuracy of navigation between pages to ensure users can easily access relevant content.
 Test form validation: Verify that forms function correctly by displaying error messages when invalid data is submitted.
 Test loading time: Ensure the website's loading time falls within an acceptable range to improve user experience.
 Test error handling: Check error handling to ensure appropriate error messages are displayed when issues occur.
 Test search functionality and Test checkout process: Check the search and checkout functionalities to ensure their accuracy
and completeness.
 Test login and logout functionality and Test password recovery: Ensure the security and functionality of the login, logout, and
password recovery processes.
 Test language localization: Check the multilingual feature to ensure the interface displays in the selected language chosen by
the user.
 Test accessibility: Test the interface's accessibility for users using screen readers to ensure fair access for all individuals.
Selecting these test cases ensures comprehensive testing of both functional and non-functional aspects of the application, thereby
improving the overall quality of the application.

4. Compare and contrast the multipage website created to the design document (M4)
a. Include the similar wireframes & web screenshots for comparison. Clarify the similarities and differences between them.

Figure 25. Landing Page

 Landing Page:
 Differences:
+ Wireframes typically present a basic layout with essential elements like the header, navigation menu, and main content
area, without specific visuals such as images or colors. Conversely, actual web pages are designed to captivate users with
attractive images, colors, and engaging content, aiming to provide a diverse and appealing user experience.
 Similarities:
+ Both wireframes and actual web pages share a common structure, featuring a header, navigation menu, and main
content area to introduce the content and functionality of the website. They both aim to attract users to the website and
provide essential information about its content and features.
Figure 26. Contact Page

 Contact Page:
 Differences:
+ In wireframes, the contact page typically only displays basic elements such as a contact form and contact information,
focusing on structure and functionality. In contrast, actual web pages utilize attractive designs and interactive elements
like validation and feedback to enhance the user experience.
 Similarities:
+ Both wireframes and actual web pages provide users with a means to contact the website owner through a contact form
or contact information. They emphasize creating a user-friendly and convenient interface for users to send messages or
contact requests.
Figure 27. Log In Page

 Login Page:
 Differences:
+ Wireframes for login pages usually show input fields for credentials and a login button without any interactive features.
Conversely, actual login pages may incorporate hover effects, animations, or validation to improve the user experience.
 Similarities:
+ Both wireframes and actual web pages offer a user interface for users to input login credentials and access protected
features of the website. They serve the common purpose of providing a secure login mechanism for users.
Figure 28. Register Page

 Register Page:
 Differences:
+ Wireframes typically display basic registration fields and a submit button, focusing on structure and functionality. In
contrast, actual web pages feature more attractive designs and interactive elements like validation and feedback to assist
users during the registration process.
 Similarities:
+ Both wireframes and actual web pages provide users with a means to create a new account on the website. They aim to
simplify the registration process and gather necessary information from users to set up their accounts.
Figure 29. Profile Page

 Profile Page:
 Differences:
+ Wireframes for profile pages usually show basic elements like user menu, personal information, and account settings
without detailed aesthetics or interactivity. Conversely, actual profile pages feature more attractive designs and
interactive elements like links and charts to enhance the user experience.
 Similarities:
+ Both wireframes and actual web pages allow users to manage their personal information and account settings on the
website. They emphasize providing a user-friendly interface for users to update their details and preferences.
Figure 30. My Cart Page

 My Cart Page:
 Differences:
+ Wireframes typically show a list of products and editing options without detailed visuals or interactivity. Conversely,
actual cart pages feature more attractive designs and interactive elements like purchase buttons and hover effects to
create a more engaging user experience.
 Similarities:
+ Both wireframes and actual web pages enable users to view and manage items in their shopping cart on the website.
They aim to provide a convenient interface for users to review and proceed with their purchases.

5. Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development
stages (M5)
a. Present about QA, steps in QA

Quality Assurance (QA), or quality control, is a process used in various fields to ensure that products or services meet certain quality
standards before they are released to the market or delivered to customers. QA is an integral part of comprehensive quality
management and is often conducted alongside testing.

Here are some basic concepts related to QA:

 Quality Standards: These are criteria or benchmarks that products or services need to meet. These standards may include
requirements for accuracy, performance, reliability, security, and customer satisfaction.
 QA Process: This consists of a set of procedures, methods, and tools used to ensure that products or services meet quality
standards. The QA process typically involves designing, implementing, monitoring, and improving production or delivery
processes.
 Quality Control (QC): This is the process of checking products or services after they have been produced to determine
whether they meet quality standards. QC typically focuses on detecting and correcting errors or deficiencies in products or
services.
 Testing: As part of the QA process, testing involves placing products or services under specific conditions to evaluate their
accuracy, performance, and capacity. Testing techniques may include black-box testing, white-box testing, integration
 testing, and system testing.
 Process Quality Control: This involves checking and ensuring that the processes used to produce products or services meet
quality standards. Measures for process quality control may include establishing standard procedures, training employees,
and monitoring compliance with processes.
 Quality Assurance (QA): This is the overall process of ensuring that quality standards are clearly defined and adhered to
throughout the production or delivery of products or services.
 The goal of QA is not only to detect and fix errors after they occur but also to prevent them from occurring in the first place.
This helps build customer confidence, improve organizational performance, and minimize risks.

The QA process typically includes several specific steps to ensure that products or services meet quality standards. Here are some
common steps in the QA process:

 Identify Requirements and Quality Standards: The first step of the QA process is to clearly define the requirements and
quality standards that the product or service needs to meet. This may involve analyzing customer requirements, industry
standards, and legal requirements.
 Design Testing and Process Control: Once the requirements and quality standards have been identified, the QA process
continues with designing tests and process controls to ensure that the product or service is created in a way that meets these
requirements. This may involve developing test plans, building prototypes and models, and establishing quality control
procedures.
 Implement Testing and Process Control: After the process has been designed, the next step is to implement the planned tests
and process controls. This includes performing testing steps, monitoring production or delivery processes, and collecting data
to evaluate performance.
 Detect and Fix Errors: During the implementation of testing and process control, errors and discrepancies may be detected.
This step involves identifying, documenting, and correcting these errors to ensure that the product or service meets quality
standards.
 Monitor and Evaluate: After the product or service has been created, the QA process continues with monitoring and
evaluating performance to ensure that quality standards are still being met. This may involve gathering feedback from
customers, monitoring quality metrics, and conducting internal evaluations.
 Continuous Improvement: Finally, the QA process is continuously improved based on evaluation results and feedback. This
way, organizations can continuously improve production or delivery processes to ensure that product or service quality is
 maintained and enhanced.

b. Clarify which steps you had applied in your web development with evidences
In our web development project, we meticulously followed the steps outlined in the Quality Assurance (QA) process to ensure that
our product met the defined quality standards. Here's how we applied each step with evidence:

 Identify Requirements and Quality Standards:

+ We began by thoroughly analyzing the requirements provided by our client and industry standards for web development.
+ Evidence: Documented requirements gathered from client meetings, emails, and project briefs.
 Design Testing and Process Control:
+ We developed comprehensive test plans outlining various scenarios to ensure the functionality, performance, and
security of the website.
+ Prototypes and wireframes were created to visualize the layout and functionality before actual development.
+ Quality control procedures were established, including code reviews, version control, and deployment pipelines.
+ Evidence: Test plans, prototypes, wireframes, and documented quality control procedures.
 Implement Testing and Process Control:
+ During the development phase, we executed the designed tests and process controls.
+ Automated testing scripts were utilized for functional, integration, and regression testing.
+ Continuous integration and deployment pipelines were set up to ensure that code changes were tested and deployed
efficiently.
+ Evidence: Automated test scripts, CI/CD pipeline configuration, and documented deployment processes.
 Detect and Fix Errors:
+ Throughout the development process, any errors or discrepancies identified during testing were promptly documented
and addressed.
+ Issues were tracked using project management tools, and resolutions were communicated among the development
team.
+ Evidence: Issue tracking logs, communication records, and updated code repositories reflecting bug fixes.
 Monitor and Evaluate:
+ After the website was launched, we continuously monitored its performance and collected feedback from users.
 + Quality metrics such as page load times, error rates, and user engagement were monitored using analytics tools.
+ Customer feedback was gathered through surveys, user interviews, and feedback forms.
+ Evidence: Analytics reports, customer feedback summaries, and performance monitoring logs.
 Continuous Improvement:
+ Based on the evaluation results and feedback received, we iteratively improved the website to enhance its quality and
user experience.
+ Regular updates and feature enhancements were rolled out to address user needs and technological advancements.
+ Lessons learned from previous iterations were incorporated into future development cycles.
+ Evidence: Release notes, feature enhancement documentation, and records of iterative improvements.

6. Evaluate the design and development process against your design document and analyse any technical challenges (D2)
a. Evaluate the design document, evaluate development process, show any differences between them
 Evaluation of Design Documentation:
 Clear and Comprehensive:
+ The design documentation provides a clear and detailed overview of the structure and features of the e-commerce
website. Each section Clarify which steps you had applied in your web development with evidences of the
documentation, from objectives to user interface and technical features, is described comprehensively to ensure
clarity.
 Consistency:
+ The design documentation is consistent with the initial goals and requirements without any inconsistencies or
contradictions. All changes or adjustments are documented and transparent, maintaining consistency throughout the
development process.
 Feasibility:
+ The proposed solutions and features in the design documentation are evaluated to be technically feasible and
implementable without encountering major issues. The documentation provides specific and reasonable means to
deploy the features, ensuring feasibility and implementation capability.
 Flexibility and Adaptability:
+ The design documentation provides flexible frameworks to adapt to changes or updates during the development
process. Adjustments and changes can be easily and quickly made without compromising the project's
 consistency.
 Evaluation of Development Process:
 Efficiency:
+ The development process proceeds efficiently, utilizing resources and time effectively to achieve progress and goals.
All tasks are completed timely and meet the set requirements without sacrificing efficiency.
 Consistency:
+ The development process is consistent with the design documentation, with no inconsistencies or contradictions. All
changes are discussed and agreed upon before implementation, maintaining project consistency.
 Quality Assurance:
+ The development process applies quality assurance measures to ensure that the final product meets the highest
standards. Any errors or issues are identified and promptly addressed to ensure product quality.
 Flexibility and Adaptability:
+ The development process is flexible and capable of adapting to changes or new requirements during development.
Mechanisms are in place to adjust and adapt to any changes flexibly and effectively.

Here are the specific differences between the evaluation of design documentation and the development process:

 Objectives and Scope:

+ Design Documentation: Focuses on the objectives and scope of the project, clearly describing the requirements,
features, and expected user interface. It not only identifies "what" will be built but also "why" and "for whom."
+ Development Process: Focuses on implementing and building components of the project based on the design
documentation. In this process, features are broken down into specific tasks and distributed among team members.
 Detail and Specificity:
+ Design Documentation: Typically high in detail and provided in a dense document. It includes detailed descriptions of
how users will interact with the website, as well as specific technologies and techniques to be used.
+ Development Process: Focuses on implementing the requirements outlined in the design documentation.
Programmers often need to learn and apply specific technologies and techniques to build features and user
interfaces as required.
 Time and Phases:
 + Design Documentation: Typically created at the initial stage of the project, before any programming code is written.
It serves as a general design blueprint for the project.
+ Development Process: Proceeds through specific time-bound phases, from developing basic features to testing,
deployment, and maintenance. This process can last from a few weeks to several months, depending on the scope
and complexity of the project.
 Changes and Adjustments:
+ Design Documentation: Typically flexible to accommodate changes and adaptations in requirements or feedback
from clients before the development process begins.
+ Development Process: Also requires flexibility to adjust and adapt to changes during development. New
requirements or changes often need to be assessed and integrated into the development process logically.

Overall, the difference between evaluating design documentation and the development process lies in the level of detail, timing,
and objectives of each part. While design documentation focuses on identifying project requirements and goals, the
development process executes these requirements and produces the final product.

b. Show the technical challenges/difficulties in web development with evidences & explanation

Technical challenges in web development can vary depending on the project's complexity and requirements. Here are some
common challenges along with examples and explanations:

 Scalability: One of the significant challenges in web development is ensuring that the system can handle increased load and
traffic without performance degradation. For instance, if an e-commerce website experiences a sudden surge in traffic due to
a promotion or holiday season, the server infrastructure should be capable of scaling up to meet the demand without
crashing.
 Security: Protecting user data and preventing unauthorized access is crucial for any web application. Implementing proper
authentication and authorization mechanisms, encrypting sensitive information, and guarding against common security
threats such as SQL injection and cross-site scripting (XSS) attacks are essential. For example, ensuring that payment
information is securely transmitted and stored to prevent fraud.
 Compatibility: Ensuring that the website works correctly across different browsers and devices can be challenging. This
involves testing and optimizing the website's layout and functionality for various screen sizes, resolutions, and browser
 versions. For instance, making sure that the website renders correctly on both desktop and mobile devices, and functions
properly on different browsers like Chrome, Firefox, and Safari.
 Performance Optimization: Optimizing website performance is critical for providing a smooth user experience. This includes
minimizing page load times, optimizing images and assets, and reducing unnecessary network requests. For example,
implementing caching mechanisms to store frequently accessed data locally can help reduce server load and improve
response times.
 Third-party Integrations: Many websites rely on third-party services and APIs for features such as payment processing, social
media integration, and analytics. Integrating these services seamlessly into the website while ensuring reliability and security
can be challenging. For instance, integrating a payment gateway API to facilitate online transactions while ensuring data
privacy and compliance with payment industry standards.
 Maintainability: As web applications grow in complexity, maintaining and updating the codebase becomes increasingly
challenging. Implementing clean and modular code, following best practices such as version control and code
documentation, and regularly refactoring code to improve readability and maintainability are essential. For example,
ensuring that the codebase is well-structured and organized to facilitate future updates and enhancements.

In summary, web development involves various technical challenges, ranging from scalability and security to compatibility and
performance optimization. Addressing these challenges requires careful planning, implementation, and ongoing maintenance to
ensure the success of the project.

7. 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
(D3)
a. Test result evaluation, review overall success of multipage website
The overall success of the multipage website can be evaluated based on various aspects such as functionality, user experience,
performance, and adherence to requirements. Here's a review of its overall success:

 Functionality: The multipage website has demonstrated success in providing essential functionality such as navigation
between pages, adding products, searching, and completing the checkout process. These core functions appear to be
working as intended, contributing positively to the overall success of the website.
 User Experience: The user experience is a critical aspect of any website's success. In this case, the website has shown
proficiency in providing a satisfactory user experience through responsive design, consistent navigation, and effective layout
adaptation across different screen sizes. Users can easily navigate through the website and access the desired information or
features.
 Performance: The performance of the website, including factors like loading time and responsiveness, significantly impacts
user satisfaction. The website has demonstrated good performance overall, with pages loading within expected timeframes
and adapting well to different devices. However, there are areas identified for improvement, such as optimizing loading time
further and addressing issues related to broken links.
 Compliance and Error Handling: The website's compliance with standards and its ability to handle errors appropriately are
crucial for maintaining trust and credibility. While the website performs well in certain areas such as language localization
and login/logout functionality, there are areas where it falls short, such as form validation and error handling. These
shortcomings need to be addressed to enhance the overall reliability of the website.
 Design and Aesthetics: The visual appeal and coherence of design elements contribute to the overall success of a website.
While the website generally adheres to design specifications, there are instances where the color scheme and font
consistency could be improved for better alignment with the intended design.
b. Provide justified recommendations of improvements
 Enhancing Error Handling and Compliance:
+ Reason: Inaccurate error handling and non-compliance with standards can lead to user inconvenience and loss of trust.
This can result in a subpar user experience and reduce the ability to attract and retain users.
+ Proposal: Improve the error handling system and ensure that the website adheres to industry standards and legal
requirements. Check and rectify any errors accurately and reasonably to ensure a smooth and reliable user experience.
 Optimizing Performance:
+ Reason: Poor performance can lead to sluggish user experience and undermine user trust in the website. Users typically
have little patience and may quickly switch to other websites if yours loads slowly or is unresponsive.
+ Proposal: Implement performance optimization measures such as image optimization, caching, and code optimization to
reduce page load times and improve website responsiveness.
 Enhanced Error Checking and Handling:
+ Reason: Poor error checking and handling can result in user dissatisfaction and loss of trust. Ineffective error handling can
diminish the user experience and negatively impact the website's reputation.
 + Proposal: Improve the error checking and handling process by creating detailed test cases, ensuring that all errors are
detected and reported accurately. Provide clear and helpful error messages so that users can understand and address
issues more easily. Ensure that all issues are addressed promptly and effectively to maintain the stability and reliability of
the website.
 Enhanced Form Validation and Aesthetics:
+ Reason: Malfunctioning forms and unattractive designs can negatively impact the user experience and create a poor
impression with customers.
+ Proposal: Enhance the validation of forms and ensure they reflect an attractive and aesthetic design to enhance the
professionalism and attractiveness of the website.
 Improving Convenience and User-Friendliness:
+ Reason: Convenience and user-friendliness are crucial factors in retaining users on the website. An inconvenient or
complex user experience can lead to user attrition.
+ Proposal: Ensure that website navigation is easy to understand and convenient, with accessible and user-friendly features
and functionalities. Improve the user interface and optimize processes to create a smooth and easy experience for users.
c. Show the advantages, disadvantages of his/her web project
 Advantages:
 Flexibility and Scalability:
+ A multi-page architecture provides high flexibility for expanding and developing the project. New pages can be added
easily without affecting the existing structure, allowing the project to scale to meet growing user needs.
 Diverse and Rich Content:
+ With multiple pages, the project can offer various types of content and information. From products and services to guides
and informative articles, the website provides a diverse and rich user experience.
 Flexibility in Development:

+ The project can be developed in parts or modules, with each part corresponding to a specific page. This allows for parallel
and more efficient development, minimizing risks and development time.
 Good Hierarchy and Organization:
 + A multi-page architecture is often easier to organize and manage compared to a single-page website. Pages can be
categorized based on functionality or content, making it easier for managers to track and maintain the website.
 High Customizability:
+ Each page can be customized individually to meet specific user or business requirements. This allows the project to adapt
flexibly to new requirements and evolve over time.
 Disadvantages:
 Complexity in Maintenance and Management:
+ A multi-page architecture can introduce complexity in managing and maintaining the project. Maintaining consistency
between pages and features requires careful attention and patience, especially as the project grows.
 Challenges in Ensuring Consistent Design and User Experience:
+ With multiple pages and features, ensuring consistency in design and user experience can be challenging. This can lead to
confusion and misunderstanding for users, impacting the website's image and credibility.
 Increased Development and Maintenance Costs:
+ Developing and maintaining a project with a multi-page architecture can increase costs due to requiring more work and
resources. This can reduce the economic benefits of the project and increase financial risks.
 Potential Data and Database Management Conflicts:
+ With multiple pages and features, conflicts in data and database management may arise. Ensuring data consistency and
security becomes a challenge for the development team.
 Extended Development Time:
+ With a large project with many pages, the development time is often longer compared to a simpler project. This can
increase costs and risks for the project, especially if there's no clear and efficient development plan.
III. CONCLUSION

In conclusion, the journey of designing and developing a branded, multipage website is a meticulous process that requires careful
planning, execution, and evaluation. By adhering to client and user requirements, leveraging appropriate tools and technologies, and
following established principles and guidelines, we've been able to create a website that not only meets expectations but also
exceeds them in terms of functionality, usability, and aesthetics.

Through the rigorous testing and evaluation processes, we've identified areas of success and areas for improvement, providing
valuable insights that can guide future iterations and enhancements. The implementation of a robust QA process has ensured the
quality and reliability of the website, instilling confidence in its performance and usability.

As we continue to evolve and refine the website, it's imperative to remain agile and responsive to changing needs and technological
advancements. By embracing feedback, addressing challenges, and embracing a mindset of continuous improvement, we can ensure
that the multipage website remains a valuable asset, serving its purpose effectively and delighting its users for years to come.

IV. REFERENCE LIST

[1] (No date) What is Use Case Diagram? Available at: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-use-case-diagram/ (Accessed: 6 April 2024).

[2] Blog, T. (2024) HTML là gì? Các tag thông dụng của HTML dành cho lập trình viên, TopDev. Available at:
https://topdev.vn/blog/html-la-gi/ (Accessed: 6 April 2024).

[3] Writers, G. (2022) CSS Là Gì? Ngôn Ngữ CSS Dùng Để Làm Gì? , Glints Vietnam Blog. Available at:
https://glints.com/vn/blog/css-la-gi/ (Accessed: 6 April 2024).

[4] (No date). Available at: https://aws.amazon.com/vi/what-is/javascript/ (Accessed: 6 April 2024).

[5] Team, D. (2023) SQL vs NoSQL comparison: MySQL, PostgreSQL, MongoDB & Cassandra, Devathon. Available at:
https://devathon.com/blog/sql-vs-nosql-mysql-vs-postgresql-vs-mongodb-vs-cassandra/ (Accessed: 6 April 2024).

[6] Blog, T. (2024) Git là gì? Các lệnh git cơ bản mà mọi lập trình viên nên biết, TopDev. Available at: https://topdev.vn/blog/git-
la-gi/ (Accessed: 6 April 2024).

[7] Ha, T. (2021) So sánh Amazon Web Services, Microsoft Azure và Google Cloud, Giải Pháp Số. Available at:
https://giaiphapso.com/so-sanh-amazon-web-services-microsoft-azure-va-google-cloud/ (Accessed: 6 April 2024).

[8] Woke, G. (2023) The difference between libraries and frameworks, Simple Talk. Available at:
https://www.red-gate.com/simple-talk/development/other-development/the-difference-between-libraries-and-frameworks/
(Accessed: 6 April 2024).

[9] Olayemi, F. S. (2023) An Overview of Node.js Build Tools and Task Runners, DEV Community. DEV Community. Available at:
https://dev.to/saint_vandora/an-overview-of-nodejs-build-tools-and-task-runners-2ghm (Accessed: 6 April 2024).
[10] MozDevNet (no date) Package management basics - Learn web development: MDN, MDN Web Docs. Available at:
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management
(Accessed: 6 April 2024).