Tìm hiểu và ứng dụng laravel và nodejs để xây dựng mạng xã hội cho trường đại học tây đô

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC TÂY ĐƠ KHOA KỸ THUẬT CƠNG NGHỆ KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC NGÀNH CƠNG NGHỆ THƠNG TIN Đề tài TÌM HIỂU, ỨNG DỤNG LARAVEL VÀ NODEJS ĐỂ XÂY DỰNG MẠNG XÃ HỘI CHO TRƯỜNG ĐẠI HỌC TÂY ĐÔ Sinh viên: Nguyễn Bình Hồng Sơn MSSV: 1652480201050 Khóa: K11 Cần Thơ, 06/2019 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC TÂY ĐƠ KHOA KỸ THUẬT CƠNG NGHỆ KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC NGÀNH CÔNG NGHỆ THÔNG TIN Đề tài TÌM HIỂU, ỨNG DỤNG LARAVEL VÀ NODEJS ĐỂ XÂY DỰNG MẠNG XÃ HỘI CHO TRƯỜNG ĐẠI HỌC TÂY ĐÔ Người hướng dẫn Sinh viên thực ThS Lâm Tấn Phương Nguyễn Bình Hồng Sơn MSSV: 1652480201050 Khóa: K11 Cần Thơ, 06/2019 LỜI CẢM ƠN Trong thời gian dài tìm hiểu nghiên cứu, nhận nhiều động viên giúp đỡ người Trước hết, tơi xin bày tỏ lịng biết ơn sâu sắc đến thầy Lâm Tấn Phương hướng dẫn thực nghiên cứu Xin bày tỏ lịng biết ơn chân thành tới thầy, cô Khoa Kỹ Thuật Công Nghệ, người đem lại cho kiến thức bổ trợ, vơ có ích năm học vừa qua Cuối xin gửi lời cảm ơn đến bạn học viên lớp gia đình, người ln bên tơi, động viên khuyến khích tơi q trình thực đề tài nghiên cứu Cần Thơ, ngày tháng năm 2019 Người thực Nguyễn Bình Hồng Sơn NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Cần Thơ, ngày tháng năm 2019 Giáo viên hướng dẫn ThS Lâm Tấn Phương NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN DANH MỤC HÌNH ẢNH DANH MỤC CHỮ VIẾT TẮT TÓM TẮT ABSTRACT 10 CHƯƠNG I: GIỚI THIỆU 11 Đặt vấn đề 11 Mục tiêu đề tài 11 Đối tượng phạm vi nghiên cứu 12 Phương pháp nghiên cứu 12 Bố cục luận văn 12 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 13 Laravel framework 13 1.1 Giới thiệu 13 1.2 Dễ dàng sử dụng 13 1.3 Xây dựng theo mơ hình MVC 13 1.4 Các tính dựng sẵn 13 1.5 Các tính bảo mật 14 1.6 Cộng đồng mạnh mẽ 14 VueJS framework 15 2.1 Giới thiệu 15 2.2 Methods 15 2.3 Event 15 2.4 Component 15 2.5 Props 15 2.6 Bus 15 NodeJS 16 3.1 Giới thiệu 16 3.2 Những ứng dụng nên viết nodeJS 16 Sơ đồ lớp 17 CHƯƠNG PHƯƠNG PHÁP THỰC HIỆN 18 Mơ hình MVC 18 Mơ hình MVVM 19 Giao diện chức 20 3.1 Đăng nhập 20 3.2 Đăng kí 20 3.3 Giao diện trang chủ 21 3.4 Tạo viết 21 3.5 Cấu trúc viết 22 3.6 Header viết 23 3.7 Body viết 24 3.8 Footer viết 25 3.9 Comment cho viết 26 3.10 Hiển thị comment 27 3.11 Giao diện bạn bè 28 3.12 Tìm kiếm bạn bè 29 3.13 Lời mời kết bạn 29 3.14 Danh sách bạn bè 30 3.15 Trò chuyện bạn bè với bạn bè 30 3.16 Nhóm người dùng 32 3.17 Tạo nhóm 32 3.18 Trị chuyện thành viên nhóm 33 3.19 Thành viên nhóm 34 3.20 Trò chuyện 34 3.21 Giao diện cá nhân 34 3.22 Thay đổi ảnh đại diện ảnh bìa 35 3.23 Cài đặt nhân 36 3.24 Theo dõi hoạt động người dùng 37 CHƯƠNG 4: TỔNG KẾT 38 Kết đạt hạn chế 38 4.1 Kết đạt 38 4.2 Hạn chế 38 Hướng phát triển 38 TÀI LIỆU THAM KHẢO 39 DANH MỤC HÌNH ẢNH Hình Mơ hình MVC 18 Hình Mơ hình MVVM 19 Hình Giao diện đăng nhập 20 Hình Giao diện đăng kí 20 Hình Giao diện trang chủ 21 Hình Tạo viết 22 Hình Cấu trúc viết 23 Hình Header viết 24 Hình Sửa viết 24 Hình 10 Body viết 25 Hình 11 Footer viết 26 Hình 12 Comment cho viết 27 Hình 13 Comment viết 28 Hình 14 Giao diện bạn bè 28 Hình 15 Tìm kiếm bạn bè 29 Hình 16 Nội dung tìm 29 Hình 17 Lời mời kết bạn 30 Hình 18 Dan sách bạn bè 30 Hình 19 Trị chuyện với bạn bè 31 Hình 20 Giao diện nhóm người dùng 32 Hình 21 Tạo nhóm 33 Hình 22 Trị chuyện với bạn bè nhóm 33 Hình 23 Thành viên nhóm 34 Hình 24 Giao diện trang chủ 35 Hình 25 Thay đổi ảnh đại diện ảnh bìa 36 Hình 26 Cài đặt cá nhân 36 Hình 27 Giao diện admin - theo dõi người dùng 37 DANH MỤC CHỮ VIẾT TẮT STT Từ viết tắt Tên Tiếng Anh Nghĩa từ MXH Social Network Mạng xã hội MVC View–Model–Controller Mơ hình lớp PHP Personal Home Page Ngơn ngữ lập trình kịch MVVM Model View View-model Mơ hình trung tâm để phát triển ứng dụng webJS DOM Document Object Model Mơ hình đối tượng HTML Hypertext Markup Language Ngôn ngữ đánh dấu siêu văn JS ORM Javascript Ngôn ngữ kịch Object Relational Mapping Chỉ việc ánh xạ record liệu hệ quản trị sở liệu sang dạng đối tượng mà mã nguồn định dạng class 10 PDO Sử dụng extension PHP Data Object khác để giao tiếp với CSDL khác 11 CSRF Cross Site Request Forgery Là kỹ thuật đánh cắp thông tin người dùng Hình 10 Body viết - Hiển thị thông tin text, images, video - Với hình ảnh, nhấn vào show ảnh modal để xem rõ 3.8 Footer viết 25 Hình 11 Footer viết - Khi người dùng ấn “like” hệ thống update lại lượt like cho viết - Với viết người dùng like mà ấn vào “like” lần hệ thống hủy lượt like người dùng khỏi viết - Thống kê lượt like viết: - Tổng số lượt like - Người dùng thích viết - Ngày người dùng like 3.9 Comment cho viết 26 Hình 12 Comment cho viết - Khi người dùng ấn “comment”, người dung comment modal, hệ thống update lại comment cho viết - Người dùng hồn tồn xóa comment họ - Sử dụng ckfinder để định dạng lại văn - Thống kê lượt comment viết:  Tổng số lượt like  Người dùng comment viết  Ngày người dùng comment 3.10 Hiển thị comment 27 Hình 13 Comment viết - Chức hiển thị comment viết, ấn “Hiển thị comment nhất” phần footer thị comment nhất, ấn “Thu nhỏ” ẩn comment - Vẫn hiển thị thơng tin có liên quan bao gồm người tạo, ngày tạo - Người dùng xóa comment họ 3.11 Giao diện bạn bè Hình 14 Giao diện bạn bè - Tìm kiếm bạn bè gửi lời mời kết bạn 28 - Đồng ý hủy lời mời kết bạn - Hiển thị danh sách bạn bè, tìm kiếm người kết bạn 3.12 Tìm kiếm bạn bè Hình 16 Nội dung tìm Hình 15 Tìm kiếm bạn bè - Có thể tìm kiếm bạn bè cách: sử dụng số điện thoại email - Sau tìm kiếm thơng tin gửi lời mời kết bạn đến người - Khi tìm kiếm có kết trả -  Nếu chưa gửi lời mời kết bạn hiển thị thơng tin “có thể bết bạn” (not_friend_request)  Nếu gửi lời mời kết bạn trước thơng tin hiển thị “đang chờ xác nhận” (friend_requested)  Trong trường hợp tìm thấy người mà kết bạn trạng thái hiển thị “bạn bè” (friend) Tự động reload lại thông tin gửi yêu cầu (thêm xong => đổi trạng thái) 3.13 Lời mời kết bạn 29 Có thể hủy đồng ý lời mời kết bạn (friended) Hình 17 Lời mời kết bạn 3.14 Danh sách bạn bè Hình 18 Dan sách bạn bè - Thống kê tổng số lượng - Hiển thị tất người bạn bè - Tìm kiếm bạn bè - Xóa bạn bè - Khi nhấn vào bạn bè chuyển sang giao diện chat online với người bạn 3.15 Trị chuyện bạn bè với bạn bè 30 Hình 19 Trò chuyện với bạn bè - Giao diện chat gồm phần: - Header: thông tin người dung muốn gửi tin nhắn - Body: nội dung tin nhắn người, hover choột vào tin nhắn hiển thị thơng tin ngày mà tin nhắn gửi - Footer: để nhập nội dung tin nhắn gửi - Sử dụng websocket để thực hiển thị tin nhắn theo thời gian thực (realtime) - Khi nhập tin nhắn vào ô gửi server tiến hành thêm liệu vào DB lúc “Phát kiện” người nhận kiện thông qua tên kiện gửi nhận tin nhắn - Sau nhận tin nhắn tiến hành thay đổi liệu body (update lại tin nhắn) 31 3.16 Nhóm người dùng Hình 20 Giao diện nhóm người dùng - Giao diện gồm - Tạo nhóm - Tìm nhóm - Hiển thị danh sách nhóm tham gia 3.17 Tạo nhóm 32 Hình 21 Tạo nhóm Nhập tên nhóm ấn nút tạo, hệ thống xử lí để tạo nhóm hiển thị nhóm vừa tạo cho người dùng 3.18 Trò chuyện thành viên nhóm Hình 22 Trị chuyện với bạn bè nhóm - Giao diện gồm phần 33 - Nội dung tin tin nhắn nhóm - Các thành viên nhóm 3.19 Thành viên nhóm - Hiển thị tất thành viên nhóm - Thành viên nhóm tự rời nhóm - Chủ phịng có quyền kick thành viên nhóm khỏi nhóm - Khi chủ phịng rời nhóm, chủ phòng chuyển lại cho người khác - Khi thành viên nhóm khơng cịn nhóm tự động xóa Hình 23 Thành viên nhóm 3.20 Trị chuyện - Header: hiển thị tên nhóm, hiển thị chủ phịng, chức đổi tên nhóm, thêm thành viên vào nhóm Chủ phịng tự quyền xóa nhóm (thành viên nhóm khơng thể xóa nhóm, tự rời nhóm) - Body: hiển thị tất tin nhắn có nhóm, bao gồm người gửi, nội dung, ngày gửi tin (khi hover) - Footer: nơi để gửi tin nhắn, nhập tin nhắn vào ô gửi server tiến hành thêm liệu vào DB lúc “Phát kiện” nhóm nhận kiện thơng qua tên kiện gửi nhận tin nhắn 3.21 Giao diện cá nhân 34 Hình 24 Giao diện trang chủ - Giao diện gồm thông tin người sử dụng như: họ tên, email, ảnh đại diện,… - Có thể tạo viết trang chủ, hiển thị danh sách bạn bè, danh sách nhóm viết người dùng - Thay đổi ảnh đại diện ảnh bìa 3.22 Thay đổi ảnh đại diện ảnh bìa 35 - Thay đổi ảnh đại diện camera (mở cam, đóng cam, chụp) chọn file trực tiếp từ máy tính (nguồn) - Sau ấn thay đổi hình ảnh sử lí cập nhật - Chức thay đổi ảnh bìa tương tự khơng có cam Hình 25 Thay đổi ảnh đại diện ảnh bìa 3.23 Cài đặt nhân Hình 26 Cài đặt cá nhân - Các chức trang cài đặt: - Thay đổi thông tin người dung như: họ tên, số điện thoại (kiểm tra trùng), địa chỉ, ngày sinh - Thay đổi thông tin mật cho người dùng 36 3.24 Theo dõi hoạt động người dùng Hình 27 Giao diện admin - theo dõi người dùng - Hệ thống theo dõi người dung có chức - Hiển thị tất hoạt động người dùng (đăng nhập, tạo viết, comment,…) - Khi ấn vào hoạt động cụ thể hiển thơng tin chi tiết hoạt động người dùng (thơng tin người dùng thơng tin truy cập có liên quan) - Hệ thống tìm kiếm hoạt động người dùng (cho phép tìm theo tên, ngày hoạt động gì) 37 CHƯƠNG 4: TỔNG KẾT Kết đạt hạn chế 4.1 Kết đạt Khóa luận xây dựng thành công ứng dụng mạng xã hội cho người dung với chức cần có để phục vụ mục đích khác người dung tạo, chia thơng tin mà muốn, trị chuyện với thông qua internet, xây dựng trang cá nhân để người dùng thay đổi thơng tin 4.2 Hạn chế - Chưa xây dựng chức sửa biết cho người dùng - Chưa xây dựng chức xóa comment người dùng viết - Chưa realtime số tính ứng dụng - Gửi kết bạn, người nhận không nhận - Khi người dung like comment người khác chưa thể nhìn thấy - Chỉ theo dõi vài hoạt động người dùng Hướng phát triển - Xây dựng chức trả lời comment viết (comment_child) - Xây dựng chức share viết - Xây dựng chức multi tỏ cảm xúc - Thực chức xóa tin nhắn trò chuyện cá nhân tin nhắn trò truyện nhóm - Xây dựng thêm chức theo dõi người dùng - Tạo thêm chức thay đổi ảnh cho nhóm 38 TÀI LIỆU THAM KHẢO - [1] Hướng dẫn cài đặt Laravel Laravel - Cài đặt [2] Laravel authentication Laravel - Laravel Authentication [3] Schema Laravel Laravel - Schema [4] Axios VueJS VueJS - Axios [5] Cài đặt Redis Install Redis [6] Ckedit5 Vue - Install CKEditor Classic [7] Dark theme Dark theme [8] Route VueJS Route VueJS [9] Auto Scroll bottom Auto scroll bottom [10] Laravel echo tlaverdure/laravel-echo-server: Socket.io server for Laravel Echo [11] Query Builder Ví Dụ Câu Điều Kiện Trong Laravel [12] Event VueJS Sự kiện VueJS [13] Tìm hiểu biến có sẵn Laravel $_SERVER PHP [14] Load More Records scroll với laravel vuejs - Viblo [15] Webcam với VueJS GitHub - kelvin2go/vue-cam-vision: Webcam component for VueJs [16] Autocomplete Getting started with Vue AutoComplete component Syncfusion 39