Information technology assignment 1 unit semi project

Bài tập lớn môn Công nghệ thông tin 1: Hướng dẫn làm bài tập dự án giữa kỳ chi tiết, đạt điểm cao. Tài liệu tham khảo hữu ích cho sinh viên CNTT.

• Tác giả: Tran Thien Thach
• Người hướng dẫn: Nguyễn Hoàng Anh Vũ
• Trường học: BTEC FPT International College
• Chuyên ngành: Information Technology
• Đề tài: Website Design & Development
• Loại tài liệu: Semi Project
• Năm xuất bản: 2022
• Địa điểm: Da Nang

Tóm tắt

I. Hướng dẫn toàn diện Information technology assignment 1

Một IT project for students dưới dạng semi project là bài tập lớn, đóng vai trò nền tảng trong chương trình học công nghệ thông tin. Đây không chỉ là một university IT assignment thông thường, mà còn là cơ hội để sinh viên áp dụng lý thuyết vào thực tiễn, từ phân tích yêu cầu đến triển khai một sản phẩm phần mềm hoàn chỉnh. Khác với các bài tập lập trình nhỏ lẻ, semi project yêu cầu một quy trình làm việc bài bản, mô phỏng theo software development lifecycle (SDLC) thực tế. Hoàn thành tốt một semi project sẽ là bước đệm vững chắc cho các dự án lớn hơn, ví dụ như một final year project (FYP) alternative. Mục tiêu chính là giúp sinh viên làm quen với các khái niệm cốt lõi như project management fundamentals, kỹ năng viết tài liệu kỹ thuật và cách trình bày ý tưởng một cách chuyên nghiệp. Tài liệu mẫu "Semi Project" của sinh viên Trần Thiện Thạch là một ví dụ điển hình về cấu trúc và nội dung cần có, bao gồm từ việc xác định yêu cầu, thiết kế hệ thống qua diagram, xây dựng giao diện, cho đến việc kiểm thử và hoàn thiện sản phẩm. Việc nắm vững cách thực hiện loại bài tập này là chìa khóa để đạt kết quả cao và xây dựng một portfolio ấn tượng.

1.1. Tầm quan trọng của Semi Project trong IT course module

Semi Project là một hợp phần quan trọng trong hầu hết các IT course module project. Nó đóng vai trò là cầu nối giữa kiến thức lý thuyết và kỹ năng thực hành. Thông qua dự án, sinh viên được rèn luyện khả năng giải quyết vấn đề, tư duy logic và làm việc nhóm. Dự án không chỉ kiểm tra kiến thức về lập trình mà còn đánh giá toàn diện các kỹ năng mềm khác. Một academic project report chất lượng sẽ thể hiện rõ năng lực của sinh viên trong việc nghiên cứu, phân tích và trình bày. Đây là một cơ hội để sinh viên chứng minh khả năng tự học và áp dụng công nghệ mới vào việc xây dựng một sản phẩm cụ thể, từ đó tạo ra lợi thế cạnh tranh khi tìm kiếm cơ hội thực tập và việc làm sau này.

1.2. Các thành phần chính của một bài tập lớn CNTT

Một bài tập lớn CNTT hoàn chỉnh thường bao gồm ba thành phần chính: tài liệu báo cáo, mã nguồn sản phẩm và bài trình bày. Tài liệu báo cáo, hay còn gọi là project documentation format, cần được trình bày một cách khoa học, bao gồm các phần như giới thiệu, phân tích yêu cầu, thiết kế hệ thống, triển khai và kết luận. Phần source code submission đòi hỏi mã nguồn phải được tổ chức rõ ràng, có chú thích và tuân thủ các chuẩn lập trình. Cuối cùng, phần trình bày (project presentation slides) là cơ hội để sinh viên bảo vệ kết quả nghiên cứu của mình, trả lời các project viva questions từ giảng viên. Cả ba thành phần này đều có vai trò quan trọng và ảnh hưởng trực tiếp đến grading criteria for project.

