Xây dựng website mua bán, cho thuê bất động sản sử dụng net core đồ án tốt nghiệp ngành công nghệ thông tin

Nội dung của đề tài: - Xây dựng một trang web cho phép khách hàng tìm kiếm và tạo các bài đăng bất động sản theo nhu cầu.. - Xây dựng một trang web cho phép nhân viên và quản trị viên có

TỔNG QUAN

LÝ DO CHỌN ĐỀ TÀI

Thị trường bất động sản đóng vai trò quan trọng trong nền kinh tế quốc dân, liên kết chặt chẽ với các thị trường tài chính, xây dựng, vật liệu xây dựng và lao động Việc phát triển và quản lý hiệu quả thị trường này không chỉ thúc đẩy tăng trưởng kinh tế - xã hội mà còn thu hút nguồn vốn đầu tư, góp phần vào sự phát triển bền vững của đô thị và nông thôn, hướng tới công nghiệp hóa và hiện đại hóa đất nước.

Người dùng cần đăng tin bất động sản để tiếp cận người mua và người thuê, giúp tìm kiếm đối tác phù hợp Đồng thời, người mua và người thuê cũng có thể tự đăng bài để tìm kiếm những người bán và cho thuê bất động sản đáp ứng yêu cầu của họ.

Trong thời đại công nghệ hiện nay, các trang web đăng tin bất động sản ngày càng trở nên quan trọng để đáp ứng nhu cầu của người dùng Nhận thức được điều này, chúng tôi đã quyết định thiết kế một trang web chuyên về mua bán và cho thuê bất động sản.

MỤC TIÊU ĐỀ TÀI

Đề tài này nhằm xây dựng một hệ thống toàn diện và dễ sử dụng cho người dùng có nhu cầu tìm kiếm và đăng tin bất động sản Chúng tôi sẽ phát triển một website hoàn chỉnh với đầy đủ tính năng thiết yếu và giao diện đẹp, mang lại trải nghiệm tốt nhất cho khách hàng Dự án được xây dựng trên nền tảng công nghệ NET Core và ReactJS, đảm bảo cập nhật công nghệ mới nhất và nhanh nhất, đồng thời tạo điều kiện thuận lợi cho việc mở rộng hệ thống và hợp tác phát triển trong tương lai.

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

1.3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU Đối tượng chính nhóm hướng đến chính là những người có nhu cầu tìm kiếm thông tin về bất động sản, đăng tin về bất động sản

Website tích hợp các tính năng như tạo tài khoản, lưu bài đăng và quản lý tài khoản, giúp tiếp cận người dùng nhanh chóng, tiết kiệm thời gian và hướng dẫn khách hàng tiếp tục sử dụng dịch vụ.

1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

Người dùng có thể dễ dàng tìm kiếm và xem các bài đăng bất động sản theo danh mục như Căn hộ/Chung cư, Nhà ở, Đất, Văn phòng/Mặt bằng kinh doanh, và Nhà trọ, cũng như phân loại theo loại bài đăng như mua bán hoặc cho thuê.

Xem thông tin người đăng tin

Cho phép người dùng đăng ký, đăng nhập vào website để:

• Lưu các bài đăng yêu thích

• Tạo và thay đổi bài đăng bất động sản

• Quản lý bài đăng của bản thân

Cho phép người quản trị đăng nhập vào website để:

• Xem thống kê về bài đăng và người dùng đăng ký mới

• Quản lý người dùng: khoá, mở khoá tài khoản người dùng, xem thông tin người dùng

• Quản lý bài đăng: các bài đăng, tra cứu bài đăng, xem chi tiết bài đăng, thực hiện duyệt bài đăng hoặc từ chối bài đăng

• Quản lý tin tức về bất động sản: tạo tin tức bất động sản, thay đổi nội dung bất động sản, thay đổi trạng thái bất động sản

Quản lý báo cáo bao gồm việc xem danh sách các báo cáo, kiểm tra các báo cáo đến hạn phản hồi và thực hiện xử lý đối với các bài đăng bị báo cáo.

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

2.1.1 Khảo sát nhu cầu người dùng

Thị trường bất động sản đóng vai trò quan trọng trong nền kinh tế quốc dân, liên kết chặt chẽ với các thị trường tài chính, xây dựng, vật liệu xây dựng và lao động Việc phát triển và quản lý hiệu quả thị trường này không chỉ thúc đẩy tăng trưởng kinh tế - xã hội mà còn thu hút nguồn vốn đầu tư, góp phần vào sự phát triển bền vững của đô thị và nông thôn, hướng tới công nghiệp hóa và hiện đại hóa đất nước.

Trong giai đoạn kinh tế kế hoạch hoá tập trung, thị trường bất động sản (BĐS) chưa phát triển Tuy nhiên, khi chuyển sang nền kinh tế thị trường, thị trường BĐS đã hình thành và phát triển nhanh chóng, góp phần quan trọng vào tăng trưởng kinh tế Sau một thời gian, thị trường BĐS đã bộc lộ nhiều bất cập về cơ chế vận hành, hệ thống pháp luật, các chủ thể tham gia, cơ cấu hàng hoá, giao dịch, thông tin và quản lý, đồng thời cần đảm bảo định hướng xã hội chủ nghĩa cho thị trường.

