bao-cao-Bai-tap-lon-HCI_Nhóm12(123).docx

bao-cao-btl

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

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Ệ ”
Sinh viên thực hiện: 
Phan Mạnh Đức        - Mã số: 521100138
Nguyễn Văn Hệ        - Mã số: 521100145
Nguyễn Trung Hiếu - Mã số: 521100146
Cao Quốc Khánh      - Mã số: 521100154
Lớp:  521100C
Giảng viên: ThS/TS  Trần Thị Đồng
Hà Nội - 2024

3. Lời Mở Đầu
Trong thời đại cách mạng công nghiệp 4.0, công nghệ thông tin đã và đang trở
thành một phần không thể thiếu trong cuộc sống hàng ngày. Việc sử dụng các thiết
bị công nghệ như laptop, điện thoại thông minh và đồng hồ thông minh không chỉ
dừng lại ở việc hỗ trợ công việc và học tập mà còn trở thành công cụ giải trí, quản
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ền
thố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ớn
trong 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ực
tuyế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 theo
từ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ình
phứ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ến
lược kinh doanh. Một website bán hàng công nghệ thành công cần phải đảm bảo
tí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ính
nă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.
3

4. 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áy
tí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ệp
tiế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ản
phẩ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ựa
chọ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ĩnh
vự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ên
biệ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ăng
thự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ới
cá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ền
tả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ắm
tố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ực
tuyế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ách
hà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èn
luyệ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ác
nhà 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 trong
cuộc sống.
4

5. 1.5 Đặt bài toán
Bài toán đặt ra: Xây dựng website bán hàng công nghệ gồm các chức năng của một
website bán hàng đơn thuần.
Qua quá trình khảo sát các nguồn thông tin những người có kinh nghiệm trong phát
triển website, trải nghiệm thực tế trên một số website bán hàng trực tuyến có thương
hiệu như https://cellphones.com.vn/, https://www.thegioididong.com/laptop-ldp,
em phân tích bài toán:
1.5.1Chứ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ười
tiê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:
Đăng nhập/ đăng ký
Tìm kiếm sản phẩm
Quản lý giỏ hàng
Xem tin tức
Chức năng của admin
Quản lý đơn hàng
Thống kê
Quản lý sản phẩm của cửa hàng
Quản lý người dùng
Quản lý tin tức
Quản lý khách hàng
Quản lý danh mục sản phẩm
-Chức năng cho Khách hàng
Thanh toán đơn hàng
Xem lịch sử mua hàng
1.5.2Yêu cầu đặt ra
Hệ thống có 2 phần:
a. Phần thứ nhất: Khách hàng
5

6. 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ý mua
sắ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 đặt
hà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:
6

7. 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.
1.7 Vấn đề - Giải pháp
Khó khăn:
Kiến thức thực tế vẫn còn hạn chế
Công nghệ biến đổi theo từng đơn vị thời gian nên cần có chiến lược phát triển,
thời gian và công sức tìm hiểu.
Triển khai bài toán theo hướng hoạt động cá nhân nên chưa có sự giao lưu ý
tưởng.
Giải pháp:
Tự tìm dành thời gian tìm hiểu những công nghệ mới, giao lưu, học hỏi từ
những người có kinh nghiệm trong ngành công nghệ thông tin và giáo viên
hướng dẫn
7

8. 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 được
cậ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à thanh
toá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ải
nghiệm mua sắm của khách hàng. Đây là một trong những tính năng quan trọng
củ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 doanh
online. 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 đến
việ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ới
người dùng và thuận lợi trong mua bán.
2.2. Phân tích người dùng
STT Tác nhân Mô tả
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 đối
tượng khác, có quyền truy cập và sử dụng tất cả các
chức năng trong hệ thống.
2 Khách hàngKhá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.
8

9. 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
Tên Use case Quản lý danh mục sản phẩm
Tác nhân chính Admin
Tiền điều kiện Admin đã đăng nhập
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
9

10. 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
Tên Use case Quản lý sản phẩm
Tác nhân chính Admin
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
10

11. đổ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
11

12. Tên Use case Quản lý đơn hàng
Tác nhân chính Admin
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.
Chuỗi sự kiện chính
Người sử dụng chọn kiểu tác động: xóa, thay đổi trạng thái, tìm kiếm thông tin
hóa đơn
1. Xóa đơn hàng: hệ thống hiển thị danh sách hóa đơn, hóa đơn 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 hóa đơn.
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ào
thay đổ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ập
nhậ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
12

13. −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ệ
Tên Use case Quản lý liên hệ
Tác nhân chính Admin
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ệ
13

14. −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
Tên Use case Quản lý khách hàng
Tác nhân chính Admin
Tiền điều kiện  Đăng nhập thành cô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
14

15. −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
Tên Use case Quản lý tin tức
Tác nhân chính Admin
Tiền điều kiện  Đăng nhập thành công
 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
15

16. 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.8 Kịch bản UC quản lý tin tức
−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
Tên Use case Thống kê doanh thu
Tác nhân chính Admin
Tiền điều kiện  Đăng nhập thành công
 Chuyển đến trang thống kê
