Xây dựng hệ thống website chia sẻ khóa học hướng dẫn chăm sóc cây trồng miễn phí tại tỉnh gia lai

Em đã tìm hiểu và cài đặt hệ thống website chia sẻ khóa học hướng dẫn chămsóc cây trồng miễn phí dành cho người dùng tại tỉnh Gia Lai giúp cho mọi người cóthêm kiến thức về chăm sóc cây

Trang 1

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

PHÍ TẠI TỈNH GIA LAI

Sinh viên thực hiện : Võ Văn Thành

Trang 2

Đà Nẵng, tháng 06/2022

Trang 3

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

PHÍ TẠI TỈNH GIA LAI

Giảng viên hướng dẫn duyệt

Trang 4

Đà Nẵng, tháng 06/2022

Trang 5

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

Trang 6

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

Trang 7

có 1 trang web nào cụ thể về chia sẻ chăm sóc cây trồ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àngtiếp cận các khóa học chăm sóc cây trồng miễn phí và là nơi để học hỏi kiến thức mớidành cho các anh, chị, chú, bác nông dân tại tỉnh Gia Lai Đồng thời cũng là nơi chocác bác nông dân chia sẻ kinh nghiệm cách chăm sóc cây trồng của mình cho mọingười Em đã tìm hiểu và cài đặt hệ thống website chia sẻ khóa học hướng dẫn chămsóc cây trồng miễn phí dành cho người dùng tại tỉnh Gia Lai giúp cho mọi người cóthêm kiến thức về chăm sóc cây trồng tại tỉnh Gia Lai, mong muốn mọi người nângcao kiến thức chăm sóc cây trồng và thu được sản phẩm tốt đem lại lợi ích cho cá nhân

và cộng đồng

Bài báo cáo ngoài các nội dung gồm phần mở đầu, kết luận và hướng phát triểnthì có bố cục 3 chương:

- Chương 1: Cơ Sở Lý Thuyết

 Chương này trình bày tổng quan về việc sử dụng các phần mềm hỗ trợ xâydựng ứng dụng, các công cụ thường xuyên sử dụng để xây dựng nền tảngcho bài toán Mô tả một số công nghệ mới hỗ trợ phát triển ứng dụng

- Chương 2: Phân Tích Thiết Kế Hệ Thống

 Chương này trình bày một hướng tiếp cận trong việc phân tích hệ thống.Trình bày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữliệu…

- Chương 3: Xây Dựng Chương Trình

 Chương này trình bày công cụ sử dụng để xây dựng chương trình và sảnphẩm của chương trình đã hoàn thiện

Trang 8

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: PSG.TS Phan Huy Khánh

Sinh viên thực hiện: Võ Văn Thành Mã SV: 1811505310341

1 Tên đề tài:

Xây dựng hệ thống website chia sẻ khóa học hướng dẫn chăm sóc cây trồng miễnphí tại tỉnh Gia Lai

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à các videotrên youtube do bà con nông dân chia sẻ và các chuyên gia trong nông nghiệp

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

 Mở đầu

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

 Chương 2: Phân tích thiết kế hệ thống

 Chương 3: Xây dựng chương trình

 Kết luận và hướng phát triển

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

 Cơ sở dữ liệu và các file báo cáo hoàn chỉnh

 Hệ thống website đáp ứng các tốt các mục tiêu đề ra trên, giao diện thân thiện

Trang 9

LỜI NÓI ĐẦU

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cảchiều rộ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àđang ngà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ông chỉ ở công sở mà còn ngay cả trong gia đình

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ệncác giả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ênInternet 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ầmquan 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ốimạng Internet 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ạn chỉ 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áchoạt động sẽ thực hiện ngay trên hệ thống đó

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

