(TIỂU LUẬN) báo cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP.HCM BÁO CÁO ĐỒ ÁN MÔN HỌC XÂY DỰNG WEBSITE HỖ TRỢ TÌM KIẾM PHỊNG TRỌ Ngành: Cơng nghệ thông tin Chuyên ngành: Công nghệ phần mền Sinh v Giảng v TP Thủ Đức, Ngày 19 Tháng Năm 2022 LỜI NHẬN XÉT CỦA GIẢNG VIÊN LỜI MỞ ĐẦU Công nghệ thông tin ngày trở lên phổ biến hữu dụng sống hiệ n Đặc biệt từ khóa để tìm kiếm kết trở nên nhanh chóng Hiện mạng có nhiều web hỗ trợ tìm kiếm phịng trọ chotot, phongtro123.com…, trang có chức giống tìm kiếm nơi ở, phịng trọ Chính nhóm xây dựng website “Hỗ trợ tìm kiếm phịng trọ” thực cơng nghệ React js + Node js với mong muốn giúp cho việc hỗ trợ tìm kiếm phịng trọ dễ dàng, thuận tiện Tuy chúng em cố gắng để hồn thiện đề tài cách tốt nhất, ng thời gian có hạn hiểu biết ngơn ngữ lập trình, đề tài cịn hạn chế, chưa c ó nhiều kinh nghiệm nên chắn đề tài không tránh khỏi thiếu sót, chúng em mong nhận ý kiến đóng góp Thầy người quan tâm để đề tài hoàn thiện Chúng em xin chân thành cảm ơn! LỜI CẢM ƠN Chúng em xin chân thành cảm ơn hướng dẫn, bảo tận tình Giảng viên mơn Đồ án sở Thầy Bùi Phú Khuyên - giảng viên trường Đại học Cơng nghệ Thành p hố Hồ Chí Minh truyền đạt cho chúng em nhiều kiến thức quan trọng nhiều ý kiến đóng góp quý giá Cảm ơn đóng góp ý kiến chân thành quý báu Thầy n gười quan tâm giúp đỡ chúng em để hoàn thành đề tài Mục Lục Contents CHƯƠNG : TỔNG QUAN _10 1.1 Lý chọn đề tài _10 1.2 Mục tiêu đề tài _10 1.3 Nội dung thực _10 1.4 Phương pháp thực 11 1.5 Giới thiệu công nghệ sử dụng _11 1.5.1 Ngôn ngữ javascrip 11 1.5.2 Visual Studio Code(IDE) _12 1.5.3 Node js _12 1.5.4 Express framework 13 1.5.5 Mongodb 14 1.5.6 Mongoose _14 1.6 Mục tiêu đề _14 CHƯƠNG : TÁC PHÂN TÍCH VÀ ĐẶC TẢ YÊU CẦU _15 2.1 Q trình phân tích _15 2.1.1 Phân tích phạm vi dự án 15 2.1.2 Phân tích mở rộng yêu cầu nghiệp vụ 15 2.1.3 Phân tích yêu cầu bảo mật 16 2.1.4 Phân tích yêu cầu tốc độ 16 2.1.5 Phân tích yêu cầu vận hành _16 2.1.6 Phân tích yếu tố người 17 2.1.7 Phân tích yêu cầu tích hợp 17 2.1.8 Phân tích thực tiễn nghiệp vụ tồn 17 2.2 Xác định yêu cầu _18 2.2.1 Yêu cầu mô tả yêu cầu _18 2.2.2 Phân loại yêu cầu _18 2.3 Mô hình hóa u cầu 19 2.3.1 Sơ đồ ngữ cảnh _19 2.3.2 Sơ đồ Use Case _19 2.3.3 Sơ đồ chức năng(BFD) _26 2.3.4 Mơ hình sơ đồ lớp _27 2.4 Xây dựng sở liệu 28 2.4.1 Bảng Category _28 2.4.2 Bảng Users 28 2.4.2 Bảng Room 29 CHƯƠNG 3: THIẾT KẾ PHẦN MỀM _30 3.1 Giao diện chương trình 30 3.1.1 Giao diện trang chủ 30 3.1.2 Giao diện danh mục _33 3.1.3 Giao diện phòng thuê _33 3.1.4 Giao diện liên hệ 38 3.1.5 Giao diện tìm kiếm trang chủ 40 3.1.6 Giao diện chi tiết đăng 42 3.1.7 Giao diện chức người dùng 45 3.1.8 Giao diện đăng nhập, đăng ký _47 3.1.9 Giao diện quản lý Admin 49 3.1.10 Một số giao diện khác _50 CHƯƠNG 4: TỔNG KẾT _52 4.1 Kết đạt _52 4.2 Mặt hạn chế _52 4.3 Hướng phát triển _52 Danh Mục Hình Ảnh Hình 1: Biểu sơ đồ ngữ cảnh 18 Hình 2: Biều Use case tổng qt 19 Hình 3: Biểu đồ Use case đăng nhập, đăng ký 20 Hình 4: Biểu đồ Use case quản lý tài khoản 21 Hình 5: Biểu đồ Use case quản lý loại phòng thuê 23 Hình 6: Use case quản lý đăng 24 Hình 7: Biểu đồ sơ đồ ngữ cảnh 26 Hình 8: Mơ hình sơ đồ lớp .26 Hình 1: Giao diện trang chủ 30 Hình 2: Chức tùy chọn 31 Hình 3: Hiển thị trang Admin người dùng admin 31 Hình 4: Không hiển thị trang Admin người dùng user 31 Hình 5: Giao diện danh mục 32 Hình 6: Giao diện đăng khuyến nghị 32 Hình 7: Giao diện danh mục 33 Hình 8: Giao diện đăng theo danh mục .33 Hình 9: Giao diện phòng thuê 34 Hình 10: : Giao diện lọc với tùy chọn 35 Hình 11: : Giao diện lọc với tùy chọn 35 Hình 12: : Giao diện lọc với tùy chọn 36 Hình 13: Giao diện lọc với nhiều tùy chọn 36 Hình 14: Giao diện trang đầu 37 Hình 15: Giao diện chuyển trang 38 Hình 16: : Giao diện liên hệ, trợ giúp 39 Hình 17: Giao diện gửi thành conog 39 Hình 18: Giao diện thông báo đến admin 40 Hình 19: Giao diện tìm kiếm 41 Hình 20: Giao diện tìm kiếm 41 Hình 21: Giao diện tìm kiếm 42 Hình 22: Giao diện chi tiết đăng 43 Hình 23: Giao diện đăng xuất không hiển thị cập nhật xóa 44 Hình 24: Giao diện đăng nhập cập nhật xóa 44 Hình 25: Giao diện cập nhật đăng 45 Hình 26: Giao diện yêu cầu người dùng phải đăng nhập 46 Hình 27: Giao diện thơng tin tài khoản 46 Hình 28: Giao diện hiển thị hộp thoại khơng tìm thấy người dùng 47 Hình 29: Giao diện hiển thị hộp thoại nhập sai tài khoản mật 47 Hình 30: Giao diện đăng ký .48 Hình 31: Giao diện đăng ký email tồn database 48 Hình 32: Giao diện đăng ký username tồn database 49 Hình 33: Giao diện thơng tin user .49 Hình 34: Giao diện danh mục 50 Hình 35: Giao diện người dùng nhập sai điều hướng 50 Hình 36: Giao diện khơng tìm thấy trang 51 Hình 37: Giao diện khơng tìm thấy trang user truy cập vào admin 51 Danh Mục Bảng Bảng 1: Bảng đặc tả use case quản lý tài khoản 23 Bảng 2: Bảng đặc tả use case quản lý tài khoản 24 Bảng 3: Bảng đặc tả quản lý đăng 26 Bảng 4: Bảng Category 28 Bảng 5: Bảng Users 29 Bảng 6: Bảng Rooms 29 Hình 16: : Giao diện liên hệ, trợ giúp Điền tên, email, nội dung liên hệ Chưa điền khơng hiển thị nút để gửi, bắt buộc phải điển tất các Hình 17: Giao diện gửi thành conog Sau gửi, hiển thị thông báo gửi vào hộp thư quản trị viên Hình 18: Giao diện thơng báo đến admin 3.1.5 Giao diện tìm kiếm trang chủ Tìm kiếm theo tiêu đề loại phòng thuê Sau gõ từ khóa, hiển thị danh sách tương ứng Chọn details để xem chi tiết đăng Bấm vào nút close, xóa từ khóa để trả trạng thái ban đầu Hình 19: Giao diện tìm kiếm Hình 20: Giao diện tìm kiếm Hình 21: Giao diện tìm kiếm 3.1.6 Giao diện chi tiết đăng Hiển thị chi tiết thông tin đăng Hiển thị người dùng đăng Khi xem chi tiết đăng khơng cần đăng nhập Hình 22: Giao diện chi tiết đăng Nếu đăng người đăng nhập hiển thị tùy chọn cập nhập xóa đăng Bắt buộc phải đăng nhập thực chức Chỉ phòng thuộc đăng xóa đăng Hình 23: Giao diện đăng xuất khơng hiển thị cập nhật xóa Hình 24: Giao diện đăng nhập cập nhật xóa Khi bấm nút cập nhật điều hướng đến trang cập nhật Sau cập nhật chuyển đến lại thông tin đăng Hình 25: Giao diện cập nhật đăng 3.1.7 Giao diện chức người dùng Các chức yêu cầu người dùng phải đăng nhập Tạo đăng o Khi tạo bắt buộc phải nhập hết ô liệu o Bắt buộc chọn hình ảnh o Xem dạng danh sách o Phân trang với hiển thị tối đa đăng o Có thể thay đổi thơng tin Hình 26: Giao diện yêu cầu người dùng phải đăng nhập Hình 27: Giao diện thơng tin tài khoản 3.1.8 Giao diện đăng nhập, đăng ký Kiểm tra tài khoản người dùng có database khơng Kiểm tra mật tài khoản có khơng Các trường liệu bắt buộc phải nhập Trong trường hợp đăng ký, username email tồn database hiển thị cảnh báo Hình 28: Giao diện hiển thị hộp thoại khơng tìm thấy người dùng Hình 29: Giao diện hiển thị hộp thoại nhập sai tài khoản mật Hình 30: Giao diện đăng ký Hình 31: Giao diện đăng ký email tồn database Hình 32: Giao diện đăng ký username tồn database 3.1.9 Giao diện quản lý Admin Khi vào trang Admin pages bắt buộc phải đăng nhập chưa login trang người dùng Xem tất thông tin người dùng, bao gồm cập nhật, xóa, sửa, tạo người dùng Tạo loại danh mục bao gồm thêm, xóa ,sửa Xem tất thông tin đăng, bao gồm cập nhật, xóa, sửa, tạo phịng th Vì quản trị viên nên xóa đăng người dùng khác Hình 33: Giao diện thơng tin user Hình 34: Giao diện danh mục 3.1.10 Một số giao diện khác Khi người dùng nhập sai điều hướng trang web tự động điều hướng đến trang khơng tìm thấy Khi người cố gắng truy cập vào trang quản lý Quản trị viên, tự động điều hướng đến trang cảnh báo Hình 35: Giao diện người dùng nhập sai điều hướng Hình 36: Giao diện khơng tìm thấy trang Hình 37: Giao diện khơng tìm thấy trang user truy cập vào admin CHƯƠNG 4: TỔNG KẾT Sau 03 tháng thực nghiên cứu đề tài, hướng dẫn tận tình thầy Bùi Phú Khuyên, đồ án em đạt kết sau: 4.1 Kết đạt Tìm hiều biết cách sử dụng sở liệu MongoDB Tìm hiều biết cách sử dụng cơng nghệ React JS Tìm kiểu, nắm bắt kĩ thuật dụng NodeJS Mongoose kết nối với sở d ữ liệu MongoDB để tạo cách thức xử lí liệu theo thời gian thực Xây dựng website với chức phân tích 4.2 Mặt hạn chế Trong thời gian qua, em cố gắng để tìm hiểu thực đề tài Tuy nhiên với ki nh nghiệm thời gian hạn chế nên tránh khỏi thiếu sót đồ án Cụ thể: Phần giao diện chưa đẹp mắt Database yếu, truy vấn, mối quan hệ MongoDB Vì cơng nghệ mới, thời gian trình độ hạn chế hệ thống xây dựng đồ án dừng mức Do muốn áp dụng vào thực tiến phả i cần có thời gian, kiến thức nâng cao cơng sức để hoàn thiện 4.3 Hướng phát triển Xây dựng phần mềm quản lý toàn diện bao gồm việc mua bán, trao đổi, tìm kiếm mặt hàng, thiết bị điện tử, dịch vụ… Cung cấp cho người dùng thơng tin cần thiết muốn tìm kiếm trao đổi dịch vụ, mặt hàng website Tài Liệu Tham Khảo https://nodejs.org/en/docs/ https://mongoosejs.com/docs/api.html https://reactjs.org/docs/getting-started.html https://expressjs.com/ https://react-bootstrap.github.io/ https://react-icons.github.io/react-icons/ https://dashboard.emailjs.com/ ... tìm kiếm kết trở nên nhanh chóng Hiện mạng có nhiều web hỗ trợ tìm kiếm phịng trọ chotot, phongtro123.com…, trang có chức giống tìm kiếm nơi ở, phịng trọ Chính nhóm xây dựng website ? ?Hỗ trợ tìm. .. usecase: xây dựng website hỗ trợ tìm kiếm phịng trọ Tên tác nhân: Quản lý, quản trị hệ thống, người dùng Chức use case: Biểu đồ cho thấy use case tương tác với thôn g qua phần website hỗ trợ tìm kiếm. .. Hồng Hạc(Nhóm trưởng) Tìm hiểu ngơn ngữ, cơng nghệ , IDE, DB Hỗ trợ viết báo cáo Nguyễn Quốc Dũng Hỗ trợ thiết kế phần mềm Hỗ trợ thiết kế giao diện Viết trình bày báo cáo Bảng 1: Bảng nội dung