Hoạt động của tác nhân
1. Chọn quản lý bài đăng Phản ứng của hệ thống
2. Hiển thị thông tin 3. Thêm mới bài đăng
4. Cập nhật bài đăng 5.Xóa loại bài đăng
6.Hệ thống kiểm tra và xác nhận Bảng 2. 3: Bảng đặc tả quản lý bài đăng
Tên use case: Quản lý bài đăng Tác nhân: Admin
Chức năng use case: cho phép quản lý thêm, xóa, sửa thơng tin bài đăng. Dịng sự kiện chính:
o Admin chọn quản lý bài đăng.
o Hệ thống sẽ hiển thị thông tin của các bài đăng.
o Admin thêm bài đăng.
o Admin cập nhật bài đăng.
o Admin xóa bài đăng.
o Xóa bài đăng đồng nghĩa với việc là xóa tất cả thơng tin của loại bài đăng.
Đăng nhập Đăng ký Hình 2. 7: Biểu đồ sơ đồ ngữ cảnh 2.3.4. Mơ hình sơ đồ lớp Hình 2. 8: Mơ hình sơ đồ lớp
2.4. Xây dựng cơ sở dữ liệu 2.4.1. Bảng Category STT 1 2 3 4 5 6 2.4.2. Bảng Users STT 1 2 3 4 5 6 7
8 9 10 11 Bảng 2. 5: Bảng Users 2.4.2. Bảng Room STT 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
thuộc người dùng nào ?
CHƯƠNG 3: THIẾT KẾ PHẦN MỀM
3.1. Giao diện chương trình
3.1.1. Giao diện trang chủ
Hình 3. 1: Giao diện trang chủ
Trang chủ bao gồm :
o Navbar:
Logo, các tùy chọn Rooms(điều hướng đến tất cả phịng hiện
có), Contacts(để liên hệ với quản trị viên), Setting là phần tùy chọn đăng bài – bài đăng của tơi – thơng tin cá nhân
Hình 3. 2: Chức năng tùy chọn
Đối với người dùng là Admin thì sẽ xuất hiện Admin
Pages dành cho quản trị viên điều hướng đến trang quản lý.
Hình 3. 3: Hiển thị trang Admin khi người dùng là admin
Đối với người dùng là người dùng bình thường thì sẽ khơng
hiển thị Admin Pages.
Hình 3. 4: Khơng hiển thị trang Admin khi người dùng là user
o Banner quảng cáo.
o Chân trang.
o Danh mục
Hình 3. 5: Giao diện các danh mục
o Bài đăng khuyến nghị
Hình 3. 6: Giao diện các bài đăng khuyến nghị
Hình 3. 7: Giao diện danh mục
Khi nhấn vào từng loại sẽ hiển thị các phòng thuê thuộc loại tương ứng.
Phân trang tối đa 3 bài đăng.
Hình 3. 8: Giao diện bài đăng theo danh mục3.1.3. Giao diện các phịng th 3.1.3. Giao diện các phịng th
Hình 3. 9: Giao diện các phòng thuê
Trong giao diện này sẽ bao gồm:
o Thanh bộ lọc(filter).
Hình 3. 10: : Giao diện lọc với 1 tùy chọn
Hình 3. 12: : Giao diện lọc với 1 tùy chọn
Lọc nhiều mục tiêu.
Khi bấm nút làm mới(Refresh) sẽ làm mới bộ lọc và
danh sách các bài đăng.
o Danh sách các bài đăng.
o Phân trang.
Mặc định là trang đầu.
Hình 3. 14: Giao diện trang đầu
Hình 3. 15: Giao diện khi chuyển trang 2
Phân trang tự động đếm có bao nhiêu bài đăng và
hiển thị ra giới hạn các bài đăng ở mỗi lượt hiển thị.
Hình 3. 16: : Giao diện liên hệ, trợ giúp
Điền tên, email, và nội dung liên hệ. Chưa điền thì sẽ khơng hiển thị nút để gửi, bắt buộc phải điển tất các các ô.
Sau khi gửi, hiển thị thông báo và được gửi vào trong hộp thư của quản trị viên.
Hình 3. 18: Giao diện khi thơng báo đến admin
3.1.5. Giao diện tìm kiếm trên trang chủ
Tìm kiếm theo tiêu đề và loại phịng thuê.
Sau khi gõ từ khóa, hiển thị ở dưới danh sách tương ứng. Chọn details để xem chi tiết bài đăng.
Hình 3. 19: Giao diện tìm kiếm
Hình 3. 21: Giao diện tìm kiếm
3.1.6. Giao diện chi tiết bài đăng
Hiển thị chi tiết thông tin bài đăng. Hiển thị người dùng nào đăng bài.
Hình 3. 22: Giao diện chi tiết bài đăng
Nếu bài đăng là của người đăng nhập sẽ hiển thị tùy chọn cập nhập và xóa bài đăng.
Bắt buộc phải đăng nhập mới thực hiện các chức năng
Hình 3. 23: Giao diện khi đăng xuất khơng hiển thị cập nhật và xóa
Hình 3. 24: Giao diện khi đăng nhập có thể cập nhật và xóa
Khi bấm nút cập nhật điều hướng đến trang cập nhật. Sau khi cập nhật chuyển đến lại thông tin bài đăng.
Hình 3. 25: Giao diện cập nhật bài đăng
3.1.7. Giao diện chức năng của người dùng
Các chức năng này yêu cầu người dùng phải đăng nhập.
Tạo mới một bài đăng.
o Khi tạo bắt buộc phải nhập hết các ô dữ liệu.
o Bắt buộc chọn hình ảnh.
o Xem ở dạng danh sách.
o Phân trang với hiển thị tối đa 2 bài đăng.
Hình 3. 26: Giao diện yêu cầu người dùng phải đăng nhập
3.1.8. Giao diện đăng nhập, đăng ký
Kiểm tra tài khoản người dùng có trong database khơng . Kiểm tra mật khẩu và tài khoản có đúng khơng.
Các trường dữ liệu bắt buộc phải nhập.
Trong trường hợp đăng ký, nếu username và email đã tồn tại trong database thì hiển thị cảnh báo.
Hình 3. 28: Giao diện hiển thị hộp thoại khơng tìm thấy người dùng
Hình 3. 30: Giao diện đăng ký
Hình 3. 32: Giao diện đăng ký khi username tồn tại trong database3.1.9. Giao diện quản lý của Admin 3.1.9. Giao diện quản lý của Admin
Khi vào trang Admin pages bắt buộc phải đăng nhập nếu chưa login ở trang người dùng.
Xem được tất cả thông tin của người dùng, bao gồm cả cập nhật, xóa, sửa, tạo mới 1 người dùng.
Tạo được loại danh mục mới bao gồm cả thêm, xóa ,sửa.
Xem được tất cả thông tin của các bài đăng, bao gồm cả cập nhật, xóa, sửa, tạo mới 1 phịng th.
Vì là quản trị viên nên có thể xóa được bài đăng của người dùng khác.
Hình 3. 34: Giao diện các danh mục
3.1.10. Một số giao diện khác
Khi người dùng nhập sai điều hướng trang thì web tự động điều hướng đến trang khơng tìm thấy.
Khi người cố gắng truy cập vào trang quản lý Quản trị viên, tự động điều hướng đến trang cảnh báo.
Hình 3. 36: Giao diện khơng tìm thấy trang
CHƯƠNG 4: TỔNG KẾT
Sau 03 tháng thực hiện nghiên cứu đề tài, dưới sự hướng dẫn tận tình của thầy Bùi Phú Khuyên, đồ án của em đã đạt được những kết quả sau:
4.1. Kết quả đạt được
Tìm hiều và biết cách sử dụng cơ sở dữ liệu MongoDB. Tìm hiều và biết cách sử dụng cơng nghệ React JS.
Tìm kiểu, nắm bắt được kĩ thuật sự dụng NodeJS và Mongoose kết nối với cơ sở d
ữliệu MongoDB để tạo ra cách thức xử lí dữ liệu theo thời gian
thực. Xây dựng được website với các chức năng như trên phân tích.
4.2. Mặt hạn chế
Trong thời gian qua, em đã cố gắng hết sức để tìm hiểu thực hiện đề tài. Tuy nhiên với ki nh nghiệm và thời gian hạn chế nên không thể tránh khỏi những thiếu sót trong đồ án. Cụ thể:
Phần giao diện vẫn cịn chưa được đẹp mắt.
Database còn yếu, truy vấn, các mối quan hệ trong MongoDB cịn khá kém.
Vì là cơng nghệ mới, thời gian và trình độ cịn hạn chế cho nên hệ thống xây dựng trong đồ án chỉ dừng ở mức cơ bản. Do đó nếu muốn áp dụng vào thực tiến thì phả i cần có thời gian, kiến thức nâng cao và cơng sức để hồn thiện.
4.3. Hướng phát triển
Xây dựng một phần mềm quản lý toàn diện bao gồm việc mua bán, trao đổi, tìm kiếm các mặt hàng, thiết bị điện tử, dịch vụ…..
Cung cấp cho người dùng thơng tin cần thiết khi muốn tìm kiếm trao đổi dịch vụ, mặt hàng trên website.
Tài Liệu Tham Khảo 1. https://nodejs.org/en/docs/ 2. https://mongoosejs.com/docs/api.html 3. https://reactjs.org/docs/getting-started.html 4. https://expressjs.com/ 5. https://react-bootstrap.github.io/ 6. https://react-icons.github.io/react-icons/ 7. https://dashboard.emailjs.com/