Báo cáo Đồ án môn học: Website Tìm Nhà Trọ - ĐH Nguyễn Tất Thành

Tải trọn bộ đồ án website tìm nhà trọ bằng NodeJS và ReactJS. Tài liệu gồm báo cáo đầy đủ và source code chi tiết, phù hợp cho sinh viên tham khảo.

• Tác giả: Trần Nguyên Minh
• Người hướng dẫn: ThS. Nguyễn Thiện Phúc
• Trường học: Trường Đại học Nguyễn Tất Thành
• Chuyên ngành: Kỹ Thuật Công Nghệ Thông Tin
• Đề tài: Website Tìm Nhà Trọ
• Loại tài liệu: Đồ án môn học
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ Án Website Tìm Nhà Trọ

Đồ án website tìm nhà trọ là một dự án học tập toàn diện được thực hiện tại Trường Đại học Nguyễn Tất Thành, khoa Công Nghệ Thông Tin. Dự án này nhằm phát triển một nền tảng tìm kiếm nhà trọ trực tuyến hiệu quả, giải quyết các khó khăn trong quá trình tìm kiếm nơi ở của sinh viên, người đi làm và các gia đình trẻ. Sử dụng các công nghệ hiện đại như Node.js và React, đồ án cung cấp giải pháp toàn diện từ thiết kế giao diện thân thiện cho đến phát triển chức năng mạnh mẽ. Đây là một dự án thực tiễn, giúp sinh viên áp dụng kiến thức lý thuyết vào thực tế phát triển web, đồng thời tạo ra một sản phẩm hữu ích cho cộng đồng.

1.1. Mục Tiêu Của Dự Án

Mục tiêu chính của đồ án website tìm nhà trọ là xây dựng một ứng dụng web hoàn chỉnh với giao diện thân thiện người dùng và các tính năng tìm kiếm mạnh mẽ. Dự án tập trung vào việc cung cấp thông tin minh bạch, giúp người dùng tìm kiếm nhà trọ nhanh chóng và hiệu quả. Ngoài ra, dự án còn nhằm rèn luyện kỹ năng phát triển web, làm việc nhóm và quản lý dự án cho sinh viên.

1.2. Đối Tượng Sử Dụng

Website tìm nhà trọ hướng tới ba đối tượng chính: sinh viên đang tìm kiếm ký túc xá hoặc phòng trọ gần trường học, người đi làm tìm kiếm nơi ở gần nơi làm việc, và các chủ nhà/chủ trọ muốn quảng bá các phòng trọ của mình. Giao diện được thiết kế để phù hợp với nhu cầu của tất cả các nhóm này, đảm bảo trải nghiệm tốt trên cả máy tính và thiết bị di động.

II. Phân Tích Yêu Cầu Và Kế Hoạch Phát Triển

Phân tích yêu cầu là bước cơ bản và vô cùng quan trọng trong quá trình phát triển đồ án website tìm nhà trọ. Bước này bao gồm việc xác định các tính năng chính như tìm kiếm nhà trọ, lọc kết quả theo giá, địa điểm và tiện ích. Nhóm dự án tiến hành khảo sát người dùng thông qua bảng câu hỏi và phỏng vấn trực tiếp để hiểu rõ nhu cầu thực tế. Đồng thời, kế hoạch phát triển chi tiết được lập ra, bao gồm lịch trình công việc, phân công nhiệm vụ cho từng thành viên, và các mốc thời gian quan trọng. Việc phân tích các website tương tự như BatDongSan.com, Phongtro123.com cũng giúp nhóm lấy ý tưởng và tìm hiểu những best practice trong ngành.

2.1. Các Yêu Cầu Chính Của Dự Án

Dự án cần phải có tính năng tìm kiếm nâng cao với khả năng lọc theo giá, diện tích, địa điểm và tiện ích. Người dùng cần có thể xem thông tin chi tiết về từng căn phòng, bao gồm hình ảnh, mô tả, và thông tin liên hệ chủ nhà. Hệ thống phải hỗ trợ đăng ký tài khoản, đăng nhập an toàn, cùng với tính năng lưu tin yêu thích và thông báo khi có tin mới.

2.2. Lập Kế Hoạch Và Phân Công Công Việc

