BÁO CÁO ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI X ÂY DỰNG WEBSITE HỌC TẬP TRỰC TUYẾN

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI X ÂY DỰNG WEBSITE HỌC TẬP TRỰC TUYẾN Sinh viên thực : Nguyễn Anh Việt Mã sinh viên : K13C04A004 Lớp : K13C04A Giảng viên hƣớng dẫn : ThS Lƣơng Khánh Tý Đà Nẵng, tháng 12 năm 2021 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI X ÂY DỰNG WEBSITE HỌC TẬP TRỰC TUYẾN Sinh viên thực : Nguyễn Anh Việt Mã sinh viên : K13C04A004 Lớp : K13C04A Giảng viên hƣớng dẫn : ThS Lƣơng Khánh Tý Đà Nẵng, tháng 12 năm 2021 Lời cảm ơn SVTH: Nguyễn Anh Việt LỜI CẢM ƠN  Trong trình làm đồ án tốt nghiệp em nhận nhiều giúp đỡ, đóng góp ý kiến thầy bạn bè Em xin gửi lời cảm ơn chân thành đến thầy Lương Khánh Tý tận tình hướng dẫn em suốt trình làm đồ án tốt nghiệp Và cuối cùng, em xin chân thành cảm ơn thầy cô giáo trường Đại học công nghệ thông tin truyền thơng Việt Hàn nói chung, thầy Khoa cơng nghệ thơng tin nói riêng dạy dỗ cho em kiến thức môn đại cương mơn chun ngành, giúp em có sở lý thuyết vững vàng tạo điều kiện giúp đỡ em suốt trình học tập Trong thời gian làm đồ án cịn nhiều thiếu sót mong thầy bạn tích cực đánh giá nhận xét để giúp em nhận thiếu sót tích lũy nhiều kinh nghiệm cho công tác thực tế sau Trân trọng cảm ơn Việt Nguyễn Anh Việt GVHD: Lương Khánh Tý I SVTH: Nguyễn Anh Việt Mục lục MỤC LỤC LỜI CẢM ƠN I MỤC LỤC II DANH MỤC HÌNH ẢNH V DANH MỤC BẢNG BIỂU VII CÁC TỪ VIẾT TẮT VIII MỞ ĐẦU 1 Lý chọn đề tài Mục tiêu nhiệm vụ nghiên cứu Đối tượng nghiên cứu Phương pháp nghiên cứu Kết dự kiến đề tài Ý nghĩa khoa học thực tiễn Cấu trúc đề tài CHƢƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tổng quan đề tài 1.2 Môi trƣờng chạy giả lập Website 1.2.1 WAMPServer 1.2.2 Ưu điểm WAMPServer 1.2.3 Điểm yếu WAMP 1.2.4 Hướng dẫn tải cài đặt WAMPServer 1.3 Các ngôn ngữ lập trình thiết kế giao diện 1.3.1 Ngôn ngữ PHP 1.3.2 Ngôn ngữ MySQL 1.3.3 Ngôn ngữ HTML/CSS/JavaScript 1.4 Phần mềm hổ trợ lập trình 1.5 Giới thiệu mơ hình MVC 1.5.1 Kiến trúc mơ hình MVC 10 1.5.2 Đặc điểm mơ hình MVC 11 1.6 Sử dụng PDO php 11 1.6.1 Kết nối sơ liệu 12 GVHD: Lương Khánh Tý II SVTH: Nguyễn Anh Việt 1.6.2 Mục lục Đóng kết nối 12 CHƢƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 13 2.1 Mơ tả tốn 13 2.2 Các tác nhân 13 2.3 Chi tiết chức hệ thống 13 2.3.1 Các yêu cầu chức 13 2.3.1.1 Người dùng 13 2.3.1.2 Người quản trị (Admin) 15 2.3.2 Các yêu cầu phi chức 16 2.4 Sơ đồ, mơ hình tổng quan hệ thống 16 2.4.1 Mơ hình hệ thống admin 16 2.4.2 Mô hình hệ thống người dùng 17 2.5 Thiết kế hệ thống 17 2.5.1 Biểu đồ UseCase 17 2.5.2 Các biểu đồ chức 18 2.6 Biểu đồ hoạt động 20 2.6.1 Biểu đồ hoạt động tìm kiếm 20 2.6.2 Biểu đồ hoạt động quản lý khoá học 21 2.6.3 Biểu đồ hoạt động quản lý viết 21 2.6.4 Biểu đồ hoạt động thống kê 22 2.7 Thiết kế sở liệu 22 CHƢƠNG 3.THIẾT KẾ VÀ XÂY DỰNG WEBSITE 24 3.1 Tổng quan giao diện 24 3.2 Giao diện 24 KẾT LUẬN 35 Kết đạt đƣợc 35 Hạn chế đề tài 35 Hƣớng phát triển 36 TÀI LIỆU THAM KHẢO 37 GVHD: Lương Khánh Tý III Danh mục hình ảnh SVTH: Nguyễn Anh Việt DANH MỤC HÌNH ẢNH Hình 1.1 WampServer Hình 1.2 Các bước cài đặt WampServer Hình 1.3 Các bước cài đặt WampServer Hình 1.4 Các bước cài đặt WampServer Hình 1.5 Các bước cài đặt WampServer Hình 1.6 Mơ hình hoạt động PHP Hình 1.7 Cơ sở liệu MySQL Hình 2.1 Các thành phần mơ hình MVC 10 Hình 2.2 Quá trình sử lý MVC 11 Hình 2.3 Sử dụng PDO PHP 12 Hình 3.1 Sơ đồ hệ thống người quản trị (Admin) 16 Hình 3.2 Sơ đồ hệ thống người dùng 17 Hình 3.3 Biểu đồ Usecase tổng quát 17 Hình 3.4 Usecase login 18 Hình 3.5 Usecase bình luận 18 Hình 3.6 Usecase tìm kiếm 18 Hình 3.7 Usecase quản lý hồ sơ 19 Hình 3.8 Usecase quản lý đăng nhập 19 Hình 3.9 Usecase quản lý khoá học 19 Hình 3.10 Usecase thống kê 20 Hình 3.11 Biểu đồ hoạt động tìm kiếm 20 Hình 3.12 Biểu đồ hoạt động quản lý khoá học 21 Hình 3.13 Biểu đồ hoạt động quản lý viết 21 Hình 3.14 Biểu đồ hoạt động thống kê 22 Hình 4.1 Giao diện đăng ký 24 Hình 4.2 Giao diện đăng nhập 25 Hình 4.3 Giao diện trang chủ 25 Hình 4.4 Giao diện trang khoá học 26 Hình 4.5 Giao diện trang giới thiệu khoá học 26 Hình 4.6 Giao diện trang chi tiết khoá học 27 Hình 4.7 Giao diện trang viết 27 Hình 4.8 Giao diện trang chi tiết viết 28 Hình 4.9 Giao diện trang tài trợ 28 Hình 4.10 Giao diện trang giới thiệu 29 Hình 4.11 Giao diện trang liên hệ 29 Hình 4.12 Giao diện trang hồ sơ người dùng 30 Hình 4.13 Giao diện đăng nhập 30 Hình 4.14 Giao diện trang chủ 31 GVHD: Lương Khánh Tý V SVTH: Nguyễn Anh Việt Danh mục hình ảnh Hình 4.15 Giao diện quản lý chuyên đề 31 Hình 4.16 Giao diện quản lý khoá học 32 Hình 4.17 Giao diện dách khoá học 32 Hình 4.18 Giao diện danh sách video khoá học 33 Hình 4.19 Giao diện quản lý viết 33 Hình 4.20 Giao diện quản lý người dùng 34 Hình 4.21 Giao diện quản lý bình luận 34 GVHD: Lương Khánh Tý VI SVTH: Nguyễn Anh Việt Danh mục bảng biểu DANH MỤC BẢNG BIỂU Bảng 3-1 Mô tả chi tiết liệu danh mục (Category) 22 Bảng 3-2 Mô tả chi tiết liệu khoá học (categorySub) 22 Bảng 3-3 Mô tả chi tiết liệu bình luận (comments) 23 Bảng 3-4 Mô tả chi tiết liệu viết (news) 23 Bảng 3-5 Mô tả chi tiết liệu người dùng (user) 23 Bảng 3-6 Mô tả chi tiết liệu danh sách video (videos) 23 Bảng 3-7 Quan hệ bảng liệu 24 GVHD: Lương Khánh Tý VII SVTH: Nguyễn Anh Việt Các từ viết tắt CÁC TỪ VIẾT TẮT STT Ký hiệu chữ viết tắt Chữ viết đầy đủ PHP Hypertext Preprocessor ODBC Open Database Connectivity HTML HyperText Markup Language CSS Cascading Style Sheets RDBMS Relational Database Management System MVC Model - View - Controller PDO PHP Data Object GVHD: Lương Khánh Tý Trang VIII Mở đầu SVTH: Nguyễn Anh Việt MỞ ĐẦU Lý chọn đề tài Chúng ta thấy ngành giáo dục có bước phát triển vơ quan trọng mà có xuất internet Cùng với phát triển internet website phát triển nhanh chóng nhờ vào ưu điểm Trên website người tiếp nhận thông tin, tiếp thu lượng lớn tri thức, ngồi cịn tương tác đối thoại trực tiếp Đối với học sinh, sinh viên internet coi phương tiện hiệu giúp bạn tra cứu thơng tin, tìm kiếm tri thức, thực nghiên cứu khoa học Các bạn sử dụng chúng làm phương tiện để giải trí sau tiết học căng thẳng để có tinh thần tốt hơn, đạt hiệu học tập cao Cùng với đó, mà mạng internet phát triển ngày lớn mạnh, giới đem đến nhà qua máy tính với nó, dịch vụ hỗ trợ người dùng đời ngày nhiều Có thể thấy học sinh sinh viên sở hữu máy tính điện thoại thơng minh có khả kết nối internet thơng qua bạn kết nối với tất bạn học sinh, sinh viên nước toàn giới để trao đổi kiến thức mở mang hiểu biết website học tập qua khóa học trực tuyến đời khơng ngồi mục đích giúp đỡ học sinh, sinh viên hay cần học tập hay muốn tìm hiểu thêm kiến thức ngồi ngành nước ta có hỗ trợ cao nhất, thuận lợi để làm quen nâng cao tính tính tự học Đó lý em chọn đề tài: “Xây dựng website học tập trực tuyến” làm đề tài đồ án tốt nghiệp Với mong muốn mang đến kiến thức chất lượng hiệu đáp ứng nhu cầu học viên qua khóa học miễn phí Mục tiêu nhiệm vụ nghiên cứu - Mục tiêu: + Xây dựng hoàn thiện website học tập trực tuyến với chức hoàn chỉnh, thuận lợi cho việc quản lý, học tập dễ dàng, nhanh chóng + Học thêm kiến thức mới, nâng cao khả tự học + Quản lý khai thác nguồn tài liệu cho trang web - Nhiệm vụ nghiên cứu: + Nghiên cứu, khảo sát mơ hình tốn + Phân tích thiết kế hệ thống + Nghiên cứu lý thuyết: Tìm hiểu cơng cụ lập trình ngơn ngữ lập trình (JavaScript, php, Sql) GVHD: Lương Khánh Tý Trang SVTH: Nguyễn Anh Việt Chương Phân tích thiết kế hệ thống Bảng 2-7 Quan hệ bảng liệu GVHD: Lương Khánh Tý Trang 24 Chương Thiết kế xây dựng website SVTH: Nguyễn Anh Việt CHƢƠNG THIẾT KẾ VÀ XÂY DỰNG WEBSITE 3.1 Tổng quan giao diện Giao diện thiết kế phù hợp với nhu cầu sử dụng người dùng Các chức hiển thị Menu giúp người dùng thao tác nhanh chóng trang Nội dung học phù hợp với thực tế góp phần giúp cho người dùng làm quen bước đến học chuyên sâu Trang Web thiết kế phù hợp với hầu hết ứng dụng web, thiết bị để phục vụ tốt cho nhu cầu học tập người dùng Website có giao diện chính: - Trang người dùng Trang quản trị admin 3.2 Giao diện  Ngƣời dùng Hình 3.1 Giao diện đăng ký GVHD: Lương Khánh Tý Trang 24 SVTH: Nguyễn Anh Việt Chương Thiết kế xây dựng website Hình 3.2 Giao diện đăng nhập Hình 3.3 Giao diện trang chủ GVHD: Lương Khánh Tý Trang 25 SVTH: Nguyễn Anh Việt Chương Thiết kế xây dựng website Hình 3.4 Giao diện trang khố học Hình 3.5 Giao diện trang giới thiệu khoá học GVHD: Lương Khánh Tý Trang 26 SVTH: Nguyễn Anh Việt Chương Thiết kế xây dựng website Hình 3.6 Giao diện trang chi tiết khố học Hình 3.7 Giao diện trang viết GVHD: Lương Khánh Tý Trang 27 SVTH: Nguyễn Anh Việt Chương Thiết kế xây dựng website Hình 3.8 Giao diện trang chi tiết viết Hình 3.9 Giao diện trang tài trợ GVHD: Lương Khánh Tý Trang 28 SVTH: Nguyễn Anh Việt Chương Thiết kế xây dựng website Hình 3.10 Giao diện trang giới thiệu Hình 3.11 Giao diện trang liên hệ GVHD: Lương Khánh Tý Trang 29 Chương Thiết kế xây dựng website SVTH: Nguyễn Anh Việt Hình 3.12 Giao diện trang hồ sơ người dùng  Ngƣời quản trị (Admin) Hình 3.13 Giao diện đăng nhập GVHD: Lương Khánh Tý Trang 30 SVTH: Nguyễn Anh Việt Chương Thiết kế xây dựng website Hình 3.14 Giao diện trang chủ Hình 3.15 Giao diện quản lý chuyên đề GVHD: Lương Khánh Tý Trang 31 Chương Thiết kế xây dựng website SVTH: Nguyễn Anh Việt Hình 3.16 Giao diện quản lý khố học Hình 3.17 Giao diện dách khố học GVHD: Lương Khánh Tý Trang 32 SVTH: Nguyễn Anh Việt Chương Thiết kế xây dựng website Hình 3.18 Giao diện danh sách video khố học Hình 3.19 Giao diện quản lý viết GVHD: Lương Khánh Tý Trang 33 Chương Thiết kế xây dựng website SVTH: Nguyễn Anh Việt Hình 3.20 Giao diện quản lý người dùng Hình 3.21 Giao diện quản lý bình luận GVHD: Lương Khánh Tý Trang 34 SVTH: Nguyễn Anh Việt Kết luận KẾT LUẬN Sau khoảng thời gian làm việc nghiêm túc hiệu quả, đến đề tài “Xây dựng website học tập trực tuyến” hoàn thành theo yêu cầu nội dung thời gian định Trong trình nghiên cứu thực đề tài với tâm cao hạn chế kinh nghiệm kiến thức nên đề tài chắn tránh khỏi thiếu sót Rất mong nhận ý kiến đóng góp từ q thầy bạn để đề tài hoàn thiện Kết đạt đƣợc  Về mặt công nghệ: o Xây dựng hệ thống tương đối hoàn chỉnh gồm giao diện chức như:  Người dùng  Trang chủ  Trang khóa học  Trang viết  Trang tài trợ  Trang giới thiệu  Quản trị  Trang chủ  Trang quản lý chuyên đề  Trang quản lý khóa học  Trang quản lý danh sách video  Trang quản lý viết  Trang quản lý người dùng bình luận o Nắm vững kiến thức xây dựng Modun giao tiếp lập trình o Nâng cao thêm kiến thức giao giao diện Responsive Grid System o Công cụ sử dụng: Visual Studio Code, Navicat  Về mặt kỹ mềm: o Kỹ tìm hiểu, phân tích, lên kế hoạch giải vấn đề o Tính tự chủ cơng việc o Tính kiên trì cơng việc o Học hỏi kinh nghiệm, kiến thức từ thầy cô bạn bè Hạn chế đề tài - Chưa tạo chức tìm kiếm nâng cao Tính bảo mật chưa tối ưu Nội dung website hạn chế GVHD: Lương Khánh Tý Trang 35 SVTH: Nguyễn Anh Việt Kết luận Hƣớng phát triển - Thêm số chức cần thiết cho Website Nâng cao khả bảo mật liệu, thêm chức đăng kí khóa học online - Thiết kế giao diện trơng hồn hảo với tạo nguồn liệu đa dạng phong phú - Thương GVHD: Lương Khánh Tý mại hóa sản phẩm Trang 36 Tài liệu tham khảo TÀI LIỆU THAM KHẢO [1] Q quỳnh, "https://quachquynh.com," 2021 [Online] Available: https://quachquynh.com/wampserver-la-gi/ [2] K T M Lerdorf, Programming PHP, O'Reilly Media, 2013 [3] J DUCKETT, HTML and CSS: Design and Build Websites 1st Edition [4] Truongtuongtu, “https://hoclaptrinh.vn,” 2019 Trực tuyến Available: https://hoclaptrinh.vn/posts/pdo-la-gi-pdo-trong-php GVHD: Lương Khánh Tý Trang 37