(Đồ án hcmute) xây dựng website tìm kiếm nhà trọ với spring boot và react

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 TÌM KIẾM NHÀTRỌ VỚI SPRING BOOT VÀ REACT GVHD: Th.S LÊ THỊ MINH CHÂU SVTH:TRẦN NGỌC HOÀNG SKL009818 Tp Hồ Chí Minh, 2023 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THƠNG TIN  TRẦN NGỌC HỒNG – 18110288 Đề Tài: XÂY DỰNG WEBSITE TÌM KIẾM NHÀ TRỌ VỚI SPRING BOOT VÀ REACT KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN Thạc sĩ LÊ THỊ MINH CHÂU KHOÁ 2018 – 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN HỆ THỐNG THƠNG TIN KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE TÌM KIẾM NHÀ TRỌ VỚI SPRING BOOT VÀ REACT SINH VIÊN THỰC HIỆN: Trần Ngọc Hoàng: 18110288 GIÁO VIÊN HƯỚNG DẪN: Thạc sĩ Lê Thị Minh Châu TP HỒ CHÍ MINH – 2023 ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập - Tự - Hạnh phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên : MSSV: Ngành: Công nghệ Thông tin Tên đề tài: Họ tên Giáo viên hướng dẫ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 : Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 2023 ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hạnh phúc KHOA CNTT ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên : MSSV: Ngành: Công nghệ Thông tin Tên đề tài: Họ tên Giáo viên hướng dẫ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 : Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 2023 LỜI CẢM ƠN Lời đầu tiên, em xin chân thành cảm ơn quý thầy (cơ) hỗ trợ, giúp đỡ em q trình thực khóa luận Đặc biệt Lê Thị Minh Châu tận tâm hướng dẫn, đóng góp ý chia sẻ kinh nghiệm suốt trình thực luận án chuyên ngành Đồng thời, em xin phép gửi lời cảm ơn đến thầy cô trường Đại học Sư Phạm Kỹ Thuật TP Hồ Chí Minh tận tình truyền đạt kiến thức, kinh nghiệm kỹ suốt trình học tập trường để vận dụng hồn thành khóa luận tốt nghiệp Và cuối em xin gửi lời cảm ơn đến người bạn, đàn anh, đàn chị chia sẻ kinh nghiệm kiến thức cần thiết suốt trình thực khóa luận Song, cịn nhiều hạn chế khách quan, khóa luận xây dựng khơng tránh khỏi thiếu sót Rất mong nhận đóng góp ý kiến từ phía thầy bạn để khóa luận ngày hoàn thiện đưa vào ứng dụng Em xin chân thành cảm ơn! ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập - Tự - Hạnh phúc ******* ******* ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên Sinh viên: Trần Ngọc Hoàng MSSV: 18110288 Thời gian làm luận văn: Đến: 18/12/2022 Từ: 22/08/2022 Chuyên ngành: Hệ thống thông tin Tên luận văn: XÂY DỰNG WEBSITE TÌM KIẾM NHÀ TRỌ VỚI SPRING BOOT VÀ REACT GV hướng dẫn: Thạc sĩ Lê Thị Minh Châu NHIỆM VỤ CỦA KHÓA LUẬN: Nhiệm vụ 1: Luyện tập kỹ tổng hợp kiến thức học Nhiệm vụ 2: Rèn luyện tư độc lập nâng cao nâng cao tay nghề kỹ lập trình, tính tự chủ công việc Nhiệm vụ 3: Vận dụng công nghệ để xây dựng website ứng dụng thực tế: Spring Boot, ReactJS, lưu trữ hình ảnh (đoạn phim) tảng mạnh mẽ, hệ quản trị sở liệu Mysql Nhiệm vụ 4: Xây dựng Website liên kết người dùng cần cho thuê bất động sản người dùng muốn thuê bất động sản với tính năng: - Người dùng đăng ký tài khoản Website tìm kiếm, lọc tiêu chí bất động sản phù hợp nhu cầu họ - Người cho thuê đăng ký tài khoản đăng thông tin liên quan theo yêu cầu, lựa chọn gói đăng ưu tiên theo mức phí tốn online cho phí đăng tiện lợi - Quản lý đăng, người dùng, mã giảm giá từ người quản trị viên - Người dùng quản lý đăng, thực phương thức toán online Đề cương viết luận văn: Phần MỞ ĐẦU 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Đối tượng phạm vi nghiên cứu 1.4 Kết dự kiến đạt Phần NỘI DUNG 2.1 Chương 2.1.1 Phân tích trạng 2.1.2 Phân tích yêu cầu 2.2 Chương 2.2.1 Biểu đồ Use Case (Use case diagram) 2.2.2 Biểu đồ hoạt động (Activity diagram) 2.2.3 Thiết kế sở liệu 2.3 Chương 3: Cơng nghệ 2.3.1 Ngơn ngữ lập trình cơng nghệ sử dụng 2.3.2 Lưu trữ liệu 2.3.3 Hệ quản trị sở liệu 2.4 Chương 4: Thiết kế giao diện xử lý 2.4.1 Trang chủ 2.4.2 Trang thông tin chi tiết 2.4.3 Trang tạo viết 2.4.4 Trang quản lý viết 2.4.5 Trang chi tiết đơn toán 2.4.6 Trang toán VnPay 2.4.7 Trang lịch sử giao dịch 2.4.8 Trang thông tin cá nhân 2.4.9 Trang quản lý thông tin viết (quản trị viên) 2.4.10 Trang quản lý mã giảm giá (quản trị viên) 2.4.11 Trang quản lý thông tin người dùng (quản trị viên) 2.5 Chương 5: Xử lý back-end 2.5.1 Web API gì? 2.5.2 Sử dụng Web API SPRING BOOT xây dựng Back-end Phần KẾT LUẬN 3.1 Kết đạt 3.2 Ưu điểm 3.3 Nhược điểm 3.4 Hướng phát triển đề tài KẾ HOẠCH THỰC HIỆN STT Thời gian 22/8 – 5/9 Công việc Ghi Khảo sát phân tích nghiệp vụ Hồn thành từ ứng dụng thực tế 5/9 – 12/9 Thiết kế, xây dựng database, khởi Hồn thành tạo, cấu hình dự án 12/9 – 19/9 Thiết kế giao diện Hoàn thành 19/9 – 20/10 Xây dựng chức cho người Hoàn thành dùng: tạo viết, quản lý viết 20/10 – 10/11 Xây dựng chức tốn, Hồn thành chức hỗ trợ tìm kiếm người dùng 10/11 – 17/11 Xây dựng chức chi tiết Hoàn thành viết 17/11 – 24/11 Xây dựng chức người quản Hoàn thành trị viên 24/11 – 03/12 Viết báo cáo, làm slide Ý kiến giáo viên hướng dẫn (Ký ghi rõ họ tên) Hồn thành Tp.Hồ Chí Minh, ngày tháng năm 2023 Người viết đề cương (Ký & ghi rõ họ tên) MỤC LỤC PHẦN 1: MỞ ĐẦU 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI `1 MỤC ĐÍCH CỦA ĐỀ TÀI ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU PHẦN 2: NỘI DUNG CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG 1.1 PHÂN TÍCH HIỆN TRẠNG 1.2 PHÂN TÍCH YÊU CẦU 11 CHƯƠNG 2: MƠ HÌNH HĨA U CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU 13 2.1 BIỂU ĐỒ USE CASE( USE CASE DIAGRAM) 13 2.2 BIỂU ĐỒ HOẠT ĐỘNG (ACTIVITY DIAGRAM) 31 2.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 40 CHƯƠNG 3: CÔNG NGHỆ 47 3.1 NGÔN NGỮ LẬP TRÌNH VÀ CƠNG NGHỆ SỬ DỤNG 47 3.2 LƯU TRỮ DỮ LIỆU 49 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 50 4.1 TRANG CHỦ 50 4.2 TRANG THÔNG TIN CHI TIẾT 55 4.3 TRANG TẠO BÀI VIẾT 57 4.4 TRANG QUẢN LÝ BÀI VIẾT 61 4.5 TRANG GIỎ TIN 69 4.6 TRANG CHI TIẾT ĐƠN THANH TOÁN 70 4.7 TRANG THANH TOÁN VNPAY 71 4.8 TRANG LỊCH SỬ GIAO DỊCH 72 4.9 TRANG THÔNG TIN CÁ NHÂN 74 Hình 76: Giao diện thơng báo tạo đơn tốn Hình 77: Giao diện thơng tin đơn tốn 4.7 TRANG THANH TỐN VNPAY Sau người dùng hoàn thành giao diện chọn đơn tốn, người dùng cần nhập thơng tin tài khoản ngân hàng lựa chọn để tốn hình 78 Nhập mã OTP xác nhận hình 79 71 Hình 78: Giao diện tốn VnPay Hình 79: Giao diện toán VnPay 4.8 TRANG LỊCH SỬ GIAO DỊCH Trên hình 80, thơng tin lịch sử giao dịch tốn: Sau hồn tất tốn, giao diện hiển thị lịch sử toán người dùng giúp người dùng quản lý viết trả phí đăng tin, muốn xem chi tiết đơn toán, bấm vào hàng xuất hình 81 72 Hình 80: Giao diện chi tiết thơng tin đơn tốn 73 Hình 81: Giao diện chi tiết thơng tin đơn tốn 4.9 TRANG THƠNG TIN CÁ NHÂN Ở trang này, người dùng thay đổi thông tin cách nhập lại thơng tin mới, sau bấm “Cập nhật” 74 Hình 82: Giao diện thơng tin cá nhân 4.10 TRANG QUẢN LÝ THÔNG TIN BÀI VIẾT (QUẢN TRỊ VIÊN) Tương tự trang quản lý người dùng, điểm khác biệt người quản trị có vai trị duyệt hình 83, từ chối viết ghi rõ lý hình 85 Khi viết không duyệt, trạng thái không duyệt, người quản trị viên có quyền chỉnh sửa lý Hình 83: Giao diện quản lý: chờ duyệt 75 Hình 84: Giao diện quản lý: lý từ chối Hình 85: Giao diện quản lý: khơng duyệt 4.11 TRANG QUẢN LÝ MÃ GIẢM GIÁ (QUẢN TRỊ VIÊN) Hình 87, giao diện cho tác vụ tạo chỉnh sửa mã giảm giá Hình 86 giao diện quản lý mã giảm giá Thơng tin gồm có thơng tin ngày bắt đầu, ngày hết hạn, phần trăm áp dụng, giá tối đa giảm, tiêu đề, mã giảm giá 76 Hình 86: Quản lý danh mã giảm giá Hình 87: Giao diện tạo sửa mã giảm giá 4.2 QUẢN LÝ THÔNG TIN NGƯỜI DÙNG Người quản trị viên quản lý danh sách người dùng hệ thống, thực hoạt động quản lý, chỉnh sửa, tạo, xóa thơng tin người dùng 77 Hình 88: Quản lý danh sách người dùng Hình 89: Giao diện tạo chỉnh sửa thông tin người dùng 78 CHƯƠNG 5: XỬ LÝ BACK-END 5.1 WEB API LÀ GÌ? Web API ứng web sử dụng giúp các website khác trao đổi thông tin liệu Với tính truy xuất liệu đến tập hàm hay sử dụng dạng JSON XML thông qua giao thức truyền liệu HTTP HTTPS Với tính tự động hóa sản phẩm – Web API giúp người dùng quản lý công việc cách tự động tạo luồng công việc hiệu Công nghệ cập nhật theo thời gian thực API giúp việc chuyển thơng tin trở nên xác linh hoạt cách thay đổi cập nhật thơng tin liên tục theo thời gian thực Ngồi ra, với khả tích hợp linh động cho phép lấy nội dung ứng dụng hay website dễ dàng, API bớt gánh nặng chia sẻ thông tin chọn tránh yêu cầu không mong muốn xảy truy xuất thông tin Lượng truy cập người dùng rộng rãi, mở rộng phạm vi thông tin nhiều ứng dụng khác như: Mobie, desktop ứng dụng website khả giao tiếp chiều Vì giao dịch web API nơi đảm bảo độ tin cậy cao Như đề cập, hoạt động Web API diễn cách gửi nội dung, dịch vụ URL API đên máy chủ thông qua HTTP HTTPS Máy chủ thực việc kiểm tra tra xác nhận có, đồng thời tìm nguồn nội dung phù hợp để trả - trả theo định dạng JSON XML Website phân tích liệu trả thực hoạt động lưu trữ xuất liệu vào sở liệu đồng thời hiển thị thông tin cho người xem nội dung sau 5.2 SỬ DỤNG SPRING BOOT XÂY DỰNG BACK-END Thực khởi tạo dự án Spring boot https://start.spring.io 79 Hình 90: Khởi tạo dự án spring boot Sau khởi tạo dự án spring boot, mở dự án, bắt đầu cấu hình chi tiết, cập nhật file pom.xml để tải xuống file framework Cấu hình kết nối đến Mysql server, thơng tin AWS S3 server file application.properties Hình 91: application.properties Cấu hình spring security, web config, VnPay config đặt package config dự án Tiến hành tạo entity để ánh xạ xuống database 80 Hình 92: package entity Tạo API package controller thuận tiện quản lý API đó, api gồm: - HomeController.java: Xử lý API từ hình trang chủ - CartController.java: Xử lý API từ hình giỏ tin - NewsManagementController.java: Xử lý API từ hình quản lý viết người dùng - PaymentController.java: Xử lý API từ hình tạo đơn toán viết - PostDetailController.java: Xử lý API từ hình chi tiết đăng - PostNewsController.java: Xử lý API từ hình tạo viết - AuthController.java: Xử lý API thông tin người dùng - LoginController.java: Xử lý API đăng nhập - RegisterController.java: Xử lý API đăng ký - DiscountManagementController.java: Xử lý API quản lý mã giảm giá quản trị viên - NewsManagement.java: Xử lý API quản lý viết quản trị viên - UserManagement.java: Xử lý API quản lý thông tin người dùng quản trị viên 81 PHẦN 3: KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Nhóm xây dựng thành công website liên kết người dùng có bất động sản muốn cho thuê người dùng cần thuê bất động sản, tìm hiểu nghiệp vụ website mẫu thông qua khảo sát để phân tích thiết kế sở liệu Nhóm xây dựng giao diện người dùng thư viện reactjs, API từ cơng nghệ Spring Boot Nhóm kết hợp nơi lưu trữ giữ liệu khác nhau, Sử dụng hệ quản trị MySQL Server để lưu trữ thông tin dạng chữ số bản, AWS S3 server để lưu trữ hình ảnh, tảng Youtube để lưu trữ video từ người dùng gửi lên hệ thống Nhóm kết hợp với API bên hệ thống: API cung cung cấp địa lấy từ giao hàng GHN, API tốn VnPay Nhóm xây dựng website hỗ tìm kiếm nhà trọ với chức năng: - Người dùng đăng nhập / đăng ký với email, password thơng tin cá nhân bản, tốn chi phí cho viết online qua VnPay trực tuyến nhanh chóng, áp dụng mã giảm giá vào viết, thay đổi thông tin cá nhân - Người quản trị viên duyệt bài, phản hồi lý tin chưa với quy tắc - Xây dựng chức hỗ trợ người dùng lọc liệu muốn tìm kiếm xem thông tin, gợi ý viết dựa vào địa viết gốc - Xây dựng chức quản lý viết, danh sách người dùng, đơn hàng toán ƯU ĐIỂM Giao diện dễ nhìn, dễ thao tác, dễ dàng tìm kiếm lọc thơng tin cần thiết Nhóm kết hợp hình thức toán trực tuyến vào đồ án Sử dụng API bên ngồi GHN, VnPay NHƯỢC ĐIỂM Cịn thiếu nhiều chức hỗ trợ cho người dùng cho thuê bất động sản: chức đẩy viết lên đầu trang, thống kê để người dùng người quản trị có cách nhìn 82 tổng quan nhất, chức gợi ý viết cịn hạn chế, tốn phương thức VnPay,… Nhóm chưa áp dụng google map api vào đề tài này, chưa đẩy website lên server HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI Nhóm đưa website vào thực tế Nhóm bổ sung chức hổ trợ cho người dùng đẩy viết lên đầu trang, thêm google map vào website, thống kê người, thay đổi thuật toán để tối ưu chức gợi ý viết, toán thêm phương thức Momo, Paypal Nhóm bổ sung chức quản lý quản trị viên lọc viết trang quản lý viết, quản lý lịch sử giao dịch người dùng 83 DANH MỤC TÀI LIỆU THAM KHẢO Spring boot reference documentation (2022) Spring boot reference documentation Spring documentation Truy cập vào 30/08/2022, từ https://docs.spring.io/spring- boot/docs/current/reference/htmlsingle Reactjs (2020) Reactjs Reactjs Truy cập vào 30/8/2022, từ https://reactjs.org/docs/getting-started.html VnPay (2022) Hướng dẫn tích hợp cổng tốn VnPay VnPay Truy cập vào 20/10/2022, từ https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop Api GHN (2022) Api GHN Document Api GHN Truy cập vào 19/09/2022, từ https://api.ghn.vn/home/docs/detail Ant Design (2022) Ant design components overview Ant Design Truy cập vào 12/09/2022, từ https://ant.design/components/overview/ 84 S K L 0