Kế hoạch dự án được chia thành 5 giai đoạn chính: thiết kế UI/UX, phát triển backend với Node.js, phát triển frontend với React, kiểm thử toàn diện, và triển khai trực tuyến. Nhóm gồm hai sinh viên Trần Nguyên Minh và Võ Thị Mỹ Linh, mỗi người được phân công các công việc phù hợp với kỹ năng. Thời gian thực hiện từ tháng 10 đến tháng 12 năm 2024 với các bước kiểm tra định kỳ.

III. Thiết Kế Giao Diện Người Dùng UI UX

Thiết kế giao diện là một phần quan trọng trong đồ án website tìm nhà trọ, đảm bảo trải nghiệm người dùng tốt nhất. Nhóm sử dụng Figma để tạo wireframe và mockup chi tiết, tập trung vào việc làm cho giao diện trực quan, dễ sử dụng và thu hút. Bố cục trang được thiết kế sao cho người dùng dễ dàng tìm kiếm, lọc kết quả và xem thông tin chi tiết. Lựa chọn bảng màu hài hòa, font chữ rõ ràng và các biểu tượng trực quan giúp nâng cao tính thẩm mỹ. Dự án đặc biệt chú trọng đến responsive design, đảm bảo giao diện hoạt động tốt trên tất cả các kích thước màn hình từ desktop đến smartphone. Các phiên usability testing được tiến hành với người dùng thực tế để thu thập phản hồi và cải thiện giao diện.

3.1. Nguyên Tắc Thiết Kế UI UX

Thiết kế tuân theo các nguyên tắc User-Centered Design, đặt nhu cầu người dùng lên hàng đầu. Giao diện phải minimalist nhưng đầy đủ chức năng, tránh quá phức tạp. Sử dụng hệ thống tìm kiếm trực quan với các bộ lọc rõ ràng, danh sách kết quả hiển thị rõ ràng và call-to-action buttons nổi bật. Màu sắc được chọn để phản ánh tính chất của dịch vụ, tạo cảm giác tin cậy và an toàn cho người tìm nhà.

3.2. Công Cụ Và Phương Pháp Thiết Kế

Nhóm sử dụng Figma để tạo prototype và collaborating trực tuyến, Adobe XD cho các chi tiết thiết kế cao cấp. Quy trình bao gồm tạo wireframe cơ bản, phát triển design system, tạo mockup chi tiết cho từng trang. Usability testing được thực hiện với nhóm người dùng đại diện, thu thập phản hồi và điều chỉnh giao diện theo yêu cầu thực tế để đạt trải nghiệm tối ưu.

IV. Phát Triển Chức Năng Và Công Nghệ Sử Dụng

Phát triển chức năng của đồ án website tìm nhà trọ sử dụng các công nghệ hiện đại và phổ biến. Backend được xây dựng với Node.js và Express.js, cung cấp API RESTful để xử lý các yêu cầu từ frontend. Database sử dụng MongoDB để lưu trữ thông tin nhà trọ, người dùng và các giao dịch. Frontend được phát triển với React, một framework JavaScript mạnh mẽ, giúp tạo giao diện động và responsive. Các chức năng chính bao gồm tìm kiếm và lọc nhà trọ, xem thông tin chi tiết, đăng ký/đăng nhập, lưu tin yêu thích, liên hệ với chủ nhà và quản lý tin đăng. Sử dụng JWT để xác thực người dùng, đảm bảo an niệm dữ liệu. Các thư viện hỗ trợ như Axios cho HTTP requests, Redux cho state management giúp code được tổ chức tốt.

4.1. Stack Công Nghệ Backend

Backend sử dụng Node.js với Express.js framework, cung cấp API RESTful hoàn chỉnh. MongoDB được chọn làm database vì tính linh hoạt trong lưu trữ dữ liệu không cấu trúc. JWT (JSON Web Tokens) được sử dụng cho xác thực và phân quyền người dùng. Bcryptjs mã hóa mật khẩu, dotenv quản lý biến môi trường. Máy chủ được tối ưu hóa để xử lý đồng thời nhiều yêu cầu, đảm bảo hiệu suất cao.

4.2. Stack Công Nghệ Frontend