Cuộc khủng hoảng tài chính toàn cầu bắt nguồn từ chính sách cho vay thế chấp bất động sản tại Hoa Kỳ đã dẫn đến suy thoái kinh tế ở nhiều quốc gia, cho thấy sự ảnh hưởng mạnh mẽ của thị trường bất động sản đối với nền kinh tế Do đó, việc quản lý thị trường bất động sản để phát huy các lợi ích và giảm thiểu tác động tiêu cực là vấn đề cần được nghiên cứu và chú trọng.

Theo Bộ Xây dựng, trong quý II/2021, cả nước ghi nhận 29.949 giao dịch bất động sản thành công, tăng khoảng 118% so với quý trước và đạt khoảng 101% so với cùng kỳ năm 2020.

Trong quý II/2021, Chính phủ và các Bộ, ngành đã ban hành nhiều văn bản quy phạm pháp luật mới liên quan đến dự án đầu tư xây dựng và bất động sản Các chính sách hỗ trợ tài chính cho nhà đầu tư và người dân mua nhà cũng được triển khai, với việc các ngân hàng thương mại giảm lãi suất cho vay và cung cấp nhiều gói lãi suất ưu đãi.

Batdongsan.com.vn, được đánh giá bởi Comscore và SimilarWeb, là kênh thông tin bất động sản có lượng truy cập lớn nhất tại Đông Nam Á, vượt trội hơn so với các website hàng đầu trong lĩnh vực này ở các quốc gia như Singapore, Malaysia và Indonesia.

Hình 2.1: Batdongsan - Giao diện đăng nhập

Hình 2.2: Batdongsan - Giao diện đăng ký

Hình 2.3: Batdongsan - Trang tin tức

Hình 2.4: Batdongsan - Trang tìm kiếm

Hình 2.5: Batdongsan - Trang chi tiết dự án

Hình 2.6: Batdongsan - Trang chi tiết bất động sản

Hình 2.7: Batdongsan - Trang hiển thị các bài đăng bất động sản của người dùng

Hình 2.8: Batdongsan - Trang đăng tin bất động sản

Sau khi nghiên cứu và tìm hiểu nhóm đã liệt kê và phân tích các chức năng của ứng dụng như bảng sau đây: Ưu điểm Hạn chế

- Có mục tin tức về bất động sản

- Mục tìm kiếm có thể lọc để dễ dàng tìm ra bất động sản có nhu cầu hơn

- Khả năng tương thích trên các tỉ lệ màn hình đôi khi chưa đẹp

Bảng 2.1: Ưu điểm và hạn chế của trang batdongsan.com.vn

Alonhadat.com.vn là một trong những trang rao vặt bất động sản nổi tiếng hiện nay, nổi bật với tính năng cung cấp thông tin nhanh chóng và hiện đại Trang web này chuyên về mua bán nhà đất, cho thuê nhà và văn phòng trên toàn quốc, với các lựa chọn nhà đất chính chủ và giá rẻ.

Trang web cung cấp thông tin chi tiết về mua bán, sang nhượng và các dự án nhà đất trên toàn quốc Được thiết kế với tính tiện dụng, website mang lại trải nghiệm thân thiện và hiệu quả cho người dùng.

Hình 2.10: Alonhadat - Trang tin tức

Hình 2.11: Alonhadat - Trang chi tiết bất động sản

Hình 2.12: Alonhadat - Trang chi tiết bất động sản

Hình 2.13: Alonhadat - Trang hiển thị bài đăng bất động sản theo loại

Hình 2.14: Alonhadat - Trang kinh nghiệm mua nhà

Hình 2.15: Alonhadat - Trang đăng tin bất động sản

Hình 2.16: Alonhadat - Trang đăng tin bất động sản

Hình 2.17: Alonhadat - Trang đăng ký

Hình 2.18: Alonhadat - Trang đăng nhập

- Trang web có đủ chức năng

- Giao diện không có responsive

- Giao diện không bắt mắt

Bảng 2.2: Ưu điểm và hạn chế của trang alonhadat.com.vn

Homedy.com là nền tảng cung cấp giải pháp tiếp thị số toàn diện cho thị trường Bất động sản, với mục tiêu trở thành cổng thông tin online hàng đầu tại Đông Nam Á Chúng tôi mong muốn mang đến cho người dùng trải nghiệm hoàn hảo trong việc tìm kiếm thông tin Bất động sản với tiêu chí: “Tìm kiếm dễ dàng - Lựa chọn đa dạng - Kết quả tin cậy”.

Hình 2.20: Homedy - Trang tin tức

Hình 2.21: Homedy - Trang chia sẻ cách thiết kế nhà

Hình 2.22: Homedy - Trang hiển thị các dự án bất động sản

Hình 2.23: Homedy - Trang chi tiết bất động sản

Hình 2.24: Homedy - Trang đăng nhập

Hình 2.25: Homedy - Trang đăng tin bất động sản Nhận xét:

- Trang web có đủ chức năng

- Giao diện đẹp, dễ nhìn

Bảng 2.3: Ưu điểm và hạn chế của trang homedy.com.vn

XÁC ĐỊNH YÊU CẦU

Xây dựng website mua bán và cho thuê bất động sản giúp người dùng dễ dàng tìm kiếm và theo dõi thông tin liên quan Hệ thống cho phép quản lý bài đăng, tin tức và báo cáo thông qua quyền của nhân viên, đồng thời quản lý người dùng và thống kê lượt bài đăng mới, người dùng mới và số lượng bài đăng bằng tài khoản admin Các chức năng chính của chương trình bao gồm quản lý toàn diện và hiệu quả các hoạt động liên quan đến bất động sản.

