2.4.1. Cơ sở dữ liệu
Hình 2.74: Cơ sở dữ liệu cuối cùng
2.4.2. Mô tả cơ sở dữ liệu
Bảng 2.28: Bảng Account
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 ID Account VARCHAR(50) Khóa chính Mã User 2 Username VARCHAR(50) Tên đăng nhập 3 Password VARCHAR(50) Mật khẩu
4 Role VARCHAR(50) Quyền
5 Name VARCHAR(50) Họ tên
6 Image VARCHAR(50) Hình ảnh
53
Bảng 2.29: Bảng MotelRoom
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 ID Room VARCHAR(50) Khóa chính Mã phòng
2 Price VARCHAR(50) Giá thuê
3 Address VARCHAR(50) Địa chỉ
4 ID Account VARCHAR(50) Khóa ngoại Mã tài khoản 5 Description VARCHAR(500) Mô tả 6 ImageList VARCHAR(50) Khóa ngoại Mã hình ảnh 7 TypeRoom VARCHAR(50) Khóa ngoại Loại phòng 8 Status VARCHAR(50) Trạng thái
9 Position VARCHAR(50) Tọa độ
Bảng 2.30: Bảng Images
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 ID Images VARCHAR(50) Khóa chính Mã hình ảnh 2 Images VARCHAR(50) File hình ảnh 3 ID Room VARCHAR(50) Khóa ngoại Mã phòng
Bảng 2.31: Bảng TypeRoom
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 IDType VARCHAR(50) Khóa chính Mã loại phòng 2 TypeName VARCHAR(50) Tên loại phòng 3 ID Room VARCHAR(50) Khóa ngoại Mã phòng
Bảng 2.32: Bảng Role
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 ID Role VARCHAR(50) Khóa chính Mã quyền 2 NameRole VARCHAR(50) Tên quyền
54
Bảng 2.33: Bảng LikeRoom
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 ID Account VARCHAR(50) Khóa chính Mã tài khoản 2 ID Room VARCHAR(50) Khóa chính Mã phòng
2.4.3. Sơ đồ màn hình (adsbygoogle = window.adsbygoogle || []).push({});
55
Chương 3: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 3.1.CÁC MÀN HÌNH GIAO DIỆN CỦA GUEST
3.1.1. Giao diện “Đăng nhập”
Thiết kế giao diện
Hình 3.1: Giao diện “Đăng nhập”
Danh sách các đối tượng
Bảng 3.1: Danh sách các đối tượng giao diện “Đăng nhập”
STT Tên Loại control Ghi chú
1 Label Đăng nhập Text 2 Khung nhập liệu số điện
thoại Edit Text
Đầu vào chuẩn theo số điện thoại, bắt đầu bằng số 0
3 Khung nhập liệu mật khẩu Edit Text Password in ra màn hình là các “*” 4 Đăng nhập Button
5 Tạo tài khoản mới Button 6 Quên mật khẩu TextView
56
Thiết kế xử lí
Hình 3.2: Đánh số các xử lý giao diện “Đăng nhập” Bảng 3.2: Danh sách các xử lý giao diện “Đăng nhập”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Validate số điện thoại Textbox số điện thoại focus out 2 Validate mật khẩu Textbox mật khẩu focus out 3 Đăng nhập Nhấn vào buttton “Đăng nhập”
4 Tạo tài khoản mới Nhấn vào button “Tạo tài khoản mới” 5 Quên mật khẩu Nhấn vào textview “Quên mật khẩu”
57
Bảng 3.3: Sơ đồ luồng – Mô tả dữ liệu giao diện “Đăng nhập”
Sơ đồ luồng dữ liệu Mô tả dữ liệu
Hình 3.3: Sơ đồ luồng dữ liệu giao diện “Đăng nhập”
D1: Thông tin đăng nhập (số điện thoại, mật khẩu). D3: Danh sách user.
D4: D1.
D6: Thông báo tài khoản không tồn tại, biểu mẫu BM_G_Login, biểu mẫu BM_U_ViewHome, biểu mẫu BM_A_ViewHome.
Thuật toán:
- Bước 1: Đưa biểu mẫu giao diện “Đăng nhập” cho người dùng thông qua D6.
- Bước 2: Nhận D1 từ Guest.
- Bước 3: Mở kết nối CSDL . (adsbygoogle = window.adsbygoogle || []).push({});
- Bước 4: Lấy danh sách các user.
- Bước 5: Kiểm tra số điện thoại và mật khẩu có tồn tại không?
+ Có: xuống bước 6.
+ Không: thông báo tài khoản không tồn tại và quay lại bước 1.
- Bước 6: Chuyển hướng Guest đến biểu mẫu BM_U_ViewHome hoặc BM_A_ViewHome.
- Bước 7: Đóng kết nối CSDL.
58
3.1.2. Giao diện “Đăng ký”
Thiết kế giao diện
Hình 3.4: Giao diện “Đăng ký”
Danh sách các đối tượng
Bảng 3.4: Danh sách các đối tượng giao diện “Đăng ký”
STT Tên Loại control Ghi chú
1 Label Đăng ký Text 2 Khung chọn hình ảnh Image 3 Khung nhập liệu tên tài
khoản Edit Text
4 Khung nhập liệu password Edit Text Password in ra màn hình là các “*” 5 Khung nhập liệu nhập lại
password Edit Text
Password in ra màn hình là các “*” 6 Khung nhập liệu tên tài
khoản Edit Text
7 Khung nhập liệu tên tài
khoản Edit Text
59
Thiết kế xử lý
Hình 3.5: Đánh số các xử lý giao diện “Đăng ký” Bảng 3.5: Danh sách các xử lý giao diện “Đăng ký”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Validate hình ảnh
2 Validate tên tài khoản Textbox username focus out 3 Validate password Textbox password focus out
4 Validate nhập lại password Textbox nhập lại password focus out 5 Validate họ và tên Textbox fullname focus out
6 Validate số điện thoại Textbox phone focus out 7 Tạo tài khoản mới Nhấn vào buttton “Đăng ký”
60 (adsbygoogle = window.adsbygoogle || []).push({});
Bảng 3.6: Sơ đồ luồng – Mô tả dữ liệu giao diện “Đăng ký”
Sơ đồ luồng dữ liệu Mô tả dữ liệu
Hình 3.6: Sơ đồ luồng dữ liệu giao diện “Đăng ký”
D1: Thông tin đăng ký (họ và tên, email, tên đăng nhập, mật khẩu, nhập lại mật khẩu, ngày sinh, hình ảnh).
D3: Danh sách user cũ. D4: D1.
D6: Thông báo đăng ký thành công hay thất bại, thông báo username đã tồn tại, biểu mẫu đăng ký tài khoản.
Thuật toán:
- Bước 1: Đưa biểu mẫu BM_G_Register cho người dùng thông qua D6. - Bước 2: Nhận D1 từ Guest.
- Bước 3: Mở kết nối CSDL.
- Bước 4: Lấy danh sách các user cũ.
- Bước 5: Kiểm tra mật khẩu và nhập lại mật khẩu có giống nhau không?
+ Có: xuống bước 6.
+ Không: thông báo mật khẩu không khớp và quay lại bước 1.
- Bước 6: Kiểm tra tài khoản có tồn tại chưa?
+ Có: thông báo tài khoản đã tồn tại và quay lại bước 1.
+ Không: xuống bước 7.
- Bước 7: Mã hoá MD5 với mật khẩu.
- Bước 8: Lưu D1 (đã mã hoá mật khẩu) xuống CSDL.
- Bước 9: Đóng kết nối CSDL.
- Bước 10: Thông báo đăng ký thành công.
61
3.1.3. Giao diện “Xem trang chủ”
Thiết kế giao diện
Hình 3.7: Giao diện “Xem trang chủ”
Danh sách các đối tượng
Bảng 3.7: Danh sách các đối tượng giao diện “Xem trang chủ”
STT Tên Loại control Ghi chú
1 Hình quảng cáo Slider 2 Nút tìm kiếm ImageButton 3 Tìm kiếm Textview 4 Nút tìm trọ gần ImageButton 5 Tìm gần Textview 6 Nút đăng bài ImageButton 7 Đăng bài Textview 8 Hình người đăng Image 9 Tên người đăng Textview 10 Nút xử lý các sự kiện ImageButton 11 Thông tin phòng trọ TextView 12 Hình ảnh phòng trọ Image 13 Nút trang chủ Icon 14 Nút tìm gần Icon 15 Nút đăng bài Icon 16 Nút tin yêu thích Icon 17 Nút thông tin tài khoản Icon
62
Thiết kế xử lý (adsbygoogle = window.adsbygoogle || []).push({});
Hình 3.8: Đánh số các xử lý giao diện “Xem trang chủ” Bảng 3.8: Danh sách các xử lý giao diện “Xem trang chủ”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Tìm kiếm trọ Khi nhấn vào ImageButton tìm trọ
2 Tìm kiếm trọ gần Khi nhấn vào ImageButton tìm trọ gần 3 Đăng bài Khi nhấn vào ImageButton đăng bài
4 Xem chi tiết phòng trọ Khi nhấn vào phòng trọ 5 Tải trang chủ Khi nhấn vàn Icon Trang chủ
63
Bảng 3.9: Sơ đồ luồng – mô tả dữ liệu giao diện xem trang chủ
Sơ đồ luồng dữ liệu Mô tả dữ liệu
Hình 3.9: Sơ đồ dữ liệu cho nghiệp vụ “Xem Trang chủ”
D1: Tín hiệu xem trang chủ.
D3: Danh sách các bài đăng từ table “MotelRoom”(Người đăng, các ảnh chụp phòng trọ, địa chỉ, giá phòng).
D6: Biểu mẫu BM_G_ViewHome, D3.
Thuật toán:
- Bước 1: Nhận tín hiệu xem trang chủ từ Guest.
- Bước 2: Mở kết nối CSDL.
- Bước 3: Lấy danh sách cái bài đăng từ table “MotelRoom”(người đăng, các ảnh chụp phòng trọ, địa chỉ, giá phòng).
- Bước 4: Đưa D6 cho GUEST.
- Bước 5: Đóng kết nối CSDL.
64
3.1.4. Giao diện “Tìm kiếm trọ gần”
Thiết kế giao diện
Hình 3.10: Giao diện “Tìm kiếm trọ gần”
Danh sách các đối tượng
Bảng 3.10: Danh sách các đối tượng của giao diện “Tìm kiếm trọ gần”
STT Tên Loại control Ghi chú
1 Danh sách khoảng cách Spiner 2 Vị trí trọ Image 3 Vị trí hiện tại Image
65
Thiết kế xử lý
Hình 3.11: Đánh số các xử lý giao diện “Tìm kiếm trọ gần” Bảng 3.11: Danh sách các xử lý giao diện “Tìm kiếm trọ gần”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú (adsbygoogle = window.adsbygoogle || []).push({});
1 Chọn khoảng cách tìm kiếm Click Spiner khoảng cách 2 Xem thông tin phòng trọ Click biểu tượng trọ
Bảng 3.12: Sơ đồ luồng – mô tả dữ liệu cho nghiệp vụ “Tìm kiếm”
Sơ đồ luồng dữ liệu Mô tả dữ liệu
Hình 3.12: Sơ đồ luồng dữ liệu cho nghiệp vụ “Tìm kiếm”
D1: Thông tin cần tìm kiếm
D3: Danh sách các phòng trọ theo từ khoá từ table MotelRoom.
D4: D1.
D6: Danh sách các phòng trọ tìm được, thông báo không tìm thấy kết quả.
66
Thuật toán:
- Bước 1: Nhận D1 từ Guest.
- Bước 2: Mở kết nối CSDL.
- Bước 3: Lấy danh sách các phòng trọ đã tìm theo thông tin nhận từ D1.
- Bước 4: Hiển thị danh sách phòng trọ, nếu không có phòng trọ nào phù hợp xuất thông báo không tìm thấy phòng trọ nào và quay về bước 1.
- Bước 5: Đóng kết nối CSDL.
- Bước 6: Kết thúc.
3.1.5. Giao diện “Tìm kiếm trọ”
Thiết kế giao diện
67
Danh sách các đối tượng
Bảng 3.13: Danh sách các đối tượng của giao diện “Tìm kiếm trọ gần”
STT Tên Loại control Ghi chú
1 Thoát Button
2 Tìm kiếm Textview 3 Nút tìm kiếm Button 4 Khoảng giá Spiner 5 Loại phòng Spiner
6 Khu vực Spiner
Thiết kế xử lý
68
Bảng 3.14: Danh sách các xử lý giao diện “Tìm kiếm trọ gần”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Thoát chế độ tìm kiếm Click Button “X” (adsbygoogle = window.adsbygoogle || []).push({});
2 Tìm kiếm phòng trọ Click Button “Tìm kiếm”
3 Chọn khoảng giá Click Spiner “Chọn khoảng giá” 4 Chọn loại phòng Click Spiner “Chọn loại phòng” 5 Chọn khu vực Click Spiner “Chọn khu vực”
Bảng 3.15: Sơ đồ luồng – mô tả dữ liệu cho nghiệp vụ “Tìm kiếm”
Sơ đồ luồng dữ liệu Mô tả dữ liệu
Hình 3.15: Sơ đồ luồng dữ liệu cho nghiệp vụ “Tìm kiếm”
D1: Thông tin cần tìm kiếm
D3: Danh sách các phòng trọ theo từ khoá từ table MotelRoom.
D4: D1.
D6: Danh sách các phòng trọ tìm được, thông báo không tìm thấy kết quả.
Thuật toán:
- Bước 1: Nhận D1 từ Guest.
- Bước 2: Mở kết nối CSDL.
- Bước 3: Lấy danh sách các phòng trọ đã tìm theo thông tin nhận từ D1.
- Bước 4: Hiển thị danh sách phòng trọ, nếu không có phòng trọ nào phù hợp xuất thông báo không tìm thấy phòng trọ nào và quay về bước 1.
- Bước 5: Đóng kết nối CSDL.
69
3.2.CÁC MÀN HÌNH GIAO DIỆN CỦA USER 3.2.1. Giao diện “Xem trang chủ”
Giống Guest
3.2.2. Giao diện “Đăng tin”
Thiết kế giao diện
Hình 3.16: Giao diện “Đăng tin”
Danh sách các đối tượng
Bảng 3.16: Danh sách các đối tượng giao diện “Đăng tin”
STT Tên Loại control Ghi chú
1 Nút thêm hình ảnh Button 2 Khung nhập liệu loại phòng trọ Spiner 3 Khung nhập liệu mô tả Edit text 4 Khung nhập liệu giá tiền Edit text 5 Khung nhập liệu vĩ độ Edit text 6 Khung nhập liệu tung độ Edit text 7 Nút chọn địa chỉ Button 8 Khung nhập liệu thành phố Spiner 9 Khung nhập liệu quận/ huyện Spiner 10 Khung nhập liệu tên đường Edit text
70
Thiết kế xử lý
Hình 3.17: Đánh số các xử lý giao diện “Đăng tin” Bảng 3.17: Danh sách các xử lý giao diện “Đăng tin”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Thêm hình ảnh Click vào Button thêm hình ảnh 2 Chọn loại phòng Click vào Spiner loại phòng (adsbygoogle = window.adsbygoogle || []).push({});
3 Chọn vị trí nhà trọ Click vào Button “Chọn vị trí trên bản đồ” 4 Chọn thành phố Click vào Spiner thành phố/ tỉnh
5 Chọn quận/ huyện Click vào Spiner quận/ huyện 6 Đăng bài Click vào button “Đăng bài ngay”
Bảng 3.18: Sơ đồ luồng - mô tả dữ liệu cho nghiệp vụ “Đăng tin”
Sơ đồ luồng dữ liệu Mô tả dữ liệu
Hình 3.18: Sơ đồ luồng - mô tả dữ liệu cho nghiệp vụ “Đăng
tin”
D1: Ngày đăng, người đăng, các ảnh phòng trọ, mô tả, giá tiền, địa chỉ.
D3: Table “MotelRoom”. D4: D1.
D6: Thông báo đăng tin thành công, thông báo thông tin không chính xác, biểu mẫu BM_U_ManagePost, BM_U_Post.
71
Thuật toán:
- Bước 1: Đưa biểu mẫu BM_U_Post cho User thông qua D6.
- Bước 2: Nhận D1 từ User.
- Bước 3: Mở kết nối CSDL.
- Bước 4: Kiểm tra CSDL có hợp lệ không?
+ Có: xuống bước 5.
+ Không: xuống bước 6.
- Bước 5: Lưu D4 xuống CSDL, Xuất thông báo “Tạo phòng trọ thành công”, chuyển đến màn hình BM_U_ManagePost.
-Bước 6: Xuất thông báo “Thông tin không chính xác” ,quay về bước 1.
- Bước 7: Đóng kết nối CSDL.
- Bước 8: Kết thúc.
3.2.3. Giao diện “Sửa phòng”
Thiết kế giao diện
72
Danh sách các đối tượng
Bảng 3.19: Danh sách các đối tượng giao diện “Sửa phòng”
STT Tên Loại control Ghi chú
1 Nút thêm hình ảnh Button 2 Danh sách hình ảnh RecycleView 3 Khung nhập liệu loại phòng trọ Spiner
4 Khung nhập liệu mô tả Edit text 5 Khung nhập giá tiền Edit text 6 Khung nhập liệu vĩ độ Edit text 7 Khung nhập liệu kinh độ Edit text 8 Nút chọn vị trí nhà trọ Button 9 Khung nhập liệu thành phố Spiner 10 Khung nhập liệu quận/ huyện Spiner 11 Khung nhập liệu tên đường Edit text 12 Nút sửa phòng Button
3.2.4. Giao diện “Tìm trọ gần” (adsbygoogle = window.adsbygoogle || []).push({});
Giống Guest
3.2.5. Giao diện “Tìm kiếm trọ”
Giống Guest
Thiết kế xử lý
Hình 3.20: Đánh số các xử lý giao diện “Sửa phòng” Bảng 3.20: Danh sách các xử lý giao diện “Sửa phòng”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Chọn hình ảnh Click vào Button thêm hình ảnh 2 Xoá ảnh Click vào Button “x”
73
4 Chọn vị trí phòng Click vào button “Chọn vị trí bản đồ” 5 Chọn thành phố Click vào Spiner thành phố
6 Chọn quận/ huyện Click vào Spiner quận/ huyện 7 Sửa phòng Click vào Button sửa phòng
Bảng 3.21: Sơ đồ luồng - mô tả dữ liệu cho nghiệp vụ “Sửa phòng”
Sơ đồ luồng dữ liệu Mô tả dữ liệu
Hình 3.21: Sơ đồ luồng dữ liệu cho nghiệp vụ “Sửa phòng”
D1: Các ảnh chụp phòng trọ, số điện thoại, mô tả, giá phòng, địa chỉ.
D3: Thông tin bài đăng cũ. D4: D1.
D6: Thông báo sửa tin thành công, biểu mẫu BM_U_ViewHome, BM_U_ManagePost.
Thuật toán:
- Bước 1: Đưa biểu mẫu BM_U_EditPost cho User.
- Bước 2: Nhận D1 từ User.
- Bước 3: Mở kết nối CSDL.
- Bước 4: Kiểm tra D1 có hợp lệ không?
+ Có: xuống bước 5.
+ Không: xuống bước 6.
- Bước 5: Cập nhật lại dữ liệu table “MotelRoom”.
+ Nếu cập thành công thì thông báo sửa tin thành công và chuyển về biểu mẫu BM_U_ViewHome hoặc BM_U_ManagePost.
74
- Bước 6: Thông báo dữ liệu không hợp lệ và quay về bước 1.
- Bước 7: Đóng kết nối CSDL.
- Bước 8: Kết thúc.
3.3.MÀN HÌNH GIAO DIỆN CỦA ADMIN 3.3.1. Giao diện “Xem trang chủ” (adsbygoogle = window.adsbygoogle || []).push({});
Giống Guest
3.3.2. Giao diện “Duyện tin”
Thiết kế giao diện
Hình 3.22: Giao diện “Duyệt tin”
Danh sách các đối tượng
Bảng 3.22: Danh sách các đối tượng giao diện “Đăng tin”
STT Tên Loại control Ghi chú
1 Phê duyệt bài viết Textview 2 Ảnh đại diện của người đăng Image 3 Tên người đăng Textview 4 Thông tin nhà trọ Textview 5 Hình ảnh nhà trọ Image 6 Icon duyệt ImageButton
7 Đồng ý Textview
8 Icon từ chối ImageButton
75
Thiết kế xử lý
Hình 3.23: Đánh số các xử lý giao diện “Duyệt tin” Bảng 3.23: Danh sách các xử lý giao diện “Sửa phòng”
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Duyệt tin Click vào ImageButton đồng ý