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 nước ngoài

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

TRƯỜ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

nước ngoài”

NHÓM SINH VIÊN THỰC HIỆN: NHÓM 5 (62TH3)

Ngô Thị Hồng Nhung – 2051063770Đỗ Ngọc Minh - 2051060609Hà Thanh Huyền - 2051063560Nguyễn Khánh Linh - 2051060584

Đinh Quỳnh Giao - 2051063881

Giảng viên phụ trách môn học: Nguyễn Thị Thu Hương

Hà Nội – 2023

Mụ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

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

I. ĐỀ XUẤT ĐỀ BÀII.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.

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

Đỗ Ngọc Minh

- Phân tích nhiệm vụ: Quản lý thanh toán dành choadmin

- Xây dựng storyboard- Code

Đinh Quỳnh Giao

- 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- Xây dựng prototype

II.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 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ỉ emailQuốc gia và quốc tịcho 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:

Bạ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ínhAdmin (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ý)

o Kinh nghiệm: 50%o Thành thạo: 10%Học viên và guest

o Học việc: 85% (Nhóm này có ít tri thức về môi trường UI, biết sử dụng cácthiết bị vào ra để tương tác với máy tính, điện thoại)

o Kinh nghiệm: 10%o Thành thạo : 5%

2.2.4.2 Kỹ năng trong lĩnh vực ứng dụngAdmin

o Thành thạo: 70% (Nhóm này có kiến thức đáng kể về nghiệp vụ, biết khá tốt vềcách thực hiện nhiệm vụ bằng phần mềm)

o Kinh nghiệm: 20%o Học việc: 10%Học viên và guest

o Học việc : 50% (Nhóm này có vài tri thức về phần mềm, vẫn còn gây ra lỗi khithực hiện nhiệm vụ trên phần mềm)

o Kinh nghiệm : 30%o Thành thạo: 20%

II.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%II.2.5 Kết luận

Qua phân tích những yếu tố liên quan đến người sử dụng, đưa ra kết luận về giao diệnnhư sau:

o Giao diện cần được thiết kế cho người có hiểu biết sử dụng máy tính ở mứctrung bình.

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àngo Tìm kiếm khoá họco Quản lý khoá họco Quản lý người dùngo Quản lý thanh toánII.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ọc4 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án9 Hệ thống hiển thị mã QR

10 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ận14 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 Nhiệm vụ con:

o Thêm khóa học

Mô tả: Cho phép học viên thêm khóa học vào giỏ hang

Tiền điều kiện : Học viên đã có tài khoản và đăng nhập thành côngDữ liệu đầu vào: Tên khóa học

Nhiệm vụ:

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 travà 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ỏ hango Xoá khoá học

Mô tả: Cho phép học viên xóa khóa học khỏi giỏ hàng

Tiền điều kiện: Học viên đã có tài khoản và đăng nhập thành côngDữ liệu đầu vào : Tên khóa học

Nhiệm vụ:

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

II.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 laiNhiệ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 filtero 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ọcNhiệm vụ:

1 Admin truy cập vào trang cá nhân chọn Managen và chọn Coursemanagement

2 Hệ thống lấy danh sách thông tin về các khóa học và hiển thịchúng.

Kết quả: Hiển thị ra giao diện theo danh sách khóa họco 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ọco Tìm kiếm khoá học

Mô tả: Cho phép tìm kiếm khóa học dựa trên từ khóa (Mã khóa học, Tênkhóa học).

Dữ liệu đầu vào: Từ khóa tìm kiếm (Mã khóa học, Tên khóa học).Nhiệm vụ:

1 Admin nhập từ khóa tìm kiếm “Master Your PronounciationCourse”.

2 Hệ thống tra cứu thông tin về khóa học dựa trên từ khóa.

3 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ếmo 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 tin

khô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ọco 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 wantto 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,

xó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:o Tìm kiếm giao dịch:

Mô tả: Tìm kiếm các giao dịch theo các tiêu chí bao gồm: id giao dịch,trạng thái giao dịch, thời gian bắt đầu và kết thúc, giới hạn số tiền.

Dữ liệu đầu vào: ID giao dịch, trạng thái giao dịch, thời gian bắt đầu vàkết thúc, giới hạn số tiền

1 Sau khi ADMIN check giao dịch đã hoàn tất thì sẽ chọn chức năngphê duyệt (approve) được hiển thi trên giao diện.

2 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à đãphê duyệt (approved), nếu không tìm thấy sẽ báo lỗi “Transactionnot existed!”

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 đó

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 đó

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 : AdminNhiệ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 dungvà 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ớiNhiệ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ôngo 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

Nhiệ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ôngo 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ùngNhiệ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ỏicơ 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ôngo 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ùngNhiệm vụ:

1 Tìm kiếm và xác định người dùng cần khoá hoặc tạm ngừng2 Admin chọn icon chìa khóa để khóa/ tạm khóa tài khoản

ngườ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ôngo 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 tincơ 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

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ảnvà quyền hạn của người dùng

Kế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)

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

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.

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

Sau 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ệuvà 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.

Cử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.

Cử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”.

3.2.2.Kịch bản mẫu cho người sử dụng là user3.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

Hì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ênsẽ 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