Hậu điều kiện Admin thống kê thành công
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.
16

17. 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
Tên Use case Xem thông tin sản phẩm
Tác nhân chính Khách hàng
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
Chuỗi sự kiện chính
Khách hàng được phép xem thông tin sản phẩm muốn mua và thêm được sản
phẩm muốm mua vào giỏ hàng
1. Khách hàng chọn vào mặt hàng cần mua.
2. Hệ thống hiển thị sản phẩm có trong mục đã chọn.
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
17

18. 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
Tên Use case Quản lý giỏ hàng
Tác nhân chính Khách 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
18

19. −3.3.12 Nhiệm vụ mua hàng
Hình 3.13 Biểu đồ phân rã UC mua hàng
Tên Use case Mua hàng
Tác nhân chính Khách 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
Hậu điều kiện Khách hàng mua hàng thành cô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.
19

20. Ngoại lệ
1. Hệ thống thông báo Tạo đơn hàng không thành công, vui lòng kiểm tra lại
thông tin
2. Hệ thống hiển thị lại form nhập thông tin.
Bảng 3.12 Kịch bản UC mua hà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
Tên Use case Xem lịch sử mua hàng
Tác nhân chính Khách 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
20

21. 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ồn
tạ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.
21

22. Các bước:
3.Admin đăng nhập và chuyển đến trang quản lý sản phẩm.
4.Admin nhấn vào nút “Thêm sản phẩm” để tạo mới.
Hệ thống hiển thị form nhập thông tin sản phẩm (Tên sản phẩm, Giá,
Danh mục, Hình ảnh).
Admin điền thông tin và nhấn “Lưu.”
5.Admin nhấn vào sản phẩm cần chỉnh sửa hoặc xóa:
Nếu sửa: Form hiển thị thông tin sản phẩm để chỉnh sửa.
Nếu xóa: Hệ thống hiển thị thông báo xác nhận trước khi xóa.
6.Admin nhập từ khóa (Tên sản phẩm) vào thanh tìm kiếm và nhấn “Tìm
kiếm.”
Hệ thống trả về danh sách các sản phẩm phù hợp.
7.Admin nhấn vào sản phẩm để thay đổi trạng thái (Ẩn/Hiện).
8.Hệ thống thông báo khi các thao tác được thực hiện thành công.
Ngoại lệ:
oNếu không điền đầy đủ 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.”
oNếu sản phẩm đã tồn tại, hệ thống hiển thị thông báo “Tên sản phẩm đã tồn
tại.”
Nhiệm vụ 3: Quản lý đơn hàng
Kịch bản:
Ngữ cảnh: Admin muốn theo dõi và xử lý các đơn hàng do khách hàng tạo.
Các bước:
1.Admin đăng nhập và truy cập vào trang quản lý đơn hàng.
2.Admin nhấn vào một đơn hàng cụ thể để xem chi tiết (Danh sách sản phẩm,
Thông tin khách hàng, Trạng thái).
3.Admin thay đổi trạng thái đơn hàng (Đang xử lý, Đã giao hàng).
22

23. Hệ thống hiển thị thông báo cập nhật thành công.
4.Admin nhập từ khóa (Mã đơn hàng) vào thanh tìm kiếm và nhấn “Tìm
kiếm.”
Hệ thống trả về danh sách các đơn hàng phù hợp.
5.Admin nhấn vào nút “Xóa” để xóa một đơn hàng.
Hệ thống hiển thị thông báo xác nhận trước khi thực hiện.
Ngoại lệ:
oNếu không tìm thấy đơn hàng, hệ thống thông báo “Không có đơn hàng phù
hợp.”
oNếu thông tin nhập không đúng định dạng, hệ thống yêu cầu nhập lại.
Nhiệm vụ 4: Quản lý liên hệ
Kịch bản:
Ngữ cảnh: Admin muốn quản lý các thông tin liên hệ mà khách hàng gửi đến.
Các bước:
1.Admin đăng nhập và truy cập trang quản lý liên hệ.
2.Hệ thống hiển thị danh sách liên hệ (Tên người gửi, Email, Nội dung).
3.Admin nhấn vào một liên hệ để xem chi tiết.
4.Admin nhấn nút “Xóa” để xóa liên hệ đã xử lý.
Hệ thống hiển thị thông báo xác nhận trước khi xóa.
5.Admin nhập từ khóa (Tên hoặc Email) vào thanh tìm kiếm và nhấn “Tìm
kiếm.”
Hệ thống hiển thị danh sách các liên hệ phù hợp.
Ngoại lệ:
oNếu thông tin nhập vào không hợp lệ, hệ thống hiển thị thông báo “Vui lòng
kiểm tra lại thông tin.”
23

