Thiết kế giao diện...863.1 Thiết kế giao diện cho các use case...863.1.1Giao diện use case Đăng nhập Phạm Xuân Thành...863.1.1.1Hình dung màn hình...863.1.1.2 Biểu đồ lớp màn hình...86
Mô tả chức năng
Biểu đồ use case
1.1.1 Các use case phần front end Đăng nhập: Cho phép người dùng đăng nhập tài khoản cá nhân trên trang web Đổi mật khẩu: Cho phép người dùng đổi mật khẩu của khách hàng Đăng kí: Cho phép người dùng đăng kí một tài khoản mới
Cập nhật thông tin cá nhân: Cho phép người dùng cập nhật thông tin mới của tài khoản khách hàng
Xem giỏ hàng: Cho phép người dùng xem thông tin của các mặt hàng trong giỏ hàng Đặt hàng: Cho phép người dùng đặt hàng (mua) sản phẩm
Xem đơn hàng: Cho phép người dùng xem đơn hàng
Tìm kiếm sản phẩm: Cho phép người dùng tìm kiếm sản phẩm
Xem thông tin sản phẩm: Cho phép người dùng xem thông tin sản phẩm Đăng xuất: Cho phép người dùng đăng xuất tài khoản người dùng
Tìm kiếm cửa hàng: Cho phép người dùng tìm kiếm cửa hàng của trang web
Thêm vào giỏ hàng: Cho phép người dùng thêm mặt hàng mà khách hàng chọn vào giỏ hàng
1.1.2 Các use case phần back end
Quản Lý Tài Khoản: Cho phép người quản trị xem, sửa trạng thái, xóa thông tin trong bảng TAIKHOAN Đăng nhập: Cho phép người quản trị đăng nhập hệ thống trang web với cấp quyền cao nhất trong bảng TAIKHOAN
Bảo trì cửa hàng: Cho phép người quản trị xem thêm, sửa, xóa thông tin trong bảng CUAHANG
Bảo trì sản phẩm: Cho phép người quản trị xem, thêm, sửa, xóa thông tin trong bảng SANPHAM
Quản Lý đơn hàng: Cho phép người quản trị xem và sửa đơn hàng trong bảng
Quản lí giỏ hàng: Cho phép người quản trị xem, sửa trạng thái, xóa thông tin trong bảng
Quản Lý Danh Sách Cửa Hàng: CHo phép người quản trị xem,thêm, sửa, thông tin của cửa hàng trên web trong bảng Cua_Hang
Bảo trì Danh mục: Cho phép người quản trị xem, thêm, sửa, xóa thông tin trong bảng DANHMUC
Mô tả use case
1.2.1 Mô tả use case Đăng Nhập (Phạm Xuân Thành)
● Mô tả vắn tắt: Use case cho phép người dùng đăng nhập vào trang chủ canifa.
● Luồng sự kiện: o Luồng cơ bản:
1 Use case này bắt đầu khi người dùng nhấn vào biểu tượng người dùng ở góc trên bên phải màn hình Hệ thống sẽ hiển thị bảng đăng nhập lên màn hình.
2 Hệ thống yêu cầu nhập số điện thoại để nhận mã OTP Người dùng nhập số điện thoại và nhấn “Tiếp tục”.
3 Hệ thống kiểm tra số điện thoại bằng cách lấy thông tin từ bảng KHACHHANG và gửi OTP về số điện thoại nếu số điện thoại hợp lệ Người dùng nhập đúng OTP nhận được ở điện thoại và nhấn nút “Xác nhận” -> Đăng nhập thành công. o Luồng rẽ nhánh:
1 Số điện thoại sai: Tại bước 2 trong luồng cơ bản, nếu người dùng nhập sai số điện thoại thì hệ thống sẽ hiển thị thông báo “Số điện thoại không đúng định dạng” Người dùng có thể chọn quay về luồng cơ bản để nhập lại, hoặc bỏ qua thao tác khi đó use case kết thúc.
2 Mã OTP sai: Tại bước 3 trong luồng cơ bản, nếu người dùng nhập sai mã OTP thì hệ thống sẽ hiển thị thông báo “Mã OTP không đúng” Người dùng có thể chọn quay về luồng cơ bản để nhập lại, hoặc bỏ qua thao tác khi đó use case kết thúc.
● Các yêu cầu đặc biệt:
1.2.2 Mô tả use case Đăng Ký (Phạm Xuân Thành)
● Mô tả vắn tắt: Use case cho phép người dùng đăng nhập vào trang chủ canifa.
● Luồng sự kiện: o Luồng cơ bản:
1 Use case này bắt đầu khi người dùng chọn “Khách hàng mới” ở giao diện đăng nhập Hệ thống sẽ hiển thị bảng đăng ký tài khoản lên màn hình.
2 Hệ thống yêu cầu nhập số điện thoại của khách hàng Người dùng nhập số điện thoại và nhấn “Tiếp tục”.
3 Hệ thống kiểm tra số điện thoại và gửi OTP về số điện thoại.
Người dùng nhập đúng OTP nhận được ở điện thoại và nhấn nút
“Xác thực” -> Đăng nhập thành công o Luồng rẽ nhánh:
1 Số điện thoại sai: Tại bước 2 trong luồng cơ bản, nếu người dùng nhập sai số điện thoại thì hệ thống sẽ hiển thị thông báo “Số điện thoại không đúng định dạng” Người dùng có thể chọn quay về luồng cơ bản để nhập lại, hoặc bỏ qua thao tác khi đó use case kết thúc.
2 Mã OTP sai: Tại bước 3 trong luồng cơ bản, nếu người dùng nhập sai mã OTP thì hệ thống sẽ hiển thị thông báo “Mã OTP không đúng” Người dùng có thể chọn quay về luồng cơ bản để nhập lại, hoặc bỏ qua thao tác khi đó use case kết thúc.
● Các yêu cầu đặc biệt:
1.2.3 Mô tả use case Đăng Nhập - Admin (Phạm Xuân Thành)
● Mô tả vắn tắt: Use case cho phép người quản trị đăng nhập vào trang chủ Canifa.
● Luồng sự kiện: o Luồng cơ bản:
1 Use case này bắt đầu khi người quản trị nhấn vào biểu tượng người quản trị ở góc trên bên phải màn hình Hệ thống sẽ hiển thị bảng đăng nhập lên màn hình.
2 Hệ thống yêu cầu nhập tên đăng nhập và mật khẩu Người quản trị nhập tên đăng nhập, mật khẩu và nhấn nút “Login”.
3 Hệ thống kiểm tra tên đăng nhập và mật khẩu của admin -> Đăng nhập thành công -> Hiển thị màn hình admin. o Luồng rẽ nhánh:
1 Số điện thoại sai: Tại bước 2 trong luồng cơ bản, nếu người quản trị nhập sai tên đăng nhập hoặc mật khẩu thì hệ thống sẽ hiển thị thông báo “Thông tin đăng nhập không chính xác” Người quản trị có thể chọn quay về luồng cơ bản để nhập lại, hoặc bỏ qua thao tác khi đó use case kết thúc.
● Các yêu cầu đặc biệt:
1.2.4 Mô tả use case Quản lý tài khoản - Admin (Phạm Xuân
● Mô tả vắn tắt: Use case này cho phép người dùng thêm, sửa, xóa thông tin tài khoản
● Luồng sự kiện: o Luồng cơ bản:
1 Use case này bắt đầu khi người dùng chọn “Quản lý tài khoản Hệ thống sẽ hiển thị ra danh sách các tài khoản trong database và các chức năng (Thêm, Sửa, Xóa).
2 Thêm tài khoản: a Người quản trị kích vào nút “Thêm mới” trên cửa sổ danh sách tài khoản Hệ thống hiển thị màn hình yêu cầu nhập thông tin chi tiết cho tài khoản gồm Mã tài khoản, Họ tên, Số điện thoại, Email, Ngày sinh. b Người quản trị nhập thông tin Mã tài khoản, Họ tên, Số điện thoại, Email, Ngày sinh và kích nào nút “Tạo” Hệ thống sẽ sinh ra 1 mã tài khoản mới trong bảng Tai_Khoan và hiển thị danh sách của tài khoản đã được cập nhật.
3 Sửa thông tin tài khoản: a Người quản trị kích vào nút “Sửa” trên một dòng tài khoản Hệ thống sẽ lấy thông tin cũ của tài khoản được chọn gồm: Mã tài khoản, Họ tên, Số điện thoại, Email, Ngày sinh từ bảng Tai_Khoan và hiển thị lên màn hình b Người quản trị nhập thông tin mới cho Mã tài khoản, Họ tên, Số điện thoại, Email, Ngày sinh và kích vào nút “Cập nhật” Hệ thống sẽ sửa thông tin của tài khoản được chọn trong bảng Tai_Khoan và hiển thị danh sách Tài khoản đã cập nhật.
4 Xóa tài khoản: a Người quản trị kích vào nút “Xóa” trên một dòng tài khoản Hệ thống sẽ hiển thị một màn hình yêu cầu xác nhận xóa b Người quản trị kích vào nút “Đồng ý” Hệ thống sẽ xóa tài khoản được chọn ra khỏi bảng Tai_Khoan và hiển thị danh sách Tài khoản đã cập nhật.
Use case kết thúc. o Luồng rẽ nhánh:
1 Tại bước 2b hoặc 3b trong luồng cơ bản nếu người quản trị nhập thông tin tài khoản không hợp lệ thì hệ thống sẽ hiển thị thông báo lỗi yêu cầu nhập lại Người quản trị có thể nhập lại để tiếp tục hoặc kích vào nút “Hủy bỏ” để kết thúc.
2 Tại bước 2b hoặc 3b trong luồng cơ bản nếu người quản trị kích vào nút “Hủy bỏ” hệ thống sẽ bỏ qua thao tác thêm mới hoặc sửa chữa tương ứng và hiển thị danh sách các Tai_Khoan.
3 Tại bước 4b trong luồng cơ bản nếu người quản trị kích vào nút
“Không đồng ý” hệ thống sẽ bỏ qua thao tác xóa và hiển thị danh sách các sản phẩm trong bảng Tai_Khoan.
4 Tại bất kì thời điểm nào trong quá trình thử nghiệm use case nếu không kết nối được với cơ sở dữ liệu thì hệ thống hiển thị 1 thông báo lỗi và use case kết thúc.
● Các yêu cầu đặc biệt:
- Use case này chỉ cho phép một số vai trò như người quản trị, người chủ hệ thống thực hiện.
- Người quản trị cần đăng nhập với vai trò quản trị hệ thống trước khi có thể thực hiện use case.
- Nếu use case kết thúc thành công thì thông tin về sản phẩm sẽ được cập nhập trong cơ sở dữ liệu.
1.2.5 Mô tả use case Tìm Kiếm Sản Phẩm (Bùi Việt Hoàng)
● Mô tả vắn tắt: Use case cho phép người dùng tìm kiếm sản phẩm trên trang chủ canifa.
● Luồng sự kiện: o Luồng cơ bản:
Phân tích use case
Phân tích các use case
2.1.1 Phân tích use case Đăng Nhập (Phạm Xuân Thành)
2.1.1.2 Biểu đồ lớp phân tích
2.1.2 Phân tích use case Đăng Ký (Phạm Xuân Thành)
2.1.2.2 Biểu đồ lớp phân tích
2.1.3 Phân tích use case Đăng Nhập - Admin (Phạm Xuân
2.1.3.2 Biểu đồ lớp phân tích
2.1.4 Phân tích use case Quản Lý Tài Khoản (Phạm Xuân
2.1.4.2 Biểu đồ lớp phân tích
2.1.5 Phân tích use case Cập nhật thông tin cá nhân (Trần
2.1.5.2 Biểu đồ lớp phân tích
2.1.6 Phân tích use case Thêm vào giỏ hàng (Trần Hùng
2.1.6.2 Biểu đồ lớp phân tích
2.1.7 Phân tích use case Đặt hàng (Trần Hùng Cường)
2.1.7.2 Biểu đồ lớp phân tích
2.1.8 Phân tích use case Bảo trì cửa hàng (Trần Hùng Cường)
2.1.8.2 Biểu đồ lớp phân tích
2.1.9 Phân tích use case bảo trì sản phẩm (Trần Hùng Cường)
2.1.9.2 Biểu đồ lớp phân tích
2.1.10 Phân tích use case Tìm Kiếm Sản Phẩm (Bùi Việt Hoàng)
2.1.10.2Biểu đồ lớp phân tích
2.1.11 Phân tích use case Tìm Kiếm Cửa Hàng (Bùi Việt Hoàng)
2.1.11.2Biểu đồ lớp phân tích
2.1.12 Phân tích use case Quản Lý Đơn Hàng (Bùi Việt
2.1.12.2Biểu đồ lớp phân tích
2.1.13 Phân tích use case Quản Lý Giỏ Hàng (Bùi Việt Hoàng)
2.1.13.2Biểu đồ lớp phân tích
2.1.14 Phân tích use case Xem Đơn Hàng (Nguyễn Đức Thắng)
2.1.14.2 Biểu đồ lớp phân tích
2.1.15 Phân tích use case Xem Giỏ Hàng (Nguyễn Đức Thắng)
2.1.15.2 Biểu đồ lớp phân tích
2.1.16 Phân tích use case Xem Thông Tin Sản Phẩm (Nguyễn Đức Thắng)
2.1.16.2 Biểu đồ lớp phân tích
2.1.17 Phân tích use case Quản Lý Danh Sách Cửa Hàng
2.1.18 Phân tích use case Bảo Trì Danh Mục (Nguyễn Đức
Các biểu đồ tổng hợp
2.2.1 Biểu đồ các lớp Entity của hệ thống
2.2.2 Biểu đồ các lớp phân tích của hệ thống
2.2.2.1 Bi u đồồ các l p phân tích c a nhóm use case chính ể ớ ủ
2.2.2.2 Bi u đồồ các l p phân tích c a nhóm use case use ể ớ ủ case th câấp ứ
(from Quan li don hang)
(from Mo hinh phan tich_admin)
QuanlytaikhoanController (from Mo hinh phan tich_admin)
QuanLyDonHangController (from Quan li don hang)
(from Mo hinh phan tich_admin)
Chương 3 Thiết kế giao diện
Thiết kế giao diện cho các use case
3.1.1 Giao diện use case Đăng nhập (Phạm Xuân Thành)
3.1.1.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.2 Giao diện use case Đăng ký (Phạm Xuân Thành)
3.1.2.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.3 Giao diện use case Đăng nhập - Admin (Phạm Xuân
3.1.3.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.4 Giao diện use case Quản lý tài khoản - Admin (Phạm
3.1.4.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.5 Giao diện use case Cập nhật thông tin cá nhân (Trần
3.1.5.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.6 Giao diện use case Thêm vào giỏ hàng (Trần Hùng
3.1.6.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.7 Giao diện use case Đặt hàng (Trần Hùng Cường)
3.1.7.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.8 Giao diện use case Bảo trì cửa hàng (Trần Hùng Cường)
3.1.8.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.9 Giao diện use case Bảo trì sản phẩm (Trần Hùng Cường)
3.1.9.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.10 Giao diện use case Tìm Kiếm Sản Phẩm (Bùi Việt Hoàng)
3.1.10.3Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.11 Giao diện use case Tìm Kiếm Cửa Hàng (Bùi Việt
3.1.11.3Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.12 Giao diện use case Quản Lý Đơn Hàng (Bùi Việt Hoàng)
3.1.12.3Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.13 Giao diện use case Quản Lý Giỏ Hàng (Bùi Việt Hoàng)
3.1.13.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.14 Giao diện use case Xem Đơn Hàng (Nguyễn Đức Thắng)
3.1.14.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.15 Giao diện use case Xem Giỏ Hàng (NguyễnĐứcThắng)
3.1.15.3 Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.16 Giao diện use case Xem Thông Tin Sản Phẩm
3.1.16.3Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.17 Giao diện use case Quản Lý Danh Sách Cửa Hàng
3.1.17.3Bi u đồồ c ng tác c a các màn hình ể ộ ủ
3.1.18 Giao diện use case Bảo Trì Danh Mục (Nguyễn Đức
3.1.18.3Bi u đồồ c ng tác c a các màn hình ể ộ ủ
Các biểu đồ tổng hợp
3.2.1 Biểu đồ điều hướng màn hình của nhóm use case chính