có 1 trang web nào cụ thể về chia sẻ chăm sóc cây trồ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àngtiếp cận các khóa học chăm sóc cây trồng miễn phí và là nơi để học hỏi kiến thức mớidành cho các anh, chị, chú, bác nông dân tại tỉnh Gia Lai Đồng thời cũng là nơi chocác bác nông dân chia sẻ kinh nghiệm cách chăm sóc cây trồng của mình cho mọingười Em đã tìm hiểu và cài đặt hệ thống website chia sẻ khóa học hướng dẫn chămsóc cây trồng miễn phí dành cho người dùng tại tỉnh Gia Lai giúp cho mọi người cóthêm kiến thức về chăm sóc cây trồng tại tỉnh Gia Lai, mong muốn mọi người nângcao kiến thức chăm sóc cây trồng và thu được sản phẩm tốt đem lại lợi ích cho cá nhân

và cộng đồng

Với sự hướng dẫn tận tình của Thầy Phan Huy Khánh em đã hoàn thành đồ án tốtnghiệ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 !

i

Trang 10

ii

Trang 11

CAM ĐOAN

Em xin cam đoan :

 Những nội dung trong báo cáo này do em thực hiện dưới sự hướng dẫn củaPGS TS Phan Huy Khánh

 Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên côngtrình, thời gian, địa điểm công bố

 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, chúng emxin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

iii

Trang 12

MỤC LỤC

MỤC LỤC iii

DANH MỤC BẢNG BIỂU viii

DANH MỤC HÌNH VẼ ix

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT xi

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH xii

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

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

a Đối tượng nghiên cứu 2

b Phạm vi nghiên cứu 2

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

a Phương pháp thu thập 2

b Phương pháp xử lý thông tin 2

4 Giải pháp công nghệ 2

5 Cấu trúc đồ án 2

Chương 1 CƠ SỞ LÝ THUYẾT 4

1.1 Phần mềm 4

1.1.1 Visual Studio Code 4

1.1.2 Postman 5

1.2 Công nghệ 6

1.2.1 NodeJS 6

1.2.2 Ngôn ngữ lập trình JavaScript 7

1.2.3 Hệ quản trị cơ sở dữ liệu no SQL MongoDB 8

1.2.4 ReactJS 9

1.2.5 ExpressJS 10

1.3 Kết luận chương 1 11

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12

iv

Trang 13

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

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

2.1.1.1 Xem thông tin khóa học 12

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

2.1.1.3 Đăng ký tài khoản làm thành viên 12

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

2.1.2.1 Đăng nhập 12

2.1.2.2 Đánh giá khóa học 12

2.1.2.3 Bình luận ở mỗi khóa học 12

2.1.2.4 Thêm khóa học vào khóa học đã lưu 12

2.1.2.5 Xóa khóa học đã lưu 12

2.1.3 Người quản trị 12

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

2.1.3.2 Quản lý danh mục 13

2.1.3.3 Quản lý khóa học 13

2.1.3.4 Quản lý người dùng 13

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

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

2.1.4.2 Chỉnh sửa khóa học 13

2.1.4.3 Thêm bài học cho khóa học 13

2.1.4.4 Chỉnh sửa bài học của khóa học 13

2.1.4.5 Xóa bài học của khóa học 13

2.2 Sơ đồ Use-case 14

2.3 Kịch bản cho Use-case 14

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

2.3.1.1 Use-case Đăng ký 14

2.3.1.2 Use-case Xem khóa học 15

2.3.1.3 Use-case Xem bài học của khóa học 15

v

Trang 14

2.3.2 Actor người dùng thành viên 16

2.3.2.1 Use-case Đăng nhập 16

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

2.3.2.3 Use-case Bình luận khóa học 17

2.3.2.4 Use-case lưu khóa học 17

2.3.2.5 Use-case Bỏ lưu khóa học 18

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

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

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

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

2.3.3.2 Use-case Xóa khóa học 20

2.3.3.3 Use-case Sửa khóa học 20

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

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

2.3.4 Actor Người quản trị 22

2.3.4.1 Use-case Phê duyệt 22

2.3.4.2 Use-case Tạo tài khoản người dùng 22

2.3.4.3 Use-case Thêm danh mục 23

2.3.4.4 Use-case Sửa danh mục 23

