lOMoARcPSD|21990968

WDD ASM2 Phan Huu Quy BH00037

Website Design And Development (Trường Cao đẳng Thực hành FPT)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)
 lOMoARcPSD|21990968

ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Date Received 1st

Submission date
submission

Date Received 2nd

Re-submission Date
submission

Student Name Phan Huu Quy Student ID BH00037

Class IT0502 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 Quy

Grading grid

P5 P6 P7 M4 M5 D2 D3

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

❒ Summative Feedback: ❒ Resubmission

Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

TABLE OF 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
1) Design the structure and components of the website...............................................1
2) Database design:.......................................................................................................5
II. Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with realistic
content. (P6)......................................................................................................................6
1) Development tools and languages:...........................................................................6
2) Describe how the website works:..............................................................................6
III. Create a suitable Test Plan identifying key performance areas and use it to
review the functionality and performance of your website. User Experience (UX)
and User Interface (UI). (P7)..........................................................................................15
1) Test UI (include color, layout, font, image)..............................................................15
2) Test UX (when open the website on a variety of devices).......................................16
3) Test case.................................................................................................................16

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

TABLE OF FIGURES

Figure 1: Mockup for homepage (1).......................................................................................2

Figure 2: Mockup for homepage (2).......................................................................................2
Figure 3: Mockup for homepage (3).......................................................................................3
Figure 4: Mockup for register page........................................................................................4
Figure 5: Mockup for login page.............................................................................................4
Figure 6: Mockup for add product page................................................................................5
Figure 7: Database degisn........................................................................................................5
Figure 8: Products table............................................................................................................6
Figure 9: Users table.................................................................................................................. 6
Figure 10: Registration page....................................................................................................7
Figure 11: Login page................................................................................................................8
Figure 12: Home page.............................................................................................................. 12
Figure 13: Add product page.................................................................................................13
Figure 14: Fill in the product information...........................................................................14
Figure 15: New product information in the database.......................................................14
Figure 16: New products added to the homepage............................................................15

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

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)
Sales website design:

1) Design the structure and components of the website

I work as a full-stack web team leader for a leading creative web solutions and
marketing company. My team is about to have a big contract to develop an
online shopping mall.

In order to finish my work effectively i need to review all appropriate principles,

standards and guidelines for website designing and development, evaluate all
technical challenges to produce a good design document for the online shopping
website with wireframes, functional illustrations and a full set of client and user
requirements. Then, i lead my team to utilize web design and development
technologies, tools and techniques to implement my web design to develop the
online shopping website. To get good result, i always ask my team for following
my design document by comparison between created multipage website with my
design document and evaluation.

As my role, to ensure that the multipage website for online shopping developed
by my team is a high quality product, i also need to ask my team members to
follow quality assurance process and implement it during my design and
development stages by creating a suitable test plan. The test phase should be
seriously implemented by reviewing and analysing all test results to evaluate
applied quality assurance process and point out suggestions of improvements
for online shopping website.

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Design mockup for homepage:

Figure 1: Mockup for homepage (1)

Figure 2: Mockup for homepage (2)

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 3: Mockup for homepage (3)

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 4: Mockup for register page

Figure 5: Mockup for login page

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 6: Mockup for add product page

2) Database design:
I create 2 tables in the database to store the animals that I sell and the people
who buy the animals.

Figure 7: Database degisn

In the products table I add the attributes:

 Product_id to store animal id

 Product_name to store animal name
 Product_price to store animal price
 Product_img to store animal image

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 8: Products table

In the products table I add the attributes:

 User_id to store user id

 User_first_name to store user's first name
 User_last_name to store user's last name
 Username to store username
 Password to store user’s password

Figure 9: Users table

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: HTML, CSS, Javascript.

Back-end: PHP, MySQL,...

2) Describe how the website works:

First you will have to register an account to be able to access the site:

http://quypetshop.lovestoblog.com/pet_shop/register.php

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 10: Registration page

You will be redirected to the login page after successful account registration:

http://quypetshop.lovestoblog.com/pet_shop/login.php

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 11: Login page

After successful login, the user will be redirected to the homepage:

http://quypetshop.lovestoblog.com/pet_shop/index.php

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

10

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

11

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 12: Home page

The added products will be added by the admin from the page:
http://quypetshop.lovestoblog.com/pet_shop/add_product.php

12

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 13: Add product page

Describe the process of adding products:

 Go to the admin's add product page and fill in the product information.

13

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 14: Fill in the product information

 After filling in product information, the information has been saved in the
database

Figure 15: New product information in the database

 New products appear on the homepage

14

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

Figure 16: New products added to the homepage

 Link source code:
https://drive.google.com/drive/folders/1LyGF29UWm05NByMiHkI0m3a26
h_mInOi?usp=sharing
 Link website:
http://quypetshop.lovestoblog.com/pet_shop/

III. Create a suitable Test Plan identifying key performance areas and use it to
review the functionality and performance of your website. User Experience
(UX) and User Interface (UI). (P7)
1) Test UI (include color, layout, font, image)
Test criteria Detail
Website colors I use white and orange as main
colors for my website
Font All the text in my website is used in
Poppins font which is easy to read
and beautiful
Image I have tried to choose very sharp and
beautiful photos to put on the website
to make the website more lively
Size, position, width, height of The components are properly
elements positioned. In addition, my website is

15

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

also designed to be optimized for

many different devices such as
phones and tablets. That makes the
user feel more comfortable
Display My website has a beautiful, easy-to-
see interface. It helps users feel
comfortable when using the website

3) Test UX (when open the website on a variety of devices)

TEST CRITERIA DETAIL
When open the website on a variety When my website is displayed on
of devices other devices such as phones and
tablets, the elements will
automatically change position and
size to fit the size of the user's
screen.
Website load time Because my website has many high
quality images, the website loading is
a bit slow. (about 7 seconds)
User's attitude towards the site Site users have positive feedback

4) Test case
No Test case Input data Expected Actual Evaluation
output output
1 Test link http://quypetshop.lovesto Display all Display all Pass
home blog.com/pet_shop/index. product product
php

2 Test link Username: quy123 Go to home Go to Pass

login page page home
Password: quy123
page

3 Test link Username:loannnn Display Display Pass

login page (username is not in message message
database) “Incorrect “Incorrect
username or username
Password: 123456
or

16

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)

 lOMoARcPSD|21990968

password” password”
4 Add ID: 4 Display Display Pass
product message message
Name : Dog
“Add “Add
Price: 99 sucessfully!” sucessfull
and product y!” and
Image: dog.png display in product
home page display in
home
page
5 Test link First Name: Phan Go to login Go to Pass
register page login page
Last Name: Huu Quy
page
Username: quy123

Password: quy123

17

Downloaded by Qu?c Anh (thegioimoi1011@gmail.com)