CHƯƠNG 3: PHÂN TÍCH VÀ MƠI TRƯỜNG HĨA U CẦU
38 Hình 3.3: Sequence Diagram làm exam
3.5.2. Học theo lộ trình
Luồng xử lý chung 1. Người học truy cập trang chủ
2. Người học lựa chọn bài học bằng cách click vào nút kịch bản
3. Hệ thống hiển thị trang học 4. Người học tiến hành làm bài 5. Người học hoàn thành bài học.
6. Hệ thống điều hướng người học đến trang kết quả.
Luồng xử lý thành cơng 1. Người học hồn thành bài học. 2. Hệ thống hiển thị thông báo.
Luồng xử lý thất bại 1. Người học click thoát khi ở trang học. 2. Hệ thống xác nhận yêu cầu.
3. Điều hướng người học về trang chủ. Bảng 3.25: Luồng xử lý sequence diagram học theo lộ trình
39 Hình 3.4: Sequence Diagram học theo lộ trình
3.5.3. Đăng nhập với social account
Luồng xử lý chung 1. Khách truy cập trang chủ và click vào nút đăng nhập.
2. Khách lựa chọn đăng nhập bằng tài khoản social. 3. Hệ thống hiển thị popup lựa chọn tài khoản cho khách
4. Khách lựa chọn tài khoản để đăng nhập.
5. Client gửi access token đến cho hệ thống để kiểm tra thông tin.
6. Hệ thống lưu thông tin xuống cơ sở dữ liệu và điều hướng về trang chủ.
Luồng xử lý thành công 1. Khách lựa chọn tài khoản.
2. Hệ thống đăng nhập cho khách và điều hướng về trang chủ.
Luồng xử lý thất bại 1. Khách đóng popup lựa chọn tài khoản. 2. Hệ thống hiển thị trang đăng nhập.
Bảng 3.26: Luồng xử lý sequence diagram đăng nhập với social account
CHƯƠNG 3: PHÂN TÍCH VÀ MƠI TRƯỜNG HÓA YÊU CẦU
40
3.5.4. Gửi tin nhắn
Luồng xử lý chung 1. Người học truy cập trang nhắn tin và lựa chọn cuộc hội thoại.
2. Người học điền tin nhắn và nhấn phím enter hoặc click nút gửi.
3. Hệ thống lưu thông tin xuống cơ sở dữ liệu. 4. Hệ thống gửi tin nhắn đến tồn bộ client có mặt trong cuộc hội thoại.
Luồng xử lý thành công 1. Người học điền tin nhắn và nhấn phím enter hoặc click nút gửi.
Luồng xử lý thất bại 1. Người học xóa tin nhắn dự định gửi. Bảng 3.27: Luồng xử lý sequence diagram gửi tin nhắn
Hình 3.6: Sequence Diagram gửi tin nhắn
3.5.5. Thêm bài viết
Luồng xử lý chung 1. Người học truy cập trang thảo luận và lựa chọn chia sẻ.
2. Người học điền nội dung bài viết và click nút chia sẻ.
3. Hệ thống lưu thông tin xuống cơ sở dữ liệu, bài viết ở trạng thái chờ kiểm duyệt, chưa cơng khai trên tồn hệ thống.
4. Nhân viên quản lý tiến hành kiểm duyệt cho bài viết.
5. Hệ thống lưu thông tin và thông báo cho người học.
Luồng xử lý thành công 1. Người học điền nội dung bài viết và nhấn chia sẻ.
41 Luồng xử lý thất bại 1. Người học xóa tồn bộ nội dung bài viết dự
định chia sẻ.
Bảng 3.28: Luồng xử lý sequence diagram thêm bài viết
Hình 3.7: Sequence Diagram thêm bài viết
3.5.6. Làm quiz
Luồng xử lý chung 1. Người học truy cập trang danh sách quiz và lựa chọn quiz để làm.
2. Hệ thống hiển thị trang làm bài.
3. Người học chọn đáp án và hệ thống tiến hành kiểm tra kết quả sau đó thơng báo cho người học. Nếu đáp án sai tiến hành đưa câu hỏi vào cuối hàng đợi để thực hiện lại.
4. Hệ thống kiểm tra hồn thành và thơng báo cho người học.
5. Hệ thống lưu thông tin và điều hướng về trang danh sách quiz.
Luồng xử lý thành công 1. Người học hoàn thành đúng toàn bộ câu hỏi. Luồng xử lý thất bại 1. Người học click thoát ở trang làm bài.
CHƯƠNG 3: PHÂN TÍCH VÀ MƠI TRƯỜNG HĨA U CẦU
42 Hình 3.8: Sequence Diagram làm quiz
3.5.7. Theo dõi
Luồng xử lý chung 1. Người học truy cập trang hồ sơ người học khác.
2. Hệ thống hiển thị trang hồ sơ.
3. Người học click nút theo dõi. Hệ thống lưu thông tin.
4. Người học được theo dõi sau khi thực hiện hành động có trong danh sách, hệ thống tiến hành gửi thông báo về do những người học đã theo dõi.
43 Luồng xử lý thành công 1. Người học click nút theo dõi.
Luồng xử lý thất bại 1. Người học click nút hủy theo dõi. Bảng 3.30: Luồng xử lý sequence diagram theo dõi
Hình 3.9: Sequence Diagram theo dõi
3.6. Sơ đồ lớp
CHƯƠNG 3: PHÂN TÍCH VÀ MƠI TRƯỜNG HĨA U CẦU
44 Hình 3.11: Sơ lược class diagram
45 Hình 3.12: Sơ lược class diagram
CHƯƠNG 4: THIẾT KẾ WEBSITE
46
CHƯƠNG 4: THIẾT KẾ WEBSITE 4.1. Thiết kế cơ sở dữ liệu
Hình 4.1: Sơ đồ ERD
Tên bảng Mô tả
Account Bảng thơng tin về tài khoản của tồn bộ người dùng trên hệ thống. Được phân chia quyền theo bảng Role.
Role Bảng thông tin về phân quyền tài khoản. Post Bảng thông tin bài viết thảo luận.
47 PostImage Bảng thơng tin về hình ảnh là các hình ảnh mà người học
đăng tải lên các bài viết.
Comment Bảng thơng tin về bình luận trong bài viết Word Bảng thông tin về từ vựng.
Category Bảng thơng tin về phân nhóm từ vựng. Memory Bảng thơng tin về thẻ ghi nhớ cho từ vựng.
Quiz Bảng thông tin về các bài quiz.
QuizHistory Bảng thông tin về lịch sử làm bài quiz. Exam Bảng thông tin về các bài exam.
ExamHistory Bảng thông tin về lịch sử làm bài exam. Route Bảng thơng tin về các lộ trình học. Section Bảng thông tin về các bài học.
Script Bảng thông tin về các kịch bản học. SectionProgress Bảng thông tin về tiến độ học.
ProgressDetail Bảng thông tin chi tiết về tiến độ học. Question Bảng thông tin về các câu hỏi.
Answer Bảng thông tin về các đáp án của câu hỏi. Notification Bảng thông tin về các thông báo.
Message Bảng thông tin về các tin nhắn trong boxchat. BoxChat Bảng thông tin về các boxchat.
BoxChatMember Bảng thông tin về thành viên trong boxchat. Bảng 4.1: Mô tả khái quát về các class
4.1.1. Account
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 Id int Khóa chính
CHƯƠNG 4: THIẾT KẾ WEBSITE
48
3 Username string Tên tài khoản
4 Email string Email
5 Phone string Số điện thoại
6 DateOfBirth datetime Ngày sinh
7 Address string Địa chỉ
8 Avatar string Ảnh đại diện
Bảng 4.2: Account
4.1.2. Exam
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 Title string Tên bài exam Không
3 Detail string Mô tả bài exam Không
4 Duration int Thời gian quy
định làm bài
Không
5 TotalScore int Tổng số điểm Không
6 Difficult string Độ khó Khơng
8 AccessCount int Số lượng tham gia Không
Bảng 4.3: Exam
4.1.3. Quiz
49
1 Id guid Khóa chính Khơng
3 QuizPhoto string Hình ảnh bài quiz Khơng
4 QuizName string Tên bài quiz Khơng
5 Difficult string Độ khó bài quiz Không
Bảng 4.4: Quiz 4.1.4. Question Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 Audio string File audio Có
3 Image string File hình ảnh Có
4 PreQuestion string Câu hỏi Có
5 Content string Nội dung Có
6 Explaination string Giải thích Có
7 Type string Loại câu hỏi Không
8 Score int Số điểm Có
9 Difficult string Độ khó Khơng
10 Toeic string Câu hỏi thuộc
phần toeic
Có
11 Duration datetime Thời gian quy định làm câu hỏi
Có Bảng 4.5: Questions
CHƯƠNG 4: THIẾT KẾ WEBSITE
50
4.1.5. Post
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Không
2 CreatedDate datetime Ngày đăng Không
3 CreatedBy string Người đăng Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 AccountId int Id của người tạo Không
7 Title string Tiêu đề Không
8 Content string Nội dung bài
viết
Không Bảng 4.6: Post
4.1.6. Comment
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 ReplyId guid Id phản hồi Có
3 PostId guid Id bài viết Không
4 AccountId int Id người học
bình luận
Khơng
5 [Content] string Nội dung Không
6 Timestamp datetime Ngày bình luận Khơng
51
4.1.7. Word
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Image string Hình ảnh từ vựng Có
7 Eng string Tiếng anh Không
8 Spelling string Phát âm Không
9 Audio string File nghe từ vựng đó Không
10 Vie string Nghĩa tiếng việt Không
11 Class String Từ loại Không
12 Type String Kiểu tạo Không
Bảng 4.8: Word
4.1.8. QuizHistory
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 AccountId string Id của người
học
Không
CHƯƠNG 4: THIẾT KẾ WEBSITE
52 4 StartTimestamp datetime Thời gian bắt
đầu
Không
5 EndTimestamp datetime Thời gian kết thúc
Có
6 IsDone bit Kiểm tra đã
hồn thành chưa
Khơng
7 Spent int Thời gian làm
bài
Không Bảng 4.9: Histories
4.1.9. ExamHistory
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id string Khóa chính Khơng
2 AccountId string Id của người
học
Không
3 ExamId string Id của bài quiz Không
4 Timestamp_start datetime Thời gian bắt đầu
Không 5 Timestamp_end datetime Thời gian kết
thúc
Không 6 Timestamp_paus
e
datetime Thời gian dừng Có 7 CurrentQuestion int Câu hỏi hiện tại Không
8 TotalTime int Tổng thời gian Không
9 Score int Số điểm Không
53
4.1.10. Route
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Image string Hình ảnh Có
7 Name string Tên lộ trình Khơng
8 Description string Mô tả Không
9 IsSequentially bit Các bài học có
u cầu tính t̀n tự
Khơng
Bảng 4.11: Route
4.1.11. Section
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
CHƯƠNG 4: THIẾT KẾ WEBSITE
54
7 SectionName string Tên bài học Không
8 Description string Mô tả Khơng
9 RequireLogin bit Có u cầu đăng
nhập
Không
10 RouteId guid Khóa ngoại – id
lộ trình học
Có Bảng 4.12: Section
4.1.12. Script
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Không
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Theory string Lý thuyết Có
7 Type string Loại kịch bản Không
8 SectionId guid Khóa ngoại – id
bài học
Khơng Bảng 4.13: Script
4.1.1.13. Answer
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
55
2 QuestionId guid Id câu hỏi Không
3 [Content] string Nội dung Không
4 IsQuestionAnswer bit Kiểm tra có phải là câu trả lời của câu hỏi không
Không
Bảng 4.14: Answers
4.1.14. PostImage
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 PostId guid Id bài viết Không
3 ImageUrl string File ảnh Không
4 FileName string Tên file Không
Bảng 4.15: Postimages
4.1.15. Memory
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Username người
tạo
Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Username người
chỉnh sửa
Có
CHƯƠNG 4: THIẾT KẾ WEBSITE
56
7 Title string Tiêu đề Có
8 MemImg string Hình ảnh Khơng
9 WordId guid Id từ vựng Không
Bảng 4.16: Memories
4.1.16. Notification
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreateDate datetime Ngày tạo Không
3 CreateBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 [Content] string Nội dung Không
7 Url string Đường dẫn Có
8 Type string Loại thông báo Không
9 FromId int Khóa ngoại – id
người gửi
Có Bảng 4.17: Notification
4.1.17. Message
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id string Khóa chính Không
57
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 [Content] string Nội dung Không
7 IsEdited bit Kiểm tra có
chỉnh sửa khơng
Khơng
8 AcccountId int Id tài khoản Không
9 BoxChatId string Id hộp tin nhắn Không
Bảng 4.18: Message
4.1.18. BoxChat
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id string Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Title string Tiêu đề Không
7 AccountId int Id tài khoản Không
8 Description string Mô tả Không
CHƯƠNG 4: THIẾT KẾ WEBSITE
58
4.2. Thiết kế giao diện
4.2.1. Screen Flow của ứng dụng web phía người học
Hình 4.2: Screen Flow của ứng dụng web phía người học
No Screen Name Description
SCL001 List Section Screen Màn hình danh sách các bài học
SCL002 List FlashCard Screen Màn hình danh sách các chủ đề từ vựng SCL003 FlashCard Screen Màn hình học từ vựng
SCL004 List Exam Screen Màn hình danh sách các bài exam SCL005 Do Exam Screen Màn hình làm bài exam
SCL006 Learn Section Screen Màn hình học SCL007 Vocabulary Learning
Progress Screen Màn hình xem tiến độ học từ vựng SCL008 Forum Screen Màn hình thảo luận
SCL009 Detail Discussion Screen Màn hình xem chi tiết một bài viết SCL010 Chat Screen Màn hình nhắn tin
Bảng 4.20: Screen Flow của ứng dụng web phía người học
59 Hình 4.3: SCL001. List Section Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Chủ đề học True Button Khi click,
chuyển sang màn hình chủ đề học SCL002
2 Từ vựng True Button Khi click,
chuyển sang màn hình SCL003
3 Kiểm tra True Button Khi click,
chuyển sang màn hình SCL005 4 Tiến độ học
từ vựng
True Button Khi click,
chuyển sang màn hình SCL006
CHƯƠNG 4: THIẾT KẾ WEBSITE
60
5 Tin nhắn True Button Khi click,
chuyển sang màn hình SCL011
6 Từ điển True Button Khi click,
chuyển sang màn hình SCL
7 Thảo luận True Button Khi click,
chuyển sang màn hình SCL009
8 Lộ trình True Button Khi click,
mở popup lộ trình học.
9 Thơng báo True Button Khi click
mở popup thông báo.
10 Tài khoản True Button Khi click
mở popup tài khoản.
11 Ngữ pháp True Button Khi click
chuyển sang màn hình SCL
12 Từ vựng True Button Khi click
chuyển sang màn hình SCL
13 Luyện nghe True Button Khi click
chuyển sang màn hình SCL
61
14 Luyện đọc True Button Khi click
chuyển sang màn hình SCL
15 Luyện viết True Button Khi click
chuyển sang màn hình SCL
16 Mini test True Button Khi click
chuyển sang màn hình SCL 17 Xem những
bài học khác
True Button Khi click
hiển thị popup lộ trình học.
18 Chatbot True Button Khi click
hiển thị popup chatbot. Bảng 4.21: SCL001. List Section Screen
4.2.1.2. SCL002. List FlashCard Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE
62
STT Name Required
(Input… Validation)
Format Reference Not
1 Tag True Button Bộ lọc theo
tag, khi click tiến hành lọc lại dữ liệu trên trang
2 Tìm kiếm True Input Khung nhập
nội dung tìm kiếm
3 Tìm kiếm True Button Khi click
tiến hành tìm kiếm dữ liệu theo nội dung nhập
4 Nhóm từ True Link Khi click
chuyển sang màn hình SCL004 5 Hình ảnh
của nhóm
True Image Hình ảnh đại
diện cho nhóm từ vựng
6 Tên nhóm True Text Tên của
nhóm từ vựng 7 Số từ vựng True Text Đếm số lượng từ vựng có trong nhóm
8 Mơ tả True Text Mơ tả về
nhóm từ vựng
63 9 Hiển thị
thêm
True Button Khi click
tiến hành tải thêm dữ liệu Bảng 4.22: SCA002. List FlashCard Screen
4.2.1.3. SCL003. FlashCard Screen
Hình 4.5: SCL003. FlashCard Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Trở về True Link Khi click
chuyển sang màn hình SCL003
2 Tiến độ True Progress Bar Thanh tiến
độ thể hiện vị trí của từ