đồ án 2 ứng dụng nextjs xây dựng website giới thiệu và mua bán bất động sản

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.94 MB, 59 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CƠNG NGHỆ PHẦN MỀM</b>

<b>Thành phố Hồ Chí Minh, tháng 12 năm 2023</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

Ths. Nguyễn Công Hoan

<b>LỜI CẢM ƠN</b>

Đồ án với đề tài “ỨNG DỤNG NEXTJS VÀ XÂY DỰNG ỨNG DỤNG WEBSITEGIỚI THIỆU VÀ MUA BÁN BẤT ĐỘNG SẢN” là minh chứng cho quá trình cố gắngkhơng ngừng trong việc tìm tịi, học hỏi khi học tập tại trường Đại học Công nghệ Thôngtin. Thể hiện khả năng của bản thân trong việc áp dụng kiến thức chun mơn vào giảiquyết bài tốn thực tế.

Trong quá trình thực hiện đồ án, em đã nhận được sự hướng dẫn tận tình từ thầy. Mộtcách đặc biệt, em xin được gửi lời cảm ơn chân thành đến:

Các thầy cô trường Đại học Công nghệ Thông Tin nói chung và thầy NguyễnCơng Hoan nói riêng đã tận tình truyền đạt kiến thức tới em trong những năm học tập tạitrường. Đó là tài sản quý báu đã giúp em hoàn thành đề tài đồ án và cũng là hành trangcho con đường sự nghiệp của bản thân sau này.

Em xin được gửi lời cảm ơn sâu sắc tới ThS. Nguyễn Công Hoan, người đã trựctiếp hướng dẫn, chỉ bảo, giúp đỡ em những lúc khó khăn, đưa ra những lời khuyên bổ íchđể đồ án được hoàn thành đúng tiến độ và đáp ứng các yêu cầu đề ra ban đầu.

Trong khoảng thời gian thực hiện đồ án, chúng em đã học hỏi thêm được nhiều kiến thức,kinh nghiệm, biết được thêm về nhiều công nghệ mới. Nhóm em đã vận dụng những kiếnthức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiếnthức mới. Từ đó, vận dụng tối đa những gì đã học hỏi được để hoàn thành báo cáo đồ ánnày.

Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song đồ án của nhóm chúng emchắc chắn khơng tránh khỏi những thiếu sót, chúng em rất mong nhận được sự thơng cảmvà góp ý chân thành từ q thầy, cơ. Nhóm em xin chân thành cảm ơn.

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Tp.HCM, ngày ... tháng … năm 2023

<i>Phan Chí Bảo, Triệu Văn Kim</i>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

2.1 Phân tích yêu cầu...7

2.1.1 Yêu cầu chức năng...7

2.1.1.1 Sơ đồ Usecase...7

2.1.1.2 Miêu tả Usecase...7

<b>2.1.1.3 Đặc tả usecase...9</b>

<b>2.1.1.3.1 Đăng nhập và đăng ký tài khoản...9</b>

<b>2.1.1.3.3 Xem thông tin chi tiết về bất động sản...11</b>

<b>2.1.1.3.4 Liên hệ với chủ bất động sản qua tin nhắn, email hoặc cuộc gọi...12</b>

<b>2.1.1.3.5 Yêu thích và lưu trữ...13</b>

<b>2.1.1.3.6 Quản lý tài khoản...14</b>

<b>2.1.1.3.7 Đăng tải thông tin về bất động sản...15</b>

<b>2.1.2.4 Danh sách sơ đồ sequence...16</b>

2.1.2 Yêu cầu phi chức năng...22

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

3.3.1 Sử Dụng ASP.NET Framework và Entity Framework...52

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>CHƯƠNG 1: GIỚI THIỆU</b>

Trong bối cảnh xuất hiện ngày càng nhiều nhu cầu mua bán và tìm kiếm thơng tinvề bất động sản, việc xây dựng một trang web chuyên về giới thiệu và mua bán bất độngsản trở nên cực kỳ quan trọng. Chúng em chọn đề tài này nhằm đáp ứng nhu cầu thịtrường, cung cấp một nền tảng thuận tiện và đáng tin cậy cho người dùng trong q trìnhgiao dịch bất động sản.

Mục tiêu chính của đồ án là xây dựng một trang web giới thiệu và mua bán bất độngsản có khả năng cung cấp thơng tin đầy đủ, chính xác, và thuận tiện cho người sử dụng.Trang web sẽ tập trung vào việc cung cấp trải nghiệm tốt cho người dùng, hỗ trợ quảngcáo và giới thiệu bất động sản một cách hiệu quả.

