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

Tài liệu nghiên cứu Information technology assignment 2 unit website design development, tổng hợp lý thuyết và thực hành, cung cấp kiến thức chuyên sâu về .

• 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

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

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