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 viên thực hiện: Giảng viên hướng dẫn: Phan Hoàng Hạc 1911064776 19DTHD2 Nguyễn Quốc Dũng 1911065749 19DTHD2 Thầy Bùi Phú Khuyên 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 Danh Mục Hình Ảnh Danh Mục Bảng CHƯƠNG : TỔNG QUAN 1.1 Lý chọn đề tài • Trong sống nay, có lượng lớn sinh viên, cơng nhân lao động, gia đình vào thành phố lớn để học tập làm việc.Nên nhu cầu tìm kiếm phịng trọ, nơi ngày tăng • Tránh việc người tìm phải tự thân vận động tìm kiếm cho nơi tốt Thay vào cần ngồi nhà, hay cần thiết bị điện tử để tìm kiếm đơn giản mà khơng cần phải ngồi • Ý thức 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 quy tắc , chuẩn Đối tượng hướng đến người dùng Phạm vi giới hạn: hỗ trợ tìm kiếm phịng trọ, nhà, văn phịng Tìm hiểu cách triển khai xây dựng hệ thông Website phải dễ dàng kiểm tra , cải tiến, nâng cấp có lỗi phát sinh bất ngờ từ hệ thống 1.3 Nội dung thực Họ Tên Phan Hồng Hạc(Nhóm trưởng) Nhiệm Vụ Thiết kế phần mềm Tìm hiểu để tài Lên ý tưở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 thực 1.4 Phương pháp thực • Họp phân tích sử dụng cơng nghệ ? thiết kế giao diện ? sử dụng sở liệu ? • Sau phân tích tiến hành chọn sử dụng công nghệ React js Node js thực theo u cầu phần tích • Kiểm thử hoàn thành sản phẩm 1.5 Giới thiệu cơng nghệ sử dụng 1.5.1 Ngơn ngữ javascrip • Là ngơn ngữ lập trình web phổ biến ngày Javascript tích h ợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động Chúng đóng vai trị tương tự phần website, cho phép Clien t-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo websi te động • Brendan Eich người phát triển Javascript Netscape với tiền thâ n Mocha Sau đó, Mocha đổi thành LiveScript cuối đổi t hành JavaScript • Năm 1998, JavaScript với phiên ECMAScript phát hành đến năm 1999 ECMAScript mắt • Năm 2016, ứng dụng JavaScript đạt kỷ lục lên tới 92% website sử dụng, đ ồng thời đánh giá công cụ quan trọng lập trì nh viên 1.5.2 Visual Studio Code(IDE) • Visual Studio Code trình soạn thảo mã nguồn phát triển Mi crosoft dành cho Windows, Linux macOS Nó hỗ trợ chức debug, đ i kèm với Git, có chức bật cú pháp, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn • Visual Studio Code hỗ trợ đa dạng chức Debug, kèm với Git, có Syntax Highlighting Đặc biệt tự hồn thành mã thông minh, Snippets, khả cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code c ũng cho phép lập trình viên thay đổi Theme, phím tắt, đa dạng tù y chọn khác Mặc dù trình soạn thảo Code tương đối nhẹ, lại bao gồm tính mạnh mẽ 1.5.3 Node js • NodeJS tảng xây dựng “V8 Javascript engine” viết bằn g c++ Javascript Nền tảng phát triển Ryan Lienhart Dahl vào nă m 2009 • Node.js đời developer đời đầu JavaScript mở rộng từ thứ bạ n chạy trình duyệt thành mơi trường mà bạn chạy máy củ a dạng ứng dụng độc lập • Cả trình duyệt JavaScript Node.js chạy JavaScript runtime V8 engine Công cụ lấy code JavaScript bạn convert sang mã máy (bytecode) c 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 • 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 Hình 26: Giao diện 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 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 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 để 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 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. .. phần mềm Tìm hiểu để tài Lên ý tưở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... đó, 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