Mô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 - 2224802010267 Trần Đại Nghĩa - 2224802010857 Huỳ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 1 Mụ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.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).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 2 BÀI TẬP CHƯƠNG 4 I. Tổng quan về thiết kế phần mềm 1.
Mô tả hệ thống Website bán thú cưng của chúng tôi được thiết kế để phục vụ cả người quản trị (admin) và khách hàng. Dưới đây là chi tiết các chức năng chính: ❖Đối với Admin: - Quản lý sản phẩm: - Thêm sản phẩm mới: Nhập thông tin chi tiết về thú cưng như tên, giống, tuổi, giá, mô tả, hình ảnh. - Chỉnh sửa sản phẩm: Cập nhật thông tin, giá cả, trạng thái (còn hàng/hết hàng). - Xóa sản phẩm: Loại bỏ sản phẩm khỏi danh sách bán.
- Quản lý hình ảnh: Thêm, xóa, sắp xếp hình ảnh cho mỗi sả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ật cuố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. - Chỉnh sửa danh mục: Đổi tên, mô tả danh mục.
- Xóa danh mục: Loại bỏ danh mục không cần thiết. - Sắp xếp danh mục: Thay đổi thứ tự hiển thị của danh mục trên 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 đăng nhập. - Phân quyền: Thiết lập quyền hạn cho từng nhân viên (ví dụ: 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ân viên. 3 - Vô hiệu hóa tài khoản: Tạm ngưng hoặc xóa tài khoản nhân viên khi cần. - Xử lý đơn hàng: - Xem danh sách đơn hàng: Theo dõi tất cả đơn hàng mới và đang xử lý. - Cập nhật trạng thái: Thay đổi trạng thái đơn hàng (đang xử lý, đã giao, đã hủy).
- Chi tiết đơn hàng: Xem thông tin chi tiết về sản phẩm, khách hàng, địa chỉ giao hàng. - Xử lý hoàn tiền: Quản lý các yêu cầu hoàn tiền và hủy đơn. - Quản lý đánh giá: - 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ển thị 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: - Thêm sản phẩm vào giỏ hàng. - Chỉnh sửa số lượng sản phẩm trong giỏ. - Xóa sản phẩm khỏi giỏ hàng.
- 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). - Xác nhận đơn hàng và nhận mã đơn hàng.
- Quản lý tài khoản: - Đăng ký tài khoản mới. - Cập nhật thông tin cá nhân. 4 - Đổi mật khẩu. - Xem lịch sử đơn hàng.
- Đánh giá sản phẩm: - Viết đánh giá cho sản phẩm đã mua. - Chấm điểm sản phẩm (1-5 sao). - Đăng hình ảnh kèm theo đánh giá. - Tìm kiếm cửa hàng: - 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. 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: - Mật khẩu người dùng phải được mã hóa bằng MD5.
- 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: - Thiết kế hệ thống sao cho dễ dàng thêm tính năng mới và mở 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.
Thiết kế kiến trúc 2. Mô hình kiến trúc Chúng tôi chọn mô hình MVC (Model-View-Controller) cho dự án này. Lý do chọn MVC: - Tách biệt logic xử lý, dữ liệu và giao diện, giúp code dễ quản lý. - Dễ dàng mở rộng và bảo trì.
- Phù hợp với các framework web phổ biến. Sơ đồ kiến trúc tổng quát: 5 Hình 1 : Mô hình MVC 2. Phân rã mô-đun Các mô-đun chính của hệ thống: 1. Quản lý sản phẩm Hình 2 : Giao diện quản lý sản phẩm của Admin Mô tả chức năng: - 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 - Thêm sản phẩm mới - Sửa thông tin sản phẩm - Xóa sản phẩm - Thêm thông tin sale cho sản phẩm 2.
Quản lý đơn hàng 6 Hì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 7 Hình 5 : Giao diện giỏ hàng Mô tả chức năng - Xem thông tin sản phẩm đã thêm vào giỏ hàng - Tăng/giảm số lượng sản phẩm - Xóa sản phẩm - Mua hàng (Chuyển sang giao diện thanh toán) 8 Hì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 9 Hì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 thanh toán. - Trang quản trị: Dashboard cho admin với các menu quản lý.
Nguyên tắc thiết kế 10 - Đơ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.
Phương pháp và công cụ thiết kế 4. 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. 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ả.
Sơ đồ UML a) Sơ đồ Database Diagram: Hình 8 : Sơ đồ Database Diagram b) Sơ đồ Class Diagram: 11 Hình 9 : Sơ đồ Class Diagram c) Sơ đồ Use Case Diagram: Use case Diagram cho Khách (Guest): 12 Hì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 Tên use case Xem danh sách sản phẩm Actor Khách Cho phép khách xem danh sách các sản phẩm trên Mô tả website 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ó 1. Hệ thống hiển thị danh sách sản phẩm 2. Khách có thể lọc sản phẩm theo danh mục 3. Khách có thể sắp xếp sản phẩm theo giá, tên, hoặc độ phổ biến Luồng sự kiện chính 4.