Xây dựng hệ thống website chia sẻ khóa học lập trình miễn phí tại trường đại học sư phạm kỹ thuật

Use-case Đăng ký Bảng 3.1: Use-case Đăng ký Tên use case Đăng ký Mô tả Actor đăng ký tài khoản trên hệ thống với email, tên người dùng và mật khẩu Đầu vào Thông tin Actor dùng để đăng ký

Trang 1

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

KHOA CÔNG NGHỆ SỐ

Đà Nẵng, 02/2022

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG

TIN

ĐỀ TÀI:

XÂY DỰNG HỆ THỐNG WEBSITE CHIA SẺ KHÓA HỌC LẬP TRÌNH MIỄN PHÍ TẠI TRƯỜNG

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

Người hướng dẫn : ThS Nguyễn Thị Hà Quyên

Sinh viên thực hiện : Võ Đình Hoàng Long

Trang 2

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG HỆ THỐNG WEBSITE CHIA SẺ KHÓA HỌC LẬP TRÌNH MIỄN PHÍ TẠI TRƯỜNG

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

Người hướng dẫn : ThS Nguyễn Thị Hà Quyên

Sinh viên thực hiện : Võ Đình Hoàng Long

Mã sinh viên 1811505310323

Trang 3

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN

Trang 4

NHẬN XÉT CỦA DOANH NGHIỆP

Trang 5

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

Trang 6

TÓM TẮT

Tên đề tài: Xây dựng hệ thống website chia sẻ khóa học lập trình miễn

phí Sinh viên thực hiện: Võ Đình Hoàng Long

Hiện nay có rất nhiều khóa học lập trình miễn phí trên các nền tảng mạng xã hộinhư Facebook, Youtube, Blogs,… Vì vậy nên có quá nhiều khóa học để các bạn lựachọn và những khóa học này chưa chắc đạt đủ yêu cầu chất lượng cũng như nằm rảirác khắp nơi, khó tìm kiếm

Điều này dẫn tới mong muốn tạo ra một website cho phép người dùng dễ dàng tiếpcận các khóa học lập trình và là nơi để học hỏi kiến thức mới dành cho các bạn sinhviên UTE Em đã tìm hiểu và cài đặt hệ thống website chia sẻ khóa học lập trình miễnphí “UTE Course Sharing” dành cho các bạn sinh viên trường Đại học Sư phạm Kỹthuật

Trang 7

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

KHOA CÔNG NGHỆ SỐ

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

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

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: ThS Nguyễn Thị Hà Quyên

1 Tên đề tài:

Xây dựng hệ thống website chia sẻ khóa học lập trình miễn phí tại trường Đại học

Sư phạm Kỹ thuật

2 Các số liệu, tài liệu ban đầu:

Các tài liệu được lấy từ nhiều nguồn, đa phần là các bài viết, website và khóa học

dạy lập trình trên mạng

3 Nội dung chính của đồ án:

4 Các sản phẩm dự kiến

Trang 8

LỜI CẢM ƠN

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cả chiềurộng và sâu Máy tính điện tử không còn là một thứ phương tiện quý hiếm mà đangngày càng trở thành một công cụ làm việc và giải trí thông dụng của con người, khôngchỉ ở công sở mà còn ngay cả trong gia đình

Đứng trước vai trò của thông tin hoạt động cạnh tranh gay gắt, các tổ chức và cácdoanh nghiệp đều tìm mọi biện pháp để xây dựng hoàn thiện hệ thống thông tin củamình nhằm tin học hóa các hoạt động tác nghiệp của đơn vị

Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện cácgiải pháp cũng như các sản phẩm nhằm cho phép tiến hành tự động hóa trên Internet.Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng

và tính tất yếu của website Với những thao tác đơn giản trên máy có nối mạngInternet bạn sẽ có tận tay những gì mình cần mà không phải mất nhiều thời gian Bạnchỉ cần vào các trang web làm theo hướng dẫn và click vào những gì bạn cần Các hoạtđộng sẽ thực hiện ngay trên hệ thống đó

Điều này dẫn tới mong muốn tạo ra một website cho phép người dùng dễ dàng tiếpcận các khóa học lập trình và là nơi để học hỏi kiến thức mới dành cho các bạn sinhviên UTE Em đã tìm hiểu và cài đặt hệ thống website chia sẻ khóa học lập trình miễnphí “UTE Course Sharing” dành cho các bạn sinh viên trường Đại học Sư phạm Kỹthuật

Với sự hướng dẫn tận tình của Cô Nguyễn Thị Hà Quyên em đã hoàn thành đồ ántốt nghiệp này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thốngnhưng chắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thôngcảm và góp ý của quí Thầy cô

Em xin chân thành cảm ơn !

Trang 9

LỜI CAM ĐOAN

Em xin cam đoan :

ThS Nguyễn Thị Hà Quyên

trình, thời gian, địa điểm công bố

xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

Võ Đình Hoàng Long

Trang 10

MỤC LỤC