Phạm vi của đồ án sẽ bao gồm các chức năng cơ bản như đăng tin, tìm kiếm,xem chi tiết thông tin bất động sản, và liên hệ với người đăng tin. Đối tượng người dùngchủ yếu là những người có nhu cầu mua, bán, hoặc cho thuê bất động sản, bao gồm cảngười dùng cá nhân và doanh nghiệp trong lĩnh vực bất động sản.

Trong quá trình xây dựng trang web, chúng em sử dụng một số cơng nghệ chínhbao gồm Next.js cho phần frontend, Material-UI để hỗ trợ thiết kế giao diện người dùng,và ASP.NET Framework cùng với Entity Framework để xây dựng phần backend và kếtnối cơ sở dữ liệu SQL Server.

<b>1.5 Kết luận chương</b>

Chương giới thiệu đã trình bày mục tiêu, lý do chọn đề tài, phạm vi, đối tượngngười dùng, và cơng nghệ sử dụng trong q trình xây dựng trang web giới thiệu và muabán bất động sản. Các chương tiếp theo sẽ chi tiết hóa từng giai đoạn của dự án để đảmbảo việc triển khai được thực hiện một cách hiệu quả và đạt được các mục tiêu đề ra.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>CHƯƠNG 2: THIẾT KẾ</b>

Trước khi bắt đầu q trình thiết kế, chúng tơi đã tiến hành phân tích kỹ lưỡng vềyêu cầu của dự án. Các yêu cầu chức năng và phi chức năng đã được xác định chi tiết đểđảm bảo rằng trang web có thể đáp ứng đầy đủ nhu cầu của người dùng.

<b>2.1.1 Yêu cầu chức năng2.1.1.1 Sơ đồ Usecase</b>

<i>Hình 2.1. Sơ đồ usecase</i>

<b>2.1.1.2 Miêu tả UsecaseI</b>

01 Quản Lý NgườiDùng

Quản Trị Viên (Administrator)

Thêm, xoá, sửa đổi danh sách người dùng trong hệ thống

02 Thêm Danh Sách Bất Động Sản

Đại Lý Bất Động Sản (Real Estate Agent)

Đại lý bất động sản có thể thêm các bất động sản vào danh sách

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

03 Sửa Đổi Danh Sách Bất Động Sản

Đại Lý Bất Động Sản (Real Estate Agent)

Đại lý bất động sản có thể sửa đổi thông tin của các bất động sản trong danh sách

04 Xoá Danh Sách Bất Động Sản

Đại Lý Bất Động Sản (Real Estate Agent)

Đại lý bất động sản có thể xố các bất động sản khỏi danh sách

05 Liên Hệ với ĐạiLý Bất Động Sản

Người Dùng Đã Đăng Ký (RegisteredUser)

Người dùng đã đăng ký có thể liên hệ trực tiếp với đại lý bất động sản hoặc chủ nhân bất động sản qua thông tin của chủ bất động sản trên trang web.

06 Lưu Bất Động Sản Yêu Thích

Người Dùng Đã Đăng Ký (RegisteredUser)

Người dùng có thể lưu lại các bất động sản mà họ quan tâm vào tài khoản của mình để dễ dàng kiểm tra và so sánh trong tương lai

07 Tìm Kiếm Bất Động Sản

Khách (Guest) Khách có thể tìm kiếm và duyệt qua danh sách bất động sản trên nền tảng. Bao gồm việc sử dụng các bộ lọc để hạn chế kết quả tìm kiếm dựa trên các tiêu chí như địa điểm, khoảng giá, loại bất động sản và các tính năng khác.

08 Xem Chi Tiết Bất Động Sản

Khách (Guest) Khách có thể xem thơng tin cơ bản về bất động sản, bao gồm mô tả, hình ảnh và, trong một số trường hợp, chi tiết cấp cao về vị trí và tính năng của bất động sản.

09 Đăng Ký Tài Khoản

Khách (Guest) Khách có thể đăng ký một tài khoản để sử dụng các chức năng dành cho người dùng đã đăng ký.

10 Đăng Nhập Khách (Guest) Khách có thể đăng nhập vào hệ thống bằng tài khoản đã đăng ký.

11 Đăng Xuất Khách (Guest) Khách có thể đăng xuất khỏi hệ thống.12 Thêm bất động

Người Dùng Đã Đăng Ký (RegisteredUser)

