INFORMATION TECHNOLOGY ASSIGNMENT 2 UNIT WEBSITE DESIGN DEVELOPMENT

UTILIZE WEBSITE TECHNOLOGIES, TOOLS AND TECHNIQUES WITH GOOD DESIGN PRINCIPLES TO CREATE A MULTIPAGE WEBSITE.. LO3...2 Create a design document for a branded, multipage website supported

BTEC FPT INTERNATIONAL COLLEGE

INFORMATION TECHNOLOGY

ASSIGNMENT 2 UNIT: WEBSITE DESIGN & DEVELOPMENT

STUDENT : NGUYEN THI TUYET NHUNG CLASS : IT16101

STUDENT ID : BDAF200008 SUPERVISOR : NGUYEN HOANG ANH VU

DaNang, December 2021

ASSIGNMENT 2 FRONT SHEET Qualification BTEC Level 4 HND Diploma in Business

Unit number and title Unit: Website Design & Development

Submission date 10/12/2021 Date received (1st

sub-mission)

Date received (2nd Re-submission date

submission)

Student name Nguyen Thi Tuyet

Class IT16101 Assessor name Nguyen Hoang Anh Vu

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the con-sequences of plagiarism I understand that making a false declaration is a form of malpractice.

Student’s signature:

TUYETNHUNG

Grading grid

TIEU LUAN MOI download : skknchat@gmail.com

Summative Feedbacks: Resubmission Feedbacks:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

TABLE OF CONTENT

Contents

TABLE OF CONTENT ii

LIST OF TABLES AND FIGURES iv

LIST OF ACRONYM vii

INTRODUCTION 1

CHAPTER 1 UTILIZE WEBSITE TECHNOLOGIES, TOOLS AND TECHNIQUES WITH GOOD DESIGN PRINCIPLES TO CREATE A MULTIPAGE WEBSITE (LO3) 2

Create a design document for a branded, multipage website supported with medium-fidelity wireframes and a full set of client and user requirements (P5) 2

1.1 Client and user requirement analysis 2

1.2 Use case diagram 4

1.3 Database diagram 6

1.4 Wireframe 11

1.5 Detailed explanation of wireframe 21

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

1.1 Register page 25

1.2 Login page 26

1.3 Home page 27

1.4 Contact page 30

1.5 Product page 31

1.6 Shopping cart page 33

1.7 Checkout page 33

1.8 Login Admin page 35

1.9 Admin change password page 36

1.10 Create category page 36

1.11 Create product page 37

1.12 Create discount code page 39

CHAPTER 2 CREATE AND USE A TEST PLAN TO REVIEW THE PERFORMANCE AND DESIGN OF A MULTIPAGE WEBSITE (LO4) 40 Create a suitable Test Plan identifying key performance areas and using them to review the functionality and performance of your website User Experience (UX) and User Interface (UI) (P7) 40

1.1 Functional and non-functional requirements 40

1.2 User Interface and User Experiences (UI & UX) text log 41

1.3 Back-end User Interface and User Experiences (UI & UX) text log 44

CONCLUSION 47

CRITICAL EVALUATION 48

REFERENCES 49

LIST OF TABLES AND FIGURES

Table 1: Priority 2

Table 2: Analyze customer and user requirements ……….………4

Table 3: User Interface and User Experiences (UI & UX) text log ……….43

Table 4: Back-end User Interface and User Experiences (UI & UX) text log ……….…

46 Figure 1: Admin – Use case diagram 4

Figure 2: User – Use case diagram 5

Figure 3: Site map 6

Figure 4: Overview database 6

Figure 5: Admin table 7

Figure 6: Category table 7

Figure 7: Contact table 7

Figure 8: Order table 8

Figure 9: Orderdetail table 8

Figure 10: Producer table 9

Figure 11: Product table 9

Figure 12: User table 10

Figure 13: Userlog table 10

Figure 14: ERD 11

Figure 15: Home page 13

Figure 16: Product page 14

Figure 17: Register page 15

Figure 18: Login page 16

Figure 19: Cart page 16

Figure 20: Checkout page 17

Figure 21: Contact page 18

Figure 22: Login Admin page 19

Figure 23: Admin change password page 19

Figure 24: Create product page 20

Figure 25: Create discount code page 20

Figure 26: Create category page 21

