Information Technology, Essays (university) of Information Technology

Information Technology Information Technology

Typology: Essays (university)

2020/2021

Uploaded on 11/28/2022

nguyen-thi-tuyet-nhung
nguyen-thi-tuyet-nhung 🇻🇳

4

(3)

21 documents

1 / 60

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
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
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f
pf20
pf21
pf22
pf23
pf24
pf25
pf26
pf27
pf28
pf29
pf2a
pf2b
pf2c
pf2d
pf2e
pf2f
pf30
pf31
pf32
pf33
pf34
pf35
pf36
pf37
pf38
pf39
pf3a
pf3b
pf3c

Partial preview of the text

Download Information Technology and more Essays (university) Information Technology in PDF only on Docsity!

BTEC FPT INTERNATIONAL COLLEGE

INFORMATION TECHNOLOGY

ASSIGNMENT 2

UNIT: WEBSITE DESIGN & DEVELOPMENT

STUDENT : NGUYEN THI TUYET NHUNG

CLASS : IT

STUDENT ID : BDAF

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/ Date received (1st submission) Re-submission date Date received (2nd submission) Student name Nguyen Thi Tuyet Nhung Student ID BDAF 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 consequences of plagiarism. I understand that making a false declaration is a form of malpractice. Student’s signature: TUYETNHUNG Grading grid P5 P6 M4 D2 P7 M5 D

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

  1. 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.............................................................. 22
  2. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content. (P6)................................................................................................................................... 26 1.1 Register page.............................................................................................. 26 1.2 Login page.................................................................................................. 27 1.3 Home page................................................................................................. 28 1.4 Contact page............................................................................................... 31 1.5 Product page............................................................................................... 32 1.6 Shopping cart page..................................................................................... 34 1.7 Checkout page............................................................................................ 35 1.8 Login Admin page....................................................................................... 37 ii

1.9 Admin change password page................................................................... 37 1.10 Create category page................................................................................ 38 1.11 Create product page.................................................................................. 39 1.12 Create discount code page........................................................................ 40 CHAPTER 2. CREATE AND USE A TEST PLAN TO REVIEW THE PERFORMANCE AND DESIGN OF A MULTIPAGE WEBSITE. (LO4)............................. 42

  1. 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)................................................................................................... 42 1.1 Functional and non-functional requirements............................................... 42 1.2 User Interface and User Experiences (UI & UX) text log............................ 43 1.3 Back-end User Interface and User Experiences (UI & UX) text log............ 46 CONCLUSION.......................................................................................................... 49 CRITICAL EVALUATION.......................................................................................... 50 REFERENCES.......................................................................................................... 51 iii

Figure 21: Contact page Figure 22: Login Admin page Figure 23: Admin change password page Figure 24: Create product page Figure 25: Create discount code page Figure 26: Create category page Figure 27: Command buttons Figure 28: Search button Figure 29: Account button Figure 30: Shopping cart button Figure 31: A few more buttons Figure 32: Index command buttons Figure 33: The bottom of home page Figure 34: Slide Figure 35: Logo Figure 36: Product Figure 37: Login buttons Figure 38: Admin change password Figure 39: Other buttons Figure 40: Register page Figure 41: Login page Figure 42: Login successfully Figure 43: Home page Figure 44: Contact page Figure 45: Product page Figure 46: Shopping cart page v

Figure 47: Checkout page Figure 48: Order success Figure 49: Login Admin page Figure 50: Admin change password page Figure 51: Password change success Figure 52: Create new category Figure 53: Manage categories Figure 54: Create category success Figure 55: Manage products Figure 56: Create new product Figure 57: Create product success Figure 58: Manage discount codes Figure 59: Create new discount code Figure 60: Create discount code success Figure 61: Functional and non-functional requirements vi

INTRODUCTION

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. Perfomed Student: Nguyen Thi Tuyet Nhung 1

CHAPTER 1. UTILIZE WEBSITE TECHNOLOGIES, TOOLS AND

TECHNIQUES WITH GOOD DESIGN PRINCIPLES TO CREATE A

MULTIPAGE WEBSITE. (LO3)

1. 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 NO DEFINITION OF PRIORITY LEVEL 1 Necessary requirements for the implementation and the operation of the website system. Key 2 Request of the highest priority. 1 3 Medium priority request. 2 4 Low priority request. 3 Table 1. Priority 1.1.2 Analyze customer and user requirements NO USER REQUIREMENT EFFECTIVE

VALIDATION

CRITERIA

PRIORITY

User requires login and registration page Can store and secure user information All customers can register to become a member of the store Key 2 The user requested the homepage to have products on display Users can view products easily without having to move to another page All products will be displayed on the homepage after being added by

Perfomed Student: Nguyen Thi Tuyet Nhung 2

available problem 8 User is required there is specific information in each product Users can see information about more products User can get more information about that product before buying

User requires payment on delivery Users have to pay on receipt, avoiding problems with transfers Must select products and fill in shipping information before payment

Table 2. Analyze customer and user requirements 1.2 Use case diagram 1.2.1 Admin – Use case diagram Perfomed Student: Nguyen Thi Tuyet Nhung 4

Figure 1. Admin – Use case diagram 1.2.2 User – Use case diagram Figure 2. User – Use case diagram Perfomed Student: Nguyen Thi Tuyet Nhung 5

Figure 5. Admin table 1.3.3 Category table The Category table includes the following fields: id, name, link, orders, createDate, and updateDate. In it, id is the primary key. Figure 6. Category table 1.3.4 Contact table The Contact table includes the following fields: id, title, phone, email, content, status, and name. In it, id is the primary key. Figure 7. Contact table Perfomed Student: Nguyen Thi Tuyet Nhung 7

1.3.5 Order table The Order table includes the following fields: id, userid, adminid, orderdate, name, money, price_ship, coupons, payment_method, and status. In which, id is the primary key, userid and adminid are foreign keys. Figure 8. Order table 1.3.6 Orderdetail table The Orderdetail table includes the following fields: id, orderid, productid, price, count, and status. In it, id is the primary key, orderid and productid are foreign keys. Figure 9. Orderdetail table 1.3.7 Producer table The Producer table includes the following fields: id, name, password, productid, created, and status. In it, id is the primary key and productid is the foreign key. Perfomed Student: Nguyen Thi Tuyet Nhung 8

Figure 12. User table 1.3.10 Userlog table The Userlog table includes the following fields: id, password, email, logout, time, and status. In it, id is the primary key. Figure 13. Userlog table 1.3.11 ERD After creating the necessary components in the database, link the tables together via primary key and foreign key with constraints created simultaneously during table creation. The database diagram will look like this: Perfomed Student: Nguyen Thi Tuyet Nhung 10

Figure 14. ERD 1.4 Wireframe The wireframe is a tool to help design the interface and complete the structure of the website. In other words, it is the sketch of the website before proceeding with the design. Although to design and perfect a website requires many factors, but wireframe is an indispensable step before making a website. Our website is carefully wireframed with a clear and detailed plan that includes the following pages: Home page: Perfomed Student: Nguyen Thi Tuyet Nhung 11