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ách04 Xoá Danh Sách Bất Động SảnĐại Lý
GIỚI THIỆU
Lý do chọn đề tài
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 tin về 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 động sả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 quá trình giao dịch bất động sản.
Mục tiêu
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 động sả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ảng cáo và giới thiệu bất động sản một cách hiệu quả.
Phạm vi
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ùng chủ 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.
Công nghệ sử dụng
Trong quá trình xây dựng trang web, chúng em sử dụng một số công nghệ chính bao 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ết nối cơ sở dữ liệu SQL Server.
Kết luận chương
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ượng người dùng, và công nghệ sử dụng trong quá trình xây dựng trang web giới thiệu và mua bá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 để đảm bả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.
THIẾT KẾ
Phân tích yêu cầu
Trước khi bắt đầu quá 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.
Use Case (Actors) Mô Tả Use Case
Thêm, xoá, sửa đổi danh sách người dùng trong hệ thố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
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
Bất Động Sản Đại Lý Bất Động Sản (Real Estate Agent) Đại lý bất động sản có thể xoá các bất động sản khỏi danh sách
Người Dùng Đã Đăng Ký (Registered User)
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.
Người Dùng Đã Đăng Ký (Registered User)
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.
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.
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.
Người Dùng Đã Đăng Ký (Registered User)
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.
2.1.1.3.1 Đăng nhập và đăng ký tài khoản
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ụng cá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à
Người dùng có thể đăng ký tài khoản mới.
Hệ thống xác thực người dùng và bảo mật thông tin tài khoản.
Cung cấp thông báo lỗi nếu người dùng nhập sai thông tin đăng nhập.
2.1.1.3.2 Tìm kiếm bất động sản theo tiêu chí
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 thuê.
Not doing Không hỗ trợ tìm kiếm bằng giọng nói.
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á thuê, diện tích, số phòng, tiện ích, v.v.
Kết quả tìm kiếm phù hợp và chính xác.
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.
2.1.1.3.3 Xem thông tin chi tiết về bất động sản
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 thuê 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 độ.
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.
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.
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
Feature Liên hệ với chủ bất động sản qua tin nhắn, email hoặc cuộc gọi
Description 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ới chủ 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.
Người dùng có thể nhấp vào thông tin liên hệ trên trang chi tiết bất động sản để chọn phương tiện liên hệ (tin nhắn, email, cuộc gọi).
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ệ.
Đả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.
2.1.1.3.5 Yêu thích và lưu trữ
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.
Không cung cấp tính năng chia sẻ danh sách yêu thích với người khác.
Không cung cấp tính năng lưu trữ vô thời hạn
Người dùng có thể nhấp vào thông tin liên hệ trên trang chi tiết nhà để chọn phương tiện liên hệ (tin nhắn, email, cuộc gọi).
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ệ.
Đả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.
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 soá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ân một cách dễ dàng và thuận tiện.
Thiết kế giao diện người dùng
Giao diện người dùng của trang web được thiết kế để mang lại trải nghiệm người dùng mượt mà và hiệu quả Chúng em đã sử dụng Material-UI để tạo ra giao diện đẹp mắt và có tính thẩm mỹ cao.
Hình 2.10 Sơ đồ sreen flow
Tính Năng Màn Hình Mô Tả
1 Đăng Nhập Màn Hình Đăng
Màn hình cho người dùng đăng nhập vào hệ 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
Màn hình để người dùng thay đổi mật khẩu
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
5 Danh Sách Bất Động Sản
Màn Hình Danh Sách Bất Động Sản
Màn hình hiển thị danh sách các bất động sản trong hệ thống
6 Chi Tiết Bất Động Sản
Màn Hình Chi Tiết Bất Động Sản
Màn hình hiển thị thông tin chi tiết về một bất động sản mà người dùng muốn xem
7 Tìm Kiếm Bất Động Sản
Màn Hình Tìm Kiếm Bất Động Sản
Màn hình cho người dùng tìm kiếm bất động sản
8 Liên Hệ Màn Hình Liên Hệ Màn hình liên lạc giữa người dùng và đại lý bất động sản
Màn Hình Danh Sách Yêu Thích
Màn hình hiển thị danh sách bất động sản yêu thích của người dùng
2.2.3 Quyền truy cập màn hình
Màn Hình Người Mua Đại Lý Bất Động Sản Quản Trị Viên
Tìm Kiếm Bất Động Sản X X
Chi Tiết Bất Động Sản X X X
Danh Sách Bất Động Sản X X
Quản Lý Tài Khoản X X X Đăng Nhập X X X Đăng Ký X X X
Hồ Sơ Người Dùng X X X Đổi Mật Khẩu X X X
Thiết kế cơ sở dữ liệu
1 Users Mô tả: Lưu trữ thông tin về người dùng hệ thống.
Trường: o id (Khóa chính) o first_name o last_name o username o contact (Khóa ngoại tham chiếu đến Contact.id) o account (Buyer, Seller, Real Estate Agent)
2 Account Mô tả: Quản lý thông tin tài khoản người dùng trong hệ thống mua bán bất động sản.
Trường: o id (Khóa chính) o username o password
3 Listings Mô tả: Chứa danh sách bất động sản.
Trường: o listing_id (Khóa chính) o author_id (Khóa ngoại tham chiếu đến User.id) o title o price o category (Khóa ngoại tham chiếu đến Categories.term_id) o ad_type (Khóa ngoại tham chiếu đến ListingTypes.id) o view_count o contact (Khóa ngoại tham chiếu đến Contact.id)
4 Contact Mô tả: Bảng Contact được thiết kế để lưu trữ thông tin liên quan đến các liên lạc, hỗ trợ giao tiếp giữa người dùng trong hệ thống mua bán bất động sản.
Trường: o id (Khóa chính) o location (Khóa ngoại tham chiếu đến Locations.term_id) o address o phone o whatsapp_number o email
5 Locations Mô tả: Chứa các địa chỉ.
Trường: o term_id (Khóa chính) o name o slug o count
6 Categories Mô tả: Chứa các danh mục tài sản.
Trường: o term_id (Khóa chính) o name o slug o count
7 ListingTypes Mô tả: Chứa loại danh sách.
Trường: o id (Khóa chính) o name
8 Images Mô tả: Chứa hình ảnh.
Trường: o id (Khóa chính) o listing_id (Khóa ngoại tham chiếu đến Listings.listing_id) o title o url o alt
9 Listing-Customfiels Mô tả: Bảng này được thiết kế để lưu trữ các trường tùy chỉnh liên quan đến danh sách bất động sản.
Trường: o id (Khóa chính) o listing_id (Khóa ngoại tham chiếu đến Listings.listing_id) o custom_fields_id (Khóa ngoại tham chiếu đến CustomFields.id)
10 Choices Mô tả: Lưu trữ các lựa chọn được định nghĩa trước được sử dụng trong các phần khác nhau của hệ thống mua bán bất động sản.
Trường: o id (Khóa chính) o name
11 CustomFields Mô tả: Cung cấp một cấu trúc linh hoạt và mở rộng để chứa các thuộc tính được xác định bởi người dùng liên quan đến tài sản.
Trường: o id (Khóa chính) o label
12 Values Mô tả: Lưu trữ giá trị cụ thể của thuộc tính liên quan đến các tài sản trong hệ thống mua bán bất động sản.
Trường: o id (Khóa chính) o data
Mô tả: Cầu nối giữa các trường tùy chỉnh và lựa chọn được định nghĩa trước, cho phép người dùng liên kết các lựa chọn cụ thể với các trường tùy chỉnh trong hệ thống mua bán bất động sản.
Trường: o id (Khóa chính) o choices_id (Khóa ngoại tham chiếu đến Choices.id) o custom_fields_id (Khóa ngoại tham chiếu đến
14 CustomFields_Values Mô tả: Cho phép liên kết giữa các trường tùy chỉnh và các giá trị cụ thể, giúp tùy chỉnh động các thuộc tính.
Trường: o id (Khóa chính) o values_id (Khóa ngoại tham chiếu đến Values.id) o custom_fields_id (Khóa ngoại tham chiếu đến CustomFields.id) o listing_id
TRIỂN KHAI
Công nghệ sử dụng
Next.js là một framework dựa trên React cho phép bạn tối ưu hoá hiệu năng, hỗ trợ SEO và trải nghiệm người dùng thông qua pre-rendering: Server Side Rendering (SSR) và Static Site Generation (SSG)
Server Side Rendering: SSR cho phép máy chủ access tất cả required data và xử lý javaScript để hiển thị lên trang web Theo cơ chế này thì hầu hết các xử lý logic đều ở phía máy chủ Trong đó, máy chủ thực hiện xử lý và tiến hành các thao tác với cơ sở dữ liệu để thông dịch (render) ra thành HTML, sau đó gửi phản hồi cho khách hàng.Trình duyệt của khách hàng cũng sẽ chỉ hiển thị HTML này.
Search Engine Optimization (SEO): Sử dụng SSR cũng mang lại cho bạn lợi thế về SEO, giúp trang web của bạn hiển thị cao hơn trên các trang kết quả của công cụ tìm kiếm SSR làm cho các trang web xếp hạng tốt hơn cho SEO vì chúng tải nhanh hơn và nhiều nội dung trang web có thể được quét bởi các trình theo dõi SEO.
Trải nghiệm người dùng tốt: Việc thuận lợi nhất của việc sử dụng Next
JS là trải nghiệm người dùng, chỉ đứng thứ hai sau tốc độ Marketers yêu thích sự độc lập trong thiết kế, đặc biệt là trong ngành thương mại điện tử, nơi nhiều cửa hàng trực tuyến trông giống nhau và có một trải nghiệm người dùng tốt sẽ giúp cửa hàng nổi bật hơn so với các đối thủ cạnh tranh.
Bảo mật: An toàn vì nó không có liên kết trực tiếp đến database, dependencies, user data hoặc thông tin bí mật khác.
Thời gian tải trang nhanh hơn: Vì các trang web JS là tĩnh, chúng cực kỳ nhanh và khách truy cập sẽ rất hài lòng với kết quả Nó cũng có thể tự động tối ưu hóa các trang bất cứ khi nào nó được yêu cầu.
Cộng đồng hỗ trợ lớn: Next.Js là React framework nên rất dễ nhận được sự hỗ trợ nhanh chóng khi bạn cần Bạn không cần phải xây dựng nó từ đầu, vì sẽ luôn có một nhà phát triển React hỗ trợ nhanh chóng cho bạn.
TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side và server-side.
TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tin chắc rằng TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi kỹ thuật mới nhất từ ECMAScript Thực ra TypeScript không phải ra đời đầu tiên mà trước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn đang nhận được sự đón nhận từ các lập trình viên.
Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách dễ dàng.
Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0.
Hỗ trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại là ECMAScript 2015 (ES6).
Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ.
TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript Ngoài ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn.
Hình 3.4 Logo thư viện MUI
Material-UI là một thư viện giao diện người dùng (UI) cho React.js, Next.js,… , được xây dựng trên cơ sở thiết kế Material của Google Nó cung cấp một bộ công cụ linh hoạt và mạnh mẽ cho việc xây dựng giao diện người dùng đẹp và có thẩm mỹ trong ứng dụng React.
Thiết Kế Theo Hướng Material: Material-UI áp dụng các nguyên tắc thiết kế của Material Design, giúp tạo ra giao diện hiện đại, phẳng, và dễ hiểu.
Component Đa Dạng và Linh Hoạt: Cung cấp một loạt các component chuẩn như Button, TextField, AppBar, và nhiều component khác, giúp giảm độ phức tạp trong quá trình xây dựng giao diện.
Theme Customization: Hỗ trợ chủ đề tùy chỉnh, cho phép bạn dễ dàng điều chỉnh các biến như màu sắc, font chữ, và các thuộc tính khác để phù hợp với thiết kế của ứng dụng.
Hỗ Trợ React Hooks: Tận dụng các tính năng của React Hooks, giúp quản lý trạng thái và logic component một cách hiệu quả.
Triển khai Frontend
3.2.1 Sử Dụng React.js và Material-UI
Mã nguồn frontend được triển khai trên một máy chủ web, sử dụng React.js và Material-UI.
Giao diện người dùng được tối ưu hóa để đảm bảo khả năng tương thích trên nhiều trình duyệt.
3.2.2 Quản Lý Tài Nguyên Tĩnh
Các tài nguyên tĩnh như hình ảnh và tệp CSS được quản lý và tối ưu hóa để cải thiện tốc độ tải trang.
Kích hoạt Chức năng: Nhấp vào nút "Trang chủ" nằm trong phần đầu trang của trang web chính.
Mô tả Chức năng: Chức năng cho phép bất kỳ ai cũng có thể truy cập màn hình Trang chủ của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi các bất động sản được hiển thị.
Chi tiết Chức năng: Chức năng chính liên quan đến nút "Trang chủ" là hiển thị các bất động sản trên Màn hình Trang chủ thông qua việc gọi đến điểm cuối API của danh sách Điều này ngụ ý rằng Màn hình Trang chủ là nơi mà người dùng có thể xem danh sách các bất động sản hiện có.
Kích hoạt Chức năng: Nhấp vào nút "About" nằm trong phần đầu trang của trang web chính.
Mô tả Chức năng: Chức năng cho phép bất kỳ ai cũng có thể truy cập màn hình About của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi các thông tin của trang web được hiển thị.
Chi tiết Chức năng: Hiển thị thông tin trang web.
Kích hoạt Chức năng: Nhấp vào nút "Property" nằm trong phần đầu trang của trang web chính.
Mô tả Chức năng: Chức năng cho phép bất kỳ ai cũng có thể truy cập màn hình Property của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi các bất động sản của trang web được hiển thị.
Chi tiết Chức năng: Hiển thị danh sách bất động sản và có thể lọc các bất động sản theo các trường dữ liệu như tên, địa điểm, loại bất động sản,… hoặc xem danh sách theo dạng ngang/dọc.
Kích hoạt Chức năng: Nhấp vào bất động sản được hiển thị trên trang property.
Mô tả Chức năng: Chức năng cho phép bất kỳ ai cũng có thể truy cập màn hình Property Detail của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi chi tiết bất động sản của trang web được hiển thị.
Chi tiết Chức năng: Hiển thị thông tin chi tiết của bất động sản cũng như thông tin liên lạc của chủ nhân bất động sản.
Hình 3.14 Màn hình Property Detail
Kích hoạt Chức năng: Nhấp vào nút “Contact” ở đầu trang web.
Mô tả Chức năng: Chức năng cho phép bất kỳ ai cũng có thể truy cập màn hình Contact của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi thông tin liên lạc của công ty được hiển thị.
Chi tiết Chức năng: Hiển thị thông tin của công ty.
Kích hoạt Chức năng: Nhấp vào nút “Login” ở đầu trang web.
Mô tả Chức năng: Chức năng cho phép bất kỳ ai cũng có thể truy cập màn hình Login của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi hiển thị các ô input để người dùng điền username và password để đăng nhập.
Chi tiết Chức năng: Đăng nhập vào website.
Kích hoạt Chức năng: Nhấp vào nút “Sign up” ở đầu trang Login.
Mô tả Chức năng: Chức năng cho phép bất kỳ ai cũng có thể truy cập màn hình Register của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi hiển thị các ô input để người dùng điền thôn tin để đăng ký tài khoản mới.
Chi tiết Chức năng: Đăng ký tài khoản mới.
Kích hoạt Chức năng: Sau khi đăng nhập thành công người dùng sẽ được điều hướng về trang thông tin tài khoản, nút đăng nhập ở đầu trang cũng chuyển điều hướng về trang thông tin tài khoản.
Mô tả Chức năng: Chức năng cho phép người dùng đã đăng nhập thành công có thể truy cập màn hình User Detail của trang web.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi hiển thị các thông tin của người dùng.
Chi tiết Chức năng: Hiển thị thông tin người dùng.
Hình 3.18 Màn hình User Detail
Kích hoạt Chức năng: Nhấn vào nút Add Property ở đầu trang web.
Mô tả Chức năng: Chức năng cho phép người dùng đã đăng nhập thành công có thể tạo bài đăng bất động sản mới.
Bố cục Màn hình: Bao gồm các yếu tố như phần đầu trang của trang web, menu điều hướng và khu vực nội dung chính nơi hiển thị các ô input và lựa chọn để người dùng điền đầy đủ thông tin của bất động sản.
Chi tiết Chức năng: Tạo mới bài đăng bất động sản.
Hình 3.19 Màn hình Add Property
Triển khai Backend
3.3.1 Sử Dụng ASP.NET Framework và Entity Framework
Mã nguồn backend được triển khai trên một máy chủ ổn định sử dụng ASP.NET Framework và Entity Framework.
API được cung cấp để giao tiếp giữa frontend và cơ sở dữ liệu.
T Phương thức API Mô tả
1 GET Account Lấy danh sách account
2 GET Categories Lấy danh sách các loại bất động sản
3 GET Contacts Lấy danh sách các liên lạc
4 GET Listings/filter Lấy danh sách bất động sản theo biến được truyền vào
5 GET Listings Lấy danh sách bất động sản
6 GET Listings/{id} Lấy bất động sản theo id
7 POST Listings Thêm mới bất động sản
8 GET ListingTypes Lấy danh sách loại buôn bán của bất động sản
9 GET Locations Lấy danh sách địa điểm
10 GET User/id Tìm user theo id
11 GET Users Lấy danh sách user
12 POST Users Thêm mới user
13 PUT Users Chỉnh sửa thông tin user
14 POST Authorize Tạo JWT khi người dùng đăng nhập thành công