- Quản lý tài khoản, thông tin cá nhân

- Quản lý bài đăng cá nhân

- Quản lý bài đăng yêu thích

- Quản lý bạn bè (đang theo dõi, được theo dõi)

- Xem các bài đăng (mới, theo danh mục)

- Xem thông tin người đăng và các bài đăng của người đó

- Chia sẻ bài đăng lên các trang mạng xã hội

- Chatbox thông minh hỗ trợ tìm kiếm bài đăng cũng như giải đáp với admin của trang

Thống kê hàng tháng về số lượng bài đăng mới và người dùng mới, cùng với mức giá bán bất động sản trung bình theo từng tỉnh, cho thấy sự biến động trong thị trường Ngoài ra, số lượng bài đăng và các bài đăng được duyệt cũng được ghi nhận theo từng tháng trong năm, cung cấp cái nhìn tổng quan về hoạt động của thị trường bất động sản.

- Quản lý bài đăng (duyệt bài đăng, xem chi tiết bài đăng)

- Quản lý tin tức bất động sản (xem, tạo, chỉnh sửa, xoá, thay đổi trạng thái của tin tức)

- Quản lý báo cáo (xem các báo cáo, thực hiện xử lý với các bài đăng có báo cáo)

- Phản hồi giải đáp các thắc mắc của người dùng thông qua facebook của trang

Quản trị viên (có các tính năng của nhân viên):

- Quản lý người dùng ( tạo người dùng, cập nhật thông tin người dùng, khoá, mở khoá tài khoản, xem thông tin tài khoản)

- Thích hợp với người dùng có nhu cầu tìm kiếm các thông tin về mua bán, cho thuê bất động sản

- Thích hợp với người dùng có nhu cầu đăng tin về bất động sản phục vụ cho nhu cầu mua bán, cho thuê

- Thu thập các thông tin về bất động sản như giá cả từng khu vực, điểm nóng bất động sản ,…

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

THIẾT KẾ CƠ SỞ DỮ LIỆU

3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU

3.2.1 Sơ đồ thiết kế cơ sở dữ liệu

Hình 3.11: Sơ đồ thiết kế cơ sở dữ liệu

NormalizedEmail EmailConfirmed PasswordHash SecurityStamp ConcurrencyStamp PhoneNumber PhoneNumberConfirmed TwoFactorEnabled LockoutEnd LockoutEnabled AccessFailedCount

ID Title Details CreatedDate ImageUrl Display CreatorID

ID Title ProvinceID DistrictID WardID Address StatusID Area Price Bedrooms Bathrooms DirectionID Details PaperID CreatedDate IsSold IsDeleted CreatorID PostTypeID CategoryID

Id Name ImageUrl Gender Birthday Address RegisteredDate

3.2.2 Mô tả thiết kế cơ sở dữ liệu

Bảng 3.14: Mô tả bảng User

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 Id NVARCHAR(450) Mã người dùng (khoá chính)

2 Name NVARCHAR(50) Tên người dùng

3 ImageUrl NVARCHAR(MAX) Avatar của người dùng

6 Address NVARCHAR(MAX) Địa chỉ

7 RegisteredDate DATETIME2 Ngày đăng ký tạo tài khoản

Bảng 3.15: Mô tả bảng AspNetUsers

1 Id NVARCHAR(450) Mã người dùng (khoá chính)

4 Email NVARCHAR(256) Email của người dùng

7 PasswordHash NVARCHAR(MAX) Mật khẩu của người dùng

10 PhoneNumber NVARCHAR(MAX) Số điện thoại của người dùng

13 LockoutEnd DATETIMEOFFSET Thời gian kết thúc việc khoá tài khoản

Bảng 3.16: Mô tả bảng AspNetRoles

1 Id NVARCHAR(450) Mã quyền (khoá chính)

Bảng 3.17: Mô tả bảng AspNetUserRoles

1 UserId NVARCHAR(450) Mã người dùng (khoá chính)

2 RoleId NVARCHAR(450) Mã quyền (khoá chính)

Bảng 3.18: Mô tả bảng VerifyPhones

1 PhoneNumber NVARCHAR(450) Số điện thoại (khoá chính)

2 Code INT Mã code gửi về điện thoại

4 CreatedDate DATETIME2 Thời gian tạo mã code

Bảng 3.19: Mô tả bảng Image

1 ID INT Mã hình ảnh (khoá chính)

2 ImageUrl NVARCHAR(MAX) Link Url của hình bất động sản

3 PostID INT Mã bài đăng (khoá ngoại)

Bảng 3.20: Mô tả bảng PostType

1 ID INT Mã loại bài đăng (khoá chính)

2 Name NVARCHAR(50) Trên loại bài đăng

Bảng 3.21: Mô tả bảng Category

1 ID INT Mã danh mục (khoá chính)

2 Name NVARCHAR(50) Tên danh mục

Bảng 3.22: Mô tả bảng Post

1 ID INT Mã bài đăng (khoá chính)

2 Title NVARCHAR(200) Tiêu đề của bài đăng

3 ProvinceID INT Mã code của tỉnh thành

4 DistrictID INT Mã code của quận huyện

5 WardID INT Mã code của xã phường

6 Address NVARCHAR(200) Số nhà, tên đường, thôn buôn

7 StatusID INT Trạng thái bài đăng

8 Area REAL Diện tích của bất động sản

