📋 Thông tin tổng quan

Tên dự án: SOF306-ASM - WebShop

Phiên bản: 0.0.1

Mô tả: Hệ thống thương mại điện tử (E-commerce) được phát triển bằng Spring Boot

Công nghệ chính: Java 17, Spring Boot 3.3.5, MySQL, Thymeleaf

🏗️ Kiến trúc hệ thống

Backend Architecture

Framework: Spring Boot 3.3.5

Architecture Pattern: MVC (Model-View-Controller)

Build Tool: Maven

Java Version: 17

Packaging: WAR

Frontend Architecture

Template Engine: Thymeleaf

UI Framework: Bootstrap (CSS/JS)

Static Resources: CSS, JavaScript, Images

🔧 Công nghệ sử dụng

Core Technologies

Spring Boot Starter Web - Web framework

Spring Boot Starter Data JPA - ORM và database operations

Spring Boot Starter Security - Authentication & Authorization

Spring Boot Starter Thymeleaf - Template engine

Spring Boot Starter Validation - Data validation

Spring Boot Starter Mail - Email functionality

Spring Boot Starter OAuth2 Client - Social login

Database

MySQL 8 - Primary database

MySQL Connector/J - JDBC driver

Hibernate - ORM framework

Additional Libraries

Lombok - Code generation

Cloudinary - Image storage and management

VNPay - Payment gateway integration

Dotenv - Environment variables management

Spring Security - Security framework

📊 Cơ sở dữ liệu

Các bảng chính:

Customers - Quản lý thông tin khách hàng

Products - Quản lý sản phẩm

Categories - Phân loại sản phẩm

Orders - Đơn hàng

OrderDetail - Chi tiết đơn hàng

CartItem - Giỏ hàng

Favorite - Sản phẩm yêu thích

Roles - Vai trò người dùng

Authority - Phân quyền

🎯 Chức năng chính

Dành cho khách hàng:

Đăng ký/Đăng nhập tài khoản

Quản lý profile cá nhân

Duyệt sản phẩm theo danh mục

Tìm kiếm sản phẩm

Quản lý giỏ hàng

Đặt hàng và thanh toán

Theo dõi đơn hàng

Quản lý sản phẩm yêu thích

Đổi mật khẩu

Quên mật khẩu

Dành cho quản trị viên:

Dashboard tổng quan

Quản lý sản phẩm (CRUD)

Quản lý danh mục sản phẩm

Quản lý khách hàng

Quản lý đơn hàng

Phân quyền người dùng

💳 Tính năng thanh toán

VNPay Integration - Cổng thanh toán trực tuyến

Payment Status Tracking - Theo dõi trạng thái thanh toán

Transaction Management - Quản lý giao dịch

📧 Tính năng email

Email Registration - Xác thực đăng ký

Password Reset - Đặt lại mật khẩu

Order Confirmation - Xác nhận đơn hàng

🖼️ Quản lý media

Cloudinary Integration - Lưu trữ và quản lý hình ảnh

Image Upload - Tải lên hình ảnh sản phẩm

Image Optimization - Tối ưu hóa hình ảnh

🔒 Bảo mật

Spring Security - Framework bảo mật

OAuth2 - Đăng nhập social

Password Encryption - Mã hóa mật khẩu

Role-based Access Control - Phân quyền theo vai trò

CSRF Protection - Bảo vệ CSRF

📱 Giao diện người dùng

Frontend User Interface:

Responsive Design - Tương thích đa thiết bị

Modern UI - Giao diện hiện đại

Admin Panel - Panel quản trị

User Dashboard - Bảng điều khiển người dùng

Template Structure:

Layout Templates - Template bố cục chung

Authentication Pages - Trang xác thực

Product Pages - Trang sản phẩm

Cart & Checkout - Giỏ hàng và thanh toán

Order Management - Quản lý đơn hàng

⚙️ Cấu hình hệ thống

Application Properties:

Server Port: 8080

Database: MySQL (localhost:3306/shopweb)

File Upload: Max 20MB per file, 50MB per request

Thymeleaf: Template caching disabled for development

Development Features:

Spring Boot DevTools - Hot reload

Debug Mode - SQL logging có thể bật/tắt

Environment Variables - Quản lý bằng .env file

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

Nguồn: Sharecode.vn

🛍️ WEBSHOP - HƯỚNG DẪN CÀI ĐẶT CHI TIẾT

🔧 Yêu cầu hệ thống