Nhận xét của người hướng dẫn

Nhận xét của người phản biện

Tóm tắt

Nhiệm vụ đồ án

Lời cảm ơn I Lời cam đoan II Mục lục III Danh sách các bảng, hình vẽ VII Danh sách các ký hiệu, chữ viết tắt X

Mở đầu XI

CHƯƠNG 1 TỔNG QUAN 1

1.1 Lý do chọn đề tài 1

1.2 Mục đích đề tài 1

1.3 Phạm vi đề tài 1

1.4 Liệt kê người dùng 1

1.4.1 Người dùng chưa là thành viên 1

1.4.2 Người dùng thành viên 1

1.4.3 Người chia sẻ khóa học 2

1.4.4 Người quản trị 2

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

2.1 Hệ quản trị cơ sở dữ liệu SQL Server 3

2.1.2 SQL Server là gì 3

2.1.3 Đôi nét về lịch sử 3

2.2 Ngôn ngữ lập trình JavaScript 4

2.2.2 JavaScript là gì 4

2.3 ReactJS 5

Trang 11

2.3.2 ReactJS là gì 5

2.4 ExpressJS 7

2.4.2 ExpressJS là gì 7

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 8

3.1 Đặc tả yêu cầu phần mềm (Software Requirements) 8

3.1.1 Người dùng chưa là thành viên 8

3.1.2 Người dùng thành viên 8

3.1.3 Người quản trị 8

3.1.4 Người chia sẻ khóa học 9

3.2 Sơ đồ Use-case 9

3.3 Kịch bản cho Use-case 10

3.3.1 Actor Người dùng chưa là thành viên 10

3.3.2 Actor Người dùng thành viên 11

3.3.3 Actor Người chia sẻ khóa học 16

3.3.4 Actor Người quản trị 18

3.4 Phác thảo giao diện người dùng & Sơ đồ hoạt động 22

3.4.1 Actor người dùng thành viên 22

3.4.2 Actor người chia sẻ khóa học 25

3.4.3 Actor Quản trị viên 27

3.5 Sơ đồ ERD 30

3.6 Sơ đồ Relationship trong SQL Server 30

3.7 Mô hình khái niệm (Domain Model) 31

3.7.1 Xác định các lớp ứng viên (Candidate Class) 31

3.7.2 Xây dựng sơ đồ Domain Model (Class Diagram - Level 1) 31

3.8 Sơ đồ Robustness Diagram 32

3.8.1 Robustness Diagram cho usecase Nhận xét khóa học 32

3.8.2 Robustness Diagram cho usecase Bình luận bài học 32

Trang 12

3.8.3 Robustness Diagram cho usecase Thêm khóa học 32

3.8.4 Robustness Diagram cho usecase Cập nhập khóa học 33

3.8.5 Robustness Diagram cho usecase Duyệt khóa học 33

3.8.6 Robustness Diagram cho usecase Cập nhập bài học 33

3.9 Sơ đồ tương tác 34

3.9.1 Sequence Diagram cho usecase Nhận xét khóa học 34

3.9.2 Sequence Diagram cho usecase Bình luận bài học 34

3.9.3 Sequence Diagram cho usecase Thêm khóa học 35

3.9.4 Sequence Diagram cho usecase Cập nhập khóa học 35

3.9.5 Sequence Diagram cho usecase Duyệt khóa học 36

3.9.6 Sequence Diagram cho usecase Cập nhập bài học 36

3.10 Sơ đồ lớp (Level 2) 37

CHƯƠNG 4 DEMO CHƯƠNG TRÌNH 38

4.1 Giao diện Trang Đăng nhập 38

4.2 Giao diện Trang Đăng nhập 38

4.3 Giao diện Trang chính 39

4.4 Giao diện Trang chi tiết khóa học 40

4.5 Giao diện Trang chi tiết bài học 40

4.6 Giao diện Trang Thêm khóa học 41

4.6.1 Giao diện Trang Thêm thông tin khóa học 41

4.6.2 Giao diện Trang thêm các bài học 41

4.6.3 Giao diện Trang Kiểm tra thông tin 42

4.6.4 Giao diện Trang Xác nhận tạo khóa học 42

4.7 Giao diện Trang Danh sách khóa học cá nhân 43

4.8 Giao diện Trang Cập nhập thông tin khóa học 43

4.9 Giao diện Trang Ẩn khóa học 44

4.10 Giao diện Trang Danh sách bài học của khóa học 44

4.11 Giao diện Trang Thêm bài học 45

4.12 Giao diện Trang Cập nhập bài học 45

Trang 13

4.13 Giao diện Trang Ẩn bài học 46

4.14 Giao diện Trang Thông tin cá nhân 46

4.15 Giao diện Trang Quản lý người dùng 47

4.16 Giao diện Trang Thêm người dùng 47

4.17 Giao diện Trang Thêm người chia sẻ 48

4.18 Giao diện Trang Cập nhập thông tin người dùng 48