9 Price DECIMAL Giá của bất động sản

10 Bedrooms INT Số lượng phòng ngủ

11 Bathrooms INT Số lượng phòng tắm

12 DirectionID INT Mã của phương hướng

13 Details NTEXT Chi tiết bài đăng

14 PaperID INT Mã của loại giấy tờ

15 CreatedDate DATETIME2 Ngày tạo bài đăng

16 IsSold BIT Đã được bán hay chưa

17 IsDeleted BIT Đã được xoá hay chưa

18 CreatorID NVARCHAR(450) Mã của người tạo (khoá ngoại)

19 PostTypeID INT Mã của loại bài đăng (khoá ngoại)

20 CategoryID INT Mã của danh mục (khoá ngoại)

Bảng 3.23: Mô tả bảng FavoritePost

1 UserID NVARCHAR(450) Mã của người yêu thích bài đăng

2 PostID INT Mã của bài đăng được yêu thích

Bảng 3.24: Mô tả bảng Follow

1 FollowID NVARCHAR(450) Mã của người theo dõi

2 FollowedID NVARCHAR(450) Mã của người được theo dõi

Bảng 3.25: Mô tả bảng RefreshTokens

1 ID INT Mã của token (khoá chính)

2 UserID NVARCHAR(450) Mã của người dùng tạo token

Bảng 3.26: Mô tả bảng Notification

1 ID INT Mã của thông báo

2 UserID NVARCHAR(450) Mã của người dùng nhận thông báo

3 PostID INT Mã của bài đăng liên quan đến thông báo

4 Content NVARCHAR(MAX) Nội dung của thông báo

5 CreatedDate DATETIME2 Ngày thông báo được tạo

6 Status BIT Thông báo đã được đọc hay chưa

Bảng 3.27: Mô tả bảng News

1 ID INT Mã của tin tức

2 Title NVARCHAR(300) Tiêu đề của tin tức

3 Details NTEXT Nội dung của tin tức

5 ImageUrl NVARCHAR(MAX) Hình bìa của tin

6 Display BIT Trạng thái tin được hiển thị hay không

7 CreatorID NVARCHAR(450) ID của người tạo tin

Bảng 3.28: Mô tả bảng Report

1 ID INT ID của báo cáo

2 PostID INT ID của bài đăng bị báo cáo

3 UserID NVARCHAR(450) ID của người báo cáo

4 Details NTEXT Nội dung của báo cáo

5 Email NVARCHAR(MAX) Email của người báo cáo

6 PhoneNumber NVARCHAR(MAX) Số điện thoại của người báo cáo

7 CreatedDate DATETIME2 Ngày tạo báo cáo

8 Status BIT Báo cáo đã được xử lý hay chưa

Bảng 3.29: Mô tả bảng ReportProcessing

1 ID INT ID của xử lý báo cáo

THIẾT KẾ GIAO DIỆN

2 PostID INT ID của bài đăng bị báo cáo

3 CreatedDate DATETIME2 Ngày tạo xử lý báo cáo cho bài đăng

4 StatusID INT Trạng thái của xử lý

Hình 3.12: Giao diện Client - Trang chủ Bảng 3.30: Mô tả giao diện Client - Trang chủ

STT Tên Loại Ghi chú

1 Trang chủ Thẻ a Về trang chủ

2 Tin yêu thích Thẻ a Chuyển hướng đến trang yêu thích

3 Thông báo button Mở thông báo

4 Thêm button Mở them các tính năng

5 Tìm kiếm bất động sản input Nhập từ khóa muốn tìm

6 Nút tìm kiếm button Nút tìm kiếm

7 Trang cá nhân Thẻ a Điều hướng đến trang cá nhân

8 Đăng tin button Chuyển đến trang đăng tin

9 Mua bán Thẻ div Show list mua bán

10 Cho thuê Thẻ div Show list cho thuê

Hình 3.13: Giao diện Client - Trang đăng nhập Bảng 3.31: Mô tả giao diện Client - Trang đăng nhập

1 Nhập số điện thoại Input Nhập vào số điện thoại

2 Nhập mật khẩu Thẻ Input Nhập vào mật khẩu

3 Đăng nhập Thẻ Button Nhấn vào để đăng nhập

4 Bạn quên mật khẩu Thẻ Link Nhấn vào để chuyển đến trang lấy lại mật khẩu

5 Đăng ký ngay Thẻ Link Nhấn vào để chuyển đến trang đăng ký

Hình 3.14: Giao diện Client - Trang đăng ký Bảng 3.32: Mô tả giao diện Client - Trang đăng ký

1 Nhập tên của bạn Thẻ Input Nhập vào tên

2 Nhập SDT Thẻ Input Nhập vào số điện thoại

3 Nhập vào mật khẩu của bạn Thẻ Input Nhập vào mật khẩu

4 Xác nhận mật khẩu Thẻ Input Nhập lại mật khẩu

5 Đăng ký Thẻ Button Nhấn vào tạo tài khoản

6 Đăng nhập Thẻ Link Nhấn vào để chuyển đến trang đăng nhập

Hình 3.15: Giao diện Client - Trang quên mật khẩu Bảng 3.33: Mô tả giao diện Client - Trang quên mật khẩu

1 Nhập SDT của bạn Thẻ Input Nhập vào SDT

2 Gửi mã code Thẻ Button Nhấn vào để gửi mã code

Trang chi tiết bài đăng

