Higher Nationals in Computing

Unit 2: Website Design and Development

Learner’s name: Nguyen Thi Hong Dan

ID: GCS190090

Class: GCS0805

Subject code: 1633

Assessor name: LE NGOC THANH

Assignment due: 0 1 / 1 1 / 2 0 2 0 Assignment submitted:

01/11/2020
 ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date 01/11/2020 Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Nguyen Thi Hong Dan Student ID GCS190090

Class GCS0805_PPT Assessor name Le Ngoc Thanh

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 Nguyen Thi Hong Dan

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

Grade: Assessor Signature: Date:

Signature & Date:

 ASSIGNMENT 2 BRIEF
Qualification BTEC Level 5 HND Diploma in Computing

Unit number 10: Website Design & Development

Assignment title Web Services Presentation and Guidebook

Academic Year 2020

Unit Tutor Le Ngoc Thanh

Issue date Submission date 01/11/2020

IV name and date

Submission Format:

Format:
1. A report document including some sections
- Section 1: A review of appreciate web design principles, standards and guidelines.
- Section 2: Design document for online shopping website.
- Section 3: Implementation of website design.
- Section 4: Test plan and test evaluation.
2. A compressed file that encapsulates all source code and particular necessary resources including files of
images, style sheets, java script and other files to support to install multipage website such as sql script
and installation guide.
Submission Students are compulsory to submit the assignment in due date and in a way requested by
the Tutors. The form of submission will be a soft copy posted on
http://cms.greenwich.edu.vn/
Note: The Assignment must be your own work, and not copied by or from another student or from
books etc. If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you
must reference your sources, using the Harvard style. Make sure that you know how to reference
properly, and that understand the guidelines on plagiarism. If you do not, you definitely get failed
Unit Learning Outcomes:

LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage
website.

LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Assignment Brief and Guidance:

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

In order to finish your work effectively you 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, you lead your team to utilize web design and development technologies, tools and techniques to implement
your web design to develop the online shopping website. To get good result, you always ask your team for
following your design document by comparison between created multipage website with your design document
and evaluation.

As your role, to ensure that the multipage website for online shopping developed by your team is a high quality
product, you also need to ask your team members to follow quality assurance process and implement it during
your 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
 Learning Outcomes and Assessment Criteria

Pass Merit Distinction

LO3 Utilise website technologies, tools and techniques with good design
principles to create a multipage website

P5 Create a design document for a M4 Compare and contrast the

D2 Critically evaluate the design and
branded, multipage website multipage website created to the
development process against your
supported with medium fidelity design document.
design document and analyse any
wireframes and a full set of client
technical challenges.
and user requirements.

P6 Use your design document with

appropriate principles, standards
and guidelines to produce a
branded, multipage website
supported with realistic content.

LO4 Create and use a Test Plan to review the performance and design of a D3 Critically evaluate the results of
multipage website your Test Plan and include a review
of the overall success of your
P7 Create a suitable Test Plan M5 Evaluate the Quality Assurance multipage website; use this
identifying key performance areas (QA) process and review how it was evaluation to explain any areas of
and use it to review the implemented during your design success and provide justified
functionality and performance of and development stages.
recommendations for areas that
your website. User Experience (UX)
require improvement.
and User Interface (UI).
 Table of Contents
Unit 2: Website Design and Development ................................................................................................. 1
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
1. Client and user requirement analysis ............................................................................................ 1
2. Site map .......................................................................................................................................... 1
3. Wireframes and specific explanation ............................................................................................ 1
3.1. Home ............................................................................................................................................ 1
3.2. Login ............................................................................................................................................. 2
3.3. Register ........................................................................................................................................ 3
3.3. Bestseller ...................................................................................................................................... 3
3.4 Product .......................................................................................................................................... 4
3.5. Product detail............................................................................................................................... 4
3.6. Contact ......................................................................................................................................... 5
3.7. Cart ............................................................................................................................................... 5
3.8. Successful purchase ..................................................................................................................... 6
P6 Use your design document with appropriate principles, standards and guidelines to produce a
branded, multipage website supported with realistic content. ................................................................ 6
1. Homepage ....................................................................................................................................... 6
2. Product page ................................................................................................................................. 13
3. Product detail page ...................................................................................................................... 15
4. Purchase page ............................................................................................................................... 16
5. Successful purchase page ............................................................................................................. 19
6. Contact page ................................................................................................................................. 20
P7 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). ................................ 21
REFERENCES ............................................................................................................................................. 23
 TABLE OF FIGURE
Figure 1: Site map....................................................................................................................................... 1
Figure 2: Homepage. .................................................................................................................................. 2
Figure 3: Login page. .................................................................................................................................. 2
Figure 4: Register page. .............................................................................................................................. 3
Figure 5: Bestseller page. ........................................................................................................................... 4
Figure 6: Product page. .............................................................................................................................. 4
Figure 7: Product detail page. .................................................................................................................... 4
Figure 8: Contact page. .............................................................................................................................. 5
Figure 9: Cart page. .................................................................................................................................... 5
Figure 10: Successful purchase page.......................................................................................................... 6
Figure 11: Home page of my website. ....................................................................................................... 6
Figure 12: Home page with dropdown menu. ........................................................................................... 8
Figure 13: The lower part of the home page. .......................................................................................... 11
Figure 14: Bestseller items page. ............................................................................................................. 12
Figure 15: Product page. .......................................................................................................................... 14
Figure 16: Product detail page. ................................................................................................................ 15
Figure 17: Cart page. ................................................................................................................................ 17
Figure 18: Successful purchase page........................................................................................................ 19
Figure 19: Contact page. .......................................................................................................................... 20
 ASSIGNMENT 1 ANSWERS
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. Client and user requirement analysis