2.3.4.5 Use-case Xóa danh mục 24

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

2.4.1 Actor người dùng thành viên 25

2.4.1.1 Use-case Xem Khóa học 25

2.4.1.2 Use-case Xem Bài học 26

2.4.1.3 Use-case Cập nhật thông tin cá nhân 27

2.4.2 Actor người chia sẻ khóa học 28

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

2.4.2.2 Use-case Tạo bài học của khóa học 29

vi

Trang 15

2.4.3 Actor Quản trị viên 30

2.4.3.1 Use-case Duyệt khóa học 30

2.4.3.2 Use-case Quản lý danh mục 31

2.4.3.3 Use-case Quản lý người dùng 32

2.5 Sơ đồ ERD 33

2.6 Mô hình khái niệm (Domain Model) 33

2.6.1 Xác định các lớp ứng viên 33

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

2.7 Sơ đồ Robustness Diagram 35

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

2.7.2 Robustness Diagram cho usecase Bình luận khóa học 35

2.7.3 Robustness Diagram cho usecase Thêm khóa học 36

2.7.4 Robustness Diagram cho usecase Cập nhập khóa học 36

2.7.5 Robustness Diagram cho usecase Duyệt khóa học 37

2.7.6 Robustness Diagram cho usecase Cập nhập bài học 37

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 38

3.1 Công cụ xây dựng chương trình 38

3.2 Giao diện chương trình 38

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

3.2.2 Giao diện Trang Đăng ký 39

3.2.3 Giao diện Trang chủ 40

3.2.4 Giao diện Trang chi tiết khóa học 41

3.2.5 Giao diện Trang chi tiết bài học 42

3.2.6 Giao diện Trang khóa học của bạn ( Người chia sẻ) 42

3.2.6.1 Giao diện Trang Thêm khóa học 42

3.2.6.2 Giao diện Trang thêm bài học của khóa học 43

3.2.6.3 Giao diện Trang Cập nhật khóa học 43

3.2.6.4 Giao diện Trang chỉnh sửa bài học của khóa học 44

vii

Trang 16

3.2.7 Giao diện Trang Khóa học đã lưu (Người dùng) 45

3.2.8 Giao diện Trang bình luận khóa học 46

3.2.9 Giao diện chỉnh sửa bình luận 46

3.2.10 Giao diện đánh giá khóa học 47

3.2.11 Giao diện trang chỉnh sửa đánh giá khóa học 47

3.2.12 Giao diện Trang lọc theo danh mục cây trồng 48

3.2.13 Giao diện Trang tìm kiếm khóa học 48

3.2.14 Giao diện Trang Thông tin cá nhân 49

3.2.15 Giao diện Trang Quản lý người dùng 49

3.2.16 Giao diện Trang Thêm người dùng 50

3.2.17 Giao diện Trang quản lí khóa học 50

3.2.18 Giao diện Trang xem thông tin khóa học 51

3.2.19 Giao diện trang duyệt và xóa khóa học 51

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

3.2.21 Giao diện Trang cập nhật thông tin quản trị viên 52

3.2.22 Giao diện Trang quản lí video 53

3.2.23 Giao diện Trang Quản lý danh mục 53

3.2.24 Giao diện Trang Thêm danh mục 54

3.2.25 Giao diện Trang Cập nhập danh mục 54

3.2.26 Giao diện Trang Thống kê 55

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 56

3.3 Kết luận 56

3.4 Hướng phát triển 56

TÀI LIỆU THAM KHẢO 57

DANH MỤC BẢNG BIỂ

viii

Trang 17