Hình 3.16: Giao diện Client - Trang chi tiết bài đăng Bảng 3.34: Mô tả giao diện Client - Trang chi tiết bài đăng

1 Hình ảnh Thẻ img Hình ảnh của bài viết

2 Tên người dùng Thẻ label Hiển thị tên của người đăng bài viết

3 Xem trang Thẻ button Nhấp vào để chuyển đến trang cá nhân của người đăng bài viết

4 Số điện thoại Thẻ div Hiển thị số điện thoại người đăng bài để có thể liên hệ

5 Nút back Thẻ button Chuyển đến hình ảnh trước nếu đang ở hình ảnh đầu thì sẽ chuyển đến hình cuối

6 Nút next Thẻ button Chuyển đến hình ảnh sau nếu đang ở hình ảnh cuối thì sẽ chuyển đến hình đầu

7 Title bài viết Thẻ p Hiển thị title bài viết

8 Giá Thẻ p Hiển thị giá bất động sản

9 Diện tích Thẻ p Hiển thị diện tích bất động sản

10 Lưu tin/ Hủy lưu tin Thẻ button Nhấn để lưu tin hoặc xóa tin ra khỏi bài đăng yêu thích

11 Địa chỉ Thẻ p Hiển thị địa chỉ của bất động sản

12 Chi tiết Thẻ p Hiển thị thông tin chi tiết bất động sản

13 Loại bất động sản Thẻ p Hiển thị loại bất động sản

14 Diện tích Thẻ p Hiển thị diện tích bất động sản

15 Giá tiền Thẻ p Hiển thị giá tiền

16 Tình trạng giấy tờ Thẻ p Hiển thị tình trạng giấy tờ của bất động sản

Hình 3.17: Giao diện Client - Trang chi tiết bài đăng

Bảng 3.35: Mô tả giao diện Client - Trang chi tiết bài đăng

1 Thông tin BĐS Thẻ div Chứa thông tin BĐS

2 Bản đồ Thẻ Map Hiển thị thông tin BĐS trên bản đồ

3 Chia sẻ thông tin Thẻ button Chia sẻ thông tin bài viết lên mạng xã hội

4 Báo cáo tin Thẻ button Hiện hộp thoại report

Trang báo cáo vi phạm

Hình 3.18: Giao diện Client - Trang báo cáo vi phạm

Bảng 3.36: Mô tả giao diện Client - Trang báo cáo vi phạm

1 Chi tiết báo cáo Thẻ input Nhập nội dung báo cáo

2 Điện thoại Thẻ input Nhập số điện thoại liên hệ

3 Email Thẻ input Nhập email để liên hệ

4 Báo cáo tin Thẻ button Xác nhận báo cáo

5 Hủy Thẻ button Tắt hộp thoại báo cáo

Trang hiển thị danh sách theo dõi và đang theo dõi

Hình 3.19: Giao diện Client - Trang hiển thị danh sách người đang theo dõi

Bảng 3.37: Mô tả giao diện Client - Trang hiển thị danh sách người đang theo dõi

1 Thông tin người dùng Thẻ div Nhấn vào để chuyển đến trang cá nhân của người dùng

Hình 3.20: Giao diện Client - Trang cá nhân

Bảng 3.38: Mô tả giao diện Client - Trang cá nhân

1 Hình ảnh Thẻ img Ảnh đại diện của người dùng

2 Tên người dùng Thẻ p Hiển thị tên của người dùng

3 Số người theo dõi và người đang theo dõi Thẻ Link Nhấp vào để chuyển đến trang hiển thị người theo dõi/ người đang theo dõi

4 Chỉnh sửa thông tin cá nhân Thẻ button Nhấn vào để chuyển đến trang chỉnh sửa thông tin cá nhân

5 Title bài viết Thẻ p Hiển thị title bài viết

6 Giá Thẻ p Hiển thị giá bất động sản

7 Ngày đăng Thẻ p Hiển thị ngày đăng

8 Hình mẫu của bds Thẻ img Hiển thị hình đầu tiên của BDS (nếu có)

9 Chuyển trạng thái bài đăng Thẻ button Nhấn vào để hiện popup xác nhận chuyển trạng thái bài viết

10 Lưu tin/ Hủy lưu tin Thẻ button Nhấn để lưu tin hoặc xóa tin ra khỏi bài đăng yêu thích

Hình 3.21: Giao diện Client - Trang tin đã lưu

Hình 3.22: Giao diện Client - Trang đăng tin

Bảng 3.39: Mô tả giao diện Client - Trang đăng tin

1 Chọn loại hình Thẻ select Chọn loại hình BDS

2 Chọn loại bất động sản Thẻ select Chọn loại BDS

3 Chọn tỉnh thành thành phố Thẻ select Chọn tỉnh thành thành phố BDS

4 Chọn quận huyện Thẻ select Chọn quận huyện của BDS

5 Chọn xã phường Thẻ select Chọn xã phường của BDS

6 Nhập địa chỉ chi tiết Thẻ input Nhập địa chỉ chi tiết của BDS

7 Nhập giá Thẻ input Nhập giá BDS

8 Nhập diện tích Thẻ input Nhập diện tích BDS

9 Chọn hướng nhà Thẻ select Chọn hướng nhà BDS

10 Chọn tình trạng pháp lý Thẻ select Chọn tình trạng pháp lý của BDS

11 Nhập tiêu đề bài đăng Thẻ input Nhập tiêu đề của bài đăng BDS

