[Java+SpringBoot+JPA] 기본 CRUD 구현하기 (2)html

2023. 12. 23. 22:48ㆍPratice/CRUD

반응형

 

 

 

▪ layout 분리

 

[HTML]header, footer / fragments 이용하여 layouts 분리하기

layouts 폴더 layout.html fragments 폴더 header.html footer.html fragments 폴더 header.html 본문 내용

dalhyehye.tistory.com

 

 

 

▪ 기본 CRUD 구현하기 (1) java

 

[Java+SpringBoot+JPA] 기본 CRUD 구현하기 (1)java

🟢 Entity - BaseEntity 여러 엔터티 클래스에서 상속받아 재사용할 수 있도록 설계 BaseEntity 클래스를 상속받는 하위 엔터티 클래스는 생성일(reDate) 및 수정일(moDate)을 자동으로 관리 @Getter @Setter @Mapp

dalhyehye.tistory.com

 

 

🟢 fragments > headr.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
  <meta charset="UTF-8">
  <title>header</title>
</head>

<body>
<div th:fragment="header">
  <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
    <div class="container-fluid">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Practice</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/productlist">Product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">User</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
</body>
</html>

 

 

🟢 fragments > footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
  <meta charset="UTF-8">
  <title>footer</title>
</head>

<body>
<div th:fragment="footer">
  <div class="mt-4 p-5 bg-light text-dark text-center rounded">
    <p>Copyright ⓒ dalhyehye All rights reserved.</p>
  </div>
</div>
</body>
</html>

 

 

🟢 product > list.html

상품 목록

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

<head>
  <meta charset="UTF-8">
  <title>Product List</title>
</head>

<body>
  <div layout:fragment="content">
    <div class="row">
      <div class="col-sm-3"></div>    <!-- 좌측 여백 -->
      <div class="col-sm-6">
        <button type="button" class="btn btn-primary mt-5" th:onclick="|location.href='@{/productinsert}'|">상품 등록</button>
        <table class="table table-bordered mt-3 mb-5 text-center">
          <thead>
            <tr>
              <th>번호</th>
              <th>상품명</th>
              <th>가격</th>
              <th>등록일</th>
              <th>수정일</th>
            </tr>
          </thead>

          <tbody>
            <tr th:each="data:${productDTOS}">
              <td>[[${data.productId}]]</td>
              <td><a th:href="@{/productdetail(productId=${data.productId})}">[[${data.productName}]]</a></td>
              <td th:text="${data.productPrice}">가격</td>
              <td th:text="${#temporals.format(data.reDate, 'yyyy-MM-dd')}">등록일</td>
              <td th:text="${#temporals.format(data.moDate, 'yyyy-MM-dd')}">수정일</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-sm-3"></div>    <!-- 우측 여백 -->
    </div>
  </div>
</body>
</html>
더보기

▪ th:each="data:${productDTOS}"

productDTOS 리스트에 있는 각 데이터 반복

각 반복에서 현재 데이터 항목은 data 변수에 할당

 

▪ th:text="${#temporals.format(data.reDate, 'yyyy-MM-dd')}"

reDate 속성 값을 지정된 날짜 형식으로 포맷하여 출력

 

 

🟢 product > insert.html

상품 등록

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

<head>
  <meta charset="UTF-8">
  <title>Product Insert</title>
</head>

<body>
<div layout:fragment="content">
  <div class="row">
    <div class="col-sm-3"></div>    <!-- 좌측 여백 -->
    <div class="col-sm-6">
      <form th:action="@{/productinsert}" method="post">
        <input type="hidden" name="productId" th:value="${productId}">
        <input type="hidden" name="reDate" th:value="${reDate}">
        <div class="mb-3 mt-3">
          <label for="productName">상품명</label>
          <input type="text" class="form-control" id="productName" placeholder="상품명을 입력해주세요." name="productName">
        </div>
        <div class="mb-3 mt-3">
          <label for="productPrice">가격</label>
          <input type="text" class="form-control" id="productPrice" placeholder="가격을 입력해주세요." name="productPrice">
        </div>
        <button type="submit" class="btn btn-primary mb-3">등록</button>
        <button type="reset" class="btn btn-primary mb-3">다시</button>
        <button type="button" class="btn btn-primary mb-3" th:onclick="|location.href='@{/productlist}'|">목록</button>
      </form>
    </div>
    <div class="col-sm-3"></div>    <!-- 우측 여백 -->
  </div>
</div>
</body>
</html>

 

 

 

🟢 product > detail.html

상품 상세

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

<head>
  <meta charset="UTF-8">
  <title>Product Detail</title>
</head>

