Báo cáo bài tập lớn môn học tương tác người máy “thiết kế giao diện website bán hàng công nghệ

Người quản trị hệ thống phải có quyền quản lý các chức năng liên quan đếnviệc quản lý sản phẩm như sản phẩm, danh mục sản phẩm, thương hiệu, hóa đơn,khách hàng, …, quản lý đơn hàng, quản

TRƯỜNG ĐẠI HỌC PHƯƠNG ĐÔNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

Lớp: 521100C

Giảng viên: ThS/TS Trần Thị Đồng

Hà Nội - 2024

lý sức khỏe và nâng cao chất lượng cuộc sống Sự phát triển vượt bậc của internet

và công nghệ số đã thay đổi cách con người mua sắm, từ những cửa hàng truyềnthống chuyển sang các nền tảng thương mại điện tử

Thương mại điện tử, đặc biệt là website bán hàng trực tuyến, đã phát triển mạnh mẽtrong thập kỷ qua Các doanh nghiệp từ lớn đến nhỏ đều nhìn thấy tiềm năng to lớntrong việc mở rộng thị trường và tăng doanh số bán hàng thông qua các kênh trựctuyến Đối với lĩnh vực công nghệ, nơi mà sản phẩm luôn thay đổi và nâng cấp theotừng ngày, việc có một nền tảng bán hàng trực tuyến hiện đại, hiệu quả là yếu tốsống còn để doanh nghiệp có thể cạnh tranh và phát triển

Việc thiết kế và phát triển một website bán hàng công nghệ không chỉ đơn thuần làviệc xây dựng một trang web để trưng bày và bán sản phẩm Đây là một quy trìnhphức tạp đòi hỏi sự kết hợp hoàn hảo giữa các yếu tố kỹ thuật, thẩm mỹ và chiếnlược kinh doanh Một website bán hàng công nghệ thành công cần phải đảm bảotính thân thiện với người dùng, giao diện bắt mắt, dễ sử dụng, tích hợp nhiều tínhnăng hữu ích như giỏ hàng, thanh toán trực tuyến, theo dõi đơn hàng, đánh giá vànhận xét của khách hàng Đồng thời, website cũng phải có khả năng bảo mật cao đểbảo vệ thông tin cá nhân và dữ liệu giao dịch của khách hàng, tạo sự tin tưởng và

an tâm cho người sử dụng

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Giới thiệu về website bán hàng công nghệ

Website bán hàng công nghệ là một nền tảng trực tuyến được thiết kế để trưng bày,giới thiệu và bán các sản phẩm công nghệ như laptop, điện thoại thông minh, máytính bảng, đồng hồ thông minh, các thiết bị điện tử, và phụ kiện công nghệ khác.Đây là một công cụ quan trọng trong thương mại điện tử, cho phép doanh nghiệptiếp cận một lượng lớn khách hàng tiềm năng, cung cấp thông tin chi tiết về sảnphẩm, hỗ trợ quy trình mua sắm, và thực hiện các giao dịch trực tuyến một cách dễdàng và an toàn

1.2 Lý do chọn đề tài

Việc chọn đề tài thiết kế và phát triển một website bán hàng công nghệ là sự lựachọn có cơ sở và chiến lược trong quá trình hoàn thành đồ án kỳ Ngành công nghệhiện nay đang phát triển vượt bậc và có sức lan tỏa rộng khắp, đặc biệt trong lĩnhvực thương mại điện tử Việc xây dựng một nền tảng thương mại điện tử chuyênbiệt cho các sản phẩm công nghệ không chỉ đáp ứng nhu cầu tiêu dùng mà còn là

cơ hội để áp dụng và phát triển các kiến thức chuyên môn, từ đó nâng cao khả năngthực hành và sáng tạo trong lĩnh vực công nghệ thông tin

1.3 Mục tiêu

