Thông Tin Về Thiết Kế và Phát Triển Website Tại BTEC FPT International College

Trong kỷ nguyên số, việc sở hữu kỹ năng thiết kế và phát triển website chuyên nghiệp là một lợi thế cạnh tranh… 68 trang · BTEC FPT International College.

• Trường học: BTEC FPT International College
• Đề tài: Hướng Dẫn Thiết Kế và Phát Triển Website Tại BTEC FPT International College

Mục lục chi tiết

• ACKNOWLEDGMENTS
• ASSURANCE
• INSTRUCTOR/ SUPERVISOR/ ASSESSOR
• LIST OF TABLES AND FIGURES
• INTRODUCTION
• 1. CHAPTER 1: SYSTEM ANALYSIS AND DESIGN
• 1.1. LO3 Utilise website technologies, tools, and techniques with good design principles to create a multipage website
• 1.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)
• 1.1.1.1. Use Case Diagram
• 1.1.1.2. User Use Case Diagram
• 1.1.1.3. Admin Use Case Diagram
• 1.1.1.4. Specific explanation about wire frames
• 1.1.2. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content
• 1.1.2.1. Tools and techniques for website development
• 1.1.2.2. User Interface
• 1.2. LO4 Create and use a Test Plan to review the performance and design of a multi-page website
• 1.2.1. Create a suitable Test Plan identifying key performance areas and use it to review the functionality and performance of your website
• 1.2.1.1. User Interface and User Experience (UI & UX) text log
• 1.2.1.2. Back-end User Interface and User Experiences (UI & UX) text log
• 1.2.2. Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages (M5)
• 1.2.2.1. What is Quality Assurance (QA) process
• 1.2.2.2. Quality assurance methods
• 1.2.2.3. Some steps to use in the website

Tóm tắt

I. Lộ trình học thiết kế phát triển website tại BTEC FPT

Trong kỷ nguyên số, việc sở hữu kỹ năng thiết kế và phát triển website chuyên nghiệp là một lợi thế cạnh tranh vượt trội. Tại Cao đẳng Quốc tế FPT (BTEC FPT), chương trình học thiết kế web được xây dựng theo tiêu chuẩn quốc tế, tập trung vào việc trang bị cho sinh viên kiến thức nền tảng vững chắc và kỹ năng thực hành chuyên sâu. Lộ trình học tập không chỉ dừng lại ở lý thuyết mà còn chú trọng vào các dự án thực tế, giúp sinh viên đối mặt và giải quyết các vấn đề như một lập trình viên thực thụ. Chương trình đào tạo bao quát toàn bộ quy trình phát triển một trang web hoàn chỉnh, từ khâu lên ý tưởng, phân tích yêu cầu, thiết kế giao diện, lập trình front-end và back-end, cho đến kiểm thử và triển khai. Sinh viên được tiếp cận với các công nghệ và ngôn ngữ lập trình phổ biến nhất hiện nay, đảm bảo sau khi tốt nghiệp có thể tự tin tham gia vào thị trường lao động. Môi trường học tập tại BTEC FPT thúc đẩy sự sáng tạo và tự chủ, với phương pháp học tập qua dự án (Project-based Learning) làm chủ đạo. Thay vì học thuộc lòng, sinh viên được khuyến khích áp dụng kiến thức để xây dựng các sản phẩm cụ thể, điển hình là các đồ án tốt nghiệp thiết kế web có tính ứng dụng cao.

1.1. Tổng quan chương trình học thiết kế web BTEC FPT

Chương trình đào tạo ngành thiết kế và phát triển website tại BTEC FPT được thiết kế một cách hệ thống, bao gồm các môn học cốt lõi giúp sinh viên nắm vững toàn bộ quy trình. Ngay từ những kỳ đầu tiên, sinh viên được làm quen với các nguyên tắc cơ bản của thiết kế giao diện UI/UX, đảm bảo sản phẩm cuối cùng không chỉ mạnh về tính năng mà còn thân thiện với người dùng. Tiếp đó, chương trình đi sâu vào các ngôn ngữ lập trình web nền tảng như HTML, CSS, và JavaScript để xây dựng phần giao diện người dùng (front-end). Các môn học về lập trình back-end và cơ sở dữ liệu (MySQL, SQL Server) cung cấp kỹ năng xử lý logic phía máy chủ, quản lý dữ liệu và xây dựng các chức năng phức tạp. Chương trình này là một phần quan trọng của chuyên ngành phát triển phần mềm tại trường, được công nhận rộng rãi về chất lượng và tính thực tiễn.

1.2. Môi trường học tập thực tiễn tại BTEC FPT

Môi trường học tập tại BTEC FPT được xây dựng dựa trên triết lý "Học đi đôi với hành". Sinh viên không chỉ ngồi nghe giảng mà còn được tham gia trực tiếp vào các dự án mô phỏng môi trường làm việc thực tế. Tài liệu nghiên cứu của sinh viên Hồ Tấn Rin về đồ án "Website Design & Development" là một minh chứng rõ nét. Trong đồ án này, sinh viên phải thực hiện đầy đủ các bước từ phân tích yêu cầu khách hàng, vẽ sơ đồ Use Case, thiết kế wireframe, phát triển chức năng, đến lập kế hoạch kiểm thử (Test Plan). Cách tiếp cận này giúp sinh viên hình thành tư duy giải quyết vấn đề, kỹ năng làm việc nhóm và khả năng quản lý dự án. Giảng viên đóng vai trò là người hướng dẫn, hỗ trợ sinh viên vượt qua các thách thức kỹ thuật và định hướng sản phẩm, tạo điều kiện tối đa để sinh viên phát huy năng lực cá nhân.

II. Top thách thức khi phát triển website tại BTEC FPT là gì

