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 Mai Duc Anh Student ID BH00056

Class IT0501 Assessor name Ngo Thi Mai Loan

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

Grading grid

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

Grade: Assessor Signature: Date:

Signature & Date:
Contents
A. Introduce ............................................................................................................................................................................................................................................................ 5
B. Content ............................................................................................................................................................................................................................................................... 5
I. Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user
requirements. (P5) ............................................................................................................................................................................................................................................... 5
1. Design the structure and components of the website ................................................................................................................................................................. 5
2. Database Design .................................................................................................................................................................................................................................. 12
II. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website
supported with realistic content. .............................................................................................................................................................................................................. 13
1. Tool and Techniques Using for Website .................................................................................................................................................................................. 13
2. Website Implementations ............................................................................................................................................................................................................. 14
III. 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). ................................................................................................................................................................. 25
1. Test UI .................................................................................................................................................................................................................................................... 25
2. Test UX ................................................................................................................................................................................................................................................... 25
C. Conclusion...................................................................................................................................................................................................................................................... 27
D. References .......................................................................................................................................................................................................................................................... 27
Figure 1: Wireframes ............................................................................................................................................................................................................................................ 6
Figure 2: Home Page ............................................................................................................................................................................................................................................. 7
Figure 3: Shop Page ............................................................................................................................................................................................................................................... 8
Figure 4: About Pages ........................................................................................................................................................................................................................................... 9
Figure 5: Login Page ............................................................................................................................................................................................................................................ 10
Figure 6: Contact Form....................................................................................................................................................................................................................................... 11
Figure 7: Table product...................................................................................................................................................................................................................................... 12
Figure 8: Login table............................................................................................................................................................................................................................................ 13
Figure 9: Home page ........................................................................................................................................................................................................................................... 14
Figure 10: Homepage's body interface ........................................................................................................................................................................................................ 15
Figure 11: Homepage's footer interface ...................................................................................................................................................................................................... 15
Figure 12: Not click 3 rows on left................................................................................................................................................................................................................. 16
Figure 13: After click ........................................................................................................................................................................................................................................... 17
Figure 14: Shop site ............................................................................................................................................................................................................................................. 18
Figure 15: Sql Product ........................................................................................................................................................................................................................................ 18
Figure 16: Shop site when not click into picture ..................................................................................................................................................................................... 19
Figure 17: After click the product on shop site ........................................................................................................................................................................................ 19
Figure 18: Login Site............................................................................................................................................................................................................................................ 20
Figure 19: SQL ........................................................................................................................................................................................................................................................ 20
Figure 20: Popup login success ....................................................................................................................................................................................................................... 21
Figure 21: Pop up login failed.......................................................................................................................................................................................................................... 21
Figure 22: Register site ...................................................................................................................................................................................................................................... 22
Figure 23: Register success .............................................................................................................................................................................................................................. 22
Figure 24: Sql after add new username....................................................................................................................................................................................................... 23
Figure 25: Login admin ...................................................................................................................................................................................................................................... 24
Figure 26: Add product site.............................................................................................................................................................................................................................. 24
Figure 27: The product is add to SQL ........................................................................................................................................................................................................... 25
 A. Introduce

B. Content
I. Create a design document for a branded, multipage website supported with medium fidelity wireframes
and a full set of client and user requirements. (P5)
1. Design the structure and components of the website
We have a furniture store that's been open for about a month. Due to customer regulatory needs and product promotion, we decided to
create a website to do just that. My project works on a website of a furniture store. This project consists of 2 systems: administration
and web user interface: First, the administration system includes two interfaces, category and product. About Category admin can
control all category listings by editing information. specifically, category id and category name About product, they also control all
product information by adding or removing data like as product gallery, quantity, id, cost, content summary, all The previous steps
will be displayed in the home page index administrator including all data and functionality, including images and product information.
The web interface is quite simple, there is an interface to record customer information to save and customers can choose products
according to their requirements with name, price and product, information. Users require clear and detailed product categories. For the
customer, simply enter the information and the product request is done. In addition, when buying, customers can refer to the product
details before buying.

Wire frames and specific explanation:

A wireframe is an intuitive tool for designing the web at the structural level. The wireframe is often used to organize content and
functionality on a page. The wireframe is also used in the process of setting up the basic structure of a website prior to visual design.
Of course, that process needs to create, add, and refine content.

Besides prototypes, elements, or flat design, wireframes are also a fundamental and essential part of the design process. This
wireframe design is available when the developer, product manager discusses and revises it before formally designing it.
Pro:

Wireframe provides an overall picture at the earliest opportunity, used to review negotiations with clients. From a practical
perspective, the wireframe ensures the full content and functionality of the page on the basis of precise positioning based on the needs
of users and businesses. This is also the biggest advantage that the wireframe structure gives users.

Cons:

Since wireframes do not include any design or technical requirements, it is not always easy for a customer to grasp the concept/term.
Web designers will also have to translate the wireframes into a design. In addition, there is a need for coordination between designers
and copywriters when working with website content accordingly.