II. Top 5 thách thức khi thực hiện một IT semi project

Việc thực hiện một IT assignment dạng semi project luôn đi kèm với nhiều thách thức, đặc biệt với những sinh viên lần đầu tiếp cận. Thách thức lớn nhất thường là việc xác định và quản lý phạm vi dự án. Nhiều sinh viên có xu hướng đề xuất các tính năng quá phức tạp, dẫn đến không thể hoàn thành đúng thời hạn. Thách thức thứ hai là thiếu kiến thức về project management fundamentals, gây khó khăn trong việc lập kế hoạch, phân chia công việc và theo dõi tiến độ. Thứ ba, giai đoạn system analysis and design thường bị xem nhẹ, dẫn đến các lỗi logic và cấu trúc hệ thống không bền vững. Thứ tư, việc chuẩn bị tài liệu theo đúng project documentation format là một công việc tốn thời gian và đòi hỏi kỹ năng technical report writing tốt. Nhiều sinh viên chỉ tập trung vào lập trình mà quên đi tầm quan trọng của việc ghi lại quy trình. Cuối cùng, áp lực về thời gian và việc phải cân bằng giữa nhiều môn học khác nhau cũng là một trở ngại lớn, đòi hỏi sinh viên phải có kỹ năng quản lý thời gian hiệu quả. Việc tìm kiếm sự hỗ trợ như programming assignment help cũng là một giải pháp nhưng cần cẩn trọng để không vi phạm quy chế học thuật.

2.1. Khó khăn trong việc xác định yêu cầu người dùng

Giai đoạn đầu tiên và cũng là một trong những giai đoạn khó khăn nhất là xác định yêu cầu. Việc không hiểu rõ nhu cầu của người dùng cuối sẽ dẫn đến một sản phẩm không đáp ứng được mục tiêu đề ra. Trong tài liệu mẫu, phần "Functional and Non-Functional Requirements" được trình bày rất rõ ràng. Yêu cầu chức năng mô tả hệ thống phải làm gì (ví dụ: xử lý giao dịch, tạo hóa đơn), trong khi yêu cầu phi chức năng xác định hệ thống phải như thế nào (ví dụ: dễ sử dụng, tốc độ phản hồi nhanh). Việc phân biệt và ghi lại hai loại yêu cầu này một cách chi tiết là nền tảng cho một project proposal IT thành công.

2.2. Vấn đề trong quản lý mã nguồn và tài liệu dự án

Quản lý mã nguồn và tài liệu là một thách thức thường gặp. Nếu không có một hệ thống quản lý phiên bản như Git, việc theo dõi các thay đổi, hợp nhất mã nguồn và quay lại các phiên bản cũ sẽ trở nên hỗn loạn. Tương tự, việc duy trì một bộ tài liệu nhất quán và cập nhật (như use case diagram, ERD diagram for project) trong suốt vòng đời dự án cũng đòi hỏi sự kỷ luật. Một academic project report không đồng nhất với sản phẩm cuối cùng sẽ bị đánh giá thấp, cho thấy sự thiếu chuyên nghiệp trong quá trình làm việc.

III. Phương pháp phân tích và thiết kế hệ thống hiệu quả

Giai đoạn system analysis and design là xương sống của mọi dự án công nghệ thông tin. Một thiết kế tốt sẽ giúp quá trình lập trình trở nên dễ dàng hơn, giảm thiểu lỗi và tiết kiệm thời gian chỉnh sửa sau này. Phương pháp tiếp cận hiệu quả bắt đầu bằng việc mô hình hóa hệ thống. Các công cụ như sơ đồ ca sử dụng (use case diagram), sơ đồ luồng dữ liệu (DFD diagram example), và sơ đồ quan hệ thực thể (ERD diagram for project) là không thể thiếu. Trong tài liệu tham khảo, sinh viên đã sử dụng Use Case diagram (Hình 1 và 2) để mô tả tương tác giữa các tác nhân (User, Admin) và hệ thống. Mỗi use case sau đó được mô tả chi tiết bằng văn bản, làm rõ các điều kiện trước, sau và luồng sự kiện chính. Cách làm này đảm bảo tất cả các bên liên quan đều hiểu rõ chức năng của hệ thống trước khi bắt tay vào viết mã. Tiếp theo, thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) thông qua wireframe là một bước quan trọng. Tài liệu mẫu đã trình bày rất chi tiết các wireframe cho từng trang (Login, Homepage, My account), giúp hình dung cấu trúc và bố cục của website một cách trực quan.