Quá trình học và thực hành phát triển website tại BTEC FPT mang lại nhiều kiến thức bổ ích nhưng cũng đi kèm không ít thách thức. Một trong những khó khăn lớn nhất là việc kết nối nhuần nhuyễn giữa lý thuyết và thực hành. Sinh viên cần chuyển hóa kiến thức từ sách vở thành những dòng mã có thể hoạt động hiệu quả. Thách thức tiếp theo là việc phải làm chủ đồng thời cả hai mảng lập trình front-end và lập trình back-end. Việc xây dựng một giao diện đẹp mắt, tương tác mượt mà đòi hỏi kỹ năng về thẩm mỹ và công nghệ, trong khi việc xử lý logic nghiệp vụ và tối ưu hóa cơ sở dữ liệu lại yêu cầu tư duy hệ thống và sự chính xác cao. Ngoài ra, việc nắm bắt và áp dụng các nguyên tắc thiết kế giao diện UI/UX để tạo ra trải nghiệm người dùng tốt là một yêu cầu không hề đơn giản. Sinh viên phải đặt mình vào vị trí người dùng để hiểu nhu cầu và hành vi của họ, từ đó đưa ra các quyết định thiết kế phù hợp. Đây là những kỹ năng quan trọng mà khóa học lập trình web FPT tập trung rèn luyện cho sinh viên.

2.1. Khó khăn trong việc tích hợp lập trình front end và back end

Việc tích hợp giữa lập trình front-end và lập trình back-end là một bài toán phức tạp. Front-end chịu trách nhiệm hiển thị dữ liệu và nhận tương tác từ người dùng, trong khi back-end xử lý các yêu cầu, truy vấn cơ sở dữ liệu và trả kết quả về. Để hai phần này giao tiếp trơn tru, sinh viên cần có kiến thức vững chắc về API, cách truyền và nhận dữ liệu (ví dụ: qua JSON), và xử lý các trạng thái bất đồng bộ. Trong đồ án thực tế, sinh viên phải đảm bảo rằng khi người dùng thực hiện một hành động trên giao diện (như thêm sản phẩm vào giỏ hàng), yêu cầu phải được gửi chính xác đến back-end, dữ liệu được cập nhật vào cơ sở dữ liệu MySQL, và giao diện phải phản hồi lại trạng thái thành công hoặc thất bại một cách kịp thời. Bất kỳ sai sót nào trong quá trình này đều có thể dẫn đến lỗi hệ thống và trải nghiệm người dùng kém.

2.2. Yêu cầu cao về thiết kế giao diện UI UX và trải nghiệm người dùng

Một trang web thành công không chỉ cần hoạt động đúng chức năng mà còn phải có giao diện hấp dẫn và dễ sử dụng. Yêu cầu về thiết kế giao diện UI/UX ngày càng cao, đòi hỏi lập trình viên phải có tư duy của một nhà thiết kế. Sinh viên phải học cách xây dựng wireframe, prototype, lựa chọn màu sắc, font chữ, và bố cục hợp lý. Như được thể hiện trong tài liệu nghiên cứu của sinh viên BTEC FPT, việc tạo ra các wireframe chi tiết cho từng trang (Homepage, Product Page, My Cart Page) là bước không thể thiếu. Thách thức nằm ở việc cân bằng giữa yếu tố thẩm mỹ và tính khả dụng, đảm bảo người dùng có thể dễ dàng tìm thấy thông tin, thực hiện các tác vụ mà không gặp bất kỳ trở ngại nào. Đây là kỹ năng phân biệt một lập trình viên giỏi và một lập trình viên chỉ biết viết mã.

III. Bí quyết phân tích và thiết kế website chuẩn tại BTEC FPT

Để xây dựng một website thành công, giai đoạn phân tích và thiết kế đóng vai trò nền tảng. Tại BTEC FPT, sinh viên được đào tạo một quy trình bài bản, bắt đầu từ việc thấu hiểu yêu cầu của khách hàng và người dùng cuối. Phương pháp này đảm bảo sản phẩm cuối cùng không chỉ đáp ứng các tiêu chí kỹ thuật mà còn giải quyết được các vấn đề thực tiễn của doanh nghiệp. Quá trình này bao gồm việc định nghĩa rõ ràng các chức năng cần có, xác định đối tượng người dùng, và xây dựng các tài liệu thiết kế chi tiết. Như trong đồ án mẫu, việc lập bảng "Client Requirements" (Bảng 1-2) với các mức độ ưu tiên (Priority) rõ ràng là bước đầu tiên và quan trọng nhất. Sau khi đã có yêu cầu, sinh viên sẽ tiến hành trực quan hóa hệ thống thông qua các công cụ như Sơ đồ Use Case và Wireframe. Cách tiếp cận có hệ thống này giúp giảm thiểu rủi ro, tiết kiệm thời gian chỉnh sửa trong giai đoạn lập trình và đảm bảo tất cả các bên liên quan đều có chung một tầm nhìn về sản phẩm.

3.1. Xây dựng yêu cầu người dùng và khách hàng chi tiết

Bước đầu tiên trong mọi dự án phát triển phần mềm là thu thập và phân tích yêu cầu. Sinh viên học cách xác định các yêu cầu chức năng (functional requirements) và phi chức năng (non-functional requirements). Ví dụ, yêu cầu "Người dùng phải đăng nhập để mua hàng" là một yêu cầu chức năng, trong khi "Website phải tải nhanh" là yêu cầu phi chức năng. Tài liệu đồ án của sinh viên Hồ Tấn Rin đã thể hiện rõ điều này qua bảng "Client Requirements", trong đó mỗi yêu cầu được mô tả cụ thể, đi kèm với tiêu chí đánh giá (Validation Criteria) và mức độ ưu tiên. Quá trình này đòi hỏi kỹ năng giao tiếp, phân tích và tài liệu hóa, những kỹ năng mềm cực kỳ quan trọng đối với một lập trình viên chuyên nghiệp.

3.2. Kỹ thuật tạo Wireframe và Sơ đồ Use Case hiệu quả

