Gợi ý các từ khóa liên quan Điều kiện sau Khách xem được kết quả tìm kiếm 3.Xem chi tiết sản phẩm Tên use case Xem chi tiết sản phẩm Mô tả Cho phép khách xem thông tin chi tiết của một s
Trang 1Môn học: Công Nghệ Phần Mềm.
Giảng viên giảng dạy: Nguyễn Trung Kiệt.
Nhóm 9
Thành viên: Huỳnh Văn Khá - 2224802010318
Nguyễn Thanh Liêm - 2224802010267Trần Đại Nghĩa - 2224802010857Huỳnh Văn Sang - 2224802010365
Đồ án Đăng kí: Xây dựng website bán thức ăn và phụ kiện cho thú cưng BÀI TẬP CHƯƠNG 4
Trang 2Mục lục
Hình 1 : Hình 1: Mô hình MVC 4
Hình 2 : Giao diện quản lý sản phẩm của Admin 5
Hình 3 : Giao diện quản lý đơn hàng của Admin 6
Hình 4 : Giao diện quản lý tài khoản người dùng của Admin 6
Hình 5 : Giao diện giỏ hàng 7
Hình 6 : Giao diện thanh toán 8
Hình 7 : Giao diện lọc sản phẩm 9
Hình 8 : Sơ đồ Database Diagram 10
Hình 9 : Sơ đồ Class Diagram 11
Hình 10 : Use case Diagram cho Khách 12
Hình 11 : Use case Khách hàng 15
Hình 12 : UC Quản lý tài khoản 18
Hình 13 : UC Quản lý sản phẩm 18
Hình 14 : UC Quản lý danh mục 19
Hình 15 : UC Quản lý đơn hàng 19
Hình 16 : UC Quản lý khuyến mãi 20
Hình 17 : UC Quản lý đánh giá 20
Hình 18 : UC Quản lý người dùng 20
Hình 19 : Đăng ký 25
Hình 20 : Đăng nhập 26
Hình 21 : Tím kiếm sản phẩm 26
Hình 22 : Tím kiếm sản phẩm 27
Hình 23 : Đánh giá sản phẩm 28
Hình 24 : Thanh toán đơn hàng 29
Hình 25 : Xem lịch sử đơn hàng 30
Hình 26 : Đánh giá sản phẩm 31
Hình 27 : Quản lý sản phẩm (cho admin) 32
Hình 28 : Quản lý danh mục (cho admin) 33
Hình 29 : Quản lý đơn hàng (cho admin) 34
Hình 30 : Quản lý người dùng(cho admin) 35
Hình 31 : Quản lý khuyến mãi(cho admin) 36
Hình 32 : Quản lý Review khách hàng (cho admin) 37
Hình 33 : Đăng ký 38
Hình 34 : Đăng nhập 38
Hình 35 : Tìm kiếm sản phẩmTìm kiếm sản phẩm 39
Hình 36 : Thêm sản phẩm vào giỏ hàng 39
Hình 37 : Thanh toán đơn hàng 40
Hình 38 : Quản lý review (cho người dùng) 41
Hình 39 : Quản lý review (cho admin) 42
Hình 40 : Quản lý sản phẩm (cho admin) 43
Hình 41 : Đánh giá sản phẩm 44
Hình 42 : Xem lịch sử đơn hàng 45
Hình 43 : Quản lý danh mục(admin) 46
Hình 44 : Quản lý đơn hàng(admin) 47
Hình 45 : Quản lý người dùng(admin) 48
Hình 46 : Quản lý khuyến mãi(admin) 49
Trang 3- Xóa sản phẩm: Loại bỏ sản phẩm khỏi danh sách bán.
phẩm
- Theo dõi lịch sử: Ghi lại thông tin người tạo và người cập nhậtcuối cùng cho mỗi sản phẩm
- Phân loại sản phẩm:
- Tạo danh mục mới: Ví dụ như chó, mèo, thỏ, hamster
website
- Quản lý thương hiệu:
- Thêm thương hiệu mới: Nhập tên, logo, mô tả về thương hiệu
- Chỉnh sửa thông tin thương hiệu: Cập nhật thông tin khi cần
- Xóa thương hiệu: Loại bỏ thương hiệu khỏi hệ thống
- Liên kết sản phẩm: Gán sản phẩm cho thương hiệu tương ứng
- Quản lý nhân viên:
- Tạo tài khoản mới: Thêm thông tin nhân viên, cấp tài khoản đăngnhập
quyền quản lý sản phẩm, quản lý đơn hàng)
- Chỉnh sửa thông tin: Cập nhật thông tin cá nhân, vai trò của nhânviên
Trang 4- Vô hiệu hóa tài khoản: Tạm ngưng hoặc xóa tài khoản nhân viênkhi cần.
- Xem đánh giá: Theo dõi tất cả đánh giá của khách hàng
- Duyệt đánh giá: Chấp nhận hoặc từ chối đánh giá trước khi hiểnthị công khai
- Phản hồi đánh giá: Trả lời các đánh giá của khách hàng
- Xóa đánh giá: Loại bỏ các đánh giá không phù hợp
❖Đối với Khách hàng:s
- Tìm kiếm và xem sản phẩm:
- Tìm kiếm theo tên, loại, giống thú cưng
- Lọc sản phẩm theo giá, tuổi, kích thước
- Xem thông tin chi tiết và hình ảnh sản phẩm
- Quản lý giỏ hàng:
- Chỉnh sửa số lượng sản phẩm trong giỏ
- Xem tổng giá trị đơn hàng
- Đặt hàng và thanh toán:
- Nhập thông tin giao hàng
- Chọn phương thức thanh toán (thẻ tín dụng, chuyển khoản,COD)
- Quản lý tài khoản:
Cập nhật thông tin cá nhân
Trang 5- Xem vị trí cửa hàng trên Google Maps.
- Tìm cửa hàng gần nhất dựa trên vị trí hiện tại
1.2 Yêu cầu phi chức năng
- Hiệu năng:
- Trang web phải tải nhanh, dưới 2 giây cho mỗi trang
- Hệ thống cần xử lý được ít nhất 1000 người dùng cùng lúc
- Bảo mật:
- Sử dụng HTTPS để bảo vệ thông tin giao dịch
- Phiên đăng nhập tự động hết hạn sau thời gian không hoạt động
- Khả năng mở rộng:
rộng quy mô
- Giao diện người dùng:
- Giao diện thân thiện, dễ sử dụng trên cả máy tính và điện thoại diđộng
II Thiết kế kiến trúc
Sơ đồ kiến trúc tổng quát:
Trang 6- Xem thông tin của sản phẩm
- Tìm kiếm sản phẩm theo tên, danh mục và thương hiệu
Trang 7Hình 3 : Giao diện quản lý đơn hàng của Admin
Mô tả chức năng:
- Xem thông tin đơn hàng
- Tìm kiếm đơn hàng theo tên và trạng thái đơn hàng
- Xem chi tiết đơn hàng
- Chỉnh sửa trạng thái đơn hàng
- Xóa đơn hàng
3 Quản lý người dùng
Hình 4 : Giao diện quản lý tài khoản người dùng của Admin
Mô tả chức năng:
- Xem thông tin tài khoản
- Tìm kiếm tài khoản theo tên tài khoản, email và số điện thoại
- Xem chi tiết tài khoản (đơn hàng, …)
- Xóa tài khoản
- Khóa/mở khóa tài khoản
4 Giỏ hàng và thanh toán
Trang 8Hình 5 : Giao diện giỏ hàng
Trang 9Hình 6 : Giao diện thanh toán
Mô tả chức năng
- Xem lại thông tin trong đơn hàng của bạn
- Chọn phương thức vận chuyển
- Chọn phương thức thanh toán
- Nhập họ tên, số điện thoại và địa chỉ giao hàng
5 Đánh giá và phản hồi
6 Tìm kiếm và lọc sản phẩm
Trang 10Hình 7 : Giao diện lọc sản phẩm
Mô tả chức năng
- Cho phép lọc sản phẩm theo Danh mục sản phẩm, theo thương hiệu
và theo giá
7 Thiết kế giao diện
III Giao diện chính
- Trang chủ: Hiển thị các sản phẩm nổi bật, danh mục thú cưng
- Trang danh sách sản phẩm: Hiển thị các sản phẩm theo danh mục, có bộlọc
- Trang chi tiết sản phẩm: Thông tin chi tiết về thú cưng, hình ảnh, giá cả
- Giỏ hàng: Danh sách sản phẩm đã chọn, tổng giá trị đơn hàng
- Trang thanh toán: Form nhập thông tin giao hàng và phương thức thanhtoán
- Trang quản trị: Dashboard cho admin với các menu quản lý
3.1 Nguyên tắc thiết kế
Trang 11- Đơn giản và trực quan: Sử dụng các biểu tượng dễ hiểu, bố cục rõ ràng.
- Nhất quán: Duy trì phong cách thiết kế xuyên suốt website
- Responsive: Đảm bảo hiển thị tốt trên mọi kích thước màn hình
- Tối ưu hóa UX: Giảm số bước cần thiết để hoàn thành một hành động
IV Phương pháp và công cụ thiết kế
4.1 Công cụ thiết kế
- Figma: Thiết kế giao diện và prototype
- Visual Paradigm: Vẽ sơ đồ kiến trúc và UML
- Visual Studio Code: IDE chính cho phát triển
- Git và GitHub: Quản lý mã nguồn và phiên bản
4.2 Phương pháp thiết kế
Chúng tôi áp dụng phương pháp thiết kế hướng đối tượng (OOD) vì:
- Phù hợp với bản chất của hệ thống (có nhiều đối tượng như User,Product, Order)
- Dễ dàng mở rộng và bảo trì
- Tái sử dụng code hiệu quả
4.3 Sơ đồ UML
a) Sơ đồ Database Diagram:
Hình 8 : Sơ đồ Database Diagram
b) Sơ đồ Class Diagram:
Trang 12Hình 9 : Sơ đồ Class Diagram
c) Sơ đồ Use Case Diagram:
Use case Diagram cho Khách (Guest):
Trang 13Hình 10 : Use case Diagram cho Khách
Đặc tả UC của Khách (Guest):
1.Xem danh sách sản phẩm
Mô tả Cho phép khách xem danh sách các sản phẩm trênwebsite
Kích hoạt Khách truy cập trang chủ hoặc trang danh mục sản phẩm
Điều kiện tiên quyết Không có
4 Khách có thể chuyển giữa các trang sản phẩm
Luồng sự kiện thay
Điều kiện sau Khách xem được danh sách sản phẩm
2.Tìm kiếm sản phẩm
Trang 14Tên use case Tìm kiếm sản phẩm
2 Hệ thống thực hiện tìm kiếm trong cơ sở dữ liệu
3 Hệ thống hiển thị kết quả tìm kiếm
4 Khách có thể lọc và sắp xếp kết quả tìm kiếm
Luồng sự kiện thay
thế
3a Không tìm thấy kết quả:
1 Hệ thống hiển thị thông báo không tìm thấy sảnphẩm
2 Gợi ý các từ khóa liên quan
Điều kiện sau Khách xem được kết quả tìm kiếm
3.Xem chi tiết sản phẩm
Tên use case Xem chi tiết sản phẩm
Mô tả
Cho phép khách xem thông tin chi tiết của một sảnphẩm
Kích hoạt Khách chọn một sản phẩm từ danh sách hoặc kết quảtìm kiếm
Điều kiện tiên quyết Không có
Luồng sự kiện chính
1 Hệ thống hiển thị trang chi tiết sản phẩm
2 Khách xem thông tin sản phẩm (tên, mô tả, giá, hìnhảnh)
3 Khách có thể xem đánh giá và bình luận về sản phẩm
Luồng sự kiện thay
Trang 15Điều kiện sau Khách xem được thông tin chi tiết của sản phẩm
4.Đăng ký tài khoản
Tên use case Đăng ký tài khoản
Mô tả Cho phép khách đăng ký tài khoản mới
Kích hoạt Khách chọn "Đăng ký" trên website
Điều kiện tiên quyết Khách chưa có tài khoản
Luồng sự kiện chính
1 Hệ thống hiển thị form đăng ký
2 Khách điền thông tin cá nhân (tên, email, mật khẩu)
3 Khách gửi form đăng ký
4 Hệ thống kiểm tra tính hợp lệ của thông tin
5 Hệ thống tạo tài khoản mới
6 Hệ thống gửi email xác nhận
Luồng sự kiện thay
thế
4a Thông tin không hợp lệ:
1 Hệ thống hiển thị thông báo lỗi
2 Quay lại bước 2
Điều kiện sau Tài khoản mới được tạo trong hệ thống
Use case Diagram cho Khách hàng:
Trang 16Mô tả Cho phép khách hàng đăng nhập vào tài khoản
Kích hoạt Khách hàng chọn "Đăng nhập" trên website
Điều kiện tiên quyết Khách hàng đã có tài khoản
Luồng sự kiện chính
1 Hệ thống hiển thị form đăng nhập
2 Khách hàng nhập email và mật khẩu
3 Khách hàng gửi form đăng nhập
4 Hệ thống xác thực thông tin đăng nhập
5 Hệ thống tạo phiên đăng nhập
6 Hệ thống chuyển hướng đến trang chủ
Trang 17Luồng sự kiện thay
thế
4a Thông tin đăng nhập không chính xác:
1 Hệ thống hiển thị thông báo lỗi
2 Quay lại bước 2
Điều kiện sau Khách hàng đã đăng nhập vào hệ thống
2.Quản lý thông tin cá nhân
Tên use case Quản lý thông tin cá nhân
Mô tả Cho phép khách hàng xem và cập nhật thông tin cánhân
Kích hoạt Khách hàng chọn "Thông tin cá nhân" trong tài khoản
Điều kiện tiên quyết Khách hàng đã đăng nhập
Luồng sự kiện chính
1 Hệ thống hiển thị thông tin cá nhân hiện tại
2 Khách hàng chỉnh sửa thông tin
3 Khách hàng lưu thay đổi
4 Hệ thống kiểm tra tính hợp lệ của thông tin
5 Hệ thống cập nhật thông tin trong cơ sở dữ liệu
Luồng sự kiện thay
thế
4a Thông tin không hợp lệ:
1 Hệ thống hiển thị thông báo lỗi
2 Quay lại bước 2
Điều kiện sau Thông tin cá nhân được cập nhật
3.Thêm vào giỏ hàng:
Tên use case Thêm vào giỏ hàng
Mô tả Cho phép khách hàng thêm sản phẩm vào giỏ hàng
Kích hoạt Khách hàng chọn "Thêm vào giỏ hàng" trên trang sảnphẩm
Điều kiện tiên quyết Khách hàng đã đăng nhập
Luồng sự kiện chính 1 Khách hàng chọn số lượng sản phẩm
Trang 182 Khách hàng nhấn "Thêm vào giỏ hàng"
3 Hệ thống kiểm tra tồn kho
4 Hệ thống thêm sản phẩm vào giỏ hàng
5 Hệ thống hiển thị thông báo thành công
Luồng sự kiện thay
Mô tả Cho phép khách hàng đặt hàng từ giỏ hàng
Kích hoạt Khách hàng chọn "Thanh toán" từ giỏ hàng
Điều kiện tiên quyết
Khách hàng đã đăng nhập và có sản phẩm trong giỏhàng
Luồng sự kiện chính
1 Hệ thống hiển thị trang xác nhận đơn hàng
2 Khách hàng xác nhận thông tin giao hàng
3 Khách hàng chọn phương thức thanh toán
4 Hệ thống tạo đơn hàng mới
5 Hệ thống chuyển hướng đến trang thanh toán
6 Khách hàng hoàn tất thanh toán
7 Hệ thống cập nhật trạng thái đơn hàng
8 Hệ thống gửi email xác nhận đơn hàng
Luồng sự kiện thay
thế
6a Thanh toán không thành công:
1 Hệ thống hiển thị thông báo lỗi thanh toán
2 Quay lại bước 3
Điều kiện sau Đơn hàng mới được tạo và thanh toán thành công
Use case Diagram cho Admin:
Quản lý tài khoản :
Trang 19Hình 12 : UC Quản lý tài khoản
Quản lý sản phẩm:
Hình 13 : UC Quản lý sản phẩm
Quản lý danh mục:
Trang 21Hình 16 : UC Quản lý khuyến mãi
Trang 22Tên use case Quản lý sản phẩm
Mô tả
Cho phép admin thêm, sửa, xóa và xem danh sách sảnphẩm
Kích hoạt Admin chọn mục "Quản lý sản phẩm" trong panel quảntrị
Điều kiện tiên quyết Admin đã đăng nhập vào hệ thống quản trị
Luồng sự kiện chính
1 Hệ thống hiển thị danh sách sản phẩm
2 Admin có thể thêm sản phẩm mới
3 Admin có thể chỉnh sửa thông tin sản phẩm
2 Admin xác nhận hoặc hủy xóa
Điều kiện sau Thông tin sản phẩm được cập nhật trong hệ thống
1 Hệ thống hiển thị danh sách danh mục
2 Admin có thể thêm danh mục mới
3 Admin có thể chỉnh sửa thông tin danh mục
4 Admin có thể xóa danh mục
5 Admin có thể sắp xếp thứ tự danh mục
Luồng sự kiện thay 4a Xóa danh mục có sản phẩm:
Trang 231 Hệ thống hiển thị cảnh báo
2 Admin xác nhận hoặc hủy xóa
Điều kiện sau Thông tin danh mục được cập nhật trong hệ thống
3.Đặc tả quản lý đơn hàng:
Tên use case Quản lý đơn hàng
Mô tả Cho phép admin xem và cập nhật trạng thái đơn hàng
Kích hoạt Admin chọn mục "Quản lý đơn hàng" trong panel quản trị
Điều kiện tiên
quyết Admin đã đăng nhập vào hệ thống quản trị
Luồng sự kiện
chính
1 Hệ thống hiển thị danh sách đơn hàng
2 Admin có thể xem chi tiết từng đơn hàng
3 Admin có thể cập nhật trạng thái đơn hàng
4 Admin có thể tìm kiếm và lọc đơn hàng
5 Hệ thống cập nhật thông tin đơn hàng
6 Hệ thống gửi email thông báo cho khách hàng khi trạngthái đơn hàng thay đổi
Luồng sự kiện
thay thế
3a Hủy đơn hàng:
1 Admin chọn hủy đơn hàng
2 Hệ thống yêu cầu xác nhận
3 Admin xác nhận hủy
4 Hệ thống cập nhật trạng thái và gửi thông báo cho kháchhàng
Điều kiện sau Thông tin đơn hàng được cập nhật trong hệ thống
4.Đặc tả quản lý khuyến mãi:
Tên use case Quản lý khuyến mãi
Trang 24Điều kiện tiên
quyết Admin đã đăng nhập vào hệ thống quản trị
Luồng sự kiện
chính
1 Hệ thống hiển thị danh sách khuyến mãi
2 Admin có thể tạo khuyến mãi mới
3 Admin có thể chỉnh sửa thông tin khuyến mãi
4 Admin có thể xóa khuyến mãi
5 Admin có thể kích hoạt hoặc vô hiệu hóa khuyến mãi
6 Hệ thống cập nhật thông tin khuyến mãi
Luồng sự kiện
thay thế
4a Xóa khuyến mãi đang hoạt động:
1 Hệ thống hiển thị cảnh báo
2 Admin xác nhận hoặc hủy xóa
Điều kiện sau Thông tin khuyến mãi được cập nhật trong hệ thống
5.Đặc tả quản lý đánh giá:
Tên use case Quản lý đánh giá
Mô tả Cho phép admin xem, duyệt và xóa đánh giá của kháchhàng
Kích hoạt Admin chọn mục "Quản lý đánh giá" trong panel quảntrị
Điều kiện tiên quyết Admin đã đăng nhập vào hệ thống quản trị
Luồng sự kiện chính
1 Hệ thống hiển thị danh sách đánh giá
2 Admin có thể xem chi tiết từng đánh giá
3 Admin có thể duyệt hoặc từ chối đánh giá
4 Admin có thể xóa đánh giá không phù hợp
5 Admin có thể trả lời đánh giá
6 Hệ thống cập nhật trạng thái đánh giá
Luồng sự kiện thay
thế
3a Từ chối đánh giá:
1 Admin chọn từ chối đánh giá
2 Hệ thống yêu cầu nhập lý do từ chối
3 Admin nhập lý do
4 Hệ thống cập nhật trạng thái và gửi thông báo chokhách hàng
Trang 25Điều kiện sau Trạng thái đánh giá được cập nhật trong hệ thống
1 Hệ thống hiển thị danh sách người dùng
2 Admin có thể xem chi tiết thông tin người dùng
3 Admin có thể chỉnh sửa thông tin người dùng
4 Admin có thể khóa/mở khóa tài khoản người dùng
5 Admin có thể tìm kiếm và lọc danh sách người dùng
6 Hệ thống cập nhật thông tin người dùng
Luồng sự kiện thay
thế
4a Khóa tài khoản:
1 Admin chọn khóa tài khoản
2 Hệ thống yêu cầu xác nhận
3 Admin xác nhận khóa
4 Hệ thống cập nhật trạng thái và gửi thông báo chongười dùng
Điều kiện sau Thông tin người dùng được cập nhật trong hệ thống
d) Sơ đồ Activity Diagram:
Trang 26a Đăng ký:
Hình 19 : Đăng ký
Trang 27b Đăng nhập:
Hình 20 : Đăng nhập
c Tìm kiếm sản phẩm:
Hình 21 : Tím kiếm sản phẩm
Trang 28d Thêm sản phẩm vào giỏ hàng:
Hình 22 : Tím kiếm sản phẩm
Trang 29e Đánh giá sản phẩm:
Hình 23 : Đánh giá sản phẩm
Trang 30f Thanh toán đơn hàng:
Hình 24 : Thanh toán đơn hàng
Trang 31g Xem lịch sử đơn hàng:
Hình 25 : Xem lịch sử đơn hàng
Trang 32h Đánh giá sản phẩm:
Hình 26 : Đánh giá sản phẩm
Trang 33i Quản lý sản phẩm (cho admin):
Hình 27 : Quản lý sản phẩm (cho admin)
Trang 34j Quản lý danh mục (cho admin):
Hình 28 : Quản lý danh mục (cho admin)