f # Infinity Digital E-Commerce

Tổng quan dự án

Website thương mại điện tử bán đồ công nghệ được xây dựng bằng Spring Boot và Bootstrap 5.

Công nghệ sử dụng

• Backend: Spring Boot, Spring MVC, Thymeleaf
• Frontend: Bootstrap 5, Bootstrap Icons
• Java: 17
• Build Tool: Maven

Cấu trúc dự án đã hoàn thiện

1. Layout & Components

• ✅ Layout chính (layouts/user/layoutUser.html):

  • Tích hợp Bootstrap 5
  • Custom CSS cho ecommerce
  • Hỗ trợ Thymeleaf Layout Dialect

• ✅ Header (components/user/header.html):

  • Logo Infinity Digital
  • Navigation bar với categories dropdown
  • Search bar
  • Shopping cart icon với badge
  • User account icon
  • Responsive mobile menu

• ✅ Footer (components/user/footer.html):

  • Thông tin công ty
  • Links (Shop, Company, Support)
  • Newsletter signup
  • Social media icons
  • Service features (Shipping, Warranty, Support)
  • Copyright info

2. Trang User

• ✅ Trang chủ (pages/user/index.html):

  • Hero section với CTA buttons
  • Featured Categories với icons
  • Trending Products grid
  • Newsletter subscription
  • Responsive design

• ✅ Trang đăng nhập (pages/user/login.html):

  • Form đăng nhập đẹp mắt
  • Remember me checkbox
  • Forgot password link
  • Social login buttons
  • Link đến trang đăng ký

• ✅ Trang đăng ký (pages/user/register.html):

  • Form đăng ký đầy đủ
  • Validation fields
  • Terms & conditions checkbox
  • Link đến trang đăng nhập

• ✅ Trang sản phẩm (pages/user/products-new.html):

  • Sidebar filters (Categories, Price range, Brands)
  • Product grid với pagination
  • Sort options
  • Product cards với ratings
  • Breadcrumb navigation

• ✅ Trang giỏ hàng (pages/user/cart-new.html):

  • Danh sách sản phẩm trong giỏ
  • Quantity controls
  • Order summary
  • Promo code input
  • Trust badges (Shipping, Returns, Warranty)

3. Controllers

• ✅ HomeController: Xử lý các route user (/, /gio-hang, /san-pham, /dang-nhap, /dang-ky)
• ✅ AdminController: Xử lý các route admin (/admin, /admin/products, /admin/users)

Thiết kế UI/UX

Đặc điểm giao diện:

1. Clean & Modern: Thiết kế tối giản, chuyên nghiệp
2. Bootstrap 5: Sử dụng components chuẩn của Bootstrap
3. Responsive: Tương thích mọi thiết bị
4. Icons: Bootstrap Icons đầy đủ
5. Color Scheme:
   • Primary: #0d6efd (Bootstrap blue)
   • Light background: #f8f9fa
   • Dark text: #212529

Components chính:

• ✅ Product cards với hover effects
• ✅ Category cards với icons
• ✅ Search bar với rounded design
• ✅ Shopping cart badge
• ✅ Pagination
• ✅ Breadcrumb navigation
• ✅ Forms với validation styling

Cách chạy dự án

1. Yêu cầu

• Java 17 trở lên
• Maven (hoặc sử dụng mvnw đi kèm)

2. Khởi động

# Sử dụng Maven
mvn spring-boot:run

# Hoặc sử dụng Maven Wrapper
./mvnw spring-boot:run     # Linux/Mac
.\mvnw.cmd spring-boot:run  # Windows

3. Truy cập

• Trang chủ: http://localhost:8080/
• Sản phẩm: http://localhost:8080/san-pham
• Giỏ hàng: http://localhost:8080/gio-hang
• Đăng nhập: http://localhost:8080/dang-nhap
• Đăng ký: http://localhost:8080/dang-ky
• Admin: http://localhost:8080/admin

Chức năng còn cần phát triển

Phần 1: User Features

1. ⏳ Quản lý sản phẩm:

   • Tìm kiếm theo loại, giá
   • Hiển thị chi tiết sản phẩm
   • Sản phẩm bán chạy, giảm giá, mới

2. ⏳ Giỏ hàng:

   • Thêm/xóa/cập nhật sản phẩm
   • Tính toán tổng tiền
   • LocalStorage hoặc Session

3. ⏳ Tài khoản:

   • Đăng ký/đăng nhập
   • Kích hoạt qua email
   • Đổi mật khẩu
   • Quên mật khẩu

4. ⏳ Đặt hàng:

   • Checkout process
   • Quản lý đơn hàng
   • Lịch sử mua hàng

Phần 2: Admin Features

1. ⏳ CRUD Operations:

   • Quản lý loại hàng
   • Quản lý sản phẩm
   • Quản lý người dùng
   • Quản lý đơn hàng

2. ⏳ Thống kê:

   • Doanh thu theo loại hàng
   • Top 10 khách hàng VIP

3. ⏳ Bảo mật:

   • Spring Security
   • Role-based access (USER, ADMIN)
   • Interceptor & Configuration

Backend Services cần phát triển

• CategoryService
• ProductService
• AccountService
• OrderService
• OrderDetailService
• ReportService
• MailService
• FileService
• CookieService
• CartService
• AuthService

Database

• ⏳ Tạo Entity models
• ⏳ Tạo Repository/DAO
• ⏳ Kết nối SQL Server
• ⏳ Nhập dữ liệu mẫu (10 loại, 200 sản phẩm, 5 users, 1 admin)

File Structure

src/main/
├── java/com/infinity/digital/
│   ├── InfinityDigitalApplication.java
│   └── controller/
│       ├── HomeController.java
│       └── AdminController.java
└── resources/
    ├── application.properties
    ├── static/
    │   ├── infinity-digital-icon.svg
    │   └── infinity-digital-logo-full.svg
    └── templates/
        ├── layouts/user/
        │   └── layoutUser.html
        ├── components/user/
        │   ├── header.html
        │   └── footer.html
        └── pages/user/
            ├── index.html
            ├── login.html
            ├── register.html
            ├── products-new.html
            └── cart-new.html

Ghi chú

• ✅ Đã chuyển đổi hoàn toàn từ Tailwind CSS sang Bootstrap 5
• ✅ Layout đã hỗ trợ Thymeleaf Layout Dialect
• ✅ Giao diện responsive và hiện đại
• ✅ Components tái sử dụng (header, footer)
• ⏳ Cần kết nối database và implement business logic

License

© 2024 Infinity Digital. All rights reserved.