CƠ SỞ LÍ THUYẾT VÀ CÔNG NGHỆ
Công nghệ đã sử dụng trong đồ án
ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi
ReactJS của Facebook giúp phát triển ứng dụng web hấp dẫn, nhanh chóng và hiệu quả với mã hóa tối thiểu Mục tiêu chính của ReactJS là tạo ra trải nghiệm mượt mà, hiệu suất cao, khả năng mở rộng tốt và đơn giản cho người dùng.
Single-way data flow (Luồng dữ liệu một chiều)
ReactJS không có các module chuyên dụng để xử lý dữ liệu, vì vậy nó chia nhỏ giao diện thành các component nhỏ có mối quan hệ chặt chẽ Cấu trúc và mối quan hệ giữa các component trong ReactJS rất quan trọng do luồng dữ liệu một chiều từ cha xuống con Mặc dù luồng dữ liệu một chiều có thể gây khó khăn cho những người mới tìm hiểu, nhưng cơ chế này sẽ phát huy hiệu quả khi cấu trúc và chức năng của giao diện trở nên phức tạp.
ReactJS không có các module chuyên dụng để xử lý dữ liệu, mà thay vào đó chia nhỏ giao diện thành các component có mối quan hệ chặt chẽ Việc hiểu cấu trúc và mối quan hệ giữa các component là quan trọng vì luồng dữ liệu trong ReactJS diễn ra theo chiều một chiều từ cha xuống con Mặc dù luồng dữ liệu một chiều có thể gây khó khăn cho những người mới bắt đầu, nhưng cơ chế này thực sự phát huy hiệu quả khi cấu trúc và chức năng của giao diện trở nên phức tạp.
Virtual-DOM trong các Framework như ReactJS cho phép chúng ta phản ánh sự thay đổi mà không cần thao tác trực tiếp với DOM trên View Virtual-DOM vừa là Model vừa là View, nên mọi thay đổi trên Model sẽ tự động cập nhật trên View và ngược lại Điều này cho phép thực hiện cơ chế Data-binding hiệu quả, giúp tăng tốc độ ứng dụng một cách đáng kể, mang lại lợi thế vượt trội khi sử dụng Virtual-DOM.
ReactJS cho phép doanh nghiệp phát triển ứng dụng web với giao diện người dùng (UI) tối ưu, nâng cao trải nghiệm người dùng Công nghệ này giúp tăng cường tương tác, tỷ lệ nhấp chuột và chuyển đổi Hơn nữa, các doanh nghiệp sử dụng ReactJS sẽ có giao diện vượt trội hơn so với những doanh nghiệp khác nhờ khả năng ngăn chặn cập nhật DOM, từ đó cải thiện tốc độ ứng dụng và truyền tải trải nghiệm người dùng (UX) tốt hơn.
Laravel, được phát triển bởi Taylor Otwell, lần đầu tiên ra mắt vào tháng 6 năm 2011 Kể từ đó, Laravel đã trải qua sự phát triển mạnh mẽ, trở thành một trong những framework PHP phổ biến nhất và được ưa chuộng trong cộng đồng lập trình web.
• Dễ dàng sử dụng, document rõ ràng dễ hiểu
Mô hình MVC giúp cấu trúc và tổ chức mã nguồn trong dự án trở nên hợp lý, từ đó dễ dàng hơn cho việc bảo trì và phát triển bền vững trong tương lai.
• Có các tính năng dựng sẵn giúp quá trình phát triển trở nên nhanh chóng hơn rất nhiều lần
Các thư viện kết hợp với Laravel được sử dụng trong đồ án:
Laravel Sanctum là một giải pháp xác thực hiệu quả cho các ứng dụng một trang (SPA), ứng dụng di động và API đơn giản, sử dụng hệ thống mã thông báo Nó cho phép người dùng tạo nhiều mã thông báo API cho tài khoản của mình, với khả năng và phạm vi cụ thể để xác định các hành động mà mã thông báo có thể thực hiện.
Eloquent ORM trong Laravel mang đến một triển khai ActiveRecord dễ sử dụng và hiệu quả cho việc quản lý cơ sở dữ liệu Mỗi bảng trong cơ sở dữ liệu tương ứng với một mô hình, giúp lập trình viên thao tác và truy vấn dữ liệu một cách trực quan và nhanh chóng.
"Model" tương ứng được sử dụng để tương tác với bảng đó
PostgreSQL is an advanced, open-source object-relational database management system designed for general-purpose use It is recognized as one of the most sophisticated database systems available today.
PostgreSQL cung cấp một hệ thống tính năng phong phú, hỗ trợ các nhà phát triển trong việc xây dựng ứng dụng và giúp các quản trị viên bảo vệ tính toàn vẹn của dữ liệu Nó tạo ra một môi trường chịu lỗi, cho phép quản lý dữ liệu hiệu quả, bất kể kích thước của tập dữ liệu.
Các hệ tính năng được sử dụng trong đồ án của PostgreSQL:
- Cấu trúc: Date/Time, Array, Phạm vi, UUID
- Document: JSON/JSONB, XML, Key-value (Hstore)
- Lập danh mục: Expressions, Partial
- Giao tác, Giao tác dạng nest (thông qua lưu điểm)
- Ngôn ngữ thủ tục: PGSQL, Python
- Trình wrapper dữ liệu ngoài: kết nối với các cơ sở dữ liệu với giao diện SQL
Các yếu tố giúp PostgreSQL nổi bật
- PostgreSQL là hệ thống quản lý cơ sở dữ liệu đầu tiên triển khai tính năng kiểm soát đồng thời nhiều phiên bản (MVCC) trước cả Oracle
- PostgreSQL cho phép thêm vào các tính năng tùy chỉnh được phát triển bằng các ngôn ngữ chương trình khác nhau như C/C , Java,
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Bảng yêu cầu nghiệp vụ
STT Tên use case Đặc tả use case
- Sửa thông tin cá nhân
- Thêm, xoá, sửa thông tin chi tiết dự án
- Phân loại dự án theo thuộc tính
3 Quản lý bất động sản
- Thêm, xoá, sửa thông tin chi tiết bất động sản
- Phân loại bất động sản theo thuộc tính
4 Tìm kiếm tra cứu bất động sản
- Tìm kiếm bất động sản theo yêu cầu của người dùng
Bảng 1: Danh sách yêu cầu
Sơ đồ use case tổng quát
1 Người dùng Người dùng sử dụng trang web
2 Nhân viên Người dùng thực hiện các chức năng quản lý hệ thống
Bảng 2: Danh sách người dùng
Hình 1: Sơ đồ usecase tổng quát
Sơ đồ use case phân rã
Use case name Đăng nhập
Scenario Đăng nhập vào hệ thống bằng tài khoản và mật khẩu
Khi người dùng nhập tài khoản và mật khẩu vào các ô tương ứng và chọn đăng nhập, hệ thống sẽ xác minh tính chính xác của thông tin Nếu thông tin đúng, người dùng sẽ được chuyển đến màn hình phù hợp dựa trên vai trò (role) của tài khoản.
Actors Tất cả người dùng
Preconditions Tên người dùng và mật khẩu phải hợp lệ
Post conditions Nếu hợp lệ sẽ hiển thị thông báo, sau đó chuyển đến các màn hình tương ứng theo “role” của tài khoản
Flow of events 1 Người dùng vào màn hình đăng nhập
2 Người dùng điền đầy đủ thông tin và nhấn “Đăng nhập”
3 Hệ thống kiểm tra thông tin
4 Nếu hợp lệ, người dùng sẽ được chuyển đến trang chủ Exception conditions Nếu người dùng chưa điền đủ hoặc sai thông tin thì sẽ được yêu cầu nhập lại.
3.3.2 Usecase quản lý danh sách tài khoản
Use case name Quản lý danh sách tài khoản
Scenario giúp quản lý danh sách tài khoản một cách hiệu quả và chính xác Để thực hiện điều này, người dùng cần đăng nhập vào hệ thống bằng tài khoản có vai trò "admin".
“manager”, sau đó chọn mục Quản lý thông tin tài khoản Brief description Quản lý danh sách tài khoản gồm có các tính năng chính như sau:
- Hỗ trợ người quản lý xem danh sách tài khoản có trong hệ thống Ngoài ra còn hiển thị thông tin chi tiết của từng tài khoản
- Hỗ trợ tính năng tìm kiếm, lọc tài khoản
- Hỗ trợ thêm mới tài khoản
- Hỗ trợ chỉnh sửa thông tin cá nhân cho từng tài khoản
- Hỗ trợ xóa các tài khoản không sử dụng hoặc vi phạm quy định của website.
Related use cases Đăng nhập
Preconditions Role của tài khoản đăng nhập phải là “admin” hoặc “manager”
Post conditions Hiển thị danh sách tài khoản đang có
Flow of events 1 Người dùng vào màn hình đăng nhập
2 Người dùng điền đầy đủ thông tin và nhấn “Đăng nhập”
3 Hệ thống kiểm tra thông tin
4 Nếu hợp lệ, người dùng sẽ được chuyển đến trang chủ admin
5 Người dùng chọn mục Quản lý tài khoản
6 Thực hiện quản lý tài khoản ( CRUD)
3.3.3 Usecase tìm kiếm tra cứu dự án
Use case name Tìm kiếm tra cứu dự án/ bất động sản
Người dùng có thể dễ dàng tìm kiếm và tra cứu thông tin dự án bất động sản bằng cách nhập thông tin vào thanh tìm kiếm Tính năng tìm kiếm này giúp người dùng nhanh chóng nhận được kết quả chính xác và thuận tiện nhất.
- Thanh điền thông tin, keyword của dự án cần tìm kiếm
- Tìm kiếm theo các thông tin khác như mức giá, diện tích, vị trí,
Related use cases Không có
Người dùng cần nhập các thuộc tính tìm kiếm của dự án vào thanh tìm kiếm Nếu có kết quả tìm kiếm, màn hình sẽ hiển thị các kết quả tương ứng.
Flow of events 1 Nhập thuộc tính dự án vào thanh tìm kiếm
3 Hệ thống trả kết quả Exception conditions Nếu không tìm được kết quả, thông báo cho người dùng
3.3.4 Usecase xem thông tin dự án
Use case name Xem thông tin dự án/ bất động sản
Người dùng có thể dễ dàng xem thông tin dự án hoặc bất động sản một cách trực quan và rõ ràng nhất Để bắt đầu, người dùng chỉ cần chọn dự án hoặc bất động sản mà họ muốn tìm hiểu.
Brief description Xem thông tin dự án gồm có các tính năng chính như sau:
- Hiển thị chi tiết thông tin dự án, bao gồm mức giá, diện tích, vị trí, hình ảnh, mô tả,
- Hiển thị phân khu, đặc điểm và pháp lý của dự án
- Hiển thị tiến độ dự án.
Related use cases Không có
Người dùng truy cập vào màn hình danh sách bất động sản hoặc các mục bất động sản trên trang chính và sau đó được chuyển sang màn hình chi tiết của bất động sản.
Flow of events 1 Chọn dự án/ bất động sản cần tìm
2 Hệ thống tìm kiếm chi tiết dự án/ bất động sản
3 Chuyển đến màn hình chi tiết bất động sản
3.3.5 Usecase đăng kí bán/ cho thuê nhà đất
Use case name Đăng ký bán, cho thuê nhà đất
Scenario Giúp người dùng có thể thuận tiện đăng bán/ cho thuê đất đai, nhà cửa
Triggering event Người dùng chọn vào nút đăng tin ở màn hình trang chủ
Brief description Đăng ký bán/ cho thuê dự án gồm có các tính năng chính như sau:
- Hỗ trợ người dùng đăng bài bán/ cho thuê dự án dưới dạng điền thông tin vào form có sẵn.
Related use cases Đăng nhập
Để thực hiện thao tác, người dùng cần đăng nhập vào tài khoản có vai trò "user" và đảm bảo thông tin nhập vào form là chính xác Sau khi hoàn tất, hệ thống sẽ hiển thị trạng thái tin đăng và thông báo cho người dùng rằng thao tác đã được hoàn thành.
Flow of events 1 Đăng nhập
3 Nhập thông tin bất động sản cần đăng vào từng mục trong form
4 Hệ thống kiểm tra tính chính xác của thông tin vừa nhập
5 Thông báo đăng tin thành công
Exception conditions Nếu người dùng nhập sai thông tin vào form, thông báo sai và yêu cầu người dùng nhập lại
3.3.6 Usecase quản lý dự án bán/ cho thuê
Use case name Quản lý dự án/ bất động sản đang bán/ cho thuê
Giúp người quản lý tối ưu hóa danh sách thông tin dự án và bất động sản, hệ thống yêu cầu người dùng đăng nhập với tài khoản có vai trò "admin" và chọn mục Quản lý dự án/bất động sản Các tính năng chính của chức năng quản lý dự án đang bán hoặc cho thuê bao gồm việc theo dõi, cập nhật và tổ chức thông tin một cách hiệu quả.
- Hỗ trợ xem danh sách các dự án đang được đăng ký bán/ cho thuê một cách khái quát (dưới dạng bảng)
- Hỗ trợ chỉnh sửa thông tin dự án khi có sai sót
- Hỗ trợ xóa bài đăng bán/ cho thuê khi hết hạn đăng ký/ vi phạm quy định đăng ký.
Related use cases Đăng nhập
Preconditions Role của tài khoản đăng nhập phải là “admin”
Post conditions Hiển thị danh sách bất động sản/ dự án đang có
Flow of events 1 Người dùng vào màn hình đăng nhập
2 Người dùng điền đầy đủ thông tin và nhấn “Đăng nhập”
3 Hệ thống kiểm tra thông tin
4 Nếu hợp lệ, người dùng sẽ được chuyển đến trang chủ admin
5 Người dùng chọn mục Quản lý dự án/ bất động sản
6 Thực hiện quản lý dự án, bất động sản ( CRUD )
Use case name Thống kê dự án/ bất động sản
Người quản lý có thể xem các thống kê liên quan đến từng doanh mục bất động sản thông qua hệ thống Để truy cập vào các thông tin này, người dùng cần đăng nhập với tài khoản có vai trò "admin".
“manager”, sau đó chọn mục Thống kê Brief description Thống kê gồm có các tính năng chính như sau:
- Bất động sản giá cao nhất.
- Bất động sản hot nhất.
- Khu vực có số lượng bất động sản sốt nhiều nhất
- Dự án có quy mô lớn nhất …
Related use cases Đăng nhập
Preconditions Role của tài khoản đăng nhập phải là “admin” hoặc “manager”
Post conditions Hiển thị các thống kê theo yêu cầu
Flow of events 1 Người dùng vào màn hình đăng nhập
2 Người dùng điền đầy đủ thông tin và nhấn “Đăng nhập”
3 Hệ thống kiểm tra thông tin
4 Nếu hợp lệ, người dùng sẽ được chuyển đến trang chủ admin
5 Người dùng chọn mục thống kê
6 Người dùng chọn loại thống kê cần xem
7 Hiển thị biểu đồ thống kê tương ứng
3.3.8 Usecase phiếu đăng kí bán/ cho thuê bđs
Use case name Duyệt đăng ký bán/ cho thuê bất động sản
Trong kịch bản này, người quản lý có thể nhanh chóng và trực quan hoàn thành quy trình phê duyệt đăng ký cho người sử dụng Để thực hiện điều này, người dùng cần đăng nhập vào hệ thống bằng tài khoản có vai trò "admin".
“manager”, sau đó chọn mục Thống kê Brief description Duyệt đăng ký bán/ cho thuê bất động sản gồm có các tính năng chính như sau:
- Hỗ trợ người quản lý xem danh sách các bất động sản/ dự án đã được đăng ký nhưng chê được phê duyệt lên trang chủ
- Hỗ trợ người quản lý phê duyệt các bđs/ dự án đã được đăng ký
Related use cases Đăng nhập
Preconditions Role của tài khoản đăng nhập phải là “admin” hoặc “manager”
Post conditions Hiển thị trang thông tin phê duyệt và danh sách các dự án/ bất động sản cần phê duyệt.
Flow of events 1 Người dùng vào màn hình đăng nhập
2 Người dùng điền đầy đủ thông tin và nhấn “Đăng nhập”
3 Hệ thống kiểm tra thông tin
4 Nếu hợp lệ, người dùng sẽ được chuyển đến trang chủ admin
5 Người dùng chọn mục Duyệt tin đăng dự án/ bất động sản
6 Chọn dự án/ bất động sản cần duyệt
7 Tiến hành duyệt trạng thái cho tin đăng bất động sản/ dự án
8 Hệ thống thông báo và chuyển trạng thái dự án/ bất động sản
Thiết kế cơ sở dữ liệu
STT Tên bảng dữ liệu Diễn giải
1 User Chứa thông tin tài khoản của user và token
2 UserRole Dùng để phân quyền người dùng
5 RealEstate Quản lý thông tin banner
6 RealEstateMedia Quản lý size của mỗi sản phẩm
7 RealEstateType Quản lý danh sách collection
8 Area Quản lý quan hệ giữa product và collection
9 Project Chứa thông tin chi tiết sản phẩm
10 ProjectMedia Quản lý danh sách gender
Bảng 3: Bảng diễn giải các tables trong cơ sở dữ liệu
- Mỗi tài khoản người dùng User đều có một UserRole nhất định, điều này tạo nên yếu tố phần quyền trong hệ thống
- Mỗi RealEstate có thể có một hoặc nhiều ảnh/ video mô tả về RealEstate đó, tức là RealEstateMedia Tương tự như Project, có thể có một hoặc nhiều
- Mỗi RealEstate đều có một RealEstateType, dùng để phân loại bđs khi sắp xếp hoặc lưu trữ
In the context of the WishList feature, each user is allowed to maintain a single WishList; however, this WishList can include multiple real estate properties, establishing a many-to-many relationship with real estate Consequently, we have created the WishListRealEstate table to effectively manage this relationship.
31 cách khác, một RealEstate có thể thuộc WishList này, đồng thời cũng có thể thuộc WishList khác.
Relationship Diagram
Class Diagram
Sequence Diagram
3.7.3 Quản lí thông tin tài khoản
3.7.4 Quản lí danh sách tài khoản
3.7.5 Tìm kiếm/ tra cứu thông tin dự án/ bđs
3.7.6 Xem thông tin dự án
3.7.7 Đăng kí bán/ cho thuê nhà đất
3.7.8 Quản lí dự án bán/ cho thuê
3.7.9 Phê duyệt phiếu đăng kí bán/ cho thuê bất động sản
Activity Diagram
3.8.1 Tìm kiếm, tra cứu và xem thông tin bđs
3.8.2 Đăng kí bán/ cho thuê bđs
3.8.3 Quản lý tài khoản cá nhân
3.8.5 Thống kê danh sách bđs
THIẾT KẾ HỆ THỐNG
Môi trường phát triển
Các màn hình đã cài đặt được
4.2.2 Màn hình trang tìm kiếm – User
4.2.3 Màn hình trang chi tiết bất động sản – User
4.2.4 Màn hình trang thông tin người dùng – User
4.2.5 Màn hình trang bất động sản yêu thích – User
4.2.8 Màn hình quản lý bất động sản – Admin
4.2.9 Màn hình chi tiết bất động sản – Admin
4.2.10 Màn hình quản lý dự án – Admin
4.2.11 Màn hình chi tiết dự án – Admin
4.2.12 Màn hình quản lý danh sách thông tin tài khoản – Admin
4.2.13 Màn hình chi tiết tài khoản – Admin
4.2.15 Màn hình đăng tin bất động sản – User