Figure 1: Wireframes
 Figure 2: Home Page

This is the Home page wireframe. The top section displays the functions such as home to return to the homepage, product to choose
products, and new to read the news. The middle part of the page displays mainly the product categories of the store for users to
reference and the bottom of the page is the contact information of the store for customers to contact.
 Figure 3: Shop Page

This is the wireframe of the Shop page. The header and footer are the same as the Homepage. The body designed for product display
includes product photos and names categorized by product type. On this page, users can only see the same product categories, not like
the homepage. Therefore, users can choose in advance the type of product they like to filter.
 Figure 4: About Pages

This is the wireframe of the news site. This used to give a little introduction to my furniture store.
 Figure 5: Login Page

This is the wireframe of the login site. It is used to log in the user to access the website and use other things more. Then, before
logging in, the user must have an account such as username, password to log in, and to log in, the user must register.
 Figure 6: Contact Form

This is the wireframe of the Contact Form site. Where users need to register an account to be able to access the website, then they
need to enter their username and password and the user needs to remember to get the account to be able to log in.
 2. Database Design
Database is an important part of the website, where can store important information closely related to the website, to be able to design
the interior website as above I used 3 tables in sql to can design and develop my website.

In the product table, in which there are 5 columns, respectively, product_id is the column that stores the unique ids of the product to
distinguish and easier to find during sales, product_name as the name of the product will have the name and column. This will store
the name of the column to make it easy for customers to find, product_image contains the image of the product to help customers
search and make an easy choice, product_price stores the price of the product for customers and employees working in the store know
an easier way, product_des generally introduces the product to the user.

Figure 7: Table product

In the Login table, there are 3 columns respectively ID, Username, Password, ID is a special symbol used for each user and no one can
be the same person, just like ID username will not be used for each individual. The user and the user will need to enter the correct
username to log into the website, the password is a secret and it is important that the user does not let anyone know and the password
can be the same.

Figure 8: Login table

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

1. Tool and Techniques Using for Website

a. Tool
• Hosting: XAMPP -XAMPP has Apache distributions for Apache server, PHP. And it is commonly a local host or a local
server. This local server works on my own laptop. The utilization of XAMPP is to test the clients or website before uploading
it to the remote web server. This XAMPP server software gives me the suitable environment for testing MYSQL, PHP, Apache
projects on the local computer.
• Web Browser: Google Chrome
b.Techniques
• Front-End Techniques
o The markup language I use to build the structure of the webpage is HTML 5. The techniques and programming language I use
to develop my Website is JavaScript To make my website aesthetic, CSS is the good one and framework is Bootstrap 4 Font
Awesome Icon is used to create nice Icon font
• Back-End Techniques
o The server-side Scripting language I use is PHP
o And the most suitable with PHP is MySQL database
o Some Algorithm to handle the logical problems

2. Website Implementations
a. Home Page

Figure 9: Home page

 Figure 10: Homepage's body interface

Figure 11: Homepage's footer interface

• Source Code of Homepage: Index.php

o In this Index.php file, I design the homepage with the familiar web’s structure html mix php with the arrange of three primary
parts include: Header, Main, and Footer. Each source code of each part has been spitted into 3 php file to easier fixed and they
has been called by Require Syntax of PHP.
o Header just be built by mainly Html, css and a little PHP. It has been designed to display the navigation bar of webpages, logo
on top and the main menu of homage which has been hidden and it can be display via JavaScript handling. Search in
navigation bar is implemented via php and then it will be sent the search characters from users into index.php to handle and
display appropriate results.
o Body built by mainly Html, css and a little PHP. It has been designed to display the navigation bar of webpages, logo on top
and the main menu of homage which has been hidden and it can be display via JavaScript handling. Search in navigation bar is
implemented via php and then it will be sent the search characters from users into shop.php to handle and display appropriate
results.

Figure 12: Not click 3 rows on left

 Figure 13: After click

b. Shop Site
• These Sources code above just are brief samples of shop.php, this file display the main body of shop site. This file is quite long
because it must have handled the categories filter, slider and all products displayed for customers site. With categories filter, I
just have used for each loop in php to list fully the categories in database on categories menu. The slider of homepage has been
built from bootstrap which has been available designed in bootstrap. To display all products with name, price and image, I
have used for each loop php to convey information of product into Html box which has been designed to display the brief
information of each product. When more products is added from admin, it will be displayed immediately on homepages.
 Figure 14: Shop site

Figure 15: Sql Product

c. Detail site
The Source Code above is just a brief sample of detail.php, which shows the main body of the detail page. Product details
page. To display each product detail with name, price and image. When you from the shop site when clicking on the image of
the product you want to know more about, it will lead you to the product detail page.
Figure 16: Shop site when not click into picture

Figure 17: After click the product on shop site