4.19 Giao diện Trang Ẩn người dùng 49

4.20 Giao diện Trang Quản lý danh mục 49

4.21 Giao diện Trang Thêm danh mục 50

4.22 Giao diện Trang Cập nhập danh mục 50

4.23 Giao diện Trang Ẩn danh mục 51

4.24 Giao diện Trang Quản lý khóa học 51

4.25 Giao diện Trang Thống kê 52

KẾT LUẬN & HƯỚNG PHÁT TRIỂN 53

Ưu điểm 53

Nhược điểm 53

Hướng phát triển 53

TÀI LIỆU THAM KHẢO 54

Trang 14

DANH SÁCH CÁC BẢNG, HÌNH VẼ

Hình 2.1: Logo SQL Server 3

Hình 2.2: Logo JavaScript 4

Hình 2.3: Logo ReactJS 5

Hình 2.4: Logo ExpressJS 7

Hình 3.1: Use-case Diagram 9

Bảng 3.1: Use-case Đăng ký 10

Bảng 3.2: Use-case Xem khóa học 10

Bảng 3.3: Use-case Xem bài học 11

Bảng 3.4: Use-case Đăng nhập 11

Bảng 3.5: Use-case Đánh giá khóa học 12

Bảng 3.6: Use-case Bình luận bài học 12

Bảng 3.7: Use-case Xem lịch sử học 13

Bảng 3.8: Use-case Yêu thích khóa học 13

Bảng 3.9: Use-case Bỏ yêu thích khóa học 14

Bảng 3.10: Use-case Xem thông tin cá nhân 14

Bảng 3.11: Use-case Cập nhập thông tin cá nhân 15

Bảng 3.12: Use-case Tạo khóa học 16

Bảng 3.13: Use-case Ẩn khóa học 16

Bảng 3.14: Use-case Ẩn bài học 17

Bảng 3.15: Use-case Sửa bài học 17

Bảng 3.16: Use-case Thêm mới bài học 18

Bảng 3.17: Use-case Phê duyệt 18

Bảng 3.18: Use-case Cấp tài khoản người dùng 19

Bảng 3.19: Use-case Cấp tài khoản Người chia sẻ khóa học 19

Bảng 3.20: Use-case Thêm danh mục 20

Bảng 3.21: Use-case Sửa danh mục 20

Trang 15

Bảng 3.22: Use-case Ẩn danh mục 21

Hình 3.2: Sơ đồ hoạt động cho usecase Xem Khóa học 22

Hình 3.3: Sơ đồ hoạt động cho usecase Xem Bài học 23

Hình 3.4: Sơ đồ hoạt động cho usecase Xem Thông tin cá nhân 24

Hình 3.5: Sơ đồ hoạt động cho usecase Tạo khóa học 25

Hình 3.6: Sơ đồ hoạt động cho usecase Xem danh sách khóa học 26

Hình 3.7: Sơ đồ hoạt động cho usecase Duyệt khóa học 27

Hình 3.8: Sơ đồ hoạt động cho usecase Duyệt khóa học 28

Hình 3.9: Sơ đồ hoạt động cho usecase Quản lý người dùng 29

Hình 3.10: Sơ đồ ERD 30

Hình 3.11: Sơ đồ Relationship trong SQL Server 30

Hình 3.12: Sơ đồ lớp ứng viên 31

Hình 3.13: Sơ đồ lớp 31

Hình 3.14: Sơ đồ Robustness cho usecase Nhận xét khóa học 32

Hình 3.15: Sơ đồ Robustness cho usecase Bình luận bài học 32

Hình 3.16: Sơ đồ Robustness cho usecase Thêm khóa học 32

Hình 3.17: Sơ đồ Robustness cho usecase Cập nhập khóa học 33

Hình 3.18: Sơ đồ Robustness cho usecase Duyệt khóa học 33

Hình 3.19: Sơ đồ Robustness cho usecase Cập nhập bài học 33

Hình 3.20: Sơ đồ Sequence Diagram cho usecase Nhận xét khóa học 34

Hình 3.21: Sơ đồ Sequence Diagram cho usecase Bình luận bài học 34

Hình 3.22: Sơ đồ Sequence Diagram cho usecase Thêm khóa học 35

Hình 3.23: Sơ đồ Sequence Diagram cho usecase Cập nhập khóa học 35

Hình 3.24: Sơ đồ Sequence Diagram cho usecase Duyệt khóa học 36

Hình 3.25: Sơ đồ Sequence Diagram cho usecase Cập nhập bài học 36

Hình 3.26: Sơ đồ lớp (Level 2) 37

Hình 4.1: Giao diện Trang Đăng nhập 38

Trang 16

Hình 4.2: Giao diện Trang Đăng ký 38

Hình 4.3: Giao diện Trang chính 39

Hình 4.4: Giao diện Trang chi tiết khóa học 40

Hình 4.5: Giao diện Trang chi tiết bài học 40

Hình 4.6: Giao diện Trang Thêm thông tin khóa học 41

