Xây dựng website học tiếng anh bằng flashcard

Bảng quy định nghiệp vụ của User 1 QD_DsCard Xem danh sách card Người dùng nhấn vào liên kết “My Cards” trên thanh điều hướng sẽ được chuyển đến trang danh sách card... 2 QD_ThemCard Th

Trang 1

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ PHẦN MỀM

XÂY DỰNG WEBSITE HỌC TIẾNG

ANH BẰNG FLASHCARD

GVHD: THS NGUYỄN TRẦN THI VĂN SVTH: NGUYỄN HẢI LÂM

MSSV: 16110370 SVTH: NGUYỄN DUY BẢO MSSV: 16110281

SKL 0 0 7 1 7 0

Trang 2

ĐỀ TÀI

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

Trang 3

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN THS NGUYỄN TRẦN THI VĂN

Trang 4

ĐH SƯ PHẠM KỸ THUẬT TP.HCM

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Nguyễn Hải Lâm MSSV 1: 16110370

Họ và tên Sinh viên 2: Nguyễn Duy Bảo MSSV 2: 16110281

Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website học tiếng Anh bằng Flashcard

Họ và tên Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn

Thành phố Hồ Chí Minh, ngày tháng năm 2020

Giáo viên hướng dẫn

(Ký và ghi rõ họ tên)

Trang 5

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Ngành: Công nghệ thông tin

Họ và tên Giáo viên phản biện: ………

Giáo viên phản biện

Trang 6

LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn các thầy cô khoa CNTT trường Đại học Sư phạm Kỹ thuật TP.HCM, đặc biệt là thầy Nguyễn Trần Thi Văn đã giúp đỡ và hướng dẫn chúng em tận tình trong suốt thời gian thực hiện khóa luận tốt nghiệp cũng như viết bài báo cáo, tạo cho chúng em những tiền đề, những kiến thức để tiếp cận, phân tích giải quyết vấn đề Nhờ đó mà chúng em hoàn thành khóa luận tốt nghiệp của mình được tốt hơn

Những kiến thức mà chúng em được học hỏi, tích luỹ chính là hành trang ban đầu cho quá trình làm việc của chúng em sau này Chúng em xin gửi tới các thầy cô lời chúc thành công trên con đường sự nghiệp của mình

Chúng em xin chân thành cảm ơn!

Thành phố Hồ Chí Minh, tháng 8 năm 2020

Nguyễn Hải Lâm Nguyễn Duy Bảo

Trang 7

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Chuyên ngành: Công nghệ phần mềm

Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn

Nội dung thực hiện:

Lý thuyết:

- Tìm hiểu thư viện ReactJS và NET Core

- Khảo sát hiện trạng từ các trang web khác

Thực hành:

Sử dụng ReactJS và NET Core để xây dựng website học tiếng Anh bằng flashcard với các tính năng sau đây:

- Quản lý deck, card

- Tải deck, card có sẵn

- Học tiếng anh với card

Thời gian thực hiện: 15 tuần (Bắt đầu từ 30/03/2020 đến 12/07/2020)

Đề cương khóa luận tốt nghiệp:

1 PHẦN MỞ ĐẦU

1.1 Tính cấp thiết của đề tài

1.2 Mục đích của đề tài

1.3 Đối tượng và phạm vi nghiên cứu

1.4 Kết quả dự kiến đạt được

1.5 Phương pháp nghiên cứu

1.6 Bố cục báo cáo

2 PHẦN NỘI DUNG

2.1 Chương 1: Cơ sở lý thuyết

2.1.1 .NET Core và ASP.NET Core

Trang 8

2.2 Chương 2: Khảo sát hiện trạng và xác định yêu cầu

2.4.1 Thiết kế cơ sở dữ liệu

2.4.2 Thiết kế giao diện

3.2 Ưu, nhược điểm của đề tài

3.3 Hướng phát triển của đề tài

4 Tài liệu tham khảo

Trang 9

Người viết đề cương

Trang 10

MỤC LỤC

PHẦN MỞ ĐẦU 1

1 Tính cấp thiết của đề tài 1

2 Mục đích của đề tài 1

3 Đối tượng và phạm vi nghiên cứu 1

4 Kết quả dự kiến đạt được 1

5 Phương pháp nghiên cứu 2

6 Bố cục báo cáo 2

PHẦN NỘI DUNG 3

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3

1.1 .NET CORE VÀ ASP.NET CORE 3

1.2 REACTJS 4

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 5

2.1 KHẢO SÁT HIỆN TRẠNG 5

