Bài tập lớn Công Nghệ Web - Nhóm 23

1. Tên đề tài: Website về dịch vụ nhà đất (ở thành phố Đà Nẵng)

2. Thành viên:
- Nguyễn Thị Hồng Diễm
- Nguyễn Phương Hà
- Lê Nguyễn Yến Nhi
- Tô Phan Thùy Phương
3. Mô tả đề tài:
- Đề tài gồm có các chức năng sau:
Phân quyền Admin và User
 Cả 2 phân quyền đều có chức năng đăng nhập. User có thêm chức năng đăng
ký. Mỗi user đăng nhập vào và sử dụng các chức năng của riêng phân quyền đó
● Phân quyền User
+ Lọc, tìm kiếm các bài viết nhà đất theo Quận/Huyện, Diện tích, Giá và
Hướng
+ Xem chi tiết các bài đăng về dịch vụ nhà đất đã tìm kiếm (Ảnh, đặc
điểm bất động sản, mô tả chi tiết và thông tin liên hệ môi giới)
+ Đăng bài viết
+ Quản lý bài viết: Xem bài viết đã đăng (được kiểm duyệt, bị từ chối
kiểm duyệt, chưa được kiểm duyệt), Xóa bài viết và Chỉnh sửa bài
viết
+ Cập nhật mật khẩu
● Phân quyền Admin
+ Kiểm duyệt các bài viết mà user đã đăng
- Mục tiêu hướng đến:
● Nền tảng thông tin đầy đủ: Xây dựng một nền tảng trực tuyến cung cấp thông
tin đầy đủ về thị trường nhà đất, bao gồm thông tin về nhà đất đang được
bán, giá cả, diện tích, hướng ở thành phố Đà Nẵng, và hướng đến phát triển
trên phạm vi cả nước trong tương lai
● Tăng trải nghiệm người dùng, giúp người dùng thuận tiện trong việc liên lạc
với môi giới đất đai nhà cửa
● Thông tin chi tiết và đáng tin cậy: Các bài viết được đăng lên đều phải qua
quá trình kiểm duyệt của Admin
- Phạm vi đề tài:
● Khu vực thành phố Đà Nẵng
4. Mô tả giao diện
a) Giao diện mặc định lúc chưa đăng nhập
● Màn hình hiển thị danh sách các bài viết mà môi giới đã đăng để bán và đã
được kiểm duyệt

Hình 1: Giao diện mặc định lúc chưa đăng nhập

● Lọc theo Quận/Huyện

Ở hình này đang được lọc theo quận Sơn Trà

Hình 2: Giao diện kết quả sau khi lọc

b) Giao diện xem chi tiết bài viết đã tìm kiếm

Hình 3: Giao diện xem chi tiết bài viết đã tìm kiếm

User muốn thực hiện được chức năng Đăng bài viết thì cần phải đăng nhập, nếu
chưa có tài khoản thì cần đăng ký tài khoản mới.
c) Giao diện đăng nhập
● Trường hợp người dùng nhập thiếu thông tin. Màn hình sẽ hiển thị lỗi: “Vui
lòng điền đầy đủ thông tin vào các trường”

Hình 4: Giao diện đăng nhập (thiếu thông tin)

 ● Trường hợp người dùng nhập sai thông tin (username hoặc password). Màn
hình sẽ hiển thị lỗi: “Tài khoản hoặc mật khẩu không đúng!” và Reset lại
trường mật khẩu là rỗng.

Hình 5: Giao diện đăng nhập (sai thông tin)

Sau khi đăng nhập thành công thì tùy theo phân quyền thì sẽ được thực hiện các chức năng
của phân quyền đó.
Với trường hợp chưa có tài khoản thì người dùng có thể đăng ký tài khoản mới.
d) Giao diện đăng ký
● Trường hợp người dùng nhập thiếu thông tin. Màn hình sẽ hiển thị lỗi: “Vui
lòng điền đầy đủ thông tin vào các trường”

Hình 6: Giao diện đăng ký tài khoản (thiếu thông tin)

 ● Trường hợp người dùng nhập username đã tồn tại, màn hình sẽ thông báo
“Tên username đã tồn tại.”

Hình 7: Giao diện đăng ký tài khoản (đã tồn tại username)

 Nếu người dùng nhập đầy đủ thông tin và username chưa tồn tại thì tài khoản sẽ
được đăng ký thành công và chuyển hướng đến trang đăng nhập
❖ Phân quyền user
a) Giao diện xem bài viết (đã đăng nhập)
● Các chức năng tương tự như khi chưa đăng nhập: xem danh sách các bài
viết và sử dụng chức năng lọc để tìm kiếm

