인텔리제이로 스프링 프레임워크 프로젝트 만들기 - 3장

티스토리 뷰

스프링 입문 - 코드로 배우는 스프링부트 웹 프로젝트

인텔리제이로 스프링 프레임워크 프로젝트 만들기 - 3장 - 예제 4부터 136 p 까지 저장

parkrams 2023. 4. 4. 18:48

728x90

th:if, th:unless를 이용한 조건문 처리용 컨트롤러 작성

com.shopping.project.controller 에 ItemDTO 클래스 생성
조건문
- 짝수면 '짝수', 홀수면 '홀수' 출력

 @GetMapping(value ="/ex04")
    public String thymeleafExample04(Model model){

        List<ItemDTO> itemDTOList = new ArrayList<>();

        for (int i=1; i<=10; i++){
            ItemDTO itemDTO = new ItemDTO();
            itemDTO.setItemDetail("상품 상세 " + i);
            itemDTO.setItemNm("테스트 상품" + i);
            itemDTO.setPrice(1000*i);
            itemDTO.setRegTime(LocalDateTime.now());

            itemDTOList.add(itemDTO);
        }

        model.addAttribute("itemDTOList", itemDTOList);
        return "thymeleafEx/thymeleafEx04";
    }

th:if, th:unless를 이용한 조건문 처리용 thymeleaf 파일 작성

resources/template/thymeleafEx/thymeleafEx04.html 작성

th:if, th:unless 예제
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>상품 리스트 출력 예제</h1>
<table border="1">
    <thead>
    <tr>
        <td>순번</td>
        <td>상품명</td>
        <td>상품설명</td>
        <td>가격</td>
        <td>상품등록일</td>
    </tr>
    </thead>
    <tbody>
    <tr th:each="itemDTO, status: ${itemDTOList}">
        <td th:if="${status.even}" th:text="짝수"></td>        --------- 1.
        <td th:unless="${status.even}" th:text="홀수"></td>    --------- 2.
        <td th:text="${itemDTO.itemNm}"></td>
        <td th:text="${itemDTO.itemDetail}"></td>
        <td th:text="${itemDTO.price}"></td>
        <td th:text="${itemDTO.regTime}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

1. status 에는 현재 반복문에 대한 정보가 존재합니다. 인덱스가 짝수일 경우 status.even은 true가 됩니다. 즉 현재 인덱스가 짝수라면 순번에 '짝수'를 출력해줍니다.
1. 현재 인덱스가 짝수가 아닐 경우 즉, 홀수일 경우 순번에는 '홀수'를 출력해줍니다.

th:switch, th:case를 이용한 조건문 처리용 thymeleaf 파일 작성

resources/template/thymeleafEx/thymeleafEx04.html 파일 수정
여러개의 조건을 처리해야 할 때 사용

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>상품 데이터 출력 예제</h1>
<table border="1">
    <thead>
    <tr>
        <td>순번</td>
        <td>상품명</td>
        <td>상품설명</td>
        <td>가격</td>
        <td>상품등록일</td>
    </tr>
    </thead>
    <tbody>
    <tr th:each="itemDTO, status: ${itemDTOList}">
        <td th:switch="${status.even}">                ------------------ 1.
            <span th:case=true>짝수</span>
            <span th:case=false>홀수</span>
        </td>
        <td th:text="${itemDTO.itemNm}"></td>
        <td th:text="${itemDTO.itemDetail}"></td>
        <td th:text="${itemDTO.price}"></td>
        <td th:text="${itemDTO.regTime}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

1. ${status.even}의 값이 true일 경우는 '짝수'를 출력하고, false일 경우는 홀수이므로 '홀수'를 출력

th:href를 이용한 링크 처리용 컨트롤러 작성

Thymeleaf에서 링크를 처리하는 문법
com.shopping.project.controller 에 ThymeleafExController 클래스에 코드 작성

    @GetMapping(value="/ex05")
    public String thymeleafeExample05(){
        return "thymeleafEx/thymeleafEx05";
    }

th:href를 이용한 링크 처리용 thymeleaf 파일 작성

resources/templates/thymeleafEx에 thymeleafEx05.html 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Thymeleaf 링크 처리 예제 페이지 </h1>
    <div>
        <a th:href="@{/thymeleaf/ex01}"> 예제 1 페이지 이동</a>
    </div>
    <div>
        <a th:href="@{https://www.thymeleaf.org}"> 타임리프 공식 홈페이지 </a>
    </div>
</body>
</html>

1. 클릭 시 이전에 작성했던 예제1 페이지로 이동한다. "th:href=@{이동할 경로}" 형태로 입력합니다.
  참고로 스프링 부트에서는 애플리케이션의 루트는 "/". 만약 애플리케이션의 루트가 "/shopping"으로
  지정 했다면 html파일에 생성되는 이동 경로는 "/shopping/thymeleaf/ex01