Frontend được xây dựng với React, sử dụng Hooks cho state management. Axios xử lý HTTP requests tới backend, Redux quản lý global state. React Router cung cấp navigation giữa các trang. CSS Modules và Styled Components cho styling tổ chức. Responsive Design được thực hiện với Bootstrap hoặc Tailwind CSS, đảm bảo giao diện hoạt động tốt trên tất cả thiết bị.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1. Khảo sát hiện trạng 1. Gới thiệu JavaScript và Node. JavaScript: là một ngôn ngữ lập trình động, được sử dụng rộng rãi để tạo ra nội dung tương tác trên các trang web.

JavaScript chạy trên trình duyệt và máy chủ, cho phép tạo ra các ứng dụng web phong phú. - Ứng dụng: Frontend Development: Tạo các hiệu ứng động, xử lý sự kiện và tương tác người dùng trên trang web. Backend Development: Thông qua các môi trường runtime như Node.js, JavaScript có thể chạy trên máy chủ để xử lý dữ liệu và tương tác với cơ sở dữ liệu.js: là một môi trường runtime mã nguồn mở, giúp thực thi JavaScript bên ngoài trình duyệt. Được xây dựng trên V8 JavaScript engine của Google Chrome, Node.js cho phép phát triển các ứng dụng phía server hiệu quả.

- Ưu điểm: Không đồng bộ và non-blocking: Giúp xử lý nhiều yêu cầu cùng lúc mà không làm chậm hệ thống. NPM (Node Package Manager): Cung cấp hàng nghìn package miễn phí để mở rộng chức năng của ứng dụng. - Ứng dụng: API Development: Xây dựng các API mạnh mẽ và linh hoạt để kết nối các phần của hệ thống. Real-time Applications: Phát triển các ứng dụng thời gian thực như chat, thông báo tức thời.js: là một thư viện JavaScript do Facebook phát triển, dùng để xây dựng giao diện người dùng (UI) bằng cách sử dụng các thành phần (components) có thể tái sử dụng.

- Ưu điểm: ix Virtual DOM: Tăng hiệu suất bằng cách giảm thiểu các thay đổi cần thực hiện trong DOM thực. Component-based Architecture: Giúp mã nguồn dễ quản lý và tái sử dụng. JSX: Kết hợp JavaScript và HTML, giúp việc viết mã UI trở nên trực quan và dễ dàng. - Ứng dụng: Single Page Applications (SPA): Tạo các ứng dụng trang đơn với trải nghiệm mượt mà cho người dùng.

Interactive UIs: Xây dựng các giao diện người dùng tương tác và phức tạp. Ứng dụng của JavaScript và Node.js trong phát triển website và hệ thống quản lý. 1) Ứng dụng của JavaScript Phát triển Frontend: - Tương tác người dùng: JavaScript cho phép tạo ra các trang web động và tương tác, giúp người dùng có trải nghiệm mượt mà hơn. - Hiệu ứng và Animation: Sử dụng các thư viện như GSAP hoặc Anime.js để tạo các hiệu ứng hoạt hình bắt mắt.

- Single Page Applications (SPA): JavaScript kết hợp với các framework như Angular hoặc Vue.js để phát triển các ứng dụng trang đơn, giúp tải trang nhanh chóng và mượt mà. 2) Ứng dụng của Node.js Phát triển Backend: - API Development: Node.js thường được sử dụng để xây dựng các API RESTful mạnh mẽ, kết nối giữa client và server. - Real-time Applications: Sử dụng Node.js để phát triển các ứng dụng thời gian thực như chat, thông báo tức thời và các ứng dụng cộng tác trực tuyến nhờ vào WebSockets.js là lựa chọn lý tưởng để xây dựng các kiến trúc microservices, giúp cải thiện tính mở rộng và bảo trì của hệ thống. x 3) Ứng dụng của React.js: Phát triển Frontend: - User Interface (UI): React.js cho phép xây dựng các giao diện người dùng tương tác và phức tạp với hiệu suất cao.