Bảng 2.1: Use-case Đăng ký 14Bảng 2.2: Use-case Xem khóa học 15Bảng 2.3: Use-case Xem bài học của khóa học 15Bảng 2.4: Use-case Đăng nhập 16Bảng 2.5: Use-case Đánh giá khóa học 16Bảng 2.6: Use-case Bình luận khóa học 17Bảng 2.7: Use-case lưu khóa học 17Bảng 2.8: Use-case Bỏ lưu khóa học 18Bảng 2.9: Use-case Xem thông tin cá nhân 18Bảng 2.10: Use-case Cập nhập thông tin cá nhân 19Bảng 2.11: Use-case Tạo khóa học 19Bảng 2.12: Use-case Xóa khóa học 20Bảng 2.13: Use-case Sửa khóa học 20Bảng 2.14: Use-case Sửa bài học 21Bảng 2.15: Use-case Thêm mới bài học 21Bảng 2.16: Use-case Phê duyệt 22Bảng 2.17: Use-case Tạo tài khoản người dùng 22Bảng 2.18: Use-case Thêm danh mục 23Bảng 2.19: Use-case Sửa danh mục 23Bảng 2.20: Use-case Xóa danh mục 24

ix

Trang 18

DANH MỤC HÌNH VẼ

Hình 1.1: Giao diện Visual Studio Code 4

Hình 1.2: Giao diện Postman 5

Hình 1.3: Minh hoạ NodeJS 6

Hình 1.4: Logo JavaScript 7

Hình 1.5: Logo MongoDB 8

Hình 1.6: Logo ReactJS 9

Hình 1.7: Logo ExpressJS 10

Hình 2.1: Use-case Diagram 14

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

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

Hình 2.4: Sơ đồ hoạt động cho usecase Cập nhật thông tin cá nhân 27

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

Hình 2.6: Sơ đồ hoạt động cho usecase Tạo bài học của khóa học 29

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

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

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

Hình 2.10: Sơ đồ ERD 33

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

Hình 2.12: Sơ đồ lớp 34

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

Hình 2.14: Sơ đồ Robustness cho usecase Bình luận khóa học 35

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

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

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

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

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

Hình 3.2: Giao diện Trang Đăng ký 39

Hình 3.3: Giao diện Trang chủ 40

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

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

Hình 3.6: Giao diện Trang Thêm khóa học 42

Hình 3.7: Giao diện Trang thêm bài học của khóa học 43

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

Hình 3.9: Giao diện Trang chỉnh sửa bài học của khóa học 44

x

Trang 19

Hình 3.10: Giao diện Trang khóa học đã lưu 45

Hình 3.11: Giao diện Trang bình luận khóa học 46

Hình 3.12: Giao diện Trang chỉnh sửa bình luận 46

Hình 3.13: Giao diện Trang đánh giá khóa học 47

Hình 3.14: Giao diện trang chỉnh sửa đánh giá khóa học 47

Hình 3.15: Giao diện lọc theo danh mục cây trồng 48

Hình 3.16: Giao diện Trang tìm kiếm khóa học 48

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

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

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

Hình 3.20: Giao diện Trang quản lí khóa học 50

Hình 3.21: Giao diện trang xem thông tin khóa học 51

Hình 3.22: Giao diện trang duyệt và xóa khóa học 51

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

Hình 3.24: Giao diện trang cập nhật thông tin quản trị viên 52

Hình 3.25: Giao diện Trang quản lí video 53

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

Hình 3.27: Giao diện Trang Thêm danh mục 54

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

Hình 3.29: Giao diện Trang Thống kê 55

xi

Trang 20

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT

Stt Chữ viết tắt Giải nghĩa

1 SVTH Sinh viên thực hiện

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

xii

Trang 21

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

Stt Chữ viết tắt Giải nghĩa Nghĩa tiếng Việt

1 HTML Hyper Text Markup

Language Ngôn ngữ đánh dấu siêu văn bản

2 ERD Entity RelationshipDiagram Sơ đồ quan hệ

3 UI User Interface Giao diện người dùng

4 DOM DocumentModel Object Mô hình Đối tượng Tài liệu

5 API ApplicationProgramming Interface Giao diện lập trình ứng dụng

6 MVC Model-View-Controller Mẫu kiến trúc phần mềm, dữ liệu

-giao diện – bộ điều khiển

xiii

Trang 22