<body>
<div layout:fragment="content">
  <div class="row">
    <div class="col-sm-3"></div>    <!-- 좌측 여백 -->
    <div class="col-sm-6">
        <div class="mb-3 mt-3">
          <label for="productName">상품명</label>
          <input type="text" class="form-control" id="productName" name="productName" th:field="${productDTO.productName}" readonly>
        </div>
        <div class="mb-3 mt-3">
          <label for="productPrice">가격</label>
          <input type="text" class="form-control" id="productPrice"name="productPrice" th:field="${productDTO.productName}" readonly>
        </div>
        <div class="mb-3 mt-3">
          <label for="reDate">등록일</label>
          <input type="text" class="form-control" id="reDate" name="reDate" th:field="${productDTO.reDate}" readonly>
        </div>
        <div class="mb-3 mt-3">
          <label for="moDate">수정일</label>
          <input class="form-control" id="moDate"name="moDate" th:field="${productDTO.moDate}" readonly>
        </div>
        <button type="button" class="btn btn-primary mb-3" th:onclick="|location.href='@{/productupdate(productId=${productDTO.productId})}'|">수정</button>
        <button type="button" class="btn btn-primary mb-3" th:onclick="|location.href='@{/productdelete(productId=${productDTO.productId})}'|">삭제</button>
        <button type="button" class="btn btn-primary mb-3" onclick="location.href='/productlist'">목록</button>
    </div>
    <div class="col-sm-3"></div>    <!-- 우측 여백 -->
  </div>
</div>
</body>
</html>
더보기
th:value

<input> 태그와 함께 사용
해당 입력 필드의 초기값을 설정

사용자에게 입력값을 보여주거나, 서버에서 받아온 값을 입력 필드에 미리 설정할 때 사용



th:field

<form> 요소 내에서 사용
폼 입력 필드에 바인딩할 객체와 속성을 지정
입력 필드와 객체 속성의 양방향 바인딩


th:text
텍스트 컨텐츠에 사용
태그 내부에 텍스트 값을 설정
사용자가 입력한 값을 표시할 때 사용

 

🟢 product > update.html

상품 수정

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

<head>
  <meta charset="UTF-8">
  <title>Product Update</title>
</head>

<body>
<div layout:fragment="content">
  <div class="row">
    <div class="col-sm-3"></div>    <!-- 좌측 여백 -->
    <div class="col-sm-6">
      <form th:action="@{/productupdate}" method="post" th:object="${productDTO}">
        <input type="hidden" name="productId" th:value="*{productId}">
        <input type="hidden" name="moDate" th:value="*{moDate}">
        <div class="mb-3 mt-3">
          <label for="productName">상품명</label>
          <input type="text" class="form-control" id="productName" name="productName" th:field="*{productName}">
        </div>
        <div class="mb-3 mt-3">
          <label for="productPrice">가격</label>
          <input type="text" class="form-control" id="productPrice"name="productPrice" th:field="*{productPrice}">
        </div>
        <div class="mb-3 mt-3">
          <label for="reDate">등록일</label>
          <input class="form-control" id="reDate"name="reDate" th:field="*{reDate}" readonly>
        </div>
        <button type="submit" class="btn btn-primary mb-3">수정</button>
        <button type="reset" class="btn btn-primary mb-3">다시</button>
        <button type="button" class="btn btn-primary mb-3" onclick="location.href='/productlist'">목록</button>
      </form>
    </div>
    <div class="col-sm-3"></div>    <!-- 우측 여백 -->
  </div>
</div>
</body>
</html>
더보기
th:object="${productDTO}"
폼 데이터를 객체에 바인딩하는 데 사용
폼을 제출할 때 사용자 입력을 바인딩할 객체를 지정

사용자가 입력한 값들이 자동으로 productDTO 객체에 반영되고, 이 객체의 값을 폼 필드에 초기값으로 설정

 

반응형

'Pratice > CRUD' 카테고리의 다른 글

[Java+SpringBoot+JPA] 기본 CRUD 구현하기 (5) 검색 & 페이지 기능  (0) 2023.12.24
[Java+SpringBoot+JPA] 기본 CRUD 구현하기 (4) enum으로 카테고리 추가  (0) 2023.12.24
[Java+SpringBoot+JPA] 기본 CRUD 구현하기 (3-1) required로 유효성 검사  (0) 2023.12.24
[Java+SpringBoot+JPA] 기본 CRUD 구현하기 (3)검증 오류 추가  (0) 2023.12.24
[Java+SpringBoot+JPA] 기본 CRUD 구현하기 (1)java  (1) 2023.12.23

관련글

티스토리툴바