Hình 4.7: Giao diện Trang thêm các bài học 41

Hình 4.8: Giao diện Trang Kiểm tra thông tin 42

Hình 4.9: Giao diện Trang Xác nhận tạo khóa học 42

Hình 4.10: Giao diện Trang Danh sách khóa học cá nhân 43

Hình 4.11: Giao diện Trang Cập nhập thông tin khóa học 43

Hình 4.12: Giao diện Trang Ẩn khóa học 44

Hình 4.13: Giao diện Trang Danh sách bài học của khóa học 44

Hình 4.1: Giao diện Trang Thêm bài học 45

Hình 4.2: Giao diện Trang Cập nhập bài học 45

Hình 4.3: Giao diện Trang Ẩn bài học 46

Hình 4.4: Giao diện Trang Thông tin cá nhân 46

Hình 4.5: Giao diện Trang Quản lý người dùng 47

Hình 4.6: Giao diện Trang Thêm người dùng 47

Hình 4.7: Giao diện Trang Thêm người chia sẻ 48

Hình 4.8: Giao diện Trang Cập nhập thông tin người dùng 48

Hình 4.9: Giao diện Trang Ẩn người dùng 49

Hình 4.10: Giao diện Trang Quản lý danh mục 49

Hình 4.11: Giao diện Trang Thêm danh mục 50

Hình 4.12: Giao diện Trang Cập nhập danh mục 50

Hình 4.13: Giao diện Trang Ẩn danh mục 51

Hình 4.14: Giao diện Trang Quản lý khóa học 51

Hình 4.15: Giao diện Trang Thống kê 52

Trang 17

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT

Trang 18

MỞ ĐẦU

Điều này dẫn tới mong muốn tạo ra một website cho phép người dùng dễ dàng tiếpcận các khóa học lập trình và là nơi để học hỏi kiến thức mới dành cho các bạn sinhviên UTE

Phạm vi nghiên cứu đề tài: Xây dựng hệ thống website chia sẻ khóa học lập trìnhmiễn phí tại trường Đại học Sư phạm Kỹ thuật

Cấu trúc đồ án tốt nghiệp gồm các phần như sau:

nghiên cứu của đề tài Giới thiệu tóm tắt nội dung sẽ được trình bày trong cácchương tiếp theo

đích khi xây dựng và phát triển đề tài Xác định rõ phạm vi và đối tượng hướngđến, giải pháp công nghệ để triển khai, xây dựng đề tài, đồng thời phân tích đặc

tả yêu cầu nghiệp vụ

JavaScript, ReactJS, ExpressJS và hệ quản trị cơ sở dữ liệu SQL Server

chức năng của hệ thống

đã giải quyết đồng thời trình bày các vấn đề vẫn chưa được giải quyết

Trang 19

SVTH: Võ Đình Hoàng Long – GVHD: ThS Nguyễn Thị Hà Quyên

Thuật

CHƯƠNG 1 TỔNG QUAN1.1 Lý do chọn đề tài

Điều này dẫn tới mong muốn tạo ra một website cho phép người dùng dễ dàng tiếpcận các khóa học lập trình và là nơi để học hỏi kiến thức mới dành cho các bạn sinhviên UTE

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

Xây dựng hệ thống website chia sẻ khóa học lập trình miễn phí giúp người dạy lậptrình chia sẻ các khóa học trên hệ thống cũng như là nơi để người học có thể xem, tìmkiếm và thảo luận về lập trình

1.3 Phạm vi đề tài

Áp dụng cho sinh viên có nhu cầu học lập trình và thầy cô, các bạn sinh viên muốnchia sẻ khóa học trong phạm vi trường Đại học Sư phạm Kỹ thuật Đà Nẵng

1.4 Liệt kê người dùng

1.4.1 Người dùng chưa là thành viên

1.4.2 Người dùng thành viên

Người dùng là thành viên vẫn được xem các thông tin chung, được tìm kiếm ….Ngoài ra, người dùng là thành viên còn được thực hiện một số tính năng khác sau khiđăng nhập gồm:

Trang 20

1.4.3 Người chia sẻ khóa học

trên youtube hoặc các nền tảng video được hỗ trợ

Trang 21

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT2.1 Hệ quản trị cơ sở dữ liệu SQL Server

Hình 2.1: Logo SQL Server

2.1.2 SQL Server là gì

SQL server hay còn được gọi là Microsoft SQL Server Đây chính là một loại phầnmềm đã được phát triển bởi Microsoft và nó được sử dụng để có thể dễ dàng lưu trữcho những dữ liệu dựa theo tiêu chuẩn RDBMS

SQL Server có khả năng cung cấp đầy đủ các công cụ cho việc quản lý từ giao diệnGUI đến sử dụng ngôn ngữ cho việc truy vấn SQL Điểm mạnh của SQL điểm mạnhcủa nó là có nhiều nền tảng được kết hợp cùng như: ASP.NET, C# để xây dựngWinform cũng chính nó có khả năng hoạt động độc lập

