BTEC FPT INTERNATIONAL COLLEGE INFORMATION TECHNOLOGY ASSIGNMENT 2 UNIT: Website Design & Development STUDENT : HO TAN RIN CLASS : BDAF20038 STUDENT ID : IT16101 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 Date received (1st sub- Submission date 10/12/2021 10/12/2021 mission) Date received (2nd Re-submission date submission) Student name HO TAN RIN Student ID BDAF200038 NGUYEN HOANG Class IT16101 Assessor name 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: HO TAN RIN Grading grid P5 P6 P7 M4 M5 D2 D3 Summative Feedbacks: Resubmission Feedbacks: Grade: Assessor Signature: Date: Internal Verifier’s Comments: Signature & Date: i ACKNOWLEDGMENTS First of all, I would like to express a special and enormous thanks to my family for their in - valuable encouragement, enthusiasm, and support. Without all of this, I couldn't have achieved it Second, I would like to sincerely thank teacher NGUYEN HOANG ANH VU for enthusiastically supporting me to achieve my academic results and thanking him for his support in the exercises as well as the knowledge that he taught and taught.Besides, I would also like to thank my friends at BTEC FPT International College for allowing me to exchange knowledge and help me understand the issues in this course.
Finally, I would also like to thank the authors, brothers, sisters and friends who have provided a lot of knowledge to use as references throughout this exercise. ii ASSURANCE I certify that this assignment is my work, based on my study and that I have acknowledged all material and sources used in its preparation, whether they be books, articles, reports, lecture notes, and any other kind of document, electronic or personal communication. I also certify that this assignment has not previously been submitted for assessment in any other unit, except where specific permission has been granted from all unit coordinators in- volved, or at any other time in this unit, and that I have not copied in part or whole or other - wise stealing ideas the work of other persons. Learners declaration I certify that the work submitted for this assignment is my own and research sources are fully acknowledged.
Student signature: Date: HO TAN RIN iii TABLE OF CONTENT INSTRUCTOR/ SUPERVISOR/ ASSESSOR……………………………………….iii TABLE OF CONTENT……………………………………………………………….iv LIST OF TABLES AND FIGURES……………………………………………….1 CHAPTER1 SYSTEM ANALYSIS AND DESIGN LO3 Utilise website technologies, tools, and techniques with good design principles to create a multipage website………………………………………………………………….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 Use Case Diagram……………………………………………………………….1 User Use Case Diagram……………………………………………………….2 Admin Use Case Diagram…………………………………………………….6 Specific explanation about wire frames……………………………………….1 Use your design document with appropriate principles, standards and guide- lines to produce a branded, multipage website supported with realistic content.1 Tools and techniques for website development…………………………….2 User Interface……………………………………………………………………22 LO4 Create and use a Test Plan to review the performance and design of a multi- page website………………………………………………………………………………………… 39 3.1 Create a suitable Test Plan identifying key performance areas and use it to re - view the functionality and performance of your website.1 User Interface and User Experience (UI & UX) text log……………………40 3.2 Back-end User Interface and User Experiences (UI & UX) text log……….2 Evaluate the Quality Assurance (QA) process and review how it was imple- mented during your design and development stages(M5) ……………………………………….1 What is Quality Assurance (QA) process……………………………………46 3.2 Quality assurance methods……………………………………………………46 3.3 Some steps to use in the website…………………………………………….56 v LIST OF TABLES AND FIGURES Table 1-1 Priorities…………………………………………………………………………….3 Table 1-2 Client Requirements……………………………………………………………….5 Table 1-3 User Interface and User Experience (UI & UX) text log………………………42 Table 1-4 Back-end User Interface and User Experiences (UI & UX) text log………….45 Figure 1-1: Client and user requirements…………………………………………………….2 Figure 1-2 User- Use Case Diagram……………………………………………………….5 Figure 1-3 Admin Use Case Diagram……………………………………………………….…6 Figure 1-4 Site Map………………………………………………………………………….…7 Figure 1-5 Admin…………………………………………………………………………………7 Figure 1-6 Category…………………………………………………………………………….7 Figure 1-7 Order…………………………………………………………………………………8 Figure 1-8 Ordertrackhistory……………………………………………………………………8 Figure 1-9 Productreviews…………………………………………………………………….……9 Figure 1-11 User log…………………………………………………………………………….10 Figure 1-14 Shopping Database………………………………………………………….11 Figure 1-17 Product Page………………………………………………………………….12 Figure 1-18 My Cart Page………………………………………………………………….…13 Figure 1-19 Login Page………………………………………………………………………….14 Figure 1-20 Login Admin Page…………………………………………………………………14 Figure 1-21 Change password Admin Page………………………………………………….15 vi Figure 1-22 Command buttons………………………………………………………….…16 Figure 1-23 Add button………………………………………………………………….17 Figure 1-28 Add to cart………………………………………………………………….18 Figure1-30 Add to Quote…………………………………………………………….18 Figure 1-31 Button login……………………………………………………………….18 Figure 1-32 Changing admin password………………………………………………….19 Figure 1-33 Save changes…………………………………………………………….…19 Figure 1-34 Home Page…………………………………………………………………….23 Figure 1-35 Contact Page………………………………………………………………….24 Figure 1-36 Login page……………………………………………………………………25 Figure 1-37 My account page…………………………………………………………….26 Figure 1-38 Change information………………………………………………………….27 Figure1-39 Update success…………………………………………………………….…27 Figure 1-40 My Cart Page………………………………………………………….……28 Figure 1-41 Billing& Shipping Page………………………………………………….29 Figure 1-42 Payment page…………………………………………………………….…30 Figure 1-43 Wishlist page.31 Figure 1-44 Product Page…………………………………………………………….33 Figure 1-45 Track Order Page……………………………………………………….34 Figure 1-46 Login Page……………………………………………………………….34 Figure 1-47 Change Password Page……………………………………………….35 vii Figure 1-48 Manage Users Page…………………………………………………….……35 Figure 1-49 Create a new subcategory………………………………………….36 Figure 1-50 Subcategory page………………………………………………………….…36 Figure 1-51 Insert Product Page………………………………………………………….38 Figure 1-52 Manage Products Page………………………………………………………38 Figure1-53 Functional and non-functional requirements……………………………….39 Figure 1-54 compatibility Testing……………………………………………………….50 Figure 1-55 sign up………………………………………………………………………….51 viii INTRODUCTION During the booming period of information technology, e-commerce was an extremely hot industry and thus the use of sales websites became popular and necessary. The website gives individuals or businesses no small benefits: Helping customers easily update information quickly and effectively to best serve cus- tomers in the process of learning about products, services as well as information about the business before making a decision to buy products. or use a service Website is an effective advertising method with small cost and great efficiency (website cost is much cheaper than advertising cost on newspapers, radio, tv,. Unlimited news, al- lowing users to comfortably learn like advertising on the radio If you want to promote your brand, introduce products to consumers, then using the website is the best choice for you.
Perfomed Student: HO TAN RIN 1 CHAPTER1 SYSTEM ANALYSIS AND DESIGN LO3 Utilise website technologies, tools, and techniques with good design principles to create a multipage website 1.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 ). A full set of client and user requirements: A website requirement is a list of the functions, capacities, or features that our website must have, as well as the plans to build it. During the process, many sorts of criteria may be generated, all of which work together to concentrate and prioritize the project plan. Figure 1-1: Client and user requirements.
When we know how people use the internet and our specific product, we can +Incorporate accessibility into the necessary project phases from the outset. +Create accessibility solutions faster. +Spend less time guessing and more time making smart decisions among many choices. +Reduce the number of times you have to go back and fix problems.
+Avoid having to make sacrifices later because you waited too long to handle accessibility. +Gain a greater awareness of accessibility standards, laws, and other requirements. +All of this will benefit developers, project managers, and other stakeholders. Perfomed Student: HO TAN RIN 2 1.
Priority Level Definition Key Requirements for running the website sys- tem 1 High Priority Requirement 2 Medium Priority Requirement 3 Low Priority Requirement Table 1-1 Priorities 1.2 Client Requirements No User Requirement Measure of ef- Validation Priority fectiveness Criteria 1.1 On the homepage, the user Users may view items When a adds 1 requested a product display without having to new items, they area. navigate to another all appear on the website.2 The user requests that the Customers may learn When a customer 1 product page include a data- more about an item visits the product related item. before page, all of the purchasing it. goods are displayed.3 To make a purchase, the user Keep user in- All users must must first log in or register in order register.
formation to access information and become Key members in order to make purchases.4 When users have issues, they Make a link between All users have the should contact the adminis- the developer and the ability to contact trator or support services. the a dministra- tor and support 1 service by email or chat at any time.5 The user requests a Users may view the Before you can 1 shopping cart page so that total price of the check out, you they can change the things they select as must first add the number of things in their well as the number of item to your cart. products they se- Perfomed Student: HO TAN RIN 3 lected.6 On the product page, the cus- Customers may read Product reviews tomer sought product re- reviews and learn and ratings must 2 views and ratings. about the product's be included.
quality before pur- chasing it.7 A page for the user to add, Users can choose how Admins may con- delete, and alter product much of their items trol quantity, user 1 quantities is required. they want to include quality, pricing, or remove. import date, and export date, among other things.8 Administrators can look at a Orders can be The administrator user's product order after managed by ad- must be they've placed it. informed of any products 1 acquired or purchased.9 The user who has been con- Users can make Each entry 1 tacted can make changes to changes to their data.
allows the owner their personal information. to update the database. Table 1-2 Client Requirements 1.2 Use Case Diagram.1 User Use Case Diagram -A use case diagram is a dynamic or behavior diagram in the Unified Model Language. In use case diagrams, actors and use cases are used to model the operation of a system.
Use cases are a collection of activities, services, and processes that the system must do. -Use case diagrams are regularly developed during the early phases of development and are commonly utilized for the following purposes: Perfomed Student: HO TAN RIN 4 Figure 1-2 User- Use Case Diagram 1.2 Admin Use Case Diagram Figure 1-3 Admin Use Case Diagram Perfomed Student: HO TAN RIN 5 1.3 Site Map A sitemap is a map for your website that will assist search engines in identifying, crawling, and indexing all of your material. Sitemaps also inform search engines about the most essential pages on your website. -Sitemaps are classified into several types: +The standard XML sitemap is the most frequent form of a sitemap.
It is often in the form of an XML Sitemap that contains connections to various pages on your website. +Video Sitemap: This is used to assist Google in understanding the video content on your page. +The Google News sitemap: Aids Google in discovering material on sites certified for Google News. +Image Sitemap: Assists Google in discovering all of the images on your website.
Figure 1-4 Site Map 1. In the Admin table, I create fields including ' id, username, password, creationDate, updationDate.In which id is the primary key Perfomed Student: HO TAN RIN 6 Figure 1-5 Admin Category. In the Category table, I create fields including 'id, CategoryName, CategoryDescription, , creationDate, updationDate In which 'id' is the primary key Figure 1-6 Category Order. In the Order table.
I create fields of 'id, userid, productld, quantity, oderDate, payment Methoad, oderStatus. In which 'id' is the primary key Figure 1-7 Order Ordertrackhistory In the Ordertrackhistory table, I create fields including 'id', orderld, status, remark, post- ingdate.Where 'id' is the primary key Perfomed Student: HO TAN RIN 7 Figure 1-8 Ordertrackhistory Product reviews In the Product reviews table, I create fields including 'id', product, quality, price, value, name, summary, review, reviewDate. Where 'id' is the primary key Figure 1-9 Productreviews Product In the Product table, I create fields including 'id', category id, subcategory, creationDate, updationDate. Where 'id' is the primary key.