Sau khi xác định yêu cầu, bước tiếp theo là trực quan hóa cấu trúc và luồng hoạt động của website. Sơ đồ Use Case (Use Case Diagram), như trong Hình 1-2 và 1-3 của tài liệu, được sử dụng để mô tả các tương tác giữa người dùng (Actor) và hệ thống, làm rõ các chức năng chính. Tiếp theo, Wireframe được tạo ra để phác thảo bố cục của từng trang. Các wireframe này (từ Hình 1-16 đến 1-21) đóng vai trò như một bản thiết kế chi tiết cho giao diện, xác định vị trí của các thành phần như menu, nút bấm, hình ảnh sản phẩm. Việc sử dụng các công cụ này giúp sinh viên và giảng viên hướng dẫn dễ dàng trao đổi, phản hồi và hoàn thiện ý tưởng thiết kế trước khi bắt tay vào viết những dòng code đầu tiên, một kỹ năng cốt lõi trong lộ trình học lập trình viên.

IV. Hướng dẫn lập trình website với công nghệ hiện đại nhất

Giai đoạn phát triển là lúc các ý tưởng thiết kế được hiện thực hóa thành một sản phẩm website hoàn chỉnh. Chương trình học thiết kế web BTEC FPT trang bị cho sinh viên kiến thức về các công nghệ và công cụ hiện đại nhất để xây dựng các ứng dụng web mạnh mẽ và linh hoạt. Sinh viên được học cách lựa chọn ngăn xếp công nghệ (technology stack) phù hợp với yêu cầu của dự án. Quá trình này bao gồm việc phát triển lập trình front-end để tạo ra giao diện người dùng tương tác và lập trình back-end để xử lý logic nghiệp vụ và quản lý dữ liệu. Tài liệu đồ án cho thấy việc sử dụng một hệ thống có cấu trúc rõ ràng, với các bảng cơ sở dữ liệu được thiết kế cẩn thận (Hình 1-14) và giao diện người dùng được xây dựng dựa trên các wireframe đã thống nhất. Sinh viên cũng được khuyến khích sử dụng các framework và thư viện như Bootstrap để tăng tốc độ phát triển và đảm bảo tính nhất quán trong thiết kế.

4.1. Lựa chọn ngôn ngữ lập trình web và cơ sở dữ liệu phù hợp

Việc lựa chọn công nghệ là một quyết định quan trọng. Đối với front-end, bộ ba HTML, CSS, và JavaScript là không thể thiếu. Sinh viên học cách sử dụng HTML để cấu trúc nội dung, CSS để tạo kiểu và thiết kế giao diện, và JavaScript để thêm các hiệu ứng tương tác động. Đối với back-end, các ngôn ngữ như PHP thường được lựa chọn cho các dự án web thương mại điện tử do sự phổ biến và cộng đồng hỗ trợ lớn. Đi kèm với đó là hệ quản trị cơ sở dữ liệu MySQL hoặc SQL Server để lưu trữ và quản lý thông tin sản phẩm, người dùng, đơn hàng. Việc thiết kế một cơ sở dữ liệu có cấu trúc tốt, như trong Sơ đồ ERD (Hình 1-15), là yếu tố then chốt để đảm bảo hiệu suất và khả năng mở rộng của website.

4.2. Ứng dụng công cụ và framework trong chuyên ngành phát triển phần mềm

Để tối ưu hóa quy trình làm việc, sinh viên trong chuyên ngành phát triển phần mềm được hướng dẫn sử dụng các công cụ chuyên nghiệp. Trình soạn thảo mã như Sublime Text hoặc VS Code giúp viết mã nhanh và hiệu quả hơn. Công cụ Chrome Developer Tools là trợ thủ đắc lực cho việc gỡ lỗi front-end. Hệ thống quản lý phiên bản như Git và nền tảng GitHub giúp quản lý mã nguồn và cộng tác nhóm hiệu quả. Ngoài ra, các framework front-end như Bootstrap cung cấp một bộ sưu tập các thành phần UI được xây dựng sẵn, giúp sinh viên nhanh chóng tạo ra các giao diện đáp ứng (responsive) và chuyên nghiệp mà không cần viết lại CSS từ đầu. Việc thành thạo các công cụ này giúp sinh viên hòa nhập nhanh chóng với môi trường làm việc thực tế sau khi tốt nghiệp.

V. Phân tích đồ án tốt nghiệp thiết kế web thương mại điện tử

Đồ án thực tế là nơi hội tụ tất cả kiến thức và kỹ năng mà sinh viên đã tích lũy. Phân tích đồ án tốt nghiệp thiết kế web về một trang thương mại điện tử của sinh viên BTEC FPT cho thấy một quy trình làm việc chuyên nghiệp và toàn diện. Sản phẩm cuối cùng không chỉ là một trang web tĩnh mà là một hệ thống động hoàn chỉnh, bao gồm cả giao diện cho người dùng (khách hàng) và trang quản trị cho quản trị viên. Giao diện người dùng có đầy đủ các chức năng cần thiết như xem sản phẩm, thêm vào giỏ hàng, thanh toán và theo dõi đơn hàng. Trang quản trị cho phép thực hiện các nghiệp vụ quản trị website như quản lý người dùng, thêm/sửa/xóa sản phẩm, quản lý danh mục và xem đơn hàng. Đồ án này là một minh chứng cho thấy môi trường học tập tại BTEC FPT đã trang bị cho sinh viên khả năng xây dựng các ứng dụng web phức tạp, đáp ứng yêu cầu của doanh nghiệp.

5.1. Triển khai chức năng website từ quản trị đến người dùng cuối

Hệ thống được phát triển có hai phần rõ rệt. Phía người dùng cuối, giao diện được thiết kế thân thiện, dễ điều hướng, với các trang chức năng như Trang chủ (Hình 1-34), Trang sản phẩm (Hình 1-44), Giỏ hàng (Hình 1-40) và Thanh toán (Hình 1-42). Mỗi trang đều được xây dựng bám sát theo wireframe ban đầu. Phía quản trị viên, hệ thống cung cấp một Bảng điều khiển (Dashboard) mạnh mẽ để thực hiện các tác vụ quản trị website. Các chức năng như Quản lý người dùng (Hình 1-48), Thêm sản phẩm mới (Hình 1-51), và Quản lý danh mục con (Hình 1-50) cho phép quản trị viên kiểm soát hoàn toàn nội dung và hoạt động của trang web. Sự phân chia rõ ràng này thể hiện tư duy thiết kế hệ thống tốt.