Xây dựng hệ thống website chia sẻ khóa học hướng dẫn chăm sóc cây trồng miễn phí tại Tỉnh Gia Lai

1 Mục tiêu đề tài

Xây dựng hệ thống website chia sẻ khóa học hướng dẫn chăm sóc cây trồng miễnphí dành cho người dùng tại tỉnh Gia Lai giúp cho mọi người có thêm kiến thức vềchăm sóc cây trồng tại tỉnh Gia Lai, mong muốn mọi người nâng cao kiến thức chămsóc cây trồng và thu được sản phẩm tốt đem lại lợi ích cho cá nhân và cộng đồng

Hệ thống website chia sẻ khóa học hướng dẫn chăm sóc cây trồng miễn phí tạitỉnh Gia Lai giúp:

- Người chia sẻ khóa học hướng dẫn chăm sóc cây trồng:

 Tạo khóa học trên hệ thống và video với nội dung chính sẽ được nhúngvideo trên youtube hoặc các nền tảng video được hỗ trợ

 Quản lý khóa học hướng dẫn chăm sóc cây trồng của bản thân

- Người quản trị viên:

 Phê duyệt các khóa học hướng dẫn chăm sóc cây trồng được đăng tải

 Quản lý danh mục

 Thiết lập trạng thái, thông tin và thêm người dùng, người chia sẻ

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

 Đăng ký tài khoản trên hệ thống

 Xem, tìm kiếm các khóa học hướng dẫn chăm sóc cây trồng

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

 Đăng nhập trên hệ thống

 Xem và tìm kiếm các khóa học hướng dẫn chăm sóc cây trồng

 Đánh giá và nhận xét với mỗi khóa học hướng dẫn chăm sóc cây trồng

 Thêm khóa học vào khóa học đã lưu

SVTH: Võ Văn Thành GVHD: PGS.TS Phan Huy Khánh 1

Trang 23

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

a Đối tượng nghiên cứu

Tất cả người nông dân, người theo hướng nông nghiệp tại tỉnh Gia Lai

b Phạm vi nghiên cứu

Đề tài áp dụng cho khu vực tỉnh Gia Lai

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

a Phương pháp thu thập

- Tìm kiếm thông tin, tài liệu trên các website

- Nghiên cứu các website chia sẻ khóa học hiện đã có trên thị trường

b Phương pháp xử lý thông tin

- Xác định yêu cầu của đề tài từ đó chọn lọc những thông tin cần thiết

- Phân tích, đánh giá độ chính xác của các thông tin tìm được

- Tổng hợp những thông tin tìm được để hoàn thiện đề tài

Cấu trúc báo cáo đồ án bao gồm:

- Mở đầu: Giới thiệu lý do và các mục tiêu mà đề tài cần giải quyết Giới thiệutóm tắt nội dung sẽ được trình bày trong các chương tiếp theo

- Chương 1: Cơ Sở Lý Thuyết

 Chương này trình bày tổng quan về việc sử dụng các phần mềm hỗ trợ xâydựng ứng dụng, các công cụ thường xuyên sử dụng để xây dựng nền tảngcho bài toán Mô tả một số công nghệ mới hỗ trợ phát triển ứng dụng

- Chương 2: Phân Tích Thiết Kế Hệ Thống

 Chương này trình bày một hướng tiếp cận trong việc phân tích hệ thống.Trình bày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữliệu…

- Chương 3: Xây Dựng Chương Trình

Trang 24

 Chương này trình bày công cụ sử dụng để xay dựng chương trình và sảnphẩm của chương trình đã hoàn thiện

- Cuối cùng là kết luận và hướng phát triển

 Trình bày kết luận và hướng phát triển của hệ thống website trong tương lai

Trang 25

Chương 1

CƠ SỞ LÝ THUYẾT

1.1 Phần mềm

1.1.1 Visual Studio Code

Visual Studio Code là một trong những trình soạn thảo mã nguồn phổ biến nhấthiện nay được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiềutính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến Visual StudioCode ngày càng chứng tỏ ưu thế vượt trội của mình so với những phần mềm khác vàđược ứng dụng rộng rãi

