Source code website thương mại điện tử chuyên mỹ phẩm, phát triển bằng Java Spring MVC và MySQL

1. Giao diện người dùng hiện đại:
   • Sử dụng Bootstrap 5.3.0 và Font Awesome 6.3.0 để tạo giao diện đẹp mắt, responsive trên mọi thiết bị.
   • Tích hợp Thymeleaf cho giao diện động, hỗ trợ tái sử dụng layout (Header, Navbar, Footer).
   • Slider banner hiển thị hình ảnh quảng cáo mỹ phẩm nổi bật, thu hút khách hàng.
   • Các section sản phẩm được thiết kế trực quan: sản phẩm giảm giá, sản phẩm bán chạy, sản phẩm mới, và danh mục thương hiệu.
2. Quản lý sản phẩm:
   • Hiển thị sản phẩm theo danh mục và thương hiệu, với thông tin chi tiết như giá, giảm giá, đánh giá (sao), và số lượt bán.
   • Hỗ trợ tìm kiếm sản phẩm và lọc theo danh mục hoặc thương hiệu.
   • Tính năng giới hạn tên sản phẩm (cắt ngắn nếu quá dài) và hiển thị giá gốc/giá giảm.
3. Xử lý lỗi chuyên nghiệp:
   • Các trang lỗi 403 (Forbidden), 404 (Not Found), và trang lỗi chung được thiết kế đồng bộ với giao diện chính, cung cấp thông điệp rõ ràng và nút điều hướng (quay về trang chủ, đăng nhập lại).
   • Tích hợp xử lý lỗi tùy chỉnh trong Spring MVC, dễ dàng mở rộng cho các mã lỗi khác.
4. Hiệu năng và bảo mật:
   • Sử dụng Spring MVC để xử lý yêu cầu nhanh chóng, tối ưu hóa hiệu suất.
   • MySQL lưu trữ dữ liệu sản phẩm, đơn hàng, và thông tin người dùng một cách an toàn.
   • Cấu trúc mã nguồn rõ ràng, tuân theo mô hình MVC, dễ bảo trì và mở rộng.
5. Tính năng bổ sung:
   • Phần giới thiệu (About) với nội dung truyền cảm hứng về xu hướng làm đẹp, nâng cao giá trị thương hiệu.
   • Hỗ trợ đa ngôn ngữ (hiện tại là tiếng Việt và tiếng Anh, dễ dàng mở rộng thêm ngôn ngữ khác).
   • Tích hợp sẵn các file CSS tùy chỉnh (header.css, navbar.css, index.css, v.v.) để dễ dàng điều chỉnh giao diện.

Công nghệ sử dụng:

• Backend: Java Spring MVC, Spring Boot.
• Database: MySQL.
• Frontend: Thymeleaf, Bootstrap 5.3.0, Font Awesome 6.3.0.
• Khác: Maven (quản lý thư viện), HTML5, CSS3, JavaScript.

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

• Java 8 trở lên.
• MySQL 5.7 trở lên.
• Apache Tomcat hoặc bất kỳ server hỗ trợ Spring Boot.
• IDE như IntelliJ IDEA hoặc Eclipse để phát triển.

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

HÌNH ẢNH DEMO

Các bước cài đặt

Bước 1: Cài đặt môi trường

1. Cài đặt Java 21:

   • Tải JDK 21 từ Oracle hoặc OpenJDK.

   • Cài đặt và kiểm tra:

     java -version

     Kết quả nên hiển thị phiên bản 21 (ví dụ: openjdk 21.0.2).

   • Thiết lập biến môi trường JAVA_HOME trỏ đến thư mục JDK (ví dụ: /usr/lib/jvm/jdk-21).

2. Cài đặt Maven:

   • Tải Maven 3.9.0 trở lên từ Apache Maven và giải nén.

   • Thêm đường dẫn bin của Maven vào biến môi trường PATH.

   • Kiểm tra cài đặt:

     mvn -version

     Kết quả nên hiển thị phiên bản Maven và Java 21.

3. Cài đặt MySQL 8.x:

   • Tải MySQL Community Server 8.0 hoặc 8.1 từ MySQL Downloads.

   • Cài đặt và đặt mật khẩu cho tài khoản root.

   • Kích hoạt MySQL nếu cần:

     sudo service mysql start  # Linux

   • Kiểm tra cài đặt:

     mysql -u root -p

4. Cài đặt IDE:

   • Tải IntelliJ IDEA từ JetBrains (khuyến nghị) hoặc Eclipse 2024-09 từ Eclipse.

   • Cài đặt plugin Spring Boot và Maven trong IDE.

   • Đảm bảo IDE nhận diện Java 21 (cấu hình SDK trong Project Structure).