Mục tiêu của đồ án là thiết kế và phát triển một website bán hàng công nghệ vớicác tính năng tiện ích, đáp ứng các yêu cầu kỹ thuật và thương mại của một nềntảng thương mại điện tử hiện đại Đồ án cũng nhằm cung cấp trải nghiệm mua sắmtốt nhất cho người dùng, đảm bảo tính bảo mật và an toàn trong giao dịch trựctuyến, và khám phá các chiến lược tiếp thị hiệu quả để thu hút và giữ chân kháchhàng

1.4 Ý nghĩa thực tiễn

Phát triển các sản phẩm công nghệ phù hợp với nhu cầu của xã hội, qua đó rènluyện, trau dồi, phát triển kiến thức của bản thân nhằm đáp ứng nhu cầu của cácnhà tuyển dụng sau khi ra trường, tạo ra sản phẩm thực tế có giá trị sử dụng trongcuộc sống

em phân tích bài toán:

1.5.1 Chức năng

Đây là website bán hàng và giới thiệu sản phẩm của cửa hàng, công ty đến ngườitiêu dùng với các thông tin chi tiết mặt hàng, hình ảnh mô tả sản phẩm, giá cả,khuyến mãi với người mua hàng Website cần bao gồm các chức năng sau:

- Chức năng của người dùng:

Khách hàng có nhu cầu mua hàng, họ sẽ tìm kiếm mặt hàng trên website, khi quyết định mua sẽ đặt hàng thông qua giao diện website Đơn hàng sẽ được chuyển về cho cửa hàng, công ty Vì vậy giao diện khách hàng cần có các chức năng sau:

 Giao diện người dùng thân thiện, có thể thay đổi phù hợp với những ngày lễ, những đợt giảm giá khuyến mãi, nhằm đánh mạnh vào nhu cầu, tâm lý muasắm của người dùng Việc người dùng sử dụng website của bạn thêm một giây là gia tăng thêm tỷ lệ mua hàng của khách hàng

 Hiển thị các danh sách các mặt hàng để khách hàng xem, lựa chọn và mua

 Sau khi khách hàng đã lựa chọn xong và muốn đặt hàng, cần có giao diện đặthàng cho người dùng bao gồm các thông tin về hàng hóa đã chọn, số lượng,

số tiền, tổng tiền đơn hàng, các thông tin cá nhân của khách hàng để phục vụ việc liên lạc lại với khách hàng

 Ngoài ra có thể phát triển một trang phản hồi khách hàng nhằm thu thập ý kiến, câu hỏi của khách hàng, phục vụ việc phát triển, giải đáp các thắc mắc của khách hàng

b Phần thứ hai: Giao diện quản trị

Người làm chủ ứng dụng được cấp tài khoản riêng để có thể kiểm soát toàn các hoạt động của ứng dụng Về phần này cần có các chức năng chính:

 Chức năng thêm, sửa, xóa các loại mặt hàng, …

 Tiếp nhận đơn hàng của khách hàng và sửa lý đơn hàng

 Thống kê doanh thu

 Một số chức năng nâng cao theo yêu cầu như tạo giao diện menu động, tùy chỉnh theo ý người quản trị website,

Giao diện quản trị nên làm đơn giản, tập trung vào các chức năng, dễ dàng sử dụng

1.6 Các giai đoạn triển khai dự án

 Giai đoạn 1:

Xây dựng đầy đủ các chức năng cơ bản, sử dụng cơ dở dự liệu SQL và xây dựng website theo mô hình 3 lớp kết hợp MVC

 Giai đoạn 2:

Xây dựng 1 số tính năng mới để tăng trải nghiệm của người dùng với website, qua

đó hỗ trợ người dùng 1 cách tối ưu

CHƯƠNG 2: PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤ

2.1 Giới thiệu