12 Nhập thông tin chi tiết bài đăng Thẻ input Nhập thông tin chi tiết về BDS

13 Khung hiển thị ảnh Thẻ div Khung hiển thị các hình ảnh đã chọn cho

14 Nút thêm ảnh Thẻ button Nhấn vào để chọn thêm ảnh

Trang tìm kiếm bài đăng

Hình 3.23: Giao diện Client - Trang tìm kiếm bài đăng

Bảng 3.40: Mô tả giao diện Client - Trang tìm kiếm bài đăng

1 Chọn tỉnh thành Thẻ select Chọn tỉnh thành

2 Chọn loại bài đăng Thẻ select Chọn loại bài đăng

3 Chọn loại bất động sản Thẻ select Chọn loại baast động sản

4 Tìm kiếm Thẻ select Nhấn để tìm kiếm

5 Hình ảnh Thẻ img Hình đầu tiên của bài đăng (nếu có)

6 Title của bài đăng Thẻ p Hiển thị title của bài đăng

7 Diện tích Thẻ p Hiển thị diện tích của bất động sản

8 Tiền Thẻ p Hiển thị số tiền của bất động sản

9 Thời gian đăng Thẻ p Hiển thị thời gian đăng của bài viết

10 Chọn trang Thẻ button Chọn trang kết quả (phân trang )

Trang tin tức bất động sản

Hình 3.24: Giao diện Client - Trang tin tức bất động sản Bảng 3.41: Mô tả giao diện Client - Trang tin tức bất động sản

1 Bài báo Thẻ a Chọn bài báo muốn xem

Hình 3.25: Giao diện Admin - Trang đăng nhập

Bảng 3.42: Mô tả giao diện Admin - Trang đăng nhập

1 Username input Nhập username của người dùng

2 Password input Nhập password của người dùng

3 Nút đăng nhập button Ấn nút đăng nhập để thực hiện đăng nhập

4 Quên mật khẩu Thẻ a Chuyển hướng sang trang quên mật khẩu

5 Messenger chatbox Trao đổi thông tin với admin

Màn hình quên mật khẩu

Hình 3.26: Giao diện Admin - Trang quên mật khẩu

Bảng 3.43: Mô tả giao diện Admin - Trang quên mật khẩu

1 Email input Nhập email của người dùng

2 Nút gửi yêu cầu button Ấn nút để thực hiện tạo và gửi mật khẩu đăng nhập mới qua mail

3 Đăng nhập Thẻ a Chuyển hướng sang trang đăng nhập

Hình 3.27: Giao diện Admin - Trang chủ

Bảng 3.44: Mô tả giao diện Admin - Trang chủ

1 Nút trang chủ Thẻ a Điều hướng đến trang chủ

2 Thống kê số bài đăng chưa được duyệt Label Hiển thị số lượng bài đăng chưa được duyệt

3 Thống kê tổng số bài đăng trong tháng Label Hiển thị tổng số bài đăng trong tháng

4 Thống kê số người dùng mới Label Hiển thị số người dùng mới

5 Tên Label Hiển thị tên

6 Role Label Hiển thị quyền của người dùng

7 Thông tin cá nhân Link Điều hướng đến trang thông tin cá nhân

8 Cập nhật thông tin Link Điều hướng đến trang thay đổi thông tin cá nhân

9 Đăng xuất Button Đăng xuất tài khoản

10 Avatar img Hiển thị avatar của người dùng

Hình 3.28: Giao diện Admin - Trang chủ Bảng 3.45: Mô tả giao diện Admin - Trang chủ

1 Thành phố Select Lựa chọn thành phố coi thống kê

Thống kê giá bán trung bình cho từng danh mục

BĐS cụ thể các bài đăng

Hiển thị giá bán trung bình của từng danh mục bất động sản trên tổng số bài đăng của từng loại qua các tháng trong một năm

Thống kê giá bán trung bình trên tổng số các bài đăng theo danh mục trong từng tháng

Hiển thị giá bán trung bình của từng danh mục bất động sản trên tổng số bài đăng của từng loại qua từng tháng

Trang quản lý người dùng

Hình 3.29: Giao diện Admin - Trang quản lý người dùng Bảng 3.46: Mô tả giao diện Admin - Trang quản lý người dùng

1 Tìm kiếm Input Nhập tên, email, số điện thoại của người dùng cần tìm kiếm

2 Quyền Select Lựa chọn quyền cần tìm kiếm

3 Tạo tài khoản Link Điều hướng đến trang tạo tài khoản người dùng

Thực hiện khoá tài khoản người dùng nếu người dùng đó còn hoạt động Thực hiện mở tài khoản nếu người dùng đã bị khoá tài khoản

5 Xem chi tiết Link Điều hướng đến trang xem chi tiết người dùng

Trang tạo tài khoản người dùng

Hình 3.30: Giao diện Admin - Trang Tạo người dùng Bảng 3.47: Mô tả giao diện Admin - Trang tạo người dùng

1 Họ tên input Nhập tên

2 Ngày sinh datepicker Nhập ngày sinh

4 Quyền select Lựa chọn quyền cho người dùng

5 Avatar input Lựa chọn hình ảnh avatar

6 Giới tính Radio button Lựa chọn giới tính

7 Số điện thoại input Nhập số điện thoại

8 Địa chỉ input Nhập địa chỉ

9 Quay lại button Quay lại trang trước đó

10 Tạo tài khoản button Submit form tạo tài khoản người dùng