The web was designed basically and easy to use for everyone so client and user actually don’t need
any requirement except having a little knowledge of computer or internet.

2. Site map

Figure 1: Site map.

3. Wireframes and specific explanation

3.1. Home

Page |1
 Figure 2: Homepage.

3.2. Login

Figure 3: Login page.

Page |2
3.3. Register

Figure 4: Register page.

3.3. Bestseller

Page |3
 Figure 5: Bestseller page.

3.4 Product

Figure 6: Product page.

3.5. Product detail

Figure 7: Product detail page.

Page |4
3.6. Contact

Figure 8: Contact page.

3.7. Cart

Figure 9: Cart page.

Page |5
 3.8. Successful purchase

Figure 10: Successful purchase page.

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

1. Homepage

Figure 11: Home page of my website.

Page |6
Home page: It's also a Shopping page, user can find their products by searching at search bar
on top, they can also choose the

HTML

CSS

• To search the products we use the search bar, search bar is functioned by:

HTML

CSS

Page |7
 • In order for a user to login account to my website, I create the user icon. Login and
register button is functioned by:

HTML

CSS

Figure 12: Home page with dropdown menu.

Page |8
 • To display categories of products, I use the dropdown menu. Dropdown menu is
functioned by:

HTML

CSS

Page |9
 • Slideshows image on the home page is functioned by:

HTML

P a g e | 10
CSS

Figure 13: The lower part of the home page.

• BestSeller is a popular product and recommended for the user right on the
homepage. BestSeller section is functioned by:

HTML

P a g e | 11
CSS

When user clicks on the bestseller item name, this item’s page will appear and show users
the details.

Figure 14: Bestseller items page.

• To do that, I have linked the name of the bestseller product to its information page
with the a href "#" tag.

• The top part of the Best Seller items page is the same as the homepage so I didn't
mention it, and the low part of the Best Seller items page is functioned by:

HTML

P a g e | 12
 CSS

• The footer section includes the hotline, the address and the working time of the shop.
Footer is functioned by:

HTML

CSS

2. Product page

P a g e | 13
 Figure 15: Product page.

• To create a product page with product image, product name, price, product details,
and shopping cart I use the following codes:

HTML

P a g e | 14
 CSS

When the user clicks on the product details, the details page will appear. To do that I also
use a href = "#" tag to link the product page to the product details.

3. Product detail page

Figure 16: Product detail page.

Product detail page also has html and css structure similar to the best seller page.

HTML

P a g e | 15
 CSS

The other product detail pages are the same, just replace the product's photo and name.

When a user clicks Add a Shopping Cart, they'll be redirected to the Cart page that's linked
to the product page with a href = "#" tag.

4. Purchase page

P a g e | 16
 Figure 17: Cart page.

This is a simulated purchase page, not 100% accurate.

Cart page is functioned by:

HTML

P a g e | 17
P a g e | 18
 Code JavaScript of the “Quantity”

CSS

When users click on Buy, they will be redirected to the successful purchase page.

5. Successful purchase page

Figure 18: Successful purchase page.

P a g e | 19
 Successful purchase page is functioned by:

HTML

CSS

6. Contact page

Figure 19: Contact page.

P a g e | 20
 Contact page is functioned by:

HTML

CSS

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

No Test case Input data Expected output Actual output Evaluation

1 Test link home Link to the other Linked. Linked. As expected

HTML web.

2 Test link image Images of product at 256 x 256. 256 x 256. As expected
Product Page.
3 User login/register Enter email and Finished entering Can return to the As expected
password to create an login information homepage.
account or login. can return to the
homepage.
4 Search on Enter the product Can find the Not working. Not as expected
navigation bar name. product.

P a g e | 21
5 CSS Color , font , size. Color , font and Some text font Good
size are match. didn’t match as
expected.

P a g e | 22
 REFERENCES
1. Chiechi, T., 2016. Template Vs. Custom Website. [Online]
Available at: https://www.csdesignworks.com/blog/2016/08/template-vs-custom-website
[Accessed 20 October 2020].
2. Coen, M., 2017. IP Communication Protocols 101. [Online]
Available at: https://www.westuc.com/en-us/blog/network-services/ip-communication-
protocols-101 [Accessed 20 October 2020].
3. Dance, M., 2018. Types of Server Software. [Online]
Available at: https://www.techwalla.com/articles/types-of-server-software [Accessed 22
October 2020].
4. Eyeres, 2018. The Web Communication Protocols. [Online]
Available at: https://www.eyerys.com/articles/web-communication-protocols [Accessed 23
October 2020].
5. Omoyajowo, O., 2018. Introduction to Operating System for self taught web developer. [Online]
Available at: https://hackernoon.com/introduction-to-operating-system-for-self-taught-web-
developer-ba6d484398aa [Accessed 23 October 2020].
6. Posey, B., 2011. Server Hardware Explained (Part 1). [Online]
Available at: http://techgenix.com/server-hardware-explained-part1/ [Accessed 25 October
2020].
7. Rouse, M., 2013. server hardware degradation. [Online]
Available at: https://searchservervirtualization.techtarget.com/definition/hardware-
degradation [Accessed 25 October 2020].
8. Rouse, M., 2016. operating system (OS). [Online]
Available at: https://whatis.techtarget.com/definition/operating-system-OS [Accessed 26
October 2020].
9. Rouse, M., 2018. server. [Online]
Available at: https://whatis.techtarget.com/definition/server [Accessed 29 October 2020.
10. Shaw, K., 2018. What is DNS and how does it work?. [Online]
Available at: https://www.networkworld.com/article/3268449/internet/what-is-dns-and-how-
does-it-work.html [Accessed 30 October 2020].
P a g e | 23
P a g e | 24