Phần mềm bắt buộc:

• Java Development Kit (JDK) 17 hoặc cao hơn

• MySQL 8.0 hoặc cao hơn

• Maven 3.6+ (hoặc sử dụng Maven Wrapper có sẵn)

• IDE: IntelliJ IDEA, Eclipse, hoặc VS Code

Phần mềm tùy chọn:

• Git (nếu muốn clone thay vì tải zip)

• MySQL Workbench (để quản lý database dễ dàng)

• Postman (để test API)

⚙️ Cài đặt công cụ cần thiết

1. Cài đặt Java JDK 17

Windows:

1. Truy cập: https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

2. Tải xuống JDK 17 phù hợp với hệ điều hành

3. Chạy file .exe và làm theo hướng dẫn

4. Kiểm tra cài đặt:

   java -version
   javac -version
   
   

Cấu hình JAVA_HOME (Windows):

1. Mở System Properties → Advanced → Environment Variables

2. Thêm biến môi trường:

   • Variable name: JAVA_HOME

   • Variable value: C:\Program Files\Java\jdk-17 (đường dẫn cài đặt JDK)

3. Thêm vào PATH: %JAVA_HOME%\bin

2. Cài đặt MySQL 8.0

Windows:

1. Truy cập: [liên kết đáng ngờ đã bị xóa]

2. Tải xuống MySQL Community Server 8.0

3. Chạy MySQL Installer và làm theo hướng dẫn:

   • Chọn Developer Default

   • Đặt mật khẩu cho user root (ghi nhớ mật khẩu này)

   • Hoàn tất cài đặt

Kiểm tra MySQL:

mysql -u root -p

Nhập mật khẩu root đã đặt

3. Cài đặt Maven (tùy chọn)

Windows:

11. Truy cập: https://maven.apache.org/download.cgi

12. Tải xuống Binary zip archive

13. Giải nén vào C:\Program Files\Apache\maven

14. Cấu hình biến môi trường:

    • MAVEN_HOME: C:\Program Files\Apache\maven

    • Thêm vào PATH: %MAVEN_HOME%\bin

Kiểm tra Maven:

mvn -version

🗄️ Cài đặt cơ sở dữ liệu

1. Tạo Database

Mở MySQL Command Line hoặc MySQL Workbench:

-- Tạo database
CREATE DATABASE shopweb CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- Sử dụng database
USE shopweb;

2. Import dữ liệu

Cách 1: Sử dụng MySQL Command Line

mysql -u root -p shopweb < "C:\path\to\WebShop\database.sql"

Cách 2: Sử dụng MySQL Workbench

1. Mở MySQL Workbench

2. Kết nối đến MySQL Server

3. Chọn File → Open SQL Script

4. Chọn file database.sql trong thư mục dự án

5. Click Execute (⚡) để chạy script

3. Kiểm tra dữ liệu

-- Kiểm tra các bảng đã tạo
SHOW TABLES;

-- Kiểm tra dữ liệu mẫu
SELECT * FROM Categories;
SELECT * FROM Products LIMIT 5;

⚙️ Cấu hình dự án

1. Mở dự án trong IDE

IntelliJ IDEA:

1. File → Open

2. Chọn thư mục WebShop (chứa file pom.xml)

3. Click OK

4. Chờ Maven import dependencies

VS Code:

1. File → Open Folder

2. Chọn thư mục WebShop

3. Cài đặt extension Extension Pack for Java

2. Tạo file .env

Tạo file .env trong thư mục gốc dự án (cùng cấp với pom.xml):

# Database Configuration
DB_PASSWORD=your_mysql_root_password

# Cloudinary Configuration (tùy chọn)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# VNPay Configuration (tùy chọn)
VNPAY_TMN_CODE=your_tmn_code
VNPAY_HASH_SECRET=your_hash_secret

# Email Configuration (tùy chọn)
[email protected]
MAIL_PASSWORD=your_app_password

⚠️ Lưu ý: Thay your_mysql_root_password bằng mật khẩu MySQL root thực tế của bạn.

3. Cấu hình application.properties (nếu cần)

File src/main/resources/application.properties đã được cấu hình sẵn. Nếu cần thay đổi:

# Database URL (thay đổi nếu cần)
spring.datasource.url=jdbc:mysql://localhost:3306/shopweb?useSSL=false&serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8&allowPublicKeyRetrieval=true

# Port (thay đổi nếu port 8080 bị chiếm)
server.port=8080

