Higher Nationals in Computing

Unit 2: Web Design and Development

ASSIGNMENT 2

Learner’s name: NGUYEN PHU Y

ID: GCC200379

Class: GCS0905B

Subject code: 1633

Assessor name: NAM LAM

Assignment due: 0 7 / 0 5 / 2 0 2 2 Assignment submitted: 0 7 / 0 5 / 2 0 2 2

 Table Of Content

P5 Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and
user requirements. ............................................................................................................................................................................................... 9
1. Users’ Requirements ........................................................................................................................................................................................ 9
3. Use cases diagram ............................................................................................................................................................................................ 9
4. Wireframes ..................................................................................................................................................................................................... 10
5. Sitemap............................................................................................................................................................................................................ 14
P6 Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported
with realistic content. ........................................................................................................................................................................................ 14
1. Source code Samples of the Website ............................................................................................................................................................ 14
1.1. Main Page ............................................................................................................................................................................................... 14
1.1.1. Html..................................................................................................................................................................................................... 14
1.1.2. CSS ...................................................................................................................................................................................................... 18
1.1.3. Responsive .......................................................................................................................................................................................... 31
1.2. Login Page .............................................................................................................................................................................................. 34
1.2.1. Html..................................................................................................................................................................................................... 34
1.2.2. CSS ...................................................................................................................................................................................................... 35
1.3. Shopping Cart Page ............................................................................................................................................................................... 39
2. Screenshots of Final website with explanation ............................................................................................................................................ 40
2.1. Main Page Website................................................................................................................................................................................. 41
2.2. Login Page .............................................................................................................................................................................................. 43
2.3. Shopping Cart Page ............................................................................................................................................................................... 45
3. PHP and MySQL ........................................................................................................................................................................................... 46
 3.1. Source code ............................................................................................................................................................................................. 46
3.1.1. Html..................................................................................................................................................................................................... 46
3.1.2. PHP...................................................................................................................................................................................................... 47
3.2. Some queries (Create / Read / Update / Delete) with MySQL ........................................................................................................... 48
3.2.1. Create .................................................................................................................................................................................................. 48
3.2.2. Delete ................................................................................................................................................................................................... 51
3.2.3. Select.................................................................................................................................................................................................... 53
3.2.4. Update ................................................................................................................................................................................................. 54
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). ............................................................................................................................................... 55
 ASSIGNMENT 2 FRONT SHEET

Qualification TEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date 07/05/2022 Date Received 1st submission 07/05/2022

Re-submission Date Date Received 2nd submission

Student Name Nguyen Phu Y Student ID GCC200379

Class GCS0905B Assessor name Nam Lam

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 Y

Grading grid

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

Grade: Assessor Signature: Date:

Signature & Date:
 Assignment Brief 2 (RQF)
Higher National Certificate/Diploma in Computing
Student Name/ID Number: Nguyen Phu Y/ GCC200379

Unit Number and Title: Unit 10: Website Design & Development

Academic Year: 2021 – 2022

Unit Assessor: Hoang Nhu Vinh

Assignment Title: Website Design and Implementation

Issue Date: 01 April 2021

Submission Date: 07/05/2022

Internal Verifier Name: Nguyen Phu Y

Date:

Submission Format:

Format:

1. A report document including below sections

o Section 1: A review of appreciate web design principles, standards and guidelines.
o Section 2: Design document for online shopping website.
o Section 3: Implementation of website design.
o 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 Tutor.
• The form of submission will be a soft copy posted on http://cms.greenwich.edu.vn/.
• Remember to convert the word file into PDF file before the submission on CMS.

Note:

• The individual Assignment must be your own work, and not copied by or from another student.
• 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 understand and follow the guidelines to avoid plagiarism. Failure to comply this
requirement will result in a failed assignment.

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:

Assignment scenario

You currently work for a software training company that produces courses and topic presentations to established
companies and, importantly, to new start-ups. MWS wishes to pursue a bespoke web-based e-commerce solution.
MWS were impressed with your presentations and wishes to continue with the design and development of an e-
commerce website.

A sister company develops web solutions and you have been tasked with taking the lead on the MWS solution you
outlined previously.

You are now required to design and create an interactive website with the emphasis being on the production of a
set of simple dynamic web pages, which embody good design principles. The site will be themed around a template
which would be most appropriate to MWS, with placeholders for text and content. Images and icons will be used,
to give MWS a feel for the proposed website design. You will also include a membership area, where users can
register to have access to restricted areas.

You will base on MWS-CaseStudy.docx for more information.

Learning Outcomes and Assessment Criteria (Assignment 2):

Learning Outcome Pass Merit Distinction
LO3 P5 Create a design M4 Compare and D2 Critically evaluate
document for a contrast the multipage the design and
branded, multipage website created to the development process
website supported design document. against your design
with medium fidelity document and analyse
wireframes and a full
any technical
set of client and user
requirements. challenges.

P6 Use your design