2.1.1 Tinycards (https://tinycards.duolingo.com/) 5

2.1.2 Cram (https://www.cram.com/) 6

2.1.3 BrainScape (https://www.brainscape.com) 7

2.1.4 ProProfs Flashcard (https://www.proprofs.com/flashcards/) 8

2.1.5 StudyBlue (https://www.studyblue.com/) 9

2.2 XÁC ĐỊNH YÊU CẦU 10

CHƯƠNG 3: MÔ HÌNH HOÁ YÊU CẦU 11

3.1 LƯỢC ĐỒ USECASE 11

3.2 CÁC ACTOR 12

3.2.1 Guest 12

3.2.2 User 14

3.2.3 Admin 30

CHƯƠNG 4: THIẾT KẾ HỆ THỐNG 38

4.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 38

4.1.1 Lược đồ cơ sở dữ liệu 38

4.1.2 Đặc tả cơ sở dữ liệu 39

4.2 THIẾT KẾ GIAO DIỆN 45

4.2.1 Giao diện Guest 45

Trang 11

4.2.2 Giao diện User 47

4.2.3 Giao diện Admin 72

4.3 THIẾT KẾ XỬ LÝ 79

4.3.1 Chức năng tạo deck 79

4.3.2 Chức năng sửa deck 80

4.3.3 Chức năng xoá deck 81

4.3.4 Chức năng tạo card – tạo front 82

4.3.5 Chức năng sửa card – sửa front 83

4.3.6 Chức năng sửa card – tạo back 84

4.3.7 Chức năng sửa card – sửa back 85

4.3.8 Chức năng sửa card – sửa ảnh của back 86

4.3.9 Chức năng sửa card – xoá ảnh của back 87

4.3.10 Chức năng tìm kiếm card 87

4.3.11 Chức năng lọc card 88

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 89

5.1 CÁC LỚP MÔ HÌNH 89

5.1.1 Sơ đồ lớp 89

5.1.2 Đặc tả các lớp mô hình 90

5.2 MÔI TRƯỜNG PHÁT TRIỂN 97

5.2.1 Visual Studio Code 97

5.2.2 SQL Server 97

5.2.3 Azure Data Studio 98

5.3 KIỂM THỬ 99

PHẦN KẾT LUẬN 101

1 Kết quả đạt được 101

2 Ưu, nhược điểm của đề tài 101

3 Hướng phát triển của đề tài 102

TÀI LIỆU THAM KHẢO 103

Trang 12

DANH MỤC HÌNH ẢNH

Hình 2.1 Giao diện trang chủ Tinycards 5

Hình 2.2 Giao diện trang chủ Cram 6

Hình 2.3 Giao diện trang chủ BrainScape 7

Hình 2.4 Giao diện trang chủ ProProfs Flashcard 8

Hình 2.5 Giao diện trang chủ StudyBlue 9

Hình 3.1 Lược đồ usecase 11

Hình 3.2 Biểu mẫu đăng nhập 13

Hình 3.3 Biểu mẫu đăng ký 13

Hình 3.4 Biểu mẫu danh sách card 23

Hình 3.5 Biểu mẫu thêm card 23

Hình 3.6 Biểu mẫu sửa card 24

Hình 3.7 Biểu mẫu trang chủ 24

Hình 3.8 Biểu mẫu chi tiết deck 25

Hình 3.9 Biểu mẫu thêm deck 25

Hình 3.10 Biểu mẫu sửa deck 26

Hình 3.11 Biểu mẫu thêm card vào deck 26

Hình 3.12 Biểu mẫu luyện tập 27

Hình 3.13 Biểu mẫu luyện tập bằng trò chơi ghép card 27

Hình 3.14 Biểu mẫu chi tiết thống kê 28

Hình 3.15 Biểu mẫu danh sách public card 28

Hình 3.16 Biểu mẫu danh sách public deck 29

Hình 3.17 Biểu mẫu chi tiết public deck 29

Hình 3.18 Biểu mẫu danh sách user 34

Hình 3.19 Biểu mẫu danh sách deck của user 35

Hình 3.20 Biểu mẫu chi tiết deck của user 35

Hình 3.21 Biểu mẫu danh sách card của user 36

Hình 3.22 Biểu mẫu danh sách deck được yêu cầu công khai 36

Hình 3.23 Biểu mẫu chi tiết deck được yêu cầu công khai 37

Hình 3.24 Biểu mẫu danh sách card được đề xuất 37

Hình 4.1 Lược đồ cơ sở dữ liệu 38

Hình 4.2 Giao diện đăng nhập 45

Trang 13

Hình 4.3 Giao diện đăng ký 46

Hình 4.4 Giao diện trang chủ 47

Hình 4.5 Giao diện menu profile 48

Hình 4.6 Giao diện biểu mẫu sửa tên người dùng 49

Hình 4.7 Giao diện biểu mẫu đổi mật khẩu 50

Hình 4.8 Giao diện chi tiết deck 51

Hình 4.9 Giao diện các tính năng thao tác với deck 52

Hình 4.10 Giao diện chọn chế độ luyện tập 53

Hình 4.11 Giao diện tạo deck 54

Hình 4.12 Giao diện sửa deck 55

Hình 4.13 Giao diện thêm card vào deck 56

Hình 4.14 Giao diện danh sách card 57

Hình 4.15 Giao diện tạo card 58

Hình 4.16 Giao diện biểu mẫu tạo front 59

Hình 4.17 Giao diện sửa card 60

Hình 4.18 Giao diện biểu mẫu tạo back 61

Hình 4.19 Giao diện biểu mẫu sửa back 62

Hình 4.20 Giao diện sửa front 63

Hình 4.21 Giao diện trang Market - danh sách public card 64

Hình 4.22 Giao diện biểu mẫu đề xuất card 65

Hình 4.23 Giao diện trang Market - danh sách public deck 66

Hình 4.24 Giao diện chi tiết public deck 67

Hình 4.25 Giao diện luyện tập 68

Hình 4.26 Giao diện luyện tập – trắc nghiệm 69

Hình 4.27 Giao diện luyện tập bằng trò chơi ghép card 70

Hình 4.28 Giao diện chi tiết thống kê 71

Hình 4.29 Giao diện trang chủ của Admin 72

Hình 4.30 Giao diện quản lý user 73

Hình 4.31 Giao diện quản lý deck của user 74

Hình 4.32 Giao diện quản lý card của user 75

Hình 4.33 Giao diện quản lý card được đề xuất 76

Hình 4.34 Giao diện danh sách yêu cầu công khai deck 77

Trang 14

Hình 4.35 Giao diện chi tiết deck được yêu cầu công khai 78

Hình 4.36 Lược đồ tuần tự chức năng tạo deck 79

Hình 4.37 Lược đồ tuần tự chức năng sửa deck 80

Hình 4.38 Lược đồ tuần tự chức năng xoá deck 81

Hình 4.39 Lược đồ tuần tự chức năng tạo card – tạo front 82

Hình 4.40 Lược đồ tuần tự chức năng sửa card – sửa front 83

Hình 4.41 Lược đồ tuần tự chức năng sửa card – tạo back 84

Hình 4.42 Lược đồ tuần tự chức năng sửa card – sửa back 85

Hình 4.43 Lược đồ tuần tự chức năng sửa card – sửa ảnh của back 86

Hình 4.44 Lược đồ tuần tự chức năng sửa card – xoá ảnh của back 87

Hình 4.45 Lược đồ tuần tự chức năng tìm kiếm card 87

Hình 4.46 Lược đồ tuần tự chức năng lọc card 88

Hình 5.1 Sơ đồ lớp 89

Hình 5.2 Test case cho trang đăng ký 100

Trang 15

DANH MỤC BẢNG BIỂU

Bảng 3.1 Bảng nghiệp vụ của Guest 12

Bảng 3.2 Bảng quy định nghiệp vụ của Guest 12

Bảng 3.3 Bảng nghiệp vụ của User 14

Bảng 3.4 Bảng quy định nghiệp vụ của User 15

Bảng 3.5 Bảng nghiệp vụ của Admin 30

Bảng 3.6 Bảng quy định nghiệp vụ của Admin 32

Bảng 4.1 Bảng mô tả bảng dữ liệu User 39

Bảng 4.2 Bảng mô tả bảng dữ liệu Deck 39

Bảng 4.3 Bảng mô tả bảng dữ liệu Card 40

Bảng 4.4 Bảng mô tả bảng dữ liệu Back 41

Bảng 4.5 Bảng mô tả bảng dữ liệu CardAssignment 41

Bảng 4.6 Bảng mô tả bảng dữ liệu SharedDeck 42

Bảng 4.7 Bảng mô tả bảng dữ liệu SharedCard 42

Bảng 4.8 Bảng mô tả bảng dữ liệu Test 43

Bảng 4.9 Bảng mô tả bảng dữ liệu TestedCard 43

Bảng 4.10 Bảng mô tả bảng dữ liệu Match 43

Bảng 4.11 Bảng mô tả bảng dữ liệu TestedCard 44

Bảng 4.12 Danh sách các xử lý trên giao diện đăng nhập 45

Bảng 4.13 Danh sách các xử lý trên giao diện đăng ký 46

Bảng 4.14 Danh sách các xử lý trên giao diện trang chủ 47

Bảng 4.15 Danh sách các xử lý trên giao diện menu profile 48

Bảng 4.16 Danh sách các xử lý trên giao diện biểu mẫu sửa tên người dùng 49

Bảng 4.17 Danh sách các xử lý trên giao diện biểu mẫu đổi mật khẩu 50

Bảng 4.18 Danh sách các xử lý trên giao diện chi tiết deck 51

Bảng 4.19 Danh sách các xử lý trên giao diện các tính năng thao tác với deck 52

Bảng 4.20 Danh sách các xử lý trên giao diện chọn chế độ luyện tập 53

Bảng 4.21 Danh sách các xử lý trên giao diện tạo deck 54

Bảng 4.22 Danh sách các xử lý trên giao diện sửa deck 55

Bảng 4.23 Danh sách các xử lý trên giao diện thêm card vào deck 56

Bảng 4.24 Danh sách các xử lý trên giao diện danh sách card 57

Bảng 4.25 Danh sách các xử lý trên giao diện tạo card 58

Trang 16

Bảng 4.26 Danh sách các xử lý trên giao diện biễu mẫu tạo front 59

Bảng 4.27 Danh sách các xử lý trên giao diện sửa card 60

Bảng 4.28 Danh sách các xử lý trên giao diện biễu mẫu tạo back 61

Bảng 4.29 Danh sách các xử lý trên giao diện biễu mẫu sửa back 62

Bảng 4.30 Danh sách các xử lý trên giao diện biễu mẫu sửa front 63

Bảng 4.31 Danh sách các xử lý trên giao diện trang Market - danh sách public card 64 Bảng 4.32 Danh sách các xử lý trên giao diện biễu mẫu đề xuất card 65

Bảng 4.33 Danh sách các xử lý trên giao diện trang Market - danh sách public deck 66 Bảng 4.34 Danh sách các xử lý trên giao diện chi tiết public deck 67

Bảng 4.35 Danh sách các xử lý trên giao diện luyện tập 68

Bảng 4.36 Danh sách các xử lý trên giao diện luyện tập – trắc nghiệm 69

Bảng 4.37 Danh sách các xử lý trên giao diện luyện tập bằng trò chơi ghép card 70

Bảng 4.38 Danh sách xử lý trên giao diện chi tiết thống kê 71

Bảng 4.39 Danh sách các xử lý trên giao diện trang chủ của Admin 72

Bảng 4.40 Danh sách các xử lý trên giao diện quản lý user 73

Bảng 4.41 Danh sách các xử lý trên giao diện quản lý deck của user 74

Bảng 4.42 Danh sách các xử lý trên giao diện quản lý card của user 75

Bảng 4.43 Danh sách các xử lý trên giao diện quản lý card được đề xuất 76

Bảng 4.44 Danh sách các xử lý trên giao diện danh sách yêu cầu công khai deck 77

Bảng 4.45 Danh sách các xử lý trên giao diện chi tiết deck được yêu cầu công khai 78 Bảng 5.1 Bảng thuộc tính của lớp ApplicationUser 90

Bảng 5.2 Bảng thuộc tính của lớp ApplicationRole 90

Bảng 5.3 Bảng thuộc tính của lớp ApplicationUserRole 91

Bảng 5.4 Bảng thuộc tính của lớp Deck 91

Bảng 5.5 Bảng thuộc tính của lớp Card 92

Bảng 5.6 Bảng thuộc tính của lớp Back 93

Bảng 5.7 Bảng thuộc tính của lớp CardAssignment 93

Bảng 5.8 Bảng thuộc tính của lớp SharedDeck 94

Bảng 5.9 Bảng thuộc tính của lớp SharedCard 94

Bảng 5.10 Bảng thuộc tính của lớp Test 94

Bảng 5.11 Bảng thuộc tính của lớp TestedCard 95

Bảng 5.12 Bảng thuộc tính của lớp Match 95

Trang 17

Bảng 5.13 Bảng thuộc tính của lớp MatchedCard 96

Trang 18

PHẦN MỞ ĐẦU

1 Tính cấp thiết của đề tài

Hiện nay, tiếng Anh là ngôn ngữ quốc tế, được sử dụng rộng rãi tại nhiều quốc gia trên thế giới Tại Việt Nam, rất nhiều người trong nhiều độ tuổi từ bé đến lớn đang

nỗ lực hàng ngày để học tiếng Anh Với trình độ tiếng Anh từ khá trở lên, người Việt Nam có thể đáp ứng được yêu cầu tuyển dụng trong nhiều ngành nghề như kinh tế, chính trị, khoa học, du lịch, vv… Ngoài ra, với tiếng Anh, chúng ta có thể tìm và đọc được các nguồn tài liệu quý giá mà rất ít khi được viết hoặc dịch sang tiếng Việt, hoặc có thể giao lưu kết bạn với tất cả mọi người trên thế giới Một trong những nền tảng ban đầu của việc sử dụng tiếng Anh tốt đó là phải có vốn từ vựng phong phú Nhà ngôn ngữ học nổi tiếng D A Wilkins đã nói rằng “Without grammar, very little can be conveyed; without vocabulary, nothing can be conveyed.” (Không có ngữ pháp, rất ít thông tin có thể được truyền đạt; Không có từ vựng, không một thông tin nào có thể được truyền đạt cả) Chính vì vậy, có thể coi từ vựng là tiền đề quan trọng cho việc học và phát triển khả năng ngoại ngữ của mỗi người

Cùng với đó là sự phát triển của công nghệ, bất kì ai cũng có thể sở hữu cho mình một chiếc máy tính xách tay Chính vì vậy, việc học tiếng Anh trên các thiết bị di động đem lại cho người dùng một sự thuận tiện, linh hoạt hơn so với cách học từ vựng truyền thống bằng giấy bút

Từ những nhu cầu và lợi thế đó, nhóm em quyết định nghiên cứu và xây dựng ứng dụng: XÂY DỰNG WEBSITE HỌC TIẾNG ANH BẰNG FLASHCARD

2 Mục đích của đề tài

Đề tài nhằm nghiên cứu về thói quen học từ vựng của mọi người, từ đó có thể xây dựng một website để học từ vựng thông qua dạng flashcard, ngoài ra mọi người có thể chia sẻ những bài học với nhau thông qua hệ thống, dễ dàng tương tác như trong thực tế, tránh gây nhàm chán cho người dùng

3 Đối tượng và phạm vi nghiên cứu

Đề tài này phù hợp với tất cả mọi người với mọi độ tuổi, mọi trình độ học vấn, mọi ngành nghề, đang có nhu cầu cải thiện vốn từ vựng của mình

4 Kết quả dự kiến đạt được

- Xây dựng được website học tiếng Anh bằng flashcard sử dụng công nghệ ReactJS

và NET Core

Trang 19

- Website phải có 2 mục cho người dùng sử dụng và admin để quản lý tất cả các

dữ liệu của người dùng

5 Phương pháp nghiên cứu

- Phương pháp thực nghiệm khoa học

o Chương 1: Cơ sở lý thuyết

o Chương 2: Khảo sát hiện trạng và xác định yêu cầu

o Chương 3: Mô hình hoá yêu cầu

o Chương 4: Thiết kế hệ thống

o Chương 5: Cài đặt và kiểm thử

- Phần kết luận

Trang 20

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 .NET CORE VÀ ASP.NET CORE

ASP.NET Core là một open-source mới và framework đa nền tảng platform) cho việc xây dựng những ứng dụng hiện tại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile Do là một framework đa nền tảng nên NET Core hỗ trợ hầu hết các hệ điều hành như Windows, Linux, macOS

(cross-Với ASP.NET Core, có thể:

- Xây dựng các ứng dụng web, các dịch vụ, ứng dụng IoT và các phần backend mobile

- Sử dụng các công cụ phát triển ưa thích trên Windows, macOS và Linux

- Triển khai trên đám mây hoặc tại chỗ

- Chạy trên NET Core hoặc NET Framework

ASP.NET Core mang lại các lợi ích như sau:

- Dùng để xây dựng giao diện Web (Web UI) cũng như các API Web

- Tích hợp các framework phía client hiện đại và các quy trình làm việc phát triển

- Hệ thống cấu hình sẵn có trên đám mây

- Đường ống (pipeline) yêu cầu HTTP mang tính module, hiện suất cao và nhẹ

- Có khả năng lưu trữ (host) ở IIS, Nginx, Apache, Docker, hoặc tự host ở các tiến trình riêng

- Tạo mới phiên bản app side-by-side với NET Core

- Tạo công cụ đơn giản hóa phát triển web hiện đại

- Mã nguồn mở và tập trung vào cộng đồng phát triển mã nguồn

ASP.NET Core được cung cấp dưới dạng các gói NuGet Có thể sử dụng các gói này để tối ưu hóa ứng dụng khi chỉ nhúng những thành phần cần thiết.[1]

ASP.NET Core MVC cung cấp các tính năng để xây dựng API Web và ứng dụng web như sau:

- Mô hình MVC (Model-View-Controller) giúp tạo ra các API web và ứng dụng web có khả năng thực nghiệm

- Razor Pages (phần mới ở ASP.NET Core 2.0) là một mô hình lập trình dựa theo

cơ chế trang web giúp xây dựng giao diện web dễ và hiệu quả hơn

- Razor cung cấp một cú pháp hiệu quả cho các trang Razor và view MVC

Trang 21

- Tag Helper cho phép mã nguồn phía server tham gia vào việc tạo và phát sinh

phần tử HTML ở các tập tin Razor

- Tích hợp hỗ trợ cho các định dạng đa dữ liệu và việc dàn xếp nội dung cho phép

các API web tiếp cận nhiều khách hàng hơn, bao gồm trên các trình duyệt và thiết

bị mobile khác nhau

- Ràng buộc mô hình tự động ánh xạ dữ liệu từ các yêu cầu HTTP đến các tham

số phương thức hành động

- Xác thực mô hình tự động thực thi xác thực dữ liệu phía client và server

Phát triển phía client: ASP.NET Core tích hợp liền mạch với các thư viện và

framework phía client, bao gồm Angular, React, và Bootstrap.[1]

1.2 REACTJS

React JS Component là các block xây dựng nên mọi ứng dụng React Một

component có thể được sử dụng riêng hoặc được kết hợp với các component khác để

tạo ra các component lớn hơn Điều quan trọng, các component này là động: chúng cung

cấp một template, sẽ được điền vào bằng dữ liệu biến Mục đích chính của một

component React là tạo ra một số JSX từ template này, và sẽ biên dịch sang HTML và

được hiển thị trên DOM.[2]

JSX là một syntax extension cho JavaScript Nó có vẻ rất giống với HTML,

nhưng với một số khác biệt chính Ví dụ: bạn có thể bao gồm một vanilla JavaScript

expression bên trong JSX bằng cách bao nó trong dấu ngoặc nhọn.[2]

Props là một object được cung cấp cho một component bởi cha của nó và nó chứa

tất cả các thông tin liên quan đến component cụ thể đó State giống như nguồn của thác

nước, thì props là dòng nước chảy xuống.[2]

State là một đối tượng JavaScript ghi lại và phản ứng với các user event Mỗi

class-based component có state object riêng và bất cứ khi nào state bị thay đổi,

component đó cùng với tất cả các phần tử con của nó sẽ được hiển thị lại.[2]

Trang 22

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG

2.1.1 Tinycards (https://tinycards.duolingo.com/)

Hình 2.1 Giao diện trang chủ Tinycards

Ưu điểm:

- Thiết kế đơn giản, đẹp, hiện đại

- Cho phép học với flashcard mà không cần phải đăng nhập

- Nguồn flashcard phong phú, không giới hạn ngôn ngữ

- Có danh mục hiển thị những bài học tiêu biểu giúp người dùng dễ dàng truy cập

- Có chức năng theo dõi người dùng, giúp cập nhật những bài học của những người mình quan tâm một cách nhanh chóng

Nhược điểm:

- Mỗi card chỉ có thể thêm một nghĩa duy nhất

- Nghĩa của mỗi card chưa có các thông tin như từ loại hay ví dụ mẫu sử dụng từ

Trang 23

2.1.2 Cram (https://www.cram.com/)

Hình 2.2 Giao diện trang chủ Cram

Ưu điểm:

- Có phân loại flashcard

- Cho phép học với flashcard mà không cần phải đăng nhập

- Cho phép giới hạn số lượng thẻ trên tổng số thẻ trong 1 lần kiểm tra

- Hỗ trợ một số hình thức kiểm tra đơn giản như so khớp, ghi nhớ

- Tích hợp vào các game nhằm dễ dàng ghi nhớ

- Nguồn flashcard phong phú

- Hỗ trợ trên nền tảng di động

Nhược điểm:

- Giao diện không thân thiện

Trang 24

- Nguồn flashcard phong phú

- Có 5 lựa chọn tương ứng với 5 mức độ người dùng hiểu về từ, giúp cho hệ thống ghi nhận được khả năng tiếp thu từ của người dùng

- Có chức năng mở lớp, có thể thêm nhiều người dùng khác để sử dụng chung bài học

Nhược điểm:

- Trả phí để sở hữu flashcard có sẵn

Trang 25

2.1.4 ProProfs Flashcard (https://www.proprofs.com/flashcards/)

Hình 2.4 Giao diện trang chủ ProProfs Flashcard

Ưu điểm:

- Giao diện thiết kết hiện đại

- Hỗ trợ một số hình thức kiểm tra đơn giản như so khớp, ghi nhớ

- Cho phép chia sẻ flashcard qua Email, Facebook, Twitter, …

- Cho phép kiếm tiền từ việc bán bộ flashcard tự tạo

- Có thể sao chép và chỉnh sửa flashcard có sẵn

- Hỗ trợ trên cả nền tảng di động

Nhược điểm:

- Cần phải trả phí để có thêm nhiều chức năng khác

Trang 26

2.1.5 StudyBlue (https://www.studyblue.com/)

Hình 2.5 Giao diện trang chủ StudyBlue

Ưu điểm:

- Cho phép tuỳ chỉnh số lượng flashcard và hình thức làm bài kiểm tra

- Đánh giá, tổng kết bài kiểm tra khi chưa hoàn thành

- Hiển thị toàn bộ flashcard trên màn hình thay vì có phân trang

- Không có hình thức hiển thị từng flashcard

- Giao diện kiểm tra không thân thiện

Trang 27

2.2 XÁC ĐỊNH YÊU CẦU

Xây dựng được website học tiếng Anh bằng flashcard với các yêu cầu sau:

- Yêu cầu chức năng:

o Đăng nhập, đăng ký bằng tài khoản thường

o Đăng nhập, đăng ký bằng tài khoản Facebook, Google

o Tạo, xoá, sửa deck

o Tạo, xoá, sửa card

o Thêm card vào deck, xoá card khỏi deck

o Xem thống kê

o Luyện tập với deck

o Xem kho card và kho deck

o Tải card từ kho card

o Tải deck từ kho deck

o Đề xuất card

o Gửi yêu cầu công khai deck cá nhân

- Yêu cầu hệ thống:

o Quản lý user

▪ Xem và xóa user

▪ Xem và xóa deck của user

▪ Xem và xóa card của user

o Quản lý đề xuất card và yêu cầu công khai deck của user

- Yêu cầu phi chức năng:

o Tốc độ truy xuất dữ liệu nhanh

o Dễ bảo trì

Trang 28

CHƯƠNG 3: MÔ HÌNH HOÁ YÊU CẦU 3.1 LƯỢC ĐỒ USECASE

Hình 3.1 Lược đồ usecase

Trang 29

3.2 CÁC ACTOR

3.2.1 Guest

3.2.1.1 Nghiệp vụ

Bảng 3.1 Bảng nghiệp vụ của Guest

STT Tên nghiệp vụ Loại nghiệp vụ Quy định Biểu mẫu Ghi chú

1 Đăng nhập Xử lý QD_DangNhap BM_DangNhap

2 Đăng ký Xử lý, lưu trữ QD_DangKy BM_DangKy

3.2.1.2 Quy định

Bảng 3.2 Bảng quy định nghiệp vụ của Guest

1 QD_DangNhap Đăng nhập Người dùng đăng nhập bằng cách

nhập username và password hợp

lệ và nhấn nút “Log in” hoặc đăng nhập với Google và Facebook bằng cách nhấn nút “Login with Google” và “Login with

Facebook”

2 QD_DangKy Đăng ký tài khoản Người dùng nhấn “Register as a

new user”, nhập thông tin hợp lệ ở các trường “Name”, “Email”,

“Password”, “Confirm Password”

và nhấn nút “Register” để đăng ký hoặc đăng ký với Google và Facebook bằng cách nhấn nút

“Login with Google” và “Login with Facebook”

Trang 31

3.2.2 User

3.2.2.1 Nghiệp vụ

Bảng 3.3 Bảng nghiệp vụ của User

STT Tên nghiệp vụ Loại nghiệp vụ Quy định Biểu mẫu Ghi chú

1 Xem danh sách

card

2 Thêm card Xử lý, lưu trữ QD_ThemCard BM_ThemCard

3 Xoá card Xử lý, lưu trữ QD_XoaCard BM_DsCard

4 Sửa card Xử lý, lưu trữ QD_SuaCard BM_SuaCard

6 Tìm kiếm card Xử lý QD_TimCard BM_DsCard

7 Xem danh sách

deck

8 Tìm kiếm deck Xử lý QD_TimDeck BM_TrangChu

10 Xem chi tiết

deck

11 Thêm deck Xử lý, lưu trữ QD_ThemDeck BM_ThemDeck

12 Xoá deck Xử lý, lưu trữ QD_XoaDeck BM_Deck

13 Sửa deck Xử lý, lưu trữ QD_SuaDeck BM_SuaDeck

14 Công khai deck Xử lý, lưu trữ QD_CKhaiDeck BM_Deck

15 Thêm card vào

deck

Xử lý, lưu trữ QD_ThemCDeck BM_ThemCDeck

16 Xoá card khỏi

Trang 32

19 Luyện tập Xử lý, lưu trữ QD_LuyenTap BM_LuyenTap

20 Luyện tập bằng

trò chơi ghép

card

Xử lý, lưu trữ QD_GhepCard BM_GhepCard

21 Xem thống kê Xử lý QD_ThongKe BM_TrangChu

22 Xem chi tiết

Xử lý, lưu trữ QD_GhimDeck BM_PDeck

29 Đề xuất card Xử lý, lưu trữ QD_DxCard BM_DxCard

30 Sửa tên Xử lý, lưu trữ QD_SuaTen BM_TrangChu

31 Sửa ảnh đại diện Xử lý, lưu trữ QD_SuaAnh BM_TrangChu

32 Đổi mật khẩu Xử lý, lưu trữ QD_DoiMK BM_TrangChu

33 Đăng xuất Xử lý QD_DangXuat BM_TrangChu

3.2.2.2 Quy định

Bảng 3.4 Bảng quy định nghiệp vụ của User

1 QD_DsCard Xem danh sách card Người dùng nhấn vào liên kết

“My Cards” trên thanh điều hướng sẽ được chuyển đến trang danh sách card

Trang 33

2 QD_ThemCard Thêm card Người dùng nhấn vào nút

trên trang danh sách card sẽ được chuyển đến trang thêm card, người dùng nhập thông tin hợp lệ ở trường “Front” và nhấn nút “Create” để tạo card

3 QD_XoaCard Xoá card Trên trang danh sách card,

người dùng nhấn vào nút trên card muốn xóa và nhấn

“Delete card” để xóa card

4 QD_SuaCard Sửa card Trên trang danh sách card,

người dùng nhấn vào nút trên card muốn sửa và nhấn

“Edit card” để chuyển sang trang sửa card, người dùng nhấn vào 1 nghĩa muốn sửa, nhập thông tin hợp lệ ở các trường “Meaning”, “Type”,

“Example” và nhấn nút

“Update” để sửa card, hoặc

có thể nhấn vào nút “Add fact” và nhập các trường tương tự như trên để thêm 1 nghĩa Ngoài ra, người dùng

có thể nhấn vào “Delete fact”

để xóa 1 nghĩa, nhấn vào

“Upload image” để sửa hình ảnh hoặc nhấn vào “Delete image” để xóa hình ảnh

5 QD_LocCard Lọc card Người dùng chọn loại card

cần lọc trên dropdown list ở trang danh sách card Những

Trang 34

card được lọc sẽ hiện lên ở mục danh sách card

6 QD_TimCard Tìm kiếm card Người dùng nhập từ khoá cần

tìm vào ô tìm kiếm trong trang danh sách card Những card trùng với từ khoá sẽ hiện lên ở mục danh sách card

7 QD_DsDeck Xem danh sách deck Sau khi đăng nhập, người

dùng được chuyển đến trang chủ có hiển thị danh sách deck

8 QD_TimDeck Tìm kiếm deck Người dùng nhập từ khoá cần

tìm vào ô tìm kiếm trong trang chủ Những deck trùng với từ khoá sẽ hiện lên ở mục danh sách card

9 QD_LocDeck Lọc deck Người dùng chọn loại deck

cần lọc trên dropdown list ở trang chủ Những deck được lọc sẽ hiện lên ở mục danh sách deck

10 QD_Deck Xem chi tiết deck Người dùng nhấn chọn một

deck bất kì trên trang chủ sẽ được chuyển tới trang chi tiết deck

11 QD_ThemDeck Thêm deck Người dùng nhấn vào nút

trên trang chủ để chuyển đến trang thêm deck, nhập thông tin hợp lệ ở các trường “Deck name”, “Description” và chọn màu, sau đó nhấn nút

“Create” để tạo deck

Trang 35

12 QD_XoaDeck Xoá deck Trên trang chi tiết deck,

người dùng nhấn vào và chọn “Delete this deck” để xoá deck

13 QD_SuaDeck Sửa deck Trên trang chi tiết deck,

người dùng nhấn vào và chọn “Edit deck” sẽ chuyển đến trang sửa deck, nhập thông tin hợp lệ ở các trường

“Deck name”, “Description”

và chọn màu, sau đó nhấn nút

“Update” để sửa deck

14 QD_CKhaiDeck Công khai deck Trên trang chi tiết deck,

người dùng nhấn vào và chọn bật, tắt “Public” để gửi yêu cầu công khai deck hoặc không

15 QD_ThemCDeck Thêm card vào deck Người dùng nhấn nút trên

trang chi tiết deck sẽ được chuyển đến trang thêm card vào deck, nhấn ở những card bên phải để thêm card vào deck

16 QD_XoaCDeck Xoá card khỏi deck Người dùng nhấn nút trên

trang chi tiết deck sẽ được chuyển đến trang thêm card vào deck, nhấn ở những card bên trái để xoá card khỏi deck

17 QD_TimCDeck Tìm card trong deck Người dùng nhập từ khoá cần

tìm vào ô tìm kiếm trong trang chi tiết deck Những

Trang 36

card trùng với từ khoá sẽ hiện lên ở mục danh sách card của deck

18 QD_LocCDeck Lọc card trong deck Người dùng chọn loại card

cần lọc trên dropdown list ở trang chủ Những deck được lọc sẽ hiện lên ở mục danh sách card của deck

19 QD_LuyenTap Luyện tập Người dùng nhấn vào nút

“Pratice” trên trang chi tiết deck Tiếp tục chọn chế độ luyện tập để bắt đầu, với mỗi card hiện ra sẽ có 2 nút

“DON’T REMEMBER” và

“REMEMBER”, người dùng

sẽ nhấn “REMEMBER” đối với từ vừng bản thân cho là thuộc và nhớ, ngược lại thì nhấn “DON’T

REMEMBER”, những từ vựng này sẽ lặp lại cho tới khi không còn từ vựng nào mà người dùng nhấn “DON’T REMEMBER” nữa, khi đó sẽ

có thông báo hiển thị thông tin số từ vựng nhấn “DON’T REMEMBER” và

“REMEMBER”, người dùng nhấn nút “OK” để kết thúc bài học Trong quá trình đó sẽ

có những câu trắc nghiệm chọn nghĩa cho từ vựng được xen kẽ vào

Trang 37

21 QD_ThongKe Xem thống kê Người dùng đăng nhập sẽ

được chuyển đến trang chủ có mục thống kê

22 QD_CtThongKe Xem chi tiết thống

kê

Người dùng nhấn vào nút

“more” trong mục Thống kê

ở trang chủ Ở màn hình này người dùng có thể xem chi tiết các lần luyện tập của mình, bao gồm thông tin của deck đã luyện tập, các từ đã học và chưa học trong lần luyện tập đó

23 QD_DsPCard Xem danh sách

Trang 38

được tải về sẽ nằm ở danh sách card của người dùng

25 QD_DsPDeck Xem danh sách

“Decks from Users” sẽ hiển thị danh sách public deck

26 QD_PDeck Xem chi tiết public

deck

Trên trang danh sách public deck, người dùng nhấn vào deck bất kỳ sẽ chuyển sang trang chi tiết public deck

27 QD_TaiDeck Tải public deck Người dùng nhấn vào nút

“Download” ở trang chi tiết public deck Deck được tải về

sẽ nằm trong danh sách deck của người dùng

28 QD_GhimDeck Ghim public deck Người dùng nhấn vào nút

“Pin” ở trang chi tiết public deck Deck được ghim sẽ nằm trong mục My shortcuts

ở trang chủ

29 QD_DxCard Đề xuất card Người dùng nhấn vào nút

“Propose” ở trang Market sẽ hiện ra biểu mẫu đề xuất card, nhập thông tin hợp lệ ở các trường “Front”, “Meaning”,

“Type”, “Example” và chọn hình ảnh, sau đó nhấn nút

“Propose” để đề xuất card

Trang 39

30 QD_SuaTen Sửa tên Nguời dùng nhấn vào tên

trong mục thông tin cá nhân ở trang chủ sẽ hiển thị biểu mẫu sửa tên, nhập thông tin hợp lệ

ở trường “Name” và nhấn nút

“Update” để sửa tên

31 QD_SuaAnh Sửa ảnh đại diện Nguời dùng nhấn vào ảnh đại

diện trong mục thông tin cá nhân ở trang chủ, chọn ảnh để sửa ảnh

32 QD_DoiMK Đổi mật khẩu Nguời dùng nhấn vào liên kết

“Change password” trong menu ở thanh điều hướng sẽ hiện ra biểu mẫu đổi mật khẩu, nhập thông tin hợp lệ ở các trường “Current

password”, “New password”

và “Confirmation password”

và nhấn nút “Update” để đổi mật khẩu

33 QD_DangXuat Đăng xuất Nguời dùng nhấn vào liên kết

“Logout” trong menu ở thanh điều hướng để đăng xuất

Định dạng
Số trang	121
Dung lượng	9,17 MB