24. Nhiệm vụ 5: Quản lý khách hàng
Kịch bản:
Ngữ cảnh: Admin muốn quản lý thông tin khách hàng sử dụng hệ thống.
Các bước:
1.Admin đăng nhập và truy cập trang quản lý khách hàng.
2.Hệ thống hiển thị danh sách khách hàng (Tên, Email, Số điện thoại, Ngày
đăng ký).
3.Admin nhấn vào một khách hàng để sửa thông tin.
Form sửa thông tin hiển thị để chỉnh sửa (Tên, Email, Số điện thoại).
Admin nhấn “Lưu” để cập nhật.
4.Admin nhấn nút “Xóa” để xóa một khách hàng.
Hệ thống hiển thị thông báo xác nhận trước khi xóa.
5.Admin nhập từ khóa (Tên hoặc Email) vào thanh tìm kiếm và nhấn “Tìm
kiếm.”
Hệ thống trả về danh sách khách hàng phù hợp.
Ngoại lệ:
oNếu thông tin nhập vào không hợp lệ, hệ thống yêu cầu kiểm tra lại.
Nhiệm vụ 6: Quản lý tin tức
Kịch bản:
Ngữ cảnh: Admin muốn thêm mới, sửa hoặc xóa các bài viết tin tức.
Các bước:
1.Admin đăng nhập và truy cập trang quản lý tin tức.
2.Admin nhấn nút “Thêm tin tức” để tạo mới.
Hệ thống hiển thị form nhập thông tin (Tiêu đề, Nội dung, Hình ảnh).
Admin điền thông tin và nhấn “Lưu.”
3.Admin nhấn vào bài viết để sửa hoặc xóa.
24

25. Nếu sửa: Form chỉnh sửa tin tức hiển thị để chỉnh sửa.
Nếu xóa: Hệ thống hiển thị thông báo xác nhận trước khi xóa.
4.Admin sử dụng thanh tìm kiếm để tìm kiếm bài viết theo từ khóa (Tiêu đề).
Hệ thống trả về danh sách bài viết phù hợp.
Ngoại lệ:
oNếu không nhập đủ thông tin khi thêm/sửa, hệ thống yêu cầu nhập lại.
Nhiệm vụ 7: Thống kê doanh thu
Kịch bản:
Ngữ cảnh: Admin muốn xem thống kê doanh thu theo ngày, tháng hoặc năm.
Các bước:
1.Admin đăng nhập và truy cập trang thống kê doanh thu.
2.Admin chọn kiểu thống kê (Ngày, Tháng, Năm).
3.Hệ thống hiển thị biểu đồ và bảng số liệu tương ứng.
4.Admin xem và xuất báo cáo thống kê (nếu cần).
Ngoại lệ:
oNếu không có dữ liệu bán hàng, hệ thống thông báo “Không có dữ liệu cho
khoảng thời gian đã chọn.”
Nhiệm vụ 8: Xem thông tin sản phẩm
Kịch bản:
Ngữ cảnh: Khách hàng muốn xem chi tiết thông tin sản phẩm trước khi mua.
Các bước:
1.Khách hàng truy cập vào trang sản phẩm.
2.Hệ thống hiển thị danh sách sản phẩm với thông tin cơ bản (Tên, Giá, Hình
ảnh).
3.Khách hàng nhấp vào một sản phẩm để xem chi tiết.
Hệ thống hiển thị thông tin chi tiết: Mô tả, Đánh giá, Tùy chọn mua.
25

26. 4.Khách hàng nhấn nút “Thêm vào giỏ hàng” để chọn mua.
Ngoại lệ:
oNếu sản phẩm đã hết hàng, hệ thống thông báo “Sản phẩm hiện đã hết
hàng.”
Nhiệm vụ 9: Quản lý giỏ hàng
Kịch bản:
Ngữ cảnh: Khách hàng đã thêm sản phẩm vào giỏ hàng và muốn kiểm tra hoặc
quản lý thông tin giỏ hàng.
Các bước:
1.Khách hàng truy cập vào giỏ hàng bằng cách nhấn vào biểu tượng giỏ hàng
trên giao diện.
2.Hệ thống hiển thị danh sách các sản phẩm trong giỏ hàng, bao gồm: Tên sản
phẩm, số lượng, đơn giá, và tổng tiền.
3.Khách hàng thực hiện các thao tác:
Nhấn nút “Xóa” để loại bỏ sản phẩm khỏi giỏ hàng:
Hệ thống hiển thị thông báo xác nhận trước khi xóa.
Nếu xác nhận, sản phẩm sẽ bị xóa khỏi giỏ hàng và tổng tiền
được cập nhật.
Chọn sản phẩm để thay đổi số lượng:
Khách hàng nhập số lượng mới hoặc nhấn các nút “+” hoặc
“-” để điều chỉnh.
Nhấn nút “Cập nhật,” hệ thống sẽ điều chỉnh số lượng và tổng
tiền.
4.Hệ thống hiển thị thông báo “Cập nhật thành công” sau mỗi thao tác.
Ngoại lệ:
1.Nếu giỏ hàng rỗng, hệ thống hiển thị thông báo “Hiện tại không có sản
phẩm nào trong giỏ hàng.”
Nhiệm vụ 10: Mua hàng
Kịch bản:
26