3.1. Kỹ thuật mô hình hóa hệ thống với biểu đồ Use Case

Biểu đồ use case diagram là một công cụ mạnh mẽ để trực quan hóa các chức năng của hệ thống từ góc nhìn của người dùng. Nó xác định các tác nhân (actors) và các hành động (use cases) mà họ có thể thực hiện. Ví dụ, trong dự án mẫu, tác nhân "Admin" có các use case như "Log in", "Log out", "Delete Account", "View Produces", "Create Produce". Mỗi use case này được mô tả chi tiết trong các bảng (ví dụ: Bảng 1 #UC11: Log-in) để làm rõ luồng hoạt động, điều kiện tiên quyết và kết quả mong đợi. Việc sử dụng biểu đồ và bảng mô tả chi tiết giúp đảm bảo yêu cầu được hiểu đúng và đầy đủ, tạo cơ sở vững chắc cho giai đoạn thiết kế và lập trình.

3.2. Vai trò của Wireframe trong thiết kế giao diện website

Wireframe là bản phác thảo cấu trúc của một trang web, tập trung vào bố cục, vị trí các thành phần và luồng tương tác mà không cần quan tâm đến màu sắc hay đồ họa chi tiết. Mục đích của wireframe là tạo ra một "bộ xương" cho trang web, giúp đội ngũ phát triển và các bên liên quan thống nhất về cấu trúc trước khi đầu tư thời gian vào thiết kế trực quan. Trong báo cáo mẫu, sinh viên đã sử dụng wireframe để thiết kế hàng loạt trang quan trọng như "Login page", "Home page", "All products page", và "Admin Page". Điều này cho thấy một quy trình làm việc chuyên nghiệp, đặt trải nghiệm người dùng làm trung tâm ngay từ những bước đầu tiên của IT project for students.

IV. Quy trình phát triển theo Software Development Lifecycle

Việc áp dụng một mô hình Software Development Lifecycle (SDLC) có cấu trúc là yếu tố quyết định sự thành công của một semi project. SDLC cung cấp một khuôn khổ rõ ràng cho các giai đoạn từ lập kế hoạch, phân tích, thiết kế, triển khai, kiểm thử đến bảo trì. Đối với một university IT assignment, các mô hình như Thác nước (Waterfall) hoặc Lặp (Iterative) thường được áp dụng. Sau khi hoàn tất giai đoạn thiết kế với các sơ đồ và wireframe, giai đoạn triển khai (implementation) bắt đầu. Đây là lúc các lập trình viên chuyển hóa bản thiết kế thành mã nguồn thực tế. Việc lựa chọn công nghệ phù hợp cho front-end và back-end là rất quan trọng. Giai đoạn tiếp theo là kiểm thử, nhằm đảm bảo sản phẩm hoạt động đúng như yêu cầu và không có lỗi. Cuối cùng, sản phẩm được triển khai và chuẩn bị cho việc source code submission. Tuân thủ quy trình SDLC không chỉ giúp quản lý dự án hiệu quả mà còn là một kỹ năng quan trọng được đánh giá cao trong grading criteria for project. Quá trình này đảm bảo sản phẩm được xây dựng một cách có hệ thống, dễ bảo trì và mở rộng trong tương lai.

4.1. Thiết kế cơ sở dữ liệu cho dự án website bán hàng

Một database design project tốt là nền tảng cho một ứng dụng web ổn định và hiệu quả. Dựa trên phân tích yêu cầu, các thực thể chính cần được xác định và mối quan hệ giữa chúng cần được mô hình hóa, thường thông qua một ERD diagram for project. Trong tài liệu mẫu, dù không có sơ đồ ERD, cấu trúc các bảng dữ liệu đã được liệt kê rõ ràng, bao gồm: Admin, Item, Order, Order_track, Product, và Users. Mỗi bảng được thiết kế với các trường (cột) cần thiết để lưu trữ thông tin. Ví dụ, bảng Product lưu thông tin sản phẩm, bảng Users lưu thông tin người dùng. Thiết kế này cho phép hệ thống quản lý dữ liệu một cách có tổ chức, hỗ trợ các chức năng như đăng nhập, quản lý sản phẩm, và theo dõi đơn hàng.

4.2. Từ Wireframe đến sản phẩm website hoàn thiện

Quá trình chuyển đổi từ wireframe sang sản phẩm cuối cùng là giai đoạn hiện thực hóa ý tưởng thiết kế. Dựa trên các wireframe đã được duyệt, đội ngũ phát triển sẽ xây dựng giao diện người dùng (Front-end) bằng các công nghệ như HTML, CSS, JavaScript và các framework liên quan. Các hình ảnh trong báo cáo mẫu (Hình 26 đến 42) cho thấy sản phẩm cuối cùng có giao diện trực quan, bám sát theo các wireframe đã thiết kế trước đó. Các chức năng back-end sau đó được kết nối với giao diện để xử lý logic nghiệp vụ, tương tác với cơ sở dữ liệu và phản hồi lại cho người dùng. Kết quả là một trang web hoạt động đầy đủ, từ đăng ký, đăng nhập, xem sản phẩm cho đến quản lý hệ thống.

V. Bí quyết viết báo cáo và bảo vệ đồ án thành công

Hoàn thành sản phẩm phần mềm chỉ là một nửa chặng đường. Việc trình bày kết quả thông qua một academic project report chuyên nghiệp và một buổi bảo vệ thuyết phục là yếu tố then chốt để đạt điểm cao. Kỹ năng technical report writing đóng vai trò cực kỳ quan trọng. Một báo cáo tốt cần có cấu trúc logic, ngôn ngữ rõ ràng và trình bày sạch sẽ. Nó phải phản ánh đầy đủ quá trình làm việc, từ việc đặt vấn đề, phân tích, thiết kế cho đến kết quả đạt được và hướng phát triển trong tương lai. Báo cáo của sinh viên Trần Thiện Thạch là một ví dụ tốt về cách tuân thủ project documentation format, với mục lục rõ ràng, danh sách hình ảnh, bảng biểu và các phần nội dung được phân chia hợp lý. Bên cạnh báo cáo, việc chuẩn bị cho buổi bảo vệ cũng không kém phần quan trọng. Sinh viên cần chuẩn bị project presentation slides súc tích, tập trung vào những điểm nổi bật của dự án và luyện tập trả lời các project viva questions có thể được hỏi. Sự tự tin và khả năng trình bày rõ ràng sẽ để lại ấn tượng tốt cho hội đồng đánh giá.

5.1. Cách cấu trúc một academic project report chuyên nghiệp

Một báo cáo dự án học thuật chuyên nghiệp cần tuân theo một cấu trúc chuẩn. Bắt đầu với trang bìa, mục lục, danh sách hình ảnh và bảng biểu. Phần nội dung chính nên bao gồm: Giới thiệu (đặt vấn đề, mục tiêu, phạm vi), Phân tích yêu cầu (yêu cầu chức năng và phi chức năng), Thiết kế hệ thống (kiến trúc, thiết kế cơ sở dữ liệu, thiết kế giao diện với use case diagram, ERD diagram for project), Triển khai (công nghệ sử dụng, một số đoạn mã nổi bật), Kiểm thử (kế hoạch và kết quả), và cuối cùng là Kết luận (tổng kết, hạn chế, hướng phát triển). Việc tuân thủ cấu trúc này giúp người đọc dễ dàng theo dõi và đánh giá cao tính khoa học của báo cáo.

5.2. Chuẩn bị cho buổi bảo vệ Slides và câu hỏi Viva

Buổi bảo vệ là cơ hội để trình bày trực tiếp sản phẩm và quá trình làm việc. Các project presentation slides cần được thiết kế đơn giản, tập trung vào hình ảnh, sơ đồ và các ý chính, tránh đưa quá nhiều chữ. Một buổi trình bày tốt nên bao gồm demo sản phẩm trực tiếp. Ngoài ra, việc chuẩn bị trước các project viva questions là rất cần thiết. Các câu hỏi thường xoay quanh lý do lựa chọn công nghệ, những khó khăn đã gặp phải và cách giải quyết, các quyết định thiết kế quan trọng, và tiềm năng mở rộng của dự án. Sự chuẩn bị kỹ lưỡng sẽ giúp trả lời câu hỏi một cách tự tin và chính xác.

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

BTEC FPT INTERNATIONAL COLLEGE INFORMATION TECHNOLOGY ASSIGNMENT 1: UNIT: Semi Project STUDENT : TRAN THIEN THACH CLASS : IT16101 STUDENT ID : BDAF200018 SUPERVISOR : NGUYEN HOANG ANH VU Da Nang, JUNE 2022 ASSIGNMENT 1 FRONT SHEET Qualification BTEC Level 5 HND Diploma in Computing Unit number and title Unit 3: Website Design & Development Date received (1st Submission date 21/6/2022 21/6/2022 submission) Date received (2nd Re-submission date submission) TRAN THIEN Student name Student ID BDAF200018 THACH 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 consequences of plagiarism. I understand that making a false declaration is a form of malpractice. Student’s signature: TRAN THIEN THACH Grading grid P5 P6 P7  Summative Feedbacks:  Resubmission Feedbacks: Grade: Assessor Signature: Date: Internal Verifier’s Comments: Signature & Date: TRAN THIEN THACH i TABLE OF CONTENT TABLE OF CONTENT .1 LIST OF TABLES AND FIGURES.1 Functional and Non-Functional Requirements.2 Non-Functional Requirements: .2 Use-Case diagram .39 Performed Student: Tran Thien Thach 1 LIST OF TABLES AND FIGURES Figure 1: User Use Case Diagram. 8 Figure 2: Admin Use Case Diagram.

9 Figure 3: Site Map. 11 Figure 5: Admin table. 11 Figure 6: Item Table. 11 Figure 7: Order table.

12 Figure 8: Order track table. 12 Figure 9: Product table. 12 Figure 10: Users table. 13 Figure 12: Home page.

15 Figure 13: About us page. 17 Figure 14: All product. 19 Figure 15: Login page. 20 Figure 16: My account page.

22 Figure 18: How to choose size. 25 Figure 19: Shop system. 26 Figure 20: Contact page. 27 Figure 21: Sale off page.

29 Figure 22: Payment method page. 30 Figure 23: Track order page. 31 Figure 24: Login admin page. 32 Performed Student: Tran Thien Thach 2 Figure 25: Admin page .34 Figure 26: Home page.

38 Figure 27: Result successful registration. 38 Figure 28: Login user. 39 Figure 29: Login success. 39 Figure 30: About us page.

40 Figure 31: All products page. 42 Figure 32: My account page. 43 Figure 33: Bill ship address. 44 Figure 33: Bill ship addres.

45 Figure 35: How to choose size page. 50 Figure 36: Shop system page. 50 Figure 37: Contact page. 51 Figure 38: Sale off page.

53 Figure 39: Pay method page .54 Figure 40: Track order page. 55 Figure 41: Login admin. 56 Figure 42: Admin page. 58 Table 1 #UC11: Logout.

8 Table 3 System Message. 8 Table 4 #UC22: Log-out. 9 Table 6 System Message. 9 Performed Student: Tran Thien Thach 3 Table 7 #UC33: Delete Account.

10 Table 9 System Message. 10 Table 10 #UC44: View Produces. 11 Table 12 #UC55: Create Produce. 11 Performed Student: Tran Thien Thach 4 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 sub-ject teachers for guiding me, helping me achieve good academic results, and thanking all my friends for exchanging and supporting me. Semi-Project 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. The following report will cover the following sections: User Requirements System Designs Implementation.

Performed Student: Tran Thien Thach 5 1.1 Functional and Non-Functional Requirements 1.1 Functional Requirements - Functional Requirements indicate what the program or site ought to have the option to accomplish - Coming up next are a few instances of utilitarian necessities: + Client orders will be acknowledged utilizing the web-based application. + The web application will actually want to handle an exchange. + The web application ought to give a receipt that incorporates the client's name, the items bought, the expense of every thing, and the general sum. + The web application will actually want to give deals information on a week by week, month to month, and yearly premise.2 Non-Functional Requirements: - Non-practical necessities are the norms that the program or site is needed to meet.

Reaction time and dependability are instances of non-practical models. - Coming up next are some non-practical requirements for the vehicle shop application: + All staff, including agents and chiefs, should have the option to use the internet based application effortlessly. + The online application will be accessible in an assortment of dialects. + The web application ought to have the option to deal with a few deals simultaneously without forfeiting speed 1.2 Use-Case diagram Performed Student: Tran Thien Thach 6 Figure 2 :Admin Use Case Diagram Performed Student: Tran Thien Thach 7 1.3 Use case description #UC11: Log-in Name Log in Code UC11 Description Allow the actor to log in to the system to use it Actor Admin and User Trigger Actor presses log-in button Pre-condition - User created an account - The user's device is already connected to the internet before logging in Post condition - Actor login to the system successfully - The system records the successful login activity in the activity log Table 1 #UC11: Logout Activities Actor System Main Flow: Log out successfully 1 - Actor accessing the system - Actor enters account and press Login button 2 - The system authenticates the login information and allows the actor to access and use it - The system records successful logging in Activity Log Table 2 Activities System Message MS02 Message when the actor presses the Login button: <Login successful= Table 3 System Message Performed Student: Tran Thien Thach 8 #UC22: Log-out Name Log out Code UC22 Description Allow the actor to logout the account from the system Actor Admin and User Trigger Actor presses log-out button Pre-condition Actor has successfully logged into the system Post condition - Actor successfully logged out - The system redirects to the login page Table 4 #UC22: Log-out Activities Actor System Main Flow: Log in successfully 1 - Actor clicks Logout button on profile management page 2 - The system confirms the logout and then redirects to the login page Table 5 Activities System Message Message when the actor clicks the Log Out button: <Are you sure you MS02 want to sign out of your account from the device?= Table 6 System Message #UC33: Delete Account Name Delete Account Code UC33 Description Allow actors to delete accounts Actor Admin Trigger Actor presses Delete button Pre-condition Actor has successfully logged into the system Post condition - Actor deleted account successfully - Go to the user administration management page Table 7 #UC33: Delete Account Performed Student: Tran Thien Thach 9 Activities Actor System Main Flow: Delete Account successfully 1 - Actor click on account - Actor clicks Delete button to delete the account - Actor enters password 2 - The system asks for a password - The system redirects to the account management page - The system confirms the password, deletes it, and goes to the login page Table 8 Activities System Message Notice when actor clicks Delete button: "Are you sure you want to delete MS02 this account?" Table 9 System Message #UC44: View Produces Name View Produces Code UC44 Description Allow actors to view produces Actor Admin / User Trigger Actor clicks on the product Pre-condition Actor accessing the system Post condition Go to product detail page Table 10 #UC44: View Produces Performed Student: Tran Thien Thach 10 Activities Actor System Main Flow: View Produces successfully 1 - Actor presses the Home button - Actors click on the product they want to see detailed information about 2 - The system will load the product and display the product - The system redirects to the product detail page Table 11 Activities #UC55: Create Produce Name Create Produce Code UC55 Description Allow actors to create a new produce Actor Admin Trigger Actor presses Create button Pre-condition Actor has successfully logged into the system Post condition Go to product management page Table 12 #UC55: Create Produce Activities Actor System Main Flow: View Produces successfully 1 - Actor clicks the manage product button on the admin page - Actor fills in the information and clicks the Create button 2 - The system asks to fill in all information - Upload products to the product management page Table 13 Activities Performed Student: Tran Thien Thach 11 2.3 Wire frames and specific explanation Wireframing is a procedure for planning a site's construction.

A wireframe is a graph that shows how data and usefulness on a site ought to be laid up, thinking about client requests and excursions. - From the get-go in the improvement cycle, wireframes are utilized to assemble the key structure of a page before visual plan and content are added. A wireframe is a website page design that shows what interface parts will be available on significant pages. It's a significant stage in the interface configuration process.

- A wireframe's motivation is to make a visual portrayal of a page from the get-go in a venture so partners and task colleagues might endorse it before the innovative flow starts. - Our website is carefully wireframed with a clear and detailed plan that includes the following pages: ❖ Login page Performed Student: Tran Thien Thach 16 Figure 12: Login page Performed Student: Tran Thien Thach 17 ❖ My account page Figure 13: My account page Performed Student: Tran Thien Thach 18 ❖ Homepage Performed Student: Tran Thien Thach 19 Figure 14: Home page ❖ About us page Performed Student: Tran Thien Thach 20 Performed Student: Tran Thien Thach 21 Figure 15: About us page Performed Student: Tran Thien Thach 22 ❖ All products page Performed Student: Tran Thien Thach 23 FIGURE 16: ALL PRODUCTS Performed Student: Tran Thien Thach 24 ❖ How to choose size page Performed Student: Tran Thien Thach 25 Performed Student: Tran Thien Thach 26 Figure 17: How to choose size Performed Student: Tran Thien Thach 27 ❖ Shop system Figure 18: Shop system Performed Student: Tran Thien Thach 28 ❖ Contact page Figure 19: Contact page Performed Student: Tran Thien Thach 29 ❖ Sale off page Performed Student: Tran Thien Thach 30 Figure 20: Sale off page Performed Student: Tran Thien Thach 31 ❖ Payment method page Figure 21: Payment method page Performed Student: Tran Thien Thach 32 ❖ Billing and shipping address page Figure 22: Billing Performed Student: Tran Thien Thach 33 ❖ Track order page Figure 23: Track order page Performed Student: Tran Thien Thach 34 ❖ Login Admin page Figure 24: Login admin page Performed Student: Tran Thien Thach 35 ❖ Admin Page Performed Student: Tran Thien Thach 36 Figure 25: Admin page Performed Student: Tran Thien Thach 37 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. Performed Student: Tran Thien Thach 38 REFERENCES 1.vn/web-server-la- gi.html#:~:text=Web%20server%20c%C3%B3%20ngh%C4%A9a%20l%C3%A0,%C4 %91%C6%B0%E1%BB%A3c%20giao%20quy%E1%BB%81n%20qu%E1%BA%A3n%20 l%C3%BD.&text=Ph%E1%BA%A7n%20c%E1%BB%A9ng%3A%20M%C3%A1y%20ch %E1%BB%A7%20web,thi%E1%BA%BFt%20b%E1%BB%8B%20c%E1%BB%A7a%20E nd%2Duser.com/reactjs-la-gi-184174 4.com/blog/hoc-nodejs/ 5.com/backend-developer/ Performed Student: Tran Thien Thach 39