Báo cáo sẽ trình bày các giải pháp thiết kế giao diện phù hợpvới người dung bằng cách sử dụng các công cụ hỗ trợ thiết kế giao diện phổ biến hiệnnay.Tham khảo các giao diện đang được ưa
Trang 1TRƯỜNG ĐẠI HỌC THỦY LỢI
KHOA CÔNG NGHỆ THÔNG TIN
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 Levion bán khoá học tiếng việt cho người
Giảng viên phụ trách môn học: Nguyễn Thị Thu Hương
Hà Nội – 2023
Trang 2Mục lục
I ĐỀ XUẤT ĐỀ BÀI 3
1.1 Giới thiệu vấn đề 3
1.2 Giải pháp 3
1.3 Phân công các thành viên tham gia 3
II PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤ 4
2.1 Giới thiệu 4
2.2 Phân tích người sử dụng 4
2.2.1 Người sử dụng thực sự của phần mềm 4
2.2.2 Phương pháp sử dụng để đạt được sự hiểu biết của người sử dụng 4
2.2.3 Vai trò của người sử dụng đối với phần mềm 5
2.2.4 Mức độ kỹ năng của người sử dụng (Thu được qua khảo sát bằng cách phỏng vấn và tạo form phía trên) 6
2.2.5 Kết luận 6
2.3 Phân tích nhiệm vụ 7
2.3.1 Chức năng mua khoá học 7
2.3.2 Quản lý giỏ hàng 8
2.3.3 Tìm kiếm khoá học 9
2.3.4 Quản lý khoá học 9
2.3.5 Quản lý thanh toán 11
2.3.6 Quản lý người dùng 13
III.PHÁC HỌA THIẾT KẾ 15
3.1.Thiết kế tổng quan 15
3.2.Thiết kế kịch bản mẫu 15
3.2.1.Kịch bản mẫu cho người sử dụng là quản lý trung tâm giáo dục Levion 16
3.2.2.Kịch bản mẫu cho người sử dụng là user 20
IV.XÂY DỰNG STORYBOARD 28
4.1 STORYBOARD cho người sử dụng là quản trị viên 28
4.1.1 Quản trị viên quản lý tài khoản người dùng : 28
4.1.2 Quản trị viên quản lý khóa học 28
4.1.3 Quản trị viên quản lý thanh toán 29
4.2 STORYBOARD cho người sử dụng là người dùng 30
4.2.1 Người dùng đăng nhập vào tài khoản 30
4.2.2 Người dùng quản lý giỏ hàng 33
V.XÂY DỰNG PROTOTYPE MÁY TÍNH 36
5.1 Chức năng “Đăng ký” 36
5.2 Chức năng “Đăng nhập” 37
5.3 Chức năng “Quản lý khóa học” 37
5.4 Chức năng “Mua khóa học” 40
5.5 Chức năng “Quản lý giỏ hàng” 44
VI.PHÁT TRIỂN CHƯƠNG TRÌNH 45
5.1 Hệ điều hành 45
5.2 Công cụ lập trình 45
5.3 Ngôn ngữ lập trình 46
5.4 Phần mềm khác 46
Trang 3I. ĐỀ XUẤT ĐỀ BÀI
I.1 Giới thiệu vấn đề
Mục tiêu của báo cáo là thiết kế giao diện cho website Levion bán khoá học tiếng việtcho người nước ngoài với các giao diện phục vụ cho các chức năng chính như quản lýkhoá học, quản lý giỏ hàng, chức năng mua khoá học, quản lý người dung, quản lý thanhtoán, tìm kiếm khoá học Báo cáo sẽ trình bày các giải pháp thiết kế giao diện phù hợpvới người dung bằng cách sử dụng các công cụ hỗ trợ thiết kế giao diện phổ biến hiệnnay
I.2 Giải pháp
Thiết kế giao diện đơn giản, dễ sử dụng và thân thiện với người dùng
Hiểu rõ người sử dụng nhằm xây dựng giao diện hữu dụng
Phân tích thao tác người dùng nhằm đưa ra một giao diện khoa học, thông minh
Sử dụng các công cụ hỗ trợ thiết kế giao diện phổ biến như: Figma
Đội nhóm làm việc với kỹ năng chuyên nghiệp, tài liệu bố trí một cách khoa học, dễ hiểu
để người dùng cũng như người thiết kế có thể đọc hiểu dễ dàng
Tham khảo các giao diện đang được ưa chuộng để ứng dụng vào giao diện của dự án
I.3 Phân công các thành viên tham gia
Ngô Thị Hồng Nhung
- Đề xuất đề bài
- Phân tích người sử dụng
- Phân tích nhiệm vụ: Chức năng mua khoá học
- Phác họa chức năng: Mua khóa học
- Phân tích nhiệm vụ: Quản lý người dùng
- Xây dựng storyboard
- Xây dựng prototypeNguyễn Khánh Linh
- Phân tích nhiệm vụ: Quản lý khoá học
- Phác họa thiết kế: Quản lý khóa học
Trang 4II PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤII.1 Giới thiệu
Việc xây dựng tài liệu thiết kế cho dự án không thể thiếu được hai bước quan trọng làphân tích người sử dụng và phân tích nhiệm vụ
II.2 Phân tích người sử dụng
II.2.1 Người sử dụng thực sự của phần mềm
Admin: Người quản trị phần mềm có quyền sử dụng các thao tác như quản lý khoáhọc, quản lý người sử dụng, quản lý thanh toán dành cho admin
Khách hàng (người mua khoá học): Người nước ngoài có nhu cầu học tiếng việtII.2.2 Phương pháp sử dụng để đạt được sự hiểu biết của người sử dụng
2.2.2.1: Đối với khách hàng đặt mua website (bên trung tâm giáo dục Levion)
Ta sử dụng phương pháp phỏng vấn gặp mặt trực tiếp, qua đó thu được các yêu cầu cơbản của trung tâm giáo dục Levion: Trung tâm Levion muốn xây dựng một trang webbán khoá học tiếng việt cho người nước ngoài, mục tiêu chính của trang web là cungcấp các khoá học chất lượng để giúp học viên nâng cao khả năng tiếng việt của họ
o Yêu cầu về nội dung và khoá học:
Trung tâm Levion cần 1 loạt các khoá học tiếng việt trải dài từ trình độ
cơ bản đến nâng cao
Mỗi khoá học bao gồm các bài giảng video, bài tập, bài kiểm tra và tàiliệu học tập để đảm bảo tính tương tác và hiệu quả cho học viên
o Yêu cầu về ngôn ngữ và giao diện:
o
Trang web được thiết kế để hỗ trợ nhiều ngôn ngữ, đặc biệt là tiếng Anh
để dễ dàng truy cập cho người nước ngoài
Giao diện của trang web nên đơn giản, dễ sử dụng và thân thiện vớingười dung
o Yêu cầu về tính năng:
Trang web cần có tính năng đăng ký và đăng nhập để học viên có thểquản lý tài lý tài khoản của mình và theo dõi tiến trình học tập của họ.Những học viên không đăng ký tài khoản (guest) có thể xem chi tiếtkhoá học, tìm kiếm khoá học, nhưng không được đặt mua khoá học.2.2.2.2: Đối với học viên
Sử dụng phương pháp tạo form khảo sát để hiểu rõ hơn về khách hàng Đặt ra các câuhỏi để thu thập các thông tin quan trọng:
o Thông tin cá nhân:
Tên
Địa chỉ email
Quốc gia và quốc tịch
o Trình độ tiếng việt hiện tại:
Trình độ tiếng Việt của bạn là gì? (Cơ bản, Trung bình, Cao cấp, Khôngbiết tiếng Việt)
Bạn đã học tiếng Việt trước đây chưa? Nếu có, trong bao lâu?
o Yêu cầu về khoá học:
Trang 5Bạn quan tâm đến loại khóa học nào? (Ví dụ: Giao tiếp hàng ngày, Kỹnăng kinh doanh, Văn hóa và lịch sử Việt Nam, )
Bạn mong muốn khóa học ở mức độ nào? (Cơ bản, Trung bình, Nângcao)
Bạn có yêu cầu đặc biệt nào cho khóa học của mình?
o Trải nghiệm học tập trực tuyến:
Bạn đã tham gia vào các khóa học trực tuyến trước đây không? (Có,Không)
Bạn thường sử dụng nền tảng nào để học trực tuyến?
II.2.3 Vai trò của người sử dụng đối với phần mềm
Admin (Quản lý trung tâm Levion): trực tiếp quản lý phần mềm, có các quyền quản lýkhoá học, quản lý người sử dụng, quản lý thanh toán
Học viên : Có nhu cầu mua khoá học tiếng việt, có chức năng mua khoá học, quản lýgiỏ hàng, tìm kiếm khoá học
Khách vãng lai (guest): Có nhu cầu xem khoá học, có thể xem chi tiết khoá học, tìmkiếm khoá học
II.2.4 Mức độ kỹ năng của người sử dụng (Thu được qua khảo sát bằng cách phỏng vấn vàtạo form phía trên)
II.2.4.1.Kỹ năng sử dụng máy tính
Admin (Quản lý trung tâm Levion):
o Học việc: 40% (Nhóm này có một số kinh nghiệm sử dụng máy tính, còn thiếukinh nghiệm sử dụng trong môi trường quản lý)
Trang 6II.2.4.2.Nền tảng văn hóa/xã hội
Ngôn ngữ sử dụng: Đa ngôn ngữ, nhưng chủ yếu là tiếng anh
II.2.4.3.Tần suất sử dụng phần mềm
Sử dụng thường xuyên (đối với admin và học viên): 85%
Sử dụng không thường xuyên (đối với khách vãng lai): 15%
o Giao diện cần được thiết kế cho người có hiểu biết rõ về nghiệp vụ
o Giao diện cần được thiết kế cho người hiểu được đa ngôn ngữ
o Giao cần được thiết kế phù hợp nhằm đáp ứng nhu cầu sử dụng thường xuyên,
ít thay đổi sự thay đổi về giao diện cho người dùng
II.3 Phân tích nhiệm vụ
Phần mềm yêu cầu cầu gồm các chức năng chính sau:
o Chức năng mua khoá học
o Quản lý giỏ hàng
o Tìm kiếm khoá học
o Quản lý khoá học
o Quản lý người dùng
o Quản lý thanh toán
II.3.1 Chức năng mua khoá học
Mục tiêu: Giúp học viên thực hiện mua khoá học
Tiền điều kiện: Học viên phải có tài khoản và đăng nhập vào tài khoản thành côngĐối tượng: Học viên
Nhiệm vụ:
o Mô tả: Cho phép học viên mua và thanh toán khoá học
o Dữ liệu đầu vào: Tên khoá học
o Nhiệm vụ:
1 Học viên vào mục Course
2 Học viên lựa chọn khoá học muốn mua và ấn “Add to card”
3 Hệ thống điều hướng tới trang chi tiết của khoá học
4 Học viên ấn “Buy Now”
5 Hệ thống điều hướng tới trang thanh toán
6 Nếu học viên có mã discount thì điền mã vào trường CouponDiscount và ấn Apply
7 Hệ thống tính tổng số tiền học phí của học viên (sau khi đã ápdụng discount)
8 Học viên ấn vào checkout dể thanh toán
9 Hệ thống hiển thị mã QR
Trang 710 Học viên quét mã QR tiến hành chuyển tiền
11 Sau khi chuyển tiền thành công, học viên ấn “Confirm Payment”
để xác nhận
12 Hệ thống gửi hộp thoại thông báo “Please wait for confirmationfrom levion education center” cho học viên
13 Hệ thống chuyển thông điệp về bên admin, chờ admin xác nhận
14 ADMIN check giao dịch đã hoàn tất thì sẽ chọn chức năng phêduyệt (approve) được hiển thi trên giao diện, và ngược lại Adminchọn Reject
o Kết quả: Học viên tham gia thành công khoá học
II.3.2 Quản lý giỏ hàng
Mục tiêu: Quản lý giỏ hàng của học viên với các tác vụ như : thêm khóa học, xóa khóahọc
Đối tượng: Học viên
1 Học viên ấn vào nút “Add to cart”
2 Hệ thống sẽ kiểm tra thông tin và hiển thị thông báo để xác nhậnvới 3 trường hợp sau :
- TH1: “Please log in before adding to the cart” Nếu học viên chưa đăng nhập thì thì hệthống sẽ quay về trang đăng nhập
- TH2: “Do you want to add to cart” Nếu học viên đã đăng nhập thì sẽ hệ thống sẽ kiểm tra
và xảy ra 2 trường hợp con:
+ TH2.1: Nếu trong giỏ hàng của học viên đã có khóa họcvừa chọn rồi thì hệ thống sẽ hiển thị thông báo “This item isalready in your shopping cart”
+ TH2.2: Nếu trong giỏ hàng của học viên chưa có khóa họcvừa chọn thì hệ thống sẽ thêm khóa học vào giỏ hàng vớithông báo “Item added to the shopping cart”
3 Kết quả: Khóa học được thêm thành công vào giỏ hang
1 Học viên ấn vào nút “Remove”
2 Hệ thống sẽ kiểm tra thông tin và hiển thị thông báo xác nhận
“Are you sure you want to remove this item?”
3 Học viên chọn “OK” thì hệ thống sẽ xóa khóa học ra khỏi giỏhàng hoặc người dùng chọn “Cancel” để hủy thao tác xóa
4 Kết quả: Khóa học được xóa khỏi giỏ hàng của học viên
Trang 8II.3.3 Tìm kiếm khoá học
Mục tiêu : Tìm kiếm khoá học theo tên
Đối tượng: Học viên , khách vãng lai
Nhiệm vụ:
o Mô tả : Học viên , khách vãng lai nhập từ khóa tìm kiếm hoặc dùng filter
o Dữ liệu đầu vào :
Từ khóa tìm kiếm (Tên khóa học)Lựa chọn theo 2 filter (Levels hoặc Skills)
Hệ thống hiển thị danh sách các khóa học phù hợp với tìm kiếm của họcviên / khách vãng lai
Kết quả: Hiển thị danh sách khóa học thành côngII.3.4 Quản lý khoá học
Mục tiêu: Quản lý khóa học tiếng Việt cho người nước ngoài, bao gồm xem danh sáchkhóa học, tìm kiếm khóa học, thêm mới khóa học, cập nhật thông tin khóa học, và xóakhóa học
Tiền điều kiện: Người dùng phải là ADMIN quản lí khóa học, đã có tài khoản và đãđăng nhập vào hệ thống
Nhiệm vụ con:
o Xem Danh Sách Khóa Học:
Mô tả: Hiển thị danh sách tất cả thông tin về các khóa học, bao gồm Mãkhóa học
Dữ liệu đầu vào: Khóa học
Kết quả: Hiển thị ra giao diện theo danh sách khóa học
o Xem Chi Tiết Khóa Học:
Mô tả: Hiển thị tất cả thông tin về các khóa học, bao gồm Mã khóahọc, Ảnh minh họa, Tên khóa học,Trình độ, Kỹ năng
Dữ liệu đầu vào: Khóa họcNhiệm vụ:
1.Admin chọn icon hình mắt
2.Hệ thống lấy thông tin về khóa học và hiển thị chúng
Kết quả: Hiển thị ra giao diện toàn bộ thông tin khóa học
Trang 93 Hệ thống hiển thị danh sách khóa học phù hợp với từ khóa tìmkiếm.
Kết quả: Hiển thị ra giao diện các khóa học được tìm kiếm
o Thêm mới khoá học
Mô tả: Cho phép ADMIN thêm thông tin về khóa học mới vào hệ thống
Dữ liệu đầu vào: Mã khóa học, Ảnh minh họa, , Ảnh minh họa, Tên khóahọc,Trình độ, Kỹ năng
Nhiệm vụ:
1 Admin chọn icon dấu cộng
2 Hệ thống hiển thị giao diện thêm mới khóa học
3 Admin nhập thông tin khóa học gồm Ảnh minh họa, Tên khóa "học: ‘Master Your Pronounciation Course’,Trình độ: ‘Advanced’,
Kỹ năng: ‘Writting’, Gía tiền: ‘20.00$’ Sau đó ấn " Save."
4 Hệ thống kiểm tra thông tin nhập vào và xử lý Nếu thông tinkhông hợp lệ, hiển thị thông báo lỗi Nếu thông tin hợp lệ, hiển thịthông báo "New course added successfully."
Kết quả: Hiển thị ra giao diện thêm khóa học mới và thêm mới nếu hợplệ
o Cập Nhật Thông Tin Khóa Học:
Mô tả: Cho phép ADMIN chỉnh sửa và cập nhật thông tin về khóa học
Dữ liệu đầu vào: Mã khóa học (để xác định khóa học cần chỉnh sửa) vàcác thông tin cần cập nhật (, Ảnh minh họa, Tên khóa học,Trình độ, Kỹnăng, Gía tiền)
Nhiệm vụ:
1 Admin chọn khóa học cần chỉnh sửa và chọn icon bút
2 Admin thay đổi thông tin cần cập nhật gồm: Ảnh minh họa, Tênkhóa học: ‘Master Your Pronounciation Course’,Trình độ:
‘Advanced’, Kỹ năng: ‘Reading’, Gía tiền: ‘20.00$’
3 Admin ấn "Save" để lưu
4 Hệ thống kiểm tra thông tin nhập vào và xử lý Nếu thông tinkhông hợp lệ, hiển thị thông báo lỗi Nếu thông tin hợp lệ, cậpnhật thông tin và hiển thị thông báo "Successfully updated courseinformation."
Kết quả: Hiển thị thông báo kết quả và cập nhật lại thông tin khóa học
o Xoá khoá học:
Mô tả: Cho phép ADMIN xóa thông tin về khóa học khỏi hệ thống
Dữ liệu đầu vào: Mã khóa học (để xác định khóa học cần xóa)
Nhiệm vụ:
1 Admin chọn khóa học cần xóa và chọn icon thùng rác
2 Hệ thống hiển thị cảnh báo xóa khóa học “Are you sure you want
to delete?”và lựa chọn "Yes" hoặc "No."
3 Nếu ADMIN chọn "Yes" hệ thống kiểm tra xem khóa học có đangđược tham gia không Nếu có, hiển thị thông báo lỗi Ngược lại,
Trang 10xóa thông tin khóa học và hiển thị thông báo "Successfully deletedthe course."
Kết quả: Hiển thị thông báo kết quả và cập nhật lại danh sách khóa họcII.3.5 Quản lý thanh toán
Mục tiêu: Quản lý các giao dịch của học viên, phê duyệt và từ chối giao dịch, thống kêkhoản tiền đã được giao dịch
Tiền điều kiện: Người dùng chức năng phải là account được phân quyền admin, đăngnhập vào trang admin chọn chức năng Quản lý thanh toán (Payment Management)Nhiệm vụ con:
2 Hệ thống sẽ truy xuất database theo dữ liệu mà ADMIN nhập
3 Hệ thống trả về danh sách tìm được, nếu không tìm thấy trả danhsách rỗng
Kết quả: Hiển thị ra giao diện theo danh sách đã được trả về
o Phê duyệt giao dịch:
Mô tả: Phê duyệt các giao dịch đã được hoàn tất và kiểm chứng
Dữ liệu đầu vào: Giao dịch mà ADMIN muốn phê duyệt
Kết quả: Hiển thị thông báo kết quả và cập nhật lại danh sách giao dịchtrước đó
2 Admin nhập lý do từ chối giao dịch sau đó nhấn xác nhận
3 Hệ thống sẽ lấy thông tin của giao dịch mà ADMIN chọn tìm kiếmtrong database nếu có sẽ cập nhật lại trạng thái của giao dịch là đã
từ chối (rejected) và cập nhật trường reason trong database, nếukhông tìm thấy sẽ báo lỗi “Transaction not existed!”
Trang 11Kết quả: Hiển thị thông báo kết quả và cập nhật lại danh sách giao dịchtrước đó
o Thống kê toàn bộ giao dịch:
Mô tả: Hiển thị bảng thống kê tất cả các giao dịch và doanh thu trongtháng đó dưới dạng chart (biểu đồ)
Dữ liệu đầu vào: Tháng/Năm, Mặc định sẽ lấy thời điểm hiện tạiNhiệm vụ:
1 Khi ADMIN nhấn vào chức năng thống kê ở màn PaymentManagement (Quản lý thanh toán)
2 Hệ thống sẽ truy suất database để lấy thông tin toàn bộ các giaodịch đã thành công và hoàn tất để cộng lại
Kết quả: Hiển thị toàn bộ thông tin bao gồm tổng doanh thu và tổng cácgiao dịch dưới dạng chart (biểu đồ)
II.3.6 Quản lý người dùng
Mục tiêu: Quản lí tài khoản người dùng (bao gồm học viên và admin) như tạo ngườidùng mới, xoá người dùng, sửa thông tin, khoá/ tạm thời ngừng người dùng, xem danhsách người dùng, tìm kiếm người dùng
Đối tượng : Admin
Nhiệm vụ con:
o Tạo người dùng mới
Mô tả: Cho phép admin tạo tài khoản người dùng mới trong hệ thốngTiền điều kiện: Người dùng chức năng phải là account được phân quyềnadmin, đăng nhập vào trang admin chọn chức năng quản lý người dung
và người dùng mới chưa có tài khoản trong database
Dữ liệu đầu vào: thông tin cá nhân của người dùng mới
Nhiệm vụ:
1 Admin truy cập giao diện quản trị của trang web
2 Chọn và nhập thông tin người dùng bao gồm: “Student ID”,
“Last name”, “First name”, “Type”, “Course”, “Email”,
“Password”, “Confirm Password”
3 Admin ấn “Save” để tạo tài khoản
4 Hệ thống hiển thị thông báo “Are you sure want to createaccount”, Admin ấn “Yes” để hoàn tất quá trình tạo thông tinngười dùng
5 Hệ thống gửi thông báo cho người dùng về tài khoản để họ có thểtruy cập
Kết quả: Hiển thị thành công
o Sửa thông tin người dùng
Mô tả: cho phép admin chỉnh sửa thông tin cá nhân của người dùngTiền điều kiện: Người dùng chức năng phải là account được phân quyềnadmin, đăng nhập vào trang admin chọn chức năng quản lý người dùng
Dữ liệu đầu vào: thông tin cá nhân cuả người dùng
Trang 12Nhiệm vụ:
1 Tìm tài khoản người dùng cần chỉnh sửa
2 Mở trang chỉnh sửa thông tin qua icon và chỉnh sửa dữ liệumình muốn: “Student ID”, “Last name”, “First name”, “Type”,
“Course”, “Email”, “Password”, “Confirm Password”
3 Admin ấn “Save” các thay đổi
4 Hệ thống hiển thị thông báo “Are you sure want to changeinformation”, Admin ấn “Yes” để hoàn tất quá trình chỉnh sửathông tin người dùng
Kết quả: Sửa thông tin thành công
o Xoá người dùng
Mô tả: Cho phép admin xoá tài khoản người dùng khi cần thiếtTiền điều kiện: Người dùng chức năng phải là account được phân quyềnadmin, đăng nhập vào trang admin chọn chức năng quản lý người dùng
Dữ liệu đầu vào: thông tin người dùng
Nhiệm vụ:
1 Tìm kiếm và xác định người dùng cần xoá
2 Admin cần kiểm tra, xác nhận để đảm bảo tính chính xác tránhxoá nhầm
3 Admin chọn icon thùng rác để xóa tài khoản người dùng khỏi
cơ sở dữ liệu
4 Hệ thống hiển thị thông báo “Are you sure want to deleteaccount”, Admin ấn “Yes” để hoàn tất quá trình xoá tài khoảnngười dùng
Kết quả: Xoá người dùng thành công
o Khoá/Tạm ngừng người dung
Mô tả: Admin có thể tạm ngừng hoặc khoá tài khoản của người dùngnếu cần thiết, để ngăn họ truy cập hệ thống
Tiền điều kiện: Người dùng chức năng phải là account được phân quyềnadmin, đăng nhập vào trang admin chọn chức năng quản lý người dung
Dữ liệu đầu vào: thông tin người dùng
Nhiệm vụ:
1 Tìm kiếm và xác định người dùng cần khoá hoặc tạm ngừng
2 Admin chọn icon chìa khóa để khóa/ tạm khóa tài khoảnngười dùng
3 Hệ thống hiển thị thông báo “Are you sure want tolock/suspension account?”, Admin ấn “Yes” để hoàn tất quá trìnhkhoá hoặc tạm ngừng tài khoản người dùng
Kết quả: khoá hoặc tạm ngừng tài khoản thành công
o Xem danh sách người dung
Mô tả: hiển thị danh sách tất cả người dùng trong hệ thống với thông tin
cơ bản để quản trị viên có thể quản lý và kiểm tra thông tin người dùng
Dữ liệu đầu vào: thông tin người dùng
Trang 13Kết quả: Xem thông tin người dùng thành công
o Tìm kiếm người dung
Mô tả: Cho phép admin tìm kiếm người dùng dựa trên các tiêu chí cụthể, chẳng hạn như tên, email, hoặc quyền hạn
Dữ liệu đầu vào: thông tin người dungNhiệm vụ:
1 Admin truy cập tính năng tìm kiếm người dung
2 Admin nhập các tiêu chí tìm kiếm cụ thể, chẳng hạn như “Fullname”, “Email”, “User name”,
3 Nhấn enter hoặc icon kính lúp để hệ thống hiển thị kết quảtìm kiếm dựa trên tiêu chí đã nhập
4 Dựa trên kết quả tìm kiếm quản trị viên có thể quản lý tài khoản
và quyền hạn của người dùngKết quả: Tìm kiếm thành công
III.PHÁC HỌA THIẾT KẾ
3.1.Thiết kế tổng quan
Dựa trên việc phân tích người sử dụng và phân tích nhiệm vụ của hệ thống cần thiết kế giaodiện, nhóm xác định được những chức năng quan trọng nhất để tiến hành phác họa thiết kế:Chức năng “Quản lý khoá học”: Chức năng cho phép quản lý trung tâm giáo dục Levion cótài khoản admin và đăng nhập thành công vào hệ thống và thực hiện các tác vụ: Xem thôngtin chi tiết khoá học, Thêm khoá học, sửa thông tin khoá học, xoá khoá học
Chức năng “Quản lý giỏ hàng”: Chức năng cho phép học viên có đăng ký tài khoản và đăngnhập thành công vào hệ thống, học viên có thể thực hiện các tác vụ: Thêm khoá học vào giỏhàng, xoá khoá học khỏi giỏ hang
Chức năng “Mua khoá học”: Chức năng cho phép học viên có đăng ký tài khoản và đăngnhập thành công vào hệ thống, học viên có thể thực hiện thanh toán khoá học
3.2.Thiết kế kịch bản mẫu
(Thiết kế kịch bản mẫu cho các chức năng: Quản lý khoá học, quản lý giỏ hàng, mua khoá học)
Trang 143.2.1.Kịch bản mẫu cho người sử dụng là quản lý trung tâm giáo dục Levion
Với người sử dụng là học viên mà muốn mua khoá học, trước hết học viên cần phải đăng kýtài khoản và đăng nhập vào hệ thống Hệ thống có chức năng quên mật khẩu để hỗ trợ học viêntrong trường hợp quên mật khẩu tà khoản
c
Hình 3.2.1: Giao diện đăng ký tài khoản
Hình 3.2.2: Giao diện đăng nhập tài khoản
Trang 15Sau khi đănh nhập thành công, học viên có thể sử dụng các chức năng của hệ thống3.2.1.1.Chức năng “Quản lý khóa học”
Trang quản lý khóa học với chức năng hiển thị danh sách các khóa học khi admin truy cậpvào trang này Khi truy cập vào trang quản lý khóa học, admin có thể theo dõi danh sách khóahọc trên lưới dữ liệu, lưới dữ liệu mặc định sẽ truy vấn tất cả thông tin khóa học từ cơ sở dữ liệu
và hiển thị lên màn hình Admin có thể thực hiện tìm kiếm theo từ khóa là mã khóa họ hoặc tênkhóa học, dữ liệu trả về cũng được đưa về dưới dạng lưới dữ liệu Ngoài ra, admin có thể sửdụng các tác vụ: Thêm mới, xóa khóa học, sửa khóa học và xem chi tiết thông tin khóa học
Cửa sổ thêm mới khóa học: Cửa sổ thêm mới khóa học xuất hiện dưới dạng thứ cấp admin ấnvào icon Admin có thể nhập thông tin khóa học cần thêm mới vào hộp thoại này sau đó ấn
“Save” để thêm mới khóa học
Trang 16Cửa sổ xem chi tiết khóa học: Cửa sổ xem chi tiết khóa học xuất hiện dưới dạng thứ cấpadmin ấn vào icon Admin có thể xem lại thông tin khóa học.
Trang 17Cửa sổ sửa khóa học: Cửa sổ sửa khóa học xuất hiện dưới dạng thứ cấp admin ấn vào icon Admin có thể nhập thông tin khóa học cần sửa vào hộp thoại này sau đó ấn “Save” để lưulại khóa học.
Cửa sổ xóa khóa học: Cửa sổ xóa học xuất hiện dưới dạng thứ cấp admin ấn vào icon Admin có thể xóa thông tin khóa học muốn xóa sau khi ấn “YES”
Trang 183.2.2.Kịch bản mẫu cho người sử dụng là user
3.2.2.1.Chức năng “Mua khóa học”
Sau khi đăng nhập, học viên ấn chọn khoá học ở trang Course Sau khi chọn khoá học, xuấthiện giao diện “About this Course”, tại đây học viên ấn “Buy now” để tiến hành mua khoá học
Hình 3.2.3: Giao diện “About this Course”
Hệ thống chuyển sang giao diện thanh toán, tại đây giao diện hiển thị các khoá học mà họcviên muốn mua để thanh toán Nếu học viên có mã khuyến mãi thì sẽ điền vào CounponDiscount và ấn “Apply” để áp dụng mã khuyến mãi Hệ thống tự động tính giá tiền và hiện lêntrên giao diện Học viên ấn “Check out” để thanh toán
Hình 3.2.4: Giao diện thanh toán
Trang 19Hình 3.2.4: Giao diện thông báo chờ xác nhận từ admin
3.2.2.2.Chức năng “Quản lý giỏ hàng”
- Với chức năng này, học viên có thể Thêm khóa học vào giỏ hàng và Xóa khóa học ra khỏigiỏ hàng
Chức năng “Thêm khóa học vào giỏ hàng”
Sau khi đăng nhập, học viên ấn chọn khóa học ở trang Course Ở đây, mỗi khóa học đều cóchức năng thêm khóa học vào giỏ hàng qua nút “Add to cart”, khi ấn nút này, hệ thống sẽ hiệnthông báo để xác nhận, xảy ra 2 trường hợp:
-TH1: Khi học viên đã có khóa học định thêm vào giỏ hàng trước đó, thì hệ thống sẽ thông báo,khóa học này đã có trong giỏ hàng “This item is already in your shopping cart” khi đó học viên
sẽ không thêm được nữa
-TH2: Khi học viên thêm 1 khóa học mới, chưa xuất hiện trong giỏ hàng, thì hệ thống hiển thịthông báo xác nhận, hỏi bạn có muốn thêm khóa học này vào giỏ hàng không, nếu học viên xácnhận là có, thì khóa học đó sẽ được hệ thống thêm tự động vào giỏ hàng “Item added to theshopping cart”
Hình 3.2.3: Giao diện Course