1. thymeleaf 공식 페이지로 이동. 애플리케이션의 외부의 사이트 접근하는 절대 경로를 입력

th:href를 이용한 파라미터 데이터 전달용 thymeleaf 파일 작성

resources/templates/thymeleafEx에 thymeleafEx05.html 코드 추가

    <div>
        <a th:href="@{/thymeleaf/ex06(param1 = '파라미터 데이터1',
                     param2 = '파라미터 데이터2')}"> thymeleaf 파라미터 전달 </a>   --- 1.
    </div>

1. 전달할 매개변수를 입력한 경로 끝에 "(key=value)" 구주로 입력. 전달할 매개 변수 param1, param2에는
  각각 "파라미터 데이터1", "파라미터 데이터2"를 데이터로 입력

th:href를 이용한 파라미터 데이터 전달용 컨트롤러 작성

com.shopping.project.controller 에 ThymeleafExController 클래스에 코드 작성

```
@GetMapping(value = "/ex06")
public String thymeleafExample06(String param1, String param2, Model model){
model.addAttribute("param1",param1); -- 1.
model.addAttribute("param2",param2); -- 2.
return "thymeleafEx/thymeleafEx06";
``

\1, 2. 전달 받은 매개 변수 값을 출력

thymeleaf 페이지 레이아웃

Thymeleaf의 페이지 레이아웃 기능을 사용 하면 공통 요소 관리 쉬워짐

Thymeleaf Layout Dialect dependency 추가

     <dependency>
         <groupId>nz.net.ultraq.thymeleaf</groupId>
         <artifactId>thymeleaf-layout-dialect</artifactId>
         <version>3.1.0</version>
     </dependency>

Thymeleaf 페이지 레이아웃 예제 : 푸터 만들기

resources/templates/fragments 에 footer.html 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="footer">  ----1.
          footer 영역 입니다.     
    </div>
</html>

1. 다른 페이지에 포함시킬 영역을 th:fragment로 선언. footer 영역을 fragment로 작성

Thymeleaf 페이지 레이아웃 예제 : 헤더 만들기

resources/templates/fragments 에 header.html 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="header">  ----1.
          header 영역 입니다.     
    </div>
</html>

1. 마찬가지로 다른 페이지에 포함시킬 영역을 th:fragment로 선언. header영역을 fragment로 작성

Thymeleaf 페이지 레이아웃 예제 : 본문 레이아웃

resources/templates/layouts 에 layout1.html 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">            ---- 1.
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <th:block layout:fragment="script"></th:block>
    <th:block layout:fragment="css"></th:block>

</head>
<body>

<div th:replace="fragments/header::header"></div>        ------ 2.

<div layout:fragment="content" class="content">            ------ 3.

</div>

<div th:replace="fragments/footer::footer"></div>            ---- 4.

</body>
</html>

1. layout 기능을 사용하기 위해서 html 태그에 layout 네임스페이스를 추가.
1. th:replace 속성은 해당 속성이 선언된 html 태그를 다른 html 파일로 치환하는 것으로 이해하면 됨
  fragments 폴더 아래의 header.html 파일의 "th:fragment=header" 영역을 가지고 온다
1. layout에서 변경되는 영역을 fragment로 설정. 쇼핑몰 페이짇를이 들어갈 영역
1. header 영역과 마찬가지로 fragments 폴더 아래의 footer.html 파일의 "th:fragment="footer"영역을 가지고 옴

Thymeleaf 페이지 레이아웃 예제: thymeleaf 파일 생성

resources/templates/thymeleafEx 에 thymeleafEx07.html 작성

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

---- 2. 본문 영역 입니다.

``` - 1. layouts 폴더에 아래에 있는 layout.html을 적용하기 위해서 네임스페이스를 추가 - 2. layout1.html 파일의 (div layout:fragment="content"> 영역에 들어가는 영역

Thymeleaf 페이지 레이아웃 예제 : 컨트롤러 클래스 작성

com.shopping.project.controller에 ThymeleafExController에 코드추가

@GetMapping(value = "/ex07")
  public String thymeleafExample07(){
      return "thymeleafEx/thymeleafEx07";
  }

728x90

저작자표시 비영리 동일조건 (새창열림)

'스프링 입문 - 코드로 배우는 스프링부트 웹 프로젝트' 카테고리의 다른 글

인텔리제이로 스프링 프레임워크 프로젝트 만들기 - 5장 - (0)	2023.04.05
인텔리제이로 스프링 프레임워크 프로젝트 만들기 - 3장 - 예제 3까지 (0)	2023.04.04
인텔리제이로 스프링 프레임워크 프로젝트 만들기 - 2장 (0)	2023.04.03
스프링 부트 쇼핑몰 프로젝트 - 개발 환경 구축 (0)	2023.04.03

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

글 보관함

개발 시작한 사람 블로그

티스토리 뷰