2.1.3 Đôi nét về lịch sử

Máy chủ cơ sở dữ liệu SQL lần đầu được phát triển bởi Ashton Tate, Sybase vàMicrosoft vào năm 1988 đến năm 1993 và được xây dựng trên hệ điều hành Unix KhiMicrosoft ngày càng thống trị và làm chủ ở thị trường hệ điều hành dành cho máy tínhvào những năm 1990 thì họ đã chuyển trọng tâm sang phát triển SQL Server choWindows, và vào năm 1993 SQL Server lần đầu được Microsoft cho ra mắt để tậndụng lợi thế về giao diện đồ họa trên máy tính

Trang 22

JavaScript chủ yếu được sử dụng cho các website nhằm cung cấp cho người dùngtrải nghiệm thân thiện hơn, bao gồm các chức năng: tự động cập nhật các trang web,cải tiến giao diện người dùng như menu và hộp thoại, animations, đồ họa 2D và 3D,bản đồ tương tác, trình phát video Chế độ sử dụng JavaScript này trong trình duyệtweb cũng được gọi là JavaScript phía máy khách.

JavaScript được bắt đầu vào năm 1995 tại trung tâm Netscape Communications.Vào thời gian này, các nhà sản xuất Netscape nhận ra rằng, việc thêm một "gluelanguage" để nâng cao trải nghiệm người dùng sẽ làm tăng sự tiêu thụ nội dung củangười dùng Vì vậy, họ đã đưa Brendan Eich nhúng vào ngôn ngữ lập trình Scheme.Tuy nhiên, tại thời điểm đó, Java hiện là một ngôn ngữ mới của website, nên họ đãquyết định làm cho ngôn ngữ này gần gũi với cú pháp của Java Kết quả đem lại chính

là JavaScript, với các tính năng của Scheme, định hướng đối tượng của SmallTalk và

cú pháp của Java Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vàotháng 5 năm 1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tênthành JavaScript vào tháng 12 năm 1995

Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện trởthành, một đặc tính kỹ thuật tiêu chuẩn Vào tháng 6 năm 1997, đặc tính kỹ thuậtchính thức

Trang 23

đầu tiên cho ngôn ngữ được phát hành là ECMA-262 Phiên bản mới nhất của ngôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017.

 Virtual DOM (DOM ảo)

ReactJS sẽ sử dụng một DOM ảo và nó là một Object JavaScript chứa đầy đủ thôngtin của website giống như DOM thật, khi có sự tác động đến 1 thành phần của websitethì ReactJS sẽ so sánh DOM ảo với DOM thật để biết được Node nào sẽ thay đổi và

tạo ra 1 ‘bản vá’ nhằm thay đổi dữ liệu ở node đó trên DOM thật Với ReactJS khi có

sự thay đổi ở 1 thành phần, thì website sẽ không tải lại từ đầu mà chỉ thay đổi ở thànhphần yêu cầu, dẫn đến website của chúng ta sẽ hoạt động nhanh hơn và phía servercũng đỡ mất công phải gọi lại các dữ liệu của những thành phần khác

 Component - Based

React được xây dựng xung quanh các component, chứ không dùng template nhưcác framework khác Trong React, chúng ta xây dựng website sử dụng những thànhphần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, vớicác trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứathành phần khác Mỗi component trong ReactJS có một trạng thái riêng, có thể thayđổi, và React

Trang 24

sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ Reactđều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn MộtReactJS component đơn giản chỉ cần một phương thức render Có rất nhiều phươngthức khả dụng khác, nhưng render là phương thức chủ đạo.

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript JSX thựchiện tối ưu hóa trong khi biên dịch sang mã JavaScript Các mã này cho thời gian thựchiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng JavaScript.Ngược với JavaScript, JSX là kiểu được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũngcung cấp tính năng gỡ lỗi khi biên dịch rất tốt JSX kế thừa dựa trên JavaScript, vì vậyrất dễ dàng để cho các lập trình viên JavaScript có thể sử dụng

 Props và State

Props: giúp các component tương tác với nhau, component nhận đầu vào gọi làprops, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến.State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thờirender lại để cập nhật UI

Trước thời điểm năm 2013 việc xây dựng UI cho Facebook hoàn toàn dựa trênframework AngularJS của Google, tuy nhiên sau thời điểm năm 2013 khi lượng ngườidùng trở nên quá lớn và dữ liệu Facebook lưu trữ ngày càng nhiều, kéo theo đó việc xử

lý dữ liệu ở ngoài UI trở nên quá khó khăn vì AngularJS chậm và khá nặng nề

Facebook không thể tìm kiếm được 1 framework nào khác đủ khả năng thay thếcho AngularJS, vậy nên các lập trình viên của Facebook đã tự tạo ra 1 công nghệ mớivới tên gọi React và nó bao gồm 2 phần: ReactJS (dùng cho website app) và ReactNative (dùng cho mobile app) Đến năm 2015 thì Facebook quyết định công bố mãnguồn của React cho cộng đồng và đến nay cộng đồng lập trình viên trên toàn thế giới