- Component-based Architecture: Sử dụng các thành phần UI có thể tái sử dụng giúp mã nguồn dễ quản lý và tái sử dụng, cải thiện hiệu suất phát triển. - State Management: Sử dụng các thư viện như Redux hoặc Context API để quản lý trạng thái ứng dụng một cách hiệu quả. Single Page Applications (SPA): - Dynamic Routing: Sử dụng React Router để quản lý và điều hướng giữa các thành phần trong ứng dụng SPA, tạo ra trải nghiệm mượt mà cho người dùng. - Data Fetching: Dễ dàng tích hợp với các công cụ như Axios hoặc Fetch API để lấy dữ liệu từ server và hiển thị trên UI.

 Kết hợp Node.js và React.js trong phát triển website và hệ thống quản lý: Full-Stack Development: o Thống nhất ngôn ngữ: Sử dụng JavaScript cho cả phía server (Node.js) và phía client (React.js) giúp việc phát triển, kiểm thử và bảo trì ứng dụng trở nên thuận tiện và đồng bộ hơn. o API và UI tích hợp: Node.js có thể xây dựng các API cung cấp dữ liệu cho giao diện React, giúp tạo ra các ứng dụng web tương tác và thời gian thực. o Hiệu suất cao: Sự kết hợp này cho phép phát triển các ứng dụng web hiệu suất cao và dễ dàng mở rộng, từ đó cải thiện trải nghiệm người dùng và quản lý dữ liệu hiệu quả. Tầm quan trọng của việc sử dụng MySQL trong việc lưu trữ và quản lý dữ liệu.

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) mã nguồn mở rất phổ biến, được sử dụng rộng rãi trong việc lưu trữ và quản lý dữ liệu. Dưới đây là những lý do chính làm nổi bật tầm quan trọng của MySQL: xi - Hiệu suất cao và tốc độ: MySQL được thiết kế để xử lý hàng triệu truy vấn và hàng nghìn giao dịch trong giây, đáp ứng nhu cầu của các ứng dụng web có lưu lượng lớn và yêu cầu hiệu suất cao. - Độ tin cậy và ổn định: MySQL nổi tiếng về độ tin cậy và tính ổn định, giúp đảm bảo rằng dữ liệu của bạn luôn được bảo toàn và không bị mất mát. - Tính bảo mật cao: MySQL cung cấp nhiều tính năng bảo mật như mã hóa dữ liệu, xác thực người dùng, quản lý quyền truy cập để bảo vệ dữ liệu khỏi các mối đe dọa bên ngoài.

- Dễ sử dụng và quản lý: Với các công cụ hỗ trợ quản lý như phpMyAdmin, việc sử dụng và quản lý MySQL trở nên dễ dàng hơn, ngay cả đối với những người mới bắt đầu. - Khả năng mở rộng: MySQL có thể dễ dàng mở rộng theo nhu cầu của hệ thống, từ các dự án nhỏ đến các ứng dụng doanh nghiệp lớn với lưu lượng truy cập cao. - Tích hợp tốt với các ngôn ngữ lập trình: MySQL dễ dàng tích hợp với nhiều ngôn ngữ lập trình phổ biến như PHP, Java, Python, và JavaScript, giúp lập trình viên xây dựng và triển khai các ứng dụng một cách hiệu quả. - Hỗ trợ cộng đồng mạnh mẽ:Với một cộng đồng người dùng và phát triển lớn, MySQL luôn nhận được sự hỗ trợ, cập nhật và cải tiến liên tục, giúp duy trì và phát triển hệ thống một cách bền vững.

Ứng dụng thực tiễn của MySQL: - Quản lý cơ sở dữ liệu doanh nghiệp: Lưu trữ thông tin khách hàng, hàng hóa, đơn hàng và các dữ liệu liên quan khác. - Phát triển website: Sử dụng MySQL để lưu trữ và quản lý nội dung của trang web, như thông tin người dùng, bài viết, bình luận. - Hệ thống quản lý học viên: Quản lý thông tin học viên, khóa học, lịch học và kết quả học tập. - Ứng dụng thương mại điện tử: Quản lý sản phẩm, giỏ hàng, đơn đặt hàng và thông tin giao dịch.