Trang thông tin người dùng

Hình 3.31: Giao diện Admin - Trang thông tin người dùng Bảng 3.48: Mô tả giao diện Admin - Trang thông tin người dùng

1 Avatar img Avatar của người dùng, nếu không có thì để hình mặc định

Thực hiện khoá tài khoản người dùng nếu người dùng đó còn hoạt động Thực hiện mở tài khoản nếu người dùng đã bị khoá tài khoản

3 Họ tên Label Hiển thị họ tên của người dùng

4 Quyền Label Hiển thị quyền

5 Ngày sinh Label Hiển thị ngày sinh

6 Số điện thoại Label Hiển thị số điện thoại

7 Thay đổi thông tin Link Điều hướng đến trang thay đổi thông tin người dùng

8 Danh sách bài đăng của người dùng Grid Hiển thị danh sách các bài đăng của người dùng

Trang thay đổi thông tin người dùng

Hình 3.32: Giao diện Admin - Trang thay đổi thông tin người dùng

Bảng 3.49: Mô tả giao diện Admin - Trang thay đổi thông tin người dùng

1 Họ tên input Nhập tên

2 Giới tính Radio button Chọn giới tính

3 Ngày sinh datepicker Chọn ngày sinh

5 Số điện thoại input Nhập số điện thoại

6 Địa chỉ input Nhập địa chỉ

7 Avatar input Chọn hình ảnh

8 Quay lại link Điều hướng đến trang trước đó

9 Thay đổi button Submit form thay đổi thông tin người dùng

Trang quản lý bài đăng

Hình 3.33: Giao diện Admin - Trang quản lý bài đăng Bảng 3.50: Mô tả giao diện Admin - Trang quản lý bài đăng

1 Tìm kiếm input Tìm kiếm bài đăng thông qua title bài đăng

2 Trạng thái bài đăng select

Lựa chọn trạng thái bài đăng (chưa được duyệt, đang hiển thị, từ chối, bị khoá)

Lựa chọn danh mục bất động sản (nhà ở, chung cư, đất, văn phòng/ mặt bằng kinh doanh)

4 Loại bài đăng select Lựa chọn loại bài đăng (mua, bán, cho

5 Tỉnh thành select Lựa chọn tỉnh thành

6 Quận huyện select Lựa chọn quận huyện

7 Duyệt bài đăng button Duyệt bài đăng

8 Từ chối bài đăng button Từ chối bài đăng

9 Xem chi tiết link Điều hướng đến trang xem chi tiết bài đăng

Trang chi tiết bài đăng

Hình 3.34: Giao diện Admin - Trang chi tiết bài đăng

Bảng 3.51: Mô tả giao diện Admin - Trang chi tiết bài đăng

1 Nội dung Thẻ p Nội dung bài đăng

2 Đồng ý Button Cho phép hiển thị bài đăng

3 Từ chối Button Không cho phép hiển thị bài đăng

4 Trở lại Button Quay trở lại trang trươc

5 Bản đồ Bản đồ hiển thị địa chỉ của bất động sản

Trang quản lý tin tức

Hình 3.35: Giao diện Admin - Trang quản lý tin tức Bảng 3.52: Mô tả giao diện Admin - Trang quản lý tin tức

1 Tìm kiếm input Tìm kiếm tin tức theo tiêu đề

2 Tình trạng hiển thị select Tìm kiếm tin theo tình trạng hiển thị

3 Tạo tin tức link Điều hướng sang trang tạo tin

4 Chỉnh sửa link Điều hướng sang trang chỉnh sửa tin

5 Ẩn tin/ Hiển thị tin button Ẩn tin nếu tin đang hiển thị

Hiển thị tin nếu tin đang ấn

Hình 3.36: Giao diện Admin - Trang tạo tin tức Bảng 3.53: Mô tả giao diện Admin - Trang tạo tin tức

1 Tiêu đề input Nhập tiêu đề bài đăng

2 Ảnh bìa input Lựa chọn hình ảnh

3 Nội dung Text area Nhập nội dung bài đăng

4 Quay lại button Quay trở lại trang trước

5 Tạo tin button Submit form và tạo tin

Trang cập nhật tin tức

Hình 3.37: Giao diện Admin - Trang cập nhật tin tức Bảng 3.54: Mô tả giao diện Admin - Trang cập nhật tin tức

1 Tiêu đề input Nhập tiêu đề bài đăng

2 Ảnh bìa input Lựa chọn hình ảnh

3 Nội dung Text area Nhập nội dung bài đăng

4 Quay lại button Quay trở lại trang trước

5 Tạo tin button Submit form và cập nhật tin

Trang quản lý báo cáo

Hình 3.38: Giao diện Admin - Quản lý báo cáo Bảng 3.55: Mô tả giao diện Admin - Quản lý báo cáo

1 Trạng thái báo cáo select Lựa chọn trạng thái của bài báo cáo

2 Mã bài đăng bị báo cáo link Điều hướng sang chi tiết của bài đăng bị báo cáo

CÁC CÔNG NGHỆ SỬ DỤNG

REACT JS

ReactJS là một thư viện JavaScript giúp xây dựng các thành phần giao diện người dùng (UI) có thể tái sử dụng Theo tài liệu chính thức, React cho phép phát triển ứng dụng web một cách hiệu quả và linh hoạt.

ReactJS là một thư viện JavaScript đơn giản, được sử dụng để xây dựng giao diện người dùng (UI) Dưới đây là các định nghĩa chính về React.

React là một thư viện mạnh mẽ giúp xây dựng giao diện người dùng bằng cách kết hợp các component lại với nhau.

React khuyến khích người dùng tạo ra các thành phần giao diện có thể tái sử dụng, nhờ vào khả năng chia nhỏ các thành phần này.

UI phức tạp ra thành các phần component độc lập)