Người dung có thể đăng bài quảng cáo bằng cách điền đầy đủ thông tin cần thiết.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>2.1.1.3.1 Đăng nhập và đăng ký tài khoản</b>

Feature Đăng nhập và đăng ký tài khoản

Description Cho phép người dùng đăng nhập vào ứng dụng Homelist bằng tài khoản đã đăng ký. Người dùng cũng có thể đăng ký tài khoản mới.Purpose Đảm bảo tính cá nhân hóa và bảo mật thơng tin người dùng, cung cấp

quyền truy cập vào các tính năng và dữ liệu cá nhân.

User problem Người dùng muốn tạo và quản lý tài khoản cá nhân để có thể sử dụngcác tính năng và tiện ích của ứng dụng Homelist.

User value Người dùng có thể lưu trữ thơng tin cá nhân và sử dụng tài khoản để tìm kiếm, lưu trữ yêu thích và quản lý các giao dịch thuê nhà.

Assumptions Người dùng cung cấp thơng tin đăng nhập chính xác và có kết nối internet ổn định.

Not doing Khơng hỗ trợ đăng nhập bằng các tài khoản khác ngoài Google và Facebook.

Acceptance criteria

<small></small> Người dùng có thể đăng ký tài khoản mới.

<small></small> Hệ thống xác thực người dùng và bảo mật thông tin tài khoản.<small></small> Cung cấp thông báo lỗi nếu người dùng nhập sai thông tin

đăng nhập.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Feature Tìm kiếm bất động sản theo tiêu chí

Description Cho phép người dùng tìm kiếm bất động sản theo các tiêu chí như địa điểm, giá thuê, diện tích, số phịng, tiện ích,…

Purpose Giúp người dùng thuận tiện tìm kiếm các bất động sản phù hợp với nhu cầu và yêu cầu của họ.

User problem Người dùng muốn tìm kiếm nhà theo các tiêu chí cụ thể để thuê bất động sản phù hợp với nhu cầu và ngân sách của mình.

User value Người dùng có thể tìm kiếm và lọc bất động sản dễ dàng và nhanh chóng, tiết kiệm thời gian và cơng sức tìm kiếm.

Assumptions Có dữ liệu đầy đủ và chính xác về các bất động sản cho th.Not doing Khơng hỗ trợ tìm kiếm bằng giọng nói.

Acceptance criteria

<small></small> Người dùng có thể tìm kiếm bất động sản theo các tiêu chí như địa điểm, giá th, diện tích, số phịng, tiện ích, v.v.<small></small> Kết quả tìm kiếm phù hợp và chính xác.

<small></small> Cung cấp giao diện người dùng dễ sử dụng và trực quan để tìm kiếm và lọc bất động sản.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>2.1.1.3.3 Xem thông tin chi tiết về bất động sản</b>

Feature Xem thông tin chi tiết về bất động sản

Description Cho phép người dùng xem thông tin chi tiết về bất động sản, bao gồm hình ảnh, mơ tả, tiện ích, vị trí, giá thuê, v.v.

Purpose Cung cấp cho người dùng cái nhìn tổng quan và chi tiết về các bất động sản để họ có thể đưa ra quyết định thuê bất động sản.

User problem Người dùng muốn xem thơng tin chi tiết và hình ảnh về bất động sản để có cái nhìn rõ ràng về nó.

User value Người dùng có thể xem thơng tin chi tiết về bất động sản, đánh giá vàso sánh các lựa chọn th bất động sản.

Assumptions Có thơng tin chi tiết và hình ảnh đầy đủ về các bất động sản.Not doing Không cung cấp chức năng xem bất động sản 360 độ.

Acceptance criteria

<small></small> Người dùng có thể xem thơng tin chi tiết về bất động sản, bao gồm hình ảnh, mơ tả, tiện ích, vị trí, giá thuê, v.v.

<small></small> Cung cấp giao diện người dùng thân thiện và trực quan để xem thông tin chi tiết về bất động sản.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>2.1.1.3.4 Liên hệ với chủ bất động sản qua tin nhắn, email hoặc cuộc gọi </b>

Feature Liên hệ với chủ bất động sản qua tin nhắn, email hoặc cuộc gọiDescription Cho phép người dùng liên hệ trực tiếp với chủ bất động sản qua tin

nhắn, email hoặc cuộc gọi từ website Homelisti.

Purpose Tạo kết nối thuận tiện và trực tiếp giữa người thuê và chủ bất động sản để thảo luận, đặt câu hỏi, hoặc xác nhận thông tin về bất động sản.User problem Người dùng muốn có phương tiện liên hệ nhanh chóng và dễ dàng vớichủ bất động sản để giải đáp các thắc mắc hoặc sắp xếp việc xem bất động sản.

