ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name DAO VAN HIEU Student ID GCH211135

Class GCH1105 Assessor name LAI MANH DUNG

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 hieu

Grading grid

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

Grade: Assessor Signature: Date:

Signature & Date:
Contents
P5 Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user
requirements................................................................................................................................................................................................................... 4
1. Create a design document ............................................................................................................................................................................... 4
1.1 Client and customer requirement ..................................................................................................................................................................... 4
2. Diagram ............................................................................................................................................................................................................ 5
2.1 Flow diagram ............................................................................................................................................................................................ 5
2.2 Adminitrator diagram ............................................................................................................................................................................. 6
2.3 Customers diagram .................................................................................................................................................................................. 7
3. Wireframe......................................................................................................................................................................................................... 8
4. Sitemap............................................................................................................................................................................................................ 15
P6 Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with
realistic content. ........................................................................................................................................................................................................... 16
1. Implement and produce technical documentation describing, in technical language, how all of the features of the system were
created ..................................................................................................................................................................................................................... 16
P7 Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your website. User
Experience (UX) and User Interface (UI) .................................................................................................................................................................... 28
P5 Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of
client and user requirements.
1. Create a design document

1.1 Client and customer requirement

Introduction to Inwood, an e-commerce website specializing in providing products and services related to interior design and
decoration. Inwood's goal is to offer customers high-quality products and services at reasonable prices, ensuring customer satisfaction.

The Inwood website is designed with a user-friendly interface that is easy to use and accessible on various devices.

Features of the website include:

- Homepage: Showcases featured products and introduces Inwood's brand and services.
- Product categories: Classifies products by category, making it easy for customers to search and choose products.
- Product search: Allows customers to search for products by keywords, price range, style, material, size, color, etc.
- Product details: Displays detailed information about products, helping customers to have a clear view of the product before
making a purchase decision.
- Shopping cart: Allows customers to add products to the cart, delete products from the cart, update the quantity of products, and
calculate the total order value.
- Payment: Provides multiple payment methods such as online payment, payment on delivery, bank transfer.
- Login function is an important part of an e-commerce website, allowing customers to access their accounts to manage personal
information, purchase history, and processing orders. Customers can also easily perform functions such as registration,
ordering, and payment faster through their account.
- Account registration: Allows customers to register an account, store personal information, shipping address, purchase history,
helping customers save time when making future purchases.
- Rating and commenting feature: Allows customers to rate and comment on products, helping customers have an overall view
of product quality and make better purchase decisions.
- Product sharing feature: Allows customers to share products on social networks, helping Inwood reach more new customers.
- Mobile optimization: Given that a large number of users will be accessing Inwood via mobile devices, the website should be
optimized for mobile viewing. This can be achieved through the use of responsive design, which automatically adjusts the
layout and content of the website to fit the size of the user's screen.
- Security: As an e-commerce website, security is of the utmost importance. Inwood should ensure that all user data is encrypted
and that all payment transactions are processed securely. This can be achieved through the use of SSL encryption and a secure
payment gateway.

2. Diagram
2.1 Flow diagram

Figure 1: Flow diagram

2.2 Adminitrator diagram

Figure 2: Adminitrator diagram

2.3 Customers diagram

Figure 3: Customers diagram

 3. Wireframe

This is wireframe for page home.

Figure 4: Wireframe for page home

This is wireframe for page product.

Figure 5: Wireframe for page product

This is wireframe for page categories.

Figure 6: Wireframe for page categories.

This is wireframe for page about.

Figure 7: Wireframe for page about

This is wireframe for admin page.

Figure 8: Wireframe for admin page

This is wireframe for cart page.

Figure 9: Wireframe for cart page

This is wireframe for login.

Figure 10: Wireframe for login

4. Sitemap

Figure 11: Sitemap

P6 Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website
supported with realistic content.
1. Implement and produce technical documentation describing, in technical language, how all of the features of the system
were created
a. Login

Figure 12: Login interface

Figure 13: Php login

Figure 14: Html login

This is a combination of PHP and HTML code to create a login form and authenticate user accounts. Specifically:

- The $user array stores the login username and password information of valid users. In this example, there are two accounts
"admin" and "iamdvh", with the password being "admin" for both.
- When the user clicks the "Login" button on the form, the login information is sent to a PHP file for processing. First, the code
checks if the $_POST['username'] and $_POST['password'] variables have been initialized or not. If they have, the code
retrieves their values into the $username and $password variables and checks if the login information is valid by comparing
them to the values in the $user array.
- If the login information is valid, the code redirects the user to the home.php page using the header() function and ends the
processing with the exit command.
- If the login information is invalid, the $error variable is initialized with the value "Wronged username or password!!!" to
inform the user of the error.
- The HTML code is used to create a login form with input fields for the user to enter their login information. If the $error
variable has been initialized, the error message will be displayed on the screen.
b. Search by categories

Figure 15: Search interface by categories

 Figure 16: Source code search by category

The first code segment declares two multidimensional arrays ($cat and $ct) containing information about categories and products.
Each element of the $cat array contains information about a category including ID (1, 2 or 3) and category name ("Bedroom", "Living
Room" or "Kitchen"). Each element of the $ct array contains information about a product including ID (1 to 18), product name,
product image path, product description, price, and the ID of the corresponding category.
 Figure 17: For loops of categories

The next part of the code consists of two for loops to display the corresponding categories and products. The first loop is used to
iterate through the elements of the $cat array and display the category name and the corresponding category page link. The second
loop is used to iterate through the elements of the $ct array and display information about the products. If the current page is a
category page, this loop only displays products that belong to the corresponding category.
Within the loop that displays products, there is a condition used to check whether the product belongs to the selected category or not.
If it does not belong, the continue function is used to skip that product and move on to the next one.

Finally, the code displays the products and the corresponding product detail page link. Additionally, the code allows users to add
products to the cart by clicking the "Add to cart" button.

c. Search products by search bar

Figure 18: Search products by search bar

 Figure 19: Source code of Search products by search bar

This is a PHP code used to display a list of products on an e-commerce website. The code uses a for loop to iterate through the $ct
array containing information about the products. If the user has searched for a product by entering a keyword in the search form and
submitting it to the current page, the code will check if the product name contains that keyword. If the keyword is not found in the
product name, that product will be skipped using the continue function in the loop.
Each product is displayed in a div with class "product-item" that contains information about the product name, price, image, and an
"Add to cart" button to add the product to the cart. The product name is displayed using an a tag with an href attribute pointing to the
corresponding product detail page. The product image is displayed using an img tag. The product information is retrieved from the $ct
array, including the product ID, name, image URL, product description, and price.

d. Add to cart

Figure 20: Source code add to cart

This is HTML code for a link that will add a product to a shopping cart. When the user clicks on the link, it will direct them to a PHP
script that handles adding the product to the cart.

The PHP script likely uses the cartid parameter to identify which product to add to the cart. The value of $ct[$i][0] may be generated
dynamically based on the product that the user is adding.
 Figure 21: Add to cart

The loop iterates through each element of the array using a for loop and checks if a variable called $_GET['cartid'] is set. If it is set,
the code checks if the value of $cartid is not equal to the first element ($ct[$i][0]) of the current array element. If the two values are
not equal, the loop skips to the next iteration using the continue statement.

e. CSS reset
 Figure 22: Source code of css reset

The * selector is a universal selector that selects all elements on the page.

margin: 0 sets the margin of all elements to 0, which removes any default margin that might be applied by the browser.

padding: 0 sets the padding of all elements to 0, which removes any default padding that might be applied by the browser.

box-sizing: border-box changes the default box model used by the browser to calculate the size of elements. By setting the box-
sizing property to border-box, the width and height of an element includes any padding and border added to it, instead of being
added on top of the width and height. This can make it easier to create layouts that fit together neatly without unexpected gaps or
overlaps.

f. How to display section-detail in product.php when user clicked.

 Figure 23: Source code display section-detail in product.php when user clicked

The PHP code checks if the productid parameter is set in the URL query string by using the isset() function. If the parameter is set, it
then checks if the value of productid is greater than 0. If both conditions are true, it includes the section-detail.php file which contains
the HTML and PHP code to display the product details section on the page.
P7 Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of
your website. User Experience (UX) and User Interface (UI)

NO. TEST CASE DECRIPTION ACTUAL EXPECTED OVERALL

RESULT RESULT
1. Sign in with wrong Enter wrong username: “admid” Error Error Pass
username instead of “admin”
2. Sign in with wrong Enter wrong password: “12345” Error Error Pass
password instead of “admin”
3. Sign in with empty Not enter username Error Error Pass
username
4. Sign in with empty Not enter password Error Error Pass
password
5. Sign in with Twitter Enter the Twitter account Error Success Fail
6. Sign in with Enter the Facebook account Error Success Fail
Facebook account
7. Sign in with Enter the Instagram account Error Success Fail
Instagram account
8. Test Sign in with Sign in with username: “admin” Success Success Pass
Exact Username and Sign in with password: “admin”
Exact Password
9. Test signing in with a Sign in with username: Success Success Pass
different exact “iamdvh”
username and the Sign in with password: “admin”
exact password.
10. Sign up Sign up new account Success Error Fail
11. Sign up with the Sign up with username “admin”, Error Success Fail
username has been password “admin”
used
12. Test Signup with Sign up with user name contain Error Success Fail
wrong common special characters such as 8@9,
username structure 8#9, <%=
13. Test Signup with Sign up with the length of Error Success Fail
wrong common password less than 8
password structure
14. View all products & Check all products & categories All products & All products & Pass
categories on home on home page categories in home categories in home
page page page
15. Test link item Clicking on a products on All Information of All Information of this
homepage this product be product be fetched in Pass
fetched in details details page
page
16. Test checking Add products to cart before Error Error Pass
assurance of system Signin or Signup
17. Test checking Purchase an order when Error Error Pass
assurance of system 2 information about address &
phone still empty
18. Test checking Searching info with a string not Not return “Nothing Return “Nothing Fail
assurance of system 3 like any product name Match” Match”
19. Test checking Try Clicking on Cart before Not return “Notice Return “Notice Fail
assurance of system 4 Signin or Signup message” message”
20. Test Functional Update or edit profile when Unable to handle Able to handle profile Fail
ability Signed in profile
21. Test Functional Log out Able to log out Able to log out Pass
ability 2
22. Test Functional Edit or Delete available products Unable to Edit and Able to Edit and Fail
ability 3 with admin power Delete Delete
23. Test Functional Add products with admin power Unable to add Able to add Fail
ability 4
24. Test Functional Filter by categories Products are filtered Able to filter Pass
ability 5 by category
25. Test Functional Search products by name in the Products appear Products appear Pass
ability 6 system
26. Test Functional Click on the product name to Display the product Display the product Pass
ability 7 display the product details. details. details.
27. Test Functional Add product to cart Product has been Product has been Pass
ability 9 added to the cart added to the cart
 28. Test Functional Add products to cart Only able to add a Products has been
ability 10 single product to the added to the cart Fail
cart
29. Test Functional Add a product with multiple Unable Able Fail
ability 11 quantities of the same item
30. Test Functional Remove a product from the cart Able to remove Able to remove Pass
ability 12

M4 Compare and contrast the multipage website created to the design document.
Design document My website Solution
Homepage Homepage: Showcases featured Compared to the design document,
products and introduces Inwood's my current website does not have
brand and services. the featured products of the brand
“Inwood” but focuses on None
displaying products and products
by category. Of course, my home
page also introduces the brand and
service of “Inwood”
Product categories Classifies products by category, Generally, my product categories
making it easy for customers to website site has classified products None
search and choose products. by category for customers to easily
search and select products.
Product search Allows customers to search for Our website's product search page To solve the issues with
products by keywords, price range, allows customers to search for searching for products based
style, material, size, color, etc. products by keyword, where they on multiple attributes (such as
can enter a word or a letter and any size, price, and color) more
product containing that word or efficiently than using only
letter in its name will be displayed. PHP arrays, a better approach
Of course, we also have a feature is to use a database and
where if a product's name is in complex SQL queries to
uppercase letters and you search retrieve matching products.
for it in lowercase letters, the Instead of storing products in
product will still appear. However, a PHP array, I can store them
 our product search function is in a database and use SQL
limited to keyword searches and queries to search for products
does not currently allow customers based on different attributes.
to search by price range, style, For example, I can use the
material, size, or color. SELECT statement to retrieve
products by size, price, color,
and then combine the results
to return a list of matching
products.

Product details Displays detailed information about The product details page is
products, helping customers to have a something we pay great attention
clear view of the product before to and are meticulous about
making a purchase decision. because it helps customers have a
clearer view of the product before
they decide to make a purchase. It None
avoids situations such as
customers ordering the wrong
color, size, or material, which is
one of the decisive factors in
receiving high or low ratings.
Payment Provides multiple payment methods My shopping cart page allows When users add products to
such as online payment, payment on adding products to the cart, but it their cart, I can create a new
delivery, bank transfer. still has limitations in several record in the database to store
aspects. For example, only one information about that
product can be added to the cart at product. Each record can
a time, and if you add another include fields such as product
product, the shopping cart will id, name, quantity, and price.
automatically remove the old Then, when users want to
product and add the new one. view their cart, I can query
the database to retrieve all the
product records in their cart
and display them on the
website. By doing this, I can
store cart product information
 more efficiently and ensure
that all products are displayed
correctly when users review
their cart.
Login function An important part of an e-commerce My login page allows customers to To solve the issue with
website, allowing customers to log in to access the shopping page logging in using social media
access their accounts to manage and view their account accounts such as Twitter,
personal information, purchase information. However, there are Facebook, and Instagram, I
history, and processing orders. still several limitations: customers can investigate and verify that
Customers can also easily perform can only log in with an account the necessary APIs and
functions such as registration, that has been previously set up and configurations are properly
ordering, and payment faster through cannot log in with "Twitter", set up in the authentication
their account. "Facebook", or "Instagram" system to allow for social
accounts. However, if the user media login. I can also ensure
does not have an account, they can that the login code correctly
still view products by accessing handles the responses from
the website for customers without these APIs.
an "Inwood" account.
Additionally, users without an In addition, to prevent non-
account can still make purchases. registered users from
accessing the admin page and
product management, I can
implement a user
authentication check that
redirects non-authenticated
users to the login or
registration page. I can also
implement form validation to
require the user to provide
necessary information such as
recipient details when placing
an order. By fixing these
issues, we can prevent losing
potential customers and
improve the overall security
 and user experience of the
website.
Account registration Allows customers to register an The account registration page can I can create a registration
account, store personal information, be considered quite important for page, then I need to ensure
shipping address, purchase history, customers to store personal that the information the user
helping customers save time when information, shipping address, provides is correct and not
making future purchases. purchase history, helping duplicated with other
customers save time when buying accounts in my database.
next time. However, our website When the user completes the
does not meet the criteria of the registration process, I need to
design document, so we do not store the user's information in
have a page for users to register for the final database and redirect
an account. the user to the homepage.
Mobile optimization Given that a large number of users My website does not have a I can search for online
will be accessing Inwood via mobile responsive design, so the website courses or other learning
devices, the website should be is distorted and difficult to resources to learn how to
optimized for mobile viewing. This navigate on smaller screens, which create a responsive website.
can be achieved through the use of leads to a poor user experience and Alternatively, I can also use
responsive design, which they will feel frustrated while CSS libraries or frameworks
automatically adjusts the layout and navigating the website, which can such as Bootstrap or
content of the website to fit the size lead to them leaving the website Foundation to quickly and
of the user's screen. without making any purchases. efficiently create a responsive
website.

M5 Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development
stages.

1. Review of software quality control process.

1.1 Design document phase

In the process of designing the design document, I consulted some guidelines in order to design a good design document that is
suitable for current trends. One of the essential criteria for the website document is the purpose of the website. I have thought and
researched on current e-commerce websites such as "Shopee", "Tiki", "Lazada" and drew experience to determine the ultimate
purpose of our website, which is to design the website to bring customers high-quality products and services at reasonable prices,
ensuring customer satisfaction. The second important thing that I brainstormed to think about is the target users. Most of the people
who visit our website to buy goods are those who have little knowledge about technology. Therefore, the design document for the
website must be designed with a user-friendly interface, easy to use, and accessible on many devices. My design document must
describe other features of the website, including features such as product search, product rating, product sharing, filtering, etc.

1.2 Programming phase

During the programming phase, I used HTML to create the structure of the content based on the wireframes that I designed.
Combining with CSS allowed me to edit the attributes of HTML elements, such as color, size, font, width, height, position, and
effects. One of the attributes that I frequently used is "hover" to create additional effects when users hover over an element.

I also used PHP, although there were some limitations with my current knowledge, so I could only simulate a database using an array
to store information for users to filter or search for products, or to display products on the screen

1.3 Testing phase

Problem Solution
Syntax error In the process of implementing the search I closed the curly brace and the program
function using a for loop, I received an ran normally again.
error message indicating that a curly brace
was not closed.

Path error
When I used relative path to move from Where ".." will go back to the parent
the styles directory to the image directory directory of the current directory (the
to display the image, the image did not directory that contains the style.css file),
appear on the web interface, even though and from there I accessed the image
the path seems correct. directory and found the desired image file
to use.
 1.3.1 Test form operating in website

No. What being tested Evaluate After Testing based on Criteria

 Validation in this form is not really fine
 Check the structure of the user name
 and password quite bad
 Check data existed well
 Other criteria passed
1.

1.3.2 Test link

No. What being tested Evaluate After Testing

1. http://localhost/php/ASM2/login.php Connect Well
2. http://localhost/php/ASM2/home-guess.php Connect Well
3. http://localhost/php/ASM2/home.php Connect Well
4. http://localhost/php/ASM2/product.php Connect Well
5. http://localhost/php/ASM2/category.php Connect Well
6. http://localhost/php/ASM2/about.php Connect Well
7. http://localhost/php/ASM2/cart.php Connect Well
8. http://localhost/php/ASM2/admin.php Connect Well
 1.3.3 Content checking for QA

Page Evaluate QA
 A simple, clean, and friendly theme
 Product content and names are meaningful, and sufficient
information is displayed.
 Images must be appropriately sized and placed.
 The slider is in the proper position.
 Anchor in navigation and anchor are both functional.

 Aesthetic theme.
 The detailed content is informative and provides enough
information about the product.
 Images must be appropriately positioned and sized.

1.3.4 Test redirection

Redirecting pages from the website homepage (AMS2/home.php)

 No. Accesible Pages from Website HomePage Evaluate
1. Login.php Ability to access
=> Success
2. Product.php Ability to access
=> Success
3. Categories.php Ability to access
=> Success
4. About.php Ability to access
=> Success
5. Cart.php Ability to access
=> Success
6. Admin.php Ability to access
=> Success

1.3.5 Compatibility test

I tried 2 different screens to test the responsiveness

Ipad pro (1024 * 1366) The slider display images all good in
ipad pro

The website is distorted and difficult to

Iphone 12 pro navigate.
 2. Elution of software quality control process.

Test process Evaluation Overall success rate

Web Functional Ability Test In general, the website's functions are logical, 6/10
consistent, and comprehensive. The
components of the page are not redundant, and
they all work together. Their relevance and
function From the user interface to the user
experience. They all provide an excellent user
experience
Page Interface Test Overall, the interface QA testing produced 8/10
positive results; the user interface is nearly
never broken or crashed as a result of any
flaws. As resulting of the system All of the
normal errors are present. To avoid any
worsening of the user's experiment, select an
alternative mistake point. The navigation on
the page is well-designed. There are no
stopped pages, and all pages are in the exact
order. However, the user interface on several
pages is still poorly designed and color-mixed.
The response is not particularly good.
Compatibility Test In general, in testing for compatibility, we 5/10
found that while displaying web pages on
various different devices, operating systems,
and browsers, each browser displayed the web
pages in slightly different ways, but overall all
the information was presented completely.
However, only on devices with screens of 900
pixels or larger would the website be relatively
well-optimized, while on screens smaller than
that the website would be distorted and
difficult to navigate.
List of Referance
CDNetworks, 2021.[Online]

Available at: https://www.cdnetworks.com/web-performance-blog/what-is-a-dns-server/

[Accessed 10 March 2023].

Cloudflare. [Online]

Available at: https://www.cloudflare.com/learning/dns/dns-server-types/

[Accessed 10 March 2023].

DomainTools, 2021.[Online]

Available at: https://www.domaintools.com/support/what-is-a-domain-name-and-what-does-it-do#

[Accessed 10 March 2023].

Ard.edu, 2022.[Online]

Available at: https://ardc.edu.au/resource/standardised-communications-protocols/

[Accessed 10 March 2023].

Moore, 2020.[Online]

Available at: https://www.techtarget.com/searchdatacenter/Server-hardware-guide-to-architecture-products-and-

management

[Accessed 10 March 2023].

Singh, 2022. [Online]

Available at: https://www.geeksforgeeks.org/functions-of-operating-system/

[Accessed 10 March 2023].

(Gillis, 2020

Gillis, 2020. [Online]

Available at: https://www.techtarget.com/whatis/definition/Web-server

[Accessed 10 March 2023].