Website bán hàng công nghệ là một hình thức kinh doanh với các sản phẩm đượccập nhật và đổi mới liên tục so với nhu cầu của thị trường Việc đặt hàng và thanhtoán online là hình thức rất cần thiết và thuận tiện cho khách hàng giúp tăng trảinghiệm mua sắm của khách hàng Đây là một trong những tính năng quan trọngcủa hệ thống Việc quản lý hệ thống là rất cần thiết đối với một website kinh doanhonline Người quản trị hệ thống phải có quyền quản lý các chức năng liên quan đếnviệc quản lý sản phẩm (như sản phẩm, danh mục sản phẩm, thương hiệu, hóa đơn,khách hàng, …), quản lý đơn hàng, quản lý các tài khoản người dùng và quản lý hệthống Đồng thời, do đây là một website về về thời trang và hướng tới những ngườiđam mê công nghệ nên cần có thiết kế đẹp mắt, với các tính năng thân thiện vớingười dùng và thuận lợi trong mua bán

2.2 Phân tích người dùng

1 Admin Admin là đối tượng chịu trách nhiệm quản trị hệ

thống, giám sát việc sử dụng hế thống của các đốitượng khác, có quyền truy cập và sử dụng tất cả cácchức năng trong hệ thống

2 Khách hàng Khách hàng đăng nhập vào hệ thống để xem thông

tin hàng, mua hàng và đánh giá sản phẩm

2.3 Phân tích nhiệm vụ

− Nhiệm quản lý danh mục sản phẩm

Hình 3.3 Biểu đồ phân rã UC quản lý danh mục sản phẩm

Hậu điều kiện Admin xem, thêm, sửa, xóa, tìm

kiếm danh mục sản phẩm trong hệ thống thành công.

Chuỗi sự kiện chính

1 Admin ấn nút thêm/ sửa/ xóa loại sản phẩm trên trang quản lý danh mục sản phẩm

2 Hệ thống hiển thị trang thông tin danh mục sản phẩm

3 Admin thêm/ sửa/ xóa loại sản phẩm và lưu

4 Hệ thống thông báo thêm/ sửa/ xóa loại sản phẩm thành công

Ngoại lệ

4 Hệ thống thông báo nhập đầy đủ các trường hoặc tên danh mục sản phẩm

đã tồn tại, sau đó quay lại trang điền thông tin

4.1 Quay lại bước 3 của chuỗi sự kiện chính

Bảng 3.3 Kịch bản UC quản lý danh mục sản phẩm

− 3.3.4 Nhiệm vụ quản lý sản phẩm

Hình 3.4 Biểu đồ phân rã UC quản lý sản phẩm

Tiền điều kiện Admin đăng nhập thành công

Vào được trang quản lý sản phẩm

Hậu điều kiện Admin thêm, sửa, cập nhật trạng thái,

xóa, tìm kiếm sản phẩm trong hệ thống thành công

Chuỗi sự kiện chính

1 Admin nhập từ khóa trên thanh tìm kiếm và ấn tìm kiếm

2 Hệ thống tìm kiếm các sản phẩm và hiện lên danh sách tìm kiếm

3 Admin ấn nút thêm mới sản phẩm hoặc ấn chỉnh sửa sản phẩm

4 Hệ thống hiển thị trang điền thông tin sản phẩm Gồm có các thông tin của sản phẩm

5 Admin bán điền thông tin và bấm nút “save”

6 Hệ thống kiểm tra tính đúng đắn của thông tin đã nhập

7 Hệ thống thông báo thêm sản phẩm thành công Sau đó lưu thông tin vào cơ

sở dữ liệu

8 hệ thống hiển thị danh sách sản phẩm, chọn sản phẩm cần xóa, nếu việc thay

đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì xuống ngoại lệ.

9 hệ thống hiển thị sanh sách sản phẩm, click vào thay đổi trạng thái hiển thị của sản phẩm Nếu cập nhật trạng thái thành công thì hiển thị thông báo cập nhật thành công, nếu cập nhật không thành công thì đưa ra thông báo cập nhật không thành công

10 Nhập từ khóa là tên sản phẩm vào ô tìm kiếm để tìm kiếm sản phẩm, nếu tìm kiếm thành công hệ thống sẽ hiển thị kết quả tìm kiếm, nếu tìm kiếm không thành công hệ thống sẽ không hiện thị kết quả và đưa ra thông báo không có sản phẩm nào được tìm kiếm

Ngoại lệ

7 Hệ thống thông báo nhập đầy đủ các trường và quay lại trang điền thông tin 7.1 Quay lại bước 7 của chuỗi sự kiện chính

Bảng 3.4 Kịch bản UC quản lý sản phẩm

− 3.3.5 Nhiệm vụ Quản lý đơn hàng

Hình 3.5 Biểu đồ phân rã UC Quản lý đơn hàng

Tên Use case Quản lý đơn hàng

Tiền điều kiện Admin đã đăng nhập vào hệ thống

Admin vào chức năng quản lý đơn hàng

Hậu điều kiện Admin xem, cập nhật trạng thái, xóa,

tìm kiếm hóa đơn trong hệ thống

2 Cập nhật trạng thái đơn hàng: hệ thống hiển thị danh sách hóa đơn, click vàothay đổi trạng thái hóa đơn Nếu cập nhật trạng thái thành công thì hiển thị thông báo cập nhật thành công, nếu cập nhật không thành công thì đưa ra thông báo cậpnhật không thành công

3 Tìm kiếm đơn hàng: Nhập từ khóa là mã hóa đươn vào ô tìm kiếm để tìm kiếm hình thức thanh toán, nếu tìm kiếm thành công hệ thống sẽ hiển thị kết quả tìm kiếm, nếu tìm kiếm 29 không thành công hệ thống sẽ không hiện thị kết quả

và đưa ra thông báo không có hóa đơn được tìm kiếm

Ngoại lệ

hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại bước 1 của dòng sự kiện chính

Bảng 3.6 Kịch bản UC quản lý đơn hàng

− 3.3.6Nhiệm vụ quản lý liên hệ

Hình 3.7 Biểu đồ phân rã UC quản lý liên hệ

Tiền điều kiện  Admin Đăng nhập thành công

 Chuyển đến trang quản lý liên hệ

Hậu điều kiện Admin xem, xóa liên hệ trong hệ thống

thành công

Chuỗi sự kiện chính

Admin sử dụng chọn kiểu tác động: xem, xóa thông tin liên hệ

1 Xóa liên hệ: hệ thống hiển thị danh sách liên hệ, chọn hình thức cần xóa, nếu việc xóa thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện ngoại lệ, lưu thông tin danh sách liên hệ

2 Tìm kiếm liên hệ: Nhập thông tin liên hệ vào ô tìm kiếm để tìm, nếu tìm kiếm thành công hệ thống sẽ hiển thị kết quả tìm kiếm, nếu tìm kiếm không thành công hệ thống sẽ không hiện thị kết quả và đưa ra thông báo không có liên

hệ nào được tìm kiếm

Ngoại lệ

hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại bước 1 của dòng sự kiện chính

Bảng 3.6 Kịch bản UC quản lý liên hệ

− 3.3.7 Nhiệm vụ quản lý khách hàng

Hình 3.8 Biểu đồ phân rã UC quản lý khách hàng

 Chuyển đến trang quản lý khách hàng

Hậu điều kiện Admin chỉnh sửa, xóa, tìm kiếm thông

tin khách hàng thành công

Chuỗi sự kiện chính

Admin sử dụng chọn kiểu tác động : xóa, sửa, tìm kiếm khách hàng

1 Xóa khách hàng: hệ thống hiển thị danh sách khách hàng, khách hàng cần xóa, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì xuống ngoại lệ, lưu thông tin danh sách khách hàng

