(Đồ án hcmute) xây dựng website hỏi đáp trực tuyến về công nghệ

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE HỎI ĐÁP TRỰC TUYẾN VỀ CÔNG NGHỆ GVHD:HUỲNH XUÂN PHỤNG SVTH:TRẦN TẤN QUÝ MSSV:16110196 SVTH:PHẠM HOÀNG VIỆT MSSV: 16110547 SKL0 Tp Hồ Chí Minh, tháng 07/2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE HỎI ĐÁP TRỰC TUYẾN VỀ CÔNG NGHỆ Sinh viên thực hiện: MSSV TRẦN TẤN Q 16110196 PHẠM HỒNG VIỆT 16110547 Khóa: 2016 Ngành: Công nghệ thông tin GVHD: TS HUỲNH XUÂN PHỤNG Thành phố Hồ Chí Minh, tháng 07 năm 2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE HỎI ĐÁP TRỰC TUYẾN VỀ CÔNG NGHỆ Sinh viên thực hiện: MSSV TRẦN TẤN Q 16110196 PHẠM HỒNG VIỆT 16110547 Khóa: 2016 Ngành: Công nghệ thông tin GVHD: TS HUỲNH XUÂN PHỤNG Thành phố Hồ Chí Minh, tháng 07 năm 2020 an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -Thành phố Hồ Chí Minh, ngày 01 tháng 07 năm 2020 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Trần Tấn Quý MSSV: 16110196 Họ tên sinh viên: Phạm Hồng Việt MSSV: 16110547 Ngành: Cơng nghệ thông tin Giảng viên hướng dẫn: TS Huỳnh Xuân Phụng Ngày nhận đề tài: 27/02/2020 Ngày nộp đề tài: 01/07/2020 Tên đề tài: Xây dựng website hỏi đáp trực tuyến công nghệ Các số liệu, tài liệu ban đầu: Đồ án tham khảo xây dựng dựa diễn đàn hỏi đáp tiếng công nghệ Stack Overflow Nội dung thực đề tài: Xây dựng diễn đàn hỏi đáp bao gồm chức cho người dùng như: - Đặt câu hỏi, đưa câu trả lời - Chỉnh sửa, xóa câu hỏi câu trả lời - Người dùng chat với - Quản lý thơng tin cá nhân người dùng - Cho phép quản trị viên quản lý câu hỏi, câu trả lời người dùng hệ thống - Cho phép người dùng đăng ký, đăng nhập đăng xuất Sản phẩm: Báo cáo đồ án tốt nghiệp mã nguồn chương trình TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN an i CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -Thành phố Hồ Chí Minh, ngày 01 tháng 07 năm 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Trần Tấn Quý MSSV: 16110196 Họ tên sinh viên: Phạm Hồng Việt MSSV: 16110547 Ngành: Cơng nghệ thông tin Tên đề tài: Xây dựng website hỏi đáp trực tuyến công nghệ Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: ……………… (Bằng chữ: ) Thành phố Hồ Chí Minh, ngày tháng năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an ii CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -Thành phố Hồ Chí Minh, ngày 01 tháng 07 năm 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Trần Tấn Quý MSSV: 16110196 Họ tên sinh viên: Phạm Hoàng Việt MSSV: 16110547 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website hỏi đáp trực tuyến công nghệ Giáo viên phản biện: NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: ……………… (Bằng chữ: ) Thành phố Hồ Chí Minh, ngày tháng năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) an iii LỜI CẢM ƠN Để hồn thành khố luận tốt nghiệp, người thực khoá luận xin gửi lời cảm ơn chân thành đến giảng viên hướng dẫn TS Huỳnh Xuân Phụng, có góp ý, chỉnh sửa, bổ sung để khố luận hồn thiện Người thực khố luận xin gửi lời cảm ơn đến giảng viên, thầy cô hội đồng phản biện, hội đồng bảo vệ có góp ý sâu sắc, giúp đề tài hoàn thiện Xin chân thành cảm ơn! Nhóm sinh viên thực an iv MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP i PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iii LỜI CẢM ƠN iv MỤC LỤC v DANH SÁCH HÌNH ẢNH ix DANH SÁCH BẢNG xi NỘI DUNG Chương 1: TỔNG QUAN 1.1 Giới thiệu đề tài 1.2 Mục tiêu đề tài 1.3 Lược đồ usecase 1.4 Mô tả usecase 1.4.1 Mô tả usecase đăng nhập/đăng ký 1.4.2 Mô tả usecase chức dùng chung 1.4.3 Mô tả usecase chức người dùng 1.4.3.1 Thêm/xóa/sửa câu hỏi cá nhân 1.4.3.2 Thêm/xóa/sửa câu trả lời cá nhân 10 1.4.3.3 Chức đánh giá câu hỏi/câu trả lời nhắn tin 13 1.4.3.4 Chức quản lý thông tin cá nhân 16 1.4.4 Mô tả usecase chức quản trị 21 Chương 2: CƠ SỞ LÝ THUYẾT 26 2.1 Công nghệ 26 2.1.1 PHP 26 2.1.1.1 PHP gì? 26 2.1.1.2 Ưu điểm PHP [2] 26 2.1.1.3 Nhược điểm PHP 27 2.1.2 Laravel Framework 27 an v 2.1.2.1 Laravel gì? 27 2.1.2.2 Ưu điểm Laravel 27 2.1.2.3 Nhược điểm Laravel 27 2.1.3 MongoDB 28 2.1.3.1 MongoDB 28 2.1.3.2 Ưu điểm MongoDB 28 2.1.3.3 Nhược điểm MongoDB 28 2.1.4 Pusher 29 2.1.4.1 Pusher gì? [3] 29 2.1.4.2 Ưu điểm Pusher 29 2.1.4.3 Nhược điểm Pusher 29 2.1.5 Docker 29 2.1.5.1 Docker gì? 29 2.1.5.2 Ưu điểm Docker [5] 29 2.1.5.3 Nhược điểm Docker 30 2.2 Thiết kế kiến trúc 30 2.3 Thiết kế giao diện 32 2.3.1 Giao diện đăng ký 32 2.3.2 Giao diện đăng nhập 33 2.3.3 Giao diện trang chủ 34 2.3.4 Giao diện câu hỏi 36 2.3.5 Giao diện thêm câu trả lời 39 2.3.6 Giao diện sửa câu trả lời 40 2.3.7 Giao diện đặt câu hỏi 41 2.3.8 Giao diện sửa câu hỏi 42 2.3.9 Giao diện hồ sơ người dùng 43 2.3.10 Giao diện quản lý thông tin cá nhân 44 2.3.11 Giao diện đổi mật 45 2.3.12 Giao diện quản lý câu hỏi cá nhân 46 2.3.13 Giao diện quản lý câu trả lời cá nhân 47 an vi 2.3.14 Giao diện xem danh sách tag 48 2.3.15 Giao diện xem danh sách người dùng hệ thống 49 2.3.16 Giao diện trang kết tìm kiếm 50 2.3.17 Giao diện xem câu hỏi theo tag 51 2.3.18 Giao diện trang liên hệ 53 2.3.19 Giao diện hệ thống chat 54 2.3.20 Giao diện trò chuyện 55 2.3.21 Giao diện quản lý người dùng 56 2.3.22 Giao diện quản lý câu hỏi người dùng 57 2.3.23 Giao diện quản lý câu hỏi người dùng cụ thể 58 2.3.24 Giao diện quản lý câu trả lời người dùng cụ thể 59 2.4 Class diagram 60 2.5 Mô tả class diagram 61 2.6 Thiết kế sở liệu 75 2.7 Sequence diagram 79 2.7.1 Đăng ký 79 2.7.2 Đăng nhập 81 2.7.3 Tạo câu hỏi 83 2.7.4 Chỉnh sửa câu hỏi 85 2.7.5 Xoá câu hỏi cá nhân 87 2.7.6 Thêm câu trả lời 88 2.7.7 Chỉnh sửa câu trả lời 90 2.7.8 Tìm kiếm câu hỏi 92 2.7.9 Filter câu hỏi (chưa có câu trả lời, theo tuần, tháng, năm) 93 2.7.10 Xem danh sách category 94 2.7.11 Xem danh sách user 95 2.7.12 Xem thông tin cá nhân người dùng 96 2.7.13 Xem topic (câu hỏi + câu trả lời) 97 2.7.14 Xoá người dùng (admin) 98 Chương 3: MÔI TRƯỜNG CÀI ĐẶT ĐỒ ÁN 100 Chương 4: TỔNG KẾT 101 an vii Báo cáo Đồ án tốt nghiệp 2.7.7 Chỉnh sửa câu trả lời Hình 34 Sequence diagram 'Chỉnh sửa câu trả lời' Người dùng gọi route editAnswer để truy cập trang chỉnh sửa câu trả lời Trang chỉnh sửa câu trả lời yêu cầu người dùng chỉnh sửa thông tin muốn chỉnh sửa không Người dùng điều chỉnh thông tin muốn chỉnh sửa Sau người dùng nhấn nút Chỉnh sửa, giao diện gọi phương thức update AnswerController để xử lý thao tác chỉnh sửa câu trả lời Với thông tin người dùng muốn chỉnh sửa, AnswerController thơng qua Answer model tìm kiếm Answer có id muốn chỉnh sửa lấy thông tin mà người dùng muốn chỉnh sửa gán cho model Answer model tiến hành truy cập sở liệu lưu thông tin câu trả lời người dùng vừa chỉnh sửa vào sở liệu Chương 2: CƠ SỞ LÝ THUYẾT 90 an Báo cáo Đồ án tốt nghiệp Cơ sở liệu trả kết thực thành công hay chưa cho Answer model Answer model trả kết thực thành công hay chưa cho AnswerController a AnswerController thực trình thành cơng b AnswerController thực q trình thất bại 10 a AnswerController trả route viewTopic để xem chi tiết câu trả lời vừa chỉnh sửa b Trong trường hợp AnswerController thực thất bại, thông báo trả cho người dùng 11 Trang xem chi tiết câu hỏi lên cho người dùng Chương 2: CƠ SỞ LÝ THUYẾT 91 an Báo cáo Đồ án tốt nghiệp 2.7.8 Tìm kiếm câu hỏi Hình 35 Sequence diagram 'Tìm kiếm câu hỏi' Người dùng gọi route searchIndex để truy cập trang tìm kiếm câu hỏi nhập nội dung tìm kiếm trực tiếp Header Trang tìm kiếm câu hỏi u cầu người dùng nhập từ khố tìm kiếm vào input Người dùng nhập từ khố tìm kiếm Sau người dùng nhấn nút Tìm kiếm enter, giao diện gọi phương thức searchIndex HomeController để xử lý thao tác tìm kiếm câu hỏi với từ khoá truyền vào HomeController gọi GET API tới ElasticSearch để tìm kiếm thơng tin câu hỏi ElasticSearch trả kết dạng JSON cho HomeController HomeController dùng phương thức wherein() thông qua Question model để lấy đầy đủ thông tin mảng kết tìm kiếm Question model trả tập kết Question cho HomeController Chương 2: CƠ SỞ LÝ THUYẾT 92 an Báo cáo Đồ án tốt nghiệp HomeController trả tập Question cho Search Result Page 10 HomeController trả searchIndex route để hiển thị trang kết tìm kiếm 11 Nội dung trang kết tìm kiếm hiển thị cho người dùng 2.7.9 Filter câu hỏi (chưa có câu trả lời, theo tuần, tháng, năm) Hình 36 Sequence diagram ‘Filter câu hỏi' Người dùng gọi route noAnswers, week, month, year để truy cập trang filter câu hỏi Trang tương ứng gọi phương thức noAnswers() (week(), month() year()) HomeController để thực xử lý Filter tương ứng HomeController thông qua Question dùng phương thức where() để lấy câu hỏi theo tiêu chí tương ứng Question model lấy liệu từ database Database trả Question theo tiêu chí Question model trả Question tương ứng cho phương thức noAnswers(), week(), month(), year() HomeController HomeController trả Question cho trang hiển thị Chương 2: CƠ SỞ LÝ THUYẾT 93 an Báo cáo Đồ án tốt nghiệp HomeController trả route noAnswers, week, month, year tương ứng Nội dung Filer Question theo noAnswer, week, month, year hiển thị tương ứng cho người dùng 2.7.10 Xem danh sách category Hình 37 Sequence diagram ‘Xem danh sách category’ Người dùng gọi route alltags để truy cập trang Xem danh sách category Trang Xem danh sách category gọi phương thức allTags() HomeController để thực xử lý việc lấy category HomeController thông qua Category model dùng phương thức orderBy() để lấy Category Category model lấy liệu từ database Database trả tất Category Category model trả tất Category cho phương thức allTags() HomeController HomeController trả Category cho trang hiển thị HomeController trả route alltags Nội dung tất Category hiển thị lên trang All Tags Page cho người dùng Chương 2: CƠ SỞ LÝ THUYẾT 94 an Báo cáo Đồ án tốt nghiệp 2.7.11 Xem danh sách user Hình 38 Sequence diagram ‘Xem danh sách user’ Người dùng gọi route allusers để truy cập trang Xem danh sách user Trang Xem danh sách user gọi phương thức allUsers() HomeController để thực xử lý việc lấy user HomeController thông qua User model dùng phương thức orderBy() để lấy User User model lấy liệu từ database Database trả tất User User model trả tất User cho phương thức allUsers() HomeController HomeController trả User cho trang hiển thị HomeController trả route allusers Nội dung tất User hiển thị lên trang All Users Page cho người dùng Chương 2: CƠ SỞ LÝ THUYẾT 95 an Báo cáo Đồ án tốt nghiệp 2.7.12 Xem thơng tin cá nhân người dùng Hình 39 Sequence diagram ‘Xem thông tin cá nhân người dùng’ Người dùng gọi route personalInfomation để truy cập trang Xem thông tin cá nhân người dùng Trang Xem thông tin cá nhân người dùng gọi phương thức personalInfomation(id) UserController để thực xử lý việc lấy thông tin User UserController thông qua User model dùng phương thức find(id) để lấy User User model lấy liệu từ database Database trả User tương ứng User model trả User tương ứng cho phương thức personalInfomation(id) UserController UserController trả User tương ứng cho trang hiển thị UserController trả route personalInfomation Thông tin User hiển thị lên trang Xem thông tin cá nhân người dùng Chương 2: CƠ SỞ LÝ THUYẾT 96 an Báo cáo Đồ án tốt nghiệp 2.7.13 Xem topic (câu hỏi + câu trả lời) Hình 40 Sequence diagram ‘Xem topic’ Người dùng gọi route viewTopic để truy cập trang Xem topic Trang Xem topic gọi phương thức view() ViewTopicController để thực xử lý việc lấy thông tin Question Answer tương ứng ViewTopicController thông qua Question model, Answer model dùng phương thức find(id) để lấy Question Answer tương ứng Question model Answer model lấy liệu từ database Database trả Question Answer tương ứng Question model Answer model trả Question Answer tương ứng cho phương thức view() ViewTopicController ViewTopicController trả Question Answer tương ứng cho trang hiển thị ViewTopicController trả route viewTopic Thông tin Question Answer tương ứng hiển thị lên trang Xem topic Chương 2: CƠ SỞ LÝ THUYẾT 97 an Báo cáo Đồ án tốt nghiệp 2.7.14 Xố người dùng (admin) Hình 41 Sequence diagram ‘Xố người dùng (admin)’ Admin gọi route deleteDeleteUser có kèm id người dùng muốn xoá Trang quản lý người dùng admin gọi phương thức destroyuser() AdminHomeController AdminHomeController thông qua User Model Question model tìm kiếm User Question tương ứng có id User mà người dùng muốn xoá User model Question model tiến hành truy cập sở liệu xoá user với id nhận Cơ sở liệu trả kết thực thành công hay chưa cho User model Question model Question model User model trả kết thành công hay chưa AdminHomeController Chương 2: CƠ SỞ LÝ THUYẾT 98 an Báo cáo Đồ án tốt nghiệp a AdminHomeController thực q trình thành cơng c AdminHomeController thực trình thất bại a AdminHomeController trả route back() để đưa admin trang trước a Trong trường hợp AdminHomeController thực thất bại, thông báo báo cho admin Màn hình trang quản lý người dùng hiển thị cho admin sau admin xố người dùng Chương 2: CƠ SỞ LÝ THUYẾT 99 an Báo cáo Đồ án tốt nghiệp Chương 3: MÔI TRƯỜNG CÀI ĐẶT ĐỒ ÁN - Môi trường triển khai ứng dụng: Docker (version 2.2.0.5) - Cơng nghệ Realtime: Pusher - Ngơn ngữ lập trình: PHP (version 7.3) - Framework: Laravel framework (version 5.8.35) - Thiết kế giao diện: HTML5, CSS, Bootstrap - Integrated Development Environment: Visual Studio Code, Sublime Text - Database: MongoDB (version 4.2.5) Chương 3: MÔI TRƯỜNG CÀI ĐẶT ĐỒ ÁN an 100 Báo cáo Đồ án tốt nghiệp Chương 4: TỔNG KẾT 4.1 Kết - Nhóm viết báo cáo xây dựng thành công website hỏi đáp có đầy đủ chức hỗ trợ cho nhóm người dùng khách, người dùng người quản trị Thơng qua website người dùng đặt câu hỏi trả lời câu hỏi người dùng khác diễn đàn - Người dùng cịn tìm kiếm thơng tin thơng qua chức tìm kiếm nâng cao diễn đàn Bên cạnh đó, website trang bị hệ thống đánh giá đóng góp tất người dùng nhằm khích lệ tinh thần học tập, trao đổi truyền tải kiến thức thân diễn đàn - Ngồi người dùng gửi tin nhắn cho thông qua hệ thống chat thời gian thực tính hợp website Hệ thống cung cấp trang quản trị cho phép người quản trị dễ dàng quản lý, kiểm soát người dùng, câu hỏi câu trả lời hệ thống 4.2 Ưu điểm Dựa kết đạt được, website hỏi đáp trực tuyến mang lại nhiều ưu điểm dựa tính xây dựng, ưu điểm kể đến như: - Giao diện dễ tiếp cận sử dụng - Hỗ trợ đầy đủ chức diễn đàn hỏi đáp - Có độ bảo mật ổn định nhờ phương thức xây dựng sẵn từ Laravel - Tích hợp hệ thống đăng nhập OAuth (Facebook, Google, Github) - Có hệ thống chat thời gian thực cho phép người dùng nhắn tin với - Tính tìm kiếm nâng cao Chương 4: TỔNG KẾT 101 an Báo cáo Đồ án tốt nghiệp 4.3 Nhược điểm Thông qua kết đạt được, nhóm viết báo cáo phân tích số nhược điểm mà hệ thống thiếu: - Giao diện chưa hỗ trợ nhiều kích cỡ hình khác - Hệ thống chat hỗ trợ nhắn tin dạng text, chưa hỗ trợ trao đổi hình ảnh tập tin 4.4 Hướng phát triển - Cải thiện giao diện website cho phép hiển thị nhiều kích cỡ hình khác - Cải thiện hệ thống chat cho phép người dùng trao đổi hình ảnh, tập tin 4.5 Mã nguồn https://github.com/hoangviet290398/KLTN Chương 4: TỔNG KẾT 102 an Báo cáo Đồ án tốt nghiệp TÀI LIỆU THAM KHẢO [1] Công Nghệ Hà Nội, PHP gì?, http://congnghehanoi.edu.vn/php-la-gi.html (truy cập ngày 15 tháng 06 năm 2020) [2] VietIT, Ưu điểm thiết kế website PHP, https://vietit.vn/kien-thuc-vewebsite/Uu-diem-cua-thiet-ke-website-bang-PHP-257.html (truy cập ngày 15 tháng 06 năm 2020) [3] Nguyen Thanh Tung M (2020), Cơ Pusher Laravel, https://viblo.asia/p/co-ban-ve-pusher-va-laravel-4dbZN1pvKYM (truy cập ngày 25 tháng 06 năm 2020) [4] Quân Phạm (2019), Docker gì? Kiến thức Docker, https://medium.com/@phamducquan/docker-l%C3%A0-g%C3%ACki%E1%BA%BFn-th%E1%BB%A9c-c%C6%A1-b%E1%BA%A3n-v%E1%BB%81docker-13c6efc4aefe (truy cập ngày 25 tháng 06 năm 2020) [5] TopDev, Docker gì? Tìm hiểu Docker, https://topdev.vn/blog/docker-la-gi/ (truy cập ngày 25 tháng 06 năm 2020) TÀI LIỆU THAM KHẢO 103 an an ... tài: Xây dựng website hỏi đáp trực tuyến công nghệ Các số liệu, tài liệu ban đầu: Đồ án tham khảo xây dựng dựa diễn đàn hỏi đáp tiếng công nghệ Stack Overflow Nội dung thực đề tài: Xây dựng diễn... đáp thắc mắc cho người hỏi Từ xây dựng nên cộng đồng lớn mạnh với kiến thức tài liệu vấn đề lĩnh vực công nghệ thông tin 1.2 Mục tiêu đề tài Xây dựng website hỏi đáp trực tuyến công nghệ: - Xây. .. LƯỢNG CAO  ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE HỎI ĐÁP TRỰC TUYẾN VỀ CÔNG NGHỆ Sinh viên thực hiện: MSSV TRẦN TẤN Q 16110196 PHẠM HỒNG VIỆT 16110547 Khóa: 2016 Ngành: Cơng nghệ thông tin GVHD: