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 Đỗ Văn Toàn Student ID BH00136

Class IT0501 Assessor name Ngô Thị 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 TOAN

Grading grid

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

Grade: Assessor Signature: Date:

Signature & Date:
A. Introduction:

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

a. Homepage
b. login page
C. register page
d. Add product
e. detail product
2. Database Design

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

1. Development tools and languages

Front end: use HTML, CSS, JS..

Back end: PHP, MySQL

2. how the website works ?

a. Homepage
This is home page including all products added from database, login, logo, contact

b. Login
Here is the login that looks like no user and password

When you enter the wrong username and password, the error message will be displayed
When you enter the correct username and password, the correct message will be displayed

c. Register

This is the account registration page

After entering information on the registration page, the user information will be saved in the database. but this user information is used
to log in.
d. Add product
This is the page Add product. After filling in product information on the page, product information will be saved in the database.

e. Detail
Clicking "detail" will display detailed product information
 Link source code :
https://drive.google.com/drive/folders/1Uq94v0PYzUAkgdm7_2gCp0wXwSb3Z856?usp=sharing

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

1.Test UI (include color, layout, font, image)

 Check criteria Detail
Color page web #80ed97
rgba(255, 255, 255, .5)
#666
#fff
#10f210
#f7f700
Font 13px; bold
Picture clear image
Size, position, width, height of elements. It's reasonable and the display on different devices is stable
Display very attractive, fancy

2. Test UX

Check criteria Detail

When opening the website on different devices Suitable for all different devices, the image displayed depending
on the device eg phone, computer and PC
Website loading time Website loading speed is fast, about 2.5s
User's attitude towards the site User attitude is very pleasant

3. Test case
NO Test case Input data Expected output Actual output Evaluation

1 Test link home http://localhost/Homepage.php Display all product Display all product Pass

2 Test link login page Username:toandvbh00136 Display Display Pass

message”Login message”Login
Password:22081002
successfully” successfully”

3 Test link login page Username: Toandvbh123 Display Display message Fail
( username is not in database) message”Login “Error”
successfully”
Password: 22082003

4 Add product ProductName : Hoa thường Display message Display message Pass
xuân “Add product “Add product
ProductPrice: 50.000đ sucessfully!” sucessfully!”

5 Test link register Username:toan Display “Register Display “Register Pass

page Password: 123 successfully” successfully”