2 Sửa khách hàng: hệ thống hiện thị danh sách khách hàng, chọn khách hàng cần sửa thông tin, nếu việc sửa đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì xử lý ngoại lệ

Ngoại lệ

hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại bước 1 của dòng sự kiện chính

Bảng 3.7 Kịch bản UC quản lý khách hàng

− 3.3.8Nhiệm vụ quản lý tin tức

Hình 3.9 Biểu đồ phân rã UC Khách hàng quản lý tin tức

 Chuyển đến trang quản lý tin tức

Hậu điều kiện Admin xem, sửa, thêm, xóa tin tức

thành công

Chuỗi sự kiện chính:

Admin sử dụng chọn kiểu tác động : xem, sửa, thêm, xóa tin tức

1 Admin ấn vào tin tức muốn xem chi tiết về tin tức

2 Xóa tin tức: hệ thống hiển thị danh sách tin tức, tin tức cần xóa, nếu việc thayđổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì xuống ngoại lệ,lưu thông tin tin tức

3.Thêm tin tức: admin ấn nút thêm tin tức và nhập thông tin, nếu thông tin được thêm thành công hệ thống sẽ thông báo ngược lại sẽ xử lý ngoại lệ

4 Sửa tin tức: hệ thống hiện thị danh sáchtin tức, chọn tin tức cần sửa thông tin, nếu việc sửa đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai

− 3.3.9 Nhiệm vụ thống kê doanh thu

Hình 3.10 Biểu đồ phân rã UC thống kê doanh thu

 Chuyển đến trang thống kê

Chuỗi sự kiện chính

Admin sử dụng chọn kiểu tác động : thống kê theo ngày, tháng, năm

1 Admin chọn thống kê theo ngày, tháng, năm nếu thành công hệ thống sẽ thông báo, nếu không thành công sẽ xử lý ngoại lệ

Ngoại lệ

Chưa có sản phẩm nào được bán trong ngày, tháng, năm

Bảng 3.9 Kịch bản UC thống kê doanh thu

− 3.3.10 Nhiệm vụ xem thông tin sản phẩm

Hình 3.11 Biểu đồ phân rã UC xem thông tin sản phẩm

Tiền điều kiện Khách hàng vào được trang sản 

phẩm

Hậu điều kiện Khách hàng xem được thông tin sản

phẩm, thêm sản phẩm được vào giỏ hàng

3 Khách hàng xem thông tin về sản phẩm muốn mua

4 Hệ thống hiển thị sản phẩm cần mua, nếu muốn mua khách hàng chọn vào sản phẩm cụ thể cần mua và nhấn thêm sản phẩm vào giỏ hàng Nếu không mua thì sẽ có ngoại lệ

Ngoại lệ

1 Khách hàng chọn sản phảm ở danh mục khác

2 Quay lại bước 4 của luồng sự kiện chính

Bảng 3.10 Kịch bản UC xem thông tin sản phẩm

3.3.11 Nhiệm vụ quản lý giỏ hàng

Hình 3.12 Biểu đồ phân rã UC quản lý giỏ hàng

Tiền điều kiện Sản phẩm phải có trong giỏ hàng

Hậu điều kiện Cho phép khách hàng xem chi tiết rỏ

hàng, thay đổi số lượng, xóa sản phẩm giỏ hàng thành công

Chuỗi sự kiện chính

1 Xem chi tiết giỏ hàng: Khách hàng nhấn nút xem chi tiết giỏ hàng

2 Xóa sản phẩm giỏ hàng: Khách hàng chọn sản phẩm muốn xóa khỏi giỏ hàng, nhấn nút xóa để để thực hiện xóa sản phẩm, nếu có sản phẩm được chọn,

hệ thống hiển thị thông báo để khách hàng xác nhận lại Nếu chấp nhận thì sản phẩm được chọn sẽ bị loại bỏ, nếu không thì sẽ hiện thị lại trang giỏ hàng

