BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

59 10 0
BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

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 TIEU LUAN MOI download : skknchat@gmail.com LỜI NHẬN XÉT CỦA GIẢNG VIÊN TIEU LUAN MOI download : skknchat@gmail.com 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! TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 Quá 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 quát 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com Hình 19: Giao diện tìm kiếm Hình 20: Giao diện tìm kiếm TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 Xem đăng lên o Xem dạng danh sách o Phân trang với hiển thị tối đa đăng Xem thơng tin tài khoản o Có thể thay đổi thông tin TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com Hình 30: Giao diện đăng ký Hình 31: Giao diện đăng ký email tồn database TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 khơng thể 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 cịn Vì cơng nghệ mới, thời gian trình độ cịn 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 để hồ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 TIEU LUAN MOI download : skknchat@gmail.com 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/ TIEU LUAN MOI download : skknchat@gmail.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. .. vấn đề đó, nhóm em định chọn đề tài:? ?Xây dựng Website hỗ trọ tìm kiếm phịng trọ ” áp dụng thí điểm vào mơ hình quản lí vào việc tìm kiếm 1.2 Mục tiêu đề tài Tìm hiểu phương pháp làm đề tài theo... download : skknchat@gmail.com 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

Ngày đăng: 22/06/2022, 06:27

Hình ảnh liên quan

Hình 2. 2: Biều đô Usecase tổng quát - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 2..

2: Biều đô Usecase tổng quát Xem tại trang 22 của tài liệu.
Hình 2. 3: Biểu đồ Usecase đăng nhập, đăng ký - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 2..

3: Biểu đồ Usecase đăng nhập, đăng ký Xem tại trang 23 của tài liệu.
Hình 2. 4: Biểu đồ Usecase quản lý tài khoản - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 2..

4: Biểu đồ Usecase quản lý tài khoản Xem tại trang 25 của tài liệu.
Hình 2. 5: Biểu đồ Usecase quản lý loại phòng thuê - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 2..

5: Biểu đồ Usecase quản lý loại phòng thuê Xem tại trang 28 của tài liệu.
Hình 2. 6: Usecase quản lý bài đăng - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 2..

6: Usecase quản lý bài đăng Xem tại trang 29 của tài liệu.
2.3.4. Mô hình sơ đồ lớp - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

2.3.4..

Mô hình sơ đồ lớp Xem tại trang 31 của tài liệu.
Hình 2. 7: Biểu đồ sơ đồ ngữ cảnh - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 2..

7: Biểu đồ sơ đồ ngữ cảnh Xem tại trang 31 của tài liệu.
2.4.2. Bảng Users - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

2.4.2..

Bảng Users Xem tại trang 33 của tài liệu.
2.4.1. Bảng Category - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

2.4.1..

Bảng Category Xem tại trang 33 của tài liệu.
2.4.2. Bảng Room - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

2.4.2..

Bảng Room Xem tại trang 34 của tài liệu.
Hình 3. 1: Giao diện trang chủ - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

1: Giao diện trang chủ Xem tại trang 36 của tài liệu.
Hình 3. 6: Giao diện các bài đăng khuyến nghị - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

6: Giao diện các bài đăng khuyến nghị Xem tại trang 38 của tài liệu.
Hình 3. 5: Giao diện các danh mục - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

5: Giao diện các danh mục Xem tại trang 38 của tài liệu.
Hình 3. 10: : Giao diện lọc với 1 tùy chọn - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

10: : Giao diện lọc với 1 tùy chọn Xem tại trang 41 của tài liệu.
Hình 3. 13: Giao diện lọc với nhiều tùy chọn - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

13: Giao diện lọc với nhiều tùy chọn Xem tại trang 42 của tài liệu.
Hình 3. 15: Giao diện khi chuyển trang 2 - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

15: Giao diện khi chuyển trang 2 Xem tại trang 44 của tài liệu.
Hình 3. 16: : Giao diện liên hệ, trợ giúp - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

16: : Giao diện liên hệ, trợ giúp Xem tại trang 45 của tài liệu.
Hình 3. 18: Giao diện khi thông báo đến admin - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

18: Giao diện khi thông báo đến admin Xem tại trang 46 của tài liệu.
Hình 3. 20: Giao diện tìm kiếm - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

20: Giao diện tìm kiếm Xem tại trang 47 của tài liệu.
Hình 3. 19: Giao diện tìm kiếm - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

19: Giao diện tìm kiếm Xem tại trang 47 của tài liệu.
Hình 3. 21: Giao diện tìm kiếm - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

21: Giao diện tìm kiếm Xem tại trang 48 của tài liệu.
Hình 3. 22: Giao diện chi tiết bài đăng - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

22: Giao diện chi tiết bài đăng Xem tại trang 49 của tài liệu.
Hình 3. 24: Giao diện khi đăng nhập có thể cập nhật và xóa - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

24: Giao diện khi đăng nhập có thể cập nhật và xóa Xem tại trang 50 của tài liệu.
Hình 3. 27: Giao diện thông tin tài khoản - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

27: Giao diện thông tin tài khoản Xem tại trang 52 của tài liệu.
Hình 3. 26: Giao diện yêu cầu người dùng phải đăng nhập - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

26: Giao diện yêu cầu người dùng phải đăng nhập Xem tại trang 52 của tài liệu.
Hình 3. 28: Giao diện hiển thị hộp thoại không tìm thấy người dùng - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

28: Giao diện hiển thị hộp thoại không tìm thấy người dùng Xem tại trang 53 của tài liệu.
Hình 3. 30: Giao diện đăng ký - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

30: Giao diện đăng ký Xem tại trang 54 của tài liệu.
Hình 3. 32: Giao diện đăng ký khi username tồn tại trong database - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

32: Giao diện đăng ký khi username tồn tại trong database Xem tại trang 55 của tài liệu.
Hình 3. 36: Giao diện không tìm thấy trang - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

36: Giao diện không tìm thấy trang Xem tại trang 57 của tài liệu.
Hình 3. 37: Giao diện không tìm thấy trang khi user truy cập vào admin - BÁO cáo đồ án môn học xây DỰNG WEBSITE hỗ TRỢ tìm KIẾM PHÒNG TRỌ

Hình 3..

37: Giao diện không tìm thấy trang khi user truy cập vào admin Xem tại trang 57 của tài liệu.

Tài liệu cùng người dùng

Tài liệu liên quan