KHÓA LUẬN TỐT NGHIỆP PHÁT TRIỂN ỨNG DỤNG ĐÀO TẠO VÀ SÁT HẠCH CẤP GIẤY PHÉP LÁI XE

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÀNH THANH SƠN PHẠM TRẦN CHÍNH KHĨA LUẬN TỐT NGHIỆP PHÁT TRIỂN ỨNG DỤNG ĐÀO TẠO VÀ SÁT HẠCH CẤP GIẤY PHÉP LÁI XE Application development for training and testing of driving licenses KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, NĂM 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÀNH THANH SƠN – 17520984 PHẠM TRẦN CHÍNH - 17520292 KHĨA LUẬN TỐT NGHIỆP PHÁT TRIỂN ỨNG DỤNG ĐÀO TẠO VÀ SÁT HẠCH CẤP GIẤY PHÉP LÁI XE Application development for training and testing of driving licenses KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ MINH, 2021 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin ………………………………………… – Chủ tịch ………………………………………… – Thư ký ………………………………………… – Ủy viên ………………………………………… – Ủy viên LỜI CẢM ƠN Trãi qua quãng thời gian học tập rèn luyện khoa Công nghệ Phần mềm, trường Đại học Công nghệ Thông – ĐHQG TP HCM, chúng em trang bị kỹ kiến thức cần thiết để thực khóa luận tốt nghiệp Để hồn thành khóa luận nhờ có kiến thức hướng dẫn tận tình q thầy Trước hết, em xin gửi lời cảm ơn tới Ban Giám hiệu trường Đại học Công nghệ Thông tin tạo điều kiện sở vật chất, môi trường học tập nghiên cứu chúng em thuận lợi tiếp thu kiến thức, thầy cô môn dạy cho chúng em kiến thức để thực khóa luận tốt nghiệp ngày hôm Quan trọng nhất, chúng em xin gửi lời cảm ơn tới cô Huỳnh Hồ Thị Mộng Trinh tận tình giúp đỡ, định hướng cách tư để chúng em thực khóa luận tốt nghiệp Đó góp ý vơ q báu khơng q trình thực khóa luận mà cịn kiến thức cho chúng em trình nghiên cứu lập nghiệp sau Vì nhiều lý do, q trình thực khóa luận chúng em khơng tránh khỏi sai sót, chúng em kính mong nhận dẫn góp ý thầy để đề tài khóa luận hồn thiện Chúng em xin chân thành cảm ơn Chúc điều tốt đẹp đồng hành người Thành phố Hồ Chí Minh, ngày 18 tháng năm 2021 Sinh viên BÀNH THANH SƠN PHẠM TRẦN CHÍNH MỤC LỤC DANH MỤC BẢNG VÀ HÌNH TÓM TẮT KHÓA LUẬN Chương TỔNG QUAN ĐỀ TÀI .2 1.1 Lý lựa chọn đề tài .2 1.2 Khảo sát nhu cầu 1.2.1 Thông tin cá nhân người khảo sát 1.2.2 Thực trạng 1.2.3 Nhu cầu thực tế 1.3 Tìm hiểu ứng dụng liên quan .5 1.3.1 Ứng dụng “Ôn thi GPLX 600 câu” 1.3.2 Phần mềm luyện thi từ Bộ Giao thông vận tải 1.3.3 Tổng kết .6 1.4 Phạm vi 1.5 Phương pháp thực 1.6 Bố cục báo cáo .9 1.7 Ý nghĩa thực tiễn 10 Chương KIẾN THỨC NỀN TẢNG, KỸ THUẬT 11 2.1 Tổng quan PHP Phalcon 11 2.1.1 PHP 11 2.1.2 Phalcon 12 2.2 Tổng quan ReactJS, NextJS, Ant Design, TailwindCSS, React Query, Redux 14 2.2.1 ReactJS 14 2.2.2 NextJS .17 2.2.3 Ant Design 18 2.2.4 TailwindCSS .19 2.2.5 React Query .19 2.2.6 Redux Redux Toolkit 21 2.3 AaPanel Control Panel 24 2.4 CloudFlare 25 2.4.1 CloudFlare gì? .25 2.4.2 Ưu nhược điểm CloudFlare 25 Chương PHÂN TÍCH, THIẾT KẾ, TRIỂN KHAI HỆ THỐNG 27 3.1 Xác định phân tích yêu cầu hệ thống 27 3.1.1 Xác định yêu cầu hệ thống 27 3.1.2 Phân tích yêu cầu hệ thống 28 3.1.3 Use-case .31 3.2 Thiết kế hệ thống 50 3.2.1 Thiết kế sở liệu 50 3.2.2 Thiết kế kiến trúc hệ thống 68 3.2.3 Thiết kế giao diện hệ thống .70 3.3 Triển khai hệ thống 76 Chương KẾT LUẬN, ĐÁNH GIÁ, HƯỚNG PHÁT TRIỂN 78 4.1 Kết đạt 78 4.2 Định hướng phát triển 85 DANH MỤC HÌNH Hình 1.1 – Biểu đồ tỉ lệ mong muốn chức xuất hệ thống Hình 2.1 – Lợi ích PHP 11 Hình 2.2 – Tốc độ Phalcon so với Framework khác .13 Hình 2.3 – DOM Tree .15 Hình 2.4 – Ưu điểm React 17 Hình 2.5 – So sánh NextJS framework tương tự - GatsbyJs 18 Hình 2.6 – Ant Design 19 Hình 2.7 – Sơ đồ life-cycle React Query 20 Hình 2.8 – Cách Redux làm việc 22 Hình 2.9 – Cách làm việc Redux 23 Hình 2.10 – Giao diện aaPanel 24 Hình 2.11 – So sánh CloudFlare khơng dùng CloudFlare 25 Hình 3.1 – Use tổng quát người dùng 31 Hình 3.2 – Use case tổng quát quản trị viên .32 Hình 3.3 – Use case đăng ký tài khoản .32 Hình 3.4 – Use case đăng nhập 34 Hình 3.5 – Use case quản lý thông tin cá nhân 35 Hình 3.6 – Use case quản lý hồ sơ đăng ký sát hạch 37 Hình 3.7 – Use case quản lý theo dõi kết thi thử người dùng .40 Hình 3.8 – Use case thư viện câu hỏi 41 Hình 3.9 – Use case thư viện đề thi 43 Hình 3.10 – Use case thư viện tra cứu biển báo 44 Hình 3.11 – Use case thi thử .45 Hình 3.12 – Use case xem tin tức .46 Hình 3.13 – Sơ đồ lớp tổng quát sở liệu 50 Hình 3.14 – Kiến trúc tổng thể hệ thống 68 Hình 3.15 – Kiến trúc tầng ReactJS + NextJS Client ReactJS Admin Client 68 Hình 3.16 – Kiến trúc tầng PHP Phalcon Server 69 Hình 3.17 – Thiết kế giao diện tổng (layout) 70 Hình 3.18 – Thiết kế trang chủ 71 Hình 3.19 – Thiết kế hình đăng nhập 71 Hình 3.20 – Thiết kế hình danh sách đề thi .72 Hình 3.21 – Thiết kế hình thư viện câu hỏi .72 Hình 3.22 – Thiết kế hình thư viện biển báo 73 Hình 3.23 – Thiết kế hình thi thử 73 Hình 3.24 – Thiết kế hình kết thi thử 74 Hình 3.25 – Sơ đồ liên kết hình 75 Hình 3.26 – Mơ hình triển khai hệ thống 76 Hình 4.1 – Màn hình danh sách đề thi 79 Hình 4.2 – Màn hình thi thử 79 Hình 4.3 – Màn hình xem kết thi .80 Hình 4.4 – Màn hình học theo câu hỏi 80 Hình 4.5 – Màn hình danh sách kết / lịch sử thi .81 Hình 4.6 – Màn hình tra cứu biển báo 82 Hình 4.7 – Màn hình đăng ký hồ sơ sát hạch 83 Hình 4.8 – Màn hình đăng nhập 84 Hình 4.9 – Màn hình trang dành cho quản trị viên 84 Hình 4.10 – Màn hình quản lý nhân viên 85 Hình 4.11 – Màn hình quản lý câu hỏi 85 DANH MỤC BẢNG Bảng 1.1 – Phân bố khảo sát theo độ tuổi Bảng 1.2 – Bảng tỉ lệ nhu cầu thi lái theo hạng lái Bảng 1.3 – Bảng tỉ lệ cách học lý thuyết Bảng 1.4 – Bảng so sánh tính ứng dụng ứng dụng đề xuất Bảng 3.1 – Đặc tả use case đăng ký tài khoản 32 Bảng 3.2 – Đặc tả use case đăng nhập 34 Bảng 3.3 – Đặc tả use case quản lý thông tin cá nhân 35 Bảng 3.4 – Đặc tả use case quản lý hồ sơ đăng ký sát hạch .37 Bảng 3.5 – Đặc tả use case quản lý theo dõi kết thi thử người dùng 40 Bảng 3.6 – Đặc tả use case thư viện câu hỏi .41 Bảng 3.7 – Đặc tả use case thư viện đề thi .43 Bảng 3.8 – Đặc tả use case thư viện tra cứu biển báo .44 Bảng 3.9 – Đặc tả use case thi thử 45 Bảng 3.10 – Đặc tả use case xem tin tức 46 Bảng 3.11 – Danh sách actors 48 Bảng 3.12 – Danh sách use case 48 Bảng 3.13 – Mô tả tổng quát CSDL 51 Bảng 3.14 – Bảng USER 55 Bảng 3.15 – Bảng USER_META .56 Bảng 3.16 – Bảng USER_EXAM .56 Bảng 3.17 – Bảng USER_EXAM_DETAIL 57 Bảng 3.18 – Bảng TRAFFICT_SIGN .57 Bảng 3.19 – Bảng TRAFFIC_SIGN_CATEGORY 58 Bảng 3.20 – Bảng REGISTRATION 58 Bảng 3.21 – Bảng REGISTRATION_META 59 Bảng 3.22 – Bảng QUESTION 59 Bảng 3.23 – Bảng QUESTION_CATEGORY 61 Bảng 3.24 – Bảng QUESTION_ANSWER 61 Bảng 3.25 – Bảng QUESTION_ANSWER_RESULT .62 Bảng 3.26 – Bảng PREDEFINED_EXAM .62 Bảng 3.27 – Bảng PREDEFINED_EXAM_QUESTION 63 Bảng 3.28 – Bảng POST 63 Bảng 3.29 – Bảng POST_CATEGORY 64 Bảng 3.30 – Bảng POST_META 65 Bảng 3.31 – Bảng LICENSE_LEVEL 65 Bảng 3.32 – Bảng COMMENT 66 Bảng 3.33 – Bảng FILE 66 Bảng 3.34 – Mô tả tầng ReactJS + NextJS Client ReactJS Admin Client 69 Bảng 3.35 – Mô tả kiến trúc tầng PHP Phalcon Server 69 Hình 3.22 – Thiết kế hình thư viện biển báo Hình 3.23 – Thiết kế hình thi thử 73 Hình 3.24 – Thiết kế hình kết thi thử 74 Hình 3.25 – Sơ đồ liên kết hình 75 3.3 Triển khai hệ thống Hình 3.26 – Mơ hình triển khai hệ thống Hệ thống triển khai dựa tảng ứng dụng website Với tảng website, người dùng sử dụng ứng dụng nơi nhiều thiết bị có hỗ trợ trình duyệt web Về bảo mật: Nhóm sử dụng CloudFlare làm máy chủ trung gian để giảm tải cho server gốc, đồng thời tăng đốc độ tải trang tăng cường bảo mật cho hệ thống Bên cạnh đó, nhóm sử dụng giao thức HTTPS hai phía từ người dùng đến CloudFlare từ CloudFlare đến server Ở phía server, nhóm sử dụng tường lửa mặc định CentOS Về máy chủ: Nhóm sử dụng aaPanel đề cập chương để quản lý VPS chạy hệ điều hành CentOS Web Server nhóm sử dụng Nginx, dùng để tương tác với PHP làm reverse proxy cho ứng dụng React NextJS Vì dùng Nginx 76 nên đặt phần: API Server, client, client admin máy chủ, cổng 80/443 Ngoài ra, dùng Nginx làm reverse proxy Về mặt ứng dụng: Nhóm sử dụng hệ quản trị sở liệu MariaDB, phiên mã nguồn mở trì cộng đồng MySQL tương thích với nhiều tảng, hiệu suất cao, bảo mật tốt Ngồi ra, nhóm sử dụng chế độ Server-side rendering NextJS để đảm bảo khả phục vụ client tốt 77 Chương KẾT LUẬN, ĐÁNH GIÁ, HƯỚNG PHÁT TRIỂN 4.1 Kết đạt Nhóm hồn thành u cầu đặt ban đầu, xây dựng trang web hỗ trợ học sát hạch thử phần lý thuyết để cấp giấy phép lái xe, hoàn thành số chức cho phần quản lý quản trị viên Những chức đạt là: phần luyệt thi theo câu hỏi đề chuẩn, phần luyện thi cho phép thi thử theo đề, xem kết thi thử tổng quan trình luyện sát hạch để hỗ trợ người học tập trung vào phần quan trọng phần người học yếu để tăng hội đạt kỳ thi sát hạch thật Về phần giao diện, trang web tối giản, tinh gọn, đồng bồ màu sắc, bố cục hợp lý, tương đối thân thiện với người dùng kể với người lần đầu sử dụng Bên cạnh đó, thao tác trang web phản hồi nhanh, tối ưu hóa hiệu suất sử dụng người dùng Nhóm áp dụng thành cơng kỹ thuật server-side rendering, cron job, bảo mật phiên đăng nhập JWT Hệ thống nhóm triển khai máy chủ riêng hoạt động công khai, độ chịu tải tốt 78 Hình 4.1 – Màn hình danh sách đề thi Hình 4.2 – Màn hình thi thử 79 Hình 4.3 – Màn hình xem kết thi Hình 4.4 – Màn hình học theo câu hỏi 80 Hình 4.5 – Màn hình danh sách kết / lịch sử thi 81 Hình 4.6 – Màn hình tra cứu biển báo 82 Hình 4.7 – Màn hình đăng ký hồ sơ sát hạch 83 Hình 4.8 – Màn hình đăng nhập Hình 4.9 – Màn hình trang dành cho quản trị viên 84 Hình 4.10 – Màn hình quản lý nhân viên Hình 4.11 – Màn hình quản lý câu hỏi 4.2 Định hướng phát triển Trong trình thực khóa luận, khơng có đủ nguồn lực thời gian nên nhóm nhận thấy hệ thống cịn thiếu sót cần phải khắc phục định hướng phát triển tương lai như: - Cho phép tổ chức thi thật, tập trung - Cho phép tra cứu nhanh ý nghĩa biển báo trang xem kết thi thử 85 - Trích dẫn luật giao thơng đường có liên quan tới câu hỏi - Tích hợp bảo mật đăng nhập, đăng nhập Facebook, Google, xác thực hai yếu tố,… - Phát triển chuyên sâu hệ thống hỗ trợ nghiệp vụ cho trung tâm đào tạo sát hạch giấy phép lái xe - Tối ưu hóa hệ thống, tăng tốc độ xử lý, thân thiện với máy tìm kiếm (SEO friendly) - Tích hợp cơng nghệ Socket.IO 86 TÀI LIỆU THAM KHẢO [1] P Sturgeon, "Understanding RPC, REST and GraphQL," January 2018 [Online] Available: https://apisyouwonthate.com/blog/understanding-rpc-restand-graphql [2] Facebook, "React - A JavaScript library for building user interfaces," [Online] Available: https://reactjs.org/ [3] Vercel, "Next.js - The React Framework," [Online] Available: https://nextjs.org/ [4] odva.pro, "PHP Phalcon - High Performance Web Framework," [Online] Available: https://phalcon.io/ [5] TailwindCSS, "Rapidly build modern websites without ever leaving your HTML.," [Online] Available: https://tailwindcss.com/ [6] T Linsley, "React Query - Hooks for fetching, caching and updating asynchronous data in React," [Online] Available: https://reactquery.tanstack.com/ [7] "Ant Design - The world's second most popular React UI Framework," [Online] Available: https://ant.design/ 87 ... GIẤY PHÉP LÁI XE? ?? nhằm phát triển hệ thống hỗ trợ việc học lý thuyết sát hạch cấp giấy phép lái xe Việt Nam, đồng thời cải tiến số hóa số nghiệp vụ đào tạo sát hạch trung tâm đào tạo sát hạch giấy. .. hiểu ứng dụng liên quan 1.3.1 Ứng dụng “Ôn thi GPLX 600 câu” Ứng dụng “Ôn thi GPLX 600 câu” câu nhà phát triển ứng dụng WATERFALL ứng dụng hỗ trợ ôn tập lý thuyết thi sát hạch giấy phép lái xe. .. Có Ứng dụng đề xuất Có 1.4 Phạm vi Hoàn thành ứng dụng với phần chính, hỗ trợ cho đối tượng: Người học – người có nhu cầu học sát hạch giấy phép lái xe; Trung tâm đào tạo sát hạch giấy phép lái