27. Ngữ cảnh: Khách hàng muốn hoàn tất quá trình mua hàng cho các sản phẩm đã
thêm vào giỏ hàng.
Các bước:
1.Khách hàng nhấn nút “Thanh toán” trên giao diện giỏ hàng.
2.Hệ thống hiển thị form thanh toán, yêu cầu nhập thông tin cá nhân và giao
hàng:
Họ tên.
Số điện thoại.
Email.
Địa chỉ giao hàng.
3.Khách hàng chọn phương thức thanh toán:
Thanh toán khi nhận hàng (COD).
Thanh toán bằng thẻ ngân hàng.
4.Khách hàng kiểm tra thông tin đơn hàng (danh sách sản phẩm, tổng tiền) và
nhấn nút “Xác nhận.”
5.Hệ thống kiểm tra thông tin và xử lý giao dịch:
Nếu giao dịch thành công, hệ thống hiển thị thông báo “Đặt hàng
thành công” và gửi email xác nhận.
Nếu giao dịch thất bại, hệ thống hiển thị thông báo lỗi và yêu cầu
khách hàng kiểm tra lại.
Ngoại lệ:
oNếu thiếu thông tin bắt buộc, hệ thống yêu cầu nhập lại.
oNếu sản phẩm trong giỏ hàng hết hàng, hệ thống thông báo và loại sản
phẩm khỏi giỏ hàng.
Nhiệm vụ 11: Xem lịch sử mua hàng
Kịch bản:
Ngữ cảnh: Khách hàng muốn kiểm tra lại các đơn hàng đã đặt trước đó.
Các bước:
27

28. 1.Khách hàng đăng nhập vào tài khoản và nhấn vào mục “Lịch sử mua hàng”
trên thanh menu.
2.Hệ thống hiển thị danh sách các đơn hàng đã đặt, sắp xếp theo thứ tự thời
gian, bao gồm:
Mã đơn hàng.
Ngày đặt hàng.
Tổng tiền.
Trạng thái đơn hàng (Đang xử lý, Đã giao).
3.Khách hàng nhấn vào một đơn hàng cụ thể để xem chi tiết:
Danh sách sản phẩm đã mua.
Giá từng sản phẩm và tổng tiền.
Thông tin giao hàng (Tên, Địa chỉ, Số điện thoại).
4.Nếu cần hỗ trợ, khách hàng có thể nhấn nút “Liên hệ hỗ trợ” để gửi yêu cầu
đến Admin.
Ngoại lệ:
oNếu không có đơn hàng nào, hệ thống hiển thị thông báo “Bạn chưa có đơn
hàng nào.”
Thiết kế giao diện sơ bộ
1. Quản lý danh mục sản phẩm
Cửa sổ chính: Bảng danh mục sản phẩm hiển thị các danh mục với các nút Thêm,
Sửa, Xóa, kèm thanh tìm kiếm.
Hộp thoại thêm/sửa danh mục: Gồm các trường Tên danh mục, Mô tả và nút
Lưu.
Ảnh minh họa từ Figma:
oĐính kèm ảnh giao diện danh mục sản phẩm chính (File:
danhmuc_sanpham_main.png).
oĐính kèm ảnh form thêm/sửa danh mục (File:
danhmuc_sanpham_form.png).
2. Quản lý sản phẩm
28

29. Cửa sổ chính: Bảng danh sách sản phẩm hiển thị các sản phẩm với nút Thêm mới,
Sửa, Xóa, và trạng thái Ẩn/Hiện.
Hộp thoại thêm/sửa sản phẩm: Các trường Tên sản phẩm, Giá, Danh mục, và nút
Lưu.
Ảnh minh họa từ Figma:
oĐính kèm ảnh giao diện danh sách sản phẩm chính (File:
sanpham_list.png).
oĐính kèm ảnh form thêm/sửa sản phẩm (File: sanpham_form.png).
3. Quản lý đơn hàng
Cửa sổ chính: Bảng danh sách đơn hàng với các cột Mã đơn hàng, Khách hàng,
Trạng thái, và nút Xem chi tiết.
Hộp thoại chi tiết đơn hàng: Hiển thị thông tin đơn hàng, nút Cập nhật trạng thái.
Ảnh minh họa từ Figma:
oĐính kèm ảnh giao diện danh sách đơn hàng (File: donhang_list.png).
oĐính kèm ảnh chi tiết đơn hàng (File: donhang_detail.png).
4. Quản lý liên hệ
Cửa sổ chính: Danh sách liên hệ với các cột Tên người gửi, Email, và nút Xem
chi tiết.
Hộp thoại chi tiết liên hệ: Hiển thị nội dung chi tiết và nút Xóa.
Ảnh minh họa từ Figma:
oĐính kèm ảnh giao diện danh sách liên hệ (File: lienhe_list.png).
oĐính kèm ảnh chi tiết liên hệ (File: lienhe_detail.png).
5. Quản lý khách hàng
Cửa sổ chính: Bảng danh sách khách hàng hiển thị Tên, Email, Số điện thoại, và
nút Sửa, Xóa.
Hộp thoại sửa thông tin khách hàng: Hiển thị các trường để chỉnh sửa thông tin.
Ảnh minh họa từ Figma:
oĐính kèm ảnh danh sách khách hàng (File: khachhang_list.png).
oĐính kèm ảnh form sửa khách hàng (File: khachhang_form.png).
29