3 Thay đổi số lượng sản phẩm : Khách hàng chọn sản phẩm muốn thay đổi số lượng.Chọn số lượng muốn thay đổi, nhấn nút cập nhật để thực hiện Sản phẩm được chọn sẽ được cập nhật số lượng và hệ thống sẽ cập nhật lại giá sản phẩm

Bảng 3.11 Kịch bản UC quản lý giỏ hàng

− 3.3.12 Nhiệm vụ mua hàng

Hình 3.13 Biểu đồ phân rã UC mua hàng

Tiền điều kiện sản phẩm muốn mua có trong giỏ hàng,

khách hàng đã đăng nhập tài khoản và nhập thông tin nhận hàng

Chuỗi sự kiện chính

Cho phép khách hàng tạo đơn hàng để tiến hành thanh toán giỏ hàng sản phẩm

1 Khách hàng nhấn thanh toán để tạo đơn hàng

2 Hiển thị form thanh toán, hệ thống hiển thị đơn hàng và một số thông tin mặc định của đơn hàng

3 Khách hàng nhập các thông tin: họ tên, địa chỉ email, số điện thoại và địa chỉ giao hàng và chọn hình thức thanh toán để thanh toán

4 Chọn gửi đơn hàng Nếu đơn hàng đã nhập đúng thì thực hiện bước 5 Nếu sai hoặc thiếu thông tin thì thực hiện ngoại lệ

5 Hệ thống báo Giao dịch thành công

− 3.3.1 Nhiệm vụ xem lịch sử mua hàng

Hình 3.14 Biểu đồ phân rã UC xem lịch sử mua hàng

Tiền điều kiện Đơn hàng đã được tạo và khách hàng

đã đăng nhập tài khoản

Hậu điều kiện Khách hàng xem được lịch sử mua

hàng

Chuỗi sự kiện chính

1 Khách hàng chọn chức năng xem lịch sử mua hàng

2 Hệ thống hiển thị danh sách đơn hàng đã đặt

3 Chọn đơn hàng để xem chi tiết đơn hàng

Bảng 3.13 Kịch bản UC xem lịch sử mua hàng

3.1 Nêu tình huống

Nhiệm vụ 1: Quản lý danh mục sản phẩm

Kịch bản:

 Ngữ cảnh: Admin muốn quản lý danh mục sản phẩm bằng cách thêm, sửa, xóa

hoặc tìm kiếm các danh mục có sẵn trong hệ thống

 Các bước:

1. Admin đăng nhập vào hệ thống và chuyển đến trang quản lý danh mục sản phẩm

2. Admin nhấn vào nút "Thêm danh mục" để tạo danh mục mới

 Hệ thống hiển thị form nhập thông tin danh mục (Tên danh mục, Mô tả)

 Admin điền thông tin và nhấn "Lưu."

3. Admin nhấn vào danh mục cần sửa hoặc xóa

 Nếu sửa: Form thông tin danh mục hiển thị để Admin cập nhật thông tin

 Nếu xóa: Hệ thống hiển thị thông báo xác nhận trước khi thực hiện

4. Admin sử dụng thanh tìm kiếm để nhập từ khóa (Tên danh mục) và nhấn

“Tìm kiếm.”

 Hệ thống hiển thị danh sách kết quả phù hợp

5. Hệ thống thông báo khi các thao tác thêm/sửa/xóa/tìm kiếm được thực hiện thành công

 Ngoại lệ:

1. Nếu không nhập đủ thông tin khi thêm/sửa, hệ thống hiển thị thông báo

“Vui lòng điền đầy đủ thông tin.”

2. Nếu danh mục đã tồn tại, hệ thống hiển thị thông báo “Tên danh mục đã tồntại.”

Nhiệm vụ 2: Quản lý sản phẩm

Kịch bản:

 Ngữ cảnh: Admin muốn thêm mới, chỉnh sửa, xóa hoặc tìm kiếm sản phẩm trong

hệ thống