5.2. Quy trình kiểm thử và đảm bảo chất lượng QA cho website

Phát triển website không chỉ dừng lại ở việc viết mã. Giai đoạn kiểm thử và đảm bảo chất lượng (Quality Assurance - QA) là cực kỳ quan trọng để đảm bảo sản phẩm hoạt động ổn định và không có lỗi. Trong đồ án, sinh viên đã xây dựng một Kế hoạch kiểm thử (Test Plan) chi tiết (Mục LO4), xác định các khu vực hiệu suất chính cần đánh giá. Quy trình QA bao gồm việc kiểm tra chức năng (functional testing) để đảm bảo các nút bấm, biểu mẫu hoạt động đúng, và kiểm tra khả năng tương thích (compatibility testing) để website hiển thị tốt trên các trình duyệt khác nhau. Việc thực hiện quy trình QA một cách nghiêm túc cho thấy sinh viên đã được đào tạo theo các tiêu chuẩn phát triển phần mềm chuyên nghiệp, sẵn sàng cho các dự án thực tế.

VI. Cơ hội việc làm sau khi tốt nghiệp BTEC FPT và định hướng

Hoàn thành chương trình học thiết kế web BTEC FPT mở ra một tương lai nghề nghiệp rộng lớn cho sinh viên. Với nền tảng kiến thức vững chắc, kỹ năng thực hành chuyên sâu và một portolio các dự án thực tế, sinh viên tốt nghiệp hoàn toàn tự tin ứng tuyển vào các vị trí Lập trình viên Front-end, Back-end, hoặc Full-stack tại các công ty công nghệ. Tấm bằng BTEC HND được công nhận quốc tế cũng là một lợi thế lớn, giúp sinh viên có thể học liên thông lên các trường đại học danh tiếng trên thế giới hoặc tìm kiếm cơ hội làm việc tại thị trường nước ngoài. Cơ hội việc làm sau khi tốt nghiệp BTEC FPT là rất cao do nhu cầu nhân lực chất lượng cao trong ngành công nghệ thông tin luôn ở mức lớn. Nhà trường cũng có mạng lưới đối tác doanh nghiệp rộng khắp, thường xuyên tổ chức các ngày hội việc làm và cầu nối giúp sinh viên tiếp cận với các nhà tuyển dụng hàng đầu. Việc đầu tư vào tuyển sinh ngành thiết kế web tại BTEC FPT là một quyết định chiến lược cho một sự nghiệp bền vững.

6.1. Lộ trình học lập trình viên chuyên nghiệp sau tốt nghiệp

Tốt nghiệp từ BTEC FPT là một khởi đầu vững chắc trên lộ trình học lập trình viên chuyên nghiệp. Sinh viên không chỉ có kiến thức mà còn có trong tay một sản phẩm hoàn chỉnh – chính là đồ án tốt nghiệp thiết kế web. Đồ án này đóng vai trò như một bản portfolio sống động, thể hiện rõ năng lực phân tích, thiết kế, lập trình và quản lý dự án của sinh viên trước nhà tuyển dụng. Nhiều sinh viên sau khi tốt nghiệp đã nhanh chóng tìm được việc làm đúng chuyên ngành tại các công ty phần mềm lớn hoặc tự tin khởi nghiệp với các dự án riêng. Kiến thức nền tảng về cả front-end và back-end giúp họ linh hoạt trong việc lựa chọn con đường sự nghiệp và dễ dàng học hỏi các công nghệ mới trong tương lai.

6.2. Thông tin tuyển sinh ngành thiết kế web và cơ hội nghề nghiệp

Ngành thiết kế và phát triển web vẫn đang là một trong những ngành có nhu cầu nhân lực cao nhất. Các doanh nghiệp từ startup đến tập đoàn lớn đều cần các chuyên gia để xây dựng và duy trì sự hiện diện của họ trên không gian mạng. Do đó, cơ hội việc làm sau khi tốt nghiệp BTEC FPT là rất rộng mở với các vị trí như Web Developer, UI/UX Designer, QA Tester, Project Manager... Thông tin tuyển sinh ngành thiết kế web tại BTEC FPT được cập nhật thường xuyên trên website của trường, với các chương trình học bổng và chính sách hỗ trợ hấp dẫn cho sinh viên. Việc lựa chọn theo học tại một cơ sở đào tạo uy tín như Cao đẳng Quốc tế FPT là bước đệm quan trọng để xây dựng một sự nghiệp thành công trong lĩnh vực công nghệ.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong kỷ nguyên phát triển mạnh mẽ của công nghệ thông tin, thương mại điện tử (e-commerce) đã trở thành một lĩnh vực then chốt, thúc đẩy nhu cầu ứng dụng các website bán hàng trong hoạt động kinh doanh của cá nhân và doanh nghiệp. Việc xây dựng website thương mại điện tử mang lại nhiều giá trị thực tiễn: giúp khách hàng tiếp cận và cập nhật thông tin sản phẩm, dịch vụ nhanh chóng trước khi đưa ra quyết định mua hàng; đồng thời đóng vai trò như một phương thức quảng bá thương hiệu tối ưu với chi phí thấp hơn đáng kể so với các kênh truyền thông truyền thống như báo in, phát thanh hay truyền hình.

Đề tài được thực hiện nhằm đáp ứng các chuẩn đầu ra (Learning Outcomes - LO) thuộc học phần thiết kế và phát triển web, bao gồm:

1. Mục tiêu LO3: Vận dụng các công nghệ, công cụ, kỹ thuật phát triển web kết hợp với các nguyên tắc thiết kế tốt để xây dựng một website đa trang (multipage website).
   • Nhiệm vụ P5: Xây dựng tài liệu thiết kế hoàn chỉnh cho website đa trang có nhận diện thương hiệu, bao gồm hệ thống wireframe độ trung thực trung bình (medium-fidelity wireframes) và tập hợp đầy đủ các yêu cầu của khách hàng cùng người dùng.
   • Nhiệm vụ P6: Ứng dụng tài liệu thiết kế dựa trên các nguyên tắc, tiêu chuẩn và hướng dẫn phù hợp để xây dựng website đa trang có nhận diện thương hiệu với nội dung thực tế.
2. Mục tiêu LO4: Xây dựng và thực thi Kế hoạch kiểm thử (Test Plan) nhằm đánh giá toàn diện hiệu năng và thiết kế của website đa trang.
   • Nhiệm vụ M5: Đánh giá quy trình Đảm bảo chất lượng (Quality Assurance - QA) và phân tích cách thức triển khai QA trong các giai đoạn thiết kế và phát triển.

• Đối tượng nghiên cứu: Quy trình phân tích, thiết kế hệ thống, xây dựng cơ sở dữ liệu, thiết kế giao diện người dùng (UI/UX) và lập kế hoạch kiểm thử cho hệ thống website thương mại điện tử đa ngành hàng (điện thoại thông minh, máy tính xách tay, đồng hồ thông minh, máy tính bảng và đồ gia dụng).
• Phạm vi nghiên cứu: Đồ án được thực hiện trong khuôn khổ chương trình BTEC Level 4 HND Diploma in Business / Information Technology tại Cao đẳng Quốc tế BTEC FPT (BTEC FPT International College), cơ sở Đà Nẵng, hoàn thành và nộp báo cáo vào tháng 12 năm 2021 (thời hạn nộp: 10/12/2021). Tác giả thực hiện là sinh viên Hồ Tấn Rịn (Mã sinh viên: IT16101 / BDAF200038, Lớp: BDAF20038), dưới sự hướng dẫn và đánh giá của giảng viên Nguyễn Hoàng Anh Vũ.

Cơ sở lý thuyết và phương pháp

Đồ án vận dụng hệ thống lý thuyết chuẩn mực trong kỹ thuật phần mềm và công nghệ web để mô hình hóa và triển khai hệ thống:

