6. Bố cục báo cáo
4.2.LƯỢC ĐỒ TUẦN TỰ (SEQUENCE DIAGRAM)
4.2.1. Chức năng đăng nhập
36
4.2.2. Đăng ký
37
4.2.3. Đăng xuất
38
4.2.4. Tìm và lọc nhà trọ
39
4.2.5. Đăng trọ
40
4.2.6. Xem nhà trọ trên bản đồ
41
4.2.7. Sửa thông tin cá nhân
42
4.2.8. Sửa thông tin nhà trọ
43
4.2.9. Xem chi tiết nhà trọ
44
4.2.10. Thống kê nhà trọ (Admin và Super Admin)
Hình 1. 25: Hình ảnh Sequence diagram thống kê nhà trọ
4.2.11. Thống kê User (Admin và Super Admin)
45
4.2.12. Duyệt bài đăng (Admin và Super Admin)
Hình 1. 27: Hình ảnh Sequence diagram duyệt bài đăng
4.2.13. Xóa bài đăng (Admin và Super Admin)
46
4.2.14. Xóa user (Admin và Super Admin)
Hình 1. 29: Hình ảnh Sequence diagram xóa user
4.2.15. Đăng nhập (Admin và Super Admin)
47
4.2.16. Đăng xuất (Admin và Super Admin) (adsbygoogle = window.adsbygoogle || []).push({});
Hình 1. 31: Hình ảnh Sequence diagram đăng xuất
4.2.17. Sửa thông tin cá nhân (Admin và Super Admin)
48
4.2.19. Thêm Admin (Super Admin)
Hình 1. 33: Hình ảnh Sequence diagram thêm admin
4.2.20. Xóa Admin (Super Admin)
49
4.3. Lược đồ cơ sở dữ liệu (CSDL) 4.3.1. Hình ảnh CSDL 4.3.1. Hình ảnh CSDL
50
4.3.2. Giải thích CSDL 4.3.2.1. Bảng tbl_user
Tên thuộc tính Kiểu Mô tả
idUser int(11) Mã User
Username varchar(50) Tên đăng nhập
Password varchar(50) Mật khẩu đăng nhập
Bảng 1. 5: Bảng tbl_user
4.3.2.2. Bảng tbl_userinfor
Tên thuộc tính Kiểu Mô tả
idUser Int(11) Mã người dùng
Ho Varchar(10) Họ người dùng
Ten Varchar(10) Tên người dùng
NgaySinh Date Ngày sinh của người dùng
DiaChi Longtext Địa chỉ người dùng
Quan Int(11) Mã quận
Thanhpho Int(11) Mã thành phố
Sdt Varchar(13) số điện thoại của người dùng
photo Varchar(200) Địa chỉ hình ảnh đại diện của người dùng
51
4.3.2.3. Bảng tbl_thanhpho
Tên thuộc tính Kiểu Mô tả
idThanhpho int(11) Mã thành phố (adsbygoogle = window.adsbygoogle || []).push({});
Tenthanhpho varchar(50) Tên Thành Phố
Bảng 1. 7: Bảng tbl_thanhpho
4.3.2.4. Bảng tbl_quan
Tên thuộc tính Kiểu Mô tả
idQuan int(11) Mã quận
Tenquan varchar(50) Tên Quận
Bảng 1. 8: Bảng tbl_quan
4.3.2.5. Bảng tbl_qlnhatro
Tên thuộc tính Kiểu Mô tả
Idqlnhatro Int(11) Mã quản lý nhà trọ
idUser Int(11) Mã user
idNhatro Int(11) Mã nhà trọ
Bảng 1. 9: Bảng tbl_qlnhatro
4.3.2.6. Bảng tbl_nhatro
Tên thuộc tính Kiểu Mô tả idNhatro Int(11) Mã nhà trọ
Tenchutro Varchar(60) Tên của chủ nhà trọ Sdt Varchar(13) Số điện thoại của chủ trọ
52 Diachi Longtext Địa chỉ
idQuan Int(11) Mã quận
idThanhpho Int(11) Mã Thành Phố
LocalX Double Tọa độ nhà trọ theo X LocalY Double Tọa độ nhà trọ theo Y
Date Date Ngày đăng bài
state Int(11) Trạng thái của phòng trọ (còn phòng hoặc hết phòng)
Title Text Tiêu đề bài đăng
Bảng 1. 10: Bảng tbl_nhatro
4.3.2.7. Bảng tbl_hinhanh
Tên thuộc tính Kiểu Mô tả
idHinhanh Int(11) Mã hình ảnh
idNhaTro int(11) Mã nhà trọ
Hinhanh Text Đường dẫn hình ảnh nhà trọ
Bảng 1. 11: Bảng tbl_hinhanh (adsbygoogle = window.adsbygoogle || []).push({});
4.3.2.8. Bảng tbl_danhgia
Tên thuộc tính Kiểu Mô tả
idDanhgia Int(11) Mã đánh giá
idNguoidung Int(11) Mã người dùng
53
Vote Int(11) Đánh giá sao cho nhà trọ
Bảng 1. 12: Bảng tbl_danhgia
4.3.2.9. Bảng tbl_chitietnt
Tên thuộc tính Kiểu Mô tả idNhatro Int(11) Mã nhà trọ
Dientich Double Diện tích phòng trọ Phong Int(11) Số phòng của nhà trọ
Nhavesinh Int(11) Số lượng nhà vệ sinh của nhà trọ Mota Longtext Mô tả khái quát về nhà trọ
Gia Double Giá nhà trọ
Maylanh Int(11) Có máy lạnh hay không Giuxe Int(11) Có bãi giữ xe hay không Nuocnong Int(11) Có nước nóng hay không
Dien Int(11) Giá tiền điện
Nuoc Int(11) Giá tiền nước
Loainha Varchar(45) Loại nhà trọ ( nguyên căn, nhà trọ, chung cư….)
Wifi Int(11) Có wifi hay không
Gio Int(11) Giờ giấc có tự do hay không Chungchu Int(11) Có ở chung với chủ hay không
54
4.3.2.10. Bảng tbl_bl_nhatro
Tên thuộc tính Kiểu Mô tả
idBl_Nhatro Int(11) Mã Bl_Nhatro
idBinhluan Int(11) Mã Bình Luận
idNhatro Int(11) Mã nhà trọ
Bảng 1. 14: Bảng tbl_bl_nhatro
4.3.2.11. Bảng tbl_bl_nguoidung
Tên thuộc tính Kiểu Mô tả
idBl_Nguoidung int(11) Mã của bảng Bl_Nguoidung
idBinhluan int(11) Mã bình luận
idNguoidung int(11) Mã người dùng (adsbygoogle = window.adsbygoogle || []).push({});
Bảng 1. 15: Bảng tbl_bl_nguoidung
4.3.2.12. Bảng tbl_binhluan
Tên thuộc tính Kiểu Mô tả
idBinhluan int(11) Mã của bảng bình luận
Noidung Longtext Nội dung bình luận
Date Date Ngày bình luận
Bảng 1. 16: Bảng tbl_binhluan
4.3.2.13. Bảng tbl_admin
Tên thuộc tính Kiểu Mô tả
55
Username Varchar(45) Tên đăng nhập
Password Varchar(45) Mật khẩu đăng nhập
Phanquyen Int(11) Phân quyên admin
Bảng 1. 17: Bảng tbl_admin
4.3.2.14. Bảng tbl_admininfor
Tên thuộc tính Kiểu Mô tả
idAdmin Int(11) Mã Admin
Ten Varchar(60) Tên Admin
NgaySinh Date Ngày Sinh Admin
DiaChi Longtext Địa chỉ Admin
idQuan Int(11) Mã quận
idThanhpho Int(11) Mã thành phố
Sđt varchar(13) Số điên thoại
56
CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 5.1. GIAO DIỆN USER
5.1.1. Giao diện Home
Hình 1. 36: Hình ảnh giao diện Home
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Hiển thị nhà trọ trên bản đồ (adsbygoogle = window.adsbygoogle || []).push({});
57
2 Tìm kiếm ImageVIew Đi đến màn hình tìm kiếm
3 Đăng phòng ImageView Nếu đã đăng nhập thì đi đến màn hình đăng phòng
Nếu chưa đăng nhập thì yêu cầu người dùng đăng nhập
4 Lọc nhà trọ theo quận
ImageView Đi đến màn hình tìm kiếm và hiển thị danh sách nhà trọ theo quận đã chọn
5 Xem chi tiết nhà trọ
View Đi đến màn hình chi tiết nhà trọ
6 Chuyển sang tab tìm kiếm
BottomNavigation Đi đến màn hình tìm kiếm
7 Chuyển sang tab cá nhân
BottomNavigation Đi đến màn hình cá nhân
58
5.1.2. Giao diện tìm kiếm
Hình 1. 37: Hình ảnh giao diện tìm kiếm
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Tìm kiếm theo địa chỉ đã nhập
SearchView
Tìm nhà trọ theo địa chỉ đã nhập
59
2 Lọc ImageButton Hiển thị dialog lọc
3 Xem chi tiết nhà trọ View Đi đến màn hình chi tiết nhà trọ
4 Chuyển sang tab màn hình chính
BottomNavigation Đi đến màn hình home
5 Chuyển sang tab trang cá nhân
BottomNavigation Đi đến màn hình cá nhân
60
5.1.3. Giao diện cá nhân
Hình 1. 38: Hình ảnh giao diện cá nhân (adsbygoogle = window.adsbygoogle || []).push({});
Mô tả chi tiết:
STT Tên xử lý Kiểu đối
tượng
Diễn giải
1 Đăng nhập TextView Đi đến màn hình đăng nhập
61 3 Xem những phòng đã
đăng
TextView Đi đến màn hình quản lý phòng trọ
4 Sửa thông tin cá nhân TextView Đi đến màn hình sửa thông tin cá nhân
5 Đổi mật khẩu TextView Đi đến màn hình đổi mật khẩu
6 Đăng xuất TextView Đi đến màn hình đăng xuất
Bảng 1. 21: Bảng mô tả chi tiết giao diện cá nhân
5.1.4. Giao diện chi tiết nhà trọ
62
Hình 1. 39: Hình ảnh giao diện chi tiết nhà trọ
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Chỉ đường đến nhà trọ MenuItem Mở Google map chỉ đường đến nhà trọ
2 Hiển thị dialog chọn cách liên lạc
MenuItem Hiển thị dialog chọn cách liên lạc
3 Bình luận EditText Bình luận vào bài viết
4 Đánh giá RatingBar Đánh giá bài viết
5 Chọn cách liên lạc SingleChoiceList Chọn cách liên lạc 6 Xác nhận cách liên lạc TextView Xác nhận cách liên lạc
63
5.1.5. Giao diện bản đồ
Hình 1. 40: Hình ảnh giao diện bản đồ
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Tìm kiếm SearchView Tìm kiếm nhà trọ theo địa chỉ đã nhập
64 3 Hiển thị thông tin nhà (adsbygoogle = window.adsbygoogle || []).push({});
trọ
Marker Hiển thị thông tin nhà trọ
4 Xem chi tiết nhà trọ InfoWindowMarker Đi đến màn hình chi tiết nhà trọ 5 Xem vị trí hiện tại FloatingActionButton Di chuyển map đến vị trí hiện tại
Bảng 1. 23: Bảng mô tả chi tiết giao diện bản đồ
5.1.6. Giao diện lọc
65
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Xoá lọc Button Xoá bộ lọc
2 Lọc Button Áp dụng lọc
Bảng 1. 24: Bảng mô tả chi tiết giao diện lọc
5.1.7. Giao diện đăng trọ
66
Mô tả:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Đăng trọ MenuItem Đăng trọ
2 Chọn địa chỉ Button Chọn địa chỉ trên bản đồ
3 Chọn hình ảnh Image Chọn hình ảnh
Bảng 1. 25: Bảng mô tả chi tiết giao diện đăng trọ
5.1.8. Giao diện xem nhà trọ đã đăng
67
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Xem chi tiết nhà trọ View Đi đến màn hình sửa nhà trọ
Bảng 1. 26: Bảng mô tả chi tiết giao diện đăng nhà trọ
5.1.9. Giao diện sửa nhà trọ
68
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Sửa trọ MenuItem Sửa trọ (adsbygoogle = window.adsbygoogle || []).push({});
Bảng 1. 27: Bảng mô tả chi tiết giao diện sửa nhà trọ
5.1.10. Giao diện đăng nhập
69
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Đăng nhập Button Đăng nhập vào hệ thống
2 Quên mật khẩu TextView Đi đến màn hình quên mật khẩu 3 Đăng nhập bằng google Button Đăng nhập bằng google
4 Đăng ký ImageView Đi đến màn hình đăng ký
Bảng 1. 28: Bảng mô tả chi tiết giao diện đăng nhập
5.1.11. Giao diện quên mật khẩu
70
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng
Diễn giải
1 Lấy mã xác nhận
Button Gửi email chứa mã xác nhận đến người dùng
2 Xác nhận Button Nếu mã xác nhận đúng thì đi đến màn hình đổi mật khẩu
Nếu mã xác nhận sai thì thông báo mã sai
Bảng 1. 29: Bảng mô tả chi tiết giao diện quên mật khẩu
5.1.12. Giao diện đổi mật khẩu
71
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng
Diễn giải
1 Đổi mật khẩu
Button Đổi mật khẩu nếu mật khẩu cũ đúng và 2 mật khẩu mới trùng nhau
Bảng 1. 30: Bảng mô tả chi tiết giao diện đổi mật khẩu
5.1.13. Giao diện đặt mật khẩu mới
72
Mô tả chi tiết: (adsbygoogle = window.adsbygoogle || []).push({});
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Đặt mật khẩu Button Đặt mật khẩu mới cho tài khoản
Bảng 1. 31: Bảng mô tả chi tiết giao diện đặt lại mật khẩu
5.1.14. Giao diện đăng ký
73
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Chọn avatar ImageView Mở thư viện chọn hình ảnh 2 Chọn ngày sinh ImageButton Mở dialog chọn ngày
3 Đăng ký Button Đăng ký user
Bảng 1. 32: Bảng mô tả chi tiết giao diện đăng ký
5.1.15. Giao diện danh sách tin nhắn
74
Mô tả chi tiết:
STT Tên xử lý Kiểu đối
tượng
Diễn giải
1 Tìm kiếm người dùng MenuItem Hiển thị thanh tìm kiếm, tìm kiếm người dùng
2 Tạo tin nhắn mới MenuItem Tạo tin nhắn mới 3 Xem danh sách người
dùng
MenuItem Xem danh sách người dùng đã nhắn gần đây
4 Xem lại tin nhắn View Đi đến màn hình nhắn tin
Bảng 1. 33: Bảng mô tả chi tiết giao diện xem danh sách tin nhắn
5.1.16. Giao diện xem tin nhắn
75
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Gọi video MenuItem Gọi video
2 Gửi tin nhắn Image Gửi tin nhắn
3 Gửi hình ảnh Image Mở thư viện để chọn hình ảnh gửi
Bảng 1. 34: Bảng mô tả chi tiết giao diện xem tin nhắn (adsbygoogle = window.adsbygoogle || []).push({});
5.1.17. Giao diện nhận cuộc gọi
76
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Từ chối cuộc gọi ImageView Từ chối cuộc gọi
2 Trả lời cuộc gọi ImageView Trả lời cuộc gọi
Bảng 1. 35: Bảng mô tả chi tiết giao diện nhận cuộc gọi
5.1.18. Giao diện gọi
77
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Điều chỉnh khung hình ImageVIew Điều chỉnh khung hình
2 Tắt micro ImageView Tắt micro
3 Tắt camera ImageView Tắt camera
4 Kết thúc cuộc gọi ImageView Kết thúc cuộc gọi
5 Chia sẻ màn hình ImageView Chia sẻ màn hình
6 Thay đổi camera ImageView Thay đổi camera
Bảng 1. 36: Bảng mô tả chi tiết giao diện gọi
5.2. GIAO DIỆN ADMIN 5.2.1. Giao diện đăng nhập 5.2.1. Giao diện đăng nhập
78
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Nhập username Textbox Dùng để nhập tên đăng nhập 2 Nhập password Textboxx Dùng để nhập mật khẩu
3 Đăng nhập Button Click vào để đăng nhập vào trang web
Bảng 1. 37: Bảng mô tả chi tiết giao diện đăng nhập Admin
5.2.2. Giao diện trang chủ
Hình 1. 55: Hình ảnh giao diện trang chủ Admin
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Trở về trang chủ Link Điều chỉnh về lại trang chủ (adsbygoogle = window.adsbygoogle || []).push({});
79
5.2.3. Giao diện sửa đổi thông tin
Hình 1. 56: Hình ảnh giao diện sửa thông tin Admin
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng
Diễn giải
1 Nhập tên admin Textbox Dùng để nhập tên của admin 2 Nhập ngày sinh Textbox Dùng để nhập ngày sinh 3 Chọn quận Selectbox Dùng để lựa chọn quận 4 Nhập số điện thoại Textbox Dùng nhập số điện thoại 5 Nhập địa chỉ Textbox Dùng nhập địa chỉ 6 Chọn thành phố Selectbox Dùng để chọn thành phố 7 Lưu thông tin thay
đổi
Button Dùng để lưu thông tin thay đổi xuống CSDL
80
5.2.4. Giao diện quản lý nhà trọ
Hình 1. 57: Hình ảnh giao diện quản lý nhà trọ Admin
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Tìm kiếm Textbox Tìm kiếm những dữ liệu nhập vào
2 Hủy bài Button Hủy bài đăng
3 Xóa bài Button Xóa bài đăng
81
5 Chuyển trang Button Chuyển về trang sau
Bảng 1. 40: Bảng mô tả chi tiết giao diện quản lý nhà trọ Admin
5.2.5. Giao diện quản lý User
Hình 1. 58: Hình ảnh giao diện quản lý user Admin
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Tìm kiếm Textbox Tìm kiếm những dữ liệu nhập vào
2 Phân dữ liệu Selectbox Chọn hiển thị số lượng dữ liệu theo mong muốn
3 Xóa bài Button Xóa User
4 Phân trang Button Chuyển về trang trước 5 Phân trnag Button Chuyển về trang sau
82
5.2.6. Giao diện quản lý Admin (adsbygoogle = window.adsbygoogle || []).push({});
Hình 1. 59: Hình ảnh giao diện quản lý admin SuperAdmin
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải
1 Tìm kiếm Textbox Tìm kiếm những dữ liệu nhập vào
2 Phân dữ liệu Selectbox Chọn hiển thị số lượng dữ liệu theo mong muốn
3 Xóa bài Button Xóa User
4 Phân trang Button Chuyển về trang trước 5 Phân trang Button Chuyển về trang sau 6 Thêm admin Button Thêm admin
83
5.2.7. Giao diện thêm Admin
Hình 1. 60: Hình ảnh giao diện thêm admin SuperAdmin
Mô tả chi tiết:
STT Tên xử lý Kiểu đối tượng Diễn giải