30. 6. Quản lý tin tức
Cửa sổ chính: Bảng tin tức với cột Tiêu đề, Ngày đăng, và nút Thêm, Sửa, Xóa.
Hộp thoại thêm/sửa tin tức: Các trường Tiêu đề, Nội dung, Hình ảnh.
Ảnh minh họa từ Figma:
oĐính kèm ảnh danh sách tin tức (File: tintuc_list.png).
oĐính kèm ảnh form thêm/sửa tin tức (File: tintuc_form.png).
7. Thống kê doanh thu
Cửa sổ chính: Hiển thị biểu đồ doanh thu kèm bảng số liệu, các bộ lọc Ngày,
Tháng, Năm.
Ảnh minh họa từ Figma:
oĐính kèm ảnh giao diện thống kê doanh thu (File: thongke_doanhthu.png).
8. Xem thông tin sản phẩm
Cửa sổ chính: Danh sách sản phẩm hiển thị hình ảnh, tên, giá, và đánh giá.
Chi tiết sản phẩm: Hiển thị mô tả, giá, và nút Thêm vào giỏ hàng.
Ảnh minh họa từ Figma:
oĐính kèm ảnh danh sách sản phẩm (File: xemsanpham_list.png).
oĐính kèm ảnh chi tiết sản phẩm (File: xemsanpham_detail.png).
9. Quản lý giỏ hàng
Cửa sổ chính: Danh sách sản phẩm trong giỏ hàng hiển thị hình ảnh, tên, số
lượng, giá.
Điều khiển: Nút Xóa sản phẩm, Cập nhật số lượng, Thanh toán.
Ảnh minh họa từ Figma:
oĐính kèm ảnh giao diện giỏ hàng (File: giohang_main.png).
10. Mua hàng
Cửa sổ chính: Form thanh toán hiển thị các trường thông tin giao hàng và phương
thức thanh toán.
30

31. Ảnh minh họa từ Figma:
oĐính kèm ảnh form thanh toán (File: muahang_form.png).
11. Xem lịch sử mua hàng
Cửa sổ chính: Bảng danh sách đơn hàng với nút Xem chi tiết.
Chi tiết đơn hàng: Hiển thị sản phẩm đã mua, thông tin giao hàng.
Ảnh minh họa từ Figma:
oĐính kèm ảnh lịch sử mua hàng (File: lichsu_donhang.png).
oĐính kèm ảnh chi tiết đơn hàng (File: lichsu_detail.png).
1. Thiết kế tổng quan
Giới thiệu:
Dựa trên phân tích nhiệm vụ, hệ thống được thiết kế để hỗ trợ quản lý và tương tác của
Admin và người dùng. Các nhiệm vụ được phân chia thành các chức năng cụ thể, bao
gồm: Quản lý danh mục sản phẩm, Quản lý sản phẩm, Quản lý đơn hàng, Quản lý liên hệ,
Quản lý khách hàng, Quản lý tin tức, Thống kê doanh thu, Xem thông tin sản phẩm, Quản
lý giỏ hàng, Mua hàng, và Xem lịch sử mua hàng.
Các thành phần chính trong giao diện:
1.Thanh điều hướng: Bao gồm các mục như Trang chủ, Danh mục sản phẩm, Giỏ
hàng, Đăng nhập/Đăng ký.
2.Cửa sổ và hộp thoại: Tương ứng với từng nhiệm vụ để nhập, hiển thị, chỉnh sửa
dữ liệu.
3.Menu và điều khiển: Hỗ trợ thao tác dễ dàng như tìm kiếm, thêm, sửa, xóa, và
xác nhận.
Mục tiêu thiết kế:
Tạo giao diện trực quan, dễ sử dụng cho Admin và khách hàng.
Hỗ trợ thực hiện các thao tác quản lý và mua sắm một cách nhanh chóng, hiệu quả.
Đảm bảo các chức năng hoạt động mượt mà và đồng nhất.
2. Thiết kế kịch bản mẫu
Nhiệm vụ 1: Quản lý danh mục sản phẩm
31

32. Thiết kế ban đầu:
Cửa sổ chính: Hiển thị bảng danh sách danh mục sản phẩm với các cột: Tên danh
mục, Mô tả.
Menu: Nút “Thêm mới,” “Sửa,” “Xóa,” và thanh tìm kiếm.
Hộp thoại thêm/sửa danh mục: Bao gồm các trường nhập liệu như:
oTên danh mục.
oMô tả danh mục.
oNút điều khiển: Lưu, Hủy.
Biểu đồ hoạt động:
1.Admin chọn mục Quản lý danh mục sản phẩm.
2.Thực hiện các thao tác Thêm/Sửa/Xóa/Tìm kiếm danh mục.
3.Hệ thống kiểm tra và lưu thay đổi vào cơ sở dữ liệu.
4.Hiển thị thông báo thành công hoặc lỗi (nếu có).
Nhiệm vụ 2: Quản lý sản phẩm
Thiết kế ban đầu:
Cửa sổ chính: Hiển thị bảng danh sách sản phẩm với các cột: Tên sản phẩm, Giá,
Danh mục, Trạng thái.
Menu: Nút “Thêm mới,” “Sửa,” “Xóa,” “Ẩn/Hiện trạng thái,” và thanh tìm kiếm.
Hộp thoại thêm/sửa sản phẩm: Bao gồm:
oTên sản phẩm.
oGiá sản phẩm.
oDanh mục sản phẩm.
oHình ảnh sản phẩm.
oNút điều khiển: Lưu, Hủy.
Biểu đồ hoạt động:
1.Admin chọn mục Quản lý sản phẩm.
2.Thực hiện các thao tác Thêm/Sửa/Xóa/Tìm kiếm sản phẩm.
3.Hệ thống lưu thay đổi và cập nhật giao diện.
32

