Nghiên cứu reactjs, nodejs và ứng dụng phát triển website học lập trình online (learn it)

Từ những ưu điểm, đặc điểm của React JS và trải qua thời gian nghiên cứu về React JS nhận thấy React JS là một thư viện lập trình rất hữu ích và tân tiến được nhiều các website lớn lựa chọn nên nhóm chúng em đã quyết định áp dụng ReactJS phát triển đề tài: “Nghiên cứu ReactJS, NodeJS ứng dụng phát triển website học lập trình online”.

HỌC VIỆN KỸ THUẬT MẬT MÃ KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN MÔN HỌC THỰC TẬP CƠ SỞ Đề tài: NGHIÊN CỨU REACTJS, NODEJS VÀ ỨNG DỤNG PHÁT TRIỂN WEBSITE HỌC LẬP TRÌNH ONLINE (LEARN IT) Giảng viên hướng dẫn : ThS LÊ BÁ CƯỜNG Sinh viên thực hiện : Nguyễn Văn Duy - CT030211 Đặng Thị Mai Lam - CT030130 Lê Thị Bích Hồng - CT030125 Nhóm 9 Hà Nội, 1-2022 LỜI CAM ĐOAN Tôi là Nguyễn Văn Duy, mã số sinh viên CT030211, lớp CT3B Người hướng dẫn là ThS Lê Bá Cường Tôi xin cam đoan toàn bộ nội dung được trình bày trong đồ án “Nghiên cứu ReactJS, NodeJS ứng dụng phát triển website học lập trình online” là kết quả quá trình tìm hiểu và nghiên cứu của nhóm tôi Các dữ liệu được nêu trong đồ án là hoàn toàn trung thực, phản ánh đúng kết quả đo đạc thực tế Mọi thông tin trích dẫn đều tuân thủ các quy định về sở hữu trí tuệ; các tài liệu tham khảo được liệt kê rõ ràng Chúng tôi xin chịu hoàn toàn trách nhiệm với những nội dung được viết trong đồ án này Hà Nội, ngày 30 tháng 1 năm 2022 Người cam đoan Nhóm thực hiện đề tài MỤC LỤC DANH MỤC HÌNH VẼ iii DANH MỤC BẢNG BIỂU .v LỜI MỞ ĐẦU .vii CHƯƠNG 1 CƠ SỞ LÝ THUYẾT .1 1.1 Tổng quan về Elearning .1 1.1.1 Sự phát triển của Elearning 1 1.1.2 Đánh giá ưu nhược điểm của E-learning 2 1.1.3 Một số website học lập trình thịnh hành 4 1.2 Nghiên cứu về React JS 5 1.2.1 Giới thiệu về React JS 5 1.2.2 Một số khái niệm, kiến thức khi nghiên cứu React 6 1.2.3 Cài đặt môi trường xây dựng website bằng React JS 12 1.2.4 Kết luận 14 1.3 Nghiên cứu về Node Js .15 1.3.1 Giới thiệu về Node Js 15 1.3.2 Các tính năng của Node Js 16 1.3.3 Ứng dụng của Node JS 17 1.3.4 Một số ưu, nhược điểm của NodeJS 17 1.3.5 Kết luận 18 1.4 Giới thiệu MongoDb 18 1.4.1 MongoDb là gì .18 1.4.2 Ưu nhược điểm của MongoDb .20 1.4.3 Lí do sử dụng MongoDb 20 CHƯƠNG 2 KHẢO SÁT, PHÂN TÍCH THIẾT KẾ HỆ THỐNG 22 2.1 Khảo sát, phân tích bài toán .22 2.1.1 Giới thiệu chung về hệ thống .22 2.1.2 Khảo sát về một số website học lập trình .23 2.1.3 Tổng quan về hệ thống 26 2.1.4 Nguyên lý hoạt động của hệ thống .26 2.2 Thiết kế các chức năng .27 2.2.1 Chức năng website học lập trình online – LEARN IT 27 i 2.2.2 Chức năng trang quản trị viên 27 2.2.3 Phân quyền cho User 27 2.3 Sơ đồ khối chức năng 28 2.4 Biểu đồ phân rã chức năng ( WBS) 29 2.5 Biểu đồ UseCase và đặc tả 31 2.5.1 Xác định Actor và UseCase 31 2.5.2 Biểu đồ Usecase tổng quát 33 2.5.3 Biểu đồ UseCase chi tiết 34 2.5.4 Đặc tả UseCase .39 2.6 Thiết kế database 55 2.6.1 Thiết kế cơ sở dữ liệu tổng quát 55 2.6.2 Thiết kế cơ sở dữ liệu chi tiết .56 2.7 Thiết kế giao diện 59 CHƯƠNG 3 THỰC NGHIỆM 60 3.1 Lập trình xử lý chức năng 60 3.1.1 Xử lý chức năng Đăng nhập 60 3.1.2 Xử lý chức năng Thêm 60 3.1.3 Xử lý chức năng Sửa 61 3.1.4 Xử lý chức năng Xóa 62 3.1.5 Xử lý chức năng Thay đổi trạng thái người dùng 62 3.1.6 Xử lý chức năng Bình luận 63 3.2 Lập trình xử lý Validate dữ liệu 65 3.3 Triển khai 66 3.3.1 Hệ thống giao diện cho người sử dụng 66 3.3.2 Đánh giá giao diện 72 3.4 Kiểm thử 72 3.4.1 Công cụ dùng kiểm thử Jmeter .72 3.4.2 Kết quả kiểm thử 73 3.4.3 Kết luận 76 KẾT LUẬN 77 TÀI LIỆU THAM KHẢO 79 ii DANH MỤC HÌNH VẼ Hình 1 1 React JS 5 Hình 1 2 Ví dụ về một Component .6 Hình 1 3 Ví dụ Component lồng nhau 7 Hình 1 4 Phương thức Props 8 Hình 1 5 Pure Function 8 Hình 1 6 Not-Pure Function 9 Hình 1 7 Phương thức State 9 Hình 1 8 Khởi tạo ReactJS App 13 Hình 1 9 Khởi chạy dự án ReactJS 14 Hình 1 10 Node JS 15 Hình 1 11 MongoDB 19 Hình 2 1 Khảo sát website Codecademy 23 Hình 2 2 Khảo sát website Udemy .24 Hình 2 3 Khảo sát website FreeCodeCamp .25 Hình 2 4 Khảo sát website Github .26 Hình 2 5 Sơ đồ khối chức năng 28 Hình 2 6 Biểu đồ phân rã chức năng (WBS) 30 Hình 2 7 Biểu đồ Usecase tổng quát 33 Hình 2 8 Biểu đồ UseCase quản lý khóa học của Admin và Mod 34 Hình 2 9 Biểu đồ UseCase quản lý khóa học của User và Khách .35 Hình 2 10 Biểu đồ UseCase quản lý bài viết của Admin, Mod 36 Hình 2 11 Biểu đồ UseCase quản lý bài viết của User, Khách 37 Hình 2 12 Biểu đồ UseCase quản lý người dùng của Admin .38 Hình 2 13 Biểu đồ UseCase Tài khoản 38 Hình 3 1 Code xử lý chức năng đăng nhập 60 Hình 3 2 Code Xử lý chức năng Thêm 61 Hình 3 3 Code Xử lý chức năng Sửa 62 Hình 3 4 Code Xử lý chức năng Xóa 62 Hình 3 5 Xử lý chức năng Thay đổi trạng thái người dùng .63 Hình 3 6 Code Xử lý chức năng Bình luận 65 Hình 3 7 Code xử lý Validate dữ liệu 65 Hình 3 8 Giao diện trang chủ .66 Hình 3 9 Giao diện trang lộ trình 67 Hình 3 10 Giao diện trang khóa học 68 Hình 3 11 Giao diện trang học tập .69 iii Hình 3 12 Giao diện trang Blog 69 Hình 3 13 Giao diện trang Admin 70 Hình 3 14 Giao diện phần thông tin và bài giảng của quản lý khóa học 70 Hình 3 15 Giao diện thêm khóa học 71 Hình 3 16 Giao diện đăng nhập 71 Hình 3 17 Công cụ kiểm thử Jmeter 72 Hình 3 18 Kết quả kiểm thử hiệu năng trang Web .74 iv DANH MỤC BẢNG BIỂU Bảng 1 1 So sánh Props và State 10 Bảng 2 1 Xác định Actor và UseCase 31 Bảng 2 2 Đặc tả Usecase Đăng Ký 39 Bảng 2 3 Đặc tả Usecase Đăng Nhập 39 Bảng 2 4 Đặc tả Usecase Đăng Xuất 40 Bảng 2 5 Đặc tả Usecase Đổi Mật Khẩu 40 Bảng 2 6 Đặc tả Usecase Lấy Lại Mật Khẩu .41 Bảng 2 7 Đặc tả Usecase Xem Thông Tin Cá Nhân 42 Bảng 2 8 Đặc tả Usecase Sửa Thông Tin Cá Nhân 42 Bảng 2 9 Đặc tả Usecase Xem Khóa học 43 Bảng 2 10 Đặc tả Usecase Tìm Kiếm 43 Bảng 2 11 Đặc tả Usecase Thêm , sửa, xóa khóa học 44 Bảng 2 12 Đặc tả Usecase Thêm , sửa, xóa khóa học .44 Bảng 2 13 Đặc tả UseCase Xem danh sách, nội dung bài học 45 Bảng 2 14 Đặc tả UseCase Thêm, Sửa , Xóa bài tập 45 Bảng 2 15 Đặc tả UseCAse Xem danh sách và giải bài tập 46 Bảng 2 16 Đặc tả UseCase Đăng ký khóa học 46 Bảng 2 17 Đặc tả UseCase Active/inactive 47 Bảng 2 18 Đặc tả UseCase Ủy quyền người dùng .47 Bảng 2 19 Đặc tả UseCase Set quyền với khóa học 48 Bảng 2 20 Đặc tả UseCase Xem thông tin tất cả người dùng 48 Bảng 2 21 Đặc tả Usecase Xem danh sách bài viết 48 Bảng 2 22 Đặc tả Usecase Xem bài viết theo chủ đề 49 Bảng 2 23 Đặc tả Usecase tạo bài viết 49 Bảng 2 24 Đặc tả Usecase xóa bài viết 50 Bảng 2 25 Đặc tả Usecase chỉnh sửa bài viết 51 Bảng 2 26 Đặc tả Usecase Lưu bài viết .51 Bảng 2 27 Đặc tả Usecase Xử lí bài viết bị báo cáo 52 Bảng 2 28 Đặc tả Usecase Xử lí bài viết bị báo cáo 52 Bảng 2 29 Đặc tả Usecase Duyệt bài viết 52 Bảng 2 30 Đặc tả Usecase báo cáo bài viết .53 Bảng 2 31 Đặc tả Usecase đọc bình luận 53 Bảng 2 32 Đặc tả Usecase bình luận bài viết 54 Bảng 2 33 Đặc tả Usecase xóa bình luận 54 v Bảng 2 34 Các bảng dữ liệu .55 Bảng 2 35 Bảng User 55 Bảng 2 36 Bảng Token 56 Bảng 2 37 Bảng Báo Cáo (Report) 56 Bảng 2 38 Bảng Lộ Trình Học (Process Learning) 56 Bảng 2 39 Bảng bài học (Lesson) 57 Bảng 2 40 Bảng Comment 57 Bảng 2 41 Bảng khóa học 58 Bảng 2 42 Bảng bài tập .58 Bảng 2 43 Bảng Blog 58 Bảng 3 1 Phân tích các thông số thu được của trang web LEAN -IT 75 vi LỜI MỞ ĐẦU Ngày này, song song với sự phát triển của khoa học kĩ thuật, công nghệ thông tin cũng phát triển và giữ vai trò quan trọng trong cuộc sống của chúng ta, ngành công nghệ thông tin đã đạt được những kết quả cao, việc phát triển và ứng dụng công nghệ đã có bước chuyển biến đáng kể Tin học đã thâm nhập xâu trong tất cả các lĩnh vực của xã hội và đặc biệt với nhiều ứng dụng to lớn trong các hệ thống quản lý của các công ty, nhà trường, ngân hàng,… bởi tính năng nhanh gọn và chính xác Đặc biệt trong thời buổi dịch bệnh Covid -19 như hiện nay , các trường học phải tạm dừng thay bằng đó chuyển sang hình thức học online Sở dĩ nó được thịnh hành hơn là do khả năng thích ứng nhanh cũng như thời gian , chi phí được tiết kiệm một cách đáng kể Trong các Website học online thì website học lập trình đang được quan tâm nhất hiện nay, rất nhiều những website học online nổi tiếng hoàn toàn miễn phí cho tất cả mọi người làm quen, tiếp thu và học hỏi những kiến thức quý báu của ngành lập trình Đồng thời tạo nên một cộng động giúp đỡ nhau trong học tập , làm việc của ngành lập trình nói riêng và toàn thể các ngành nghề nói chung Từ những khảo sát và hiểu biết ban đầu, chúng em đã quyết định tìm hiểu đề tài tìm hiểu Reac Js và Node Js nghiên cứu phát triển website học lập trình online Với sự hướng dẫn và chỉ bảo tận tình của thầy giáo ThS Lê Bá Cường cùng với sự cố gắng của cả nhóm, chúng em đã cố gắng hoàn thiện đề tài Chúng em xin chân thành cảm ơn thầy giáo đã giúp chúng em hoàn thiện đề tài này vii CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Tổng quan về Elearning 1.1.1 Sự phát triển của Elearning Ngày nay, với sự bùng nổ thông tin, con người càng phải học tập nhiều môn khoa học mới, với khối lượng thông tin khổng lồ Vai trò của người thầy cần phải thay đổi; Thầy làm nhiệm vụ hướng dẫn, người học tự đi tìm và lĩnh hội tri thức Như vậy người dạy và người học phải biết sử dụng một số phương tiện khác để hỗ trợ Trong đó sử dụng công nghệ thông tin để thực hiện tất cả các nội dung, các thao tác của quá trình dạy và học, sẽ giúp người thầy nâng cao khả năng sử dụng phương pháp mới, học trò chủ động tìm tòi, phát huy sáng kiến trong học tập Trong những năm gần đây, cụm từ “e-learning” đã và đang trở nên gần gũi với tất cả mọi người E-learning là một phương thức học tập bằng truyền thông thông qua mạng internet theo cách tương tác với nội dung học tập và được thiết kế trên nền tảng phương pháp dạy học và được quản lý bởi các hệ thống quản lý học tập nhằm đảm bảo sự tương tác, hợp tác đáp ứng nhu cầu học mọi lúc, mọi nơi của người học Phương pháp học tập này đáp ứng cho nhu cầu học tập, tích lũy kiến thức cho tất cả mọi người, đồng thời sẽ đem lại nhưng lợi ích to lớn, tiết kiệm thời gian, công sức và tiền bạc, đồng thời cũng nâng cao chất lượng truyền đạt và tiếp thu kiến thức cho các học viên Trong thời đại bùng nổ thông tin hiện nay, phương thức đào tạo theo phương pháp đào tạo e-learning tạo ra rất nhiều ưu thế để phát triển: giảm chi phí, thời gian và công sức học tập, giúp nâng cao hiệu quả tiếp thu kiến thức cho sinh viên trên cơ sở sử dụng nền Web và các công cụ đa phương tiện truyền thông như hình ảnh, âm thanh, video, … Trong thời đại bùng nổ thông tin hiện nay, phương thức đào tạo theo phương pháp đào tạo e-learning tạo ra rất nhiều ưu thế để phát triển: giảm chi phí, thời gian và công sức học tập, giúp nâng cao hiệu quả tiếp thu kiến thức cho sinh viên trên cơ sở sử dụng nền Web và các công cụ đa phương tiện truyền thông như hình ảnh, âm thanh, video, … 1