# 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
``` ### 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ẻ `` đến thẻ đóng ``**. > **Lưu ý:** Không copy các thẻ ``, ``, `
`, `
` ở 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ẻ `
` ở 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ẻ `` 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 ``` ### 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!