33. Nhiệm vụ 3: Quản lý đơn hàng
Thiết kế ban đầu:
Cửa sổ chính: Hiển thị bảng danh sách đơn hàng với các cột: Mã đơn hàng, Tên
khách hàng, Ngày đặt hàng, Trạng thái.
Menu: Nút “Xem chi tiết,” “Cập nhật trạng thái,” “Xóa.”
Hộp thoại chi tiết đơn hàng: Hiển thị thông tin:
oDanh sách sản phẩm trong đơn hàng.
oTổng tiền.
oThông tin khách hàng.
oNút Cập nhật trạng thái, Đóng.
Biểu đồ hoạt động:
1.Admin chọn mục Quản lý đơn hàng.
2.Thực hiện các thao tác Xem chi tiết, Cập nhật trạng thái, hoặc Xóa đơn hàng.
3.Hệ thống lưu thay đổi và phản hồi trạng thái.
Nhiệm vụ 4: Quản lý liên hệ
Thiết kế ban đầu:
Cửa sổ chính: Hiển thị danh sách liên hệ với các cột: Tên người gửi, Email, Nội
dung.
Menu: Nút “Xem chi tiết,” “Xóa,” và thanh tìm kiếm.
Hộp thoại chi tiết liên hệ: Hiển thị thông tin nội dung liên hệ và nút Xóa.
Biểu đồ hoạt động:
1.Admin chọn mục Quản lý liên hệ.
2.Thực hiện các thao tác Xem chi tiết, Xóa liên hệ.
3.Hệ thống xác nhận thao tác và hiển thị trạng thái.
Nhiệm vụ 5: Quản lý khách hàng
Thiết kế ban đầu:
33

34. Cửa sổ chính: Hiển thị danh sách khách hàng với các cột: Tên, Email, Số điện
thoại.
Menu: Nút “Sửa,” “Xóa,” và thanh tìm kiếm.
Hộp thoại sửa thông tin khách hàng: Bao gồm các trường:
oTên khách hàng.
oEmail.
oSố điện thoại.
oNút điều khiển: Lưu, Hủy.
Biểu đồ hoạt động:
1.Admin chọn mục Quản lý khách hàng.
2.Thực hiện các thao tác Sửa/Xóa thông tin khách hàng.
3.Hệ thống lưu thay đổi và phản hồi trạng thái.
Nhiệm vụ 6: Quản lý tin tức
Thiết kế ban đầu:
Cửa sổ chính: Hiển thị danh sách tin tức với các cột: Tiêu đề, Ngày đăng.
Menu: Nút “Thêm mới,” “Sửa,” “Xóa.”
Hộp thoại thêm/sửa tin tức: Bao gồm:
oTiêu đề tin tức.
oNội dung tin tức.
oHình ảnh.
oNút điều khiển: Lưu, Hủy.
Biểu đồ hoạt động:
1.Admin chọn mục Quản lý tin tức.
2.Thực hiện các thao tác Thêm/Sửa/Xóa tin tức.
3.Hệ thống lưu thay đổi và cập nhật giao diện.
Nhiệm vụ 7: Thống kê doanh thu
Thiết kế ban đầu:
34

35. Cửa sổ chính: Hiển thị biểu đồ doanh thu theo ngày, tháng, năm, kèm bảng số liệu
chi tiết.
Menu: Bộ lọc chọn thời gian (Ngày, Tháng, Năm).
Nút điều khiển: Xuất báo cáo.
Biểu đồ hoạt động:
1.Admin chọn mục Thống kê doanh thu.
2.Lọc dữ liệu theo khoảng thời gian.
3.Hệ thống hiển thị biểu đồ và xuất báo cáo.
Nhiệm vụ 8: Xem thông tin sản phẩm
Thiết kế ban đầu:
Cửa sổ chính: Danh sách sản phẩm hiển thị hình ảnh, tên, giá.
Chi tiết sản phẩm: Hiển thị mô tả, giá bán, và nút Thêm vào giỏ hàng.
Biểu đồ hoạt động:
1.Khách hàng chọn sản phẩm để xem chi tiết.
2.Thêm sản phẩm vào giỏ hàng.
Nhiệm vụ 9: Quản lý giỏ hàng
Thiết kế ban đầu:
Cửa sổ chính: Danh sách sản phẩm trong giỏ với các cột: Tên, Hình ảnh, Giá, Số
lượng.
Menu: Nút “Xóa sản phẩm,” “Cập nhật số lượng,” “Thanh toán.”
Biểu đồ hoạt động:
1.Khách hàng truy cập giỏ hàng.
2.Thực hiện các thao tác xóa hoặc cập nhật sản phẩm.
3.Hệ thống hiển thị tổng tiền và trạng thái cập nhật.
Nhiệm vụ 10: Mua hàng
35