Lý do chọn đề tài Lựa chọn Node.js và MySQL cho dự án vì sự linh hoạt, dễ học và phổ biến: - Linh hoạt: o Node.js: Mô hình xử lý không đồng bộ giúp quản lý nhiều kết nối đồng thời hiệu quả.js: Cấu trúc thành phần giúp xây dựng giao diện người dùng một cách linh hoạt và dễ dàng mở rộng. o MySQL: Hỗ trợ nhiều tùy chọn cấu hình và có khả năng mở rộng để đáp ứng nhu cầu lưu trữ dữ liệu lớn. - Dễ học: o Node.js: Sử dụng JavaScript, ngôn ngữ phổ biến và dễ học, cả ở phía máy chủ lẫn phía người dùng.js: Có cấu trúc đơn giản, dễ tiếp cận, đặc biệt với những người đã quen thuộc với JavaScript. o MySQL: Giao diện thân thiện, dễ học và dễ triển khai cho các dự án từ nhỏ đến lớn.

- Phổ biến: o Node.js: Được sử dụng rộng rãi trong nhiều ứng dụng web hiện đại, có cộng đồng hỗ trợ mạnh mẽ.js: Là một trong những thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng, với nhiều tài nguyên học tập và hỗ trợ. o MySQL: Hệ quản trị cơ sở dữ liệu phổ biến với cộng đồng người dùng rộng rãi và nhiều tài liệu hỗ trợ. - Hiệu suất và độ tin cậy cao: o Node.js: Xử lý tác vụ I/O hiệu quả, giúp cải thiện hiệu suất ứng dụng.js: Tối ưu hóa việc cập nhật giao diện người dùng, giảm thiểu thời gian phản hồi. o MySQL: Cung cấp khả năng xử lý giao dịch mạnh mẽ, đảm bảo dữ liệu được lưu trữ an toàn và có thể truy xuất nhanh chóng.

- Khả năng tích hợp: xiii o Node.js và React.js: Dễ dàng tích hợp với nhiều dịch vụ và công nghệ khác nhau, từ API đến các dịch vụ đám mây. o MySQL: Tương thích tốt với nhiều hệ quản trị cơ sở dữ liệu khác, giúp dễ dàng di chuyển và tích hợp dữ liệu. Lợi ích khi sử dụng: - Cộng đồng hỗ trợ lớn: Node.js và React.js Có cộng đồng phát triển mạnh mẽ, nhiều tài liệu học tập và thư viện hỗ trợ. MySQL Cộng đồng người dùng rộng rãi, giúp giải quyết các vấn đề kỹ thuật nhanh chóng.

- Tích hợp dễ dàng: Node.js và React.js Dễ dàng tích hợp với nhiều dịch vụ và công nghệ khác nhau, từ API đến các dịch vụ đám mây. MySQL Tương thích tốt với nhiều hệ quản trị cơ sở dữ liệu khác, giúp dễ dàng di chuyển và tích hợp dữ liệu. - Hiệu quả về chi phí: Node.js và MySQL Đều là mã nguồn mở và miễn phí, giúp tiết kiệm chi phí phát triển. Các dịch vụ hosting phổ biến đều hỗ trợ tốt các công nghệ này, giảm chi phí vận hành.

Mục tiêu chọn đề tài này - Tạo ra một công cụ hữu ích cho xã hội: Xây dựng một website tìm nhà trọ giúp người dùng dễ dàng tìm kiếm và thuê nhà, đặc biệt là sinh viên, người lao động xa quê, và những người có thu nhập thấp. - Tiết kiệm thời gian và công sức: Cung cấp một nền tảng trực tuyến để người dùng có thể tìm kiếm, so sánh và lựa chọn nhà trọ mà không cần phải đi lại nhiều. - Đảm bảo tính minh bạch và chính xác: Cung cấp thông tin chi tiết, đánh giá từ người dùng và các tính năng lọc nâng cao giúp người dùng có được lựa chọn phù hợp nhất với nhu cầu của mình. - Tích hợp công nghệ hiện đại: Sử dụng các công nghệ mới nhất như Node.js và MySQL để đảm bảo hiệu suất, bảo mật và khả năng mở rộng của website.

- Mở rộng thị trường: Thu hút nhiều người dùng và nhà đầu tư bằng cách cung cấp một giải pháp hiệu quả cho vấn đề nhà ở. - Hỗ trợ người dùng đa dạng: Đáp ứng nhu cầu của nhiều đối tượng người dùng khác nhau, từ sinh viên đến người lao động và những người có thu nhập thấp.