CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ
3.1 Phân tích yêu cầu bằng UML
3.1.4 Tình huống hoạt động
Bảng 3.3 Đặc tả use case UC01_Đăng nhập Use case: UC01_Đăng nhập
Mục đích: Cho phép thành viên và admin đăng nhập vào hệ thống và thực hiện những chức năng theo đúng phân quyền của mình.
Mô tả: Hệ thống phân quyền chức năng đăng nhập thành 2 nhóm người dùng: thành viên và admin. Người dùng cần phải đăng nhập để sử dụng được những chức năng theo đúng phân quyền của mình.
Tác nhân: Thành viên và admin.
Điều kiện trước: Người dùng đã có tài khoản trong hệ thống.
Điều kiện sau: Đăng nhập thành công thì hệ thống sẽ cho phép thành viên và admin vào hệ thống thực hiện những chức năng.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Chọn chức năng đăng nhập.
3. Bắt đầu nhập tài khoản và mật khẩu.
4. Nhấn nút “Đăng nhập”
hoặc nhấn “enter” trên bàn phím.
2. Hiển thị giao diện đăng nhập.
5. Hiển thị thông báo “Đăng nhập thành công” và chuyển đến màn hình chức năng theo đúng phân quyền.
Luồng sự kiện phụ: 4.1. Nếu dữ liệu tài khoản và mật khẩu không đúng định dạng hoặc không tồn tại trong cơ sở dữ liệu thì hệ thống hiển thị thông báo “Đăng nhập không thành công”, quay lại bước 2.
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 18
Hình 3.2. Acivity diagram UC01_Đăng nhập
act Activity_DangNhap
Hệ thống Người dùng
Chọn chức năng đăng nhập Bắt đầu
Hiển thị giao diện đăng nhập
Bắt đầu nhập tài khoản và mật khẩu
Nhấn nút "Đăng nhập"
hoặc "enter" trên bàn phím
Kiểm tra dữ liệu
Hiển thị thông báo “Đăng nhập thành công”
Kết thúc Hiển thị thông báo "Đăng
nhập không thành công"
FALSE
TRUE
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 19
Hình 3.3. Sequence diagram UC01_Đăng nhập 2. UC02_Đăng ký thành viên
Bảng 3.4 Đặc tả use case UC02_Đăng ký tài khoản Use case: UC02_Đăng ký tài khoản
Mục đích: Đăng ký tài khoản để truy cập
Mô tả: Use case mô tả việc người dùng đăng ký tài khoản để trở thành thành viên.
Tác nhân: Khách vãng lai.
Điều kiện trước: Ở giao diện đăng nhập.
sd Sequence_DangNhap
Tác nhân
GUI_Admin GUI_TrangChu GUI_DangNhap account.js Account
alt KiemTraDuLieuNhap [Không hợp lệ]
[Hợp lệ]
loop
alt KiemTraTonTaiAccount [account === null]
[account !== null]
loop
alt KiemTraPhanQuyen [account.roles === 1]
[account.roles === 2]
Nhập lại
account: Account
Đăng nhập không thành công
dbAccount.findOne(): Account
/ /login
/admin
validateInput()
Hiển thị thông báo lỗi
callAPI(account/login-local) Nhập tài khoản và mật khẩu
Nhấn nút “Đăng nhập” hoặc nhấn “enter” trên bàn phím
Nhập lại
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 20
Điều kiện sau: Đăng ký thành viên thành công và lưu thông tin thành viên xuống cơ sở dữ liệu.
Luồng sự kiện chính Người dùng Hệ thống
1. Chọn chức năng đăng ký tài khoản.
3. Nhập thông tin để tiến hành đăng ký.
4. Chọn nút “Đăng ký”.
2. Hiển thị giao diện đăng ký.
5. Kiểm tra thông tin người dùng đăng ký.
6. Thông báo “Đăng ký tài khoản thành công”
và lưu thông tin thành viên xuống cơ sở dữ liệu.
Luồng sự kiện ngoại lệ
6.1. Hệ thống thông báo thông tin nhập không hợp lệ và yêu cầu người dùng nhập lại.
4.1. Nếu tài khoản đã tồn tại trong cơ sở dữ liệu thì hệ thống hiển thị thông báo “Tài khoản đã tồn tại” và quay lại bước 3.
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 21
Hình 3.4. Acivity diagram UC02_Đăng ký tài khoản
act activivi_RegisterAccount
Hệ thống Tác nhân
chọn chức năng đăng ký tài khoản bắt đầu
hiển thị giao diện đăng ký
nhập thông tin để tiến hành đăng ký
nhấn nút "Đăng ký" kiểm tra thông tin người dùng
đăng ký
thông báo đăng ký thành công và lưu thông tin thành
viên xuống cơ sở dữ liệu thông báo thông tin nhập không
hợp lệ
kết thúc hợp lệ
yêu cầu nhập lại
không hợp lệ
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 22
Hình 3.5. Sequence diagram UC02_Đăng ký tài khoản 3. UC03_Tìm kiếm địa điểm
Bảng 3.5 Đặc tả use case UC03_Tìm kiếm địa điểm Use case: UC03_Tìm kiếm địa điểm
Mục đích: Cho phép khách vãng lai, thành viên, admin tìm kiếm chi tiết thông tin địa điểm.
sd Sequence_DangKyThanhVien
Tác nhân
GUI_DangNhap GUI_DangKyTaiKhoan account.js Account
alt KiemTraDuLieuNhap [Không hợp lệ]
[Hợp lệ]
loop
alt KiemTraTrungTaiKhoan [account.username === username]
[account.username !== username]
/sign-up /login
Hiển thị thông báo “Đăng ký tài khoản thành công”
Thông báo thông tin nhập không hợp lệ Nhấn nút "Đăng ký"
Nhập lại
callAPI(account/add)
dbAccount.save(): Account validateInput()
Hiển thị thông báo "Tài khoản đã tồn tại"
account:Account Nhập thông tin đăng ký
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 23
Mô tả: Người dùng có thể tìm kiếm thông tin địa điểm bằng cách nhập từ khóa vào ô tìm kiếm với những từ khóa là các trường dữ liệu thông tin địa điểm như: tên địa điểm, tên điểm đến du lịch.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Truy cập vào giao diện có ô tìm kiếm thông tin địa điểm.
Điều kiện sau: Tìm kiếm thành công thì hệ thống sẽ hiển thị thông tin địa điểm trên màn hình.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Tiến hành nhập từ khóa địa điểm cần tìm vào ô tìm kiếm thông tin địa điểm.
2. Nhấn nút “Tìm kiếm”.
3. Hiển thị thông tin địa điểm lên màn hình thành công.
Luồng sự kiện phụ: 2.1. Nếu nhập từ khóa vào ô tìm kiếm không có trong cơ sở dữ liệu của hệ thống thì hệ thống hiển thị thông báo “Không tìm thấy”.
2.2 Nếu nhập từ khóa vào ô tìm kiếm là rỗng thì hệ thống sẽ hiển thị danh sách các địa điểm lên màn hình.
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 24
Hình 3.6. Activity diagram UC03_Tìm kiếm địa điểm
act Activity_TimKiemDiaDiem
Hệ thống Người dùng
Bắt đầu
Tiến hành nhập từ khóa địa điểm cần tìm vào ô tìm kiếm thông tin địa điểm
Nhấn nút "Tìm kiếm"
Kiểm tra dữ liệu
Hiển thị thông tin địa điểm lên màn hình thành công
Hiển thị thông báo
“Không tìm thấy”
Kết thúc Hợp lệ
Không hợp lệ
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 25
Hình 3.7. Sequence diagram UC03_Tìm kiếm địa điểm 4. UC04_Xem danh sách địa điểm du lịch
Bảng 3.6 Đặc tả use case UC04_Xem danh sách địa điểm du lịch Use case: UC04_Xem danh sách địa điểm du lịch
Mục đích: Cho phép khách vãng lai, thành viên, admin xem danh sách địa điểm trong hệ thống.
Mô tả: Người dùng xem danh sách các địa điểm có trong hệ thống bao gồm các thông tin như: khu vực, các điểm đến du lịch.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Không có.
sd Sequence_TimKiemDiaDiem
Tác nhân
GUI_DanhSachDiaDiem place.js Place
alt KiemTraDanhSach [place === null]
[place !== null]
Nhập từ khóa địa điểm cần tìm
place:Place dbPlace.find(): Place Nhấn nút “Tìm kiếm”
Hệ thống hiển thị thông tin địa điểm lên màn hình /place
Hệ thống hiển thị thông báo “Không tìm thấy”
callAPI(place/search=:info)
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 26
Điều kiện sau: Hệ thống hiển thị danh sách các địa điểm có trong cơ sở dữ liệu của hệ thống ra màn hình.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Chọn chức năng xem danh sách địa điểm.
2. Hiển thị danh sách các địa điểm ra màn hình.
Luồng sự kiện phụ: Không có.
Hình 3.8. Activity diagram UC04_Xem danh sách địa điểm du lịch
sd Sequence_XemDanhSachDiaDiemDuLich
Tác nhân
GUI_DanhSachDiaDiem place.js Place
Hiển thị danh sách các địa điểm callAPI(place/list-place)
dbPlace.find(): Place listPlace:Place /place
act Activity_XemDanhSachDiaDiem
Hệ thống Người dùng
Bắt đầu
Chọn chức năng xem danh sách địa điểm
Hiển thị danh sách các địa điểm ra màn hình
Kết thúc
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 27
Hình 3.9. Sequence diagram UC04_Xem danh sách địa điểm du lịch 5. UC05_Xem chi tiết thông tin địa điểm
Bảng 3.7 Đặc tả use case UC05_Xem chi tiết thông tin địa điểm Use case: UC05_Xem chi tiết thông tin địa điểm
Mục đích: Cho phép khách vãng lai, thành viên, admin xem chi tiết thông tin một địa điểm được chọn trong hệ thống.
Mô tả: Người dùng có thể xem thông tin chi tiết các địa điểm trong hệ thống bao gồm các thông tin như: mô tả, lượt đánh giá, các hình ảnh về địa điểm đó.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Đã thực hiện UC04_Xem danh sách địa điểm du lịch.
Điều kiện sau: Hệ thống hiển thị chi tiết thông tin một địa điểm được chọn ra màn hình.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Nhấn vào địa điểm cần xem chi tiết thông tin.
2. Lấy thông tin của địa điểm được chọn để xem chi tiết thông tin địa điểm.
3. Hiển thị chi tiết thông tin địa điểm được chọn ra màn hình.
Luồng sự kiện phụ: Không có.
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 28
Hình 3.10. Activity diagram UC05_Xem chi tiết thông tin địa điểm
Hình 3.11. Sequence diagram UC05_Xem chi tiết thông tin địa điểm 6. UC06_Tìm kiếm sản phẩm
Bảng 3.8 Đặc tả use case UC06_Tìm kiếm sản phẩm Use case: UC06_Tìm kiếm sản phẩm
Mục đích: Tìm thông tin sản phẩm có trong hệ thống.
sd Sequence_XemChiTietThongTinDiaDiem
Tác nhân
GUI_XemChiTietDiaDiem place.js Place
GUI_DanhSachDiaDiem
Hiển thị chi tiết thông tin địa điểm /place/:id
/place
callAPI(place/:id)
place:Place dbPlace.findById(): Place act Activity_XemChiTietThongTinDiaDiem
Hệ thống Người dùng
Bắt đầu
Nhấn vào địa điểm cần xem chi tiết thông tin
Lấy thông tin của địa điểm được chọn
Hiển thị chi tiết thông tin địa điểm được chọn ra
màn hình Kết thúc
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 29
Mô tả: Use case thực hiện việc tìm kiếm sản phẩm có trong hệ thống bằng cách nhập tên hoặc thông tin của sản phẩm để tìm kiếm.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Truy cập giao diện có hiển thị ô tìm kiếm sản phẩm.
Điều kiện sau: Hiển thị sản phẩm ra màn hình.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Nhập thông tin cần tìm vào ô tìm kiếm.
2. Chọn nút “Tìm kiếm”.
3. Tìm kiếm sản phẩm theo thông tin đã nhập có hay không.
4. Hiển thị sản phẩm ra màn hình.
Luồng sự kiện phụ: 4.1. Hệ thống thông báo không tìm thấy sản phẩm.
Hình 3.12. Activity diagram UC06_Tìm kiếm sản phẩm
act ac_SP_TimSanPham
Hệ thống Tác nhân
nhập thông tin cần tìm vào ô tìm kiếm bắt đầu
nhấn nút "Tìm kiếm" tìm kiếm sản phẩm theo
thông tin đã nhập
hiển thị sản phẩm ra màn hình thông báo không tìm thấy
kết thúc có
không
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 30
Hình 3.13. Sequence diagram UC06_Tìm kiếm sản phẩm 7. UC07_Xem danh sách sản phẩm
Bảng 3.9 Đặc tả use case UC07_Xem danh sách sản phẩm Use case: UC07_Xem danh sách sản phẩm
Mục đích: Hiển thị ra danh sách sản phẩm để cho người dùng.
Mô tả: Use case thực hiện việc hiển thị danh sách sản phẩm có trong cơ sở dữ liệu lên giao diện người dùng.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Truy cập vào trang web.
sd Sequence_TimKiemSanPham
Tác nhân
GUI_DanhSachSanPham product.js Product
alt KiemTraDanhSach [product === null]
[product !== null]
callAPI(product/search=:info)
Hệ thống hiển thị thông báo "Không tìm thấy"
Nhập từ khóa sản phẩm cần tìm
dbProduct.find(): Product /product
product:Product
Hệ thống hiển thị thông tin sản phẩm lên màn hình Nhấn nút "Tìm kiếm"
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 31
Điều kiện sau: Hiện ra danh sách sản phẩm trong cơ sở dữ liệu.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Chọn danh mục xem danh sách sản phẩm.
2. Hiển thị ra danh sách sản phẩm ra màn hình.
Luồng sự kiện phụ: Không có.
Hình 3.14. Activity diagram UC07_Xem danh sách sản phẩm
Hình 3.15. Sequence diagram UC07_Xem danh sách sản phẩm 8. UC08_Xem thông tin sản phẩm
Bảng 3.10 Đặc tả use case UC08_Xem thông tin sản phẩm
sd Sequence_XemDanhSachSanPham
Tác nhân
GUI_DanhSachSanPham product.js Product
dbProduct.find(): Product
product:Product callAPI(product)
Hiển thị danh sách các sản phẩm /product
act ac_SP_XemDanhSachSP
Tác nhân Hệ thống
bắt đầu
chọn danh mục xem danh sách sản phẩm
hiển thị ra danh sách sản phẩm ra màn hình
kết thúc
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 32
Use case: UC08_Xem thông tin sản phẩm
Mục đích: Xem thông tin chi tiết của sản phẩm.
Mô tả: Thực hiện việc hiển thị thông tin của sản phẩm để người dùng xem.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Truy cập vào giao diện có sản phẩm cần xem thông tin chi tiết
Điều kiện sau: Hiển thị thông tin chi tiết sản phẩm.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Chọn vào sản phẩm muốn xem thông tin.
2. Hiển thị thông tin chi tiết sản phẩm lên giao diện.
Luồng sự kiện phụ: Không có.
Hình 3.16. Activity diagram UC08_Xem thông tin sản phẩm
act ac_SP_XemChiTietSanPham
Tác nhân Hệ thống
bắt đầu
chọn sản phẩm muốn xem thông tin
hiển thị thông tin chi tiết sản phẩm lên giao diện
kết thúc
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 33
Hình 3.17. Sequence diagram UC08_Xem thông tin sản phẩm 9. UC09_Xem danh sách bài đăng
Bảng 3.11 Đặc tả use case UC09_Xem danh sách bài đăng Use case: UC09_Xem danh sách bài đăng
Mục đích: Xem những bài đăng mà các thành viên đã đăng trên trang web.
Mô tả: Use case thực hiện việc hiển thị những bài đăng mà các thành viên đã đăng trên trang web cho người dùng xem.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Không có.
Điều kiện sau: Hiển thị danh sách bài đăng đã được admin duyệt.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Truy cập vào trang cộng đồng.
2. Hiển thị danh sách bài đăng đã được admin duyệt.
Luồng sự kiện phụ: Không có.
sd Sequence_XemThongTinDiaDiem
Tác nhân
GUI_DanhSachSanPham GUI_XemChiTietSanPham product.js Product
product:Product /product
Hiển thị chi tiết thông tin sản phẩm callAPI(product/:id)
dbProduct.findById(): Product /product/:id
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 34
Hình 3.18. Activity diagram UC09_Xem danh sách bài đăng
Hình 3.19. Sequence diagram UC09_Xem danh sách bài đăng 10. UC09.1_Xem nội dung bình luận
Bảng 3.12 Đặc tả use case UC09.1_Xem nội dung bình luận Use case: UC09.1_Xem nội dung bình luận
Mục đích: Xem những bình luận về bài viết.
act ac_UC09_BD_XemDanhSachBaiDang
Tác nhân Hệ thống
bắt đầu
vào trang cộng đồng sẽ hiển thị danh sách bài đăng
đã được admin duyệt
kết thúc
sd Sequence_XemDanhSachBaiDang
Tác nhân
GUI_CongDong post.js Post
Hiển thị danh sách bài đăng đã được admin duyệt
post:Post /newfeed
dbPost.find(): Post callAPI(post)
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 35
Mô tả: Use case thực hiện việc hiện ra những nội dung bình luận của bài đăng mà người dùng muốn xem.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Ở giao diện có bài đăng.
Điều kiện sau: Hiện ra các nội dung bình luận của bài đăng.
Luồng sự kiện chính:
Người dùng Hệ thống
1. Nhấn nút “Xem thêm”
trong bài đăng.
2. Hiển thông tin bài đăng và các nội dung bình luận về bài đăng.
Luồng sự kiện phụ: Không có.
Hình 3.20. Activity UC09.1_Xem nội dung bình luận
act ac_UC09.1_BD_XemNoiDungBinhLuan
Tác nhân Hệ thống
bắt đầu
nhấn nút ‘Xem thêm’ trong bài đăng
hiển thông tin bài đăng và các nội dung bình luận về bài đăng
Kết thúc
Báo cáo khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm
Phạm Thanh Duy - 16043751
Trịnh Đức Duy - 16018731 36
Hình 3.21. Sequence diagram UC09.1_Xem nội dung bình luận 11. UC10.1_Xem danh sách giỏ hàng
Bảng 3.13 Đặc tả use case UC10.1_Xem danh sách giỏ hàng Use case: UC10.1_Xem danh sách giỏ hàng.
Mục đích: Cho phép người dùng thực hiện việc xem giỏ hàng sau khi chọn mua sản phẩm.
Mô tả: Người dùng xem danh sách tất cả các sản phẩm mà người dùng đã thêm vào trong giỏ hàng.
Tác nhân: Khách vãng lai, thành viên và admin.
Điều kiện trước: Truy cập vào giao diện có hiển thị giỏ hàng.
Điều kiện sau: Hiển thị danh sách sản phẩm trong giỏ hàng ra màn hình thành công.
Luồng sự kiện Người dùng Hệ thống
sd se_UC09.1_XemNoiDungBL
Tác nhân
GUI_CongDong GUI_ChiTietBaiDang post.js Post
hiển thị nội dung chi tiết bài đăng nhấn nút ‘Xem thêm’
callAPI(post/:id) /post-detail/:id
dbPost.findById(id): Post
post