• Mô hình hóa hệ thống bằng ngôn ngữ UML (Unified Modeling Language): Sử dụng sơ đồ ca sử dụng (Use Case Diagram) để biểu diễn các tác nhân (Actors) và các hoạt động, quy trình dịch vụ mà hệ thống cung cấp cho hai nhóm đối tượng chính: Người dùng (User) và Quản trị viên (Admin).
• Cấu trúc điều hướng và sơ đồ trang web (Sitemap): Nghiên cứu các dạng sitemap phục vụ lập chỉ mục và điều hướng dữ liệu, bao gồm XML Sitemap chuẩn, Video Sitemap, Google News Sitemap và Image Sitemap.
• Mô hình dữ liệu quan hệ và lược đồ ERD (Entity Relationship Diagram): Xây dựng cấu trúc dữ liệu chuẩn hóa, xác định các trường thuộc tính và thiết lập các khóa chính (Primary Key - PK) nhằm duy trì tính toàn vẹn dữ liệu cho hệ thống bán hàng trực tuyến.
• Nguyên lý thiết kế phần mềm và giao diện: Áp dụng nguyên lý DRY (Don't Repeat Yourself) nhằm tối ưu hóa mã nguồn, giảm thiểu trùng lặp mã CSS/HTML; thiết lập khung wireframe độ trung thực trung bình; và tích hợp các nguyên tắc thiết kế dễ tiếp cận (accessibility) ngay từ các giai đoạn đầu của dự án.
• Quy trình đảm bảo chất lượng (Quality Assurance - QA): Áp dụng các phương pháp QA, quy trình kiểm thử giao diện, trải nghiệm người dùng (UI & UX text log) và kiểm thử tính tương thích (Compatibility Testing).

Phương pháp nghiên cứu và phát triển được triển khai thực tế bao gồm:

• Phương pháp phân tích và phân loại yêu cầu: Thu thập và phân loại yêu cầu của khách hàng và người dùng theo ba cấp độ ưu tiên (Priority 1: Cao; Priority 2: Trung bình; Priority 3: Thấp), kèm theo thước đo hiệu quả (Measure of effectiveness) và tiêu chí kiểm chứng (Validation Criteria).
• Phương pháp thiết kế kiến trúc và mô phỏng giao diện: Thiết lập wireframe chi tiết từng màn hình chức năng cho phân hệ người dùng và phân hệ quản trị; định lượng kích thước chuẩn cho các thành phần đồ họa (logo, slider banner, khung sản phẩm).
• Phương pháp kiểm thử và ghi nhật ký: Lập bảng nhật ký kiểm thử giao diện và chức năng cho cả hai phân hệ Front-end và Back-end nhằm theo dõi tính đúng đắn của các luồng nghiệp vụ.
• Nguồn dữ liệu: Dữ liệu phục vụ nghiên cứu là yêu cầu đặc tả học thuật từ chương trình BTEC HND và tập dữ liệu mô phỏng cho các danh mục sản phẩm công nghệ, người dùng, đơn hàng và đánh giá.

Thiết kế và triển khai

Công cụ và công nghệ phát triển

Tác giả xác định và phân tích 7 công cụ, công nghệ quan trọng phục vụ phát triển web phía người dùng (Front-end):

• Sublime Text: Trình biên tập mã nguồn gọn nhẹ, hiệu năng xử lý cao, giao diện tối ưu cho lập trình viên.
• Chrome Developer Tools: Công cụ tích hợp sẵn trong trình duyệt cho phép kiểm tra, chỉnh sửa HTML/CSS theo thời gian thực, gỡ lỗi mã nguồn JavaScript và phân tích hiệu năng tải trang thông qua bảng mạng (Network) và dòng thời gian (Timeline).
• jQuery: Thư viện JavaScript đa nền tảng (phát hành từ năm 2006) giúp đơn giản hóa việc xử lý hiệu ứng đồ họa, tích hợp tiện ích mở rộng và duyệt cây phân cấp tài liệu HTML.
• GitHub: Hệ thống lưu trữ và quản lý phiên bản mã nguồn (VCS) hỗ trợ theo dõi lịch sử chỉnh sửa, khôi phục trạng thái mã nguồn, quản lý lỗi (issue tracking), phân chia tác vụ và hỗ trợ làm việc nhóm.
• Twitter Bootstrap: Bộ khung giao diện (UI kit) cung cấp các thành phần tái sử dụng (reusable modules), chuẩn hóa định dạng trang kiểu mẫu, tạo đối tượng hộp thoại (modal) và tích hợp các plugin JavaScript giúp tiết kiệm thời gian viết mã.
• AngularJS: Framework mã nguồn mở do Google phát triển, cho phép mở rộng cú pháp HTML để xử lý các khung nhìn động (dynamic views), tăng tính biểu đạt và khả năng bảo trì mã nguồn.
• Sass: Bộ tiền xử lý CSS (CSS preprocessor) cung cấp các tính năng biến (variables), lồng mã (nesting) và hàm trộn (mixins), giúp mã định kiểu dễ bảo trì và tuân thủ chặt chẽ nguyên lý DRY.

Thiết kế cơ sở dữ liệu (Shopping Database)

Hệ thống cơ sở dữ liệu Shopping Database được thiết kế bao gồm 10 bảng dữ liệu có cấu trúc chi tiết như sau:

Tên bảng dữ liệu	Danh sách các trường dữ liệu (Fields)	Khóa chính (PK)
Admin	id, username, password, creationDate, updationDate	id
Category	id, CategoryName, CategoryDescription, creationDate, updationDate	id
Order	id, userid, productld, quantity, oderDate, paymentMethoad, oderStatus	id
Ordertrackhistory	id, orderld, status, remark, postingdate	id
Product reviews	id, product, quality, price, value, name, summary, review, reviewDate	id
Product	id, category id, subcategory, creationDate, updationDate	id
User log	id, user email, userip, login Time, logout, status	id
Users	id, email, name, contact no, password, shippingAddress, shipping state, shipping city, shippingPincode, billingAddress, billing state, billing city, billingPincode, regDate, updationDate	id
Wishlist	id, userld, productld, posting date	id

Thiết kế giao diện và kích thước thành phần (UI & Wireframes)

Hệ thống wireframe và giao diện thực thi được quy chuẩn kích thước cụ thể:

• Biểu trưng (Logo): Chiều rộng 100px, chiều cao 120px.
• Khung trình chiếu hình ảnh (Slider): Chiều rộng 1150px, chiều cao 650px.
• Khung hiển thị sản phẩm (Featured Products, Smart Phones, Laptops): Chiều rộng 200px, chiều cao 350px.

Các nút lệnh điều hướng và thao tác nghiệp vụ được thiết kế đồng bộ:

• Search: Tìm kiếm thông tin sản phẩm.
• Shop / Product: Hiển thị toàn bộ sản phẩm hoặc sản phẩm theo danh mục.
• LapTop: Lọc hiển thị chuyên biệt dòng máy tính xách tay.
• Contact: Cung cấp biểu mẫu gửi phản hồi, thắc mắc đến quản trị viên.
• Pay: Điều hướng đến trang thanh toán đơn hàng.
• Cart: Hiển thị số lượng hàng và giá trị đơn hàng, chuyển tiếp đến trang giỏ hàng.
• Account: Quản lý đăng nhập và chỉnh sửa dữ liệu cá nhân.
• Add to cart: Thêm sản phẩm được chọn vào giỏ hàng.
• Compare: So sánh các thông số kỹ thuật giữa các sản phẩm.
• Add to Quote: Thêm sản phẩm vào danh sách báo giá cho khách hàng.
• Save changes: Lưu trữ các cập nhật thông tin trong tài khoản người dùng hoặc giao diện quản trị.

Hệ thống giao diện được chia thành hai phân hệ hoàn chỉnh:

• Giao diện người dùng (Front-end): Trang chủ (Home Page), Trang liên hệ (Contact Page), Trang đăng nhập (Login Page), Trang thông tin tài khoản (My Account Page - có thông báo cập nhật thành công), Trang giỏ hàng (My Cart Page), Trang địa chỉ thanh toán và giao nhận (Billing & Shipping Page), Trang thanh toán (Payment Page), Trang danh sách sản phẩm yêu thích (Wishlist Page), Trang chi tiết sản phẩm (Product Page), Trang theo dõi đơn hàng (Track Order Page).
• Giao diện quản trị (Back-end Admin): Trang đăng nhập quản trị (Login Page), Trang đổi mật khẩu quản trị (Change Password Page), Trang quản lý danh sách người dùng (Manage Users Page - hỗ trợ tìm kiếm), Trang quản lý danh mục con (Sub-Category Page - hỗ trợ thêm, sửa, xóa), Trang thêm mới sản phẩm (Insert Product Page - hiển thị thông báo thêm thành công), Trang quản lý sản phẩm (Manage Products Page).

Kế hoạch kiểm thử và Đảm bảo chất lượng (Test Plan & QA)

• Triển khai xây dựng Kế hoạch kiểm thử (Test Plan) định danh các vùng hiệu năng trọng yếu nhằm kiểm định chức năng và hiệu năng website.
• Thiết lập bảng nhật ký kiểm thử giao diện và trải nghiệm (UI & UX text log) cho phân hệ Front-end (Table 1-3) và phân hệ Back-end (Table 1-4).
• Phân tích và kiểm tra các yêu cầu chức năng, phi chức năng (Functional and Non-functional requirements) kết hợp kiểm thử tính tương thích (Compatibility Testing).
• Hệ thống hóa định nghĩa, phương pháp luận QA và các bước áp dụng QA thực tế xuyên suốt các giai đoạn thiết kế và xây dựng website.

Nội dung chính theo từng chương

CHAPTER 1: SYSTEM ANALYSIS AND DESIGN

Chương 1 tập trung triển khai hai chuẩn đầu ra cốt lõi của học phần: LO3 và LO4.

Triển khai chuẩn đầu ra LO3 (Thiết kế và xây dựng website đa trang)

Tác giả phân tích đầy đủ tập hợp yêu cầu của khách hàng và người dùng. Lợi ích của việc nắm bắt hành vi người dùng và khả năng tiếp cận (accessibility) ngay từ đầu dự án được nêu rõ: tích hợp giải pháp tiếp cận nhanh hơn, giảm bớt phỏng đoán khi ra quyết định, giảm số lần sửa lỗi phát sinh, tránh việc phải thỏa hiệp kỹ thuật ở giai đoạn muộn và nâng cao nhận thức về tiêu chuẩn tiếp cận cho lập trình viên cùng các bên liên quan.

Hệ thống yêu cầu khách hàng được cấu trúc thành 9 tiêu chí với độ ưu tiên xác định:

STT	Yêu cầu người dùng (User Requirement)	Thước đo hiệu quả (Measure of effectiveness)	Tiêu chí kiểm chứng (Validation Criteria)	Mức ưu tiên
1.1	Khu vực hiển thị sản phẩm tại trang chủ	Người dùng xem được sản phẩm mà không cần chuyển trang	Khi thêm sản phẩm mới, toàn bộ sản phẩm đều xuất hiện trên trang	1
1.2	Trang sản phẩm chứa các thông tin liên quan	Khách hàng tìm hiểu kỹ thông tin trước khi mua	Tất cả sản phẩm hiển thị đầy đủ khi truy cập trang sản phẩm	1
1.3	Đăng nhập/Đăng ký để thực hiện mua hàng	Lưu trữ thông tin tài khoản thành viên để thực hiện mua sắm	Tất cả người dùng bắt buộc phải đăng ký tài khoản	1
1.4	Liên hệ quản trị viên/dịch vụ hỗ trợ khi gặp sự cố	Tạo kết nối giữa người dùng và nhà phát triển	Người dùng có thể liên hệ hỗ trợ qua email hoặc chat mọi lúc	1
1.5	Trang giỏ hàng cho phép điều chỉnh số lượng	Hiển thị tổng giá tiền và số lượng sản phẩm đã chọn	Phải thêm sản phẩm vào giỏ trước khi tiến hành thanh toán	1
1.6	Đánh giá và xếp hạng sản phẩm tại trang sản phẩm	Khách hàng đọc đánh giá để biết chất lượng sản phẩm trước khi mua	Phải bao gồm các mục đánh giá và xếp hạng sản phẩm	2
1.7	Trang thêm, sửa, xóa và thay đổi số lượng sản phẩm	Người dùng/Quản trị viên tùy chỉnh số lượng sản phẩm thêm/bớt	Quản trị viên kiểm soát số lượng, chất lượng, giá cả, ngày nhập/xuất	1
1.8	Quản trị viên kiểm tra đơn đặt hàng của người dùng	Quản trị viên quản lý đơn hàng sau khi người dùng đặt	Quản trị viên được thông báo về các sản phẩm được mua	1
1.9	Người dùng chỉnh sửa thông tin cá nhân	Người dùng tự cập nhật dữ liệu của mình	Mỗi thay đổi cho phép cập nhật trực tiếp vào cơ sở dữ liệu	1

Tiếp theo, chương 1 trình bày sơ đồ ca sử dụng (User Use Case Diagram và Admin Use Case Diagram), phân tích sơ đồ cấu trúc trang (Sitemap), mô hình hóa 10 bảng cơ sở dữ liệu kèm lược đồ ERD, thiết lập wireframe cho từng trang màn hình, phân tích 7 công cụ kỹ thuật Front-end, và mô tả chi tiết từng màn hình giao diện thực tế của người dùng và quản trị viên.

Triển khai chuẩn đầu ra LO4 (Kế hoạch kiểm thử và Đảm bảo chất lượng)

Tác giả xây dựng khung Test Plan nhằm đánh giá chức năng và hiệu năng website, bao gồm các bảng nhật ký kiểm thử UI/UX cho cả Front-end và Back-end, phân tích yêu cầu chức năng/phi chức năng, thực hiện kiểm thử độ tương thích, và đánh giá quy trình QA cùng các bước thực hiện trong vòng đời phát triển website.

Kết quả và đóng góp

Đồ án đã đạt được các kết quả kỹ thuật cụ thể:

• Hoàn thành tài liệu phân tích và thiết kế hệ thống website thương mại điện tử đa trang đạt đầy đủ các tiêu chí chấm điểm P5, P6, P7, M4, M5, D2, D3 theo khung chương trình BTEC HND Level 4.
• Xây dựng bảng đặc tả 9 yêu cầu nghiệp vụ với đầy đủ thước đo hiệu quả và tiêu chí kiểm chứng rõ ràng, trong đó 8 yêu cầu đạt mức ưu tiên cao (Priority 1) và 1 yêu cầu đạt mức ưu tiên trung bình (Priority 2).
• Thiết kế hoàn chỉnh mô hình cơ sở dữ liệu quan hệ gồm 10 bảng dữ liệu (Admin, Category, Order, Ordertrackhistory, Product reviews, Product, User log, Users, Wishlist), đáp ứng toàn bộ các khâu từ đăng ký tài khoản, ghi nhật ký phiên đăng nhập (User log), quản lý danh mục, đặt hàng, thanh toán đến theo dõi trạng thái đơn hàng (Ordertrackhistory) và đánh giá chất lượng sản phẩm.
• Hiện thực hóa hệ thống giao diện trực quan với đầy đủ các trang chức năng cho cả hai phân hệ User và Admin, tuân thủ các quy chuẩn kích thước đồ họa (Logo 100x120px, Slider 1150x650px, Khung sản phẩm 200x350px).
• Thiết lập khung kiểm thử Test Plan, nhật ký kiểm thử UI/UX và quy trình Đảm bảo chất lượng (QA) phục vụ kiểm định chất lượng và độ tương thích của phần mềm.

Đóng góp chính của đề tài là cung cấp một tài liệu thiết kế hệ thống chuẩn mực, tích hợp đầy đủ từ khâu phân tích yêu cầu, mô hình hóa UML, thiết kế CSDL quan hệ đến triển khai giao diện và lập kế hoạch kiểm thử theo chuẩn học thuật quốc tế.

Hạn chế và hướng nghiên cứu tiếp

• Hạn chế: Theo nội dung trình bày trong báo cáo, đồ án tập trung trọng tâm vào giai đoạn phân tích thiết kế hệ thống, mô hình hóa dữ liệu, xây dựng wireframe/giao diện và thiết lập khung kiểm thử tĩnh. Các số liệu đo lường hiệu năng tải thực tế dưới tải lượng truy cập lớn (load testing, stress testing) cũng như việc tích hợp các cổng thanh toán trực tuyến thực tế chưa được trình bày sâu trong phạm vi Assignment 2.
• Hướng nghiên cứu tiếp: Dựa trên phạm vi nghiên cứu, hướng phát triển tiếp theo bao gồm việc triển khai tự động hóa quy trình kiểm thử (automated QA testing), mở rộng kiểm thử tính tương thích trên đa dạng trình duyệt và thiết bị di động thực tế, và hoàn thiện kết nối cơ sở dữ liệu thực tế cho toàn bộ các dịch vụ thanh toán.

Giá trị tham khảo

Tài liệu này hữu ích cho các nhóm đối tượng sau:

• Sinh viên ngành Công nghệ thông tin, Lập trình Web và Hệ thống thông tin: Đặc biệt là sinh viên đang theo học chương trình BTEC HND thực hiện đồ án học phần Website Design & Development.
• Người làm đề tài về phân tích thiết kế hệ thống bán hàng: Tham khảo phương pháp xây dựng bảng yêu cầu khách hàng (Client Requirements Table), cấu trúc 10 bảng cơ sở dữ liệu thương mại điện tử, cách vẽ Use Case Diagram và cách thiết lập Test Plan / UI-UX text log chuẩn mực.

Câu hỏi thường gặp

1. Đồ án này thuộc học phần nào, do ai thực hiện và nộp vào thời gian nào?
Đồ án là bài tập lớn số 2 (Assignment 2) thuộc học phần Website Design & Development trong chương trình BTEC Level 4 HND tại Cao đẳng Quốc tế BTEC FPT (cơ sở Đà Nẵng). Tác giả là sinh viên Hồ Tấn Rịn (Lớp BDAF20038, Mã SV: IT16101 / BDAF200038), giảng viên hướng dẫn là thầy Nguyễn Hoàng Anh Vũ, ngày nộp báo cáo là 10/12/2021.

2. Cơ sở dữ liệu của website gồm những bảng nào và bảng nào lưu lịch sử đơn hàng?
Cơ sở dữ liệu Shopping Database gồm 10 bảng: Admin, Category, Order, Ordertrackhistory, Product reviews, Product, User log, Users, và Wishlist. Bảng lưu vết và lịch sử trạng thái đơn hàng là Ordertrackhistory (gồm các trường: id, orderld, status, remark, postingdate).

3. Các thông số kích thước giao diện đồ họa được quy định cụ thể như thế nào?
Trong tài liệu, biểu trưng (Logo) có kích thước rộng 100px và cao 120px; khung trình chiếu (Slider) có kích thước rộng 1150px và cao 650px; khung hiển thị sản phẩm (trong các mục Sản phẩm nổi bật, Điện thoại thông minh, Máy tính xách tay) có kích thước rộng 200px và cao 350px.

4. Những công cụ và công nghệ phát triển web nào được tác giả phân tích và sử dụng?
Tác giả phân tích 7 công cụ và công nghệ Front-end chủ chốt gồm: Sublime Text (trình soạn thảo mã nguồn), Chrome Developer Tools (công cụ phân tích và gỡ lỗi trình duyệt), GitHub (hệ thống quản lý phiên bản), jQuery (thư viện JavaScript), Twitter Bootstrap (khung giao diện UI), AngularJS (framework mở rộng HTML của Google) và Sass (bộ tiền xử lý CSS).

5. Bảng yêu cầu khách hàng (Client Requirements) có bao nhiêu tiêu chí và được phân loại ưu tiên ra sao?
Bảng yêu cầu khách hàng gồm 9 tiêu chí nghiệp vụ, trong đó có 8 tiêu chí được xếp mức ưu tiên cao (Priority 1: hiển thị sản phẩm, dữ liệu chi tiết, đăng nhập/đăng ký, liên hệ hỗ trợ, giỏ hàng, quản lý số lượng sản phẩm, quản trị đơn hàng, cập nhật thông tin cá nhân) và 1 tiêu chí xếp mức ưu tiên trung bình (Priority 2: đánh giá và xếp hạng sản phẩm).

Kết luận

Báo cáo đồ án "Assignment 2 - Unit: Website Design & Development" của sinh viên Hồ Tấn Rịn đã cung cấp một quy trình phân tích, thiết kế và lập kế hoạch kiểm thử hoàn chỉnh cho hệ thống website thương mại điện tử đa trang. Đề tài giải quyết tốt các yêu cầu của chuẩn đầu ra LO3 và LO4 thông qua việc xây dựng cấu trúc cơ sở dữ liệu 10 bảng mạch lạc, thiết lập giao diện Front-end và Back-end chi tiết kèm wireframe chuẩn kích thước, đồng thời định hình quy trình đảm bảo chất lượng (QA) và kiểm thử giao diện rõ ràng. Đây là tài liệu học thuật có cấu trúc chặt chẽ, thể hiện đầy đủ các bước thực hành kỹ thuật theo tiêu chuẩn đào tạo BTEC HND.

Trích đoạn nội dung tài liệu

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