Xây dựng website giúp sinh viên khảo sát chéo qua google form

- ́ Ki nh tê ́H uê ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ KHOA HỆ THỐNG THÔNG TIN KINH TẾ - - ho ̣c KHÓA LUẬN TỐT NGHIỆP Đ ại XÂY DỰNG WEBSITE GIÚP SINH VIÊN KHẢO SÁT CHÉO QUA GOOGLE FORM Tr ươ ̀ng TRƯƠNG NGỌC MINH ĐẠT Huế, tháng năm 2022 ̀ng ươ Tr Đ ại ̣c ho nh Ki ́ uê ́H tê - - ́ Ki nh tê ́H uê ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ KHOA HỆ THỐNG THÔNG TIN KINH TẾ - - ho ̣c KHÓA LUẬN TỐT NGHIỆP Đ ại XÂY DỰNG WEBSITE GIÚP SINH VIÊN KHẢO SÁT CHÉO QUA GOOGLE FORM ̀ng Sinh viên thực hiện: Giảng viên hướng dẫn: Trương Ngọc Minh Đạt ThS Trần Thái Hòa ươ Lớp: K52 Tin học kinh tế Tr Niên khóa: 2018-2022 Huế, tháng năm 2022 - LỜI CẢM ƠN Lời nói em xin gửi lời cảm ơn tới thầy cô khoa Hệ Thống Thông Tin Kinh Tế tạo điều kiện tốt cho tụi em có tập cuối khóa thuận lợi Đặc biệt em xin cảm ơn tới thầy Trần Thái Hịa, thầy đưa nhiều góp ý giúp ́ uê khóa luận em trở nên tốt giúp em chỉnh sửa khóa luận để có ́H khóa luận tốt nhất, em xin chân thành cảm ơn thầy Tiếp theo em xin cảm ơn cơng ty KMS Technology cho em có hội tê thực tập công ty Em xin cảm ơn anh chị công ty quan tâm, nh giúp đỡ em suốt trình em thực tập thực đề tài Trong thời gian hồn thành khóa luận tốt nghiệp vừa qua em có nhiều Ki thiếu sót, em mong nhận lời góp ý từ thầy q cơng ty để em sửa ại ho Em xin chân thành cảm ơn ̣c đổi hồn thiện đề tài thành cơng Huế, tháng 01 năm 2022 Đ Sinh viên Tr ươ ̀ng Trương Ngọc Minh Đạt I - MỤC LỤC LỜI CẢM ƠN I ́ uê MỤC LỤC II ́H DANH MỤC TỪ VIẾT TẮT .VI DANH MỤC BẢNG BIỂU VII tê DANH MỤC HÌNH VIII nh PHẦN I: MỞ ĐẦU X I - Tính cấp thiết đề tài X Ki II - Mục tiêu đề tài X ̣c III - Đối tượng phạm vi nghiên cứu XI ho IV - Phương pháp nghiên cứu XI ại V - Bố cục khóa luận XI Đ PHẦN II: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT .1 ̀ng 1.1 Sự đời khảo sát chéo ươ 1.1.1 Tổng quan khảo sát 1.1.2 Sự đời khảo sát chéo Tr 1.2 Google Form API 1.2.1 Google Form .3 1.2.2 API 1.2.3 RESTful API 1.2.4 Phương thức ủy quyền OAuth 2.0 1.2.5 Google Form API II - 1.2.6 Google Drive API .8 1.3 Framework ASP.NET Core cấu trúc MVC 1.3.1 Nền tảng NET 1.3.2 ASP.NET Core .9 ́ uê 1.3.3 Cấu trúc MVC 10 1.3.4 ASP.NET Core MVC 11 ́H 1.4 HTML, CSS, Javascript 13 tê 1.4.1 HTML .13 1.4.2 CSS .15 nh 1.4.3 Javascript 15 Ki CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE KHẢO SÁT CHÉO 16 ho ̣c 2.1 Mơ tả tốn 16 2.2 Yêu cầu chức hệ thống .16 ại 2.3 Yêu cầu phi chức hệ thống .17 Đ 2.4 Biểu đồ ca sử dụng (Use-case diagram) 17 ̀ng 2.4.1 Biểu đồ tổng quát 17 2.4.2 Chức đăng ký .19 ươ 2.4.3 Chức đăng nhập 20 2.4.4 Chức bảo mật tài khoản 21 Tr 2.4.5 Chức tạo xóa khảo sát 23 2.4.6 Chức xem sửa khảo sát 24 2.4.7 Chức kiểm tra điền khảo sát chéo .25 2.4.8 Chức quản lý Admin 26 2.4.9 Chức lấy kết khảo sát báo cáo người dùng 27 III - 2.4.10 Chức xử lý báo cáo người dùng .28 2.5 Biểu đồ (Sequence Diagram) 29 2.5.1 Chức đăng ký .29 2.5.2 Chức đăng nhập 31 ́ uê 2.5.3 Chức bảo mật tài khoản .32 2.5.4 Chức tạo xóa khảo sát 34 ́H 2.5.5 Chức sửa khảo sát 35 tê 2.5.6 Chức kiểm tra điền khảo sát 36 2.5.7 Chức quản lý Admin 37 nh 2.5.8 Chức lấy kết khảo sát 37 Ki 2.6 Thiết kế sở liệu 38 2.6.1 Một số tập thực thể xây dựng sẵn ASP.NET Core Identity 38 ho ̣c 2.6.2 Các tập thực thể tự thiết kế xây dựng 41 2.6.3 Mơ hình liệu mối quan hệ .45 ại CHƯƠNG 3: CÀI ĐẶT VÀ ĐÁNH GIÁ 47 Đ 3.1 Cài đặt công cụ 47 ̀ng 3.2 Cài đặt thư viện cho ứng dụng 47 3.3 Giao diện ứng dụng 48 ươ 3.3.1 Giao diện đăng nhập 48 Tr 3.3.2 Giao diện đăng ký .49 3.3.3 Giao diện trang chủ 49 3.3.4 Giao diện tạo khảo sát 50 3.3.5 Giao diện xem chi tiết khảo sát 50 3.3.6 Giao diện chỉnh sửa dành cho chủ khảo sát .51 3.3.7 Giao diện quản lý khảo sát 52 IV - 3.3.8 Giao diện quản lý người dùng dành cho quản trị viên .52 3.3.9 Giao diện quản lý khảo sát dành cho quản trị viên 53 3.3.10 Giao diện kết khảo sát 54 3.3.11 Giao diện chi tiết báo cáo người dùng xấu .55 ́ uê 3.3.12 Giao diện xử lý báo cáo người dùng xấu quản trị viên 55 3.3.13 Giao diện thống kê quản trị viên 56 ́H 3.4 Khởi chạy chương trình 56 tê 3.5 Đánh giá ứng dụng 57 3.5.1 Những điểm đạt 57 nh 3.5.2 Những điểm chưa đạt 57 Ki PHẦN III: KẾT LUẬN 58 Tr ươ ̀ng Đ ại ho ̣c TÀI LIỆU THAM KHẢO 60 V - DANH MỤC TỪ VIẾT TẮT STT Từ viết tắt API Tiếng Anh Application Tiếng Việt Programming Giao diện lập trình ứng dụng ́ Authorization CORS Cross-origin Ủy quyền ́H Auth Resource Chia sẻ tài nguyên chéo nguồn Sharing gốc tê uê Interface CSRF Cross-site Request Forgery Giả mạo yêu cầu chéo trang web CSS Cascading Style Sheet Ngôn ngữ tạo phong cách cho nh Ki HTML HTTP Hypertext Transfer Protocol HTML Hypertext Markup Language Ngôn ngữ đánh dấu siêu văn Web App Web Application Tr ươ ̀ng Đ ại ho ̣c VI Giao thức truyền siêu văn bản Web ứng dụng (hay ứng dụng Web) - DANH MỤC BẢNG BIỂU Bảng 1 Ưu điểm nhược điểm khảo sát giấy Bảng Ưu điểm nhược điểm khảo sát kiếm tiền Bảng Ưu điểm nhược điểm khảo sát qua Google Forms Bảng Các tác nhân hệ thống 18 ́ uê Bảng 2 Tập thực thể tài khoản người dùng 38 Bảng Tập thực thể vai trò 39 ́H Bảng Tập thực thể tạo mối quan hệ n-n Users Roles 40 Bảng Tập thực thể UserStatus 42 tê Bảng Tập thực thể khảo sát 43 Bảng Tập thực thể nhật ký khảo sát 44 Tr ươ ̀ng Đ ại ho ̣c Ki nh Bảng Tập thực thể nhật ký phản hồi 44 VII ́ Ki nh tê ́H uê - Tr ươ ̀ng Đ ại ho ̣c Hình 23 Mơ hình liệu mối quan hệ 46 - CHƯƠNG 3: CÀI ĐẶT VÀ ĐÁNH GIÁ 3.1 Cài đặt công cụ Sau công cụ để xây dựng ứng dụng web khảo sát chéo: ́ uê  Phần mềm Visual Studio 2019: IDE Code Editor (trình soạn ́H thảo code) dành riêng cho ứng dụng NET Microsoft phát triển Theo trang TopDev.vn [6]: IDE (Integrated Development Environment) tê môi trường phát triển tích hợp dùng để viết code phát triển ứng dụng dành nh cho developer (lập trình viên) Ngồi IDE tích hợp cơng cụ hỗ trợ khác trình biên dịch, trình thơng dịch, kiểm tra lỗi, định dạng Ki highlight code, tổ chức thư mục code nhiều thứ khác  Bộ phần mềm Microsoft SQL Server: hệ quản trị sở liệu, ho web khảo sát chéo ̣c sử dụng để thiết kế, phát triển, lưu trữ quản lý sở liệu ứng dụng  Phần mềm Visual Studio Code: IDE Code Editor bật với ưu ại điểm dung lượng chạy ứng dụng nhẹ yêu cầu cấu hình thấp, coi Đ phần mềm Code Editor phổ biến Visual Studio Code thường sử dụng để lập trình, thiết kế front-end (giao diện người dùng cuối) phát ̀ng triển ứng dụng Javascript Đề tài sử dụng Visual Studio Code để ươ phát triển thiết kế giao diện người dùng cuối 3.2 Cài đặt thư viện cho ứng dụng Tr Ngoài thư viện cài đặt sẵn ASP.NET Core Jquery, Boostrap, Entity Framework, ASP.NET Core Identity ứng dụng cần cài đặt thêm số thư viện sau đây:  Google.Apis.Drive.v3: thư viện API Google Drive  MailKit: thư viện giúp gửi email thông qua API  Microsoft.AspNetCore.Authentication.Facebook: thư viện xác thực tài khoản Facebook sử dụng chức đăng ký, đăng nhập qua 47 - Facebook Để sử dụng thư viện ta cần phải đăng ký ứng dụng trang developer Facebook lấy mã ứng dụng (Application ID) mã bí mật (secret key) dùng xác thực OAuth2.0  Microsoft.AspNetCore.Authentication.Google: thư viện xác thực tài khoản Google sử dụng chức đăng ký, đăng nhập qua Google Để sử dụng chức ta phải đăng ký ứng dụng trang developer ́ uê Google lấy mã ứng dụng mã bí mật dùng xác thực ́H OAuth2.0 3.3 Giao diện ứng dụng Đ ại ho ̣c Ki nh tê 3.3.1 Giao diện đăng nhập ̀ng Hình Giao diện đăng nhập Các tương tác giao diện với người dùng: ươ  Nút Log in: người dùng nhấn vào để đăng nhập sau nhập thông tin tài khoản Tr  Nút Google Facebook: người dùng nhấn vào để đăng ký đăng nhập tài khoản Google, Facebook  Đường dẫn Forgot your password: chuyển hướng tới trang quên mật  Đường dẫn Register as a new user: chuyển hướng tới trang đăng ký tài khoản  Đường dẫn Resend email confirmation: chuyển hướng tới trang xác nhận email 48 - ́ nh Hình Giao diện đăng ký tê ́H uê 3.3.2 Giao diện đăng ký Các tương tác giao diện với người dùng: Ki  Nút Register: người dùng nhấn vào để đăng ký sau nhập thông tin tài khoản ho ̣c  Nút Google Facebook: người dùng nhấn vào để đăng ký đăng nhập tài khoản Google, Facebook Tr ươ ̀ng Đ ại 3.3.3 Giao diện trang chủ Hình 3 Giao diện trang chủ Các tương tác giao diện với người dùng:  Nút Tạo khảo sát: chuyển hướng tới trang tạo khảo sát 49 -  Nút Xem chi tiết: chuyển hướng tới trang xem chi tiết khảo sát ́ nh tê ́H uê 3.3.4 Giao diện tạo khảo sát Ki Hình Giao diện tạo khảo sát ̣c Các tương tác giao diện với người dùng: ho  Nút Tạo: người dùng nhấn để tạo khảo sát sau nhập thông tin khảo sát  Nút Trang quản lý: chuyển hướng tới trang quản lý khảo sát cá nhân Tr ươ ̀ng Đ ại 3.3.5 Giao diện xem chi tiết khảo sát Hình Giao diện chi tiết khảo sát 50 - Các tương tác giao diện với người dùng:  Nút Mở Google Form: người dùng nhấn vào để mở link Google Form tab trình duyệt  Nút Kiểm tra điền form: người dùng sau điền form, nhấn nút để hệ thống kiểm tra kết điền form, kết hiển thị hộp thông ́ uê báo trang ho ̣c Ki nh tê ́H 3.3.6 Giao diện chỉnh sửa dành cho chủ khảo sát ại Hình Giao diện chỉnh sửa khảo sát Các tương tác giao diện với người dùng: Đ  Nút Lưu: người dùng nhấn để lưu thay đổi khảo sát sau chỉnh sửa thông ̀ng tin khảo sát Tr ươ  Nút Trang quản lý: chuyển hướng tới trang quản lý khảo sát cá nhân 51 - ́ tê ́H uê 3.3.7 Giao diện quản lý khảo sát nh Hình Giao diện quản lý khảo sát Các tương tác giao diện với người dùng: Ki  Nút Xem chi tiết khảo sát (màu xanh dương): chuyển hướng tới trang chi tiết khảo sát ho ̣c  Nút Sửa khảo sát (màu xanh lục): chuyển hướng tới trang sửa khảo sát  Nút Xóa khảo sát (màu đỏ): người dùng nhấn vào để xóa khảo sát, kết Đ ại hiển thị hộp thông báo trang Tr ươ ̀ng 3.3.8 Giao diện quản lý người dùng dành cho quản trị viên 52 ́ tê ́H uê - Hình Giao diện quản lý người dùng nh Các tương tác giao diện với người dùng: Ki  Nút Trạng thái khóa (màu đỏ): quản trị viên nhấn vào để chuyển người dùng qua trạng thái mở khóa ̣c  Nút Trạng thái mở khóa (màu xanh lục): quản trị viên nhấn vào để chuyển ho người dùng qua trạng thái khóa  Ơ tìm kiếm: quản trị viên nhập từ khóa tên hiển thị email ại người dùng nhấn vào nút có biểu tượng kính lúp để tìm kiếm người dùng Tr ươ ̀ng Đ 3.3.9 Giao diện quản lý khảo sát dành cho quản trị viên Hình Giao diện quản lý khảo sát 53 - Các tương tác giao diện với người dùng:  Nút Trạng thái khóa (màu đỏ): quản trị viên nhấn vào để chuyển người dùng qua trạng thái mở khóa  Nút Trạng thái mở khóa (màu xanh lục): quản trị viên nhấn vào để chuyển người dùng qua trạng thái khóa ́ nhấn vào nút có biểu tượng kính lúp để tìm kiếm khảo sát ho ̣c Ki nh tê ́H 3.3.10 Giao diện kết khảo sát uê  Ô tìm kiếm: quản trị viên nhập từ khóa tiêu đề mơ tả khảo sát ại Hình 10 Giao diện kết khảo sát Đ Các tương tác giao diện với người dùng: ̀ng  Nút Report (màu đỏ): nhấn vào để báo cáo người dùng xấu  Nút Reported (màu xám): nhấn vào để xem thông tin chi tiết báo cáo người Tr ươ dùng xấu 54 - ́ tê ́H uê 3.3.11 Giao diện chi tiết báo cáo người dùng xấu nh Hình 11 Giao diện chi tiết báo cáo người dùng xấu Các tương tác giao diện với người dùng: Ki  Nút Gửi báo cáo (màu đỏ): nhấn vào để gửi báo cáo người dùng xấu ̣c  Nút Đã gửi tố cáo (màu xám): nút gửi báo cáo chuyển sang trạng thái ho sau người dùng nhấn nút gửi báo cáo Tr ươ ̀ng Đ ại 3.3.12 Giao diện xử lý báo cáo người dùng xấu quản trị viên Hình 12 Giao diện xử lý báo cáo người dùng xấu quản trị viên Các tương tác giao diện với người dùng:  Nút Resolve all reports (giải tất báo cáo): nhấn vào khóa tài khoản người dùng gửi tin nhắn giải tất báo cáo người dùng cụ thể 55 - ́ tê ́H uê 3.3.13 Giao diện thống kê quản trị viên ̀ng Đ ại ho ̣c Ki nh Hình 13 Giao diện thống kê quản trị viên - phần ươ Hình 14 Giao diện thống kê quản trị viên - phần 3.4 Khởi chạy chương trình Tr Khởi chạy chương trình localhost bước sau:  Bước 1: Mở tệp solution mã nguồn dự án Web khảo sát chéo qua phần mềm Visual Studio  Bước 2: Nhấn F5 Ctrl + F5 để khởi chạy chương trình localhost 56 ́ tê ́H uê - nh Hình 15 Khởi chạy ứng dụng localhost Ki 3.5 Đánh giá ứng dụng 3.5.1 Những điểm đạt ̣c  Có đầy đủ chức đăng nhập đăng ký qua ứng dụng bên ho Google, Facebook  Đảm bảo đầy đủ tính bảo mật tài khoản quên mật khẩu, xác nhận ại email Đ  Ứng dụng tạo môi trường giúp người dùng đăng khảo sát, điền khảo sát chéo trao đổi điểm từ hoạt động ̀ng  Đảm bảo tính bảo mật, an tồn cho người dùng, không bị lỗi bảo mật phổ biến ươ XSS (Cross Site Scripting), SQL Injection, CSRF (Cross Site Request Forgery) Tr 3.5.2 Những điểm chưa đạt  Ứng dụng chưa có chức nạp tiền chức trả phí để trì hoạt động cho website  Giao diện đơn giản chưa đẹp mắt  Còn thiếu phần chỉnh sửa ảnh đại diện người dùng  Cần thêm tính mạng xã hội bình luận, nhắn tin 57 - PHẦN III: KẾT LUẬN Phát nhu cầu mới, thị trường tiềm chưa khai thác cộng đồng khảo sát chéo sinh viên, kết hợp với công cụ phổ biến Google Form dịch vụ Google Form API vừa mắt năm 2021 tạo nên ứng dụng cung cấp ́ uê môi trường trao đổi khảo sát chéo đảm bảo công bằng, tiện lợi chuyên nghiệp ́H Qua trình thực khóa luận “Xây dựng Website giúp sinh viên khảo sát chéo qua Google Form” phát triển ứng dụng web khảo sát chéo thân tác giả tê khóa luận đạt số thành tựu:  Về mặt lý luận: nắm rõ luồng thực thi, cấu trúc website, nắm nh rõ kiến thức MVC, ASP.NET Core, REST API, Entity Framework, Ki HTML, CSS, Javascript, dịch vụ API Google Form  Về mặt thực tiễn: xây dựng ứng dụng giúp sinh viên khảo sát chéo đảm ̣c bảo công tiện lợi hơn, với giao diện đơn giản dễ sử dụng đảm bảo ho bảo mật cho người dùng Ứng dụng giúp giải nhu cầu lớn khảo sát cho sinh viên khai phá thị trường tiềm hoàn toàn ại Bên cạnh ứng dụng cịn nhiều thiếu sót sau: Đ  Chưa xây dựng tính nạp tiền vào hệ thống ̀ng  Chưa xây dựng đầy đủ tính trả phí để trì hoạt động cho hệ thống ươ  Cịn thiếu tính bình luận để phát triển cộng đồng mạnh  Giao diện đơn giản, chưa đẹp mắt Tr Tổng kết lại, ứng dụng đáp ứng nhu cầu khảo sát chéo sinh viên, khai phá thị trường tiềm hoàn toàn tạo môi trường khảo sát chéo đảm bảo công bằng, tiện ích Bên cạnh đó, đề tài cịn có nhiều thiếu sót nhiều chức chưa quan trọng chưa hồn thiện để vận hành trì hệ thống mơi trường thực tế Để khắc phục điểm thiếu sót đề tài, hệ thống cần xây dựng chức nạp tiền chức bắt buộc người dùng trả phí 58 - để sinh nguồn lợi nhằm trì hệ thống, hệ thống cần xây dựng chức nhắn tin, bình luận để phát triển cộng đồng người dùng lớn mạnh Do thời gian tới đề tài cần tiếp tục xây dựng phát triển nhiều tính mới, giải thiếu sót cịn tồn để trở thành ứng dụng phổ biến dành cho ́ Tr ươ ̀ng Đ ại ho ̣c Ki nh tê ́H uê sinh viên 59 - TÀI LIỆU THAM KHẢO ́ Tr ươ ̀ng Đ ại ho ̣c Ki nh tê ́H uê [1] T Ngoc Minh Dat, “KẾT NỐI VÀ TÍCH HỢP ỨNG DỤNG BÊN NGOÀI VÀO WEBSITE BẰNG RESTFUL API TẠI CÔNG TY TNHH SOFTWORLD HUẾ.” Aug 15, 2021 [2] D Hoai Nam, “Tìm hiểu đơi chút OAuth2,” Viblo, Jul 18, 2020 https://viblo.asia/p/tim-hieu-doi-chut-ve-oauth2-eW65GvMLlDO (accessed Aug 24, 2021) [3] “What is NET? An open-source developer platform.,” Microsoft https://dotnet.microsoft.com/en-us/learn/dotnet/what-is-dotnet (accessed Jan 20, 2022) [4] “What is ASP.NET Core? | NET,” Microsoft https://dotnet.microsoft.com/enus/learn/aspnet/what-is-aspnet-core (accessed Jan 20, 2022) [5] Đức T., “Mẫu kiến trúc MVC (Model – View – Controller) ASP.NET Core | Tự học ICT,” May 09, 2020 https://tuhocict.com/mau-kien-truc-mvc-model-viewcontroller-trong-asp-net-core/ (accessed Jan 25, 2022) [6] T Blog, “IDE gì? Hiểu rõ IDE Text Editor,” TopDev, Apr 24, 2019 https://topdev.vn/blog/ide-la-gi/ (accessed Jan 20, 2022) 60