loại bỏ dupral ra khỏi dự án vì tính không khả thi, đã chạy đươc trang flex-finish

2026-05-27 16:06:30 +07:00
parent 8b06a94852
commit 5345171145
280 changed files with 32436 additions and 57480 deletions
@@ -0,0 +1,83 @@
+# Hướng Dẫn Chuyển Đổi HTML Tĩnh Sang Spring Boot (Thymeleaf)
+
+Tài liệu này hướng dẫn bạn cách tự tay chuyển đổi các file HTML tĩnh (như các trang của UMass) sang giao diện động dùng Thymeleaf trong Spring Boot.
+
+## 4 Bước Chuyển Đổi Thủ Công
+
+### Bước 1: Tạo file giao diện mới
+1. Mở thư mục chứa giao diện của dự án: `sisvietnamvn/src/main/resources/templates/`
+2. Tạo một file `.html` mới (Ví dụ: `schools-colleges.html`)
+3. Dán "khung xương" cơ bản sau vào file vừa tạo:
+```html
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{fragments/layout}">
+<body>
+
+    <!-- Nội dung của trang sẽ nằm trong thẻ main này -->
+    <main role="main" layout:fragment="content">
+        
+        <!-- DÁN NỘI DUNG TỪ FILE GỐC VÀO ĐÂY -->
+
+    </main>
+
+</body>
+</html>
+```
+
+### Bước 2: Copy "phần ruột" từ file gốc
+1. Mở file HTML gốc (Ví dụ: `UMASS_sample\Schools & Colleges _ UMass Amherst.html`).
+2. Bấm `Ctrl + F`, tìm thẻ `<main`.
+3. Bôi đen và Copy toàn bộ nội dung nằm **từ thẻ mở `<main>` đến thẻ đóng `</main>`**.
+   > **Lưu ý:** Không copy các thẻ `<html>`, `<head>`, `<header>`, `<footer>` ở file gốc vì file `layout.html` đã lo phần đó. Đảm bảo bạn đang copy mã nguồn HTML của trang UMass, chứ không copy nhầm giao diện của cửa sổ chat.
+4. Dán nội dung vừa copy vào giữa thẻ `<main layout:fragment="content">` ở Bước 1.
+
+### Bước 3: Sửa lại đường dẫn Ảnh / Video (Rất quan trọng)
+Sau khi dán xong, các bức ảnh sẽ bị lỗi đường dẫn. Bạn cần bấm `Ctrl + F` trong file mới tạo, tìm các thẻ `<img>` và sửa lại:
+
+1. **Xóa** tất cả các thuộc tính `srcset="..."` hoặc `data-src="..."` hoặc `data-srcset="..."`. (Nếu để lại, trình duyệt sẽ ưu tiên tải các link lỗi này).
+2. **Đổi** thuộc tính `src="..."` thành **`th:src="@{/images/umass/tên_file_ảnh.jpg}"`**.
+
+**Ví dụ sửa ảnh:**
+```html
+<!-- TRƯỚC KHI SỬA (Lỗi 404): -->
+<img src="./Schools & Colleges _ UMass Amherst_files/anh_truong.jpg" srcset="https://drupal..." />
+
+<!-- SAU KHI SỬA (Chuẩn Spring Boot): -->
+<img th:src="@{/images/umass/anh_truong.jpg}" />
+```
+
+### Bước 4: Khai báo URL trong Controller
+Để khi gõ link trên trình duyệt, Spring Boot biết đường mở file HTML của bạn lên, bạn cần cấu hình Java:
+
+1. Mở file `src/main/java/com/sisvietnamvn/web/controller/HomeController.java`.
+2. Thêm một hàm để ánh xạ URL tới file HTML bạn vừa tạo:
+```java
+package com.sisvietnamvn.web.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class HomeController {
+
+    @GetMapping("/")
+    public String home() {
+        return "index";
+    }
+
+    // --- THÊM CÁC TRANG MỚI Ở ĐÂY ---
+
+    // Ví dụ cho trang Schools & Colleges:
+    @GetMapping("/schools-colleges")
+    public String schoolsColleges() {
+        return "schools-colleges"; // Phải khớp với tên file schools-colleges.html
+    }
+}
+```
+
+---
+
+## 🚀 Hoàn tất
+1. Bạn vào Terminal và gõ: `.\gradlew bootRun` (nhớ nhấn `Ctrl + C` tắt cái cũ nếu đang chạy).
+2. Mở trình duyệt gõ: `http://localhost:8082/schools-colleges`.
+3. Bấm `Ctrl + F5` để tải lại giao diện hoàn chỉnh có đầy đủ CSS!