Figure 27: Command buttons 21

Figure 28: Search button 22

Figure 29: Account button 22

Figure 30: Shopping cart button 22

Figure 31: A few more buttons 22

Figure 32: Index command buttons 23

Figure 33: The bottom of home page 23

Figure 34: Slide 23

Figure 35: Logo 23

Figure 36: Product 23

Figure 37: Login buttons 24

Figure 38: Admin change password 24

Figure 39: Other buttons 25

Figure 40: Register page 26

Figure 41: Login page 27

Figure 42: Login successfully 27

Figure 43: Home page 30

Figure 44: Contact page 31

Figure 45: Product page 32

Figure 46: Shopping cart page 33

Figure 47: Checkout page 34

Figure 48: Order success 35

Figure 49: Login Admin page 35

Figure 50: Admin change password page 36

Figure 51: Password change success 36

Figure 52: Create new category 37

Figure 53: Manage categories 37

Figure 54: Create category success 37

Figure 55: Manage products 38

Figure 56: Create new product 38

Figure 57: Create product success 38

Figure 58: Manage discount codes 39

Figure 59: Create new discount code 39

Figure 60: Create discount code success 39

Figure 61: Functional and non-functional requirements 40

LIST OF ACRONYM

First of all, I would like to thank my family for their enthusiastic encouragement and invaluable support for me to complete this assignment Next, I would like to thank my subject teachers for guiding me, helping me achieve good academic results, and thanking all my friends for exchanging and supporting me.

Website Design & Development is an introductory course that introduces us to the foundational services required to host, manage, and access a secure website You will learn about back-end technology and front-end technology Design and deliver a website with a superior user experience (UX) powered by an innovative user interface (UI) The following report will cover the following sections:

Chapter 1: Utilize website technologies, tools, and techniques with good design principles to create a multipage website.

Chapter 2: Create and use a Test Plan to review the performance and design of a multipage website.

CHAPTER 1 UTILIZE WEBSITE TECHNOLOGIES, TOOLS AND TECHNIQUES WITH GOOD DESIGN PRINCIPLES TO CREATE A MULTIPAGE WEBSITE.

(LO3)

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 Client and user requirement analysis

1.1.1 Priority

Necessary requirements for the implementation

and the operation of the website system.

Table 1 Priority

TIEU LUAN MOI download : skknchat@gmail.com

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

realistic content (P6)

After designing the wireframe, we use website technologies combined with design principles to build a website with many different pages requested by the user Use current tools and programming languages like HTML, CSS, JS and phpMyAdmin database.

The benefits of HTML, CSS, JS and phpMyAdmin are based on standards-based access to databases, low-cost cross-platform development, offline browsing, consistency, etc.

1.1 Register page

On the registration page, users who do not have an account can register a new account with information such as name, username, password, re-enter password, email and

CHAPTER 2 CREATE AND USE A TEST PLAN TO REVIEW THE

PERFORMANCE AND DESIGN OF A MULTIPAGE WEBSITE (LO4)

Create a suitable Test Plan identifying key performance areas and using them to review the functionality and performance of your website User Experience (UX) and User Interface (UI) (P7)

1.1 Functional and non-functional requirements

Figure 61 Functional and non-functional requirements

A functional requirement is a description of the functionality or service of a software or a system Usually, the functional requirement will specify a behavior or a function Functional requirements are mandatory, easy to define, help you verify the functionality of the software Functional testing like system, integration, API testing, is done Requires the functionality specified by the user Here are some examples of functional requirements:

After completing this report, I sketched the website design using a wireframe tool with full features to meet the requirements of users and customers After the sketch, I proceed to design the website with my brand In addition, I learned more front-end and back-end, functional and non-functional requirements I have scheduled a test to determine speed and use it to review your website functionality User Experience (UX) and User Interface (UI).

CRITICAL EVALUATION

In this report, I have completed all the criteria of the question in part P, from P5 to P7

Detail:

P5: Create a design document for a branded, multipage website supported with medium-fidelity wireframes and a full set of client and user requirements.

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

P7: Create a suitable Test Plan identifying key performance areas and using them to review the functionality and performance of your website User Experience (UX) and User Interface (UI).

So I think this report of mine deserves a pass.

1 Mr Nguyen Hoang Anh Vu lecturers and slides