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

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM NGUYỄN TRUNG HOÀNG NGUYỄN THANH PHONG ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE HỌC TRỰC TUYẾN Kon Tum, tháng năm 2021 ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE HỌC TRỰC TUYẾN SVTH MSSV SVTH MSSV LỚP GVHD : NGUYỄN NGUYỄN TRUNG HOÀNG : 16152480201006 : NGUYỄN THANH PHONG : 16152480201016 : K10TT : ThS LÊ THỊ BẢO YẾN Kon Tum, tháng năm 2021 LỜI CẢM ƠN Trong thời gian làm đồ án tốt nghiệp, nhóm chúng em nhận nhiều giúp đỡ, đóng góp bảo nhiệt tình thầy nhà trường Nhóm xin gửi lời chân thành đến ThS Lê Thị Bảo Yến, giảng viên khoa Kỹ Thuật & Nông Nghiệp – Trường Phân hiệu Đại học Đà Nẵng Kon Tum, người tận tình giúp đỡ, hướng dẫn, bảo chúng em suốt q trình làm khóa luận Nhóm xin chân thành cảm ơn thầy giáo trường UDCK nói chung thầy cô khoa Kỹ Thuật & Nơng Nghiệp nói riêng dạy dỗ cho chúng em kiến thức môn học đại cương mơn chun ngành, giúp chúng em có sở lý thuyết vững vàng tạo điều kiện giúp đỡ chúng em suốt q trình học tập Nhóm xin chân thành cảm ơn! Sinh Viên Thực Hiện Nguyễn Trung Hoàng Nguyễn Thanh Phong MỤC LỤC MỤC LỤC .i DANH MỤC BẢNG BIỂU ii DANH MỤC HÌNH iv CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 LÝ DO CHỌN ĐỀ TÀI 1.2 MỤC ĐÍCH, Ý NGHĨA CHỌN ĐỀ TÀI 1.3 PHƯƠNG PHÁP NGHIÊN CỨU 1.4 PHẠM VI, ĐỐI TƯỢNG CỦA ĐỀ TÀI .2 1.5 PHÂN CÔNG CÔNG VIỆC CHƯƠNG 2: CƠ SỞ LÝ LUẬN 2.1 MƠ HÌNH MVC .4 2.1.1 Khái niệm mơ hình MVC 2.1.2 Ưu nhước điểm mô hình MVC 2.2 NGƠN NGỮ LẬP TRÌNH PHP 2.3 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MySQL 2.4 LARAVEL FRAMEWORK 2.4.1 Khái niệm Laravel Framework 2.4.2 Mơ hình MVC Laravel 2.5 KHÁI NIỆM VỀ BOOTSTRAP CHƯƠNG 3: THIẾT KẾ WEBSITE VÀ KẾT QUẢ 3.1 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1.1 Danh sách Actor 3.1.2 Danh sách Use Case 3.1.3 Use Case tổng quát chức 10 3.1.4 Biểu đồ 10 3.2 CƠ SỞ DỮ LIỆU HỆ THỐNG 21 3.3 KẾT QUẢ DEMO 22 3.3.1 Giao diện Frontend 22 3.3.2 Giao diên Backend 27 CHƯƠNG 4: KẾT LUẬN 30 4.1 KẾT QUẢ ĐẠT ĐƯỢC .30 4.2 NHỮNG HẠN CHẾ .30 4.3 HƯỚNG PHÁT TRIỂN .30 TÀI LIỆU THAM KHẢO 31 i DANH MỤC BẢNG BIỂU Bảng 1.1: Bảng phân chia công việc .3 Bảng 3.1 Danh sách Actor .8 Bảng 3.2: Danh sách Use Case ii Từ viết tắt DANH SÁCH CÁC TỪ VIẾT TẮT Từ đầy đủ Giải thích CMS Content Management System CSDL Cơ sở liệu CNTT Công nghệ thông tin HTML Hypertext Markup Language PHP Personal Home Page iii Hệ quản trị nội dung Ngôn ngữ đánh dấu siêu văn DANH MỤC HÌNH Hình 2.1: Mơ hình MVC Hình 2.2 Mơ hình MVC Laravel Hình 3.1: Use Case tổng quát chức 10 Hình 3.2: Biểu đồ chức đăng ký .10 Hình 3.3: Biểu đồ chức đăng nhập 11 Hình 3.4: Biểu đồ chức thêm lớp học .12 Hình 3.5: Biểu đồ chức sửa lớp học 12 Hình 3.6: Biểu đồ chức xóa lớp học 13 Hình 3.7: Biểu đồ chức thêm môn học .14 Hình 3.8: Biểu đồ chức sửa môn học .14 Hình 3.9: Biểu đồ chức xóa mơn học .15 Hình 3.10: Biểu đồ chức thêm học .16 Hình 3.11: Biểu đồ chức sửa học 16 Hình 3.12: Biểu đồ chức xóa học .17 Hình 3.13: Biểu đồ chức thêm tập 18 Hình 3.14: Biểu đồ chức sửa tập 18 Hình 3.15: Biểu đồ chức xóa tập 19 Hình 3.16: Biểu đồ chức tìm kiếm 20 Hình 3.17: Bểu đồ lớp 21 Hình 3.18: Cơ sở liệu hệ thống 21 Hình 3.19: Giao diện trang chủ .22 Hình 3.20: Giao diện trang chủ .22 Hình 3.21: Giao diện trang danh sách học 23 Hình 3.22: Giao diện trang chi tiết học 24 Hình 3.23: Giao diện trang chi tiết tập 24 Hình 3.24: Giao diện trang góc học tập 25 Hình 3.25: Giao diện trang chi tiết góc học tập 25 Hình 3.26: Giao diện trang chi tiết đố vui .26 Hình 3.27 Giao diện trang liên hệ 26 Hình 3.28: Giao diện trang đăng nhập 27 Hình 3.29: Giao diện trang chủ quản trị 27 Hình 3.30: Giao diện trang danh sách học 28 Hình 3.31: Giao diện trang thêm học 28 Hình 3.32: Giao diện danh sách người dùng 29 Hình 3.33: giao diện thêm danh sách người dùng 29 iv CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 LÝ DO CHỌN ĐỀ TÀI Ngày Internet trở nên phổ biến phần thiếu người, với phát triển Internet nhiều cơng việc phát triển để thuận tiện đời sống Vấn đề mà tất người cần học tập, khơng phải có thời gian rảnh để đến các trung tâm để học Với mong muốn mang tới cho em học sinh khơng gian học tập tồn diện, hiệu hào hứng Website Học trực tuyến cho học sinh tiểu học đời giúp đổi phương pháp học tập từ truyền thống sang công nghệ, giúp bổ trợ kiến thức môn học lớp cho em, học trực tuyến giúp em học nào, giúp em có thêm thật nhiều kiến thức bổ ích khác mà trường chưa đề cập tới Sau thời gian nghiên cứu, lắng nghe ý kiến phản hồi giáo viên em học sinh cộng với tình hình dịch bệnh năm Em lên kế hoạch, cập nhật sửa đổi mắt sản phẩm website học trực tuyến cho học sinh tiểu học chất lượng cao, Em tin tưởng Website học trực tuyến cho học sinh tiểu học giúp em có thêm kiến thức mơn học, từ em có tảng vững để bước sang mức độ lớp trên, khối trung học sở Việc áp dụng công nghệ vào giáo dục bổ trợ cho phương pháp học tập truyền thống, nơi giáo viên khung thời gian cố định phải giảng dạy cho nhiều học sinh với mức độ tiếp thu, chăm hiểu khác Thầy khơng có đủ thời gian để truyển đạt kiến thức cho phù hợp với em học sinh thực tế khó để em xin thầy giảng lại phần kiến thức chưa hiểu hay phát triển học lên mức độ cao hơn; kiểm tra lớp khó đánh giá cách đầy đủ mức độ hiểu học sinh 1.2 MỤC ĐÍCH, Ý NGHĨA CHỌN ĐỀ TÀI Mục đích ý nghĩa:  Giúp cho học sinh tiết kiệm linh động thời gian học  Giúp cho học sinh học cách dễ dàng tiện lợi hơn, học lúc nơi miễn có Internet  Đáp ứng đầy đủ yêu cầu cần có để việc học tập em trở lên đơn giản mà hiệu  Thúc đẩy hiệu học tâp, giúp em nắm vững kiến thức học tập…  Giúp bạn học sinh phát triển tư duy, lực thân Từ phát huy kỹ thân mà em có Mục tiêu đề tài:  Quản lý lớp học khối tiểu học  Quản lý môn học theo lớp học  Quản lý khóa học môn học  Quản lý học lý thuyết tập khóa học  Quản lý người dùng  Quản lý tin tức 1.3 PHƯƠNG PHÁP NGHIÊN CỨU  Về mặt nghiệp vụ: Nhóm tìm quy trình cách xử lý nghiệp vụ thực tế để đảm bảo tính xác đề tài Ghi nhận lắng nghe ý kiến đánh giá người sử dụng để cải thiện chất lượng website  Về mặt lý thuyết: Tìm hiểu kỹ thuật lập trình, cách thức hoạt động Client – Server cách lưu liệu quản trị sở liệu MySql  Về mặt kỹ thuật: Nhóm tìm hiểu cách vận dụng lúc kết hợp công nghệ thông qua tài liệu chuyên ngành Học hỏi kinh nghiệm xử lý vấn đề từ người có chuyên môn 1.4 PHẠM VI, ĐỐI TƯỢNG CỦA ĐỀ TÀI Đề tài xây dựng Website học trực tuyến cho học sinh tiểu học sử dụng công nghệ lập trình PHP, MySQL, framework Laravel, Bootstrap Cơng cụ lập trình Visual Studio Code Hệ thống học trực tuyến cho học sinh tiểu học triển khai toàn quốc nhằm giúp cho học sinh lãnh thổ Việt Nam tiếp nhận Phạm vi đề tài: tảng website nên truy cập lúc Đối tượng sử dụng: Quản trị viên, giáo viên, học sinh 1.5 PHÂN CÔNG CÔNG VIỆC STT Tên thành viên Nguyễn Thanh Phong Nguyễn Trung Hồng Cơng việc Mơ tả cơng việc Đăng hỏi ý kiến group giáo Đăng thông tin khảo viên việc tạo sát website học trực tuyến dành cho học sinh tiểu học Dựa vào ý kiến giáo viên Thiết kế sở liệu đợt khảo sát, nhóm thiết kế database hoàn chỉnh cho website Thiết kế, tạo giao diện hoàn chỉnh Thiết kế giao diện đẹp, phù hợp với lứa tuổi Thiết kế sở Dựa vào ý kiến liệu giáo viên đợt khảo sát, nhóm thiết kế database hồn chỉnh cho website Viết chức Bảng 1.1: Bảng phân chia công việc Dựa vào database viết chức phù hợp, đơn giản, dễ sử dụng cho phụ huynh học sinh  Tác nhân: Admin, giáo viên  Mô tả: Cho phép admin giáo viên sửa học hệ thống  Luồng kiện:  B1: Chọn cần sửa  B2: Sửa thông tin  B3: Click vào nút lưu  B4: Kiểm tra thông tin  B5: Thông tin nhập vào sai, thiếu trả kết  B6: Nhập lại thông tin  B7: Lưu thông tin  B8: Hiển thị kết sửa thành cơng k) Chức xóa học Hình 3.12: Biểu đồ chức xóa học  Tác nhân: Admin, giáo viên  Mơ tả: Cho phép admin giáo xóa học khỏi hệ thống  Luồng kiện:  B1: Mở giao diện quản lý chọn vào danh sách học  B2: Chọn học cần xóa  B3: Hệ thống yêu cầu xác nhận  B4: Quản trị viên xác nhận xóa  B5: Gửi thơng tin  B6: Xóa học sở liệu hệ thống  B7: Trả kết  B8: Hển thị kết 17 l) Chức thêm tập Hình 3.13: Biểu đồ chức thêm tập  Tác nhân: Admin, giáo viên  Mô tả: Cho phép admin giáo viên thêm tập vào hệ thống  Luồng kiện:  B1: Mở form thêm tập  B2: Nhập thông tin  B3: Click vào nút lưu  B4: Kiểm tra thông tin  B5: Thơng tin nhập vào sai, thiếu trả kết  B6: Nhập lại thông tin  B7: Lưu thông tin  B8: Hiển thị kết thành cơng m) Chức sửa tập Hình 3.14: Biểu đồ chức sửa tập 18  Tác nhân: Admin, giáo viên  Mô tả: Cho phép admin giáo viên sửa tập hệ thống  Luồng kiện:  B1: Mở form thêm tập  B2: Nhập thông tin  B3: Click vào nút lưu  B4: Kiểm tra thông tin  B5: Thơng tin nhập vào sai, thiếu trả kết  B6: Nhập lại thông tin  B7: Lưu thông tin  B8: Hiển thị kết vừa cập nhật n) Chức xóa tập Hình 3.15: Biểu đồ chức xóa tập  Tác nhân: Admin, giáo viên  Mô tả: Cho phép admin xóa lớp học khỏi hệ thống  Luồng kiện:  B1: Mở giao diện quản lý chọn vào danh sách tập  B2: Chọn cần xóa  B3: Hệ thống yêu cầu xác nhận  B4: Quản trị viên xác nhận xóa  B5: Gửi thơng tin  B6: Xóa tập sở liệu hệ thống  B7: Trả kết  B8: Hển thị kết 19 o) Chức tìm kiếm Hình 3.16: Biểu đồ chức tìm kiếm  Tác nhân: Admin, Giáo viên, quản trị viên  Mơ tả: Cho phép người dùng tìm kiếm học thơng qua từ khóa  Luồng kiện:  B1: Nhập tên từ khóa cầm tìm kiếm vào giao diện tìm kiếm  B2: Click “tìm kiếm”  B3: Hệ thống lấy thông tin từ giao diện  B4: Hệ thống tìm kiếm thơng tin vừa lấy database  B5: Database trả kết  B6:Hiển thị trang danh sách kết  B7: Hiển thị kết trả 20 p) Biểu đồ lớp Hình 3.17: Bểu đồ lớp 3.2 CƠ SỞ DỮ LIỆU HỆ THỐNG Hình 3.18: Cơ sở liệu hệ thống 21 3.3 KẾT QUẢ DEMO 3.3.1 Giao diện Frontend a Trang chủ Hình 3.19: Giao diện trang chủ - Trong Giao diện hiển thị người truy cập vào trang web - Ở phần giao diện có chức là: đăng nhập, đăng ký, chọn lớp học, có chức đố vui, hỏi đáp, gửi phản hồi chức lưu học Hình 3.20: Giao diện trang chủ - Đây giao diện trang chủ khách truy cập vào 22 b Trang danh sách học Hình 3.21: Giao diện trang danh sách học - Sau truy cập vào trang web chọn lớp học, môn học hiển thi giao diện giao diện dành cho học viên - Tại danh sách học môn Tiếng Việt, học viên chọn để học 23 c Trang chi tiết học Hình 3.22: Giao diện trang chi tiết học - Học viên sau truy cập vào trang chủ website chọn lớp học, môn học, học viên chọn học hiển thị trang chi tiết học - Tại trang học viên có chức xem học làm tập vận dụng Trong trường hợp học viên khơng thể hồn thành học ngày có chức lưu học lại để học tiếp tục qua ngày hôm sau d) Trang chi tiết tập Hình 3.23: Giao diện trang chi tiết tập 24 - Khi học viên trang chi tiết học, học viên bấm vào chức làm tập vận dụng hiển thị trang chi tiết tập - Ở phần làm tập vận dụng này, học viên chọn đáp án phù hợp cho câu hỏi Bên cạnh tập có đếm thời gian, đánh dấu in tập e) Trang góc học tập Hình 3.24: Giao diện trang góc học tập - Ở phần menu trang chủ, ta bấm vào chức góc học tập hiển thị trang góc học tập Ở trang hiển thị danh sách học f) Trang chi tiết góc học tập Hình 3.25: Giao diện trang chi tiết góc học tập - Trang chi tiết học trang góc học tập 25 g) Trang chi tiết đố vui Hình 3.26: Giao diện trang chi tiết đố vui h) Trang liên hệ Hình 3.27 Giao diện trang liên hệ 26 i) trang đăng nhập Hình 3.28: Giao diện trang đăng nhập - Đây trang đăng nhập, user đăng nhập cách nhập email password tạo trước để đăng nhập sử dụng chức với quyền - Sau nhập mail password đầy đủ người dùng click vào nút “ĐĂNG NHẬP” để ruy cập vào hệ thống 3.3.2 Giao diên Backend a Trang chủ quản trị Hình 3.29: Giao diện trang chủ quản trị 27 - Giao diện trang chủ admin, có admin vào quản lý thống kê này, Và giáo tài khoản Giáo viên cấp quyền quản lý vài chức trang quản trị viên b) Trang danh sách học Hình 3.30: Giao diện trang danh sách học - Ở phân menu bên trái giao diện backend ta chọn danh sách học c) Trang thêm học Hình 3.31: Giao diện trang thêm học 28 - Ở phần menu bên trái giao diện backend, chọn vào thêm học - Ở trang thêm học, cần điền đầy đủ thơng mơn học tương ứng với ô liệu, sau nhập đầy đủ click “thêm” Hệ thống thơng báo kết sau thêm d) Danh sách người dùng Hình 3.32: Giao diện danh sách người dùng e) Trang thêm danh sách người dùng Hình 3.33: giao diện thêm danh sách người dùng - Ở trang thêm người dùng, Chỉ Admin có quyền tác động đến trang 29 CHƯƠNG 4: KẾT LUẬN 4.1 KẾT QUẢ ĐẠT ĐƯỢC  Xây dựng thành công Website học trực tuyến cho học sinh tiểu học, đáp ứng yêu cầu người sử dụng  Tìm hiểu kỹ thuật thiết kế website  Tìm hiểu đầy đủ PHP, Mysql, framework Laravel  Phân tích thiết kế hệ thống đầy đủ  Giao diện Website thiết kế đơn giản, thân thiện dễ sử dụng 4.2 NHỮNG HẠN CHẾ  Việc biểu diễn thông tin Website chưa linh hoạt  Các thao tác quản lý chậm, chưa nhanh so với winform  Cịn hạn chế chức giáo viên thơng báo cho học viên Admin thơng báo cho tồn hệ thống 4.3 HƯỚNG PHÁT TRIỂN  Hoàn thiện mặt sản phẩm hỗ trợ khách hàng, làm cho website cho phép khách hàng đánh giá bình luận sản phẩm sau mua, gửi câu hỏi, ý kiến tới admin  Tìm hiểu sâu ngơn ngữ PHP & MySQL để đáp ứng nhiều nhu cầu người sử dụng, phát triển tối ưu hóa hệ thống,  Tìm hiểu Boostrap để hỗ trợ giao diện website đẹp  Tìm hiểu thêm số ngôn ngữ, phần mềm ứng dụng để nâng cao giao diện đồ họa đẹp mắt, thân thiện hơn… 30 TÀI LIỆU THAM KHẢO [Online] https://freetuts.net/mvc-php-mo-hinh-mvc-la-gi-354.html [Online] https://dotnetguru.org/ngon-ngu-lap-trinh-php/ [Online] https://www.hostinger.vn/huong-dan/mysql-la-gi/ [Online] https://www.semtek.com.vn/laravel-framework-la-gi/ [Online] https://dothanhspyb.com/tim-hieu-ve-mo-hinh-mvc-trong-laravel/ [Online] https://viblo.asia/p/bai-1-bootstrap-la-gi-gioi-thieu-ve-bootstrapDzVkpLbDknW 31 ... học sinh cộng với tình hình dịch bệnh năm Em lên kế hoạch, cập nhật sửa đổi mắt sản phẩm website học trực tuyến cho học sinh tiểu học chất lượng cao, Em tin tưởng Website học trực tuyến cho học. .. học - Học viên sau truy cập vào trang chủ website chọn lớp học, môn học, học viên chọn học hiển thị trang chi tiết học - Tại trang học viên có chức xem học làm tập vận dụng Trong trường hợp học. .. học tập, khơng phải có thời gian rảnh để đến các trung tâm để học Với mong muốn mang tới cho em học sinh không gian học tập toàn diện, hiệu hào hứng Website Học trực tuyến cho học sinh tiểu học