User value Người dùng có thể liên hệ trực tiếp và chủ động giao tiếp với chủ bất động sản để giải đáp thắc mắc, thương lượng giá thuê và xác nhận thông tin về bất động sản.

Assumptions Chủ bất động sản cung cấp thông tin liên hệ (số điện thoại, địa chỉ email) và có thể tiếp nhận cuộc gọi hoặc tin nhắn từ người thuê.Các phương tiện liên hệ (tin nhắn, email, cuộc gọi) đều hoạt động và có kết nối mạng.

Not doing Khơng cung cấp tính năng video call hoặc video chat.Acceptance

<small></small> Người dùng có thể nhấp vào thơng tin liên hệ trên trang chi tiếtbất động sản để chọn phương tiện liên hệ (tin nhắn, email, cuộcgọi).

<small></small> Cung cấp tính năng sao chép số điện thoại hoặc địa chỉ email của chủ bất động sản để dễ dàng liên hệ.

<small></small> Đảm bảo tính bảo mật thơng tin liên hệ và tuân thủ quy định vềquyền riêng tư của người dùng.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>2.1.1.3.5 Yêu thích và lưu trữ</b>

Feature Chức năng yêu thích và lưu trữ

Description Cho phép người dùng yêu thích và lưu trữ các bất động sản mà họ quan tâm trong danh sách yêu thích để dễ dàng truy cập và quản lý sau này.

Purpose Cung cấp cho người dùng khả năng lưu trữ và quản lý các bất động sản mà họ quan tâm để có thể theo dõi, so sánh và đưa ra quyết định thuê bất động sản.

User problem Người dùng muốn theo dõi và lưu trữ các bất động sản mà họ quan tâm để không bị mất dấu và dễ dàng tìm lại trong quá trình tìm kiếm.User value Người dùng có thể lưu trữ và quản lý danh sách các bất động sản yêu

thích, giúp họ theo dõi, so sánh và lựa chọn bất động sản phù hợp với nhu cầu và yêu cầu của mình.

 Người dùng đã đăng nhập vào tài khoản của mình.

 Các bất động sản có thể được lưu trữ và theo dõi dựa trên thông tin duy nhất của mỗi bất động sản.

của chủ bất động sản để dễ dàng liên hệ.

<small></small> Đảm bảo tính bảo mật thơng tin liên hệ và tuân thủ quy định vềquyền riêng tư của người dùng.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>2.1.1.3.6 Quản lý tài khoản</b>

Feature Chức năng quản lý tài khoản.

Description Cung cấp cho người dùng khả năng quản lý thông tin cá nhân, tài khoản và cài đặt liên quan đến trang web Homelist.

Purpose Cho phép người dùng có quyền kiểm sốt thơng tin cá nhân, bảo mật tài khoản và tùy chỉnh các cài đặt cá nhân theo nhu cầu.

User problem Người dùng muốn có khả năng quản lý thông tin tài khoản và cá nhânmột cách dễ dàng và thuận tiện.

User value Người dùng có thể cập nhật thơng tin cá nhân, thay đổi mật khẩu, quản lý thông báo và tùy chỉnh các cài đặt ứng dụng theo sở thích và yêu cầu của mình.

 Người dùng đã đăng nhập vào tài khoản của mình.

 Các thơng tin cá nhân và tài khoản được bảo mật và chỉ được truy cập bởi chính người dùng.

<small></small> Người dùng có thể cập nhật thơng tin cá nhân như tên, địa chỉ, số điện thoại, v.v.

<small></small> Người dùng có thể thay đổi mật khẩu của tài khoản.<small></small> Cung cấp khả năng đăng xuất khỏi tài khoản.

<small></small> Người dùng có thể quản lý cài đặt thơng báo, bao gồm tắt/mở thông báo, tuỳ chỉnh loại thông báo, v.v.

<small></small> Cung cấp giao diện người dùng dễ sử dụng và trực quan để quản lý tài khoản và cài đặt.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>2.1.1.3.7 Đăng tải thông tin về bất động sản </b>

Feature Chức năng đăng tải thông tin về bất động sản.

Description Cho phép người dùng đăng tải và quản lý thông tin về các bất động sản muốn cho thuê trên trang web Homelist.

Purpose Cung cấp nền tảng cho người dùng và chủ nhà để đăng tải và quản lý thông tin về bất động sản, như hình ảnh, mơ tả, giá cả, vị trí, tiện ích và các chi tiết khác.