Hình 1.1.1.1.1.1: Giao diện Visual Studio Code

Visual Studio Code hỗ trợ chức năng Debug, đi kèm với Git, có SyntaxHighlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tínhnăng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi Theme, phímtắt, và các tùy chọn khác

Một số tính năng vượt trội của Visual Studio Code:

- Hỗ trợ nhiều ngôn ngữ lập trình

- Hỗ trợ đa nền tảng

- Cung cấp kho tiện ích mở rộng

- Kho lưu trữ an toàn

- Hỗ trợ web

- Lưu trữ dữ liệu dưới dạng phân cấp

Trang 26

- Hỗ trợ nhắc Code

- Hỗ trợ thiết bị đầu cuối

- Intellisense chuyên nghiệp

Postman có sẵn nhiều phiên bản cho các hệ điều hành và môi trường khác nhau

Đó cùng là điểm khiến nó trở nên phổ biến hơn

Postman hỗ trợ tất cả các phương thức HTTP (GET, POST, PUT, PATCH,DELETE, …) Bên cạnh đó, nó còn cho phép lưu lại lịch sử các lần request, rất tiệncho việc sử dụng lại khi cần

Hình 1.1.1.1.1.2: Giao diện Postman

Những lợi ích khi sử dụng Postman:

- Sử dụng Collections (Bộ sưu tập) – Postman cho phép người dùng tạo bộ sưutập cho các lệnh gọi API của họ Mỗi bộ sưu tập có thể tạo các thư mục con và nhiềuyêu cầu (request) Điều này giúp việc tổ chức các bộ thử nghiệm

- Collaboration – Collections và environment có thể được import hoặc exportgiúp chia sẻ tệp dễ dàng

Trang 27

- API Testing – Test trạng thái phản hồi HTTP

- Gỡ lỗi – Bảng điều khiển Postman giúp kiểm tra dữ liệu nào đã được truy xuấtgiúp dễ dàng gỡ lỗi kiểm tra

1.2 Công nghệ

1.2.1 NodeJS

NodeJS[5] là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8Engine, nó được sử dụng để xây dựng các ứng dụng web như các trang video clip, cácforum và đặc biệt là trang mạng xã hội phạm vi hẹp NodeJS là một mã nguồn mởđược sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới

Hình 1.2.1.1.1.1: Minh hoạ NodeJS

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window chotới Linux, MacOS nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phongphú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thờigian ở mức thấp nhất

Các đặc tính của NodeJS:

- Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ blocking), nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu

(none-về Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các

sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước

- Chạy rất nhanh: NodeJS được xây dựng dựa vào nền tảng V8 Javascript Enginenên việc thực thi chương trình rất nhanh

- Đơn luồng nhưng khả năng mở rộng cao: NodeJS sử dụng một mô hình luồngduy nhất với sự kiện lặp Cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng mộtcách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược vớicác máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu NodeJS sử dụng mộtSVTH: Võ Văn Thành GVHD: PGS.TS Phan Huy Khánh 6

Trang 28

chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một

số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTPServer

- Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng nàychủ yếu là đầu ra dữ liệu

- Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License

Có 2 NodeJS framework được sử dụng phổ biến là Express và SocketIO, đồ ánnày sử dụng Express

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

Hình 1.2.2.1.1.1: Logo JavaScript

JavaScript[6] là ngôn ngữ lập trình, được hỗ trợ bởi hầu hết các trình duyệtwebsite: Chrome, Firefox, Safari, Internet Explorer, Edge, Opera, Hầu hết các trìnhduyệt di động cho điện thoại thông minh đều hỗ trợ JavaScript

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

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

- 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ào

Trang 29

thá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ật chínhthức đầu tiên cho ngôn ngữ được phát hành là ECMA-262 Phiên bản mới nhất củangôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017

1.2.3 Hệ quản trị cơ sở dữ liệu no SQL MongoDB

Hình 1.2.3.1.1.1: Logo MongoDB

MongoDB[3] là một database hướng tài liệu (document), một dạng NoSQLdatabase Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database đểthích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON.MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection

sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trongdocument kiểu JSON nên truy vấn sẽ rất nhanh

MongoDB đã trở thành một trong những NoSQL database nổi trội nhất bấy giờ,được dùng làm backend cho rất nhiều website như eBay, SourceForge và The NewYork Times

- MongoDB được bắt đầu phát triển vào đầu năm 2007 khi công ty 10gen đangphát triển một nền tảng tương tự dịch vụ Azure của Microsoft Công ty 10gen là mộtcông ty phần mềm có trụ sở tại New York, nay được đổi tên thành MongoDB Inc.Việc phát triển ban đầu tập trung vào xây dựng PaaS (một nền tảng dịch vụ) nhưng sau

đó vào năm 2009, MongoDB đã xuất hiện trên thị trường như một dự án mã nguồn mởmáy chủ cơ sở dữ liệu và được duy trì bởi chính tổ chức này

Trang 30

- Tháng 3 năm 2010, MongoDB Inc đã tung ra sản phẩm sẵn sàng đầu tiên của

mình là phiên bản 1.4 Phiên bản ổn định tiếp theo của MongoDB là phiên bản 2.4.9

được phát hành vào ngày 10 tháng 1 năm 2014

- Đầu năm 2015, phiên bản 3.0 được phát hành, cuối năm 2015 phiên 3.2 ra đời

đi kèm với công cụ quản trị trên giao diện đồ họa MongoDB Compass

1.2.4 ReactJS

Hình 1.2.4.1.1.1:

Logo ReactJSReactJS[1] là 1 thư viện JavaScript sử dụng để xây dựng UI cho website theo

đúng xu hướng Single Page Applications Hiện có rất nhiều framework hỗ trợ cho việc

này, tuy nhiên ở các framework khác như AngularJS thì cho phép người dùng nhúng

code Javascript vào code HTML còn ReactJS thì hoàn toàn ngược lại, nó cho phép bạn

nhúng code HTML vào code Javascript nhờ vào JSX Riêng điều này cũng không

khiến ReactJS trở nên vượt trội hơn hẳn các framework khác mà điều đặc biệt ở

ReactJS là những thứ sau đây:

- Virtual DOM (DOM ảo)

ReactJS sẽ sử dụng một DOM ảo và nó là một Object JavaScript chứa đầy đủ

thông tin của website giống như DOM thật, khi có sự tác động đến 1 thành phần của

website thì 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ành phần yêu cầu, dẫn đến website của chúng ta sẽ hoạt động nhanh hơn và phía

server cũ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ành

phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với

cá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ứa

Trang 31

thà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 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ột ReactJS component đơn giản chỉ cần một phương thức render Có rấtnhiều phương thức khả dụng khác, nhưng render là phương thức chủ đạo

- JSX

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript JSXthực hiện tối ưu hóa trong khi biên dịch sang mã JavaScript Các mã này cho thời gianthực hiệ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

1.2.5 ExpressJS

Hình 1.2.5.1.1.1: Logo ExpressJS

Expressjs [2] hay còn được viết là Express js, Express.js Đây là một framework

mã nguồn mở miễn phí cho Node.js Express.js được sử dụng trong thiết kế và xâydựng các ứng dụng website một cách đơn giản và nhanh chóng

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át triể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ếtsẵ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

Trang 32

- Ý tưởng đằng sau Node.js là để các nhà phát triển có thể tạo các ứng dụngwebsite phía máy chủ mà không phải lo lắng về ngôn ngữ backend vì các nhà pháttriển có thể sử dụng JavaScript trên cả phía máy chủ và phía máy khách Node.js đã cóthể tạo một ứng dụng thời gian thực, nhanh chóng, sử dụng nhiều dữ liệu do vòng lặp

sự kiện không đồng bộ của nó Node.js kể từ đó đã được sử dụng cho các trang web,ghi dữ liệu, ứng dụng trò chuyện và các ứng dụng khác

- Vào năm 2009, TJ Hollowaychuk và Jafar Husain đã hợp tác để tạo raExpress.js Express.js là một khung công tác web cho Node.js cung cấp một tập hợpcác tính năng cho 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ưng vẫn yêu cầu các nhà phát triển sử dụng ngôn ngữ back-end Express.js đượctạ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ấpmột tập hợ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

1.3 Kết luận chương 1

Chương 1 trình bày tổng quan về các phần mềm hỗ trợ xây dựng ứng dụng và cáccông nghệ được sử dụng, ưu nhược điểm của từng phần mềm và đôi nét về lịch sử củacông nghệ

Trang 33

Chương 2

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

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

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

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

 Hỗ trợ tính năng “Xem bài học” của khóa học (sẽ trở thành quan hệ <<extend>>)

2.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ệ

2.1.2.3 Bình luận ở mỗi khóa học

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

2.1.2.4 Thêm khóa học vào khóa học đã lưu

2.1.2.5 Xóa khóa học đã lưu

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

2.1.3 Người quản trị

2.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>>)