Hình 8: Giao diện xem toàn bộ bài viết

b) Giao diện đăng bài viết mới
● User cần nhập đầy đủ các thông tin bắt buộc tất cả các trường rồi mới có thể
Upload
● Ở trường Giá thì lúc người dùng nhập số tiền thì theo sự kiện onChange (số
tiền chi tiết sẽ được thay đổi tương ứng)
● Sau khi đăng bài viết, bài viết ở trạng thái chưa kiểm duyệt và cần phải đợi
admin đồng ý kiểm duyệt mới có thể xuất hiện trên trang chủ

Hình 9: Giao diện đăng bài viết

c) Các chức năng của user

● Gồm các chức năng của user: quản lý bài viết, thay đổi mật khẩu, và đăng
xuất

Hình 10: Các chức năng của user

d) Giao diện quản lý bài viết
● User có thể xem danh sách các bài viết đã đăng, với các trạng thái bài viết:
bài viết đã kiểm duyệt thành công, bài viết kiểm duyệt thất bại, bài viết chưa
được kiểm duyệt

Hình 11: Giao diện quản lý bài viết

e) Giao diện xem chi tiết bài viết

● User có thể xem chi tiết bài viết khi chọn Xem với bài viết cần xem trong giao
diện quản lý bài viết

Hình 12: Giao diện xe chi tiết bài viết

f) Giao diện chỉnh sửa bài viết

● User có thể chỉnh sửa bài viết khi chọn Sửa với bài viết cần chỉnh sửa trong
giao diện quản lý bài viết, sau đó thực hiện các thay đổi thông tin bài viết
 Hình 13: Giao diện chỉnh sửa bài viết

● Sau khi chọn Update nếu có bất kỳ trường nào trống, sẽ hiện thông báo nhập
thiếu trường, ngược lại, màn hình hiển thị thông báo “Bạn có chắc chắn
muốn cập nhật bài viết này không”, user cần chọn OK để đồng ý cập nhật bài
viết
 ● Giao diện sau khi chỉnh sửa bài viết

Hình 14: Giao diện sau khi chỉnh sửa bài viết

g) Giao diện xóa bài viết

● User có thể xóa bài viết khi chọn Xóa với bài viết cần xóa trong giao diện
quản lý bài viết
● Sau khi chọn Xóa, màn hình hiển thị thông báo, user cần chọn OK để đồng ý
xóa bài viết

Hình 15: Giao diện xóa bài viết

 ● Giao diện sau khi xóa bài viết

Hình 16: Giao diện sau khi xóa bài viết

h) Giao diện cập nhật mật khẩu

● Trường hợp nhập thiếu trường
Khi user nhập thiếu một trong hai trường và nhấn “Change Password”
Màn hình sẽ hiển thị lỗi “Vui lòng nhập đầy đủ thông tin vào các trường mật
khẩu”, yêu cầu người dùng nhập lại

Hình 17: Giao diện cập nhật mật khẩu (thiếu thông tin)

● Trường hợp nhập mật khẩu mới không khớp

Khi user nhập đầy đủ hai trường nhưng mật khẩu nhập lại không chính xác
và nhấn “Change Password”
 Màn hình sẽ hiển thị lỗi “Mật khẩu nhập lại không chính xác” , yêu cầu người
dùng nhập lại

Hình 18: Giao diện cập nhật mật khẩu (không khớp)

● Trường hợp mật khẩu hiện tại không chính xác

Khi user nhập đầy đủ hai trường nhưng mật khẩu hiện tại không chính xác và
nhấn “Change Password”
Màn hình sẽ hiển thị lỗi “Mật khẩu hiện tại không chính xác” , yêu cầu người
dùng nhập lại

Hình 19: Giao diện cập nhật mật khẩu (mật khẩu sai)
 ● Trường hợp thay đổi mật khẩu thành công
Khi user nhập đầy đủ hai trường và đúng có nghĩa là đã thay đổi mật khẩu
thành công

Hình 20: Giao diện cập nhật mật khẩu thành công

❖ Phân quyền admin

a) Giao diện chính của admin
● Giao diện hiển thị danh sách các bài viết chưa được kiểm duyệt, ở đây admin
có quyền xem chi tiết bài viết, duyệt hoặc hủy bài viết

Hình 21: Giao diện chính phía admin

b) Giao diện admin xem chi tiết bài viết
● Thông tin bài viết chưa được kiểm duyệt được hiển thị chi tiết, admin có thể
chọn Deny để hủy bài viết hoặc chọn Accept để đồng ý kiểm duyệt

Hình 22: Giao diện admin xem chi tiết bài viết