d. Login site
When users use the website, they visit the store homepage and have functions such as viewing the store name and logo,
product catalog and store news. Besides, users can login to the website so that by clicking on the left corner of the website and
selecting login, after clicking the Login website will appear so that users can enter information such as username, password if
customer has an account.

Figure 18: Login Site

Figure 19: SQL

 After the user has entered the username and password, if the user has entered the correct account, a message will appear stating
that the login is successful, after which the user will be redirected to the main web page of the site.

Figure 20: Popup login success

Figure 21: Pop up login failed

e. Register site
If the user does not have an account, the user can click on the register button to go to the register page where the user can
register an account for user by entering the id, username and password that user wants to set up and then add it. Go to the
registration section and then press enter, the password is very important for the account, if the user forgets the account; it may
lead to the loss of the account.
 Figure 22: Register site

Figure 23: Register success

 Figure 24: Sql after add new username

f. Product add site

Because this add-on is managed by admin, so admin will have a separate admin account and only when admin login with that
account will have the right to access the website to add products. Add product page admin wants to add the product you want
to add enter full information and click the add product button. The product will appear on the website and the product
information will be added to the SQL.
 Figure 25: Login admin

Figure 26: Add product site

 Figure 27: The product is add to SQL

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

1. Test UI
Test criteria Detail
Website colors Websites tend to use green
combined with white in the
middle of the website to
create harmony in the web
and help users feel more
comfortable.
Font Use fonts that are easy to see
and are large enough for users
to easily format text and
easily adapt to the site.
Picture The pictures are all adjusted
so that they all fit the website
Size, position, width, height of Balance
elements.
Display The website can automatically
adjust to the user's screen
ratio.
2. Test UX
 Test criteria
When opening the website on
different devices
Website loading time
Detail
Icons and images are
reasonably sized. Overall, the
website is suitable for many
types of customers. The
design is not too distracting,
easy to use.
With a stable internet
connection, the loading speed
of the website is quite fast.

3. Test Case

No Test case Input data Expected output Actual output Evaluation

1. Open home site http://localhost/digitf-html/index.php Display home site Display all product Pass

2. Test login page link Username: 123456 Login successfully Login successfully Pass
Password: 123 and move to home
site

Username: ducanh Login successfully Login successfully Pass

Password: 123 and move to admin
site

Username: user2 Login failed Login failed Pass

Password: 12335 (wrong password or
(enter wrong username and password) username)
3. Test register page link User Id: 2 Register successfully Register Pass
User name: anhduc successfully
Password: 123

4. Test add product Product Id: 1 Product page will Added successfully Pass
function of add product Product Name: display with a list of
page and view detail of Product price: $20 all products
product. Product Img: 91CmjOBztYL.jpg including the
Product description: recently added
product.

There should be at least one product User should see the User sees product Fail
that displays on the website. detail information of details on the page.
the product like
name, price,
waranty, promotion
and review.

C. Conclusion
Overall, I have designed and developed an online furniture website that includes basic functions like registration, login, and product
display and product details. I have also analyzed the web functionality, created a suitable web test plan and listed the steps to ensure
website quality

D. References
1) business.com. 2020. What Is The Purposes Of DNS? - Business.Com. [online] Available at: [Accessed 2 October 2020].
2) Công ty luật SB. 2020. Mục Đích Của Hệ Thống Tên Miền DNS - Công Ty Luật SB. [online] Available at: [Accessed 4 October
2020].
3) What is web design [Online]. [Accessed on 12 November 2014]. Available on world wide web:
4) TinoHost Blog. 2020. Phần Cứng Máy Chủ Là Gì? . [online] Available at: [Accessed 4 October 2020].
5) Good, M., 2020. Tầng Ứng Dụng (Application Layer) - Sinhvientot.Net. [online] sinhvientot.net. Available at: [Accessed 2 October
2020].
6) PHP, C., 2020. PHP Là Gì? Những Ưu Và Nhược Điểm Khi Thiết Kế Web Bằng PHP. [online] Các trình Editor cho PHP. Available
at: [Accessed 2 October 2020].
7) TopDev. 2020. Ưu Điểm Của VS Code | 4 Lý Do Để VS Code Là Text Editor Ưa Thích. [online] Available at: [Accessed 2 October
2020].
8) Nhà cung cấp Cloud Server - VPS - Hosting - Tên miền Việt Nam VN. 2020. [INFO] - Nên Chọn VPS Windows Hay Linux |
Vinahost.VN. [online] Available at: [Accessed 2 October 2020].
9) Hướng Dẫn Hostinger. 2020. Tên Miền Là Gì? Toàn Bộ Khái Niệm Về Domain Name. [online] Available at: [Accessed 2 October
2020].
10) Phu, L., 2020. Nội Dung Và Sự Ảnh Hưởng Của Content Trong SEO Website - Hướng Dẫn SEO Bài 3. [online] Công ty TNHH
TMĐT Công Nghệ LP. Available at: [Accessed 2 October 2020].