Bước 2: Cấu hình cơ sở dữ liệu

1. Tạo database:

   • Đăng nhập vào MySQL:

     mysql -u root -p

   • Tạo database mới:

     CREATE DATABASE cosmetic_shop CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. Nhập dữ liệu mẫu:

   • Tìm file database.sql trong thư mục source code (chứa schema và dữ liệu mẫu cho bảng products, categories, brands, v.v.).

   • Chạy lệnh để nhập dữ liệu:

     mysql -u root -p cosmetic_shop < path/to/database.sql

   • Nếu file database.sql sử dụng cú pháp cũ, đảm bảo tương thích với MySQL 8.x (ví dụ: sử dụng utf8mb4 cho encoding).

3. Cấu hình kết nối database:

   • Mở file src/main/resources/application.properties.

   • Cập nhật thông tin kết nối MySQL:

     spring.datasource.url=jdbc:mysql://localhost:3306/cosmetic_shop?useSSL=false&serverTimezone=UTC
     spring.datasource.username=root
     spring.datasource.password=your_password
     spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
     spring.jpa.hibernate.ddl-auto=update
     spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
     spring.thymeleaf.cache=false

   • Thay your_password bằng mật khẩu MySQL của bạn.

   • Lưu ý: serverTimezone=UTC và useSSL=false được thêm để tránh lỗi kết nối với MySQL 8.x.

Bước 3: Cài đặt và chạy ứng dụng

1. Mở dự án trong IDE:

   • Mở IDE, chọn File > Open và trỏ đến thư mục project-root.

   • Chờ IDE tải các phụ thuộc Maven (có thể mất vài phút lần đầu).

2. Cập nhật file pom.xml:

   • Đảm bảo pom.xml sử dụng các phiên bản tương thích với Java 21:

     <properties>
         <java.version>21</java.version>
         <spring-boot.version>3.2.0</spring-boot.version>
     </properties>
     <dependencies>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-thymeleaf</artifactId>
         </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-data-jpa</artifactId>
         </dependency>
         <dependency>
             <groupId>mysql</groupId>
             <artifactId>mysql-connector-j</artifactId>
             <version>8.2.0</version>
         </dependency>
     </dependencies>

   • Nếu pom.xml của bạn khác, hãy kiểm tra và cập nhật phiên bản Spring Boot (3.2.0 trở lên) và MySQL Connector (8.2.0).

3. Cài đặt phụ thuộc:

   • Trong terminal hoặc IDE, chạy lệnh:

     mvn clean install

4. Chạy ứng dụng:

   • Cách 1: Sử dụng Spring Boot:

     • Tìm file chính (thường là src/main/java/com/example/CosmeticShopApplication.java).

     • Nhấp chuột phải và chọn Run trong IDE.

   • Cách 2: Sử dụng Tomcat 10.x:

     • Cài đặt Tomcat 10.x từ Apache Tomcat.

     • Build file WAR:

       mvn package

     • Copy file target/cosmetic-shop.war vào thư mục webapps của Tomcat.

     • Khởi động Tomcat:

       ./bin/startup.sh   # Linux/macOS
       .\bin\startup.bat  # Windows

   • Mở trình duyệt và truy cập:

     http://localhost:8080

Bước 4: Kiểm tra website

• Trang chủ: Kiểm tra slider banner, danh mục sản phẩm, sản phẩm nổi bật (giảm giá, bán chạy, mới), và thương hiệu.

• Danh mục: Nhấp vào danh mục để xem sản phẩm theo loại.

• Sản phẩm: Nhấp vào sản phẩm để xem chi tiết.

• Trang lỗi: Truy cập URL không tồn tại (ví dụ: /abc) hoặc thử truy cập tài nguyên bị cấm để kiểm tra trang 403, 404, và lỗi chung.

• Nếu gặp lỗi, kiểm tra log trong console IDE hoặc file logs/catalina.out của Tomcat.

Bước 5: Tùy chỉnh (Tùy chọn)

• Thay đổi giao diện:

  • Chỉnh sửa file CSS trong src/main/resources/static/css/ (ví dụ: header.css, index.css).

  • Cập nhật template Thymeleaf trong src/main/resources/templates/.

• Thêm tính năng:

  • Thêm controller mới trong src/main/java/com/example/controller/.

  • Cập nhật schema database trong database.sql nếu cần thêm bảng hoặc dữ liệu.

• Cấu hình bảo mật:

  • Tích hợp Spring Security bằng cách thêm dependency trong pom.xml và cấu hình trong application.properties.

Nguồn: Topcode.vn