🚀 Chạy ứng dụng (Nếu có lỗi không kết nối được internet thì hãy dùng 1.1.1.1)

Cách 1: Sử dụng Maven (Khuyến nghị)

Windows Command Prompt:

cd C:\path\to\WebShop
mvn clean install
mvn spring-boot:run

PowerShell:

cd "C:\path\to\WebShop"
mvn clean install
mvn spring-boot:run

Cách 2: Sử dụng Maven Wrapper

cd C:\path\to\WebShop
.\mvnw.cmd clean install
.\mvnw.cmd spring-boot:run

Cách 3: Chạy từ IDE

IntelliJ IDEA:

1. Mở file Sof306AsmApplication.java

2. Click chuột phải → Run 'Sof306AsmApplication'

3. Hoặc click nút ▶️ bên cạnh method main

VS Code:

1. Mở Command Palette (Ctrl + Shift + P)

2. Gõ "Java: Run"

3. Chọn Sof306AsmApplication

Chờ ứng dụng khởi động

Khi thấy log tương tự như sau nghĩa là ứng dụng đã sẵn sàng:

2025-07-01 10:30:00.000  INFO 12345 --- [main] com.ptit.Sof306AsmApplication : Started Sof306AsmApplication in 15.234 seconds

🌐 Truy cập ứng dụng

URLs chính:

Trang chủ khách hàng:

http://localhost:8080

Trang quản trị:

http://localhost:8080/admin

Trang đăng nhập:

http://localhost:8080/auth/login

Tài khoản mặc định:

Kiểm tra file database.sql để xem các tài khoản demo đã được tạo sẵn.

Ví dụ:

• Admin:

  • Username: admin

  • Password: admin123

• Customer:

  • Username: customer

  • Password: customer123

🔧 Xử lý lỗi thường gặp

1. Lỗi "Port 8080 already in use"

Nguyên nhân: Port 8080 đã được sử dụng bởi ứng dụng khác.

Giải pháp:

• Cách 1: Thay đổi port trong application.properties:

  server.port=8081
  
  

• Cách 2: Tìm và tắt ứng dụng đang sử dụng port 8080:

  netstat -ano | findstr :8080
  taskkill /PID [PID_NUMBER] /F
  
  

2. Lỗi "Access denied for user 'root'@'localhost'"

Nguyên nhân: Sai mật khẩu MySQL hoặc chưa cấu hình file .env.

Giải pháp:

1. Kiểm tra mật khẩu MySQL:

   mysql -u root -p
   
   

2. Cập nhật file .env:

   DB_PASSWORD=correct_password
   
   

3. Lỗi "Table doesn't exist"

Nguyên nhân: Chưa import database hoặc import không thành công.

Giải pháp:

1. Kiểm tra database đã tồn tại:

   SHOW DATABASES;
   USE shopweb;
   SHOW TABLES;
   
   

2. Import lại file database.sql

4. Lỗi "Java version"

Nguyên nhân: Sử dụng Java version < 17.

Giải pháp:

1. Kiểm tra Java version:

   java -version
   
   

2. Cài đặt JDK 17 hoặc cao hơn

3. Cập nhật biến môi trường JAVA_HOME

5. Lỗi Maven "JAVA_HOME not found"

Giải pháp:

1. Đặt biến môi trường JAVA_HOME

2. Hoặc sử dụng Maven Wrapper:

   .\mvnw.cmd spring-boot:run
   
   

6. Lỗi "Cannot resolve dependencies"

Giải pháp:

1. Xóa thư mục .m2/repository

2. Chạy lại:

   mvn clean install -U
   
   

📞 Hỗ trợ

Nếu gặp vấn đề trong quá trình cài đặt:

1. Kiểm tra logs: Xem chi tiết lỗi trong console

2. Kiểm tra cấu hình: Đảm bảo tất cả file cấu hình đúng

3. Restart services: Khởi động lại MySQL và IDE

4. Clean build: Chạy mvn clean install trước khi start

🎉 Hoàn thành

Sau khi hoàn tất các bước trên, bạn đã có thể:

• ✅ Truy cập website tại http://localhost:8080

• ✅ Đăng nhập với tài khoản demo

• ✅ Thêm/sửa/xóa sản phẩm (admin)

• ✅ Mua sắm và đặt hàng (customer)

• ✅ Phát triển thêm tính năng mới

Chúc bạn thành công! 🚀