36. Thiết kế ban đầu:
Form thanh toán: Hiển thị các trường:
oHọ tên.
oĐịa chỉ.
oSố điện thoại.
oPhương thức thanh toán.
Nút điều khiển: Xác nhận.
Biểu đồ hoạt động:
1.Khách hàng nhập thông tin giao hàng.
2.Chọn phương thức thanh toán và xác nhận.
3.Hệ thống xử lý giao dịch và thông báo kết quả.
Nhiệm vụ 11: Xem lịch sử mua hàng
Thiết kế ban đầu:
Cửa sổ chính: Danh sách đơn hàng hiển thị Mã đơn hàng, Ngày đặt, Tổng tiền.
Chi tiết đơn hàng: Hiển thị sản phẩm, thông tin giao hàng.
Biểu đồ hoạt động:
1.Khách hàng chọn mục Lịch sử mua hàng.
2.Xem chi tiết từng đơn hàng.
IV. XÂY DỰNG STORYBOARD
Phân cảnh theo các kịch bản
Phần này trình bày các kịch bản dưới hình thức "story-câu chuyện", sử dụng các phác họa
đơn giản để minh họa giao diện ở các điểm quan trọng của nhiệm vụ. Các phác họa tập
trung vào cách người dùng tương tác với giao diện và thực hiện các thao tác cần thiết.
1. Quản lý danh mục sản phẩm
36

37. Câu chuyện:
Admin muốn thêm một danh mục sản phẩm mới vào hệ thống.
Phác họa giao diện:
Màn hình chính:
Admin đăng nhập và truy cập vào giao diện quản lý danh mục sản phẩm. Giao diện
hiển thị danh sách các danh mục hiện có kèm các nút "Thêm mới," "Sửa," và
"Xóa."
(Hình phác họa: Danh sách danh mục với các cột Tên danh mục và Mô tả, nút
"Thêm mới" ở góc phải.)
Thêm danh mục:
Admin nhấn vào nút "Thêm mới." Hệ thống hiển thị form nhập thông tin danh mục
với các trường Tên danh mục và Mô tả.
(Hình phác họa: Form đơn giản với hai trường nhập liệu và nút "Lưu.")
Hoàn thành:
Sau khi nhập thông tin, Admin nhấn "Lưu." Hệ thống cập nhật danh mục mới vào
danh sách và hiển thị thông báo "Thêm danh mục thành công."
(Hình phác họa: Danh sách danh mục được cập nhật thêm mục mới.)
2. Quản lý sản phẩm
Câu chuyện:
Admin muốn tìm kiếm và chỉnh sửa một sản phẩm đã có trong hệ thống.
Phác họa giao diện:
Màn hình chính:
Admin truy cập giao diện quản lý sản phẩm. Giao diện hiển thị danh sách các sản
phẩm với cột Tên sản phẩm, Giá, Danh mục, và Trạng thái.
(Hình phác họa: Danh sách sản phẩm với thanh tìm kiếm ở đầu trang.)
Tìm kiếm sản phẩm:
Admin nhập từ khóa (Tên sản phẩm) vào thanh tìm kiếm và nhấn nút "Tìm kiếm."
Hệ thống hiển thị kết quả phù hợp.
(Hình phác họa: Kết quả tìm kiếm thu hẹp danh sách sản phẩm theo từ khóa.)
37

38. Chỉnh sửa sản phẩm:
Admin nhấn vào sản phẩm cần chỉnh sửa. Hệ thống hiển thị form cập nhật thông
tin sản phẩm với các trường: Tên sản phẩm, Giá, Danh mục.
(Hình phác họa: Form chỉnh sửa sản phẩm với các trường và nút "Lưu.")
Hoàn thành:
Admin nhấn "Lưu" sau khi chỉnh sửa. Hệ thống cập nhật thông tin sản phẩm và
hiển thị thông báo thành công.
(Hình phác họa: Danh sách sản phẩm được cập nhật thông tin.)
3. Quản lý đơn hàng
Câu chuyện:
Admin cần thay đổi trạng thái một đơn hàng từ "Đang xử lý" sang "Đã giao."
Phác họa giao diện:
Màn hình chính:
Admin truy cập giao diện quản lý đơn hàng. Giao diện hiển thị danh sách các đơn
hàng với các cột Mã đơn hàng, Tên khách hàng, Trạng thái.
(Hình phác họa: Danh sách đơn hàng với nút "Xem chi tiết" cho từng dòng.)
Xem chi tiết đơn hàng:
Admin nhấn vào nút "Xem chi tiết" của một đơn hàng. Hệ thống hiển thị thông tin
chi tiết: danh sách sản phẩm, tổng tiền, trạng thái hiện tại.
(Hình phác họa Chi tiết đơn hàng hiển thị rõ trạng thái "Đang xử lý.")
Cập nhật trạng thái:
Admin chọn trạng thái mới từ danh sách thả xuống và nhấn "Cập nhật." Hệ thống
thay đổi trạng thái đơn hàng thành "Đã giao."
(Hình phác họa: Trạng thái được cập nhật thành công kèm thông báo.)
4. Quản lý giỏ hàng
Câu chuyện:
Khách hàng kiểm tra giỏ hàng và thay đổi số lượng sản phẩm.
38