User problem Người dùng muốn có phương tiện để quảng bá và chia sẻ thông tin về bất động sản của mình một cách hiệu quả.

User value  Chủ bất động sản có thể đăng tải thơng tin chi tiết và hình ảnh về căn hộ để thu hút người thuê tiềm năng.

 Người thuê có thể dễ dàng tìm kiếm và xem thơng tin về các bất động sản, giúp họ đưa ra quyết định thuê bất động sản dễ dàng hơn.

Assumptions  Chủ bất động sản đã đăng ký tài khoản và được phép đăng tải thơng tin bất động sản.

 Người dùng có thể xem thông tin bất động sản mà không cần đăng nhập.

Not doing  Khơng cung cấp tính năng đặt chỗ trực tiếp từ ứng dụng. Khơng cung cấp tính năng giao dịch thanh toán trực tiếp trong

ứng dụng.Acceptance

<small></small> Chủ bất động sản có thể đăng tải thơng tin chi tiết về bất động sản, bao gồm hình ảnh, mơ tả, giá cả, vị trí, tiện ích, v.v.<small></small> Người dùng có thể tìm kiếm và xem thơng tin chi tiết về các

bất động sản, bao gồm hình ảnh, mơ tả, giá cả, vị trí, tiện ích, v.v.

<small></small> Đảm bảo tính chính xác và đầy đủ của thơng tin bất động sản được đăng tải.

<small></small> Cung cấp giao diện người dùng dễ sử dụng để quản lý và xem thông tin bất động sản.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>2.1.2.4 Danh sách sơ đồ sequence </b>

<b>2.1.2.4.1 Create Listing Sequence Diagram</b>

<i>Hình 2.2. Create Listing Sequence Diagram </i>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>2.1.2.4.2 Update Listing Sequence Diagram</b>

<i>Hình 2.3. Update Listing Sequence Diagram</i>

<b>2.1.2.4.3 Search by Location Sequence Diagram</b>

<i>Hình 2.4. Search by Location Sequence Diagram</i>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>2.1.2.4.4 Listing Creation Sequence Diagram</b>

<i>Hình 2.5. Listing creation Sequence Diagram</i>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>2.1.2.4.5 Listing Update Sequence Diagram</b>

<i>Hình 2.6. Listing update Sequence Diagram</i>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>2.1.2.4.6 User Registration Sequence Diagram</b>

<i>Hình 2.7. User registration Sequence Diagram</i>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>2.1.2.4.7 User login Sequence Diagram</b>

<i>Hình 2.8. User login Sequence Diagram</i>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>2.1.2.4.8 User logout Sequence Diagram</b>

<i>Hình 2.9. User logout Sequence Diagram</i>

<b>2.1.2.1.1 Giao diện người dùng</b>

<b>• Hệ thống cung cấp một giao diện web thân thiện với người dùng có thể truy cập từ</b>

các trình duyệt web phổ biến.

• Giao diện hệ thống là có độ phản hồi và tương thích với các nền tảng khác nhautrên các thiết bị khác nhau.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>2.1.2.2 Chất lượng</b>

<b>• Hệ thống sẽ tuân theo các tiêu chuẩn sử dụng đã được thiết lập, bao gồm điều</b>

hướng trực quan và thiết kế thân thiện với người dùng.

• Thời gian đào tạo cho người dùng thông thường để thành thạo với các thao tác cơbản sẽ không vượt quá một giờ.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>2.2 Thiết kế giao diện người dùng</b>

Giao diện người dùng của trang web được thiết kế để mang lại trải nghiệm ngườidùng mượt mà và hiệu quả. Chúng em đã sử dụng Material-UI để tạo ra giao diện đẹpmắt và có tính thẩm mỹ cao.

<b>2.2.1 Screen flow</b>

<i>Hình 2.10. Sơ đồ sreen flow</i>

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>2.2.2 Miêu tả màn hìnhST</b>

1 Đăng Nhập Màn Hình Đăng Nhập

Màn hình cho người dùng đăng nhập vàohệ thống

2 Đăng Ký Màn Hình Đăng Ký Màn hình cho người dùng đăng ký tài khoản mới

3 Đổi Mật Khẩu Màn Hình Đổi Mật Khẩu

Màn hình để người dùng thay đổi mật khẩu

4 Hồ Sơ Người Dùng

Màn Hình Hồ Sơ Người Dùng

Màn hình cho người dùng xem thơng tin tài khoản cá nhân