Hướng dẫn sử dụng Thymeleaf trong Spring Boot

Hướng dẫn sử dụng Thymeleaf trong Spring Boot

huong-dan-su-dung-thymeleaf-trong-spring-boot-2
Spring Framework

Hướng dẫn sử dụng Thymeleaf trong Spring Boot

Trong bài hướng dẫn sử dụng Thymeleaf trong Spring Boot, chúng tôi sẽ hướng dẫn các bạn cách phát triển ứng dụng web với 4 tính năng cơ bản là xem, thêm, xóa và cập nhật dữ liệu. Hay còn lại là CRUD web application.

Chúng ta sẽ làm những gì trong bài hướng dẫn sử dụng Thymeleaf trong Spring Boot? Chúng ta sẽ tạo một ứng dụng web thực hiện thêm sinh viên, hiển thị danh sách sinh viên, cập nhật thông tin sinh viên và xóa sinh viên.

Giao diện ứng dụng sau khi phát triển

Hướng dẫn sử dụng Thymeleaf trong Spring Boot

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Công cụ và công nghệ sử dụng

Để hoàn thành được bài hướng dẫn này, chúng ta cần chuẩn bị môi trường lập trình và công nghệ sử dụng. Cụ thể như sau:

  • Spring Boot phiên bản 2.3.4.RELEASE
  • Spring Data JPA phiên bản 2.3.4.RELEASE
  • Hibernate phiên bản 5.4.21.Final
  • Thymeleaf phiên bản 3.0.11 RELEASE
  • MySQL phiên bản 8.0.21
  • eclipse phiên bản 2020-09

Ngoài ra để làm tốt và thực sự hiểu bài hướng dẫn này các bạn phải có nền tảng về Java, HTML, CSS, JavaScript, Bootstrap và database.

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Các bước thực hiện

  1. Tạo dự án Spring Boot
  2. Tạo các Entity
  3. Tạo các Repository
  4. Tạo các Service
  5. Tạo các Controller
  6. Tạo các View
  7. Run ứng dụng
  8. Demo

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Tạo dự án Spring Boot

Có nhiều cách để tạo một dự án Spring Boot. Trong hướng dẫn này, chúng tôi sử dụng các bước sau:

1. Tạo dự án Spring Boot sử dụng Spirng Initializer

  • Chọn Generate để tải file dự án về máy

2. Giải nén file vừa tải về và import vào eclipse

Hướng dẫn sử dụng thymeleaf trong Spring Boot

Sử dụng eclipse -> chọn File -> chọn Open Projects from File System… -> chọn Directory… -> chỉ định thư mục chứa file đã giải nén -> chọn project -> chọn Select Folder

hướng dẫn sử dụng thymeleaf trong spring boot

Chọn Finish -> Máy của các bạn phải kết nối internet để eclipse tải các dependencies về máy. Việc này có thể mất vài phút hoặc lâu hơn tùy thuộc vào tốc độ internet của các bạn. Hình bên dưới là kết quả sau khi đã import và build thành công

hướng dẫn sử dụng thymeleaf trong spring boot

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Tạo Entity

Mỗi entity tương ứng với mỗi table trong database. Trong hướng dẫn này chúng ta sẽ quản lý user. Và mỗi user có id, name, email và phone. Do đó, chúng ta sẽ tạo một Java class với annotation là @Entity

Chúng tôi sẽ tạo một Java class trong vn.giasutinhoc.thymeleaf.demo.entities và đặt tên là User

Nhập code cho User

hướng dẫn sử dụng thymeleaf trong spring boot

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Tạo Repository

Spring Data JPA cho phép chúng ta cài đặt các tính năng CRUD một cách dễ dàng. Chúng ta sẽ tạo một Java interface trong vn.giasutinhoc.thymeleaf.demo.repositories và đặt tên UserRepository

Nhập code cho UserRepository và lưu ý thêm @Repository tại dòng 11

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Tạo Service

Tiếp theo chúng ta tạo một Java class trong vn.giasutinhoc.thymeleaf.demo.services và đặt tên UserService

Nhập code cho UserService và lưu ý thêm @Service tại dòng 12

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Tạo Controller

Controller cho nhiệm vụ xử lý yêu cầu từ người dùng và trả về xử lý tương ứng cho người dùng. Để tạo một Controller, chúng ta tạo một Java class và sử dụng @Controller

Chúng ta tạo một Java class trong vn.giasutinhoc.thymeleaf.demo.controller và đặt tên UserController

Nhập code cho UserController

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Tạo View

1/ Tạo tập tin index.html trong thư mục templates bằng cách chuột phải lên templates -> chọn New -> chọn HTML file và nhập code cho index.html như sau

2/ Tạo tiếp tập tin addUser.html cũng trong thư mục templates để thực hiện chức năng thêm mới user

3/ Tạo tập tin khác tên editUser.html trong thư mục templates để thực hiện chức năng thay đổi thông tin user

4/ Tạo tập tin find.html trong thư mục templates để thực hiện chức năng tìm kiếm user

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Một số thao tác khác

1/ Chuẩn bị tập tin bootstrap.min.css

  • Tập tin này chính là bootstrap được sử dụng trong các tập tin html.
  • Các bạn truy cập https://getbootstrap.com/ -> chọn version mình muốn và tải về máy
  • Giải nén, copy và paste vào thư mục static trong project

2/ Nhập code cho tập tin application.properties

Một số lưu ý khi đọc hiểu application.properties

  • Dòng 1: thymeleaf là tên cơ sở dữ liệu
  • Dong 2: root là username
  • Dong 3: root là password

Những thông tin này các bạn thay đổi cho phù hợp với máy tính của các bạn

3/ Project sau khi thực hiện các bước trên

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Build, run và demo

1/ Build: Chuột phải project (thymeleaft.demo) -> chọn Maven -> chọn Update Project…

2/ Run: Chuột phải Application.java -> chọn Run As -> Java Application

3/ Demo

  • Mở trình duyệt và nhập http://localhost:8080
  • Thêm mới một người dùng: Chọn vào Add User -> nhập đầy đủ thông tin -> chọn Save

Thêm mới thành công

  • Cập nhật thông tin người dùng: Chọn Edit -> nhập thông tin muốn thay đổi -> chọn Save

Cập nhật thành công

  • Xóa một người dùng: Chọn Delete tại dòng muốn xóa

Hướng dẫn sử dụng Thymeleaf trong Spring Boot – Tổng kết

Xây dựng một website sử dụng công nghệ Java, các bạn có thể sử dụng thuần JSP/Servet. Ngoài ra chúng ta có thể sử dụng các framework để xây dựng một website. Một trong số đó là Spring Boot mà chúng tôi đã hướng dẫn các bạn trong bài hướng dẫn này.

Bên cạnh Spring Boot, các bạn có thể nghe nói đên Spring MVC. Chúng tôi đã biên soạn những bài hướng dẫn thuộc chủ đề Spring Framework. Mời các bạn xem thêm để có cái nhìn tổng quát hơn khi làm web bằng Java.

Alert: You are not allowed to copy content or view source !!