document with
appropriate principles,
standards and
guidelines to produce
a branded, multipage
website supported
with realistic content.
LO4 P7 Create a suitable M5 Evaluate the D3 Critically evaluate
Test Plan identifying Quality Assurance the results of your Test
key performance area (QA) process and Plan and include a
and use it to review review how it was review of the overall
success of your
the functionality and implemented during multipage website; use
performance of your your design and this evaluation to
website. User development stages. explain any areas of
success and provide
Experience (UX) and
justified
User Interface (UI).
recommendations for
areas that require
improvement.
 ASSIGNMENT 2 ANSWER

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. Users’ Requirements

Two small businesses in Herefordshire, and their joint company, Marches WoodShell (MWS), is being formed to manufacture and sell
wooden cases for mobile phones direct to customers. This will be an internet-only business. Their aim is to provide cool designs with
customizable features for any current smartphone from Apple, Samsung, Sony, LG, HTC, Motorola, and Nexus.

3. Use cases diagram

4. Wireframes
5. Sitemap

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

1. Source code Samples of the Website

1.1.Main Page
1.1.1. Html
1.1.2. CSS
1.1.3. Responsive
1.2.Login Page
1.2.1. Html
1.2.2. CSS
1.3.Shopping Cart Page
2. Screenshots of Final website with explanation
2.1. Main Page Website
2.2.Login Page
2.3.Shopping Cart Page
3. PHP and MySQL
3.1.Source code
3.1.1. Html
3.1.2. PHP
3.2.Some queries (Create / Read / Update / Delete) with MySQL
3.2.1. Create

Before
After
3.2.2. Delete

Before
After
3.2.3. Select
3.2.4. Update

Before
After

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

Test cases
Number Test Case Expectation Reality Output Result

1 Add product into Product is Passed Passed

my website added on my
website

2 View product on Product is Passed Passed

website displayed on
website

3 Delete product Product is Passed Passed

from website deleted from
my website

4 Update new Product is Passed Passed

product on website updated on
my website
 REFERENCES

Martin, M (2022). UI vs UX: What is the Difference Between UI and UX Design?. [online] Guru99.com. Available at:
https://www.guru99.com/ui-vs-ux.html [Accessed 20 Apr. 2022]

Usertesing.com. UI vs. UX: What’s the difference between user interface and user experience?. Available at:
https://www.usertesting.com/blog/ui-vs-ux [Accessed 20 Apr. 2022]

Wallis, J (2020). Custom-Built Vs Templte Websites- What’s important & Which is better?. [online] webo.digital. Available at:
https://webo.digital/blog/custom-built-vs-template-websites-which-is-better/ [Accessed 20 Apr. 2022]

Khillar, S (2018). Difference betwwen frontend and Backend. [online] differencebetwwen.net. Available at:
]http://www.differencebetween.net/technology/difference-between-frontend-and-
backend/#:~:text=Frontend%20refers%20to%20the%20client,backend%20is%20how%20everything%20works. [Accessed 20 Apr.
2022]

Airfocus.com. What is a back-end (in a website). Available at: https://airfocus.com/glossary/what-is-a-back-end/ [Accessed 20 Apr.
2022]

Airfocus.com. What is a back-end (in a website). Available at: https://airfocus.com/glossary/what-is-a-front-end/ [Accessed 20 Apr.
2022]

Gillis, A. Web Server. Available at: https://www.techtarget.com/whatis/definition/Web-

server#:~:text=A%20web%20server%20is%20software,and%20delivering%20webpages%20to%20users. [Accessed 20 Apr. 2022]

Greeksforgreeks.org. Functions of Operating System. Available at: https://www.geeksforgeeks.org/functions-of-operating-system/

[Accessed 20 Apr. 2022]
Lawinsider.com. Server Hardware definition. Available at: https://www.lawinsider.com/dictionary/server-
hardware#:~:text=Server%20Hardware%20means%20the%20computer,and%20makes%20such%20resources%20available [Accessed
20 Apr. 2022]

Elprocus.com. What are Communication Protocols & Their Working. Available at: https://www.elprocus.com/communication-
protocols/ [Accessed 20 Apr. 2022]

Cloudflare.com. What is DNS? How DNS works. Available at: https://www.cloudflare.com/learning/dns/what-is-dns/ [Accessed 20
Apr. 2022]

Sharma, G (2021). How new technology trends impact web development in 2021. [online] datasciencecentral.com. Available at:
https://www.datasciencecentral.com/how-new-technology-trends-impact-web-development-in-2021/ [Accessed 20 Apr. 2022]

Chowdhury, A (2021). 17 Best Web Development Freameworks for 2021. [online] lambdates.com. Available at:
https://www.lambdatest.com/blog/best-web-development-frameworks/ [Accessed 20 Apr. 2022]

Cloudflare.com. How does website speed boost SEO optimization?. Available at:
https://www.cloudflare.com/learning/performance/how-website-speed-boosts-seo/ [Accessed 20 Apr. 2022]

Mowforth, L (2022). The 7 Essential Tools for Frontend Web Development. [online] cereerfoundry.com. Avalable at:
https://careerfoundry.com/en/blog/web-development/7-essential-tools-for-front-end-development/ [Accessed 20 Apr. 2022]

Sharma, L (2015). 15 Effective Web Designing Techniques and Their Importance for Content Gurus. [online] InstantShift.com.
Available at: http://www.instantshift.com/2015/06/12/effective-web-designing-techniques/ [Accessed 20 Apr. 2022]