đã góp 1 phần công sức không nhỏ giúp cho React ngày 1 hoàn thiện hơn

Trang 25

Vì Express js chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứngdụng website và API trở nên đơn giản hơn với các lập trình viên và nhà pháttriển Expressjs cũng là một khuôn khổ của Node.js do đó hầu hết các mã code đãđược viết sẵn cho các lập trình viên có thể làm việc.

Nhờ có Expressjs mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 website,nhiều website hoặc kết hợp Do có dung lượng khá nhẹ, Expressjs giúp cho việc tổchức các ứng dụng web thành một kiến trúc MVC có tổ chức hơn

Vào năm 2009, TJ Hollowaychuk và Jafar Husain đã hợp tác để tạo ra Express.js.Express.js là một khung công tác web cho Node.js cung cấp một tập hợp các tính năngcho phép nhà phát triển tạo ứng dụng web phía máy chủ Node.js rất hữu ích nhưngvẫn yêu cầu các nhà phát triển sử dụng ngôn ngữ back-end Express.js được tạo ra đểlàm cho Node.js dễ tiếp cận hơn với các nhà phát triển bằng cách cung cấp một tậphợp các tính năng như định tuyến, xử lý các yêu cầu HTTP và các mẫu API

Trang 26

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG3.1 Đặc tả yêu cầu phần mềm (Software Requirements)

3.1.1 Người dùng chưa là thành viên

3.1.1.1 Xem thông tin khóa học

<<extend>>)