React không chỉ cho phép render dữ liệu ở tầng Server mà còn ở Client, điều này làm tăng tính hữu dụng của nó Cách tổ chức source code cho trang Admin cũng rất quan trọng.

Hình 4.3: Cách tổ chức front-end

Hình 4.4: Cách tổ chức front-end

Thư mục dashboard: chứa giao diện trang admin

Thư mục services: nơi chứa các API do backend cung cấp

Thư mục store: tổ chức lưu trữ dữ liệu theo redux bao gồm (actions, reducers, store)

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

CÀI ĐẶT ỨNG DỤNG

- Máy phải cài đặt NodeJS

- Máy phải cài đặt npm

- Máy phải có Visual Studio, Visual Studio Code, Sql Server

- API: Sử dụng visual studio để chạy project RealEstateApi

- Trang admin, trang client: Sử dụng visual studio code mở project RealEstateClient o Bước 1: Cài npm install cho project o Bước 2: Chạy project bằng lệnh: npm start

KIỂM THỬ ỨNG DỤNG

Bảng 5.1: Kiểm thử phần mềm

ID Mô tả TestCase Kết quả mong đợi Kết quả thực tế

TC_01 Đăng kí tài khoản Nếu số điện thoại chưa được đăng kí trước đó thì sẽ đăng kí thành công

TC_02 Đăng nhập Nếu nhập đúng số điện thoại và mật khẩu thì sẽ đăng nhập thành công

TC_03 Gửi mã code khi quên mật khẩu

Nếu nhập đúng số điện thoại đã đăng kí thì sẽ nhận được mã code, nếu không báo lỗi

TC_04 Đổi mật khẩu khi quên mật khẩu

Nhập đúng mã code được nhận và nhập mật khẩu mới đúng sẽ đổi được mật khẩu

TC_05 Đổi thông tin cá nhân Nếu đã đăng nhập thì người dùng sẽ đổi được các thông tin cá nhân của bản thân

TC_06 Đổi mật khẩu Nếu nhập đúng mật khẩu cũ và mật khẩu mới cùng mật khẩu xác nhận lại trùnh nhau thì sẽ cho đổi mật khẩu

TC_07 Tạo bài viết Nếu dữ liệu nhập vào đủ các trường bắt buộc thì sẽ cho phép tạo bài đăng

Nếu dữ liệu đã chỉnh sửa đầy đủ các trường bắt buộc, bài đăng sẽ được phép cập nhật lại Lưu ý rằng chỉ những bài đăng chưa được duyệt mới có thể chỉnh sửa.

TC_09 Yêu thích/ bỏ yêu thích bài viết

Nếu đã đăng nhập thì người dùng được phép yêu thích/bỏ yêu thích 1 bài viết

TC_10 Theo dõi người dùng Nếu đã đăng nhập thì người dùng có thể theo dõi 1 người dùng mong muốn

TC_11 Đăng xuất Nếu người dùng đã đăng nhập thì có thể đăng xuất

TC_12 Duyệt bài đăng, Từ chối bài đăng

Bài đăng được chuyển trạng thái sang trạng thái phù hợp

TC_13 Khoá và mở khoá tài khoản người dùng

Tài khoản được chuyển trạng thái phù hợp

TC_14 Tạo tài khoản người dùng

Tài khoản người dùng được tạo

TC_15 Chỉnh sửa thông tin người dùng

Thông tin người dùng được chỉnh sửa

TC_16 Tạo tin tức Tin tức được tạo Như mong đợi

TC_17 Cập nhật tin tức Tin tức được thay đổi Như mong đợi

TC_18 Xoá tin tức Tin tức được xoá Như mong đợi

TC_19 Hiển thị tin/ Ẩn tin Tin tức được hiện / ẩn Như mong đợi

KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN

HƯỚNG PHÁT TRIỂN

- Tối ưu hoá trang web

- Nâng cao bảo mật web

- Cải thiện giao diện người dùng

- Training model để giúp việc hỗ trợ tìm kiếm bài đăng thông qua message một cách có hiệu quả

- Thực hiện nâng cấp tính năng gửi tin nhắn để không bị giới hạn việc gửi tin nhắn mã code tới người dùng khi đăng ký tài khoản

Khi trang web thu hút được một lượng người dùng đáng kể, nó có thể phát triển theo hướng sinh lợi bằng cách cho phép người dùng nạp tiền để đẩy các bài đăng lên đầu, từ đó tăng lượt xem.

- Liên kết trang web với các đối tác có nhu cầu đăng nhiều bài đăng nhằm giảm bớt thời gian tạo bài đăng

Tiêu đề	Xây Dựng Website Mua Bán, Cho Thuê Bất Động Sản Sử Dụng .NET Core
Tác giả	Khổng Gia Bình, Trần Thủy Tiên
Người hướng dẫn	Th.S Lê Vĩnh Thịnh
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật TP. Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	đề án tốt nghiệp
Năm xuất bản	2022
Thành phố	Hồ Chí Minh

Định dạng
Số trang	109
Dung lượng	12,56 MB