INFORMATION TECHNOLOGY ASSIGNMENT 2 UNIT WEBSITE DESIGN DEVELOPMENT

BTEC FPT INTERNATIONAL COLLEGE INFORMATION TECHNOLOGY ASSIGNMENT UNIT: WEBSITE DESIGN & DEVELOPMENT STUDENT : NGUYEN THI TUYET NHUNG CLASS : IT16101 STUDENT ID : BDAF200008 SUPERVISOR : NGUYEN HOANG ANH VU DaNang, December 2021 ASSIGNMENT FRONT SHEET Qualification BTEC Level HND Diploma in Business Unit number and title Unit: Website Design & Development Submission date 10/12/2021 Date received (1st submission) Date received (2nd Re-submission date Student name Class submission) Nguyen Thi Tuyet Nhung IT16101 Student ID Assessor name BDAF200008 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 D3 Summative Feedbacks: Resubmission Feedbacks: Grade: Assessor Signature: Date: Internal Verifier’s Comments: Signature & Date: i TABLE OF CONTENT Contents TABLE OF CONTENT ii LIST OF TABLES AND FIGURES .iv LIST OF ACRONYM vii INTRODUCTION CHAPTER 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) .2 1.1 Client and user requirement analysis 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 ii 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 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 40 (UX) and User Interface (UI) (P7) 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 ii LIST OF TABLES AND FIGURES Table 1: Priority 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 Figure 2: User – Use case diagram .5 Figure 3: Site map Figure 4: Overview database .6 Figure 5: Admin table Figure 6: Category table .7 Figure 7: Contact table Figure 8: Order table Figure 9: Orderdetail table 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 RAM Random Access Memory GUI Graphical User Interface UX User Experience CPU Central Processing Unit UI User Interface HTML HyperText Markup Language CSS Cascading Style Sheets vii 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 CHAPTER 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 NO DEFINITION OF PRIORITY LEVEL Necessary requirements for the implementation Key and the operation of the website system Request of the highest priority Medium priority request Low priority request Table Priority 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 not have an account can register a new account with information such as name, username, password, re-enter password, email and CHAPTER 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: CONCLUSION 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 REFERENCES Mr Nguyen Hoang Anh Vu lecturers and slides  ... 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 :.. .ASSIGNMENT FRONT SHEET Qualification BTEC Level HND Diploma in Business Unit number and title Unit: Website Design & Development Submission date 10/ 12/ 2 021 Date received (1st... 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