Trang 34

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

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

2.1.4.3 Thêm bài học cho khóa học

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

2.1.4.4 Chỉnh sửa bài học của khóa học

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

2.1.4.5 Xóa bài học của khóa học

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

Trang 35

2.2 Sơ đồ Use-case

Hình 2.2.1.1.1.1: Use-case Diagram 2.3 Kịch bản cho Use-case

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

Đầu vào Thông tin Actor dùng để đăng ký Email, tên tài khoản

đượ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, tên tài khoản, loại tài khoản, ngày sinh và mật khẩu trong view Đăng ký

3 Bấm nút “Đăng ký”

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

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

Các trường hợp Actor nhập sai thông tin hoặc tài khoản email đã tồn

Trang 36

ngoại lệ tại thì use case dừng lại

2.3.1.2 Use-case Xem khóa học

Bảng 2.3.1.2.1.1.1: 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à đã được quản trị

viên duyệt để hiển thị ra hệ thống

Đầu ra Thông tin khóa học và các đánh giá của khóa học

2.3.1.3 Use-case Xem bài học của khóa học

Bảng 2.3.1.3.1.1.1: Use-case Xem bài học của khóa 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ệ

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

Trang 37

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

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

Bảng 2.3.2.2.1.1.1: 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

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 Actor đánh giá và cho điểm khóa học

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

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 casedừng lại

2.3.2.3 Use-case Bình luận khóa học

Bảng 2.3.2.3.1.1.1: Use-case Bình luận khóa học

Tên use case Bình luận 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 đã bình luận thành công

Trang 38

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 khóa học

2.3.2.4 Use-case lưu khóa học

Bảng 2.3.2.4.1.1.1: Use-case lưu khóa học

Tên use case Lưu khóa học

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

khóa học đã lưu

Đầ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 khóa học đã lưu của

2.3.2.5 Use-case Bỏ lưu khóa học

Bảng 2.3.2.5.1.1.1: Use-case Bỏ lưu khóa học

Tên use case Bỏ lưu khóa học

Mô tả Actor xóa khóa học khỏi khóa học đã lưu

Đầ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 khóa học đã lưuTà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 đã lưu khỏi khóa học đã lưu

của người dùngSVTH: Võ Văn Thành GVHD: PGS.TS Phan Huy Khánh 17

Trang 39

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

Bảng 2.3.2.6.1.1.1: 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

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

Bảng 2.3.2.7.1.1.1: 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

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

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

Tiêu đề	Xây Dựng Hệ Thống Website Chia Sẻ Khóa Học Hướng Dẫn Chăm Sóc Cây Trồng Miễn Phí Tại Tỉnh Gia Lai
Tác giả	Võ Văn Thành
Người hướng dẫn	PGS.TS. Phan Huy Khánh
Trường học	Đại học Đà Nẵng
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	78
Dung lượng	11,54 MB