3.1.1.2 Tìm kiếm khóa học theo từ khóa nhập vào

 Hỗ trợ tính năng “Lọc” dựa trên kết quả tìm kiếm (sẽ trở thành quan hệ

3.1.2.3 Bình luận ở mỗi bài học

 Người dùng chỉ có thể bình luận ở một bài học khi đã xem bài học đấy (sẽ trở thành quan hệ <<include>>)

3.1.2.4 Xem lịch sử học

3.1.2.5 Thêm khóa học yêu thích

3.1.2.6 Xóa khóa học yêu thích

 Người dùng chỉ có thể xóa khóa học khỏi danh sách yêu thích chỉ khi đã yêu thích khóa học đấy (sẽ trở thành quan hệ <<include>>)

3.1.3 Người quản trị

3.1.3.1 Phê duyệt các khóa học được đăng tải

 Chỉ có thể phê duyệt những khóa học được tạo trên hệ thống (sẽ trở thành quan

hệ <<include>>)

3.1.3.2 Quản lý danh mục

3.1.3.3 Quản lý khóa học

Trang 27

 Chỉ có thể quản lý những khóa học được tạo trên hệ thống (sẽ trở thành quan

hệ <<extend>>)

3.1.3.4 Quản lý người dùng

3.1.4 Người chia sẻ khóa học

3.1.4.1 Tạo khóa học trên hệ thống.

3.1.4.2 Thiết lập trạng thái khóa học của bản thân

 Hỗ trợ tính năng “Thiết lập giới hạn người dùng” cho các khóa học (sẽ trở thành quan hệ <<extend>>)

 Hỗ trợ tính năng “Thêm bài học” cho phép người dùng thêm mới nội dung bài học ở khóa học đã tạo (sẽ trở thành quan hệ <<extend>>)

 Hỗ trợ tính năng “Sửa bài học” cho phép người dùng sửa nội dung bài học ở khóa học đã tạo (sẽ trở thành quan hệ <<extend>>)

 Hỗ trợ tính năng “Ẩn khóa học” cho phép người dùng ẩn khóa học của bản thân không mong muốn (sẽ trở thành quan hệ <<extend>>)

3.2 Sơ đồ Use-case

Hình 3.1: Use-case Diagram

Trang 28

3.3 Kịch bản cho Use-case

3.3.1 Actor Người dùng chưa là thành viên

3.3.1.1 Use-case Đăng ký

Bảng 3.1: Use-case Đăng ký

Tên use case Đăng ký

Mô tả Actor đăng ký tài khoản trên hệ thống với email, tên

người dùng và mật khẩu

Đầu vào Thông tin Actor dùng để đăng ký

Email được đăng ký chưa tồn tại trên hệ thống

Đầu ra Hệ thống thông báo đăng ký thành công

Các bước thực hiện

1 Actor chọn mục “Đăng ký” – bắt đầu usecase

2 Actor nhập email, tên người dùng và mật khẩutrong view Đăng ký

3.3.1.2 Use-case Xem khóa học

Bảng 3.2: Use-case Xem khóa học

Tên use case Xem khóa học

Mô tả Actor xem khóa học được tạo trên hệ thống

Đầu vào Khóa học đã tồn tại trên hệ thống và chưa đến giới hạn

Trang 29

Các trường hợp

ngoại lệ

Khóa học không tồn tại trên hệ thống thì use case dừnglại

3.3.1.3 Use-case Xem bài học

Bảng 3.3: Use-case Xem bài học

Tên use case Xem bài học

Mô tả Actor xem bài học của khóa học được tạo trên hệ thống

Đầu vào Khóa học đã tồn tại trên hệ thống và chưa đến giới hạn người

3 Bấm chọn bài học muốn xem

4 Hệ thống kiểm tra và dẫn người dùng tới trang bài học

Các bước phát sinh Không có

ngoại lệ

Bài học không tồn tại trên hệ thống thì use case dừng lại

3.3.2 Actor Người dùng thành viên

3.3.2.1 Use-case Đăng nhập

Bảng 3.4: Use-case Đăng nhập

Tên use case Đăng nhập

Mô tả Actor đăng nhập vào hệ thống với tên tài khoản và mật khẩu

được đăng ký từ trước

Đầu vào Thông tin Actor đăng nhập

Đã tồn tại một tài khoản người dùng được đăng ký từ trước

Đầu ra Hệ thống thông báo đăng nhập thành công

1 Actor chọn mục “Đăng nhập” – bắt đầu usecase

2 Actor nhập tên tài khoản và mật khẩu trong view đăngnhập

3 Bấm nút Đăng nhập

4 Hệ thống kiểm tra và thông báo đăng nhập thành công

Trang 30

ngoại lệ

Actor nhập sai tên tài khoản hoặc mật khẩu thì use case dừnglại

3.3.2.2 Use-case Đánh giá khóa học

Bảng 3.5: Use-case Đánh giá khóa học

Tên use case Đánh giá khóa học

Mô tả Actor đánh giá khóa học được tạo trên hệ thống

Đầu vào Khóa học đã tồn tại trên hệ thống

Đầu ra Hệ thống thông báo đã đánh giá thành công

Bài đánh giá được lưu trữ trong hệ thống

5 Hệ thống kiểm tra và thông báo đánh giá thành công

ngoại lệ

Khóa học không tồn tại trên hệ thống thì use case dừng lại

3.3.2.3 Use-case Bình luận bài học

Bảng 3.6: Use-case Bình luận bài học

Tên use case Bình luận bài học

Mô tả Actor đánh giá bài học của khóa học được tạo trên hệ thống

Đầu vào Khóa học đã tồn tại trên hệ thống.

Bài học đã tồn tại trên hệ thống

Đầu ra Hệ thống thông báo đã bình luận thành công

Bài bình luận được lưu trữ trong hệ thống

1 Actor chọn khóa học ở trang chính – bắt đầu usecase

2 Bấm nút “Xem khóa học”

3 Chọn bài học muốn xem

4 Actor bình luận bài học

5 Bấm nút “Bình luận”

6 Hệ thống kiểm tra và thông báo bình luận thành công

Trang 31

Tên use case Bình luận bài học

Mô tả Actor xem lịch sử bài học của khóa học đã học trên hệ thống

Đầu vào

Khóa học đã tồn tại trên hệ thống

Bài học đã tồn tại trên hệ thốngNgười dùng đã xem bài học của khóa học

Đầu ra Hệ thống hiển thị thông tin ngày học gần nhất và tiến độ khóa

học của người dùng

1 Actor chọn khóa học ở trang chính – bắt đầu usecase

2 Bấm nút Xem khóa học

3 Chọn bài học muốn xem

4 Hệ thống kiểm tra, ghi lại lịch sử học và hiển thị ở lịch

3.3.2.5 Use-case Yêu thích khóa học

Bảng 3.8: Use-case Yêu thích khóa học

Tên use case Yêu thích khóa học

Mô tả Actor thêm khóa học đã tồn tại trên hệ thống vào danh sách

yêu thích

Đầu vào Khóa học đã tồn tại trên hệ thống.

Tài khoản người dùng đã tồn tại trên hệ thống

Đầu ra Hệ thống thêm khóa học vào danh sách yêu thích của người

dùng

Các bước thực hiện 1 Actor chọn khóa học ở trang chính – bắt đầu usecase

Trang 32

3.3.2.6 Use-case Bỏ yêu thích khóa học

Bảng 3.9: Use-case Bỏ yêu thích khóa học

Tên use case Bỏ yêu thích khóa học

Mô tả Actor xóa khóa học khỏi danh sách yêu thích

Đầu vào

Khóa học đã tồn tại trên hệ thống

Người dùng đã thêm khóa học vào danh sách yêu thíchTài khoản người dùng đã tồn tại trên hệ thống

Đầu ra Hệ thống xóa khóa học khỏi danh sách yêu thích của người

3.3.2.7 Use-case Xem thông tin cá nhân

Bảng 3.10: Use-case Xem thông tin cá nhân

Tên use case Xem thông tin cá nhân

Mô tả Actor xem thông tin cá nhân

Đầu vào Tài khoản người dùng đã tồn tại trên hệ thống

Người dùng đã đăng nhập thành công

Đầu ra Hệ thống hiển thị thông tin cá nhân của người dùng

Trang 33

1 Actor chọn mục tài khoản ở phần cá nhân – bắt đầuusecase

2 Chọn mục “Cá nhân”

3 Hệ thống hiển thị thông tin cá nhân của người dùng

ngoại lệ

Người dùng không tồn tại trên hệ thống hoặc chưa đăng nhậpthì use case dừng lại

3.3.2.8 Use-case Cập nhập thông tin cá nhân

Bảng 3.11: Use-case Cập nhập thông tin cá nhân

Tên use case Cập nhập thông tin cá nhân

Mô tả Actor cập nhập thông tin cá nhân

Đầu vào Tài khoản người dùng đã tồn tại trên hệ thống

Người dùng đã đăng nhập thành công

Đầu ra Hệ thống cập nhập thông tin cá nhân của người dùng

1 Actor chọn mục tài khoản ở phần cá nhân – bắt đầuusecase

2 Chọn mục “Cá nhân”

3 Hệ thống hiển thị thông tin cá nhân của actor

4 Actor cập nhập thông tin cá nhân

5 Hệ thống cập nhập thông tin cá nhân của actor

ngoại lệ

Người dùng không tồn tại trên hệ thống hoặc chưa đăng nhậpthì use case dừng lại

Trang 34

3.3.3 Actor Người chia sẻ khóa học

3.3.3.1 Use-case Tạo khóa học

Bảng 3.12: Use-case Tạo khóa học

Tên use case Tạo bài học

Mô tả Actor tạo khóa học trên hệ thống

Đầu vào Thông tin và nội dung khóa học

Nội dung các bài học của khóa học

Đầu ra Hệ thống kiểm tra và thêm khóa học vào danh sách chờ phê

duyệt của Admin

1 Người dùng chọn tạo khóa học ở view “Chia sẻ” – bắtđầu usecase

2 Nhập thông tin và nội dung khóa học

3 Tạo nội dung cho các bài học của khóa

4 Kiểm tra thông tin vừa tạo

5 Hệ thống kiểm tra và thêm khóa học vào danh sách chờphê duyệt của Admin

Tên use case Ẩn khóa học

Mô tả Actor ẩn khóa học trên hệ thống

Đầu ra Hệ thống kiểm tra và ẩn khóa học

1 Người dùng chọn danh sách khóa học ở view “Chia sẻ”– bắt đầu usecase

2 Chọn khóa học cần ẩn đi

3 Hệ thống kiểm tra và thông báo ẩn khóa học thành công

Trang 35

Tên use case Ẩn bài học

Mô tả Actor ẩn bài học trên hệ thống

Đầu ra Hệ thống kiểm tra và ẩn bài học của khóa học

4 Hệ thống kiểm tra và thông báo ẩn bài học thành công

ngoại lệ

3.3.3.4 Use-case Sửa bài học

Bảng 3.15: Use-case Sửa bài học

Tên use case Sửa bài học

Mô tả Actor sửa bài học trên hệ thống

Đầu vào

Khóa học đã tồn tại trên hệ thốngNội dung cần chỉnh sửa

Đầu ra Hệ thống kiểm tra và sửa bài học của khóa học

4 Nhập thông tin cần sửa

5 Hệ thống kiểm tra và thông báo ẩn bài học thành công

Trang 36

ngoại lệ

3.3.3.5 Use-case Thêm mới bài học

Bảng 3.16: Use-case Thêm mới bài học

Tên use case Thêm mới bài học

Mô tả Actor thêm mới bài học trên hệ thống

Đầu ra Hệ thống kiểm tra và thêm mới bài học của khóa học

4 Nhập thông tin bài học

5 Hệ thống kiểm tra và thông báo thêm mới bài học thànhcông

3.3.4 Actor Người quản trị

3.3.4.1 Use-case Phê duyệt

Bảng 3.17: Use-case Phê duyệt

Tên use case Phê duyệt khóa học

Mô tả Actor phê duyệt khóa học được tạo trên hệ thống

Đầu vào Khóa học đã được tạo trên hệ thống

Đầu ra Hệ thống kiểm tra và thêm khóa học vào danh sách tồn tại

1 Actor chọn “Danh sách khóa học” ở view “Quản trị” –bắt đầu usecase

2 Chọn mục “Chưa duyệt”

3 Phê duyệt khóa học phù hợp

4 Hệ thống kiểm tra và thông báo thêm khóa học vào danhsách tồn tại

Tiêu đề	Xây Dựng Hệ Thống Website Chia Sẻ Khóa Học Lập Trình Miễn Phí Tại Trường Đại Học Sư Phạm Kỹ Thuật
Tác giả	Võ Đình Hoàng Long
Người hướng dẫn	ThS. Nguyễn Thị Hà Quyên
Trường học	Đại học sư phạm kỹ thuật
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2022
Thành phố	Đà Nẵng

Định dạng
Số trang	72
Dung lượng	8,83 MB