39. Phác họa giao diện:
Màn hình chính:
Khách hàng truy cập giao diện giỏ hàng. Hệ thống hiển thị danh sách các sản phẩm
trong giỏ hàng với các cột Tên sản phẩm, Số lượng, Giá.
(Hình phác họa: Danh sách sản phẩm trong giỏ hàng kèm nút "Cập nhật số
lượng.")
Thay đổi số lượng:
Khách hàng nhập số lượng mới vào ô nhập liệu hoặc sử dụng nút "+" và "-" để
điều chỉnh. Sau đó, nhấn "Cập nhật."
(Hình phác họa: Số lượng được thay đổi và nút "Cập nhật" được nhấn.)
Hoàn thành:
Hệ thống cập nhật số lượng sản phẩm và hiển thị tổng tiền mới của giỏ hàng.
(Hình phác họa: Tổng tiền giỏ hàng được cập nhật.)
5. Mua hàng
Câu chuyện:
Khách hàng tiến hành thanh toán đơn hàng.
Phác họa giao diện:
Màn hình chính:
Khách hàng nhấn nút "Thanh toán" trong giao diện giỏ hàng. Hệ thống hiển thị
form thanh toán.
(Hình phác họa: Form thanh toán với các trường thông tin cá nhân và giao hàng.)
Điền thông tin:
Khách hàng nhập các thông tin cần thiết: Họ tên, Số điện thoại, Địa chỉ giao hàng.
Chọn phương thức thanh toán.
(Hình phác họa: Form hoàn chỉnh sau khi điền đầy đủ thông tin.)
Hoàn thành thanh toán:
Khách hàng nhấn nút "Xác nhận." Hệ thống xử lý giao dịch và hiển thị thông báo
"Đặt hàng thành công."
(Hình phác họa: Thông báo xác nhận đơn hàng thành công.)
39

40. 6. Xem lịch sử mua hàng
Câu chuyện:
Khách hàng kiểm tra chi tiết đơn hàng đã đặt.
Phác họa giao diện:
Màn hình chính:
Khách hàng truy cập giao diện "Lịch sử mua hàng." Hệ thống hiển thị danh sách
các đơn hàng trước đó với các cột Mã đơn hàng, Ngày đặt, Tổng tiền.
(Hình phác họa: Danh sách đơn hàng với nút "Xem chi tiết.")
Xem chi tiết đơn hàng:
Khách hàng nhấn vào nút "Xem chi tiết" của một đơn hàng. Hệ thống hiển thị các
thông tin chi tiết: danh sách sản phẩm, giá từng sản phẩm, thông tin giao hàng.
(Hình phác họa: Chi tiết đơn hàng hiển thị đầy đủ thông tin.)
V. XÂY DỰNG PROTOTYPE MÁY TÍNH
1. Độ trung thực cao trong giao diện
Mục tiêu:
Prototype được thiết kế với giao diện gần giống với phiên bản cuối cùng, nhằm khám phá
cách trình bày đồ họa của giao diện thực tế.
Các yếu tố thiết kế:
Màu sắc: Chủ đạo xanh dương nhạt, điểm nhấn cam.
Font chữ: Sử dụng Roboto với các kích thước khác nhau cho tiêu đề, nội dung.
Bố trí: Căn lề trái hoặc giữa, khoảng cách giữa các thành phần đủ lớn để đảm bảo
tính trực quan.
Biểu tượng: Sử dụng Material Design để đồng bộ giao diện.
2. Prototype bao gồm 5 kịch bản
Danh sách các kịch bản:
1.Quản lý danh mục sản phẩm: Hiển thị danh sách, thêm/sửa danh mục.
2.Quản lý sản phẩm: Hiển thị danh sách, tìm kiếm, thêm/sửa sản phẩm.
3.Quản lý đơn hàng: Xem chi tiết và thay đổi trạng thái đơn hàng.
40

41. 4.Quản lý giỏ hàng: Thay đổi số lượng và xóa sản phẩm trong giỏ.
5.Thanh toán: Nhập thông tin giao hàng và xác nhận đơn hàng.
Yêu cầu:
Giao diện chính: Thanh điều hướng, nội dung chính (danh sách hoặc form).
Tương tác: Các nút điều khiển (Thêm, Sửa, Xóa), trường nhập liệu (TextField),
hộp thoại xác nhận.
Đồ họa: Bố trí màn hình và biểu tượng phản ánh giao diện cuối cùng.
Công cụ sử dụng:
Figma/Adobe XD: Thiết kế các màn hình giao diện.
HTML/CSS (tùy chọn): Tạo prototype có tính tương tác cao.
Lợi ích:
Giúp nhóm phát triển hình dung rõ ràng về giao diện và cách người dùng tương
tác.
Xác định các vấn đề tiềm ẩn và chỉnh sửa trước khi triển khai thực tế.
41