Xây dựng website dạy và học trực tuyến

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGOẠI NGỮ - TIN HỌC TP.HCM KHOA CÔNG NGHỆ THÔNG TIN KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE DẠY VÀ HỌC TRỰC TUYẾN GIẢNG VIÊN HƯỚNG DẪN: ThS Cao Tiến Thành SINH VIÊN THỰC HIỆN: Nguyễn Hoàng Tuấn – 15DH110082 Tiêu Khánh Duy TP.HỒ CHÍ MINH - 2019 – 15DH110093 LỜI CẢM ƠN  Tôi xin chân thành sâu sắc cám ơn quý thầy cô khoa công nghệ thông tin nói chung chuyên ngành An ninh mạng nói riêng, tất thầy cô trường Đại Học Ngoại Ngữ - Tin Học TP.HCM nói chung truyền đạt kiến thức, kinh nghiệm quý giá trình nghiên cứu học tập trường Tôi xin gửi lời cám ơn đặc biệt tới thầy Thạc Sĩ Cao Tiến Thành, người tận tình hướng dẫn, hỗ trợ tạo điều kiện tốt để tơi hồn thành khóa luận Tơi xin gửi lời cám ơn chân thành với anh chị khoa đặc biệt anh chị hồn thành khóa luận lại trường, người cho thông tin cần thiết, tạo động lực cho tiếp tục nỗ lực trình nghiên cứu thực khóa luận Con xin dành lời cám ơn cho ba mẹ gia đình, người ln bên con, người khuyên bảo làm việc khơng phản đối nỗ lực cho khóa luận Mặc dù nỗ lực cố gắng, song khóa luận khơng thể khơng tránh khỏi sai sót, khuyết điểm Tơi kính mong nhận cảm thơng tận tình bảo q thầy bạn MỤC LỤC Chương GIỚI THIỆU HỆ THỐNG WEBSITE DẠY VÀ HỌC TRỰC TUYẾN Lý chọn đề tài I) II) Đối tượng đề tài hướng tới III) Phạm vi đề tài Chương TIỀN XỬ LÝ I) Công cụ cho trình xây dựng phát triển website II) PHP – Laravel Framework 1) Vì lại chọn tảng PHP 2) Vì lại chọn Laravel Framework 3) Chi tiết kiến trúc Laravel Framework Chương MÔ HÌNH WEBSITE DẠY VÀ HỌC TRỰC TUYẾN Xây dựng sở liệu I) 1) Sơ đồ tổng quát (Database Diagram) II) Use Case Diagram 21 1) Sơ đồ Use Case 21 2) Đặc tả Use Case 22 Chương HIỆN THỰC HÓA XỬ LÝ 42 1) Đăng ký 42 2) Đăng nhập 43 3) Xác thực email 45 4) Chỉnh sửa thông tin cá nhân người dùng 47 5) Thanh tốn khóa học kích hoạt khóa học 48 6) Tìm kiếm khóa học 53 7) Đăng ký trở thành giảng viên 54 8) Đăng ký bán khóa học 57 9) Xem khóa học giảng dạy, khóa học chờ duyệt, khóa học bán giảng viên 59 10) Thêm xóa sửa Bài giảng 61 11) Cung cấp số tài khoản ngân hàng 64 12) Admin thêm Code Khóa Học cho Khóa Học 65 13) Admin nhận báo cáo Hóa Đơn Code Khóa Học 67 KẾT LUẬN 69 I) Những vấn đề đạt 69 1) Về yêu cầu 69 2) Về yêu cầu phụ 69 II) Những vấn đề chưa làm 69 III) Hướng phát triển 69 TÀI LIỆU THAM KHẢO 71 DANH SÁCH BẢNG Bảng 2.1 So sánh thông số Laravel, Symfony, Zend Bảng 3.1 Chi tiết bảng Thể Loại Khóa Học Bảng 3.2 Chi tiết bảng Mảng Khóa Học Bảng 3.3 Chi tiết bảng Khóa Học 10 Bảng 3.4 Chi tiết bảng Bài Giảng 11 Bảng 3.5 Chi tiết bảng Câu Hỏi 12 Bảng 3.6 Chi tiết bảng Code Khóa Học 13 Bảng 3.7 Chi tiết bảng Comment 14 Bảng 3.8 Chi tiết bảng Đánh Giá 15 Bảng 3.9 Chi tiết bảng Giảng Viên 16 Bảng 3.10 Chi tiết bảng Hóa Đơn 17 Bảng 3.11 Chi tiết bảng Level 18 Bảng 3.12 Chi tiết bảng Ngân Hàng 18 Bảng 3.13 Chi tiết bảng Tài Khoản Ngân Hàng 19 Bảng 3.14 Chi tiết bảngThanh Toán 19 Bảng 3.15 Chi tiết bảng User 20 Bảng 3.16 Bảng đặc tả Xem Khóa Học 22 Bảng 3.17 Bảng đặc tả Tìm Kiếm Khóa Học 22 Bảng 3.18 Bảng đặc tả Đăng Ký 23 Bảng 3.19 Bảng đặc tả Xác Thực Email 23 Bảng 3.20 Bảng đặc tả Đăng Nhập 24 Bảng 3.21 Bảng đặc tả Quên Mật Khẩu 25 Bảng 3.22 Bảng đặc tả Thêm Xóa Sửa Thơng Tin Cá Nhân 26 Bảng 3.23 Bảng đặc tả Bình Luận Khóa Học 27 Bảng 3.24 Bảng đặc tả Mua Khóa Học 28 Bảng 3.25 Bảng đặc tả Nhập Code Khóa Học 29 Bảng 3.26 Bảng đặc tả Khóa Học Của Tơi 30 Bảng 3.27 Bảng đặc tả Lịch Sử Thanh Tốn Khóa Học 31 Bảng 3.28 Bảng đặc tả Đánh Giá Khóa Học 32 Bảng 3.29 Bảng đặc tả Đặt Câu Hỏi Cho Bài Giảng 33 Bảng 3.30 Bảng đặc tả Đăng Ký Thành Giảng Viên 34 Bảng 3.31 Bảng đặc tả Bán Khóa Học 35 Bảng 3.32 Bảng đặc tả Khóa Học Chờ Duyệt 36 Bảng 3.34 Bảng đặc tả Lịch Sử Bán Khóa Học 37 Bảng 3.35 Bảng đặc tả Khai Báo Ngân Hàng 38 Bảng 3.36 Bảng đặc tả Kiểm Duyệt Khóa Học 39 Bảng 3.37 Bảng đặc tả Thêm Code Khóa Học 40 Bảng 3.38 Bảng đặc tả Báo Cáo 41 DANH SÁCH HÌNH Hình 2.1 Cấu trúc Laravel Framework Hình 2.2 Giao diện ban đầu Laravel Hình 3.1 Sơ đồ tổng quát sở liệu Hình 3.2 Sơ Đơ Use Case 21 Hình 4.1 Code chức Đăng Ký 42 Hình 4.2 Code chức Tạo API Token 42 Hình 4.3 Kết Đăng Ký thành công trả kiểu JSON 42 Hình 4.4 Giao diện Đăng Ký Thành Viên 43 Hình 4.5 Code chức Đăng Nhập 43 Hình 4.6 Giao diện Đăng Nhập 44 Hình 4.7 Code chức Đăng Nhập Google 44 Hình 4.8 Giao diện Đăng Nhập Google 45 Hình 4.10 Code chức Gửi Email Xác Thực 45 Hình 4.11 Nội dung Email Xác Thực 46 Hình 4.12 Giao diện Email Xác Thực 46 Hình 4.13 Kết sau Xác Thực Email 47 Hình 4.14 Code chức Chỉnh Sửa Thông Tin Cá Nhân 47 Hình 4.15 Code chức Lưu Ảnh Đại Diện 47 Hình 4.16 Giao diện Chỉnh Sửa Thơng Tin Người Dùng 48 Hình 4.17 Thơng tin tốn người dùng gửi Ngân Lượng 49 Hình 4.18 Code chức Gửi Code Khóa Học cho người dùng 49 Hình 4.19 Code chức Nhập Code Kích Hoạt Khóa Học 49 Hình 4.20 Giao diện giỏ hàng người dùng 50 Hình 4.21 Giao diện tốn bên phía Ngân Lượng 50 Hình 4.22 Giao diện tốn thành cơng bên Ngân Lượng 51 Hình 4.23 Giao diện thơng báo gửi Code Khóa Học email người dùng 51 Hình 4.24 Giao diện Email Code Khóa Học 52 Hình 4.25 Giao diện Nhập Code Kích Hoạt 52 Hình 4.26 Giao diện Khóa Học Đã Được Kích Hoạt 53 Hình 4.27 Code chức Tìm Kiếm Khóa Học 53 Hình 4.28 Giao diện Tìm Kiếm Khóa Học 54 Hình 4.29 Code chức Đăng Ký Thành Giảng Viên 55 Hình 4.30 Giao diện Đăng Ký Thành Giảng Viên 55 Hình 4.31 Giao diện bước Đăng Ký Giảng Viên 56 Hình 4.32 Code chức Đăng Ký Bán Khóa Học 57 Hình 4.33 Giao diện Giảng Viên Đăng Ký Bán Khóa Học 57 Hình 4.34 Giao diện Cập Nhật Khóa Học 59 Hình 4.35 Code chức Khóa Học Đã Dạy 59 Hình 4.36 Code chức Khóa Học Chờ Duyệt 60 Hình 4.37 Code chức Lịch Sử Bán Khóa Học 60 Hình 4.38 Giao diện Khóa Học Chờ Duyệt 60 Hình 4.39 Giao diện Khóa Học Giảng Dạy 61 Hình 4.40 Giao diện Lịch Sử Bán Khóa Học 61 Hình 4.41 Code chức Thêm Bài Giảng 62 Hình 4.42 Giao diện Thêm Khóa Học 62 Hình 4.43 Số lượng Bài Giảng tương ứng 63 Hình 4.44 Giao diện Danh Sách Bài Giảng 63 Hình 4.45 Giao diện Cập Nhật Bài Giảng 64 Hình 4.46 Code chức Thêm Tài Khoản Ngân Hàng 64 Hình 4.47 Giao diện Thêm Tài Khoản Ngân Hàng 65 Hình 4.48 Giao diện Danh Sách Tài Khoản Ngân Hàng 65 Hình 4.49 Code chức Import Code Khóa Học theo file excel 66 Hình 4.50 Giao diện Upload file excel Code Khóa Học 66 Hình 4.51 Code chức Báo Cáo Hóa Đươn Code Khóa Học 67 Hình 4.52 Giao diện Báo Cáo Hóa Đơn Code Khóa Học 67 Hình 4.53 Giao diện file excel Report Hóa Đơn 68 Hình 4.54 Giao diện file excel Report Code Khóa Học 68 Chương Giới thiệu hệ thống website dạy học trực tuyến Chương GIỚI THIỆU HỆ THỐNG WEBSITE DẠY VÀ HỌC TRỰC TUYẾN I) Lý chọn đề tài Trong thời đại ngày nay, việc người tất bật hối với xã hội đại, họ cần phải trang bị kiến thức cần có để tiến xa nhiều người Tuy nhiên có thời gian để tới trường, lớp tiếp thu kiến thức, chưa kể đến việc họ gặp khó khăn q trình di chuyển, đến lớp học muộn bị chậm trễ học, khiến kiến thức khơng đủ thua sút với bạn bè Chính thế, với bùng nổ Internet, website dạy học trực tuyến giải pháp hàng đầu cho khó khăn trên, khơng linh động giấc giúp cho người học thoải mái không lo học, mà cịn có nhiều lựa chọn cho nhiều kiến thức mảng khác nhau, đáp ứng nhu cầu trang bị kiến thức người dùng mong muốn II) Đối tượng đề tài hướng tới Đối tượng phạm vi khóa luận hướng tới: - Người dùng có nhu cầu học thêm kiến thức củng cố thêm kiến thức sẵn có - Người dùng khơng có nhiều thời gian cố định, gặp khó khăn việc di chuyển tới lớp học - Người dùng muốn trao đổi kiến thức với - Với người dùng có khóa học muốn dạy cho người khác, họ trực tiếp đăng ký cơng khai khóa học để có nhu cầu có học khóa học III) Phạm vi đề tài Đề tài thực phạm vi website, sử dụng tất thiết bị kết nối Internet Trọng tâm đề tài hướng tới nhu cầu thực tiễn người dùng, đề cập tới việc quản lý, toán, trao đổi với khóa học nên phải đảm bảo yêu cầu cần thiết: - Cho phép người dùng đăng ký tài khoản, cập nhật thông tin mua khóa học cần thiết Trang Chương Giới thiệu hệ thống website dạy học trực tuyến - Tạo thảo luận khóa học để nhóm người dùng khác trao đổi, tăng hiệu học tập tương tác học viên giảng viên hay học viên với - Trang quản trị Admin riêng có chức quản lý người dùng (nhiều level với quyền hạn khác nhau: Admin, Teacher, Student, …) khóa học, xem lịch sử người ghi danh khóa học o Người dùng Teacher tạo khóa học, upload khóa học, tài nguyên cho khóa học, đặt giá khóa học trực tuyến, thời gian khóa học, hình thức tốn, … o Admin có tồn quyền o Student: có chức tự ghi danh khóa học mong muốn, phải tốn chi phí trước được cấp mã số để ghi danh thành cơng - Khóa học hiển thị dạng embed youtube video, live video kèm theo số hình thức hỏi đáp tương tác, theo dõi tiến trình học người dùng giao tập cho buổi học - Website hỗ trợ Responsive, tương thích với thiết bị - Khơng sử dụng mã nguồn mở có sẵn Phải tự xây dựng website, cho phép sử dụng framework làm tảng - Không yêu cầu phải sử dụng chuẩn công nghệ cố định Có thể dùng web server với hệ quản trị sở liệu nào, miễn thấy phù hợp Trang Chương Tiền xử lý Chương TIỀN XỬ LÝ I) Công cụ cho q trình xây dựng phát triển website Cơng cụ xây dựng code: Visual Studio Code Nền tảng xây dựng website: PHP – Laravel Framework II) PHP – Laravel Framework 1) Vì lại chọn tảng PHP PHP mã nguồn mở phát triển cộng đồng, miễn phí sử dụng tồn quyền chỉnh sửa, mà điều số ngôn ngữ khác ASP.NET PHP hỗ trợ chạy nhiều hệ điều hành như: Linux, Windows, MacOS Trong đó, ASP.NET chạy hệ điều hành Windows Vì thiết kế cộng đồng mạng lớn mạnh, nên việc gặp khó khăn q trình sử dụng ngơn ngữ nhanh chóng người hỗ trợ, giải đáp PHP phát triển với mực đích tạo website nên lược bỏ tính khơng cần thiết để giúp việc học dễ dàng Và quan trọng nữa, PHP có tốc độ xử lý code nhanh chóng, giúp cho trang web có lượng truy cập lớn giải yêu cầu gửi 2) Vì lại chọn Laravel Framework Laravel Framework mã nguồn mở phổ biến PHP, với cấu trúc đơn giản dễ hiểu cho người bắt đầu Bên cạnh Laravel cịn xây dựng theo mơ hình MVC, giúp cho việc theo dõi quản lý code hiệu Mặc dù với tảng PHP có nhiều Framework tốt khác như: Yii, Symfony, CodeIgniter,…nhưng tơi chọn Laravel khả phổ biến rộng rãi, với cộng đồng mạng lớn, thuận lợi cho việc hỏi đáp hỗ trợ nhanh Bên cạnh đó, Framework đáp ứng nhu cầu cho website khóa luận – web api, số tính ưu việt khác So sánh vài thông số Framework PHP: Laravel, Symfony, Zend Trang Chương Hiện thực hóa xử lý 8) Đăng ký bán khóa học - Sau đăng ký thành giảng viên thành cơng, người dùng đăng ký khóa học để dạy cho người dùng khác Hình 4.31 Code chức Đăng Ký Bán Khóa Học Giao diện website tương ứng Hình 4.32 Giao diện Giảng Viên Đăng Ký Bán Khóa Học - Tạo khóa học có quy trình: o Bước 1: Đặt tên cho khóa học, tóm tắt khóa học đưa giá tiền cho khóa học Trang 57 Chương Hiện thực hóa xử lý o Bước 2: Chọn thể loại cho khóa học o Bước 3: Chọn hình ảnh cho khóa học - Nếu muốn cập nhật lại thông tin khóa học vừa tạo, giảng viên thay đổi mục Cập Nhật Khóa Học Trang 58 Chương Hiện thực hóa xử lý Hình 4.33 Giao diện Cập Nhật Khóa Học 9) Xem khóa học giảng dạy, khóa học chờ duyệt, khóa học bán giảng viên - Giảng viên xem khóa học đăng tải giảng dạy, khóa học chờ Admin duyệt, lịch sử người dùng mua khóa học giảng viên Hình 4.34 Code chức Khóa Học Đã Dạy Trang 59 Chương Hiện thực hóa xử lý Hình 4.35 Code chức Khóa Học Chờ Duyệt Hình 4.36 Code chức Lịch Sử Bán Khóa Học - Giao diện website tương ứng Hình 4.37 Giao diện Khóa Học Chờ Duyệt Trang 60 Chương Hiện thực hóa xử lý Hình 4.38 Giao diện Khóa Học Giảng Dạy Hình 4.39 Giao diện Lịch Sử Bán Khóa Học 10) Thêm xóa sửa Bài giảng - Sau thêm khóa học thành cơng, giảng viên tiến hành thêm giảng cho khóa học vừa tạo Trang 61 Chương Hiện thực hóa xử lý Hình 4.40 Code chức Thêm Bài Giảng - Giao diện website tương ứng Hình 4.41 Giao diện Thêm Khóa Học - Giảng viên nhập vào số lượng giảng cần thêm Trang 62 Chương Hiện thực hóa xử lý Hình 4.42 Số lượng Bài Giảng tương ứng - Khi nhập giảng thành cơng, giảng viên xem giảng cập nhật cho khóa học Hình 4.43 Giao diện Danh Sách Bài Giảng - Giảng viên cập nhật lại xóa giảng thêm Trang 63 Chương Hiện thực hóa xử lý Hình 4.44 Giao diện Cập Nhật Bài Giảng 11) Cung cấp số tài khoản ngân hàng - Giảng viên cung cấp số tài khoản ngân hàng cho Admin để thuận tiện việc mua bán khóa học Hình 4.45 Code chức Thêm Tài Khoản Ngân Hàng - Giao diện website tương ứng Trang 64 Chương Hiện thực hóa xử lý Hình 4.46 Giao diện Thêm Tài Khoản Ngân Hàng - Sau cung cấp số tài khoản ngân hàng, giảng viên xem danh sách số tài khoản cung cấp Hình 4.47 Giao diện Danh Sách Tài Khoản Ngân Hàng 12) Admin thêm Code Khóa Học cho Khóa Học - Sau duyệt khóa học mới, khóa học hết Code để kích hoạt, Admin tiến hành thêm Code Khóa Học thơng qua hình thức upload file excel Trang 65 Chương Hiện thực hóa xử lý Hình 4.48 Code chức Import Code Khóa Học theo file excel - Giao diện website tương ứng Hình 4.49 Giao diện Upload file excel Code Khóa Học Trang 66 Chương Hiện thực hóa xử lý - Phía hình mẫu để thực upload file theo mẫu cho trước Sau upload thành công, thơng báo 13) Admin nhận báo cáo Hóa Đơn Code Khóa Học - Admin thống kê số lượng khóa học bán số tiền thu được, kiểm tra xem số lượng Code khóa học cịn lại để tiến hành thêm Code khóa học Hình 4.50 Code chức Báo Cáo Hóa Đươn Code Khóa Học - Giao diện website tương ứng Hình 4.51 Giao diện Báo Cáo Hóa Đơn Code Khóa Học - Khi Admin chọn vào “Report Hóa Đơn” download file excel báo cáo danh sách hóa đơn (là doanh thu) người dùng tốn khóa học Tương tự cho “Report Code Khóa Học” danh sách Code kích hoạt khóa học Trang 67 Chương Hiện thực hóa xử lý Hình 4.52 Giao diện file excel Report Hóa Đơn Hình 4.53 Giao diện file excel Report Code Khóa Học Trang 68 KẾT LUẬN Những vấn đề đạt I) 1) Về yêu cầu • Cho phép người dùng đăng ký tài khoản, cập nhật thơng tin, mua khóa học cần thiết • Tạo thảo luận khóa học để nhóm người dùng khác trao đổi, tăng hiệu học tập tương tác học viên giảng viên hay học viên với • Admin có trang quản trị riêng, có tồn quyền, quản lý người dùng khóa học, xem tất lịch sử ghi danh khóa học • Người dùng giảng viên tạo khóa học, upload giảng, tài nguyên cho khóa học, đặt giá khóa học • Người dùng có nhu cầu học ghi danh khóa học mong muốn, tốn online thơng qua cổng Ngân Lượng, cấp mã để kích hoạt khóa học ghi danh • Khóa học hiển thị dạng embed youtube video, kèm theo hình thức đặt câu hỏi giảng • Website hỗ trợ Responsive, tương thích với thiết bị • Website không sử dụng mã nguồn mở, sử dụng hai framework Laravel Angular • Có thể triển khai website thực tế 2) Về yêu cầu phụ • Website hỗ trợ giao thức HTTPS Những vấn đề chưa làm II) • Chưa bảo mật embed youtube video giảng, dễ bị chia sẻ người dùng ghi danh thành cơng khóa học • Chưa hỗ trợ người dùng qua kênh liên lạc online • Chưa hỗ trợ người dùng tốn thơng qua hình thức ship COD III) Hướng phát triển Trang 69 • Mở rộng khả lưu trữ website để lưu lại tài nguyên video người dùng giảng viên Thực bảo mật video tốt • Hỗ trợ nhiều hình thức tốn cho người dùng • Cho phép người dùng giảng viên ngừng kinh doanh khóa học khơng mong muốn, tùy chỉnh lại khóa học hợp lý hơn, gửi để Admin duyệt lại khóa học Những người dùng mua khóa học tiếp tục học mà không bị ảnh hưởng tới việc ngừng kinh doanh điều chỉnh nội dung giảng viên • Tạo nhiều liên kết ưu đãi để thu hút nhiều người dùng đóng góp khóa học giúp phát triển website trở nên tốt Trang 70 TÀI LIỆU THAM KHẢO 1) Tài liệu hướng dẫn sử dụng Laravel Framework Angular Framework • https://laravel.com/docs/5.8 • https://phpspreadsheet.readthedocs.io/en/latest • https://angular.io/docs 2) Diễn đàn hỏi đáp trình thực • https://stackoverflow.com/questions/tagged/laravel • https://github.com/topics/laravel 3) Áp dụng web API • https://medium.com/modulr/create-api-authentication-passport-inlaravel-5-6-confirm-account-notifications • https://angular.io/guide/http • https://www.metaltoad.com/blog/angular-5-making-api-calls-httpclientservice 4) Email tự động • https://appdividend.com/2018/03/05/send-email-in-laravel-tutorial/ 5) Upload hình ảnh lên cloud • https://laravel-news.com/uploading-cloudinary-with-laravel 6) Xử lý bất đồng API • https://medium.com/@alecwazzy/using-promises-to-handleasynchronous-operations-in-angularjs-83457d983675 7) Và số tài liệu khác Trang 71